-This software is licensed under the MIT licence (as defined
+This software is licensed under the MIT license (as defined
by the OSI at http://www.opensource.org/licenses/mit-license.php)
****************************************************************************
svn checkout http://jquery-ui-map.googlecode.com/svn/trunk/ jquery-ui-map-read-only
Checked out revision 254.
-jQuery UI (http://jqueryui.com/) [MIT licence]
+jQuery UI (http://jqueryui.com/) [MIT license]
JQM-DateBox (https://github.com/jtsage/jquery-mobile-datebox) [CC 3.0 Attribution]
developed by JTSage (http://dev.jtsage.com/blog/)
-jQuery Mobile (http://jquerymobile.com/) [MIT licence]
+jQuery Mobile (http://jquerymobile.com/) [MIT license]
-jQuery (http://jquery.com/) [MIT licence]
+jQuery (http://jquery.com/) [MIT license]
-(parts of) Underscore (http://documentcloud.github.com/underscore/) [MIT licence]
+(parts of) Underscore (http://documentcloud.github.com/underscore/) [MIT license]
-jLayout (http://www.bramstein.com/projects/jlayout/) [BSD licence]
+jLayout (http://www.bramstein.com/projects/jlayout/) [BSD license]
-jSizes (http://www.bramstein.com/projects/jsizes/) [BSD licence]
+jSizes (http://www.bramstein.com/projects/jsizes/) [BSD license]
+
+Globalize (http://github.com/jquery/globalize/) [MIT license]
+SHELL := /bin/bash
+
## Project setting
DEBUG ?= yes
PROJECT_NAME = tizen-web-ui-fw
JSLINT_LEVEL = 1
JSLINT = jslint --sloppy --eqeq --bitwise --forin --nomen --predef jQuery --color --plusplus --browser --jqmspace
+COMMON_WIDGET = common
INLINE_PROTO = 1
OUTPUT_ROOT = $(CURDIR)/build
FRAMEWORK_ROOT = ${OUTPUT_ROOT}/${PROJECT_NAME}/${VERSION}
FW_THEME_CSS_FILE = ${PROJECT_NAME}-theme.css
FW_WIDGET_CSS_FILE = ${WIDGET_CSS_OUTPUT_ROOT}/${PROJECT_NAME}-widget.css
+GEO_VERSION = jquery-geo-1.0a4
+
LIBS_JS_FILES = jlayout/jquery.sizes.js \
jlayout/jlayout.border.js \
jlayout/jlayout.grid.js \
jlayout/jlayout.flexgrid.js \
jlayout/jlayout.flow.js \
jlayout/jquery.jlayout.js \
+ jquery.easing.1.3.js \
+ jquery.tmpl.js \
+ jquery.mobile.js \
+ ${GEO_VERSION}/js/jquery.geo.head.js \
+ ${GEO_VERSION}/js/jquery.mousewheel.js \
+ ${GEO_VERSION}/js/jquery.geo.core.js \
+ ${GEO_VERSION}/js/jquery.geo.geographics.js \
+ ${GEO_VERSION}/js/jquery.geo.geomap.js \
+ ${GEO_VERSION}/js/jquery.geo.tiled.js \
+ ${GEO_VERSION}/js/jquery.geo.shingled.js \
$(NULL)
JQUERY_MOBILE_CSS = submodules/jquery-mobile/compiled/jquery.mobile.structure.css \
$(NULL)
JQUERY_MOBILE_IMAGES = submodules/jquery-mobile/css/themes/default/images
-JQM_VERSION = jquery-mobile-1.0.1pre
+JQM_VERSION = jquery-mobile-1.1.0
JQM_LIB_PATH = $(CURDIR)/libs/js/${JQM_VERSION}
ifeq (${DEBUG},yes)
-LIBS_JS_FILES +=\
- jquery.mobile.js \
- $(NULL)
-JQUERY = jquery-1.6.4.js
+JQUERY = jquery-1.7.1.js
else
LIBS_JS_FILES +=\
jquery.mobile.min.js \
$(NULL)
-JQUERY = jquery-1.6.4.min.js
+JQUERY = jquery-1.7.1.min.js
endif
LIBS_CSS_FILES =
jqm: init
# Building jQuery Mobile...
- cd ${JQM_LIB_PATH} && make all-but-min || exit 1; \
+ cd ${JQM_LIB_PATH} && make js NODE=/usr/bin/node || exit 1; \
cp -f ${JQM_LIB_PATH}/compiled/*.js ${JQM_LIB_PATH}/../; \
third_party: init jqm
@@cd ${LIBS_DIR}/js; \
for f in ${LIBS_JS_FILES}; do \
cat $$f >> ${FW_LIB_JS}; \
- uglifyjs $$f >> ${FW_LIB_MIN}; \
+ uglifyjs --ascii $$f >> ${FW_LIB_MIN}; \
echo "" >> ${FW_LIB_MIN}; \
done; \
cp ${LIBS_DIR}/js/${JQUERY} ${JS_OUTPUT_ROOT}/jquery.js
while read REPLY; do \
echo " # Building widget $$REPLY"; \
if test ${JSLINT_LEVEL} -ge 1; then \
- for FNAME in ${WIDGETS_DIR}/$$REPLY/js/*.js; do \
- ${JSLINT} $$FNAME; \
- if test ${JSLINT_LEVEL} -ge 2 -a $$? -ne 0; then \
- exit 1; \
- fi; \
- done; \
+ if test $$REPLY != ${COMMON_WIDGET}; then \
+ for FNAME in ${WIDGETS_DIR}/$$REPLY/js/*.js; do \
+ ${JSLINT} $$FNAME; \
+ if test ${JSLINT_LEVEL} -ge 2 -a $$? -ne 0; then \
+ exit 1; \
+ fi; \
+ done; \
+ fi; \
fi; \
if test "x${INLINE_PROTO}x" = "x1x"; then \
./tools/inline-protos.sh ${WIDGETS_DIR}/$$REPLY >> ${WIDGETS_DIR}/$$REPLY/js/$$REPLY.js.compiled; \
make -C src/themes || exit $?
-compress: widgets loader
- @@echo " # Compressing....";
- echo '/*' > ${FW_MIN}
- cat ${COPYING_FILE} >> ${FW_MIN}
- echo '*/' >> ${FW_MIN}
- uglifyjs -nc ${FW_JS} >> ${FW_MIN}
+compress: widgets loader themes
+ # Javacript code compressing
+ @@echo " # Compressing...."; \
+ echo '/*' > ${FW_MIN}; \
+ cat ${COPYING_FILE} >> ${FW_MIN}; \
+ echo '*/' >> ${FW_MIN}; \
+ uglifyjs --ascii -nc ${FW_JS} >> ${FW_MIN}; \
+ # CSS compressing
+ @@cd ${THEME_OUTPUT_ROOT}; \
+ for csspath in */*.css; do \
+ echo "Compressing $$csspath"; \
+ cleancss -o $${csspath/%.css/.min.css} $$csspath; \
+ done
docs: init
for v_compat in ${VERSION_COMPAT}; do \
ln -sf ${VERSION} ${FRAMEWORK_ROOT}/../$$v_compat; \
done;
+ ln -sf ${VERSION} ${FRAMEWORK_ROOT}/../latest
demo: widgets
mkdir -p ${OUTPUT_ROOT}/demos
install: all
- mkdir -p ${INSTALL_DIR}/lib/tizen-web-ui-fw ${INSTALL_DIR}/bin ${INSTALL_DIR}/share/tizen-web-ui-fw/demos/
- cp -av ${OUTPUT_ROOT}/tizen-web-ui-fw/* src/template ${INSTALL_DIR}/lib/tizen-web-ui-fw/
- cp -av tools/* ${INSTALL_DIR}/bin/
- cp -av demos/tizen-gray ${INSTALL_DIR}/share/tizen-web-ui-fw/demos/ && cd ${INSTALL_DIR}/share/tizen-web-ui-fw/demos/tizen-gray && sed -i -e "s#../../build#../../../../lib#g" *.html
+ mkdir -p ${INSTALL_DIR}/bin ${INSTALL_DIR}/share/tizen-web-ui-fw/demos/ ${INSTALL_DIR}/share/tizen-web-ui-fw/bin/
+ cp -av ${OUTPUT_ROOT}/tizen-web-ui-fw/* src/template ${INSTALL_DIR}/share/tizen-web-ui-fw/
+ cp -av tools/* ${INSTALL_DIR}/share/tizen-web-ui-fw/bin/
+ cp -av demos/tizen-winsets ${INSTALL_DIR}/share/tizen-web-ui-fw/demos/ && cd ${INSTALL_DIR}/share/tizen-web-ui-fw/demos/tizen-winsets && sed -i -e "s#../../build#../../..#g" *.html
coverage: clean all
@@mkdir -p ${CSS_OUTPUT_ROOT}
@@mkdir -p ${CSS_IMAGES_OUTPUT_DIR}
@@mkdir -p ${PROTOTYPE_HTML_OUTPUT_DIR}
- @@test -h ${LATEST_ROOT} || ln -s ${FRAMEWORK_ROOT} ${LATEST_ROOT}
@@rm -f docs/*.html
* node-jslint: BSD License (build-tools/lib/jslint/LICENSE)
* jslint: Customized MIT License (build-tools/lib/jslint/jslint.js)
* nopt, abbrev: MIT License (build-tools/lib/jslint/nopt/LICENSE)
+
+* clean-css (http://github.com/GoalSmashers/clean-css)
+ * Version: 0.4.0
+ * Description: A CSS code minifier
+ * Mods
+ * Fix local library path and name
+ * License
+ * MIT license (build-tools/lib/cleancss/LICENSE)
+
+* optimist (http://github.com/substack/node-optimist)
+ * Version: 0.3.4
+ * Description: A node.js command-line option parser libraryr, used by clean-css.
+ * License
+ * MIT/X11 license (build-tools/lib/optimist/LICENSE)
+
+* wordwrap (http://github.com/substack/node-wordwrap)
+ * Version: b026541 (Released at Apr. 30 2012)
+ * Description: Word-wrapping library, used by optimist.
+ * License
+ * MIT license (build-tools/lib/wordwrap/LICENSE)
--- /dev/null
+#!/usr/bin/env node
+
+global.util = require("util");
+var argv = require('optimist').argv,
+ cleanCss = require('cleancss'),
+ fs = require('fs');
+
+var options = {
+ source: null,
+ target: null
+};
+var cleanOptions = {};
+
+if (argv.o) options.target = argv.o;
+if (argv._) options.source = argv._[0];
+if (argv.e) cleanOptions.removeEmpty = true;
+
+if (argv.h || argv.help) {
+ global.util.print('Usage: cleancss [-e] -o <output-file> <input-file>\n');
+ process.exit(0);
+}
+
+if (options.source) {
+ fs.readFile(options.source, 'utf8', function(error, text) {
+ if (error) throw error;
+ output(cleanCss.process(text));
+ });
+} else {
+ var stdin = process.openStdin();
+ stdin.setEncoding('utf-8');
+ var text = '';
+ stdin.on('data', function(chunk) { text += chunk; });
+ stdin.on('end', function() { output(cleanCss.process(text, cleanOptions)); });
+}
+
+function output(cleaned) {
+ if (options.target) {
+ var out = fs.createWriteStream(options.target, { flags: 'w', encoding: 'utf-8', mode: 0644 });
+ out.write(cleaned);
+ out.end();
+ } else {
+ process.stdout.write(cleaned);
+ }
+};
fs = require('fs'),
sys = require('sys');
-require.paths.unshift(path.join(__dirname, '..', 'lib'));
+try {
+ // For old node.js versions
+ require.paths.unshift( path.join( __dirname, '..', 'lib' ) );
+} catch ( ex ) {
+}
var less = require('less');
var args = process.argv.slice(1);
// Add ../lib to require path
// by Youmin Ha <youmin.ha@samsung.com>
var path = require("path");
-require.paths.unshift(path.join(__dirname, '..', 'lib'));
+
+try {
+ require.paths.unshift(path.join(__dirname, '..', 'lib'));
+} catch (ex) {
+}
var uglify = require("uglify-js"), // symlink ~/.node_libraries/uglify-js.js to ../uglify-js.js
jsp = uglify.parser,
--- /dev/null
+Copyright (c) 2011 GoalSmashers.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.
\ No newline at end of file
--- /dev/null
+var util = require('util');
+
+var CleanCSS = {
+ colors: {
+ white: '#fff',
+ black: '#000',
+ fuchsia: '#f0f',
+ yellow: '#ff0'
+ },
+
+ specialComments: [],
+ contentBlocks: [],
+
+ process: function(data, options) {
+ var self = this,
+ replace = function(pattern, replacement) {
+ if (typeof arguments[0] == 'function')
+ arguments[0]();
+ else
+ data = data.replace.apply(data, arguments);
+ };
+
+ options = options || {};
+
+ // replace function
+ if (options.debug) {
+ var originalReplace = replace;
+ replace = function(pattern, replacement) {
+ var name = typeof pattern == 'function' ?
+ /function (\w+)\(/.exec(pattern.toString())[1] :
+ pattern;
+ console.time(name);
+ originalReplace(pattern, replacement);
+ console.timeEnd(name);
+ };
+ }
+
+ // strip comments one by one
+ replace(function stripComments() {
+ data = self.stripComments(data);
+ });
+
+ // replace content: with a placeholder
+ replace(function stripContent() {
+ data = self.stripContent(data);
+ });
+
+ replace(/;\s*;+/g, ';') // whitespace between semicolons & multiple semicolons
+ replace(/\n/g, '') // line breaks
+ replace(/\s+/g, ' ') // multiple whitespace
+ replace(/ !important/g, '!important') // whitespace before !important
+ replace(/[ ]?,[ ]?/g, ',') // space with a comma
+ replace(/progid:[^(]+\(([^\)]+)/g, function(match, contents) { // restore spaces inside IE filters (IE 7 issue)
+ return match.replace(/,/g, ', ');
+ })
+ replace(/ ([+~>]) /g, '$1') // replace spaces around selectors
+ replace(/\{([^}]+)\}/g, function(match, contents) { // whitespace inside content
+ return '{' + contents.trim().replace(/(\s*)([;:=\s])(\s*)/g, '$2') + '}';
+ })
+ replace(/;}/g, '}') // trailing semicolons
+ replace(/rgb\s*\(([^\)]+)\)/g, function(match, color) { // rgb to hex colors
+ var parts = color.split(',');
+ var encoded = '#';
+ for (var i = 0; i < 3; i++) {
+ var asHex = parseInt(parts[i], 10).toString(16);
+ encoded += asHex.length == 1 ? '0' + asHex : asHex;
+ }
+ return encoded;
+ })
+ replace(/([^"'=\s])\s*#([0-9a-f]{6})/gi, function(match, prefix, color) { // long hex to short hex
+ if (color[0] == color[1] && color[2] == color[3] && color[4] == color[5])
+ return (prefix + (/:$/.test(prefix) ? '' : ' ')) + '#' + color[0] + color[2] + color[4];
+ else
+ return (prefix + (/:$/.test(prefix) ? '' : ' ')) + '#' + color;
+ })
+ replace(/(color|background):(\w+)/g, function(match, property, colorName) { // replace standard colors with hex values (only if color name is longer then hex value)
+ if (CleanCSS.colors[colorName]) return property + ':' + CleanCSS.colors[colorName];
+ else return match;
+ })
+ replace(/([: ,\(])#f00/g, '$1red') // replace #f00 with red as it's shorter
+ replace(/font\-weight:(\w+)/g, function(match, weight) { // replace font weight with numerical value
+ if (weight == 'normal') return 'font-weight:400';
+ else if (weight == 'bold') return 'font-weight:700';
+ else return match;
+ })
+ replace(/progid:DXImageTransform\.Microsoft\.(Alpha|Chroma)(\([^\)]+\))([;}'"])/g, function(match, filter, args, suffix) { // IE shorter filters but only if single (IE 7 issue)
+ return filter.toLowerCase() + args + suffix;
+ })
+ replace(/(\s|:)0(px|em|ex|cm|mm|in|pt|pc|%)/g, '$1' + '0') // zero + unit to zero
+ replace(/(border|border-top|border-right|border-bottom|border-left|outline):none/g, '$1:0') // none to 0
+ replace(/(background):none([;}])/g, '$1:0$2') // background:none to 0
+ replace(/0 0 0 0([^\.])/g, '0$1') // multiple zeros into one
+ replace(/([: ,=\-])0\.(\d)/g, '$1.$2')
+ if (options.removeEmpty) replace(/[^}]+?{\s*?}/g, '') // empty elements
+ if (data.indexOf('charset') > 0) replace(/(.+)(@charset [^;]+;)/, '$2$1') // move first charset to the beginning
+ replace(/(.)(@charset [^;]+;)/g, '$1') // remove all extra charsets that are not at the beginning
+ replace(/\*([\.#:\[])/g, '$1') // remove universal selector when not needed (*#id, *.class etc)
+ replace(/ {/g, '{') // whitespace before definition
+ replace(/\} /g, '}') // whitespace after definition
+
+ // Get the special comments, content content, and spaces inside calc back
+ replace(/calc\([^\}]+\}/g, function(match) {
+ return match.replace(/\+/g, ' + ');
+ });
+ replace(/__CSSCOMMENT__/g, function() { return self.specialComments.shift(); });
+ replace(/__CSSCONTENT__/g, function() { return self.contentBlocks.shift(); });
+
+ return data.trim() // trim spaces at beginning and end
+ },
+
+ // Strips special comments (/*! ... */) by replacing them by __CSSCOMMENT__ marker
+ // for further restoring. Plain comments are removed. It's done by scanning datq using
+ // String#indexOf scanning instead of regexps to speed up the process.
+ stripComments: function(data) {
+ var tempData = [],
+ nextStart = 0,
+ nextEnd = 0,
+ cursor = 0;
+
+ for (; nextEnd < data.length; ) {
+ nextStart = data.indexOf('/*', nextEnd);
+ nextEnd = data.indexOf('*/', nextStart);
+ if (nextStart == -1 || nextEnd == -1) break;
+
+ tempData.push(data.substring(cursor, nextStart))
+ if (data[nextStart + 2] == '!') {
+ // in case of special comments, replace them with a placeholder
+ this.specialComments.push(data.substring(nextStart, nextEnd + 2));
+ tempData.push('__CSSCOMMENT__');
+ }
+ cursor = nextEnd + 2;
+ }
+
+ return tempData.length > 0 ?
+ tempData.join('') + data.substring(cursor, data.length) :
+ data;
+ },
+
+ // Strips content tags by replacing them by __CSSCONTENT__ marker
+ // for further restoring. It's done via string scanning instead of
+ // regexps to speed up the process.
+ stripContent: function(data) {
+ var tempData = [],
+ nextStart = 0,
+ nextEnd = 0,
+ tempStart = 0,
+ cursor = 0,
+ matchedParenthesis = null;
+
+ // Finds either first (matchedParenthesis == null) or second matching parenthesis
+ // so we can determine boundaries of content block.
+ var nextParenthesis = function(pos) {
+ var min,
+ max = data.length;
+
+ if (matchedParenthesis) {
+ min = data.indexOf(matchedParenthesis, pos);
+ if (min == -1) min = max;
+ } else {
+ var next1 = data.indexOf("'", pos);
+ var next2 = data.indexOf('"', pos);
+ if (next1 == -1) next1 = max;
+ if (next2 == -1) next2 = max;
+
+ min = next1 > next2 ? next2 : next1;
+ }
+
+ if (min == max) return -1;
+
+ if (matchedParenthesis) {
+ matchedParenthesis = null;
+ return min;
+ } else {
+ // check if there's anything else between pos and min that doesn't match ':' or whitespace
+ if (/[^:\s]/.test(data.substring(pos, min))) return -1;
+ matchedParenthesis = data.charAt(min);
+ return min + 1;
+ }
+ };
+
+ for (; nextEnd < data.length; ) {
+ nextStart = data.indexOf('content', nextEnd);
+ if (nextStart == -1) break;
+
+ nextStart = nextParenthesis(nextStart + 7);
+ nextEnd = nextParenthesis(nextStart);
+ if (nextStart == -1 || nextEnd == -1) break;
+
+ tempData.push(data.substring(cursor, nextStart - 1));
+ tempData.push('__CSSCONTENT__');
+ this.contentBlocks.push(data.substring(nextStart - 1, nextEnd + 1));
+ cursor = nextEnd + 1;
+ }
+
+ return tempData.length > 0 ?
+ tempData.join('') + data.substring(cursor, data.length) :
+ data;
+ }
+};
+
+module.exports = CleanCSS;
--- /dev/null
+module.exports = require("./clean");
sys = require('sys'),
fs = require('fs');
-require.paths.unshift(path.join(__dirname, '..'));
+try {
+ // For old node.js versions
+ require.paths.unshift( path.join( __dirname, '..' ) );
+} catch ( ex ) {
+}
var less = {
version: [1, 1, 3],
--- /dev/null
+Copyright 2010 James Halliday (mail@substack.net)
+
+This project is free software released under the MIT/X11 license:
+
+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.
--- /dev/null
+var path = require('path');
+var wordwrap = require('wordwrap');
+
+/* Hack an instance of Argv with process.argv into Argv
+ so people can do
+ require('optimist')(['--beeble=1','-z','zizzle']).argv
+ to parse a list of args and
+ require('optimist').argv
+ to get a parsed version of process.argv.
+*/
+
+var inst = Argv(process.argv.slice(2));
+Object.keys(inst).forEach(function (key) {
+ Argv[key] = typeof inst[key] == 'function'
+ ? inst[key].bind(inst)
+ : inst[key];
+});
+
+var exports = module.exports = Argv;
+function Argv (args, cwd) {
+ var self = {};
+ if (!cwd) cwd = process.cwd();
+
+ self.$0 = process.argv
+ .slice(0,2)
+ .map(function (x) {
+ var b = rebase(cwd, x);
+ return x.match(/^\//) && b.length < x.length
+ ? b : x
+ })
+ .join(' ')
+ ;
+
+ if (process.argv[1] == process.env._) {
+ self.$0 = process.env._.replace(
+ path.dirname(process.execPath) + '/', ''
+ );
+ }
+
+ var flags = { bools : {}, strings : {} };
+
+ self.boolean = function (bools) {
+ if (!Array.isArray(bools)) {
+ bools = [].slice.call(arguments);
+ }
+
+ bools.forEach(function (name) {
+ flags.bools[name] = true;
+ });
+
+ return self;
+ };
+
+ self.string = function (strings) {
+ if (!Array.isArray(strings)) {
+ strings = [].slice.call(arguments);
+ }
+
+ strings.forEach(function (name) {
+ flags.strings[name] = true;
+ });
+
+ return self;
+ };
+
+ var aliases = {};
+ self.alias = function (x, y) {
+ if (typeof x === 'object') {
+ Object.keys(x).forEach(function (key) {
+ self.alias(key, x[key]);
+ });
+ }
+ else if (Array.isArray(y)) {
+ y.forEach(function (yy) {
+ self.alias(x, yy);
+ });
+ }
+ else {
+ var zs = (aliases[x] || []).concat(aliases[y] || []).concat(x, y);
+ aliases[x] = zs.filter(function (z) { return z != x });
+ aliases[y] = zs.filter(function (z) { return z != y });
+ }
+
+ return self;
+ };
+
+ var demanded = {};
+ self.demand = function (keys) {
+ if (typeof keys == 'number') {
+ if (!demanded._) demanded._ = 0;
+ demanded._ += keys;
+ }
+ else if (Array.isArray(keys)) {
+ keys.forEach(function (key) {
+ self.demand(key);
+ });
+ }
+ else {
+ demanded[keys] = true;
+ }
+
+ return self;
+ };
+
+ var usage;
+ self.usage = function (msg, opts) {
+ if (!opts && typeof msg === 'object') {
+ opts = msg;
+ msg = null;
+ }
+
+ usage = msg;
+
+ if (opts) self.options(opts);
+
+ return self;
+ };
+
+ function fail (msg) {
+ self.showHelp();
+ if (msg) console.error(msg);
+ process.exit(1);
+ }
+
+ var checks = [];
+ self.check = function (f) {
+ checks.push(f);
+ return self;
+ };
+
+ var defaults = {};
+ self.default = function (key, value) {
+ if (typeof key === 'object') {
+ Object.keys(key).forEach(function (k) {
+ self.default(k, key[k]);
+ });
+ }
+ else {
+ defaults[key] = value;
+ }
+
+ return self;
+ };
+
+ var descriptions = {};
+ self.describe = function (key, desc) {
+ if (typeof key === 'object') {
+ Object.keys(key).forEach(function (k) {
+ self.describe(k, key[k]);
+ });
+ }
+ else {
+ descriptions[key] = desc;
+ }
+ return self;
+ };
+
+ self.parse = function (args) {
+ return Argv(args).argv;
+ };
+
+ self.option = self.options = function (key, opt) {
+ if (typeof key === 'object') {
+ Object.keys(key).forEach(function (k) {
+ self.options(k, key[k]);
+ });
+ }
+ else {
+ if (opt.alias) self.alias(key, opt.alias);
+ if (opt.demand) self.demand(key);
+ if (typeof opt.default !== 'undefined') {
+ self.default(key, opt.default);
+ }
+
+ if (opt.boolean || opt.type === 'boolean') {
+ self.boolean(key);
+ }
+ if (opt.string || opt.type === 'string') {
+ self.string(key);
+ }
+
+ var desc = opt.describe || opt.description || opt.desc;
+ if (desc) {
+ self.describe(key, desc);
+ }
+ }
+
+ return self;
+ };
+
+ var wrap = null;
+ self.wrap = function (cols) {
+ wrap = cols;
+ return self;
+ };
+
+ self.showHelp = function (fn) {
+ if (!fn) fn = console.error;
+ fn(self.help());
+ };
+
+ self.help = function () {
+ var keys = Object.keys(
+ Object.keys(descriptions)
+ .concat(Object.keys(demanded))
+ .concat(Object.keys(defaults))
+ .reduce(function (acc, key) {
+ if (key !== '_') acc[key] = true;
+ return acc;
+ }, {})
+ );
+
+ var help = keys.length ? [ 'Options:' ] : [];
+
+ if (usage) {
+ help.unshift(usage.replace(/\$0/g, self.$0), '');
+ }
+
+ var switches = keys.reduce(function (acc, key) {
+ acc[key] = [ key ].concat(aliases[key] || [])
+ .map(function (sw) {
+ return (sw.length > 1 ? '--' : '-') + sw
+ })
+ .join(', ')
+ ;
+ return acc;
+ }, {});
+
+ var switchlen = longest(Object.keys(switches).map(function (s) {
+ return switches[s] || '';
+ }));
+
+ var desclen = longest(Object.keys(descriptions).map(function (d) {
+ return descriptions[d] || '';
+ }));
+
+ keys.forEach(function (key) {
+ var kswitch = switches[key];
+ var desc = descriptions[key] || '';
+
+ if (wrap) {
+ desc = wordwrap(switchlen + 4, wrap)(desc)
+ .slice(switchlen + 4)
+ ;
+ }
+
+ var spadding = new Array(
+ Math.max(switchlen - kswitch.length + 3, 0)
+ ).join(' ');
+
+ var dpadding = new Array(
+ Math.max(desclen - desc.length + 1, 0)
+ ).join(' ');
+
+ var type = null;
+
+ if (flags.bools[key]) type = '[boolean]';
+ if (flags.strings[key]) type = '[string]';
+
+ if (!wrap && dpadding.length > 0) {
+ desc += dpadding;
+ }
+
+ var prelude = ' ' + kswitch + spadding;
+ var extra = [
+ type,
+ demanded[key]
+ ? '[required]'
+ : null
+ ,
+ defaults[key] !== undefined
+ ? '[default: ' + JSON.stringify(defaults[key]) + ']'
+ : null
+ ,
+ ].filter(Boolean).join(' ');
+
+ var body = [ desc, extra ].filter(Boolean).join(' ');
+
+ if (wrap) {
+ var dlines = desc.split('\n');
+ var dlen = dlines.slice(-1)[0].length
+ + (dlines.length === 1 ? prelude.length : 0)
+
+ body = desc + (dlen + extra.length > wrap - 2
+ ? '\n'
+ + new Array(wrap - extra.length + 1).join(' ')
+ + extra
+ : new Array(wrap - extra.length - dlen + 1).join(' ')
+ + extra
+ );
+ }
+
+ help.push(prelude + body);
+ });
+
+ help.push('');
+ return help.join('\n');
+ };
+
+ Object.defineProperty(self, 'argv', {
+ get : parseArgs,
+ enumerable : true,
+ });
+
+ function parseArgs () {
+ var argv = { _ : [], $0 : self.$0 };
+ Object.keys(flags.bools).forEach(function (key) {
+ setArg(key, defaults[key] || false);
+ });
+
+ function setArg (key, val) {
+ var num = Number(val);
+ var value = typeof val !== 'string' || isNaN(num) ? val : num;
+ if (flags.strings[key]) value = val;
+
+ setKey(argv, key.split('.'), value);
+
+ (aliases[key] || []).forEach(function (x) {
+ argv[x] = argv[key];
+ });
+ }
+
+ for (var i = 0; i < args.length; i++) {
+ var arg = args[i];
+
+ if (arg === '--') {
+ argv._.push.apply(argv._, args.slice(i + 1));
+ break;
+ }
+ else if (arg.match(/^--.+=/)) {
+ var m = arg.match(/^--([^=]+)=(.*)/);
+ setArg(m[1], m[2]);
+ }
+ else if (arg.match(/^--no-.+/)) {
+ var key = arg.match(/^--no-(.+)/)[1];
+ setArg(key, false);
+ }
+ else if (arg.match(/^--.+/)) {
+ var key = arg.match(/^--(.+)/)[1];
+ var next = args[i + 1];
+ if (next !== undefined && !next.match(/^-/)
+ && !flags.bools[key]
+ && (aliases[key] ? !flags.bools[aliases[key]] : true)) {
+ setArg(key, next);
+ i++;
+ }
+ else if (/true|false/.test(next)) {
+ setArg(key, next === 'true');
+ i++;
+ }
+ else {
+ setArg(key, true);
+ }
+ }
+ else if (arg.match(/^-[^-]+/)) {
+ var letters = arg.slice(1,-1).split('');
+
+ var broken = false;
+ for (var j = 0; j < letters.length; j++) {
+ if (letters[j+1] && letters[j+1].match(/\W/)) {
+ setArg(letters[j], arg.slice(j+2));
+ broken = true;
+ break;
+ }
+ else {
+ setArg(letters[j], true);
+ }
+ }
+
+ if (!broken) {
+ var key = arg.slice(-1)[0];
+
+ if (args[i+1] && !args[i+1].match(/^-/)
+ && !flags.bools[key]
+ && (aliases[key] ? !flags.bools[aliases[key]] : true)) {
+ setArg(key, args[i+1]);
+ i++;
+ }
+ else if (args[i+1] && /true|false/.test(args[i+1])) {
+ setArg(key, args[i+1] === 'true');
+ i++;
+ }
+ else {
+ setArg(key, true);
+ }
+ }
+ }
+ else {
+ var n = Number(arg);
+ argv._.push(flags.strings['_'] || isNaN(n) ? arg : n);
+ }
+ }
+
+ Object.keys(defaults).forEach(function (key) {
+ if (!(key in argv)) {
+ argv[key] = defaults[key];
+ if (key in aliases) {
+ argv[aliases[key]] = defaults[key];
+ }
+ }
+ });
+
+ if (demanded._ && argv._.length < demanded._) {
+ fail('Not enough non-option arguments: got '
+ + argv._.length + ', need at least ' + demanded._
+ );
+ }
+
+ var missing = [];
+ Object.keys(demanded).forEach(function (key) {
+ if (!argv[key]) missing.push(key);
+ });
+
+ if (missing.length) {
+ fail('Missing required arguments: ' + missing.join(', '));
+ }
+
+ checks.forEach(function (f) {
+ try {
+ if (f(argv) === false) {
+ fail('Argument check failed: ' + f.toString());
+ }
+ }
+ catch (err) {
+ fail(err)
+ }
+ });
+
+ return argv;
+ }
+
+ function longest (xs) {
+ return Math.max.apply(
+ null,
+ xs.map(function (x) { return x.length })
+ );
+ }
+
+ return self;
+};
+
+// rebase an absolute path to a relative one with respect to a base directory
+// exported for tests
+exports.rebase = rebase;
+function rebase (base, dir) {
+ var ds = path.normalize(dir).split('/').slice(1);
+ var bs = path.normalize(base).split('/').slice(1);
+
+ for (var i = 0; ds[i] && ds[i] == bs[i]; i++);
+ ds.splice(0, i); bs.splice(0, i);
+
+ var p = path.normalize(
+ bs.map(function () { return '..' }).concat(ds).join('/')
+ ).replace(/\/$/,'').replace(/^$/, '.');
+ return p.match(/^[.\/]/) ? p : './' + p;
+};
+
+function setKey (obj, keys, value) {
+ var o = obj;
+ keys.slice(0,-1).forEach(function (key) {
+ if (o[key] === undefined) o[key] = {};
+ o = o[key];
+ });
+
+ var key = keys[keys.length - 1];
+ if (o[key] === undefined || typeof o[key] === 'boolean') {
+ o[key] = value;
+ }
+ else if (Array.isArray(o[key])) {
+ o[key].push(value);
+ }
+ else {
+ o[key] = [ o[key], value ];
+ }
+}
--- /dev/null
+Copyright 2011 James Halliday (mail@substack.net)
+
+This project is free software released under the MIT license:
+http://www.opensource.org/licenses/mit-license.php
--- /dev/null
+var wordwrap = module.exports = function (start, stop, params) {
+ if (typeof start === 'object') {
+ params = start;
+ start = params.start;
+ stop = params.stop;
+ }
+
+ if (typeof stop === 'object') {
+ params = stop;
+ start = start || params.start;
+ stop = undefined;
+ }
+
+ if (!stop) {
+ stop = start;
+ start = 0;
+ }
+
+ if (!params) params = {};
+ var mode = params.mode || 'soft';
+ var re = mode === 'hard' ? /\b/ : /(\S+\s+)/;
+
+ return function (text) {
+ var chunks = text.toString()
+ .split(re)
+ .reduce(function (acc, x) {
+ if (mode === 'hard') {
+ for (var i = 0; i < x.length; i += stop - start) {
+ acc.push(x.slice(i, i + stop - start));
+ }
+ }
+ else acc.push(x)
+ return acc;
+ }, [])
+ ;
+
+ return chunks.reduce(function (lines, rawChunk) {
+ if (rawChunk === '') return lines;
+
+ var chunk = rawChunk.replace(/\t/g, ' ');
+
+ var i = lines.length - 1;
+ if (lines[i].length + chunk.length > stop) {
+ lines[i] = lines[i].replace(/\s+$/, '');
+
+ chunk.split(/\n/).forEach(function (c) {
+ lines.push(
+ new Array(start + 1).join(' ')
+ + c.replace(/^\s+/, '')
+ );
+ });
+ }
+ else if (chunk.match(/\n/)) {
+ var xs = chunk.split(/\n/);
+ lines[i] += xs.shift();
+ xs.forEach(function (c) {
+ lines.push(
+ new Array(start + 1).join(' ')
+ + c.replace(/^\s+/, '')
+ );
+ });
+ }
+ else {
+ lines[i] += chunk;
+ }
+
+ return lines;
+ }, [ new Array(start + 1).join(' ') ]).join('\n');
+ };
+};
+
+wordwrap.soft = wordwrap;
+
+wordwrap.hard = function (start, stop) {
+ return wordwrap(start, stop, { mode : 'hard' });
+};
--- /dev/null
+lib
\ No newline at end of file
+++ /dev/null
-.my-check-button-style {
- margin: 10px;
-}
-.my-check-inline-style {
- display: inline;
-}
+++ /dev/null
-window.innerHeight = 720;
-window.innerWidth = 1280;
-document.body.scroll = "no";
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
- <script src="../../build/tizen-web-ui-fw/0.1/js/jquery.js"></script>
- <script src="configure.js"></script>
- <script src="../../build/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw-libs.min.js"></script>
- <script src="../../build/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw.min.js"
- data-framework-theme="tizen-gray"
- data-framework-viewport-scale=false>
- </script>
- <script src="init.js"></script>
- <script src="widgets/checkbox/checkbox.js"></script>
- <script src="widgets/switch/switch.js"></script>
- <script src="widgets/radio/radio.js"></script>
- <script src="widgets/progressbar.js"></script>
- <script src="widgets/ctxpopup.js"></script>
- <script src="widgets/popupwindow/popupwindow.js"></script>
- <script src="tips/generate-elements-dynamically.js"></script>
- <script src="widgets/pagecontrol/pagecontrol-demo.js"></script>
- <script src="widgets/multibuttonentry-demo.js"></script>
- <link rel="stylesheet" href="custom.css" />
- <title>Tizen UI</title>
-
- <!-- for compatibility test -->
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
- <link rel="apple-touch-icon" href="icon-tizen.png" />
- <link rel="stylesheet" href="./widgets/grid/css/namecard.css" />
-</head>
-
-<body>
- <div data-role="page">
- <div data-role="header" data-position="fixed">
- <h1>Tizen UI</h1>
- </div>
- <div data-role="content">
- <p id="current_date"></p>
- <p id="html_font_size"></p>
- <ul data-role="listview" data-icon="1line-textonly">
- <li data-role="list-divider">Controls</li>
- <li><a href="widgets/button/button.html">Button</a></li>
- <li><a href="widgets/checkbox/checkbox.html">Check</a></li>
- <li><a href="widgets/switch/switch.html">Switch</a></li>
- <li><a href="widgets/radio/radio.html">Radio</a></li>
- <li><a href="widgets/colorpicker.html">Color picker</a></li>
- <li><a href="widgets/datefield.html">Time picker</a></li>
- <li><a href="widgets/progressbar.html">Progressbar</a></li>
- <li><a href="widgets/entry.html">Entry</a></li>
- <li><a href="widgets/searchbar.html">Searchbar</a></li>
- <li><a href="#slider-demo">Slider</a></li>
- <li><a href="widgets/day-selector.html" >Day Selector</a></li>
- <li><a href="#NavigationbarMain">Navigation Bar</a></li>
- <li><a href="widgets/imageslider.html">ImageSlider</a></li>
- <li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
- <li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
- <li><a href="widgets/handler.html">Handler</a></li>
- <li><a href="#multibuttonentry">Multi-Button Entry</a></li>
- <li data-role="list-divider">ControlBar</li>
- <li><a href="#controlbar-demo">ControlBar</a></li>
-
- <li data-role="list-divider">List</li>
- <li><a href="widgets/list/list.html">List</a></li>
- <li><a href="widgets/auto-dividers.html">Auto-Dividers</a></li>
- <li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li>
-
- <li data-role="list-divider">Navigation Bar</li>
- <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
- <li><a href="#option-header-demo">Optional Header</a></li>
-
- <li data-role="list-divider">Popup</li>
- <li><a href="widgets/popupwindow/popup.html">Popup</a></li>
- <li><a href="widgets/ctxpopup.html">CxtPopup</a></li>
-
- <li data-role="list-divider">Notification (ticker)</li>
- <li><a href="widgets/tickernoti.html">TickerNoti</a></li>
- <li><a href="widgets/tickernoti-interval.html">TickerNoti Interval</a></li>
- <li><a href="widgets/small-popup.html">Small Popup</a></li>
- <li><a href="widgets/small-popup-interval.html">Small Popup Interval</a></li>
-
- <li data-role="list-divider">No Contents</li>
- <li><a href="#no-contents-0">No Contents - Text</a></li>
- <li><a href="#no-contents-1">No Contents - Picture</a></li>
- <li><a href="#no-contents-2">No Contents - Multimedia</a></li>
- <li><a href="#no-contents-3">No Contents - Unnamed</a></li>
-
- <li data-role="list-divider">Grid view</li>
- <li><a href="widgets/grid/virtualgrid.html">Virtual Grid</a></li>
- <li data-role="list-divider">Multimedia view</li>
- <li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</a></li>
-
- <li data-role="list-divider">Programming Tips</li>
- <li><a href="tips/generate-elements-dynamically.html">Generate Elements by JS</a></li>
-
- </ul>
- </div>
- </div>
-
- <div data-role="page" id="notImplemented">
- <div data-role="header" data-position="fixed">
- <h1>Not Implemented</h1>
- </div>
- <div data-role="content">
- <p> Not Implemented </p>
- </div>
- </div>
-
- <div data-role="page" id="slider-demo" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Slider</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li data-role="list-divider">Normal Slider</li>
- <li><input id="mySlider" name="mySlider" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" /></li>
- <li data-role="list-divider">Popup Slider</li>
- <li><input id="mySlider2" name="mySlider2" type="range" value="50" min="0" max="100" /></li>
- <li data-role="list-divider">Icon Slider</li>
- <li><input id="mySlider3" name="mySlider3" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" data-icon='bright'/></li>
- <li><input id="mySlider4" name="mySlider4" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" data-icon='volume'/></li>
- <li data-role="list-divider">Text Slider</li>
- <li><input id="mySlider5" name="mySlider5" data-popupenabled='false' type="range" name="slider" value="50" min="0" max="99" data-icon='text' data-text-left='0' data-text-right='99'/></li>
- <li><input id="mySlider5" name="mySlider5" data-popupenabled='false' type="range" name="slider" value="5" min="0" max="10" data-icon='text' data-text-left='Min' data-text-right='Max'/></li>
- </ul>
- </div><!-- /content -->
- </div> <!-- /page -->
-
- <div data-role="page" id="no-contents-0" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>No Contents</h1>
- </div>
- <div data-role="content">
- <div data-role="nocontents" id="nocontents0" data-text1="Text Type" data-text2="Text" data-type="text"></div>
- </div> <!-- /content -->
- </div> <!-- /page -->
-
- <div data-role="page" id="no-contents-1" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>No Contents</h1>
- </div>
- <div data-role="content">
- <div data-role="nocontents" id="nocontents1" data-text1="Picture Type" data-text2="Text" data-type="picture"></div>
- </div> <!-- /content -->
- </div> <!-- /page -->
-
- <div data-role="page" id="no-contents-2" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>No Contents</h1>
- </div>
- <div data-role="content">
- <div data-role="nocontents" id="nocontents2" data-text1="Multimedia Type" data-text2="Text" data-type="multimedia"></div>
- </div> <!-- /content -->
- </div> <!-- /page -->
-
- <div data-role="page" id="no-contents-3" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>No Contents</h1>
- </div>
- <div data-role="content">
- <div data-role="nocontents" id="nocontents3" data-text1="Unnamed Type"></div>
- </div> <!-- /content -->
- </div> <!-- /page -->
-
- <div data-role="page" id="option-header-demo" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Optional Header</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview" data-icon="1line-textonly">
- <li><a href="#optionheader1line2btn">1 line 2 buttons</a></li>
- <li><a href="#optionheader1line3btn">1 line 3 buttons</a></li>
- <li><a href="#optionheader1line4btn">1 line 4 buttons</a></li>
- <li><a href="#optionheader2line4btn">2 line 4 buttons</a></li>
- </ul>
- </div>
- </div>
-
- <div data-role="page" id="optionheader1line2btn" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <a id="123">TestBtn</a>
- <h1>Option header - 2 buttons</h1>
- <a id="opt_text" data-icon="optiontray"></a>
- <a id="1234">TestBtn</a>
-
- <div id="myoptionheader1" data-role="optionheader" data-for="opt_text">
- <div class="ui-grid-a ">
- <div class="ui-block-a"><a data-role="button">Save</a></div>
- <div class="ui-block-b"><a data-role="button">Next</a></div>
- </div>
- </div>
- </div>
- <div data-role="content">
- <p>Some content would be here</p>
- </div>
- </div>
-
- <div data-role="page" id="optionheader1line3btn" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Option header - 3 buttons</h1>
- <div id="myoptionheader2" data-role="optionheader">
- <div class="ui-grid-b ">
- <div class="ui-block-a"><a data-role="button">Previous</a></div>
- <div class="ui-block-b"><a data-role="button">Cancel</a></div>
- <div class="ui-block-c"><a data-role="button">Save</a></div>
- </div>
- </div>
- </div>
- <div data-role="content">
- <p>Some content would be here</p>
- </div>
- </div>
-
- <div data-role="page" id="optionheader1line4btn" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Option header - 4 buttons</h1>
- <div id="myoptionheader3" data-role="optionheader">
- <div class="ui-grid-c ">
- <div class="ui-block-a"><a data-role="button">Previous</a></div>
- <div class="ui-block-b"><a data-role="button">Cancel</a></div>
- <div class="ui-block-c"><a data-role="button">Save</a></div>
- <div class="ui-block-d"><a data-role="button">Next</a></div>
- </div>
- </div>
- </div>
- <div data-role="content">
- <p>Some content would be here</p>
- </div>
- </div>
-
- <div data-role="page" id="optionheader2line4btn" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Option header - 4 buttons</h1>
- <div id="myoptionheader" data-role="optionheader">
- <div class="ui-grid-c ">
- <div class="ui-block-a"><a data-role="button">Previous</a></div>
- <div class="ui-block-b"><a data-role="button">Cancel</a></div>
- <div class="ui-block-c"><a data-role="button">Save</a></div>
- <div class="ui-block-d"><a data-role="button">Next</a></div>
- <div class="ui-block-a"><a data-role="button">Left</a></div>
- <div class="ui-block-b"><a data-role="button">1st Middle</a></div>
- <div class="ui-block-c"><a data-role="button">2nd Middle</a></div>
- <div class="ui-block-d"><a data-role="button">Right</a></div>
- </div>
- </div>
- </div>
- <div data-role="content">
- <p>Some content would be here</p>
- </div>
- </div>
-
- <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>ControlBar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#Tabbar_Main">Tabbar Style</a></li>
- <li><a href="#Toolbar">Toolbar Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <!-- ControlBar Tabbar Style -->
- <div data-role="page" id="Tabbar_Main">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
- <li><a href="#Tabbar2Items">2 Items Style</a></li>
- <li><a href="#Tabbar3Items">3 Items Style</a></li>
- <li><a href="#Tabbar4Items">4 Items Style</a></li>
- <li><a href="#Tabbar5Items">5 Items Style</a></li>
- <li><a href="#TabbarText">Only Text Style</a></li>
- <li><a href="#TabbarIcon">Only Icon Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div>
- </div>
- </div>
- <div data-role="page" id="TabbarInHeader">
- <div data-role="header" data-position="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /navbar -->
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Test</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- </div>
- </div>
- <div data-role="page" id="Tabbar2Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">2 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Tabbar3Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">3 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Tabbar4Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">4 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Tabbar5Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">5 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="TabbarText">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Text Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" class="ui-btn-active">Songs</a></li>
- <li><a href="#">Favorites</a></li>
- <li><a href="#">Group</a></li>
- <li><a href="#">Message</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="TabbarIcon">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Icon Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="ctrlbar-save" ></a></li>
- <li><a href="#" data-icon="ctrlbar-share" ></a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <!-- Toolbar Style -->
- <div data-role="page" id="Toolbar">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
- <li><a href="#Toolbar2Items">2 Items Style</a></li>
- <li><a href="#Toolbar3Items">3 Items Style</a></li>
- <li><a href="#Toolbar4Items">4 Items Style</a></li>
- <li><a href="#Toolbar5Items">5 Items Style</a></li>
- <li><a href="#ToolbarText">Only Text Style</a></li>
- <li><a href="#ToolbarIcon">Only Icon Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="ToolbarInHeader">
- <div data-role="header" data-position="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Test</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- </div>
- </div>
-
-
- <div data-role="page" id="Toolbar2Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">2 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Toolbar3Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">3 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Toolbar4Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">4 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Toolbar5Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">5 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="ToolbarText">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Text Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" class="ui-btn-active">Songs</a></li>
- <li><a href="#">Favorites</a></li>
- <li><a href="#">Group</a></li>
- <li><a href="#">Message</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="ToolbarIcon">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Only Icon Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="ctrlbar-save" ></a></li>
- <li><a href="#" data-icon="ctrlbar-share" ></a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
- <!-- Toolbar Style -->
-
- <!-- Mixed Style -->
-
- <div data-role="page" id="Mixed" >
- <div data-role="header" data-position="fixed">
- <h1>Mixed Toolbar</h1>
- </div>
- <div data-role="content">
- <p>Not Supported for winset</p>
- </div>
- </div>
- <!-- Mixed Style -->
-
- <!-- ControlBar Left Style -->
- <div data-role="page" id="ControlBarVerticalLeft" >
- <div data-role="header" data-position="fixed">
- <h1>Vertical Toolbar</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview" data-icon="1line-textonly">
- <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
- <li><a href="#notImplemented">Button</a></li>
- <li><a href="#notImplemented">Check</a></li>
- </ul>
- <div data-role="controlbar" data-style="left">
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
- <!-- ControlBar Left Style -->
-
- <!-- ControlBar Right Style -->
- <div data-role="page" id="ControlBarVerticalRight" >
- <div data-role="header" data-position="fixed">
- <h1>Vertical Toolbar</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview" data-icon="1line-textonly">
- <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
- <li><a href="#notImplemented">Button</a></li>
- </ul>
- <div data-role="controlbar" data-style="right">
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
- <!-- ControlBar Right Style -->
-
- <!-- ControlBar Animation -->
- <div data-role="page" id="ControlBarAnimation" >
- <div data-role="header" data-position="fixed">
- <h1>Vertical Toolbar</h1>
- </div>
- <div data-role="content">
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar">
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
- <!-- ControlBar Animation -->
-
- <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>ControlBar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#normalstyle">Normal style title</a></li>
- <li><a href="#extendedstyle">Extended style title</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="normalstyle" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Normal Title</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="normal1btn">
- <div data-role="header" data-position="fixed">
- <a>Text1</a>
- <h1>Normal Title</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="normal2btn">
- <div data-role="header" data-position="fixed">
- <a>Text1</a>
- <h1>Normal Title</h1>
- <a>Text2</a>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="normal3btn" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <a>Text1</a>
- <h1>Normal Title</h1>
- <a>Text2</a>
- <a>Text3</a>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="extendedstyle" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Extended Title</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#extendedstyle2btn">2 Button</a></li>
- <li><a href="#extendedstyle3btn">3 Button</a></li>
- <li><a href="#extendedstyle4btn">4 Button</a></li>
- <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="extendedstyle2btn">
- <div data-role="header" data-position="fixed">
- <a>Text</a>
- <h1>Extended Title 2 Button </h1>
- <a>Text</a>
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
- <label for="segment1">All</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
- <label for="segment2">Call</label>
- </fieldset>
- </div>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#extendedstyle2btn">2 Button</a></li>
- <li><a href="#extendedstyle3btn">3 Button</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="extendedstyle3btn">
- <div data-role="header" data-position="fixed">
- <a>Text</a>
- <h1>Extended Title 3 Button </h1>
- <a>Text</a>
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
- <label for="segment71">All</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
- <label for="segment72">Call</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
- <label for="segment73">Message</label>
- </fieldset>
- </div>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#extendedstyle2btn">2 Button</a></li>
- <li><a href="#extendedstyle3btn">3 Button</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="extendedstyle4btn">
- <div data-role="header" data-position="fixed">
- <h1>Extended Title 4 Button </h1>
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
- <label for="segment71">All</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
- <label for="segment72">Call</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
- <label for="segment73">Message</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
- <label for="segment74">Contact</label>
- </fieldset>
- </div>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#extendedstyle2btn">2 Button</a></li>
- <li><a href="#extendedstyle3btn">3 Button</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="footerExtendedStyle">
- <div data-role="header" data-position="fixed">
- <h1>Extended Footer style</h1>
- </div>
- <div data-role="content">
- <p> test page </p>
- </div>
- <div data-role="footer" data-position="fixed">
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
- <label for="segment1">All</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
- <label for="segment2">Call</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
- <label for="segment3">Contact</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment4" value="off" />
- <label for="segment4">Index</label>
- </fieldset>
- </div>
- <a>Edit</a>
- </div>
- </div>
-
- <div data-role="page" id="multibuttonentry">
- <div data-role="header" >
- <h1>Multi-button Entry</h1>
- </div>
- <div data-role="content">
- <div data-role="multibuttonentry" data-listuri="addressbook"></div>
- <br>
- <ul data-role="listview">
- <li><a id='MBTaddItemTest'>Append Item</a></li>
- <li><a id='MBTremoveItemTest'>Remove first Item</a></li>
- <li><a id='MBTinputTextTest'>Input 'Hello'</a></li>
- <li><a id='MBTgetInputTextTest'>Get input text</a></li>
- <li><a id='MBTselectItemTest'>Select 1</a></li>
- <li><a id='MBTgetSelectedItemTest'>Selected item</a></li>
- <li><a id='MBTlengthTest'>Length</a></li>
- <li><a id='MBTfocusOutTest'>Grouping On</a></li>
- <li><a id='MBTfocusInTest'>Grouping Off</a></li>
- <li><a id='MBTremoveAllItemTest'>Remove All Item</a></li>
- </ul>
- </div>
- </div>
- <div data-role="page" id="addressbook" data-footer-Exist="false" >
- <div data-role="header">
- <h1>Address Book</h1>
- <a id="cancelBtn" href="#multibuttonentry" data-role="button" class="ui-btn-right" >Cancel</a>
- </div>
- <div data-role="content" id="contentList">
- <ul data-role="listview">
- <li data-role="list-divider">A</li>
- <li><a href="#multibuttonentry">Adam Kinkaid</a></li>
- <li><a href="#multibuttonentry">Alex Wickerham</a></li>
- <li><a href="#multibuttonentry">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="#multibuttonentry">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="#multibuttonentry">Caleb Booth</a></li>
- <li><a href="#multibuttonentry">Christopher Adams</a></li>
- <li><a href="#multibuttonentry">Culver James</a></li>
- <li data-role="list-divider">D</li>
- <li><a href="#multibuttonentry">David Walsh</a></li>
- <li><a href="#multibuttonentry">Drake Alfred</a></li>
- <li data-role="list-divider">E</li>
- <li><a href="#multibuttonentry">Elizabeth Bacon</a></li>
- <li><a href="#multibuttonentry">Emery Parker</a></li>
- <li><a href="#multibuttonentry">Enid Voldon</a></li>
- <li data-role="list-divider">F</li>
- <li><a href="#multibuttonentry">Francis Wall</a></li>
- <li data-role="list-divider">G</li>
- <li><a href="#multibuttonentry">Graham Smith</a></li>
- <li><a href="#multibuttonentry">Greta Peete</a></li>
- <li data-role="list-divider">H</li>
- <li><a href="#multibuttonentry">Harvey Walls</a></li>
- <li data-role="list-divider">M</li>
- <li><a href="#multibuttonentry">Mike Farnsworth</a></li>
- <li><a href="#multibuttonentry">Murray Vanderbuilt</a></li>
- <li data-role="list-divider">N</li>
- <li><a href="#multibuttonentry">Nathan Williams</a></li>
- <li data-role="list-divider">P</li>
- <li><a href="#multibuttonentry">Paul Baker</a></li>
- <li><a href="#multibuttonentry">Pete Mason</a></li>
- <li data-role="list-divider">R</li>
- <li><a href="#multibuttonentry">Rod Tarker</a></li>
- <li data-role="list-divider">S</li>
- <li><a href="#multibuttonentry">Sawyer Wakefield</a></li>
- </ul>
- </div> <!--/content -->
- </div> <!--/page -->
-</body>
-</html>
+++ /dev/null
-$( document ).bind("pagecreate", function () {
- /* Color widget demo */
- $("input[type='checkbox'][data-widget-type-list]").bind("change", function() {
- var ls = $( this ).attr("data-widget-type-list").split(","),
- page = $( this ).closest(":jqmData(role='page')"),
- disabled = $( this ).is(":checked");
-
- $.each(ls, function( idx, widgetType ) {
- var ar = widgetType.split("-");
-
- if ( ar.length === 2 ) {
- page.find(":" + widgetType)[ar[1]]( "option", "disabled", disabled );
- }
- });
- });
-
- $("#checkHideInput").bind("change", function (e) {
- $("#colorpickerbutton").colorpickerbutton("option", "hideInput", $("#checkHideInput").is(":checked"));
- });
-
- $('#scroller-demo').bind('pageshow', function ( e ) {
- $page = $( e.target );
- /*
- * many options cannot be set without subclassing since they're
- * used in the _create method - it seems as if these are for
- * internal use only and scrollDuration is only changable by
- * chance.
- */
- var $scroller2List = $('#scroller2').find('ul');
- $scroller2List.scrollview( 'option','scrollDuration','10000' );
-
- // only works by manipulating css
- // the only other way is to use attribute 'scroll-method="scroll"' in html
- $('#scroller2 .ui-scrollbar').css( 'visibility','hidden' );
-
- /*
- * make toggle button switch scroll bars on and off
- */
- var scrollBarVisible = $('#scroller2').find('.ui-scrollbar').css('visibility') === "visible";
-
- var $toggleScrollBars = $('#toggleScrollBars');
- $toggleScrollBars.attr( "checked", scrollBarVisible ).checkboxradio("refresh");
-
- /* the 'label' is the thing that is clicked, not the input element */
- var $label = $toggleScrollBars.siblings('label').attr( 'for', '#toggleScrollBars' );
- $label.bind("click", function () {
- var $scrollBar = $('#scroller2').find('.ui-scrollbar');
- var scrollBarVisible = $scrollBar.css('visibility') === "visible";
- var newVisibility = scrollBarVisible ? "hidden" : "visible";
- $scrollBar.css( 'visibility', scrollBarVisible ? "hidden" : "visible" );
- });
- });
-
- $("#demo-date").bind("date-changed", function ( e, newDate ) {
- $("#selected-date1").text( newDate.toString() );
- });
-
- $("#demo-date2").bind("date-changed", function ( e, newDate ) {
- $("#selected-date2").text( newDate.toString() );
- });
-
- $("#demo-date3").bind("date-changed", function ( e, newDate ) {
- $("#selected-date3").text( newDate.toString() );
- });
-
- $("#demo-date4").bind("date-changed", function ( e, newDate ) {
- $("#selected-date4").text( newDate.toString() );
- });
-
- $('#notification-demo').bind('vmouseup', function ( e ) {
- $('#notification').notification('show');
- });
-
- $('#notification-demo').bind('tapped', function ( e, m ) {
- /* DO SOMETHING */
- alert('notification is tapped\nparameter:"' + m + '"');
- });
-
- $('#imageslider-add').bind('vmouseup', function ( e ) {
- $('#imageslider').imageslider('add', './test/10.jpg');
- $('#imageslider').imageslider('add', './test/11.jpg');
- $('#imageslider').imageslider('refresh');
- });
-
- $('#imageslider-del').bind('vmouseup', function ( e ) {
- $('#imageslider').imageslider('del');
- });
-
- $('#selectioninfo-demo').bind('vmouseup', function ( e ) {
- $('#smallpopup_selectioninfo').attr("data-text1",
- $("#dayselector1").find(".ui-checkbox-on").length + " items are selected");
- $('#smallpopup_selectioninfo').notification('show');
- });
-
- $('#groupindex-demo').bind('pageshow', function () {
- $('#groupindex').scrolllistview();
- });
-
- $("#showVolumeButton").bind("vclick", function ( e ) {
- $("#myVolumeControl").volumecontrol("open");
- });
-
- $("#volumecontrol_setBasicTone").bind("change", function ( e ) {
- var basicTone = !($("#volumecontrol_setBasicTone").next('label')
- .find(".ui-icon").hasClass("ui-icon-checkbox-on"));
-
- if ( basicTone ) {
- $("#myVolumeControl").volumecontrol( "option", "basicTone", true );
- $("#myVolumeControl").volumecontrol( "option", "title", "Basic Tone" );
- } else {
- $("#myVolumeControl").volumecontrol( "option", "basicTone", false );
- $("#myVolumeControl").volumecontrol( "option", "title", "Volume" );
- }
- });
-
- $("#myoptionheader").bind('collapse', function () {
- console.log('option header was collapsed');
- });
-
- $("#myoptionheader").bind('expand', function () {
- console.log('option header was expanded');
- });
-
- //day-selector codes...
- $("#day-selector-check-all").live('vclick', function () {
- $("#dayselector1").dayselector('selectAll');
- });
-
- $("#day-selector-get-days").live('vclick', function () {
- var valuesStr = $("#dayselector1").dayselector('value').join(', ');
- $(".selectedDay").text( valuesStr );
- });
-
- /* Gen list : Dummy DB load */
- $(".virtuallist_demo_page").live("pagecreate", function () {
- /* ?_=ts code for no cache mechanism */
- $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
- $("ul").filter( function () {
- return $( this ).data("role") == "virtuallistview";
- }).addClass("vlLoadSuccess");
-
- $(".virtuallist_demo_page").die();
- $("ul.ui-virtual-list-container").virtuallistview("create");
- });
- });
-
- /*Expandable list : Dummy DB load*/
- $("#genlist_extendable_page").live("pagecreate", function () {
- /*?_=ts code for no cache mechanism*/
- $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
- $("ul").filter( function () {
- return $( this ).data("role") == "extendablelist";
- }).addClass("elLoadSuccess");
-
- $("#genlist-extendable-page").die();
- $("ul.ui-extendable-list-container").extendablelist("create");
- });
- });
-
- /* Color widget demo */
- var clrWidgetsAreInit = false;
- $("#colorwidgets-demo").bind("pageshow", function () {
- if ( clrWidgetsAreInit ) {
- return;
- }
-
- $("#colorpicker").bind("colorchanged", function ( e, clr ) {
- $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
- $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
- $("#hsvpicker").hsvpicker( "option", "color", clr );
- $("#colortitle").colortitle( "option", "color", clr );
- $("#colorpalette").colorpalette( "option", "color", clr );
- });
-
- $("#colorpickerbutton").bind("colorchanged", function ( e, clr ) {
- $("#colorpicker").colorpicker( "option", "color", clr );
- $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
- $("#hsvpicker").hsvpicker( "option", "color", clr );
- $("#colortitle").colortitle( "option", "color", clr );
- $("#colorpalette").colorpalette( "option", "color", clr );
- });
-
- $("#colorpickerbutton-noform").bind("colorchanged", function ( e, clr ) {
- $("#colorpicker").colorpicker( "option", "color", clr );
- $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
- $("#hsvpicker").hsvpicker( "option", "color", clr );
- $("#colortitle").colortitle( "option", "color", clr );
- $("#colorpalette").colorpalette( "option", "color", clr );
- });
-
- $("#hsvpicker").bind("colorchanged", function ( e, clr ) {
- $("#colorpicker").colorpicker( "option", "color", clr );
- $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
- $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
- $("#colortitle").colortitle( "option", "color", clr );
- $("#colorpalette").colorpalette( "option", "color", clr );
- });
-
- $("#colortitle").bind("colorchanged", function ( e, clr ) {
- $("#colorpicker").colorpicker( "option", "color", clr );
- $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
- $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
- $("#hsvpicker").hsvpicker( "option", "color", clr );
- $("#colorpalette").colorpalette( "option", "color", clr );
- });
-
- $("#colorpalette").bind("colorchanged", function ( e, clr ) {
- $("#colorpicker").colorpicker( "option", "color", clr );
- $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
- $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
- $("#hsvpicker").hsvpicker( "option", "color", clr );
- $("#colortitle").colortitle( "option", "color", clr );
- });
-
- $("#colorpalette").colorpalette("option", "color", "#45cc98");
-
- clrWidgetsAreInit = true;
- });
-});
-
-$(document).ready( function () {
- // add current datetime with browser language format
- // NOTE: Globalize.* functions must be run after docoument ready.
- $('#current_date').html(Globalize.culture().name + " -- " +
- Globalize.format( new Date(), "F" ));
- $('#html_font_size').html('html font size:' + $('html').css('font-size'));
-});
+++ /dev/null
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Generate elements dynamically</h1>
- </div><!-- /header -->
-
-
- <div data-role="content">
- <div id="checkboxItems" ></div>
-
- <fieldset class="ui-grid-b">
- <div data-role="controlgroup" data-type="horizontal">
- <a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
- </div>
- </fieldset>
- </div>
-</div>
+++ /dev/null
-var myArray = [];
-function addCheckbox(){
- var newhtml;
- var i = myArray.length;
- myArray[myArray.length] = 'Item - ' + myArray.length;
- newhtml = '<input type="checkbox" name="checkbox-'+i+'a" id="checkbox-'+i+'a" class="custom" />' ;
- newhtml += '<label for="checkbox-'+i+'a">'+myArray[i]+'</label>';
- $("#checkboxItems").append(newhtml);
- $("#checkboxItems").trigger( "create" );
-}
-
-
-$('#bAdd').live('vclick', function () {
- addCheckbox();
-});
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
- <script src="js/jquery.mobile.forms.button.extension.js"></script>
- </head>
-<body>
-
-<div data-role="page" id="ButtonDemo" data-add-back-btn="true" >
- <div data-role="header" data-position="fixed">
- <h1>Buttons</h1>
- </div>
- <div data-role="content">
- <ul data-role = "listview">
- <li class="ui-li-1line-btn1">List item 1<div data-role="button" data-inline="true">Text Button TesT</div></li>
- <li class="ui-li-1line-btn1">List item 2<div data-role="button" data-inline="true" data-icon="reveal">Call Icon</div></li>
- <li class="ui-li-1line-btn1">List item 3<div data-role="button" data-inline="true" data-icon="reveal">Longer Call Icon</div></li>
- <li class="ui-li-1line-btn1">List item 4<div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div></li>
- <li class="ui-li-1line-btn1">List item 5<div data-role="button" data-inline="true" data-icon="reveal"></div></li>
- <li class="ui-li-1line-btn2">List item 6<div data-role="button" data-inline="true" data-icon="plus" data-style="circle" class="ui-li-1line-btn2"></div></li>
- <li class="ui-li-1line-btn2">List item 7<div data-role="button" data-inline="true" data-icon="minus" data-style="circle"></div></li>
- <li class="ui-li-1line-btn2">List item 8<div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div></li>
- <li class="ui-li-1line-btn2">List item 9<div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div></li>
- <li class="ui-li-1line-btn2">List item 10<div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div></li>
- <li>List item 11<div data-role="button" data-inline="true" data-icon="editminus" data-style="edit"
- style="position: absolute; top: 0px; margin-top: 0px; left:70%"></div></li>
- <li>List item 12<div data-role="button" data-inline="true" data-style="edit"
- style="position: absolute; top: 0px; margin-top: 0px; left:70%">Delete</div></li>
- </ul>
- </div>
-</div>
-
-
-
-</body>
-</html>
+++ /dev/null
-<div data-role="page" id="datetimepicker-demo" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Date/time picker</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li class="ui-li-2line-sub-main">
- <span class="ui-li-text-main">
- <input type="datetime" name="demo-date" id="demo-date"
- data-format="MMM dd yyyy hh:mm tt" data-val="Jun 30 2012" />
- </span>
- <span class="ui-li-text-sub">
- Date/Time Picker(Custom) - <span id="selected-date1"><em>(select a date first)</em></span>
- </span>
- </li>
- <li class="ui-li-2line-sub-main">
- <span class="ui-li-text-main">
- <input type="datetime" name="demo-date2" id="demo-date2" />
- </span>
- <span class="ui-li-text-sub">
- Date/Time Picker - <span id="selected-date2"><em>(select a date first)</em></span>
- </span>
- </li>
- <li class="ui-li-2line-sub-main">
- <span class="ui-li-text-main">
- <input type="date" name="demo-date3" id="demo-date3"/>
- </span>
- <span class="ui-li-text-sub">
- Date Picker - <span id="selected-date3"><em>(select a date first)</em></span>
- </span>
- </li>
- <li class="ui-li-2line-sub-main">
- <span class="ui-li-text-main">
- <input type="time" name="demo-date4" id="demo-date4" />
- </span>
- <span class="ui-li-text-sub">
- Time Picker - <span id="selected-date4"><em>(select a date first)</em></span>
- </span>
- </li>
- </ul>
- </div><!-- /content -->
-</div> <!-- /page -->
-
-
+++ /dev/null
-<!DOCTYPE html>
- <div data-role="page" class="type-interior" data-add-back-btn="true">
-
- <div data-role="header" >
- <h1>Entry</h1>
- </div><!-- /header -->
-
- <div data-role="content">
- <div class="content-primary">
-
- <form action="#" method="get">
- <div data-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="textarea">Textarea:</label>
- <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
- </div>
-
- <div data-role="fieldcontain">
- <label for="password">Password:</label>
- <input type="password" name="password" id="password" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="number">Number:</label>
- <input type="number" name="number" id="number" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="email">Email:</label>
- <input type="email" name="email" id="email" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="url">Url:</label>
- <input type="url" name="url" id="url" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="tel">Tel:</label>
- <input type="tel" name="tel" id="tel" value="" />
- </div>
-</div><!-- /content -->
-</div><!-- /page -->
-
+++ /dev/null
-.ui-demo-namecard {
- display : inline-block;
- width : 5.1rem;
- height : 6.1rem;
- margin-right: 0.4rem;
- margin-left: 0.4rem;
- margin-bottom: 1.5rem;
-}
-
-.ui-demo-namecard-pic {
- float : left;
- padding-top : 0.2rem;
- padding-left : 0.2rem;
- padding-bottom: 0rem;
-}
-
-.ui-demo-namecard-pic-img {
- height : 5rem;
- width : 5rem;
-}
-
-.ui-demo-namecard-contents {
- float : left;
- height : 1rem;
- margin: 0rem;
-}
-
-.ui-demo-namecard-contents span {
- font-style : italic;
- color : #666;
- border-bottom : 1px dashed;
- margin-top: 0rem;
-}
-
-.ui-demo-namecard-contents span.name {
- color : white;
- font : normal 0.8rem Georgia, serif !important;
-
- width: 5rem;
- display: inline-block;
- white-space : nowrap;
- overflow : hidden !important;
- text-overflow : ellipsis !important;
- -o-text-overflow:ellipsis;
- resize:horizontal;
-}
+++ /dev/null
-<div data-role="page" class="virtuallist_demo_page">\r
- <div id="normal" data-role="header" data-position="inline">\r
- <h1>Virtualgrid</h1>\r
- </div>\r
- <div data-role="content">\r
- <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">\r
- <div class="ui-demo-namecard">\r
- <div class="ui-demo-namecard-pic">\r
- <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />\r
- </div>\r
- <div class="ui-demo-namecard-contents">\r
- <span class="name ui-li-text-main">${NAME}</span>\r
- </div>\r
- </div>\r
- </script>\r
- <div id="virtualgrid-demo" data-role="virtualgrid" data-column="3" data-row="16" data-template="tizen-demo-namecard" data-dbtable="JSON_DATA"></div>\r
- </div>\r
- <script>\r
- $( ".virtuallist_demo_page" ).live( "pagecreate", function() {\r
- $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {\r
- $( "div" ).filter( function() {\r
- return $( this ).data( "role" ) == "virtualgrid";\r
- }).addClass( "vgLoadSuccess" );
- $( ".virtuallist_demo_page" ).die();\r
- $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create" );\r
- });\r
- });\r
- </script>\r
-</div>\r
+++ /dev/null
-<!DOCTYPE html>\r
-<div data-role="page">\r
- <div data-role="header">\r
- <h1>Handler Test</h1>\r
- </div><!-- /header -->\r
- <div data-role="content" data-scroll="y" data-handler="true">\r
- <ul data-role="listview">\r
- <li data-role="list-divider">A</li>\r
- <li><a href="#">Adam Kinkaid</a></li>\r
- <li><a href="#">Alex Wickerham</a></li>\r
- <li><a href="#">Avery Johnson</a></li>\r
- <li data-role="list-divider">B</li>\r
- <li><a href="#">Bob Cabot</a></li>\r
- <li data-role="list-divider">C</li>\r
- <li><a href="#">Caleb Booth</a></li>\r
- <li><a href="#">Christopher Adams</a></li>\r
- <li><a href="#">Culver James</a></li>\r
- <li data-role="list-divider">D</li>\r
- <li><a href="#">David Walsh</a></li>\r
- <li><a href="#">Drake Alfred</a></li>\r
- <li data-role="list-divider">E</li>\r
- <li><a href="#">Elizabeth Bacon</a></li>\r
- <li><a href="#">Emery Parker</a></li>\r
- <li><a href="#">Enid Voldon</a></li>\r
- <li data-role="list-divider">F</li>\r
- <li><a href="#">Francis Wall</a></li>\r
- <li data-role="list-divider">G</li>\r
- <li><a href="#">Graham Smith</a></li>\r
- <li><a href="#">Greta Peete</a></li>\r
- <li data-role="list-divider">H</li>\r
- <li><a href="#">Harvey Walls</a></li>\r
- <li data-role="list-divider">M</li>\r
- <li><a href="#">Mike Farnsworth</a></li>\r
- <li><a href="#">Murray Vanderbuilt</a></li>\r
- <li data-role="list-divider">N</li>\r
- <li><a href="#">Nathan Williams</a></li>\r
- <li data-role="list-divider">P</li>\r
- <li><a href="#">Paul Baker</a></li>\r
- <li><a href="#">Pete Mason</a></li>\r
- <li data-role="list-divider">R</li>\r
- <li><a href="#">Rod Tarker</a></li>\r
- <li data-role="list-divider">S</li>\r
- <li><a href="#">Sawyer Wakefield</a></li>\r
- <li data-role="list-divider">A</li>\r
- <li><a href="#">Adam Kinkaid</a></li>\r
- <li><a href="#">Alex Wickerham</a></li>\r
- <li><a href="#">Avery Johnson</a></li>\r
- <li data-role="list-divider">B</li>\r
- <li><a href="#">Bob Cabot</a></li>\r
- <li data-role="list-divider">C</li>\r
- <li><a href="#">Caleb Booth</a></li>\r
- <li><a href="#">Christopher Adams</a></li>\r
- <li><a href="#">Culver James</a></li>\r
- <li data-role="list-divider">D</li>\r
- <li><a href="#">David Walsh</a></li>\r
- <li><a href="#">Drake Alfred</a></li>\r
- <li data-role="list-divider">E</li>\r
- <li><a href="#">Elizabeth Bacon</a></li>\r
- <li><a href="#">Emery Parker</a></li>\r
- <li><a href="#">Enid Voldon</a></li>\r
- <li data-role="list-divider">F</li>\r
- <li><a href="#">Francis Wall</a></li>\r
- <li data-role="list-divider">G</li>\r
- <li><a href="#">Graham Smith</a></li>\r
- <li><a href="#">Greta Peete</a></li>\r
- <li data-role="list-divider">H</li>\r
- <li><a href="#">Harvey Walls</a></li>\r
- <li data-role="list-divider">M</li>\r
- <li><a href="#">Mike Farnsworth</a></li>\r
- <li><a href="#">Murray Vanderbuilt</a></li>\r
- <li data-role="list-divider">N</li>\r
- <li><a href="#">Nathan Williams</a></li>\r
- <li data-role="list-divider">P</li>\r
- <li><a href="#">Paul Baker</a></li>\r
- <li><a href="#">Pete Mason</a></li>\r
- <li data-role="list-divider">R</li>\r
- <li><a href="#">Rod Tarker</a></li>\r
- <li data-role="list-divider">S</li>\r
- <li><a href="#">Sawyer Wakefield</a></li>\r
- <li data-role="list-divider">A</li>\r
- <li><a href="#">Adam Kinkaid</a></li>\r
- <li><a href="#">Alex Wickerham</a></li>\r
- <li><a href="#">Avery Johnson</a></li>\r
- <li data-role="list-divider">B</li>\r
- <li><a href="#">Bob Cabot</a></li>\r
- <li data-role="list-divider">C</li>\r
- <li><a href="#">Caleb Booth</a></li>\r
- <li><a href="#">Christopher Adams</a></li>\r
- <li><a href="#">Culver James</a></li>\r
- <li data-role="list-divider">D</li>\r
- <li><a href="#">David Walsh</a></li>\r
- <li><a href="#">Drake Alfred</a></li>\r
- <li data-role="list-divider">E</li>\r
- <li><a href="#">Elizabeth Bacon</a></li>\r
- <li><a href="#">Emery Parker</a></li>\r
- <li><a href="#">Enid Voldon</a></li>\r
- <li data-role="list-divider">F</li>\r
- <li><a href="#">Francis Wall</a></li>\r
- <li data-role="list-divider">G</li>\r
- <li><a href="#">Graham Smith</a></li>\r
- <li><a href="#">Greta Peete</a></li>\r
- <li data-role="list-divider">H</li>\r
- <li><a href="#">Harvey Walls</a></li>\r
- <li data-role="list-divider">M</li>\r
- <li><a href="#">Mike Farnsworth</a></li>\r
- <li><a href="#">Murray Vanderbuilt</a></li>\r
- <li data-role="list-divider">N</li>\r
- <li><a href="#">Nathan Williams</a></li>\r
- <li data-role="list-divider">P</li>\r
- <li><a href="#">Paul Baker</a></li>\r
- <li><a href="#">Pete Mason</a></li>\r
- <li data-role="list-divider">R</li>\r
- <li><a href="#">Rod Tarker</a></li>\r
- <li data-role="list-divider">S</li>\r
- <li><a href="#">Sawyer Wakefield</a></li>\r
- </ul>\r
- </div><!-- /content -->\r
-</div><!-- /page -->
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Image Slider</h1>
- </div>
- <div data-role="content" data-scroll="none">
- <div data-role="imageslider" id="imageslider" data-start-index="3" data-vertical-align="middle">
- <img src="./test/01.jpg">
- <img src="./test/02.jpg">
- <img src="./test/03.jpg">
- <img src="./test/04.jpg">
- <img src="./test/05.jpg">
- <img src="./test/06.jpg">
- <img src="./test/07.jpg">
- <img src="./test/08.jpg">
- <img src="./test/09.jpg">
- </div>
- </div> <!-- /content -->
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li id="imageslider-add"><a href="#">Add</a></li>
- <li id="imageslider-del"><a href="#">Delete</a></li>
- </ul>
- </div><!-- /navbar -->
- </div>
-</div> <!-- /page -->
+++ /dev/null
-<div data-role="page" id="genlist-dialog" data-add-back-btn="true" data-fit-page-to-window="true">
- <div data-role="header" data-position="fixed">
- <h1>Dialog lists</h1>
- </div>
- <div class="content" data-role="content" data-scroll="y">
- <ul data-role="listview">
-
- <li class="ui-li-1line ui-li-dialogue">
- <span class="ui-li-text-main">1line</span>
- </li>
- <li class="ui-li-1line ui-li-dialogue">
- <a><span class="ui-li-text-main">1line (with link)</span></a>
- </li>
- <li class="ui-li-1line-sub ui-li-dialogue">
- <span class="ui-li-text-main">1line-sub</span>
- <span class="ui-li-text-sub">subtext</sub>
- </li>
- <li class="ui-li-1line-sub ui-li-dialogue">
- <a>
- <span class="ui-li-text-main">1line-sub (with link)</span>
- <span class="ui-li-text-sub">subtext</span>
- </a>
- </li>
- <li class="ui-li-1line-setting ui-li-dialogue">
- <span class="ui-li-text-main">1line-setting</span>
- <span class="ui-li-text-sub">Sub text</span>
- </li>
- <li class="ui-li-1line-btn1 ui-li-dialogue">
- <span class="ui-li-text-main">1line-btn1</span>
- <div data-role="button" data-inline="true">Text Button</div>
- </li>
- <li class="ui-li-1line-btn2 ui-li-dialogue">
- <span class="ui-li-text-main">1line-btn2</span>
- <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
- </li>
- <li class="ui-li-1line-toggle ui-li-dialogue">
- <span class="ui-li-text-main">1line-toggle</span>
- <div data-role="toggleswitch"/></div>
- </li>
-
- <li class="ui-li-1line-bigicon1 ui-li-dialogue">
- <span class="ui-li-text-main">1line-bigicon1</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
- <li class="ui-li-1line-bigicon2 ui-li-dialogue">
- <span class="ui-li-text-main">1line-bigicon2</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-sub">Sub text</span>
- </li>
- <li class="ui-li-1line-bigicon4 ui-li-dialogue">
- <span class="ui-li-text-main">1line-bigicon4</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <div data-role="button" data-inline="true">Text Button</div>
- </li>
- <li class="ui-li-1line-bigicon5 ui-li-dialogue">
- <span class="ui-li-text-main">1line-bigicon5</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
- </li>
- <li class="ui-li-1line-bigicon6 ui-li-dialogue">
- <span class="ui-li-text-main">1line-bigicon6</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <div data-role="toggleswitch"/></div>
- </li>
- <li class="ui-li-1line-check1 ui-li-dialogue">
- <span class="ui-li-text-main">1line-check1</span>
- <form><input type="checkbox" data-style="check" name="c1line-check1" /></form>
- </li>
- <li class="ui-li-1line-check2 ui-li-dialogue">
- <span class="ui-li-text-main">1line-check2</span>
- <form><input type="checkbox" data-style="check" name="c1line-check2" /></form>
- <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
- </li>
- <li class="ui-li-1line-check3 ui-li-dialogue">
- <span class="ui-li-text-main">1line-check3</span>
- <form><input type="checkbox" data-style="check" name="c1line-check3" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
- <li class="ui-li-1line-check4 ui-li-dialogue">
- <span class="ui-li-text-main">1line-check4</span>
- <form><input type="checkbox" data-style="check" name="c1line-check4" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
- </li>
- <li class="ui-li-1line-radio1 ui-li-dialogue">
- <span class="ui-li-text-main">1line-radio1</span>
- <form><input type="radio" /></form>
- </li>
- <li class="ui-li-1line-radio3 ui-li-dialogue">
- <span class="ui-li-text-main">1line-radio3</span>
- <form><input type="radio" /></form>
- <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
- </li>
- <li class="ui-li-1line-radio4 ui-li-dialogue">
- <span class="ui-li-text-main">1line-radio4</span>
- <form><input type="radio" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
- <li class="ui-li-1line-radio5 ui-li-dialogue">
- <span class="ui-li-text-main">1line-radio5</span>
- <form><input type="radio" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
- </li>
-
-
- <li class="ui-li-1line-leftsub1 ui-li-dialogue">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block; width: 50%;" class="ui-li-text-main-right ui-li-long-text">1line-leftsub1 longtextlongtextlongtextlongtextlongtextlongtext</div>
- </li>
- <li class="ui-li-1line-leftsub2 ui-li-dialogue">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub2</div>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
- <li class="ui-li-3line-dgroup1 ui-li-dialogue">
- <span class="ui-li-text-main">3line-dgroup1</span>
- <span class="ui-li-text-sub1">Subtext1</span>
- <span class="ui-li-text-sub2">Subtext2</span>
- </li>
-
-
- <li class="ui-li-2line ui-li-dialogue">
- <span class="ui-li-text-main">2line</span>
- <span class="ui-li-text-sub">Subtext</span>
- </li>
-
- <li class="ui-li-2line-sub-main ui-li-dialogue">
- <span class="ui-li-text-main">2line-sub-main</span>
- <span class="ui-li-text-sub">Subtext</span>
- </li>
-
- <li class="ui-li-2line-2sub ui-li-dialogue">
- <span class="ui-li-text-main">2line-2sub</span>
- <span class="ui-li-text-sub">Subtext</span>
- <span class="ui-li-text-sub2">Subtext2</span>
- </li>
-
- <li class="ui-li-2line-btn1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-btn1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true">button</div>
- </li>
-
- <li class="ui-li-2line-btn1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-btn1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call"></div>
- </li>
-
- <li class="ui-li-2line-btn2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-btn2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- </li>
-
- <li class="ui-li-2line-star1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-star1</span>
- <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
- <span class="ui-li-text-sub">Subtext</span>
- <span class="ui-li-text-sub2">Subtext2</span>
- </li>
-
- <li class="ui-li-2line-star2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-star2</span>
- <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
- <span class="ui-li-text-sub"><img src="00_winset_icon_favorite_on.png">Subtext</span>
- <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
- </li>
-
- <li class="ui-li-2line-setting ui-li-dialogue">
- <span class="ui-li-text-main">2line-setting</span>
- <span class="ui-li-text-sub">Subtext</span>
- </li>
-
- <li class="ui-li-2line-toggle-setting ui-li-dialogue">
- <span class="ui-li-text-main">2line-toggle-setting</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="toggleswitch"/></div>
- </li>
-
- <li class="ui-li-2line-btn-setting ui-li-dialogue">
- <span class="ui-li-text-main">2line-btn-setting</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- </li>
-
- <li class="ui-li-2line-bigicon0 ui-li-dialogue">
- <span class="ui-li-text-main">2line-bigicon0</span>
- <span class="ui-li-text-sub">Subtext<img src="00_winset_icon_favorite_on.png"></span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- </li>
-
- <li class="ui-li-2line-bigicon1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-bigicon1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
- <li class="ui-li-2line-bigicon2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-bigicon2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-sub2">Subtext2</span>
- </li>
-
- <li class="ui-li-2line-bigicon3 ui-li-dialogue">
- <span class="ui-li-text-main">2line-bigicon3</span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
- <li class="ui-li-2line-bigicon4 ui-li-dialogue">
- <span class="ui-li-text-main">2line-bigicon4</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
- <li class="ui-li-2line-check1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-check1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <form><input type="checkbox" data-style="check" name="c2line-check1" /></form>
- </li>
-
- <li class="ui-li-2line-check2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-check2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <form><input type="checkbox" data-style="check" name="c2line-check2" /></form>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- </li>
-
- <li class="ui-li-2line-check3 ui-li-dialogue">
- <span class="ui-li-text-main">2line-check3</span>
- <span class="ui-li-text-sub">Subtext</span>
- <form><input type="checkbox" data-style="check" name="c2line-check3" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
-
- <li class="ui-li-2line-radio1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-radio1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <form><input type="radio" /></form>
- </li>
-
- <li class="ui-li-2line-radio2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-radio2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <form><input type="radio" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
-
- <li class="ui-li-2line-colorbar1 ui-li-dialogue">
- <span class="ui-li-color-bar"></span>
- <span class="ui-li-text-main">2line-colorbar1</span>
- <span class="ui-li-text-sub">Subtext
- <img src="00_winset_icon_favorite_on.png">
- <img src="00_winset_icon_favorite_on.png">
- <img src="00_winset_icon_favorite_on.png">
- </span>
- <span class="ui-li-text-sub2">Subtext2</span>
- <div data-role="button" data-inline="true">button</div>
- </li>
-
- <li class="ui-li-2line-colorbar3 ui-li-dialogue">
- <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
- <span class="ui-li-text-main">2line-colorbar3<img src="00_winset_icon_favorite_on.png"></span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true">button</div>
- </li>
-
- <li class="ui-li-2line-colorbar3 ui-li-dialogue">
- <span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
- <span class="ui-li-text-main">2line-colorbar3<img src="00_winset_icon_favorite_on.png"></span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call"></div>
- </li>
-
- <li class="ui-li-2line-colorbar3 ui-li-dialogue">
- <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
- <span class="ui-li-text-main">2line-colorbar3</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
- <li class="ui-li-2line-bigicon8 ui-li-dialogue">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-bigicon8</span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
- </li>
-
- <li class="ui-li-2line-thumb1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-thumb1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
- <li class="ui-li-2line-thumb2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-thumb2<img src="00_winset_icon_favorite_on.png"></span>
- <span class="ui-li-text-sub"><img src="00_winset_icon_favorite_on.png">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
- <li class="ui-li-2line-sub-main-bigicon1 ui-li-dialogue">
- <span class="ui-li-text-sub">Subtext</span>
- <span class="ui-li-text-main">2line-sub-main-bigicon1</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
- <li class="ui-li-2line-bigicon-pgbar1 ui-li-dialogue">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-bigicon-pgbar1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <span class="ui-li-text-sub2">Subtext2</span>
- <div data-role="button" data-inline="true">Cancel</div>
- <div data-role="progressbar"></div>
- </li>
-
- <li class="ui-li-2line-bigicon-pgbar2 ui-li-dialogue">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-bigicon-pgbar2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true">button</div>
- </li>
-
- <li class="ui-li-2line-bigicon-pgbar2 ui-li-dialogue">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-bigicon-pgbar2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call"></div>
- </li>
-
- <li class="ui-li-2line-bigicon-pgbar3 ui-li-dialogue">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-bigicon-pgbar3</span>
- <span class="ui-li-text-sub">Subtext</span>
- <span class="ui-li-text-sub2">Subtext2</span>
- <div data-role="progressbar"></div>
- </li>
-
- <li class="ui-li-2line-icon-bigicon-btn ui-li-dialogue">
- <form><input type="checkbox" data-style="check" name="c2line-icon-bigicon-btn" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-icon-bigicon-btn</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- </li>
-
- <li class="ui-li-2line-thumb3 ui-li-dialogue">
- <span class="ui-li-text-main">2line-thumb3<img src="00_winset_icon_favorite_on.png"></span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
- </ul>
- </div>
-</div>
-
+++ /dev/null
-<div data-role="page" id="genlist-expandable" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>expandable list</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li class="ui-li-1line ui-li-dialogue" data-expandable="true" id="exp1" data-initial-expansion="true">1line</li>
- <li class="ui-li-1line ui-li-dialogue" data-expanded-by="exp1">exp1-sub 1</li>
- <li class="ui-li-1line ui-li-dialogue" data-expanded-by="exp1">exp1-sub 2</li>
- <li class="ui-li-1line ui-li-dialogue" data-expanded-by="exp1">exp1-sub 3</li>
- <li class="ui-li-1line ui-li-dialogue" data-expanded-by="exp1">exp1-sub 4</li>
- <li class="ui-li-1line ui-li-dialogue" data-expanded-by="exp1">exp1-sub 5</li>
- <li class="ui-li-1line ui-li-dialogue" data-expanded-by="exp1">exp1-sub 6</li>
- <li class="ui-li-1line ui-li-dialogue" data-expanded-by="exp1">exp1-sub 7</li>
- <li data-expanded-by="exp1" data-expandable="true" id="exp2">exp1-sub 2 (exp2)</li>
- <li class="ui-li-1line" data-expanded-by="exp2">exp2-sub 1</li>
- <li class="ui-li-1line" data-expanded-by="exp2">exp2-sub 2</li>
- <li class="ui-li-1line" data-expanded-by="exp2">exp2-sub 3</li>
- <li class="ui-li-2line ui-li-dialogue" data-expandable="true" id="exp3">
- <span class="ui-li-text-main">2line</span>
- <span class="ui-li-text-sub">Subtext</span>
- </li>
- <li class="ui-li-2line-sub-main ui-li-dialogue" data-expandable="true" id="exp4">
- <span class="ui-li-text-main">2line-sub-main</span>
- <span class="ui-li-text-sub">Subtext</span>
- </li>
- <li class="ui-li-2line-radio1 ui-li-dialogue" data-expandable="true" id="exp5">
- <span class="ui-li-text-main">2line-radio1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <form><input type="radio" /></form>
- </li>
- <li class="ui-li-2line-colorbar3" data-expandable="true" id="exp6">
- <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
- <span class="ui-li-text-main">2line-colorbar3</span>
- <span class="ui-li-text-sub">Subtext</span>
-<!-- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div> -->
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
-
- </ul>
- </div>
- <div data-role="footer">
- </div>
-</div>
+++ /dev/null
-<div data-role="page" id="genlist-radio" data-add-back-btn="true" data-fit-page-to-window="true">
- <div data-role="header" data-position="fixed">
- <h1>Radio Button lists</h1>
- </div>
- <form>
- <div class="content" data-role="content" data-scroll="y">
- <ul data-role="listview">
- <li class="ui-li-1line-radio1">
- <span class="ui-li-text-main">Radio Item 1</span>
- <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked"/>
- </li>
- <li class="ui-li-1line-radio1">
- <span class="ui-li-text-main">Radio Item 2</span>
- <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"/>
- </li>
- <li class="ui-li-1line-radio1">
- <span class="ui-li-text-main">Radio Item 3</span>
- <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"/>
- </li>
- <li class="ui-li-1line-radio3">
- <span class="ui-li-text-main">Radio Item 4</span>
- <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"/>
- <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
- </li>
- <li class="ui-li-1line-radio4">
- <span class="ui-li-text-main">Radio Item 5</span>
- <input type="radio" name="radio-choice-1" id="radio-choice-5" value="choice-5"/>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
- <li class="ui-li-1line-radio1">
- <span class="ui-li-text-main">Radio Item 6</span>
- <input type="radio" name="radio-choice-1" id="radio-choice-6" value="choice-6"/>
- </li>
- <li class="ui-li-1line-radio1">
- <span class="ui-li-text-main">Radio Item 7</span>
- <input type="radio" name="radio-choice-1" id="radio-choice-7" value="choice-7"/>
- </li>
- <li class="ui-li-1line-radio1">
- <span class="ui-li-text-main">Radio Item 8</span>
- <input type="radio" name="radio-choice-1" id="radio-choice-8" value="choice-8"/>
- </li>
- <li class="ui-li-1line-radio3">
- <span class="ui-li-text-main">Radio Item 9</span>
- <input type="radio" name="radio-choice-1" id="radio-choice-9" value="choice-9"/>
- <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
- </li>
- <li class="ui-li-1line-radio4">
- <span class="ui-li-text-main">Radio Item 10</span>
- <input type="radio" name="radio-choice-1" id="radio-choice-10" value="choice-10"/>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
- </ul>
- </div>
- </form>
-</div>
-
+++ /dev/null
-<div data-role="page" id="genlist-swipe" data-add-back-btn="true" data-fit-page-to-window="true">
- <div data-role="header" data-position="fixed">
- <h1>Swipe lists</h1>
- </div>
- <div class="content" data-role="content">
- <ul data-role="listview">
- <ul data-role="swipelist">
- <li class="ui-li-1line-leftsub1 ui-li-dialogue">
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="swipelist-item-cover">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
- </div>
- </li>
- <li class="ui-li-1line ui-li-dialogue">
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="swipelist-item-cover">
- <div class="ui-li-text-main">1line</div>
- </div>
- </li>
- <li class="ui-li-1line-leftsub1 ui-li-dialogue">
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="swipelist-item-cover">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
- </div>
- </li>
- <li class="ui-li-1line ui-li-dialogue">
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="swipelist-item-cover">
- <div class="ui-li-text-main">1line</div>
- </div>
- </li>
- <li class="ui-li-1line-leftsub1 ui-li-dialogue">
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="swipelist-item-cover">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
- </div>
- </li>
- <li class="ui-li-1line ui-li-dialogue">
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="swipelist-item-cover">
- <div class="ui-li-text-main">1line</div>
- </div>
- </li>
- <li class="ui-li-1line-leftsub1 ui-li-dialogue">
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="swipelist-item-cover">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
- </div>
- </li>
- <li class="ui-li-1line ui-li-dialogue">
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="swipelist-item-cover">
- <div class="ui-li-text-main">1line</div>
- </div>
- </li>
- <li class="ui-li-1line-leftsub1 ui-li-dialogue">
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="swipelist-item-cover">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
- </div>
- </li>
- <li class="ui-li-1line ui-li-dialogue">
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Twitter</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="button" data-inline="true">Facebook</div>
- <div data-role="swipelist-item-cover">
- <div class="ui-li-text-main">1line</div>
- </div>
- </li>
- </ul>
- </ul>
- </div>
-</div>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- </head>
- <body>
-
-
-<div data-role="page" id="list" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>List</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li data-role="list-divider">Item styles</li>
- <li><a href="list-normal.html">Normal lists</a></li>
- <li><a href="list-bubble.html">bubble</a></li>
- <li><a href="list-expandable.html">expandable list</a></li>
- <li><a href="list-radio.html">Radio Button list</a></li>
- <li><a href="list-dialogue.html">Dialogue list</a></li>
- <li><a href="list-email.html">Email list</a></li>
- <li><a href="list-swipe.html">Swipe list</a></li>
- <li><a href="list-extendable.html">Extendable list</a></li>
- <li><a href="virtuallist-normal.html">Virtual List Normal Style 1line</a></li>
- <li><a href="virtuallist-normal_3_1_4.html">Virtual List Normal Style 1line-btn1</a></li>
- <li><a href="virtuallist-normal_3_1_6.html">Virtual List Normal Style 1line-toggle</a></li>
- <li><a href="virtuallist-normal_3_1_14.html">Virtual List Normal Style 1line-bigicon5</a></li>
- <li><a href="virtuallist-normal_3_2_7.html">Virtual List Normal Style 2line-star1</a></li>
- <li data-role="list-divider">(empty)</li>
- <li data-role="list-divider">Samples</li>
- </ul>
- </div>
-</div>
-
-
-
-<div data-role="page" id="3" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1></h1>
- </div>
- <div data-role="content">
- <ul-data-role="listview">
- </ul>
- </div>
-</div>
-
-
-</body>
-</html>
+++ /dev/null
-<div data-role="page" id="pagecontrol" data-add-back-btn="true" data-fit-page-to-window="true">
- <div data-role="header">
- <h1>Pagecontrol (page indicator)</h1>
- </div>
- <div class="content" data-role="content">
- <div id="p10" data-role="pagecontrol" data-max="10" data-initVal="10"></div>
- <div id="p9" data-role="pagecontrol" data-max="9" data-initVal="9"></div>
- <div id="p8" data-role="pagecontrol" data-max="8" data-initVal="8"></div>
- <div id="p7" data-role="pagecontrol" data-max="7" data-initVal="7"></div>
- <div id="p6" data-role="pagecontrol" data-max="6" data-initVal="6"></div>
- <div id="p5" data-role="pagecontrol" data-max="5" data-initVal="5"></div>
- <div id="p4" data-role="pagecontrol" data-max="4" data-initVal="4"></div>
- <div id="p3" data-role="pagecontrol" data-max="3" data-initVal="3"></div>
- <div id="p2" data-role="pagecontrol" data-max="2" data-initVal="2"></div>
- <div id="p1" data-role="pagecontrol" data-max="1"></div>
-
- <div id="txt">here</div>
- <a href="#" id="pagecontrol_btn_randomset" data-role="button" data-inline="true">Set each values randomly</a>
- </div>
-</div>
+++ /dev/null
-<div data-role="page" id="progressbar-demo" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Progress bar</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li data-role="list-divider">Progress Bar</li>
- <li>When you click progress bar, it starts updating values...</li>
- <li id="progressbarTest" ><div data-role="progressbar" id="progressbar"></div></li>
-
- <li data-role="list-divider">Progress Pending</li>
- <li id="pendingTest" ><div data-role="progressing" data-style="pending" id="pending"></div></li>
-
- <li data-role="list-divider">Progress ~ing</li>
- <li id="progressingTest" ><div data-role="progressing" data-style="circle" id="progressing"></div></li>
- </ul>
- </div> <!-- /content -->
-</div> <!-- /page -->
-
-
+++ /dev/null
-var progressbar_running;
-
-$("#progressbar-demo").live("pageshow", function ( e ) {
-
- $("#progressbarTest").bind("vclick", function ( e ) {
- progressbar_running = !progressbar_running;
-
- // request animation frame
- window.requestAnimFrame = (function () {
- return window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function (animloop) {
- return window.setTimeout(animloop, 1000 / 60);
- };
- }());
-
- window.cancelRequestAnimFrame = (function () {
- return window.cancelAnimationFrame ||
- window.webkitCancelRequestAnimationFrame ||
- window.mozCancelRequestAnimationFrame ||
- window.oCancelRequestAnimationFrame ||
- window.msCancelRequestAnimationFrame ||
- clearTimeout;
- }());
-
- var request,
- i = 0;
-
- // start and run the animloop
- (function animloop() {
- if ( !progressbar_running ) {
- cancelRequestAnimFrame( request );
- return;
- }
-
- $("#progressbar").progressbar( "option", "value", i++ );
-
- request = requestAnimFrame( animloop );
-
- if ( i > 100 ) {
- cancelRequestAnimFrame( request );
- }
- }());
- });
-
- $( this ).find("#pending").progress({ running: true });
- $( this ).find("#progressing").progress({ running: true });
-
- $("#pendingTest").bind("vclick", function ( e ) {
- var running = $("#pending").progress( "option", "running" );
- // start/stop progressing animation
- $("#pending").progress( "option", "running", !running );
- });
-
- $("#progressingTest").bind("vclick", function ( e ) {
- var running = $("#progressing").progress( "option", "running" );
- // start/stop progressing animation
- $("#progressing").progress( "option", "running", !running );
- });
-});
-
-$("#progressbar-demo").live("pagehide", function ( e ) {
- progressbar_running = false;
- $( this ).find("#pending").progress( { running: true } );
- $( this ).find("#progressing").progress( { running: true } );
-});
+++ /dev/null
-<!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true" data-fit-page-to-window="true" id="searchbar-demo-page">
- <div data-role="header" data-position ="fixed" >
- <h1>Searchbar</h1>
- <div id="myoptionheader2" data-role="optionheader">
- <div class="ui-grid-b ">
- <div class="ui-block-a"><a data-role="button">Previous</a></div>
- <div class="ui-block-b"><a data-role="button">Cancel</a></div>
- <div class="ui-block-c"><a data-role="button">Save</a></div>
- </div>
-
- </div>
- <input type="search" name="search" id="search1" value="" />
- </div><!-- /header -->
-
- <div data-role="content" id="searchbar-content">
- <p>Hairston</p>
- <p>Hansbrough</p>
- <p>Allred</p>
- <p>Hanrahan</p>
- <p>Egan</p>
- <p>Dare</p>
- <p>Edmonson</p>
- <p>Calip</p>
- <p>Baker</p>
- <p>Fazekas</p>
- <p>Garrity</p>
- <p>Hansen</p>
- <p>Feigenbaum</p>
- <p>Fillmore</p>
- <p>Darden</p>
- <p>Davis</p>
- <p>Fitzgerald</p>
- <p>Carr</p>
- <p>Danilovic</p>
- <p>Dark</p>
- <p>Alexander</p>
- <p>Allen</p>
- <p>Edwards</p>
- <p>Garrett</p>
- <p>Gardner</p>
- <p>Carroll</p>
- <p>Garner</p>
- <p>Finn</p>
- <p>Edelin</p>
- <p>Gay</p>
- </div>
-
- <script src="searchbar.js"></script>
-</div><!-- /page -->
-
+++ /dev/null
-<html>\r
- <body>\r
- <div data-role="page"data-add-back-btn="true" data-fit-page-to-window="true">\r
- <div data-role="notification" id="smallpopup_selectioninfo" data-type="popup" data-param="write on parameter here"></div>\r
- <div data-role="header" data-position="fixed">\r
- <h1>Selection Info</h1>\r
- </div>\r
-\r
- <div data-role="content">\r
- <h2>Selectioninfo Test </h2>\r
- <fieldset id="dayselector1" data-role="dayselector" data-type="horizontal">\r
- <legend>Choose some days</legend>\r
- </fieldset>\r
- \r
- <div><a id="day-selector-check-all" data-role="button" data-inline="true">Check all</a></div>\r
- \r
- <hr/>\r
-\r
-\r
- <p id="selectioninfo-demo" align="center">Click Here to Show Small Popup</p>\r
-\r
- </div> <!-- /page -->\r
-\r
- </body>\r
-</html>\r
+++ /dev/null
-<!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="notification" id="notification" data-type="popup" data-text1="Will disappear after 3 seconds" data-param="write on parameter here" data-interval="3000"></div>
- <div data-role="header" data-position="fixed">
- <h1>Notification</h1>
- </div>
- <div data-role="content">
- <p id="notification-demo" align="center">Click Here to Show Small Popup</p>
- </div><!-- /content -->
-</div> <!-- /page -->
+++ /dev/null
-<!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="notification" id="notification" data-type="popup" data-text1="Notification Demo" data-param="write on parameter here"></div>
- <div data-role="header" data-position="fixed">
- <h1>Notification</h1>
- </div>
- <div data-role="content">
- <p id="notification-demo" align="center">Click Here to Show Small Popup</p>
- </div><!-- /content -->
-</div> <!-- /page -->
+++ /dev/null
-<html>
-<head>
-
-</head>
-<body>
-<div data-role="page" id="switch-demo" data-add-back-btn="true">
- <div data-role="header">
- <h1>Switch</h1>
- </div>
- <div class="content" data-role="content">
- <div id="switch-1" data-role="toggleswitch" data-checked="false"></div>
- <p/>
- <div id="switch-2" data-role="toggleswitch"></div>
- <p>Coordinated switches:</p>
- <div id="switch-1-coord" data-role="toggleswitch"></div>
- <div id="switch-2-coord" data-role="toggleswitch"></div>
- </div> <!-- /content -->
- <div data-role="footer">
- <h4>Web UI Framework - Widgets gallery</h4>
- </div>
-</div> <!-- page -->
-</body>
-</html>
+++ /dev/null
-var coordSwitchesAreInit = false;
-$("#switch-demo").live("pageshow", function(e) {
- if ( coordSwitchesAreInit ) return;
-
- $("#switch-1-coord").bind("changed", function(e) {
- $("#switch-2-coord").toggleswitch("option", "checked", $("#switch-1-coord").toggleswitch("option", "checked"));
- });
- $("#switch-2-coord").bind("changed", function(e) {
- $("#switch-1-coord").toggleswitch("option", "checked", $("#switch-2-coord").toggleswitch("option", "checked"));
- });
-
- coordSwitchesAreInit = true;
-});
+++ /dev/null
-<!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="notification" id="notification" data-type="ticker" data-text1="Ticker" data-text2="Tickernoti" data-param="write on parameter here" data-interval="3000"></div>
- <div data-role="header" data-position="fixed">
- <h1>Notification</h1>
- </div>
- <div data-role="content">
- <p id= "notification-demo" align="center">Click Here to Show TickerNoti</p>
- </div><!-- /content -->
-</div> <!-- /page -->
+++ /dev/null
-<!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="notification" id="notification" data-type="ticker" data-text1="Dennis" data-text2="Hello World" data-param="write on parameter here"></div>
- <div data-role="header" data-position="fixed">
- <h1>Notification</h1>
- </div>
- <div data-role="content">
- <p id="notification-demo" align="center">Click Here to Show TickerNoti</p>
- </div><!-- /content -->
-</div> <!-- /page -->
--- /dev/null
+.my-check-button-style {
+ margin: 10px;
+}
+.my-check-inline-style {
+ display: inline;
+}
+
+.ui-icon-test{
+ background-size: 100% 100%;
+ background-image: url(test.png);
+}
+
+.ui-icon-test2{
+ background-position:0% 0%;
+ background-size:50% 50%;
+ background-image: url(test.png);
+}
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="configure.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+ <script src="main.js"></script>
+ <link rel="stylesheet" href="custom.css" />
+
+ <title>Tizen UI</title>
+
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+ <link rel="apple-touch-icon" href="icon-tizen.png" />
+ <link rel="stylesheet" href="./widgets/grid/css/namecard.css" />
+</head>
+
+<body>
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Tizen UI</h1>
+ </div>
+ <div data-role="content">
+ <p id="current_date"></p>
+ <p id="html_font_size"></p>
+ <fieldset data-role="controlgroup" id="input-select-theme">
+ <legend>Select theme</legend>
+ <input type="radio" name="select-theme" id="select-theme-tizen-black" value="tizen-black"/>
+ <label for="select-theme-tizen-black">tizen-black</label>
+ <input type="radio" name="select-theme" id="select-theme-tizen-white" value="tizen-white" checked="true" />
+ <label for="select-theme-tizen-white">tizen-white</label>
+ </fieldset>
+ <script>
+ $( document ).one( "pagecreate", function ( ) {
+ $("#input-select-theme").find("input[name='select-theme']").bind( "change",
+ function ( ev, data ) {
+ var radio = this,
+ theme = "tizen-white";
+ if( radio.checked ) {
+ theme = radio.value;
+ console.log( "Request theme change: " + theme );
+ $.tizen.loadTheme( theme );
+ }
+ }
+ );
+ } );
+ </script>
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li data-role="list-divider">Controls</li>
+ <li><a href="widgets/button/button.html">Button</a></li>
+ <li><a href="widgets/checkbox/checkbox.html">Check</a></li>
+ <li><a href="widgets/switch/switch.html">Switch</a></li>
+ <li><a href="widgets/radio/radio.html">Radio</a></li>
+ <li><a href="widgets/colorpicker.html">Color picker</a></li>
+ <li><a href="widgets/datefield.html">Time picker</a></li>
+ <li><a href="widgets/progressbar.html">Progressbar</a></li>
+ <li><a href="widgets/entry.html">Entry</a></li>
+ <li><a href="widgets/searchbar.html">Searchbar</a></li>
+ <li><a href="#slider-demo">Slider</a></li>
+ <li><a href="widgets/day-selector.html" >Day Selector</a></li>
+ <li><a href="#NavigationbarMain">Navigation Bar</a></li>
+ <li><a href="widgets/imageslider.html">ImageSlider</a></li>
+ <li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
+ <li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
+ <li><a href="widgets/handler.html">Handler</a></li>
+ <li><a href="#multibuttonentry">Multi-Button Entry</a></li>
+ <li data-role="list-divider">ControlBar</li>
+ <li><a href="#controlbar-demo">ControlBar</a></li>
+
+ <li data-role="list-divider">List</li>
+ <li><a href="widgets/list/list.html">List</a></li>
+ <li><a href="widgets/auto-dividers.html">Auto-Dividers</a></li>
+ <li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li>
+
+ <li data-role="list-divider">Navigation Bar</li>
+ <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
+ <li><a href="#option-header-demo">Optional Header</a></li>
+
+ <li data-role="list-divider">Popup</li>
+ <li><a href="widgets/popupwindow/popup.html">Popup</a></li>
+ <li><a href="widgets/ctxpopup.html">CxtPopup</a></li>
+
+ <li data-role="list-divider">Notification (ticker)</li>
+ <li><a href="widgets/tickernoti.html">TickerNoti</a></li>
+ <li><a href="widgets/small-popup.html">Small Popup</a></li>
+
+ <li data-role="list-divider">No Contents</li>
+ <li><a href="#no-contents-0">No Contents - Text</a></li>
+ <li><a href="#no-contents-1">No Contents - Picture</a></li>
+ <li><a href="#no-contents-2">No Contents - Multimedia</a></li>
+ <li><a href="#no-contents-3">No Contents - Unnamed</a></li>
+
+ <li data-role="list-divider">Grid view</li>
+ <li><a href="widgets/grid/virtualgrid.html">Virtual Grid</a></li>
+ <li><a href="widgets/grid/virtualgrid-rotation.html">Virtual Grid - Rotation</a></li>
+ <li><a href="widgets/grid/virtualgrid-list.html">Virtual Grid - List</a></li>
+ <li><a href="widgets/grid/virtualgrid-x.html">Virtual Grid - X</a></li>
+ <li><a href="widgets/grid/virtualgrid-auto.html">Virtual Grid - Auto</a></li>
+ <li data-role="list-divider">Multimedia view</li>
+ <li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</a></li>
+ <li data-role="list-divider">Map view</li>
+
+ <li data-role="list-divider">PageLayout</li>
+ <li><a href="widgets/pagelayout/barcontrol.html">Header/Footer(fixed/non-fixed) Control</a></li>
+ <li><a href="widgets/pagelayout/backbutton-control.html">Back Button Control</a></li>
+
+ <li data-role="list-divider">Programming Tips</li>
+ <li><a href="tips/generate-elements-dynamically.html">Generate Elements by JS</a></li>
+ <li><a href="tips/custom-globalize-culture/custom-globalize-culture.html">Using custom Globalize culture files</a></li>
+ <li><a href="tips/two-line-text/two-line-text.html">2 line text</a></li>
+ <li><a href="tips/list-sample/list-sample.html">Example for using listview</a></li>
+ <li><a href="tips/list-sample/expandable.html">Example for using expandable list</a></li>
+ <li><a href="tips/page-transition/transition.html">Page transitions</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="notImplemented">
+ <div data-role="header" data-position="fixed">
+ <h1>Not Implemented</h1>
+ </div>
+ <div data-role="content">
+ <p> Not Implemented </p>
+ </div>
+ </div>
+
+ <div data-role="page" id="slider-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Slider</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li data-role="list-divider">Normal Slider</li>
+ <li><input id="mySlider" name="mySlider" data-popup='false' type="range" name="slider" value="5" min="0" max="10" /></li>
+ <li data-role="list-divider">Popup Slider</li>
+ <li><input id="mySlider2" name="mySlider2" type="range" value="50" min="0" max="100" /></li>
+ <li data-role="list-divider">Icon Slider</li>
+ <li><input id="mySlider3" name="mySlider3" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='bright'/></li>
+ <li><input id="mySlider4" name="mySlider4" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='volume'/></li>
+ <li data-role="list-divider">Text Slider</li>
+ <li><input id="mySlider5" name="mySlider5" data-popup='false' type="range" name="slider" value="50" min="0" max="99" data-icon='text' data-text-left='0' data-text-right='99'/></li>
+ <li><input id="mySlider5" name="mySlider5" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='text' data-text-left='Min' data-text-right='Max'/></li>
+ </ul>
+ </div><!-- /content -->
+ </div> <!-- /page -->
+
+ <div data-role="page" id="option-header-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Optional Header</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="#optionheader1line2btn">1 line 2 buttons</a></li>
+ <li><a href="#optionheader1line3btn">1 line 3 buttons</a></li>
+ <li><a href="#optionheader1line4btn">1 line 4 buttons</a></li>
+ <li><a href="#optionheader2line4btn">2 line 4 buttons</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="optionheader1line2btn" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <a id="123">TestBtn</a>
+ <h1>Option header - 2 buttons</h1>
+ <a id="opt_text" data-icon="optiontray"></a>
+ <a id="1234">TestBtn</a>
+
+ <div id="myoptionheader1" data-role="optionheader" data-for="opt_text">
+ <div class="ui-grid-a ">
+ <div class="ui-block-a"><a data-role="button">Save</a></div>
+ <div class="ui-block-b"><a data-role="button">Next</a></div>
+ </div>
+ </div>
+ </div>
+ <div data-role="content">
+ <p>Some content would be here</p>
+ </div>
+ </div>
+
+ <div data-role="page" id="optionheader1line3btn" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Option header - 3 buttons</h1>
+ <div id="myoptionheader2" data-role="optionheader">
+ <div class="ui-grid-b ">
+ <div class="ui-block-a"><a data-role="button">Previous</a></div>
+ <div class="ui-block-b"><a data-role="button">Cancel</a></div>
+ <div class="ui-block-c"><a data-role="button">Save</a></div>
+ </div>
+ </div>
+ </div>
+ <div data-role="content">
+ <p>Some content would be here</p>
+ </div>
+ </div>
+
+ <div data-role="page" id="optionheader1line4btn" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Option header - 4 buttons</h1>
+ <div id="myoptionheader3" data-role="optionheader">
+ <div class="ui-grid-c ">
+ <div class="ui-block-a"><a data-role="button">Previous</a></div>
+ <div class="ui-block-b"><a data-role="button">Cancel</a></div>
+ <div class="ui-block-c"><a data-role="button">Save</a></div>
+ <div class="ui-block-d"><a data-role="button">Next</a></div>
+ </div>
+ </div>
+ </div>
+ <div data-role="content">
+ <p>Some content would be here</p>
+ </div>
+ </div>
+
+ <div data-role="page" id="optionheader2line4btn" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Option header - 4 buttons</h1>
+ <div id="myoptionheader" data-role="optionheader">
+ <div class="ui-grid-c ">
+ <div class="ui-block-a"><a data-role="button">Previous</a></div>
+ <div class="ui-block-b"><a data-role="button">Cancel</a></div>
+ <div class="ui-block-c"><a data-role="button">Save</a></div>
+ <div class="ui-block-d"><a data-role="button">Next</a></div>
+ <div class="ui-block-a"><a data-role="button">Left</a></div>
+ <div class="ui-block-b"><a data-role="button">1st Middle</a></div>
+ <div class="ui-block-c"><a data-role="button">2nd Middle</a></div>
+ <div class="ui-block-d"><a data-role="button">Right</a></div>
+ </div>
+ </div>
+ </div>
+ <div data-role="content">
+ <p>Some content would be here</p>
+ </div>
+ </div>
+
+ <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>ControlBar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#Tabbar_Main">Tabbar Style</a></li>
+ <li><a href="#Toolbar">Toolbar Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <!-- ControlBar Tabbar Style -->
+ <div data-role="page" id="Tabbar_Main">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
+ <li><a href="#Tabbar2Items">2 Items Style</a></li>
+ <li><a href="#Tabbar3Items">3 Items Style</a></li>
+ <li><a href="#Tabbar4Items">4 Items Style</a></li>
+ <li><a href="#Tabbar5Items">5 Items Style</a></li>
+ <li><a href="#TabbarText">Only Text Style</a></li>
+ <li><a href="#TabbarIcon">Only Icon Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div data-role="page" id="TabbarInHeader">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Test</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ </div>
+ </div>
+ <div data-role="page" id="Tabbar2Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">2 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Tabbar3Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">3 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Tabbar4Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">4 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Tabbar5Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">5 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="TabbarText">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Text Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" class="ui-btn-active">Songs</a></li>
+ <li><a href="#">Favorites</a></li>
+ <li><a href="#">Group</a></li>
+ <li><a href="#">Message</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="TabbarIcon">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Icon Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="ctrlbar-save" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-share" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <!-- Toolbar Style -->
+ <div data-role="page" id="Toolbar">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
+ <li><a href="#Toolbar2Items">2 Items Style</a></li>
+ <li><a href="#Toolbar3Items">3 Items Style</a></li>
+ <li><a href="#Toolbar4Items">4 Items Style</a></li>
+ <li><a href="#Toolbar5Items">5 Items Style</a></li>
+ <li><a href="#ToolbarText">Only Text Style</a></li>
+ <li><a href="#ToolbarIcon">Only Icon Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="ToolbarInHeader">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Test</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ </div>
+ </div>
+
+
+ <div data-role="page" id="Toolbar2Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">2 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Toolbar3Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">3 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Toolbar4Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">4 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Toolbar5Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">5 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="ToolbarText">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Text Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" class="ui-btn-active">Songs</a></li>
+ <li><a href="#">Favorites</a></li>
+ <li><a href="#">Group</a></li>
+ <li><a href="#">Message</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="ToolbarIcon">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Only Icon Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="ctrlbar-save" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-share" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+ <!-- Toolbar Style -->
+
+ <!-- Mixed Style -->
+
+ <div data-role="page" id="Mixed" >
+ <div data-role="header" data-position="fixed">
+ <h1>Mixed Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <p>Not Supported for winset</p>
+ </div>
+ </div>
+ <!-- Mixed Style -->
+
+ <!-- ControlBar Left Style -->
+ <div data-role="page" id="ControlBarVerticalLeft" >
+ <div data-role="header" data-position="fixed">
+ <h1>Vertical Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
+ <li><a href="#notImplemented">Button</a></li>
+ <li><a href="#notImplemented">Check</a></li>
+ </ul>
+ <div data-role="controlbar" data-style="left">
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+ <!-- ControlBar Left Style -->
+
+ <!-- ControlBar Right Style -->
+ <div data-role="page" id="ControlBarVerticalRight" >
+ <div data-role="header" data-position="fixed">
+ <h1>Vertical Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
+ <li><a href="#notImplemented">Button</a></li>
+ </ul>
+ <div data-role="controlbar" data-style="right">
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+ <!-- ControlBar Right Style -->
+
+ <!-- ControlBar Animation -->
+ <div data-role="page" id="ControlBarAnimation" >
+ <div data-role="header" data-position="fixed">
+ <h1>Vertical Toolbar</h1>
+ </div>
+ <div data-role="content">
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar">
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+ <!-- ControlBar Animation -->
+
+ <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>ControlBar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#normalstyle">Normal style title</a></li>
+ <li><a href="#extendedstyle">Extended style title</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="normalstyle" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="normal1btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title - 1Btn</h1>
+ <a>default</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="normal2btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title - 2Btn</h1>
+ <a>default1</a>
+ <a>default2</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="normal2btnicononly">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title+2Buttons Icon only - Not Implemented Yet</h1>
+ <a data-icon="plus"></a>
+ <a data-icon="minus"></a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+
+ <div data-role="page" id="normal3btn" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <a>default1</a>
+ <h1>Normal Title - 3Btn</h1>
+ <a>default2</a>
+ <a>default3</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="iconTitle">
+ <div data-role="header" data-position="fixed">
+ <img src="icon-tizen.png"/>
+ <h1>Icon Title</h1>
+ <a>default</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="customTitle1">
+ <div data-role="header" data-position="fixed">
+ <h1>Title with Left button</h1>
+ <a class="ui-btn-left">Left1</a>
+ <a class="ui-btn-left">Left2</a>
+ <a class="ui-btn-left">Left3</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="customTitle2">
+ <div data-role="header" data-position="fixed">
+ <h1>Title with Right button</h1>
+ <a class="ui-btn-right">Right1</a>
+ <a class="ui-btn-right">Right2</a>
+ <a class="ui-btn-right">Right3</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="customTitle3">
+ <div data-role="header" data-position="fixed">
+ <a class="ui-btn-left">Left</a>
+ <h1>Title with Left/Right button</h1>
+ <a class="ui-btn-right">Right1</a>
+ <a class="ui-btn-right">Right2</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+
+
+
+
+ <div data-role="page" id="extendedstyle" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ <li><a href="#extendedstyle4btn">4 Button</a></li>
+ <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="extendedstyle2btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title 2 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+ <label for="segment1">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+ <label for="segment2">Call</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="extendedstyle3btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title 3 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
+ <label for="segment71">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
+ <label for="segment72">Call</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
+ <label for="segment73">Message</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="extendedstyle4btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title 4 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
+ <label for="segment71">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
+ <label for="segment72">Call</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
+ <label for="segment73">Message</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
+ <label for="segment74">Contact</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="footerExtendedStyle">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Footer style</h1>
+ </div>
+ <div data-role="content">
+ <p> test page </p>
+ </div>
+ <div data-role="footer" data-position="fixed">
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+ <label for="segment1">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+ <label for="segment2">Call</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
+ <label for="segment3">Contact</label>
+ </fieldset>
+ </div>
+ <a>Edit</a>
+ </div>
+ </div>
+
+ <div data-role="page" id="multibuttonentry">
+ <div data-role="header" data-position="fixed">
+ <h1>Multi-button Entry</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="multibuttonentry" data-listuri="addressbook"></div>
+ <br>
+ <ul data-role="listview">
+ <li><a id='MBTaddItemTest'>Append Item</a></li>
+ <li><a id='MBTremoveItemTest'>Remove first Item</a></li>
+ <li><a id='MBTinputTextTest'>Input 'Hello'</a></li>
+ <li><a id='MBTgetInputTextTest'>Get input text</a></li>
+ <li><a id='MBTselectItemTest'>Select 1</a></li>
+ <li><a id='MBTgetSelectedItemTest'>Selected item</a></li>
+ <li><a id='MBTlengthTest'>Length</a></li>
+ <li><a id='MBTfocusOutTest'>Grouping On</a></li>
+ <li><a id='MBTfocusInTest'>Grouping Off</a></li>
+ <li><a id='MBTremoveAllItemTest'>Remove All Item</a></li>
+ </ul>
+ </div>
+ </div>
+ <div data-role="page" id="addressbook" data-footer-Exist="false" >
+ <div data-role="header" data-position="fixed">
+ <h1>Address Book</h1>
+ <a id="cancelBtn" href="#multibuttonentry" data-role="button" class="ui-btn-right" >Cancel</a>
+ </div>
+ <div data-role="content" id="contentList">
+ <ul data-role="listview">
+ <li data-role="list-divider">A</li>
+ <li><a href="#multibuttonentry">Adam Kinkaid</a></li>
+ <li><a href="#multibuttonentry">Alex Wickerham</a></li>
+ <li><a href="#multibuttonentry">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="#multibuttonentry">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="#multibuttonentry">Caleb Booth</a></li>
+ <li><a href="#multibuttonentry">Christopher Adams</a></li>
+ <li><a href="#multibuttonentry">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="#multibuttonentry">David Walsh</a></li>
+ <li><a href="#multibuttonentry">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="#multibuttonentry">Elizabeth Bacon</a></li>
+ <li><a href="#multibuttonentry">Emery Parker</a></li>
+ <li><a href="#multibuttonentry">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="#multibuttonentry">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="#multibuttonentry">Graham Smith</a></li>
+ <li><a href="#multibuttonentry">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="#multibuttonentry">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="#multibuttonentry">Mike Farnsworth</a></li>
+ <li><a href="#multibuttonentry">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="#multibuttonentry">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="#multibuttonentry">Paul Baker</a></li>
+ <li><a href="#multibuttonentry">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="#multibuttonentry">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="#multibuttonentry">Sawyer Wakefield</a></li>
+ </ul>
+ </div> <!--/content -->
+ </div> <!--/page -->
+
+ <!-- nocontents -->
+ <div data-role="page" id="no-contents-0" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents0" data-type="text">
+ <p>Text Type</p>
+ <p>Text</p>
+ </div>
+ </div> <!-- /content -->
+ </div> <!-- /page -->
+
+ <div data-role="page" id="no-contents-1" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents1" data-type="picture">
+ <p>Picture Type</p>
+ <p>Text</p>
+ </div>
+ </div> <!-- /content -->
+ </div> <!-- /page -->
+
+ <div data-role="page" id="no-contents-2" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents2" data-type="multimedia">
+ <p>Multimedia Type</p>
+ <p>Text</p>
+ </div>
+ </div> <!-- /content -->
+ </div> <!-- /page -->
+
+ <div data-role="page" id="no-contents-3" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents3">
+ <p>Unnamed Type</p>
+ </div>
+ </div> <!-- /content -->
+ </div> <!-- /page -->
+
+
+ <script src="widgets/checkbox/checkbox.js"></script>
+ <script src="widgets/switch/switch.js"></script>
+ <script src="widgets/radio/radio.js"></script>
+ <script src="widgets/progressbar.js"></script>
+ <script src="widgets/ctxpopup.js"></script>
+ <script src="widgets/popupwindow/popupwindow.js"></script>
+ <script src="tips/generate-elements-dynamically.js"></script>
+ <script src="tips/two-line-text/two-line-text.js"></script>
+ <script src="tips/list-sample/list-sample.js"></script>
+ <script src="tips/list-sample/expandable.js"></script>
+ <script src="widgets/pagecontrol/pagecontrol-demo.js"></script>
+ <script src="widgets/multibuttonentry-demo.js"></script>
+ <script src="widgets/pagelayout/barcontrol.js"></script>
+ <script src="widgets/pagelayout/backbutton-control.js"></script>
+ <!-- test file for content div control, not completed yet -->
+ <script src="widgets/pagelayout/ctrl-test.js"></script>
+</body>
+</html>
--- /dev/null
+$( document ).bind("pagecreate", function () {
+ /* Color widget demo */
+ $("input[type='checkbox'][data-widget-type-list]").bind("change", function() {
+ var ls = $( this ).attr("data-widget-type-list").split(","),
+ page = $( this ).closest(":jqmData(role='page')"),
+ disabled = $( this ).is(":checked");
+
+ $.each(ls, function( idx, widgetType ) {
+ var ar = widgetType.split("-");
+
+ if ( ar.length === 2 ) {
+ page.find(":" + widgetType)[ar[1]]( "option", "disabled", disabled );
+ }
+ });
+ });
+
+ $("#checkHideInput").bind("change", function (e) {
+ $("#colorpickerbutton").colorpickerbutton("option", "hideInput", $("#checkHideInput").is(":checked"));
+ });
+
+ $('#scroller-demo').bind('pageshow', function ( e ) {
+ $page = $( e.target );
+ /*
+ * many options cannot be set without subclassing since they're
+ * used in the _create method - it seems as if these are for
+ * internal use only and scrollDuration is only changable by
+ * chance.
+ */
+ var $scroller2List = $('#scroller2').find('ul');
+ $scroller2List.scrollview( 'option','scrollDuration','10000' );
+
+ // only works by manipulating css
+ // the only other way is to use attribute 'scroll-method="scroll"' in html
+ $('#scroller2 .ui-scrollbar').css( 'visibility','hidden' );
+
+ /*
+ * make toggle button switch scroll bars on and off
+ */
+ var scrollBarVisible = $('#scroller2').find('.ui-scrollbar').css('visibility') === "visible";
+
+ var $toggleScrollBars = $('#toggleScrollBars');
+ $toggleScrollBars.attr( "checked", scrollBarVisible ).checkboxradio("refresh");
+
+ /* the 'label' is the thing that is clicked, not the input element */
+ var $label = $toggleScrollBars.siblings('label').attr( 'for', '#toggleScrollBars' );
+ $label.bind("click", function () {
+ var $scrollBar = $('#scroller2').find('.ui-scrollbar');
+ var scrollBarVisible = $scrollBar.css('visibility') === "visible";
+ var newVisibility = scrollBarVisible ? "hidden" : "visible";
+ $scrollBar.css( 'visibility', scrollBarVisible ? "hidden" : "visible" );
+ });
+ });
+
+ $("#demo-date").bind("date-changed", function ( e, newDate ) {
+ $("#selected-date1").text( newDate.toString() );
+ });
+
+ $("#demo-date2").bind("date-changed", function ( e, newDate ) {
+ $("#selected-date2").text( newDate.toString() );
+ });
+
+ $("#demo-date3").bind("date-changed", function ( e, newDate ) {
+ $("#selected-date3").text( newDate.toString() );
+ });
+
+ $("#demo-date4").bind("date-changed", function ( e, newDate ) {
+ $("#selected-date4").text( newDate.toString() );
+ });
+
+ $('#noti-demo').bind('vmouseup', function ( e ) {
+ $('#notification').notification('open');
+ });
+
+ $('#noti-icon1').bind('vclick', function ( e ) {
+ $('#notification').notification('icon', './test/icon02.png');
+ });
+
+ $('#noti-icon2').bind('vclick', function ( e ) {
+ $('#notification').notification('icon', './test/icon01.png');
+ });
+
+ $('#imageslider-add').bind('vmouseup', function ( e ) {
+ $('#imageslider').imageslider('add', './test/10.jpg');
+ $('#imageslider').imageslider('add', './test/11.jpg');
+ $('#imageslider').imageslider('refresh');
+ });
+
+ $('#imageslider-del').bind('vmouseup', function ( e ) {
+ $('#imageslider').imageslider('delete');
+ });
+
+ $('#selectioninfo-demo').bind('vmouseup', function ( e ) {
+ $('#smallpopup_selectioninfo').notification( "text",
+ $("#dayselector1").find(".ui-checkbox-on").length + " items are selected" );
+ $('#smallpopup_selectioninfo').notification('open');
+ });
+
+ $('#groupindex-demo').bind('pageshow', function () {
+ $('#groupindex').scrolllistview();
+ });
+
+ $("#showVolumeButton").bind("vclick", function ( e ) {
+ $("#myVolumeControl").volumecontrol("open");
+ });
+
+ $("#volumecontrol_setBasicTone").bind("change", function ( e ) {
+ var basicTone = !($("#volumecontrol_setBasicTone").next('label')
+ .find(".ui-icon").hasClass("ui-icon-checkbox-on"));
+
+ if ( basicTone ) {
+ $("#myVolumeControl").volumecontrol( "option", "basicTone", true );
+ $("#myVolumeControl").volumecontrol( "option", "title", "Basic Tone" );
+ } else {
+ $("#myVolumeControl").volumecontrol( "option", "basicTone", false );
+ $("#myVolumeControl").volumecontrol( "option", "title", "Volume" );
+ }
+ });
+
+ $("#myoptionheader").bind('collapse', function () {
+ console.log('option header was collapsed');
+ });
+
+ $("#myoptionheader").bind('expand', function () {
+ console.log('option header was expanded');
+ });
+
+ //day-selector codes...
+ $("#day-selector-check-all").live('vclick', function () {
+ $("#dayselector1").dayselector('selectAll');
+ });
+
+ $("#day-selector-get-days").live('vclick', function () {
+ var valuesStr = $("#dayselector1").dayselector('value').join(', ');
+ $(".selectedDay").text( valuesStr );
+ });
+
+ /* Gen list : Dummy DB load */
+ $(".virtuallist_demo_page").live("pagecreate", function () {
+ /* ?_=ts code for no cache mechanism */
+ $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
+ $("ul").filter( function () {
+ return $( this ).data("role") == "virtuallistview";
+ }).addClass("vlLoadSuccess");
+
+ $(".virtuallist_demo_page").die();
+ $("ul.ui-virtual-list-container").virtuallistview("create");
+ });
+ });
+
+ /*Expandable list : Dummy DB load*/
+ $("#genlist_extendable_page").live("pagecreate", function () {
+ /*?_=ts code for no cache mechanism*/
+ $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
+ $("ul").filter( function () {
+ return $( this ).data("role") == "extendablelist";
+ }).addClass("elLoadSuccess");
+
+ $("#genlist-extendable-page").die();
+ $("ul.ui-extendable-list-container").extendablelist("create");
+ });
+ });
+
+ /* Color widget demo */
+ var clrWidgetsAreInit = false;
+ $("#colorwidgets-demo").bind("pageshow", function () {
+ if ( clrWidgetsAreInit ) {
+ return;
+ }
+
+ $("#colorpicker").bind("colorchanged", function ( e, clr ) {
+ $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
+ $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
+ $("#hsvpicker").hsvpicker( "option", "color", clr );
+ $("#colortitle").colortitle( "option", "color", clr );
+ $("#colorpalette").colorpalette( "option", "color", clr );
+ });
+
+ $("#colorpickerbutton").bind("colorchanged", function ( e, clr ) {
+ $("#colorpicker").colorpicker( "option", "color", clr );
+ $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
+ $("#hsvpicker").hsvpicker( "option", "color", clr );
+ $("#colortitle").colortitle( "option", "color", clr );
+ $("#colorpalette").colorpalette( "option", "color", clr );
+ });
+
+ $("#colorpickerbutton-noform").bind("colorchanged", function ( e, clr ) {
+ $("#colorpicker").colorpicker( "option", "color", clr );
+ $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
+ $("#hsvpicker").hsvpicker( "option", "color", clr );
+ $("#colortitle").colortitle( "option", "color", clr );
+ $("#colorpalette").colorpalette( "option", "color", clr );
+ });
+
+ $("#hsvpicker").bind("colorchanged", function ( e, clr ) {
+ $("#colorpicker").colorpicker( "option", "color", clr );
+ $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
+ $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
+ $("#colortitle").colortitle( "option", "color", clr );
+ $("#colorpalette").colorpalette( "option", "color", clr );
+ });
+
+ $("#colortitle").bind("colorchanged", function ( e, clr ) {
+ $("#colorpicker").colorpicker( "option", "color", clr );
+ $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
+ $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
+ $("#hsvpicker").hsvpicker( "option", "color", clr );
+ $("#colorpalette").colorpalette( "option", "color", clr );
+ });
+
+ $("#colorpalette").bind("colorchanged", function ( e, clr ) {
+ $("#colorpicker").colorpicker( "option", "color", clr );
+ $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
+ $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
+ $("#hsvpicker").hsvpicker( "option", "color", clr );
+ $("#colortitle").colortitle( "option", "color", clr );
+ });
+
+ $("#colorpalette").colorpalette("option", "color", "#45cc98");
+
+ clrWidgetsAreInit = true;
+ });
+});
+
+$(document).ready( function () {
+ // add current datetime with browser language format
+ // NOTE: Globalize.* functions must be run after docoument ready.
+ $('#current_date').html(Globalize.culture().name + " -- " +
+ Globalize.format( new Date(), "F" ));
+ $('#html_font_size').html('html font size:' + $('html').css('font-size'));
+});
--- /dev/null
+<div data-role="page" id="page-tips-custom-globalize-culture" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Custom globalize culture</h1>
+ </div>
+ <div data-role="content" >
+ <h1>Loading custom globalize culture file</h1>
+ <p>A predefined Globalize culture file is loaded by the loader in Tizen Web UI Framework, according to the current language. If you want to load additional culture file, you can create each culture files, and let to choose one of them to load it by using $.tizen.util.loadCustomGlobalizeCulture() API.</p>
+ <hr>
+ </div>
+ <script src="custom-globalize-culture.js"></script>
+</div>
+
--- /dev/null
+( function ( $ ) {
+ var customCultureFiles = {
+ "en" : "en.js",
+ "en-US" : "en.js",
+ "fr" : "fr.js"
+ },
+ lang,
+ content = $( '#page-tips-custom-globalize-culture > :jqmData(role="content")' );
+
+ $.tizen.util.loadCustomGlobalizeCulture( customCultureFiles );
+
+ lang = Globalize.culture( ).name;
+ content.append( $( '<div></div>' )
+ .text( "This is a text from custom globalize culture file (key:hello): " + Globalize.localize( 'hello' ) ) );
+ content.append(
+ $( '<div></div>' )
+ .text( "Current lang: " + lang + ", Custom culture file: " + customCultureFiles[lang] ) );
+ content.trigger( "refresh" );
+} ) ( jQuery );
--- /dev/null
+( function ( ) {
+
+ var cultureInfo = {
+ messages: {
+ "hello" : "hello",
+ "translate" : "translate"
+ }
+ },
+ supportLang = [ "en", "en-US" ],
+ i, lang;
+
+ for ( i in supportLang ) {
+ lang = supportLang[ i ];
+ Globalize.addCultureInfo( lang, cultureInfo );
+ }
+
+} ) ( );
--- /dev/null
+( function ( ) {
+
+ Globalize.addCultureInfo( "fr", {
+ messages: {
+ "hello" : "bonjour",
+ "translate" : "traduire"
+ }
+ } );
+
+} ) ( );
--- /dev/null
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Generate elements dynamically</h1>
+ </div><!-- /header -->
+
+
+ <div data-role="content">
+ <article>
+ <div>Example #1 Trigger Create</div>
+ <div>Trigger Create after append element on HTML.</div>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black;
+ border-width:3px; border-style:inset">
+ $( "#checkboxItems" ).append( newhtml) ;<br>
+ $( "#checkboxItems" ).trigger( "create" );<br>
+ </p>
+ </div>
+
+ <div id="checkboxItems" ></div>
+
+ <fieldset class="ui-grid-b">
+ <div data-role="controlgroup" data-type="horizontal">
+ <a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
+ </div>
+ </fieldset>
+ </article>
+ <article>
+ <div>Example #2 Call the widget Creator function.</div>
+ <div>
+ Call the widget's creator function after append element on HTML.<br>
+ Usually, creator function is same to widget name. But, "button" widget is a little bit different.
+ Call buttonMarkup() or trigger "create" to the parent of button.
+ </div>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black;
+ border-width:3px; border-style:inset">
+ /* Append new button */<br>
+ var buttonTemplate = "<div data-role='button' data-inline='true' " + "data-icon='call' data-style='circle' " + "data-theme='s' class='newbutton'></div>"; <br>
+ $( buttonTemplate ).buttonMarkup().appendTo( "#buttonItems" ); <br><br>
+
+ /* It's same to call ".buttonMarkup()". */<br>
+ $( "#buttonItems" ).trigger( "create" );
+ </p>
+ </div>
+
+ <div id="buttonItems">
+ </div>
+
+ <fieldset class="ui-grid-b">
+ <div data-role="controlgroup" data-type="horizontal">
+ <div id="ButtonAdd" href="#" data-role="button" data-icon="plus" >Add new Button item</div>
+ </div>
+ </fieldset>
+ </article>
+ <article>
+ <div>Example #3 Append Listview on JQM.</div>
+ <div>
+ To add new <LI> element on JQM listview, insert items and call "refresh" to the listview.<br>
+ </div>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black;
+ border-width:3px; border-style:inset">
+ var listTemplate = "<li>Appended New Item</li>";<br>
+ $( listTemplate ).appendTo( "#listview" );<br>
+ $( "#listview" ).listview( "refresh");<br>
+ </p>
+ </div>
+
+ <ul id="listview" data-role="listview">
+ <li>Test</li>
+ <li>Test</li>
+ <li>Test</li>
+ </ul>
+
+ <fieldset class="ui-grid-b">
+ <div data-role="controlgroup" data-type="horizontal">
+ <div id="ListAdd" href="#" data-role="button" data-icon="plus" >Add new item to Listview</div>
+ </div>
+ </fieldset>
+ </article>
+ </div>
+</div>
--- /dev/null
+var myArray = [];
+function addCheckbox(){
+ var newhtml,
+ i = myArray.length;
+
+ myArray[myArray.length] = 'Item - ' + myArray.length;
+ newhtml = '<input type="checkbox" name="checkbox-'+i+'a" id="checkbox-'+i+'a" class="custom" />' ;
+ newhtml += '<label for="checkbox-'+i+'a">'+myArray[i]+'</label>';
+ $( "#checkboxItems" ).append( newhtml );
+ $( "#checkboxItems" ).trigger( "create" );
+}
+
+
+$( '#bAdd' ).live( 'vclick', function () {
+ addCheckbox();
+} );
+
+$( "#ButtonAdd" ).live( "vclick", function() {
+ /* Append new button */
+ var buttonTemplate = "<div data-role='button' data-inline='true' " +
+ "data-icon='call' data-style='circle' " +
+ "data-theme='s' class='newbutton'></div>";
+ $( buttonTemplate ).buttonMarkup().appendTo( "#buttonItems" );
+
+ /* Same works */
+ /*$("#buttonItems").trigger("create");*/
+} );
+
+$( "#ListAdd" ).live( "vclick", function() {
+ var listTemplate = "<li>Appended New Item</li>";
+ $( listTemplate ).appendTo( "#listview" );
+ $( "#listview" ).listview( "refresh");
+} );
--- /dev/null
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Single-Page Application </h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <ul data-role="listview" id="mylist">
+ </ul>
+ </div><!-- /content -->
+
+ <div data-role="footer" data-position="fixed">
+ </div><!-- /footer -->
+</div><!-- /page -->
--- /dev/null
+$( document ).bind( "pagebeforeshow", function () {
+ var id = 0,
+ add_ex = function () {
+ var li = '<li class="ui-li-1line ui-li-dialogue" data-expandable="true" id="exp1" data-initial-expansion="true">exp1 parent</li>' +
+ '<li class="ui-li-1line ui-li-dialogue" data-expanded-by="exp1">exp1-sub 1</li>' +
+ '<li class="ui-li-1line ui-li-dialogue" data-expanded-by="exp1">exp1-sub 2</li>';
+
+ $("#mylist").append( li ).trigger("create");
+ },
+ add_item = function () {
+ var li = '<li class="ui-li-1line ui-li-dialogue" data-expanded-by="exp1">exp1-sub 3</li>';
+
+ $("#mylist").append( li ).trigger("create");
+ };
+
+ add_ex();
+ $("#mylist").listview("refresh");
+
+ add_item();
+ $("#mylist").listview("refresh");
+ $("#exp1").expandablelist("refresh");
+});
--- /dev/null
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Single-Page Application </h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <ul data-role="listview" id="mylist">
+ </ul>
+ </div><!-- /content -->
+
+ <div data-role="footer" data-position="fixed">
+ <div data-role="controlbar" data-style="toolbar">
+ <ul>
+ <li id="add"><a data-icon="ctrlbar-create">+1</a></li>
+ <li id="add2"><a data-icon="ctrlbar-create">+20</a></li>
+ <li id="new"><a data-icon="ctrlbar-delete">reset +1</a></li>
+ <li id="new2"><a data-icon="ctrlbar-delete">reset +20</a></li>
+ </ul>
+ </div>
+ </div><!-- /footer -->
+</div><!-- /page -->
--- /dev/null
+$( document ).bind( "pagecreate", function () {
+ var id = 0,
+ add_item = function () {
+ var li = '<li class="ui-li-1line-btn1" id="li' + id + '">' +
+ '<span class="ui-li-text-main">Item ' + id + '</span>' +
+ '<div data-role="button" data-inline="true" id="' + id + '">delete</div>'+
+ '</li>';
+
+ id++;
+
+ $("#mylist").append( li ).trigger("create");
+ };
+
+ $("#add").bind( "vclick", function ( e ) {
+ add_item();
+ $("#mylist").listview("refresh");
+ });
+
+ $("#add2").bind( "vclick", function ( e ) {
+ var i;
+
+ for ( i = 0; i < 20; i++ ) {
+ add_item();
+ }
+
+ $("#mylist").listview("refresh");
+ });
+
+ $("#new").bind( "vclick", function ( e ) {
+ $("#mylist").html("").trigger("create");
+
+ add_item();
+ $("#mylist").listview("refresh");
+ });
+
+ $("#new2").bind( "vclick", function ( e ) {
+ var i;
+
+ $("#mylist").html("").trigger("create");
+
+ for ( i = 0; i < 20; i++ ) {
+ add_item();
+ }
+
+ $("#mylist").listview("refresh");
+ });
+
+ $("#mylist").delegate( ".ui-btn", "vclick", function ( e ) {
+ $( "#li" + this.id ).remove();
+ $("#mylist").listview("refresh");
+ });
+});
--- /dev/null
+<!DOCTYPE html>
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" data-type="picture">
+ <p>Picture Type</p>
+ <p>Text</p>
+ </div>
+ </div> <!-- /content -->
+</div> <!-- /page -->
--- /dev/null
+<!DOCTYPE html>
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Transitions</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="transition-page.html" data-transition="fade">fade</a></li>
+ <li><a href="transition-page.html" data-transition="pop">pop</a></li>
+ <li><a href="transition-page.html" data-transition="flip">flip</a></li>
+ <li><a href="transition-page.html" data-transition="turn">turn</a></li>
+ <li><a href="transition-page.html" data-transition="flow">flow</a></li>
+ <li><a href="transition-page.html" data-transition="slidefade">slidefade</a></li>
+ <li><a href="transition-page.html" data-transition="slide">slide</a></li>
+ <li><a href="transition-page.html" data-transition="slideup">slideup</a></li>
+ <li><a href="transition-page.html" data-transition="slidedown">slidedown</a></li>
+ <li><a href="transition-page.html" data-transition="none">none</a></li>
+ </ul>
+ </div><!-- /content -->
+</div> <!-- /page -->
--- /dev/null
+<div data-role="page" data-add-back-btn="true" id="twolinesample">
+ <div data-role="header" data-position="fixed">
+ <h1>Two line text sample</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <p> short button or long text button</p>
+ <p> do not need to control width. because button control text width in case content area<p>
+ <div data-role="button" data-inline="true">Text Button Test</div>
+ <div data-role="button" data-inline="true">Text Button Test. long text line</div>
+ <br>
+ <p> but some case, for example width fixed area or narrow width<br>
+ browser change text to ellipsis </p>
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment861" value="on" checked="checked" />
+ <label for="segment861">List</label>
+ <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment862" value="off" />
+ <label for="segment862">This button is very long text. This button is very long text</label>
+ <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment863" value="off" />
+ <label id="textposition" for="segment863">This button is very long text<br>This button is very long text</label>
+ </fieldset> <br>
+ <p> to make text in button, 2 line
+ <p> Simple making step is ...<br><br>
+ 1. first insert <br> tag between text <br><br>
+ 2. then set fontsize to see text in small area <br>
+ ex> $( "#textposition" ).css("font-size", "12px"); <br><br>
+ 3. if element attribute or inner attributes has padding-top/bottom,<br>
+ control this value because this value hide some text top/bottom <br>
+ ex> $( "#textposition" ).find("span").css("padding-top", "4px"); <br><br>
+ 4. last control height between line text using line-height <br>
+ ex> $( "#textposition" ).find("span").css("line-height", "14px"); <br><br><br><br>
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
--- /dev/null
+$( document ).bind( "pagebeforeshow", function( e ) {
+ if( $( "#textposition" ).length ) {
+ $( "#textposition" ).css( "font-size", "12px" );
+ $( "#textposition" ).find( "span" ).css( "height", "32px" );
+ $( "#textposition" ).find( "span" ).css("padding-top", "4px");
+ $( "#textposition" ).find( "span" ).css("padding-bottom", "4px");
+ }
+});
--- /dev/null
+../../build/tizen-web-ui-fw
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page" id="ButtonDemo" data-add-back-btn="true" >
+ <div data-role="header" data-position="fixed">
+ <h1>Buttons</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role = "listview">
+ <li><a href="buttonNolist.html">Buttons Pages(not in list) </a></li>
+ <li class="ui-li-1line-btn1">Custom <div data-role="button" data-inline="true" data-icon="test">T</div></li>
+ <li class="ui-li-1line-btn1">Custom Width <div data-role="button" style="width:300px" data-inline="true" data-icon="test">Test</div></li>
+ <li class="ui-li-1line-btn1">Custom Width, Height <div data-role="button" style="width:300px;height:40px" data-icon="test" >Test</div> </li>
+ <li class="ui-li-1line-btn1">Custom Width, Height, Right <div data-role="button" style="width:300px;height:40px" data-iconpos="right" data-icon="test" >Test</div> </li>
+ <li class="ui-li-1line-btn1">Circle-Custom <div data-role="button" data-inline="true" data-icon="test2" data-style="circle" ></div> </li>
+ <li class="ui-li-1line-btn1">Custom Top <div data-role="button" data-iconpos="top" data-icon="test" >tEST</div> </li>
+ <li class="ui-li-1line-btn1">Custom Bottom <div data-role="button" data-iconpos="bottom" data-icon="test">Test</div></li>
+ <li class="ui-li-1line-btn1">List item 1<div data-role="button" data-inline="true">Text Button TesT</div></li>
+ <li class="ui-li-1line-btn1">List item 2<div data-role="button" data-inline="true" data-icon="reveal">Call Icon</div></li>
+ <li class="ui-li-1line-btn1">List item 3<div data-role="button" data-inline="true" data-icon="reveal">Longer Call Icon</div></li>
+ <li class="ui-li-1line-btn1">List item 4<div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div></li>
+ <li class="ui-li-1line-btn1">List item 5<div data-role="button" data-inline="true" data-icon="reveal"></div></li>
+ <li class="ui-li-1line-btn2">List item 6<div data-role="button" data-inline="true" data-icon="plus" data-style="circle" class="ui-li-1line-btn2"></div></li>
+ <li class="ui-li-1line-btn2">List item 7<div data-role="button" data-inline="true" data-icon="minus" data-style="circle"></div></li>
+ <li class="ui-li-1line-btn2">List item 8<div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div></li>
+ <li class="ui-li-1line-btn2">List item 9<div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div></li>
+ <li class="ui-li-1line-btn2">List item 10<div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div></li>
+ <li>List item 11<div data-role="button" data-inline="true" data-icon="editminus" data-style="edit"
+ style="position: absolute; top: 0px; margin-top: 0px; left:70%"></div></li>
+ <li>List item 12<div data-role="button" data-inline="true" data-style="edit"
+ style="position: absolute; top: 0px; margin-top: 0px; left:70%">Delete</div></li>
+ </ul>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page" id="ButtonDemo" data-add-back-btn="true" >
+ <div data-role="header" data-position="fixed">
+ <h1>Buttons</h1>
+ </div>
+ <div data-role="content">
+ *Default Button
+ <div data-role="button">Button</div>
+ HTML Code:
+ <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button">Button</div></textarea>
+ <br/><br/>
+ *Inline Button, Inline Button With Icon<br/>
+ <div data-role="button" data-inline="true">DataInline True</div>
+ <div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div>
+ <div data-role="button" data-inline="true" data-icon="call" data-iconpos="left">Icon Text</div>
+ <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div>
+ <div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div><br/>
+ HTML Code:
+ <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button" data-inline="true">DataInline True</div>
+<div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div>
+<div data-role="button" data-inline="true" data-icon="call" data-iconpos="left">Icon Text</div>
+<div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div>
+<div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div></textarea><br/><br/>
+ *Default Button (A tag)
+ <a href="#buttonTest" data-role="button">A Tag Button</a>
+ HTML Code:
+ <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><a href="#buttonTest" data-role="button">A Tag Button</a></textarea>
+ <br/><br/>
+ *Button Icon Position top, bottom (with inline)
+ <div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div><br/>
+ <div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div><br/>
+ <div data-role="button" data-icon="reveal" data-iconpos="top" data-inline="true">PositionTop</div>
+ <div data-role="button" data-icon="reveal" data-iconpos="bottom" data-inline="true">PositionBottom</div><br/>
+ HTML Code:
+ <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div>
+<div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div>
+<div data-role="button" data-icon="reveal" data-iconpos="top" data-inline="true">PositionTop</div>
+<div data-role="button" data-icon="reveal" data-iconpos="bottom" data-inline="true">PositionBottom</div></textarea><br/><br/>
+ *Custom Button:<br/>
+ <div data-role="button" data-inline="true" data-icon="test">Custom</div>
+ <div data-role="button" data-inline="true" data-icon="test" data-iconpos="top">Custom Top</div>
+ <div data-role="button" data-inline="true" data-icon="test" data-iconpos="bottom">Custom Bottom</div>
+ <div data-role="button" data-inline="true" data-icon="test" style="width:150px;height:150px">Custom width,height</div>
+ <div data-role="button" data-inline="true" data-icon="test2" data-style="circle"></div><br/>
+ HTML Code:
+ <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button" data-inline="true" data-icon="test">Custom</div>
+<div data-role="button" data-inline="true" data-icon="test" data-iconpos="top">Custom Top</div>
+<div data-role="button" data-inline="true" data-icon="test" data-iconpos="bottom">Custom Bottom</div>
+<div data-role="button" data-inline="true" data-icon="test" style="width:150px;height:150px">Custom width,height</div>
+<div data-role="button" data-inline="true" data-icon="test2" data-style="circle"></div></textarea>
+ CSS Code:<br/>
+ <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset">.ui-icon-test{
+ background-size: 100% 100%;
+ background-image: url(test.png);
+}
+
+.ui-icon-test2{
+ background-position:0% 0%;
+ background-size:50% 50%;
+ background-image: url(test.png);
+}</textarea>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<div data-role="page" id="datetimepicker-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Date/time picker</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li class="ui-li-2line-sub-main">
+ <span class="ui-li-text-main">
+ <input type="datetime" name="demo-date" id="demo-date"
+ data-format="MMM dd yyyy hh:mm tt" value="2012-06-30T00:00:00+09:00" />
+ </span>
+ <span class="ui-li-text-sub">
+ Date/Time Picker(Custom) - <span id="selected-date1"><em>(select a date first)</em></span>
+ </span>
+ </li>
+ <li class="ui-li-2line-sub-main">
+ <span class="ui-li-text-main">
+ <input type="datetime" name="demo-date2" id="demo-date2" />
+ </span>
+ <span class="ui-li-text-sub">
+ Date/Time Picker - <span id="selected-date2"><em>(select a date first)</em></span>
+ </span>
+ </li>
+ <li class="ui-li-2line-sub-main">
+ <span class="ui-li-text-main">
+ <input type="date" name="demo-date3" value="2012-06-30" id="demo-date3"/>
+ </span>
+ <span class="ui-li-text-sub">
+ Date Picker - <span id="selected-date3"><em>(select a date first)</em></span>
+ </span>
+ </li>
+ <li class="ui-li-2line-sub-main">
+ <span class="ui-li-text-main">
+ <input type="time" name="demo-date4" id="demo-date4" />
+ </span>
+ <span class="ui-li-text-sub">
+ Time Picker - <span id="selected-date4"><em>(select a date first)</em></span>
+ </span>
+ </li>
+ </ul>
+ </div><!-- /content -->
+</div> <!-- /page -->
+
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<div data-role="page" class="type-interior" data-add-back-btn="true">
+ <div data-role="header" >
+ <h1>Entry</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+ <div data-role="fieldcontain">
+ <label for="password">Password:</label>
+ <input type="password" name="password" id="password" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="number">Number:</label>
+ <input type="number" name="number" id="number" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="number-pattern">Number + pattern:</label>
+ <input type="number" name="number" pattern="[0-9]*" id="number-pattern" value="" placeholder="Pattern attribute [0-9]* for a numeric keypad" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="email">Email:</label>
+ <input type="email" name="email" id="email" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="url">Url:</label>
+ <input type="url" name="url" id="url" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="tel">Tel:</label>
+ <input type="tel" name="tel" id="tel" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="time">Time:</label>
+ <input type="time" name="time" id="time" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="date">Date:</label>
+ <input type="date" name="date" id="date" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="month">Month:</label>
+ <input type="month" name="month" id="month" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="week">Week:</label>
+ <input type="week" name="week" id="week" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="datetime">Datetime:</label>
+ <input type="datetime" name="datetime" id="datetime" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="datetime-l">Datetime local:</label>
+ <input type="datetime-local" name="datetime-l" id="datetime-l" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="color">Color:</label>
+ <input type="color" name="color" id="color" value="black" />
+ </div>
+ </div><!-- /content -->
+</div><!-- /page -->
+</html>
+
--- /dev/null
+.ui-demo-namecard {
+ display : inline-block;
+ width : 5.1rem;
+ height : 6.1rem;
+ margin-right: 0.4rem;
+ margin-left: 0.4rem;
+ margin-bottom: 1.5rem;
+}
+
+.ui-demo-rotation-namecard {
+ position : fixed;
+ width : 5.1rem;
+ height : 6.1rem;
+ margin-right: 0.3rem;
+ margin-left: 0.3rem;
+ margin-bottom: 1.5rem;
+}
+
+.ui-demo-namecard-pic {
+ float : left;
+ padding-top : 0.2rem;
+ padding-left : 0.2rem;
+ padding-bottom: 0rem;
+}
+
+.ui-demo-namecard-pic-img {
+ height : 5rem;
+ width : 5rem;
+}
+
+.ui-demo-namecard-contents {
+ float : left;
+ height : 1rem;
+ margin: 0rem;
+}
+
+.ui-demo-namecard-contents span {
+ font-style : italic;
+ color : #666;
+ border-bottom : 1px dashed;
+ margin-top: 0rem;
+}
+
+.ui-demo-rotation-x-namecard {
+ width : 5.1rem;
+ height : 6.1rem;
+ display: block;
+ margin-right: 0.3rem;
+ margin-left: 0.3rem;
+ margin-bottom: 0.6rem;
+}
+
+.ui-demo-namecard-contents-x {
+ height : 1rem;
+ margin: 0rem;
+}
+
+.ui-demo-namecard-span-x {
+ color : white;
+ font : normal 0.8rem Georgia, serif !important;
+
+ width: 5rem;
+ display: block;
+ white-space : nowrap;
+ overflow : hidden !important;
+ text-overflow : ellipsis !important;
+ -o-text-overflow:ellipsis;
+ resize:horizontal;
+}
+
+.ui-demo-namecard-contents span.name {
+ color : white;
+ font : normal 0.8rem Georgia, serif !important;
+
+ width: 5rem;
+ display: inline-block;
+ white-space : nowrap;
+ overflow : hidden !important;
+ text-overflow : ellipsis !important;
+ -o-text-overflow:ellipsis;
+ resize:horizontal;
+}
+
+.ui-demo-rotation-list-namecard {
+ height : 70px;
+ display:block;
+ border-bottom-color: #444;
+}
+
+.ui-demo-namecard-list-pic {
+ height : 2.7rem;
+ width : 2.7rem;
+ float : left;
+ padding-top : 0rem;
+ padding-left : 0.2rem;
+ padding-right : 1rem;
+ padding-bottom: 0rem;
+ border-width: 0;
+}
+
+.ui-demo-namecard-list-pic-img {
+ height : 2.7rem;
+ width : 2.7rem;
+}
+
+.ui-demo-namecard-list-contents {
+ height : 2.5rem;
+}
+
+.ui-demo-namecard-list-contents span{
+ left : 9.6rem;
+ font-weight : normal;
+ font-size : 1.2rem;
+ color : white;
+ padding-top : 1rem;
+ font-family: Helvetica, Arial, sans-serif;
+ margin-top: 0rem;
+}
\ No newline at end of file
--- /dev/null
+<div id="virtualgrid_grid_page" data-role="page" class="virtualgrid_test_demo_page">\r
+ <div data-role="header" data-position="fixed">\r
+ <h1>Virtual Grid - Auto</h1>\r
+ </div>\r
+ <div data-role="content" data-scroll="none">\r
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">\r
+ <div class="ui-demo-rotation-namecard">\r
+ <div class="ui-demo-namecard-pic">\r
+ <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />\r
+ </div>\r
+ <div class="ui-demo-namecard-contents">\r
+ <span class="name ui-li-text-main">${NAME}</span>\r
+ </div>\r
+ </div>\r
+ </script>\r
+ <div id="virtualgrid-demo" data-role="virtualgrid" data-itemcount="auto" data-direction="y" data-rotation="false" data-template="tizen-demo-namecard">\r
+ </div>\r
+ </div>\r
+ <script>\r
+ $( ".virtualgrid_test_demo_page" ).one( "pagecreate", function() {\r
+ $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {\r
+ $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {\r
+ itemData: function ( idx ) {\r
+ return JSON_DATA[ idx ];\r
+ },\r
+ numItemData: JSON_DATA.length,\r
+ cacheItemData: function ( minIdx, maxIdx ) {\r
+ }\r
+ });\r
+ });\r
+ });\r
+ </script>\r
+</div>\r
--- /dev/null
+<div id="virtualgrid_list_page" data-role="page" class="virtualgrid_list_demo_page">\r
+ <div id="normal" data-role="header" data-position="fixed">\r
+ <h1>Virtual Grid - List</h1>\r
+ </div>\r
+ <div data-role="content" data-scroll="none">\r
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">\r
+ <div class="ui-demo-rotation-list-namecard" >\r
+ <div class="ui-demo-namecard-list-pic">\r
+ <img class="ui-demo-namecard-list-pic-img" src="${TEAM_LOGO}" />\r
+ </div>\r
+ <div class="ui-demo-namecard-list-contents">\r
+ <span class="ui-li-text-main">${NAME}</span>\r
+ </div>\r
+ </div>\r
+ </script>\r
+ <div id="virtualgrid-demo" data-role="virtualgrid" data-itemcount="1" data-rotation="false" data-template="tizen-demo-namecard"></div>\r
+ </div>\r
+ <script>\r
+ $( ".virtualgrid_list_demo_page" ).one( "pagecreate", function() {\r
+ $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {\r
+ $( ".virtualgrid_demo_page" ).die();\r
+\r
+ $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {\r
+ itemData: function ( idx ) {\r
+ return JSON_DATA[ idx ];\r
+ },\r
+ numItemData: JSON_DATA.length,\r
+ cacheItemData: function ( minIdx, maxIdx ) {\r
+ }\r
+ });\r
+\r
+ $( ".virtualgrid_list_demo_page" ).unbind("pagecreate");\r
+ });\r
+ });\r
+ </script>\r
+</div>\r
--- /dev/null
+<div id="virtualgrid_rotation_page" data-role="page" class="virtualgrid_rotation_demo_page">\r
+ <div id="normal" data-role="header" data-position="fixed">\r
+ <h1>Virtual Grid - Rotation</h1>\r
+ </div>\r
+ <div data-role="content" data-scroll="none">\r
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">\r
+ <div class="ui-demo-rotation-namecard">\r
+ <div class="ui-demo-namecard-pic">\r
+ <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />\r
+ </div>\r
+ <div class="ui-demo-namecard-contents">\r
+ <span class="name ui-li-text-main">${NAME}</span>\r
+ </div>\r
+ </div>\r
+ </script>\r
+ <div id="virtualgrid-demo" data-role="virtualgrid" data-itemcount="3" data-rotation="true" data-template="tizen-demo-namecard">\r
+ </div>\r
+ </div>\r
+ <script>\r
+ $( ".virtualgrid_rotation_demo_page" ).one( "pagecreate", function() {\r
+ $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {\r
+ $( ".virtualgrid_demo_page" ).die();\r
+ $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {\r
+ itemData: function ( idx ) {\r
+ return JSON_DATA[ idx ];\r
+ },\r
+ numItemData: JSON_DATA.length,\r
+ cacheItemData: function ( minIdx, maxIdx ) {\r
+ }\r
+ });\r
+ $( ".virtualgrid_rotation_demo_page" ).unbind("pagecreate");\r
+ });\r
+ });\r
+ </script>\r
+</div>\r
--- /dev/null
+<div id="virtualgrid_x_page" data-role="page" class="virtualgrid_x_demo_page">\r
+ <div id="normal" data-role="header" data-position="fixed">\r
+ <h1>Virtual Grid - X</h1>\r
+ </div>\r
+ <div data-role="content" data-scroll="none">\r
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">\r
+ <div class="ui-demo-rotation-x-namecard">\r
+ <div class="ui-demo-namecard-pic">\r
+ <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />\r
+ </div>\r
+ <div class="ui-demo-namecard-contents-x">\r
+ <span class="name ui-li-text-main ui-demo-namecard-span-x">${NAME}</span>\r
+ </div>\r
+ </div>\r
+ </script>\r
+ <div id="virtualgrid-demo" data-itemcount="auto" data-direction="x" data-role="virtualgrid" data-template="tizen-demo-namecard">\r
+ </div>\r
+ </div>\r
+ <script>\r
+ $("#virtualgrid-demo").bind("select", function(event, data){\r
+ //alert("item :: " + $(data).find(".ui-demo-namecard-contents").text());\r
+ });\r
+ </script>\r
+ <script>\r
+ $( ".virtualgrid_x_demo_page" ).one( "pagecreate", function() {\r
+ $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {\r
+ $( ".virtualgrid_demo_page" ).die();\r
+ $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {\r
+ itemData: function ( idx ) {\r
+ return JSON_DATA[ idx ];\r
+ },\r
+ numItemData: JSON_DATA.length,\r
+ cacheItemData: function ( minIdx, maxIdx ) {\r
+ }\r
+ });\r
+ $( ".virtualgrid_x_demo_page" ).unbind("pagecreate");\r
+ });\r
+ });\r
+ </script>\r
+</div>\r
--- /dev/null
+<div id="virtualgrid_grid_page" data-role="page" class="virtualgrid_grid_demo_page">\r
+ <div id="normal" data-role="header" data-position="fixed">\r
+ <h1>Virtual Grid</h1>\r
+ </div>\r
+ <div data-role="content" data-scroll="none">\r
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">\r
+ <div class="ui-demo-rotation-namecard">\r
+ <div class="ui-demo-namecard-pic">\r
+ <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />\r
+ </div>\r
+ <div class="ui-demo-namecard-contents">\r
+ <span class="name ui-li-text-main">${NAME}</span>\r
+ </div>\r
+ </div>\r
+ </script>\r
+ <div id="virtualgrid-demo" data-role="virtualgrid" data-itemcount="3" data-rotation="false" data-template="tizen-demo-namecard">\r
+ </div>\r
+ </div>\r
+ <script>\r
+ $( ".virtualgrid_grid_demo_page" ).one( "pagecreate", function() {\r
+ $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus, jqXHR ) {\r
+ $( ".virtualgrid_demo_page" ).die();\r
+\r
+ $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {\r
+ itemData: function ( idx ) {\r
+ return JSON_DATA[ idx ];\r
+ },\r
+ numItemData: JSON_DATA.length,\r
+ cacheItemData: function ( minIdx, maxIdx ) {\r
+ }\r
+ });\r
+ $( ".virtualgrid_grid_demo_page" ).unbind("pagecreate");\r
+ });\r
+ });\r
+ </script>\r
+</div>\r
--- /dev/null
+<!DOCTYPE html>\r
+<div data-role="page">\r
+ <div data-role="header" data-position="fixed">\r
+ <h1>Handler Test</h1>\r
+ </div><!-- /header -->\r
+ <div data-role="content" data-scroll="y" data-handler="true">\r
+ <ul data-role="listview">\r
+ <li data-role="list-divider">A</li>\r
+ <li><a href="#">Adam Kinkaid</a></li>\r
+ <li><a href="#">Alex Wickerham</a></li>\r
+ <li><a href="#">Avery Johnson</a></li>\r
+ <li data-role="list-divider">B</li>\r
+ <li><a href="#">Bob Cabot</a></li>\r
+ <li data-role="list-divider">C</li>\r
+ <li><a href="#">Caleb Booth</a></li>\r
+ <li><a href="#">Christopher Adams</a></li>\r
+ <li><a href="#">Culver James</a></li>\r
+ <li data-role="list-divider">D</li>\r
+ <li><a href="#">David Walsh</a></li>\r
+ <li><a href="#">Drake Alfred</a></li>\r
+ <li data-role="list-divider">E</li>\r
+ <li><a href="#">Elizabeth Bacon</a></li>\r
+ <li><a href="#">Emery Parker</a></li>\r
+ <li><a href="#">Enid Voldon</a></li>\r
+ <li data-role="list-divider">F</li>\r
+ <li><a href="#">Francis Wall</a></li>\r
+ <li data-role="list-divider">G</li>\r
+ <li><a href="#">Graham Smith</a></li>\r
+ <li><a href="#">Greta Peete</a></li>\r
+ <li data-role="list-divider">H</li>\r
+ <li><a href="#">Harvey Walls</a></li>\r
+ <li data-role="list-divider">M</li>\r
+ <li><a href="#">Mike Farnsworth</a></li>\r
+ <li><a href="#">Murray Vanderbuilt</a></li>\r
+ <li data-role="list-divider">N</li>\r
+ <li><a href="#">Nathan Williams</a></li>\r
+ <li data-role="list-divider">P</li>\r
+ <li><a href="#">Paul Baker</a></li>\r
+ <li><a href="#">Pete Mason</a></li>\r
+ <li data-role="list-divider">R</li>\r
+ <li><a href="#">Rod Tarker</a></li>\r
+ <li data-role="list-divider">S</li>\r
+ <li><a href="#">Sawyer Wakefield</a></li>\r
+ <li data-role="list-divider">A</li>\r
+ <li><a href="#">Adam Kinkaid</a></li>\r
+ <li><a href="#">Alex Wickerham</a></li>\r
+ <li><a href="#">Avery Johnson</a></li>\r
+ <li data-role="list-divider">B</li>\r
+ <li><a href="#">Bob Cabot</a></li>\r
+ <li data-role="list-divider">C</li>\r
+ <li><a href="#">Caleb Booth</a></li>\r
+ <li><a href="#">Christopher Adams</a></li>\r
+ <li><a href="#">Culver James</a></li>\r
+ <li data-role="list-divider">D</li>\r
+ <li><a href="#">David Walsh</a></li>\r
+ <li><a href="#">Drake Alfred</a></li>\r
+ <li data-role="list-divider">E</li>\r
+ <li><a href="#">Elizabeth Bacon</a></li>\r
+ <li><a href="#">Emery Parker</a></li>\r
+ <li><a href="#">Enid Voldon</a></li>\r
+ <li data-role="list-divider">F</li>\r
+ <li><a href="#">Francis Wall</a></li>\r
+ <li data-role="list-divider">G</li>\r
+ <li><a href="#">Graham Smith</a></li>\r
+ <li><a href="#">Greta Peete</a></li>\r
+ <li data-role="list-divider">H</li>\r
+ <li><a href="#">Harvey Walls</a></li>\r
+ <li data-role="list-divider">M</li>\r
+ <li><a href="#">Mike Farnsworth</a></li>\r
+ <li><a href="#">Murray Vanderbuilt</a></li>\r
+ <li data-role="list-divider">N</li>\r
+ <li><a href="#">Nathan Williams</a></li>\r
+ <li data-role="list-divider">P</li>\r
+ <li><a href="#">Paul Baker</a></li>\r
+ <li><a href="#">Pete Mason</a></li>\r
+ <li data-role="list-divider">R</li>\r
+ <li><a href="#">Rod Tarker</a></li>\r
+ <li data-role="list-divider">S</li>\r
+ <li><a href="#">Sawyer Wakefield</a></li>\r
+ <li data-role="list-divider">A</li>\r
+ <li><a href="#">Adam Kinkaid</a></li>\r
+ <li><a href="#">Alex Wickerham</a></li>\r
+ <li><a href="#">Avery Johnson</a></li>\r
+ <li data-role="list-divider">B</li>\r
+ <li><a href="#">Bob Cabot</a></li>\r
+ <li data-role="list-divider">C</li>\r
+ <li><a href="#">Caleb Booth</a></li>\r
+ <li><a href="#">Christopher Adams</a></li>\r
+ <li><a href="#">Culver James</a></li>\r
+ <li data-role="list-divider">D</li>\r
+ <li><a href="#">David Walsh</a></li>\r
+ <li><a href="#">Drake Alfred</a></li>\r
+ <li data-role="list-divider">E</li>\r
+ <li><a href="#">Elizabeth Bacon</a></li>\r
+ <li><a href="#">Emery Parker</a></li>\r
+ <li><a href="#">Enid Voldon</a></li>\r
+ <li data-role="list-divider">F</li>\r
+ <li><a href="#">Francis Wall</a></li>\r
+ <li data-role="list-divider">G</li>\r
+ <li><a href="#">Graham Smith</a></li>\r
+ <li><a href="#">Greta Peete</a></li>\r
+ <li data-role="list-divider">H</li>\r
+ <li><a href="#">Harvey Walls</a></li>\r
+ <li data-role="list-divider">M</li>\r
+ <li><a href="#">Mike Farnsworth</a></li>\r
+ <li><a href="#">Murray Vanderbuilt</a></li>\r
+ <li data-role="list-divider">N</li>\r
+ <li><a href="#">Nathan Williams</a></li>\r
+ <li data-role="list-divider">P</li>\r
+ <li><a href="#">Paul Baker</a></li>\r
+ <li><a href="#">Pete Mason</a></li>\r
+ <li data-role="list-divider">R</li>\r
+ <li><a href="#">Rod Tarker</a></li>\r
+ <li data-role="list-divider">S</li>\r
+ <li><a href="#">Sawyer Wakefield</a></li>\r
+ </ul>\r
+ </div><!-- /content -->\r
+</div><!-- /page -->
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Image Slider</h1>
+ </div>
+ <div data-role="content" data-scroll="none">
+ <div data-role="imageslider" id="imageslider" data-index="3" data-vertical-align="middle">
+ <img src="./test/01.jpg">
+ <img src="./test/02.jpg">
+ <img src="./test/03.jpg">
+ <img src="./test/04.jpg">
+ <img src="./test/05.jpg">
+ <img src="./test/06.jpg">
+ <img src="./test/07.jpg">
+ <img src="./test/08.jpg">
+ <img src="./test/09.jpg">
+ </div>
+ </div> <!-- /content -->
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li id="imageslider-add"><a href="#">Add</a></li>
+ <li id="imageslider-del"><a href="#">Delete</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div>
+</div> <!-- /page -->
--- /dev/null
+<div data-role="page" id="genlist-dialog" data-add-back-btn="true" data-fit-page-to-window="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Dialog lists</h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <ul data-role="listview">
+
+ <li class="ui-li-dialogue">
+ 1line
+ </li>
+ <li class="ui-li-dialogue">
+ <a>1line (with link)</a>
+ </li>
+ <li class="ui-li-dialogue">
+ 1line-sub
+ <span class="ui-li-text-sub">subtext</sub>
+ </li>
+ <li class="ui-li-dialogue">
+ <a>
+ 1line-sub (with link)
+ <span class="ui-li-text-sub">subtext</span>
+ </a>
+ </li>
+ <li class="ui-li-dialogue">
+ 1line-setting
+ <span class="ui-li-text-sub">Sub text</span>
+ </li>
+ <li class="ui-li-dialogue">
+ 1line-btn1
+ <div data-role="button" data-inline="true">Text Button</div>
+ </li>
+ <li class="ui-li-dialogue">
+ 1line-btn2
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+ <li class="ui-li-dialogue">
+ 1line-toggle
+ <div data-role="toggleswitch"/></div>
+ </li>
+ <li class="ui-li-dialogue">
+ 1line-bigicon1
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+ <li class="ui-li-dialogue">
+ 1line-bigicon2
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <span class="ui-li-text-sub">Sub text</span>
+ </li>
+ <li class="ui-li-dialogue">
+ 1line-bigicon4
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <div data-role="button" data-inline="true">Text Button</div>
+ </li>
+ <li class="ui-li-dialogue">
+ 1line-bigicon5
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+ <li class="ui-li-dialogue">
+ 1line-bigicon6
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <div data-role="toggleswitch"/></div>
+ </li>
+ <li class="ui-li-has-checkbox ui-li-dialogue">
+ <form><input type="checkbox" data-style="check" name="c1line-check1" /></form>
+ 1line-check1
+ </li>
+ <li class="ui-li-has-checkbox ui-li-dialogue">
+ <form><input type="checkbox" data-style="check" name="c1line-check2" /></form>
+ 1line-check2
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+ <li class="ui-li-has-checkbox ui-li-dialogue">
+ <form><input type="checkbox" data-style="check" name="c1line-check3" /></form>
+ 1line-check3
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+ <li class="ui-li-has-checkbox ui-li-dialogue">
+ <form><input type="checkbox" data-style="check" name="c1line-check4" /></form>
+ 1line-check4
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+ <li class="ui-li-has-radio ui-li-dialogue">
+ <form><input type="radio" /></form>
+ 1line-radio1
+ </li>
+ <li class="ui-li-has-radio ui-li-dialogue">
+ <form><input type="radio" /></form>
+ 1line-radio3
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+ <li class="ui-li-has-radio ui-li-dialogue">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-radio4
+ </li>
+ <li class="ui-li-has-radio ui-li-dialogue">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-radio5
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-multiline ui-li-dialogue">
+ 2line
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-multiline ui-li-dialogue">
+ 2line-sub-main
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-multiline ui-li-dialogue">
+ 2line-2sub
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </li>
+
+ <li class="ui-li-multiline ui-li-dialogue">
+ 2line-btn1
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-2line-btn1 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-btn1</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </li>
+
+ <li class="ui-li-2line-btn2 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-btn2</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-2line-star1 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-star1</span>
+ <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </li>
+
+ <li class="ui-li-2line-star2 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-star2</span>
+ <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ <span class="ui-li-text-sub"><img src="00_winset_icon_favorite_on.png">Subtext</span>
+ <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ </li>
+
+ <li class="ui-li-2line-setting ui-li-dialogue">
+ <span class="ui-li-text-main">2line-setting</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-2line-toggle-setting ui-li-dialogue">
+ <span class="ui-li-text-main">2line-toggle-setting</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="toggleswitch"/></div>
+ </li>
+
+ <li class="ui-li-2line-btn-setting ui-li-dialogue">
+ <span class="ui-li-text-main">2line-btn-setting</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-2line-bigicon0 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-bigicon0</span>
+ <span class="ui-li-text-sub">Subtext<img src="00_winset_icon_favorite_on.png"></span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-2line-bigicon1 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-bigicon1</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-2line-bigicon2 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-bigicon2</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </li>
+
+ <li class="ui-li-2line-bigicon3 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-bigicon3</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-2line-bigicon4 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-bigicon4</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-2line-check1 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-check1</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <form><input type="checkbox" data-style="check" name="c2line-check1" /></form>
+ </li>
+
+ <li class="ui-li-2line-check2 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-check2</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <form><input type="checkbox" data-style="check" name="c2line-check2" /></form>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-2line-check3 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-check3</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <form><input type="checkbox" data-style="check" name="c2line-check3" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+
+ <li class="ui-li-2line-radio1 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-radio1</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <form><input type="radio" /></form>
+ </li>
+
+ <li class="ui-li-2line-radio2 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-radio2</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+
+ <li class="ui-li-2line-colorbar1 ui-li-dialogue">
+ <span class="ui-li-color-bar"></span>
+ <span class="ui-li-text-main">2line-colorbar1</span>
+ <span class="ui-li-text-sub">Subtext
+ <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png">
+ </span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-2line-colorbar3 ui-li-dialogue">
+ <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
+ <span class="ui-li-text-main">2line-colorbar3<img src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-2line-colorbar3 ui-li-dialogue">
+ <span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
+ <span class="ui-li-text-main">2line-colorbar3<img src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </li>
+
+ <li class="ui-li-2line-colorbar3 ui-li-dialogue">
+ <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
+ <span class="ui-li-text-main">2line-colorbar3</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-2line-bigicon8 ui-li-dialogue">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <span class="ui-li-text-main">2line-bigicon8</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ </li>
+
+ <li class="ui-li-2line-thumb1 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-thumb1</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-2line-thumb2 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-thumb2<img src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub"><img src="00_winset_icon_favorite_on.png">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-2line-sub-main-bigicon1 ui-li-dialogue">
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-main">2line-sub-main-bigicon1</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-2line-bigicon-pgbar1 ui-li-dialogue">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <span class="ui-li-text-main">2line-bigicon-pgbar1</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="progressbar"></div>
+ </li>
+
+ <li class="ui-li-2line-bigicon-pgbar2 ui-li-dialogue">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <span class="ui-li-text-main">2line-bigicon-pgbar2</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-2line-bigicon-pgbar2 ui-li-dialogue">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <span class="ui-li-text-main">2line-bigicon-pgbar2</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </li>
+
+ <li class="ui-li-2line-bigicon-pgbar3 ui-li-dialogue">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <span class="ui-li-text-main">2line-bigicon-pgbar3</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ <div data-role="progressbar"></div>
+ </li>
+
+ <li class="ui-li-2line-icon-bigicon-btn ui-li-dialogue">
+ <form><input type="checkbox" data-style="check" name="c2line-icon-bigicon-btn" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <span class="ui-li-text-main">2line-icon-bigicon-btn</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-2line-thumb3 ui-li-dialogue">
+ <span class="ui-li-text-main">2line-thumb3<img src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ </ul>
+ </div>
+</div>
+
--- /dev/null
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Divider </h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <ul data-role="listview">
+ <li data-role="list-divider" data-style="check"><form><input type="checkbox" name="c2line-check1" /></form></li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li data-role="list-divider" data-style="check"><form><input type="checkbox" name="c2line-check1" /></form></li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li data-role="list-divider" data-style="check"><form><input type="checkbox" name="c2line-check1" /></form></li>
+ <li class="ui-li-has-checkbox">Normal lists</li>
+ <li class="ui-li-has-checkbox">Normal lists</li>
+ <li class="ui-li-has-checkbox">Normal lists</li>
+ </ul>
+ </div>
+</div>
+
--- /dev/null
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Divider </h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <ul data-role="listview">
+ <li data-role="list-divider" data-style="dialogue">Item styles</li>
+ <li class="ui-li-dialogue"><a href="#" >Normal lists</a></li>
+ <li class="ui-li-dialogue"><a href="#" >Normal lists</a></li>
+ <li class="ui-li-dialogue"><a href="#" >Normal lists</a></li>
+ <li data-role="list-divider" data-style="dialogue">Item styles</li>
+ <li class="ui-li-dialogue"><a href="#" >Normal lists</a></li>
+ <li class="ui-li-dialogue"><a href="#" >Normal lists</a></li>
+ <li class="ui-li-dialogue"><a href="#" >Normal lists</a></li>
+ <li data-role="list-divider" data-style="dialogue">Item styles</li>
+ <li class="ui-li-dialogue">Normal lists</li>
+ <li class="ui-li-dialogue">Normal lists</li>
+ <li class="ui-li-dialogue">Normal lists</li>
+ </ul>
+ </div>
+</div>
+
--- /dev/null
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Divider </h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <ul data-role="listview">
+ <li data-role="list-divider">Item styles</li>
+ <li><a href="#">Normal lists</a></li>
+ <li><a href="#">Normal lists</a></li>
+ <li><a href="#">Normal lists</a></li>
+ <li data-role="list-divider">Item styles</li>
+ <li><a href="#">Normal lists</a></li>
+ <li><a href="#">Normal lists</a></li>
+ <li><a href="#">Normal lists</a></li>
+ <li data-role="list-divider">Item styles</li>
+ <li><a href="#">Normal lists</a></li>
+ <li><a href="#">Normal lists</a></li>
+ <li><a href="#">Normal lists</a></li>
+ </ul>
+ </div>
+</div>
+
--- /dev/null
+<div data-role="page" id="genlist-expandable" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>expandable list</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li class="ui-li-dialogue" data-expandable="true" id="exp1" data-initial-expansion="true">1line</li>
+ <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 1</li>
+ <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 2</li>
+ <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 3</li>
+ <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 4</li>
+ <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 5</li>
+ <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 6</li>
+ <li class="ui-li-dialogue" data-expanded-by="exp1">exp1-sub 7</li>
+ <li class="ui-li-dialogue" data-expanded-by="exp1" data-expandable="true" id="exp2">exp1-sub 2 (exp2)</li>
+ <li class="ui-li-dialogue" data-expanded-by="exp2">exp2-sub 1</li>
+ <li class="ui-li-dialogue" data-expanded-by="exp2">exp2-sub 2</li>
+ <li class="ui-li-dialogue" data-expanded-by="exp2">exp2-sub 3</li>
+ <li class="ui-li-dialogue" data-expandable="true" id="exp3">
+ <span class="ui-li-text-main">2line</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+ <li class="ui-li-dialogue" data-expandable="true" id="exp4">
+ <span class="ui-li-text-main">2line-sub-main</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+ <li class="ui-li-has-radio ui-li-dialogue" data-expandable="true" id="exp5">
+ <span class="ui-li-text-main">2line-radio1</span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <form><input type="radio" /></form>
+ </li>
+ <li class="ui-li-dialogue" data-expandable="true" id="exp6">
+ <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
+ <span class="ui-li-text-main">2line-colorbar3</span>
+ <span class="ui-li-text-sub">Subtext</span>
+<!-- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div> -->
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+ </ul>
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
--- /dev/null
+<div data-role="page" id="genlist-normal" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal anchor lists</h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <ul data-role="listview">
+
+ <li>
+ <a href="#">
+ 1line
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ 1line-sub
+ <span class="ui-li-text-sub">Sub text</span>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ 1line-btn1
+ <div data-role="button" data-inline="true">Text Button</div>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ 1line-btn2
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ 1line-toggle
+ <div data-role="toggleswitch"/></div>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-bigicon1
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-bigicon2
+ <span class="ui-li-text-sub">Sub text</span>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-bigicon4
+ <div data-role="button" data-inline="true">Text Button</div>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-bigicon5
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-bigicon6
+ <div data-role="toggleswitch"/></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <a href="#">
+ <form><input type="checkbox" name="c1line-check1" /></form>
+ 1line-check1
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <a href="#">
+ <form><input type="checkbox" name="c1line-check2" /></form>
+ 1line-check2
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <a href="#">
+ <form><input type="checkbox" name="c1line-check3" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon" >
+ 1line-check3
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <a href="#">
+ <form><input type="checkbox" name="c1line-check4" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-check4
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <a href="#">
+ <form><input type="radio" /></form>
+ 1line-radio1
+ </a>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <a href="#">
+ <form><input type="radio" /></form>
+ 1line-radio3
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <a href="#">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-radio4
+ </a>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <a href="#">
+ <form><input type="radio" /></form>
+ 1line-radio5
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <a href="#">
+ <form><input type="radio" /></form>
+ 1line-radio6
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+<!-- <li class="ui-li-has-multiline">
+ <a href="#">
+ <span class="ui-li-text-sub">Subtext</span>
+ 2line-sub-main
+ </a>
+ </li>-->
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-2sub
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-btn1
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-btn1
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-btn2
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-star1
+ <span class="ui-li-text-sub">Subtext</span>
+ <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-star2
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
+ <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-setting
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-toggle-setting
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="toggleswitch"/></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-btn-setting
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-bigicon0
+ <span class="ui-li-text-sub">Subtext<img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon1
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon2
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon3
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon4
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="checkbox" name="c2line-check1" /></form>
+ 2line-check
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="checkbox" name="c2line-check2" /></form>
+ 2line-check2
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="checkbox" name="c2line-check3" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-check3
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="radio" /></form>
+ 2line-radio1
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-radio2
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <span class="ui-li-color-bar"></span>
+ 2line-colorbar1
+ <span class="ui-li-text-sub">Subtext
+ <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png">
+ </span>
+ <div data-role="button" data-inline="true">button</div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
+ 2line-colorbar2
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
+ 2line-colorbar2
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-colorbar3
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon8
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline ui-li-thumbnail-right">
+ <a href="#">
+ 2line-thumb1
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-thumb2
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline ui-li-thumbnail-right">
+ <a href="#">
+ <span class="ui-li-text-sub">Subtext</span>
+ 2line-sub-main-bigicon1
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon-pgbar1
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="progressbar" id="progressbar"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon-pgbar2
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon-pgbar2
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon-pgbar3
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ <div data-role="progressing" data-style="pending" id="pending"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="checkbox" name="c2line-icon-bigicon-btn" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-icon-bigicon-btn
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ 2line-thumb3
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </a>
+ </li>
+ </ul>
+ </div>
+</div>
+
--- /dev/null
+<div data-role="page" id="genlist-normal" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal anchor lists</h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <ul data-role="listview">
+
+ <li>
+ <a href="#">
+ <h3>1line</h3>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <h3>1line-setting</h3>
+ <span class="ui-li-text-sub">Sub text</span>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <h3>1line-btn1</h3>
+ <div data-role="button" data-inline="true">Text Button</div>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <h3>1line-btn2</h3>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <h3>1line-toggle</h3>
+ <div data-role="toggleswitch"/></div>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-bigicon1</h3>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-bigicon2</h3>
+ <span class="ui-li-text-sub">Sub text</span>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-bigicon4</h3>
+ <div data-role="button" data-inline="true">Text Button</div>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-bigicon5</h3>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li>
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-bigicon6</h3>
+ <div data-role="toggleswitch"/></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <a href="#">
+ <form><input type="checkbox" name="c1line-check1" /></form>
+ <h3>1line-check1</h3>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <a href="#">
+ <form><input type="checkbox" name="c1line-check2" /></form>
+ <h3>1line-check2</h3>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <a href="#">
+ <form><input type="checkbox" name="c1line-check3" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-check3</h3>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <a href="#">
+ <form><input type="checkbox" name="c1line-check4" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-check4</h3>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <a href="#">
+ <form><input type="radio" /></form>
+ <h3>1line-radio1</h3>
+ </a>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <a href="#">
+ <form><input type="radio" /></form>
+ <h3>1line-radio3</h3>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <a href="#">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-radio4</h3>
+ </a>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <a href="#">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-radio5</h3>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <a href="#">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-radio6</h3>
+
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+<!-- <li class="ui-li-2line-sub-main">
+ <a href="#">
+ <span class="ui-li-text-sub">Subtext</span>
+ <h3>2line-sub-main</h3>
+ </a>
+ </li>-->
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line-2sub</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line-btn1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line-btn1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line-btn2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>line-star1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line-star</h3>
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
+ <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line-setting</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line-toggle-setting</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="toggleswitch"/></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line-btn-setting</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line-bigicon0</h3>
+ <span class="ui-li-text-sub">Subtext<img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon3</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon4</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="checkbox" name="c2line-check1" /></form>
+ <h3>2line-check</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="checkbox" name="c2line-check2" /></form>
+ <h3>2line-check2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="checkbox" name="c2line-check3" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-check3</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="radio" /></form>
+ <h3>2line-radio1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-radio2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <span class="ui-li-color-bar"></span>
+ <h3>2line-colorbar1</h3>
+ <span class="ui-li-text-sub">Subtext
+ <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png">
+ </span>
+ <div data-role="button" data-inline="true">button</div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
+ <h3>2line-colorbar2</h3>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
+ <h3>2line-colorbar2</h3>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-colorbar3</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon8</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline ui-li-thumbnail-right">
+ <a href="#">
+ <h3>2line-thumb1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line-thumb2</h3>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline ui-li-thumbnail-right">
+ <a href="#">
+ <span class="ui-li-text-sub">Subtext</span>
+ <h3>2line-sub-main-bigicon1</h3>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon-pgbar1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="progressbar" id="progressbar"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon-pgbar2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon-pgbar2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon-pgbar3</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ <div data-role="progressing" data-style="pending" id="pending"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <a href="#">
+ <form><input type="checkbox" name="c2line-icon-bigicon-btn" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-icon-bigicon-btn</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </a>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <a href="#">
+ <h3>2line-thumb3</h3>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </a>
+ </li>
+ </ul>
+ </div>
+</div>
+
--- /dev/null
+<div data-role="page" id="genlist-normal" data-add-back-btn="true" data-fit-page-to-window="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal lists</h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <ul data-role="listview">
+
+ <li>
+ 1line
+ </li>
+
+ <li>
+ 1line-sub
+ <span class="ui-li-text-sub">subtext</span>
+ </li>
+
+ <li>
+ 1line-btn1
+ <div data-role="button" data-inline="true">Text Button</div>
+ </li>
+
+ <li>
+ 1line-btn2
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li>
+ 1line-toggle
+ <div data-role="toggleswitch"/></div>
+ </li>
+
+ <li>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-bigicon1
+ </li>
+
+ <li>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-bigicon2
+ <span class="ui-li-text-sub">Sub text</span>
+ </li>
+
+ <li>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-bigicon4
+ <div data-role="button" data-inline="true">Text Button</div>
+ </li>
+
+ <li>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-bigicon5
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-bigicon6
+ <div data-role="toggleswitch"/></div>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <input type="checkbox" name="c1line-check1" />
+ 1line-check1
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <form><input type="checkbox" name="c1line-check2" /></form>
+ 1line-check2
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <form><input type="checkbox" name="c1line-check3" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-check3
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <form><input type="checkbox" name="c1line-check4" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-check4
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <form><input type="radio" /></form>
+ 1line-radio1
+ </li>
+
+ <li class="ui-li-has-radio">
+ <form><input type="radio" /></form>
+ 1line-radio3
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 1line-radio4
+ </li>
+
+ <li class="ui-li-has-radio">
+ <form><input type="radio" /></form>
+ 1line-radio5
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <form><input type="radio" /></form>
+ 1line-radio
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line-2sub
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line-btn1
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line-btn1
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line-btn2
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line-star1
+ <span class="ui-li-text-sub">Subtext</span>
+ <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line-star2
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
+ <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line-setting
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line-toggle-setting
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="toggleswitch"/></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line-btn-setting
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line-bigicon0
+ <span class="ui-li-text-sub">Subtext<img src="00_winset_icon_favorite_on.png"></span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon1
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon2
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon3
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon4
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <form><input type="checkbox" name="c2line-check1" /></form>
+ 2line-check
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <form><input type="checkbox" name="c2line-check2" /></form>
+ 2line-check2
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <form><input type="checkbox" name="c2line-check3" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-check3
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-radio ui-li-has-multiline">
+ <form><input type="radio" /></form>
+ 2line-radio1
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-radio ui-li-has-multiline">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-radio2
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <span class="ui-li-color-bar"></span>
+ 2line-colorbar1
+ <span class="ui-li-text-sub">Subtext
+ <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png">
+ </span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
+ 2line-colorbar2
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
+ 2line-colorbar2
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-colorbar3
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon8
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ </li>
+
+ <li class="ui-li-has-multiline ui-li-thumbnail-right">
+ 2line-thumb1
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-has-multiline ui-li-thumbnail-right">
+ 2line-thumb2
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-has-multiline ui-li-thumbnail-right">
+ <span class="ui-li-text-sub">Subtext</span>
+ 2line-sub-main-bigicon1
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon-pgbar1
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ <div data-role="progressbar" id="progressbar"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon-pgbar2
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon-pgbar2
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-bigicon-pgbar3
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ <div data-role="progressing" data-style="pending" id="pending"></div>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <form><input type="checkbox" name="c2line-icon-bigicon-btn" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ 2line-icon-bigicon-btn
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ 2line-thumb3
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+ </ul>
+ </div>
+</div>
--- /dev/null
+<div data-role="page" id="genlist-normal" data-add-back-btn="true" data-fit-page-to-window="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal lists</h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <ul data-role="listview">
+
+ <li>
+ <h3>1line</h3>
+ </li>
+
+ <li>
+ <h3>1line-sub</h3>
+ <span class="ui-li-text-sub">subtext</span>
+ </li>
+
+ <li>
+ <h3>1line-btn1</h3>
+ <div data-role="button" data-inline="true">Text Button</div>
+ </li>
+
+ <li>
+ <h3>1line-btn2</h3>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li>
+ <h3>1line-toggle</h3>
+ <div data-role="toggleswitch"/></div>
+ </li>
+
+ <li>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-bigicon1</h3>
+ </li>
+
+ <li>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-bigicon2</h3>
+ <span class="ui-li-text-sub">Sub text</span>
+ </li>
+
+ <li>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-bigicon4</h3>
+ <div data-role="button" data-inline="true">Text Button</div>
+ </li>
+
+ <li>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-bigicon5</h3>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-bigicon6</h3>
+ <div data-role="toggleswitch"/></div>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <input type="checkbox" name="c1line-check1" />
+ <h3>1line-check1</h3>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <form><input type="checkbox" name="c1line-check2" /></form>
+ <h3>1line-check2</h3>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <form><input type="checkbox" name="c1line-check3" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-check3</h3>
+ </li>
+
+ <li class="ui-li-has-checkbox">
+ <form><input type="checkbox" name="c1line-check4" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-check4</h3>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <form><input type="radio" /></form>
+ <h3>1line-radio1</h3>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <form><input type="radio" /></form>
+ <h3>1line-radio3</h3>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>1line-radio4</h3>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <form><input type="radio" /></form>
+ <h3>1line-radio5</h3>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-radio">
+ <form><input type="radio" /></form>
+ <h3>1line-radio</h3>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-2sub</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-btn1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-btn1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-btn2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-star1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-star</h3>
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
+ <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-setting</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-toggle-setting</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="toggleswitch"/></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-btn-setting</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-bigicon0</h3>
+ <span class="ui-li-text-sub">Subtext<img src="00_winset_icon_favorite_on.png"></span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon3</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon4</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <form><input type="checkbox" name="c2line-check1" /></form>
+ <h3>2line-check</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <form><input type="checkbox" name="c2line-check2" /></form>
+ <h3>2line-check2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <form><input type="checkbox" name="c2line-check3" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-check3</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-radio ui-li-has-multiline">
+ <form><input type="radio" /></form>
+ <h3>2line-radio1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-radio ui-li-has-multiline">
+ <form><input type="radio" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-radio2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <span class="ui-li-color-bar"></span>
+ <h3>2line-colorbar1</h3>
+ <span class="ui-li-text-sub">Subtext
+ <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png">
+ </span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
+ <h3>2line-colorbar2</h3>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
+ <h3>2line-colorbar2</h3>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-colorbar3</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon8</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ </li>
+
+ <li class="ui-li-has-multiline ui-li-thumbnail-right">
+ <h3>2line-thumb1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-thumb2</h3>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-has-multiline ui-li-thumbnail-right">
+ <span class="ui-li-text-sub">Subtext</span>
+ <h3>2line-sub-main-bigicon1</h3>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon-pgbar1</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ <div data-role="progressbar" id="progressbar"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon-pgbar2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon-pgbar2</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-bigicon-pgbar3</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ <div data-role="progressing" data-style="pending" id="pending"></div>
+ </li>
+
+ <li class="ui-li-has-checkbox ui-li-has-multiline">
+ <form><input type="checkbox" name="c2line-icon-bigicon-btn" /></form>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <h3>2line-icon-bigicon-btn</h3>
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ </li>
+
+ <li class="ui-li-has-multiline">
+ <h3>2line-thumb3</h3>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext</span>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+ </ul>
+ </div>
+</div>
--- /dev/null
+<div data-role="page" id="genlist-radio" data-add-back-btn="footer">
+ <div data-role="header" data-position="fixed">
+ <h1>Radio Button lists</h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <form>
+ <ul data-role="listview">
+ <li class="ui-li-has-radio ui-list-link">
+ <a href="#">
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked"/>
+ Radio</a>
+ </li>
+ <li class="ui-li-has-radio ui-list-link">
+ <a href="#">
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"/>
+ Radio 2</a>
+ </li>
+ <li class="ui-li-has-radio ui-list-link">
+ <a href="#">
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"/>
+ Radio3</a>
+ </li>
+ <li class="ui-li-has-radio">
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"/>
+ Radio Item 4
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+ <li class="ui-li-has-radio">
+ <input type="radio" name="radio-choice-1" id="radio-choice-5" value="choice-5"/>
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ Radio Item 5
+ </li>
+ <li class="ui-li-has-radio">
+ <input type="radio" name="radio-choice-1" id="radio-choice-6" value="choice-6"/>
+ Radio Item 6
+ </li>
+ <li class="ui-li-has-radio">
+ <input type="radio" name="radio-choice-1" id="radio-choice-7" value="choice-7"/>
+ Radio Item 7
+ </li>
+ <li class="ui-li-has-radio">
+ <input type="radio" name="radio-choice-1" id="radio-choice-8" value="choice-8"/>
+ Radio Item 8
+ </li>
+ <li class="ui-li-has-radio">
+ <input type="radio" name="radio-choice-1" id="radio-choice-9" value="choice-9"/>
+ Radio Item 9
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </li>
+ <li class="ui-li-has-radio">
+ <input type="radio" name="radio-choice-1" id="radio-choice-10" value="choice-10"/>
+ Radio Item 10
+ <img src="thumbnail.jpg" class="ui-li-bigicon">
+ </li>
+ </ul>
+ </form>
+ </div>
+</div>
+
--- /dev/null
+<div data-role="page" id="genlist-swipe" data-add-back-btn="true" data-fit-page-to-window="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Swipe lists</h1>
+ </div>
+ <div class="content" data-role="content">
+ <ul data-role="listview">
+ <ul data-role="swipelist">
+ <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+ <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ </div>
+ </li>
+ <li class="ui-li-1line ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">1line
+<!-- <div class="ui-li-text-main">1line</div>-->
+ </div>
+ </li>
+ <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+ <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ </div>
+ </li>
+ <li class="ui-li-1line ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div class="ui-li-text-main">1line</div>
+ </div>
+ </li>
+ <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+ <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ </div>
+ </li>
+ <li class="ui-li-1line ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div class="ui-li-text-main">1line</div>
+ </div>
+ </li>
+ <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+ <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ </div>
+ </li>
+ <li class="ui-li-1line ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div class="ui-li-text-main">1line</div>
+ </div>
+ </li>
+ <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+ <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ </div>
+ </li>
+ <li class="ui-li-1line ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div class="ui-li-text-main">1line</div>
+ </div>
+ </li>
+ </ul>
+ </ul>
+ </div>
+</div>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+ <body>
+
+
+<div data-role="page" id="list" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>List</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li data-role="list-divider">Item styles</li>
+<!-- <li><a href="list-normal.html">Normal lists</a></li>-->
+ <li><a href="list-normal_anchor.html">Normal lists add anchor</a></li>
+ <li><a href="list-normal_no_anchor.html">Normal lists no anchor</a></li>
+ <li><a href="list-normal_anchor_h3.html">Normal lists add anchor h3</a></li>
+ <li><a href="list-normal_no_anchor_h3.html">Normal lists no anchor h3</a></li>
+ <li data-role="list-divider">Divider style</li>
+ <li><a href="list-divider_normal.html">Normal divider</a></li>
+ <li><a href="list-divider_groupped.html">Groupped divider</a></li>
+ <li><a href="list-divider_check.html">Check divider</a></li>
+
+ <li data-role="list-divider">Etc...</li>
+ <li><a href="list-bubble.html">bubble</a></li>
+ <li><a href="list-expandable.html">expandable list</a></li>
+ <li><a href="list-radio.html">Radio Button list</a></li>
+ <li><a href="list-dialogue.html">Dialogue list</a></li>
+ <li><a href="list-email.html">Email list</a></li>
+ <li><a href="list-swipe.html">Swipe list</a></li>
+ <li><a href="list-extendable.html">Extendable list</a></li>
+ <li><a href="virtuallist-normal.html">Virtual List Normal Style 1line</a></li>
+ <li><a href="virtuallist-normal_3_1_4.html">Virtual List Normal Style 1line-btn1</a></li>
+ <li><a href="virtuallist-normal_3_1_6.html">Virtual List Normal Style 1line-toggle</a></li>
+ <li><a href="virtuallist-normal_3_1_14.html">Virtual List Normal Style 1line-bigicon5</a></li>
+ <li><a href="virtuallist-normal_3_2_7.html">Virtual List Normal Style 2line-star1</a></li>
+ <li data-role="list-divider">(empty)</li>
+ <li data-role="list-divider">Samples</li>
+ </ul>
+ </div>
+</div>
+
+
+
+<div data-role="page" id="3" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1></h1>
+ </div>
+ <div data-role="content">
+ <ul-data-role="listview">
+ </ul>
+ </div>
+</div>
+
+
+</body>
+</html>
--- /dev/null
+<div data-role="page" id="pagecontrol" data-add-back-btn="true" data-fit-page-to-window="true">
+ <div data-role="header">
+ <h1>Pagecontrol (page indicator)</h1>
+ </div>
+ <div class="content" data-role="content">
+ <div id="p10" data-role="pagecontrol" data-max="10" data-value="10"></div>
+ <div id="p9" data-role="pagecontrol" data-max="9" data-value="9"></div>
+ <div id="p8" data-role="pagecontrol" data-max="8" data-value="8"></div>
+ <div id="p7" data-role="pagecontrol" data-max="7" data-value="7"></div>
+ <div id="p6" data-role="pagecontrol" data-max="6" data-value="6"></div>
+ <div id="p5" data-role="pagecontrol" data-max="5" data-value="5"></div>
+ <div id="p4" data-role="pagecontrol" data-max="4" data-value="4"></div>
+ <div id="p3" data-role="pagecontrol" data-max="3" data-value="3"></div>
+ <div id="p2" data-role="pagecontrol" data-max="2" data-value="2"></div>
+ <div id="p1" data-role="pagecontrol" data-max="1"></div>
+
+ <div id="txt">here</div>
+ <a href="#" id="pagecontrol_btn_randomset" data-role="button" data-inline="true">Set each values randomly</a>
+ </div>
+</div>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+<body>
+
+ <div data-role="page" id="backButtonDemomain">
+ <div data-role="header" data-position="fixed">
+ <h1>Footer and Backbutton demopage</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="backbutton/backbutton-normal.html">1. Generate Normal footer</a></li>
+ <li><a href="backbutton/backbutton-normal2.html">2. Defined Normal footer</a></li>
+ <li><a href="backbutton/backbutton-normal3.html">3. Define backButton in page</a></li>
+ <li><a href="backbutton/no-footer.html">4. No footer in page</a></li>
+ <li><a href="backbutton/no-back-button.html">5. No back button in page</a></li>
+ <li><a href="backbutton/back-button-to-header.html">6. Back button to Header</a></li>
+ <li><a href="backbutton/dynamically-attatch-backbutton-to-footer.html">7. Dynamically attatch backbutton to footer</a></li>
+ <li><a href="backbutton/dynamically-attatch-backbutton-to-header.html">8. Dynamically attatch backbutton to header</a></li>
+ </div>
+ </div>
+ <script src="backbutton-control.js"></script>
+</body>
+</html>
--- /dev/null
+$( document ).bind("pagecreate", function () {
+
+ $("#genBackToFooter").bind("vmousedown", function (e) {
+ $(".ui-page-active").find(".ui-footer").barlayout("addBackBtn");
+ });
+
+ $("#genBackToFooter2").bind("vmousedown", function (e) {
+ $(".ui-page-active").find(".ui-header").barlayout("addBackBtn");
+ });
+
+ $("#backButtonDemo5").bind("vmousedown", function (e) {
+ $(".ui-page-active").find(".ui-footer").hide();
+ });
+});
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+<body>
+
+<div data-role="page" data-add-back-btn="header">
+ <div data-role="header" data-position="fixed" >
+ <h1>Back button to Header</h1>
+ </div>
+
+ <div data-role="content">
+ <p> Case 6 : <br><br>
+ Web Developer defines that back button will be attached to header<br>
+ This page declared "data-add-back-btn=header" to page <br>
+ 1. check and draw back button to header</p>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <div data-role="page" data-add-back-btn="header"> <br>
+     <div data-role="header" data-position="fixed"> <br>
+         <h1>back button sample</h1> <br>
+     </div> <br>
+     <div data-role="content"> <br>
+     </div> <br>
+ </div> </p>
+ </div><br>
+ <a href="../backbutton-control.html" data-role="button" data-inline="true">Go Back</a>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-position="fixed" >
+ <h1>Normal footer generate</h1>
+ </div>
+
+ <div data-role="content">
+ <p> Case 1 : <br><br>
+ Web Developer doesn't define footer in page <br>
+ This page do not have <div> footer in html file <br>
+ Framework automatically generate footer in case no footer definition in page</p><br>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <div data-role="page"> <br>
+     <div data-role="header" data-position="fixed"> <br>
+         <h1>back button sample</h1> <br>
+     </div> <br>
+     <div data-role="content"> <br>
+     </div> <br>
+ </div> </p>
+ </div><br>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-position="fixed" >
+ <h1>Defined normal footer</h1>
+ </div>
+
+ <div data-role="content">
+ <p> Case 2 : <br><br>
+ Web Developer defines footer in page <br>
+ This page has <div> footer in html file <br>
+ Framework gets tizen theme of footer and styling footer</p><br>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <div data-role="page"> <br>
+     <div data-role="header" data-position="fixed"> <br>
+         <h1>back button sample</h1> <br>
+     </div> <br>
+     <div data-role="content"> <br>
+     </div> <br>
+     <div data-role="footer"> <br>
+     </div> <br>
+ </div> </p>
+ </div><br>
+ </div>
+
+ <div data-role="footer">
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+<body>
+
+<div data-role="page" data-add-back-btn="footer">
+ <div data-role="header" data-position="fixed" >
+ <h1>Defined back button in page</h1>
+ </div>
+
+ <div data-role="content">
+ <p> Case 3 : <br><br>
+ Web Developer defines back button in page <br>
+ This page does not have <div> footer in html file <br>
+ but declared back button in page <br>
+ Framework generates footer then attach back button to footer</p><br>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <div data-role="page" data-add-back-btn="footer"> <br>
+     <div data-role="header" data-position="fixed"> <br>
+         <h1>back button sample</h1> <br>
+     </div> <br>
+     <div data-role="content"> <br>
+     </div> <br>
+ </div> </p>
+ </div><br>
+ </div>
+
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+<body>
+
+<div data-role="page" data-add-back-btn="none">
+ <div data-role="header" data-position="fixed" >
+ <h1>Back button to Header</h1>
+ </div>
+
+ <div data-role="content">
+ <p> Case 7 : <br><br>
+ Web Developer declared only footer in page<br>
+ but need to add back button dynamically <br>
+ select footer and call barlayout("addBackBtn") API<br></p>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <div data-role="page" data-add-back-btn="none"> <br>
+     <div data-role="header" data-position="fixed"> <br>
+         <h1>back button sample</h1> <br>
+     </div> <br>
+     <div data-role="content"> <br>
+     </div> <br>
+     <div data-role="footer"> <br>
+     </div> <br>
+ </div> </p>
+ </div><br>
+
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <script> <br>
+ var $elFooter = $(".ui-page-active").find(".ui-footer"); <br>
+ $elFooter.barlayout("addBackBtn"); <br>
+ </script> <br>
+ </p>
+ </div><br>
+
+ <a id="genBackToFooter" data-role="button" data-inline="true">Generate backbutton to footer</a><br><br>
+ <a href="../backbutton-control.html" data-role="button" data-inline="true">Go Back</a>
+ </div>
+
+ <div data-role="footer">
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+<body>
+
+<div data-role="page" data-add-back-btn="none">
+ <div data-role="header" data-position="fixed" >
+ <h1>Back button to Header</h1>
+ </div>
+
+ <div data-role="content">
+ <p> Case 7 : <br><br>
+ Web Developer declared only footer in page<br>
+ but need to add back button dynamically in header<br>
+ select header and call barlayout("addBackBtn") API<br></p>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <div data-role="page" data-add-back-btn="none"> <br>
+     <div data-role="header" data-position="fixed"> <br>
+         <h1>back button sample</h1> <br>
+     </div> <br>
+     <div data-role="content"> <br>
+     </div> <br>
+     <div data-role="footer"> <br>
+     </div> <br>
+ </div> </p>
+ </div><br>
+
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <script> <br>
+ var $elHeader = $(".ui-page-active").find(".ui-header"); <br>
+ $elHeader.barlayout("addBackBtn"); <br>
+ </script> <br>
+ </p>
+ </div><br>
+
+ <a id="genBackToFooter2" data-role="button" data-inline="true">Generate backbutton to header</a><br><br>
+ <a href="../backbutton-control.html" data-role="button" data-inline="true">Go Back</a>
+ </div>
+
+ <div data-role="footer">
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+<body>
+
+<div data-role="page" data-add-back-btn="none">
+ <div data-role="header" data-position="fixed" >
+ <h1>No back button</h1>
+ </div>
+
+ <div data-role="content">
+ <p> Case 5 : <br><br>
+ Web Developer defines that back button will not use in this page <br>
+ This page declared that this page will not use back button <br>
+ declared "data-add-back-btn=none" to page <br>
+ 1. draw footer to page <br>
+ 2. check and do not draw back button to page</p>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <div data-role="page" data-add-back-btn="none"> <br>
+     <div data-role="header" data-position="fixed"> <br>
+         <h1>back button sample</h1> <br>
+     </div> <br>
+     <div data-role="content"> <br>
+     </div> <br>
+ </div> </p>
+ </div><br>
+ <a href="../backbutton-control.html" data-role="button" data-inline="true">Go Back</a>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+<body>
+
+<div data-role="page" data-footer-exist="false">
+ <div data-role="header" data-position="fixed" >
+ <h1>Defined normal footer</h1>
+ </div>
+
+ <div data-role="content">
+ <p> Case 4 : <br><br>
+ Web Developer defines that footer will not use in this page <br>
+ This page declared that this page will not use footer (footer-exist) <br>
+ 1. do not go to footerDraw routine</p>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <div data-role="page" data-footer-exist="false"> <br>
+     <div data-role="header" data-position="fixed"> <br>
+         <h1>back button sample</h1> <br>
+     </div> <br>
+     <div data-role="content"> <br>
+     </div> <br>
+ </div> </p>
+ </div><br>
+ <a href="../backbutton-control.html" data-role="button" data-inline="true">Go Back</a>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ </head>
+<body>
+
+<div data-role="page" id="pageUpdateDemo">
+ <div data-role="header" data-position="fixed">
+ <h1>Update page </h1>
+ </div>
+ <div data-role="content">
+ <br>
+ <p> Use case : <br>
+ In case, web Developer controls tizen bar(header/footer) without transitioning other page,
+ and web Developer use scrollview
+ Content in page needs to be updated because of scrollable area changed according to content, and changed fixed area need to be hide/show
+ <br><br>
+
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ var $elPage = $( ".ui-page-active" );<br><br>
+ $elPage.find( ".ui-header" ).hide();<br>
+ $elPage.page( "refresh" );<br><br>
+
+ $elPage.find( ".ui-header" ).show();<br>
+ $elPage.page( "refresh" );<br>
+ </p>
+ </div>
+ <div data-role="button" id="hideheader" data-inline="true">Hide header</div>
+ <div data-role="button" id="showheader" data-inline="true">Show header</div><br>
+
+ <br>
+ <br>
+ <div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ var $elPage = $( ".ui-page-active" );<br><br>
+ $elPage.find( ".ui-footer" ).hide();<br>
+ $elPage.page( "refresh" );<br><br>
+
+ $elPage.find( ".ui-footer" ).show();<br>
+ $elPage.page( "refresh" );<br>
+ </p><br>
+ </div>
+
+ <div data-role="button" id="hidefooter" data-inline="true">Hide footer</div>
+ <div data-role="button" id="showfooter" data-inline="true">Show footer</div>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+$( document ).bind( "pagecreate", function () {
+ $( "#hideheader" ).bind( "vclick", function ( e ) {
+ var $elPage = $( ".ui-page-active" );
+
+ $elPage.find( ".ui-header" ).hide();
+ $elPage.page( "refresh" );
+ });
+
+ $( "#showheader" ).bind( "vclick", function ( e ) {
+ var $elPage = $( ".ui-page-active" );
+
+ $elPage.find( ".ui-header" ).show();
+ $elPage.page( "refresh" );
+ });
+
+ $( "#hidefooter" ).bind( "vclick", function ( e ) {
+ var $elPage = $( ".ui-page-active" );
+
+ $elPage.find( ".ui-footer" ).hide();
+ $elPage.page( "refresh" );
+ });
+
+ $( "#showfooter" ).bind( "vclick", function ( e ) {
+ var $elPage = $( ".ui-page-active" );
+
+ $elPage.find( ".ui-footer" ).show();
+ $elPage.page( "refresh" );
+ });
+});
--- /dev/null
+
+<body>
+ <div data-role="page" id="page1">
+ <div data-role="header" data-position="fixed">
+ <h1>Tizen UI</h1>
+ </div>
+ <div data-role="content" id="content1">
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="#Tabbar_Main">ControlBar</a></li>
+ </ul>
+ </div>
+ <div data-role="content" id="content2">
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="#">Page2</a></li>
+ <li><a href="#">Page2</a></li>
+ <li><a href="#">Page2</a></li>
+ </ul>
+ </div>
+ <div data-role="content" id="content3">
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="#">Page3</a></li>
+ <li><a href="#">Page3</a></li>
+ <li><a href="#">Page3</a></li>
+ <li><a href="#">Page3</a></li>
+ </ul>
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" id="ctrlbar_5item" >
+ <ul>
+ <li><a href="#page1" data-for="content1" data-icon="ctrlbar-menu" >Menu</a></li>
+ <li><a href="#page2" data-for="content2" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#page3" data-for="content3" data-icon="ctrlbar-share" >Share</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+</body>
+</html>
--- /dev/null
+/* test file for content div control, not completed yet */
+$( "#ctrlbar_5item" ).live( "click", function() {
+ var a;
+ $("#ctrlbar_5item").controlbar('enable', a);
+ $("#ctrlbar_5item").controlbar('disable', undefined);
+});
--- /dev/null
+<div data-role="page" id="progressbar-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Progress bar</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li data-role="list-divider">Progress Bar</li>
+ <li>When you click progress bar, it starts updating values...</li>
+ <li id="progressbarTest" ><div data-role="progressbar" id="progressbar"></div></li>
+
+ <li data-role="list-divider">Progress Pending</li>
+ <li id="pendingTest" ><div data-role="progressing" data-style="pending" id="pending"></div></li>
+
+ <li data-role="list-divider">Progress ~ing</li>
+ <li id="progressingTest" >
+ <div data-role="progressing" data-style="circle" id="progressing"></div>
+ Loading..
+ </li>
+ </ul>
+ </div> <!-- /content -->
+</div> <!-- /page -->
--- /dev/null
+var progressbar_running;
+
+$("#progressbar-demo").live("pageshow", function ( e ) {
+
+ $("#progressbarTest").bind("vclick", function ( e ) {
+ progressbar_running = !progressbar_running;
+
+ // request animation frame
+ window.requestAnimFrame = (function () {
+ return window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function (animloop) {
+ return window.setTimeout(animloop, 1000 / 60);
+ };
+ }());
+
+ window.cancelRequestAnimFrame = (function () {
+ return window.cancelAnimationFrame ||
+ window.webkitCancelRequestAnimationFrame ||
+ window.mozCancelRequestAnimationFrame ||
+ window.oCancelRequestAnimationFrame ||
+ window.msCancelRequestAnimationFrame ||
+ clearTimeout;
+ }());
+
+ var request,
+ i = 0;
+
+ // start and run the animloop
+ (function animloop() {
+ if ( !progressbar_running ) {
+ cancelRequestAnimFrame( request );
+ return;
+ }
+
+ $("#progressbar").progressbar( "option", "value", i++ );
+
+ request = requestAnimFrame( animloop );
+
+ if ( i > 100 ) {
+ cancelRequestAnimFrame( request );
+ }
+ }());
+ });
+
+ $("#pending").progress( "running", true );
+ $("#progressing").progress( "running", true );
+
+ $("#pendingTest").bind("vclick", function ( e ) {
+ var running = $("#pending").progress( "running" );
+ // start/stop progressing animation
+ $("#pending").progress( "running", !running );
+ });
+
+ $("#progressingTest").bind("vclick", function ( e ) {
+ var running = $("#progressing").progress( "running" );
+ // start/stop progressing animation
+ $("#progressing").progress( "running", !running );
+
+ if ( running ) {
+ $("#progressing").progress( "hide" );
+ }
+ });
+});
+
+$("#progressbar-demo").live("pagehide", function ( e ) {
+ progressbar_running = false;
+ $("#pending").progress( "running", false );
+ $("#progressing").progress( "running", false );
+});
--- /dev/null
+<!DOCTYPE html>
+<div data-role="page" data-add-back-btn="true" id="searchbar-demo-page">
+ <div data-role="header" data-position ="fixed" >
+ <h1>Searchbar</h1>
+
+ <input type="search" name="search" id="search1" value="" />
+ </div><!-- /header -->
+
+ <div data-role="content" id="searchbar-content">
+ <p>Hairston</p>
+ <p>Hansbrough</p>
+ <p>Allred</p>
+ <p>Hanrahan</p>
+ <p>Egan</p>
+ <p>Dare</p>
+ <p>Edmonson</p>
+ <p>Calip</p>
+ <p>Baker</p>
+ <p>Fazekas</p>
+ <p>Garrity</p>
+ <p>Hansen</p>
+ <p>Feigenbaum</p>
+ <p>Fillmore</p>
+ <p>Darden</p>
+ <p>Davis</p>
+ <p>Fitzgerald</p>
+ <p>Carr</p>
+ <p>Danilovic</p>
+ <p>Dark</p>
+ <p>Alexander</p>
+ <p>Allen</p>
+ <p>Edwards</p>
+ <p>Garrett</p>
+ <p>Gardner</p>
+ <p>Carroll</p>
+ <p>Garner</p>
+ <p>Finn</p>
+ <p>Edelin</p>
+ <p>Gay</p>
+ </div>
+
+ <script src="searchbar.js"></script>
+</div><!-- /page -->
+
--- /dev/null
+<div data-role="page"data-add-back-btn="true" data-fit-page-to-window="true">
+ <div data-role="notification" id="smallpopup_selectioninfo" data-type="popup">
+ </div>
+ <div data-role="header" data-position="fixed">
+ <h1>Selection Info</h1>
+ </div>
+
+ <div data-role="content">
+ <h2>Selectioninfo Test </h2>
+ <fieldset id="dayselector1" data-role="dayselector" data-type="horizontal">
+ <legend>Choose some days</legend>
+ </fieldset>
+
+ <div><a id="day-selector-check-all" data-role="button" data-inline="true">Check all</a></div>
+ <hr/>
+
+ <p id="selectioninfo-demo" align="center">Click Here to Show Small Popup</p>
+</div> <!-- /page -->
--- /dev/null
+<!DOCTYPE html>
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="notification" id="notification" data-type="popup">
+ <p>Notification Demo</p>
+ </div>
+ <div data-role="header" data-position="fixed">
+ <h1>Notification</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="button" id="noti-demo">Show Smallpopup</div>
+ </div><!-- /content -->
+</div> <!-- /page -->
--- /dev/null
+<div data-role="page" id="switch-demo">
+ <div data-role="header">
+ <h1>Switch</h1>
+ </div>
+ <div class="content" data-role="content">
+ <div id="switch-1" data-role="toggleswitch" data-checked="false"></div>
+ <p/>
+ <div id="switch-2" data-role="toggleswitch"></div>
+ <p>Coordinated switches:</p>
+ <div id="switch-1-coord" data-role="toggleswitch"></div>
+ <div id="switch-2-coord" data-role="toggleswitch"></div>
+ </div> <!-- /content -->
+ <div data-role="footer">
+ <h4>Web UI Framework - Widgets gallery</h4>
+ </div>
+</div> <!-- page -->
--- /dev/null
+$("#switch-demo").live("pageshow", function(e) {
+ $("#switch-1-coord").bind("changed", function(e) {
+ $("#switch-2-coord").toggleswitch("option", "checked", $("#switch-1-coord").toggleswitch("option", "checked"));
+ });
+ $("#switch-2-coord").bind("changed", function(e) {
+ $("#switch-1-coord").toggleswitch("option", "checked", $("#switch-2-coord").toggleswitch("option", "checked"));
+ });
+});
--- /dev/null
+<!DOCTYPE html>
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="notification" id="notification" data-type="ticker">
+ <img src="./test/icon01.png">
+ <p>Hello Tizen</p>
+ <p>Jobs</p>
+ </div>
+ <div data-role="header" data-position="fixed">
+ <h1>Notification</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="button" id="noti-demo">Show TickerNoti</div><br>
+ <div data-role="button" id="noti-icon1" data-inline="true">Change Icon - Phone</div>
+ <div data-role="button" id="noti-icon2" data-inline="true">Change Icon - Message</div><br>
+ </div><!-- /content -->
+</div> <!-- /page -->
--- /dev/null
+.project
+*~
+*.diff
+*.patch
+.DS_Store
+generator/bin
+generator/obj
+++ /dev/null
-/*! jQuery v1.6.4 http://jquery.com/ | http://jquery.org/license */
-(function(a,b){function cu(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cr(a){if(!cg[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){ch||(ch=c.createElement("iframe"),ch.frameBorder=ch.width=ch.height=0),b.appendChild(ch);if(!ci||!ch.createElement)ci=(ch.contentWindow||ch.contentDocument).document,ci.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),ci.close();d=ci.createElement(a),ci.body.appendChild(d),e=f.css(d,"display"),b.removeChild(ch)}cg[a]=e}return cg[a]}function cq(a,b){var c={};f.each(cm.concat.apply([],cm.slice(0,b)),function(){c[this]=a});return c}function cp(){cn=b}function co(){setTimeout(cp,0);return cn=f.now()}function cf(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ce(){try{return new a.XMLHttpRequest}catch(b){}}function b$(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function bZ(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function bY(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bA.test(a)?d(a,e):bY(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)bY(a+"["+e+"]",b[e],c,d);else d(a,b)}function bX(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function bW(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bP,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=bW(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=bW(a,c,d,e,"*",g));return l}function bV(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bL),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function by(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bt:bu;if(d>0){c!=="border"&&f.each(e,function(){c||(d-=parseFloat(f.css(a,"padding"+this))||0),c==="margin"?d+=parseFloat(f.css(a,c+this))||0:d-=parseFloat(f.css(a,"border"+this+"Width"))||0});return d+"px"}d=bv(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0,c&&f.each(e,function(){d+=parseFloat(f.css(a,"padding"+this))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+this+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+this))||0)});return d+"px"}function bl(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bd,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bk(a){f.nodeName(a,"input")?bj(a):"getElementsByTagName"in a&&f.grep(a.getElementsByTagName("input"),bj)}function bj(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bi(a){return"getElementsByTagName"in a?a.getElementsByTagName("*"):"querySelectorAll"in a?a.querySelectorAll("*"):[]}function bh(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bg(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c=f.expando,d=f.data(a),e=f.data(b,d);if(d=d[c]){var g=d.events;e=e[c]=f.extend({},d);if(g){delete e.handle,e.events={};for(var h in g)for(var i=0,j=g[h].length;i<j;i++)f.event.add(b,h+(g[h][i].namespace?".":"")+g[h][i].namespace,g[h][i],g[h][i].data)}}}}function bf(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function V(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(Q.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function U(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function M(a,b){return(a&&a!=="*"?a+".":"")+b.replace(y,"`").replace(z,"&")}function L(a){var b,c,d,e,g,h,i,j,k,l,m,n,o,p=[],q=[],r=f._data(this,"events");if(!(a.liveFired===this||!r||!r.live||a.target.disabled||a.button&&a.type==="click")){a.namespace&&(n=new RegExp("(^|\\.)"+a.namespace.split(".").join("\\.(?:.*\\.)?")+"(\\.|$)")),a.liveFired=this;var s=r.live.slice(0);for(i=0;i<s.length;i++)g=s[i],g.origType.replace(w,"")===a.type?q.push(g.selector):s.splice(i--,1);e=f(a.target).closest(q,a.currentTarget);for(j=0,k=e.length;j<k;j++){m=e[j];for(i=0;i<s.length;i++){g=s[i];if(m.selector===g.selector&&(!n||n.test(g.namespace))&&!m.elem.disabled){h=m.elem,d=null;if(g.preType==="mouseenter"||g.preType==="mouseleave")a.type=g.preType,d=f(a.relatedTarget).closest(g.selector)[0],d&&f.contains(h,d)&&(d=h);(!d||d!==h)&&p.push({elem:h,handleObj:g,level:m.level})}}}for(j=0,k=p.length;j<k;j++){e=p[j];if(c&&e.level>c)break;a.currentTarget=e.elem,a.data=e.handleObj.data,a.handleObj=e.handleObj,o=e.handleObj.origHandler.apply(e.elem,arguments);if(o===!1||a.isPropagationStopped()){c=e.level,o===!1&&(b=!1);if(a.isImmediatePropagationStopped())break}}return b}}function J(a,c,d){var e=f.extend({},d[0]);e.type=a,e.originalEvent={},e.liveFired=b,f.event.handle.call(c,e),e.isDefaultPrevented()&&d[0].preventDefault()}function D(){return!0}function C(){return!1}function m(a,c,d){var e=c+"defer",g=c+"queue",h=c+"mark",i=f.data(a,e,b,!0);i&&(d==="queue"||!f.data(a,g,b,!0))&&(d==="mark"||!f.data(a,h,b,!0))&&setTimeout(function(){!f.data(a,g,b,!0)&&!f.data(a,h,b,!0)&&(f.removeData(a,e,!0),i.resolve())},0)}function l(a){for(var b in a)if(b!=="toJSON")return!1;return!0}function k(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(j,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNaN(d)?i.test(d)?f.parseJSON(d):d:parseFloat(d)}catch(g){}f.data(a,c,d)}else d=b}return d}var c=a.document,d=a.navigator,e=a.location,f=function(){function K(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(K,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/\d/,n=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,o=/^[\],:{}\s]*$/,p=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,q=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,r=/(?:^|:|,)(?:\s*\[)+/g,s=/(webkit)[ \/]([\w.]+)/,t=/(opera)(?:.*version)?[ \/]([\w.]+)/,u=/(msie) ([\w.]+)/,v=/(mozilla)(?:.*? rv:([\w.]+))?/,w=/-([a-z]|[0-9])/ig,x=/^-ms-/,y=function(a,b){return(b+"").toUpperCase()},z=d.userAgent,A,B,C,D=Object.prototype.toString,E=Object.prototype.hasOwnProperty,F=Array.prototype.push,G=Array.prototype.slice,H=String.prototype.trim,I=Array.prototype.indexOf,J={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=n.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.6.4",length:0,size:function(){return this.length},toArray:function(){return G.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?F.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),B.done(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(G.apply(this,arguments),"slice",G.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:F,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;B.resolveWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").unbind("ready")}},bindReady:function(){if(!B){B=e._Deferred();if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",C,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",C),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&K()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNaN:function(a){return a==null||!m.test(a)||isNaN(a)},type:function(a){return a==null?String(a):J[D.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!E.call(a,"constructor")&&!E.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||E.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw a},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(o.test(b.replace(p,"@").replace(q,"]").replace(r,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(x,"ms-").replace(w,y)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:H?function(a){return a==null?"":H.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?F.call(c,a):e.merge(c,a)}return c},inArray:function(a,b){if(!b)return-1;if(I)return I.call(b,a);for(var c=0,d=b.length;c<d;c++)if(b[c]===a)return c;return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=G.call(arguments,2),g=function(){return a.apply(c,f.concat(G.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=s.exec(a)||t.exec(a)||u.exec(a)||a.indexOf("compatible")<0&&v.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){J["[object "+b+"]"]=b.toLowerCase()}),A=e.uaMatch(z),A.browser&&(e.browser[A.browser]=!0,e.browser.version=A.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?C=function(){c.removeEventListener("DOMContentLoaded",C,!1),e.ready()}:c.attachEvent&&(C=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",C),e.ready())});return e}(),g="done fail isResolved isRejected promise then always pipe".split(" "),h=[].slice;f.extend({_Deferred:function(){var a=[],b,c,d,e={done:function(){if(!d){var c=arguments,g,h,i,j,k;b&&(k=b,b=0);for(g=0,h=c.length;g<h;g++)i=c[g],j=f.type(i),j==="array"?e.done.apply(e,i):j==="function"&&a.push(i);k&&e.resolveWith(k[0],k[1])}return this},resolveWith:function(e,f){if(!d&&!b&&!c){f=f||[],c=1;try{while(a[0])a.shift().apply(e,f)}finally{b=[e,f],c=0}}return this},resolve:function(){e.resolveWith(this,arguments);return this},isResolved:function(){return!!c||!!b},cancel:function(){d=1,a=[];return this}};return e},Deferred:function(a){var b=f._Deferred(),c=f._Deferred(),d;f.extend(b,{then:function(a,c){b.done(a).fail(c);return this},always:function(){return b.done.apply(b,arguments).fail.apply(this,arguments)},fail:c.done,rejectWith:c.resolveWith,reject:c.resolve,isRejected:c.isResolved,pipe:function(a,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[c,"reject"]},function(a,c){var e=c[0],g=c[1],h;f.isFunction(e)?b[a](function(){h=e.apply(this,arguments),h&&f.isFunction(h.promise)?h.promise().then(d.resolve,d.reject):d[g+"With"](this===b?d:this,[h])}):b[a](d[g])})}).promise()},promise:function(a){if(a==null){if(d)return d;d=a={}}var c=g.length;while(c--)a[g[c]]=b[g[c]];return a}}),b.done(c.cancel).fail(b.cancel),delete b.cancel,a&&a.call(b,b);return b},when:function(a){function i(a){return function(c){b[a]=arguments.length>1?h.call(arguments,0):c,--e||g.resolveWith(g,h.call(b,0))}}var b=arguments,c=0,d=b.length,e=d,g=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred();if(d>1){for(;c<d;c++)b[c]&&f.isFunction(b[c].promise)?b[c].promise().then(i(c),g.reject):--e;e||g.resolveWith(g,b)}else g!==a&&g.resolveWith(g,d?[a]:[]);return g.promise()}}),f.support=function(){var a=c.createElement("div"),b=c.documentElement,d,e,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u;a.setAttribute("className","t"),a.innerHTML=" <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=a.getElementsByTagName("*"),e=a.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=a.getElementsByTagName("input")[0],k={leadingWhitespace:a.firstChild.nodeType===3,tbody:!a.getElementsByTagName("tbody").length,htmlSerialize:!!a.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55$/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:a.className!=="t",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,k.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,k.optDisabled=!h.disabled;try{delete a.test}catch(v){k.deleteExpando=!1}!a.addEventListener&&a.attachEvent&&a.fireEvent&&(a.attachEvent("onclick",function(){k.noCloneEvent=!1}),a.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),k.radioValue=i.value==="t",i.setAttribute("checked","checked"),a.appendChild(i),l=c.createDocumentFragment(),l.appendChild(a.firstChild),k.checkClone=l.cloneNode(!0).cloneNode(!0).lastChild.checked,a.innerHTML="",a.style.width=a.style.paddingLeft="1px",m=c.getElementsByTagName("body")[0],o=c.createElement(m?"div":"body"),p={visibility:"hidden",width:0,height:0,border:0,margin:0,background:"none"},m&&f.extend(p,{position:"absolute",left:"-1000px",top:"-1000px"});for(t in p)o.style[t]=p[t];o.appendChild(a),n=m||b,n.insertBefore(o,n.firstChild),k.appendChecked=i.checked,k.boxModel=a.offsetWidth===2,"zoom"in a.style&&(a.style.display="inline",a.style.zoom=1,k.inlineBlockNeedsLayout=a.offsetWidth===2,a.style.display="",a.innerHTML="<div style='width:4px;'></div>",k.shrinkWrapBlocks=a.offsetWidth!==2),a.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",q=a.getElementsByTagName("td"),u=q[0].offsetHeight===0,q[0].style.display="",q[1].style.display="none",k.reliableHiddenOffsets=u&&q[0].offsetHeight===0,a.innerHTML="",c.defaultView&&c.defaultView.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",a.appendChild(j),k.reliableMarginRight=(parseInt((c.defaultView.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0),o.innerHTML="",n.removeChild(o);if(a.attachEvent)for(t in{submit:1,change:1,focusin:1})s="on"+t,u=s in a,u||(a.setAttribute(s,"return;"),u=typeof a[s]=="function"),k[t+"Bubbles"]=u;o=l=g=h=m=j=a=i=null;return k}(),f.boxModel=f.support.boxModel;var i=/^(?:\{.*\}|\[.*\])$/,j=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!l(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i=f.expando,j=typeof c=="string",k=a.nodeType,l=k?f.cache:a,m=k?a[f.expando]:a[f.expando]&&f.expando;if((!m||e&&m&&l[m]&&!l[m][i])&&j&&d===b)return;m||(k?a[f.expando]=m=++f.uuid:m=f.expando),l[m]||(l[m]={},k||(l[m].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?l[m][i]=f.extend(l[m][i],c):l[m]=f.extend(l[m],c);g=l[m],e&&(g[i]||(g[i]={}),g=g[i]),d!==b&&(g[f.camelCase(c)]=d);if(c==="events"&&!g[c])return g[i]&&g[i].events;j?(h=g[c],h==null&&(h=g[f.camelCase(c)])):h=g;return h}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e=f.expando,g=a.nodeType,h=g?f.cache:a,i=g?a[f.expando]:f.expando;if(!h[i])return;if(b){d=c?h[i][e]:h[i];if(d){d[b]||(b=f.camelCase(b)),delete d[b];if(!l(d))return}}if(c){delete h[i][e];if(!l(h[i]))return}var j=h[i][e];f.support.deleteExpando||!h.setInterval?delete h[i]:h[i]=null,j?(h[i]={},g||(h[i].toJSON=f.noop),h[i][e]=j):g&&(f.support.deleteExpando?delete a[f.expando]:a.removeAttribute?a.removeAttribute(f.expando):a[f.expando]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d=null;if(typeof a=="undefined"){if(this.length){d=f.data(this[0]);if(this[0].nodeType===1){var e=this[0].attributes,g;for(var h=0,i=e.length;h<i;h++)g=e[h].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),k(this[0],g,d[g]))}}return d}if(typeof a=="object")return this.each(function(){f.data(this,a)});var j=a.split(".");j[1]=j[1]?"."+j[1]:"";if(c===b){d=this.triggerHandler("getData"+j[1]+"!",[j[0]]),d===b&&this.length&&(d=f.data(this[0],a),d=k(this[0],a,d));return d===b&&j[1]?this.data(j[0]):d}return this.each(function(){var b=f(this),d=[j[0],c];b.triggerHandler("setData"+j[1]+"!",d),f.data(this,a,c),b.triggerHandler("changeData"+j[1]+"!",d)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,c){a&&(c=(c||"fx")+"mark",f.data(a,c,(f.data(a,c,b,!0)||0)+1,!0))},_unmark:function(a,c,d){a!==!0&&(d=c,c=a,a=!1);if(c){d=d||"fx";var e=d+"mark",g=a?0:(f.data(c,e,b,!0)||1)-1;g?f.data(c,e,g,!0):(f.removeData(c,e,!0),m(c,d,"mark"))}},queue:function(a,c,d){if(a){c=(c||"fx")+"queue";var e=f.data(a,c,b,!0);d&&(!e||f.isArray(d)?e=f.data(a,c,f.makeArray(d),!0):e.push(d));return e||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e;d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),d.call(a,function(){f.dequeue(a,b)})),c.length||(f.removeData(a,b+"queue",!0),m(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(){var c=this;setTimeout(function(){f.dequeue(c,b)},a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f._Deferred(),!0))h++,l.done(m);m();return d.promise()}});var n=/[\n\t\r]/g,o=/\s+/,p=/\r/g,q=/^(?:button|input)$/i,r=/^(?:button|input|object|select|textarea)$/i,s=/^a(?:rea)?$/i,t=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,u,v;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(o);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(o);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(n," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(o);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ";for(var c=0,d=this.length;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(n," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e=this[0];if(!arguments.length){if(e){c=f.valHooks[e.nodeName.toLowerCase()]||f.valHooks[e.type];if(c&&"get"in c&&(d=c.get(e,"value"))!==b)return d;d=e.value;return typeof d=="string"?d.replace(p,""):d==null?"":d}return b}var g=f.isFunction(a);return this.each(function(d){var e=f(this),h;if(this.nodeType===1){g?h=a.call(this,d,e.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c=a.selectedIndex,d=[],e=a.options,g=a.type==="select-one";if(c<0)return null;for(var h=g?c:0,i=g?c+1:e.length;h<i;h++){var j=e[h];if(j.selected&&(f.support.optDisabled?!j.disabled:j.getAttribute("disabled")===null)&&(!j.parentNode.disabled||!f.nodeName(j.parentNode,"optgroup"))){b=f(j).val();if(g)return b;d.push(b)}}if(g&&!d.length&&e.length)return f(e[c]).val();return d},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attrFix:{tabindex:"tabIndex"},attr:function(a,c,d,e){var g=a.nodeType;if(!a||g===3||g===8||g===2)return b;if(e&&c in f.attrFn)return f(a)[c](d);if(!("getAttribute"in a))return f.prop(a,c,d);var h,i,j=g!==1||!f.isXMLDoc(a);j&&(c=f.attrFix[c]||c,i=f.attrHooks[c],i||(t.test(c)?i=v:u&&(i=u)));if(d!==b){if(d===null){f.removeAttr(a,c);return b}if(i&&"set"in i&&j&&(h=i.set(a,d,c))!==b)return h;a.setAttribute(c,""+d);return d}if(i&&"get"in i&&j&&(h=i.get(a,c))!==null)return h;h=a.getAttribute(c);return h===null?b:h},removeAttr:function(a,b){var c;a.nodeType===1&&(b=f.attrFix[b]||b,f.attr(a,b,""),a.removeAttribute(b),t.test(b)&&(c=f.propFix[b]||b)in a&&(a[c]=!1))},attrHooks:{type:{set:function(a,b){if(q.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(u&&f.nodeName(a,"button"))return u.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(u&&f.nodeName(a,"button"))return u.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e=a.nodeType;if(!a||e===3||e===8||e===2)return b;var g,h,i=e!==1||!f.isXMLDoc(a);i&&(c=f.propFix[c]||c,h=f.propHooks[c]);return d!==b?h&&"set"in h&&(g=h.set(a,d,c))!==b?g:a[c]=d:h&&"get"in h&&(g=h.get(a,c))!==null?g:a[c]},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):r.test(a.nodeName)||s.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabIndex=f.propHooks.tabIndex,v={get:function(a,c){var d;return f.prop(a,c)===!0||(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},f.support.getSetAttribute||(u=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&d.nodeValue!==""?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})})),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var w=/\.(.*)$/,x=/^(?:textarea|input|select)$/i,y=/\./g,z=/ /g,A=/[^\w\s.|`]/g,B=function(a){return a.replace(A,"\\$&")};f.event={add:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){if(d===!1)d=C;else if(!d)return;var g,h;d.handler&&(g=d,d=g.handler),d.guid||(d.guid=f.guid++);var i=f._data(a);if(!i)return;var j=i.events,k=i.handle;j||(i.events=j={}),k||(i.handle=k=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.handle.apply(k.elem,arguments):b}),k.elem=a,c=c.split(" ");var l,m=0,n;while(l=c[m++]){h=g?f.extend({},g):{handler:d,data:e},l.indexOf(".")>-1?(n=l.split("."),l=n.shift(),h.namespace=n.slice(0).sort().join(".")):(n=[],h.namespace=""),h.type=l,h.guid||(h.guid=d.guid);var o=j[l],p=f.event.special[l]||{};if(!o){o=j[l]=[];if(!p.setup||p.setup.call(a,e,n,k)===!1)a.addEventListener?a.addEventListener(l,k,!1):a.attachEvent&&a.attachEvent("on"+l,k)}p.add&&(p.add.call(a,h),h.handler.guid||(h.handler.guid=d.guid)),o.push(h),f.event.global[l]=!0}a=null}},global:{},remove:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){d===!1&&(d=C);var g,h,i,j,k=0,l,m,n,o,p,q,r,s=f.hasData(a)&&f._data(a),t=s&&s.events;if(!s||!t)return;c&&c.type&&(d=c.handler,c=c.type);if(!c||typeof c=="string"&&c.charAt(0)==="."){c=c||"";for(h in t)f.event.remove(a,h+c);return}c=c.split(" ");while(h=c[k++]){r=h,q=null,l=h.indexOf(".")<0,m=[],l||(m=h.split("."),h=m.shift(),n=new RegExp("(^|\\.)"+f.map(m.slice(0).sort(),B).join("\\.(?:.*\\.)?")+"(\\.|$)")),p=t[h];if(!p)continue;if(!d){for(j=0;j<p.length;j++){q=p[j];if(l||n.test(q.namespace))f.event.remove(a,r,q.handler,j),p.splice(j--,1)}continue}o=f.event.special[h]||{};for(j=e||0;j<p.length;j++){q=p[j];if(d.guid===q.guid){if(l||n.test(q.namespace))e==null&&p.splice(j--,1),o.remove&&o.remove.call(a,q);if(e!=null)break}}if(p.length===0||e!=null&&p.length===1)(!o.teardown||o.teardown.call(a,m)===!1)&&f.removeEvent(a,h,s.handle),g=null,delete
-t[h]}if(f.isEmptyObject(t)){var u=s.handle;u&&(u.elem=null),delete s.events,delete s.handle,f.isEmptyObject(s)&&f.removeData(a,b,!0)}}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){var h=c.type||c,i=[],j;h.indexOf("!")>=0&&(h=h.slice(0,-1),j=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if(!!e&&!f.event.customEvent[h]||!!f.event.global[h]){c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.exclusive=j,c.namespace=i.join("."),c.namespace_re=new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)");if(g||!e)c.preventDefault(),c.stopPropagation();if(!e){f.each(f.cache,function(){var a=f.expando,b=this[a];b&&b.events&&b.events[h]&&f.event.trigger(c,d,b.handle.elem)});return}if(e.nodeType===3||e.nodeType===8)return;c.result=b,c.target=e,d=d!=null?f.makeArray(d):[],d.unshift(c);var k=e,l=h.indexOf(":")<0?"on"+h:"";do{var m=f._data(k,"handle");c.currentTarget=k,m&&m.apply(k,d),l&&f.acceptData(k)&&k[l]&&k[l].apply(k,d)===!1&&(c.result=!1,c.preventDefault()),k=k.parentNode||k.ownerDocument||k===c.target.ownerDocument&&a}while(k&&!c.isPropagationStopped());if(!c.isDefaultPrevented()){var n,o=f.event.special[h]||{};if((!o._default||o._default.call(e.ownerDocument,c)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)){try{l&&e[h]&&(n=e[l],n&&(e[l]=null),f.event.triggered=h,e[h]())}catch(p){}n&&(e[l]=n),f.event.triggered=b}}return c.result}},handle:function(c){c=f.event.fix(c||a.event);var d=((f._data(this,"events")||{})[c.type]||[]).slice(0),e=!c.exclusive&&!c.namespace,g=Array.prototype.slice.call(arguments,0);g[0]=c,c.currentTarget=this;for(var h=0,i=d.length;h<i;h++){var j=d[h];if(e||c.namespace_re.test(j.namespace)){c.handler=j.handler,c.data=j.data,c.handleObj=j;var k=j.handler.apply(this,g);k!==b&&(c.result=k,k===!1&&(c.preventDefault(),c.stopPropagation()));if(c.isImmediatePropagationStopped())break}}return c.result},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(a){if(a[f.expando])return a;var d=a;a=f.Event(d);for(var e=this.props.length,g;e;)g=this.props[--e],a[g]=d[g];a.target||(a.target=a.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),!a.relatedTarget&&a.fromElement&&(a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement);if(a.pageX==null&&a.clientX!=null){var h=a.target.ownerDocument||c,i=h.documentElement,j=h.body;a.pageX=a.clientX+(i&&i.scrollLeft||j&&j.scrollLeft||0)-(i&&i.clientLeft||j&&j.clientLeft||0),a.pageY=a.clientY+(i&&i.scrollTop||j&&j.scrollTop||0)-(i&&i.clientTop||j&&j.clientTop||0)}a.which==null&&(a.charCode!=null||a.keyCode!=null)&&(a.which=a.charCode!=null?a.charCode:a.keyCode),!a.metaKey&&a.ctrlKey&&(a.metaKey=a.ctrlKey),!a.which&&a.button!==b&&(a.which=a.button&1?1:a.button&2?3:a.button&4?2:0);return a},guid:1e8,proxy:f.proxy,special:{ready:{setup:f.bindReady,teardown:f.noop},live:{add:function(a){f.event.add(this,M(a.origType,a.selector),f.extend({},a,{handler:L,guid:a.handler.guid}))},remove:function(a){f.event.remove(this,M(a.origType,a.selector),a)}},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}}},f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!this.preventDefault)return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?D:C):this.type=a,b&&f.extend(this,b),this.timeStamp=f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=D;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=D;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=D,this.stopPropagation()},isDefaultPrevented:C,isPropagationStopped:C,isImmediatePropagationStopped:C};var E=function(a){var b=a.relatedTarget,c=!1,d=a.type;a.type=a.data,b!==this&&(b&&(c=f.contains(this,b)),c||(f.event.handle.apply(this,arguments),a.type=d))},F=function(a){a.type=a.data,f.event.handle.apply(this,arguments)};f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={setup:function(c){f.event.add(this,b,c&&c.selector?F:E,a)},teardown:function(a){f.event.remove(this,b,a&&a.selector?F:E)}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(a,b){if(!f.nodeName(this,"form"))f.event.add(this,"click.specialSubmit",function(a){var b=a.target,c=f.nodeName(b,"input")||f.nodeName(b,"button")?b.type:"";(c==="submit"||c==="image")&&f(b).closest("form").length&&J("submit",this,arguments)}),f.event.add(this,"keypress.specialSubmit",function(a){var b=a.target,c=f.nodeName(b,"input")||f.nodeName(b,"button")?b.type:"";(c==="text"||c==="password")&&f(b).closest("form").length&&a.keyCode===13&&J("submit",this,arguments)});else return!1},teardown:function(a){f.event.remove(this,".specialSubmit")}});if(!f.support.changeBubbles){var G,H=function(a){var b=f.nodeName(a,"input")?a.type:"",c=a.value;b==="radio"||b==="checkbox"?c=a.checked:b==="select-multiple"?c=a.selectedIndex>-1?f.map(a.options,function(a){return a.selected}).join("-"):"":f.nodeName(a,"select")&&(c=a.selectedIndex);return c},I=function(c){var d=c.target,e,g;if(!!x.test(d.nodeName)&&!d.readOnly){e=f._data(d,"_change_data"),g=H(d),(c.type!=="focusout"||d.type!=="radio")&&f._data(d,"_change_data",g);if(e===b||g===e)return;if(e!=null||g)c.type="change",c.liveFired=b,f.event.trigger(c,arguments[1],d)}};f.event.special.change={filters:{focusout:I,beforedeactivate:I,click:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(c==="radio"||c==="checkbox"||f.nodeName(b,"select"))&&I.call(this,a)},keydown:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(a.keyCode===13&&!f.nodeName(b,"textarea")||a.keyCode===32&&(c==="checkbox"||c==="radio")||c==="select-multiple")&&I.call(this,a)},beforeactivate:function(a){var b=a.target;f._data(b,"_change_data",H(b))}},setup:function(a,b){if(this.type==="file")return!1;for(var c in G)f.event.add(this,c+".specialChange",G[c]);return x.test(this.nodeName)},teardown:function(a){f.event.remove(this,".specialChange");return x.test(this.nodeName)}},G=f.event.special.change.filters,G.focus=G.beforeactivate}f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){function e(a){var c=f.event.fix(a);c.type=b,c.originalEvent={},f.event.trigger(c,null,c.target),c.isDefaultPrevented()&&a.preventDefault()}var d=0;f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.each(["bind","one"],function(a,c){f.fn[c]=function(a,d,e){var g;if(typeof a=="object"){for(var h in a)this[c](h,d,a[h],e);return this}if(arguments.length===2||d===!1)e=d,d=b;c==="one"?(g=function(a){f(this).unbind(a,g);return e.apply(this,arguments)},g.guid=e.guid||f.guid++):g=e;if(a==="unload"&&c!=="one")this.one(a,d,e);else for(var i=0,j=this.length;i<j;i++)f.event.add(this[i],a,g,d);return this}}),f.fn.extend({unbind:function(a,b){if(typeof a=="object"&&!a.preventDefault)for(var c in a)this.unbind(c,a[c]);else for(var d=0,e=this.length;d<e;d++)f.event.remove(this[d],a,b);return this},delegate:function(a,b,c,d){return this.live(b,c,d,a)},undelegate:function(a,b,c){return arguments.length===0?this.unbind("live"):this.die(b,null,c,a)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f.data(this,"lastToggle"+a.guid)||0)%d;f.data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}});var K={focus:"focusin",blur:"focusout",mouseenter:"mouseover",mouseleave:"mouseout"};f.each(["live","die"],function(a,c){f.fn[c]=function(a,d,e,g){var h,i=0,j,k,l,m=g||this.selector,n=g?this:f(this.context);if(typeof a=="object"&&!a.preventDefault){for(var o in a)n[c](o,d,a[o],m);return this}if(c==="die"&&!a&&g&&g.charAt(0)==="."){n.unbind(g);return this}if(d===!1||f.isFunction(d))e=d||C,d=b;a=(a||"").split(" ");while((h=a[i++])!=null){j=w.exec(h),k="",j&&(k=j[0],h=h.replace(w,""));if(h==="hover"){a.push("mouseenter"+k,"mouseleave"+k);continue}l=h,K[h]?(a.push(K[h]+k),h=h+k):h=(K[h]||h)+k;if(c==="live")for(var p=0,q=n.length;p<q;p++)f.event.add(n[p],"live."+M(h,m),{data:d,selector:m,handler:e,origType:h,origHandler:e,preType:l});else n.unbind("live."+M(h,m),e)}return this}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0)}),function(){function u(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}if(i.nodeType===1){f||(i.sizcache=c,i.sizset=g);if(typeof b!="string"){if(i===b){j=!0;break}}else if(k.filter(b,[i]).length>0){j=i;break}}i=i[a]}d[g]=j}}}function t(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}i.nodeType===1&&!f&&(i.sizcache=c,i.sizset=g);if(i.nodeName.toLowerCase()===b){j=i;break}i=i[a]}d[g]=j}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d=0,e=Object.prototype.toString,g=!1,h=!0,i=/\\/g,j=/\W/;[0,0].sort(function(){h=!1;return 0});var k=function(b,d,f,g){f=f||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return f;var i,j,n,o,q,r,s,t,u=!0,w=k.isXML(d),x=[],y=b;do{a.exec(""),i=a.exec(y);if(i){y=i[3],x.push(i[1]);if(i[2]){o=i[3];break}}}while(i);if(x.length>1&&m.exec(b))if(x.length===2&&l.relative[x[0]])j=v(x[0]+x[1],d);else{j=l.relative[x[0]]?[d]:k(x.shift(),d);while(x.length)b=x.shift(),l.relative[b]&&(b+=x.shift()),j=v(b,j)}else{!g&&x.length>1&&d.nodeType===9&&!w&&l.match.ID.test(x[0])&&!l.match.ID.test(x[x.length-1])&&(q=k.find(x.shift(),d,w),d=q.expr?k.filter(q.expr,q.set)[0]:q.set[0]);if(d){q=g?{expr:x.pop(),set:p(g)}:k.find(x.pop(),x.length===1&&(x[0]==="~"||x[0]==="+")&&d.parentNode?d.parentNode:d,w),j=q.expr?k.filter(q.expr,q.set):q.set,x.length>0?n=p(j):u=!1;while(x.length)r=x.pop(),s=r,l.relative[r]?s=x.pop():r="",s==null&&(s=d),l.relative[r](n,s,w)}else n=x=[]}n||(n=j),n||k.error(r||b);if(e.call(n)==="[object Array]")if(!u)f.push.apply(f,n);else if(d&&d.nodeType===1)for(t=0;n[t]!=null;t++)n[t]&&(n[t]===!0||n[t].nodeType===1&&k.contains(d,n[t]))&&f.push(j[t]);else for(t=0;n[t]!=null;t++)n[t]&&n[t].nodeType===1&&f.push(j[t]);else p(n,f);o&&(k(o,h,f,g),k.uniqueSort(f));return f};k.uniqueSort=function(a){if(r){g=h,a.sort(r);if(g)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},k.matches=function(a,b){return k(a,null,null,b)},k.matchesSelector=function(a,b){return k(b,null,null,[a]).length>0},k.find=function(a,b,c){var d;if(!a)return[];for(var e=0,f=l.order.length;e<f;e++){var g,h=l.order[e];if(g=l.leftMatch[h].exec(a)){var j=g[1];g.splice(1,1);if(j.substr(j.length-1)!=="\\"){g[1]=(g[1]||"").replace(i,""),d=l.find[h](g,b,c);if(d!=null){a=a.replace(l.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},k.filter=function(a,c,d,e){var f,g,h=a,i=[],j=c,m=c&&c[0]&&k.isXML(c[0]);while(a&&c.length){for(var n in l.filter)if((f=l.leftMatch[n].exec(a))!=null&&f[2]){var o,p,q=l.filter[n],r=f[1];g=!1,f.splice(1,1);if(r.substr(r.length-1)==="\\")continue;j===i&&(i=[]);if(l.preFilter[n]){f=l.preFilter[n](f,j,d,i,e,m);if(!f)g=o=!0;else if(f===!0)continue}if(f)for(var s=0;(p=j[s])!=null;s++)if(p){o=q(p,f,s,j);var t=e^!!o;d&&o!=null?t?g=!0:j[s]=!1:t&&(i.push(p),g=!0)}if(o!==b){d||(j=i),a=a.replace(l.match[n],"");if(!g)return[];break}}if(a===h)if(g==null)k.error(a);else break;h=a}return j},k.error=function(a){throw"Syntax error, unrecognized expression: "+a};var l=k.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!j.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&k.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!j.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&k.filter(b,a,!0)}},"":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("parentNode",b,f,a,e,c)},"~":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("previousSibling",b,f,a,e,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(i,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(i,"")},TAG:function(a,b){return a[1].replace(i,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||k.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&k.error(a[0]);a[0]=d++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(i,"");!f&&l.attrMap[g]&&(a[1]=l.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(i,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=k(b[3],null,null,c);else{var g=k.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(l.match.POS.test(b[0])||l.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!k(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=l.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||k.getText([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}k.error(e)},CHILD:function(a,b){var c=b[1],d=a;switch(c){case"only":case"first":while(d=d.previousSibling)if(d.nodeType===1)return!1;if(c==="first")return!0;d=a;case"last":while(d=d.nextSibling)if(d.nodeType===1)return!1;return!0;case"nth":var e=b[2],f=b[3];if(e===1&&f===0)return!0;var g=b[0],h=a.parentNode;if(h&&(h.sizcache!==g||!a.nodeIndex)){var i=0;for(d=h.firstChild;d;d=d.nextSibling)d.nodeType===1&&(d.nodeIndex=++i);h.sizcache=g}var j=a.nodeIndex-f;return e===0?j===0:j%e===0&&j/e>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=l.attrHandle[c]?l.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=l.setFilters[e];if(f)return f(a,c,b,d)}}},m=l.match.POS,n=function(a,b){return"\\"+(b-0+1)};for(var o in l.match)l.match[o]=new RegExp(l.match[o].source+/(?![^\[]*\])(?![^\(]*\))/.source),l.leftMatch[o]=new RegExp(/(^(?:.|\r|\n)*?)/.source+l.match[o].source.replace(/\\(\d+)/g,n));var p=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(q){p=function(a,b){var c=0,d=b||[];if(e.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var f=a.length;c<f;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var r,s;c.documentElement.compareDocumentPosition?r=function(a,b){if(a===b){g=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(r=function(a,b){if(a===b){g=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],h=a.parentNode,i=b.parentNode,j=h;if(h===i)return s(a,b);if(!h)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return s(e[k],f[k]);return k===c?s(a,f[k],-1):s(e[k],b,1)},s=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),k.getText=function(a){var b="",c;for(var d=0;a[d];d++)c=a[d],c.nodeType===3||c.nodeType===4?b+=c.nodeValue:c.nodeType!==8&&(b+=k.getText(c.childNodes));return b},function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(l.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},l.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(l.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(l.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=k,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){k=function(b,e,f,g){e=e||c;if(!g&&!k.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return p(e.getElementsByTagName(b),f);if(h[2]&&l.find.CLASS&&e.getElementsByClassName)return p(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return p([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return p([],f);if(i.id===h[3])return p([i],f)}try{return p(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var m=e,n=e.getAttribute("id"),o=n||d,q=e.parentNode,r=/^\s*[+~]/.test(b);n?o=o.replace(/'/g,"\\$&"):e.setAttribute("id",o),r&&q&&(e=e.parentNode);try{if(!r||q)return p(e.querySelectorAll("[id='"+o+"'] "+b),f)}catch(s){}finally{n||m.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)k[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}k.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!k.isXML(a))try{if(e||!l.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return k(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;l.order.splice(1,0,"CLASS"),l.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?k.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?k.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:k.contains=function(){return!1},k.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var v=function(a,b){var c,d=[],e="",f=b.nodeType?[b]:b;while(c=l.match.PSEUDO.exec(a))e+=c[0],a=a.replace(l.match.PSEUDO,"");a=l.relative[a]?a+"*":a;for(var g=0,h=f.length;g<h;g++)k(a,f[g],d);return k.filter(e,d)};f.find=k,f.expr=k.selectors,f.expr[":"]=f.expr.filters,f.unique=k.uniqueSort,f.text=k.getText,f.isXMLDoc=k.isXML,f.contains=k.contains}();var N=/Until$/,O=/^(?:parents|prevUntil|prevAll)/,P=/,/,Q=/^.[^:#\[\.,]*$/,R=Array.prototype.slice,S=f.expr.match.POS,T={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(V(this,a,!1),"not",a)},filter:function(a){return this.pushStack(V(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h,i,j={},k=1;if(g&&a.length){for(d=0,e=a.length;d<e;d++)i=a[d],j[i]||(j[i]=S.test(i)?f(i,b||this.context):i);while(g&&g.ownerDocument&&g!==b){for(i in j)h=j[i],(h.jquery?h.index(g)>-1:f(g).is(h))&&c.push({selector:i,elem:g,level:k});g=g.parentNode,k++}}return c}var l=S.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(l?l.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(U(c[0])||U(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c),g=R.call(arguments);N.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!T[a]?f.unique(e):e,(this.length>1||P.test(d))&&O.test(a)&&(e=e.reverse());return this.pushStack(e,a,g.join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|object|embed|option|style)/i,bb=/checked\s*(?:[^=]|=\s*.checked.)/i,bc=/\/(java|ecma)script/i,bd=/^\s*<!(?:\[CDATA\[|\-\-)/,be={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]};be.optgroup=be.option,be.tbody=be.tfoot=be.colgroup=be.caption=be.thead,be.th=be.td,f.support.htmlSerialize||(be._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){f(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f(arguments[0]).toArray());return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!be[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bb.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bf(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bl)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i;b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof a[0]=="string"&&a[0].length<512&&i===c&&a[0].charAt(0)==="<"&&!ba.test(a[0])&&(f.support.checkClone||!bb.test(a[0]))&&(g=!0,h=f.fragments[a[0]],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean
-(a,i,e,d)),g&&(f.fragments[a[0]]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d=a.cloneNode(!0),e,g,h;if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bh(a,d),e=bi(a),g=bi(d);for(h=0;e[h];++h)g[h]&&bh(e[h],g[h])}if(b){bg(a,d);if(c){e=bi(a),g=bi(d);for(h=0;e[h];++h)bg(e[h],g[h])}}e=g=null;return d},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=be[l]||be._default,n=m[0],o=b.createElement("div");o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bk(k[i]);else bk(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||bc.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.expando,g=f.event.special,h=f.support.deleteExpando;for(var i=0,j;(j=a[i])!=null;i++){if(j.nodeName&&f.noData[j.nodeName.toLowerCase()])continue;c=j[f.expando];if(c){b=d[c]&&d[c][e];if(b&&b.events){for(var k in b.events)g[k]?f.event.remove(j,k):f.removeEvent(j,k,b.handle);b.handle&&(b.handle.elem=null)}h?delete j[f.expando]:j.removeAttribute&&j.removeAttribute(f.expando),delete d[c]}}}});var bm=/alpha\([^)]*\)/i,bn=/opacity=([^)]*)/,bo=/([A-Z]|^ms)/g,bp=/^-?\d+(?:px)?$/i,bq=/^-?\d/,br=/^([\-+])=([\-+.\de]+)/,bs={position:"absolute",visibility:"hidden",display:"block"},bt=["Left","Right"],bu=["Top","Bottom"],bv,bw,bx;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bv(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=br.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bv)return bv(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return by(a,b,d);f.swap(a,bs,function(){e=by(a,b,d)});return e}},set:function(a,b){if(!bp.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return bn.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNaN(b)?"":"alpha(opacity="+b*100+")",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bm,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bm.test(g)?g.replace(bm,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bv(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bw=function(a,c){var d,e,g;c=c.replace(bo,"-$1").toLowerCase();if(!(e=a.ownerDocument.defaultView))return b;if(g=e.getComputedStyle(a,null))d=g.getPropertyValue(c),d===""&&!f.contains(a.ownerDocument.documentElement,a)&&(d=f.style(a,c));return d}),c.documentElement.currentStyle&&(bx=function(a,b){var c,d=a.currentStyle&&a.currentStyle[b],e=a.runtimeStyle&&a.runtimeStyle[b],f=a.style;!bp.test(d)&&bq.test(d)&&(c=f.left,e&&(a.runtimeStyle.left=a.currentStyle.left),f.left=b==="fontSize"?"1em":d||0,d=f.pixelLeft+"px",f.left=c,e&&(a.runtimeStyle.left=e));return d===""?"auto":d}),bv=bw||bx,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bz=/%20/g,bA=/\[\]$/,bB=/\r?\n/g,bC=/#.*$/,bD=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bE=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bF=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bG=/^(?:GET|HEAD)$/,bH=/^\/\//,bI=/\?/,bJ=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bK=/^(?:select|textarea)/i,bL=/\s+/,bM=/([?&])_=[^&]*/,bN=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bO=f.fn.load,bP={},bQ={},bR,bS,bT=["*/"]+["*"];try{bR=e.href}catch(bU){bR=c.createElement("a"),bR.href="",bR=bR.href}bS=bN.exec(bR.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bO)return bO.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bJ,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bK.test(this.nodeName)||bE.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bB,"\r\n")}}):{name:b.name,value:c.replace(bB,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.bind(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?bX(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),bX(a,b);return a},ajaxSettings:{url:bR,isLocal:bF.test(bS[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bT},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bV(bP),ajaxTransport:bV(bQ),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?bZ(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=b$(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.resolveWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f._Deferred(),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bD.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.done,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bC,"").replace(bH,bS[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bL),d.crossDomain==null&&(r=bN.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bS[1]&&r[2]==bS[2]&&(r[3]||(r[1]==="http:"?80:443))==(bS[3]||(bS[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),bW(bP,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bG.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bI.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bM,"$1_="+x);d.url=y+(y===d.url?(bI.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bT+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=bW(bQ,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){s<2?w(-1,z):f.error(z)}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)bY(g,a[g],c,e);return d.join("&").replace(bz,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var b_=f.now(),ca=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+b_++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ca.test(b.url)||e&&ca.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ca,l),b.url===j&&(e&&(k=k.replace(ca,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cb=a.ActiveXObject?function(){for(var a in cd)cd[a](0,1)}:!1,cc=0,cd;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ce()||cf()}:ce,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cb&&delete cd[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cc,cb&&(cd||(cd={},f(a).unload(cb)),cd[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var cg={},ch,ci,cj=/^(?:toggle|show|hide)$/,ck=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cl,cm=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cn;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cq("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cr(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cq("hide",3),a,b,c);for(var d=0,e=this.length;d<e;d++)if(this[d].style){var g=f.css(this[d],"display");g!=="none"&&!f._data(this[d],"olddisplay")&&f._data(this[d],"olddisplay",g)}for(d=0;d<e;d++)this[d].style&&(this[d].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cq("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return this[e.queue===!1?"each":"queue"](function(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(f.support.inlineBlockNeedsLayout?(j=cr(this.nodeName),j==="inline"?this.style.display="inline-block":(this.style.display="inline",this.style.zoom=1)):this.style.display="inline-block"))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)k=new f.fx(this,b,i),h=a[i],cj.test(h)?k[h==="toggle"?d?"show":"hide":h]():(l=ck.exec(h),m=k.cur(),l?(n=parseFloat(l[2]),o=l[3]||(f.cssNumber[i]?"":"px"),o!=="px"&&(f.style(this,i,(n||1)+o),m=(n||1)/k.cur()*m,f.style(this,i,m+o)),l[1]&&(n=(l[1]==="-="?-1:1)*n+m),k.custom(m,n,o)):k.custom(m,h,""));return!0})},stop:function(a,b){a&&this.queue([]),this.each(function(){var a=f.timers,c=a.length;b||f._unmark(!0,this);while(c--)a[c].elem===this&&(b&&a[c](!0),a.splice(c,1))}),b||this.dequeue();return this}}),f.each({slideDown:cq("show",1),slideUp:cq("hide",1),slideToggle:cq("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default,d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue!==!1?f.dequeue(this):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,b,c){function g(a){return d.step(a)}var d=this,e=f.fx;this.startTime=cn||co(),this.start=a,this.end=b,this.unit=c||this.unit||(f.cssNumber[this.prop]?"":"px"),this.now=this.start,this.pos=this.state=0,g.elem=this.elem,g()&&f.timers.push(g)&&!cl&&(cl=setInterval(e.tick,e.interval))},show:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.show=!0,this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b=cn||co(),c=!0,d=this.elem,e=this.options,g,h;if(a||b>=e.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),e.animatedProperties[this.prop]=!0;for(g in e.animatedProperties)e.animatedProperties[g]!==!0&&(c=!1);if(c){e.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){d.style["overflow"+b]=e.overflow[a]}),e.hide&&f(d).hide();if(e.hide||e.show)for(var i in e.animatedProperties)f.style(d,i,e.orig[i]);e.complete.call(d)}return!1}e.duration==Infinity?this.now=b:(h=b-this.startTime,this.state=h/e.duration,this.pos=f.easing[e.animatedProperties[this.prop]](this.state,h,0,1,e.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){for(var a=f.timers,b=0;b<a.length;++b)a[b]()||a.splice(b--,1);a.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cl),cl=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit:a.elem[a.prop]=a.now}}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cs=/^t(?:able|d|h)$/i,ct=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cu(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);f.offset.initialize();var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.offset.supportsFixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.offset.doesNotAddBorder&&(!f.offset.doesAddBorderForTableAndCells||!cs.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.offset.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.offset.supportsFixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={initialize:function(){var a=c.body,b=c.createElement("div"),d,e,g,h,i=parseFloat(f.css(a,"marginTop"))||0,j="<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>";f.extend(b.style,{position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"}),b.innerHTML=j,a.insertBefore(b,a.firstChild),d=b.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,this.doesNotAddBorder=e.offsetTop!==5,this.doesAddBorderForTableAndCells=h.offsetTop===5,e.style.position="fixed",e.style.top="20px",this.supportsFixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",this.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,this.doesNotIncludeMarginInBodyOffset=a.offsetTop!==i,a.removeChild(b),f.offset.initialize=f.noop},bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.offset.initialize(),f.offset.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=ct.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!ct.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cu(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cu(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a&&a.style?parseFloat(f.css(a,d,"padding")):null},f.fn["outer"+c]=function(a){var b=this[0];return b&&b.style?parseFloat(f.css(b,d,a?"margin":"border")):null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNaN(j)?i:j}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f})(window);
\ No newline at end of file
--- /dev/null
+/*!
+ * jQuery JavaScript Library v1.7.1
+ * http://jquery.com/
+ *
+ * Copyright 2011, John Resig
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * Includes Sizzle.js
+ * http://sizzlejs.com/
+ * Copyright 2011, The Dojo Foundation
+ * Released under the MIT, BSD, and GPL Licenses.
+ *
+ * Date: Mon Nov 21 21:11:03 2011 -0500
+ */
+(function( window, undefined ) {
+
+// Use the correct document accordingly with window argument (sandbox)
+var document = window.document,
+ navigator = window.navigator,
+ location = window.location;
+var jQuery = (function() {
+
+// Define a local copy of jQuery
+var jQuery = function( selector, context ) {
+ // The jQuery object is actually just the init constructor 'enhanced'
+ return new jQuery.fn.init( selector, context, rootjQuery );
+ },
+
+ // Map over jQuery in case of overwrite
+ _jQuery = window.jQuery,
+
+ // Map over the $ in case of overwrite
+ _$ = window.$,
+
+ // A central reference to the root jQuery(document)
+ rootjQuery,
+
+ // A simple way to check for HTML strings or ID strings
+ // Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
+ quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,
+
+ // Check if a string has a non-whitespace character in it
+ rnotwhite = /\S/,
+
+ // Used for trimming whitespace
+ trimLeft = /^\s+/,
+ trimRight = /\s+$/,
+
+ // Match a standalone tag
+ rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,
+
+ // JSON RegExp
+ rvalidchars = /^[\],:{}\s]*$/,
+ rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,
+ rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
+ rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
+
+ // Useragent RegExp
+ rwebkit = /(webkit)[ \/]([\w.]+)/,
+ ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
+ rmsie = /(msie) ([\w.]+)/,
+ rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
+
+ // Matches dashed string for camelizing
+ rdashAlpha = /-([a-z]|[0-9])/ig,
+ rmsPrefix = /^-ms-/,
+
+ // Used by jQuery.camelCase as callback to replace()
+ fcamelCase = function( all, letter ) {
+ return ( letter + "" ).toUpperCase();
+ },
+
+ // Keep a UserAgent string for use with jQuery.browser
+ userAgent = navigator.userAgent,
+
+ // For matching the engine and version of the browser
+ browserMatch,
+
+ // The deferred used on DOM ready
+ readyList,
+
+ // The ready event handler
+ DOMContentLoaded,
+
+ // Save a reference to some core methods
+ toString = Object.prototype.toString,
+ hasOwn = Object.prototype.hasOwnProperty,
+ push = Array.prototype.push,
+ slice = Array.prototype.slice,
+ trim = String.prototype.trim,
+ indexOf = Array.prototype.indexOf,
+
+ // [[Class]] -> type pairs
+ class2type = {};
+
+jQuery.fn = jQuery.prototype = {
+ constructor: jQuery,
+ init: function( selector, context, rootjQuery ) {
+ var match, elem, ret, doc;
+
+ // Handle $(""), $(null), or $(undefined)
+ if ( !selector ) {
+ return this;
+ }
+
+ // Handle $(DOMElement)
+ if ( selector.nodeType ) {
+ this.context = this[0] = selector;
+ this.length = 1;
+ return this;
+ }
+
+ // The body element only exists once, optimize finding it
+ if ( selector === "body" && !context && document.body ) {
+ this.context = document;
+ this[0] = document.body;
+ this.selector = selector;
+ this.length = 1;
+ return this;
+ }
+
+ // Handle HTML strings
+ if ( typeof selector === "string" ) {
+ // Are we dealing with HTML string or an ID?
+ if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
+ // Assume that strings that start and end with <> are HTML and skip the regex check
+ match = [ null, selector, null ];
+
+ } else {
+ match = quickExpr.exec( selector );
+ }
+
+ // Verify a match, and that no context was specified for #id
+ if ( match && (match[1] || !context) ) {
+
+ // HANDLE: $(html) -> $(array)
+ if ( match[1] ) {
+ context = context instanceof jQuery ? context[0] : context;
+ doc = ( context ? context.ownerDocument || context : document );
+
+ // If a single string is passed in and it's a single tag
+ // just do a createElement and skip the rest
+ ret = rsingleTag.exec( selector );
+
+ if ( ret ) {
+ if ( jQuery.isPlainObject( context ) ) {
+ selector = [ document.createElement( ret[1] ) ];
+ jQuery.fn.attr.call( selector, context, true );
+
+ } else {
+ selector = [ doc.createElement( ret[1] ) ];
+ }
+
+ } else {
+ ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
+ selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
+ }
+
+ return jQuery.merge( this, selector );
+
+ // HANDLE: $("#id")
+ } else {
+ elem = document.getElementById( match[2] );
+
+ // Check parentNode to catch when Blackberry 4.6 returns
+ // nodes that are no longer in the document #6963
+ if ( elem && elem.parentNode ) {
+ // Handle the case where IE and Opera return items
+ // by name instead of ID
+ if ( elem.id !== match[2] ) {
+ return rootjQuery.find( selector );
+ }
+
+ // Otherwise, we inject the element directly into the jQuery object
+ this.length = 1;
+ this[0] = elem;
+ }
+
+ this.context = document;
+ this.selector = selector;
+ return this;
+ }
+
+ // HANDLE: $(expr, $(...))
+ } else if ( !context || context.jquery ) {
+ return ( context || rootjQuery ).find( selector );
+
+ // HANDLE: $(expr, context)
+ // (which is just equivalent to: $(context).find(expr)
+ } else {
+ return this.constructor( context ).find( selector );
+ }
+
+ // HANDLE: $(function)
+ // Shortcut for document ready
+ } else if ( jQuery.isFunction( selector ) ) {
+ return rootjQuery.ready( selector );
+ }
+
+ if ( selector.selector !== undefined ) {
+ this.selector = selector.selector;
+ this.context = selector.context;
+ }
+
+ return jQuery.makeArray( selector, this );
+ },
+
+ // Start with an empty selector
+ selector: "",
+
+ // The current version of jQuery being used
+ jquery: "1.7.1",
+
+ // The default length of a jQuery object is 0
+ length: 0,
+
+ // The number of elements contained in the matched element set
+ size: function() {
+ return this.length;
+ },
+
+ toArray: function() {
+ return slice.call( this, 0 );
+ },
+
+ // Get the Nth element in the matched element set OR
+ // Get the whole matched element set as a clean array
+ get: function( num ) {
+ return num == null ?
+
+ // Return a 'clean' array
+ this.toArray() :
+
+ // Return just the object
+ ( num < 0 ? this[ this.length + num ] : this[ num ] );
+ },
+
+ // Take an array of elements and push it onto the stack
+ // (returning the new matched element set)
+ pushStack: function( elems, name, selector ) {
+ // Build a new jQuery matched element set
+ var ret = this.constructor();
+
+ if ( jQuery.isArray( elems ) ) {
+ push.apply( ret, elems );
+
+ } else {
+ jQuery.merge( ret, elems );
+ }
+
+ // Add the old object onto the stack (as a reference)
+ ret.prevObject = this;
+
+ ret.context = this.context;
+
+ if ( name === "find" ) {
+ ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;
+ } else if ( name ) {
+ ret.selector = this.selector + "." + name + "(" + selector + ")";
+ }
+
+ // Return the newly-formed element set
+ return ret;
+ },
+
+ // Execute a callback for every element in the matched set.
+ // (You can seed the arguments with an array of args, but this is
+ // only used internally.)
+ each: function( callback, args ) {
+ return jQuery.each( this, callback, args );
+ },
+
+ ready: function( fn ) {
+ // Attach the listeners
+ jQuery.bindReady();
+
+ // Add the callback
+ readyList.add( fn );
+
+ return this;
+ },
+
+ eq: function( i ) {
+ i = +i;
+ return i === -1 ?
+ this.slice( i ) :
+ this.slice( i, i + 1 );
+ },
+
+ first: function() {
+ return this.eq( 0 );
+ },
+
+ last: function() {
+ return this.eq( -1 );
+ },
+
+ slice: function() {
+ return this.pushStack( slice.apply( this, arguments ),
+ "slice", slice.call(arguments).join(",") );
+ },
+
+ map: function( callback ) {
+ return this.pushStack( jQuery.map(this, function( elem, i ) {
+ return callback.call( elem, i, elem );
+ }));
+ },
+
+ end: function() {
+ return this.prevObject || this.constructor(null);
+ },
+
+ // For internal use only.
+ // Behaves like an Array's method, not like a jQuery method.
+ push: push,
+ sort: [].sort,
+ splice: [].splice
+};
+
+// Give the init function the jQuery prototype for later instantiation
+jQuery.fn.init.prototype = jQuery.fn;
+
+jQuery.extend = jQuery.fn.extend = function() {
+ var options, name, src, copy, copyIsArray, clone,
+ target = arguments[0] || {},
+ i = 1,
+ length = arguments.length,
+ deep = false;
+
+ // Handle a deep copy situation
+ if ( typeof target === "boolean" ) {
+ deep = target;
+ target = arguments[1] || {};
+ // skip the boolean and the target
+ i = 2;
+ }
+
+ // Handle case when target is a string or something (possible in deep copy)
+ if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
+ target = {};
+ }
+
+ // extend jQuery itself if only one argument is passed
+ if ( length === i ) {
+ target = this;
+ --i;
+ }
+
+ for ( ; i < length; i++ ) {
+ // Only deal with non-null/undefined values
+ if ( (options = arguments[ i ]) != null ) {
+ // Extend the base object
+ for ( name in options ) {
+ src = target[ name ];
+ copy = options[ name ];
+
+ // Prevent never-ending loop
+ if ( target === copy ) {
+ continue;
+ }
+
+ // Recurse if we're merging plain objects or arrays
+ if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
+ if ( copyIsArray ) {
+ copyIsArray = false;
+ clone = src && jQuery.isArray(src) ? src : [];
+
+ } else {
+ clone = src && jQuery.isPlainObject(src) ? src : {};
+ }
+
+ // Never move original objects, clone them
+ target[ name ] = jQuery.extend( deep, clone, copy );
+
+ // Don't bring in undefined values
+ } else if ( copy !== undefined ) {
+ target[ name ] = copy;
+ }
+ }
+ }
+ }
+
+ // Return the modified object
+ return target;
+};
+
+jQuery.extend({
+ noConflict: function( deep ) {
+ if ( window.$ === jQuery ) {
+ window.$ = _$;
+ }
+
+ if ( deep && window.jQuery === jQuery ) {
+ window.jQuery = _jQuery;
+ }
+
+ return jQuery;
+ },
+
+ // Is the DOM ready to be used? Set to true once it occurs.
+ isReady: false,
+
+ // A counter to track how many items to wait for before
+ // the ready event fires. See #6781
+ readyWait: 1,
+
+ // Hold (or release) the ready event
+ holdReady: function( hold ) {
+ if ( hold ) {
+ jQuery.readyWait++;
+ } else {
+ jQuery.ready( true );
+ }
+ },
+
+ // Handle when the DOM is ready
+ ready: function( wait ) {
+ // Either a released hold or an DOMready/load event and not yet ready
+ if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {
+ // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
+ if ( !document.body ) {
+ return setTimeout( jQuery.ready, 1 );
+ }
+
+ // Remember that the DOM is ready
+ jQuery.isReady = true;
+
+ // If a normal DOM Ready event fired, decrement, and wait if need be
+ if ( wait !== true && --jQuery.readyWait > 0 ) {
+ return;
+ }
+
+ // If there are functions bound, to execute
+ readyList.fireWith( document, [ jQuery ] );
+
+ // Trigger any bound ready events
+ if ( jQuery.fn.trigger ) {
+ jQuery( document ).trigger( "ready" ).off( "ready" );
+ }
+ }
+ },
+
+ bindReady: function() {
+ if ( readyList ) {
+ return;
+ }
+
+ readyList = jQuery.Callbacks( "once memory" );
+
+ // Catch cases where $(document).ready() is called after the
+ // browser event has already occurred.
+ if ( document.readyState === "complete" ) {
+ // Handle it asynchronously to allow scripts the opportunity to delay ready
+ return setTimeout( jQuery.ready, 1 );
+ }
+
+ // Mozilla, Opera and webkit nightlies currently support this event
+ if ( document.addEventListener ) {
+ // Use the handy event callback
+ document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
+
+ // A fallback to window.onload, that will always work
+ window.addEventListener( "load", jQuery.ready, false );
+
+ // If IE event model is used
+ } else if ( document.attachEvent ) {
+ // ensure firing before onload,
+ // maybe late but safe also for iframes
+ document.attachEvent( "onreadystatechange", DOMContentLoaded );
+
+ // A fallback to window.onload, that will always work
+ window.attachEvent( "onload", jQuery.ready );
+
+ // If IE and not a frame
+ // continually check to see if the document is ready
+ var toplevel = false;
+
+ try {
+ toplevel = window.frameElement == null;
+ } catch(e) {}
+
+ if ( document.documentElement.doScroll && toplevel ) {
+ doScrollCheck();
+ }
+ }
+ },
+
+ // See test/unit/core.js for details concerning isFunction.
+ // Since version 1.3, DOM methods and functions like alert
+ // aren't supported. They return false on IE (#2968).
+ isFunction: function( obj ) {
+ return jQuery.type(obj) === "function";
+ },
+
+ isArray: Array.isArray || function( obj ) {
+ return jQuery.type(obj) === "array";
+ },
+
+ // A crude way of determining if an object is a window
+ isWindow: function( obj ) {
+ return obj && typeof obj === "object" && "setInterval" in obj;
+ },
+
+ isNumeric: function( obj ) {
+ return !isNaN( parseFloat(obj) ) && isFinite( obj );
+ },
+
+ type: function( obj ) {
+ return obj == null ?
+ String( obj ) :
+ class2type[ toString.call(obj) ] || "object";
+ },
+
+ isPlainObject: function( obj ) {
+ // Must be an Object.
+ // Because of IE, we also have to check the presence of the constructor property.
+ // Make sure that DOM nodes and window objects don't pass through, as well
+ if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
+ return false;
+ }
+
+ try {
+ // Not own constructor property must be Object
+ if ( obj.constructor &&
+ !hasOwn.call(obj, "constructor") &&
+ !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
+ return false;
+ }
+ } catch ( e ) {
+ // IE8,9 Will throw exceptions on certain host objects #9897
+ return false;
+ }
+
+ // Own properties are enumerated firstly, so to speed up,
+ // if last one is own, then all properties are own.
+
+ var key;
+ for ( key in obj ) {}
+
+ return key === undefined || hasOwn.call( obj, key );
+ },
+
+ isEmptyObject: function( obj ) {
+ for ( var name in obj ) {
+ return false;
+ }
+ return true;
+ },
+
+ error: function( msg ) {
+ throw new Error( msg );
+ },
+
+ parseJSON: function( data ) {
+ if ( typeof data !== "string" || !data ) {
+ return null;
+ }
+
+ // Make sure leading/trailing whitespace is removed (IE can't handle it)
+ data = jQuery.trim( data );
+
+ // Attempt to parse using the native JSON parser first
+ if ( window.JSON && window.JSON.parse ) {
+ return window.JSON.parse( data );
+ }
+
+ // Make sure the incoming data is actual JSON
+ // Logic borrowed from http://json.org/json2.js
+ if ( rvalidchars.test( data.replace( rvalidescape, "@" )
+ .replace( rvalidtokens, "]" )
+ .replace( rvalidbraces, "")) ) {
+
+ return ( new Function( "return " + data ) )();
+
+ }
+ jQuery.error( "Invalid JSON: " + data );
+ },
+
+ // Cross-browser xml parsing
+ parseXML: function( data ) {
+ var xml, tmp;
+ try {
+ if ( window.DOMParser ) { // Standard
+ tmp = new DOMParser();
+ xml = tmp.parseFromString( data , "text/xml" );
+ } else { // IE
+ xml = new ActiveXObject( "Microsoft.XMLDOM" );
+ xml.async = "false";
+ xml.loadXML( data );
+ }
+ } catch( e ) {
+ xml = undefined;
+ }
+ if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
+ jQuery.error( "Invalid XML: " + data );
+ }
+ return xml;
+ },
+
+ noop: function() {},
+
+ // Evaluates a script in a global context
+ // Workarounds based on findings by Jim Driscoll
+ // http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
+ globalEval: function( data ) {
+ if ( data && rnotwhite.test( data ) ) {
+ // We use execScript on Internet Explorer
+ // We use an anonymous function so that context is window
+ // rather than jQuery in Firefox
+ ( window.execScript || function( data ) {
+ window[ "eval" ].call( window, data );
+ } )( data );
+ }
+ },
+
+ // Convert dashed to camelCase; used by the css and data modules
+ // Microsoft forgot to hump their vendor prefix (#9572)
+ camelCase: function( string ) {
+ return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
+ },
+
+ nodeName: function( elem, name ) {
+ return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
+ },
+
+ // args is for internal usage only
+ each: function( object, callback, args ) {
+ var name, i = 0,
+ length = object.length,
+ isObj = length === undefined || jQuery.isFunction( object );
+
+ if ( args ) {
+ if ( isObj ) {
+ for ( name in object ) {
+ if ( callback.apply( object[ name ], args ) === false ) {
+ break;
+ }
+ }
+ } else {
+ for ( ; i < length; ) {
+ if ( callback.apply( object[ i++ ], args ) === false ) {
+ break;
+ }
+ }
+ }
+
+ // A special, fast, case for the most common use of each
+ } else {
+ if ( isObj ) {
+ for ( name in object ) {
+ if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
+ break;
+ }
+ }
+ } else {
+ for ( ; i < length; ) {
+ if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
+ break;
+ }
+ }
+ }
+ }
+
+ return object;
+ },
+
+ // Use native String.trim function wherever possible
+ trim: trim ?
+ function( text ) {
+ return text == null ?
+ "" :
+ trim.call( text );
+ } :
+
+ // Otherwise use our own trimming functionality
+ function( text ) {
+ return text == null ?
+ "" :
+ text.toString().replace( trimLeft, "" ).replace( trimRight, "" );
+ },
+
+ // results is for internal usage only
+ makeArray: function( array, results ) {
+ var ret = results || [];
+
+ if ( array != null ) {
+ // The window, strings (and functions) also have 'length'
+ // Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930
+ var type = jQuery.type( array );
+
+ if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) {
+ push.call( ret, array );
+ } else {
+ jQuery.merge( ret, array );
+ }
+ }
+
+ return ret;
+ },
+
+ inArray: function( elem, array, i ) {
+ var len;
+
+ if ( array ) {
+ if ( indexOf ) {
+ return indexOf.call( array, elem, i );
+ }
+
+ len = array.length;
+ i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
+
+ for ( ; i < len; i++ ) {
+ // Skip accessing in sparse arrays
+ if ( i in array && array[ i ] === elem ) {
+ return i;
+ }
+ }
+ }
+
+ return -1;
+ },
+
+ merge: function( first, second ) {
+ var i = first.length,
+ j = 0;
+
+ if ( typeof second.length === "number" ) {
+ for ( var l = second.length; j < l; j++ ) {
+ first[ i++ ] = second[ j ];
+ }
+
+ } else {
+ while ( second[j] !== undefined ) {
+ first[ i++ ] = second[ j++ ];
+ }
+ }
+
+ first.length = i;
+
+ return first;
+ },
+
+ grep: function( elems, callback, inv ) {
+ var ret = [], retVal;
+ inv = !!inv;
+
+ // Go through the array, only saving the items
+ // that pass the validator function
+ for ( var i = 0, length = elems.length; i < length; i++ ) {
+ retVal = !!callback( elems[ i ], i );
+ if ( inv !== retVal ) {
+ ret.push( elems[ i ] );
+ }
+ }
+
+ return ret;
+ },
+
+ // arg is for internal usage only
+ map: function( elems, callback, arg ) {
+ var value, key, ret = [],
+ i = 0,
+ length = elems.length,
+ // jquery objects are treated as arrays
+ isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ;
+
+ // Go through the array, translating each of the items to their
+ if ( isArray ) {
+ for ( ; i < length; i++ ) {
+ value = callback( elems[ i ], i, arg );
+
+ if ( value != null ) {
+ ret[ ret.length ] = value;
+ }
+ }
+
+ // Go through every key on the object,
+ } else {
+ for ( key in elems ) {
+ value = callback( elems[ key ], key, arg );
+
+ if ( value != null ) {
+ ret[ ret.length ] = value;
+ }
+ }
+ }
+
+ // Flatten any nested arrays
+ return ret.concat.apply( [], ret );
+ },
+
+ // A global GUID counter for objects
+ guid: 1,
+
+ // Bind a function to a context, optionally partially applying any
+ // arguments.
+ proxy: function( fn, context ) {
+ if ( typeof context === "string" ) {
+ var tmp = fn[ context ];
+ context = fn;
+ fn = tmp;
+ }
+
+ // Quick check to determine if target is callable, in the spec
+ // this throws a TypeError, but we will just return undefined.
+ if ( !jQuery.isFunction( fn ) ) {
+ return undefined;
+ }
+
+ // Simulated bind
+ var args = slice.call( arguments, 2 ),
+ proxy = function() {
+ return fn.apply( context, args.concat( slice.call( arguments ) ) );
+ };
+
+ // Set the guid of unique handler to the same of original handler, so it can be removed
+ proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++;
+
+ return proxy;
+ },
+
+ // Mutifunctional method to get and set values to a collection
+ // The value/s can optionally be executed if it's a function
+ access: function( elems, key, value, exec, fn, pass ) {
+ var length = elems.length;
+
+ // Setting many attributes
+ if ( typeof key === "object" ) {
+ for ( var k in key ) {
+ jQuery.access( elems, k, key[k], exec, fn, value );
+ }
+ return elems;
+ }
+
+ // Setting one attribute
+ if ( value !== undefined ) {
+ // Optionally, function values get executed if exec is true
+ exec = !pass && exec && jQuery.isFunction(value);
+
+ for ( var i = 0; i < length; i++ ) {
+ fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
+ }
+
+ return elems;
+ }
+
+ // Getting an attribute
+ return length ? fn( elems[0], key ) : undefined;
+ },
+
+ now: function() {
+ return ( new Date() ).getTime();
+ },
+
+ // Use of jQuery.browser is frowned upon.
+ // More details: http://docs.jquery.com/Utilities/jQuery.browser
+ uaMatch: function( ua ) {
+ ua = ua.toLowerCase();
+
+ var match = rwebkit.exec( ua ) ||
+ ropera.exec( ua ) ||
+ rmsie.exec( ua ) ||
+ ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) ||
+ [];
+
+ return { browser: match[1] || "", version: match[2] || "0" };
+ },
+
+ sub: function() {
+ function jQuerySub( selector, context ) {
+ return new jQuerySub.fn.init( selector, context );
+ }
+ jQuery.extend( true, jQuerySub, this );
+ jQuerySub.superclass = this;
+ jQuerySub.fn = jQuerySub.prototype = this();
+ jQuerySub.fn.constructor = jQuerySub;
+ jQuerySub.sub = this.sub;
+ jQuerySub.fn.init = function init( selector, context ) {
+ if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) {
+ context = jQuerySub( context );
+ }
+
+ return jQuery.fn.init.call( this, selector, context, rootjQuerySub );
+ };
+ jQuerySub.fn.init.prototype = jQuerySub.fn;
+ var rootjQuerySub = jQuerySub(document);
+ return jQuerySub;
+ },
+
+ browser: {}
+});
+
+// Populate the class2type map
+jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) {
+ class2type[ "[object " + name + "]" ] = name.toLowerCase();
+});
+
+browserMatch = jQuery.uaMatch( userAgent );
+if ( browserMatch.browser ) {
+ jQuery.browser[ browserMatch.browser ] = true;
+ jQuery.browser.version = browserMatch.version;
+}
+
+// Deprecated, use jQuery.browser.webkit instead
+if ( jQuery.browser.webkit ) {
+ jQuery.browser.safari = true;
+}
+
+// IE doesn't match non-breaking spaces with \s
+if ( rnotwhite.test( "\xA0" ) ) {
+ trimLeft = /^[\s\xA0]+/;
+ trimRight = /[\s\xA0]+$/;
+}
+
+// All jQuery objects should point back to these
+rootjQuery = jQuery(document);
+
+// Cleanup functions for the document ready method
+if ( document.addEventListener ) {
+ DOMContentLoaded = function() {
+ document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
+ jQuery.ready();
+ };
+
+} else if ( document.attachEvent ) {
+ DOMContentLoaded = function() {
+ // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
+ if ( document.readyState === "complete" ) {
+ document.detachEvent( "onreadystatechange", DOMContentLoaded );
+ jQuery.ready();
+ }
+ };
+}
+
+// The DOM ready check for Internet Explorer
+function doScrollCheck() {
+ if ( jQuery.isReady ) {
+ return;
+ }
+
+ try {
+ // If IE is used, use the trick by Diego Perini
+ // http://javascript.nwbox.com/IEContentLoaded/
+ document.documentElement.doScroll("left");
+ } catch(e) {
+ setTimeout( doScrollCheck, 1 );
+ return;
+ }
+
+ // and execute any waiting functions
+ jQuery.ready();
+}
+
+return jQuery;
+
+})();
+
+
+// String to Object flags format cache
+var flagsCache = {};
+
+// Convert String-formatted flags into Object-formatted ones and store in cache
+function createFlags( flags ) {
+ var object = flagsCache[ flags ] = {},
+ i, length;
+ flags = flags.split( /\s+/ );
+ for ( i = 0, length = flags.length; i < length; i++ ) {
+ object[ flags[i] ] = true;
+ }
+ return object;
+}
+
+/*
+ * Create a callback list using the following parameters:
+ *
+ * flags: an optional list of space-separated flags that will change how
+ * the callback list behaves
+ *
+ * By default a callback list will act like an event callback list and can be
+ * "fired" multiple times.
+ *
+ * Possible flags:
+ *
+ * once: will ensure the callback list can only be fired once (like a Deferred)
+ *
+ * memory: will keep track of previous values and will call any callback added
+ * after the list has been fired right away with the latest "memorized"
+ * values (like a Deferred)
+ *
+ * unique: will ensure a callback can only be added once (no duplicate in the list)
+ *
+ * stopOnFalse: interrupt callings when a callback returns false
+ *
+ */
+jQuery.Callbacks = function( flags ) {
+
+ // Convert flags from String-formatted to Object-formatted
+ // (we check in cache first)
+ flags = flags ? ( flagsCache[ flags ] || createFlags( flags ) ) : {};
+
+ var // Actual callback list
+ list = [],
+ // Stack of fire calls for repeatable lists
+ stack = [],
+ // Last fire value (for non-forgettable lists)
+ memory,
+ // Flag to know if list is currently firing
+ firing,
+ // First callback to fire (used internally by add and fireWith)
+ firingStart,
+ // End of the loop when firing
+ firingLength,
+ // Index of currently firing callback (modified by remove if needed)
+ firingIndex,
+ // Add one or several callbacks to the list
+ add = function( args ) {
+ var i,
+ length,
+ elem,
+ type,
+ actual;
+ for ( i = 0, length = args.length; i < length; i++ ) {
+ elem = args[ i ];
+ type = jQuery.type( elem );
+ if ( type === "array" ) {
+ // Inspect recursively
+ add( elem );
+ } else if ( type === "function" ) {
+ // Add if not in unique mode and callback is not in
+ if ( !flags.unique || !self.has( elem ) ) {
+ list.push( elem );
+ }
+ }
+ }
+ },
+ // Fire callbacks
+ fire = function( context, args ) {
+ args = args || [];
+ memory = !flags.memory || [ context, args ];
+ firing = true;
+ firingIndex = firingStart || 0;
+ firingStart = 0;
+ firingLength = list.length;
+ for ( ; list && firingIndex < firingLength; firingIndex++ ) {
+ if ( list[ firingIndex ].apply( context, args ) === false && flags.stopOnFalse ) {
+ memory = true; // Mark as halted
+ break;
+ }
+ }
+ firing = false;
+ if ( list ) {
+ if ( !flags.once ) {
+ if ( stack && stack.length ) {
+ memory = stack.shift();
+ self.fireWith( memory[ 0 ], memory[ 1 ] );
+ }
+ } else if ( memory === true ) {
+ self.disable();
+ } else {
+ list = [];
+ }
+ }
+ },
+ // Actual Callbacks object
+ self = {
+ // Add a callback or a collection of callbacks to the list
+ add: function() {
+ if ( list ) {
+ var length = list.length;
+ add( arguments );
+ // Do we need to add the callbacks to the
+ // current firing batch?
+ if ( firing ) {
+ firingLength = list.length;
+ // With memory, if we're not firing then
+ // we should call right away, unless previous
+ // firing was halted (stopOnFalse)
+ } else if ( memory && memory !== true ) {
+ firingStart = length;
+ fire( memory[ 0 ], memory[ 1 ] );
+ }
+ }
+ return this;
+ },
+ // Remove a callback from the list
+ remove: function() {
+ if ( list ) {
+ var args = arguments,
+ argIndex = 0,
+ argLength = args.length;
+ for ( ; argIndex < argLength ; argIndex++ ) {
+ for ( var i = 0; i < list.length; i++ ) {
+ if ( args[ argIndex ] === list[ i ] ) {
+ // Handle firingIndex and firingLength
+ if ( firing ) {
+ if ( i <= firingLength ) {
+ firingLength--;
+ if ( i <= firingIndex ) {
+ firingIndex--;
+ }
+ }
+ }
+ // Remove the element
+ list.splice( i--, 1 );
+ // If we have some unicity property then
+ // we only need to do this once
+ if ( flags.unique ) {
+ break;
+ }
+ }
+ }
+ }
+ }
+ return this;
+ },
+ // Control if a given callback is in the list
+ has: function( fn ) {
+ if ( list ) {
+ var i = 0,
+ length = list.length;
+ for ( ; i < length; i++ ) {
+ if ( fn === list[ i ] ) {
+ return true;
+ }
+ }
+ }
+ return false;
+ },
+ // Remove all callbacks from the list
+ empty: function() {
+ list = [];
+ return this;
+ },
+ // Have the list do nothing anymore
+ disable: function() {
+ list = stack = memory = undefined;
+ return this;
+ },
+ // Is it disabled?
+ disabled: function() {
+ return !list;
+ },
+ // Lock the list in its current state
+ lock: function() {
+ stack = undefined;
+ if ( !memory || memory === true ) {
+ self.disable();
+ }
+ return this;
+ },
+ // Is it locked?
+ locked: function() {
+ return !stack;
+ },
+ // Call all callbacks with the given context and arguments
+ fireWith: function( context, args ) {
+ if ( stack ) {
+ if ( firing ) {
+ if ( !flags.once ) {
+ stack.push( [ context, args ] );
+ }
+ } else if ( !( flags.once && memory ) ) {
+ fire( context, args );
+ }
+ }
+ return this;
+ },
+ // Call all the callbacks with the given arguments
+ fire: function() {
+ self.fireWith( this, arguments );
+ return this;
+ },
+ // To know if the callbacks have already been called at least once
+ fired: function() {
+ return !!memory;
+ }
+ };
+
+ return self;
+};
+
+
+
+
+var // Static reference to slice
+ sliceDeferred = [].slice;
+
+jQuery.extend({
+
+ Deferred: function( func ) {
+ var doneList = jQuery.Callbacks( "once memory" ),
+ failList = jQuery.Callbacks( "once memory" ),
+ progressList = jQuery.Callbacks( "memory" ),
+ state = "pending",
+ lists = {
+ resolve: doneList,
+ reject: failList,
+ notify: progressList
+ },
+ promise = {
+ done: doneList.add,
+ fail: failList.add,
+ progress: progressList.add,
+
+ state: function() {
+ return state;
+ },
+
+ // Deprecated
+ isResolved: doneList.fired,
+ isRejected: failList.fired,
+
+ then: function( doneCallbacks, failCallbacks, progressCallbacks ) {
+ deferred.done( doneCallbacks ).fail( failCallbacks ).progress( progressCallbacks );
+ return this;
+ },
+ always: function() {
+ deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments );
+ return this;
+ },
+ pipe: function( fnDone, fnFail, fnProgress ) {
+ return jQuery.Deferred(function( newDefer ) {
+ jQuery.each( {
+ done: [ fnDone, "resolve" ],
+ fail: [ fnFail, "reject" ],
+ progress: [ fnProgress, "notify" ]
+ }, function( handler, data ) {
+ var fn = data[ 0 ],
+ action = data[ 1 ],
+ returned;
+ if ( jQuery.isFunction( fn ) ) {
+ deferred[ handler ](function() {
+ returned = fn.apply( this, arguments );
+ if ( returned && jQuery.isFunction( returned.promise ) ) {
+ returned.promise().then( newDefer.resolve, newDefer.reject, newDefer.notify );
+ } else {
+ newDefer[ action + "With" ]( this === deferred ? newDefer : this, [ returned ] );
+ }
+ });
+ } else {
+ deferred[ handler ]( newDefer[ action ] );
+ }
+ });
+ }).promise();
+ },
+ // Get a promise for this deferred
+ // If obj is provided, the promise aspect is added to the object
+ promise: function( obj ) {
+ if ( obj == null ) {
+ obj = promise;
+ } else {
+ for ( var key in promise ) {
+ obj[ key ] = promise[ key ];
+ }
+ }
+ return obj;
+ }
+ },
+ deferred = promise.promise({}),
+ key;
+
+ for ( key in lists ) {
+ deferred[ key ] = lists[ key ].fire;
+ deferred[ key + "With" ] = lists[ key ].fireWith;
+ }
+
+ // Handle state
+ deferred.done( function() {
+ state = "resolved";
+ }, failList.disable, progressList.lock ).fail( function() {
+ state = "rejected";
+ }, doneList.disable, progressList.lock );
+
+ // Call given func if any
+ if ( func ) {
+ func.call( deferred, deferred );
+ }
+
+ // All done!
+ return deferred;
+ },
+
+ // Deferred helper
+ when: function( firstParam ) {
+ var args = sliceDeferred.call( arguments, 0 ),
+ i = 0,
+ length = args.length,
+ pValues = new Array( length ),
+ count = length,
+ pCount = length,
+ deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ?
+ firstParam :
+ jQuery.Deferred(),
+ promise = deferred.promise();
+ function resolveFunc( i ) {
+ return function( value ) {
+ args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value;
+ if ( !( --count ) ) {
+ deferred.resolveWith( deferred, args );
+ }
+ };
+ }
+ function progressFunc( i ) {
+ return function( value ) {
+ pValues[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value;
+ deferred.notifyWith( promise, pValues );
+ };
+ }
+ if ( length > 1 ) {
+ for ( ; i < length; i++ ) {
+ if ( args[ i ] && args[ i ].promise && jQuery.isFunction( args[ i ].promise ) ) {
+ args[ i ].promise().then( resolveFunc(i), deferred.reject, progressFunc(i) );
+ } else {
+ --count;
+ }
+ }
+ if ( !count ) {
+ deferred.resolveWith( deferred, args );
+ }
+ } else if ( deferred !== firstParam ) {
+ deferred.resolveWith( deferred, length ? [ firstParam ] : [] );
+ }
+ return promise;
+ }
+});
+
+
+
+
+jQuery.support = (function() {
+
+ var support,
+ all,
+ a,
+ select,
+ opt,
+ input,
+ marginDiv,
+ fragment,
+ tds,
+ events,
+ eventName,
+ i,
+ isSupported,
+ div = document.createElement( "div" ),
+ documentElement = document.documentElement;
+
+ // Preliminary tests
+ div.setAttribute("className", "t");
+ div.innerHTML = " <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
+
+ all = div.getElementsByTagName( "*" );
+ a = div.getElementsByTagName( "a" )[ 0 ];
+
+ // Can't get basic test support
+ if ( !all || !all.length || !a ) {
+ return {};
+ }
+
+ // First batch of supports tests
+ select = document.createElement( "select" );
+ opt = select.appendChild( document.createElement("option") );
+ input = div.getElementsByTagName( "input" )[ 0 ];
+
+ support = {
+ // IE strips leading whitespace when .innerHTML is used
+ leadingWhitespace: ( div.firstChild.nodeType === 3 ),
+
+ // Make sure that tbody elements aren't automatically inserted
+ // IE will insert them into empty tables
+ tbody: !div.getElementsByTagName("tbody").length,
+
+ // Make sure that link elements get serialized correctly by innerHTML
+ // This requires a wrapper element in IE
+ htmlSerialize: !!div.getElementsByTagName("link").length,
+
+ // Get the style information from getAttribute
+ // (IE uses .cssText instead)
+ style: /top/.test( a.getAttribute("style") ),
+
+ // Make sure that URLs aren't manipulated
+ // (IE normalizes it by default)
+ hrefNormalized: ( a.getAttribute("href") === "/a" ),
+
+ // Make sure that element opacity exists
+ // (IE uses filter instead)
+ // Use a regex to work around a WebKit issue. See #5145
+ opacity: /^0.55/.test( a.style.opacity ),
+
+ // Verify style float existence
+ // (IE uses styleFloat instead of cssFloat)
+ cssFloat: !!a.style.cssFloat,
+
+ // Make sure that if no value is specified for a checkbox
+ // that it defaults to "on".
+ // (WebKit defaults to "" instead)
+ checkOn: ( input.value === "on" ),
+
+ // Make sure that a selected-by-default option has a working selected property.
+ // (WebKit defaults to false instead of true, IE too, if it's in an optgroup)
+ optSelected: opt.selected,
+
+ // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
+ getSetAttribute: div.className !== "t",
+
+ // Tests for enctype support on a form(#6743)
+ enctype: !!document.createElement("form").enctype,
+
+ // Makes sure cloning an html5 element does not cause problems
+ // Where outerHTML is undefined, this still works
+ html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>",
+
+ // Will be defined later
+ submitBubbles: true,
+ changeBubbles: true,
+ focusinBubbles: false,
+ deleteExpando: true,
+ noCloneEvent: true,
+ inlineBlockNeedsLayout: false,
+ shrinkWrapBlocks: false,
+ reliableMarginRight: true
+ };
+
+ // Make sure checked status is properly cloned
+ input.checked = true;
+ support.noCloneChecked = input.cloneNode( true ).checked;
+
+ // Make sure that the options inside disabled selects aren't marked as disabled
+ // (WebKit marks them as disabled)
+ select.disabled = true;
+ support.optDisabled = !opt.disabled;
+
+ // Test to see if it's possible to delete an expando from an element
+ // Fails in Internet Explorer
+ try {
+ delete div.test;
+ } catch( e ) {
+ support.deleteExpando = false;
+ }
+
+ if ( !div.addEventListener && div.attachEvent && div.fireEvent ) {
+ div.attachEvent( "onclick", function() {
+ // Cloning a node shouldn't copy over any
+ // bound event handlers (IE does this)
+ support.noCloneEvent = false;
+ });
+ div.cloneNode( true ).fireEvent( "onclick" );
+ }
+
+ // Check if a radio maintains its value
+ // after being appended to the DOM
+ input = document.createElement("input");
+ input.value = "t";
+ input.setAttribute("type", "radio");
+ support.radioValue = input.value === "t";
+
+ input.setAttribute("checked", "checked");
+ div.appendChild( input );
+ fragment = document.createDocumentFragment();
+ fragment.appendChild( div.lastChild );
+
+ // WebKit doesn't clone checked state correctly in fragments
+ support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;
+
+ // Check if a disconnected checkbox will retain its checked
+ // value of true after appended to the DOM (IE6/7)
+ support.appendChecked = input.checked;
+
+ fragment.removeChild( input );
+ fragment.appendChild( div );
+
+ div.innerHTML = "";
+
+ // Check if div with explicit width and no margin-right incorrectly
+ // gets computed margin-right based on width of container. For more
+ // info see bug #3333
+ // Fails in WebKit before Feb 2011 nightlies
+ // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
+ if ( window.getComputedStyle ) {
+ marginDiv = document.createElement( "div" );
+ marginDiv.style.width = "0";
+ marginDiv.style.marginRight = "0";
+ div.style.width = "2px";
+ div.appendChild( marginDiv );
+ support.reliableMarginRight =
+ ( parseInt( ( window.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0;
+ }
+
+ // Technique from Juriy Zaytsev
+ // http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
+ // We only care about the case where non-standard event systems
+ // are used, namely in IE. Short-circuiting here helps us to
+ // avoid an eval call (in setAttribute) which can cause CSP
+ // to go haywire. See: https://developer.mozilla.org/en/Security/CSP
+ if ( div.attachEvent ) {
+ for( i in {
+ submit: 1,
+ change: 1,
+ focusin: 1
+ }) {
+ eventName = "on" + i;
+ isSupported = ( eventName in div );
+ if ( !isSupported ) {
+ div.setAttribute( eventName, "return;" );
+ isSupported = ( typeof div[ eventName ] === "function" );
+ }
+ support[ i + "Bubbles" ] = isSupported;
+ }
+ }
+
+ fragment.removeChild( div );
+
+ // Null elements to avoid leaks in IE
+ fragment = select = opt = marginDiv = div = input = null;
+
+ // Run tests that need a body at doc ready
+ jQuery(function() {
+ var container, outer, inner, table, td, offsetSupport,
+ conMarginTop, ptlm, vb, style, html,
+ body = document.getElementsByTagName("body")[0];
+
+ if ( !body ) {
+ // Return for frameset docs that don't have a body
+ return;
+ }
+
+ conMarginTop = 1;
+ ptlm = "position:absolute;top:0;left:0;width:1px;height:1px;margin:0;";
+ vb = "visibility:hidden;border:0;";
+ style = "style='" + ptlm + "border:5px solid #000;padding:0;'";
+ html = "<div " + style + "><div></div></div>" +
+ "<table " + style + " cellpadding='0' cellspacing='0'>" +
+ "<tr><td></td></tr></table>";
+
+ container = document.createElement("div");
+ container.style.cssText = vb + "width:0;height:0;position:static;top:0;margin-top:" + conMarginTop + "px";
+ body.insertBefore( container, body.firstChild );
+
+ // Construct the test element
+ div = document.createElement("div");
+ container.appendChild( div );
+
+ // Check if table cells still have offsetWidth/Height when they are set
+ // to display:none and there are still other visible table cells in a
+ // table row; if so, offsetWidth/Height are not reliable for use when
+ // determining if an element has been hidden directly using
+ // display:none (it is still safe to use offsets if a parent element is
+ // hidden; don safety goggles and see bug #4512 for more information).
+ // (only IE 8 fails this test)
+ div.innerHTML = "<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>";
+ tds = div.getElementsByTagName( "td" );
+ isSupported = ( tds[ 0 ].offsetHeight === 0 );
+
+ tds[ 0 ].style.display = "";
+ tds[ 1 ].style.display = "none";
+
+ // Check if empty table cells still have offsetWidth/Height
+ // (IE <= 8 fail this test)
+ support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );
+
+ // Figure out if the W3C box model works as expected
+ div.innerHTML = "";
+ div.style.width = div.style.paddingLeft = "1px";
+ jQuery.boxModel = support.boxModel = div.offsetWidth === 2;
+
+ if ( typeof div.style.zoom !== "undefined" ) {
+ // Check if natively block-level elements act like inline-block
+ // elements when setting their display to 'inline' and giving
+ // them layout
+ // (IE < 8 does this)
+ div.style.display = "inline";
+ div.style.zoom = 1;
+ support.inlineBlockNeedsLayout = ( div.offsetWidth === 2 );
+
+ // Check if elements with layout shrink-wrap their children
+ // (IE 6 does this)
+ div.style.display = "";
+ div.innerHTML = "<div style='width:4px;'></div>";
+ support.shrinkWrapBlocks = ( div.offsetWidth !== 2 );
+ }
+
+ div.style.cssText = ptlm + vb;
+ div.innerHTML = html;
+
+ outer = div.firstChild;
+ inner = outer.firstChild;
+ td = outer.nextSibling.firstChild.firstChild;
+
+ offsetSupport = {
+ doesNotAddBorder: ( inner.offsetTop !== 5 ),
+ doesAddBorderForTableAndCells: ( td.offsetTop === 5 )
+ };
+
+ inner.style.position = "fixed";
+ inner.style.top = "20px";
+
+ // safari subtracts parent border width here which is 5px
+ offsetSupport.fixedPosition = ( inner.offsetTop === 20 || inner.offsetTop === 15 );
+ inner.style.position = inner.style.top = "";
+
+ outer.style.overflow = "hidden";
+ outer.style.position = "relative";
+
+ offsetSupport.subtractsBorderForOverflowNotVisible = ( inner.offsetTop === -5 );
+ offsetSupport.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== conMarginTop );
+
+ body.removeChild( container );
+ div = container = null;
+
+ jQuery.extend( support, offsetSupport );
+ });
+
+ return support;
+})();
+
+
+
+
+var rbrace = /^(?:\{.*\}|\[.*\])$/,
+ rmultiDash = /([A-Z])/g;
+
+jQuery.extend({
+ cache: {},
+
+ // Please use with caution
+ uuid: 0,
+
+ // Unique for each copy of jQuery on the page
+ // Non-digits removed to match rinlinejQuery
+ expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),
+
+ // The following elements throw uncatchable exceptions if you
+ // attempt to add expando properties to them.
+ noData: {
+ "embed": true,
+ // Ban all objects except for Flash (which handle expandos)
+ "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
+ "applet": true
+ },
+
+ hasData: function( elem ) {
+ elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ];
+ return !!elem && !isEmptyDataObject( elem );
+ },
+
+ data: function( elem, name, data, pvt /* Internal Use Only */ ) {
+ if ( !jQuery.acceptData( elem ) ) {
+ return;
+ }
+
+ var privateCache, thisCache, ret,
+ internalKey = jQuery.expando,
+ getByName = typeof name === "string",
+
+ // We have to handle DOM nodes and JS objects differently because IE6-7
+ // can't GC object references properly across the DOM-JS boundary
+ isNode = elem.nodeType,
+
+ // Only DOM nodes need the global jQuery cache; JS object data is
+ // attached directly to the object so GC can occur automatically
+ cache = isNode ? jQuery.cache : elem,
+
+ // Only defining an ID for JS objects if its cache already exists allows
+ // the code to shortcut on the same path as a DOM node with no cache
+ id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey,
+ isEvents = name === "events";
+
+ // Avoid doing any more work than we need to when trying to get data on an
+ // object that has no data at all
+ if ( (!id || !cache[id] || (!isEvents && !pvt && !cache[id].data)) && getByName && data === undefined ) {
+ return;
+ }
+
+ if ( !id ) {
+ // Only DOM nodes need a new unique ID for each element since their data
+ // ends up in the global cache
+ if ( isNode ) {
+ elem[ internalKey ] = id = ++jQuery.uuid;
+ } else {
+ id = internalKey;
+ }
+ }
+
+ if ( !cache[ id ] ) {
+ cache[ id ] = {};
+
+ // Avoids exposing jQuery metadata on plain JS objects when the object
+ // is serialized using JSON.stringify
+ if ( !isNode ) {
+ cache[ id ].toJSON = jQuery.noop;
+ }
+ }
+
+ // An object can be passed to jQuery.data instead of a key/value pair; this gets
+ // shallow copied over onto the existing cache
+ if ( typeof name === "object" || typeof name === "function" ) {
+ if ( pvt ) {
+ cache[ id ] = jQuery.extend( cache[ id ], name );
+ } else {
+ cache[ id ].data = jQuery.extend( cache[ id ].data, name );
+ }
+ }
+
+ privateCache = thisCache = cache[ id ];
+
+ // jQuery data() is stored in a separate object inside the object's internal data
+ // cache in order to avoid key collisions between internal data and user-defined
+ // data.
+ if ( !pvt ) {
+ if ( !thisCache.data ) {
+ thisCache.data = {};
+ }
+
+ thisCache = thisCache.data;
+ }
+
+ if ( data !== undefined ) {
+ thisCache[ jQuery.camelCase( name ) ] = data;
+ }
+
+ // Users should not attempt to inspect the internal events object using jQuery.data,
+ // it is undocumented and subject to change. But does anyone listen? No.
+ if ( isEvents && !thisCache[ name ] ) {
+ return privateCache.events;
+ }
+
+ // Check for both converted-to-camel and non-converted data property names
+ // If a data property was specified
+ if ( getByName ) {
+
+ // First Try to find as-is property data
+ ret = thisCache[ name ];
+
+ // Test for null|undefined property data
+ if ( ret == null ) {
+
+ // Try to find the camelCased property
+ ret = thisCache[ jQuery.camelCase( name ) ];
+ }
+ } else {
+ ret = thisCache;
+ }
+
+ return ret;
+ },
+
+ removeData: function( elem, name, pvt /* Internal Use Only */ ) {
+ if ( !jQuery.acceptData( elem ) ) {
+ return;
+ }
+
+ var thisCache, i, l,
+
+ // Reference to internal data cache key
+ internalKey = jQuery.expando,
+
+ isNode = elem.nodeType,
+
+ // See jQuery.data for more information
+ cache = isNode ? jQuery.cache : elem,
+
+ // See jQuery.data for more information
+ id = isNode ? elem[ internalKey ] : internalKey;
+
+ // If there is already no cache entry for this object, there is no
+ // purpose in continuing
+ if ( !cache[ id ] ) {
+ return;
+ }
+
+ if ( name ) {
+
+ thisCache = pvt ? cache[ id ] : cache[ id ].data;
+
+ if ( thisCache ) {
+
+ // Support array or space separated string names for data keys
+ if ( !jQuery.isArray( name ) ) {
+
+ // try the string as a key before any manipulation
+ if ( name in thisCache ) {
+ name = [ name ];
+ } else {
+
+ // split the camel cased version by spaces unless a key with the spaces exists
+ name = jQuery.camelCase( name );
+ if ( name in thisCache ) {
+ name = [ name ];
+ } else {
+ name = name.split( " " );
+ }
+ }
+ }
+
+ for ( i = 0, l = name.length; i < l; i++ ) {
+ delete thisCache[ name[i] ];
+ }
+
+ // If there is no data left in the cache, we want to continue
+ // and let the cache object itself get destroyed
+ if ( !( pvt ? isEmptyDataObject : jQuery.isEmptyObject )( thisCache ) ) {
+ return;
+ }
+ }
+ }
+
+ // See jQuery.data for more information
+ if ( !pvt ) {
+ delete cache[ id ].data;
+
+ // Don't destroy the parent cache unless the internal data object
+ // had been the only thing left in it
+ if ( !isEmptyDataObject(cache[ id ]) ) {
+ return;
+ }
+ }
+
+ // Browsers that fail expando deletion also refuse to delete expandos on
+ // the window, but it will allow it on all other JS objects; other browsers
+ // don't care
+ // Ensure that `cache` is not a window object #10080
+ if ( jQuery.support.deleteExpando || !cache.setInterval ) {
+ delete cache[ id ];
+ } else {
+ cache[ id ] = null;
+ }
+
+ // We destroyed the cache and need to eliminate the expando on the node to avoid
+ // false lookups in the cache for entries that no longer exist
+ if ( isNode ) {
+ // IE does not allow us to delete expando properties from nodes,
+ // nor does it have a removeAttribute function on Document nodes;
+ // we must handle all of these cases
+ if ( jQuery.support.deleteExpando ) {
+ delete elem[ internalKey ];
+ } else if ( elem.removeAttribute ) {
+ elem.removeAttribute( internalKey );
+ } else {
+ elem[ internalKey ] = null;
+ }
+ }
+ },
+
+ // For internal use only.
+ _data: function( elem, name, data ) {
+ return jQuery.data( elem, name, data, true );
+ },
+
+ // A method for determining if a DOM node can handle the data expando
+ acceptData: function( elem ) {
+ if ( elem.nodeName ) {
+ var match = jQuery.noData[ elem.nodeName.toLowerCase() ];
+
+ if ( match ) {
+ return !(match === true || elem.getAttribute("classid") !== match);
+ }
+ }
+
+ return true;
+ }
+});
+
+jQuery.fn.extend({
+ data: function( key, value ) {
+ var parts, attr, name,
+ data = null;
+
+ if ( typeof key === "undefined" ) {
+ if ( this.length ) {
+ data = jQuery.data( this[0] );
+
+ if ( this[0].nodeType === 1 && !jQuery._data( this[0], "parsedAttrs" ) ) {
+ attr = this[0].attributes;
+ for ( var i = 0, l = attr.length; i < l; i++ ) {
+ name = attr[i].name;
+
+ if ( name.indexOf( "data-" ) === 0 ) {
+ name = jQuery.camelCase( name.substring(5) );
+
+ dataAttr( this[0], name, data[ name ] );
+ }
+ }
+ jQuery._data( this[0], "parsedAttrs", true );
+ }
+ }
+
+ return data;
+
+ } else if ( typeof key === "object" ) {
+ return this.each(function() {
+ jQuery.data( this, key );
+ });
+ }
+
+ parts = key.split(".");
+ parts[1] = parts[1] ? "." + parts[1] : "";
+
+ if ( value === undefined ) {
+ data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]);
+
+ // Try to fetch any internally stored data first
+ if ( data === undefined && this.length ) {
+ data = jQuery.data( this[0], key );
+ data = dataAttr( this[0], key, data );
+ }
+
+ return data === undefined && parts[1] ?
+ this.data( parts[0] ) :
+ data;
+
+ } else {
+ return this.each(function() {
+ var self = jQuery( this ),
+ args = [ parts[0], value ];
+
+ self.triggerHandler( "setData" + parts[1] + "!", args );
+ jQuery.data( this, key, value );
+ self.triggerHandler( "changeData" + parts[1] + "!", args );
+ });
+ }
+ },
+
+ removeData: function( key ) {
+ return this.each(function() {
+ jQuery.removeData( this, key );
+ });
+ }
+});
+
+function dataAttr( elem, key, data ) {
+ // If nothing was found internally, try to fetch any
+ // data from the HTML5 data-* attribute
+ if ( data === undefined && elem.nodeType === 1 ) {
+
+ var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
+
+ data = elem.getAttribute( name );
+
+ if ( typeof data === "string" ) {
+ try {
+ data = data === "true" ? true :
+ data === "false" ? false :
+ data === "null" ? null :
+ jQuery.isNumeric( data ) ? parseFloat( data ) :
+ rbrace.test( data ) ? jQuery.parseJSON( data ) :
+ data;
+ } catch( e ) {}
+
+ // Make sure we set the data so it isn't changed later
+ jQuery.data( elem, key, data );
+
+ } else {
+ data = undefined;
+ }
+ }
+
+ return data;
+}
+
+// checks a cache object for emptiness
+function isEmptyDataObject( obj ) {
+ for ( var name in obj ) {
+
+ // if the public data object is empty, the private is still empty
+ if ( name === "data" && jQuery.isEmptyObject( obj[name] ) ) {
+ continue;
+ }
+ if ( name !== "toJSON" ) {
+ return false;
+ }
+ }
+
+ return true;
+}
+
+
+
+
+function handleQueueMarkDefer( elem, type, src ) {
+ var deferDataKey = type + "defer",
+ queueDataKey = type + "queue",
+ markDataKey = type + "mark",
+ defer = jQuery._data( elem, deferDataKey );
+ if ( defer &&
+ ( src === "queue" || !jQuery._data(elem, queueDataKey) ) &&
+ ( src === "mark" || !jQuery._data(elem, markDataKey) ) ) {
+ // Give room for hard-coded callbacks to fire first
+ // and eventually mark/queue something else on the element
+ setTimeout( function() {
+ if ( !jQuery._data( elem, queueDataKey ) &&
+ !jQuery._data( elem, markDataKey ) ) {
+ jQuery.removeData( elem, deferDataKey, true );
+ defer.fire();
+ }
+ }, 0 );
+ }
+}
+
+jQuery.extend({
+
+ _mark: function( elem, type ) {
+ if ( elem ) {
+ type = ( type || "fx" ) + "mark";
+ jQuery._data( elem, type, (jQuery._data( elem, type ) || 0) + 1 );
+ }
+ },
+
+ _unmark: function( force, elem, type ) {
+ if ( force !== true ) {
+ type = elem;
+ elem = force;
+ force = false;
+ }
+ if ( elem ) {
+ type = type || "fx";
+ var key = type + "mark",
+ count = force ? 0 : ( (jQuery._data( elem, key ) || 1) - 1 );
+ if ( count ) {
+ jQuery._data( elem, key, count );
+ } else {
+ jQuery.removeData( elem, key, true );
+ handleQueueMarkDefer( elem, type, "mark" );
+ }
+ }
+ },
+
+ queue: function( elem, type, data ) {
+ var q;
+ if ( elem ) {
+ type = ( type || "fx" ) + "queue";
+ q = jQuery._data( elem, type );
+
+ // Speed up dequeue by getting out quickly if this is just a lookup
+ if ( data ) {
+ if ( !q || jQuery.isArray(data) ) {
+ q = jQuery._data( elem, type, jQuery.makeArray(data) );
+ } else {
+ q.push( data );
+ }
+ }
+ return q || [];
+ }
+ },
+
+ dequeue: function( elem, type ) {
+ type = type || "fx";
+
+ var queue = jQuery.queue( elem, type ),
+ fn = queue.shift(),
+ hooks = {};
+
+ // If the fx queue is dequeued, always remove the progress sentinel
+ if ( fn === "inprogress" ) {
+ fn = queue.shift();
+ }
+
+ if ( fn ) {
+ // Add a progress sentinel to prevent the fx queue from being
+ // automatically dequeued
+ if ( type === "fx" ) {
+ queue.unshift( "inprogress" );
+ }
+
+ jQuery._data( elem, type + ".run", hooks );
+ fn.call( elem, function() {
+ jQuery.dequeue( elem, type );
+ }, hooks );
+ }
+
+ if ( !queue.length ) {
+ jQuery.removeData( elem, type + "queue " + type + ".run", true );
+ handleQueueMarkDefer( elem, type, "queue" );
+ }
+ }
+});
+
+jQuery.fn.extend({
+ queue: function( type, data ) {
+ if ( typeof type !== "string" ) {
+ data = type;
+ type = "fx";
+ }
+
+ if ( data === undefined ) {
+ return jQuery.queue( this[0], type );
+ }
+ return this.each(function() {
+ var queue = jQuery.queue( this, type, data );
+
+ if ( type === "fx" && queue[0] !== "inprogress" ) {
+ jQuery.dequeue( this, type );
+ }
+ });
+ },
+ dequeue: function( type ) {
+ return this.each(function() {
+ jQuery.dequeue( this, type );
+ });
+ },
+ // Based off of the plugin by Clint Helfers, with permission.
+ // http://blindsignals.com/index.php/2009/07/jquery-delay/
+ delay: function( time, type ) {
+ time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
+ type = type || "fx";
+
+ return this.queue( type, function( next, hooks ) {
+ var timeout = setTimeout( next, time );
+ hooks.stop = function() {
+ clearTimeout( timeout );
+ };
+ });
+ },
+ clearQueue: function( type ) {
+ return this.queue( type || "fx", [] );
+ },
+ // Get a promise resolved when queues of a certain type
+ // are emptied (fx is the type by default)
+ promise: function( type, object ) {
+ if ( typeof type !== "string" ) {
+ object = type;
+ type = undefined;
+ }
+ type = type || "fx";
+ var defer = jQuery.Deferred(),
+ elements = this,
+ i = elements.length,
+ count = 1,
+ deferDataKey = type + "defer",
+ queueDataKey = type + "queue",
+ markDataKey = type + "mark",
+ tmp;
+ function resolve() {
+ if ( !( --count ) ) {
+ defer.resolveWith( elements, [ elements ] );
+ }
+ }
+ while( i-- ) {
+ if (( tmp = jQuery.data( elements[ i ], deferDataKey, undefined, true ) ||
+ ( jQuery.data( elements[ i ], queueDataKey, undefined, true ) ||
+ jQuery.data( elements[ i ], markDataKey, undefined, true ) ) &&
+ jQuery.data( elements[ i ], deferDataKey, jQuery.Callbacks( "once memory" ), true ) )) {
+ count++;
+ tmp.add( resolve );
+ }
+ }
+ resolve();
+ return defer.promise();
+ }
+});
+
+
+
+
+var rclass = /[\n\t\r]/g,
+ rspace = /\s+/,
+ rreturn = /\r/g,
+ rtype = /^(?:button|input)$/i,
+ rfocusable = /^(?:button|input|object|select|textarea)$/i,
+ rclickable = /^a(?:rea)?$/i,
+ rboolean = /^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,
+ getSetAttribute = jQuery.support.getSetAttribute,
+ nodeHook, boolHook, fixSpecified;
+
+jQuery.fn.extend({
+ attr: function( name, value ) {
+ return jQuery.access( this, name, value, true, jQuery.attr );
+ },
+
+ removeAttr: function( name ) {
+ return this.each(function() {
+ jQuery.removeAttr( this, name );
+ });
+ },
+
+ prop: function( name, value ) {
+ return jQuery.access( this, name, value, true, jQuery.prop );
+ },
+
+ removeProp: function( name ) {
+ name = jQuery.propFix[ name ] || name;
+ return this.each(function() {
+ // try/catch handles cases where IE balks (such as removing a property on window)
+ try {
+ this[ name ] = undefined;
+ delete this[ name ];
+ } catch( e ) {}
+ });
+ },
+
+ addClass: function( value ) {
+ var classNames, i, l, elem,
+ setClass, c, cl;
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( j ) {
+ jQuery( this ).addClass( value.call(this, j, this.className) );
+ });
+ }
+
+ if ( value && typeof value === "string" ) {
+ classNames = value.split( rspace );
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.nodeType === 1 ) {
+ if ( !elem.className && classNames.length === 1 ) {
+ elem.className = value;
+
+ } else {
+ setClass = " " + elem.className + " ";
+
+ for ( c = 0, cl = classNames.length; c < cl; c++ ) {
+ if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
+ setClass += classNames[ c ] + " ";
+ }
+ }
+ elem.className = jQuery.trim( setClass );
+ }
+ }
+ }
+ }
+
+ return this;
+ },
+
+ removeClass: function( value ) {
+ var classNames, i, l, elem, className, c, cl;
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( j ) {
+ jQuery( this ).removeClass( value.call(this, j, this.className) );
+ });
+ }
+
+ if ( (value && typeof value === "string") || value === undefined ) {
+ classNames = ( value || "" ).split( rspace );
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.nodeType === 1 && elem.className ) {
+ if ( value ) {
+ className = (" " + elem.className + " ").replace( rclass, " " );
+ for ( c = 0, cl = classNames.length; c < cl; c++ ) {
+ className = className.replace(" " + classNames[ c ] + " ", " ");
+ }
+ elem.className = jQuery.trim( className );
+
+ } else {
+ elem.className = "";
+ }
+ }
+ }
+ }
+
+ return this;
+ },
+
+ toggleClass: function( value, stateVal ) {
+ var type = typeof value,
+ isBool = typeof stateVal === "boolean";
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( i ) {
+ jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );
+ });
+ }
+
+ return this.each(function() {
+ if ( type === "string" ) {
+ // toggle individual class names
+ var className,
+ i = 0,
+ self = jQuery( this ),
+ state = stateVal,
+ classNames = value.split( rspace );
+
+ while ( (className = classNames[ i++ ]) ) {
+ // check each className given, space seperated list
+ state = isBool ? state : !self.hasClass( className );
+ self[ state ? "addClass" : "removeClass" ]( className );
+ }
+
+ } else if ( type === "undefined" || type === "boolean" ) {
+ if ( this.className ) {
+ // store className if set
+ jQuery._data( this, "__className__", this.className );
+ }
+
+ // toggle whole className
+ this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || "";
+ }
+ });
+ },
+
+ hasClass: function( selector ) {
+ var className = " " + selector + " ",
+ i = 0,
+ l = this.length;
+ for ( ; i < l; i++ ) {
+ if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) {
+ return true;
+ }
+ }
+
+ return false;
+ },
+
+ val: function( value ) {
+ var hooks, ret, isFunction,
+ elem = this[0];
+
+ if ( !arguments.length ) {
+ if ( elem ) {
+ hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ];
+
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
+ return ret;
+ }
+
+ ret = elem.value;
+
+ return typeof ret === "string" ?
+ // handle most common string cases
+ ret.replace(rreturn, "") :
+ // handle cases where value is null/undef or number
+ ret == null ? "" : ret;
+ }
+
+ return;
+ }
+
+ isFunction = jQuery.isFunction( value );
+
+ return this.each(function( i ) {
+ var self = jQuery(this), val;
+
+ if ( this.nodeType !== 1 ) {
+ return;
+ }
+
+ if ( isFunction ) {
+ val = value.call( this, i, self.val() );
+ } else {
+ val = value;
+ }
+
+ // Treat null/undefined as ""; convert numbers to string
+ if ( val == null ) {
+ val = "";
+ } else if ( typeof val === "number" ) {
+ val += "";
+ } else if ( jQuery.isArray( val ) ) {
+ val = jQuery.map(val, function ( value ) {
+ return value == null ? "" : value + "";
+ });
+ }
+
+ hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ];
+
+ // If set returns undefined, fall back to normal setting
+ if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
+ this.value = val;
+ }
+ });
+ }
+});
+
+jQuery.extend({
+ valHooks: {
+ option: {
+ get: function( elem ) {
+ // attributes.value is undefined in Blackberry 4.7 but
+ // uses .value. See #6932
+ var val = elem.attributes.value;
+ return !val || val.specified ? elem.value : elem.text;
+ }
+ },
+ select: {
+ get: function( elem ) {
+ var value, i, max, option,
+ index = elem.selectedIndex,
+ values = [],
+ options = elem.options,
+ one = elem.type === "select-one";
+
+ // Nothing was selected
+ if ( index < 0 ) {
+ return null;
+ }
+
+ // Loop through all the selected options
+ i = one ? index : 0;
+ max = one ? index + 1 : options.length;
+ for ( ; i < max; i++ ) {
+ option = options[ i ];
+
+ // Don't return options that are disabled or in a disabled optgroup
+ if ( option.selected && (jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) &&
+ (!option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" )) ) {
+
+ // Get the specific value for the option
+ value = jQuery( option ).val();
+
+ // We don't need an array for one selects
+ if ( one ) {
+ return value;
+ }
+
+ // Multi-Selects return an array
+ values.push( value );
+ }
+ }
+
+ // Fixes Bug #2551 -- select.val() broken in IE after form.reset()
+ if ( one && !values.length && options.length ) {
+ return jQuery( options[ index ] ).val();
+ }
+
+ return values;
+ },
+
+ set: function( elem, value ) {
+ var values = jQuery.makeArray( value );
+
+ jQuery(elem).find("option").each(function() {
+ this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0;
+ });
+
+ if ( !values.length ) {
+ elem.selectedIndex = -1;
+ }
+ return values;
+ }
+ }
+ },
+
+ attrFn: {
+ val: true,
+ css: true,
+ html: true,
+ text: true,
+ data: true,
+ width: true,
+ height: true,
+ offset: true
+ },
+
+ attr: function( elem, name, value, pass ) {
+ var ret, hooks, notxml,
+ nType = elem.nodeType;
+
+ // don't get/set attributes on text, comment and attribute nodes
+ if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
+ return;
+ }
+
+ if ( pass && name in jQuery.attrFn ) {
+ return jQuery( elem )[ name ]( value );
+ }
+
+ // Fallback to prop when attributes are not supported
+ if ( typeof elem.getAttribute === "undefined" ) {
+ return jQuery.prop( elem, name, value );
+ }
+
+ notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
+
+ // All attributes are lowercase
+ // Grab necessary hook if one is defined
+ if ( notxml ) {
+ name = name.toLowerCase();
+ hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
+ }
+
+ if ( value !== undefined ) {
+
+ if ( value === null ) {
+ jQuery.removeAttr( elem, name );
+ return;
+
+ } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
+ return ret;
+
+ } else {
+ elem.setAttribute( name, "" + value );
+ return value;
+ }
+
+ } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
+ return ret;
+
+ } else {
+
+ ret = elem.getAttribute( name );
+
+ // Non-existent attributes return null, we normalize to undefined
+ return ret === null ?
+ undefined :
+ ret;
+ }
+ },
+
+ removeAttr: function( elem, value ) {
+ var propName, attrNames, name, l,
+ i = 0;
+
+ if ( value && elem.nodeType === 1 ) {
+ attrNames = value.toLowerCase().split( rspace );
+ l = attrNames.length;
+
+ for ( ; i < l; i++ ) {
+ name = attrNames[ i ];
+
+ if ( name ) {
+ propName = jQuery.propFix[ name ] || name;
+
+ // See #9699 for explanation of this approach (setting first, then removal)
+ jQuery.attr( elem, name, "" );
+ elem.removeAttribute( getSetAttribute ? name : propName );
+
+ // Set corresponding property to false for boolean attributes
+ if ( rboolean.test( name ) && propName in elem ) {
+ elem[ propName ] = false;
+ }
+ }
+ }
+ }
+ },
+
+ attrHooks: {
+ type: {
+ set: function( elem, value ) {
+ // We can't allow the type property to be changed (since it causes problems in IE)
+ if ( rtype.test( elem.nodeName ) && elem.parentNode ) {
+ jQuery.error( "type property can't be changed" );
+ } else if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {
+ // Setting the type on a radio button after the value resets the value in IE6-9
+ // Reset value to it's default in case type is set after value
+ // This is for element creation
+ var val = elem.value;
+ elem.setAttribute( "type", value );
+ if ( val ) {
+ elem.value = val;
+ }
+ return value;
+ }
+ }
+ },
+ // Use the value property for back compat
+ // Use the nodeHook for button elements in IE6/7 (#1954)
+ value: {
+ get: function( elem, name ) {
+ if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {
+ return nodeHook.get( elem, name );
+ }
+ return name in elem ?
+ elem.value :
+ null;
+ },
+ set: function( elem, value, name ) {
+ if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {
+ return nodeHook.set( elem, value, name );
+ }
+ // Does not return so that setAttribute is also used
+ elem.value = value;
+ }
+ }
+ },
+
+ propFix: {
+ tabindex: "tabIndex",
+ readonly: "readOnly",
+ "for": "htmlFor",
+ "class": "className",
+ maxlength: "maxLength",
+ cellspacing: "cellSpacing",
+ cellpadding: "cellPadding",
+ rowspan: "rowSpan",
+ colspan: "colSpan",
+ usemap: "useMap",
+ frameborder: "frameBorder",
+ contenteditable: "contentEditable"
+ },
+
+ prop: function( elem, name, value ) {
+ var ret, hooks, notxml,
+ nType = elem.nodeType;
+
+ // don't get/set properties on text, comment and attribute nodes
+ if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
+ return;
+ }
+
+ notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
+
+ if ( notxml ) {
+ // Fix name and attach hooks
+ name = jQuery.propFix[ name ] || name;
+ hooks = jQuery.propHooks[ name ];
+ }
+
+ if ( value !== undefined ) {
+ if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
+ return ret;
+
+ } else {
+ return ( elem[ name ] = value );
+ }
+
+ } else {
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
+ return ret;
+
+ } else {
+ return elem[ name ];
+ }
+ }
+ },
+
+ propHooks: {
+ tabIndex: {
+ get: function( elem ) {
+ // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set
+ // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
+ var attributeNode = elem.getAttributeNode("tabindex");
+
+ return attributeNode && attributeNode.specified ?
+ parseInt( attributeNode.value, 10 ) :
+ rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ?
+ 0 :
+ undefined;
+ }
+ }
+ }
+});
+
+// Add the tabIndex propHook to attrHooks for back-compat (different case is intentional)
+jQuery.attrHooks.tabindex = jQuery.propHooks.tabIndex;
+
+// Hook for boolean attributes
+boolHook = {
+ get: function( elem, name ) {
+ // Align boolean attributes with corresponding properties
+ // Fall back to attribute presence where some booleans are not supported
+ var attrNode,
+ property = jQuery.prop( elem, name );
+ return property === true || typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ?
+ name.toLowerCase() :
+ undefined;
+ },
+ set: function( elem, value, name ) {
+ var propName;
+ if ( value === false ) {
+ // Remove boolean attributes when set to false
+ jQuery.removeAttr( elem, name );
+ } else {
+ // value is true since we know at this point it's type boolean and not false
+ // Set boolean attributes to the same name and set the DOM property
+ propName = jQuery.propFix[ name ] || name;
+ if ( propName in elem ) {
+ // Only set the IDL specifically if it already exists on the element
+ elem[ propName ] = true;
+ }
+
+ elem.setAttribute( name, name.toLowerCase() );
+ }
+ return name;
+ }
+};
+
+// IE6/7 do not support getting/setting some attributes with get/setAttribute
+if ( !getSetAttribute ) {
+
+ fixSpecified = {
+ name: true,
+ id: true
+ };
+
+ // Use this for any attribute in IE6/7
+ // This fixes almost every IE6/7 issue
+ nodeHook = jQuery.valHooks.button = {
+ get: function( elem, name ) {
+ var ret;
+ ret = elem.getAttributeNode( name );
+ return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ?
+ ret.nodeValue :
+ undefined;
+ },
+ set: function( elem, value, name ) {
+ // Set the existing or create a new attribute node
+ var ret = elem.getAttributeNode( name );
+ if ( !ret ) {
+ ret = document.createAttribute( name );
+ elem.setAttributeNode( ret );
+ }
+ return ( ret.nodeValue = value + "" );
+ }
+ };
+
+ // Apply the nodeHook to tabindex
+ jQuery.attrHooks.tabindex.set = nodeHook.set;
+
+ // Set width and height to auto instead of 0 on empty string( Bug #8150 )
+ // This is for removals
+ jQuery.each([ "width", "height" ], function( i, name ) {
+ jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], {
+ set: function( elem, value ) {
+ if ( value === "" ) {
+ elem.setAttribute( name, "auto" );
+ return value;
+ }
+ }
+ });
+ });
+
+ // Set contenteditable to false on removals(#10429)
+ // Setting to empty string throws an error as an invalid value
+ jQuery.attrHooks.contenteditable = {
+ get: nodeHook.get,
+ set: function( elem, value, name ) {
+ if ( value === "" ) {
+ value = "false";
+ }
+ nodeHook.set( elem, value, name );
+ }
+ };
+}
+
+
+// Some attributes require a special call on IE
+if ( !jQuery.support.hrefNormalized ) {
+ jQuery.each([ "href", "src", "width", "height" ], function( i, name ) {
+ jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], {
+ get: function( elem ) {
+ var ret = elem.getAttribute( name, 2 );
+ return ret === null ? undefined : ret;
+ }
+ });
+ });
+}
+
+if ( !jQuery.support.style ) {
+ jQuery.attrHooks.style = {
+ get: function( elem ) {
+ // Return undefined in the case of empty string
+ // Normalize to lowercase since IE uppercases css property names
+ return elem.style.cssText.toLowerCase() || undefined;
+ },
+ set: function( elem, value ) {
+ return ( elem.style.cssText = "" + value );
+ }
+ };
+}
+
+// Safari mis-reports the default selected property of an option
+// Accessing the parent's selectedIndex property fixes it
+if ( !jQuery.support.optSelected ) {
+ jQuery.propHooks.selected = jQuery.extend( jQuery.propHooks.selected, {
+ get: function( elem ) {
+ var parent = elem.parentNode;
+
+ if ( parent ) {
+ parent.selectedIndex;
+
+ // Make sure that it also works with optgroups, see #5701
+ if ( parent.parentNode ) {
+ parent.parentNode.selectedIndex;
+ }
+ }
+ return null;
+ }
+ });
+}
+
+// IE6/7 call enctype encoding
+if ( !jQuery.support.enctype ) {
+ jQuery.propFix.enctype = "encoding";
+}
+
+// Radios and checkboxes getter/setter
+if ( !jQuery.support.checkOn ) {
+ jQuery.each([ "radio", "checkbox" ], function() {
+ jQuery.valHooks[ this ] = {
+ get: function( elem ) {
+ // Handle the case where in Webkit "" is returned instead of "on" if a value isn't specified
+ return elem.getAttribute("value") === null ? "on" : elem.value;
+ }
+ };
+ });
+}
+jQuery.each([ "radio", "checkbox" ], function() {
+ jQuery.valHooks[ this ] = jQuery.extend( jQuery.valHooks[ this ], {
+ set: function( elem, value ) {
+ if ( jQuery.isArray( value ) ) {
+ return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 );
+ }
+ }
+ });
+});
+
+
+
+
+var rformElems = /^(?:textarea|input|select)$/i,
+ rtypenamespace = /^([^\.]*)?(?:\.(.+))?$/,
+ rhoverHack = /\bhover(\.\S+)?\b/,
+ rkeyEvent = /^key/,
+ rmouseEvent = /^(?:mouse|contextmenu)|click/,
+ rfocusMorph = /^(?:focusinfocus|focusoutblur)$/,
+ rquickIs = /^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,
+ quickParse = function( selector ) {
+ var quick = rquickIs.exec( selector );
+ if ( quick ) {
+ // 0 1 2 3
+ // [ _, tag, id, class ]
+ quick[1] = ( quick[1] || "" ).toLowerCase();
+ quick[3] = quick[3] && new RegExp( "(?:^|\\s)" + quick[3] + "(?:\\s|$)" );
+ }
+ return quick;
+ },
+ quickIs = function( elem, m ) {
+ var attrs = elem.attributes || {};
+ return (
+ (!m[1] || elem.nodeName.toLowerCase() === m[1]) &&
+ (!m[2] || (attrs.id || {}).value === m[2]) &&
+ (!m[3] || m[3].test( (attrs[ "class" ] || {}).value ))
+ );
+ },
+ hoverHack = function( events ) {
+ return jQuery.event.special.hover ? events : events.replace( rhoverHack, "mouseenter$1 mouseleave$1" );
+ };
+
+/*
+ * Helper functions for managing events -- not part of the public interface.
+ * Props to Dean Edwards' addEvent library for many of the ideas.
+ */
+jQuery.event = {
+
+ add: function( elem, types, handler, data, selector ) {
+
+ var elemData, eventHandle, events,
+ t, tns, type, namespaces, handleObj,
+ handleObjIn, quick, handlers, special;
+
+ // Don't attach events to noData or text/comment nodes (allow plain objects tho)
+ if ( elem.nodeType === 3 || elem.nodeType === 8 || !types || !handler || !(elemData = jQuery._data( elem )) ) {
+ return;
+ }
+
+ // Caller can pass in an object of custom data in lieu of the handler
+ if ( handler.handler ) {
+ handleObjIn = handler;
+ handler = handleObjIn.handler;
+ }
+
+ // Make sure that the handler has a unique ID, used to find/remove it later
+ if ( !handler.guid ) {
+ handler.guid = jQuery.guid++;
+ }
+
+ // Init the element's event structure and main handler, if this is the first
+ events = elemData.events;
+ if ( !events ) {
+ elemData.events = events = {};
+ }
+ eventHandle = elemData.handle;
+ if ( !eventHandle ) {
+ elemData.handle = eventHandle = function( e ) {
+ // Discard the second event of a jQuery.event.trigger() and
+ // when an event is called after a page has unloaded
+ return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ?
+ jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
+ undefined;
+ };
+ // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
+ eventHandle.elem = elem;
+ }
+
+ // Handle multiple events separated by a space
+ // jQuery(...).bind("mouseover mouseout", fn);
+ types = jQuery.trim( hoverHack(types) ).split( " " );
+ for ( t = 0; t < types.length; t++ ) {
+
+ tns = rtypenamespace.exec( types[t] ) || [];
+ type = tns[1];
+ namespaces = ( tns[2] || "" ).split( "." ).sort();
+
+ // If event changes its type, use the special event handlers for the changed type
+ special = jQuery.event.special[ type ] || {};
+
+ // If selector defined, determine special event api type, otherwise given type
+ type = ( selector ? special.delegateType : special.bindType ) || type;
+
+ // Update special based on newly reset type
+ special = jQuery.event.special[ type ] || {};
+
+ // handleObj is passed to all event handlers
+ handleObj = jQuery.extend({
+ type: type,
+ origType: tns[1],
+ data: data,
+ handler: handler,
+ guid: handler.guid,
+ selector: selector,
+ quick: quickParse( selector ),
+ namespace: namespaces.join(".")
+ }, handleObjIn );
+
+ // Init the event handler queue if we're the first
+ handlers = events[ type ];
+ if ( !handlers ) {
+ handlers = events[ type ] = [];
+ handlers.delegateCount = 0;
+
+ // Only use addEventListener/attachEvent if the special events handler returns false
+ if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
+ // Bind the global event handler to the element
+ if ( elem.addEventListener ) {
+ elem.addEventListener( type, eventHandle, false );
+
+ } else if ( elem.attachEvent ) {
+ elem.attachEvent( "on" + type, eventHandle );
+ }
+ }
+ }
+
+ if ( special.add ) {
+ special.add.call( elem, handleObj );
+
+ if ( !handleObj.handler.guid ) {
+ handleObj.handler.guid = handler.guid;
+ }
+ }
+
+ // Add to the element's handler list, delegates in front
+ if ( selector ) {
+ handlers.splice( handlers.delegateCount++, 0, handleObj );
+ } else {
+ handlers.push( handleObj );
+ }
+
+ // Keep track of which events have ever been used, for event optimization
+ jQuery.event.global[ type ] = true;
+ }
+
+ // Nullify elem to prevent memory leaks in IE
+ elem = null;
+ },
+
+ global: {},
+
+ // Detach an event or set of events from an element
+ remove: function( elem, types, handler, selector, mappedTypes ) {
+
+ var elemData = jQuery.hasData( elem ) && jQuery._data( elem ),
+ t, tns, type, origType, namespaces, origCount,
+ j, events, special, handle, eventType, handleObj;
+
+ if ( !elemData || !(events = elemData.events) ) {
+ return;
+ }
+
+ // Once for each type.namespace in types; type may be omitted
+ types = jQuery.trim( hoverHack( types || "" ) ).split(" ");
+ for ( t = 0; t < types.length; t++ ) {
+ tns = rtypenamespace.exec( types[t] ) || [];
+ type = origType = tns[1];
+ namespaces = tns[2];
+
+ // Unbind all events (on this namespace, if provided) for the element
+ if ( !type ) {
+ for ( type in events ) {
+ jQuery.event.remove( elem, type + types[ t ], handler, selector, true );
+ }
+ continue;
+ }
+
+ special = jQuery.event.special[ type ] || {};
+ type = ( selector? special.delegateType : special.bindType ) || type;
+ eventType = events[ type ] || [];
+ origCount = eventType.length;
+ namespaces = namespaces ? new RegExp("(^|\\.)" + namespaces.split(".").sort().join("\\.(?:.*\\.)?") + "(\\.|$)") : null;
+
+ // Remove matching events
+ for ( j = 0; j < eventType.length; j++ ) {
+ handleObj = eventType[ j ];
+
+ if ( ( mappedTypes || origType === handleObj.origType ) &&
+ ( !handler || handler.guid === handleObj.guid ) &&
+ ( !namespaces || namespaces.test( handleObj.namespace ) ) &&
+ ( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) {
+ eventType.splice( j--, 1 );
+
+ if ( handleObj.selector ) {
+ eventType.delegateCount--;
+ }
+ if ( special.remove ) {
+ special.remove.call( elem, handleObj );
+ }
+ }
+ }
+
+ // Remove generic event handler if we removed something and no more handlers exist
+ // (avoids potential for endless recursion during removal of special event handlers)
+ if ( eventType.length === 0 && origCount !== eventType.length ) {
+ if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) {
+ jQuery.removeEvent( elem, type, elemData.handle );
+ }
+
+ delete events[ type ];
+ }
+ }
+
+ // Remove the expando if it's no longer used
+ if ( jQuery.isEmptyObject( events ) ) {
+ handle = elemData.handle;
+ if ( handle ) {
+ handle.elem = null;
+ }
+
+ // removeData also checks for emptiness and clears the expando if empty
+ // so use it instead of delete
+ jQuery.removeData( elem, [ "events", "handle" ], true );
+ }
+ },
+
+ // Events that are safe to short-circuit if no handlers are attached.
+ // Native DOM events should not be added, they may have inline handlers.
+ customEvent: {
+ "getData": true,
+ "setData": true,
+ "changeData": true
+ },
+
+ trigger: function( event, data, elem, onlyHandlers ) {
+ // Don't do events on text and comment nodes
+ if ( elem && (elem.nodeType === 3 || elem.nodeType === 8) ) {
+ return;
+ }
+
+ // Event object or event type
+ var type = event.type || event,
+ namespaces = [],
+ cache, exclusive, i, cur, old, ontype, special, handle, eventPath, bubbleType;
+
+ // focus/blur morphs to focusin/out; ensure we're not firing them right now
+ if ( rfocusMorph.test( type + jQuery.event.triggered ) ) {
+ return;
+ }
+
+ if ( type.indexOf( "!" ) >= 0 ) {
+ // Exclusive events trigger only for the exact event (no namespaces)
+ type = type.slice(0, -1);
+ exclusive = true;
+ }
+
+ if ( type.indexOf( "." ) >= 0 ) {
+ // Namespaced trigger; create a regexp to match event type in handle()
+ namespaces = type.split(".");
+ type = namespaces.shift();
+ namespaces.sort();
+ }
+
+ if ( (!elem || jQuery.event.customEvent[ type ]) && !jQuery.event.global[ type ] ) {
+ // No jQuery handlers for this event type, and it can't have inline handlers
+ return;
+ }
+
+ // Caller can pass in an Event, Object, or just an event type string
+ event = typeof event === "object" ?
+ // jQuery.Event object
+ event[ jQuery.expando ] ? event :
+ // Object literal
+ new jQuery.Event( type, event ) :
+ // Just the event type (string)
+ new jQuery.Event( type );
+
+ event.type = type;
+ event.isTrigger = true;
+ event.exclusive = exclusive;
+ event.namespace = namespaces.join( "." );
+ event.namespace_re = event.namespace? new RegExp("(^|\\.)" + namespaces.join("\\.(?:.*\\.)?") + "(\\.|$)") : null;
+ ontype = type.indexOf( ":" ) < 0 ? "on" + type : "";
+
+ // Handle a global trigger
+ if ( !elem ) {
+
+ // TODO: Stop taunting the data cache; remove global events and always attach to document
+ cache = jQuery.cache;
+ for ( i in cache ) {
+ if ( cache[ i ].events && cache[ i ].events[ type ] ) {
+ jQuery.event.trigger( event, data, cache[ i ].handle.elem, true );
+ }
+ }
+ return;
+ }
+
+ // Clean up the event in case it is being reused
+ event.result = undefined;
+ if ( !event.target ) {
+ event.target = elem;
+ }
+
+ // Clone any incoming data and prepend the event, creating the handler arg list
+ data = data != null ? jQuery.makeArray( data ) : [];
+ data.unshift( event );
+
+ // Allow special events to draw outside the lines
+ special = jQuery.event.special[ type ] || {};
+ if ( special.trigger && special.trigger.apply( elem, data ) === false ) {
+ return;
+ }
+
+ // Determine event propagation path in advance, per W3C events spec (#9951)
+ // Bubble up to document, then to window; watch for a global ownerDocument var (#9724)
+ eventPath = [[ elem, special.bindType || type ]];
+ if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) {
+
+ bubbleType = special.delegateType || type;
+ cur = rfocusMorph.test( bubbleType + type ) ? elem : elem.parentNode;
+ old = null;
+ for ( ; cur; cur = cur.parentNode ) {
+ eventPath.push([ cur, bubbleType ]);
+ old = cur;
+ }
+
+ // Only add window if we got to document (e.g., not plain obj or detached DOM)
+ if ( old && old === elem.ownerDocument ) {
+ eventPath.push([ old.defaultView || old.parentWindow || window, bubbleType ]);
+ }
+ }
+
+ // Fire handlers on the event path
+ for ( i = 0; i < eventPath.length && !event.isPropagationStopped(); i++ ) {
+
+ cur = eventPath[i][0];
+ event.type = eventPath[i][1];
+
+ handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" );
+ if ( handle ) {
+ handle.apply( cur, data );
+ }
+ // Note that this is a bare JS function and not a jQuery handler
+ handle = ontype && cur[ ontype ];
+ if ( handle && jQuery.acceptData( cur ) && handle.apply( cur, data ) === false ) {
+ event.preventDefault();
+ }
+ }
+ event.type = type;
+
+ // If nobody prevented the default action, do it now
+ if ( !onlyHandlers && !event.isDefaultPrevented() ) {
+
+ if ( (!special._default || special._default.apply( elem.ownerDocument, data ) === false) &&
+ !(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) {
+
+ // Call a native DOM method on the target with the same name name as the event.
+ // Can't use an .isFunction() check here because IE6/7 fails that test.
+ // Don't do default actions on window, that's where global variables be (#6170)
+ // IE<9 dies on focus/blur to hidden element (#1486)
+ if ( ontype && elem[ type ] && ((type !== "focus" && type !== "blur") || event.target.offsetWidth !== 0) && !jQuery.isWindow( elem ) ) {
+
+ // Don't re-trigger an onFOO event when we call its FOO() method
+ old = elem[ ontype ];
+
+ if ( old ) {
+ elem[ ontype ] = null;
+ }
+
+ // Prevent re-triggering of the same event, since we already bubbled it above
+ jQuery.event.triggered = type;
+ elem[ type ]();
+ jQuery.event.triggered = undefined;
+
+ if ( old ) {
+ elem[ ontype ] = old;
+ }
+ }
+ }
+ }
+
+ return event.result;
+ },
+
+ dispatch: function( event ) {
+
+ // Make a writable jQuery.Event from the native event object
+ event = jQuery.event.fix( event || window.event );
+
+ var handlers = ( (jQuery._data( this, "events" ) || {} )[ event.type ] || []),
+ delegateCount = handlers.delegateCount,
+ args = [].slice.call( arguments, 0 ),
+ run_all = !event.exclusive && !event.namespace,
+ handlerQueue = [],
+ i, j, cur, jqcur, ret, selMatch, matched, matches, handleObj, sel, related;
+
+ // Use the fix-ed jQuery.Event rather than the (read-only) native event
+ args[0] = event;
+ event.delegateTarget = this;
+
+ // Determine handlers that should run if there are delegated events
+ // Avoid disabled elements in IE (#6911) and non-left-click bubbling in Firefox (#3861)
+ if ( delegateCount && !event.target.disabled && !(event.button && event.type === "click") ) {
+
+ // Pregenerate a single jQuery object for reuse with .is()
+ jqcur = jQuery(this);
+ jqcur.context = this.ownerDocument || this;
+
+ for ( cur = event.target; cur != this; cur = cur.parentNode || this ) {
+ selMatch = {};
+ matches = [];
+ jqcur[0] = cur;
+ for ( i = 0; i < delegateCount; i++ ) {
+ handleObj = handlers[ i ];
+ sel = handleObj.selector;
+
+ if ( selMatch[ sel ] === undefined ) {
+ selMatch[ sel ] = (
+ handleObj.quick ? quickIs( cur, handleObj.quick ) : jqcur.is( sel )
+ );
+ }
+ if ( selMatch[ sel ] ) {
+ matches.push( handleObj );
+ }
+ }
+ if ( matches.length ) {
+ handlerQueue.push({ elem: cur, matches: matches });
+ }
+ }
+ }
+
+ // Add the remaining (directly-bound) handlers
+ if ( handlers.length > delegateCount ) {
+ handlerQueue.push({ elem: this, matches: handlers.slice( delegateCount ) });
+ }
+
+ // Run delegates first; they may want to stop propagation beneath us
+ for ( i = 0; i < handlerQueue.length && !event.isPropagationStopped(); i++ ) {
+ matched = handlerQueue[ i ];
+ event.currentTarget = matched.elem;
+
+ for ( j = 0; j < matched.matches.length && !event.isImmediatePropagationStopped(); j++ ) {
+ handleObj = matched.matches[ j ];
+
+ // Triggered event must either 1) be non-exclusive and have no namespace, or
+ // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace).
+ if ( run_all || (!event.namespace && !handleObj.namespace) || event.namespace_re && event.namespace_re.test( handleObj.namespace ) ) {
+
+ event.data = handleObj.data;
+ event.handleObj = handleObj;
+
+ ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
+ .apply( matched.elem, args );
+
+ if ( ret !== undefined ) {
+ event.result = ret;
+ if ( ret === false ) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+ }
+ }
+ }
+
+ return event.result;
+ },
+
+ // Includes some event props shared by KeyEvent and MouseEvent
+ // *** attrChange attrName relatedNode srcElement are not normalized, non-W3C, deprecated, will be removed in 1.8 ***
+ props: "attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),
+
+ fixHooks: {},
+
+ keyHooks: {
+ props: "char charCode key keyCode".split(" "),
+ filter: function( event, original ) {
+
+ // Add which for key events
+ if ( event.which == null ) {
+ event.which = original.charCode != null ? original.charCode : original.keyCode;
+ }
+
+ return event;
+ }
+ },
+
+ mouseHooks: {
+ props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),
+ filter: function( event, original ) {
+ var eventDoc, doc, body,
+ button = original.button,
+ fromElement = original.fromElement;
+
+ // Calculate pageX/Y if missing and clientX/Y available
+ if ( event.pageX == null && original.clientX != null ) {
+ eventDoc = event.target.ownerDocument || document;
+ doc = eventDoc.documentElement;
+ body = eventDoc.body;
+
+ event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
+ event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );
+ }
+
+ // Add relatedTarget, if necessary
+ if ( !event.relatedTarget && fromElement ) {
+ event.relatedTarget = fromElement === event.target ? original.toElement : fromElement;
+ }
+
+ // Add which for click: 1 === left; 2 === middle; 3 === right
+ // Note: button is not normalized, so don't use it
+ if ( !event.which && button !== undefined ) {
+ event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
+ }
+
+ return event;
+ }
+ },
+
+ fix: function( event ) {
+ if ( event[ jQuery.expando ] ) {
+ return event;
+ }
+
+ // Create a writable copy of the event object and normalize some properties
+ var i, prop,
+ originalEvent = event,
+ fixHook = jQuery.event.fixHooks[ event.type ] || {},
+ copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props;
+
+ event = jQuery.Event( originalEvent );
+
+ for ( i = copy.length; i; ) {
+ prop = copy[ --i ];
+ event[ prop ] = originalEvent[ prop ];
+ }
+
+ // Fix target property, if necessary (#1925, IE 6/7/8 & Safari2)
+ if ( !event.target ) {
+ event.target = originalEvent.srcElement || document;
+ }
+
+ // Target should not be a text node (#504, Safari)
+ if ( event.target.nodeType === 3 ) {
+ event.target = event.target.parentNode;
+ }
+
+ // For mouse/key events; add metaKey if it's not there (#3368, IE6/7/8)
+ if ( event.metaKey === undefined ) {
+ event.metaKey = event.ctrlKey;
+ }
+
+ return fixHook.filter? fixHook.filter( event, originalEvent ) : event;
+ },
+
+ special: {
+ ready: {
+ // Make sure the ready event is setup
+ setup: jQuery.bindReady
+ },
+
+ load: {
+ // Prevent triggered image.load events from bubbling to window.load
+ noBubble: true
+ },
+
+ focus: {
+ delegateType: "focusin"
+ },
+ blur: {
+ delegateType: "focusout"
+ },
+
+ beforeunload: {
+ setup: function( data, namespaces, eventHandle ) {
+ // We only want to do this special case on windows
+ if ( jQuery.isWindow( this ) ) {
+ this.onbeforeunload = eventHandle;
+ }
+ },
+
+ teardown: function( namespaces, eventHandle ) {
+ if ( this.onbeforeunload === eventHandle ) {
+ this.onbeforeunload = null;
+ }
+ }
+ }
+ },
+
+ simulate: function( type, elem, event, bubble ) {
+ // Piggyback on a donor event to simulate a different one.
+ // Fake originalEvent to avoid donor's stopPropagation, but if the
+ // simulated event prevents default then we do the same on the donor.
+ var e = jQuery.extend(
+ new jQuery.Event(),
+ event,
+ { type: type,
+ isSimulated: true,
+ originalEvent: {}
+ }
+ );
+ if ( bubble ) {
+ jQuery.event.trigger( e, null, elem );
+ } else {
+ jQuery.event.dispatch.call( elem, e );
+ }
+ if ( e.isDefaultPrevented() ) {
+ event.preventDefault();
+ }
+ }
+};
+
+// Some plugins are using, but it's undocumented/deprecated and will be removed.
+// The 1.7 special event interface should provide all the hooks needed now.
+jQuery.event.handle = jQuery.event.dispatch;
+
+jQuery.removeEvent = document.removeEventListener ?
+ function( elem, type, handle ) {
+ if ( elem.removeEventListener ) {
+ elem.removeEventListener( type, handle, false );
+ }
+ } :
+ function( elem, type, handle ) {
+ if ( elem.detachEvent ) {
+ elem.detachEvent( "on" + type, handle );
+ }
+ };
+
+jQuery.Event = function( src, props ) {
+ // Allow instantiation without the 'new' keyword
+ if ( !(this instanceof jQuery.Event) ) {
+ return new jQuery.Event( src, props );
+ }
+
+ // Event object
+ if ( src && src.type ) {
+ this.originalEvent = src;
+ this.type = src.type;
+
+ // Events bubbling up the document may have been marked as prevented
+ // by a handler lower down the tree; reflect the correct value.
+ this.isDefaultPrevented = ( src.defaultPrevented || src.returnValue === false ||
+ src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse;
+
+ // Event type
+ } else {
+ this.type = src;
+ }
+
+ // Put explicitly provided properties onto the event object
+ if ( props ) {
+ jQuery.extend( this, props );
+ }
+
+ // Create a timestamp if incoming event doesn't have one
+ this.timeStamp = src && src.timeStamp || jQuery.now();
+
+ // Mark it as fixed
+ this[ jQuery.expando ] = true;
+};
+
+function returnFalse() {
+ return false;
+}
+function returnTrue() {
+ return true;
+}
+
+// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
+// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
+jQuery.Event.prototype = {
+ preventDefault: function() {
+ this.isDefaultPrevented = returnTrue;
+
+ var e = this.originalEvent;
+ if ( !e ) {
+ return;
+ }
+
+ // if preventDefault exists run it on the original event
+ if ( e.preventDefault ) {
+ e.preventDefault();
+
+ // otherwise set the returnValue property of the original event to false (IE)
+ } else {
+ e.returnValue = false;
+ }
+ },
+ stopPropagation: function() {
+ this.isPropagationStopped = returnTrue;
+
+ var e = this.originalEvent;
+ if ( !e ) {
+ return;
+ }
+ // if stopPropagation exists run it on the original event
+ if ( e.stopPropagation ) {
+ e.stopPropagation();
+ }
+ // otherwise set the cancelBubble property of the original event to true (IE)
+ e.cancelBubble = true;
+ },
+ stopImmediatePropagation: function() {
+ this.isImmediatePropagationStopped = returnTrue;
+ this.stopPropagation();
+ },
+ isDefaultPrevented: returnFalse,
+ isPropagationStopped: returnFalse,
+ isImmediatePropagationStopped: returnFalse
+};
+
+// Create mouseenter/leave events using mouseover/out and event-time checks
+jQuery.each({
+ mouseenter: "mouseover",
+ mouseleave: "mouseout"
+}, function( orig, fix ) {
+ jQuery.event.special[ orig ] = {
+ delegateType: fix,
+ bindType: fix,
+
+ handle: function( event ) {
+ var target = this,
+ related = event.relatedTarget,
+ handleObj = event.handleObj,
+ selector = handleObj.selector,
+ ret;
+
+ // For mousenter/leave call the handler if related is outside the target.
+ // NB: No relatedTarget if the mouse left/entered the browser window
+ if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
+ event.type = handleObj.origType;
+ ret = handleObj.handler.apply( this, arguments );
+ event.type = fix;
+ }
+ return ret;
+ }
+ };
+});
+
+// IE submit delegation
+if ( !jQuery.support.submitBubbles ) {
+
+ jQuery.event.special.submit = {
+ setup: function() {
+ // Only need this for delegated form submit events
+ if ( jQuery.nodeName( this, "form" ) ) {
+ return false;
+ }
+
+ // Lazy-add a submit handler when a descendant form may potentially be submitted
+ jQuery.event.add( this, "click._submit keypress._submit", function( e ) {
+ // Node name check avoids a VML-related crash in IE (#9807)
+ var elem = e.target,
+ form = jQuery.nodeName( elem, "input" ) || jQuery.nodeName( elem, "button" ) ? elem.form : undefined;
+ if ( form && !form._submit_attached ) {
+ jQuery.event.add( form, "submit._submit", function( event ) {
+ // If form was submitted by the user, bubble the event up the tree
+ if ( this.parentNode && !event.isTrigger ) {
+ jQuery.event.simulate( "submit", this.parentNode, event, true );
+ }
+ });
+ form._submit_attached = true;
+ }
+ });
+ // return undefined since we don't need an event listener
+ },
+
+ teardown: function() {
+ // Only need this for delegated form submit events
+ if ( jQuery.nodeName( this, "form" ) ) {
+ return false;
+ }
+
+ // Remove delegated handlers; cleanData eventually reaps submit handlers attached above
+ jQuery.event.remove( this, "._submit" );
+ }
+ };
+}
+
+// IE change delegation and checkbox/radio fix
+if ( !jQuery.support.changeBubbles ) {
+
+ jQuery.event.special.change = {
+
+ setup: function() {
+
+ if ( rformElems.test( this.nodeName ) ) {
+ // IE doesn't fire change on a check/radio until blur; trigger it on click
+ // after a propertychange. Eat the blur-change in special.change.handle.
+ // This still fires onchange a second time for check/radio after blur.
+ if ( this.type === "checkbox" || this.type === "radio" ) {
+ jQuery.event.add( this, "propertychange._change", function( event ) {
+ if ( event.originalEvent.propertyName === "checked" ) {
+ this._just_changed = true;
+ }
+ });
+ jQuery.event.add( this, "click._change", function( event ) {
+ if ( this._just_changed && !event.isTrigger ) {
+ this._just_changed = false;
+ jQuery.event.simulate( "change", this, event, true );
+ }
+ });
+ }
+ return false;
+ }
+ // Delegated event; lazy-add a change handler on descendant inputs
+ jQuery.event.add( this, "beforeactivate._change", function( e ) {
+ var elem = e.target;
+
+ if ( rformElems.test( elem.nodeName ) && !elem._change_attached ) {
+ jQuery.event.add( elem, "change._change", function( event ) {
+ if ( this.parentNode && !event.isSimulated && !event.isTrigger ) {
+ jQuery.event.simulate( "change", this.parentNode, event, true );
+ }
+ });
+ elem._change_attached = true;
+ }
+ });
+ },
+
+ handle: function( event ) {
+ var elem = event.target;
+
+ // Swallow native change events from checkbox/radio, we already triggered them above
+ if ( this !== elem || event.isSimulated || event.isTrigger || (elem.type !== "radio" && elem.type !== "checkbox") ) {
+ return event.handleObj.handler.apply( this, arguments );
+ }
+ },
+
+ teardown: function() {
+ jQuery.event.remove( this, "._change" );
+
+ return rformElems.test( this.nodeName );
+ }
+ };
+}
+
+// Create "bubbling" focus and blur events
+if ( !jQuery.support.focusinBubbles ) {
+ jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {
+
+ // Attach a single capturing handler while someone wants focusin/focusout
+ var attaches = 0,
+ handler = function( event ) {
+ jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true );
+ };
+
+ jQuery.event.special[ fix ] = {
+ setup: function() {
+ if ( attaches++ === 0 ) {
+ document.addEventListener( orig, handler, true );
+ }
+ },
+ teardown: function() {
+ if ( --attaches === 0 ) {
+ document.removeEventListener( orig, handler, true );
+ }
+ }
+ };
+ });
+}
+
+jQuery.fn.extend({
+
+ on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
+ var origFn, type;
+
+ // Types can be a map of types/handlers
+ if ( typeof types === "object" ) {
+ // ( types-Object, selector, data )
+ if ( typeof selector !== "string" ) {
+ // ( types-Object, data )
+ data = selector;
+ selector = undefined;
+ }
+ for ( type in types ) {
+ this.on( type, selector, data, types[ type ], one );
+ }
+ return this;
+ }
+
+ if ( data == null && fn == null ) {
+ // ( types, fn )
+ fn = selector;
+ data = selector = undefined;
+ } else if ( fn == null ) {
+ if ( typeof selector === "string" ) {
+ // ( types, selector, fn )
+ fn = data;
+ data = undefined;
+ } else {
+ // ( types, data, fn )
+ fn = data;
+ data = selector;
+ selector = undefined;
+ }
+ }
+ if ( fn === false ) {
+ fn = returnFalse;
+ } else if ( !fn ) {
+ return this;
+ }
+
+ if ( one === 1 ) {
+ origFn = fn;
+ fn = function( event ) {
+ // Can use an empty set, since event contains the info
+ jQuery().off( event );
+ return origFn.apply( this, arguments );
+ };
+ // Use same guid so caller can remove using origFn
+ fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
+ }
+ return this.each( function() {
+ jQuery.event.add( this, types, fn, data, selector );
+ });
+ },
+ one: function( types, selector, data, fn ) {
+ return this.on.call( this, types, selector, data, fn, 1 );
+ },
+ off: function( types, selector, fn ) {
+ if ( types && types.preventDefault && types.handleObj ) {
+ // ( event ) dispatched jQuery.Event
+ var handleObj = types.handleObj;
+ jQuery( types.delegateTarget ).off(
+ handleObj.namespace? handleObj.type + "." + handleObj.namespace : handleObj.type,
+ handleObj.selector,
+ handleObj.handler
+ );
+ return this;
+ }
+ if ( typeof types === "object" ) {
+ // ( types-object [, selector] )
+ for ( var type in types ) {
+ this.off( type, selector, types[ type ] );
+ }
+ return this;
+ }
+ if ( selector === false || typeof selector === "function" ) {
+ // ( types [, fn] )
+ fn = selector;
+ selector = undefined;
+ }
+ if ( fn === false ) {
+ fn = returnFalse;
+ }
+ return this.each(function() {
+ jQuery.event.remove( this, types, fn, selector );
+ });
+ },
+
+ bind: function( types, data, fn ) {
+ return this.on( types, null, data, fn );
+ },
+ unbind: function( types, fn ) {
+ return this.off( types, null, fn );
+ },
+
+ live: function( types, data, fn ) {
+ jQuery( this.context ).on( types, this.selector, data, fn );
+ return this;
+ },
+ die: function( types, fn ) {
+ jQuery( this.context ).off( types, this.selector || "**", fn );
+ return this;
+ },
+
+ delegate: function( selector, types, data, fn ) {
+ return this.on( types, selector, data, fn );
+ },
+ undelegate: function( selector, types, fn ) {
+ // ( namespace ) or ( selector, types [, fn] )
+ return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
+ },
+
+ trigger: function( type, data ) {
+ return this.each(function() {
+ jQuery.event.trigger( type, data, this );
+ });
+ },
+ triggerHandler: function( type, data ) {
+ if ( this[0] ) {
+ return jQuery.event.trigger( type, data, this[0], true );
+ }
+ },
+
+ toggle: function( fn ) {
+ // Save reference to arguments for access in closure
+ var args = arguments,
+ guid = fn.guid || jQuery.guid++,
+ i = 0,
+ toggler = function( event ) {
+ // Figure out which function to execute
+ var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
+ jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
+
+ // Make sure that clicks stop
+ event.preventDefault();
+
+ // and execute the function
+ return args[ lastToggle ].apply( this, arguments ) || false;
+ };
+
+ // link all the functions, so any of them can unbind this click handler
+ toggler.guid = guid;
+ while ( i < args.length ) {
+ args[ i++ ].guid = guid;
+ }
+
+ return this.click( toggler );
+ },
+
+ hover: function( fnOver, fnOut ) {
+ return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
+ }
+});
+
+jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
+ "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
+ "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
+
+ // Handle event binding
+ jQuery.fn[ name ] = function( data, fn ) {
+ if ( fn == null ) {
+ fn = data;
+ data = null;
+ }
+
+ return arguments.length > 0 ?
+ this.on( name, null, data, fn ) :
+ this.trigger( name );
+ };
+
+ if ( jQuery.attrFn ) {
+ jQuery.attrFn[ name ] = true;
+ }
+
+ if ( rkeyEvent.test( name ) ) {
+ jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks;
+ }
+
+ if ( rmouseEvent.test( name ) ) {
+ jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks;
+ }
+});
+
+
+
+/*!
+ * Sizzle CSS Selector Engine
+ * Copyright 2011, The Dojo Foundation
+ * Released under the MIT, BSD, and GPL Licenses.
+ * More information: http://sizzlejs.com/
+ */
+(function(){
+
+var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,
+ expando = "sizcache" + (Math.random() + '').replace('.', ''),
+ done = 0,
+ toString = Object.prototype.toString,
+ hasDuplicate = false,
+ baseHasDuplicate = true,
+ rBackslash = /\\/g,
+ rReturn = /\r\n/g,
+ rNonWord = /\W/;
+
+// Here we check if the JavaScript engine is using some sort of
+// optimization where it does not always call our comparision
+// function. If that is the case, discard the hasDuplicate value.
+// Thus far that includes Google Chrome.
+[0, 0].sort(function() {
+ baseHasDuplicate = false;
+ return 0;
+});
+
+var Sizzle = function( selector, context, results, seed ) {
+ results = results || [];
+ context = context || document;
+
+ var origContext = context;
+
+ if ( context.nodeType !== 1 && context.nodeType !== 9 ) {
+ return [];
+ }
+
+ if ( !selector || typeof selector !== "string" ) {
+ return results;
+ }
+
+ var m, set, checkSet, extra, ret, cur, pop, i,
+ prune = true,
+ contextXML = Sizzle.isXML( context ),
+ parts = [],
+ soFar = selector;
+
+ // Reset the position of the chunker regexp (start from head)
+ do {
+ chunker.exec( "" );
+ m = chunker.exec( soFar );
+
+ if ( m ) {
+ soFar = m[3];
+
+ parts.push( m[1] );
+
+ if ( m[2] ) {
+ extra = m[3];
+ break;
+ }
+ }
+ } while ( m );
+
+ if ( parts.length > 1 && origPOS.exec( selector ) ) {
+
+ if ( parts.length === 2 && Expr.relative[ parts[0] ] ) {
+ set = posProcess( parts[0] + parts[1], context, seed );
+
+ } else {
+ set = Expr.relative[ parts[0] ] ?
+ [ context ] :
+ Sizzle( parts.shift(), context );
+
+ while ( parts.length ) {
+ selector = parts.shift();
+
+ if ( Expr.relative[ selector ] ) {
+ selector += parts.shift();
+ }
+
+ set = posProcess( selector, set, seed );
+ }
+ }
+
+ } else {
+ // Take a shortcut and set the context if the root selector is an ID
+ // (but not if it'll be faster if the inner selector is an ID)
+ if ( !seed && parts.length > 1 && context.nodeType === 9 && !contextXML &&
+ Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1]) ) {
+
+ ret = Sizzle.find( parts.shift(), context, contextXML );
+ context = ret.expr ?
+ Sizzle.filter( ret.expr, ret.set )[0] :
+ ret.set[0];
+ }
+
+ if ( context ) {
+ ret = seed ?
+ { expr: parts.pop(), set: makeArray(seed) } :
+ Sizzle.find( parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML );
+
+ set = ret.expr ?
+ Sizzle.filter( ret.expr, ret.set ) :
+ ret.set;
+
+ if ( parts.length > 0 ) {
+ checkSet = makeArray( set );
+
+ } else {
+ prune = false;
+ }
+
+ while ( parts.length ) {
+ cur = parts.pop();
+ pop = cur;
+
+ if ( !Expr.relative[ cur ] ) {
+ cur = "";
+ } else {
+ pop = parts.pop();
+ }
+
+ if ( pop == null ) {
+ pop = context;
+ }
+
+ Expr.relative[ cur ]( checkSet, pop, contextXML );
+ }
+
+ } else {
+ checkSet = parts = [];
+ }
+ }
+
+ if ( !checkSet ) {
+ checkSet = set;
+ }
+
+ if ( !checkSet ) {
+ Sizzle.error( cur || selector );
+ }
+
+ if ( toString.call(checkSet) === "[object Array]" ) {
+ if ( !prune ) {
+ results.push.apply( results, checkSet );
+
+ } else if ( context && context.nodeType === 1 ) {
+ for ( i = 0; checkSet[i] != null; i++ ) {
+ if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) {
+ results.push( set[i] );
+ }
+ }
+
+ } else {
+ for ( i = 0; checkSet[i] != null; i++ ) {
+ if ( checkSet[i] && checkSet[i].nodeType === 1 ) {
+ results.push( set[i] );
+ }
+ }
+ }
+
+ } else {
+ makeArray( checkSet, results );
+ }
+
+ if ( extra ) {
+ Sizzle( extra, origContext, results, seed );
+ Sizzle.uniqueSort( results );
+ }
+
+ return results;
+};
+
+Sizzle.uniqueSort = function( results ) {
+ if ( sortOrder ) {
+ hasDuplicate = baseHasDuplicate;
+ results.sort( sortOrder );
+
+ if ( hasDuplicate ) {
+ for ( var i = 1; i < results.length; i++ ) {
+ if ( results[i] === results[ i - 1 ] ) {
+ results.splice( i--, 1 );
+ }
+ }
+ }
+ }
+
+ return results;
+};
+
+Sizzle.matches = function( expr, set ) {
+ return Sizzle( expr, null, null, set );
+};
+
+Sizzle.matchesSelector = function( node, expr ) {
+ return Sizzle( expr, null, null, [node] ).length > 0;
+};
+
+Sizzle.find = function( expr, context, isXML ) {
+ var set, i, len, match, type, left;
+
+ if ( !expr ) {
+ return [];
+ }
+
+ for ( i = 0, len = Expr.order.length; i < len; i++ ) {
+ type = Expr.order[i];
+
+ if ( (match = Expr.leftMatch[ type ].exec( expr )) ) {
+ left = match[1];
+ match.splice( 1, 1 );
+
+ if ( left.substr( left.length - 1 ) !== "\\" ) {
+ match[1] = (match[1] || "").replace( rBackslash, "" );
+ set = Expr.find[ type ]( match, context, isXML );
+
+ if ( set != null ) {
+ expr = expr.replace( Expr.match[ type ], "" );
+ break;
+ }
+ }
+ }
+ }
+
+ if ( !set ) {
+ set = typeof context.getElementsByTagName !== "undefined" ?
+ context.getElementsByTagName( "*" ) :
+ [];
+ }
+
+ return { set: set, expr: expr };
+};
+
+Sizzle.filter = function( expr, set, inplace, not ) {
+ var match, anyFound,
+ type, found, item, filter, left,
+ i, pass,
+ old = expr,
+ result = [],
+ curLoop = set,
+ isXMLFilter = set && set[0] && Sizzle.isXML( set[0] );
+
+ while ( expr && set.length ) {
+ for ( type in Expr.filter ) {
+ if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) {
+ filter = Expr.filter[ type ];
+ left = match[1];
+
+ anyFound = false;
+
+ match.splice(1,1);
+
+ if ( left.substr( left.length - 1 ) === "\\" ) {
+ continue;
+ }
+
+ if ( curLoop === result ) {
+ result = [];
+ }
+
+ if ( Expr.preFilter[ type ] ) {
+ match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter );
+
+ if ( !match ) {
+ anyFound = found = true;
+
+ } else if ( match === true ) {
+ continue;
+ }
+ }
+
+ if ( match ) {
+ for ( i = 0; (item = curLoop[i]) != null; i++ ) {
+ if ( item ) {
+ found = filter( item, match, i, curLoop );
+ pass = not ^ found;
+
+ if ( inplace && found != null ) {
+ if ( pass ) {
+ anyFound = true;
+
+ } else {
+ curLoop[i] = false;
+ }
+
+ } else if ( pass ) {
+ result.push( item );
+ anyFound = true;
+ }
+ }
+ }
+ }
+
+ if ( found !== undefined ) {
+ if ( !inplace ) {
+ curLoop = result;
+ }
+
+ expr = expr.replace( Expr.match[ type ], "" );
+
+ if ( !anyFound ) {
+ return [];
+ }
+
+ break;
+ }
+ }
+ }
+
+ // Improper expression
+ if ( expr === old ) {
+ if ( anyFound == null ) {
+ Sizzle.error( expr );
+
+ } else {
+ break;
+ }
+ }
+
+ old = expr;
+ }
+
+ return curLoop;
+};
+
+Sizzle.error = function( msg ) {
+ throw new Error( "Syntax error, unrecognized expression: " + msg );
+};
+
+/**
+ * Utility function for retreiving the text value of an array of DOM nodes
+ * @param {Array|Element} elem
+ */
+var getText = Sizzle.getText = function( elem ) {
+ var i, node,
+ nodeType = elem.nodeType,
+ ret = "";
+
+ if ( nodeType ) {
+ if ( nodeType === 1 || nodeType === 9 ) {
+ // Use textContent || innerText for elements
+ if ( typeof elem.textContent === 'string' ) {
+ return elem.textContent;
+ } else if ( typeof elem.innerText === 'string' ) {
+ // Replace IE's carriage returns
+ return elem.innerText.replace( rReturn, '' );
+ } else {
+ // Traverse it's children
+ for ( elem = elem.firstChild; elem; elem = elem.nextSibling) {
+ ret += getText( elem );
+ }
+ }
+ } else if ( nodeType === 3 || nodeType === 4 ) {
+ return elem.nodeValue;
+ }
+ } else {
+
+ // If no nodeType, this is expected to be an array
+ for ( i = 0; (node = elem[i]); i++ ) {
+ // Do not traverse comment nodes
+ if ( node.nodeType !== 8 ) {
+ ret += getText( node );
+ }
+ }
+ }
+ return ret;
+};
+
+var Expr = Sizzle.selectors = {
+ order: [ "ID", "NAME", "TAG" ],
+
+ match: {
+ ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,
+ CLASS: /\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,
+ NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,
+ ATTR: /\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,
+ TAG: /^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,
+ CHILD: /:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,
+ POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,
+ PSEUDO: /:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/
+ },
+
+ leftMatch: {},
+
+ attrMap: {
+ "class": "className",
+ "for": "htmlFor"
+ },
+
+ attrHandle: {
+ href: function( elem ) {
+ return elem.getAttribute( "href" );
+ },
+ type: function( elem ) {
+ return elem.getAttribute( "type" );
+ }
+ },
+
+ relative: {
+ "+": function(checkSet, part){
+ var isPartStr = typeof part === "string",
+ isTag = isPartStr && !rNonWord.test( part ),
+ isPartStrNotTag = isPartStr && !isTag;
+
+ if ( isTag ) {
+ part = part.toLowerCase();
+ }
+
+ for ( var i = 0, l = checkSet.length, elem; i < l; i++ ) {
+ if ( (elem = checkSet[i]) ) {
+ while ( (elem = elem.previousSibling) && elem.nodeType !== 1 ) {}
+
+ checkSet[i] = isPartStrNotTag || elem && elem.nodeName.toLowerCase() === part ?
+ elem || false :
+ elem === part;
+ }
+ }
+
+ if ( isPartStrNotTag ) {
+ Sizzle.filter( part, checkSet, true );
+ }
+ },
+
+ ">": function( checkSet, part ) {
+ var elem,
+ isPartStr = typeof part === "string",
+ i = 0,
+ l = checkSet.length;
+
+ if ( isPartStr && !rNonWord.test( part ) ) {
+ part = part.toLowerCase();
+
+ for ( ; i < l; i++ ) {
+ elem = checkSet[i];
+
+ if ( elem ) {
+ var parent = elem.parentNode;
+ checkSet[i] = parent.nodeName.toLowerCase() === part ? parent : false;
+ }
+ }
+
+ } else {
+ for ( ; i < l; i++ ) {
+ elem = checkSet[i];
+
+ if ( elem ) {
+ checkSet[i] = isPartStr ?
+ elem.parentNode :
+ elem.parentNode === part;
+ }
+ }
+
+ if ( isPartStr ) {
+ Sizzle.filter( part, checkSet, true );
+ }
+ }
+ },
+
+ "": function(checkSet, part, isXML){
+ var nodeCheck,
+ doneName = done++,
+ checkFn = dirCheck;
+
+ if ( typeof part === "string" && !rNonWord.test( part ) ) {
+ part = part.toLowerCase();
+ nodeCheck = part;
+ checkFn = dirNodeCheck;
+ }
+
+ checkFn( "parentNode", part, doneName, checkSet, nodeCheck, isXML );
+ },
+
+ "~": function( checkSet, part, isXML ) {
+ var nodeCheck,
+ doneName = done++,
+ checkFn = dirCheck;
+
+ if ( typeof part === "string" && !rNonWord.test( part ) ) {
+ part = part.toLowerCase();
+ nodeCheck = part;
+ checkFn = dirNodeCheck;
+ }
+
+ checkFn( "previousSibling", part, doneName, checkSet, nodeCheck, isXML );
+ }
+ },
+
+ find: {
+ ID: function( match, context, isXML ) {
+ if ( typeof context.getElementById !== "undefined" && !isXML ) {
+ var m = context.getElementById(match[1]);
+ // Check parentNode to catch when Blackberry 4.6 returns
+ // nodes that are no longer in the document #6963
+ return m && m.parentNode ? [m] : [];
+ }
+ },
+
+ NAME: function( match, context ) {
+ if ( typeof context.getElementsByName !== "undefined" ) {
+ var ret = [],
+ results = context.getElementsByName( match[1] );
+
+ for ( var i = 0, l = results.length; i < l; i++ ) {
+ if ( results[i].getAttribute("name") === match[1] ) {
+ ret.push( results[i] );
+ }
+ }
+
+ return ret.length === 0 ? null : ret;
+ }
+ },
+
+ TAG: function( match, context ) {
+ if ( typeof context.getElementsByTagName !== "undefined" ) {
+ return context.getElementsByTagName( match[1] );
+ }
+ }
+ },
+ preFilter: {
+ CLASS: function( match, curLoop, inplace, result, not, isXML ) {
+ match = " " + match[1].replace( rBackslash, "" ) + " ";
+
+ if ( isXML ) {
+ return match;
+ }
+
+ for ( var i = 0, elem; (elem = curLoop[i]) != null; i++ ) {
+ if ( elem ) {
+ if ( not ^ (elem.className && (" " + elem.className + " ").replace(/[\t\n\r]/g, " ").indexOf(match) >= 0) ) {
+ if ( !inplace ) {
+ result.push( elem );
+ }
+
+ } else if ( inplace ) {
+ curLoop[i] = false;
+ }
+ }
+ }
+
+ return false;
+ },
+
+ ID: function( match ) {
+ return match[1].replace( rBackslash, "" );
+ },
+
+ TAG: function( match, curLoop ) {
+ return match[1].replace( rBackslash, "" ).toLowerCase();
+ },
+
+ CHILD: function( match ) {
+ if ( match[1] === "nth" ) {
+ if ( !match[2] ) {
+ Sizzle.error( match[0] );
+ }
+
+ match[2] = match[2].replace(/^\+|\s*/g, '');
+
+ // parse equations like 'even', 'odd', '5', '2n', '3n+2', '4n-1', '-n+6'
+ var test = /(-?)(\d*)(?:n([+\-]?\d*))?/.exec(
+ match[2] === "even" && "2n" || match[2] === "odd" && "2n+1" ||
+ !/\D/.test( match[2] ) && "0n+" + match[2] || match[2]);
+
+ // calculate the numbers (first)n+(last) including if they are negative
+ match[2] = (test[1] + (test[2] || 1)) - 0;
+ match[3] = test[3] - 0;
+ }
+ else if ( match[2] ) {
+ Sizzle.error( match[0] );
+ }
+
+ // TODO: Move to normal caching system
+ match[0] = done++;
+
+ return match;
+ },
+
+ ATTR: function( match, curLoop, inplace, result, not, isXML ) {
+ var name = match[1] = match[1].replace( rBackslash, "" );
+
+ if ( !isXML && Expr.attrMap[name] ) {
+ match[1] = Expr.attrMap[name];
+ }
+
+ // Handle if an un-quoted value was used
+ match[4] = ( match[4] || match[5] || "" ).replace( rBackslash, "" );
+
+ if ( match[2] === "~=" ) {
+ match[4] = " " + match[4] + " ";
+ }
+
+ return match;
+ },
+
+ PSEUDO: function( match, curLoop, inplace, result, not ) {
+ if ( match[1] === "not" ) {
+ // If we're dealing with a complex expression, or a simple one
+ if ( ( chunker.exec(match[3]) || "" ).length > 1 || /^\w/.test(match[3]) ) {
+ match[3] = Sizzle(match[3], null, null, curLoop);
+
+ } else {
+ var ret = Sizzle.filter(match[3], curLoop, inplace, true ^ not);
+
+ if ( !inplace ) {
+ result.push.apply( result, ret );
+ }
+
+ return false;
+ }
+
+ } else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) {
+ return true;
+ }
+
+ return match;
+ },
+
+ POS: function( match ) {
+ match.unshift( true );
+
+ return match;
+ }
+ },
+
+ filters: {
+ enabled: function( elem ) {
+ return elem.disabled === false && elem.type !== "hidden";
+ },
+
+ disabled: function( elem ) {
+ return elem.disabled === true;
+ },
+
+ checked: function( elem ) {
+ return elem.checked === true;
+ },
+
+ selected: function( elem ) {
+ // Accessing this property makes selected-by-default
+ // options in Safari work properly
+ if ( elem.parentNode ) {
+ elem.parentNode.selectedIndex;
+ }
+
+ return elem.selected === true;
+ },
+
+ parent: function( elem ) {
+ return !!elem.firstChild;
+ },
+
+ empty: function( elem ) {
+ return !elem.firstChild;
+ },
+
+ has: function( elem, i, match ) {
+ return !!Sizzle( match[3], elem ).length;
+ },
+
+ header: function( elem ) {
+ return (/h\d/i).test( elem.nodeName );
+ },
+
+ text: function( elem ) {
+ var attr = elem.getAttribute( "type" ), type = elem.type;
+ // IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc)
+ // use getAttribute instead to test this case
+ return elem.nodeName.toLowerCase() === "input" && "text" === type && ( attr === type || attr === null );
+ },
+
+ radio: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "radio" === elem.type;
+ },
+
+ checkbox: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "checkbox" === elem.type;
+ },
+
+ file: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "file" === elem.type;
+ },
+
+ password: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "password" === elem.type;
+ },
+
+ submit: function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return (name === "input" || name === "button") && "submit" === elem.type;
+ },
+
+ image: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "image" === elem.type;
+ },
+
+ reset: function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return (name === "input" || name === "button") && "reset" === elem.type;
+ },
+
+ button: function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return name === "input" && "button" === elem.type || name === "button";
+ },
+
+ input: function( elem ) {
+ return (/input|select|textarea|button/i).test( elem.nodeName );
+ },
+
+ focus: function( elem ) {
+ return elem === elem.ownerDocument.activeElement;
+ }
+ },
+ setFilters: {
+ first: function( elem, i ) {
+ return i === 0;
+ },
+
+ last: function( elem, i, match, array ) {
+ return i === array.length - 1;
+ },
+
+ even: function( elem, i ) {
+ return i % 2 === 0;
+ },
+
+ odd: function( elem, i ) {
+ return i % 2 === 1;
+ },
+
+ lt: function( elem, i, match ) {
+ return i < match[3] - 0;
+ },
+
+ gt: function( elem, i, match ) {
+ return i > match[3] - 0;
+ },
+
+ nth: function( elem, i, match ) {
+ return match[3] - 0 === i;
+ },
+
+ eq: function( elem, i, match ) {
+ return match[3] - 0 === i;
+ }
+ },
+ filter: {
+ PSEUDO: function( elem, match, i, array ) {
+ var name = match[1],
+ filter = Expr.filters[ name ];
+
+ if ( filter ) {
+ return filter( elem, i, match, array );
+
+ } else if ( name === "contains" ) {
+ return (elem.textContent || elem.innerText || getText([ elem ]) || "").indexOf(match[3]) >= 0;
+
+ } else if ( name === "not" ) {
+ var not = match[3];
+
+ for ( var j = 0, l = not.length; j < l; j++ ) {
+ if ( not[j] === elem ) {
+ return false;
+ }
+ }
+
+ return true;
+
+ } else {
+ Sizzle.error( name );
+ }
+ },
+
+ CHILD: function( elem, match ) {
+ var first, last,
+ doneName, parent, cache,
+ count, diff,
+ type = match[1],
+ node = elem;
+
+ switch ( type ) {
+ case "only":
+ case "first":
+ while ( (node = node.previousSibling) ) {
+ if ( node.nodeType === 1 ) {
+ return false;
+ }
+ }
+
+ if ( type === "first" ) {
+ return true;
+ }
+
+ node = elem;
+
+ case "last":
+ while ( (node = node.nextSibling) ) {
+ if ( node.nodeType === 1 ) {
+ return false;
+ }
+ }
+
+ return true;
+
+ case "nth":
+ first = match[2];
+ last = match[3];
+
+ if ( first === 1 && last === 0 ) {
+ return true;
+ }
+
+ doneName = match[0];
+ parent = elem.parentNode;
+
+ if ( parent && (parent[ expando ] !== doneName || !elem.nodeIndex) ) {
+ count = 0;
+
+ for ( node = parent.firstChild; node; node = node.nextSibling ) {
+ if ( node.nodeType === 1 ) {
+ node.nodeIndex = ++count;
+ }
+ }
+
+ parent[ expando ] = doneName;
+ }
+
+ diff = elem.nodeIndex - last;
+
+ if ( first === 0 ) {
+ return diff === 0;
+
+ } else {
+ return ( diff % first === 0 && diff / first >= 0 );
+ }
+ }
+ },
+
+ ID: function( elem, match ) {
+ return elem.nodeType === 1 && elem.getAttribute("id") === match;
+ },
+
+ TAG: function( elem, match ) {
+ return (match === "*" && elem.nodeType === 1) || !!elem.nodeName && elem.nodeName.toLowerCase() === match;
+ },
+
+ CLASS: function( elem, match ) {
+ return (" " + (elem.className || elem.getAttribute("class")) + " ")
+ .indexOf( match ) > -1;
+ },
+
+ ATTR: function( elem, match ) {
+ var name = match[1],
+ result = Sizzle.attr ?
+ Sizzle.attr( elem, name ) :
+ Expr.attrHandle[ name ] ?
+ Expr.attrHandle[ name ]( elem ) :
+ elem[ name ] != null ?
+ elem[ name ] :
+ elem.getAttribute( name ),
+ value = result + "",
+ type = match[2],
+ check = match[4];
+
+ return result == null ?
+ type === "!=" :
+ !type && Sizzle.attr ?
+ result != null :
+ type === "=" ?
+ value === check :
+ type === "*=" ?
+ value.indexOf(check) >= 0 :
+ type === "~=" ?
+ (" " + value + " ").indexOf(check) >= 0 :
+ !check ?
+ value && result !== false :
+ type === "!=" ?
+ value !== check :
+ type === "^=" ?
+ value.indexOf(check) === 0 :
+ type === "$=" ?
+ value.substr(value.length - check.length) === check :
+ type === "|=" ?
+ value === check || value.substr(0, check.length + 1) === check + "-" :
+ false;
+ },
+
+ POS: function( elem, match, i, array ) {
+ var name = match[2],
+ filter = Expr.setFilters[ name ];
+
+ if ( filter ) {
+ return filter( elem, i, match, array );
+ }
+ }
+ }
+};
+
+var origPOS = Expr.match.POS,
+ fescape = function(all, num){
+ return "\\" + (num - 0 + 1);
+ };
+
+for ( var type in Expr.match ) {
+ Expr.match[ type ] = new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) );
+ Expr.leftMatch[ type ] = new RegExp( /(^(?:.|\r|\n)*?)/.source + Expr.match[ type ].source.replace(/\\(\d+)/g, fescape) );
+}
+
+var makeArray = function( array, results ) {
+ array = Array.prototype.slice.call( array, 0 );
+
+ if ( results ) {
+ results.push.apply( results, array );
+ return results;
+ }
+
+ return array;
+};
+
+// Perform a simple check to determine if the browser is capable of
+// converting a NodeList to an array using builtin methods.
+// Also verifies that the returned array holds DOM nodes
+// (which is not the case in the Blackberry browser)
+try {
+ Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;
+
+// Provide a fallback method if it does not work
+} catch( e ) {
+ makeArray = function( array, results ) {
+ var i = 0,
+ ret = results || [];
+
+ if ( toString.call(array) === "[object Array]" ) {
+ Array.prototype.push.apply( ret, array );
+
+ } else {
+ if ( typeof array.length === "number" ) {
+ for ( var l = array.length; i < l; i++ ) {
+ ret.push( array[i] );
+ }
+
+ } else {
+ for ( ; array[i]; i++ ) {
+ ret.push( array[i] );
+ }
+ }
+ }
+
+ return ret;
+ };
+}
+
+var sortOrder, siblingCheck;
+
+if ( document.documentElement.compareDocumentPosition ) {
+ sortOrder = function( a, b ) {
+ if ( a === b ) {
+ hasDuplicate = true;
+ return 0;
+ }
+
+ if ( !a.compareDocumentPosition || !b.compareDocumentPosition ) {
+ return a.compareDocumentPosition ? -1 : 1;
+ }
+
+ return a.compareDocumentPosition(b) & 4 ? -1 : 1;
+ };
+
+} else {
+ sortOrder = function( a, b ) {
+ // The nodes are identical, we can exit early
+ if ( a === b ) {
+ hasDuplicate = true;
+ return 0;
+
+ // Fallback to using sourceIndex (in IE) if it's available on both nodes
+ } else if ( a.sourceIndex && b.sourceIndex ) {
+ return a.sourceIndex - b.sourceIndex;
+ }
+
+ var al, bl,
+ ap = [],
+ bp = [],
+ aup = a.parentNode,
+ bup = b.parentNode,
+ cur = aup;
+
+ // If the nodes are siblings (or identical) we can do a quick check
+ if ( aup === bup ) {
+ return siblingCheck( a, b );
+
+ // If no parents were found then the nodes are disconnected
+ } else if ( !aup ) {
+ return -1;
+
+ } else if ( !bup ) {
+ return 1;
+ }
+
+ // Otherwise they're somewhere else in the tree so we need
+ // to build up a full list of the parentNodes for comparison
+ while ( cur ) {
+ ap.unshift( cur );
+ cur = cur.parentNode;
+ }
+
+ cur = bup;
+
+ while ( cur ) {
+ bp.unshift( cur );
+ cur = cur.parentNode;
+ }
+
+ al = ap.length;
+ bl = bp.length;
+
+ // Start walking down the tree looking for a discrepancy
+ for ( var i = 0; i < al && i < bl; i++ ) {
+ if ( ap[i] !== bp[i] ) {
+ return siblingCheck( ap[i], bp[i] );
+ }
+ }
+
+ // We ended someplace up the tree so do a sibling check
+ return i === al ?
+ siblingCheck( a, bp[i], -1 ) :
+ siblingCheck( ap[i], b, 1 );
+ };
+
+ siblingCheck = function( a, b, ret ) {
+ if ( a === b ) {
+ return ret;
+ }
+
+ var cur = a.nextSibling;
+
+ while ( cur ) {
+ if ( cur === b ) {
+ return -1;
+ }
+
+ cur = cur.nextSibling;
+ }
+
+ return 1;
+ };
+}
+
+// Check to see if the browser returns elements by name when
+// querying by getElementById (and provide a workaround)
+(function(){
+ // We're going to inject a fake input element with a specified name
+ var form = document.createElement("div"),
+ id = "script" + (new Date()).getTime(),
+ root = document.documentElement;
+
+ form.innerHTML = "<a name='" + id + "'/>";
+
+ // Inject it into the root element, check its status, and remove it quickly
+ root.insertBefore( form, root.firstChild );
+
+ // The workaround has to do additional checks after a getElementById
+ // Which slows things down for other browsers (hence the branching)
+ if ( document.getElementById( id ) ) {
+ Expr.find.ID = function( match, context, isXML ) {
+ if ( typeof context.getElementById !== "undefined" && !isXML ) {
+ var m = context.getElementById(match[1]);
+
+ return m ?
+ m.id === match[1] || typeof m.getAttributeNode !== "undefined" && m.getAttributeNode("id").nodeValue === match[1] ?
+ [m] :
+ undefined :
+ [];
+ }
+ };
+
+ Expr.filter.ID = function( elem, match ) {
+ var node = typeof elem.getAttributeNode !== "undefined" && elem.getAttributeNode("id");
+
+ return elem.nodeType === 1 && node && node.nodeValue === match;
+ };
+ }
+
+ root.removeChild( form );
+
+ // release memory in IE
+ root = form = null;
+})();
+
+(function(){
+ // Check to see if the browser returns only elements
+ // when doing getElementsByTagName("*")
+
+ // Create a fake element
+ var div = document.createElement("div");
+ div.appendChild( document.createComment("") );
+
+ // Make sure no comments are found
+ if ( div.getElementsByTagName("*").length > 0 ) {
+ Expr.find.TAG = function( match, context ) {
+ var results = context.getElementsByTagName( match[1] );
+
+ // Filter out possible comments
+ if ( match[1] === "*" ) {
+ var tmp = [];
+
+ for ( var i = 0; results[i]; i++ ) {
+ if ( results[i].nodeType === 1 ) {
+ tmp.push( results[i] );
+ }
+ }
+
+ results = tmp;
+ }
+
+ return results;
+ };
+ }
+
+ // Check to see if an attribute returns normalized href attributes
+ div.innerHTML = "<a href='#'></a>";
+
+ if ( div.firstChild && typeof div.firstChild.getAttribute !== "undefined" &&
+ div.firstChild.getAttribute("href") !== "#" ) {
+
+ Expr.attrHandle.href = function( elem ) {
+ return elem.getAttribute( "href", 2 );
+ };
+ }
+
+ // release memory in IE
+ div = null;
+})();
+
+if ( document.querySelectorAll ) {
+ (function(){
+ var oldSizzle = Sizzle,
+ div = document.createElement("div"),
+ id = "__sizzle__";
+
+ div.innerHTML = "<p class='TEST'></p>";
+
+ // Safari can't handle uppercase or unicode characters when
+ // in quirks mode.
+ if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
+ return;
+ }
+
+ Sizzle = function( query, context, extra, seed ) {
+ context = context || document;
+
+ // Only use querySelectorAll on non-XML documents
+ // (ID selectors don't work in non-HTML documents)
+ if ( !seed && !Sizzle.isXML(context) ) {
+ // See if we find a selector to speed up
+ var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query );
+
+ if ( match && (context.nodeType === 1 || context.nodeType === 9) ) {
+ // Speed-up: Sizzle("TAG")
+ if ( match[1] ) {
+ return makeArray( context.getElementsByTagName( query ), extra );
+
+ // Speed-up: Sizzle(".CLASS")
+ } else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) {
+ return makeArray( context.getElementsByClassName( match[2] ), extra );
+ }
+ }
+
+ if ( context.nodeType === 9 ) {
+ // Speed-up: Sizzle("body")
+ // The body element only exists once, optimize finding it
+ if ( query === "body" && context.body ) {
+ return makeArray( [ context.body ], extra );
+
+ // Speed-up: Sizzle("#ID")
+ } else if ( match && match[3] ) {
+ var elem = context.getElementById( match[3] );
+
+ // Check parentNode to catch when Blackberry 4.6 returns
+ // nodes that are no longer in the document #6963
+ if ( elem && elem.parentNode ) {
+ // Handle the case where IE and Opera return items
+ // by name instead of ID
+ if ( elem.id === match[3] ) {
+ return makeArray( [ elem ], extra );
+ }
+
+ } else {
+ return makeArray( [], extra );
+ }
+ }
+
+ try {
+ return makeArray( context.querySelectorAll(query), extra );
+ } catch(qsaError) {}
+
+ // qSA works strangely on Element-rooted queries
+ // We can work around this by specifying an extra ID on the root
+ // and working up from there (Thanks to Andrew Dupont for the technique)
+ // IE 8 doesn't work on object elements
+ } else if ( context.nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
+ var oldContext = context,
+ old = context.getAttribute( "id" ),
+ nid = old || id,
+ hasParent = context.parentNode,
+ relativeHierarchySelector = /^\s*[+~]/.test( query );
+
+ if ( !old ) {
+ context.setAttribute( "id", nid );
+ } else {
+ nid = nid.replace( /'/g, "\\$&" );
+ }
+ if ( relativeHierarchySelector && hasParent ) {
+ context = context.parentNode;
+ }
+
+ try {
+ if ( !relativeHierarchySelector || hasParent ) {
+ return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );
+ }
+
+ } catch(pseudoError) {
+ } finally {
+ if ( !old ) {
+ oldContext.removeAttribute( "id" );
+ }
+ }
+ }
+ }
+
+ return oldSizzle(query, context, extra, seed);
+ };
+
+ for ( var prop in oldSizzle ) {
+ Sizzle[ prop ] = oldSizzle[ prop ];
+ }
+
+ // release memory in IE
+ div = null;
+ })();
+}
+
+(function(){
+ var html = document.documentElement,
+ matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector;
+
+ if ( matches ) {
+ // Check to see if it's possible to do matchesSelector
+ // on a disconnected node (IE 9 fails this)
+ var disconnectedMatch = !matches.call( document.createElement( "div" ), "div" ),
+ pseudoWorks = false;
+
+ try {
+ // This should fail with an exception
+ // Gecko does not error, returns false instead
+ matches.call( document.documentElement, "[test!='']:sizzle" );
+
+ } catch( pseudoError ) {
+ pseudoWorks = true;
+ }
+
+ Sizzle.matchesSelector = function( node, expr ) {
+ // Make sure that attribute selectors are quoted
+ expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']");
+
+ if ( !Sizzle.isXML( node ) ) {
+ try {
+ if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) {
+ var ret = matches.call( node, expr );
+
+ // IE 9's matchesSelector returns false on disconnected nodes
+ if ( ret || !disconnectedMatch ||
+ // As well, disconnected nodes are said to be in a document
+ // fragment in IE 9, so check for that
+ node.document && node.document.nodeType !== 11 ) {
+ return ret;
+ }
+ }
+ } catch(e) {}
+ }
+
+ return Sizzle(expr, null, null, [node]).length > 0;
+ };
+ }
+})();
+
+(function(){
+ var div = document.createElement("div");
+
+ div.innerHTML = "<div class='test e'></div><div class='test'></div>";
+
+ // Opera can't find a second classname (in 9.6)
+ // Also, make sure that getElementsByClassName actually exists
+ if ( !div.getElementsByClassName || div.getElementsByClassName("e").length === 0 ) {
+ return;
+ }
+
+ // Safari caches class attributes, doesn't catch changes (in 3.2)
+ div.lastChild.className = "e";
+
+ if ( div.getElementsByClassName("e").length === 1 ) {
+ return;
+ }
+
+ Expr.order.splice(1, 0, "CLASS");
+ Expr.find.CLASS = function( match, context, isXML ) {
+ if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) {
+ return context.getElementsByClassName(match[1]);
+ }
+ };
+
+ // release memory in IE
+ div = null;
+})();
+
+function dirNodeCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) {
+ for ( var i = 0, l = checkSet.length; i < l; i++ ) {
+ var elem = checkSet[i];
+
+ if ( elem ) {
+ var match = false;
+
+ elem = elem[dir];
+
+ while ( elem ) {
+ if ( elem[ expando ] === doneName ) {
+ match = checkSet[elem.sizset];
+ break;
+ }
+
+ if ( elem.nodeType === 1 && !isXML ){
+ elem[ expando ] = doneName;
+ elem.sizset = i;
+ }
+
+ if ( elem.nodeName.toLowerCase() === cur ) {
+ match = elem;
+ break;
+ }
+
+ elem = elem[dir];
+ }
+
+ checkSet[i] = match;
+ }
+ }
+}
+
+function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) {
+ for ( var i = 0, l = checkSet.length; i < l; i++ ) {
+ var elem = checkSet[i];
+
+ if ( elem ) {
+ var match = false;
+
+ elem = elem[dir];
+
+ while ( elem ) {
+ if ( elem[ expando ] === doneName ) {
+ match = checkSet[elem.sizset];
+ break;
+ }
+
+ if ( elem.nodeType === 1 ) {
+ if ( !isXML ) {
+ elem[ expando ] = doneName;
+ elem.sizset = i;
+ }
+
+ if ( typeof cur !== "string" ) {
+ if ( elem === cur ) {
+ match = true;
+ break;
+ }
+
+ } else if ( Sizzle.filter( cur, [elem] ).length > 0 ) {
+ match = elem;
+ break;
+ }
+ }
+
+ elem = elem[dir];
+ }
+
+ checkSet[i] = match;
+ }
+ }
+}
+
+if ( document.documentElement.contains ) {
+ Sizzle.contains = function( a, b ) {
+ return a !== b && (a.contains ? a.contains(b) : true);
+ };
+
+} else if ( document.documentElement.compareDocumentPosition ) {
+ Sizzle.contains = function( a, b ) {
+ return !!(a.compareDocumentPosition(b) & 16);
+ };
+
+} else {
+ Sizzle.contains = function() {
+ return false;
+ };
+}
+
+Sizzle.isXML = function( elem ) {
+ // documentElement is verified for cases where it doesn't yet exist
+ // (such as loading iframes in IE - #4833)
+ var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement;
+
+ return documentElement ? documentElement.nodeName !== "HTML" : false;
+};
+
+var posProcess = function( selector, context, seed ) {
+ var match,
+ tmpSet = [],
+ later = "",
+ root = context.nodeType ? [context] : context;
+
+ // Position selectors must be done after the filter
+ // And so must :not(positional) so we move all PSEUDOs to the end
+ while ( (match = Expr.match.PSEUDO.exec( selector )) ) {
+ later += match[0];
+ selector = selector.replace( Expr.match.PSEUDO, "" );
+ }
+
+ selector = Expr.relative[selector] ? selector + "*" : selector;
+
+ for ( var i = 0, l = root.length; i < l; i++ ) {
+ Sizzle( selector, root[i], tmpSet, seed );
+ }
+
+ return Sizzle.filter( later, tmpSet );
+};
+
+// EXPOSE
+// Override sizzle attribute retrieval
+Sizzle.attr = jQuery.attr;
+Sizzle.selectors.attrMap = {};
+jQuery.find = Sizzle;
+jQuery.expr = Sizzle.selectors;
+jQuery.expr[":"] = jQuery.expr.filters;
+jQuery.unique = Sizzle.uniqueSort;
+jQuery.text = Sizzle.getText;
+jQuery.isXMLDoc = Sizzle.isXML;
+jQuery.contains = Sizzle.contains;
+
+
+})();
+
+
+var runtil = /Until$/,
+ rparentsprev = /^(?:parents|prevUntil|prevAll)/,
+ // Note: This RegExp should be improved, or likely pulled from Sizzle
+ rmultiselector = /,/,
+ isSimple = /^.[^:#\[\.,]*$/,
+ slice = Array.prototype.slice,
+ POS = jQuery.expr.match.POS,
+ // methods guaranteed to produce a unique set when starting from a unique set
+ guaranteedUnique = {
+ children: true,
+ contents: true,
+ next: true,
+ prev: true
+ };
+
+jQuery.fn.extend({
+ find: function( selector ) {
+ var self = this,
+ i, l;
+
+ if ( typeof selector !== "string" ) {
+ return jQuery( selector ).filter(function() {
+ for ( i = 0, l = self.length; i < l; i++ ) {
+ if ( jQuery.contains( self[ i ], this ) ) {
+ return true;
+ }
+ }
+ });
+ }
+
+ var ret = this.pushStack( "", "find", selector ),
+ length, n, r;
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ length = ret.length;
+ jQuery.find( selector, this[i], ret );
+
+ if ( i > 0 ) {
+ // Make sure that the results are unique
+ for ( n = length; n < ret.length; n++ ) {
+ for ( r = 0; r < length; r++ ) {
+ if ( ret[r] === ret[n] ) {
+ ret.splice(n--, 1);
+ break;
+ }
+ }
+ }
+ }
+ }
+
+ return ret;
+ },
+
+ has: function( target ) {
+ var targets = jQuery( target );
+ return this.filter(function() {
+ for ( var i = 0, l = targets.length; i < l; i++ ) {
+ if ( jQuery.contains( this, targets[i] ) ) {
+ return true;
+ }
+ }
+ });
+ },
+
+ not: function( selector ) {
+ return this.pushStack( winnow(this, selector, false), "not", selector);
+ },
+
+ filter: function( selector ) {
+ return this.pushStack( winnow(this, selector, true), "filter", selector );
+ },
+
+ is: function( selector ) {
+ return !!selector && (
+ typeof selector === "string" ?
+ // If this is a positional selector, check membership in the returned set
+ // so $("p:first").is("p:last") won't return true for a doc with two "p".
+ POS.test( selector ) ?
+ jQuery( selector, this.context ).index( this[0] ) >= 0 :
+ jQuery.filter( selector, this ).length > 0 :
+ this.filter( selector ).length > 0 );
+ },
+
+ closest: function( selectors, context ) {
+ var ret = [], i, l, cur = this[0];
+
+ // Array (deprecated as of jQuery 1.7)
+ if ( jQuery.isArray( selectors ) ) {
+ var level = 1;
+
+ while ( cur && cur.ownerDocument && cur !== context ) {
+ for ( i = 0; i < selectors.length; i++ ) {
+
+ if ( jQuery( cur ).is( selectors[ i ] ) ) {
+ ret.push({ selector: selectors[ i ], elem: cur, level: level });
+ }
+ }
+
+ cur = cur.parentNode;
+ level++;
+ }
+
+ return ret;
+ }
+
+ // String
+ var pos = POS.test( selectors ) || typeof selectors !== "string" ?
+ jQuery( selectors, context || this.context ) :
+ 0;
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ cur = this[i];
+
+ while ( cur ) {
+ if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
+ ret.push( cur );
+ break;
+
+ } else {
+ cur = cur.parentNode;
+ if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {
+ break;
+ }
+ }
+ }
+ }
+
+ ret = ret.length > 1 ? jQuery.unique( ret ) : ret;
+
+ return this.pushStack( ret, "closest", selectors );
+ },
+
+ // Determine the position of an element within
+ // the matched set of elements
+ index: function( elem ) {
+
+ // No argument, return index in parent
+ if ( !elem ) {
+ return ( this[0] && this[0].parentNode ) ? this.prevAll().length : -1;
+ }
+
+ // index in selector
+ if ( typeof elem === "string" ) {
+ return jQuery.inArray( this[0], jQuery( elem ) );
+ }
+
+ // Locate the position of the desired element
+ return jQuery.inArray(
+ // If it receives a jQuery object, the first element is used
+ elem.jquery ? elem[0] : elem, this );
+ },
+
+ add: function( selector, context ) {
+ var set = typeof selector === "string" ?
+ jQuery( selector, context ) :
+ jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ),
+ all = jQuery.merge( this.get(), set );
+
+ return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ?
+ all :
+ jQuery.unique( all ) );
+ },
+
+ andSelf: function() {
+ return this.add( this.prevObject );
+ }
+});
+
+// A painfully simple check to see if an element is disconnected
+// from a document (should be improved, where feasible).
+function isDisconnected( node ) {
+ return !node || !node.parentNode || node.parentNode.nodeType === 11;
+}
+
+jQuery.each({
+ parent: function( elem ) {
+ var parent = elem.parentNode;
+ return parent && parent.nodeType !== 11 ? parent : null;
+ },
+ parents: function( elem ) {
+ return jQuery.dir( elem, "parentNode" );
+ },
+ parentsUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "parentNode", until );
+ },
+ next: function( elem ) {
+ return jQuery.nth( elem, 2, "nextSibling" );
+ },
+ prev: function( elem ) {
+ return jQuery.nth( elem, 2, "previousSibling" );
+ },
+ nextAll: function( elem ) {
+ return jQuery.dir( elem, "nextSibling" );
+ },
+ prevAll: function( elem ) {
+ return jQuery.dir( elem, "previousSibling" );
+ },
+ nextUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "nextSibling", until );
+ },
+ prevUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "previousSibling", until );
+ },
+ siblings: function( elem ) {
+ return jQuery.sibling( elem.parentNode.firstChild, elem );
+ },
+ children: function( elem ) {
+ return jQuery.sibling( elem.firstChild );
+ },
+ contents: function( elem ) {
+ return jQuery.nodeName( elem, "iframe" ) ?
+ elem.contentDocument || elem.contentWindow.document :
+ jQuery.makeArray( elem.childNodes );
+ }
+}, function( name, fn ) {
+ jQuery.fn[ name ] = function( until, selector ) {
+ var ret = jQuery.map( this, fn, until );
+
+ if ( !runtil.test( name ) ) {
+ selector = until;
+ }
+
+ if ( selector && typeof selector === "string" ) {
+ ret = jQuery.filter( selector, ret );
+ }
+
+ ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret;
+
+ if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) {
+ ret = ret.reverse();
+ }
+
+ return this.pushStack( ret, name, slice.call( arguments ).join(",") );
+ };
+});
+
+jQuery.extend({
+ filter: function( expr, elems, not ) {
+ if ( not ) {
+ expr = ":not(" + expr + ")";
+ }
+
+ return elems.length === 1 ?
+ jQuery.find.matchesSelector(elems[0], expr) ? [ elems[0] ] : [] :
+ jQuery.find.matches(expr, elems);
+ },
+
+ dir: function( elem, dir, until ) {
+ var matched = [],
+ cur = elem[ dir ];
+
+ while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
+ if ( cur.nodeType === 1 ) {
+ matched.push( cur );
+ }
+ cur = cur[dir];
+ }
+ return matched;
+ },
+
+ nth: function( cur, result, dir, elem ) {
+ result = result || 1;
+ var num = 0;
+
+ for ( ; cur; cur = cur[dir] ) {
+ if ( cur.nodeType === 1 && ++num === result ) {
+ break;
+ }
+ }
+
+ return cur;
+ },
+
+ sibling: function( n, elem ) {
+ var r = [];
+
+ for ( ; n; n = n.nextSibling ) {
+ if ( n.nodeType === 1 && n !== elem ) {
+ r.push( n );
+ }
+ }
+
+ return r;
+ }
+});
+
+// Implement the identical functionality for filter and not
+function winnow( elements, qualifier, keep ) {
+
+ // Can't pass null or undefined to indexOf in Firefox 4
+ // Set to 0 to skip string check
+ qualifier = qualifier || 0;
+
+ if ( jQuery.isFunction( qualifier ) ) {
+ return jQuery.grep(elements, function( elem, i ) {
+ var retVal = !!qualifier.call( elem, i, elem );
+ return retVal === keep;
+ });
+
+ } else if ( qualifier.nodeType ) {
+ return jQuery.grep(elements, function( elem, i ) {
+ return ( elem === qualifier ) === keep;
+ });
+
+ } else if ( typeof qualifier === "string" ) {
+ var filtered = jQuery.grep(elements, function( elem ) {
+ return elem.nodeType === 1;
+ });
+
+ if ( isSimple.test( qualifier ) ) {
+ return jQuery.filter(qualifier, filtered, !keep);
+ } else {
+ qualifier = jQuery.filter( qualifier, filtered );
+ }
+ }
+
+ return jQuery.grep(elements, function( elem, i ) {
+ return ( jQuery.inArray( elem, qualifier ) >= 0 ) === keep;
+ });
+}
+
+
+
+
+function createSafeFragment( document ) {
+ var list = nodeNames.split( "|" ),
+ safeFrag = document.createDocumentFragment();
+
+ if ( safeFrag.createElement ) {
+ while ( list.length ) {
+ safeFrag.createElement(
+ list.pop()
+ );
+ }
+ }
+ return safeFrag;
+}
+
+var nodeNames = "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|" +
+ "header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
+ rinlinejQuery = / jQuery\d+="(?:\d+|null)"/g,
+ rleadingWhitespace = /^\s+/,
+ rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,
+ rtagName = /<([\w:]+)/,
+ rtbody = /<tbody/i,
+ rhtml = /<|&#?\w+;/,
+ rnoInnerhtml = /<(?:script|style)/i,
+ rnocache = /<(?:script|object|embed|option|style)/i,
+ rnoshimcache = new RegExp("<(?:" + nodeNames + ")", "i"),
+ // checked="checked" or checked
+ rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
+ rscriptType = /\/(java|ecma)script/i,
+ rcleanScript = /^\s*<!(?:\[CDATA\[|\-\-)/,
+ wrapMap = {
+ option: [ 1, "<select multiple='multiple'>", "</select>" ],
+ legend: [ 1, "<fieldset>", "</fieldset>" ],
+ thead: [ 1, "<table>", "</table>" ],
+ tr: [ 2, "<table><tbody>", "</tbody></table>" ],
+ td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
+ col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
+ area: [ 1, "<map>", "</map>" ],
+ _default: [ 0, "", "" ]
+ },
+ safeFragment = createSafeFragment( document );
+
+wrapMap.optgroup = wrapMap.option;
+wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
+wrapMap.th = wrapMap.td;
+
+// IE can't serialize <link> and <script> tags normally
+if ( !jQuery.support.htmlSerialize ) {
+ wrapMap._default = [ 1, "div<div>", "</div>" ];
+}
+
+jQuery.fn.extend({
+ text: function( text ) {
+ if ( jQuery.isFunction(text) ) {
+ return this.each(function(i) {
+ var self = jQuery( this );
+
+ self.text( text.call(this, i, self.text()) );
+ });
+ }
+
+ if ( typeof text !== "object" && text !== undefined ) {
+ return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
+ }
+
+ return jQuery.text( this );
+ },
+
+ wrapAll: function( html ) {
+ if ( jQuery.isFunction( html ) ) {
+ return this.each(function(i) {
+ jQuery(this).wrapAll( html.call(this, i) );
+ });
+ }
+
+ if ( this[0] ) {
+ // The elements to wrap the target around
+ var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true);
+
+ if ( this[0].parentNode ) {
+ wrap.insertBefore( this[0] );
+ }
+
+ wrap.map(function() {
+ var elem = this;
+
+ while ( elem.firstChild && elem.firstChild.nodeType === 1 ) {
+ elem = elem.firstChild;
+ }
+
+ return elem;
+ }).append( this );
+ }
+
+ return this;
+ },
+
+ wrapInner: function( html ) {
+ if ( jQuery.isFunction( html ) ) {
+ return this.each(function(i) {
+ jQuery(this).wrapInner( html.call(this, i) );
+ });
+ }
+
+ return this.each(function() {
+ var self = jQuery( this ),
+ contents = self.contents();
+
+ if ( contents.length ) {
+ contents.wrapAll( html );
+
+ } else {
+ self.append( html );
+ }
+ });
+ },
+
+ wrap: function( html ) {
+ var isFunction = jQuery.isFunction( html );
+
+ return this.each(function(i) {
+ jQuery( this ).wrapAll( isFunction ? html.call(this, i) : html );
+ });
+ },
+
+ unwrap: function() {
+ return this.parent().each(function() {
+ if ( !jQuery.nodeName( this, "body" ) ) {
+ jQuery( this ).replaceWith( this.childNodes );
+ }
+ }).end();
+ },
+
+ append: function() {
+ return this.domManip(arguments, true, function( elem ) {
+ if ( this.nodeType === 1 ) {
+ this.appendChild( elem );
+ }
+ });
+ },
+
+ prepend: function() {
+ return this.domManip(arguments, true, function( elem ) {
+ if ( this.nodeType === 1 ) {
+ this.insertBefore( elem, this.firstChild );
+ }
+ });
+ },
+
+ before: function() {
+ if ( this[0] && this[0].parentNode ) {
+ return this.domManip(arguments, false, function( elem ) {
+ this.parentNode.insertBefore( elem, this );
+ });
+ } else if ( arguments.length ) {
+ var set = jQuery.clean( arguments );
+ set.push.apply( set, this.toArray() );
+ return this.pushStack( set, "before", arguments );
+ }
+ },
+
+ after: function() {
+ if ( this[0] && this[0].parentNode ) {
+ return this.domManip(arguments, false, function( elem ) {
+ this.parentNode.insertBefore( elem, this.nextSibling );
+ });
+ } else if ( arguments.length ) {
+ var set = this.pushStack( this, "after", arguments );
+ set.push.apply( set, jQuery.clean(arguments) );
+ return set;
+ }
+ },
+
+ // keepData is for internal use only--do not document
+ remove: function( selector, keepData ) {
+ for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
+ if ( !selector || jQuery.filter( selector, [ elem ] ).length ) {
+ if ( !keepData && elem.nodeType === 1 ) {
+ jQuery.cleanData( elem.getElementsByTagName("*") );
+ jQuery.cleanData( [ elem ] );
+ }
+
+ if ( elem.parentNode ) {
+ elem.parentNode.removeChild( elem );
+ }
+ }
+ }
+
+ return this;
+ },
+
+ empty: function() {
+ for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
+ // Remove element nodes and prevent memory leaks
+ if ( elem.nodeType === 1 ) {
+ jQuery.cleanData( elem.getElementsByTagName("*") );
+ }
+
+ // Remove any remaining nodes
+ while ( elem.firstChild ) {
+ elem.removeChild( elem.firstChild );
+ }
+ }
+
+ return this;
+ },
+
+ clone: function( dataAndEvents, deepDataAndEvents ) {
+ dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
+ deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;
+
+ return this.map( function () {
+ return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
+ });
+ },
+
+ html: function( value ) {
+ if ( value === undefined ) {
+ return this[0] && this[0].nodeType === 1 ?
+ this[0].innerHTML.replace(rinlinejQuery, "") :
+ null;
+
+ // See if we can take a shortcut and just use innerHTML
+ } else if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
+ (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
+ !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {
+
+ value = value.replace(rxhtmlTag, "<$1></$2>");
+
+ try {
+ for ( var i = 0, l = this.length; i < l; i++ ) {
+ // Remove element nodes and prevent memory leaks
+ if ( this[i].nodeType === 1 ) {
+ jQuery.cleanData( this[i].getElementsByTagName("*") );
+ this[i].innerHTML = value;
+ }
+ }
+
+ // If using innerHTML throws an exception, use the fallback method
+ } catch(e) {
+ this.empty().append( value );
+ }
+
+ } else if ( jQuery.isFunction( value ) ) {
+ this.each(function(i){
+ var self = jQuery( this );
+
+ self.html( value.call(this, i, self.html()) );
+ });
+
+ } else {
+ this.empty().append( value );
+ }
+
+ return this;
+ },
+
+ replaceWith: function( value ) {
+ if ( this[0] && this[0].parentNode ) {
+ // Make sure that the elements are removed from the DOM before they are inserted
+ // this can help fix replacing a parent with child elements
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function(i) {
+ var self = jQuery(this), old = self.html();
+ self.replaceWith( value.call( this, i, old ) );
+ });
+ }
+
+ if ( typeof value !== "string" ) {
+ value = jQuery( value ).detach();
+ }
+
+ return this.each(function() {
+ var next = this.nextSibling,
+ parent = this.parentNode;
+
+ jQuery( this ).remove();
+
+ if ( next ) {
+ jQuery(next).before( value );
+ } else {
+ jQuery(parent).append( value );
+ }
+ });
+ } else {
+ return this.length ?
+ this.pushStack( jQuery(jQuery.isFunction(value) ? value() : value), "replaceWith", value ) :
+ this;
+ }
+ },
+
+ detach: function( selector ) {
+ return this.remove( selector, true );
+ },
+
+ domManip: function( args, table, callback ) {
+ var results, first, fragment, parent,
+ value = args[0],
+ scripts = [];
+
+ // We can't cloneNode fragments that contain checked, in WebKit
+ if ( !jQuery.support.checkClone && arguments.length === 3 && typeof value === "string" && rchecked.test( value ) ) {
+ return this.each(function() {
+ jQuery(this).domManip( args, table, callback, true );
+ });
+ }
+
+ if ( jQuery.isFunction(value) ) {
+ return this.each(function(i) {
+ var self = jQuery(this);
+ args[0] = value.call(this, i, table ? self.html() : undefined);
+ self.domManip( args, table, callback );
+ });
+ }
+
+ if ( this[0] ) {
+ parent = value && value.parentNode;
+
+ // If we're in a fragment, just use that instead of building a new one
+ if ( jQuery.support.parentNode && parent && parent.nodeType === 11 && parent.childNodes.length === this.length ) {
+ results = { fragment: parent };
+
+ } else {
+ results = jQuery.buildFragment( args, this, scripts );
+ }
+
+ fragment = results.fragment;
+
+ if ( fragment.childNodes.length === 1 ) {
+ first = fragment = fragment.firstChild;
+ } else {
+ first = fragment.firstChild;
+ }
+
+ if ( first ) {
+ table = table && jQuery.nodeName( first, "tr" );
+
+ for ( var i = 0, l = this.length, lastIndex = l - 1; i < l; i++ ) {
+ callback.call(
+ table ?
+ root(this[i], first) :
+ this[i],
+ // Make sure that we do not leak memory by inadvertently discarding
+ // the original fragment (which might have attached data) instead of
+ // using it; in addition, use the original fragment object for the last
+ // item instead of first because it can end up being emptied incorrectly
+ // in certain situations (Bug #8070).
+ // Fragments from the fragment cache must always be cloned and never used
+ // in place.
+ results.cacheable || ( l > 1 && i < lastIndex ) ?
+ jQuery.clone( fragment, true, true ) :
+ fragment
+ );
+ }
+ }
+
+ if ( scripts.length ) {
+ jQuery.each( scripts, evalScript );
+ }
+ }
+
+ return this;
+ }
+});
+
+function root( elem, cur ) {
+ return jQuery.nodeName(elem, "table") ?
+ (elem.getElementsByTagName("tbody")[0] ||
+ elem.appendChild(elem.ownerDocument.createElement("tbody"))) :
+ elem;
+}
+
+function cloneCopyEvent( src, dest ) {
+
+ if ( dest.nodeType !== 1 || !jQuery.hasData( src ) ) {
+ return;
+ }
+
+ var type, i, l,
+ oldData = jQuery._data( src ),
+ curData = jQuery._data( dest, oldData ),
+ events = oldData.events;
+
+ if ( events ) {
+ delete curData.handle;
+ curData.events = {};
+
+ for ( type in events ) {
+ for ( i = 0, l = events[ type ].length; i < l; i++ ) {
+ jQuery.event.add( dest, type + ( events[ type ][ i ].namespace ? "." : "" ) + events[ type ][ i ].namespace, events[ type ][ i ], events[ type ][ i ].data );
+ }
+ }
+ }
+
+ // make the cloned public data object a copy from the original
+ if ( curData.data ) {
+ curData.data = jQuery.extend( {}, curData.data );
+ }
+}
+
+function cloneFixAttributes( src, dest ) {
+ var nodeName;
+
+ // We do not need to do anything for non-Elements
+ if ( dest.nodeType !== 1 ) {
+ return;
+ }
+
+ // clearAttributes removes the attributes, which we don't want,
+ // but also removes the attachEvent events, which we *do* want
+ if ( dest.clearAttributes ) {
+ dest.clearAttributes();
+ }
+
+ // mergeAttributes, in contrast, only merges back on the
+ // original attributes, not the events
+ if ( dest.mergeAttributes ) {
+ dest.mergeAttributes( src );
+ }
+
+ nodeName = dest.nodeName.toLowerCase();
+
+ // IE6-8 fail to clone children inside object elements that use
+ // the proprietary classid attribute value (rather than the type
+ // attribute) to identify the type of content to display
+ if ( nodeName === "object" ) {
+ dest.outerHTML = src.outerHTML;
+
+ } else if ( nodeName === "input" && (src.type === "checkbox" || src.type === "radio") ) {
+ // IE6-8 fails to persist the checked state of a cloned checkbox
+ // or radio button. Worse, IE6-7 fail to give the cloned element
+ // a checked appearance if the defaultChecked value isn't also set
+ if ( src.checked ) {
+ dest.defaultChecked = dest.checked = src.checked;
+ }
+
+ // IE6-7 get confused and end up setting the value of a cloned
+ // checkbox/radio button to an empty string instead of "on"
+ if ( dest.value !== src.value ) {
+ dest.value = src.value;
+ }
+
+ // IE6-8 fails to return the selected option to the default selected
+ // state when cloning options
+ } else if ( nodeName === "option" ) {
+ dest.selected = src.defaultSelected;
+
+ // IE6-8 fails to set the defaultValue to the correct value when
+ // cloning other types of input fields
+ } else if ( nodeName === "input" || nodeName === "textarea" ) {
+ dest.defaultValue = src.defaultValue;
+ }
+
+ // Event data gets referenced instead of copied if the expando
+ // gets copied too
+ dest.removeAttribute( jQuery.expando );
+}
+
+jQuery.buildFragment = function( args, nodes, scripts ) {
+ var fragment, cacheable, cacheresults, doc,
+ first = args[ 0 ];
+
+ // nodes may contain either an explicit document object,
+ // a jQuery collection or context object.
+ // If nodes[0] contains a valid object to assign to doc
+ if ( nodes && nodes[0] ) {
+ doc = nodes[0].ownerDocument || nodes[0];
+ }
+
+ // Ensure that an attr object doesn't incorrectly stand in as a document object
+ // Chrome and Firefox seem to allow this to occur and will throw exception
+ // Fixes #8950
+ if ( !doc.createDocumentFragment ) {
+ doc = document;
+ }
+
+ // Only cache "small" (1/2 KB) HTML strings that are associated with the main document
+ // Cloning options loses the selected state, so don't cache them
+ // IE 6 doesn't like it when you put <object> or <embed> elements in a fragment
+ // Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache
+ // Lastly, IE6,7,8 will not correctly reuse cached fragments that were created from unknown elems #10501
+ if ( args.length === 1 && typeof first === "string" && first.length < 512 && doc === document &&
+ first.charAt(0) === "<" && !rnocache.test( first ) &&
+ (jQuery.support.checkClone || !rchecked.test( first )) &&
+ (jQuery.support.html5Clone || !rnoshimcache.test( first )) ) {
+
+ cacheable = true;
+
+ cacheresults = jQuery.fragments[ first ];
+ if ( cacheresults && cacheresults !== 1 ) {
+ fragment = cacheresults;
+ }
+ }
+
+ if ( !fragment ) {
+ fragment = doc.createDocumentFragment();
+ jQuery.clean( args, doc, fragment, scripts );
+ }
+
+ if ( cacheable ) {
+ jQuery.fragments[ first ] = cacheresults ? fragment : 1;
+ }
+
+ return { fragment: fragment, cacheable: cacheable };
+};
+
+jQuery.fragments = {};
+
+jQuery.each({
+ appendTo: "append",
+ prependTo: "prepend",
+ insertBefore: "before",
+ insertAfter: "after",
+ replaceAll: "replaceWith"
+}, function( name, original ) {
+ jQuery.fn[ name ] = function( selector ) {
+ var ret = [],
+ insert = jQuery( selector ),
+ parent = this.length === 1 && this[0].parentNode;
+
+ if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
+ insert[ original ]( this[0] );
+ return this;
+
+ } else {
+ for ( var i = 0, l = insert.length; i < l; i++ ) {
+ var elems = ( i > 0 ? this.clone(true) : this ).get();
+ jQuery( insert[i] )[ original ]( elems );
+ ret = ret.concat( elems );
+ }
+
+ return this.pushStack( ret, name, insert.selector );
+ }
+ };
+});
+
+function getAll( elem ) {
+ if ( typeof elem.getElementsByTagName !== "undefined" ) {
+ return elem.getElementsByTagName( "*" );
+
+ } else if ( typeof elem.querySelectorAll !== "undefined" ) {
+ return elem.querySelectorAll( "*" );
+
+ } else {
+ return [];
+ }
+}
+
+// Used in clean, fixes the defaultChecked property
+function fixDefaultChecked( elem ) {
+ if ( elem.type === "checkbox" || elem.type === "radio" ) {
+ elem.defaultChecked = elem.checked;
+ }
+}
+// Finds all inputs and passes them to fixDefaultChecked
+function findInputs( elem ) {
+ var nodeName = ( elem.nodeName || "" ).toLowerCase();
+ if ( nodeName === "input" ) {
+ fixDefaultChecked( elem );
+ // Skip scripts, get other children
+ } else if ( nodeName !== "script" && typeof elem.getElementsByTagName !== "undefined" ) {
+ jQuery.grep( elem.getElementsByTagName("input"), fixDefaultChecked );
+ }
+}
+
+// Derived From: http://www.iecss.com/shimprove/javascript/shimprove.1-0-1.js
+function shimCloneNode( elem ) {
+ var div = document.createElement( "div" );
+ safeFragment.appendChild( div );
+
+ div.innerHTML = elem.outerHTML;
+ return div.firstChild;
+}
+
+jQuery.extend({
+ clone: function( elem, dataAndEvents, deepDataAndEvents ) {
+ var srcElements,
+ destElements,
+ i,
+ // IE<=8 does not properly clone detached, unknown element nodes
+ clone = jQuery.support.html5Clone || !rnoshimcache.test( "<" + elem.nodeName ) ?
+ elem.cloneNode( true ) :
+ shimCloneNode( elem );
+
+ if ( (!jQuery.support.noCloneEvent || !jQuery.support.noCloneChecked) &&
+ (elem.nodeType === 1 || elem.nodeType === 11) && !jQuery.isXMLDoc(elem) ) {
+ // IE copies events bound via attachEvent when using cloneNode.
+ // Calling detachEvent on the clone will also remove the events
+ // from the original. In order to get around this, we use some
+ // proprietary methods to clear the events. Thanks to MooTools
+ // guys for this hotness.
+
+ cloneFixAttributes( elem, clone );
+
+ // Using Sizzle here is crazy slow, so we use getElementsByTagName instead
+ srcElements = getAll( elem );
+ destElements = getAll( clone );
+
+ // Weird iteration because IE will replace the length property
+ // with an element if you are cloning the body and one of the
+ // elements on the page has a name or id of "length"
+ for ( i = 0; srcElements[i]; ++i ) {
+ // Ensure that the destination node is not null; Fixes #9587
+ if ( destElements[i] ) {
+ cloneFixAttributes( srcElements[i], destElements[i] );
+ }
+ }
+ }
+
+ // Copy the events from the original to the clone
+ if ( dataAndEvents ) {
+ cloneCopyEvent( elem, clone );
+
+ if ( deepDataAndEvents ) {
+ srcElements = getAll( elem );
+ destElements = getAll( clone );
+
+ for ( i = 0; srcElements[i]; ++i ) {
+ cloneCopyEvent( srcElements[i], destElements[i] );
+ }
+ }
+ }
+
+ srcElements = destElements = null;
+
+ // Return the cloned set
+ return clone;
+ },
+
+ clean: function( elems, context, fragment, scripts ) {
+ var checkScriptType;
+
+ context = context || document;
+
+ // !context.createElement fails in IE with an error but returns typeof 'object'
+ if ( typeof context.createElement === "undefined" ) {
+ context = context.ownerDocument || context[0] && context[0].ownerDocument || document;
+ }
+
+ var ret = [], j;
+
+ for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
+ if ( typeof elem === "number" ) {
+ elem += "";
+ }
+
+ if ( !elem ) {
+ continue;
+ }
+
+ // Convert html string into DOM nodes
+ if ( typeof elem === "string" ) {
+ if ( !rhtml.test( elem ) ) {
+ elem = context.createTextNode( elem );
+ } else {
+ // Fix "XHTML"-style tags in all browsers
+ elem = elem.replace(rxhtmlTag, "<$1></$2>");
+
+ // Trim whitespace, otherwise indexOf won't work as expected
+ var tag = ( rtagName.exec( elem ) || ["", ""] )[1].toLowerCase(),
+ wrap = wrapMap[ tag ] || wrapMap._default,
+ depth = wrap[0],
+ div = context.createElement("div");
+
+ // Append wrapper element to unknown element safe doc fragment
+ if ( context === document ) {
+ // Use the fragment we've already created for this document
+ safeFragment.appendChild( div );
+ } else {
+ // Use a fragment created with the owner document
+ createSafeFragment( context ).appendChild( div );
+ }
+
+ // Go to html and back, then peel off extra wrappers
+ div.innerHTML = wrap[1] + elem + wrap[2];
+
+ // Move to the right depth
+ while ( depth-- ) {
+ div = div.lastChild;
+ }
+
+ // Remove IE's autoinserted <tbody> from table fragments
+ if ( !jQuery.support.tbody ) {
+
+ // String was a <table>, *may* have spurious <tbody>
+ var hasBody = rtbody.test(elem),
+ tbody = tag === "table" && !hasBody ?
+ div.firstChild && div.firstChild.childNodes :
+
+ // String was a bare <thead> or <tfoot>
+ wrap[1] === "<table>" && !hasBody ?
+ div.childNodes :
+ [];
+
+ for ( j = tbody.length - 1; j >= 0 ; --j ) {
+ if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
+ tbody[ j ].parentNode.removeChild( tbody[ j ] );
+ }
+ }
+ }
+
+ // IE completely kills leading whitespace when innerHTML is used
+ if ( !jQuery.support.leadingWhitespace && rleadingWhitespace.test( elem ) ) {
+ div.insertBefore( context.createTextNode( rleadingWhitespace.exec(elem)[0] ), div.firstChild );
+ }
+
+ elem = div.childNodes;
+ }
+ }
+
+ // Resets defaultChecked for any radios and checkboxes
+ // about to be appended to the DOM in IE 6/7 (#8060)
+ var len;
+ if ( !jQuery.support.appendChecked ) {
+ if ( elem[0] && typeof (len = elem.length) === "number" ) {
+ for ( j = 0; j < len; j++ ) {
+ findInputs( elem[j] );
+ }
+ } else {
+ findInputs( elem );
+ }
+ }
+
+ if ( elem.nodeType ) {
+ ret.push( elem );
+ } else {
+ ret = jQuery.merge( ret, elem );
+ }
+ }
+
+ if ( fragment ) {
+ checkScriptType = function( elem ) {
+ return !elem.type || rscriptType.test( elem.type );
+ };
+ for ( i = 0; ret[i]; i++ ) {
+ if ( scripts && jQuery.nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
+ scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
+
+ } else {
+ if ( ret[i].nodeType === 1 ) {
+ var jsTags = jQuery.grep( ret[i].getElementsByTagName( "script" ), checkScriptType );
+
+ ret.splice.apply( ret, [i + 1, 0].concat( jsTags ) );
+ }
+ fragment.appendChild( ret[i] );
+ }
+ }
+ }
+
+ return ret;
+ },
+
+ cleanData: function( elems ) {
+ var data, id,
+ cache = jQuery.cache,
+ special = jQuery.event.special,
+ deleteExpando = jQuery.support.deleteExpando;
+
+ for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
+ if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {
+ continue;
+ }
+
+ id = elem[ jQuery.expando ];
+
+ if ( id ) {
+ data = cache[ id ];
+
+ if ( data && data.events ) {
+ for ( var type in data.events ) {
+ if ( special[ type ] ) {
+ jQuery.event.remove( elem, type );
+
+ // This is a shortcut to avoid jQuery.event.remove's overhead
+ } else {
+ jQuery.removeEvent( elem, type, data.handle );
+ }
+ }
+
+ // Null the DOM reference to avoid IE6/7/8 leak (#7054)
+ if ( data.handle ) {
+ data.handle.elem = null;
+ }
+ }
+
+ if ( deleteExpando ) {
+ delete elem[ jQuery.expando ];
+
+ } else if ( elem.removeAttribute ) {
+ elem.removeAttribute( jQuery.expando );
+ }
+
+ delete cache[ id ];
+ }
+ }
+ }
+});
+
+function evalScript( i, elem ) {
+ if ( elem.src ) {
+ jQuery.ajax({
+ url: elem.src,
+ async: false,
+ dataType: "script"
+ });
+ } else {
+ jQuery.globalEval( ( elem.text || elem.textContent || elem.innerHTML || "" ).replace( rcleanScript, "/*$0*/" ) );
+ }
+
+ if ( elem.parentNode ) {
+ elem.parentNode.removeChild( elem );
+ }
+}
+
+
+
+
+var ralpha = /alpha\([^)]*\)/i,
+ ropacity = /opacity=([^)]*)/,
+ // fixed for IE9, see #8346
+ rupper = /([A-Z]|^ms)/g,
+ rnumpx = /^-?\d+(?:px)?$/i,
+ rnum = /^-?\d/,
+ rrelNum = /^([\-+])=([\-+.\de]+)/,
+
+ cssShow = { position: "absolute", visibility: "hidden", display: "block" },
+ cssWidth = [ "Left", "Right" ],
+ cssHeight = [ "Top", "Bottom" ],
+ curCSS,
+
+ getComputedStyle,
+ currentStyle;
+
+jQuery.fn.css = function( name, value ) {
+ // Setting 'undefined' is a no-op
+ if ( arguments.length === 2 && value === undefined ) {
+ return this;
+ }
+
+ return jQuery.access( this, name, value, true, function( elem, name, value ) {
+ return value !== undefined ?
+ jQuery.style( elem, name, value ) :
+ jQuery.css( elem, name );
+ });
+};
+
+jQuery.extend({
+ // Add in style property hooks for overriding the default
+ // behavior of getting and setting a style property
+ cssHooks: {
+ opacity: {
+ get: function( elem, computed ) {
+ if ( computed ) {
+ // We should always get a number back from opacity
+ var ret = curCSS( elem, "opacity", "opacity" );
+ return ret === "" ? "1" : ret;
+
+ } else {
+ return elem.style.opacity;
+ }
+ }
+ }
+ },
+
+ // Exclude the following css properties to add px
+ cssNumber: {
+ "fillOpacity": true,
+ "fontWeight": true,
+ "lineHeight": true,
+ "opacity": true,
+ "orphans": true,
+ "widows": true,
+ "zIndex": true,
+ "zoom": true
+ },
+
+ // Add in properties whose names you wish to fix before
+ // setting or getting the value
+ cssProps: {
+ // normalize float css property
+ "float": jQuery.support.cssFloat ? "cssFloat" : "styleFloat"
+ },
+
+ // Get and set the style property on a DOM Node
+ style: function( elem, name, value, extra ) {
+ // Don't set styles on text and comment nodes
+ if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
+ return;
+ }
+
+ // Make sure that we're working with the right name
+ var ret, type, origName = jQuery.camelCase( name ),
+ style = elem.style, hooks = jQuery.cssHooks[ origName ];
+
+ name = jQuery.cssProps[ origName ] || origName;
+
+ // Check if we're setting a value
+ if ( value !== undefined ) {
+ type = typeof value;
+
+ // convert relative number strings (+= or -=) to relative numbers. #7345
+ if ( type === "string" && (ret = rrelNum.exec( value )) ) {
+ value = ( +( ret[1] + 1) * +ret[2] ) + parseFloat( jQuery.css( elem, name ) );
+ // Fixes bug #9237
+ type = "number";
+ }
+
+ // Make sure that NaN and null values aren't set. See: #7116
+ if ( value == null || type === "number" && isNaN( value ) ) {
+ return;
+ }
+
+ // If a number was passed in, add 'px' to the (except for certain CSS properties)
+ if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
+ value += "px";
+ }
+
+ // If a hook was provided, use that value, otherwise just set the specified value
+ if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value )) !== undefined ) {
+ // Wrapped to prevent IE from throwing errors when 'invalid' values are provided
+ // Fixes bug #5509
+ try {
+ style[ name ] = value;
+ } catch(e) {}
+ }
+
+ } else {
+ // If a hook was provided get the non-computed value from there
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
+ return ret;
+ }
+
+ // Otherwise just get the value from the style object
+ return style[ name ];
+ }
+ },
+
+ css: function( elem, name, extra ) {
+ var ret, hooks;
+
+ // Make sure that we're working with the right name
+ name = jQuery.camelCase( name );
+ hooks = jQuery.cssHooks[ name ];
+ name = jQuery.cssProps[ name ] || name;
+
+ // cssFloat needs a special treatment
+ if ( name === "cssFloat" ) {
+ name = "float";
+ }
+
+ // If a hook was provided get the computed value from there
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, true, extra )) !== undefined ) {
+ return ret;
+
+ // Otherwise, if a way to get the computed value exists, use that
+ } else if ( curCSS ) {
+ return curCSS( elem, name );
+ }
+ },
+
+ // A method for quickly swapping in/out CSS properties to get correct calculations
+ swap: function( elem, options, callback ) {
+ var old = {};
+
+ // Remember the old values, and insert the new ones
+ for ( var name in options ) {
+ old[ name ] = elem.style[ name ];
+ elem.style[ name ] = options[ name ];
+ }
+
+ callback.call( elem );
+
+ // Revert the old values
+ for ( name in options ) {
+ elem.style[ name ] = old[ name ];
+ }
+ }
+});
+
+// DEPRECATED, Use jQuery.css() instead
+jQuery.curCSS = jQuery.css;
+
+jQuery.each(["height", "width"], function( i, name ) {
+ jQuery.cssHooks[ name ] = {
+ get: function( elem, computed, extra ) {
+ var val;
+
+ if ( computed ) {
+ if ( elem.offsetWidth !== 0 ) {
+ return getWH( elem, name, extra );
+ } else {
+ jQuery.swap( elem, cssShow, function() {
+ val = getWH( elem, name, extra );
+ });
+ }
+
+ return val;
+ }
+ },
+
+ set: function( elem, value ) {
+ if ( rnumpx.test( value ) ) {
+ // ignore negative width and height values #1599
+ value = parseFloat( value );
+
+ if ( value >= 0 ) {
+ return value + "px";
+ }
+
+ } else {
+ return value;
+ }
+ }
+ };
+});
+
+if ( !jQuery.support.opacity ) {
+ jQuery.cssHooks.opacity = {
+ get: function( elem, computed ) {
+ // IE uses filters for opacity
+ return ropacity.test( (computed && elem.currentStyle ? elem.currentStyle.filter : elem.style.filter) || "" ) ?
+ ( parseFloat( RegExp.$1 ) / 100 ) + "" :
+ computed ? "1" : "";
+ },
+
+ set: function( elem, value ) {
+ var style = elem.style,
+ currentStyle = elem.currentStyle,
+ opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "",
+ filter = currentStyle && currentStyle.filter || style.filter || "";
+
+ // IE has trouble with opacity if it does not have layout
+ // Force it by setting the zoom level
+ style.zoom = 1;
+
+ // if setting opacity to 1, and no other filters exist - attempt to remove filter attribute #6652
+ if ( value >= 1 && jQuery.trim( filter.replace( ralpha, "" ) ) === "" ) {
+
+ // Setting style.filter to null, "" & " " still leave "filter:" in the cssText
+ // if "filter:" is present at all, clearType is disabled, we want to avoid this
+ // style.removeAttribute is IE Only, but so apparently is this code path...
+ style.removeAttribute( "filter" );
+
+ // if there there is no filter style applied in a css rule, we are done
+ if ( currentStyle && !currentStyle.filter ) {
+ return;
+ }
+ }
+
+ // otherwise, set new filter values
+ style.filter = ralpha.test( filter ) ?
+ filter.replace( ralpha, opacity ) :
+ filter + " " + opacity;
+ }
+ };
+}
+
+jQuery(function() {
+ // This hook cannot be added until DOM ready because the support test
+ // for it is not run until after DOM ready
+ if ( !jQuery.support.reliableMarginRight ) {
+ jQuery.cssHooks.marginRight = {
+ get: function( elem, computed ) {
+ // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
+ // Work around by temporarily setting element display to inline-block
+ var ret;
+ jQuery.swap( elem, { "display": "inline-block" }, function() {
+ if ( computed ) {
+ ret = curCSS( elem, "margin-right", "marginRight" );
+ } else {
+ ret = elem.style.marginRight;
+ }
+ });
+ return ret;
+ }
+ };
+ }
+});
+
+if ( document.defaultView && document.defaultView.getComputedStyle ) {
+ getComputedStyle = function( elem, name ) {
+ var ret, defaultView, computedStyle;
+
+ name = name.replace( rupper, "-$1" ).toLowerCase();
+
+ if ( (defaultView = elem.ownerDocument.defaultView) &&
+ (computedStyle = defaultView.getComputedStyle( elem, null )) ) {
+ ret = computedStyle.getPropertyValue( name );
+ if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) {
+ ret = jQuery.style( elem, name );
+ }
+ }
+
+ return ret;
+ };
+}
+
+if ( document.documentElement.currentStyle ) {
+ currentStyle = function( elem, name ) {
+ var left, rsLeft, uncomputed,
+ ret = elem.currentStyle && elem.currentStyle[ name ],
+ style = elem.style;
+
+ // Avoid setting ret to empty string here
+ // so we don't default to auto
+ if ( ret === null && style && (uncomputed = style[ name ]) ) {
+ ret = uncomputed;
+ }
+
+ // From the awesome hack by Dean Edwards
+ // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
+
+ // If we're not dealing with a regular pixel number
+ // but a number that has a weird ending, we need to convert it to pixels
+ if ( !rnumpx.test( ret ) && rnum.test( ret ) ) {
+
+ // Remember the original values
+ left = style.left;
+ rsLeft = elem.runtimeStyle && elem.runtimeStyle.left;
+
+ // Put in the new values to get a computed value out
+ if ( rsLeft ) {
+ elem.runtimeStyle.left = elem.currentStyle.left;
+ }
+ style.left = name === "fontSize" ? "1em" : ( ret || 0 );
+ ret = style.pixelLeft + "px";
+
+ // Revert the changed values
+ style.left = left;
+ if ( rsLeft ) {
+ elem.runtimeStyle.left = rsLeft;
+ }
+ }
+
+ return ret === "" ? "auto" : ret;
+ };
+}
+
+curCSS = getComputedStyle || currentStyle;
+
+function getWH( elem, name, extra ) {
+
+ // Start with offset property
+ var val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
+ which = name === "width" ? cssWidth : cssHeight,
+ i = 0,
+ len = which.length;
+
+ if ( val > 0 ) {
+ if ( extra !== "border" ) {
+ for ( ; i < len; i++ ) {
+ if ( !extra ) {
+ val -= parseFloat( jQuery.css( elem, "padding" + which[ i ] ) ) || 0;
+ }
+ if ( extra === "margin" ) {
+ val += parseFloat( jQuery.css( elem, extra + which[ i ] ) ) || 0;
+ } else {
+ val -= parseFloat( jQuery.css( elem, "border" + which[ i ] + "Width" ) ) || 0;
+ }
+ }
+ }
+
+ return val + "px";
+ }
+
+ // Fall back to computed then uncomputed css if necessary
+ val = curCSS( elem, name, name );
+ if ( val < 0 || val == null ) {
+ val = elem.style[ name ] || 0;
+ }
+ // Normalize "", auto, and prepare for extra
+ val = parseFloat( val ) || 0;
+
+ // Add padding, border, margin
+ if ( extra ) {
+ for ( ; i < len; i++ ) {
+ val += parseFloat( jQuery.css( elem, "padding" + which[ i ] ) ) || 0;
+ if ( extra !== "padding" ) {
+ val += parseFloat( jQuery.css( elem, "border" + which[ i ] + "Width" ) ) || 0;
+ }
+ if ( extra === "margin" ) {
+ val += parseFloat( jQuery.css( elem, extra + which[ i ] ) ) || 0;
+ }
+ }
+ }
+
+ return val + "px";
+}
+
+if ( jQuery.expr && jQuery.expr.filters ) {
+ jQuery.expr.filters.hidden = function( elem ) {
+ var width = elem.offsetWidth,
+ height = elem.offsetHeight;
+
+ return ( width === 0 && height === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
+ };
+
+ jQuery.expr.filters.visible = function( elem ) {
+ return !jQuery.expr.filters.hidden( elem );
+ };
+}
+
+
+
+
+var r20 = /%20/g,
+ rbracket = /\[\]$/,
+ rCRLF = /\r?\n/g,
+ rhash = /#.*$/,
+ rheaders = /^(.*?):[ \t]*([^\r\n]*)\r?$/mg, // IE leaves an \r character at EOL
+ rinput = /^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,
+ // #7653, #8125, #8152: local protocol detection
+ rlocalProtocol = /^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,
+ rnoContent = /^(?:GET|HEAD)$/,
+ rprotocol = /^\/\//,
+ rquery = /\?/,
+ rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+ rselectTextarea = /^(?:select|textarea)/i,
+ rspacesAjax = /\s+/,
+ rts = /([?&])_=[^&]*/,
+ rurl = /^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,
+
+ // Keep a copy of the old load method
+ _load = jQuery.fn.load,
+
+ /* Prefilters
+ * 1) They are useful to introduce custom dataTypes (see ajax/jsonp.js for an example)
+ * 2) These are called:
+ * - BEFORE asking for a transport
+ * - AFTER param serialization (s.data is a string if s.processData is true)
+ * 3) key is the dataType
+ * 4) the catchall symbol "*" can be used
+ * 5) execution will start with transport dataType and THEN continue down to "*" if needed
+ */
+ prefilters = {},
+
+ /* Transports bindings
+ * 1) key is the dataType
+ * 2) the catchall symbol "*" can be used
+ * 3) selection will start with transport dataType and THEN go to "*" if needed
+ */
+ transports = {},
+
+ // Document location
+ ajaxLocation,
+
+ // Document location segments
+ ajaxLocParts,
+
+ // Avoid comment-prolog char sequence (#10098); must appease lint and evade compression
+ allTypes = ["*/"] + ["*"];
+
+// #8138, IE may throw an exception when accessing
+// a field from window.location if document.domain has been set
+try {
+ ajaxLocation = location.href;
+} catch( e ) {
+ // Use the href attribute of an A element
+ // since IE will modify it given document.location
+ ajaxLocation = document.createElement( "a" );
+ ajaxLocation.href = "";
+ ajaxLocation = ajaxLocation.href;
+}
+
+// Segment location into parts
+ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || [];
+
+// Base "constructor" for jQuery.ajaxPrefilter and jQuery.ajaxTransport
+function addToPrefiltersOrTransports( structure ) {
+
+ // dataTypeExpression is optional and defaults to "*"
+ return function( dataTypeExpression, func ) {
+
+ if ( typeof dataTypeExpression !== "string" ) {
+ func = dataTypeExpression;
+ dataTypeExpression = "*";
+ }
+
+ if ( jQuery.isFunction( func ) ) {
+ var dataTypes = dataTypeExpression.toLowerCase().split( rspacesAjax ),
+ i = 0,
+ length = dataTypes.length,
+ dataType,
+ list,
+ placeBefore;
+
+ // For each dataType in the dataTypeExpression
+ for ( ; i < length; i++ ) {
+ dataType = dataTypes[ i ];
+ // We control if we're asked to add before
+ // any existing element
+ placeBefore = /^\+/.test( dataType );
+ if ( placeBefore ) {
+ dataType = dataType.substr( 1 ) || "*";
+ }
+ list = structure[ dataType ] = structure[ dataType ] || [];
+ // then we add to the structure accordingly
+ list[ placeBefore ? "unshift" : "push" ]( func );
+ }
+ }
+ };
+}
+
+// Base inspection function for prefilters and transports
+function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR,
+ dataType /* internal */, inspected /* internal */ ) {
+
+ dataType = dataType || options.dataTypes[ 0 ];
+ inspected = inspected || {};
+
+ inspected[ dataType ] = true;
+
+ var list = structure[ dataType ],
+ i = 0,
+ length = list ? list.length : 0,
+ executeOnly = ( structure === prefilters ),
+ selection;
+
+ for ( ; i < length && ( executeOnly || !selection ); i++ ) {
+ selection = list[ i ]( options, originalOptions, jqXHR );
+ // If we got redirected to another dataType
+ // we try there if executing only and not done already
+ if ( typeof selection === "string" ) {
+ if ( !executeOnly || inspected[ selection ] ) {
+ selection = undefined;
+ } else {
+ options.dataTypes.unshift( selection );
+ selection = inspectPrefiltersOrTransports(
+ structure, options, originalOptions, jqXHR, selection, inspected );
+ }
+ }
+ }
+ // If we're only executing or nothing was selected
+ // we try the catchall dataType if not done already
+ if ( ( executeOnly || !selection ) && !inspected[ "*" ] ) {
+ selection = inspectPrefiltersOrTransports(
+ structure, options, originalOptions, jqXHR, "*", inspected );
+ }
+ // unnecessary when only executing (prefilters)
+ // but it'll be ignored by the caller in that case
+ return selection;
+}
+
+// A special extend for ajax options
+// that takes "flat" options (not to be deep extended)
+// Fixes #9887
+function ajaxExtend( target, src ) {
+ var key, deep,
+ flatOptions = jQuery.ajaxSettings.flatOptions || {};
+ for ( key in src ) {
+ if ( src[ key ] !== undefined ) {
+ ( flatOptions[ key ] ? target : ( deep || ( deep = {} ) ) )[ key ] = src[ key ];
+ }
+ }
+ if ( deep ) {
+ jQuery.extend( true, target, deep );
+ }
+}
+
+jQuery.fn.extend({
+ load: function( url, params, callback ) {
+ if ( typeof url !== "string" && _load ) {
+ return _load.apply( this, arguments );
+
+ // Don't do a request if no elements are being requested
+ } else if ( !this.length ) {
+ return this;
+ }
+
+ var off = url.indexOf( " " );
+ if ( off >= 0 ) {
+ var selector = url.slice( off, url.length );
+ url = url.slice( 0, off );
+ }
+
+ // Default to a GET request
+ var type = "GET";
+
+ // If the second parameter was provided
+ if ( params ) {
+ // If it's a function
+ if ( jQuery.isFunction( params ) ) {
+ // We assume that it's the callback
+ callback = params;
+ params = undefined;
+
+ // Otherwise, build a param string
+ } else if ( typeof params === "object" ) {
+ params = jQuery.param( params, jQuery.ajaxSettings.traditional );
+ type = "POST";
+ }
+ }
+
+ var self = this;
+
+ // Request the remote document
+ jQuery.ajax({
+ url: url,
+ type: type,
+ dataType: "html",
+ data: params,
+ // Complete callback (responseText is used internally)
+ complete: function( jqXHR, status, responseText ) {
+ // Store the response as specified by the jqXHR object
+ responseText = jqXHR.responseText;
+ // If successful, inject the HTML into all the matched elements
+ if ( jqXHR.isResolved() ) {
+ // #4825: Get the actual response in case
+ // a dataFilter is present in ajaxSettings
+ jqXHR.done(function( r ) {
+ responseText = r;
+ });
+ // See if a selector was specified
+ self.html( selector ?
+ // Create a dummy div to hold the results
+ jQuery("<div>")
+ // inject the contents of the document in, removing the scripts
+ // to avoid any 'Permission Denied' errors in IE
+ .append(responseText.replace(rscript, ""))
+
+ // Locate the specified elements
+ .find(selector) :
+
+ // If not, just inject the full result
+ responseText );
+ }
+
+ if ( callback ) {
+ self.each( callback, [ responseText, status, jqXHR ] );
+ }
+ }
+ });
+
+ return this;
+ },
+
+ serialize: function() {
+ return jQuery.param( this.serializeArray() );
+ },
+
+ serializeArray: function() {
+ return this.map(function(){
+ return this.elements ? jQuery.makeArray( this.elements ) : this;
+ })
+ .filter(function(){
+ return this.name && !this.disabled &&
+ ( this.checked || rselectTextarea.test( this.nodeName ) ||
+ rinput.test( this.type ) );
+ })
+ .map(function( i, elem ){
+ var val = jQuery( this ).val();
+
+ return val == null ?
+ null :
+ jQuery.isArray( val ) ?
+ jQuery.map( val, function( val, i ){
+ return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+ }) :
+ { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+ }).get();
+ }
+});
+
+// Attach a bunch of functions for handling common AJAX events
+jQuery.each( "ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split( " " ), function( i, o ){
+ jQuery.fn[ o ] = function( f ){
+ return this.on( o, f );
+ };
+});
+
+jQuery.each( [ "get", "post" ], function( i, method ) {
+ jQuery[ method ] = function( url, data, callback, type ) {
+ // shift arguments if data argument was omitted
+ if ( jQuery.isFunction( data ) ) {
+ type = type || callback;
+ callback = data;
+ data = undefined;
+ }
+
+ return jQuery.ajax({
+ type: method,
+ url: url,
+ data: data,
+ success: callback,
+ dataType: type
+ });
+ };
+});
+
+jQuery.extend({
+
+ getScript: function( url, callback ) {
+ return jQuery.get( url, undefined, callback, "script" );
+ },
+
+ getJSON: function( url, data, callback ) {
+ return jQuery.get( url, data, callback, "json" );
+ },
+
+ // Creates a full fledged settings object into target
+ // with both ajaxSettings and settings fields.
+ // If target is omitted, writes into ajaxSettings.
+ ajaxSetup: function( target, settings ) {
+ if ( settings ) {
+ // Building a settings object
+ ajaxExtend( target, jQuery.ajaxSettings );
+ } else {
+ // Extending ajaxSettings
+ settings = target;
+ target = jQuery.ajaxSettings;
+ }
+ ajaxExtend( target, settings );
+ return target;
+ },
+
+ ajaxSettings: {
+ url: ajaxLocation,
+ isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),
+ global: true,
+ type: "GET",
+ contentType: "application/x-www-form-urlencoded",
+ processData: true,
+ async: true,
+ /*
+ timeout: 0,
+ data: null,
+ dataType: null,
+ username: null,
+ password: null,
+ cache: null,
+ traditional: false,
+ headers: {},
+ */
+
+ accepts: {
+ xml: "application/xml, text/xml",
+ html: "text/html",
+ text: "text/plain",
+ json: "application/json, text/javascript",
+ "*": allTypes
+ },
+
+ contents: {
+ xml: /xml/,
+ html: /html/,
+ json: /json/
+ },
+
+ responseFields: {
+ xml: "responseXML",
+ text: "responseText"
+ },
+
+ // List of data converters
+ // 1) key format is "source_type destination_type" (a single space in-between)
+ // 2) the catchall symbol "*" can be used for source_type
+ converters: {
+
+ // Convert anything to text
+ "* text": window.String,
+
+ // Text to html (true = no transformation)
+ "text html": true,
+
+ // Evaluate text as a json expression
+ "text json": jQuery.parseJSON,
+
+ // Parse text as xml
+ "text xml": jQuery.parseXML
+ },
+
+ // For options that shouldn't be deep extended:
+ // you can add your own custom options here if
+ // and when you create one that shouldn't be
+ // deep extended (see ajaxExtend)
+ flatOptions: {
+ context: true,
+ url: true
+ }
+ },
+
+ ajaxPrefilter: addToPrefiltersOrTransports( prefilters ),
+ ajaxTransport: addToPrefiltersOrTransports( transports ),
+
+ // Main method
+ ajax: function( url, options ) {
+
+ // If url is an object, simulate pre-1.5 signature
+ if ( typeof url === "object" ) {
+ options = url;
+ url = undefined;
+ }
+
+ // Force options to be an object
+ options = options || {};
+
+ var // Create the final options object
+ s = jQuery.ajaxSetup( {}, options ),
+ // Callbacks context
+ callbackContext = s.context || s,
+ // Context for global events
+ // It's the callbackContext if one was provided in the options
+ // and if it's a DOM node or a jQuery collection
+ globalEventContext = callbackContext !== s &&
+ ( callbackContext.nodeType || callbackContext instanceof jQuery ) ?
+ jQuery( callbackContext ) : jQuery.event,
+ // Deferreds
+ deferred = jQuery.Deferred(),
+ completeDeferred = jQuery.Callbacks( "once memory" ),
+ // Status-dependent callbacks
+ statusCode = s.statusCode || {},
+ // ifModified key
+ ifModifiedKey,
+ // Headers (they are sent all at once)
+ requestHeaders = {},
+ requestHeadersNames = {},
+ // Response headers
+ responseHeadersString,
+ responseHeaders,
+ // transport
+ transport,
+ // timeout handle
+ timeoutTimer,
+ // Cross-domain detection vars
+ parts,
+ // The jqXHR state
+ state = 0,
+ // To know if global events are to be dispatched
+ fireGlobals,
+ // Loop variable
+ i,
+ // Fake xhr
+ jqXHR = {
+
+ readyState: 0,
+
+ // Caches the header
+ setRequestHeader: function( name, value ) {
+ if ( !state ) {
+ var lname = name.toLowerCase();
+ name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name;
+ requestHeaders[ name ] = value;
+ }
+ return this;
+ },
+
+ // Raw string
+ getAllResponseHeaders: function() {
+ return state === 2 ? responseHeadersString : null;
+ },
+
+ // Builds headers hashtable if needed
+ getResponseHeader: function( key ) {
+ var match;
+ if ( state === 2 ) {
+ if ( !responseHeaders ) {
+ responseHeaders = {};
+ while( ( match = rheaders.exec( responseHeadersString ) ) ) {
+ responseHeaders[ match[1].toLowerCase() ] = match[ 2 ];
+ }
+ }
+ match = responseHeaders[ key.toLowerCase() ];
+ }
+ return match === undefined ? null : match;
+ },
+
+ // Overrides response content-type header
+ overrideMimeType: function( type ) {
+ if ( !state ) {
+ s.mimeType = type;
+ }
+ return this;
+ },
+
+ // Cancel the request
+ abort: function( statusText ) {
+ statusText = statusText || "abort";
+ if ( transport ) {
+ transport.abort( statusText );
+ }
+ done( 0, statusText );
+ return this;
+ }
+ };
+
+ // Callback for when everything is done
+ // It is defined here because jslint complains if it is declared
+ // at the end of the function (which would be more logical and readable)
+ function done( status, nativeStatusText, responses, headers ) {
+
+ // Called once
+ if ( state === 2 ) {
+ return;
+ }
+
+ // State is "done" now
+ state = 2;
+
+ // Clear timeout if it exists
+ if ( timeoutTimer ) {
+ clearTimeout( timeoutTimer );
+ }
+
+ // Dereference transport for early garbage collection
+ // (no matter how long the jqXHR object will be used)
+ transport = undefined;
+
+ // Cache response headers
+ responseHeadersString = headers || "";
+
+ // Set readyState
+ jqXHR.readyState = status > 0 ? 4 : 0;
+
+ var isSuccess,
+ success,
+ error,
+ statusText = nativeStatusText,
+ response = responses ? ajaxHandleResponses( s, jqXHR, responses ) : undefined,
+ lastModified,
+ etag;
+
+ // If successful, handle type chaining
+ if ( status >= 200 && status < 300 || status === 304 ) {
+
+ // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+ if ( s.ifModified ) {
+
+ if ( ( lastModified = jqXHR.getResponseHeader( "Last-Modified" ) ) ) {
+ jQuery.lastModified[ ifModifiedKey ] = lastModified;
+ }
+ if ( ( etag = jqXHR.getResponseHeader( "Etag" ) ) ) {
+ jQuery.etag[ ifModifiedKey ] = etag;
+ }
+ }
+
+ // If not modified
+ if ( status === 304 ) {
+
+ statusText = "notmodified";
+ isSuccess = true;
+
+ // If we have data
+ } else {
+
+ try {
+ success = ajaxConvert( s, response );
+ statusText = "success";
+ isSuccess = true;
+ } catch(e) {
+ // We have a parsererror
+ statusText = "parsererror";
+ error = e;
+ }
+ }
+ } else {
+ // We extract error from statusText
+ // then normalize statusText and status for non-aborts
+ error = statusText;
+ if ( !statusText || status ) {
+ statusText = "error";
+ if ( status < 0 ) {
+ status = 0;
+ }
+ }
+ }
+
+ // Set data for the fake xhr object
+ jqXHR.status = status;
+ jqXHR.statusText = "" + ( nativeStatusText || statusText );
+
+ // Success/Error
+ if ( isSuccess ) {
+ deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
+ } else {
+ deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
+ }
+
+ // Status-dependent callbacks
+ jqXHR.statusCode( statusCode );
+ statusCode = undefined;
+
+ if ( fireGlobals ) {
+ globalEventContext.trigger( "ajax" + ( isSuccess ? "Success" : "Error" ),
+ [ jqXHR, s, isSuccess ? success : error ] );
+ }
+
+ // Complete
+ completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );
+
+ if ( fireGlobals ) {
+ globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
+ // Handle the global AJAX counter
+ if ( !( --jQuery.active ) ) {
+ jQuery.event.trigger( "ajaxStop" );
+ }
+ }
+ }
+
+ // Attach deferreds
+ deferred.promise( jqXHR );
+ jqXHR.success = jqXHR.done;
+ jqXHR.error = jqXHR.fail;
+ jqXHR.complete = completeDeferred.add;
+
+ // Status-dependent callbacks
+ jqXHR.statusCode = function( map ) {
+ if ( map ) {
+ var tmp;
+ if ( state < 2 ) {
+ for ( tmp in map ) {
+ statusCode[ tmp ] = [ statusCode[tmp], map[tmp] ];
+ }
+ } else {
+ tmp = map[ jqXHR.status ];
+ jqXHR.then( tmp, tmp );
+ }
+ }
+ return this;
+ };
+
+ // Remove hash character (#7531: and string promotion)
+ // Add protocol if not provided (#5866: IE7 issue with protocol-less urls)
+ // We also use the url parameter if available
+ s.url = ( ( url || s.url ) + "" ).replace( rhash, "" ).replace( rprotocol, ajaxLocParts[ 1 ] + "//" );
+
+ // Extract dataTypes list
+ s.dataTypes = jQuery.trim( s.dataType || "*" ).toLowerCase().split( rspacesAjax );
+
+ // Determine if a cross-domain request is in order
+ if ( s.crossDomain == null ) {
+ parts = rurl.exec( s.url.toLowerCase() );
+ s.crossDomain = !!( parts &&
+ ( parts[ 1 ] != ajaxLocParts[ 1 ] || parts[ 2 ] != ajaxLocParts[ 2 ] ||
+ ( parts[ 3 ] || ( parts[ 1 ] === "http:" ? 80 : 443 ) ) !=
+ ( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? 80 : 443 ) ) )
+ );
+ }
+
+ // Convert data if not already a string
+ if ( s.data && s.processData && typeof s.data !== "string" ) {
+ s.data = jQuery.param( s.data, s.traditional );
+ }
+
+ // Apply prefilters
+ inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );
+
+ // If request was aborted inside a prefiler, stop there
+ if ( state === 2 ) {
+ return false;
+ }
+
+ // We can fire global events as of now if asked to
+ fireGlobals = s.global;
+
+ // Uppercase the type
+ s.type = s.type.toUpperCase();
+
+ // Determine if request has content
+ s.hasContent = !rnoContent.test( s.type );
+
+ // Watch for a new set of requests
+ if ( fireGlobals && jQuery.active++ === 0 ) {
+ jQuery.event.trigger( "ajaxStart" );
+ }
+
+ // More options handling for requests with no content
+ if ( !s.hasContent ) {
+
+ // If data is available, append data to url
+ if ( s.data ) {
+ s.url += ( rquery.test( s.url ) ? "&" : "?" ) + s.data;
+ // #9682: remove data so that it's not used in an eventual retry
+ delete s.data;
+ }
+
+ // Get ifModifiedKey before adding the anti-cache parameter
+ ifModifiedKey = s.url;
+
+ // Add anti-cache in url if needed
+ if ( s.cache === false ) {
+
+ var ts = jQuery.now(),
+ // try replacing _= if it is there
+ ret = s.url.replace( rts, "$1_=" + ts );
+
+ // if nothing was replaced, add timestamp to the end
+ s.url = ret + ( ( ret === s.url ) ? ( rquery.test( s.url ) ? "&" : "?" ) + "_=" + ts : "" );
+ }
+ }
+
+ // Set the correct header, if data is being sent
+ if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
+ jqXHR.setRequestHeader( "Content-Type", s.contentType );
+ }
+
+ // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+ if ( s.ifModified ) {
+ ifModifiedKey = ifModifiedKey || s.url;
+ if ( jQuery.lastModified[ ifModifiedKey ] ) {
+ jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ ifModifiedKey ] );
+ }
+ if ( jQuery.etag[ ifModifiedKey ] ) {
+ jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ ifModifiedKey ] );
+ }
+ }
+
+ // Set the Accepts header for the server, depending on the dataType
+ jqXHR.setRequestHeader(
+ "Accept",
+ s.dataTypes[ 0 ] && s.accepts[ s.dataTypes[0] ] ?
+ s.accepts[ s.dataTypes[0] ] + ( s.dataTypes[ 0 ] !== "*" ? ", " + allTypes + "; q=0.01" : "" ) :
+ s.accepts[ "*" ]
+ );
+
+ // Check for headers option
+ for ( i in s.headers ) {
+ jqXHR.setRequestHeader( i, s.headers[ i ] );
+ }
+
+ // Allow custom headers/mimetypes and early abort
+ if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) {
+ // Abort if not done already
+ jqXHR.abort();
+ return false;
+
+ }
+
+ // Install callbacks on deferreds
+ for ( i in { success: 1, error: 1, complete: 1 } ) {
+ jqXHR[ i ]( s[ i ] );
+ }
+
+ // Get transport
+ transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );
+
+ // If no transport, we auto-abort
+ if ( !transport ) {
+ done( -1, "No Transport" );
+ } else {
+ jqXHR.readyState = 1;
+ // Send global event
+ if ( fireGlobals ) {
+ globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );
+ }
+ // Timeout
+ if ( s.async && s.timeout > 0 ) {
+ timeoutTimer = setTimeout( function(){
+ jqXHR.abort( "timeout" );
+ }, s.timeout );
+ }
+
+ try {
+ state = 1;
+ transport.send( requestHeaders, done );
+ } catch (e) {
+ // Propagate exception as error if not done
+ if ( state < 2 ) {
+ done( -1, e );
+ // Simply rethrow otherwise
+ } else {
+ throw e;
+ }
+ }
+ }
+
+ return jqXHR;
+ },
+
+ // Serialize an array of form elements or a set of
+ // key/values into a query string
+ param: function( a, traditional ) {
+ var s = [],
+ add = function( key, value ) {
+ // If value is a function, invoke it and return its value
+ value = jQuery.isFunction( value ) ? value() : value;
+ s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
+ };
+
+ // Set traditional to true for jQuery <= 1.3.2 behavior.
+ if ( traditional === undefined ) {
+ traditional = jQuery.ajaxSettings.traditional;
+ }
+
+ // If an array was passed in, assume that it is an array of form elements.
+ if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
+ // Serialize the form elements
+ jQuery.each( a, function() {
+ add( this.name, this.value );
+ });
+
+ } else {
+ // If traditional, encode the "old" way (the way 1.3.2 or older
+ // did it), otherwise encode params recursively.
+ for ( var prefix in a ) {
+ buildParams( prefix, a[ prefix ], traditional, add );
+ }
+ }
+
+ // Return the resulting serialization
+ return s.join( "&" ).replace( r20, "+" );
+ }
+});
+
+function buildParams( prefix, obj, traditional, add ) {
+ if ( jQuery.isArray( obj ) ) {
+ // Serialize array item.
+ jQuery.each( obj, function( i, v ) {
+ if ( traditional || rbracket.test( prefix ) ) {
+ // Treat each array item as a scalar.
+ add( prefix, v );
+
+ } else {
+ // If array item is non-scalar (array or object), encode its
+ // numeric index to resolve deserialization ambiguity issues.
+ // Note that rack (as of 1.0.0) can't currently deserialize
+ // nested arrays properly, and attempting to do so may cause
+ // a server error. Possible fixes are to modify rack's
+ // deserialization algorithm or to provide an option or flag
+ // to force array serialization to be shallow.
+ buildParams( prefix + "[" + ( typeof v === "object" || jQuery.isArray(v) ? i : "" ) + "]", v, traditional, add );
+ }
+ });
+
+ } else if ( !traditional && obj != null && typeof obj === "object" ) {
+ // Serialize object item.
+ for ( var name in obj ) {
+ buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
+ }
+
+ } else {
+ // Serialize scalar item.
+ add( prefix, obj );
+ }
+}
+
+// This is still on the jQuery object... for now
+// Want to move this to jQuery.ajax some day
+jQuery.extend({
+
+ // Counter for holding the number of active queries
+ active: 0,
+
+ // Last-Modified header cache for next request
+ lastModified: {},
+ etag: {}
+
+});
+
+/* Handles responses to an ajax request:
+ * - sets all responseXXX fields accordingly
+ * - finds the right dataType (mediates between content-type and expected dataType)
+ * - returns the corresponding response
+ */
+function ajaxHandleResponses( s, jqXHR, responses ) {
+
+ var contents = s.contents,
+ dataTypes = s.dataTypes,
+ responseFields = s.responseFields,
+ ct,
+ type,
+ finalDataType,
+ firstDataType;
+
+ // Fill responseXXX fields
+ for ( type in responseFields ) {
+ if ( type in responses ) {
+ jqXHR[ responseFields[type] ] = responses[ type ];
+ }
+ }
+
+ // Remove auto dataType and get content-type in the process
+ while( dataTypes[ 0 ] === "*" ) {
+ dataTypes.shift();
+ if ( ct === undefined ) {
+ ct = s.mimeType || jqXHR.getResponseHeader( "content-type" );
+ }
+ }
+
+ // Check if we're dealing with a known content-type
+ if ( ct ) {
+ for ( type in contents ) {
+ if ( contents[ type ] && contents[ type ].test( ct ) ) {
+ dataTypes.unshift( type );
+ break;
+ }
+ }
+ }
+
+ // Check to see if we have a response for the expected dataType
+ if ( dataTypes[ 0 ] in responses ) {
+ finalDataType = dataTypes[ 0 ];
+ } else {
+ // Try convertible dataTypes
+ for ( type in responses ) {
+ if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) {
+ finalDataType = type;
+ break;
+ }
+ if ( !firstDataType ) {
+ firstDataType = type;
+ }
+ }
+ // Or just use first one
+ finalDataType = finalDataType || firstDataType;
+ }
+
+ // If we found a dataType
+ // We add the dataType to the list if needed
+ // and return the corresponding response
+ if ( finalDataType ) {
+ if ( finalDataType !== dataTypes[ 0 ] ) {
+ dataTypes.unshift( finalDataType );
+ }
+ return responses[ finalDataType ];
+ }
+}
+
+// Chain conversions given the request and the original response
+function ajaxConvert( s, response ) {
+
+ // Apply the dataFilter if provided
+ if ( s.dataFilter ) {
+ response = s.dataFilter( response, s.dataType );
+ }
+
+ var dataTypes = s.dataTypes,
+ converters = {},
+ i,
+ key,
+ length = dataTypes.length,
+ tmp,
+ // Current and previous dataTypes
+ current = dataTypes[ 0 ],
+ prev,
+ // Conversion expression
+ conversion,
+ // Conversion function
+ conv,
+ // Conversion functions (transitive conversion)
+ conv1,
+ conv2;
+
+ // For each dataType in the chain
+ for ( i = 1; i < length; i++ ) {
+
+ // Create converters map
+ // with lowercased keys
+ if ( i === 1 ) {
+ for ( key in s.converters ) {
+ if ( typeof key === "string" ) {
+ converters[ key.toLowerCase() ] = s.converters[ key ];
+ }
+ }
+ }
+
+ // Get the dataTypes
+ prev = current;
+ current = dataTypes[ i ];
+
+ // If current is auto dataType, update it to prev
+ if ( current === "*" ) {
+ current = prev;
+ // If no auto and dataTypes are actually different
+ } else if ( prev !== "*" && prev !== current ) {
+
+ // Get the converter
+ conversion = prev + " " + current;
+ conv = converters[ conversion ] || converters[ "* " + current ];
+
+ // If there is no direct converter, search transitively
+ if ( !conv ) {
+ conv2 = undefined;
+ for ( conv1 in converters ) {
+ tmp = conv1.split( " " );
+ if ( tmp[ 0 ] === prev || tmp[ 0 ] === "*" ) {
+ conv2 = converters[ tmp[1] + " " + current ];
+ if ( conv2 ) {
+ conv1 = converters[ conv1 ];
+ if ( conv1 === true ) {
+ conv = conv2;
+ } else if ( conv2 === true ) {
+ conv = conv1;
+ }
+ break;
+ }
+ }
+ }
+ }
+ // If we found no converter, dispatch an error
+ if ( !( conv || conv2 ) ) {
+ jQuery.error( "No conversion from " + conversion.replace(" "," to ") );
+ }
+ // If found converter is not an equivalence
+ if ( conv !== true ) {
+ // Convert with 1 or 2 converters accordingly
+ response = conv ? conv( response ) : conv2( conv1(response) );
+ }
+ }
+ }
+ return response;
+}
+
+
+
+
+var jsc = jQuery.now(),
+ jsre = /(\=)\?(&|$)|\?\?/i;
+
+// Default jsonp settings
+jQuery.ajaxSetup({
+ jsonp: "callback",
+ jsonpCallback: function() {
+ return jQuery.expando + "_" + ( jsc++ );
+ }
+});
+
+// Detect, normalize options and install callbacks for jsonp requests
+jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) {
+
+ var inspectData = s.contentType === "application/x-www-form-urlencoded" &&
+ ( typeof s.data === "string" );
+
+ if ( s.dataTypes[ 0 ] === "jsonp" ||
+ s.jsonp !== false && ( jsre.test( s.url ) ||
+ inspectData && jsre.test( s.data ) ) ) {
+
+ var responseContainer,
+ jsonpCallback = s.jsonpCallback =
+ jQuery.isFunction( s.jsonpCallback ) ? s.jsonpCallback() : s.jsonpCallback,
+ previous = window[ jsonpCallback ],
+ url = s.url,
+ data = s.data,
+ replace = "$1" + jsonpCallback + "$2";
+
+ if ( s.jsonp !== false ) {
+ url = url.replace( jsre, replace );
+ if ( s.url === url ) {
+ if ( inspectData ) {
+ data = data.replace( jsre, replace );
+ }
+ if ( s.data === data ) {
+ // Add callback manually
+ url += (/\?/.test( url ) ? "&" : "?") + s.jsonp + "=" + jsonpCallback;
+ }
+ }
+ }
+
+ s.url = url;
+ s.data = data;
+
+ // Install callback
+ window[ jsonpCallback ] = function( response ) {
+ responseContainer = [ response ];
+ };
+
+ // Clean-up function
+ jqXHR.always(function() {
+ // Set callback back to previous value
+ window[ jsonpCallback ] = previous;
+ // Call if it was a function and we have a response
+ if ( responseContainer && jQuery.isFunction( previous ) ) {
+ window[ jsonpCallback ]( responseContainer[ 0 ] );
+ }
+ });
+
+ // Use data converter to retrieve json after script execution
+ s.converters["script json"] = function() {
+ if ( !responseContainer ) {
+ jQuery.error( jsonpCallback + " was not called" );
+ }
+ return responseContainer[ 0 ];
+ };
+
+ // force json dataType
+ s.dataTypes[ 0 ] = "json";
+
+ // Delegate to script
+ return "script";
+ }
+});
+
+
+
+
+// Install script dataType
+jQuery.ajaxSetup({
+ accepts: {
+ script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
+ },
+ contents: {
+ script: /javascript|ecmascript/
+ },
+ converters: {
+ "text script": function( text ) {
+ jQuery.globalEval( text );
+ return text;
+ }
+ }
+});
+
+// Handle cache's special case and global
+jQuery.ajaxPrefilter( "script", function( s ) {
+ if ( s.cache === undefined ) {
+ s.cache = false;
+ }
+ if ( s.crossDomain ) {
+ s.type = "GET";
+ s.global = false;
+ }
+});
+
+// Bind script tag hack transport
+jQuery.ajaxTransport( "script", function(s) {
+
+ // This transport only deals with cross domain requests
+ if ( s.crossDomain ) {
+
+ var script,
+ head = document.head || document.getElementsByTagName( "head" )[0] || document.documentElement;
+
+ return {
+
+ send: function( _, callback ) {
+
+ script = document.createElement( "script" );
+
+ script.async = "async";
+
+ if ( s.scriptCharset ) {
+ script.charset = s.scriptCharset;
+ }
+
+ script.src = s.url;
+
+ // Attach handlers for all browsers
+ script.onload = script.onreadystatechange = function( _, isAbort ) {
+
+ if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) {
+
+ // Handle memory leak in IE
+ script.onload = script.onreadystatechange = null;
+
+ // Remove the script
+ if ( head && script.parentNode ) {
+ head.removeChild( script );
+ }
+
+ // Dereference the script
+ script = undefined;
+
+ // Callback if not abort
+ if ( !isAbort ) {
+ callback( 200, "success" );
+ }
+ }
+ };
+ // Use insertBefore instead of appendChild to circumvent an IE6 bug.
+ // This arises when a base node is used (#2709 and #4378).
+ head.insertBefore( script, head.firstChild );
+ },
+
+ abort: function() {
+ if ( script ) {
+ script.onload( 0, 1 );
+ }
+ }
+ };
+ }
+});
+
+
+
+
+var // #5280: Internet Explorer will keep connections alive if we don't abort on unload
+ xhrOnUnloadAbort = window.ActiveXObject ? function() {
+ // Abort all pending requests
+ for ( var key in xhrCallbacks ) {
+ xhrCallbacks[ key ]( 0, 1 );
+ }
+ } : false,
+ xhrId = 0,
+ xhrCallbacks;
+
+// Functions to create xhrs
+function createStandardXHR() {
+ try {
+ return new window.XMLHttpRequest();
+ } catch( e ) {}
+}
+
+function createActiveXHR() {
+ try {
+ return new window.ActiveXObject( "Microsoft.XMLHTTP" );
+ } catch( e ) {}
+}
+
+// Create the request object
+// (This is still attached to ajaxSettings for backward compatibility)
+jQuery.ajaxSettings.xhr = window.ActiveXObject ?
+ /* Microsoft failed to properly
+ * implement the XMLHttpRequest in IE7 (can't request local files),
+ * so we use the ActiveXObject when it is available
+ * Additionally XMLHttpRequest can be disabled in IE7/IE8 so
+ * we need a fallback.
+ */
+ function() {
+ return !this.isLocal && createStandardXHR() || createActiveXHR();
+ } :
+ // For all other browsers, use the standard XMLHttpRequest object
+ createStandardXHR;
+
+// Determine support properties
+(function( xhr ) {
+ jQuery.extend( jQuery.support, {
+ ajax: !!xhr,
+ cors: !!xhr && ( "withCredentials" in xhr )
+ });
+})( jQuery.ajaxSettings.xhr() );
+
+// Create transport if the browser can provide an xhr
+if ( jQuery.support.ajax ) {
+
+ jQuery.ajaxTransport(function( s ) {
+ // Cross domain only allowed if supported through XMLHttpRequest
+ if ( !s.crossDomain || jQuery.support.cors ) {
+
+ var callback;
+
+ return {
+ send: function( headers, complete ) {
+
+ // Get a new xhr
+ var xhr = s.xhr(),
+ handle,
+ i;
+
+ // Open the socket
+ // Passing null username, generates a login popup on Opera (#2865)
+ if ( s.username ) {
+ xhr.open( s.type, s.url, s.async, s.username, s.password );
+ } else {
+ xhr.open( s.type, s.url, s.async );
+ }
+
+ // Apply custom fields if provided
+ if ( s.xhrFields ) {
+ for ( i in s.xhrFields ) {
+ xhr[ i ] = s.xhrFields[ i ];
+ }
+ }
+
+ // Override mime type if needed
+ if ( s.mimeType && xhr.overrideMimeType ) {
+ xhr.overrideMimeType( s.mimeType );
+ }
+
+ // X-Requested-With header
+ // For cross-domain requests, seeing as conditions for a preflight are
+ // akin to a jigsaw puzzle, we simply never set it to be sure.
+ // (it can always be set on a per-request basis or even using ajaxSetup)
+ // For same-domain requests, won't change header if already provided.
+ if ( !s.crossDomain && !headers["X-Requested-With"] ) {
+ headers[ "X-Requested-With" ] = "XMLHttpRequest";
+ }
+
+ // Need an extra try/catch for cross domain requests in Firefox 3
+ try {
+ for ( i in headers ) {
+ xhr.setRequestHeader( i, headers[ i ] );
+ }
+ } catch( _ ) {}
+
+ // Do send the request
+ // This may raise an exception which is actually
+ // handled in jQuery.ajax (so no try/catch here)
+ xhr.send( ( s.hasContent && s.data ) || null );
+
+ // Listener
+ callback = function( _, isAbort ) {
+
+ var status,
+ statusText,
+ responseHeaders,
+ responses,
+ xml;
+
+ // Firefox throws exceptions when accessing properties
+ // of an xhr when a network error occured
+ // http://helpful.knobs-dials.com/index.php/Component_returned_failure_code:_0x80040111_(NS_ERROR_NOT_AVAILABLE)
+ try {
+
+ // Was never called and is aborted or complete
+ if ( callback && ( isAbort || xhr.readyState === 4 ) ) {
+
+ // Only called once
+ callback = undefined;
+
+ // Do not keep as active anymore
+ if ( handle ) {
+ xhr.onreadystatechange = jQuery.noop;
+ if ( xhrOnUnloadAbort ) {
+ delete xhrCallbacks[ handle ];
+ }
+ }
+
+ // If it's an abort
+ if ( isAbort ) {
+ // Abort it manually if needed
+ if ( xhr.readyState !== 4 ) {
+ xhr.abort();
+ }
+ } else {
+ status = xhr.status;
+ responseHeaders = xhr.getAllResponseHeaders();
+ responses = {};
+ xml = xhr.responseXML;
+
+ // Construct response list
+ if ( xml && xml.documentElement /* #4958 */ ) {
+ responses.xml = xml;
+ }
+ responses.text = xhr.responseText;
+
+ // Firefox throws an exception when accessing
+ // statusText for faulty cross-domain requests
+ try {
+ statusText = xhr.statusText;
+ } catch( e ) {
+ // We normalize with Webkit giving an empty statusText
+ statusText = "";
+ }
+
+ // Filter status for non standard behaviors
+
+ // If the request is local and we have data: assume a success
+ // (success with no data won't get notified, that's the best we
+ // can do given current implementations)
+ if ( !status && s.isLocal && !s.crossDomain ) {
+ status = responses.text ? 200 : 404;
+ // IE - #1450: sometimes returns 1223 when it should be 204
+ } else if ( status === 1223 ) {
+ status = 204;
+ }
+ }
+ }
+ } catch( firefoxAccessException ) {
+ if ( !isAbort ) {
+ complete( -1, firefoxAccessException );
+ }
+ }
+
+ // Call complete if needed
+ if ( responses ) {
+ complete( status, statusText, responses, responseHeaders );
+ }
+ };
+
+ // if we're in sync mode or it's in cache
+ // and has been retrieved directly (IE6 & IE7)
+ // we need to manually fire the callback
+ if ( !s.async || xhr.readyState === 4 ) {
+ callback();
+ } else {
+ handle = ++xhrId;
+ if ( xhrOnUnloadAbort ) {
+ // Create the active xhrs callbacks list if needed
+ // and attach the unload handler
+ if ( !xhrCallbacks ) {
+ xhrCallbacks = {};
+ jQuery( window ).unload( xhrOnUnloadAbort );
+ }
+ // Add to list of active xhrs callbacks
+ xhrCallbacks[ handle ] = callback;
+ }
+ xhr.onreadystatechange = callback;
+ }
+ },
+
+ abort: function() {
+ if ( callback ) {
+ callback(0,1);
+ }
+ }
+ };
+ }
+ });
+}
+
+
+
+
+var elemdisplay = {},
+ iframe, iframeDoc,
+ rfxtypes = /^(?:toggle|show|hide)$/,
+ rfxnum = /^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,
+ timerId,
+ fxAttrs = [
+ // height animations
+ [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
+ // width animations
+ [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
+ // opacity animations
+ [ "opacity" ]
+ ],
+ fxNow;
+
+jQuery.fn.extend({
+ show: function( speed, easing, callback ) {
+ var elem, display;
+
+ if ( speed || speed === 0 ) {
+ return this.animate( genFx("show", 3), speed, easing, callback );
+
+ } else {
+ for ( var i = 0, j = this.length; i < j; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.style ) {
+ display = elem.style.display;
+
+ // Reset the inline display of this element to learn if it is
+ // being hidden by cascaded rules or not
+ if ( !jQuery._data(elem, "olddisplay") && display === "none" ) {
+ display = elem.style.display = "";
+ }
+
+ // Set elements which have been overridden with display: none
+ // in a stylesheet to whatever the default browser style is
+ // for such an element
+ if ( display === "" && jQuery.css(elem, "display") === "none" ) {
+ jQuery._data( elem, "olddisplay", defaultDisplay(elem.nodeName) );
+ }
+ }
+ }
+
+ // Set the display of most of the elements in a second loop
+ // to avoid the constant reflow
+ for ( i = 0; i < j; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.style ) {
+ display = elem.style.display;
+
+ if ( display === "" || display === "none" ) {
+ elem.style.display = jQuery._data( elem, "olddisplay" ) || "";
+ }
+ }
+ }
+
+ return this;
+ }
+ },
+
+ hide: function( speed, easing, callback ) {
+ if ( speed || speed === 0 ) {
+ return this.animate( genFx("hide", 3), speed, easing, callback);
+
+ } else {
+ var elem, display,
+ i = 0,
+ j = this.length;
+
+ for ( ; i < j; i++ ) {
+ elem = this[i];
+ if ( elem.style ) {
+ display = jQuery.css( elem, "display" );
+
+ if ( display !== "none" && !jQuery._data( elem, "olddisplay" ) ) {
+ jQuery._data( elem, "olddisplay", display );
+ }
+ }
+ }
+
+ // Set the display of the elements in a second loop
+ // to avoid the constant reflow
+ for ( i = 0; i < j; i++ ) {
+ if ( this[i].style ) {
+ this[i].style.display = "none";
+ }
+ }
+
+ return this;
+ }
+ },
+
+ // Save the old toggle function
+ _toggle: jQuery.fn.toggle,
+
+ toggle: function( fn, fn2, callback ) {
+ var bool = typeof fn === "boolean";
+
+ if ( jQuery.isFunction(fn) && jQuery.isFunction(fn2) ) {
+ this._toggle.apply( this, arguments );
+
+ } else if ( fn == null || bool ) {
+ this.each(function() {
+ var state = bool ? fn : jQuery(this).is(":hidden");
+ jQuery(this)[ state ? "show" : "hide" ]();
+ });
+
+ } else {
+ this.animate(genFx("toggle", 3), fn, fn2, callback);
+ }
+
+ return this;
+ },
+
+ fadeTo: function( speed, to, easing, callback ) {
+ return this.filter(":hidden").css("opacity", 0).show().end()
+ .animate({opacity: to}, speed, easing, callback);
+ },
+
+ animate: function( prop, speed, easing, callback ) {
+ var optall = jQuery.speed( speed, easing, callback );
+
+ if ( jQuery.isEmptyObject( prop ) ) {
+ return this.each( optall.complete, [ false ] );
+ }
+
+ // Do not change referenced properties as per-property easing will be lost
+ prop = jQuery.extend( {}, prop );
+
+ function doAnimation() {
+ // XXX 'this' does not always have a nodeName when running the
+ // test suite
+
+ if ( optall.queue === false ) {
+ jQuery._mark( this );
+ }
+
+ var opt = jQuery.extend( {}, optall ),
+ isElement = this.nodeType === 1,
+ hidden = isElement && jQuery(this).is(":hidden"),
+ name, val, p, e,
+ parts, start, end, unit,
+ method;
+
+ // will store per property easing and be used to determine when an animation is complete
+ opt.animatedProperties = {};
+
+ for ( p in prop ) {
+
+ // property name normalization
+ name = jQuery.camelCase( p );
+ if ( p !== name ) {
+ prop[ name ] = prop[ p ];
+ delete prop[ p ];
+ }
+
+ val = prop[ name ];
+
+ // easing resolution: per property > opt.specialEasing > opt.easing > 'swing' (default)
+ if ( jQuery.isArray( val ) ) {
+ opt.animatedProperties[ name ] = val[ 1 ];
+ val = prop[ name ] = val[ 0 ];
+ } else {
+ opt.animatedProperties[ name ] = opt.specialEasing && opt.specialEasing[ name ] || opt.easing || 'swing';
+ }
+
+ if ( val === "hide" && hidden || val === "show" && !hidden ) {
+ return opt.complete.call( this );
+ }
+
+ if ( isElement && ( name === "height" || name === "width" ) ) {
+ // Make sure that nothing sneaks out
+ // Record all 3 overflow attributes because IE does not
+ // change the overflow attribute when overflowX and
+ // overflowY are set to the same value
+ opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
+
+ // Set display property to inline-block for height/width
+ // animations on inline elements that are having width/height animated
+ if ( jQuery.css( this, "display" ) === "inline" &&
+ jQuery.css( this, "float" ) === "none" ) {
+
+ // inline-level elements accept inline-block;
+ // block-level elements need to be inline with layout
+ if ( !jQuery.support.inlineBlockNeedsLayout || defaultDisplay( this.nodeName ) === "inline" ) {
+ this.style.display = "inline-block";
+
+ } else {
+ this.style.zoom = 1;
+ }
+ }
+ }
+ }
+
+ if ( opt.overflow != null ) {
+ this.style.overflow = "hidden";
+ }
+
+ for ( p in prop ) {
+ e = new jQuery.fx( this, opt, p );
+ val = prop[ p ];
+
+ if ( rfxtypes.test( val ) ) {
+
+ // Tracks whether to show or hide based on private
+ // data attached to the element
+ method = jQuery._data( this, "toggle" + p ) || ( val === "toggle" ? hidden ? "show" : "hide" : 0 );
+ if ( method ) {
+ jQuery._data( this, "toggle" + p, method === "show" ? "hide" : "show" );
+ e[ method ]();
+ } else {
+ e[ val ]();
+ }
+
+ } else {
+ parts = rfxnum.exec( val );
+ start = e.cur();
+
+ if ( parts ) {
+ end = parseFloat( parts[2] );
+ unit = parts[3] || ( jQuery.cssNumber[ p ] ? "" : "px" );
+
+ // We need to compute starting value
+ if ( unit !== "px" ) {
+ jQuery.style( this, p, (end || 1) + unit);
+ start = ( (end || 1) / e.cur() ) * start;
+ jQuery.style( this, p, start + unit);
+ }
+
+ // If a +=/-= token was provided, we're doing a relative animation
+ if ( parts[1] ) {
+ end = ( (parts[ 1 ] === "-=" ? -1 : 1) * end ) + start;
+ }
+
+ e.custom( start, end, unit );
+
+ } else {
+ e.custom( start, val, "" );
+ }
+ }
+ }
+
+ // For JS strict compliance
+ return true;
+ }
+
+ return optall.queue === false ?
+ this.each( doAnimation ) :
+ this.queue( optall.queue, doAnimation );
+ },
+
+ stop: function( type, clearQueue, gotoEnd ) {
+ if ( typeof type !== "string" ) {
+ gotoEnd = clearQueue;
+ clearQueue = type;
+ type = undefined;
+ }
+ if ( clearQueue && type !== false ) {
+ this.queue( type || "fx", [] );
+ }
+
+ return this.each(function() {
+ var index,
+ hadTimers = false,
+ timers = jQuery.timers,
+ data = jQuery._data( this );
+
+ // clear marker counters if we know they won't be
+ if ( !gotoEnd ) {
+ jQuery._unmark( true, this );
+ }
+
+ function stopQueue( elem, data, index ) {
+ var hooks = data[ index ];
+ jQuery.removeData( elem, index, true );
+ hooks.stop( gotoEnd );
+ }
+
+ if ( type == null ) {
+ for ( index in data ) {
+ if ( data[ index ] && data[ index ].stop && index.indexOf(".run") === index.length - 4 ) {
+ stopQueue( this, data, index );
+ }
+ }
+ } else if ( data[ index = type + ".run" ] && data[ index ].stop ){
+ stopQueue( this, data, index );
+ }
+
+ for ( index = timers.length; index--; ) {
+ if ( timers[ index ].elem === this && (type == null || timers[ index ].queue === type) ) {
+ if ( gotoEnd ) {
+
+ // force the next step to be the last
+ timers[ index ]( true );
+ } else {
+ timers[ index ].saveState();
+ }
+ hadTimers = true;
+ timers.splice( index, 1 );
+ }
+ }
+
+ // start the next in the queue if the last step wasn't forced
+ // timers currently will call their complete callbacks, which will dequeue
+ // but only if they were gotoEnd
+ if ( !( gotoEnd && hadTimers ) ) {
+ jQuery.dequeue( this, type );
+ }
+ });
+ }
+
+});
+
+// Animations created synchronously will run synchronously
+function createFxNow() {
+ setTimeout( clearFxNow, 0 );
+ return ( fxNow = jQuery.now() );
+}
+
+function clearFxNow() {
+ fxNow = undefined;
+}
+
+// Generate parameters to create a standard animation
+function genFx( type, num ) {
+ var obj = {};
+
+ jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice( 0, num )), function() {
+ obj[ this ] = type;
+ });
+
+ return obj;
+}
+
+// Generate shortcuts for custom animations
+jQuery.each({
+ slideDown: genFx( "show", 1 ),
+ slideUp: genFx( "hide", 1 ),
+ slideToggle: genFx( "toggle", 1 ),
+ fadeIn: { opacity: "show" },
+ fadeOut: { opacity: "hide" },
+ fadeToggle: { opacity: "toggle" }
+}, function( name, props ) {
+ jQuery.fn[ name ] = function( speed, easing, callback ) {
+ return this.animate( props, speed, easing, callback );
+ };
+});
+
+jQuery.extend({
+ speed: function( speed, easing, fn ) {
+ var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {
+ complete: fn || !fn && easing ||
+ jQuery.isFunction( speed ) && speed,
+ duration: speed,
+ easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing
+ };
+
+ opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
+ opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;
+
+ // normalize opt.queue - true/undefined/null -> "fx"
+ if ( opt.queue == null || opt.queue === true ) {
+ opt.queue = "fx";
+ }
+
+ // Queueing
+ opt.old = opt.complete;
+
+ opt.complete = function( noUnmark ) {
+ if ( jQuery.isFunction( opt.old ) ) {
+ opt.old.call( this );
+ }
+
+ if ( opt.queue ) {
+ jQuery.dequeue( this, opt.queue );
+ } else if ( noUnmark !== false ) {
+ jQuery._unmark( this );
+ }
+ };
+
+ return opt;
+ },
+
+ easing: {
+ linear: function( p, n, firstNum, diff ) {
+ return firstNum + diff * p;
+ },
+ swing: function( p, n, firstNum, diff ) {
+ return ( ( -Math.cos( p*Math.PI ) / 2 ) + 0.5 ) * diff + firstNum;
+ }
+ },
+
+ timers: [],
+
+ fx: function( elem, options, prop ) {
+ this.options = options;
+ this.elem = elem;
+ this.prop = prop;
+
+ options.orig = options.orig || {};
+ }
+
+});
+
+jQuery.fx.prototype = {
+ // Simple function for setting a style value
+ update: function() {
+ if ( this.options.step ) {
+ this.options.step.call( this.elem, this.now, this );
+ }
+
+ ( jQuery.fx.step[ this.prop ] || jQuery.fx.step._default )( this );
+ },
+
+ // Get the current size
+ cur: function() {
+ if ( this.elem[ this.prop ] != null && (!this.elem.style || this.elem.style[ this.prop ] == null) ) {
+ return this.elem[ this.prop ];
+ }
+
+ var parsed,
+ r = jQuery.css( this.elem, this.prop );
+ // Empty strings, null, undefined and "auto" are converted to 0,
+ // complex values such as "rotate(1rad)" are returned as is,
+ // simple values such as "10px" are parsed to Float.
+ return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;
+ },
+
+ // Start an animation from one number to another
+ custom: function( from, to, unit ) {
+ var self = this,
+ fx = jQuery.fx;
+
+ this.startTime = fxNow || createFxNow();
+ this.end = to;
+ this.now = this.start = from;
+ this.pos = this.state = 0;
+ this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
+
+ function t( gotoEnd ) {
+ return self.step( gotoEnd );
+ }
+
+ t.queue = this.options.queue;
+ t.elem = this.elem;
+ t.saveState = function() {
+ if ( self.options.hide && jQuery._data( self.elem, "fxshow" + self.prop ) === undefined ) {
+ jQuery._data( self.elem, "fxshow" + self.prop, self.start );
+ }
+ };
+
+ if ( t() && jQuery.timers.push(t) && !timerId ) {
+ timerId = setInterval( fx.tick, fx.interval );
+ }
+ },
+
+ // Simple 'show' function
+ show: function() {
+ var dataShow = jQuery._data( this.elem, "fxshow" + this.prop );
+
+ // Remember where we started, so that we can go back to it later
+ this.options.orig[ this.prop ] = dataShow || jQuery.style( this.elem, this.prop );
+ this.options.show = true;
+
+ // Begin the animation
+ // Make sure that we start at a small width/height to avoid any flash of content
+ if ( dataShow !== undefined ) {
+ // This show is picking up where a previous hide or show left off
+ this.custom( this.cur(), dataShow );
+ } else {
+ this.custom( this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur() );
+ }
+
+ // Start by showing the element
+ jQuery( this.elem ).show();
+ },
+
+ // Simple 'hide' function
+ hide: function() {
+ // Remember where we started, so that we can go back to it later
+ this.options.orig[ this.prop ] = jQuery._data( this.elem, "fxshow" + this.prop ) || jQuery.style( this.elem, this.prop );
+ this.options.hide = true;
+
+ // Begin the animation
+ this.custom( this.cur(), 0 );
+ },
+
+ // Each step of an animation
+ step: function( gotoEnd ) {
+ var p, n, complete,
+ t = fxNow || createFxNow(),
+ done = true,
+ elem = this.elem,
+ options = this.options;
+
+ if ( gotoEnd || t >= options.duration + this.startTime ) {
+ this.now = this.end;
+ this.pos = this.state = 1;
+ this.update();
+
+ options.animatedProperties[ this.prop ] = true;
+
+ for ( p in options.animatedProperties ) {
+ if ( options.animatedProperties[ p ] !== true ) {
+ done = false;
+ }
+ }
+
+ if ( done ) {
+ // Reset the overflow
+ if ( options.overflow != null && !jQuery.support.shrinkWrapBlocks ) {
+
+ jQuery.each( [ "", "X", "Y" ], function( index, value ) {
+ elem.style[ "overflow" + value ] = options.overflow[ index ];
+ });
+ }
+
+ // Hide the element if the "hide" operation was done
+ if ( options.hide ) {
+ jQuery( elem ).hide();
+ }
+
+ // Reset the properties, if the item has been hidden or shown
+ if ( options.hide || options.show ) {
+ for ( p in options.animatedProperties ) {
+ jQuery.style( elem, p, options.orig[ p ] );
+ jQuery.removeData( elem, "fxshow" + p, true );
+ // Toggle data is no longer needed
+ jQuery.removeData( elem, "toggle" + p, true );
+ }
+ }
+
+ // Execute the complete function
+ // in the event that the complete function throws an exception
+ // we must ensure it won't be called twice. #5684
+
+ complete = options.complete;
+ if ( complete ) {
+
+ options.complete = false;
+ complete.call( elem );
+ }
+ }
+
+ return false;
+
+ } else {
+ // classical easing cannot be used with an Infinity duration
+ if ( options.duration == Infinity ) {
+ this.now = t;
+ } else {
+ n = t - this.startTime;
+ this.state = n / options.duration;
+
+ // Perform the easing function, defaults to swing
+ this.pos = jQuery.easing[ options.animatedProperties[this.prop] ]( this.state, n, 0, 1, options.duration );
+ this.now = this.start + ( (this.end - this.start) * this.pos );
+ }
+ // Perform the next step of the animation
+ this.update();
+ }
+
+ return true;
+ }
+};
+
+jQuery.extend( jQuery.fx, {
+ tick: function() {
+ var timer,
+ timers = jQuery.timers,
+ i = 0;
+
+ for ( ; i < timers.length; i++ ) {
+ timer = timers[ i ];
+ // Checks the timer has not already been removed
+ if ( !timer() && timers[ i ] === timer ) {
+ timers.splice( i--, 1 );
+ }
+ }
+
+ if ( !timers.length ) {
+ jQuery.fx.stop();
+ }
+ },
+
+ interval: 13,
+
+ stop: function() {
+ clearInterval( timerId );
+ timerId = null;
+ },
+
+ speeds: {
+ slow: 600,
+ fast: 200,
+ // Default speed
+ _default: 400
+ },
+
+ step: {
+ opacity: function( fx ) {
+ jQuery.style( fx.elem, "opacity", fx.now );
+ },
+
+ _default: function( fx ) {
+ if ( fx.elem.style && fx.elem.style[ fx.prop ] != null ) {
+ fx.elem.style[ fx.prop ] = fx.now + fx.unit;
+ } else {
+ fx.elem[ fx.prop ] = fx.now;
+ }
+ }
+ }
+});
+
+// Adds width/height step functions
+// Do not set anything below 0
+jQuery.each([ "width", "height" ], function( i, prop ) {
+ jQuery.fx.step[ prop ] = function( fx ) {
+ jQuery.style( fx.elem, prop, Math.max(0, fx.now) + fx.unit );
+ };
+});
+
+if ( jQuery.expr && jQuery.expr.filters ) {
+ jQuery.expr.filters.animated = function( elem ) {
+ return jQuery.grep(jQuery.timers, function( fn ) {
+ return elem === fn.elem;
+ }).length;
+ };
+}
+
+// Try to restore the default display value of an element
+function defaultDisplay( nodeName ) {
+
+ if ( !elemdisplay[ nodeName ] ) {
+
+ var body = document.body,
+ elem = jQuery( "<" + nodeName + ">" ).appendTo( body ),
+ display = elem.css( "display" );
+ elem.remove();
+
+ // If the simple way fails,
+ // get element's real default display by attaching it to a temp iframe
+ if ( display === "none" || display === "" ) {
+ // No iframe to use yet, so create it
+ if ( !iframe ) {
+ iframe = document.createElement( "iframe" );
+ iframe.frameBorder = iframe.width = iframe.height = 0;
+ }
+
+ body.appendChild( iframe );
+
+ // Create a cacheable copy of the iframe document on first call.
+ // IE and Opera will allow us to reuse the iframeDoc without re-writing the fake HTML
+ // document to it; WebKit & Firefox won't allow reusing the iframe document.
+ if ( !iframeDoc || !iframe.createElement ) {
+ iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document;
+ iframeDoc.write( ( document.compatMode === "CSS1Compat" ? "<!doctype html>" : "" ) + "<html><body>" );
+ iframeDoc.close();
+ }
+
+ elem = iframeDoc.createElement( nodeName );
+
+ iframeDoc.body.appendChild( elem );
+
+ display = jQuery.css( elem, "display" );
+ body.removeChild( iframe );
+ }
+
+ // Store the correct default display
+ elemdisplay[ nodeName ] = display;
+ }
+
+ return elemdisplay[ nodeName ];
+}
+
+
+
+
+var rtable = /^t(?:able|d|h)$/i,
+ rroot = /^(?:body|html)$/i;
+
+if ( "getBoundingClientRect" in document.documentElement ) {
+ jQuery.fn.offset = function( options ) {
+ var elem = this[0], box;
+
+ if ( options ) {
+ return this.each(function( i ) {
+ jQuery.offset.setOffset( this, options, i );
+ });
+ }
+
+ if ( !elem || !elem.ownerDocument ) {
+ return null;
+ }
+
+ if ( elem === elem.ownerDocument.body ) {
+ return jQuery.offset.bodyOffset( elem );
+ }
+
+ try {
+ box = elem.getBoundingClientRect();
+ } catch(e) {}
+
+ var doc = elem.ownerDocument,
+ docElem = doc.documentElement;
+
+ // Make sure we're not dealing with a disconnected DOM node
+ if ( !box || !jQuery.contains( docElem, elem ) ) {
+ return box ? { top: box.top, left: box.left } : { top: 0, left: 0 };
+ }
+
+ var body = doc.body,
+ win = getWindow(doc),
+ clientTop = docElem.clientTop || body.clientTop || 0,
+ clientLeft = docElem.clientLeft || body.clientLeft || 0,
+ scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop,
+ scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
+ top = box.top + scrollTop - clientTop,
+ left = box.left + scrollLeft - clientLeft;
+
+ return { top: top, left: left };
+ };
+
+} else {
+ jQuery.fn.offset = function( options ) {
+ var elem = this[0];
+
+ if ( options ) {
+ return this.each(function( i ) {
+ jQuery.offset.setOffset( this, options, i );
+ });
+ }
+
+ if ( !elem || !elem.ownerDocument ) {
+ return null;
+ }
+
+ if ( elem === elem.ownerDocument.body ) {
+ return jQuery.offset.bodyOffset( elem );
+ }
+
+ var computedStyle,
+ offsetParent = elem.offsetParent,
+ prevOffsetParent = elem,
+ doc = elem.ownerDocument,
+ docElem = doc.documentElement,
+ body = doc.body,
+ defaultView = doc.defaultView,
+ prevComputedStyle = defaultView ? defaultView.getComputedStyle( elem, null ) : elem.currentStyle,
+ top = elem.offsetTop,
+ left = elem.offsetLeft;
+
+ while ( (elem = elem.parentNode) && elem !== body && elem !== docElem ) {
+ if ( jQuery.support.fixedPosition && prevComputedStyle.position === "fixed" ) {
+ break;
+ }
+
+ computedStyle = defaultView ? defaultView.getComputedStyle(elem, null) : elem.currentStyle;
+ top -= elem.scrollTop;
+ left -= elem.scrollLeft;
+
+ if ( elem === offsetParent ) {
+ top += elem.offsetTop;
+ left += elem.offsetLeft;
+
+ if ( jQuery.support.doesNotAddBorder && !(jQuery.support.doesAddBorderForTableAndCells && rtable.test(elem.nodeName)) ) {
+ top += parseFloat( computedStyle.borderTopWidth ) || 0;
+ left += parseFloat( computedStyle.borderLeftWidth ) || 0;
+ }
+
+ prevOffsetParent = offsetParent;
+ offsetParent = elem.offsetParent;
+ }
+
+ if ( jQuery.support.subtractsBorderForOverflowNotVisible && computedStyle.overflow !== "visible" ) {
+ top += parseFloat( computedStyle.borderTopWidth ) || 0;
+ left += parseFloat( computedStyle.borderLeftWidth ) || 0;
+ }
+
+ prevComputedStyle = computedStyle;
+ }
+
+ if ( prevComputedStyle.position === "relative" || prevComputedStyle.position === "static" ) {
+ top += body.offsetTop;
+ left += body.offsetLeft;
+ }
+
+ if ( jQuery.support.fixedPosition && prevComputedStyle.position === "fixed" ) {
+ top += Math.max( docElem.scrollTop, body.scrollTop );
+ left += Math.max( docElem.scrollLeft, body.scrollLeft );
+ }
+
+ return { top: top, left: left };
+ };
+}
+
+jQuery.offset = {
+
+ bodyOffset: function( body ) {
+ var top = body.offsetTop,
+ left = body.offsetLeft;
+
+ if ( jQuery.support.doesNotIncludeMarginInBodyOffset ) {
+ top += parseFloat( jQuery.css(body, "marginTop") ) || 0;
+ left += parseFloat( jQuery.css(body, "marginLeft") ) || 0;
+ }
+
+ return { top: top, left: left };
+ },
+
+ setOffset: function( elem, options, i ) {
+ var position = jQuery.css( elem, "position" );
+
+ // set position first, in-case top/left are set even on static elem
+ if ( position === "static" ) {
+ elem.style.position = "relative";
+ }
+
+ var curElem = jQuery( elem ),
+ curOffset = curElem.offset(),
+ curCSSTop = jQuery.css( elem, "top" ),
+ curCSSLeft = jQuery.css( elem, "left" ),
+ calculatePosition = ( position === "absolute" || position === "fixed" ) && jQuery.inArray("auto", [curCSSTop, curCSSLeft]) > -1,
+ props = {}, curPosition = {}, curTop, curLeft;
+
+ // need to be able to calculate position if either top or left is auto and position is either absolute or fixed
+ if ( calculatePosition ) {
+ curPosition = curElem.position();
+ curTop = curPosition.top;
+ curLeft = curPosition.left;
+ } else {
+ curTop = parseFloat( curCSSTop ) || 0;
+ curLeft = parseFloat( curCSSLeft ) || 0;
+ }
+
+ if ( jQuery.isFunction( options ) ) {
+ options = options.call( elem, i, curOffset );
+ }
+
+ if ( options.top != null ) {
+ props.top = ( options.top - curOffset.top ) + curTop;
+ }
+ if ( options.left != null ) {
+ props.left = ( options.left - curOffset.left ) + curLeft;
+ }
+
+ if ( "using" in options ) {
+ options.using.call( elem, props );
+ } else {
+ curElem.css( props );
+ }
+ }
+};
+
+
+jQuery.fn.extend({
+
+ position: function() {
+ if ( !this[0] ) {
+ return null;
+ }
+
+ var elem = this[0],
+
+ // Get *real* offsetParent
+ offsetParent = this.offsetParent(),
+
+ // Get correct offsets
+ offset = this.offset(),
+ parentOffset = rroot.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset();
+
+ // Subtract element margins
+ // note: when an element has margin: auto the offsetLeft and marginLeft
+ // are the same in Safari causing offset.left to incorrectly be 0
+ offset.top -= parseFloat( jQuery.css(elem, "marginTop") ) || 0;
+ offset.left -= parseFloat( jQuery.css(elem, "marginLeft") ) || 0;
+
+ // Add offsetParent borders
+ parentOffset.top += parseFloat( jQuery.css(offsetParent[0], "borderTopWidth") ) || 0;
+ parentOffset.left += parseFloat( jQuery.css(offsetParent[0], "borderLeftWidth") ) || 0;
+
+ // Subtract the two offsets
+ return {
+ top: offset.top - parentOffset.top,
+ left: offset.left - parentOffset.left
+ };
+ },
+
+ offsetParent: function() {
+ return this.map(function() {
+ var offsetParent = this.offsetParent || document.body;
+ while ( offsetParent && (!rroot.test(offsetParent.nodeName) && jQuery.css(offsetParent, "position") === "static") ) {
+ offsetParent = offsetParent.offsetParent;
+ }
+ return offsetParent;
+ });
+ }
+});
+
+
+// Create scrollLeft and scrollTop methods
+jQuery.each( ["Left", "Top"], function( i, name ) {
+ var method = "scroll" + name;
+
+ jQuery.fn[ method ] = function( val ) {
+ var elem, win;
+
+ if ( val === undefined ) {
+ elem = this[ 0 ];
+
+ if ( !elem ) {
+ return null;
+ }
+
+ win = getWindow( elem );
+
+ // Return the scroll offset
+ return win ? ("pageXOffset" in win) ? win[ i ? "pageYOffset" : "pageXOffset" ] :
+ jQuery.support.boxModel && win.document.documentElement[ method ] ||
+ win.document.body[ method ] :
+ elem[ method ];
+ }
+
+ // Set the scroll offset
+ return this.each(function() {
+ win = getWindow( this );
+
+ if ( win ) {
+ win.scrollTo(
+ !i ? val : jQuery( win ).scrollLeft(),
+ i ? val : jQuery( win ).scrollTop()
+ );
+
+ } else {
+ this[ method ] = val;
+ }
+ });
+ };
+});
+
+function getWindow( elem ) {
+ return jQuery.isWindow( elem ) ?
+ elem :
+ elem.nodeType === 9 ?
+ elem.defaultView || elem.parentWindow :
+ false;
+}
+
+
+
+
+// Create width, height, innerHeight, innerWidth, outerHeight and outerWidth methods
+jQuery.each([ "Height", "Width" ], function( i, name ) {
+
+ var type = name.toLowerCase();
+
+ // innerHeight and innerWidth
+ jQuery.fn[ "inner" + name ] = function() {
+ var elem = this[0];
+ return elem ?
+ elem.style ?
+ parseFloat( jQuery.css( elem, type, "padding" ) ) :
+ this[ type ]() :
+ null;
+ };
+
+ // outerHeight and outerWidth
+ jQuery.fn[ "outer" + name ] = function( margin ) {
+ var elem = this[0];
+ return elem ?
+ elem.style ?
+ parseFloat( jQuery.css( elem, type, margin ? "margin" : "border" ) ) :
+ this[ type ]() :
+ null;
+ };
+
+ jQuery.fn[ type ] = function( size ) {
+ // Get window width or height
+ var elem = this[0];
+ if ( !elem ) {
+ return size == null ? null : this;
+ }
+
+ if ( jQuery.isFunction( size ) ) {
+ return this.each(function( i ) {
+ var self = jQuery( this );
+ self[ type ]( size.call( this, i, self[ type ]() ) );
+ });
+ }
+
+ if ( jQuery.isWindow( elem ) ) {
+ // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
+ // 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat
+ var docElemProp = elem.document.documentElement[ "client" + name ],
+ body = elem.document.body;
+ return elem.document.compatMode === "CSS1Compat" && docElemProp ||
+ body && body[ "client" + name ] || docElemProp;
+
+ // Get document width or height
+ } else if ( elem.nodeType === 9 ) {
+ // Either scroll[Width/Height] or offset[Width/Height], whichever is greater
+ return Math.max(
+ elem.documentElement["client" + name],
+ elem.body["scroll" + name], elem.documentElement["scroll" + name],
+ elem.body["offset" + name], elem.documentElement["offset" + name]
+ );
+
+ // Get or set width or height on the element
+ } else if ( size === undefined ) {
+ var orig = jQuery.css( elem, type ),
+ ret = parseFloat( orig );
+
+ return jQuery.isNumeric( ret ) ? ret : orig;
+
+ // Set the width or height on the element (default to pixels if value is unitless)
+ } else {
+ return this.css( type, typeof size === "string" ? size : size + "px" );
+ }
+ };
+
+});
+
+
+
+
+// Expose jQuery to the global object
+window.jQuery = window.$ = jQuery;
+
+// Expose jQuery as an AMD module, but only for AMD loaders that
+// understand the issues with loading multiple versions of jQuery
+// in a page that all might call define(). The loader will indicate
+// they have special allowances for multiple jQuery versions by
+// specifying define.amd.jQuery = true. Register as a named module,
+// since jQuery can be concatenated with other files that may use define,
+// but not use a proper concatenation script that understands anonymous
+// AMD modules. A named AMD is safest and most robust way to register.
+// Lowercase jquery is used because AMD module names are derived from
+// file names, and jQuery is normally delivered in a lowercase file name.
+// Do this after creating the global so that if an AMD module wants to call
+// noConflict to hide this version of jQuery, it will work.
+if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
+ define( "jquery", [], function () { return jQuery; } );
+}
+
+
+
+})( window );
--- /dev/null
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML=" <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
\ No newline at end of file
--- /dev/null
+@echo off
+if "%1"=="" goto usage
+
+echo Building jquery.geo-%1.js
+echo Run this tool from the project root
+echo jquery.geo-%1.js does not include jQuery itself but does include
+echo the jQuery UI widget factory
+
+type js\jquery.geo.head.js > docs\jquery.geo-%1.js
+type js\excanvas.js >> docs\jquery.geo-%1.js
+type js\jquery.ui.widget.js >> docs\jquery.geo-%1.js
+type js\jsrender.js >> docs\jquery.geo-%1.js
+type js\jquery.geo.core.js >> docs\jquery.geo-%1.js
+type js\jquery.geo.geographics.js >> docs\jquery.geo-%1.js
+type js\jquery.geo.geomap.js >> docs\jquery.geo-%1.js
+type js\jquery.geo.tiled.js >> docs\jquery.geo-%1.js
+type js\jquery.geo.shingled.js >> docs\jquery.geo-%1.js
+
+echo Minifying build
+java -jar build\google-compiler-20100917.jar --js docs\jquery.geo-%1.js --js_output_file docs\jquery.geo-%1.min.js
+
+echo Adding dependencies
+type js\jquery.mousewheel.js >> docs\jquery.geo-%1.js
+type js\jquery.mousewheel.min.js >> docs\jquery.geo-%1.min.js
+
+goto end
+
+:usage
+echo Usage: Makedos version
+
+:end
--- /dev/null
+== ABOUT ==
+
+After years of internal development, we are pleased to bring our JavaScript map control to the open-source world in the form of a jQuery plugin.
+
+== DOCS ==
+
+Documentation is hosted at http://jquerygeo.com
+
+News and updates via ryanttb on Twitter: https://twitter.com/ryanttb
+
+== CHANGELOG ==
+
+=== 1.0a4 ===
+* geomap - [bug] changing the tilingScheme doesn't update pixelSize, maxPixelSize, center or centerMax
+* geomap - [bug] shingled services throw exception during resize
+* docs - geomap - axisLayout option
+* geomap - axisLayout option
+* docs - upgrade to jQuery Mobile rc3
+* docs - allow page refreshing
+* docs - geomap - more modes: measureDistance, measureArea, static
+* docs - geomap - append label argument
+* docs - geomap - toPixel/toMap should take all coordinate dimensions like the proj functions
+* geomap - toPixel/toMap should take all coordinate dimensions like the proj functions
+* geomap - move the drawing container instead of individual points during pan
+* geomap - [bug] drawStyle resets after window resize
+* geomap - append label argument
+* docs - geomap - measureLabels option
+* geomap - measureLabels option
+* geomap - measureDistance mode
+* geomap - measureArea mode
+* docs - geomap - service-level shapeStyle
+* docs - geomap - getUrl string option
+* geomap - [bug] create doesn't clear drawing shapes
+* docs - geomap - service-level shapes
+* docs - geo - detect geodetic coordinates and call $.geo.proj automatically, don't require devs to set $.geo.proj to null
+* docs - geomap - add projection section explaining how bbox & center affect map unit type
+* docs - geomap - rename getUrl to src
+* docs - geomap - scroll option
+* docs - geomap - pannable option
+* geomap - src string option
+* examples - string service src
+* geomap - [bug] map tracks mouse when not panning if click on other elements
+* geomap - pannable option
+* geomap - scroll option
+* geomap - [bug] shapesContainer is being cleared twice during mouse wheel zoom
+* geomap - support pinch zoom on iOS
+* docs - geo - add recenter function for bbox
+* geomap - static mode
+* docs - geomap - allow Deferred or Promise as return value from src function
+* geomap - [bug] widget factory merges first service with default sometimes causing exceptions with shingled services
+* geomap - allow Deferred or Promise as return value from src function
+* geomap - [bug] resize event triggered too many times during resize
+* geomap - service-level shapes
+* geomap - service-level find
+* geographics - add a resize method, call from geomap.resize
+* geo - add recenter function for bbox
+* geomap - [bug] errors creating second un-tiled map after destroying a first on same element
+* geomap - refresh shouldn't request new images if the map element is hidden
+* geomap - [bug] delayed multitouch isn't nearly as smooth as true multitouch
+* geomap - [bug] tiled pinch zoom isn't smooth
+* geo - detect geodetic coordinates and call $.geo.proj automatically, don't require devs to set $.geo.proj to null
+* geomap - [bug] mouse wheel doesn't work with jQuery 1.7
+** upgrade to latest jquery.mousewheel plugin
+* geomap - service object visibility and opacity options should be moved to a style property
+* geomap - use _currentServices in all functions unless we actually need to update the public options services object
+* geomap - don't change user's service objects in opacity/toggle
+* geomap - show attr text
+* docs - geomap - selector argument to find method
+* geomap - selector argument to find method
+* geomap - pan mode should use a hand cursor by default
+* geomap - [bug] only services that have finished refreshing move when the user pans
+** for a4: hide unfinished services
+* geomap - [bug] a user can mess with the center option, e.g., convert numbers to strings, and it can wreck havoc with map state
+* geomap - [bug] zoom option doesn't return proper values for shingled services
+* geomap - [bug] non-tiled maps can zoom out past zoom 0
+* geomap - don't request tiles that are -y index
+* geomap - [bug] initializing tiled map by non-geodetic bbox always causes zoom level 0
+* docs - geomap - empty string needed for label element
+* geomap - [bug] double tap to end shapes adds two points before ending the shape, in different places
+* geomap - [bug] lifting fingers after pinch zoom in drawLineString or drawPolygon modes sometimes adds fake visual coordinate on touch point last lifted
+* docs - upgrade to jQuery 1.7.1
+* geomap - [bug] scroll=off doesn't zoom map but also doesn't allow document scroll
+* geomap - [bug] changing mode does not reset measure drawing
+* geomap - [bug] jQuery UI Widget Factory no longer passes pageX & pageY event properties during _trigger when using jQuery 1.7
+** upgrade to Widget Factory 1.8.17
+* examples - all demo (shingled)
+* docs - geomap - custom modes
+* examples - all demo (tiled)
+
+=== 1.0a3 ===
+* docs - geomap - more modes: zoom, drawPoint, drawLineString, drawPolygon
+* geomap - [bug] tiles do not show when pixel sizes are near or lower than 1.0
+* geo - cache bbox as geoBbox to match namespacing convention started by jQuery Mobile
+* docs - geo - initial bbox operations: center, height/width, expandBy, scaleBy & reaspect functions
+* docs - geo - initial geometry operations: bbox, distance, contains, centroid
+* docs - geomap - shape event
+* docs - geomap - refresh argument in append, remove & empty
+* docs - geomap - document the resize method
+* docs - launch jquerygeo.com
+* docs - upgrade to jQuery Mobile b3
+* docs - services - remove id property, explain the class property
+* docs - rename getPixelSize to just pixelSize
+* docs - services - change visible to visibility so it matches shapeStyle & CSS
+* docs - geomap - allow child selector syntax to target service elements with toggle & opacity methods
+* geomap - split servieTypes to different files
+* geomap - add data-geo-service to all service container elements, set to type of service
+* geomap - add data-geo-map to map divs initialized with geomap, remove on destroy
+* geomap - allow child selector syntax to target service elements with toggle & opacity methods
+* geomap - [bug] toggle does not refresh the map services being shown for the first time
+* geomap - [bug] destroy keeps window resize handler
+* geomap - [bug] destroy erases content originally inside map div
+* geomap - serviceType objects' destroy method isn't being called
+* geomap - [bug] destroyed geomaps remember appended shapes
+* docs - geomap - zoom method
+* geomap - zoom method
+* geo - calculate bbox in projected coordinates
+* docs - proj - mention that *Geodetic methods can also do bbox
+* geo - geometry - bbox function
+* docs - geomap - destroy method
+* geo - bbox - center function
+* geo - bbox - height/width function
+* geo - bbox - expandBy function
+* geo - bbox - scaleBy function
+* geo - bbox - reaspect function
+* docs - geomap - drawStyle option
+* geomap - [bug] shapeStyle not maintained after resize
+* geomap - [bug] second drag while in inertial pan causes map to jump back
+* geomap - drawPoint mode
+* geomap - drawLineString mode
+* geomap - refreshShapes should check bbox cache before drawing
+* geomap - drawPolygon mode
+* geomap - port zoom mode
+* geomap - port shift-zoom mode for pan & draw modes
+* geo - geometry - distance function
+* examples - distance
+* geomap - rename getPixelSize to just pixelSize
+* geomap - [bug] zoom method doesn't work with shingled map
+* geomap - store service state data as jQuery data on serviceContainer element
+* geo - geometry - contains function
+* geomap - rename service.visible to visibility having either "visible" or "hidden" values
+* geo - geometry - centroid function
+* geomap - make service id property optional, add HTML id to serviceContainer if present
+* geomap - append should cache the shape's bbox (instead of the bbox function)
+* geomap - remove should remove the shape's bbox cache
+* geomap - empty should remove the bbox cache for all shapes
+* geomap - make the refresh argument in append public, add one to remove & empty
+* geomap - disable shape redraw during interactive zoom if more than 255 shapes
+* geomap - [bug] shape bbox culling hides shapes that are partially on screen & should be drawn
+* docs - geomap - make pixelSize a read-only option instead of a function
+* geomap - make pixelSize a read-only option instead of a function
+* docs - geomap - make shapeStyle an option
+* geomap - make shapeStyle an option
+* examples - rewrite shapeStyle example
+
+=== 1.0a2.5 (2011-08-03) ===
+* geomap - find - [bug] does not handle GeoJSON features
+* geomap - find - allow for 0 pixel tolerance
+* geomap - find - check for bbox on non-Point geometries before getting too specific
+* geo - bbox - cache shape bboxes
+* docs - do not suggest that it's ok to change the geometry now that we're caching bbox
+* geomap - jsperf test of bbox query vs. geom query on point data
+* geographics - [bug] 0 opacity acts as full opacity
+* geomap - add opacity to service type objects & call from geomap's opacity method
+* geomap - add toggle to service type objects & call from geomap's toggle method
+* geo.proj - update bundled web mercator projection code (removed 150 lines of code)
+* geomap - auto-handle window resize events
+* docs/geomap - scale map according to cursor location instead of re-centering during double-click zoom
+* geomap - iOS - [bug] second tap can be anywhere & cause a zoom
+* geomap - shingled - [bug] map doesn't resize correctly
+* examples - geomap drawStyle option
+
+=== 1.0a2 (2011-06-29) ===
+* geomap - Support dynamic map services
+* geomap - [BUG] geomap causes a script error if jQuery UI is already included
+* docs - Document shape methods
+* geomap - [BUG] Port of soft double-click does not work
+* geomap - [BUG] Cannot see dev-supplied inner content if not set to rel/abs position
+* geomap - Add mobile test page
+* geographics - Port graphic code from internal control
+* geomap - Implement append method
+* geographics - drawArc should use style's width and height and only take center as an argument
+* geomap - Document and implement the public refresh method
+* geomap - Implement shapeStyle method
+* geographics - Draw points as rounded rectangles via width, height & borderRadius properties on shapeStyle, drop oval functionality
+* geomap - Remove the pixels property from position events and add the type property to make the event argument a true GeoJSON Point
+* proj - support up to four dimentional array to convert MultiPolygon coordinates in one shot
+* proj - add functions to convert individual positions that developers can re-implement for their own projection
+* geomap - implement remove method
+* geomap - implement find method
+* geomap - [bug] toPixel should round pixel values
+* geomap - [bug] GeometryCollection shapes do not draw with their parent shape's style
+* geomap - implement empty method
+
+=== 1.0a1 (2011-05-09) ===
+* docs - Document a new interface to our internal map control
+* geomap - Port interactive map widget base to jQuery UI widget factory
+* geomap - Support tiled map services
--- /dev/null
+== to do ==
+
+=== b1 ===
+* examples - jQuery Mobile
+* cdn - max age header should be infinite...always cache as long as possible, release code won't change
+* docs - geomap - loadstart event
+* geomap - loadstart event
+* docs - geomap - loadend event
+* geomap - loadend event
+* docs - geomap - pass the service id (if there is one) to the src callback as a view property
+* geomap - pass the service id (if there is one) to the src callback as a view property
+* docs - geomap - support dynamic map services that only work in geodetic coordinates (sr=4326)
+* geomap - support dynamic map services that only work in geodetic coordinates (sr=4326)
+* docs - geomap - allow append to take an array of shapes
+* geomap - allow append to take an array of shapes
+* docs - geomap - allow remove to take an array of shapes
+* geomap - allow remove to take an array of shapes
+* geomap - cache label coordinates (the labelPixel cannot be cached, it will change each refresh)
+* geomap - rotate label based on segment
+* geomap - use pointer-events: none where appropriate
+* geomap - test changing shingled service URL to get updated images (in case of dynamic data)
+* geomap - replace data-geo attributes with classes
+* docs - warn users about potential CSS/JavaScript issues relating to generated elements:
+** ul, li, div, span, img
+* geomap - [bug] if panning is false, mode is draw*, and user attempts to pan, the drawing begins (or another point is added) on the touchstop point
+** a failed pan shouldn't add a point to drawCoords
+* geomap - Firefox - [bug] inertial pan is choppy post touchstop
+* geomap - iPad 2 - [bug] pointAlong doesn't take last point into account in all browsers
+** cannot reproduce; possibly axisLayout image only
+* geomap - ie - [bug] ie highlights entire map div during shift-zoom
+* geomap - [bug] iPad 2 panning is visually jumpy but settles on the correct bbox in the end
+** possibly only when axisLayout is image
+* geomap - [bug] iPad 2 measureLength puts current length on second to last coord instead of last coord
+* geomap - [bug] pinch zoom on iPad 2 (iOS 5) doesn't refresh tiles when zooming out
+** oddly, iPod Touch 4 (iOS 4) is fine
+* geomap - [bug] first use of mouse/touch in any mode moves map by one pixel on mousedown/touch
+** possibly only when axisLayout is image
+* geomap - [bug] multiples of the same event trigger after creating more than one map on the same div, even after destroy
+** destroy should unbind all geomap events
+* geomap - remove this-style state properties
+* geomap - remove "px" from .css calls
+* geo - use Array.push instead of $.merge where needed
+* geomap - [bug] changing services array (without changing all services) after initialization fails
+* geomap - [bug] multiple maps do not work on the same page
+* docs - geomap - add argument to refresh to force reload of images (in case of dynamic data)
+* geomap - add argument to refresh to force reload of images (in case of dynamic data)
+* geomap - create _defaultState object, use for widget-local _widgetState property, reinit _widgetState on _createWidget
+* geomap - don't redraw shapes after interactiveScale, they've already been drawn at new scale
+* geomap - [bug] exception when calling destroy on uninitialized div
+* geomap - maybe throw an error when setting center to an invalid object, such as the first number in a coordinate array: coordinates[ 0 ] <== wrong!
+* geomap - merge interactive pan and zoom into one, faster system (pan/zoom rewrite)
+** pan and zoom in same interactive session (_interactiveCenter & _interactivePixelSize)
+** delay image loading more during movement
+* geomap - request new image in shingled service during interactive pan (after pan/zoom rewrite)
+* docs - geomap - view.service.row & view.service.column to string multiple services together or repeat horizontal tiles
+* geomap - view.service.row & view.service.column to string multiple services together or repeat horizontal tiles
+* geomap - repeat horizontal tiles
+* geomap - don't request tiles that > max possible y for scale
+* geomap - do not interactiveScale non-tiled maps out past pixelSizeMax
+* geomap - [bug] zoom in more than once with zoom method moves tiles to the wrong spot
+** postponed until after pan/zoom rewrite
+* geomap - [bug] only services that have finished refreshing move when the user pans
+** check by zooming in then panning shingled demo with forest layer on
+** for a4: hide unfinished services; for b1: properly move the already zoomed service after pan/zoom rewrite
+* geomap - [bug] map panning is jumpy, appears to be related to shapes and/or drawing context
+** postponed until after pan/zoom rewrite
+* geomap - [bug] pan sometimes lags on first drag
+** cannot reproduce effectively, test again after pan/zoom rewrite
+* geomap - use CSS transition or transform for smoother tiling
+* geomap - implement service-level shape redrawing during interactive movement
+* make a package for new jQuery plugin directory
+** https://github.com/jquery/plugins.jquery.com/blob/master/docs/package.md
+* examples - drag shapes
+* examples - ie7 - [bug] floating info div doesn't show up, inputs are alone and on the left
+* examples - redo the jVectorMap demo page using jQuery Geo
+** http://jvectormap.owl-hollow.net/ ( found via http://www.moretechtips.net/2011/12/22-most-popular-jquery-plugins-of-2011.html )
+* expose jQuery Geo as an AMD module so asynchronous loaders like RequireJS and curl.js can use it
+* examples - geomap resize method
+* examples - multiple maps example
+* examples - Codecademy course
+* geomap - [bug] when a singled image hasn't loaded after pan and you double click on empty space, the zoomed bbox seems wrong
+* build releases using grunt
+* remove BOM from release files
+* add 3rd party license headers
+
+=== future ===
+
+* docs - geomap - pan events (pattern after HTML5 drag)
+* docs - geomap - zoom events (pattern after HTML5 drag)
+* docs - geomap - support two-finger vertical slide as zoom on mobile devices
+* geomap - pan events (pattern after HTML5 drag)
+* geomap - zoom events (pattern after HTML5 drag)
+* geomap - test jQuery widget call chaining when setting option values
+* geomap - when scroll is zoom, attempt to not zoom while user is scrolling the page anyway
+* geomap - allow src to return a callback function or Promise to delay image requests for some reason (multiple requests, etc.)
+* docs - geomap - document the correct way to add a service after init
+* geomap - remember last map unit type set with bbox and center, return all coords and arguments in that type
+* geomap - unbind keydown handler on destroy, it's on the document
+* docs - $.geo.WKT object
+* geo - $.geo.WKT object
+* geomap - panning cursor (for when user is actually panning)
+* geomap - completely original cursor set for pan, zoom, draw, etc.
+* docs - geomap - replace method
+* geomap - replace method
+* docs - geomap - allow service-level refresh
+* geomap - allow service-level refresh
+* geomap - reenable graphics redraw on interactiveScale, if canvas...and scale canvas
+* docs & examples - settle on the word "option" in all text (instead of property) to match widget function
+* docs - make all map examples live
+* docs - explain the 96px scale bar, why 96?
+* docs - write a full page about GeoJSON and what each object type is to $.geo
+* docs - geomap - allow name as service object property
+** if a service has a name property, it will maintain a hidden input with the given name
+* docs - geo - support up to GeometryCollection in distance
+* geo - support up to GeometryCollection in distance
+* docs - geo - support up to GeometryCollection in contains
+* geo - support up to GeometryCollection in contains
+* docs - geo - support up to GeometryCollection in centroid
+* geo - support up to GeometryCollection in centroid
+* geomap - stop using $.data to store bbox since it's only used for drawing; store on _graphicShapes instead
+* geomap - show a drawPoint style while the mouse is down, hide if toolPan or dbltap scale
+* geomap - android - [bug] cannot always pan map after appending shapes
+* geomap - re-use services that have the same id as existing services
+* geomap - deep extend existing service objects when services property is set
+* geomap - cache point bbox if $.geo.proj is not null?
+* geomap - spatially index shapes when a tilingScheme is in place
+* geomap - internal - add _getVisibleTiles method and use it in tiled service and shapes spatial index
+* geomap - remove wheel plugin and use built-in mousewheel event
+* geomap - test how the comma selector works with the find method
+* geomap - compile service src templates, refresh when services changes
+* code - prefer $.data over $.fn.data
+* docs - internal - explain what projection is and which one we use by default (3395) and maybe why we call it web mercator & why we can't get to +/- 90 lat
+* docs - internal - document how geomap draws shapes, the geomapgraphics widget and the reason shapeStyle is a method
+* docs - demo - location based notes/to do list
+* geomap - label divs should have class="geo-label" & style="position: relative;"
+* geomap - find should check labels first
+* geo - geometry - implement JTS note: "The centroid is equal to the centroid of the set of component Geometries of highest dimension (since the lower-dimension geometries contribute zero "weight" to the centroid)"
+* geo - Support WKT with $.geo.parseWKT & $.geo.textify
+* geo - All bbox operations should be done in non-geodetic coordinates for accuracy
+* geo - support bbox in distance ( fix geomap.find )
+* docs - geomap - shapeLabel property
+** template for labels for all shapes added via append
+* geomap - perf test putting all containers that need to move with panning in a single super-container
+* docs - geomap - multiple labels
+* geomap - multiple labels
+* geomap - [bug] mouse wheel on bad or missing tile doesn't zoom out on first rotate
+* docs/geomap - store WKT input for each service
+* geographics - rename the generated style properties to something simple or get better control over closure compiler
+* geomap - document and implement find's callback syntax
+* geomap - repeat horizontal tiles
+* geomap - custering demo/support
+* proj - take scale factor into account when calculating distance in web mercator
+* geographics - Disable fill by setting style.fill to "" & stroke by style.stroke to ""
+* graphics - See Modernizr for comment on BB Storm & canvas detection
+* geographics - document graphics widget
+* geographics - support border, padding, and margin
+* geographics - undo manual outer div style changes
+* geomap - [BUG] Android browser stops pan/zoom after 7 logos on logo demo
+* geomap - store a copy of shapes as WKT in a hidden input
+* geomap - only update WKT copy if shape is appended with refresh argument set to true
+* geomap - find - [maybe] after flatten, check more cached bboxes for non-Point geometrie
+* docs - geomap - support TMS
+* geomap - support TMS
+* docs - geomap - toDataURL method
+* geomap - toDataURL method
+* docs - geomap - SVG & other neat elements/media in labels
+* docs - geo - $.geo.guessLocation function
+* geo - $.geo.guessLocation function
+* docs - services - document the plugin architecture
+** create must return a jQuery collection where geomap can store state info
+* docs - geomap - drawPush function
+** in the drawing modes, this function starts drawing or adds a point into the already-started shape at the given coordinate
+** immediately triggers the shape event if mode is drawPoint
+* geomap - drawPush function
+* docs - geomap - drawPop function
+** in the drawing modes, this function ends drawing or removes a point into the already-started shape at the given coordinate
+* geomap - drawPop function
+* docs - geomap - drawStop function
+** in the drawing modes, this function ends drawing and triggers the shape event with whatever coordinates have already been added to the shape
+* geomap - drawStop
+* geomap - use profiling to improve pan performance
+* geo - potentially add address cracking
+
+==2012-02-15==
+===labels===
+The code already worked the way I wanted! No .geo-label div is created if you don't at least provide an empty string label.
+
+==2012-02-12==
+===find===
+Need to implement the * selector. That was easy. $.isPlainObject thankfully returns false on strings.
+
+===unloaded image===
+It appears that when you pan starting on an area that has an unloaded image, i.e., empty space, this._center gets set to string values. Checking on this now.
+
+===shingled 0===
+To prohibit shingled maps from zooming out past 0, I had to change quite a bit of code. I now have getZoom & getPixelSize methods that will work regardless of tilingScheme. I'm also calculating pixelSizeMax when bboxMax changes and making sure the non-tiled zoom doesn't go less than 0 in two spots. That seems to do the trick.
+
+===service-level shape refresh===
+Shapes on services draw twice, heh. That was a tough one. Turns out, when I create the service-level geomap widgets, I wasn't setting _graphicShapes to a new array before passing the (this) object to the widget factory. All services were sharing the same _graphicShapes reference.
+
+==2012-02-11==
+===current services===
+I need to make sure their style property is always full, that's the point of having an internal copy. This means I have to fill in visibility & opacity when I create the services based on defaults.
+
+=== service style===
+$.extend({
+ visibility: "visible",
+ opacity: 1
+ }, style)
+
+That returns what you would expect if style is undfined.
+
+===str src===
+I can't mod index in the template. I feel that there is a way, but it's not there yet.
+
+==2012-02-06==
+===mousewheel===
+This needs to be updated, it doesn't work with jQuery 1.7.
+
+==2012-02-04==
+===options===
+Right, this._options does equal this.options but only because the latter must be called so and we can minify the former for internal use.
+
+==2012-02-03==
+===proj===
+I seem to be able to detect geodetic coordinates ok. I'm switching all of the $.geo functions to use it. So far, so good.
+
+==2012-02-02==
+===transition===
+They look cool, but I don't think this project is ready for transitions, they have some unexpected side-effects. I would like to rewrite the interactive portion anyway.
+
+==2012-02-01==
+===destroy===
+There's a bug with shingled services if I call destroy and try to re-create.
+
+===services===
+Changing the services option will destroy all service-level shapes. I'm not sure what to do about that. Eventually, I will re-use serviceContainers (and service-geomaps) based on the new services array coming in but I currently don't do that.
+
+===proj===
+Finally, to get rid of proj. The point is, you should be able to use projected coordinates even when $.geo.proj is not null.
+
+The same geodetic test applies to both bbox & coords because the first two elements of either are the x and y of some number. Nice!
+
+==2012-01-31==
+===shapes zoom===
+Service-level shapes don't refresh while zooming and it's not going to be easy at the moment. All I can do is call geomap("refresh") on the serviceContainer which, since they're just service pseduo-map widgets, will only refresh the shapes. The problem is they don't have access to the in-between state of the zoom so the shapes don't draw correctly. I will fix this later when I re-invent the pan/zoom code for beta. For now, service-level shapes will not draw during interactive zoom.
+
+However, it's good to have an idea of how the new system will need to work. Each service-map widget will check the _interactiveCenter & _interactivePixelSize values to draw shapes in proper positions.
+
+==2012-01-30==
+===geographics===
+This widget needs some updates. For now, I'm just going to add the resize function.
+
+Note, with canvas, you don't need to set size CSS at all. The canvas is, by default, inline-block with width and height based on the html element attributes. Also, as is shown in this fiddle, changing the runtime width & height properties of the canvas element does clear the canvas: http://jsfiddle.net/jcGY2/
+
+==2012-01-28==
+===service-level shapes===
+Where was I before I stopped to add Deferred & fix bugs? Right. The service-level geomap widgets should now initialize their own shapesContainer.
+
+===resize===
+resize is a method on the service object because shingled need to stretch the current image.
+
+I need to finally add resize to geographics.
+
+===find===
+find will have to query and include service level shapes.
+
+===map===
+This will be simpler if I allow services to get to the private map variables (similar to how I allow the service object to do it?). No, probably during create.
+
+Can you have protected properties in a jQuery UI widget? I would like to be able to pass a reference to the map during create...I could also use .data. That worked fine. I now have this._map which will be the same as this for the map object and a reference to the map object for services. Nice! On parts that need to work the same between maps and services, (such as _refreshShapes), I can just call this._map.x and it will be correct.
+
+===shapeStyle===
+This should be fine for services.
+
+==2012-01-27==
+===Deferred===
+The src function will be allowed to return a Deferred (or Promise) object. If it does, geomap will wait for the done or fail events. The src function will call resolve or fail.
+
+===service shapes===
+The opacity method might have to stay as a service method because it must directly manipulate image elements in some cases. However, the toggle method can operate on the new service container.
+
+===init services===
+So, the jQuery UI widget factory udpates non-array options fine, i.e., when I get into the _create method, this.options has whatever the user supplied merged in with the default options. However, array options are not copied so any changes to the initial service option are not maintained.
+
+Not true, but it does unfortunately merge the first user supplied service with the default service, osm.
+
+===options===
+I forget why I have _options and options. They are supposed to be internal vs exteternal but they are equal references.
+
+==2012-01-24==
+===a4===
+What's next for a4? static mode.
+
+===static mode===
+This shouldn't be too hard. Currently, any non-defined mode string will act close to static. That's different from how I want it to work. The mode "static" should be static and undefined modes should act like pan for now.
+
+The switch appears to have gone well. I can set the mode to "23" and it acts like it's in pan. That's a feature I will define more fully later and document before it's official.
+
+===labels===
+Time to merge labels into geographics. This is a huge step toward service-level shapes. I should be able to find all $labelsContainer references and move them into sections of geographics.
+
+Now that labelsContainer is part of shapesContainer, the next step is to put shapesContainer under a serviceContainer (which is inside servicesContainer). Got that?
+
+===service-level shapes===
+Here we go! Each serviceContainer has a div that contains all the images. The geographics widget will be a sibling of that.
+
+I may need a new container :/ the extra div was the tiled service's scale container. I need a container for the service/graphics elements.
+
+The map itself will have to manage this new container. I think the internal service objects will get this container and now append their functionality and elements to it. It will no longer have to return a new div for which the map will create a sub-geomap.
+
+==2012-01-23==
+===addressing===
+I think address parsing (cracking) will be a useful feature for geocoding to non-Google geocoders. I might want to add that to $.geo at some point. Christian has some Python code that does it already I can port.
+
+==2012-01-21==
+===pinch aftermath===
+Adding pinch was pretty easy. The only big issue was if a second finger touched a short time after the first. To counter, I fake as if all touch has stopped and initiate a new one. There's room to consolidate code here but I'll get to that later.
+
+===drawPoint===
+This acted funny with pinch zoom in that when the second finger hit late, a shape event got triggered at the first finger.
+
+===draw other===
+Similar issue, touchstop gets triggered after pinch zoom and a segment is added to the shape. Maybe related to calling touchstop. We get in an odd state, actually. The segment shows up but the next touch causes it to disappear and a new one appear instead.
+
+I'm going to put this as a bug and get back to it later. There's much more actual functionality to get into alpha 4.
+
+==2012-01-20==
+===pinch===
+This is mostly ready for iOS. It's a little jumpy so I think I have to detect a second touch while the first one is down as long as they haven't started panning yet and move into pinch zoom.
+
+If the second finger is late, we still only get the touchmove event which will work great.
+
+===android===
+I am going to coin "hold scroll" for android to counter their lack of multitouch. When the user holds the map in the same place for between .5 seconds and before the browser takes over, the user can move the touch point vertically to start zooming as if there's a scroll wheel.
+
+I was going to have "expand zoom" (coined by Laura) where it works similar to "hold scroll" but instead of acting like a scroll wheel, it acted like the bbox was expanding from the hold position. In effect, a zoom in only fake pinch zoom. However, I like the zoom in/out ability of the fake wheel better. This will also work on iOS, I think and even desktop.
+
+===web workers===
+I eventually want the $.geo functions to allow the browser to use web workers but they'll have to be in a javascript file. Hopefully, I can use data URIs.
+
+I could always grab the worker js from the CDN but that would require internet access. What if it's all an internal site, like for government. Or, graphics only that doesn't need servers.
+
+I can use data URIs but I wasn't able to have a local variable in the function. You can, but you need all %20's instead of spaces.
+
+==2012-01-17==
+===geomapshape===
+May be getting multiple shape events when in drawPoint mode and attached via bind("geomapshape").
+
+Not just shape, all events. If you recreate a map on the same div & rebind an event to a new function, it will trigger more than once.
+
+===wkt===
+While not in this release, I have a need to fix WKT parsing. Finished parse LineString & (single ring) Polygons.
+
+===pinch===
+Next on the list is pinch zoom. I can hook this into the scroll zoom mechanics based on pinch center & ratio of initial pinch bbox to current pinch bbox to scale the tiles.
+
+Initially, I'm going to jump one scale level (or scale ratio) like wheel zoom. Later, when I update the whole interactive movement engine, I'm going to transition to the next scale level.
+
+This will tap into the _wheelLevel variable, which I should possibly rename later.
+
+Dropping out of multitouch (lifting one finger) will end interactive zoom & call setCenterAndZoom.
+
+We pick the largest ratio between x & y changes.
+
+==2012-01-16==
+===zoom===
+Accidentally moved some code to where it didn't belong & broke interactive zoom. Fixed.
+
+==2012-01-12==
+===getUrl===
+I would like to further have the service object's properties match html rather than css. I might rename this to just src.
+
+==2012-01-11==
+===scroll & drag===
+I need options to disable the default behavior of scrolling and dragging.
+
+===html attr===
+I think my options should reflect more like HTMl attributes than css properties. Including service object options. That might make me change visibility back to visible :( At least I'm not beta yet.
+
+Scratch that, it's a presentation option and all presentation options should follow CSS. However, I may move it to a style property of the service object. Are there other style properties?
+
+Only opacity.
+
+===scroll===
+I would like to support two-finger vertical slide as zoom on mobile devices but I'm not ready to write that up yet.
+
+Hmm. Can I handle scroll without an option? I can detect page scrolling and set a timeout. If the user has been scrolling the page, we don't want to scroll the map. But, what if the user's cursor just happens to be on the map when they want to scroll the page. I'm keeping scroll, the developer should have control to turn it off all together.
+
+==2012-01-2==
+===service===
+I'm still thinking about service-level methods. I'm not going to add the *All methods right now and I'm not going to have the single methods dive into the services (other than find, which even in jQuery digs into sub-elements not in your collection). The table I wrote below won't go into the docs.
+
+Almost done with the docs for this. I wonder if I can have the jQuery UI widget method find merge results when more than one element are used in the selector. Unlikely but it would be cool. I'm going to have to assume not for now but keep that in mind.
+
+===geo-service===
+I am going to document that all service divs have the geo-service class. So, the default service will be both .osm and .geo-service.
+
+===find===
+It's quite clear to me that I should be able to call find on services. That will return shapes in that service. What does calling find on the map do? Should I have it search map and all services as planned or limit it to just map shapes? I have no idea what this would do in jQuery UI widget factory:
+
+var shapes = $( "#map,#map .osm" ).geomap( "find", { type: "Point", coordinates: [ -71, 42 ] }, 4 );
+
+What will be called, what's the return...just the first? Just the last?
+
+For this version, I'm going to have find on the map only return shapes appended to the map. That will match how the other functions work and document that you cannot use the comma selector with the find method.
+
+===proj===
+I need to get the final doc changes in for the $.geo.proj auto-handling. The definition of "map coordinates" is determined by the last use of center or bbox. The "map coordinates" are used as return values for the center, bbox, and the bbox property of the view object passed to getUrl. Now, how to write that...
+
+===replace===
+Removing the rather extraneous label and style methods from my to do list and adding the much more useful replace method.
+
+replace( existingShape, existingShape, style, label ) is the same as
+append( existingShape, style, label ) but that's fine. If you want to remove existingShape and add a new one, you won't need two calls (remove & append).
+
+===find===
+I'm not going to add a shapes method either. I want that to be part of find. The next version of the find method should take various selector strings such as * and return an array of shapes. This also makes me want to revisit whether or not find can dig into services...I'll see what Peter thinks.
+
+I feel like I want users to be able to write either:
+
+$("#map .osm").geomap("find", "*") or
+$("#map").geomap("find", ".osm *")
+
+append, replace and empty are very one-item specific but find is a digging query operation. I think I just convinced myself that it should be different. It should dig into the services. That's what I think devs will expect. I already can't use find with more than one target...so I'm already breaking the convention of the other three methods.
+
+I'm not going to support the service selector in find's selector argument at this point. But I documented how it will work with a service element selector and that seems pretty cool.
+
+==2012-01-01==
+===offline===
+Responded to an email asking about offline support. I wrote a few things in my reply that should give him some ideas. I'll copy them here:
+
+I have thought of offline support. While something like that likely won't be directly part of jQuery Geo itself, there are different ways to approach it depending on needs. I have plans to put up some demos to give developers ideas but here's a short list:
+
+1. Using the getUrl function to cache downloaded tiles in session storage on IndexDB. Since this function in the service object can do anything you want, it's perfectly fine to check some HTML5 storage options for tiles and returning, e.g., a data URI before attempting to access the Internet. Users will get roaming charges only when the images aren't in the cache. However, the amount of images you can store in the cache is limited by what the browser sets for the cache's upper limit. Some mobile browsers allow users to increase this limit, others don't. This is an option better suited for sites that want to show large areas with many zoom levels.
+
+2. Pre-caching the whole tile set in HTML5's appcache. This is suited for a site that only serves a small area and not too many zoom levels. You would have to get a copy of all the tiles and list them in a cache manifest file. If the user zooms or pans outside the site's area, they can get some "no tile" image. The huge advantage is that users can first browse to the site on WiFi, the app will cache the entire map (which will take a while) but can then walk around and map tiles will instantly come from the local cache. The disadvantage is that HTML5 appcache is usually only 5MB which won't hold too many tiles.
+
+===remove===
+I'm still trying to decide about whether or not remove should remove all references in all services or whether I need removeAll. There is precedent for xAll methods in jQuery. I will also need empty. This is too much for a4. Maybe beta or beyond.
+
+method | map or service | function
+==========================================================================
+append( shape ) | map | appends shapes
+ | | only to the map
+append( shape ) | service | appends shapes
+ | | only to the specific service
+find( Point, radius ) | map | finds shapes appended
+ | | only to the map
+find( Point, radius ) | service | finds shapes appended
+ | | only to the specific service
+findAll( Point, radius ) | map | finds shapes appended
+ | | to the map or any service,
+ | | will not return duplicates
+remove( shape ) | map | removes shapes appended
+ | | only to the map
+remove( shape ) | service | removes shapes appended
+ | | only to the specific service
+removeAll( shape ) | map | removes shapes appended
+ | | to the map or any service,
+ | | will remove all duplicates
+
+==2011-12-22==
+===buffer===
+I'm going to implement buffer as an internal geo method for now & document it later. It's needed.
+
+==2011-12-21==
+===two finger===
+So, Google has settled on two finger single tap for zoom out. Fine.
+
+==2011-12-09==
+===measure===
+Previous measure shows up if you destroy & create map after originally double clicking to end a measure.
+
+In destroy, _drawCoords and _drawPixels are both empty. Where's the data come from?
+
+When back into the new control, _drawPixels has values. There isn't a _drawCoords. Ah, widget factory was using old data, I have to make sure everything is cleared during create, including these two arrays.
+
+===measure-pan===
+Problem when you pan the first time while drawing in axisLayout image.
+
+It's not just axisLayout image. It's also not measure, it's drawPolygon as well. Ok, this is new ;) I works fine in a3. Maybe something with the implementation of axisLayout.
+
+Doh! Another "don't set arrays equal to each other" issue. Does this happen to other devs?
+
+==2011-12-08==
+===semver===
+All that chatter about what version naming to use and then the jQuery blog points to this: http://semver.org/
+
+Also, here's the deal about the new plugins site: http://blog.jquery.com/2011/12/08/what-is-happening-to-the-jquery-plugins-site/
+
+==2011-12-05==
+===measure area===
+I have to work on the measure area tool. Something's not quite right...oh yeah, I haven't implemented it yet.
+
+===length===
+measureDistance should be measureLength. The measureLabels object should have a length property.
+
+==2011-12-01==
+===getUrl===
+I was going to bring our urlFormat property over from the old code but now I think I want it to be the same property on the service object. I think getUrl can be a function, but can *also* be a string for shorthand. This will obviously be a jsrender template string.
+
+==2011-11-30==
+===twheat===
+I'm going to keep the twitter-heat demo and also leave twheat as its own app.
+
+===service-level===
+Finally writing some service-level shape docs for 1.0a4.
+
+===wheel===
+I would like to add a wheel option. We have a wheelMode property on the internal control that can be a few different things. I would like this to be simpler. Maybe just "wheel" and have it be "on" or "off". Or a boolean? But a boolean would limit future additions.
+
+==2011-11-23==
+===measure===
+I'm going to port measure over as pretty much how it's done in our original project, in that it will have its own dedicated label.
+
+===measure-label===
+Trying to make the measure label look nicer than before. I'm adding a style to the document head just for the measure tool. I'm prepending it so designers can override any of the properties.
+
+===jsrender===
+Pulling in jsrender for the measure label. I'm going to have to do it anyway for shapeLabel, may as well do it now. Works well for my needs, I'm going to document the measureLabels option.
+
+==2011-11-22==
+===jQuery 1.7.1===
+I'm still using 1.6.4 and will likely release that way. I'll have to test with 1.7. The notes say that .1 fixed a bug in mousewheel event. I didn't even know they had a mousewheel event. Maybe I can stop using the wheel plugin I've been using.
+
+===label-container===
+Judging from the layout below, I'm going to change textContainer to .geo-label-container and have it move around exactly like the shapesContainer. More like serviceContainer because it doesn't need to be the size of the frame.
+
+ #map .geo-map
+ .geo-event-target.geo-content-frame
+ .geo-services-container
+ .geo-service*
+ .geo-shapes-container
+ canvas
+ .geo-labels-container
+ .geo-label*
+ .geo-draw-container
+ canvas
+ .geo-measure-container
+ .geo-measure-label.geo-label
+
+===refresh polygon===
+I'm still curious why I don't use toPixel on Polygon shapes as a whole? Why the loops? Right, I was thinking toGeodetic. geomap's toPixel function only takes up to two dimensional arrays. Updated both functions.
+
+===pan===
+I need to pan both shapes and labels at the same time. I think I need a new container for these because drawing might be part of this as well.
+
+===length & area===
+Documenting and coding these because I'll need them for the measure tools.
+
+===LineString middle===
+There must be something in JTS that's similar to Esri's ILine.QueryPoint function but I can't find it. This is for getting the point along the line for the label. I want to add a generic function to $.geo. Ah, LineSegment.pointAlong.
+
+Documenting pointAlong. Also implementing it! Works pretty well.
+
+===line rotate===
+I would like to rotate the line label based on the current segment but that will have to wait.
+
+===geographics===
+I'm going to merge labeling into geographics so that I can move the tech as a whole to indivdual services. That'll come later when I need to do service-level shapes.
+
+==2011-11-21==
+===measure===
+I started porting measureDistance today but merged the branch in after being able to draw a line. The rest of it depends on being able to draw labels. Our internal library has _labelShape specifically for measuring but I'm going to merge that into the labeling engine for this release.
+
+===append===
+I need to update the append docs to include label before I do anything. Done. Since it's needed right away, I'm going to start porting labels over.
+
+===shapesContainer===
+Can I re-use $shapesContainer for labels? I'd rather not keep track of a second div. However, I think $shapesContainer *is* a canvas element so that's not going to work. Yeah, it's a geographics widget which...no, geographics appends the canvas. I can re-use that element...but semantically, it isn't correct.
+
+That won't work anyway, I need these to exist at the service div level so they can be targeted by CSS.
+
+However, labels not associated with a service would not be in a service div and would need their own div.
+
+===layout===
+Currently, the layout is, e.g.:
+
+ #map .geo-map
+ .geo-event-target
+ .geo-services-container
+ .geo-service
+ .geo-shapes-container
+ canvas
+ .geo-draw-container
+ canvas
+ ($textContainer)
+
+==2011-11-15==
+===twheat===
+I'm going to make this a real app with its own subdomain. I would like to use paging because the first page doesn't have enough results with a geo argument. What happens when there's no further pages. Is there a "next_page" property? Is is null?
+
+The page will be more impressive if I try to geocode the location property to get more results.
+
+Heh, this will blast a lot of queries at MapQuest. I'm going to have to store ids i've already processed.
+
+That's soo much nicer!
+
+Maybe I can get a couple old pages worth as well on the first search.
+
+Twheat exists!
+
+==2011-11-14==
+===a4===
+Time to start a4 docs. Hopefully this will be the last alpha.
+
+==2011-11-10==
+===merge===
+I merged in the changes to support photos. It amounts to only a few hundred bytes minified and can be pretty useful. I couldn't find a good example service to use for the axisLayout demo.
+
+==2011-11-09==
+===axisLayout===
+Peter likes axisLayout as well...sold!
+
+===first===
+Trying this out for the first time. I can get image tiles from an image server but the zoom is all wrong and it's not centered. wheel zoom is also pretty wrong.
+
+===bbox===
+bbox min values are negative. I suppose that makes sense because it's trying to put the top-left corner of the image in the center of the window. It should be tring to put the center of the image in the center of the window.
+
+===mapbox===
+MapBox uses an "official" tiling spec. In that spec the origin is in the bottom left. That doesn't mean the y-axis is flipped though but it does change how I calculate the tiling scheme. Maybe it does go up. That's awful, why would they do it different than web mercator?
+
+Crisis averted, maybe? It looks like V2 of the MapBox API uses top-left origin and XYZ tiling: http://mapbox.com/hosting/api/
+
+Maybe not averted? Calvin is saying that TileStream itself (as in not hosted by MapBox) only has one API. That doesn't sound right.
+
+===getTiledZoom===
+This is wrong for image types the way we want to understand pixelSize with images. A low zoom means a low pixelSize which is opposite of maps. I seem to have fixed that. I'm getting closer.
+
+===refresh===
+Refresh is ignoring tiles on the bottom & right edge of the viewport.
+
+===top-left===
+The image still starts out in the middle of the page but you can move it around and zoom.
+
+===getUrl===
+I forgot that while Peter's image server determines zoom levels backwards, I was going to handle that in the getUrl function of the service and have the pixelSizes of the tilingScheme be like normal. This works much better. Now I only have the top-left issue. That's not true, zooming bounces the new image to somewhere else, i.e., isn't smooth or correct.
+
+===center====
+So, I realized that at geomap zoom level 0, the image is way zoomed out and my center should be the center of the full image in pixels, so pixel width /2, etc. I changed that but my tiles are still misaligned.
+
+Ha! I wasn't checking for undefined if you pass a zoom of 0. That means I wasn't setting the new center & pixelSize with updated values. All set. Now I'm only offset in the y location and I have a feeling that's because of the axisLayout.
+
+===osm===
+Somehow, the osm class i getting on the serviceContainer element even though I'm completely redoing the services array at init.
+
+===centerMax===
+I think for now I have to assume that at max zoom, the whole service fits in a tile and the center is in the center of the tile. I don't have a way yet to specify the center of a tiling scheme, only the top-left.
+
+===pan===
+Pan is backwards as well when it creates the new bbox.
+
+Fixed pan.
+
+===zoom===
+Looking good! interactiveScale is last. Then maybe I should support shingled. Wait, no, that was interactivePan, when pulling in new tiles.
+
+Zooming twice is a bug but that's in core jQuery Geo, not this image addition.
+
+===shingled===
+Here's a link to a sample shingled image: http://lib.byu.edu/mrsid/bin/image_jpeg.pl?client=sample&image=sample.sid&x=1024&y=2048&level=0&width=1024&height=480
+
+Actually, there are levels so that's a tiled image. Yeah, definitely tiled because the level argument doesn't allow fractional numbers.
+
+===ie select===
+I think I forgot a userselect somewhere because if there are no inputs on the page and you pan, IE highlights everything in blue. Every map tile.
+
+Adding any input or link to the page fixes this. Also, adding this to inside the map div seems to fix it too:
+
+ <input type="hidden" autofocus />
+
+That fixed nothing. The issue isn't with panning, it's with shift-zoom and happens no matter what's on the page with IE9.
+
+==2011-11-08==
+===image coords===
+I need a new property to determine the direction of the y-axis but I want it to be more generic. The difference is a different coordinate system, the side effect is the inverted ordinate axis.
+
+Maybe just "coordinateSystem". I don't want to confuse users with the difference between coordinateSystem and tilingScheme though.
+
+The full, proper term would be coordinateSystemAxisDirection or coordinateSystemAxisType. There seems to be a little precedence for CoordinateSystemAxis, found in GeoTools: http://docs.geotools.org/stable/javadocs/org/opengis/referencing/cs/CoordinateSystemAxis.html
+
+Nothing in JTS.
+
+Hmm, axisLayout? Why not, it's short and specific. axisLayout = "map" | "image". Yes. I like it.
+
+==2011-11-07==
+===gzip===
+I added gzip to jquerygeo.com & all subdomains. jQuery Geo (minified & gzipped) is now 17k and falling!
+
+===move===
+I don't like that mouse move events seem laggy with this release. I need to find out what's different. I thought it was that I'm sending move events even while drawing that removing that hasn't helped.
+
+===drawing===
+Wow, geomap._refreshDrawing was terrible and geographics._drawLines needed a little tweaking.
+
+===return false===
+I didn't have any return falses at the end of my event handlers. I hope that plus the drawing fix makes panning better.
+
+Oops, I went too crazy and added too many and wasn't letting the browser grab events it needed. Chrome's type=number input went crazy up or down if you didn't move the mouse away.
+
+===chrome===
+I've done what I can. The issue appears to be with Chrome or something I'm doing with Chrome. Drawing and panning speed is tremendous in IE9 and Firefox 7.
+
+===geolocation===
+Wow, after any timeout, Firefox stops checking for watchPosition? Is that part of the spec? Nope, not part of the spec. Oh, it *is* part of the spec if it fails due to timeout. It does sound like it's not supposed to trigger until the position changes despite what you put in maximumAge.
+
+==2011-11-01==
+===shapeStyle===
+Time to redo the shapeStyle example in a much more awesome way.
+
+Did I miss something? jQuery UI widget factory isn't complaining that shapeStyle isn't an option on the widget even though I haven't added it yet.
+
+New demo is super-cool!
+
+===refreshShapes===
+I almost had this function clear the shapes geographics until I realized that it's recursive if there's a GeometryCollection. Can't do that.
+
+==2011-11-01==
+===refresh===
+Cleaned up the wording for append, remove & empty. Also, going to have append allow style only, refresh only, or both.
+
+===refreshShapes===
+Due to performance, I'm going to disable the auto refresh after interactiveScale of shapes if the number of shapes is over a certain limit, say, 255.
+
+==2011-10-31==
+===tile paint===
+Another app I want will be tilepaint.jquerygeo.com. It won't actually use jQuery Geo but will repaint tiles on the fly for you based in an input URL and color changes.
+
+===fromGeodeticPos===
+There's a bug trying to convert some positions of a town near Concord in the voting demo. I wonder what's different about that geometry.
+
+The shape is a multipolygon which I am not handling properly. It can be a quadArray. I also removed all the $.each calls which should speed things up a bit.
+
+All set now.
+
+===ArcGIS Wrapper===
+agw.jquerygeo.com will take an ArcGIS Server endpoint and spit out the jQueryGeo you need to initialize a map to that service. It should handle both cached and dynamic services.
+
+==2011-10-30==
+===voting===
+I'm working with Calvin Metcalf at MassDOT attempting to push all the data into jQuery Geo. I might want an option to turn off scaling vector data because it's rather slow. Maybe only do it if they have WebGL.
+
+Disabled it for now.
+
+===refresh===
+The refersh property must be made public, pushing large number of features isn't useful without out.
+
+==2011-10-29==
+===id/class===
+I'm at WhereCamp Boston 2011 and going to try to finish Alpha 3 while I'm here starting with making id optional.
+
+===initOptions===
+Was getting undefined when a user passed nothing as in the simplest test.
+
+===class===
+So, I forgot that class is a reserved word. I'm not sure what to do about that. I can make id optional for now but I'll have to decide about class as a property name. I know as an object literal, I'm supposed to enclose the word in quotes but that's not going to look right for the user who wants to use this. I might have to call it cssClass or something. I'll find out what jQuery uses.
+
+Google Closure won't even minify the build with the word class used as I'm using it. When I'm creating an element using jQuery's argument that takes an object for attributes, what do they use? They require quotes.
+
+===id===
+I'm still storing the service state by id. Since both id and class are optional, I think I need to store it as an array. That's not true, I can store an id on the service object via $.data. The id can be $.now. I wonder if $.now actually has different values if I'm creating more than on service at the same time? I will need to test and potentially use a different means to create the id.
+
+===service create===
+I'm going to assume that the service doesn't already exist during create. Not sure if that's a good idea though. Maybe for now, I won't and I can make the create code smaller later after I have time to test.
+
+I completely forgot that I'm going to store the entire service state via $.data. That will make things a lot easier.
+
+Seems to work ok.
+
+===double click on unloaded===
+When a singled image hasn't loaded after pan and you double click on empty space, the zoomed area seems wrong.
+
+===fusion===
+Andres from Google is showing radius query using fusion tables. Seems like something I can do with jQuery Geo.
+
+===kml===
+I might have to support kml.
+
+===maps.jquerygeo.com===
+I should support typing a url to a geojson file to append all of the json.
+
+==2011-10-28==
+===style===
+Both shapeStyle and drawStyle get and set a plain JavaScript object and should be widget "option"s. While changing them does have side effects, they perform no action themsevles.
+
+===centroid===
+I'm leaving centroid in a3 but removing support for GeometryCollection for now (in the docs & code). That can come later.
+
+===distance===
+No sense having the two lines that support arrays, they'll never hit a valid switch case and it's not in the docs.
+
+==2011-10-25==
+===service state===
+I finally moved it to a $.data store on the services container. It was getting messed up moving between pages in jQuery Mobile when one of the pages had a map.
+
+==2011-10-21==
+===resize===
+Shingled maps don't resize properly. I think I have to have a resize method in there & call it from geomap. All set, I had to mark the current scaleContainer as not being for the given scale any longer and re-center it.
+
+===visible===
+I can't decide about this property of the service object. I need an API audit from Bocoup :(
+
+Since I have opacity and visibility in shapeStyle, and I know I'm not going to change them, I think I do want to have the naming synergy because I do have opacity in service properties that I'm not going to change. Ugh, but the toggle method takes a true or false value. But so does jQuery's and that changes a CSS property from one text string to another.
+
+===change service object===
+Unlike the shape objects, I think it's fine if I change the service object's visibility property. It's sort of awful to see the check for undefined & I change it anyway when they use the toggle method. Why not just set it to "visible" when I create the service?
+
+==2011-10-15==
+===draw pan===
+The current version didn't get the code ported over that disables inertia while drawing. I think I need to put that in because without it, the drawing does feel too fidgety.
+
+I was calling _panEnd instead of _panFinalize for the draw modes.
+
+===draw polygon===
+Finally ported this code over. Seems ok.
+
+==2011-10-14==
+===maps===
+I would like to make an app that lives at maps.jquerygeo.com and has some useful functionality similar to Google maps but uses all open data.
+
+==2011-10-12==
+===push it===
+jQuery Geo is still functional in Chrome drawing all of the census tracts of MA. That's over 55,000 points and 3,000 features. Not too bad.
+
+==2011-10-07==
+===drawLineString===
+I've ported some initial line code and actually made it much more elegant than our internal one.
+
+===shingled===
+The shingled demo needs some work.
+
+==2011-10-06==
+===bbox===
+I pushed out a great new bbox example page. It links to a live jsFiddle even so people can play with the code.
+
+===jQM buttons===
+I did have to make the full screen map an external page. It worked ok after that and the back button still works.
+
+===jQM===
+jQM has virtual buttons to handle either touch or mouse input (some devices have both at the same time): vclick, vdown, vmove & vup. However, they don't handle multi-touch so I think I'm going to have to stick with what I have at the moment. I can't require jQM just to have jQG work on mobile.
+
+===draw===
+Porting our shape drawing code over finally. We're getting a new geographics widget to differentiate drawing from appended shapes.
+
+===drawStyle===
+I forgot to write about the drawStyle method. This one might actually be a true option as it will never be service-specific. It can only apply to the map widget.
+
+===draw functions===
+I need to rename some things. I've been using a few old names from our internal code but they don't quite make sense with some of the newer names of public properties. Mostly, shape should mean anything added via append and draw is the actual in-process drawing.
+
+Two internal method names should be: _refreshShapes (instead of _drawGraphics) & _refreshDrawing (instead of _redrawShape)
+
+===drawPoint dblclick===
+As the docs say, a double tap will zoom in just like in pan mode and not trigger the shape event.
+
+===geographics===
+Oops, my underlying geographics widget is sharing the same canvas context. Flicker city! Ah, much better.
+
+===drawPoint===
+Because I'm delaying before I trigger the shape event, it feels slugish. Maybe I can drop the delay down to 100ms. Too fast, I'm getting the shape event.
+
+==2011-10-04==
+===jqcon===
+I gave a presentation to jQuery Conference Boston 2011. I didn't have much time because I was sharing a block with another speaker. So, my presentation was rushed but I still think a few people interested. I will have to get better at conveying that this is not a wrapper for Google Maps or OpenLayers. We do not host any 3rd party controls.
+
+===jQM buttons===
+With a jQuery Mobile controlgroup or navbar on the same page as a full screen map, I get huge performance issues on Android. iOS seems ok with it. Desktop browsers are fine. The map doesn't pan while sliding your finger but it does show up in the new location when you let go.
+
+Removing the navbar completely didn't help. I think that unless it's a small in-page map, I'm going to have to make the page external.
+
+===bbox===
+To test these new bbox functions, I'm going to redo the bbox example page.
+
+==2011-09-30==
+===json===
+I can store a tiling scheme in JSON but just realized that I can't store a service definition in JSON because of the getUrl function property.
+
+==2011-09-29==
+===zoom===
+Documenting and adding the zoom method.
+
+===bbox===
+Made bbox public. It's also now storing projected coordinates. $.geo.proj can also accept bbox arguments now.
+
+==2011-09-28==
+===disable auto-proj===
+Peter suggested (for actual GIS users) a way to disable $.geo.proj but keep the object where it is. The situation is: "I know I'm working in a projection, and I want $.geo.proj to match that projection, but I don't want it to attempt to auto-project coordinates I pass to $.geo functions or geomap because I'm going to send it projected coordinates, but I do want the object around for when I might want to un-project some coordinates to geodetic."
+
+That's wordy but it does make sense.
+
+However, instead of adding a boolean on $.geo called autoproject and telling people that they can shut it off, I'm going to test diving into arguments to determine if they are geodetic and auto-projecting myself. There will be a performance hit but I need to test if it's too much or worth the simplicity. I think I'm going to find that it's worth the simplicity. I can then remove A LOT of words from the docs about if $.geo.proj is null, blah, blah.
+
+That's fine for input values, but what about auto-unprojecting output values? Maybe I do need that boolean property on $.geo? Or I can store the last way center, bbox, or bboxMax were set and return values in the same format. I would rather it not be that tricky though. If I do add a property, it would only need to be for geomap. The $.geo functions are stateless.
+
+===wkt===
+Working on WKT.stringify/parse. There will be a $.geo.WKT object.
+
+Moving along, made the frame of a nice test page too.
+
+===destroy memory===
+A destroyed geomap remembers what was in _graphicShapes. This means that any other private property initialized with _prop: default, is remembered. There could be other issues...until I replace all indivdual properties with a single state objects. For now, I'm going to reset _graphicShapes to [] in createWidget.
+
+==2011-09-27==
+===destroy===
+Somethings wrong with destroy, can't create after. One thing missing is that resize is called (by jQuery Mobile?) after the call to destroy which causes a script error. I have to make sure I unbind resize. Huh, I've never had to unbind a handler before. Heh, destroy erases any content you had inside the widget before you created a geomap.
+
+==2011-09-26==
+===refactor===
+Found bugs in serviceType.destroy and graphics due to code refactor. The CDN, while wonderful, takes too long to update. I suppose it's not the best idea to put the test branch on the CDN. Done. I'll still occasionally copy test to the CDN but mostly I'm going to update the non-CDN'd version until I know things are ok.
+
+Alpha 3 docs online & tweeted about!
+
+==2011-09-24==
+===resize===
+My code refactoring broke auto-resize. I wonder what else I broke :)
+
+==2011-09-23==
+===filename===
+I renamed the compiled JS files to match what code.jquery.com has for jQuery itself and jQM. jQUI isn't on there, which is odd.
+
+===widget factory syntax hack===
+Testing if the syntax I want is possible with the jQuery UI widget factory pattern. I only want the one widget, but I want to be able to call some functions on other child elements. I already hit a snag. Calling .geomap("toggle") on an element that has not been initialized as a geomap widget doesn't trigger _createWidget, _create or toggle.
+
+===serviceTyep files===
+I'm going to split out the service type objects into their own files. That'll help me make sense of the geomap.js file.
+
+To do that, I had to move _serviceTypes from being an option of geomap to a propery on $.geo itself. This will help third-party service type plugins down the road.
+
+===widget vars===
+I think I have to move all the widget vars back into the object passed to $.widget so that they don't conflict with each other, e.g., multiple geomap widgets. As they are now, I think they're all plugin-level widgets.
+
+===sub-widgets===
+This is awesome. It looks like I can get the syntax I want. Now to figure out the best way to call the method in the parent geomap widget from a service widget.
+
+It seems like the vars created in the closure supplied to $.widget are still used by all widgets on the page. Do I really have to store state in a data object on the element?
+
+Yes, they are shared. Yes, I will have to figure something out.
+
+I just had to plaster my code with this's. I don't like it but it now supports the toggle/opacity syntax I want and *I think* also supports multiple maps on the same page (I think). That's going to increase my minified size quite a bit. I'm going to have to go back and see what I can do to clean it up but I'm choosing proper functionality over code size for the moment.
+
+==2011-09-21==
+===docs===
+I'm trying to clean up the docs and change notational $.geo to jQuery Geo, but not mess up anywhere I mean to reference $.geo the namespace.
+
+===class===
+I have a better plan for service id. I'm going to keep my plan for having the presense of a name property create a hidden input but I'm going to allow the service object to have a class. The class will be applied directly to the built-in service divs. I will still apply data-service-type="tiled" or data-service-type="shingled" to the divs. To apply certain methods to specific services, you will now target the service class under the map element:
+
+$("#map .osm").geomap("toggle", false); // this will hide OSM.
+
+===service create===
+I'm going to require that the service type's create function return a jQuery collection of one item that is addressable for that service. It doesn't really HAVE to have anything in it but I'm going to store service state on it using $.data($el, "geoServiceState", {}) or something.
+
+===jqm===
+Upgraded to jQuery Mobile b3 & added some color to the headers of various doc pages.
+
+===service id===
+After talking to Peter, I'm going to allow class and id with a note that if you use id, you'll have to be careful of adding more than one map on the page. I like this plan. Also, if you do it by id, you can target it directly:
+
+$("#mass-gis").geomap("toggle");
+
+===widget tricks===
+I'm not sure I can do the selector tricks I want with the widget factory. I may have to change my docs & design if I can't do it elegantly :(
+
+==2011-09-20==
+===cache===
+I may be caching too aggressively. I think I should remove caching from $.geo.bbox and instead cache inside of append and clear the bbox cache in remove. I really only need it in the find method.
+
+===jquerygeo.com===
+It's time this project got its own nice site. Also, (mt) is faster than my previous host from places farther away than MA.
+
+==2011-09-18==
+===shape===
+Working on the event docs.
+
+===name===
+I was originally going to rename id in the service objects to name so I could use it as an input name on a hidden input. However, I'm now going to require id but allow name as an optional property. If present, it will create the hidden input. This is now a future task and will not be in alpha.
+
+===append===
+While adding the refresh argument to append, I started thinking again how I want to implement service-level graphics. It would be very nice if I could have the map>service syntax to jQuery and call append, remove and empty on that. I think I defined the syntax a while ago...yeah, see "On shape functions" from 2011-06-02.
+
+The issue I have is that a page can have two maps. The default service has id=OSM. So, if I allowed $("#map #OSM") syntax, it would cause the page to have two elements with the same id, #OSM. However, $("#map [data-geo-service='OSM']") is way to wordy. I'll have to discuss this with others later as this is not an alpha feature either.
+
+==2011-09-16==
+===foss4g===
+FOSS4G is an inspiring conference. I gave my talk and people seemed interested. There was a question about Google. I answered that it's illegal to use them and Chris Schmidt mentioned on Twitter that it's not illegal, it's just hard. We're talking different things. jQuery Geo would use Google tiles directly, which is against license. We will never host a third party widget inside the jQuery Geo div as part of the core functionality. OpenLayers wraps the official Google widget to get around the license restriction (since it's the official Google widget, there's nothing wrong with it) & keeps it up to date (or slides it around) when the user interacts with the OL map. I might do something similar as a blog post when I open up the service types plugin system but until then, but it won't be part of jQuery Geo..."here's how to do it if you want", type of thing. The developer would have to pull in the Google maps API themselves.
+
+===centroid===
+I'll have to see if JTS uses Point or Coordinate as a return value & match it.
+
+Centroid needs to use $.geo.proj for accuracy. The centroid should be calculated in web mercator & projected back to geodetic.
+
+===proj===
+The way we do projection is different than how GIS does it. Usually, when you define a projection, you work in non-geodetic coordinates because the coords have been projected to a flat plane. With jQuery Geo, you work in projected coordinates (I call them non-geodetic) when you set $.geo.proj to null. This can be a little confusing but I think it works.
+
+The first thing we would have to do internally is set $.geo.proj to null because we use pro
+
+===bbox proj===
+bbox might be an issue. a bbox in geodetic coordinates (lon/lat) that is a rectangle, will not be a rectangle in web mercator. That's not a problem with setting the bbox property on geomap but could prove interesting for the bbox of geometry objects. For example, the bbox of a square polygon will not be a parallelagram in geodetic coordinates.
+
+SUGGESTION: Calculate & cache bbox in projected coordinates
+SUGGESTION: Document that lon/lat bboxes will not appear to be correct?
+
+===bbox cache===
+Peter and I got into a talk about caching bboxes. He's worried that we will have too many floating references to objects that cannot be collected. That is a valid point. For example: a user creates a polygon as an object literal, they then call $.geo.bbox on it, then the function ends. We will have a cache of the bbox, but most importantly the cache will reference the original polygon so the browser cannot remove it from memory. I agree that this isn't a great situation. However, the performance benefit gained by the find method is hard to ignore. Also, this only becomes a problem when the developer calls bbox directly. Even though we call it during the find method (building up cache), they are all removed when the dev removes shapes from the map with the remove method. I also know I need to research more about how $.data works with objects. I may be wrong about the reference/memory leaks.
+
+===point bbox cache===
+Now that I know I should cache bbox as non-geodetic, I think I should revisit my jsperf regarding caching a point. Since there's going to be much more calculation involved in $.geo.bbox, I might want to cache points. However, I think I should only cache them if $.geo.proj is not null. When it's null, non-cached points will still be faster as per my original jsperf test.
+
+===events===
+The new shape event will need a new event type. Position event won't cover it but it's similar. I'm not 100% sure if I should merge them. The new event type will be a shape event.
+
+==2011-08-24==
+===utah===
+While zooming in, Chrome skips zoom level 12. I wonder if that's a bug in the control. It is. It's a rounding error in _getTiledZoom. Using floor and * instead...fixed.
+
+==2011-08-19==
+===contains===
+Contains is spatial ref agnostic and is called by distance.
+
+== 2011-08-07 ==
+=== bbox ===
+I think I'm missing something from my bbox description.
+
+=== append ===
+I would like to say that devs can call append again on a shape and it will replace the existing one and clear the bbox cache. That might be a good compromise for bbox cache clearing because I don't want a method specifically for that. Maybe, I'm not sold on the word append replacing something that's already there. Does jQuery have a replace function?
+
+SUGGESTION: geomap - append should allow re-append of existing shapes, replacing the old one and clearing the bbox cache
+
+=== bbox ex ===
+I'm writing an odd example and I already forget if fromGeodetic can take a single position. It can, according to my docs :)
+
+=== from/to pos ===
+I keep going back and forth about coordinate vs. position in terms of words. I almost thought of changing fromGeodeticPos to fromGeodeticCoord but they /are/ called positions in the spec so I'm going to leave it. Again, it's spoken words (of which I suppose I am now including API function names) and code, which is GeoJSON object properties and arguments. Still confusing, this will never be settled so I'm dropping it.
+
+=== bbox cache ===
+Oops, I wasn't namespacing my data. I thing it has to be geoBbox because the namespaced data attribute would be data-geo-bbox.
+
+== 2011-08-06 ==
+=== alpha 2.5 ===
+I released a new version last week and it seems to work well. I'm happy with it. On to documenting the features of alpha3!
+
+=== label ===
+I'm going to add labels and I think I want a label argument to append, however I want both style and label to be optional. In other words, you can pass a shape and a label. The label argument will be a string of html or a jQuery collection of elements to append to a label div. The outer label div is controlled by geomap. It will have a class on it, geo-label, if devs find they need or want to control it that way, i.e., add plain text and control the label style using the class.
+
+=== jQuery a plain ===
+Is a jQuery collection a plain object? Not according to this fiddle: http://jsfiddle.net/ryanttb/4rHK5/
+
+So, I will have two optional args: style and label. Style has to be a plain object. Label can be a string or jQuery object. I'll say style comes first but they can be in any order.
+
+=== shape props ===
+Even though I have args on append, I will eventually allow both style and label properties on the GeoJSON object. They're not standard but not illegal according to the spec.
+
+=== stored label ===
+For speed, I will have to build the label HTML during the call to append, whether or not I use the shapeLabel property on the map or the label supplied during append.
+
+=== override ===
+The label supplied to append will completely override the map's shapeLabel property.
+
+=== centroid ===
+While I would like a LineString's centroid to be a point along the line so I can using it for labeling, that's not the accepted definition of a centroid of a line. According to JTS, it's calculated like a polygon, except when there is a polygon as part of a GeometryCollection. In which case lines and points are ignored when calculating centroid.
+
+=== line label ===
+Checking to see if JTS has an official point-along-line function that I can add w/o creating my own name. It doesn't seem to. I just decided to not label on the centroid for lines but on the "center point" of the line. As you add more points, the label will move further along the line.
+
+=== envelope & bbox ===
+So, OGC simple features doesn't seem to define an Envelope class. The Envelope function is defined to return a Polygon, eww!
+
+=== ogc text align ===
+They do define text alignment options called HorizontalAlignment: start, center and end. Might be useful later for text label options.
+
+=== $.geo & proj ===
+Internally, I need to call the geometry ops in $.geo and I will already have a projected bbox or geometry object. I need a way to tell methods such as $.geo.expandBy to not call $.geo.proj.fromGeodetic even if $.geo.proj is not null. I think for now I will have an internal (and undocumented save for here) argument at the end called ignoreProj. If truthy, it will not call fromGeodetic. A false value or undefined will call fromGeodetic if $.geo.proj is not null.
+
+The documentation will always say fromGeodetic is called if $.geo.proj is not null.
+
+SUGGESTION: Add an internal ignoreProj argument to $.geo geometry functions.
+
+=== scaleBy ===
+I haven't used it yet buy my original port of the scaleBy function was wrong. I was calling expandBy which would make scaleBy(bbox, 1) actually increase the size of the bbox, however, scaleBy(bbox, 1) shouldn't change the size at all. Also, expandBy was wrong basing itself on center instead of just modifying the min/max values directly.
+
+=== geodetic bbox ===
+I forgot that from/toGeodetic don't currently support bboxes. What am I doing already in geomap? Ah, right. I only needed it once (the bbox property) so I'm converting to two positions by hand. I think I should make a conveniance method in $.geo.proj. fromGeodeticBbox or something. I'm not going to make it public. Devs shouldn't have to call it, they can work in whichever projection/non-projected state they set $.geo up as and the public functions can handle it.
+
+SUGGESTION: add private _from/_toGeodeticBbox methods
+
+I did remove the, "if $.geo.proj is not null X first calls fromGeodetic..." shpeal that I had in all the bbox methods because it's not accurate. I won't call from/toGeodetic, I'll call a private method.
+
+Actually, I should be able to detect a bbox vs any other geometry in the *Geodetic methods. It will be an array of 4 numbers, so .length == 4 and $.isArray(value[0]) == false. Maybe I'll put bbox conversion into them after all.
+
+== 2011-07-30 ==
+=== alpha 2.5 ===
+It's been too long since I had a chance to work on this and I want to get an alpha 2.5 release out.
+
+I need to push this back in an change my current branch name. I think it's alpha3 at the moment.
+
+=== jsperf ===
+I wrote a perf for point & linestring bbox cache testing. The test makes me think jQuery.data doesn't do what I think it's doing. When I cache the bbox in a local var, it's very fast but when I cache with data, it's not.
+
+* Here's the point test: http://jsperf.com/point-vs-bbox
+* Here's the line test: http://jsperf.com/line-vs-bbox
+
+It's always faster to test points by themselves, i.e., don't worry about checking for a cached the bbox.
+
+=== branch ===
+I was on master, so I pushed, then created & switched to alpha2-5.
+
+=== opacity ===
+When developing the heat map example, I remember running into an issue where I couldn't get the opaicty to look right between the border and center. Maybe I fixed it somewhere else because I can't seem to reproduce that.
+
+I can still get it on the latest fiddle of the heat map. It's when the opacity is 1 and the strokeOpacity is 0, the stroke still shows up but it should be hidden.
+
+I still can't recreate this on the shapeStyle test page :( Ah, but the twitter heat example has the issue.
+
+Turns out I was or'ing the stroke/fillOpacity with regular opacity in _getGraphicStyle. That's not the right place to do anything with them, and never or.
+
+=== service opacity ===
+I'm going to pull in the service opacity method from AppGeo.Web as "opacity" on each service object, like refresh.
+
+That's done. I haven't documented/implemented what happens if you don't pass a service id. It's required. I'm not sure what I want that to do yet.
+
+=== visible ===
+When starting to think about geomap.toggle, I realize I have a naming conflict so to speak. The service object has a boolean visible property while the shape style has a string visibility property. I think I want to change the service to match the shape style. I don't think there are any attributes in HTML that pertains to visibility so I'm going to match CSS even in the service object which is more internal and less graphical. That said, I don't want to start renaming things in alpha 2.5 so that'll wait until 3.
+
+SUGGESTION: Rename service.visible to visibility having either "visible" or "hidden" values
+
+=== service props ===
+So, I noticed that when a service is created, I don't modify the service objects to fill all the supported properties. So, when toggle is called, there's potentially not an initial visible property set.
+
+I think for now, alpha 2.5, I will have the toggle function assume that there could be an undefined service.visible. The refresh method does the same. Later, though I think I might want to set defaults during _createServices.
+
+=== proj ===
+New projection code seems to work and is awesomely 150 lines shorter!
+
+=== resize ===
+I'm going to hook into the window resize event automatically but I will still need a resize method later in case the dev changes the div size/css.
+
+SUGGESTION: Add a resize method to let geomap know the div has changed size programatically
+
+I'm not sure of the correct way to kill & remake graphics now that it's a jQuery UI widget. It appears that I can call distroy & re-create it.
+
+Resize, is working though when getting smaller, there is a space for the scroll bars. I don't remember having that issue with the internal AppGeo.Web control. That is an issue to tackle after alpha 2.5.
+
+=== dbl tap ===
+What is a thumb? On touch devices, and other soft-dblclick devices I don't take into account that the second click/tap might be too far from the first to count as a tap. There is no move event to cancel. I'm now calculating distance between the two based on _anchor (previous) and _current ( current :). This will need testing. I'm setting it at 10px for now, line 1480 of geomap.js as of this writing.
+
+== 2011-07-19 ==
+=== wkt ===
+Wrote up some to-WKT code for our internal control today. WKT will also be supported by parseWKT and textify methods in $.geo.
+
+SUGGESTION: Support WKT with $.geo.parseWKT (like JSON.parse or $.parseJSON) and $.geo.textify (like JSON.stringify).
+
+=== centroid ===
+Wrote up some centroid code for all but GeometryCollection as well for our internal control. Code similar to this will end up in $.geo.centroid.
+
+== 2011-07-15 ==
+=== presentation ===
+My first real talk about $.geo went well, I think. Next up is FOSS4G in September and, possibly, jQuery Conference Boston in October & Harvard WWW in December.
+
+=== alpha 2.5 ===
+I think I want to push out a bug-fix release of the alpha 2 tech. I'll tag it as alpha 2.5 in github but overwrite the alpha2 js file on host. Well, rename the old one as alpha2.0 in case people find a bug in the new one.
+
+I need to write down exactly what to do for alpha 2.5.
+
+=== shape images ===
+People really want images on shapes, particularly points. I'm removing this feature from my TO DO list:
+* geomap - Document and implement passing a function to shapeStyle and append that returns a geomap style object based on feature or geometry properties
+because I have a much better plan that involves the label div. It will be a normal div and have a class. Each will have relative position and designers can manipulate it however they want.
+
+== 2011-07-12 ==
+=== fiddles ===
+Some fiddles for my demo on Wednesday:
+
+# show a map:
+#* http://jsfiddle.net/ryanttb/A6avG/
+# show a map & zoom to boston
+#* http://jsfiddle.net/ryanttb/2qBgw/
+# show a map & zoom to geolocation
+#* http://jsfiddle.net/ryanttb/Pre4k/
+# add a location search
+#* http://jsfiddle.net/ryanttb/3LpqG/
+# add a twitter search: rpp=100
+#* http://jsfiddle.net/ryanttb/79zTk/
+# use map center as geocode, radius=(pixelSize * width/2 ) / 1000
+#* http://jsfiddle.net/ryanttb/2PCUu/
+# change style to heat map (16x16 size 8 border-radius)
+#* http://jsfiddle.net/ryanttb/PUeRc/
+# update on bboxchange
+#* http://jsfiddle.net/ryanttb/8LQLW/
+# show tweets in popup
+#* http://jsfiddle.net/ryanttb/y2gTh/
+
+== 2011-07-07 ==
+=== bbox ===
+I added bbox caching! I even check to see if the GeoJSON object has a bbox property, which is legal. There's no way to update the bbox but that'll come later.
+
+=== distance ===
+I almost tried to have distance support taking in a Feature but that opens a whole can of worms. I'm going to fix find to only send base geometry types to distance.
+
+DOCUMENT: geometry methods will only take base geometry types (Point, LineString, Polygon & Multi*) or coordinate arrays
+
+I had some weird comment on this method, it should be documented to only take base types, as I just said.
+
+=== form input ===
+I was talking to Chris last night about what geomap does that others don't and he reminded my about the idea I had of keeping a hidden input of the shapes as WKT. This would mean that I had to have a property on geomap for the map's name and also definitely change the service object to use name instead of id for when I add service-level shapes. WKT becomes a problem though when they've added features. I suppose I would dig into the features and only pull the geometry.
+
+=== json ===
+It's been a while since alpha 2. I'm working on a demo that draws the US state boundaries as graphics.
+
+== 2011-06-30 ==
+=== min ===
+Srsly? I wasn't using minified jQuery in my examples? Wow.
+
+== 2011-06-29 ==
+=== alpha2 ===
+Released alpha 2. I don't think anyone's really using it yet though.
+
+== 2011-06-28 ==
+=== on services ===
+I think it would be nice to deep extend service objects that come in via the services property if a service with the given id already exists in _currentServices. This way, you could set the initial opacity of OSM by simply sending {services: [{id: "OSM", opacity: .8}]} during init.
+
+SUGGESTION: deep extend existing service objects when services property is set
+
+=== on opacity ===
+I was beginning to try to throw the opacity & toggle methods into alpha2 but setting the services property is too flickery. I want to do it more like the old widget but that will require adding opacity and toggle methods into the services types. That will have to wait. It will be much faster to call the opacity/toggle methods on geomap than to set the services property each time. I will have to document that.
+
+SUGGESTION: require opacity and toggle functions in the service type objects
+
+== 2011-06-27 ==
+=== on events ===
+I almost forgot that I don't want bboxchange to fire when the developer changes a property in code. Unlike jQuery UI, my events trigger only when the user does something.
+
+=== on alpha 2 ===
+I'm trying to put this together.
+
+== 2011-06-24 ==
+
+=== on shape methods ===
+I'm almost done. I need to finish empty and then I have what I wanted for an alpha 2 release!
+
+=== on Point vs. coordinate ===
+I think I'm going to settle on using Point objects everywhere except the projection functions. Which means I need to change find to accept a Point instead of an array. This should work out because the position events already send GeoJSON objects instead of position arrays.
+
+=== on geometry ===
+contains doesn't care about projections. Lon/lat values do not need to be projected.
+
+I got done some of the geometry functions in $.geo but I'm leaving them private for now until I have a chance to document them and fully implement them.
+
+=== on proj ===
+Finished changing the $.geo.proj docs to explain that it will convert any GeoJSON coordinates array. I think I will also change the requirements to implement other projections by having the developer only have to override single position conversion functions (instead of worrying about the dimentionality of the passed array). Done.
+
+=== on find ===
+Now that proj is more powerful, I think I can handle find.
+
+== 2011-06-18 ==
+Accidentally coded append differently than how I documented. Will fix the code. Documentation FTW!
+
+I can't decide if the geometry functions in $.geo should only accept the base geometry types or not. Initially they will not. I don't want to even think about getting into $.geo.distance(multiPoint, geometryCollection).
+
+$.proj should go up to a three dimensional array to handle the coordinates in a Polygon. Go big or go home, I'm going to support four dimensional arrays so that I can get MultiPolygons as well. That will handle all of the GeoJSON types that have the coordinates property. If you have a GeometryCollection (geometries property), a Feature (geometry property) or a FeatureCollection (features property), then you're on your own.
+
+I may change every mention of "web mercator" to "spherical mercator" to be more specific.
+
+== 2011-06-17 ==
+Attempting to change drawPoint from ovals to rounded rectangles. Shortcutting to drawArc if the width/height/borderRadius are the same.
+
+Since I plan to make geographics public at some point, I thought I might make the drawPoint/Line/Polygon functions take actual GeoJSON shapes but I think that might conflict with some functionality internal to the geomap during digitization...I'll have to revisit this.
+
+I seriously need to settle on the word "position" in my code when referring to an array containing an x/y. I use coordinate a bunch because that's what I used in the old project. Oh, but the property name of the GeoJSON object is coordinates. Heh, this is so confusing :) Ok, as I have been doing: coordinates in code, position in documentation.
+
+I'm using cowboy's safeParse but can't tell what it's guarding against. I thought it would always give me a number but that's not the case. Guard against NaN or undefined?
+
+Should drawing a bbox ignore borderRadius? I haven't decided.
+
+You can fill and then stroke the same path, just sayin'.
+
+Point graphics now draw as rounded rectangles. There's weirdness if your sizes are a little off though. I should probably start clamping values to each other like width & height to borderRadius. Yeah, if either is smaller than borderRadius the drawing gets weird. Maybe I should clamp borderRadius instead. Probably. Yeah, have to clamp borderRadius to min(width, height)/2.
+
+I don't think you can disable fill by setting style.fill to "", but you should be allowed. It shouldn't be required to set fillOpacity to 0.
+
+I just dropped a couple loops out of my graphic drawing in geographics. Should help a bit :)
+
+== 2011-06-12 ==
+I'm finally pushing the renaming changes to the main project.
+
+=== On examples ===
+I talked to Boaz at Bocoup the other day. He suggested cleaning up the examples. I already had this in mind but I should probably do it sooner rather than later. Especially the simplest example. It will look nicer if I cut the div down to 256x256 to match the initial tile I think (done, it already feels better). I do need to keep the examples specific and don't want to add any HTML or JavaScript to them that does not directly relate to the feature I'm testing in the example.
+
+He also suggested unit tests and an API audit, both of which are great ideas and much needed by $.geo.
+
+=== On ovals ===
+Peter and I discussed how points are drawn and what width and height mean in geomap styles. We both agree that ovals are not very useful or used constructs in GIS and it would be better to have rounded rectangles. Therefore, I am dropping ovals and intead supporting a borderRadius property. Circles are still possible as long as your width, height and border radius are all the same, you will have a circle. This will be the default.
+
+=== On double-click zoom ===
+Peter and I both agree that double-click zoom should operate similar to mouse-wheel zoom in that the bbox should scale according to the placement of the mouse cursor during double-click instead of completely re-centering. You will notice that mouse-wheel feels right and double-click can be confusing.
+
+SUGGESTION: Double-click zoom should scale according to cursor location instead of re-centering
+
+=== On position events ===
+I cannot decide if I should officially make the geo argument passed to the position events (move, click, dblclick) a true GeoJSON Point object. The only difference would be the presense of a type property set to "Point". However, the extra pixels property that I have on the geo argument is not part of GeoJSON and will remain in memory. Also, if a developer pushes the new object to a database they are storing extra information that they don't need and will be useless later.
+
+Is the pixels property even that useful? The dev can call geomap.toPixels if they need it. I added the pixels property just because I had the pixels lying around in the internal handling of the event. I think I might just not pass them. It would be more useful to a developer I think to have a true GeoJSON Point object that they can send to geomap.append or a database without worrying about having extra useless data stored with it.
+
+SUGGESTION: Remove the pixels property from position events and add the type property to make the event argument a true GeoJSON Point
+
+I just updated the docs and changed the implementation. I already like this a lot better and am now thinking that the bbox event type could actually send a true GeoJSON Polygon with the bbox property set. That would be totally within the GeoJSON spec and might be useful. That's a bit of extra code on the widget's side though so for now I'm going to leave it as is. I can add that feature later since the current implementation (an object with just a bbox property) is already partially in a true Polygon's spec.
+
+FUTURE SUGGESTION: Send a true GeoJSON Polygon object as the geo argument of bbox events
+
+=== On returning jQuery collections ===
+I need to better design the return values of the shape methods other than find & shapeStyle. Should append, remove and emtpy return the jQuery object of the map elements that the call originated from? Probably.
+
+I just tested and yes, as long as you don't issue a return statement inside a jQuery UI widget method, jQuery UI will return the original jQuery collection for you.
+
+== 2011-06-10 ==
+
+=== On geographics ===
+I am going to leave drawArc in the graphics widget. The drawPoint method will draw our default point shape (rounded rectangle) but, in the future, when custom drawing is in, a developer can use the drawArc if they want.
+
+=== On proj ===
+Peter has updated web mercator <=> geodetic code for me to drop into $.geo.proj.
+
+== 2011-06-06 ==
+
+=== On renaming shape functions ===
+Renamed the shape functions. That was annoying but I'm glad I only had addShape implemented.
+
+=== On jQuery UI widgets ===
+The widget factory does hide methods that start _ from being called. So much for renaming drawArc to _drawArc and still calling it from geomap.
+
+DEPRECATED SUGGESTION: Turn geographics into a NON-jQuery UI plugin
+
+Did I totally get the scoping wrong for the jQuery UI widget? I have local vars in my initial plugin closure. Will they conflict if there are more than one map?
+
+SUGGESTION: Verify that vars local to initial closure do not conflict when multiple maps are placed
+
+== 2011-06-04 ==
+
+=== drawArc ===
+I just realized that by dropping geographics.drawArc in favor of drawPoint I am losing the ability to draw the circles I need for digitization modes. I wonder if, before I turn DrawPoint into a box-like function, that I should copy it to _drawArc. Will jQueryUI.widget let me call it from geomap?
+
+=== shapes ===
+Chris and I were talking about merging append (previously addshape) and find into one call: shapes. If you pass a GeoJSON object or array of, it will add them. Otherwise, it will find them. Thinking about this today, I don't quite think that's the way to go. I mostly feel that calling geomap functions to manipulate shapes is closer to adding elements to a jQuery collection. In other words, to call the geomap functions you must have already wrapped an element with jQuery, $("#map").geomap("funcName"). When you wrap elements with jQuery normally, you have to call append, find, etc. Geomap will work the same with. Of course, I do still want the syntactic sugar later: $("#map").append(geoJsonObj);
+
+== 2011-06-02 ==
+Who needs a blog. I feel like the best place to keep a developer journal is in the project itself so here we go.
+
+=== On addShape's style argument ===
+I showed Peter the shapeStyle demo. He expected that the shape-specific style applied via addShape would only override properties set during addShape. Further manipulation of the base shapeStyle would cascade to the shapes for any properties not explictily set. You know, like CSS. This is obviously the correct way to go and I already forget what made me code it the other way last night. Likely that I was coding at 2am and thought that if a user was passing a style to addShape they would want ALL style properties set in stone for that shape. That is not the right idea. If they want all properties set in stone, they can override all properties in the style object sent to addShape.
+
+I changed the implementation before leaving work.
+
+=== On storing & modifying style ===
+My initial implementation drawing shapes in $.geo is very similar to how I did it with our internal control. I also showed Chris the shapeStyle demo and explained how you can add a style that's different from the base style on the map. He suggested that there be a way to change the style of an already added shape. I figured that I could make addShape update existing geometries instead of adding a new one but the syntax felt wrong. An updateShape method would work and could pass right through to addShape internally.
+
+He also suggested allowing access to the internal GeoJSON->style map (as a return value for addShape) so they can maybe change the existing styles that way. However, something doesn't feel correctly designed about that.
+
+We discussed attaching the style to the GeoJSON object. I already had supporting that in mind. If the user happens to have put a style property on the GeoJSON object before passing it to addShape, I would use that when drawing. A style passed to addShape would override that. The cascade would be: base style => GeoJSON object style => addShape style. A developer can keep the style property on the object even when it's stored, such as in GeoCouch, something that Guido wants a lot.
+
+That said, I know I'm going about this wrong. As I said, my initial implementation feels too much like the old one and I want to do something much slicker in the jQuery world. On my walk home, I realized that since I am only storing a reference to the GeoJSON object and the user supplied style I can probably connect the style object to the GeoJSON object using jQuery's data method.
+
+I wasn't sure if targeting a plain object is allowed in jQuery. I know it's possible but that doesn't mean I should. I remember IRC talk about it but forget the outcome. Info on ticket 8108 (http://bugs.jquery.com/ticket/8108) reveals that the DataLink plugin does this so I'm going to assume it's ok.
+
+This little fiddle shows that the data properties don't show up with stringify http://jsfiddle.net/ryanttb/PetpJ/ but I'm going to do more research to see if it changes the object in a way devs will notice.
+
+The data method doesn't natively support namespacing. I could do it myself using a period but I would like to follow what jQuery Mobile is doing with their data attribute stuff. They use data-jm-role which I believe equates to the call .data("jmRole") but I need to check up on that as well. So if I were to do data-geo-style, that would be .data("geoStyle"). I can live with that.
+
+SUGGESTION: Store $.geo styles via $(geoJsonObj).data("geoStyle", style)
+
+=== On shape functions ===
+Again, the shape functions feel very old and were grabbed from my internal control. Tonight I was thinking about a new way to do this and it involves being able to wrap GeoJSON objects with jQuery collections and intercept $.fn calls such as .css. Also, non-jQuery UI functions can be added to the geomap widget's div to replace the old addShape method.
+
+For example: $("#map").geomap("addShape", geoJson) could be $("#map").append(geoJson).
+
+How would I add shapes to specific services in the future? $("#map [data-geo-service='OSM']").append(geoJson) maybe.
+
+This might be going too far. Perhaps the old way is fine but use newer names (without the Shape suffix): $("#map").geomap("append", geoJsonObj), $("#map").geomap("append", "OSM", geoJsonObj), $("#map").geomap("remove", geoJsonObj) and $("#map").geomap("empty").
+
+SUGGESTION: Rename the shape manipulation methods
+
+The methods also need to take arrays of GeoJSON objects as returned by databases and jQuery collections of GeoJSON objects as possibly returned by the find method.
+
+SUGGESTION: Shape manipulation methods should handle arrays
+
+Looking back at the above code, I feel like maybe if I really can get the selector-based way to work, e.g., intercept the append call on the geomap widget, I could target the services using a class. They are divs inside the map, I should be able to trap them:
+
+$("#map .OSM").append(geoJsonObj);
+
+That does look really nice.
+
+SUGGESTION: (future) Trap existing jQuery calls: append, remove and emtpy, on both the widget element and the service elements as syntactic sugar, forward them to geomap calls
+
+However, using the class selector feels wrong. Especially if I'm telling them to use the id property when creating the service objects. I could switch it to name when creating the service objects, then:
+
+$("#map [name='OSM']").append(geoJsonObj);
+
+I need to find out if any of this is possible as soon as possible. It's still shorter than calling geomap. I would have to warn users to make sure the space is there, this needs to be a descendant selector.
+
+SUGGESTION: Use name instead of id in the service objects.
+
+=== On finding shapes ===
+So you can append and remove shapes. Fine. But I also want a better way to search for shapes. Chris and I mulled over a selector-based way. I think I still want the simplicity of $("#map").geomap("find", position, pixelTol). That will cover a lot of use cases, users click maps a lot.
+
+However, there should be other ways to get at your shapes in a UI widget way:
+$("#map").geomap("find", [-67, 43], 8); // find all shapes within 8px of the map position (special case)
+$("#map").geomap("find", "[type='Point']"); // Finds all points
+$("#map").geomap("find", "[name='OSM'] *"); // all shapes in the OSM service (future)
+$("#map").geomap("find", ":intersects(wkt(POINT(-67 43)))"); // Advanced spatial filter, OGC selector names (way future)
+
+Here's how they would look with the future jQuery syntactic sugar:
+$("#map").find([-67, 43], 8); // find all shapes within 8px of the map position (special case)
+$("#map").find("[type='Point']"); // Finds all points
+$("#map [name='OSM']").find(); // all shapes in the OSM service (future)
+$("#map").find(":intersects(wkt(POINT(-67 43)))"); // Advanced spatial filter, OGC selector names (way future)
+
--- /dev/null
+<!doctype html>
+<title>not found</title>
+
+<style>
+body { text-align: center;}
+h1 { font-size: 50px; }
+body { font: 20px Constantia, 'Hoefler Text', "Adobe Caslon Pro", Baskerville, Georgia, Times, serif; color: #999; text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); }
+::-moz-selection{ background:#FF5E99; color:#fff; }
+::selection { background:#FF5E99; color:#fff; }
+details { display:block; }
+a { color: rgb(36, 109, 56); text-decoration:none; }
+a:hover { color: rgb(96, 73, 141) ; text-shadow: 2px 2px 2px rgba(36, 109, 56, 0.5); }
+span[frown] { transform: rotate(90deg); display:inline-block; color: #bbb; }
+</style>
+
+
+
+
+<details>
+ <summary><h1>Not found</h1></summary>
+ <p><span frown>:(</span></p>
+</details>
\ No newline at end of file
--- /dev/null
+* {
+ float: none;
+ background: #fff;
+ color: #000;
+}
+
+
+body { font-size: 80%; }
\ No newline at end of file
--- /dev/null
+/* HTML5 ✰ Boilerplate */
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+blockquote, q { quotes: none; }
+blockquote:before, blockquote:after,
+q:before, q:after { content: ""; content: none; }
+ins { background-color: #ff9; color: #000; text-decoration: none; }
+mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
+del { text-decoration: line-through; }
+abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
+table { border-collapse: collapse; border-spacing: 0; }
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+input, select { vertical-align: middle; }
+
+body { font:13px/1.231 sans-serif; *font-size:small; }
+select, input, textarea, button { font:99% sans-serif; }
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
+html { overflow-y: scroll; }
+a:hover, a:active { outline: none; }
+ul, ol { margin-left: 2em; }
+ol { list-style-type: decimal; }
+nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
+small { font-size: 85%; }
+strong, th { font-weight: bold; }
+td { vertical-align: top; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
+textarea { overflow: auto; }
+.ie6 legend, .ie7 legend { margin-left: -7px; }
+input[type="radio"] { vertical-align: text-bottom; }
+input[type="checkbox"] { vertical-align: bottom; }
+.ie7 input[type="checkbox"] { vertical-align: baseline; }
+.ie6 input { vertical-align: text-bottom; }
+label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
+button, input, select, textarea { margin: 0; }
+input:valid, textarea:valid { }
+input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
+.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
+
+
+button { width: auto; overflow: visible; }
+.ie7 img { -ms-interpolation-mode: bicubic; }
+
+body, select, input, textarea { color: #444; }
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+
+/* jQuery Mobile f theme */
+.ui-bar-f {
+ background: rgb(116, 176, 66); border: 1px solid rgb(86, 160, 14); color: rgb(255, 255, 255); font-weight: bold; text-shadow: 0 -1px 1px #234403;
+}
+.ui-bar-f {
+ color: rgb(255, 255, 255);
+}
+.ui-bar-f .ui-link-inherit {
+ color: rgb(255, 255, 255);
+}
+.ui-bar-f .ui-link {
+ color: rgb(255, 255, 255); font-weight: bold;
+}
+
+
+ /* Primary Styles
+ Author: Ryan Westphal
+ */
+
+h1 img { width: 24px; height: 24px; margin-right: 4px; vertical-align: middle; }
+div>h2 { font-size: 1.1em; margin: .5em 0; text-decoration: underline; }
+p { margin: .5em 0; }
+th { text-align: right; padding: .5em 1em .5em 0; }
+td { padding: .5em 0; }
+b { font-weight: bold; }
+i { font-style: italic; }
+h4 { font-style: italic; font-weight: normal; }
+
+.geomap-indoc
+{
+ height: 240px;
+ position: relative;
+ width: 98%;
+}
+
+.objectProperties th { text-align: left; }
+.objectProperties td { padding: .25em .5em; }
+.objectProperties tr:nth-child(2n+1) { background: #bbb; }
+
+code .comment { color: #393; }
+
+blockquote
+{
+ margin: 8px;
+ font-style: italic;
+}
+
+.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.hidden { display: none; visibility: hidden; }
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+.invisible { visibility: hidden; }
+.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+
+@media all and (orientation:portrait) {
+
+}
+
+@media all and (orientation:landscape) {
+
+}
+
+@media screen and (max-device-width: 480px) {
+
+ /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
+}
+
+
+@media print {
+ * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
+ -ms-filter: none !important; }
+ a, a:visited { color: #444 !important; text-decoration: underline; }
+ a[href]:after { content: " (" attr(href) ")"; }
+ abbr[title]:after { content: " (" attr(title) ")"; }
+ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
+ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+ thead { display: table-header-group; }
+ tr, img { page-break-inside: avoid; }
+ @page { margin: 0.5cm; }
+ p, h2, h3 { orphans: 3; widows: 3; }
+ h2, h3{ page-break-after: avoid; }
+}
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>everything shingled</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="A demo of everything using a shingled service">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+
+ h2 { display: inline-block; }
+ @media only screen and (min-width: 800px)
+ {
+ h2 { display: inline-block; min-width: 8em; }
+ }
+
+ h3 { display: inline-block; margin-left: 2em; }
+
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ /* a label CSS example: all text for labels on the hydro service will be blue! */
+ #massgis_hydrography
+ {
+ color: blue;
+ }
+
+ .modes { margin: .5em 0; }
+
+ #drawStyle label span { display: inline-block; font-weight: bold; text-align: right; width: 7em; }
+ #drawStyle input { width: 6em; }
+
+ .scrollOption-container, .scrollOptions, .clickTargets, .toggleTargets { display: inline-block; }
+
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info mobile-shrink">
+ <div class="links not-mobile">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/69mFE/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+
+ <h1 class="not-mobile">shingled</h1>
+
+ <p class="not-mobile">The everything demo, shingled edition!</p>
+
+ <section class="not-mobile">
+ <h2>info</h2> <button id="toggle-info" type="button" title="click to view some map info">show / hide</button>
+
+ <table id="mapInfo" style="display: none;">
+ <tr><th>bbox</th><td data-option="bbox"></td></tr>
+ <tr><th>center</th><td data-option="center"></td></tr>
+ <tr><th>zoom</th><td data-option="zoom"></td></tr>
+ </table>
+ </section>
+
+ <form>
+
+ <section>
+ <h2>basics</h2>
+
+ <input type="checkbox" id="togglePannable" name="togglePannable" value="togglePannable" checked="checked" /><label for="togglePannable">pannable</label>
+
+ <div class="scrollOption-container not-mobile">
+ <h3>scroll</h3>
+ <div class="scrollOptions">
+ <input type="radio" id="scrollOptionDefault" name="scrollOption" value="default" checked="checked" /><label for="scrollOptionDefault">default / scroll</label>
+ <input type="radio" id="scrollOptionOff" name="scrollOption" value="off" /><label for="scrollOptionOff">off</label>
+ </div>
+ </div>
+ </section>
+
+ <section>
+ <h2>mode</h2> <button id="change-mode" type="button" title="click to change the mode">pan</button>
+
+ <div id="modeOptions" style="display: none;">
+ <div class="modes">
+ <input type="radio" id="static" name="mode" value="static" /><label for="static">static</label>
+ <input type="radio" id="pan" name="mode" value="pan" checked="checked" /><label for="pan">pan</label>
+ <input type="radio" id="zoom" name="mode" value="zoom" /><label for="zoom">zoom</label>
+ </div>
+
+ <div class="modes">
+ <input type="radio" id="drawPoint" name="mode" value="drawPoint" /><label for="drawPoint">drawPoint</label>
+ <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">drawLineString</label>
+ <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">drawPolygon</label>
+ </div>
+
+ <div class="modes">
+ <!--
+ jQuery Geo supports custom modes by letting you set the mode option to
+ any string you want. You can set a cursor for your custom mode using the
+ cursors option. When on a custom mode, you will get the geomapclick event.
+ -->
+ <input type="radio" id="remove" name="mode" value="remove" /><label for="remove">remove</label>
+ </div>
+
+ <div class="modes">
+ <input type="radio" id="measureLength" name="mode" value="measureLength" /><label for="measureLength">measureLength</label>
+ <input type="radio" id="measureArea" name="mode" value="measureArea" /><label for="measureArea">measureArea</label>
+ </div>
+ </div>
+ </section>
+
+ <section id="shapeLabels" style="display: none;">
+ <label>
+ <h2>label</h2>
+ <input type="text" name="shapeLabel" />
+ </label>
+ </section>
+
+ <div class="not-mobile">
+ <section id="drawStyle" style="display: none;">
+ <h2>style</h2>
+ <div>
+ <label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
+ <label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
+ </div>
+ <div>
+ <label><span>fill</span> <input type="color" name="fill" value="" /></label>
+ <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
+ </div>
+ <div>
+ <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
+ <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
+ </div>
+ <div>
+ <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
+ </div>
+ <div>
+ <label><span>width</span> <input type="number" name="width" value="8" /></label>
+ <label><span>height</span> <input type="number" name="height" value="8" /></label>
+ </div>
+ <div>
+ <label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
+ </div>
+
+ </section>
+ </div>
+
+ <section id="clickTarget" style="display: none;">
+ <h2>target</h2>
+ <div class="clickTargets">
+ <input type="radio" id="clickTargetWidget" name="clickTarget" value="widget" checked="checked" /><label for="clickTargetWidget">widget</label>
+ <input type="radio" id="clickTargetBasemapService" name="clickTarget" value="massgis_basemap" /><label for="clickTargetBasemapService">basemap</label>
+ <input type="radio" id="clickTargetHydroService" name="clickTarget" value="massgis_hydrography" /><label for="clickTargetHydroService">hydro</label>
+ </div>
+ </section>
+
+ <section id="serviceToggle">
+ <h2>toggle</h2>
+
+ <div class="toggleTargets">
+ <input type="checkbox" id="toggleTargetBasemapService" name="toggleTarget" value="massgis_basemap" checked="checked" /><label for="toggleTargetBasemapService">basemap</label>
+ <input type="checkbox" id="toggleTargetHydroService" name="toggleTarget" value="massgis_hydrography" checked="checked" /><label for="toggleTargetHydroService">hydro</label>
+ </div>
+ <section>
+
+ <section id="zoomButtons">
+ <h2>zoom</h2>
+
+ <button id="zoomOut" type="button">out</button>
+
+ <button id="zoomIn" type="button">in</button>
+ </section>
+ </form>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="js/all-shingled.js"></script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>everything tiled</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="A demo of everything using a tiled service">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+
+ h2 { display: inline-block; }
+ @media only screen and (min-width: 800px)
+ {
+ h2 { display: inline-block; min-width: 8em; }
+ }
+
+ h3 { display: inline-block; margin-left: 2em; }
+
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ /* a label CSS example: all text for labels on the speedtest service will be purple and bold! */
+ #broadband-speedtest
+ {
+ color: purple;
+ font-weight: bold;
+ }
+
+ .modes { margin: .5em 0; }
+
+ #drawStyle label span { display: inline-block; font-weight: bold; text-align: right; width: 7em; }
+ #drawStyle input { width: 6em; }
+
+ .scrollOption-container, .scrollOptions, .clickTargets, .toggleTargets { display: inline-block; }
+
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info mobile-shrink">
+ <div class="links not-mobile">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/uSMjS/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+
+ <h1 class="not-mobile">tiled</h1>
+
+ <p class="not-mobile">The everything demo, tiled edition!</p>
+
+ <section class="not-mobile">
+ <h2>info</h2> <button id="toggle-info" type="button" title="click to view some map info">show / hide</button>
+
+ <table id="mapInfo" style="display: none;">
+ <tr><th>bbox</th><td data-option="bbox"></td></tr>
+ <tr><th>center</th><td data-option="center"></td></tr>
+ <tr><th>zoom</th><td data-option="zoom"></td></tr>
+ </table>
+ </section>
+
+ <form>
+
+ <section>
+ <h2>basics</h2>
+
+ <input type="checkbox" id="togglePannable" name="togglePannable" value="togglePannable" checked="checked" /><label for="togglePannable">pannable</label>
+
+ <div class="scrollOption-container not-mobile">
+ <h3>scroll</h3>
+ <div class="scrollOptions">
+ <input type="radio" id="scrollOptionDefault" name="scrollOption" value="default" checked="checked" /><label for="scrollOptionDefault">default / scroll</label>
+ <input type="radio" id="scrollOptionOff" name="scrollOption" value="off" /><label for="scrollOptionOff">off</label>
+ </div>
+ </div>
+ </section>
+
+ <section>
+ <h2>mode</h2> <button id="change-mode" type="button" title="click to change the mode">pan</button>
+
+ <div id="modeOptions" style="display: none;">
+ <div class="modes">
+ <input type="radio" id="static" name="mode" value="static" /><label for="static">static</label>
+ <input type="radio" id="pan" name="mode" value="pan" checked="checked" /><label for="pan">pan</label>
+ <input type="radio" id="zoom" name="mode" value="zoom" /><label for="zoom">zoom</label>
+ </div>
+
+ <div class="modes">
+ <input type="radio" id="drawPoint" name="mode" value="drawPoint" /><label for="drawPoint">drawPoint</label>
+ <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">drawLineString</label>
+ <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">drawPolygon</label>
+ </div>
+
+ <div class="modes">
+ <!--
+ jQuery Geo supports custom modes by letting you set the mode option to
+ any string you want. You can set a cursor for your custom mode using the
+ cursors option. When on a custom mode, you will get the geomapclick event.
+ -->
+ <input type="radio" id="remove" name="mode" value="remove" /><label for="remove">remove</label>
+ </div>
+
+ <div class="modes">
+ <input type="radio" id="measureLength" name="mode" value="measureLength" /><label for="measureLength">measureLength</label>
+ <input type="radio" id="measureArea" name="mode" value="measureArea" /><label for="measureArea">measureArea</label>
+ </div>
+ </div>
+ </section>
+
+ <section id="shapeLabels" style="display: none;">
+ <label>
+ <h2>label</h2>
+ <input type="text" name="shapeLabel" />
+ </label>
+ </section>
+
+ <div class="not-mobile">
+ <section id="drawStyle" style="display: none;">
+ <h2>style</h2>
+ <div>
+ <label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
+ <label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
+ </div>
+ <div>
+ <label><span>fill</span> <input type="color" name="fill" value="" /></label>
+ <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
+ </div>
+ <div>
+ <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
+ <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
+ </div>
+ <div>
+ <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
+ </div>
+ <div>
+ <label><span>width</span> <input type="number" name="width" value="8" /></label>
+ <label><span>height</span> <input type="number" name="height" value="8" /></label>
+ </div>
+ <div>
+ <label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
+ </div>
+
+ </section>
+ </div>
+
+ <section id="clickTarget" style="display: none;">
+ <h2>target</h2>
+ <div class="clickTargets">
+ <input type="radio" id="clickTargetWidget" name="clickTarget" value="widget" checked="checked" /><label for="clickTargetWidget">widget</label>
+ <input type="radio" id="clickTargetBasemapService" name="clickTarget" value="mapquest-open" /><label for="clickTargetBasemapService">basemap</label>
+ <input type="radio" id="clickTargetSpeedtestService" name="clickTarget" value="broadband-speedtest" /><label for="clickTargetSpeedtestService">speedtest</label>
+ </div>
+ </section>
+
+ <section id="serviceToggle">
+ <h2>toggle</h2>
+
+ <div class="toggleTargets">
+ <input type="checkbox" id="toggleTargetBasemapService" name="toggleTarget" value="mapquest-open" checked="checked" /><label for="toggleTargetBasemapService">basemap</label>
+ <input type="checkbox" id="toggleTargetSpeedtestService" name="toggleTarget" value="broadband-speedtest" checked="checked" /><label for="toggleTargetSpeedtestService">speedtest</label>
+ </div>
+ <section>
+
+ <section id="zoomButtons">
+ <h2>zoom</h2>
+
+ <button id="zoomOut" type="button">out</button>
+
+ <button id="zoomIn" type="button">in</button>
+ </section>
+ </form>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="js/all-tiled.js"></script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>append test</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of append">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/NPdUp/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>append</h1>
+ <p>This page tests geomap's append method and some style and refresh arguments.</p>
+ <p class="not-mobile">A geomap widget is initialized to the continental US and a point is placed in Massachusetts. A line extends from MA to South Jersey where a triangle covers an area. For points, geomap draws a pixel-based oval around the map coordinate. Since the size of the oval is based on pixels, it will be the same size at all scales. The pixel length of lines and size of polygons changes at different scales because each point that makes up the shapes is locked at specific map coordinates. The stroke width for all shapes will be the same number of pixels at all scales.</p>
+ <p class="not-mobile">All the geometry is stored in a single GeometryCollection. This example first draws the entire collection with a broad stroked, off-white style to create a halo effect behind the real shapes. This makes them a little easier to see on the map. Then we draw each individual shape again with color. The first two have the default style which is red. For the last one, we change the color to blue.</p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ var map = $("#map").geomap({
+ center: [-75, 40],
+ zoom: 5
+ });
+
+ // create a geometry collection having a
+ // Point, LineString and Polygon
+ var gcol = {
+ type: "GeometryCollection",
+ geometries: [
+ {
+ type: "Point",
+ coordinates: [-71, 42]
+ },
+ {
+ type: "LineString",
+ coordinates: [
+ [-71, 42],
+ [-75, 39.5]
+ ]
+ },
+ {
+ type: "Polygon",
+ coordinates: [[
+ [-75, 39.7],
+ [-74.8, 39.3],
+ [-75.2, 39.3],
+ [-75, 39.7]
+ ]]
+ }
+ ]
+ };
+
+ // append the entire collection as a single geometry
+ // do not refresh the map yet
+ map.geomap("append", gcol, { strokeWidth: "8px", color: "#dedede" }, false);
+
+ // append the point
+ // I'm refreshing the map just as an example
+ // since true is the default, this is the same as not passing it
+ // we normally would pass false because there's more append calls below
+ map.geomap("append", gcol.geometries[0], true);
+
+ // append the LineString
+ // don't refresh the map yet,
+ // this is the correct way when there's more drawing to do
+ map.geomap("append", gcol.geometries[1], false);
+
+ // append the Polygon with a blue style
+ // refresh will default to true and the map will redraw
+ // even if we passed false to all append calls above
+ map.geomap("append", gcol.geometries[2], { color: "#00d" });
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>append to service test</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of append to service">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>append to service</h1>
+ <p>This page is similar to the regular append example but tests appending shapes to a specific service instead of the map itself. The result, however, should look exactly the same.</p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ var map = $( "#map" ).geomap( {
+ center: [-75, 40],
+ zoom: 5
+ } ),
+ service = map.find( ".osm" );
+
+ // create a geometry collection having a
+ // Point, LineString and Polygon
+ var gcol = {
+ type: "GeometryCollection",
+ geometries: [
+ {
+ type: "Point",
+ coordinates: [-71, 42]
+ },
+ {
+ type: "LineString",
+ coordinates: [
+ [-71, 42],
+ [-75, 39.5]
+ ]
+ },
+ {
+ type: "Polygon",
+ coordinates: [[
+ [-75, 39.7],
+ [-74.8, 39.3],
+ [-75.2, 39.3],
+ [-75, 39.7]
+ ]]
+ }
+ ]
+ };
+
+ // append the entire collection as a single geometry
+ // do not refresh the service yet
+ service.geomap("append", gcol, { strokeWidth: "8px", color: "#dedede" }, false);
+
+ // append the point
+ // I'm refreshing the service just as an example
+ // since true is the default, this is the same as not passing it
+ // we normally would pass false because there's more append calls below
+ service.geomap("append", gcol.geometries[0], true);
+
+ // append the LineString
+ // don't refresh the service yet,
+ // this is the correct way when there's more drawing to do
+ service.geomap("append", gcol.geometries[1], false);
+
+ // append the Polygon with a blue style
+ // refresh will default to true and the service will redraw
+ // even if we passed false to all append calls above
+ service.geomap("append", gcol.geometries[2], { color: "#00d" });
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>bbox examples</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of bbox property and bbox functions">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ table
+ {
+ table-layout: fixed;
+ width: 99%;
+ }
+
+ table th
+ {
+ font-weight: bold;
+ padding-right: 2px;
+ text-align: right;
+ width: 35%;
+ }
+
+ .bbox-prop input
+ {
+ font-family: Courier New, Monospace;
+ width: 70%;
+ }
+
+ .expandBy input
+ {
+ width: 80px;
+ }
+
+ .scaleBy input, .reaspect input
+ {
+ width: 64px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/wQ86c/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>
+ bbox</h1>
+ <p class="not-mobile">This example tests getting and setting the bbox property on the geomap widget as well as calling various $.geo bbox functions.</p>
+ <form action="bbox.html" class="bbox">
+ <table>
+ <tr class="bbox-prop">
+ <th><label for="bbox-prop">.geomap("option", "bbox",</label> </th>
+ <td><input id="bbox-prop" name="bbox-prop" type="text" /> <b>)</b> <button type="submit">set</button></td>
+ </tr>
+ <tr class="bbox-bbox">
+ <th>.geomap( "option", "bbox" )</th>
+ <td></td>
+ </tr>
+ <tr class="bbox-proj">
+ <th>$.geo.proj.fromGeodetic( bbox )</th>
+ <td></td>
+ </tr>
+ <tr class="bbox-projto">
+ <th>$.geo.proj.toGeodetic( bbox )</th>
+ <td></td>
+ </tr>
+ <tr class="bbox-center">
+ <th>$.geo.center( bbox )</th>
+ <td></td>
+ </tr>
+ <tr class="bbox-width">
+ <th>$.geo.width( bbox )</th>
+ <td></td>
+ </tr>
+ <tr class="bbox-height">
+ <th>$.geo.height( bbox )</th>
+ <td></td>
+ </tr>
+ </table>
+ </form>
+ <div class="not-mobile">
+ <p>For this example, the functions below operate on the above text input only. After using them, you can click <b>set</b> to update the map and other info.</p>
+ <form action="bbox.html" class="expandBy">
+ <table>
+ <tr>
+ <th>$.geo.expandBy( bbox, </th>
+ <td><input type="text" name="dx" value="20000" /> <b>,</b> <input type="text" name="dy" value="20000" /> <b>)</b> <button type="submit">expand</button></td>
+ </tr>
+ </table>
+ </form>
+ <form action="bbox.html" class="scaleBy">
+ <table>
+ <tr>
+ <th>$.geo.scaleBy( bbox, </th>
+ <td><input type="text" name="scale" value="2" /> <b>)</b> <button type="submit">scale</button></td>
+ </tr>
+ </table>
+ </form>
+ <p>This last function, reaspect, forces an aspect ratio (calculation of width divided height) onto the bbox. You can run this but it will be difficult to visually see the effects because the geomap widget will automatically reaspect again to fit the bbox back into the viewport.</p>
+ <p>Common aspect ratio values: 16:9 = 16/9 ~ <b>1.78</b>:1 & 4:3 = 4/3 ~ <b>1.33</b>:1</p>
+ <form action="bbox.html" class="reaspect">
+ <table>
+ <tr>
+ <th>$.geo.reaspect( bbox, </th>
+ <td><input type="text" name="ratio" value="1.78" /> <b>)</b> <button type="submit">reaspect</button></td>
+ </tr>
+ </table>
+ </form>
+ </div>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var $bboxInput = $(".bbox-prop input"); //< bbox input reference
+
+ // create a map
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8,
+ bboxchange: function (e, geo) {
+ // inside the bboxchange event, update the input with the current bbox
+ // the geo object has a bbox property which is the new bbox
+ updateBboxDisplay(geo.bbox);
+ }
+ });
+
+ $("form.bbox").submit(function () {
+ // a new bbox is submitted, update the bbox option
+ // since the bbox is a JavaScript array, jQuery's parseJSON method will work
+ map.geomap("option", "bbox", $.parseJSON($bboxInput.val()));
+
+ // based on the map view's aspect ratio, the final bbox can be different than the one set
+ // update the input and display based on the new/final value
+ updateBboxDisplay(map.geomap("option", "bbox"));
+
+ // return false to short circuit the form, we don't want to actually submit
+ return false;
+ });
+
+ $("form.expandBy").submit(function () {
+ // read the bbox from the input using jQuery's parseJSON method
+ var bbox = $.parseJSON($bboxInput.val());
+
+ // read the dx, dy inputs
+ var dx = parseFloat($("input[name='dx']").val()),
+ dy = parseFloat($("input[name='dy']").val());
+
+ // call expandBy
+ // expandBy takes a bbox argument & returns an updated bbox
+ bbox = $.geo.expandBy(bbox, dx, dy);
+
+ // only update the bbox input for now and let the user click set
+ $bboxInput.val("[" + bbox + "]");
+
+ return false;
+ });
+
+ $("form.scaleBy").submit(function () {
+ // read the bbox from the input using jQuery's parseJSON method
+ var bbox = $.parseJSON($bboxInput.val());
+
+ // read the scale input
+ var scale = parseFloat($("input[name='scale']").val());
+
+ // call scaleBy
+ // scaleBy takes a bbox argument & returns an updated bbox
+ bbox = $.geo.scaleBy(bbox, scale);
+
+ // only update the bbox input for now and let the user click set
+ $bboxInput.val("[" + bbox + "]");
+
+ return false;
+ });
+
+ $("form.reaspect").submit(function () {
+ // read the bbox from the input using jQuery's parseJSON method
+ var bbox = $.parseJSON($bboxInput.val());
+
+ // read the aspect ratio input
+ var ratio = parseFloat($("input[name='ratio']").val());
+
+ // call reaspect
+ // reaspect takes a bbox argument & returns an updated bbox
+ bbox = $.geo.reaspect(bbox, ratio);
+
+ // only update the bbox input for now and let the user click set
+ $bboxInput.val("[" + bbox + "]");
+
+ return false;
+ });
+
+ // jQuery UI for a pretty button
+ $("button").button();
+
+ // set the initial display based on the map's current bbox
+ updateBboxDisplay(map.geomap("option", "bbox"));
+
+ function updateBboxDisplay(bbox) {
+ // update the bbox displayed in the input and calculated values
+ // the bbox argument is a GeoJSON bounding box, which is a JavaScript array
+ // we can call join on the array to add spaces after the bbox values
+ // the values are: min longitude/x, min latitude/y, max longitude/x, max latitude/y
+ $bboxInput.val( "[" + bbox + "]" );
+
+ // the bbox as the map widget sees it
+ $(".bbox-bbox td").text( "[" + map.geomap( "option", "bbox" ).join( ", " ) + "]" );
+
+ // projected coordinates of the bbox
+ $(".bbox-proj td").text("[" + $.geo.proj.fromGeodetic(bbox).join( ", " ) + "]");
+
+ // geodetic coordinates of the bbox
+ $(".bbox-projto td").text("[" + $.geo.proj.toGeodetic(bbox).join( ", " ) + "]");
+
+ // center of the bbox, a GeoJSON position
+ $(".bbox-center td").text("[" + $.geo.center(bbox).join( ", " ) + "]");
+
+ // width & height of the bbox, in meters because the default service is web mercator meters
+ // the units will match whatever coordinate system you set via geomap's tilingScheme or bboxMax properties
+ $(".bbox-width td").text($.geo.width(bbox) + " m");
+ $(".bbox-height td").text($.geo.height(bbox) + " m");
+ }
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Census</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+
+ <meta name="description" content="Displaying Census data">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+ </style>
+</head>
+<body>
+ <div id="map"></div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+
+ $.ajaxTransport( function( options, originalOptions, jqXHR ) {
+ var xdr;
+
+ return {
+ send: function( _, completeCallback ) {
+ xdr = new XDomainRequest();
+ xdr.onload = function() {
+ var responses = {
+ text: xdr.responseText
+ };
+
+ // force status code to 200, XDomainRequest rejects all other successful status codes
+ if (xdr.contentType.match(/\/json/)) {
+ options.dataTypes.push("json");
+ completeCallback(200, 'success', responses);
+ } else {
+ completeCallback(200, 'success', responses);
+ // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334804
+ }
+ };
+ xdr.onerror = xdr.ontimeout = function() {
+ var responses = {
+ text: xdr.responseText
+ };
+ completeCallback(400, 'failed', responses);
+ }
+
+ xdr.open(options.type, options.url);
+ xdr.send(options.data);
+ },
+ abort: function() {
+ if(xdr) {
+ xdr.abort();
+ }
+ }
+ };
+ });
+
+
+
+ // create a map
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8,
+ services: [
+ {
+ id: "GeoIQ-acetate",
+ type: "tiled",
+ src: function (view) {
+ return "http://acetate.geoiq.com/tiles/acetate-base/"
+ + view.zoom + "/"
+ + view.tile.column + "/"
+ + view.tile.row
+ + ".png";
+ },
+ attr: "<p>GeoIQ Acetate layer</p>"
+ },
+ {
+ id: "broadbandmap-income-demographics",
+ type: "tiled",
+ src: function (view) {
+ return "http://www.broadbandmap.gov/StamenTiles/demographics/education/"
+ + view.zoom + "/"
+ + view.tile.column + "/"
+ + view.tile.row
+ + ".png";
+ },
+ attr: "<p>National Broadband Map income demographics</p>"
+ }
+ ]
+// click: function(e, geo) {
+// $.ajax({
+// url: "http://www.broadbandmap.gov/broadbandmap/demographic/fall2010/coordinates",
+// data: {
+// longitude: geo.coordinates[0],
+// latitude: geo.coordinates[1],
+// format: "jsonp"
+// },
+// dataType: "jsonp",
+// success: function(result) {
+// //alert(result.Results.blockFips + ": " + result.Results.educationBachelorOrGreater);
+// },
+// error: function(xhr) {
+// alert(xhr.statusText);
+// }
+// })
+// }
+ });
+
+ $.ajax({
+ url: "http://data.jquerygeo.com/gz_2010_25_140_00_500k.geojson",
+ dataType: "json",
+ success: function(result) {
+ map.geomap("append", result);
+ },
+ error: function(xhr) {
+ alert(xhr.statusText);
+ }
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>center/zoom example</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of the center, zoom and pixelSize options">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/ku2eC/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>center & zoom example</h1>
+ <p>This page tests getting and setting the center & zoom options as well as getting the read-only pixelSize.</p>
+ <p class="not-mobile">The center option is a <a href="http://geojson.org/geojson-spec.html#positions">GeoJSON position</a>. The zoom option for a tiled service a whole number from zero to the number of levels defined by the tilingScheme minus one. The pixelSize is the number of map units that fit in a single pixel of the current view. By default, pixelSize is in meters because the default map service is in web mercator meters.</p>
+ <h2>runtime options</h2>
+ <p>Change the center or zoom option and click set to update the map.</p>
+ <div>
+ <label>center <input type="text" name="runtimeCenter" value="[-74.5,40.3]" /></label>
+ <button id="cmdRuntimeCenter" type="button">set</button>
+ </div>
+ <div>
+ <label>zoom <input type="number" name="runtimeZoom" value="8" /></label>
+ <button id="cmdRuntimeZoom" type="button">set</button>
+ </div>
+ <h2>actual values</h2>
+ <p class="not-mobile">The center option is in geodetic cooridinates, [lon, lat], but the internal center is in map units, web mercator by default.</p>
+ <table>
+ <tr>
+ <th>.geomap( "option", "center" )</th>
+ <td id="lblCenterPublic"></td>
+ </tr>
+ <tr>
+ <th>$.geo.proj.toGeodetic( center )</th>
+ <td id="lblCenterGeodetic"></td>
+ </tr>
+ <tr>
+ <th><i>internal center, always projected</i></th>
+ <td id="lblCenterInternal"></td>
+ </tr>
+ <tr>
+ <th>.geomap( "option", "zoom" )</th>
+ <td id="lblZoom"></td>
+ </tr>
+ <tr>
+ <th>.geomap( "option", "pixelSize" )</th>
+ <td id="lblPixelSize"></td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // store references to the inputs
+ var runtimeCenter = $("input[name='runtimeCenter']"),
+ runtimeZoom = $("input[name='runtimeZoom']");
+
+ // create a map, base the initial center and zoom on the inputs
+ var map = $("#map").geomap({
+ center: $.parseJSON(runtimeCenter.val()),
+ zoom: parseInt(runtimeZoom.val()),
+ bboxchange: function (e, geo) {
+ // when the bbox changes, update the displayed values
+ refreshActual();
+ }
+ });
+
+ $("#cmdRuntimeCenter").button().click(function () {
+ // when the user sets the center, pass the new value to geomap
+ // since plain JavaScript arrays are valid JSON,
+ // we can use $.parseJSON to convert the string into a value
+ map.geomap("option", "center", $.parseJSON(runtimeCenter.val()));
+
+ // geomap doesn't trigger the bbox event when options are set programmatically
+ // update the displayed values
+ refreshActual();
+ });
+
+ $("#cmdRuntimeZoom").button().click(function () {
+ // when the user sets the zoom, pass the new value to geomap
+ // zoom is always a whole number
+ map.geomap("option", "zoom", parseInt(runtimeZoom.val()));
+
+ // geomap doesn't trigger the bbox event when options are set programmatically
+ // update the displayed values
+ refreshActual();
+ });
+
+ // update the displayed values with how the map widget was initialized
+ refreshActual();
+
+ function refreshActual() {
+ // get the center
+ // by default, this is in geodetic coordinates, [lon, lat]
+ // but the developer can use projected coordinates
+ var actualCenter = map.geomap("option", "center");
+ $("#lblCenterPublic").text("[" + actualCenter + "]");
+
+ if ($.geo.proj) {
+ // if there is a projection set,
+ // we can display the center in both geodetic and projected units
+
+ var geodetic = $.geo.proj.toGeodetic(actualCenter);
+ $("#lblCenterGeodetic").text("[" + geodetic + "]");
+
+ // the internal center is always projected
+ var internal = $.geo.proj.fromGeodetic(actualCenter);
+ $("#lblCenterInternal").text("[" + internal + "]");
+ } else {
+ // if not, then both the center option and internal center are the same
+ $("#lblCenterInternal").text("[" + actualCenter + "]");
+
+ // also, we have no way to display the center in lon, lat
+ }
+
+ // get and display the current zoom value
+ $("#lblZoom").text(map.geomap("option", "zoom"));
+
+ // get and display the current pixelSize value
+ // you cannot set pixelSize, it's read only
+ $("#lblPixelSize").text(map.geomap("option", "pixelSize"));
+ }
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+.links
+{
+ float: right;
+}
+
+.docLink
+{
+ background: url(../../images/$.geo-logo-small.png) right no-repeat;
+ color: #7f0000;
+ display: block;
+ font-size: 24px;
+ font-weight: bold;
+ padding-right: 24px;
+ text-decoration: none;
+ text-transform: uppercase;
+}
+
+.fiddleLink
+{
+ display: block;
+ font-weight: bold;
+ margin: 4px;
+ text-align: right;
+ text-decoration: none;
+}
+
+.fiddleLink img
+{
+ border: none;
+ vertical-align: middle;
+}
+
+.mobile-shrink
+{
+ font-size: .6em;
+}
+
+.not-mobile
+{
+ display: none;
+}
+
+@media only screen and (min-width: 800px)
+{
+ .info
+ {
+ max-width: 45% !important;
+ position: absolute !important;
+ right: 16px;
+ top: 16px;
+ }
+
+ .mobile-shrink
+ {
+ font-size: 1em;
+ }
+
+ .not-mobile
+ {
+ display: block;
+ }
+}
+
+html
+{
+ font:13px/1.231 Calibri,Arial,sans-serif; *font-size:small;
+}
+
+.info
+{
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: -4px 4px #444;
+ opacity: .8;
+ padding: 8px;
+ width: 95%;
+}
+
+fieldset { border: none; }
+
+legend {
+ font-size: 14px;
+ font-weight: bold;
+}
+
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>destroy example</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of destroy">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ <div class="info">
+ <a href="../" class="docLink">< docs</a>
+ <h1>
+ destroy</h1>
+ <p>
+ This example allows you to create and destroy the geomap widget and test that everything is returned to normal.</p>
+ <button type="button" data-command="create">create</button>
+ <button type="button" data-command="destroy">destroy</button>
+ </div>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8
+ });
+
+ var created = true;
+
+ $("button[data-command='create']").button().click(function () {
+ if (!created) {
+ $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8
+ });
+ created = true;
+ }
+ });
+
+ $("button[data-command='destroy']").button().click(function () {
+ if (created) {
+ $("#map").geomap("destroy");
+ created = false;
+ }
+ });
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>drawing examples</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
+ <meta name="description" content="An example of drawing with the mode property">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/2TAzc/embedded/" class="fiddleLink not-mobile"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>drawing</h1>
+ <p class="not-mobile">This example tests the three shape drawing modes: drawPoint, drawLineString and drawPolygon. Choose a tool below and start tapping!</p>
+ <p class="not-mobile">Double-tap to add the last point and end lines & polygons.</p>
+ <p class="not-mobile">You can remove individual points while drawing lines & polygons with the escape key.</p>
+ <div id="modes">
+ <input type="radio" id="drawPoint" name="mode" value="drawPoint" checked="checked" /><label for="drawPoint">point</label>
+ <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">line</label>
+ <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">polygon</label>
+ </div>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map, setting mode to drawPoint initially
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8,
+ mode: "drawPoint",
+ shape: function (e, geo) {
+ // the shape event triggers when a user draws a shape
+ // the geo object is a simple GeoJSON object: Point, LineString or Polygon
+ // we can append it directly to the map
+ map.geomap("append", geo);
+ }
+ });
+
+ // jQuery UI for pretty buttons
+ $("#modes").buttonset();
+
+ $("#modes input").click(function () {
+ // set the map's mode option based on value of the input clicked
+ // this will change the map's mode to drawPoint, drawLineString or drawPolygon
+ map.geomap("option", "mode", $(this).val());
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>drawStyle test</title>
+ <meta name="description" content="geomap drawStyle test" />
+ <meta name="author" content="Ryan Westphal" />
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ label { white-space: nowrap; }
+
+ label span { display: inline-block; width: 7rem; }
+ input { width: 6rem; }
+
+ button { width: 16rem; }
+ </style>
+</head>
+<body>
+ <div class="drawStyle">
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/BXgV4/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>drawStyle</h1>
+ <p>This page tests various style properties using the drawStyle option to change the style displayed when a user is drawing shapes in drawLineString and drawPolygon modes.</p>
+ <div id="modes">
+ <input type="radio" id="drawPoint" name="mode" value="drawPoint" checked="checked" /><label for="drawPoint">point</label>
+ <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">line</label>
+ <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">polygon</label>
+ </div>
+ <form id="drawStyle">
+ <fieldset>
+ <legend>geomap drawStyle option</legend>
+ <div>
+ <label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
+ <label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
+ </div>
+ <div>
+ <label><span>fill</span> <input type="color" name="fill" value="" /></label>
+ <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
+ </div>
+ <div>
+ <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
+ <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
+ <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
+ </div>
+ <div>
+ <label><span>width</span> <input type="number" name="width" value="8" /></label>
+ <label><span>height</span> <input type="number" name="height" value="8" /></label>
+ <label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
+ </div>
+ </fieldset>
+ <button type="button">set drawStyle</button>
+ <button type="reset">reset drawStyle</button>
+ </form>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ var map = $( "#map" ).geomap( {
+ center: [ -71.0595678, 42.3604823 ],
+ zoom: 8,
+ mode: "drawPoint",
+ shape: function( e, geo ) {
+ // the shape event triggers when the user finishes drawing a shape
+ // the geo argument is a GeoJSON object representing the shape
+ // for this example, we'll append it to the map forcing an
+ // individual style that matches the current drawStyle
+
+ // make a copy of the current drawStyle
+ var drawStyle = $.extend( { }, map.geomap( "option", "drawStyle" ) );
+
+ // append the shape using that style
+ map.geomap( "append", geo, drawStyle );
+
+ }
+ } );
+
+ $( "#drawStyle input" ).change( function( ) {
+ // when an input of the drawStyle form changes,
+ // immediately set the property of geomap's drawStyle option
+
+ // keep in mind that the three point-only styles (width, height & borderRadius)
+ // cannot be seen because with drawPoint, the shape event triggers immediately
+ // without drawing a shape
+ // this example, however, does use them when appending the shape after a click
+
+ // first, we can grab a jQuery reference to the input that changed
+ var $this = $( this );
+
+ // next, we can create an object that represents this change
+ // this example doesn't, but you can set more than one property
+ // on geomap's drawStyle option at a time
+ var styleOption = { };
+ styleOption[ $this.attr( "name" ) ] = $this.val();
+
+ map.geomap( "option", "drawStyle", styleOption );
+ } );
+
+ // jQuery UI for pretty buttons
+ $("#modes").buttonset();
+
+ $("#modes input").click(function () {
+ // set the map's mode option based on value of the input clicked
+ // this will change the map's mode to drawPoint, drawLineString or drawPolygon
+ map.geomap("option", "mode", $(this).val());
+ });
+
+ // jQuery UI for pretty reset buttons
+ $( "button" ).button( );
+
+ // maintin a copy of the original drawStyle so we can reset it later
+ var originaldrawStyle = map.geomap( "option", "drawStyle" );
+
+ $( "#drawStyle button[type='reset']" ).click( function( ) {
+ // when the user resets the drawStyle form,
+ // we want to also reset the drawStyle option
+ // back to its original state
+ map.geomap( "option", "drawStyle", originaldrawStyle );
+ } );
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>geomap empty test</title>
+ <meta name="description" content="Small test of jQuery Geo's shape functions">
+ <meta name="author" content="Ryan Westphal">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+</head>
+<body>
+ <div>
+ <a href="../" class="docLink">< docs</a>
+ <h1>
+ geomap empty test</h1>
+ <p>
+ Click the map to add points, click the Empty button to remove them all at once.</p>
+ <button type="button">
+ Empty</button>
+ <div class="geomap" style="width: 640px; height: 480px;">
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var geomap = $(".geomap").geomap({
+ center: [-71.05, 42.35],
+ zoom: 13,
+ mode: "drawPoint",
+ shape: function (e, geo) {
+ geomap.geomap("append", geo);
+ }
+ });
+
+ $("button").click(function () {
+ geomap.geomap("empty");
+ });
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>geomap empty service test</title>
+ <meta name="description" content="Small test of jQuery Geo's shape functions">
+ <meta name="author" content="Ryan Westphal">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+</head>
+<body>
+ <div>
+ <a href="../" class="docLink">< docs</a>
+ <h1>geomap empty service test</h1>
+ <p>This page is similar to the regular empty example but tests removing all shapes from a specific service instead of the map itself.</p>
+ <button type="button">Empty</button>
+ <div class="geomap" style="width: 640px; height: 480px;">
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var geomap = $(".geomap").geomap({
+ center: [-71.05, 42.35],
+ zoom: 13,
+ click: function (e, geo) {
+ geomap.find( ".osm" ).geomap("append", geo);
+ }
+ }),
+ service = geomap.find( ".osm" );
+
+ $("button").click(function () {
+ service.geomap("empty");
+ });
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>events example</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of basic interaction events">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ th
+ {
+ text-align: left;
+ }
+ th, td
+ {
+ margin: 0;
+ padding: 4px;
+ border-left: solid 2px #dedede;
+ }
+ </style>
+</head>
+<body>
+ <div id="events">
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/fg6wv/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>events</h1>
+ <p>The basic interaction events are: move, click, dblclick, and bboxchange. jQuery Geo triggers then when a user interacts with the map.</p>
+ <table cellspacing="0">
+ <thead>
+ <tr>
+ <th>
+ event (time)
+ </th>
+ <th>
+ geo argument
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="geomapmove">
+ <td>
+ move (<span class="date"></span>)
+ </td>
+ <td class="data">
+ </td>
+ </tr>
+ <tr class="geomapclick">
+ <td>
+ click (<span class="date"></span>)
+ </td>
+ <td class="data">
+ </td>
+ </tr>
+ <tr class="geomapdblclick">
+ <td>
+ dblclick (<span class="date"></span>)
+ </td>
+ <td class="data">
+ </td>
+ </tr>
+ <tr class="geomapbboxchange">
+ <td>
+ bboxchange (<span class="date"></span>)
+ </td>
+ <td class="data">
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ // hook into all the events and update the screen when they're triggered
+ // we don't need to prefix the events with the widget's name during initialization
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8,
+
+ // position events get a GeoJSON Point object
+ move: positionEventHandler,
+ click: positionEventHandler,
+ dblclick: positionEventHandler,
+
+ // bbox events get an object with a bbox property
+ bboxchange: bboxEventHandler
+ });
+
+ function positionEventHandler( e, geo ) {
+ // jQuery stores the event type in e.type
+ // outside of the initialization function,
+ // the jQuery UI widget events all have a widget prefix
+ // in this case it's: geomap
+
+ // this example builds a selector for the class
+ // of the table's row for this event
+ // if the event is, e.g., move, e.type is geomapmove and the row we want is .geomapmove
+ var eventRowClass = "." + e.type;
+
+ // update the time stamp for this event
+ $(eventRowClass + " .date").text($.now());
+
+ // contained in the geo argument as a GeoJSON Point object
+
+ // the coordinates property is an array,
+ // this example joins them with an extra space so they look a little nicer
+ var displayCoords = geo.coordinates.join( ", " );
+
+
+ // convert the map coordinates to pixel locations to show them as well
+ var displayPixels = map.geomap( "toPixel", geo.coordinates ).join( ", " );
+
+ // update the position data
+ $(eventRowClass + " .data").html("pixels: [ " + displayPixels + " ]<br>coordinates: [ " + displayCoords + " ]");
+ }
+
+ function bboxEventHandler( e, geo ) {
+ // again, build a selector for the class of the table's row for this event
+ // for example, the bboxchange event's e.type is geomapbboxchange
+ // and the row we want is .geomapbboxchange
+ var eventRowClass = "." + e.type;
+
+ // update the time stamp for this event
+ $( eventRowClass + " .date" ).text( $.now( ) );
+
+ // update the position data,
+ // contained in the geo argument as an object with a bbox property
+ // currently that's all the object has
+ $( eventRowClass + " .data" ).text( "[ " + geo.bbox.join( ", " ) + " ]" );
+ }
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>geomap find test</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+</head>
+<body>
+ <a href="../" class="docLink">< docs</a>
+ <h1>geomap find test</h1>
+ <div class="geomap" style="width: 640px; height: 480px;"></div>
+ <div class="output">
+ <h2>Click the geometry!</h2>
+ <ul></ul>
+ <button id="findAll" type="button">find( "*" )</button>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var geomap = $(".geomap").geomap({
+ center: [-71.05, 42.35],
+ zoom: 13,
+ // because of the geomap widget's custom modes,
+ // we can set mode to whatever is appropriate for the situation
+ // here, we set it to find and give the find mode a crosshair cursor
+ mode: "find",
+ cursors: { find: "crosshair" },
+ click: function (e, geo) {
+ var outputHtml = "",
+ result = geomap.geomap("find", geo, 8);
+
+ $.each(result, function () {
+ outputHtml += ("<li>Found a " + this.type + " at " + this.coordinates + "</li>");
+ });
+
+ $(".output ul").html(outputHtml);
+ }
+ });
+
+ var geoms = {
+ one: { type: "Point", coordinates: [-71.05, 42.35] },
+ two: { type: "Point", coordinates: [-71.045, 42.355] },
+ three: { type: "Point", coordinates: [-71.055, 42.345] },
+ four: { type: "Point", coordinates: [-71.055, 42.355] },
+ five: { type: "Point", coordinates: [-71.045, 42.345] },
+ six: { type: "LineString", coordinates: [[-71.055, 42.355], [-71.045, 42.355]] },
+ seven: { type: "Polygon", coordinates: [[[-71.06, 42.3425], [-71.06, 42.3475], [-71.04, 42.3475], [-71.04, 42.3425], [-71.06, 42.3425]]] }
+ };
+
+ for (var geomKey in geoms) {
+ geomap.geomap("append", geoms[geomKey]);
+ }
+
+ $( "#findAll" ).click( function() {
+ var outputHtml = "",
+ result = geomap.geomap( "find", "*" );
+
+ $.each(result, function () {
+ outputHtml += ("<li>Found a " + this.type + " at " + this.coordinates + "</li>");
+ });
+
+ $(".output ul").html(outputHtml);
+ } );
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>geomap find service test</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+</head>
+<body>
+ <a href="../" class="docLink">< docs</a>
+ <h1>geomap find service test</h1>
+ <div class="geomap" style="width: 640px; height: 480px;"></div>
+ <div class="output">
+ <h2>Click the geometry!</h2>
+ <ul></ul>
+ <button id="findAll" type="button">find( "*" )</button>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var geomap = $(".geomap").geomap({
+ center: [-71.05, 42.35],
+ zoom: 13,
+ click: function (e, geo) {
+ var outputHtml = "",
+ mapShapes = geomap.geomap("find", geo, 8),
+ serviceShapes = geomap.find( ".osm" ).geomap("find", geo, 8);
+
+ outputHtml += '<li><b>map shapes</b></li>';
+ $.each(mapShapes, function () {
+ outputHtml += ("<li>Found a " + this.type + " at " + this.coordinates + "</li>");
+ });
+
+ outputHtml += '<li><b>service shapes</b></li>';
+ $.each(serviceShapes, function () {
+ outputHtml += ("<li>Found a " + this.type + " at " + this.coordinates + "</li>");
+ });
+
+ $(".output ul").html(outputHtml);
+ }
+ }),
+ service = geomap.find( ".osm" );
+
+ var geoms = {
+ one: { type: "Point", coordinates: [-71.05, 42.35] },
+ two: { type: "Point", coordinates: [-71.045, 42.355] },
+ three: { type: "Point", coordinates: [-71.055, 42.345] },
+ four: { type: "Point", coordinates: [-71.055, 42.355] },
+ five: { type: "Point", coordinates: [-71.045, 42.345] },
+ six: { type: "LineString", coordinates: [[-71.055, 42.355], [-71.045, 42.355]] },
+ seven: { type: "Polygon", coordinates: [[[-71.06, 42.3425], [-71.06, 42.3475], [-71.04, 42.3475], [-71.04, 42.3425], [-71.06, 42.3425]]] }
+ };
+
+ var i = 0;
+ for (var geomKey in geoms) {
+ if ( i % 2 ) {
+ geomap.geomap("append", geoms[geomKey]);
+ } else {
+ service.geomap("append", geoms[geomKey]);
+ }
+ i++;
+ }
+
+ $( "#findAll" ).click( function() {
+ var outputHtml = "",
+ result = geomap.geomap( "find", "*" );
+
+ $.each(result, function () {
+ outputHtml += ("<li>Found a " + this.type + " at " + this.coordinates + "</li>");
+ });
+
+ $(".output ul").html(outputHtml);
+ } );
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>geometry function examples</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="Examples of geometry functions">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ .calc
+ {
+ display: inline-block;
+ vertical-align: top;
+ }
+ td
+ {
+ max-width: 96px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .red { color: #c00; }
+ .green { color: #0c0; }
+ .blue { color: #00c; }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/yv58r/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>
+ geometry functions</h1>
+ <p>This example appends a few Points, LineStrings, and Polygons. It then calculates some relationships and info about the shapes using the geometry functions in the $.geo namespace.</p>
+ <div class="calc">
+ <table>
+ <tr>
+ <td></td>
+ <th>distance</th>
+ </tr>
+ <tr>
+ <th><span class="red">pt</span>, <span class="red">pt</span></th>
+ <td class="rpt-2-rpt-distance"></td>
+ </tr>
+ <tr>
+ <th><span class="red">pt</span>, <span class="red">line</span></th>
+ <td class="rpt-2-line-distance"></td>
+ </tr>
+ <tr>
+ <th><span class="red">pt</span>, <span class="red">poly</span></th>
+ <td class="rpt-2-poly-distance"></td>
+ </tr>
+ <tr>
+ <th><span class="red">line</span>, <span class="red">pt</span></th>
+ <td class="line-2-rpt-distance"></td>
+ </tr>
+ <tr>
+ <th><span class="red">line</span>, <span class="red">line</span></th>
+ <td class="line-2-line-distance"></td>
+ </tr>
+ <tr>
+ <th><span class="red">line</span>, <span class="red">poly</span></th>
+ <td class="line-2-poly-distance"></td>
+ </tr>
+ <tr>
+ <th><span class="red">poly</span>, <span class="red">pt</span></th>
+ <td class="poly-2-rpt-distance"></td>
+ </tr>
+ <tr>
+ <th><span class="red">poly</span>, <span class="red">line</span></th>
+ <td class="poly-2-line-distance"></td>
+ </tr>
+ <tr>
+ <th><span class="red">poly</span>, <span class="red">poly</span></th>
+ <td class="poly-2-poly-distance"></td>
+ </tr>
+ </table>
+ </div>
+ <div class="calc">
+ <table>
+ <tr>
+ <td></td>
+ <th>contains</th>
+ </tr>
+ <tr>
+ <th><span class="red">pt</span>, <span class="red">pt</span></th>
+ <td class="rpt-2-rpt-contains"></td>
+ </tr>
+ <tr>
+ <th><span class="red">pt</span>, <span class="red">line</span></th>
+ <td class="rpt-2-line-contains"></td>
+ </tr>
+ <tr>
+ <th><span class="red">pt</span>, <span class="red">poly</span></th>
+ <td class="rpt-2-poly-contains"></td>
+ </tr>
+ <tr>
+ <th><span class="red">line</span>, <span class="red">pt</span></th>
+ <td class="line-2-rpt-contains"></td>
+ </tr>
+ <tr>
+ <th><span class="red">line</span>, <span class="red">line</span></th>
+ <td class="line-2-line-contains"></td>
+ </tr>
+ <tr>
+ <th><span class="red">line</span>, <span class="red">poly</span></th>
+ <td class="line-2-poly-contains"></td>
+ </tr>
+ <tr>
+ <th><span class="red">poly</span>, <span class="red">pt</span></th>
+ <td class="poly-2-rpt-contains"></td>
+ </tr>
+ <tr>
+ <th><span class="red">poly</span>, <span class="red">line</span></th>
+ <td class="poly-2-line-contains"></td>
+ </tr>
+ <tr>
+ <th><span class="red">poly</span>, <span class="red">poly</span></th>
+ <td class="poly-2-poly-contains"></td>
+ </tr>
+ </table>
+ </div>
+ <div class="calc">
+ <table>
+ <tr>
+ <td></td>
+ <th>contains</th>
+ </tr>
+ <tr>
+ <th><span class="red">poly</span>, <span class="green">pt</span></th>
+ <td class="poly-2-gpt-contains"></td>
+ </tr>
+ <tr>
+ <th><span class="red">poly</span>, <span class="green">line</span></th>
+ <td class="poly-2-gline-contains"></td>
+ </tr>
+ <tr>
+ <th><span class="red">poly</span>, <span class="green">poly</span></th>
+ <td class="poly-2-gpoly-contains"></td>
+ </tr>
+ <tr>
+ <th><span class="red">poly</span>, <span class="blue">poly</span></th>
+ <td class="poly-2-bpoly-contains"></td>
+ </tr>
+ </table>
+ </div>
+ <div class="calc">
+ <table>
+ <tr>
+ <td></td>
+ <th>centroid</th>
+ </tr>
+ <tr>
+ <th><span class="red">pt</span></th>
+ <td class="rpt-centroid"></td>
+ </tr>
+ <tr>
+ <th><span class="red">line</span></th>
+ <td class="rline-centroid"></td>
+ </tr>
+ <tr>
+ <th><span class="red">poly</span></th>
+ <td class="rpoly-centroid"></td>
+ </tr>
+ <tr>
+ <th><span class="green">poly</span></th>
+ <td class="gpoly-centroid"></td>
+ </tr>
+ <tr>
+ <th><span class="blue">poly</span></th>
+ <td class="bpoly-centroid"></td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8
+ });
+
+ // append a red Point
+ var pt = {
+ type: "Point",
+ coordinates: [-71, 42]
+ };
+ map.geomap("append", pt);
+
+ // append a red LineString
+ var line = {
+ type: "LineString",
+ coordinates: [
+ [-71.5, 42],
+ [-72, 41.5]
+ ]
+ };
+ map.geomap("append", line);
+
+ // append a red Polygon
+ var poly = {
+ type: "Polygon",
+ coordinates: [[
+ [-72.5, 41.7],
+ [-72.3, 41.3],
+ [-72.7, 41.3],
+ [-72.5, 41.7]
+ ]]
+ };
+ map.geomap("append", poly);
+
+ // distance calculations between all red shapes
+ $(".rpt-2-rpt-distance").text($.geo.distance(pt, pt));
+ $(".rpt-2-line-distance").text($.geo.distance(pt, line));
+ $(".rpt-2-poly-distance").text($.geo.distance(pt, poly));
+
+ $(".line-2-rpt-distance").text($.geo.distance(line, pt));
+ $(".line-2-line-distance").text($.geo.distance(line, line));
+ $(".line-2-poly-distance").text($.geo.distance(line, poly));
+
+ $(".poly-2-rpt-distance").text($.geo.distance(poly, pt));
+ $(".poly-2-line-distance").text($.geo.distance(poly, line));
+ $(".poly-2-poly-distance").text($.geo.distance(poly, poly));
+
+ // contains relationships between all red shapes
+ $(".rpt-2-rpt-contains").text($.geo.contains(pt, pt));
+ $(".rpt-2-line-contains").text($.geo.contains(pt, line));
+ $(".rpt-2-poly-contains").text($.geo.contains(pt, poly));
+
+ $(".line-2-rpt-contains").text($.geo.contains(line, pt));
+ $(".line-2-line-contains").text($.geo.contains(line, line));
+ $(".line-2-poly-contains").text($.geo.contains(line, poly));
+
+ $(".poly-2-rpt-contains").text($.geo.contains(poly, pt));
+ $(".poly-2-line-contains").text($.geo.contains(poly, line));
+ $(".poly-2-poly-contains").text($.geo.contains(poly, poly));
+
+ // append a green Point inside the red Polygon
+ var gpt = {
+ type: "Point",
+ coordinates: [-72.5, 41.6]
+ };
+ map.geomap("append", gpt, { color: "green" });
+
+ // append a green LineString inside the red Polygon
+ var gline = {
+ type: "LineString",
+ coordinates: [
+ [-72.55, 41.5],
+ [-72.45, 41.5]
+ ]
+ };
+ map.geomap("append", gline, { color: "green", strokeWidth: "3px" });
+
+ // append a green Polygon completely inside the red Polygon
+ var gpoly = {
+ type: "Polygon",
+ coordinates: [[
+ [-72.55, 41.45],
+ [-72.5, 41.35],
+ [-72.65, 41.35],
+ [-72.55, 41.45]
+ ]]
+ };
+ map.geomap("append", gpoly, { color: "green", strokeWidth: "3px" });
+
+ // contains relationships between the red polygon & some green shapes
+ // these all return true because the red polygon completely contains all of them
+ $(".poly-2-gpt-contains").text($.geo.contains(poly, gpt));
+ $(".poly-2-gline-contains").text($.geo.contains(poly, gline));
+ $(".poly-2-gpoly-contains").text($.geo.contains(poly, gpoly));
+
+ // append a blue Polygon partially inside the red Polygon
+ var bpoly = {
+ type: "Polygon",
+ coordinates: [[
+ [-72.35, 41.45],
+ [-72.25, 41.35],
+ [-72.45, 41.35],
+ [-72.35, 41.45]
+ ]]
+ };
+ map.geomap("append", bpoly, { color: "blue", strokeWidth: "3px" });
+
+ // contains relationships between the red polygon the blue polygon
+ // this returns false because the red polygon does not completely contain the blue one
+ $(".poly-2-bpoly-contains").text($.geo.contains(poly, bpoly));
+
+ // centroid calculations for all red shapes and the green and blue polygons
+ $(".rpt-centroid").text($.geo.centroid(pt).coordinates.join(", "));
+ $(".rline-centroid").text($.geo.centroid(line).coordinates.join(", "));
+ $(".rpoly-centroid").text($.geo.centroid(poly).coordinates.join(", "));
+ $(".gpoly-centroid").text($.geo.centroid(gpoly).coordinates.join(", "));
+ $(".bpoly-centroid").text($.geo.centroid(bpoly).coordinates.join(", "));
+
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>proj test</title>
+ <meta name="description" content="Small test of $.geo.proj">
+ <meta name="author" content="Ryan Westphal">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ label
+ {
+ display: block;
+ margin: .25em;
+ }
+ label span
+ {
+ display: inline-block;
+ font-weight: bold;
+ width: 8em;
+ }
+ #lblStatus
+ {
+ background: #ee4;
+ border-radius: .5em;
+ padding: .5em;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <a href="../" class="docLink">< docs</a>
+ <h1>
+ proj test</h1>
+ <p>
+ This page has a couple basic interactive tests of the default $.geo.proj object.</p>
+ <h2>
+ direct conversion</h2>
+ <p>
+ Enter a lon/lat in the top inputs (remember, longitude is first here and throughout jQuery Geo but usually spoken second) & click fromGeodetic to convert it to web mercator and store the new values in the bottom two inputs. Click toGeodetic to reverse.</p>
+ <label>
+ <span>longitude</span>
+ <input type="text" id="txtLon" value="-71.0597732" />
+ </label>
+ <label>
+ <span>latitude</span>
+ <input type="text" id="txtLat" value="42.3584308" />
+ </label>
+ <button type="button" id="cmdFrom">
+ \/ fromGeodetic</button>
+ <button type="button" id="cmdTo">
+ /\ toGeodetic</button>
+ <label>
+ <span>web mercator x</span>
+ <input type="text" id="txtX" value="-7910337.768509507" />
+ </label>
+ <label>
+ <span>web mercator y</span>
+ <input type="text" id="txtY" value="5214822.77694091" />
+ </label>
+ <h2>
+ osm nominatim</h2>
+ <p>
+ Enter a search term in the input and click search. If successful, geodetic & web mercator coordinates are written to the inputs above. This example uses MapQuest's OSM API: <a href="http://open.mapquestapi.com/nominatim/">http://open.mapquestapi.com/nominatim</a>.</p>
+ <label>
+ <span>query</span>
+ <input type="text" id="txtQuery" value="Boston,MA" />
+ </label>
+ <button type="button" id="cmdSearch">search</button>
+ <h2>
+ status</h2>
+ <p>
+ Status result for any test.</p>
+ <div id="lblStatus">
+ ready</div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ $("#cmdFrom").click(function () {
+ try {
+ var projected = $.geo.proj.fromGeodetic([[parseFloat($("#txtLon").val()), parseFloat($("#txtLat").val())]]);
+ $("#txtX").val(projected[0][0])
+ $("#txtY").val(projected[0][1])
+ $("#lblStatus").html("done " + (new Date()).toString());
+ } catch (e) {
+ $("#lblStatus").html("error" + e.toString());
+ }
+ });
+ $("#cmdTo").click(function () {
+ try {
+ var geodetic = $.geo.proj.toGeodetic([[parseFloat($("#txtX").val()), parseFloat($("#txtY").val())]]);
+ $("#txtLon").val(geodetic[0][0])
+ $("#txtLat").val(geodetic[0][1])
+ $("#lblStatus").html("done " + (new Date()).toString());
+ } catch (e) {
+ $("#lblStatus").html("error" + e.toString());
+ }
+ });
+
+ $("#cmdSearch").click(function () {
+ try {
+ var query = "http://open.mapquestapi.com/nominatim/v1/search?format=json&q=" + $("#txtQuery").val();
+ $.ajax({
+ url: query,
+ dataType: "jsonp",
+ jsonp: "json_callback",
+ success: function (result) {
+ if (result && result.length > 0) {
+ $("#txtLon").val(result[0].lon)
+ $("#txtLat").val(result[0].lat)
+ var projected = $.geo.proj.fromGeodetic([[result[0].lon, result[0].lat]]);
+ $("#txtX").val(projected[0][0])
+ $("#txtY").val(projected[0][1])
+ $("#lblStatus").html("done " + (new Date()).toString());
+ } else {
+ $("#lblStatus").html("nothing found :(");
+ }
+ },
+ error: function (xhr) {
+ $("#lblStatus").html(xhr.statusText);
+ }
+ });
+ } catch (e) {
+ $("#lblStatus").html("error" + e.toString());
+ }
+ });
+ });
+ </script>
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+
+ <title>hurricane</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+
+ <meta name="description" content="Displaying storm activity in the Atlantic">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+ #popup
+ {
+ background: #fff;
+ border: solid 1px #444;
+ border-radius: 8px;
+ display: none;
+ padding: 4px;
+ position: absolute;
+ opacity: .6;
+ overflow: hidden;
+ width: auto;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="hurricane">
+ <div id="map">
+ <div id="popup">
+ </div>
+ </div>
+ <div class="info">
+ <a href="../" class="docLink">< docs</a>
+ <h1>Hurricane tracking</h1>
+ <p>Displaying a snapshot of storm data extracted from <a href="http://stormpulse.com">stormpulse.com</a></p>
+ </div>
+ </div>
+ <script id="tmplHurricane" type="text/x-jquery-tmpl">
+ <h2>{{=category}}</h2>
+ <table>
+ <tr><th>date</th><td>{{=date}}</td></tr>
+ <tr><th>accuracy</th><td>{{=accuracy}}/40</td></tr>
+ <tr><th>eye diameter</th><td>{{=eyeDiameter}}</td></tr>
+ <tr><th>direction</th><td>{{#if direction}}{{=direction}}°{{/if}}</td></tr>
+ <tr><th>pressure</th><td>{{=pressure}}</td></tr>
+ <tr><th>wind radii</th><td>{{=windRadii}}</td></tr>
+ <tr><th>wind speed</th><td>{{=windSpeed}}</td></tr>
+ <tr><th>gusts</th><td>{{=gusts}}</td></tr>
+ </table>
+ </script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="js/iecors.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ $.template( "hurricane", $( "#tmplHurricane" ) );
+
+ var map = $("#map").geomap({
+ center: [-76.6, 30.4],
+ zoom: 5,
+ mode: "find",
+ cursors: { find: "default" },
+ move: function (e, geo) {
+ $("#popup").hide().html("");
+ var tracks = map.geomap("find", geo, 4);
+
+ $.each(tracks, function() {
+ if (this.type == "Feature") {
+ $( "#popup" ).append( $.render( this.properties, "hurricane" ) );
+ var popupLocation = map.geomap( "toPixel", geo.coordinates );
+ $("#popup").css({
+ left: popupLocation[ 0 ],
+ top: popupLocation[ 1 ]
+ }).css("display", "inline-block");
+ }
+ });
+ }
+ });
+
+ $.ajax({
+ url: "http://data.jquerygeo.com/hurricane.json",
+ dataType: "json",
+ success: function (result) {
+ var shapeStyle = {
+ color: "gray",
+ strokeWidth: "4px"
+ };
+
+ $.each(result.stormData.storms.tracks[0].track, function(i) {
+ var trackPoint = {
+ type: "Feature",
+ geometry: {
+ type: "Point",
+ coordinates: [
+ parseFloat(this[16]),
+ parseFloat(this[7])
+ ]
+ },
+ properties: {
+ eyeDiameter: this[0],
+ windRadii: this[1],
+ category: this[4],
+ accuracy: this[10] || 0,
+ direction: this[11],
+ pressure: this[14],
+ date: this[15],
+ gusts: this[17],
+ windSpeed: this[18]
+ }
+ };
+
+ if (trackPoint.properties.date != null) {
+ var dateStr = trackPoint.properties.date.toString(),
+ year = dateStr.substr(0, 4),
+ month = dateStr.substr(4, 2),
+ day = dateStr.substr(6);
+ trackPoint.properties.date = year + "-" + month + "-" + day;
+ }
+
+ switch (trackPoint.properties.category) {
+ case "Tropical Storm":
+ shapeStyle.color = "#eee";
+ break;
+
+ case "Hurricane - Category 1":
+ shapeStyle.color = "#ff8";
+ break;
+
+ case "Hurricane - Category 2":
+ shapeStyle.color = "orange";
+ break;
+
+ case "Major Hurricane - Category 3":
+ shapeStyle.color = "#f88";
+ break;
+
+ default:
+ shapeStyle.color = "gray";
+ break;
+ }
+
+ if (trackPoint.properties.accuracy != null) {
+ var pos = trackPoint.geometry.coordinates,
+ a = .2 + (40 - trackPoint.properties.accuracy)/40;
+
+ shapeStyle.strokeOpacity = trackPoint.properties.accuracy/40;
+
+ map.geomap("append", {
+ type: "Polygon",
+ coordinates: [[
+ [pos[0] - a, pos[1] - a],
+ [pos[0] - a, pos[1] + a],
+ [pos[0] + a, pos[1] + a],
+ [pos[0] + a, pos[1] - a],
+ [pos[0] - a, pos[1] - a]
+ ]]
+ }, $.extend({}, shapeStyle));
+ }
+
+ map.geomap("append", trackPoint, { color: "#444" });
+ });
+ },
+ error: function (xhr) {
+ alert("Sorry, we were unable to read the storm data.");
+ }
+ });
+ });
+ </script>
+ </body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>image example</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of image display">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>image</h1>
+ <p></p>
+ <button id="cmdZoom" type="button">zoom in</button>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // set $.geo.proj to null because images don't have a projection
+ $.geo.proj = null;
+
+ // create a map
+ var map = $("#map").geomap({
+ center: [ 5616/2, 3744/2 ],
+ zoom: 4,
+ axisLayout: "image",
+ services: [
+ {
+ type: "tiled",
+ src: function (view) {
+ return "http://localhost:36426/ObliqueViewer/tiles/RightImage/000230-101708154420-cam5/" + (10 - view.zoom) + "/" + view.tile.column + "/" + view.tile.row;
+ },
+ attr: "© Sanborn"
+ }
+ ],
+ tilingScheme: {
+ tileWidth: 256,
+ tileHeight: 256,
+ pixelSizes: [
+ 32,
+ 22.6274166,
+ 16,
+ 11.3137083,
+ 8,
+ 5.656854,
+ 4,
+ 2.828427,
+ 2,
+ 1.414213547,
+ 1
+ ],
+ origin: [ 0, 0 ]
+ },
+ });
+
+ $("#cmdZoom").button().click(function() {
+ map.geomap("zoom", +1);
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>TEMPLATE example</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of TEMPLATE">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>Is Geodetic?</h1>
+ <table class="tests">
+ <tr><th>[-71.05, 42.36]</th><td></td></tr> <!-- position / Point -->
+ <tr><th>[-8102018.97, 5011809.33]</th><td></td></tr>
+ <tr><th>[-72.78, 40.99, -69.33, 43.69]</th><td></td></tr> <!-- bbox -->
+ <tr><th>[-8102018.97, 5011809.33, -7718610.83, 5418454.32]</th><td></td></tr>
+ <tr><th>[[-72.78, 43.32], [-71.33, 42.43]]</th><td></td></tr> <!-- LineString / MultiPoint -->
+ <tr><th>[[-8102018.97, 5011809.33], [-7718610.83, 5418454.32]]</th><td></td></tr>
+ <tr><th>[[[-72.78, 43.32], [-71.33, 42.43], [-70.12, 43.16], [-72.78, 43.32]]]</th><td></td></tr> <!-- Polygon / MultiLineString-->
+ <tr><th>[[[-8102018.97, 5011809.33], [-7718610.83, 5418454.32], [-8102018.83, 5418454.32], [-8102018.97, 5011809.33]]]</th><td></td></tr>
+ <tr><th>[[[[-72.78, 43.32], [-71.33, 42.43], [-70.12, 43.16], [-72.78, 43.32]]]]</th><td></td></tr> <!-- MultiPolygon -->
+ <tr><th>[[[[-8102018.97, 5011809.33], [-7718610.83, 5418454.32], [-8102018.83, 5418454.32], [-8102018.97, 5011809.33]]]]</th><td></td></tr>
+ </table>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8
+ });
+
+ $( ".tests tr" ).each( function( ) {
+ var testJson = $( this ).find( "th" ).text(),
+ testVal = testJson != "" ? JSON.parse( testJson ) : "",
+ isGeodetic = $.geo._isGeodetic( testVal );
+
+
+
+ $( this ).find( "td" ).text( isGeodetic ? "geodetic" : "projected" );
+
+ } );
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>TEMPLATE example</title>
+ <meta name="HandheldFriendly" content="True">
+ <meta name="MobileOptimized" content="320">
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of TEMPLATE">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #mapTab
+ {
+ min-height: 99%;
+ }
+
+ #map
+ {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div id="app" data-role="page">
+ <div data-role="header">
+ <h1><span data-text="DisplayName">Amherst</span></h1>
+ </div>
+
+ <div data-role="content">
+ <div class="have-mapTabs">
+ <p>Which map would you like?</p>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="#mapTab" data-map-tab="{"MapTabID":"ParcelMap","DisplayName":"Parcel Map"}">Parcel Map</a></li>
+ <li><a href="#mapTab" data-map-tab="{"MapTabID":"ZoningMap","DisplayName":"Zoning Map"}">Zoning Map</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div id="mapTab" data-role="page" data-fullscreen="true">
+ <div data-role="header" data-position="fixed">
+ <h1><span data-text="DisplayName">Parcel App</span></h1>
+ <a href="#app" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-transition="slidedown" class="mapTab-switch ui-btn-right">Select Tab</a>
+ </div>
+
+ <div data-role="content">
+ <div id="map">
+ </div>
+ </div>
+
+
+ <div data-role="footer" data-position="fixed">
+ <p> </p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ (function() {
+ var mapTab = window.sessionStorage.getItem("mapTab") || null,
+ map = null,
+ bbox = window.sessionStorage.getItem("bbox") || null;
+
+ if (mapTab) {
+ mapTab = JSON.parse(mapTab);
+ }
+
+ $("#app").delegate("a", "click", function() {
+ mapTab = $(this).data("mapTab");
+ window.sessionStorage.setItem("mapTab", JSON.stringify(mapTab));
+ });
+
+ $("#mapTab").bind("pageinit", function() {
+ $.mobile.fixedToolbars.setTouchToggleEnabled(false);
+ });
+
+ $("#mapTab").bind("pagebeforeshow", function() {
+ $("#mapTab [data-text='DisplayName']").text(mapTab.DisplayName);
+ $("title").text(mapTab.DisplayName);
+ });
+
+ $( document ).bind( "pagechange", function(e, mobile) {
+ if ( $(mobile.toPage).is("#mapTab") ) {
+ $.geo.proj = null;
+
+ // create a map
+ if ( map == null ) {
+ map = $("#map").geomap({
+ tilingScheme: null,
+ bboxMax: [ 372440,2935595,396368,2985633 ],
+ bbox: bbox ? JSON.parse(bbox) : [ 372440,2935595,396368,2985633 ],
+ services: [{
+ id: "gpv",
+ type: "shingled",
+ src: function(view) {
+ var mapState = {
+ Application: "ParcelApp",
+ MapTab: mapTab.MapTabID,
+ Extent: {
+ bbox: view.bbox
+ }
+ };
+
+ return "http://alpha.appgeo.com/GPV/Services/MapImage.ashx?m=GetMapImage&state=" + JSON.stringify(mapState) + "&width=" + view.width + "&height=" + view.height;
+ }
+ }],
+ bboxchange: function(e, geo) {
+ bbox = "[" + geo.bbox.toString() + "]";
+ window.sessionStorage.setItem("bbox", bbox);
+ }
+ });
+ } else {
+ map.geomap( "resize" );
+ }
+ }
+ });
+
+ /*
+ $("#mapTab").bind("pagebeforehide", function() {
+ if (map) {
+ map.geomap("destroy");
+ map = null;
+ }
+ });
+ */
+ })();
+ </script>
+
+ <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+</body>
+</html>
--- /dev/null
+$(function () {
+ // Firefox likes to cache form values during refresh
+ $( "form" )[ 0 ].reset( );
+
+ $( "form" ).submit( function( ) {
+ // also, we don't want the form to actually submit
+ return false;
+ } );
+
+ // set proj to null because we don't have the code for this projection
+ // and are working entirely in map units
+
+ $.geo.proj = null;
+
+ // define two shingled services
+ var services = [
+ // define a basemap service
+ {
+ id: "massgis_basemap",
+ type: "shingled",
+ src: "http://giswebservices.massgis.state.ma.us/geoserver/wms?LAYERS=massgis_basemap&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&SRS=EPSG%3A26986&BBOX={{=bbox}}&WIDTH={{=width}}&HEIGHT={{=height}}",
+ attr: "© 2011 Commonwealth of Massachusetts"
+ },
+
+ // define a second service as a layer on top of the basemap
+ // we use this service as the target when "target" is set to service in this demo
+ {
+ id: "massgis_hydrography",
+ type: "shingled",
+ src: "http://giswebservices.massgis.state.ma.us/geoserver/wms?LAYERS=massgis%3AGISDATA.MAJPOND_POLY,massgis%3AGISDATA.MAJSTRM_ARC&TRANSPARENT=true&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&SRS=EPSG%3A26986&BBOX={{=bbox}}&WIDTH={{=width}}&HEIGHT={{=height}}"
+ }
+ ];
+
+
+ // create a map without a tilingScheme & with the two shingled services
+ var map = $( "#map" ).geomap( {
+ // add a cursor for our custom mode: remove
+ cursors: { remove: "crosshair" },
+
+ // use the services array defined above
+ services: services,
+
+ // you must set bboxMax for shingled services for the zoom property to mean anything
+ bboxMax: [ 31789.1658, 790194.4183, 337250.8970, 961865.1338 ],
+
+ // shingled services do not have a tilingScheme
+ tilingScheme: null,
+
+ // center & zoom values that fit MassGIS's projection
+ center: [ 235670.21967, 900771.290247 ],
+ zoom: 13,
+
+ bboxchange: function( e, geo ) {
+ // when the bbox changes, update the info section with new option values
+ updateInfo( );
+ },
+
+ shape: function( e, geo ) {
+ // when the user draws a shape, show it on the map
+ // the shape event triggers when the user finishes drawing a shape
+ // the geo argument is a GeoJSON object representing the shape
+
+ // for this example, we'll append it to the map forcing an
+ // individual style that matches the current drawStyle
+
+ // make a copy of the current drawStyle
+ var drawStyle = $.extend( { }, map.geomap( "option", "drawStyle" ) );
+
+ // grab the label (if any) from the input
+ var label = $( "#shapeLabels input" ).val( );
+
+ // append the shape using that style
+ // however, depending on which target is checked, we will append the shape to either the map widget itself or a specific map service
+ if ( $( "#clickTargetWidget" ).is( ":checked" ) ) {
+ // if the map is our target, just append the shape to the map
+ // if there's a label entered, used it
+ map.geomap( "append", geo, drawStyle, label );
+ } else {
+ // otherwise, grab a reference to a service
+ // ( by id in this case ) and append the shape to that
+ // the value of the remaining radio buttons matches the id of a service
+ // if there's a label entered, used it
+ var serviceToAppend = $( "#" + $( "input[name='clickTarget']:checked" ).val( ) );
+
+ $( serviceToAppend ).geomap( "append", geo, drawStyle, label );
+
+ // also note, that the label is controlled seperately from the shape, by CSS, rather than by jQuery Geo shapeStyle objects
+ // if you look at the CSS, you will notice:
+ //
+ // #massgis_hydrography { color: blue; }
+ //
+ // which makes all labels on the hydro service blue text
+ }
+ },
+
+ click: function( e, geo ) {
+ // when the user clicks the map while in our custom mode, remove,
+ // we will search for shapes on either the map widget itself
+ // ( and, by design, all map services) or a single, specific map service
+
+ // we'll use a nice, fat 5px radius for the searches here, that's what the (, 5) is below
+
+ // however, in this demo, we remove any shapes found from either the map or service
+
+ // if the map is our target, grab the map reference
+ // otherwise, grab a reference to a service, in this case, by id
+ var target = $( "#clickTargetWidget" ).is( ":checked" ) ? map : $( "#" + $( "input[name='clickTarget']:checked" ).val( ) );
+
+ // by design, calling find on the map itself returns all shapes at that location
+ // even if they have been appended to a service
+ // when target is the service, find is limited to shapes that have been appended there
+ var shapes = target.geomap( "find", geo, 3 );
+
+ // even though we potentially found service-level shapes with the find method,
+ // calling remove on the map does not remove from all services
+ $.each( shapes, function( ) {
+ target.geomap( "remove", this );
+ } );
+ }
+ } );
+
+ // jQuery UI for pretty buttons
+ $( "button, #togglePannable" ).button( );
+ $( ".modes, .scrollOptions, .clickTargets, .toggleTargets" ).buttonset( );
+
+ $( "#toggle-info" ).click( function( ) {
+ // show or hide some map info such as bbox, center and zoom
+ $( "#mapInfo" ).toggle( );
+ } );
+
+ $( "#togglePannable" ).click( function( ) {
+ // change the pannable option to allow users to pan or not pan your map
+ map.geomap( "option", "pannable", $( this ).is( ":checked" ) );
+ } );
+
+ $( ".scrollOptions input" ).click( function( ) {
+ // set the map's scroll option based on value of the input clicked
+ // currently, default and scroll are the same; the only other option is off
+ var scrollValue = $( this ).val( );
+ map.geomap( "option", "scroll", scrollValue );
+
+ } );
+
+ $( "#change-mode").click( function( ) {
+ // show or hide the mode options
+ $( "#modeOptions" ).toggle( );
+ } );
+
+ $( ".modes input" ).click( function () {
+ // set the map's mode option based on value of the input clicked
+ var modeValue = $( this ).val( );
+ map.geomap( "option", "mode", modeValue );
+
+ // if mode is one of the draw modes (or remove), show the target section, otherwise hide it
+ $( "#clickTarget" ).toggle( modeValue.substr( 0, 4 ) === "draw" || modeValue === "remove" );
+
+ // if mode is one of the draw modes,
+ // show the label inputs & shape style as well
+ $( "#shapeLabels, #drawStyle" ).toggle( modeValue.substr( 0, 4 ) === "draw" );
+
+ // also display the current mode on the button
+ $( "#change-mode .ui-button-text" ).text( modeValue );
+
+ // hide the mode options
+ $( "#modeOptions" ).hide( );
+ } );
+
+ $( "#drawStyle input" ).change( function( ) {
+ // when an input of the drawStyle area changes,
+ // immediately set the property of geomap's drawStyle option
+
+ // keep in mind that the three point-only styles (width, height & borderRadius)
+ // cannot be seen because with drawPoint, the shape event triggers immediately
+ // without drawing a shape
+ // this example, however, does use them when appending the shape after a click
+
+ // first, we can grab a jQuery reference to the input that changed
+ var $this = $( this );
+
+ // next, we can create an object that represents this change
+ // this example doesn't, but you can set more than one property
+ // on geomap's drawStyle option at a time
+ var styleOption = { };
+ styleOption[ $this.attr( "name" ) ] = $this.val();
+
+ map.geomap( "option", "drawStyle", styleOption );
+ } );
+
+
+ $( ".toggleTargets input" ).click( function( ) {
+ // when a service is toggled, we tell the geomap widget to toggle it
+ // the value of each checkbox input equals the id of a service
+ var checkboxClicked = $( this );
+ var serviceToToggle = $( "#" + checkboxClicked.val( ) );
+
+ // toggle the service, shapes on the service will also be toggled
+ serviceToToggle.geomap( "toggle" );
+ } );
+
+ $( "#zoomOut" ).button( "option", {
+ // just icons for the zoom buttons
+ icons: { primary: "ui-icon-minus" },
+ text: false
+ } ).click( function( ) {
+ // use the zoom method to zoom out
+ map.geomap( "zoom", -1 );
+ } );
+
+ $( "#zoomIn" ).button( "option", {
+ // just icons for the zoom buttons
+ icons: { primary: "ui-icon-plus" },
+ text: false
+ } ).click( function( ) {
+ // also use the zoom method to zoom in
+ map.geomap( "zoom", +1 );
+ } );
+
+ // update the info section with initial option values
+ updateInfo( );
+
+ function updateInfo( ) {
+ // update the info section with option values
+ $( "#mapInfo td" ).each( function( ) {
+ // a reference to the current option td element
+ var optionCell = $( this );
+
+ // since each td has a data-option attribute,
+ // jQuery can extract the option value via the data function
+ var optionValue = map.geomap( "option", optionCell.data( "option" ) );
+
+ if ( $.isArray( optionValue ) ) {
+ // display array values a little nicer
+ $.each( optionValue, function( i ) {
+ optionValue[ i ] = this.toFixed( 2 );
+ } );
+ optionCell.text( "[ " + optionValue.join( ", " ) + " ]" );
+ } else {
+ optionCell.text( optionValue );
+ }
+ } );
+ }
+});
+
--- /dev/null
+$(function () {
+ // Firefox likes to cache form values during refresh
+ $( "form" )[ 0 ].reset( );
+
+ $( "form" ).submit( function( ) {
+ // also, we don't want the form to actually submit
+ return false;
+ } );
+
+ // define two tiled services
+ var services = [
+ // a free basemap tile set from MapQuest
+ {
+ id: "mapquest-open",
+ type: "tiled",
+ src: function( view ) {
+ return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">'
+ },
+
+ // define a second service as a layer on top of the basemap
+ // we use this service as the target when "target" is set to service in this demo
+ {
+ id: "broadband-speedtest",
+ type: "tiled",
+ src: "http://www.broadbandmap.gov/StamenTiles/speedtest/speedtest/download/{{=zoom}}/{{=tile.column}}/{{=tile.row}}.png",
+ attr: "Speed Test data maintained by the NTIA, in collaboration with the FCC"
+ }
+ ];
+
+ // create a map with a tilingScheme & with the two tiled services
+ var map = $( "#map" ).geomap( {
+ // add a cursor for our custom mode: remove
+ cursors: { remove: "crosshair" },
+
+ // use the services array defined above
+ services: services,
+
+ // these tiled services are in jQuery Geo's default tilingScheme, web mercator
+ // we don't need to change it but will write it here in comments, for this demo
+ /*
+ tilingScheme: {
+ tileWidth: 256,
+ tileHeight: 256,
+ levels: 18,
+ basePixelSize: 156543.03392799936,
+ pixelSizes: null,
+ origin: [ -20037508.342787, 20037508.342787 ]
+ },
+ */
+
+ // center & zoom values that default to showing the contenental United States of America
+ center: [ -89.34, 38.84 ],
+ zoom: 5,
+
+ bboxchange: function( e, geo ) {
+ // when the bbox changes, update the info section with new option values
+ updateInfo( );
+ },
+
+ shape: function( e, geo ) {
+ // when the user draws a shape, show it on the map
+ // the shape event triggers when the user finishes drawing a shape
+ // the geo argument is a GeoJSON object representing the shape
+
+ // for this example, we'll append it to the map forcing an
+ // individual style that matches the current drawStyle
+
+ // make a copy of the current drawStyle
+ var drawStyle = $.extend( { }, map.geomap( "option", "drawStyle" ) );
+
+ // grab the label (if any) from the input
+ var label = $( "#shapeLabels input" ).val( );
+
+ // append the shape using that style
+ // however, depending on which target is checked, we will append the shape to either the map widget itself or a specific map service
+ if ( $( "#clickTargetWidget" ).is( ":checked" ) ) {
+ // if the map is our target, just append the shape to the map
+ // if there's a label entered, used it
+ map.geomap( "append", geo, drawStyle, label );
+ } else {
+ // otherwise, grab a reference to a service
+ // ( by id in this case ) and append the shape to that
+ // the value of the remaining radio buttons matches the id of a service
+ // if there's a label entered, used it
+ var serviceToAppend = $( "#" + $( "input[name='clickTarget']:checked" ).val( ) );
+
+ $( serviceToAppend ).geomap( "append", geo, drawStyle, label );
+
+ // also note, that the label is controlled seperately from the shape, by CSS, rather than by jQuery Geo shapeStyle objects
+ // if you look at the CSS, you will notice:
+ //
+ // #broadband-speedtest { color: purple; font-weight: bold; }
+ //
+ // which makes all labels on the speedtest service blue text
+ }
+ },
+
+ click: function( e, geo ) {
+ // when the user clicks the map while in our custom mode, remove,
+ // we will search for shapes on either the map widget itself
+ // ( and, by design, all map services) or a single, specific map service
+
+ // we'll use a nice, fat 5px radius for the searches here, that's what the (, 5) is below
+
+ // however, in this demo, we remove any shapes found from either the map or service
+
+ // if the map is our target, grab the map reference
+ // otherwise, grab a reference to a service, in this case, by id
+ var target = $( "#clickTargetWidget" ).is( ":checked" ) ? map : $( "#" + $( "input[name='clickTarget']:checked" ).val( ) );
+
+ // by design, calling find on the map itself returns all shapes at that location
+ // even if they have been appended to a service
+ // when target is the service, find is limited to shapes that have been appended there
+ var shapes = target.geomap( "find", geo, 3 );
+
+ // even though we potentially found service-level shapes with the find method,
+ // calling remove on the map does not remove from all services
+ $.each( shapes, function( ) {
+ target.geomap( "remove", this );
+ } );
+ }
+ } );
+
+ // jQuery UI for pretty buttons
+ $( "button, #togglePannable" ).button( );
+ $( ".modes, .scrollOptions, .clickTargets, .toggleTargets" ).buttonset( );
+
+ $( "#toggle-info" ).click( function( ) {
+ // show or hide some map info such as bbox, center and zoom
+ $( "#mapInfo" ).toggle( );
+ } );
+
+ $( "#togglePannable" ).click( function( ) {
+ // change the pannable option to allow users to pan or not pan your map
+ map.geomap( "option", "pannable", $( this ).is( ":checked" ) );
+ } );
+
+ $( ".scrollOptions input" ).click( function( ) {
+ // set the map's scroll option based on value of the input clicked
+ // currently, default and scroll are the same; the only other option is off
+ var scrollValue = $( this ).val( );
+ map.geomap( "option", "scroll", scrollValue );
+
+ } );
+
+ $( "#change-mode").click( function( ) {
+ // show or hide the mode options
+ $( "#modeOptions" ).toggle( );
+ } );
+
+ $( ".modes input" ).click( function () {
+ // set the map's mode option based on value of the input clicked
+ var modeValue = $( this ).val( );
+ map.geomap( "option", "mode", modeValue );
+
+ // if mode is one of the draw modes (or remove), show the target section, otherwise hide it
+ $( "#clickTarget" ).toggle( modeValue.substr( 0, 4 ) === "draw" || modeValue === "remove" );
+
+ // if mode is one of the draw modes,
+ // show the label inputs & shape style as well
+ $( "#shapeLabels, #drawStyle" ).toggle( modeValue.substr( 0, 4 ) === "draw" );
+
+ // also display the current mode on the button
+ $( "#change-mode .ui-button-text" ).text( modeValue );
+
+ // hide the mode options
+ $( "#modeOptions" ).hide( );
+ } );
+
+ $( "#drawStyle input" ).change( function( ) {
+ // when an input of the drawStyle area changes,
+ // immediately set the property of geomap's drawStyle option
+
+ // keep in mind that the three point-only styles (width, height & borderRadius)
+ // cannot be seen because with drawPoint, the shape event triggers immediately
+ // without drawing a shape
+ // this example, however, does use them when appending the shape after a click
+
+ // first, we can grab a jQuery reference to the input that changed
+ var $this = $( this );
+
+ // next, we can create an object that represents this change
+ // this example doesn't, but you can set more than one property
+ // on geomap's drawStyle option at a time
+ var styleOption = { };
+ styleOption[ $this.attr( "name" ) ] = $this.val();
+
+ map.geomap( "option", "drawStyle", styleOption );
+ } );
+
+
+ $( ".toggleTargets input" ).click( function( ) {
+ // when a service is toggled, we tell the geomap widget to toggle it
+ // the value of each checkbox input equals the id of a service
+ var checkboxClicked = $( this );
+ var serviceToToggle = $( "#" + checkboxClicked.val( ) );
+
+ // toggle the service, shapes on the service will also be toggled
+ serviceToToggle.geomap( "toggle" );
+ } );
+
+ $( "#zoomOut" ).button( "option", {
+ // just icons for the zoom buttons
+ icons: { primary: "ui-icon-minus" },
+ text: false
+ } ).click( function( ) {
+ // use the zoom method to zoom out
+ map.geomap( "zoom", -1 );
+ } );
+
+ $( "#zoomIn" ).button( "option", {
+ // just icons for the zoom buttons
+ icons: { primary: "ui-icon-plus" },
+ text: false
+ } ).click( function( ) {
+ // also use the zoom method to zoom in
+ map.geomap( "zoom", +1 );
+ } );
+
+ // update the info section with initial option values
+ updateInfo( );
+
+ function updateInfo( ) {
+ // update the info section with option values
+ $( "#mapInfo td" ).each( function( ) {
+ // a reference to the current option td element
+ var optionCell = $( this );
+
+ // since each td has a data-option attribute,
+ // jQuery can extract the option value via the data function
+ var optionValue = map.geomap( "option", optionCell.data( "option" ) );
+
+ if ( $.isArray( optionValue ) ) {
+ // display array values a little nicer
+ $.each( optionValue, function( i ) {
+ optionValue[ i ] = this.toFixed( 2 );
+ } );
+ optionCell.text( "[ " + optionValue.join( ", " ) + " ]" );
+ } else {
+ optionCell.text( optionValue );
+ }
+ } );
+ }
+});
+
--- /dev/null
+$.ajaxTransport( function( options, originalOptions, jqXHR ) {
+ var xdr;
+
+ return {
+ send: function( _, completeCallback ) {
+ xdr = new XDomainRequest();
+
+ xdr.onload = function() {
+ var responses = {
+ text: xdr.responseText
+ };
+
+ // force status code to 200, XDomainRequest rejects all other successful status codes
+ if (xdr.contentType.match(/\/xml/)){
+ // there is no responseXML in XDomainRequest, so we have to create it manually
+ var dom = new ActiveXObject('Microsoft.XMLDOM');
+ dom.async = false;
+ dom.loadXML(xdr.responseText);
+ responses.xml = dom;
+
+ if($(dom).children('error').length != 0) {
+ var $error = $(dom).find('error');
+ completeCallback(parseInt($error.attr('response_code')), $error.attr('message_key'), responses);
+ } else {
+ completeCallback(200, 'success', responses);
+ }
+ } else if (xdr.contentType.match(/\/json/)) {
+ options.dataTypes.push("json");
+ completeCallback(200, 'success', responses);
+ } else {
+ completeCallback(200, 'success', responses);
+ // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334804
+ }
+ };
+
+ xdr.onprogress = function() { };
+
+ xdr.onerror = xdr.ontimeout = function() {
+ var responses = {
+ text: xdr.responseText
+ };
+ completeCallback(400, 'failed', responses);
+ };
+
+ xdr.open(options.type, options.url);
+ xdr.send(options.data);
+ },
+ abort: function() {
+ if(xdr) {
+ xdr.abort();
+ }
+ }
+ };
+});
+
--- /dev/null
+var JSON;if(!JSON){JSON={}}(function(){function f(n){return n<10?"0"+n:n}if(typeof Date.prototype.toJSON!=="function"){Date.prototype.toJSON=function(key){return isFinite(this.valueOf())?this.getUTCFullYear()+"-"+f(this.getUTCMonth()+1)+"-"+f(this.getUTCDate())+"T"+f(this.getUTCHours())+":"+f(this.getUTCMinutes())+":"+f(this.getUTCSeconds())+"Z":null};String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function(key){return this.valueOf()}}var cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,escapable=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,gap,indent,meta={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},rep;function quote(string){escapable.lastIndex=0;return escapable.test(string)?'"'+string.replace(escapable,function(a){var c=meta[a];return typeof c==="string"?c:"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+string+'"'}function str(key,holder){var i,k,v,length,mind=gap,partial,value=holder[key];if(value&&typeof value==="object"&&typeof value.toJSON==="function"){value=value.toJSON(key)}if(typeof rep==="function"){value=rep.call(holder,key,value)}switch(typeof value){case"string":return quote(value);case"number":return isFinite(value)?String(value):"null";case"boolean":case"null":return String(value);case"object":if(!value){return"null"}gap+=indent;partial=[];if(Object.prototype.toString.apply(value)==="[object Array]"){length=value.length;for(i=0;i<length;i+=1){partial[i]=str(i,value)||"null"}v=partial.length===0?"[]":gap?"[\n"+gap+partial.join(",\n"+gap)+"\n"+mind+"]":"["+partial.join(",")+"]";gap=mind;return v}if(rep&&typeof rep==="object"){length=rep.length;for(i=0;i<length;i+=1){if(typeof rep[i]==="string"){k=rep[i];v=str(k,value);if(v){partial.push(quote(k)+(gap?": ":":")+v)}}}}else{for(k in value){if(Object.prototype.hasOwnProperty.call(value,k)){v=str(k,value);if(v){partial.push(quote(k)+(gap?": ":":")+v)}}}}v=partial.length===0?"{}":gap?"{\n"+gap+partial.join(",\n"+gap)+"\n"+mind+"}":"{"+partial.join(",")+"}";gap=mind;return v}}if(typeof JSON.stringify!=="function"){JSON.stringify=function(value,replacer,space){var i;gap="";indent="";if(typeof space==="number"){for(i=0;i<space;i+=1){indent+=" "}}else{if(typeof space==="string"){indent=space}}rep=replacer;if(replacer&&typeof replacer!=="function"&&(typeof replacer!=="object"||typeof replacer.length!=="number")){throw new Error("JSON.stringify")}return str("",{"":value})}}if(typeof JSON.parse!=="function"){JSON.parse=function(text,reviver){var j;function walk(holder,key){var k,v,value=holder[key];if(value&&typeof value==="object"){for(k in value){if(Object.prototype.hasOwnProperty.call(value,k)){v=walk(value,k);if(v!==undefined){value[k]=v}else{delete value[k]}}}}return reviver.call(holder,key,value)}text=String(text);cx.lastIndex=0;if(cx.test(text)){text=text.replace(cx,function(a){return"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)})}if(/^[\],:{}\s]*$/.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,""))){j=eval("("+text+")");return typeof reviver==="function"?walk({"":j},""):j}throw new SyntaxError("JSON.parse")}}}());
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>label examples</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
+ <meta name="description" content="An example of drawing shapes with labels">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/2TAzc/embedded/" class="fiddleLink not-mobile"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>label</h1>
+ <p class="not-mobile">This example builds on the drawing example by appending a label with shapes. Enter label text (HTML is ok), choose a tool below, and start labelling!</p>
+ <input type="text" name="label" value="a label" autofocus />
+ <div id="modes">
+ <input type="radio" id="drawPoint" name="mode" value="drawPoint" checked="checked" /><label for="drawPoint">point</label>
+ <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">line</label>
+ <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">polygon</label>
+ </div>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map, setting mode to drawPoint initially
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8,
+ mode: "drawPoint",
+ shape: function (e, geo) {
+ // the shape event triggers when a user draws a shape
+ // the geo object is a simple GeoJSON object: Point, LineString or Polygon
+ // we can append it directly to the map
+
+ // grab the text of the label input and send it as a label for this shape
+ map.geomap("append", geo, $("input[name='label']").val());
+ }
+ });
+
+ // jQuery UI for pretty buttons
+ $("#modes").buttonset();
+
+ $("#modes input").click(function () {
+ // set the map's mode option based on value of the input clicked
+ // this will change the map's mode to drawPoint, drawLineString or drawPolygon
+ map.geomap("option", "mode", $(this).val());
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>label service examples</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
+ <meta name="description" content="An example of drawing shapes with labels on services">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/2TAzc/embedded/" class="fiddleLink not-mobile"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>label service</h1>
+ <p class="not-mobile">This page is similar to the regular label example but tests appending labeled shapes to a specific service instead of the map itself.</p>
+ <input type="text" name="label" value="a label" autofocus />
+ <div id="modes">
+ <input type="radio" id="drawPoint" name="mode" value="drawPoint" checked="checked" /><label for="drawPoint">point</label>
+ <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">line</label>
+ <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">polygon</label>
+ </div>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map, setting mode to drawPoint initially
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8,
+ mode: "drawPoint",
+ shape: function (e, geo) {
+ // the shape event triggers when a user draws a shape
+ // the geo object is a simple GeoJSON object: Point, LineString or Polygon
+ // we can append it directly to the map
+
+ // grab the text of the label input and send it as a label for this shape
+ map.find( ".osm" ).geomap("append", geo, $("input[name='label']").val());
+ }
+ });
+
+ // jQuery UI for pretty buttons
+ $("#modes").buttonset();
+
+ $("#modes input").click(function () {
+ // set the map's mode option based on value of the input clicked
+ // this will change the map's mode to drawPoint, drawLineString or drawPolygon
+ map.geomap("option", "mode", $(this).val());
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>jQuery Geo logo</title>
+
+ <meta name="description" content="Drawing the jQuery Geo logo">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ }
+ .ie7 #map, .ie6 #map
+ {
+ width: 100%;
+ right: auto;
+ bottom: auto;
+ min-height: 600px;
+ }
+ </style>
+</head>
+<body>
+ <div class="content">
+ <div id="map">
+ </div>
+ <div class="info">
+ <a href="../" class="docLink">< docs</a>
+ <h1>
+ jQuery Geo logos!</h1>
+ <p>This demo uses jQuery Geo to draw its own logo at the top left of the map. Single-click the map to make more logos! The shapes created for the logo are based on the pixelSize of the current scale so your map's current zoom determines the Earth-size of the logo. When you zoom in, the points of the individual logos will spread out.</p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var map = $("#map").geomap({
+ center: [-75, 40],
+ zoom: 5,
+ mode: "drawPoint",
+ shape: function (e, geo) {
+ addLogo(geo);
+ }
+ });
+
+ var width = $(document).width();
+
+ addLogo({ pixels: [16, 16], coordinates: map.geomap("toMap", [32, 16]) });
+
+ function addLogo(geo) {
+ var geoPixels = map.geomap("toPixel", geo.coordinates),
+ logoOuterCoords = map.geomap("toMap", [
+ [geoPixels[0] - 16, geoPixels[1]],
+ [geoPixels[0] - 15, geoPixels[1] + 6],
+ [geoPixels[0] - 11, geoPixels[1] + 11],
+ [geoPixels[0] - 6, geoPixels[1] + 15],
+ [geoPixels[0], geoPixels[1] + 16]
+ ]),
+ logoOuterPoints = [],
+ logoInnerCoords = map.geomap("toMap", [
+ [geoPixels[0] - 8, geoPixels[1]],
+ [geoPixels[0] - 6, geoPixels[1] + 6],
+ [geoPixels[0], geoPixels[1] + 8]
+ ]),
+ logoInnerPoints = [],
+ logoCornerCoord = geo.coordinates,
+ logoLines = {
+ type: "GeometryCollection",
+ geometries: []
+ },
+ logoPoints = {
+ type: "GeometryCollection",
+ geometries: []
+ };
+
+ $.merge(logoLines.geometries, [{
+ type: "LineString",
+ coordinates: logoOuterCoords
+ }]);
+
+ $.merge(logoLines.geometries, [{
+ type: "LineString",
+ coordinates: logoInnerCoords
+ }]);
+
+ $.each(logoOuterCoords, function (i) {
+ logoOuterPoints[i] = {
+ type: "Point",
+ coordinates: this
+ };
+ });
+
+ $.merge(logoPoints.geometries, logoOuterPoints);
+
+ $.each(logoInnerCoords, function (i) {
+ logoInnerPoints[i] = {
+ type: "Point",
+ coordinates: this
+ };
+ });
+
+ $.merge(logoPoints.geometries, logoInnerPoints);
+
+ $.merge(logoPoints.geometries, [{
+ type: "Point",
+ coordinates: logoCornerCoord
+ }]);
+
+ map.geomap("append", logoLines, { strokeWidth: "2px", fill: "#faa", fillOpacity: 1 });
+ map.geomap("append", logoPoints, { strokeWidth: "1px", width: "3px", height: "3px", fill: "#faa", fillOpacity: 1 });
+ }
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>measure example</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of measure">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>measure</h1>
+ <p class="not-mobile">This example tests the two measure modes: measureLength, and measureArea. Choose a tool below and start measuring!</p>
+ <div id="modes">
+ <input type="radio" id="measureLength" name="mode" value="measureLength" checked="checked" /><label for="measureLength">length</label>
+ <input type="radio" id="measureArea" name="mode" value="measureArea" /><label for="measureArea">area</label>
+ </div>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <!--<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>-->
+ <script src="../jquery.geo-test.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8,
+ mode: "measureLength",
+ measureLabels: {
+ distance: "{{=length.toFixed( 4 )}} meters"
+ },
+ drawStyle: {
+ color: "blue"
+ }
+ });
+
+ // jQuery UI for pretty buttons
+ $("#modes").buttonset();
+
+ $("#modes input").click(function () {
+ // set the map's mode option based on value of the input clicked
+ // this will change the map's mode to measureLength or measureArea
+ map.geomap("option", "mode", $(this).val());
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+
+ <title>mobile</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+
+ <meta name="description" content="A very simple instantiation of the geomap widget for a full screen mobile app">
+ <meta name="author" content="Ryan Westphal">
+
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ </head>
+<body>
+ <div>
+ <div id="map" style="position: fixed; left: 0; top: 0; right: 0; bottom: 0;">
+ </div>
+ <div class="info not-mobile" style="float: right;">
+ <a href="../" class="docLink">< docs</a>
+ <h1>mobile</h1>
+ <p>A full window div...geomap called, zoomed in to level 6.</p>
+ <p>Add a <i>meta viewport</i> tag to your head element and you're good to go.</p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 7
+ });
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zoom mode example</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of zoom mode">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/e6YHv/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>
+ zoom mode</h1>
+ <p>When a geomap widget's mode option is "zoom", you can your your mouse to draw a rectangle. jQuery Geo will change the bbox of the map to match the rectangle as closely as possible based on the tiling scheme and viewport size.</p>
+ <p class="not-mobile">This mode is more useful for dynamic map services and may be more familiar to GIS professionals.</p>
+ <p class="not-mobile">Hint: in pan or any of the draw modes, you can hold the shift key to temporarily switch to zoom mode.</p>
+ <div id="modes">
+ <input type="radio" id="pan" name="mode" value="pan" /><label for="pan">pan</label>
+ <input type="radio" id="zoom" name="mode" value="zoom" checked="checked" /><label for="zoom">zoom</label>
+ </div>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map, setting mode to zoom initially
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8,
+ mode: "zoom"
+ });
+
+ // jQuery UI for pretty buttons
+ $("#modes").buttonset();
+
+ $("#modes input").click(function () {
+ // set the map's mode option based on value of the input clicked
+ // this will change the map's mode to pan or zoom
+ map.geomap("option", "mode", $(this).val());
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>opacity</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="A test of geomap's opacity and toggle methods">
+ <meta name="author" content="Ryan Westphal">
+
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" href="css/style.css" />
+ <style type="text/css">
+ #map {
+ position: fixed;
+ left: 0; top: 0; right: 0; bottom: 0;
+ background: #b5d0d0;
+ }
+
+ label { display: block; }
+
+ label span:first-child
+ {
+ font-weight: bold;
+ margin-right: 12px;
+ }
+
+ .slider
+ {
+ display: inline-block;
+ width: 60%
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/kY5SC/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>opacity & toggle</h1>
+ <p>The slider calls geomap's opacity method targeting the OSM service. The default service object doesn't have an id but it does have a class, osm, that we can reference using $(".osm"). The button calls the toggle method. I've matched the map div's background color to OSM's water color for effect.</p>
+ <label>
+ <span>opacity</span>
+ <span class="slider"></span>
+ </label>
+ <label>
+ <span>visibility</span>
+ <button type="button">toggle</button>
+ </label>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 6
+ });
+
+ // create a jQuery UI slider
+ // in the slide event, search for the default service by its class, .osm, and call the opacity method.
+ // the ui argument's value is a number from 0-100 so to make a percentage that the opacity CSS property needs, we divide by 100.
+ $(".slider").slider({
+ value: 100,
+ slide: function (e, ui) {
+ $(".osm").geomap("opacity", ui.value / 100);
+ }
+ });
+
+ // create a jQuery UI button
+ // in the click event, search for the default service by its class, .osm, and call the toggle method.
+ // with no argument, toggle will flip the service's visibility but you can also pass true or false as a second argument after toggle to force a specific result.
+ $("button").button().click(function() {
+ $(".osm").geomap("toggle");
+ });
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>panning & scroll example</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of panning & scroll">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/aSFsK/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>panning & scroll</h1>
+
+ <p>The panning option can remove a user's ability to pan the map. The scroll option can remove a user's ability to use the mouse wheel to zoom.</p>
+
+ <p class="not-mobile">scroll options default and zoom work the same.</p>
+
+ <fieldset>
+ <legend>pannable (click to toggle)</legend>
+ <input type="checkbox" id="pannable" checked="checked" /><label for="pannable">pannable</label>
+ </fieldset>
+
+ <fieldset>
+ <legend>scroll</legend>
+ <div id="scroll">
+ <input type="radio" id="default" name="scroll" value="default" checked="checked" /><label for="default">default</label>
+ <input type="radio" id="zoom" name="scroll" value="zoom" /><label for="zoom">zoom</label>
+ <input type="radio" id="off" name="scroll" value="off" /><label for="off">off</label>
+ </div>
+ </fieldset>
+
+
+
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ // set pannable and scroll options based on current input values
+ // in case the browser has cached them
+ var map = $( "#map" ).geomap( {
+ center: [ -71.0595678, 42.3604823 ],
+ zoom: 8,
+ pannable: $( "#pannable" ).prop( "checked" ),
+ scroll: $( "input[name='scroll']:checked" ).val( )
+ } );
+
+ $( "#pannable" ).button( ).click( function( ) {
+ // toggle the pannable option based on the state
+ // of the pannable button
+ map.geomap( "option", "pannable", this.checked );
+ } );
+
+ $( "#scroll" ).buttonset( ).find( "input" ).click( function( ) {
+ // set the scroll option based on the currently checked radio's value
+ var scrollValue = $( "input[name='scroll']:checked" ).val( );
+ map.geomap( "option", "scroll", scrollValue );
+ } );
+
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>proj test</title>
+ <meta name="description" content="Small test of $.geo.proj">
+ <meta name="author" content="Ryan Westphal">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ label
+ {
+ display: block;
+ margin: .25em;
+ }
+ label span
+ {
+ display: inline-block;
+ font-weight: bold;
+ width: 8em;
+ }
+ #lblStatus
+ {
+ background: #ee4;
+ border-radius: .5em;
+ padding: .5em;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <a href="../" class="docLink">< docs</a>
+ <h1>
+ proj test</h1>
+ <p>
+ This page has a couple basic interactive tests of the default $.geo.proj object.</p>
+ <h2>
+ direct conversion</h2>
+ <p>
+ Enter a lon/lat in the top inputs (remember, longitude is first here and throughout jQuery Geo but usually spoken second) & click fromGeodetic to convert it to web mercator and store the new values in the bottom two inputs. Click toGeodetic to reverse.</p>
+ <label>
+ <span>longitude</span>
+ <input type="text" id="txtLon" value="-71.0597732" />
+ </label>
+ <label>
+ <span>latitude</span>
+ <input type="text" id="txtLat" value="42.3584308" />
+ </label>
+ <button type="button" id="cmdFrom">
+ \/ fromGeodetic</button>
+ <button type="button" id="cmdTo">
+ /\ toGeodetic</button>
+ <label>
+ <span>web mercator x</span>
+ <input type="text" id="txtX" value="-7910337.768509507" />
+ </label>
+ <label>
+ <span>web mercator y</span>
+ <input type="text" id="txtY" value="5214822.77694091" />
+ </label>
+ <h2>
+ osm nominatim</h2>
+ <p>
+ Enter a search term in the input and click search. If successful, geodetic & web mercator coordinates are written to the inputs above. This example uses MapQuest's OSM API: <a href="http://open.mapquestapi.com/nominatim/">http://open.mapquestapi.com/nominatim</a>.</p>
+ <label>
+ <span>query</span>
+ <input type="text" id="txtQuery" value="Boston,MA" />
+ </label>
+ <button type="button" id="cmdSearch">search</button>
+ <h2>
+ status</h2>
+ <p>
+ Status result for any test.</p>
+ <div id="lblStatus">
+ ready</div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ $("#cmdFrom").click(function () {
+ try {
+ var projected = $.geo.proj.fromGeodetic([[parseFloat($("#txtLon").val()), parseFloat($("#txtLat").val())]]);
+ $("#txtX").val(projected[0][0])
+ $("#txtY").val(projected[0][1])
+ $("#lblStatus").html("done " + (new Date()).toString());
+ } catch (e) {
+ $("#lblStatus").html("error" + e.toString());
+ }
+ });
+ $("#cmdTo").click(function () {
+ try {
+ var geodetic = $.geo.proj.toGeodetic([[parseFloat($("#txtX").val()), parseFloat($("#txtY").val())]]);
+ $("#txtLon").val(geodetic[0][0])
+ $("#txtLat").val(geodetic[0][1])
+ $("#lblStatus").html("done " + (new Date()).toString());
+ } catch (e) {
+ $("#lblStatus").html("error" + e.toString());
+ }
+ });
+
+ $("#cmdSearch").click(function () {
+ try {
+ var query = "http://open.mapquestapi.com/nominatim/v1/search?format=json&q=" + $("#txtQuery").val();
+ $.ajax({
+ url: query,
+ dataType: "jsonp",
+ jsonp: "json_callback",
+ success: function (result) {
+ if (result && result.length > 0) {
+ $("#txtLon").val(result[0].lon)
+ $("#txtLat").val(result[0].lat)
+ var projected = $.geo.proj.fromGeodetic([[result[0].lon, result[0].lat]]);
+ $("#txtX").val(projected[0][0])
+ $("#txtY").val(projected[0][1])
+ $("#lblStatus").html("done " + (new Date()).toString());
+ } else {
+ $("#lblStatus").html("nothing found :(");
+ }
+ },
+ error: function (xhr) {
+ $("#lblStatus").html(xhr.statusText);
+ }
+ });
+ } catch (e) {
+ $("#lblStatus").html("error" + e.toString());
+ }
+ });
+ });
+ </script>
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>geomap remove test</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ .geomap
+ {
+ display: inline-block;
+ position: relative;
+ width: 640px;
+ height: 480px;
+ }
+
+ #point-list
+ {
+ display: inline-block;
+ list-style-type: none;
+ }
+ </style>
+</head>
+<body>
+ <a href="../" class="docLink">< docs</a>
+ <h1>geomap remove test</h1>
+ <p>Click on the buttons to the right to call geomap.remove on points one at a time.</p>
+ <div class="geomap">
+ </div>
+ <ul id="point-list"></ul>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var geomap = $(".geomap").geomap({
+ center: [-71.05, 42.35],
+ zoom: 13
+ });
+
+ var points = {
+ one: { type: "Point", coordinates: [-71.05, 42.35] },
+ two: { type: "Point", coordinates: [-71.045, 42.355] },
+ three: { type: "Point", coordinates: [-71.055, 42.345] },
+ four: { type: "Point", coordinates: [-71.055, 42.355] },
+ five: { type: "Point", coordinates: [-71.045, 42.345] }
+ };
+
+ var buttons = "";
+
+ for (var pointKey in points) {
+ geomap.geomap("append", points[pointKey]);
+ buttons += '<li><button type="button" data-point-key="' + pointKey + '">' + points[pointKey].coordinates + '</button></li>';
+ }
+ $("#point-list").append(buttons);
+
+ $("#point-list button").click(function () {
+ var pointKey = $(this).data("pointKey");
+ $(".geomap").geomap("remove", points[pointKey]);
+ $(this).remove();
+ });
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>geomap remove service test</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ ul
+ {
+ float: right;
+ list-style-type: none;
+ }
+ </style>
+</head>
+<body>
+ <a href="../" class="docLink">< docs</a>
+ <h1>geomap remove service test</h1>
+ <p>Similar to the regular remove example but tests removing shapes from a specific service instead of the map itself.</p>
+ <ul>
+ </ul>
+ <div class="geomap" style="width: 640px; height: 480px;">
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var geomap = $(".geomap").geomap({
+ center: [-71.05, 42.35],
+ zoom: 13
+ }),
+ service = geomap.find( ".osm" );
+
+ var points = {
+ one: { type: "Point", coordinates: [-71.05, 42.35] },
+ two: { type: "Point", coordinates: [-71.045, 42.355] },
+ three: { type: "Point", coordinates: [-71.055, 42.345] },
+ four: { type: "Point", coordinates: [-71.055, 42.355] },
+ five: { type: "Point", coordinates: [-71.045, 42.345] }
+ };
+
+ var buttons = "";
+
+ for (var pointKey in points) {
+ service.geomap("append", points[pointKey]);
+ buttons += '<li><button type="button" data-point-key="' + pointKey + '">' + points[pointKey].coordinates + '</button></li>';
+ }
+ $("ul").append(buttons);
+
+ $("ul button").click(function () {
+ var pointKey = $(this).data("pointKey");
+ service.geomap("remove", points[pointKey]);
+ $(this).remove();
+ });
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>services example</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of the services property">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>services</h1>
+ <p>This example tests setting the service object array, i.e., the geomap services option, in different ways.</p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>shapeStyle test</title>
+ <meta name="description" content="geomap shapeStyle test" />
+ <meta name="author" content="Ryan Westphal" />
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ label { white-space: nowrap; }
+
+ label span { display: inline-block; width: 7rem; }
+ input { width: 6rem; }
+
+ button { width: 16rem; }
+ </style>
+</head>
+<body>
+ <div class="shapeStyle">
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/BXgV4/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>shapeStyle</h1>
+ <p>This page tests various style properties using the shapeStyle option to change the default style or and passing a shape-specific style to the append method.</p>
+ <form id="shapeStyle">
+ <fieldset>
+ <legend>base geomap shapeStyle option</legend>
+ <div>
+ <label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
+ <label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
+ </div>
+ <div>
+ <label><span>fill</span> <input type="color" name="fill" value="" /></label>
+ <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
+ </div>
+ <div>
+ <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
+ <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
+ <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
+ </div>
+ <div>
+ <label><span>width</span> <input type="number" name="width" value="8" /></label>
+ <label><span>height</span> <input type="number" name="height" value="8" /></label>
+ <label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
+ </div>
+ </fieldset>
+ <button type="button">set shapeStyle</button>
+ <button type="reset">reset shapeStyle</button>
+ </form>
+ <form id="append">
+ <fieldset>
+ <legend>specific append style argument</legend>
+ <div>
+ <label><span>color</span> <input type="color" name="color" value="" /></label>
+ <label><span>opacity</span> <input type="text" name="opacity" value="" /></label>
+ </div>
+ <div>
+ <label><span>fill</span> <input type="color" name="fill" value="" /></label>
+ <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value="" /></label>
+ </div>
+ <div>
+ <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
+ <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="" /></label>
+ <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="" /></label>
+ </div>
+ <div>
+ <label><span>width</span> <input type="number" name="width" value="" /></label>
+ <label><span>height</span> <input type="number" name="height" value="" /></label>
+ <label><span>borderRadius</span> <input type="number" name="borderRadius" value="" /></label>
+ </div>
+ </fieldset>
+ <button type="reset">clear append style</button>
+ </form>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ var map = $( "#map" ).geomap( {
+ center: [ -71.0595678, 42.3604823 ],
+ zoom: 8,
+ click: function ( e, geo ) {
+ // in the click handler append the shape to the map
+ // the final display style will be the base shapeStyle
+ // plus individual shape style property overrides via
+ // a style passed to the append method
+ var appendStyle = { };
+
+ $.each( $( "#append input" ).serializeArray( ), function( ) {
+ // run through each input in the append fieldset and
+ // build a style object if there are any style overrides
+ if ( this.value ) {
+ appendStyle[ this.name ] = this.value;
+ }
+ } );
+
+ // append the shape
+ // it will get the base shapeStyle (which can change later)
+ // plus any overrides from the append style (which cannot change)
+ map.geomap( "append", geo, appendStyle );
+ }
+ } );
+
+ $( "#shapeStyle input" ).change( function( ) {
+ // when an input of the shapeStyle section changes,
+ // immediately set the property of geomap's shapeStyle option
+ // this change will effect all appended shapes that don't have
+ // an explicit override for the style property that's changing
+
+ // first, we can grab a jQuery reference to the input that changed
+ var $this = $( this );
+
+ // next, we can create an object that represents this change
+ // this example doesn't, but you can set more than one property
+ // on geomap's shapeStyle option at a time
+ var shapeOption = { };
+ shapeOption[ $this.attr( "name" ) ] = $this.val();
+
+ map.geomap( "option", "shapeStyle", shapeOption );
+ } );
+
+ // jQuery UI for pretty reset buttons
+ $( "button" ).button( );
+
+ // maintin a copy of the original shapeStyle so we can reset it later
+ var originalShapeStyle = map.geomap( "option", "shapeStyle" );
+
+ $( "#shapeStyle button[type='reset']" ).click( function( ) {
+ // when the user resets the shapeStyle form,
+ // we want to also reset the shapeStyle option
+ // back to its original state
+ map.geomap( "option", "shapeStyle", originalShapeStyle );
+ } );
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>shapeStyle service test</title>
+ <meta name="description" content="geomap shapeStyle service test" />
+ <meta name="author" content="Ryan Westphal" />
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ label { white-space: nowrap; }
+
+ label span { display: inline-block; width: 7rem; }
+ input { width: 6rem; }
+
+ button { width: 16rem; }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/BXgV4/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>shapeStyle service</h1>
+ <p>This page is similar to the regular shapeStyle example but tests changing the style of a specific service instead of the map itself.</p>
+ <form id="shapeStyle">
+ <fieldset>
+ <legend>base geomap shapeStyle option</legend>
+ <div>
+ <label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
+ <label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
+ </div>
+ <div>
+ <label><span>fill</span> <input type="color" name="fill" value="" /></label>
+ <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
+ </div>
+ <div>
+ <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
+ <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
+ <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
+ </div>
+ <div>
+ <label><span>width</span> <input type="number" name="width" value="8" /></label>
+ <label><span>height</span> <input type="number" name="height" value="8" /></label>
+ <label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
+ </div>
+ </fieldset>
+ <button type="button">set shapeStyle</button>
+ <button type="reset">reset shapeStyle</button>
+ </form>
+ <form id="append">
+ <fieldset>
+ <legend>specific append style argument</legend>
+ <div>
+ <label><span>color</span> <input type="color" name="color" value="" /></label>
+ <label><span>opacity</span> <input type="text" name="opacity" value="" /></label>
+ </div>
+ <div>
+ <label><span>fill</span> <input type="color" name="fill" value="" /></label>
+ <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value="" /></label>
+ </div>
+ <div>
+ <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
+ <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="" /></label>
+ <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="" /></label>
+ </div>
+ <div>
+ <label><span>width</span> <input type="number" name="width" value="" /></label>
+ <label><span>height</span> <input type="number" name="height" value="" /></label>
+ <label><span>borderRadius</span> <input type="number" name="borderRadius" value="" /></label>
+ </div>
+ </fieldset>
+ <button type="reset">clear append style</button>
+ </form>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map
+ var map = $( "#map" ).geomap( {
+ center: [ -71.0595678, 42.3604823 ],
+ zoom: 8,
+ click: function ( e, geo ) {
+ // in the click handler append the shape to the map
+ // the final display style will be the base shapeStyle
+ // plus individual shape style property overrides via
+ // a style passed to the append method
+ var appendStyle = { };
+
+ $.each( $( "#append input" ).serializeArray( ), function( ) {
+ // run through each input in the append fieldset and
+ // build a style object if there are any style overrides
+ if ( this.value ) {
+ appendStyle[ this.name ] = this.value;
+ }
+ } );
+
+ // append the shape
+ // it will get the base shapeStyle (which can change later)
+ // plus any overrides from the append style (which cannot change)
+ map.find( ".osm" ).geomap( "append", geo, appendStyle );
+ }
+ } ),
+ service = map.find( ".osm" );
+
+ $( "#shapeStyle input" ).change( function( ) {
+ // when an input of the shapeStyle section changes,
+ // immediately set the property of geomap's shapeStyle option
+ // this change will effect all appended shapes that don't have
+ // an explicit override for the style property that's changing
+
+ // first, we can grab a jQuery reference to the input that changed
+ var $this = $( this );
+
+ // next, we can create an object that represents this change
+ // this example doesn't, but you can set more than one property
+ // on geomap's shapeStyle option at a time
+ var shapeOption = { };
+ shapeOption[ $this.attr( "name" ) ] = $this.val();
+
+ service.geomap( "option", "shapeStyle", shapeOption );
+ } );
+
+ // jQuery UI for pretty reset buttons
+ $( "button" ).button( );
+
+ // maintin a copy of the original shapeStyle so we can reset it later
+ var originalShapeStyle = service.geomap( "option", "shapeStyle" );
+
+ $( "#shapeStyle button[type='reset']" ).click( function( ) {
+ // when the user resets the shapeStyle form,
+ // we want to also reset the shapeStyle option
+ // back to its original state
+ service.geomap( "option", "shapeStyle", originalShapeStyle );
+ } );
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>shingled example</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of shingled services">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/WmqDx/embedded/" class="fiddleLink not-mobile"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>
+ shingled</h1>
+ <p class="not-mobile">This page tests geomap with shingled services, i.e., fully dynamic services that to not use a tilingScheme. Dynamic services can be set to any scale.</p>
+ <p class="not-mobile">If all shingled services are in the same projection, they can be layered and turned on and off at any time by updating and re-setting the services option of the geomap widget or by using the toggle convenience method.</p>
+ <p class="not-mobile">The toggle method is preferred because it is faster and you can use it on specific services, e.g., $("#massgis_interiorforest").geomap("toggle").</p>
+ <p class="not-mobile">These services are hosted by MassGIS.</p>
+ <div id="layers">
+ <input type="checkbox" id="interiorforest" name="layer" value="interiorforest" /><label for="interiorforest">Interior Forest</label>
+ <input type="checkbox" id="hydrography" name="layer" value="hydrography" /><label for="hydrography">Hydrography</label>
+ </div>
+
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // Set proj to null because we are working a different projection &
+ // entirely in map units
+ //
+ // Note: this is still valid in a4
+ // Though not required because we're working entirely in map units,
+ // i.e., jQuery Geo will not need to project anything,
+ // it makes sense because we are not working in the default projection of web mercator
+
+ $.geo.proj = null;
+
+ // some strings used in all services
+ // base URL for image request
+ var massGisHost = "http://giswebservices.massgis.state.ma.us/geoserver/wms";
+ // view template used to get the map image
+ // notice that we can put the view arguments right into the template
+ var imageTemplate = "&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&SRS=EPSG%3A26986&BBOX={{=bbox}}&WIDTH={{=width}}&HEIGHT={{=height}}";
+
+ // create a map with three services from MassGIS
+ // the service types are "shingled"
+ // they must all be in the same coordinate system to work together
+ // to keep jQuery Geo's API simple, it will only work in one coordinate system at a time and will not reproject images on the fly
+
+ var map = $("#map").geomap({
+ services: [
+ // this is a basemap and will always be shown
+ // it's the only one we need to put the attr on
+ // since all services come from the same source
+ {
+ id: "massgis_basemap",
+ type: "shingled",
+ src: massGisHost + "?LAYERS=massgis_basemap" + imageTemplate,
+ attr: "© 2011 Commonwealth of Massachusetts"
+ },
+
+ // this is a forest layer
+ // it has style.visibility set to "hidden"
+ {
+ id: "massgis_interiorforest",
+ type: "shingled",
+ src: massGisHost + "?LAYERS=massgis%3AGISDATA.INTERIORFOREST_POLY&STYLES=GISDATA.INTERIORFOREST_POLY%3A%3ADefault&TRANSPARENT=true" + imageTemplate,
+ style: {
+ visibility: "hidden"
+ }
+ },
+
+ // this is a water layer
+ // it has style.visibility set to "hidden"
+ {
+ id: "massgis_hydrography",
+ type: "shingled",
+ src: massGisHost + "?LAYERS=massgis%3AGISDATA.MAJPOND_POLY,massgis%3AGISDATA.MAJSTRM_ARC&TRANSPARENT=true" + imageTemplate,
+ style: {
+ visibility: "hidden"
+ }
+ }
+ ],
+
+ // you must set bboxMax for shingled services for the zoom property to mean anything
+ bboxMax: [31789.1658, 790194.4183, 337250.8970, 961865.1338],
+ // shingled services do not have a tilingScheme
+ tilingScheme: null,
+
+ center: [ 184670.21967, 890771.290247 ],
+ zoom: 11
+ });
+
+ // jQuery UI for pretty buttons
+ $("#layers").buttonset();
+
+ $("#layers input").click(function() {
+ // when a service object has the id property set,
+ // we can perform some geomap operations directly on the service
+
+ // in this case, the id of each extra layer is the same as the id for the checkbox but has a "massgis_" prefix
+
+ // we can toggle the layer based on the prefix and input id
+ $("#massgis_" + this.id).geomap("toggle", $(this).prop("checked"));
+ });
+
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+
+ <title>simplest</title>
+
+ <meta name="description" content="A very simple instantiation of the geomap widget">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ </head>
+<body>
+ <div>
+ <a href="../" class="docLink">< docs</a>
+ <h1>simplest</h1>
+ <p>A 256x256 pixel div...geomap called with no arguments.</p>
+ <div id="map" style="width: 256px; height: 256px;"></div>
+ </div>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ $("#map").geomap();
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>static mode example</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of static mode">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>static mode</h1>
+ <p>When the mode option is set to "static" a developer can create a map that the user can see but cannot change.</p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map with mode set to static
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 14,
+ mode: "static"
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>string src example</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of setting a service src to a string">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/RaLeN/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>string service src</h1>
+ <p>This example shows how you can set a service's src property to a jsRender template string.</p>
+ <p>The src property of the service object for this map is set to:</p>
+ <p>"http://tile.openstreetmap.org/{{=zoom}}/{{=tile.column}}/{{=tile.row}}.png"</p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ // create a map that replaces the default service with
+ // one using a string for the src property instead of a function
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8,
+ services: [ {
+ id: "osm-string-src",
+ type: "tiled",
+ src: "http://tile.openstreetmap.org/{{=zoom}}/{{=tile.column}}/{{=tile.row}}.png"
+ } ]
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>TEMPLATE example</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of TEMPLATE">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>TEMPLATE</h1>
+ <p></p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="../../js/jquery.geo.head.js"></script>
+ <script src="../../js/excanvas.js"></script>
+ <script src="../../js/jquery.ui.widget.js"></script>
+ <script src="../../js/jsrender.js"></script>
+ <script src="../../js/jquery.geo.core.js"></script>
+ <script src="../../js/jquery.geo.geographics.js"></script>
+ <script src="../../js/jquery.geo.geomap.js"></script>
+ <script src="../../js/jquery.geo.tiled.js"></script>
+ <script src="../../js/jquery.geo.shingled.js"></script>
+ <script src="../../js/jquery.mousewheel.js"></script>
+ <!--<script src="../jquery.geo-test.min.js"></script>-->
+ <script>
+ $( function ( ) {
+ // create a map
+ var map = $( "#map" ).geomap( {
+ center: [ -71.0595678, 42.3604823 ],
+ zoom: 8
+ } );
+ } );
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tiled services test</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ label
+ {
+ display: block;
+ margin: .25em;
+ }
+ label span
+ {
+ display: inline-block;
+ font-weight: bold;
+ width: 8em;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <a href="../" class="docLink">< docs</a>
+ <h1>tiled services test</h1>
+
+ <p>This page tests initializing geomap with different services that support the same tilingScheme.</p>
+
+ <p>
+ So long as all services support the current tiling scheme, they are interchangeabe without worrying about the tilingScheme property.</p>
+ <p>
+ Dynamic services can be layered on top of tiled services as they don't require a tilingScheme at all, however you have to make sure the map units match, e.g., the dynamic service accepts a geodetic (lon/lat) bounding box or you set $.proj to null and work entirely in a specific projection's map units.</p>
+ <h2>
+ service examples</h2>
+ <p>
+ Choose a services array and click <b>set via init</b> to refresh the page and re-initialize the map (including center & zoom properties) or <b>set via property</b> to change only the services property at runtime.</p>
+ <form action="tiledservices.html" method="get">
+ <fieldset>
+ <label>
+ <input type="radio" name="initService" value="defaultOsm" />
+ default OSM
+ </label>
+ <pre><code>[
+ {
+ id: "OSM",
+ type: "tiled",
+ src: function (view) {
+ return "http://tile.openstreetmap.org/"
+ + view.zoom + "/"
+ + view.tile.column + "/"
+ + view.tile.row
+ + ".png";
+ },
+ attr: "© OpenStreetMap & contributors, CC-BY-SA"
+ }
+]</code></pre>
+ <label>
+ <input type="radio" name="initService" value="mapquestOsm" />
+ MapQuest OSM
+ </label>
+ <pre><code>[
+ {
+ id: "OSM_MapQuest",
+ type: "tiled",
+ src: function (view) {
+ return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/"
+ + view.zoom + "/"
+ + view.tile.column + "/"
+ + view.tile.row
+ + ".png";
+ },
+ attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
+ }
+]</code></pre>
+ <label>
+ <input type="radio" name="initService" value="mapquestOrtho" />
+ MapQuest Open Ortho
+ </label>
+ <pre><code>[
+ {
+ id: "Ortho_MapQuest",
+ type: "tiled",
+ src: function (view) {
+ return "http://oatile" + ((view.index % 4) + 1) + ".mqcdn.com/naip/"
+ + view.zoom + "/"
+ + view.tile.column + "/"
+ + view.tile.row
+ + ".png";
+ },
+ attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
+ }
+]</code></pre>
+ <label>
+ <input type="radio" name="initService" value="mapquestAll" />
+ MapQuest Open Ortho + MapQuest OSM at 30% opacity
+ </label>
+ <pre><code>[
+ {
+ id: "Ortho_MapQuest",
+ type: "tiled",
+ src: function (view) {
+ return "http://oatile" + ((view.index % 4) + 1) + ".mqcdn.com/naip/"
+ + view.zoom + "/"
+ + view.tile.column + "/"
+ + view.tile.row
+ + ".png";
+ },
+ attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
+ },
+ {
+ id: "OSM_MapQuest",
+ type: "tiled",
+ src: function (view) {
+ return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/"
+ + view.zoom + "/"
+ + view.tile.column + "/"
+ + view.tile.row
+ + ".png";
+ },
+ style: { opacity: .3 }
+ }
+]</code></pre>
+ </fieldset>
+ <button type="submit">
+ set via init</button>
+ <button type="button">
+ set via property</button>
+ </form>
+ <div id="map" style="position: relative; width: 480px; height: 320px; background: #e88;">
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+
+ var selectionOptions = {
+ defaultOsm: {
+ services: [
+ {
+ id: "OSM",
+ type: "tiled",
+ src: function (view) {
+ return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "© OpenStreetMap & contributors, CC-BY-SA"
+ }
+ ],
+ center: [-71, 42],
+ zoom: 7
+ },
+
+ mapquestOsm: {
+ services: [
+ {
+ id: "OSM_MapQuest",
+ type: "tiled",
+ src: function (view) {
+ return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
+ }
+ ],
+ center: [-71, 42],
+ zoom: 7
+ },
+
+ mapquestOrtho: {
+ services: [
+ {
+ id: "Ortho_MapQuest",
+ type: "tiled",
+ src: function (view) {
+ return "http://oatile" + ((view.index % 4) + 1) + ".mqcdn.com/naip/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
+ }
+ ],
+ center: [-71, 42],
+ zoom: 7
+ },
+
+ mapquestAll: {
+ services: [
+ {
+ id: "Ortho_MapQuest",
+ type: "tiled",
+ src: function (view) {
+ return "http://oatile" + ((view.index % 4) + 1) + ".mqcdn.com/naip/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
+ },
+ {
+ id: "OSM_MapQuest",
+ type: "tiled",
+ src: function (view) {
+ return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ style: { opacity: .3 }
+ }
+ ],
+ center: [-71, 42],
+ zoom: 7
+ }
+ };
+
+
+ var
+ search = window.location.search,
+ searchParts = search.length && search[0] == "?" ? search.slice(1).split("&") : null,
+ initService = "defaultOsm",
+ serviceChanged = false;
+
+ if (searchParts) {
+ $.each(searchParts, function () {
+ var kvp = this.split("=");
+ switch (kvp[0]) {
+ case "initService":
+ initService = kvp[1];
+ serviceChanged = true;
+ break;
+ }
+ });
+ }
+
+ $("input[value='" + initService + "']").click();
+
+ $("button[type='button']").click(function () {
+ initService = $("input[name='initService']:checked").val();
+ $("#map").geomap("option", "services", selectionOptions[initService].services);
+ });
+
+ if (serviceChanged) {
+ window.scrollTo(0, $(document).height());
+ }
+
+ $("#map").geomap(selectionOptions[initService]);
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>tilingScheme test</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ label
+ {
+ display: block;
+ margin: .25em;
+ }
+ label span
+ {
+ display: inline-block;
+ font-weight: bold;
+ width: 8em;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <a href="../" class="docLink">< docs</a>
+ <h1>
+ tilingScheme test</h1>
+ <p>
+ This page tests initializing geomap with services requiring different tilingSchemes.</p>
+ <p>
+ Dynamic services are not yet implemented but will be able to be layered on top of tiled services as they don't require a tilingScheme at all.</p>
+ <p>
+ For this example, I have set $.geo.proj to null and am setting the center in real map units. This is because the second service, New Jersey, is not in web mercator and geomap does not provide a built-in conversion from lon/lat.</p>
+ <p>
+ The New Jersey service is a tiled service with an ArcGIS Server REST endpoint. The level stops of an ArcGIS Server tile cache are often not a power of two and therefore cannot be calculated. We list them all out by using the pixelSizes property of the tilingScheme instead of specifying basePixelSize and levels properties.</p>
+ <h2>
+ examples</h2>
+ <p>
+ Choose a service/tilingScheme combo and click <b>set</b> to refresh the page and re-initialize the map<!-- (including center & zoom properties) or <b>set via property</b> to change only the services property at runtime-->.</p>
+ <form action="tilingScheme.html" method="get">
+ <fieldset>
+ <label>
+ <input type="radio" name="initService" value="defaultOsm" />
+ default OSM (web mercator via hosted images)
+ </label>
+ <pre><code>services: [
+ {
+ id: "OSM",
+ type: "tiled",
+ src: function (view) {
+ return "http://tile.openstreetmap.org/"
+ + view.zoom + "/"
+ + view.tile.column + "/"
+ + view.tile.row
+ + ".png";
+ },
+ attr: "© OpenStreetMap & contributors, CC-BY-SA"
+ }
+],
+tilingScheme: {
+ tileWidth: 256,
+ tileHeight: 256,
+ levels: 18,
+ basePixelSize: 156543.03392799936,
+ origin: [-20037508.342787, 20037508.342787]
+}</code></pre>
+ <label>
+ <input type="radio" name="initService" value="newjersey" />
+ New Jersey (NAD83 / New Jersey (ft US); ESPG 3424 via ArcGIS Server REST API)
+ </label>
+ <pre><code>services: [
+ {
+ id: "NewJersey",
+ type: "tiled",
+ src: function (view) {
+ return "http://njgin.state.nj.us/ArcGIS/rest/services/basemap_v4/MapServer/tile/"
+ + view.zoom + "/"
+ + view.tile.row + "/"
+ + view.tile.column;
+ }
+ }
+],
+tilingScheme: {
+ tileWidth: 512,
+ tileHeight: 512,
+ pixelSizes: [
+ 3472.22222222222,
+ 2604.16666666667,
+ 2170.13888888889,
+ 1562.5,
+ 976.5625,
+ 494.791666666667,
+ 260.416666666667,
+ 130.208333333333,
+ 65.1041666666667,
+ 32.5520833333333,
+ 21.7013888888889,
+ 10.8506944444444,
+ 5.20833333333333,
+ 2.08333333333333,
+ 1.04166666666667
+ ],
+ origin: [-842000, 1440000]
+}</code></pre>
+ </fieldset>
+ <button type="submit">
+ set</button>
+ <!--<button type="button">
+ set via property</button>-->
+ </form>
+ <div id="map" style="position: relative; width: 480px; height: 320px; background: #e88;">
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+
+ var selectionOptions = {
+ defaultOsm: {
+ services: [
+ {
+ id: "OSM",
+ type: "tiled",
+ src: function (view) {
+ return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "© OpenStreetMap & contributors, CC-BY-SA"
+ }
+ ],
+ tilingScheme: {
+ tileWidth: 256,
+ tileHeight: 256,
+ levels: 18,
+ basePixelSize: 156543.03392799936,
+ origin: [-20037508.342787, 20037508.342787]
+ },
+ center: [-8299838.279318, 4853754.340195],
+ zoom: 7
+ },
+
+ newjersey: {
+ services: [
+ {
+ id: "NewJersey",
+ type: "tiled",
+ src: function (view) {
+ return "http://njgin.state.nj.us/ArcGIS/rest/services/basemap_v4/MapServer/tile/" + view.zoom + "/" + view.tile.row + "/" + view.tile.column;
+ }
+ }
+ ],
+ tilingScheme: {
+ tileWidth: 512,
+ tileHeight: 512,
+ pixelSizes: [
+ 3472.22222222222,
+ 2604.16666666667,
+ 2170.13888888889,
+ 1562.5,
+ 976.5625,
+ 494.791666666667,
+ 260.416666666667,
+ 130.208333333333,
+ 65.1041666666667,
+ 32.5520833333333,
+ 21.7013888888889,
+ 10.8506944444444,
+ 5.20833333333333,
+ 2.08333333333333,
+ 1.04166666666667
+ ],
+ origin: [-842000, 1440000]
+ },
+ center: [458240.213369, 458773.907696],
+ zoom: 1
+ }
+ };
+
+
+ var
+ search = window.location.search,
+ searchParts = search.length && search[0] == "?" ? search.slice(1).split("&") : null,
+ initService = "defaultOsm",
+ serviceChanged = false;
+
+ if (searchParts) {
+ $.each(searchParts, function () {
+ var kvp = this.split("=");
+ switch (kvp[0]) {
+ case "initService":
+ initService = kvp[1];
+ serviceChanged = true;
+ break;
+ }
+ });
+ }
+
+ $("input[value='" + initService + "']").click();
+
+// $("button[type='button']").click(function () {
+// initService = $("input[name='initService']:checked").val();
+// $("#map").geomap("option", "services", selectionOptions[initService].services);
+// });
+
+ if (serviceChanged) {
+ window.scrollTo(0, $(document).height());
+ }
+
+ $.geo.proj = null;
+ $("#map").geomap(selectionOptions[initService]);
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>GPS Tracking</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="A demo that continually tracks your current location">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <a href="../" class="docLink">< docs</a>
+ <h1>
+ GPS Tracking</h1>
+ <p>
+ This simple demo continually follows your location at zoom level 15 showing the Esri World Street Map tiles.</p>
+ <p>
+ <a href="http://roycesimpson.wordpress.com/2011/07/19/air-android-arcgis-server-flex-api-gps-activated-mapping-apps/" target="_blank">Inspired by Royce Simpson</a></p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var map = null;
+
+ function initMap(center) {
+ map = $("#map").geomap({
+ center: center || [-71.0597732, 42.3584308],
+ zoom: 15,
+ services: [
+ {
+ type: "tiled",
+ src: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{{=zoom}}/{{=tile.row}}/{{=tile.column}}",
+ attr: "© Esri"
+ }
+ ]
+ });
+ }
+
+ if (navigator.geolocation) {
+ navigator.geolocation.watchPosition( function (p) {
+ coord = [p.coords.longitude, p.coords.latitude];
+ if (!map) {
+ initMap(coord);
+ } else {
+ map.geomap("option", "center", coord);
+ }
+ map.geomap("empty");
+ map.geomap("append", { type: "Point", coordinates: coord });
+ }, function (error) {
+ if ( !map ) {
+ initMap();
+ }
+ }, {
+ enableHighAccuracy: true,
+ maximumAge: 10000
+ } );
+ } else {
+ initMap();
+ }
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Twheat</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="Search Twitter based on location and draw the results as a heat map">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <style type="text/css">
+ html
+ {
+ font:13px/1.231 Calibri,Arial,sans-serif; *font-size:small;
+ }
+
+ .links
+ {
+ float: right;
+ }
+
+ .docLink
+ {
+ background: url(img/$.geo-logo-small.png) left no-repeat;
+ color: #7f0000;
+ display: block;
+ font-size: 24px;
+ font-weight: bold;
+ padding: 0 24px;
+ text-decoration: none;
+ }
+
+ .info
+ {
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: -4px 4px #444;
+ opacity: .8;
+ padding: 8px;
+ position: absolute !important;
+ right: 16px;
+ top: 16px;
+ }
+
+ .not-mobile
+ {
+ display: none;
+ }
+
+@media only screen and (min-width: 800px)
+{
+ .not-mobile
+ {
+ display: block;
+ }
+}
+ h1
+ {
+ margin-right: 256px;
+ }
+
+ h2
+ {
+ font-style: italic;
+ margin-left: 1rem;
+ }
+
+ #map
+ {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+ #popup
+ {
+ background: #fff;
+ border: solid 1px #444;
+ border-radius: 8px;
+ display: none;
+ max-height: 80%;
+ padding: 4px;
+ position: absolute;
+ opacity: .6;
+ overflow: hidden;
+ width: 30%;
+ }
+ #popup p
+ {
+ border-top: 2px solid #444;
+ margin: 0;
+ padding: 0;
+ }
+ #popup p:first-child
+ {
+ border-top: none;
+ }
+ #content
+ {
+ background: #fefefe;
+ border: 2px solid #444;
+ border-radius: 8px;
+ padding: 4px;
+ position: relative;
+ display: inline-block;
+ }
+ #content label span
+ {
+ display: inline-block;
+ text-align: right;
+ width: 10rem;
+ }
+ #content button
+ {
+ width: 6rem;
+ }
+
+ #tweetButton
+ {
+ display: inline-block;
+ }
+
+ #appendedCount
+ {
+ float: right;
+ margin-top: 1rem;
+ }
+
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ <div id="popup">
+ </div>
+ </div>
+ <div id="content">
+ <form id="loc">
+ <label>
+ <span>Zoom to</span>
+ <input type="text" name="l" autofocus />
+ </label>
+ <button type="submit">Zoom</button>
+ </form>
+ <form id="twit">
+ <label>
+ <span>Search Twitter for</span>
+ <input type="text" name="q" />
+ </label>
+ <button type="submit">Search</button>
+ </form>
+ <div id="appendedCount">no tweets mapped yet :(</div>
+ <div id="tweetButton"></div>
+ </div>
+ <div class="info not-mobile">
+ <div class="links">
+ <a href="http://jquerygeo.com/" class="docLink">jQuery Geo ></a>
+ </div>
+ <h1>Twheat!</h1>
+ <h2>A Twitter Heat Map</h2>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var map = null,
+ checkedIds = [], //< list of tweet ids we've checked
+ appendedCount = 0, //< number of tweets we successfully appended
+ searchTerm = "", //< last search term
+ searching = false,
+ currentXhr = null, //< an ajax request reference if we need to cancel
+
+ twitterButtonHtml = '<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="ryanttb">Tweet</a><script src="//platform.twitter.com/widgets.js">\x3C/script>';
+
+ function initMap(center, zoom) {
+ // create a map using an optional center and zoom
+ map = $("#map").geomap({
+ center: center || [-71.0597732, 42.3584308],
+ zoom: zoom || 10,
+
+ // set the shapeStyle to a largish solid but translucent circle
+ // to give the tweets a heat map effect
+ shapeStyle: {
+ strokeOpacity: 0,
+ fillOpacity: .2,
+ width: "16px",
+ height: "16px",
+ borderRadius: "16px",
+ color: "#e44"
+ },
+
+ move: function (e, geo) {
+ // when the user moves, search for appended tweets
+ // and show a popup
+
+ // clear the popup
+ $("#popup").hide().html("");
+
+ if (searchTerm) {
+ // spatial query, geo has the cursor location as a map point
+ // this will find appended tweets within 3 pixels
+ var features = map.geomap("find", geo, 3),
+ popupHtml = "",
+ i = 0;
+
+ // for each tweet found, add some html to the popup
+ for (; i < features.length; i++) {
+ popupHtml += "<p>" + features[i].properties.tweet + "</p>";
+ }
+
+ if (popupHtml) {
+ // if any tweets found, show the popup
+ var $popup = $("#popup").append(popupHtml).css({
+ left: e.pageX,
+ top: e.pageY
+ });
+
+ var widthOver = $(window).width() - ( $popup.width() + e.pageX ),
+ heightOver = ($(window).height() - 32) - ( $popup.height() + e.pageY ),
+ left = e.pageX,
+ top = e.pageY;
+
+ if ( widthOver < 0 ) {
+ left += widthOver;
+ }
+
+ if ( heightOver < 0 ) {
+ top += heightOver;
+ }
+
+ $popup.css({
+ left: left,
+ top: top
+ }).show();
+ }
+ }
+ }
+ });
+
+ if ( searchTerm && !searching ) {
+ autoSearch();
+ }
+ }
+
+ $("#loc").submit(function (e) {
+ e.preventDefault();
+
+ // when the user clicks the location search button,
+ // send a request to nominatim for an OpenStreatMap data search
+ $.ajax({
+ url: "http://open.mapquestapi.com/nominatim/v1/search",
+ data: {
+ format: "json",
+ q: $("#loc input").val()
+ },
+ dataType: "jsonp",
+ jsonp: "json_callback",
+ success: function (results) {
+ if (results && results.length > 0) {
+ // if we get a result, relaunch the app to the new location with the old search
+ // this will allow users to tweet their map
+ window.location.search =
+ "q=" + encodeURIComponent($("#twit input").val()) +
+ "&l=" + encodeURIComponent($("#loc input").val()) +
+ "¢er=" + results[0].lon + "," + results[0].lat +
+ "&zoom=" + map.geomap("option", "zoom");
+ }
+ }
+ });
+ return false;
+ });
+
+ $("#twit").submit(function (e) {
+ e.preventDefault();
+
+ // when the user clicks the tweet search button,
+ // send a request to twitter
+
+ if (currentXhr) {
+ // if there's a search pending, cancel it
+ currentXhr.abort();
+ currentXhr = null;
+ }
+
+ $("#popup").hide().html("");
+
+ // save our search term
+ searchTerm = $("#twit input").val();
+
+ if ( searchTerm ) {
+ // if we have a new search term, relaunch the app to the same location with the new search
+ // this will allow users to tweet their map
+ window.location.search =
+ "q=" + encodeURIComponent(searchTerm) +
+ "&l=" + encodeURIComponent($("#loc input").val()) +
+ "¢er=" + map.geomap("option", "center").toString() +
+ "&zoom=" + map.geomap("option", "zoom");
+ }
+
+ return false;
+ });
+
+ // jQueryUI for pretty buttons
+ $( "button" ).button();
+
+ function search() {
+ // called by autoSearch, this function actually searches Twitter for geo-enabled tweets
+
+ if ( map !== null ) {
+ var center = map.geomap("option", "center"), //< the center of the map in lon, lat
+ // the geocode argument to Twitter search,
+ // it's an array with [ lat, lon, radius in km ]
+ // geomap's center is lon, lat so we have to switch
+ // for radius we'll use document width * pixelSize converted to km (from meters)
+ // Twitter search has a max of 2500km
+ geocode = [
+ center[1],
+ center[0],
+ Math.min(2500, map.geomap("option", "pixelSize") * $(document).width() / 2 / 1000) + "km"
+ ],
+ lastSearchTerm = searchTerm;
+
+ // actually send the request to Twitter
+ currentXhr = $.ajax({
+ url: "http://search.twitter.com/search.json",
+ data: {
+ rpp: 100,
+ q: lastSearchTerm,
+ geocode: geocode.join(",")
+ },
+ dataType: "jsonp",
+ complete: function () {
+ currentXhr = null;
+ },
+ success: function (tweets) {
+ if (searchTerm == lastSearchTerm && tweets.results) {
+ // if we have results, search each of them for the geo or location property
+ $.each(tweets.results, function () {
+ appendTweet( this );
+
+ });
+
+ $("#appendedCount").text(appendedCount + " tweets mapped!");
+ }
+ }
+ });
+ }
+ }
+
+ function appendTweet( tweet ) {
+ // attempt to append a tweet if we haven't already
+ if ( $.inArray( tweet.id_str, checkedIds ) >= 0 ) {
+ return;
+ }
+
+ // we don't want to attempt more than once for a given tweet
+ checkedIds.push( tweet.id_str );
+
+ // store some tweet html as a property on the feature
+ var feature = {
+ type: "Feature",
+ geometry: {
+ type: "Point",
+ coordinates: [ 0, 0 ]
+ },
+ properties: {
+ tweet: "<b>" + tweet.from_user + "</b>: " + tweet.text
+ }
+ };
+
+ if (tweet.geo) {
+ // if we have a geo property, flip the coordinates because Twitter search isn't
+ // in proper GeoJSON spec order
+ // Twitter uses [lat, lon] instead of [lon, lat]
+ feature.geometry.coordinates = [
+ tweet.geo.coordinates[1],
+ tweet.geo.coordinates[0]
+ ];
+
+ map.geomap("append", feature);
+ appendedCount++;
+ } else if ( tweet.location ) {
+ // otherwise, attempt to geocode the location property
+ $.ajax({
+ url: "http://open.mapquestapi.com/nominatim/v1/search",
+ data: {
+ format: "json",
+ q: tweet.location
+ },
+ dataType: "jsonp",
+ jsonp: "json_callback",
+ success: function (results) {
+ if (results && results.length > 0) {
+ // if found, grab the location's lon & lat
+ if (results[0].lon && results[0].lat) {
+ feature.geometry.coordinates = [
+ results[0].lon,
+ results[0].lat
+ ];
+
+ // finally append the tweet
+ map.geomap( "append", feature );
+ appendedCount++;
+ $("#appendedCount").text(appendedCount + " tweets mapped!");
+ }
+ }
+ }
+ });
+ }
+ }
+
+ function autoSearch() {
+ searching = true;
+ if ( searchTerm ) {
+ search();
+ setTimeout(autoSearch, 5000);
+ }
+ }
+
+ // for fun, we support sending center, zoom and a tweet query in the query string
+ var queryString = window.location.search.substring(1),
+ params = queryString.split("&"),
+ options = {};
+
+ $.each(params, function() {
+ var idx = this.indexOf("=");
+ if (idx > 0) {
+ options[this.substring(0, idx)] = this.substring(idx + 1);
+ }
+ });
+
+ if (options.center) {
+ if (options.zoom) {
+ initMap($.parseJSON("[" + options.center + "]"), parseInt(options.zoom));
+ } else {
+ initMap($.parseJSON("[" + options.center + "]"));
+ }
+ } else {
+ // if there's no center in the query string, try to use geolocation
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(function (p) {
+ initMap([p.coords.longitude, p.coords.latitude]);
+ }, function (error) {
+ initMap();
+ });
+ } else {
+ // if all else fails, use defaults
+ initMap();
+ }
+ }
+
+ var title = "Twheat !";
+
+ if (options.q) {
+ searchTerm = decodeURIComponent(options.q);
+ $("#twit input").val(searchTerm);
+ title += " " + searchTerm;
+
+ if ( map !== null && !searching ) {
+ autoSearch();
+ }
+ }
+
+ if (options.l) {
+ var loc = decodeURIComponent(options.l);
+ $("#loc input").val(loc);
+ title += " " + loc;
+ }
+
+ $("title").html(title);
+ $("#tweetButton").append(twitterButtonHtml);
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Twitter Heat Map</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="A demo that continually searches Twitter based on location and draws the results as a heat map">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+ #popup
+ {
+ background: #fff;
+ border: solid 1px #444;
+ border-radius: 8px;
+ display: none;
+ max-height: 50%;
+ padding: 4px;
+ position: absolute;
+ opacity: .6;
+ overflow: hidden;
+ width: 30%;
+ }
+ #popup p
+ {
+ border-top: 2px solid #444;
+ }
+ #popup p:first-child
+ {
+ border-top: none;
+ }
+ #content
+ {
+ background: #fefefe;
+ border: 2px solid #444;
+ border-radius: 8px;
+ padding: 4px;
+ position: relative;
+ width: 320px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ <div id="popup">
+ </div>
+ </div>
+ <div id="content">
+ <form id="loc">
+ <label>
+ Zoom to
+ <input type="text" name="l" autofocus />
+ </label>
+ <button type="submit">
+ Go</button>
+ </form>
+ <form id="twit">
+ <label>
+ Search Twitter for
+ <input type="text" name="q" />
+ </label>
+ <button type="submit">
+ Go</button>
+ </form>
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/kjSGL/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>
+ Twitter Heat Map</h1>
+ <p>
+ This demo continually searches Twitter based on location & query and draws the results as a heat map.</p>
+ <p>
+ You can hover over data to read the tweets.</p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var map = null,
+ searchTerm = "", //< last search term
+ currentXhr = null; //< an ajax request reference if we need to cancel
+
+ function initMap(center, zoom) {
+ // create a map using an optional center and zoom
+ map = $("#map").geomap({
+ center: center || [-71.0597732, 42.3584308],
+ zoom: zoom || 10,
+ mode: "showTweet",
+ cursors: { showTweet: "default" },
+ move: function (e, geo) {
+ // when the user moves, search for appended tweets
+ // and show a popup
+
+ // clear the popup
+ $("#popup").hide().html("");
+
+ if (searchTerm) {
+ // spatial query, geo has the cursor location as a map point
+ // this will find appended tweets within 3 pixels
+ var features = map.geomap("find", geo, 3),
+ popupHtml = "",
+ i = 0;
+
+ // for each tweet found, add some html to the popup
+ for (; i < features.length; i++) {
+ popupHtml += "<p>" + features[i].properties.tweet + "</p>";
+ }
+
+ if (popupHtml) {
+ // if any tweets found, show the popup
+ $("#popup").append(popupHtml).css({
+ left: e.pageX,
+ top: e.pageY
+ }).show();
+ }
+ }
+ }
+ });
+
+ // set the shape style to a largish solid but translucent circle
+ // to give the tweets a heat map effect
+ map.geomap("option", "shapeStyle", {
+ strokeOpacity: 0,
+ fillOpacity: .3,
+ width: "16px",
+ height: "16px",
+ borderRadius: "8px",
+ color: "#44e"
+ });
+ }
+
+ $("#loc").submit(function () {
+ // when the user clicks the location search button,
+ // send a request to nominatim for an OpenStreatMap data search
+ $.ajax({
+ url: "http://open.mapquestapi.com/nominatim/v1/search",
+ data: {
+ format: "json",
+ q: $("#loc input").val()
+ },
+ dataType: "jsonp",
+ jsonp: "json_callback",
+ success: function (results) {
+ if (results && results.length > 0) {
+ // if we a result, set the map's extent
+ // unfortunately, the nominatim search spec returns a bbox
+ // that is not properly GeoJSON formatted so we need to reorder
+ $("#popup").hide().html("");
+ var nbbox = results[0].boundingbox;
+ map.geomap("option", "bbox", [
+ nbbox[2], /* min longitude*/
+ nbbox[0], /* min latitude */
+ nbbox[3], /* max longitude */
+ nbbox[1] /* max latitude */
+ ]);
+ }
+ }
+ });
+ return false;
+ });
+
+ $("#twit").submit(function () {
+ // when the user clicks the tweet search button,
+ // send a request to twitter
+
+ if (currentXhr) {
+ // if there's a search pending, cancel it
+ currentXhr.abort();
+ currentXhr = null;
+ }
+
+ $("#popup").hide().html("");
+
+ // clear the map of previous search tweets
+ map.geomap("empty");
+
+ // save our search term
+ searchTerm = $("#twit input").val();
+
+ // autoSearch will keep searching every five seconds
+ autoSearch();
+ return false;
+ });
+
+ function search() {
+ // called by autoSearch, this function actually searches Twitter for geo-enabled tweets
+
+ if ( map !== null ) {
+ var center = map.geomap("option", "center"), //< the center of the map in lon, lat
+ // the geocode argument to Twitter search,
+ // it's an array with [ lat, lon, radius in km ]
+ // geomap's center is lon, lat so we have to switch
+ // for radius we'll use document width * pixelSize converted to km (from meters)
+ // Twitter search has a max of 2500km
+ geocode = [
+ center[1],
+ center[0],
+ Math.min(2500, map.geomap("option", "pixelSize") * $(document).width() / 2 / 1000) + "km"
+ ],
+ lastSearchTerm = searchTerm;
+
+ // actually send the request to Twitter
+ currentXhr = $.ajax({
+ url: "http://search.twitter.com/search.json",
+ data: {
+ rpp: 100,
+ q: lastSearchTerm,
+ geocode: geocode.join(",")
+ },
+ dataType: "jsonp",
+ complete: function () {
+ currentXhr = null;
+ },
+ success: function (tweets) {
+ if (searchTerm == lastSearchTerm && tweets.results) {
+ // if we have results, search each of them for the geo property
+ $.each(tweets.results, function () {
+ if (this.geo) {
+ // if there is one, flip the coordinates because Twitter search isn't
+ // in proper GeoJSON spec order
+ // Twitter uses [lat, lon] instead of [lon, lat]
+ this.geo.coordinates = [
+ this.geo.coordinates[1],
+ this.geo.coordinates[0]
+ ];
+
+ // search for a tweet at the exact location so we don't add duplicates
+ if (map.geomap("find", this.geo, .01).length == 0) {
+ // if we don't have a tweet there, append a feature
+ // store some tweet html as a property on the feature
+ var feature = {
+ type: "Feature",
+ geometry: this.geo,
+ properties: {
+ tweet: "<b>" + this.from_user + "</b>: " + this.text
+ }
+ };
+ map.geomap("append", feature);
+ }
+ }
+ });
+ }
+ }
+ });
+ }
+ }
+
+ function autoSearch() {
+ if (searchTerm) {
+ search();
+ setTimeout(autoSearch, 5000);
+ }
+ }
+
+ // for fun, we support sending center, zoom and a tweet query in the query string
+ var queryString = window.location.search.substring(1),
+ params = queryString.split("&"),
+ options = {};
+ $.each(params, function() {
+ var idx = this.indexOf("=");
+ if (idx > 0) {
+ options[this.substring(0, idx)] = this.substring(idx + 1);
+ }
+ });
+
+ if (options.center) {
+ if (options.zoom) {
+ initMap($.parseJSON("[" + options.center + "]"), parseInt(options.zoom));
+ } else {
+ initMap($.parseJSON("[" + options.center + "]"));
+ }
+ } else {
+ // if there's no center in the query string, try to use geolocation
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(function (p) {
+ initMap([p.coords.longitude, p.coords.latitude]);
+ }, function (error) {
+ initMap();
+ });
+ } else {
+ // if all else fails, use defaults
+ initMap();
+ }
+ }
+
+ if (options.q) {
+ searchTerm = decodeURIComponent(options.q);
+ $("#twit input").val(searchTerm);
+ autoSearch();
+ }
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>USA States</title>
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="A demo that pulls in USA state data from GeoCommons">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="css/style.css" />
+ <style type="text/css">
+ #map { position: fixed; left: 0; top: 0; right: 0; bottom: 0; }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/sh8uH/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <h1>USA States</h1>
+ <p class="not-mobile">This map reads USA state boundary data as a GeoJSON FeatureCollection and draws it on top of OpenStreetMap.</p>
+ <p>Click a state to change its color!</p>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
+ <script src="js/iecors.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 6,
+ mode: "drawPoint",
+ shape: function (e, geo) {
+ var state = map.geomap("find", geo, 0);
+ if (state.length > 0) {
+ map.geomap("remove", state[0]);
+
+ var color = Math.round(0xffffff * Math.random()).toString(16);
+
+ map.geomap("append", state[0], {
+ color: "#" + ( color.length == 5 ? "0" : "" ) + color
+ });
+ }
+ }
+ }),
+ states = null;
+
+ $.ajax({
+ url: "http://data.jquerygeo.com/usastates.json",
+ dataType: "json",
+ success: function (result) {
+ states = result;
+ map.geomap("append", states);
+ },
+ error: function (xhr) {
+ alert(xhr.statusText);
+ }
+ });
+ });
+ </script>
+</body>
+</html>
--- /dev/null
+/* HTML5 ✰ Boilerplate */
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+blockquote, q { quotes: none; }
+blockquote:before, blockquote:after,
+q:before, q:after { content: ""; content: none; }
+ins { background-color: #ff9; color: #000; text-decoration: none; }
+mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
+del { text-decoration: line-through; }
+abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
+table { border-collapse: collapse; border-spacing: 0; }
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+input, select { vertical-align: middle; }
+
+body { font:13px/1.231 sans-serif; *font-size:small; }
+select, input, textarea, button { font:99% sans-serif; }
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
+a:hover, a:active { outline: none; }
+ul, ol { margin-left: 2em; }
+ol { list-style-type: decimal; }
+nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
+small { font-size: 85%; }
+strong, th { font-weight: bold; }
+td { vertical-align: top; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
+textarea { overflow: auto; }
+.ie6 legend, .ie7 legend { margin-left: -7px; }
+input[type="radio"] { vertical-align: text-bottom; }
+input[type="checkbox"] { vertical-align: bottom; }
+.ie7 input[type="checkbox"] { vertical-align: baseline; }
+.ie6 input { vertical-align: text-bottom; }
+label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
+button, input, select, textarea { margin: 0; }
+input:valid, textarea:valid { }
+input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
+.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
+
+
+a:link { -webkit-tap-highlight-color: #FF5E99; }
+button { width: auto; overflow: visible; }
+.ie7 img { -ms-interpolation-mode: bicubic; }
+
+body, select, input, textarea { color: #444; }
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+a, a:active, a:visited { color: #607890; }
+a:hover { color: #036; }
+
+
+/**
+ * Primary styles
+ *
+ * Author: Ryan Westphal
+ */
+
+body { background: #ccc; }
+#index { bottom: 0; left: 32px; min-width: 800px; position: absolute; right: 32px; top: 0; }
+header
+{
+ background: #fdfdfd;
+ -moz-border-radius-bottomright: 16px;
+ -moz-border-radius-bottomleft: 16px;
+ -webkit-border-bottom-right-radius: 16px;
+ -webkit-border-bottom-left-radius: 16px;
+ border-bottom-right-radius: 16px;
+ border-bottom-left-radius: 16px;
+ padding: 16px 12px 16px 12px;
+}
+h1 { color: #1C56A3; display: inline; font-family: Georgia; font-size: 32px; }
+#basemapButtons { float: right; }
+span.selector { background: url(../img/BaseMapSelectorSprite-v1.1.png) no-repeat scroll; display: block; height: 49px; width: 50px; }
+span.Lite { background-position: -90px -276px; }
+span.Hybrid { background-position: -15px -276px; }
+span.Hillshade { background-position: -15px -213px; }
+span.Terrain { background-position: -91px -18px; }
+span.Vector { background-position: -15px -84px; }
+span.Imagery2009 { background-position: -15px -149px; }
+span.Topo { background-position: -15px -18px; }
+
+#pnlInfoAndSearch
+{
+ left: 12px;
+ position: relative;
+ top: 12px;
+}
+
+#lblCoords
+{
+ color: #1C56A3;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: bold;
+ width: 512px;
+}
+
+.ie7 #lblCoords
+{
+ float: left;
+}
+
+#pnlSearch
+{
+ display: inline-block;
+ font-size: 14px;
+ font-weight: bold;
+}
+
+.ie7 #pnlSearch
+{
+ float: left;
+}
+
+#pnlSearch label span
+{
+ color: #1C56A3;
+ margin-right: 4px;
+}
+
+#pnlSearch input
+{
+ width: 192px;
+}
+
+#pnlSearch button
+{
+ display: none;
+}
+
+#map
+{
+ background: #ccc;
+ -moz-border-radius-topleft: 16px;
+ -moz-border-radius-topright: 16px;
+ -webkit-border-top-left-radius: 16px;
+ -webkit-border-top-right-radius: 16px;
+ border-top-left-radius: 16px;
+ border-top-right-radius: 16px;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 128px;
+}
+
+#infoBar
+{
+ background: #ccc;
+ bottom: 0;
+ color: #1C56A3;
+ font-size: 14px;
+ font-weight: bold;
+ left: 0;
+ padding: 16px;
+ position: absolute;
+ right: 0;
+}
+
+.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.hidden { display: none; visibility: hidden; }
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+.invisible { visibility: hidden; }
+.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+
+@media all and (orientation:portrait) {
+
+}
+
+@media all and (orientation:landscape) {
+
+}
+
+@media screen and (max-device-width: 480px) {
+
+ /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
+}
+
+
+@media print {
+ * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
+ -ms-filter: none !important; }
+ a, a:visited { color: #444 !important; text-decoration: underline; }
+ a[href]:after { content: " (" attr(href) ")"; }
+ abbr[title]:after { content: " (" attr(title) ")"; }
+ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
+ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+ thead { display: table-header-group; }
+ tr, img { page-break-inside: avoid; }
+ @page { margin: 0.5cm; }
+ p, h2, h3 { orphans: 3; widows: 3; }
+ h2, h3{ page-break-after: avoid; }
+}
+
--- /dev/null
+<!doctype html>
+<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>Atlas Utah!</title>
+ <meta name="description" content="State of Utah interactive basemap viewer">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="shortcut icon" href="./favicon.ico">
+ <link rel="apple-touch-icon" href="./apple-touch-icon.png">
+
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/overcast/jquery-ui.css" />
+ <link rel="stylesheet" href="css/style.css?v=2">
+
+ <script src="js/libs/modernizr-1.7.min.js"></script>
+</head>
+
+<body>
+
+ <div id="index">
+ <header>
+ <form id="basemapButtons">
+ <input id="basemapLite" type="radio" name="basemap" value="UtahBaseMap-Lite" data-tile-size="256" checked="checked" /><label for="basemapLite" title="Lite"><span class="selector Lite">Lite</span></label>
+ <input id="basemapHybrid" type="radio" name="basemap" value="UtahBasemap-Hybrid" data-tile-size="256" /><label for="basemapHybrid" title="Hybrid"><span class="selector Hybrid"> </span></label>
+ <input id="basemapHillshade" type="radio" name="basemap" value="UtahBaseMap-Hillshade" data-tile-size="256" /><label for="basemapHillshade" title="Hillshade"><span class="selector Hillshade"> </span></label>
+ <input id="basemapTerrain" type="radio" name="basemap" value="UtahBaseMap-Terrain" data-tile-size="256" /><label for="basemapTerrain" title="Terrain"><span class="selector Terrain"> </span></label>
+ <input id="basemapVector" type="radio" name="basemap" value="UtahBaseMap-Vector" data-tile-size="256" /><label for="basemapVector" title="Streets"><span class="selector Vector"> </span></label>
+ <input id="basemapImagery2009" type="radio" name="basemap" value="UtahBaseMap-Imagery2009" data-tile-size="256" /><label for="basemapImagery2009" title="Imagery"><span class="selector Imagery2009"> </span></label>
+ <input id="basemapTopo" type="radio" name="basemap" value="UtahBaseMap-Topo" data-tile-size="256" /><label for="basemapTopo" title="Topo"><span class="selector Topo"> </span></label>
+ </form>
+ <h1>Atlas Utah!</h1>
+ <div>inspired by <a href="http://atlas.utah.gov/">http://atlas.utah.gov/</a></div>
+ </header>
+ <div id="main" role="main">
+ <div id="pnlInfoAndSearch">
+ <span id="lblCoords">UTM NAD83 coords: (<span>453709,4333922</span>)</span>
+ <div id="pnlSearch">
+ <form>
+ <label><span>Search</span> <input type="search" name="search" /></label>
+ <button type="submit">Search</button>
+ </form>
+ </div>
+ </div>
+ <div id="map"></div>
+ </div>
+ <footer>
+ <div id="infoBar" style="display: none;"></div>
+ </footer>
+ </div> <!-- eo #index -->
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="js/libs/jquery.watermark.min.js"></script>
+ <script src="js/script.js"></script>
+
+</body>
+</html>
--- /dev/null
+/*
+ Watermark v3.1.3 (March 22, 2011) plugin for jQuery
+ http://jquery-watermark.googlecode.com/
+ Copyright (c) 2009-2011 Todd Northrop
+ http://www.speednet.biz/
+ Dual licensed under the MIT or GPL Version 2 licenses.
+*/
+(function(a,h,y){var w="function",v="password",j="maxLength",n="type",b="",c=true,u="placeholder",i=false,t="watermark",g=t,f="watermarkClass",q="watermarkFocus",l="watermarkSubmit",o="watermarkMaxLength",e="watermarkPassword",d="watermarkText",k=/\r/g,s="input:data("+g+"),textarea:data("+g+")",m="input:text,input:password,input[type=search],input:not([type]),textarea",p=["Page_ClientValidate"],r=i,x=u in document.createElement("input");a.watermark=a.watermark||{version:"3.1.3",runOnce:c,options:{className:t,useNative:c,hideBeforeUnload:c},hide:function(b){a(b).filter(s).each(function(){a.watermark._hide(a(this))})},_hide:function(a,r){var p=a[0],q=(p.value||b).replace(k,b),l=a.data(d)||b,m=a.data(o)||0,i=a.data(f);if(l.length&&q==l){p.value=b;if(a.data(e))if((a.attr(n)||b)==="text"){var g=a.data(e)||[],c=a.parent()||[];if(g.length&&c.length){c[0].removeChild(a[0]);c[0].appendChild(g[0]);a=g}}if(m){a.attr(j,m);a.removeData(o)}if(r){a.attr("autocomplete","off");h.setTimeout(function(){a.select()},1)}}i&&a.removeClass(i)},show:function(b){a(b).filter(s).each(function(){a.watermark._show(a(this))})},_show:function(g){var p=g[0],u=(p.value||b).replace(k,b),h=g.data(d)||b,s=g.attr(n)||b,t=g.data(f);if((u.length==0||u==h)&&!g.data(q)){r=c;if(g.data(e))if(s===v){var m=g.data(e)||[],l=g.parent()||[];if(m.length&&l.length){l[0].removeChild(g[0]);l[0].appendChild(m[0]);g=m;g.attr(j,h.length);p=g[0]}}if(s==="text"||s==="search"){var i=g.attr(j)||0;if(i>0&&h.length>i){g.data(o,i);g.attr(j,h.length)}}t&&g.addClass(t);p.value=h}else a.watermark._hide(g)},hideAll:function(){if(r){a.watermark.hide(m);r=i}},showAll:function(){a.watermark.show(m)}};a.fn.watermark=a.fn.watermark||function(p,o){var t="string";if(!this.length)return this;var s=i,r=typeof p===t;if(r)p=p.replace(k,b);if(typeof o==="object"){s=typeof o.className===t;o=a.extend({},a.watermark.options,o)}else if(typeof o===t){s=c;o=a.extend({},a.watermark.options,{className:o})}else o=a.watermark.options;if(typeof o.useNative!==w)o.useNative=o.useNative?function(){return c}:function(){return i};return this.each(function(){var B="dragleave",A="dragenter",z=this,i=a(z);if(!i.is(m))return;if(i.data(g)){if(r||s){a.watermark._hide(i);r&&i.data(d,p);s&&i.data(f,o.className)}}else{if(x&&o.useNative.call(z,i)&&(i.attr("tagName")||b)!=="TEXTAREA"){r&&i.attr(u,p);return}i.data(d,r?p:b);i.data(f,o.className);i.data(g,1);if((i.attr(n)||b)===v){var C=i.wrap("<span>").parent(),t=a(C.html().replace(/type=["']?password["']?/i,'type="text"'));t.data(d,i.data(d));t.data(f,i.data(f));t.data(g,1);t.attr(j,p.length);t.focus(function(){a.watermark._hide(t,c)}).bind(A,function(){a.watermark._hide(t)}).bind("dragend",function(){h.setTimeout(function(){t.blur()},1)});i.blur(function(){a.watermark._show(i)}).bind(B,function(){a.watermark._show(i)});t.data(e,i);i.data(e,t)}else i.focus(function(){i.data(q,1);a.watermark._hide(i,c)}).blur(function(){i.data(q,0);a.watermark._show(i)}).bind(A,function(){a.watermark._hide(i)}).bind(B,function(){a.watermark._show(i)}).bind("dragend",function(){h.setTimeout(function(){a.watermark._show(i)},1)}).bind("drop",function(e){var c=i[0],a=e.originalEvent.dataTransfer.getData("Text");if((c.value||b).replace(k,b).replace(a,b)===i.data(d))c.value=a;i.focus()});if(z.form){var w=z.form,y=a(w);if(!y.data(l)){y.submit(a.watermark.hideAll);if(w.submit){y.data(l,w.submit);w.submit=function(c,b){return function(){var d=b.data(l);a.watermark.hideAll();if(d.apply)d.apply(c,Array.prototype.slice.call(arguments));else d()}}(w,y)}else{y.data(l,1);w.submit=function(b){return function(){a.watermark.hideAll();delete b.submit;b.submit()}}(w)}}}}a.watermark._show(i)})};if(a.watermark.runOnce){a.watermark.runOnce=i;a.extend(a.expr[":"],{data:function(c,d,b){return!!a.data(c,b[3])}});(function(c){a.fn.val=function(){var e=this;if(!e.length)return arguments.length?e:y;if(!arguments.length)if(e.data(g)){var f=(e[0].value||b).replace(k,b);return f===(e.data(d)||b)?b:f}else return c.apply(e,arguments);else{c.apply(e,arguments);a.watermark.show(e);return e}}})(a.fn.val);p.length&&a(function(){for(var b,c,d=p.length-1;d>=0;d--){b=p[d];c=h[b];if(typeof c===w)h[b]=function(b){return function(){a.watermark.hideAll();return b.apply(null,Array.prototype.slice.call(arguments))}}(c)}});a(h).bind("beforeunload",function(){a.watermark.options.hideBeforeUnload&&a.watermark.hideAll()})}})(jQuery,window);
\ No newline at end of file
--- /dev/null
+// Modernizr v1.7 www.modernizr.com
+window.Modernizr=function(a,b,c){function G(){e.input=function(a){for(var b=0,c=a.length;b<c;b++)t[a[b]]=!!(a[b]in l);return t}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)l.setAttribute("type",f=a[d]),e=l.type!=="text",e&&(l.value=m,l.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&l.style.WebkitAppearance!==c?(g.appendChild(l),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(l,null).WebkitAppearance!=="textfield"&&l.offsetHeight!==0,g.removeChild(l)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=l.checkValidity&&l.checkValidity()===!1:/^color$/.test(f)?(g.appendChild(l),g.offsetWidth,e=l.value!=m,g.removeChild(l)):e=l.value!=m)),s[a[d]]=!!e;return s}("search tel url email datetime date month week time datetime-local number range color".split(" "))}function F(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+p.join(c+" ")+c).split(" ");return!!E(d,b)}function E(a,b){for(var d in a)if(k[a[d]]!==c&&(!b||b(a[d],j)))return!0}function D(a,b){return(""+a).indexOf(b)!==-1}function C(a,b){return typeof a===b}function B(a,b){return A(o.join(a+";")+(b||""))}function A(a){k.cssText=a}var d="1.7",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l=b.createElement("input"),m=":)",n=Object.prototype.toString,o=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),p="Webkit Moz O ms Khtml".split(" "),q={svg:"http://www.w3.org/2000/svg"},r={},s={},t={},u=[],v,w=function(a){var c=b.createElement("style"),d=b.createElement("div"),e;c.textContent=a+"{#modernizr{height:3px}}",h.appendChild(c),d.id="modernizr",g.appendChild(d),e=d.offsetHeight===3,c.parentNode.removeChild(c),d.parentNode.removeChild(d);return!!e},x=function(){function d(d,e){e=e||b.createElement(a[d]||"div");var f=(d="on"+d)in e;f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=C(e[d],"function"),C(e[d],c)||(e[d]=c),e.removeAttribute(d))),e=null;return f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),y=({}).hasOwnProperty,z;C(y,c)||C(y.call,c)?z=function(a,b){return b in a&&C(a.constructor.prototype[b],c)}:z=function(a,b){return y.call(a,b)},r.flexbox=function(){function c(a,b,c,d){a.style.cssText=o.join(b+":"+c+";")+(d||"")}function a(a,b,c,d){b+=":",a.style.cssText=(b+o.join(c+";"+b)).slice(0,-b.length)+(d||"")}var d=b.createElement("div"),e=b.createElement("div");a(d,"display","box","width:42px;padding:0;"),c(e,"box-flex","1","width:10px;"),d.appendChild(e),g.appendChild(d);var f=e.offsetWidth===42;d.removeChild(e),g.removeChild(d);return f},r.canvas=function(){var a=b.createElement("canvas");return a.getContext&&a.getContext("2d")},r.canvastext=function(){return e.canvas&&C(b.createElement("canvas").getContext("2d").fillText,"function")},r.webgl=function(){return!!a.WebGLRenderingContext},r.touch=function(){return"ontouchstart"in a||w("@media ("+o.join("touch-enabled),(")+"modernizr)")},r.geolocation=function(){return!!navigator.geolocation},r.postmessage=function(){return!!a.postMessage},r.websqldatabase=function(){var b=!!a.openDatabase;return b},r.indexedDB=function(){for(var b=-1,c=p.length;++b<c;){var d=p[b].toLowerCase();if(a[d+"_indexedDB"]||a[d+"IndexedDB"])return!0}return!1},r.hashchange=function(){return x("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},r.history=function(){return !!(a.history&&history.pushState)},r.draganddrop=function(){return x("dragstart")&&x("drop")},r.websockets=function(){return"WebSocket"in a},r.rgba=function(){A("background-color:rgba(150,255,150,.5)");return D(k.backgroundColor,"rgba")},r.hsla=function(){A("background-color:hsla(120,40%,100%,.5)");return D(k.backgroundColor,"rgba")||D(k.backgroundColor,"hsla")},r.multiplebgs=function(){A("background:url(//:),url(//:),red url(//:)");return(new RegExp("(url\\s*\\(.*?){3}")).test(k.background)},r.backgroundsize=function(){return F("backgroundSize")},r.borderimage=function(){return F("borderImage")},r.borderradius=function(){return F("borderRadius","",function(a){return D(a,"orderRadius")})},r.boxshadow=function(){return F("boxShadow")},r.textshadow=function(){return b.createElement("div").style.textShadow===""},r.opacity=function(){B("opacity:.55");return/^0.55$/.test(k.opacity)},r.cssanimations=function(){return F("animationName")},r.csscolumns=function(){return F("columnCount")},r.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";A((a+o.join(b+a)+o.join(c+a)).slice(0,-a.length));return D(k.backgroundImage,"gradient")},r.cssreflections=function(){return F("boxReflect")},r.csstransforms=function(){return!!E(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},r.csstransforms3d=function(){var a=!!E(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=w("@media ("+o.join("transform-3d),(")+"modernizr)"));return a},r.csstransitions=function(){return F("transitionProperty")},r.fontface=function(){var a,c,d=h||g,e=b.createElement("style"),f=b.implementation||{hasFeature:function(){return!1}};e.type="text/css",d.insertBefore(e,d.firstChild),a=e.sheet||e.styleSheet;var i=f.hasFeature("CSS2","")?function(b){if(!a||!b)return!1;var c=!1;try{a.insertRule(b,0),c=/src/i.test(a.cssRules[0].cssText),a.deleteRule(a.cssRules.length-1)}catch(d){}return c}:function(b){if(!a||!b)return!1;a.cssText=b;return a.cssText.length!==0&&/src/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(b.split(" ")[0])===0};c=i('@font-face { font-family: "font"; src: url(data:,); }'),d.removeChild(e);return c},r.video=function(){var a=b.createElement("video"),c=!!a.canPlayType;if(c){c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"');var d='video/mp4; codecs="avc1.42E01E';c.h264=a.canPlayType(d+'"')||a.canPlayType(d+', mp4a.40.2"'),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return c},r.audio=function(){var a=b.createElement("audio"),c=!!a.canPlayType;c&&(c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"'),c.mp3=a.canPlayType("audio/mpeg;"),c.wav=a.canPlayType('audio/wav; codecs="1"'),c.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;"));return c},r.localstorage=function(){try{return!!localStorage.getItem}catch(a){return!1}},r.sessionstorage=function(){try{return!!sessionStorage.getItem}catch(a){return!1}},r.webWorkers=function(){return!!a.Worker},r.applicationcache=function(){return!!a.applicationCache},r.svg=function(){return!!b.createElementNS&&!!b.createElementNS(q.svg,"svg").createSVGRect},r.inlinesvg=function(){var a=b.createElement("div");a.innerHTML="<svg/>";return(a.firstChild&&a.firstChild.namespaceURI)==q.svg},r.smil=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"animate")))},r.svgclippaths=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"clipPath")))};for(var H in r)z(r,H)&&(v=H.toLowerCase(),e[v]=r[H](),u.push((e[v]?"":"no-")+v));e.input||G(),e.crosswindowmessaging=e.postmessage,e.historymanagement=e.history,e.addTest=function(a,b){a=a.toLowerCase();if(!e[a]){b=!!b(),g.className+=" "+(b?"":"no-")+a,e[a]=b;return e}},A(""),j=l=null,f&&a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function p(a,b){var c=-1,d=a.length,e,f=[];while(++c<d)e=a[c],(b=e.media||b)!="screen"&&f.push(p(e.imports,b),e.cssText);return f.join("")}function o(a){var b=-1;while(++b<e)a.createElement(d[b])}var c="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",d=c.split("|"),e=d.length,f=new RegExp("(^|\\s)("+c+")","gi"),g=new RegExp("<(/*)("+c+")","gi"),h=new RegExp("(^|[^\\n]*?\\s)("+c+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),i=b.createDocumentFragment(),j=b.documentElement,k=j.firstChild,l=b.createElement("body"),m=b.createElement("style"),n;o(b),o(i),k.insertBefore(m,k.firstChild),m.media="print",a.attachEvent("onbeforeprint",function(){var a=-1,c=p(b.styleSheets,"all"),k=[],o;n=n||b.body;while((o=h.exec(c))!=null)k.push((o[1]+o[2]+o[3]).replace(f,"$1.iepp_$2")+o[4]);m.styleSheet.cssText=k.join("\n");while(++a<e){var q=b.getElementsByTagName(d[a]),r=q.length,s=-1;while(++s<r)q[s].className.indexOf("iepp_")<0&&(q[s].className+=" iepp_"+d[a])}i.appendChild(n),j.appendChild(l),l.className=n.className,l.innerHTML=n.innerHTML.replace(g,"<$1font")}),a.attachEvent("onafterprint",function(){l.innerHTML="",j.removeChild(l),j.appendChild(n),m.styleSheet.cssText=""})}(a,b),e._enableHTML5=f,e._version=d,g.className=g.className.replace(/\bno-js\b/,"")+" js "+u.join(" ");return e}(this,this.document)
\ No newline at end of file
--- /dev/null
+/* Author: Ryan Westphal
+
+*/
+
+$(function () {
+ $("#basemapButtons").buttonset().find("label").click(function () {
+ var inputId = $(this).attr("for"),
+ $basemapInput = $("#" + inputId),
+ basemapValue = $basemapInput.val(),
+ tileSize = parseInt($basemapInput.data("tileSize")),
+ serviceOptions = makeService(basemapValue, tileSize);
+
+ $("#map").geomap("option", {
+ tilingScheme: serviceOptions.tilingScheme,
+ services: serviceOptions.services,
+ center: $("#map").geomap("option", "center")
+ });
+ });
+
+ var options = $.extend( { }, makeService("UtahBaseMap-Lite", 256), {
+ center: [453709, 4333922],
+ zoom: 2,
+ move: function (e, geo) {
+ $("#lblCoords>span").text("" + geo.coordinates);
+ }
+ } );
+
+ $("input[value='UtahBaseMap-Lite']").prop("checked", true);
+
+ $("#pnlSearch form").submit(function (e) {
+ e.preventDefault();
+
+ var address = $(this).find("input").val().replace(/,\s*UT/i, ""),
+ addressParts = address.split(",");
+
+ if (addressParts.length >= 2) {
+ address = address.replace(addressParts[addressParts.length - 1], "").replace(",", "");
+ $.ajax({
+ url: "http://mapserv.utah.gov/wsut/Geocode.svc/appgeo/street(" + $.trim(address) + ")zone(" + $.trim(addressParts[addressParts.length - 1]) + ")",
+ dataType: "jsonp",
+ success: function (result) {
+ $("#map").geomap("option", {
+ center: [result.UTM_X, result.UTM_Y],
+ zoom: 13
+ });
+ },
+ error: function (xhr) {
+ displayMessage(xhr.statusText);
+ }
+ });
+ } else {
+ displayMessage("Please enter both a street address and either a city or zip separated by a comma");
+ }
+
+ return false;
+ });
+
+ $("#pnlSearch input").watermark("street addres, city or zip");
+
+ $.geo.proj = null;
+ $("#map").geomap(options);
+
+ function displayMessage(msg) {
+ $("#infoBar").html(msg).fadeTo(0, 1.0).delay(5000).fadeOut("slow");
+ }
+
+ function makeService(name, tileSize) {
+ return {
+ services: [
+ {
+ type: "tiled",
+ src: "http://mapserv.utah.gov/ArcGIS/rest/services/" + name + "/MapServer/tile/{{=zoom}}/{{=tile.row}}/{{=tile.column}}",
+ attr: "© AGRC"
+ }
+ ],
+ tilingScheme: {
+ tileWidth: tileSize,
+ tileHeight: tileSize,
+ pixelSizes: [
+ 4891.96999883583,
+ 2445.98499994708,
+ 1222.99250010583,
+ 611.496250052917,
+ 305.748124894166,
+ 152.8740625,
+ 76.4370312632292,
+ 38.2185156316146,
+ 19.1092578131615,
+ 9.55462890525781,
+ 4.77731445262891,
+ 2.38865722657904,
+ 1.19432861315723,
+ 0.597164306578613,
+ 0.298582153289307
+ ],
+ origin: [-5120900, 9998100]
+ }
+ }
+ }
+});
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Voting districts example</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of voting districts">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ background: #fff;
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ #sliders
+ {
+ margin-top: 32px;
+ }
+ .slider
+ {
+ margin: 8px;
+ }
+
+ h1, #demographic { display: inline-block; }
+
+ #demographic img { margin-left: 8px; }
+
+ tr { display: inline-block; }
+
+ td:first-child { font-weight: bold }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <div class="links">
+ <a href="../" class="docLink">< docs</a>
+ <a href="http://jsfiddle.net/ryanttb/DkqDX/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
+ </div>
+ <div id="sliders">
+ <fieldset>
+ <legend>basemap transparency</legend>
+ <div id="sliderBasemap"></div>
+ </fieldset>
+ <fieldset>
+ <legend>demographic color</legend>
+ <div>
+ <label>red</label> <div id="sliderR" class="slider"></div>
+ <label>green</label> <div id="sliderG" class="slider"></div>
+ <label>blue</label> <div id="sliderB" class="slider"></div>
+ <label>transparency</label> <div id="sliderA" class="slider"></div>
+ </div>
+ </fieldset>
+ </div>
+ <h1>Voting Districts by %</h1>
+ <div id="demographic">
+ <input type="radio" id="optWhite" name="demographic" value="1" checked /><label for="optWhite">White</label>
+ <input type="radio" id="optBlack" name="demographic" value="2" /><label for="optBlack">Black</label>
+ <input type="radio" id="optAsian" name="demographic" value="3" /><label for="optAsian">Asian</label>
+ <input type="radio" id="optHispanic" name="demographic" value="4" /><label for="optHispanic">Hispanic</label>
+ <img alt="" src="img/ajax-loader.gif" title="Loading 2011 MA voting district data" />
+ </div>
+ <h2 data-text="Name"></h2>
+ <div data-html="Description">
+ <p>Once the data has loaded (which may take a while, even on broadband connections), you can dynamically change the demographic display color. You can also click a voting district to zoom in and see details.</p>
+ </div>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="js/iecors.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $( function () {
+ // create a map
+ var data, // GeoJSON data of voting districts
+ selection, // reference to current selection highlight
+ map = $( "#map" ).geomap( {
+ center: [ -71.0595678, 42.3604823 ],
+ zoom: 8,
+ click: function( e, geo ) {
+ // remove any previous selection graphic
+ if ( selection ) {
+ map.geomap( "remove", selection );
+ }
+
+ // find a voting district at the clicked location
+ var district = map.geomap( "find", geo, 1 );
+
+ if ( district.length > 0 ) {
+ // make a copy of the feature for selection highlight
+ selection = $.extend( true, { }, district[ 0 ] );
+
+ // display some info about the voting district
+ $( "[data-text='Name']" ).text( selection.properties.Name );
+ var $descTable = $( selection.properties.Description );
+ $descTable.find( "tr:eq(5)" ).remove( );
+ $descTable.find( "tr:eq(4) td:first-child" ).text( "Hispanic Origin" );
+ $( "[data-html='Description']" ).empty().append( $descTable ).show();
+
+ // set the map's bbox to the bbox of the feature
+ // but scale the bbox by 2x first to zoom out a little
+ map.geomap( "option", "bbox", $.geo.scaleBy( $.geo.bbox( selection ), 2 ) );
+
+ // append the selection highlight shape with a thick red border
+ map.geomap( "append", selection, { opacity: 1, fillOpacity: 0, color: "red", strokeWidth: "4px" } );
+ }
+ }
+ } );
+
+ // set an initial shapeStyle for the demographic display, all white, no border
+ map.geomap( "option", "shapeStyle", { strokeWidth: "0px", opacity: 1, color: "#fff" } );
+
+ // jQuery UI for pretty sliders
+
+ $( "#sliderBasemap" ).slider( {
+ value: 100,
+ slide: function ( e, ui ) {
+ // when the basemap slider slides,
+ // set the new opacity on the osm layer
+ // you can target specific layers with jQuery selector syntax
+ // the default service object has a css class of osm
+ $( "#map .osm" ).geomap( "opacity", ui.value / 100 );
+ }
+ } );
+
+ $( ".slider" ).slider( {
+ value: 100,
+ change: function( e, ui ) {
+ // when any demographic slider changes, get all the values
+ var red = $( "#sliderR" ).slider( "option", "value" ),
+ green = $( "#sliderG" ).slider( "option", "value" ),
+ blue = $( "#sliderB" ).slider( "option", "value" ),
+ alpha = $( "#sliderA" ).slider( "option", "value" );
+
+ // set the shapeStyle to the new color and global opacity
+ // since each individual shape only overrides fillOpacity,
+ // this single call will modify all shapes without having to re-append them
+ map.geomap( "option", "shapeStyle", {
+ color: "rgb( " + Math.floor( 255 * red / 100 ) + ", " + Math.floor( 255 * green / 100 ) + ", " + Math.floor( 255 * blue / 100 ) + " )",
+ opacity: alpha / 100
+ } , false );
+ }
+ } );
+
+ // jQuery UI for pretty radio buttons
+ $( "#demographic" ).buttonset( );
+
+ $( "#demographic input" ).click( function( ) {
+ // when a demographic radio button changes,
+ // generate new demographic shapes from the existing data
+ showData( data, $(this).val() );
+ } );
+
+ // download the voting district shapes and demographics
+ $.ajax( {
+ url: "http://data.jquerygeo.com/ma-voting-districts.geojson",
+ dataType: "json",
+ success: function( result ) {
+ // save a copy
+ data = result;
+ // generate new demographic shapes based on whichever input is checked
+ showData( data, $( "#demographic input:checked" ).val( ) );
+
+ $( "#demographic img" ).remove();
+ },
+ error: function( xhr ) {
+ // uh oh
+ alert( xhr.statusText );
+ }
+ } );
+
+ function showData( data, demoIndex ) {
+ // clear any existing demographic shapes
+ map.geomap( "empty" );
+
+ if ( data && data.type == "FeatureCollection" ) {
+ $.each( data.features, function( ) {
+ // for each voting district, extract the requested demographic row, demoIndex
+ // and compare it to the total population row, 0
+ var infoTable = $( this.properties.Description ),
+ pop = parseInt( infoTable.find( "tr:eq(0) td:eq(1)" ).text() ),
+ demo = parseInt( infoTable.find( "tr:eq(" + demoIndex + ") td:eq(1)" ).text() ),
+ pct = demo / pop;
+
+ // append a shape for the voting district,
+ // its fillOpacity is set to the demographic's relationship to total population
+ // for performance, don't refresh while adding these, that ending false
+ map.geomap( "append", this, { fillOpacity: 1 - pct } , false );
+ } );
+
+ if ( selection ) {
+ // if there's an existing selection highlight shape,
+ // append it with a thick red border
+ map.geomap( "append", selection, { opacity: 1, fillOpacity: 0, color: "red", strokeWidth: "4px" }, false );
+ }
+
+ // refresh the map after appending all the new shapes
+ map.geomap( "refresh" );
+ }
+ }
+ } );
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>WKT parse/stringify example</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of WKT parse/stringify">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <a href="../" class="docLink">< docs</a>
+ <h1>
+ WKT parse & stringify</h1>
+ <p>
+ This example uses $.geo.WKT.stringify to turn your drawn GeoJSON objects into WKT. The Parse button uses $.geo.WKT.parse to read valid WKT from the text box and add shapes to the map.</p>
+ <textarea id="wkt" rows="4" cols="32"></textarea>
+ <button id="parse" type="button">Parse</button>
+ <button id="clear" type="button">Reset</button>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8,
+ click: function (e, geo) {
+ $("#wkt").val($.geo._WKT.stringify(geo));
+ map.geomap("append", geo);
+ }
+ });
+
+ $.geo.proj = null;
+
+ $("#parse").button().click(function (e) {
+ var geo = $.geo._WKT.parse($("textarea").val());
+ if (geo) {
+ map.geomap("append", geo);
+ }
+ });
+
+ $("#clear").button().click(function (e) {
+ $("textarea").val("");
+ map.geomap("empty");
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>zoom example</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+ <meta name="description" content="An example of zoom">
+ <meta name="author" content="Ryan Westphal">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <style type="text/css">
+ #map
+ {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div id="map">
+ </div>
+ <div class="info">
+ <a href="../" class="docLink">< docs</a>
+ <h1>
+ zoom</h1>
+ <p>
+ This example uses the zoom method (as opposed to the zoom option) to change the zoom by relative amounts. Input a number of levels by which to change and click zoom. Negative values zoom out.</p>
+ <input type="number" id="zoom" value="1" /><button type="button">zoom</button>
+ </div>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script>
+ $(function () {
+ var map = $("#map").geomap({
+ center: [-71.0595678, 42.3604823],
+ zoom: 8
+ });
+
+ $("button").button().click(function () {
+ var value = parseInt($("input").val());
+ if (value) {
+ map.geomap("zoom", value);
+ }
+ });
+ });
+ </script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>area | $.geo</title>
+ <meta name="description" content="jQuery Geo area method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="area" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>area</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Number</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.area( Object shape ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ) )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var area = $.geo.area( {
+ type: "Polygon",
+ coordinates: [[
+ [-75, 39.7],
+ [-74.8, 39.3],
+ [-75.2, 39.3],
+ [-75, 39.7]
+ ]]
+} )</pre></code></td>
+ </tr>
+ </table>
+ <p>The area method calculates the area of a basic GeoJSON geometry object and returns it in non-geodetic units. The basic shapes are Point, LineString and Polygon. If you are using geomap with its default map service, the area is in square meters because the default projection is web mercator meters.</p>
+ <p>While you can pass any basic geometry, this function returns the area of Polygon objects and 0 for objects of other shape types.</p>
+ <p>If the argument is not a basic GeoJSON geometry object, this function returns undefined.</p>
+ <p>This function is similar to Geometry.getArea in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>bbox | $.geo</title>
+ <meta name="description" content="jQuery Geo bbox method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="bbox" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>bbox</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Array ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> )</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.bbox( Object shape ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ) )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var bbox = $.geo.bbox( {
+ type: "LineString", coordinates: [
+ [ -71, 40 ], [ -70.5, 41 ]
+ ]
+} )</code></pre></td>
+ </tr>
+ </table>
+ <p>The bbox method calculates the smallest box that will contain all the positions in the passed-in shape. The shape can be any GeoJSON geometry object from Point to GeometryCollection.</p>
+ <p>The GeoJSON spec allows for each geometry type to have a bbox property. The $.geo.bbox method will honor that property and assume it is accurate. It will return the value of that property before attempting to calculate the bbox itself. If you wish to force $.geo.bbox to calculate the bbox, you will have to manually delete the bbox property from the geometry object.</p>
+ <pre><code>var shape = {
+ type: "LineString", coordinates: [
+ [ -71, 40 ], [ -70.5, 41 ]
+ ],
+ bbox: [ -71, 40, -70.5, 41 ]
+};
+var bboxFromProperty = $.geo.bbox(shape);
+delete shape.bbox;
+var calculatedBbox = $.geo.bbox(shape);
+</code></pre>
+ <p>If the argument is not a basic GeoJSON geometry object, this function returns undefined.</p>
+ <!--<p>Due to the liberties taken by web mercator to display a round Earth on a single
+ flat plane, when working in geodetic (lon/lat) coordinates, the result of the
+ $.geo.bbox function may not be exactly what you expect based on your input
+ geodetic geometry.</p>-->
+ <p>This function is similar to Geometry.getEnvelope in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>center | $.geo</title>
+ <meta name="description" content="jQuery Geo center method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="center" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>center</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Array ( <a href="http://geojson.org/geojson-spec.html#positions" rel="external">GeoJSON position</a> ) </td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.center( Array bbox ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> ) )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var bboxCenter = $.geo.center( bbox )</code></pre></td>
+ </tr>
+ </table>
+ <p>The center method calculates the center of a bbox and returns it as a GeoJSON position.</p>
+ <p>It operates on bounding boxes and should not be confused with the centroid function, which operates on GeoJSON geometry objects.</p>
+ <p>This function is called Envelope.centre in JTS (I assume because JTS is built in British Columbia).</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>centroid | $.geo</title>
+ <meta name="description" content="jQuery Geo centroid method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="centroid" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>centroid</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Object ( <a href="http://geojson.org/geojson-spec.html#point" rel="external">GeoJSON Point</a> )</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.centroid( Object shape ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ) )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var centroid = $.geo.centroid( {
+ type: "Polygon",
+ coordinates: [[
+ [-75, 39.7],
+ [-74.8, 39.3],
+ [-75.2, 39.3],
+ [-75, 39.7]
+ ]]
+} )</code></pre></td>
+ </tr>
+ </table>
+ <p>The centroid method calculates the <b>center of mass</b> for the passed-in basic GeoJSON geometry object. The basic geometry types are Point, LineString and Polygon.</p>
+ <p>Technically, only Polygons can be considered to have mass. However, a centroid can be calculated for other geometry types. This method operates on LineStrings as if they were closed polygons and the centroid will likely not lie along the line. The centroid of a Point is a clone of the Point.</p>
+ <!--<p>With GeometryCollections containing multiple geometry types, the centroid of the geometries of highest dimension will be returned. In other words, one Polygon will override any number of LineStrings in the collection and the centroid will simply be the centroid of that Polygon.</p>-->
+ <p>If the argument is not a basic GeoJSON geometry object, this function returns undefined.</p>
+ <p>This function is similar to Geometry.getCentroid in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>contains | $.geo</title>
+ <meta name="description" content="jQuery Geo contains method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="contains" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>contains</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Boolean</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.contains( Object shape1 ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ), Object shape2 ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ) )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var contains = $.geo.contains(
+ {
+ type: "Polygon", coordinates: [[
+ [-71.06, 42.3425],
+ [-71.06, 42.3475],
+ [-71.04, 42.3475],
+ [-71.04, 42.3425],
+ [-71.06, 42.3425]
+ ]]
+ },
+ { type: "Point", "coordinates": [ -71, 40 ] }
+)</pre></code></td>
+ </tr>
+ </table>
+ <p>The contains method determines if the first basic GeoJSON geometry completely contains a second one. The basic shapes are Point, LineString and Polygon however Point and LineString geometries cannot contain other geometries so the only situation that has a possibility of returning true is when the first argument is a Polygon.</p>
+ <p>If either argument is not a basic GeoJSON geometry object, this function returns undefined.</p>
+ <p>This function is similar to Geometry.contains in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>distance | $.geo</title>
+ <meta name="description" content="jQuery Geo distance method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="distance" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>distance</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Number</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.distance( Object shape1 ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ), Object shape2 ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ) )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var distanceBetween = $.geo.distance(
+ { type: "Point", "coordinates": [ -71, 40 ] },
+ { type: "Point", "coordinates": [ -70.5, 41 ] }
+)</pre></code></td>
+ </tr>
+ </table>
+ <p>The distance method calculates the distance between two basic GeoJSON geometry objects and returns it in non-geodetic units. The basic shapes are Point, LineString and Polygon. If you are using geomap with its default map service, the distance is in meters because the default projection is web mercator meters.</p>
+ <p>If either argument is not a basic GeoJSON geometry object, this function returns undefined.</p>
+ <p>This function is similar to Geometry.distance in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>expandBy | $.geo</title>
+ <meta name="description" content="jQuery Geo expandBy method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="expandBy" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>expandBy</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Array ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> ) </td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.expandBy( Array bbox ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> ), Number dx, Number dy )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var largerBbox = $.geo.expandBy( bbox, 20, 20 )</pre></code></td>
+ </tr>
+ </table>
+ <p>The expandBy method creates a new bbox with the same center as the original but having a width and height that is modified by the dx and dy arguments respectively.</p>
+ <p>The dx and dy arguments are non-geodetic map units. If you are using geomap with its default map service, these are in meters because the default projection is web mercator meters. If, for example, you are working in a different projection such as NAD83 / New Jersey feet, this function will expand or contract the bbox by feet.</p>
+ <p>The dx and dy arguments can be positive, negative or zero and will modify the width or height of the bbox accordingly.</p>
+ <p>This function is similar to Envelope.expandBy in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>height | $.geo</title>
+ <meta name="description" content="jQuery Geo height method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="height" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>height</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Number</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.height( Array bbox ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var height = $.geo.height( [ -71.1, 42.3, -71.0, 42.4 ] )</pre></code></td>
+ </tr>
+ </table>
+ <p>The height method returns the true height of a bbox in non-geodetic map units. If you are using geomap with its default map service, the height is in meters because the default projection is web mercator meters.</p>
+ <p>This function is similar to Envelope.getHeight in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>geo namespace | $.geo</title>
+ <meta name="description" content="$.geo namespace">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="geo" data-role="page">
+ <div data-role="header" data-theme="d">
+ <h1>geo namespace</h1>
+ </div>
+
+ <div data-role="content">
+ <p>The $.geo namespace contains all geometry functions implemented in the plugin and an object having the plugin's four projection functions.</p>
+ <h2>projection</h2>
+ <p>The $.geo namespace has a property named proj which is a JavaScript object having four functions: fromGeodetic, fromGeodeticPos, toGeodetic, and toGeodeticPos. These four functions allow all $.geo static bbox/geometry functions, geomap widget properties, geomap widget events & geomap widget methods (collectively referred to as plugin functions from now on) to work in geodetic (lon, lat) coordinates.</p>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="proj.html">$.geo.proj</a></li>
+ </ul>
+ <h2>geometry operations</h2>
+ <p>Geometry isn't much fun if you can't do anything with it. These functions help you analyze and manipulate bounding boxes and GeoJSON geometry objects. You call them directly from the $.geo namespace:</p>
+ <pre><code>$.geo.distance( point1, point2 )</code></pre>
+
+ <p>Except for a few name changes and switching from an object-oriented API to a function-based one, jQuery Geo attempts to follow the names and behavior of the <a href="http://www.vividsolutions.com/jts/jtshome.htm">Java Topology Suite</a> (JTS), which is the de-facto standard for geometry library APIs. JTS itself is an implementation of the <a href="http://www.opengis.org/techno/specs.htm">OGC Simple Features</a> specification but has made design decisions that improve the API for developers. The most notable of which is having Envelope (called bbox in jQuery Geo and GeoJSON) be its own class type.</p>
+ <h3>bbox functions</h3>
+ <p>These functions operate on <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> array, i.e., a JavaScript array having four values:</p>
+ <ul>
+ <li>minimum x/longitude</li>
+ <li>minimum y/latitude</li>
+ <li>maximum x/longitude</li>
+ <li>maximum y/latitude</li>
+ </ul>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="center.html">center</a></li>
+ <li><a href="height.html">height</a></li>
+ <li><a href="width.html">width</a></li>
+ <li><a href="expandBy.html">expandBy</a></li>
+ <li><a href="scaleBy.html">scaleBy</a></li>
+ <li><a href="reaspect.html">reaspect</a></li>
+ <li><a href="recenter.html">recenter</a></li>
+ </ul>
+ <h3>geometry object functions</h3>
+ <p>These functions operate on <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON geometry objects</a>: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. They do not operate on Feature or FeatureCollection objects, you have to call these functions on the geometry properties of Feature objects.</p>
+ <p>The geometry functions allow you to analyze relationships between geometries such as their distance apart as well as obtain information about them such as bounding box and center point, called the centroid. This section will eventually expand to cover all of the important spatial operations available in the <a href="http://www.vividsolutions.com/jts/jtshome.htm">Java Topology Suite</a>.</p>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="bbox.html">bbox</a></li>
+ <li><a href="distance.html">distance</a></li>
+ <li><a href="length.html">length</a></li>
+ <li><a href="area.html">area</a></li>
+ <li><a href="contains.html">contains</a></li>
+ <li><a href="centroid.html">centroid</a></li>
+ <li><a href="pointAlong.html">pointAlong</a></li>
+ </ul>
+ </div>
+ </div> <!-- end of #container -->
+
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>length | $.geo</title>
+ <meta name="description" content="jQuery Geo length method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="length" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>length</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Number</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.length( Object shape ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ) )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var length = $.geo.length( {
+ type: "LineString",
+ coordinates: [[
+ [-75, 39.7],
+ [-74.8, 39.3],
+ [-75.2, 39.3]
+ ]]
+} )</pre></code></td>
+ </tr>
+ </table>
+ <p>The length method calculates the length of a basic GeoJSON geometry object and returns it in non-geodetic units. The basic shapes are Point, LineString and Polygon. If you are using geomap with its default map service, the length is in meters because the default projection is web mercator meters.</p>
+ <p>This function returns 0 for Point objects, the length of LineString objects and the perimeter of Polygon objects.</p>
+ <p>If the argument is not a basic GeoJSON geometry object, this function returns undefined.</p>
+ <p>This function is similar to Geometry.getLength in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>pointAlong | $.geo</title>
+ <meta name="description" content="jQuery Geo pointAlong method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="pointAlong" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>pointAlong</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Object ( <a href="http://geojson.org/geojson-spec.html#point" rel="external">GeoJSON Point</a> )</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.pointAlong( Object shape ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ), Number percentage )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var pointAlong = $.geo.pointAlong( {
+ type: "LineString",
+ coordinates: [[
+ [-75, 39.7],
+ [-74.8, 39.3],
+ [-75.2, 39.3]
+ ]]
+}, .5 )</code></pre></td>
+ </tr>
+ </table>
+ <p>The pointAlong method calculates a Point that lies a given fraction along the passed-in basic GeoJSON geometry object. The basic geometry types are Point, LineString and Polygon. A percentage of 0.0 returns the first Point; a percentage of 1.0 returns the last.</p>
+ <p>Technically, only LineStrings can be used properly in this calculation. However, pointAlong can be calculated for other geometry types. With Point objects, pointAlong will always return a copy of the original Point. For Polygon objects, pointAlong operates on the Polygon's perimeter (outer ring), i.e., myPolygon.coordinates[0]. For Polygons, percentage values of 0.0 and 1.0 will return the same Point.</p>
+ <p>If the argument is not a basic GeoJSON geometry object, this function returns undefined.</p>
+ <p>This function is similar to LineSegment.pointAlong in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>$.geo.proj object | jQuery Geo</title>
+ <meta name="description" content="$.geo.proj object">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="proj" data-role="page">
+ <div data-role="header" data-theme="d">
+ <h1>$.geo.proj object</h1>
+ </div>
+
+ <div data-role="content">
+ <p>The $.geo namespace has a property named proj which is a JavaScript object having four functions: fromGeodetic, fromGeodeticPos, toGeodetic, and toGeodeticPos. These four functions allow all $.geo static bbox/geometry functions, geomap widget properties, geomap widget events & geomap widget methods (collectively referred to as plugin functions from now on) to work in geodetic (lon, lat) coordinates.</p>
+ <p>Consider the following example:</p>
+ <ul>
+ <li>assume you are using the default map service</li>
+ <li>you call $.geo.distance passing two geodetic Point objects, i.e., the GeoJSON position in each point is an array where coordinates[0] is the longitude and coordinates[1] is latitude</li>
+ </ul>
+ <p>jQuery Geo will first convert the points to map units, a process called projection. jQuery Geo needs projected coordinates to properly calculate some relationships between shapes. After converting the points, $.geo.distance can then calculate the distance between them. This distance will be in meters because the default map service is web mercator meters.</p>
+ <p>In order to work directly in map units, you used to have to set $.geo.proj to null. While still valid, you no longer have to do this. You can leave $.geo.proj set to, e.g., web mercator meters and send either projected web mercator GeoJSON geometry objects or geodetic (lon, lat) objects to $.geo functions. The return value will depend on the type of arguments passed.</p>
+ <p>The geomap widget keeps track of how you set options. For example, if you set the map's center using geodetic coordinates, geodetic coordinates will then be returned when you ask for the center later. They will also be used when the geomap widget triggers events such as bboxchange or shape.</p>
+ <p>The default $.geo.proj object comes pre-built with functions that quickly convert between geodetic coordinates and web mercator meters so you can start using lon, lat right away with the default OpenStreetMap tiles. If your map service uses a different projection you can roll your own $.geo.proj object and continue to have the option to use geodetic coordinates. Read <a data-href="otherprojections" href="javascript:void(0);">Other projections</a> below for information on how to do that.</p>
+
+ <h3>Usage</h3>
+ <p>The two base functions, fromGeodetic and toGeodetic, can take and return: a single bounding box, a single GeoJSON position (Point.coordinates), an array of GeoJSON positions (MultiPoint.coordinates or LineString.coordinates), an array of arrays of positions (MultiLineString.coordinates or Polygon.coordinates) or an array of arrays of arrays of positions (MultiPolygon.coordinates). In other words, the $.geo.proj functions convert the coordinates property of any of the GeoJSON geometry types. For example, you can use the following to convert the position contained in a GeoJSON point object:</p>
+ <pre><code>var geodeticPoint = {
+ type: "Point",
+ coordinates: [ -73.5100, 41.3500 ]
+};
+
+var projectedCoords = $.geo.proj.fromGeodetic( geodeticPoint.coordinates );</code></pre>
+
+ <p>However, a LineString's coordinates property is an array of positions which you can also pass to the fromGeodetic method to get an array converted positions</p>
+
+ <pre><code>var projectedLineStringCoords = $.geo.proj.fromGeodetic( geodeticLineString.coordinates );</code></pre>
+
+ <p>To convert a set of projected GeoJSON positions back to web mercator, call toGeodetic.</p>
+
+ <pre><code>var geodeticLineString = {
+ type: "LineString",
+ coordinates: $.geo.proj.toGeodetic( projectedLineStringCoords )
+};</code></pre>
+
+ <h3 id="otherprojections">Other projections</h3>
+
+ <p>The $.geo.proj object allows you to use geodetic coordinates with whichever coordinate system or projection you want in any plugin function. If you pass a geodetic Polygon to $.geo.bbox, the returned bounding box will be in geodetic coordinates.</p>
+
+ <p>If you are working in a projection other than the default web mercator meters but still wish to use geodetic coordinates, you will have to update the $.geo.proj object so that it can convert between geodetic coordinates and ones in your projection.</p>
+
+ <p>However, if you don't need to work in longitude, latitude at all, you can ignore $.geo.proj and use projected coordinates throughout your project. You also still have the option to set $.geo.proj to null for completeness and remind yourself that you are limited to projected coordinates. If you are working in Massachusetts Mainland State Plane meters for example, you can pass a Polygon of that projection to any plugin function and you will get results in that projection. This includes all $.geo functions and geomap options & methods.</p>
+
+ <pre><code>$.geo.proj = null; <span class="comment">// not required but reminds us that jQuery Geo can't use lon, lat in this project</span>
+
+$('map').geomap( {
+ tilingScheme: null,
+ bboxMax: [ 31790, 790195, 337250, 961865 ],
+ bbox: [ 235644, 894775, 237775, 898523 ],
+ services: [ /* service object that supports MA State Plane */ ]
+} );</code></pre>
+
+ <p>jQuery Geo uses the four $.geo.proj functions throughout to convert between geodetic and projected coordinates. However, fromGeodeticPos and toGeodeticPos handle the conversion of individual GeoJSON positions and are used by fromGeodetic and toGeodetic. You can extend $.geo.proj with your own implementations of fromGeodeticPos and toGeodeticPos to change the internal projection used by all plugin functions and still use geodetic (lon, lat) coordinates as arguments and return values.</p>
+
+ <p><b>Please note</b> that you must extend $.geo.proj with new functionality instead of replacing it wholesale with a new object. You need to keep the original fromGeodetic and toGeodetic functions intact.</p>
+
+ <pre><code>$.extend($.geo.proj, {
+ fromGeodeticPos: function( coordinate ) {
+ var converted = [];
+ // convert the GeoJSON lon/lat position to MA State Plane
+ return converted;
+ },
+
+ toGeodeticPos: function( coordinate ) {
+ var converted = [];
+ // convert the GeoJSON MA State Plane position to lon/lat
+ return converted;
+ }
+});
+
+$('map').geomap( {
+ tilingScheme: null,
+
+ // notice that with a custom $.geo.proj object,
+ // these properties can be in geodetic coordinates
+ bboxMax: [ -73.5100, 41.3500, -69.8600, 42.8900 ],
+ bbox: [ -71.098709, 42.330322, -71.072617, 42.351608 ],
+
+ // the services option must still be in map coordinates
+ // see geomap's services property docs for more info
+ services: [ /* service object that supports MA State Plane */ ]
+} );</code></pre>
+ <p>Implementing custom from/to GeodeticPos functions is <i>currently</i> beyond the scope of this documentation but reading up on <a href="http://proj4js.org/" rel=external>Proj4js</a> is a good start.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>reaspect | $.geo</title>
+ <meta name="description" content="jQuery Geo reaspect method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="reaspect" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>reaspect</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Array ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> ) </td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.reaspect( Array bbox ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> ), Number ratio )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var widescreenBbox = $.geo.reaspect( bbox, 16 / 9 )</pre></code></td>
+ </tr>
+ </table>
+ <p>The reaspect method creates a new bbox with the same center as the original but forcing the ratio of width to height to a specific value.</p>
+ <p>If the original width is greater than the original height (think a landscape printout) then the width of the new bbox will be the same as the original but the new height will change to fit the ratio. If the original height is greater than the original width (think a portrait printout) then the new bbox height will remain unchanged but the width will to fit the ratio.</p>
+ <p>This function is not defined in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>recenter | $.geo</title>
+ <meta name="description" content="jQuery Geo recenter method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="recenter" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>recenter</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Array ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> ) </td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.recenter( Array bbox ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> ), Array (<a href="http://geojson.org/geojson-spec.html#positions" rel="external">GeoJSON position</a>) )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var moved = $.geo.recenter( bbox, [ -70, 42 ] )</pre></code></td>
+ </tr>
+ </table>
+
+ <p>The recenter method creates a new bbox with the same width and height as the original but moving the center to a new location.</p>
+
+ <p>This function is not defined in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>scaleBy | $.geo</title>
+ <meta name="description" content="jQuery Geo scaleBy method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="scaleBy" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>scaleBy</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Array ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> )</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.scaleBy( Array bbox ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> ), Number scale )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var twiceAsBig = $.geo.scaleBy( bbox, 2 )</code></pre></td>
+ </tr>
+ </table>
+ <p>The scaleBy method creates a new bbox with the same center as the original but having a width and height that are both multiplied by the scale argument.</p>
+ <p>The scale argument is a percentage increase or decrease. This means that supplying 2 will increase the size of the bbox by 200%, which if thinking in terms of a map's view, would zoom out. Supplying .5 will decrease the size of the bbox to half its original size.</p>
+ <p>The scale argument must be greater than zero.</p>
+ <p>This function is not defined in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>width | $.geo</title>
+ <meta name="description" content="jQuery Geo width method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="width" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>width</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Number</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$.geo.width( Array bbox ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var width = $.geo.width( [ -71.1, 42.3, -71.0, 42.4 ] )</pre></code></td>
+ </tr>
+ </table>
+ <p>The width method returns the true width of a bbox in non-geodetic units. If you are using geomap with its default map service, the width is in meters because the default projection is web mercator meters.</p>
+ <p>This function is similar to Envelope.getWidth in JTS.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>geographics | $.geo</title>
+ <meta name="description" content="jQuery Geo geographics widget">
+ <meta name="author" content="Ryan Westphal">
+</head>
+
+<body>
+
+ <div id="geographics" data-role="page" data-theme="b">
+ <div data-role="header">
+ <h1>geographics widget</h1>
+ </div>
+
+ <div data-role="content">
+ <p>The geographics widget in $.geo handles all shape drawing. The geomap widget uses it internally and you can use it outside of geomap to draw GeoJSON geometry that has already been converted to pixel coordinates onto any element.</p>
+ <pre><code>.geographics( options )</code></pre>
+ <h2>options</h2>
+ <p>The options argument is a JavaScript object that configures the graphics widget during the first instantiation on a div. No options are required. By default the graphics widget will draw all shapes with a dark red outline and mostly transparent red fill.</p>
+ <!--<ul data-role="listview" data-inset=true>
+ <li>
+ <a href="style.html">style</a>
+ </li>
+ </ul>-->
+ <h2>methods</h2>
+ <p>The geographics widget provides methods to draw various GeoJSON geometries on the canvas. Remember that the geometries must have either already been converted to pixel coordinates or created initially with a pixel coordinate system in mind.</p>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="drawArc.html">drawArc</a></li>
+ <li><a href="drawPoint.html">drawArc</a></li>
+ <li><a href="drawLineString.html">drawLineString</a></li>
+ <li><a href="drawPolygon.html">drawPolygon</a></li>
+ <li><a href="drawBbox.html">drawBbox</a></li>
+ <li><a href="clear.html">clear</a></li>
+ </ul>
+ </div>
+ </div> <!-- end of #container -->
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>append | geomap</title>
+ <meta name="description" content="geomap append method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="append" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>append</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>jQuery collection</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( "append" <!--[ , String serviceId ]--> , Object shape ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON object</a> ) [ , Object style ( geomap style ) ] [ , String label ] [ , Boolean refresh ] )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>$(<i>map or service selector</i>).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] } )
+
+$(<i>map or service selector</i>).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] }, false )
+
+$(<i>map or service selector</i>).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] }, { stroke: "#11117f", strokeWidth: "3px" } )
+
+$(<i>map or service selector</i>).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] }, { stroke: "#11117f", strokeWidth: "3px" }, false )
+
+$(<i>map or service selector</i>).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] }, "My Point" )
+
+$(<i>map or service selector</i>).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] }, "My Point", false )
+
+$(<i>map or service selector</i>).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] }, { color: "#00f" }, "Blue Point" )
+
+$(<i>map or service selector</i>).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] }, { color: "#00f" }, '<span style="color: #44f;">Blue Point</span>', false )</code></pre></td>
+ </tr>
+ </table>
+ <p>The append method adds a shape to the map. In this documentation the word shape means a GeoJSON geometry object, GeoJSON feature or GeoJSON feature collection. Each feature in a FeatureCollection's features property is added as a separate shape whereas the other collection geometry types, e.g., MultiPoint, are added as a single shape. This is important distinction when considering the find method in that find can potentially return only one shape of a FeatureCollection but will return all shapes in a MultiPoint (as a reference to the original MultiPoint object supplied to append) even if only one intersects the find position.</p>
+ <p>The geomap widget maintains a reference to your shape. It will not change the object in any way. You can use the same object in calls to remove in order to remove the shape from the map at any time.</p>
+ <p>The jQuery UI widget factory returns the original jQuery collection to maintain call chaining.</p>
+ <!--<p>geomap draws shapes ordered by geometry type and then by order of addition. It draws Polygon shapes first followed by LineString and finally Point shapes. </p>-->
+ <h2>styling</h2>
+
+ <p>The optional style argument modifies how geomap draws the specific geometry or feature you are adding. Properties supplied in this style will override ones of the same name in geomap's base shapeStyle. Properties not referenced are inheritied from the base style and can change with future changes to the shapeStyle option. Please see the shapeStyle method documentation for information about what properties are valid for this object.</p>
+
+ <h2>labeling</h2>
+
+ <p>The optional label argument will display a label near the shape. Labels are a powerful way to add text, pixel-based graphics, or other HTML and CSS effects to the map. The label string can be any text or HTML. For example, consider the following:</p>
+
+ <ul>
+ <li>
+ <span>you append a Point shape setting its style to have zero for width and height:</span>
+ <pre><code>{ width: "0px", height: "0px" }</code></pre>
+ </li>
+
+ <li>
+ <span>you also supply a label of nothing more than a div element with a class:</span>
+ <pre><code>'<div class="marker"></div>'</code></pre>
+ </li>
+
+ <li>
+ <span>in a CSS style sheet, you give the marker class a width, height, background image and negative relative position:</span>
+ <pre><code>.marker
+{
+ width: 8px;
+ height: 8px;
+ background: url(../img/marker.png);
+ position: relative;
+ left: -4px;
+ top: -4px;
+}</pre></code>
+ </li>
+ </ul>
+
+ <p>In the above example, marker.png will be centered on every point added with a similar label. The regular shape style will not show because the point style has no size.</p>
+
+ <p>For Point shapes, the top-left of the label is positioned at the Point's only coordinate. For LineString shapes, the label is usually positioned 50% along the shape but will be forced into view if its usual position is out of the map's current bbox. For Polygon shapes, the label is usually positioned at the centroid but will be forced into view if its usual position is out of the map's current bbox. All other non-basic shape types use the shape's centroid.</p>
+
+ <p>The geomap widget uses a div to position the labels. The div exists inside a container for the service. The div has the CSS class: geo-label. You can use this design to apply regular CSS style to all labels or all labels within a service. The following snippets show examples of using this, assuming the main map div has the id "map" and the default map service (which has the CSS class "osm") has not been changed.</p>
+
+ <h3>JavaScript</h3>
+
+ <pre><code><span class="comment">/* add a point to the map itself */</span>
+$( "#map" ).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] }, "map point" );
+
+<span class="comment">/* add a point to the default map service */</span>
+$( "#map .osm" ).geomap( "append", { type: "Point", coordinates: [ -70, 40 ] }, "service point" );
+</code></pre>
+
+ <h3>CSS</h3>
+
+ <pre><code><span class="comment">/* turn the color of all labels blue */</span>
+#map .geo-label { color: blue; }
+
+<span class="comment">/* make labels on the default basemap service bold */</span>
+#map .osm .geo-label { font-weight: bold; }</code></pre>
+
+ <p>One caveat is that, to keep performance high, jQuery Geo will not create the .geo-label container if you do not at least pass an empty string as the label. So, if you want to do something similar to the marker example above, but using the already provided .geo-label div, you will need to pass an empty string as the label.</p>
+
+ <p>Each .geo-label div is absolutely positioned to the correct location in the map view. Please keep that in mind because changing the position, left or top CSS properties on the .geo-label class may affect your labels drastically.</p>
+
+ <h2>delaying refresh</h2>
+
+ <p>The optional refresh argument determines if geomap refreshes the map graphics after this call to append. It defaults to true. If you pass false, geomap will add the shape internally but not immediately redraw the graphics. The changes will display if the user moves the map or you call geomap's refresh method.</p>
+ <h2>service-level shapes</h2>
+ <p>The geomap widget allows you to append a shape to a specific service. You do this by targeting a service inside a map instead of the map itself for your call to geomap's append method. For example, the default map service has the CSS class: osm. We can append a shape to that service specifically by using jQuery to target the service:</p>
+ <pre><code>$( "#map .osm" ).geomap( "append", shape );</code></pre>
+ <p>Some of the important advantages with this syntax are:</p>
+ <ul>
+ <li>you can show or hide shapes as you toggle a service because shapes attached to a service are only visible if the service is visible</li>
+ <li>service-level shapes draw in the order of their service in the <a href="services.html">services option</a> which gives you finer control over how they look</li>
+ <li>shapes on the map itself always draw above service-level shapes</li>
+ <li>you can style shapes differently depending on their service using a service-level <a href="shapeStyle.html">shapeStyle option</a></li>
+ </ul>
+ <h2>duplicate shapes</h2>
+ <p>You can add the same GeoJSON object to more than one service, which allows you to give the same object two different styles at the same time. To do this, call append twice with the same object. Once on one service (or the map itself) and a second time on a different service.</p>
+ <p>You can also do this at the same time by using the comma selector in one call to append:</p>
+ <pre><code><span class="comment">// set the basemap service's shapeStyle option to a white halo effect</span>
+$( "#map .osm" ).geomap( "option", "shapeStyle", { strokeWidth: "8px", color: "#dedede" } );
+
+<span class="comment">// append the shape to both the map widget and basemap service</span>
+$( "#map,#map .osm" ).geomap( "append", shape );</code></pre>
+ <h2>updating</h2>
+ <p>If you attempt to add a shape to the map or a service where it already exists, the shape will remain but you will update (or remove) the shape's style or label.</p>
+ <pre><code><span class="comment">// add the shape with a green color</span>
+$( "#map" ).append( shape, { color: "green" } );
+
+<span class="comment">// change the color to blue (shape is the same object as before in this case)</span>
+$( "#map" ).append( shape, { color: "blue" } );</code></pre>
+ <p>Changing the type of geometry, e.g., from Point to LineString, or coordinates of a shape you have appended is not recommended and geomap's behavior is currently undefined. If you wish to do either of these, you should first call remove on the original object and append on a new one.</p>
+ <!--<p>The following odd example will move the first coordinate of any clicked LineString 10 meters to the left. Notice it first removes the shape, then updates the first coordinate and finally appends the new shape.</p>
+ <pre><code>var map = $( "#map" ).geomap( {
+ click: function(e, geo) {
+ <span class="comment">// find any shapes within 4 pixels of the clicked point</span>
+ var shapes = map.geomap("find", geo, 4);
+ if (shapes.length > 0 && shapes[0].type == "LineString") {
+ map.geomap("remove", shapes[0]);
+ <span class="comment">// move the first point in the line 10 meters to the left</span>
+ <span class="comment">// you can edit the coordinates directly since you've removed the shape</span>
+
+ <span class="comment">// we use proj because we want to temporarily work in meters</span>
+ var firstCoord = $.geo.proj.fromGeodetic(shapes[0].coordinates[0]);
+ <span class="comment">// firstCoord[0] is the x axis</span>
+ firstCoord[0] -= 10;
+ <span class="comment">// we need to convert it back to geodetic (lon/lat)</span>
+ shapes[0].coordinates[0] = $.geo.proj.toGeodetic(firstCoord);
+ <span class="comment">// re-append the shape</span>
+ map.geomap( "append", shapes[0] );
+ }
+ }
+} );</code></pre>-->
+
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>axisLayout | geomap</title>
+ <meta name="description" content="geomap axisLayout option">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="axisLayout" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>axisLayout</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>String</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td>"map"</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><pre><code>$( <i>selector</i> ).geomap( { axisLayout: "map" } );</code></pre></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><pre><code>var axisLayout = $( <i>selector</i> ).geomap( "option", "axisLayout" );</code></pre></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><pre><code>$( <i>selector</i> ).geomap( "option", "axisLayout", "image" );</code></pre></td>
+ </tr>
+ </table>
+ <p>The axisLayout option determines direction of the coordinate system axes. It can be "map" or "image".</p>
+ <p>Maps have a traditional mathematical coordinate system where the ordinate-axis (y-axis) points up. However, graphical images flip the y-axis so that moving down increases in value, which is appropriate in graphic contexts. This is important when you are connecting to a service supplying non-georeferenced (computer graphic) images and want your map control to match that coordinate system layout.</p>
+ <p>You will rarely have to change this unless you are using an graphic image server such as LizardTech Image Server or you just want to use the geomap widget to draw pixel-oriented graphics.</p>
+ <p>This option will affect pixel-to-map coordinate calculation for all service types, i.e., tiled & shingled services.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>bbox | geomap</title>
+ <meta name="description" content="geomap bbox property">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="bbox" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>bbox</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Array ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> )</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td>[ -180, -85, 180, 85 ]</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( { bbox: [ -71, 40, -69, 44 ] } );</pre></code></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><code><pre>var bbox = $( <i>selector</i> ).geomap( "option", "bbox" );</pre></code></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( "option", "bbox", [ -122, 42, -118, 46 ] );</pre></code></td>
+ </tr>
+ </table>
+ <p>The bbox property calculates or modifies the bounding box of the map view the user currently sees. The geomap widget creates the bounding box based on the current center point, map zoom and size of the map view.</p>
+ <p>When you set a new bbox, the center and zoom properties are set as close as they can be based on the services you've added and the size of the map view.</p>
+ <p>For example, if you have a cached service with specific zoom levels, the map widget will have to pick a zoom level even though it may result in a bbox that is quite different from the one passed. When your services are fully dynamic, i.e., they allow arbitrary zoom levels, the final bbox will not likely match the one passed either due to ratio differences between the requested bbox and the map view's size. The map will attempt to pick a bounding box that best fits the one you request.</p>
+ <p>This property is a JavaScript array consisting of four values which can be thought of as: minx, miny, maxx and maxy of the current map view in map units and in that order. By default the values are in geodetic coordinates, e.g., bbox[0] is the longitude of the left of the current map view, bbox[1] is the latitude of the bottom, bbox[2] is the longitude of the right and bbox[3] is the latitude of the top. You can change the default when you initialize the widget by passing projected coordinates as the bbox option.</p>
+ <p>Setting a new bbox will refresh the map services.</p>
+ <p>If you attempt to initialize both center and bbox at the same time when creating a geomap widget, center will override bbox.</p>
+ <p>If you attempt to initialize both zoom and bbox at the same time when creating a geomap widget, bbox will be applied and zoom will modify the final bbox.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>bboxMax | geomap</title>
+ <meta name="description" content="geomap bboxMax property">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="bboxMax" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>bboxMax</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Array ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> )</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td>[ -180, -85, 180, 85 ]</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( { bboxMax: [ -71, 40, -69, 44 ] } );</pre></code></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><code><pre>var bboxMax = $( <i>selector</i> ).geomap( "option", "bboxMax" );</pre></code></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( "option", "bboxMax", [ -75.696, 38.804, -73.696, 41.287 ] );</pre></code></td>
+ </tr>
+ </table>
+ <p>The bboxMax property calculates or modifies a bounding box that surrounds all of the data you wish to show in the map. Users can pan the map once they reach bboxMax but cannot zoom out further.</p>
+ <p>This property is a JavaScript array consisting of four values which can be thought of as: minx, miny, maxx and maxy of the maximum map view you wish to allow in map units and in that order.</p>
+ <p>Setting a new bboxMax will not refresh the map services.</p>
+ <p>A bboxMax property must be set properly for shinged (dynamic) services if you wish to use the zoom property since the value of the map's zoom is based on a ratio between the current bbox and bboxMax. If you have a fully dynamic map by setting tilingScheme to null, you should explicitly set bboxMax.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>center | geomap</title>
+ <meta name="description" content="geomap center property">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="center" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>center</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Array (<a href="http://geojson.org/geojson-spec.html#positions" rel="external">GeoJSON position</a>)</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td>[ 0, 0 ]</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( { center: [ 0, 0 ] } );</pre></code></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><code><pre>var center = $( <i>selector</i> ).geomap( "option", "center" );</pre></code></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( "option", "center", [ -71.037598, 42.363281 ] );</pre></code></td>
+ </tr>
+ </table>
+ <p>The center property gets or sets the center point of the map. By default the value is in geodetic coordinates, e.g., longitude, latitude. You can change the default when you initialize the widget by passing projected coordinates as the center option.</p>
+ <p>Setting a new center point will refresh the map services.</p>
+ <p>If you attempt to initialize both center and bbox at the same time when creating a geomap widget, center will override bbox.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>cursors | geomap</title>
+ <meta name="description" content="geomap cursors property">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="cursors" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>cursors</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Object (map of geomap mode to CSS cursor)</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td><pre><code>{
+ static: "default",
+ pan: "move",
+ zoom: "crosshair",
+ drawPoint: "crosshair",
+ drawLineString: "crosshair",
+ drawPolygon: "crosshair",
+ measureLength: "crosshair",
+ measureArea: "crosshair"
+}</code></pre></td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( { cursors: { pan: "move" } } );</pre></code></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><code><pre>var cursors = $( <i>selector</i> ).geomap( "option", "cursors" );</pre></code></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( "option", "cursors", { pan: "pointer" } );</pre></code></td>
+ </tr>
+ </table>
+ <p>The cursors property controls which cursors appear when users move the mouse over the geomap div in any given mode. <!--For example, if the developer switches the map widget to zoom mode the cursor will turn into a crosshair by default.--></p>
+ <p>The developer may change each geomap mode's cursor separately during both initialization of the widget or any time after.</p>
+ <p>Sometimes the geomap widget will override the selected mode's cursor, e.g., when a user starts panning in other modes the cursor will switch to the pan mode cursor temporarily.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>destroy | geomap</title>
+ <meta name="description" content="geomap destroy method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="destroy" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>destroy</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>undefined</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( "destroy" )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>$("#map").geomap( "destroy" )</code></pre></td>
+ </tr>
+ </table>
+ <p>
+ Every good widget will clean up after itself. Call destroy to turn your interactive map back to a boring old div. Any content inside the div before you initialized geomap will remain intact.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>drawStyle | geomap</title>
+ <meta name="description" content="geomap drawStyle option">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="drawStyle" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>drawStyle</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Object ( geomap style )</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td><pre><code>{
+ borderRadius: "8px",
+ color: "#7f0000",
+ fillOpacity: .2,
+ height: "8px",
+ opacity: 1,
+ strokeOpacity: 1,
+ strokeWidth: "2px",
+ visibility: "visible",
+ width: "8px"
+}</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><pre><code>$( <i>map selector</i> ).geomap( { drawStyle: { color: "green" } } );</code></pre></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><pre><code>var drawStyle = $( <i>map selector</i> ).geomap( "option", "drawStyle" );</code></pre></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><pre><code>$( <i>map selector</i> ).geomap( "option", "drawStyle", { strokeWidth: "4px" } );</code></pre></td>
+ </tr>
+ </table>
+ <p>The drawStyle option retrieves or updates the style of incomplete lines and polygons <b>as they are being drawn</b>. This differs from the shapeStyle option which updates the style of shapes that you've appended to the map.</p>
+ <p>This option affects both the draw modes (drawPoint, drawLineString, and drawPolygon) and the measure modes (measureLength, and measureArea).</p>
+ <p>This option changes specific properties of the internal style object. If you init or set an incomplete style object, only the style properties you reference are updated.</p>
+ <p>Please see the style section at the bottom of the <a href="#" onclick="javascript:window.history.back();">geomap widget</a> page for more information about the style object.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>empty | geomap</title>
+ <meta name="description" content="geomap empty method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="empty" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>empty</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>jQuery collection</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( "empty" [ , Boolean refresh ] )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>$( <i>map or service selector</i> ).geomap( "empty" )
+$( <i>map or service selector</i> ).geomap( "empty", false )</code></pre></td>
+ </tr>
+ </table>
+ <p>The empty method removes all shapes previously added with the append method.</p>
+ <p>The jQuery UI widget factory returns the original jQuery collection to maintain call chaining.</p>
+ <h2>delaying refresh</h2>
+ <p>The optional refresh argument determines if geomap refreshes the map graphics after this call to empty. It defaults to true. If you pass false, geomap will remove all shapes internally but not immediately redraw the graphics. The changes will display if the user moves the map or you call geomap's refresh method.</p>
+ <h2>service-level shapes</h2>
+ <p>Similar to how you can remove shapes from specific services, you can empty specific services of all shapes as well.</p>
+ <p>You do this by targeting a service inside a map instead of the map itself for your call to geomap's empty method. For example, the default map service has the CSS class: osm. We can remove all shapes from that service specifically by using jQuery to target the service:</p>
+ <pre><code>$( "#map .osm" ).geomap( "empty" );</code></pre>
+ <p>Calling empty on the map widget will not remove shapes that have been appended to services.</p>
+ <p>To remove all shapes from the map and all services, you can use the comma selector and the built-in geo-service CSS class:</p>
+ <pre><code><span class="comment">// empty the map widget and any services</span>
+$( "#map,#map .geo-service" ).geomap( "empty" );</code></pre>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>find | geomap</title>
+ <meta name="description" content="geomap find method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="find" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>find</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Array<Object> ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON objects</a> )</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( "find", Object point (<a href="http://geojson.org/geojson-spec.html#point" rel="external">GeoJSON Point</a>), Number pixelTolerance )</td>
+ </tr>
+ <tr>
+ <td></td>
+ <td>.geomap( "find", <i>shape selector</i> )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var existingShape = $( <i>map or service selector</i> ).geomap( "find", { type: "Point", coordinates: [ -71.098709, 42.330322 ] }, 8 )
+
+var allShapes = $( <i>map or service selector</i> ).geomap( "find", "*" )</code></pre></td>
+ </tr>
+ </table>
+ <p>The find method allows you to search for shapes appended to the map and/or services. There are two distinct ways to call this method.</p>
+ <h2>geometry search</h2>
+
+ <p>The find method can take a single GeoJSON map point and return all shapes within a pixel radius of the given location that have been added with append. If there are no shapes at the location, this method returns an empty array.</p>
+
+ <p>The pixelTolerance argument is always in pixels. This allows for pixel-based searches regardless of the map's current zoom. A high-zoom search is finer than a low-zoom one because at lower zoom levels, i.e., the map is zoomed out more, the Earth-size of a pixel is greater causing this search to reach out farther from the supplied position.</p>
+
+ <p>Duplicate shape references <b>are</b> included in the return value. For example, if you have appended the same GeoJSON object to both the map and a specific service, and then call find at that location, the returned array will contain two, identical shape references.</p>
+
+ <h2>selector search</h2>
+
+ <p>The find method can also take a single string. The string is in CSS selector syntax but currently only one selector is supported: *. Use the * selector to return an array of all shapes that have been appended to the map or service. If there are no shapes on the map or service, this method returns an empty array. Searching for all shapes at the map level will return all shapes that have been appended to the map or any service.</p>
+
+ <p>Duplicate shape references <b>are</b> included in the return value. For example, if you have appended the same GeoJSON object to both the map and a specific service, and then call find( "*" ) at the map level, the returned array will contain two, identical shape references.</p>
+
+ <p>The shape selector cannot include service ids or classes. To search for shapes within a specific service, see below.</p>
+
+ <h2>service-level shapes</h2>
+
+ <p>Similar to how you can append shapes to specific services, you can find shapes in specific services as well.</p>
+
+ <p>You do this by targeting a service inside a map instead of the map itself for your call to geomap's find method. For example, the default map service has the CSS class: osm. We can find a shape from that service specifically by using jQuery to target the service:</p>
+
+ <pre><code>var osmShapes = $( "#map .osm" ).geomap( "find", [ -71, 42 ], 8 );</code></pre>
+
+ <p>However, unlike the other three shape methods, shapes appended to a specific service <b>will be</b> returned by calling find on the map itself. In this way, calling find on the map is a deep search for shapes on all services. For example, after this sequence the shapes variable will contain the shape even though it was appended to a service specifically:<p>
+
+ <pre><code>var point = {
+ type: "Point",
+ coordinates: [ -71, 42 ]
+ };
+
+<span class="comment">// add the shape to the osm service</span>
+$( "#map .osm" ).geomap( "append", point );
+
+<span class="comment">// use the original point to search for shapes on the map widget</span>
+var shapes = $( "#map" ).geomap( "find", point, 3 );</code></pre>
+
+ <p>Another difference between the find method and the append, remove, and empty methods, is that the find method cannot currently be used on multiple targets simultaneously. For example, the return value of the following is undefined:</p>
+
+ <pre><code><span class="comment">// attempt to search the osm service and a second service at the same time</span>
+var shapes = $( "#map .osm,#map .massgis" ).geomap( "find", point, 8 );</code></pre>
+
+ <p>To find shapes in two specific services without searching all services you should use two find calls:</p>
+
+ <pre><code><span class="comment">// find shapes on the default service and a second service</span>
+var osmShapes = $( "#map .osm" ).geomap( "find", point, 8 ),
+ massgisShapes = $( "#map .massgis" ).geomap( "find", point, 8 );</code></pre>
+
+ <p>The selector-based version also follows this requirement. You cannot target more than one element with the initial selector and you cannot use the shape selector to search services. A multi-service selector-based search would be the same as above but with "*" instead of: point, 8.</p>
+
+ <pre><code><span class="comment">// the following are invalid and their return value is undefined</span>
+var multiTarget = $( "#map .massgis,#map .osm" ).geomap( "find", "*" );
+var shapeSubSelector = $( "#map" ).geomap( "find", ".massgis *" );
+
+<span class="comment">// proper way to get all shapes from multiple services</span>
+var osmShapes = $( "#map .osm" ).geomap( "find", "*" ),
+ massgisShapes = $( "#map .massgis" ).geomap( "find", "*" );</code></pre>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>bboxchange | geomap</title>
+ <meta name="description" content="geomap bboxchange event">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="bboxchange" data-role="page">
+ <div data-role="header" data-theme="a">
+ <h1>bboxchange</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>bboxchange</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( {
+ bboxchange: function( e, geo ) { }
+} );</pre></code></td>
+ </tr>
+ <tr>
+ <th>bind</th>
+ <td><code><pre>$( <i>selector</i> ).bind( "geomapbboxchange", function( e, geo ) { } );
+} );</pre></code></td>
+ </tr>
+ </table>
+ <p>The bboxchange event triggers any time user interaction causes a change in the current bbox of the map widget. This includes pan, wheel zoom, double-click zoom, etc. The geomap does not trigger this event when you update the bbox programmatically.</p>
+ <p>The geo argument is an object containing a bbox property which the new bbox.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>click | geomap</title>
+ <meta name="description" content="geomap click event">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="click" data-role="page">
+ <div data-role="header" data-theme="a">
+ <h1>click</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>position</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( {
+ click: function( e, geo ) { }
+} );</pre></code></td>
+ </tr>
+ <tr>
+ <th>bind</th>
+ <td><code><pre>$( <i>selector</i> ).bind( "geomapclick", function( e, geo ) { } );
+} );</pre></code></td>
+ </tr>
+ </table>
+ <p>The click event triggers when the user clicks or taps a point on the map and then lets go at the same point within a short time threashold. However, it only triggers if the user is not currently performing some other action which might be handled internally by the widget.</p>
+ <p>The geo argument is a <a href="http://geojson.org/geojson-spec.html#point" rel="external">GeoJSON Point</a> object of the clicked location in map coordinates.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>dblclick | geomap</title>
+ <meta name="description" content="geomap dblclick event">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="dblclick" data-role="page">
+ <div data-role="header" data-theme="a">
+ <h1>dblclick</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>position</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( {
+ dblclick: function( e, geo ) { }
+} );</pre></code></td>
+ </tr>
+ <tr>
+ <th>bind</th>
+ <td><code><pre>$( <i>selector</i> ).bind( "geomapdblclick", function( e, geo ) { } );
+} );</pre></code></td>
+ </tr>
+ </table>
+ <p>The dblclick event triggers when the user double-clicks or double-taps a point on the map. However, it only triggers if the user is not currently performing some other action which might be handled internally by the widget.</p>
+ <p>The geo argument is a <a href="http://geojson.org/geojson-spec.html#point" rel="external">GeoJSON Point</a> object of the clicked location in map coordinates.</p>
+ <p>The default action for a double-click/tap is to zoom the map in one level. However, as a developer you can override this by calling e.preventDefault() in your callback.</p>
+ <code><pre>$( "#map" ).geomap( {
+ dblclick: function( e, geo ) { e.preventDefault(); }
+} );</pre></code>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>move | geomap</title>
+ <meta name="description" content="geomap move event">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="move" data-role="page">
+ <div data-role="header" data-theme="a">
+ <h1>move</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>position</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( {
+ move: function( e, geo ) { }
+} );</pre></code></td>
+ </tr>
+ <tr>
+ <th>bind</th>
+ <td><code><pre>$( <i>selector</i> ).bind( "geomapmove", function( e, geo ) { } );
+} );</pre></code></td>
+ </tr>
+ </table>
+ <p>The move event triggers when the user moves the mouse cursor while the cursor is over the map. However, it only triggers if the user is not currently performing some other action such as panning.</p>
+ <p>The geo argument is a <a href="http://geojson.org/geojson-spec.html#point" rel="external">GeoJSON Point</a> object of the location under the mouse cursor in map coordinates.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>shape | jQuery Geo</title>
+ <meta name="description" content="jQuery Geo shape event">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="shape" data-role="page">
+ <div data-role="header" data-theme="a">
+ <h1>shape</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>shape</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( {
+ shape: function( e, geo ) { }
+} );</pre></code></td>
+ </tr>
+ <tr>
+ <th>bind</th>
+ <td><code><pre>$( <i>selector</i> ).bind( "geomapshape", function( e, geo ) { } );
+} );</pre></code></td>
+ </tr>
+ </table>
+ <p>The shape event triggers when the user draws a point, line or polygon. He or she does this by tapping the map in specific ways while the geomap mode property is set to: drawPoint, drawLineString or drawPolygon.</p>
+ <p>When mode is drawPoint, a single tap of the map triggers this event passing a <a href="http://geojson.org/geojson-spec.html#point" rel="external">GeoJSON Point</a> object of the tapped location in map coordinates.</p>
+ <p>When mode is drawLineString, the first single tap begins a line. Subsequent single taps add points to the line. A double-tap on the map adds a final point and triggers this event passing a <a href="http://geojson.org/geojson-spec.html#linestring" rel="external">GeoJSON LineString</a> object of the sketched line in map coordinates.</p>
+ <p>When mode is drawPolygon, the first single tap begins a polygon. Subsequent single taps add points to the polygon. A double-tap on the map adds a final point and triggers this event passing a <a href="http://geojson.org/geojson-spec.html#polygon" rel="external">GeoJSON Polygon</a> object of the sketched polygon in map coordinates.</p>
+ <p>While drawing a shape, the user can pan the map by dragging or zoom the map with the mouse wheel. This will not interrupt their drawing of the current shape.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>geomap | jQuery Geo</title>
+ <meta name="description" content="jQuery Geo geomap widget">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="geomap" data-role="page">
+ <div data-role="header" data-theme="d">
+ <h1>geomap widget</h1>
+ </div>
+
+ <div data-role="content">
+ <p>Once you have an HTML element to target, you can call the geographic map widget's function.</p>
+
+ <pre><code>.geomap( options )</code></pre>
+
+ <h2>overview</h2>
+
+ <p>The widget creates an interactive map. Users can pan and zoom on desktop and mobile browsers against many different cached tile sets or dynamic map servers. Developers can handle events triggered by user action.</p>
+
+ <div class="geomap-indoc"></div>
+
+ <h2>options</h2>
+
+ <p>The options argument is a JavaScript object that configures the map widget during the first instantiation on a div. No options are required. By default the map will show the whole world using the OpenStreetMap tile set.</p>
+
+ <p>After initializing a map with your first geomap call, you can get or set most of these options using the following syntax:</p>
+
+ <pre><code><span class="comment">// get the current value of a single option</span>
+var optionValue = $( <i>map selector</i> ).geomap( "option", <i>optionName</i> );
+
+<span class="comment">// set a new value for a single option</span>
+$( <i>map selector</i> ).geomap( "option", <i>optionName</i>, <i>newValue</i> );
+
+<span class="comment">// set new values for multiple options at the same time</span>
+$( <i>map selector</i> ).geomap( "option", {
+ <i>optionName</i>: <i>newValue</i>,
+ <i>optionName</i>: <i>newValue</i>
+} );</code></pre>
+
+ <p>One exception is pixelSize, which is read-only.</p>
+
+ <p>The map view refreshes when you change these options: bbox, center, services, tilingScheme & zoom.</p>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="bbox.html"><h3>bbox</h3><p>bounds of the currently visible viewport</p></a></li>
+ <li><a href="bboxMax.html"><h3>bboxMax</h3><p>bounds of maximum viewport for non-tiled maps</p></a></li>
+ <li><a href="center.html"><h3>center</h3><p>center of the currently visible viewport</p></a></li>
+ <li><a href="zoom.html"><h3>zoom</h3><p>zoom level of the currently visible viewport</p></a></li>
+ <li><a href="pixelSize.html"><h3>pixelSize</h3><p>read-only Earth-size of a pixel in the current map viewport</p></a></li>
+ <li><a href="mode.html"><h3>mode</h3><p class="ui-li-desc">determines how the map, user, & developer interact</p></a></li>
+ <li><a href="pannable.html"><h3>pannable</h3><p class="ui-li-desc">allow or prohit map panning</p></a>
+ <li><a href="scroll.html"><h3>scroll</h3><p class="ui-li-desc">determines how the map reacts to a mouse wheel</p></a>
+ <li><a href="cursors.html"><h3>cursors</h3><p>cursors to display for each mode</p></a></li>
+ <li><a href="measureLabels.html"><h3>measureLabels</h3><p>format to apply to label while measuring</p></a></li>
+ <li><a href="drawStyle.html"><h3>drawStyle</h3><p>when drawing shapes, defines how they look during drawing</p></a></li>
+ <li><a href="shapeStyle.html"><h3>shapeStyle</h3><p>defines how geomap draws shapes added via the append method</p></a></li>
+ <li><a href="services.html"><h3>services</h3><p>determine the content of the map</p></a></li>
+ <li><a href="tilingScheme.html"><h3>tilingScheme</h3><p>defines how tiles are placed in the viewport</p></a></li>
+ <li><a href="axisLayout.html"><h3>axisLayout</h3><p>"map" or "image"</p></a></li>
+ </ul>
+ <h2>projection</h2>
+ <p>The geomap widget will match how you use projection with map units. The map unit type (projected or geodetic) you used when you last set either the <b>bbox</b> or the <b>center</b> option will be used as output for options and as values for arguments. If you never set the bbox or center options, the geomap widget will return geodetic coordinates.</p>
+ <p>For example, if you set the map's center option using geodetic coordinates (a longitude, latitude array), future requests for the value of the map's center or bbox options will be returned in geodetic coordinates. However, if you later set the bbox option using web mercator, future requests for the center or bbox options will be returned in that projection.</p>
+ <p>Changing bbox or center will affect all options and arguments that use map units. The options and arguments involved are:</p>
+ <ul>
+ <li>bbox option</li>
+ <li>bboxMax option</li>
+ <li>center option</li>
+ <li>bbox property of the services object's src argument</li>
+ <li>GeoJSON objects passed as the geo argument in all events</li>
+ <li>return value of the toMap method</li>
+ </ul>
+ <p>To avoid confusion, it is recommended to stick to one map unit type for any single map widget.</p>
+ <p>The geomap widget will use $.geo.proj when needed to convert between geodetic and projected coordinates.</p>
+ <h2>events</h2>
+ <p>All event callbacks receive two arguments: the original browser event and an object specific to the map action.</p>
+ <p>The map unit type (projected or geodetic) of the map event arguments depends on the way you initialize the map widget. If you have set the center or bbox option using geodetic coordinates, the event arguments will also be in geodetic coordinates.</p>
+ <p>Like jQuery UI widgets, geomap triggers events directly on the original map div.</p>
+ <p>Programatic changes to options do not trigger events.</p>
+ <p>The dblclick event is special in that you can prevent the default action,
+ zoom-in one level, by calling e.preventDefault() in your callback. This is currently the only geomap event that you can prevent the default action. Calling preventDefault in the callback of any other geomap event has undefined results.</p>
+ <p>There are three geomap event <i>types</i>. The type of event determines what is sent to your event handler as the second argument, geo.</p>
+ <h3>position events</h3>
+ <p>With position events the geo argument to your callback is a <a href="http://geojson.org/geojson-spec.html#point" rel="external">GeoJSON Point</a> object having two properties: type & coordinates. The coordinates property is a single <a href="http://geojson.org/geojson-spec.html#positions" rel="external">GeoJSON position</a>, i.e., an array containing the x/longitude and y/latitude value.</p>
+ <p>The geo argument to your callback is a true GeoJSON object and you can pass this object directly to the append method. You can also send it directly to a database for storage knowing that there are no non-GeoJSON properties wasting space.</p>
+ <ul data-role="listview" data-inset="true">
+ <li>
+ <a href="geomapmove.html">move</a>
+ </li>
+ <li>
+ <a href="geomapclick.html">click</a>
+ </li>
+ <li>
+ <a href="geomapdblclick.html">dblclick</a>
+ </li>
+ </ul>
+ <h3>bbox events</h3>
+ <p>With bbox events the geo argument to your callback is an object with single property, bbox, which is a <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a>.</p>
+ <ul data-role="listview" data-inset="true">
+ <li>
+ <a href="geomapbbox.html">bboxchange</a>
+ </li>
+ </ul>
+ <h3>shape events</h3>
+ <p>With shape events, the geo argument to your callback is a GeoJSON geometry object having two properties: type & coordinates. The object type will be either Point, LineString or Polygon depending on the current geomap mode: drawPoint, drawLineString, or drawPolygon.</p>
+ <p>The geo argument to your callback is a true GeoJSON object and you can pass this object directly to the append method. You can also send it directly to a database for storage knowing that there are no non-GeoJSON properties wasting space.</p>
+ <ul data-role="listview" data-inset="true">
+ <li>
+ <a href="geomapshape.html">shape</a>
+ </li>
+ </ul>
+ <h2>methods</h2>
+ <p>The geomap widget provides some methods to help make interacting map data a little easier.</p>
+ <h3>unit conversion</h3>
+ <p>Convert positions between pixel and map coordinates.</p>
+ <ul data-role="listview" data-inset="true">
+ <li>
+ <a href="toMap.html">toMap</a>
+ </li>
+ <li>
+ <a href="toPixel.html">toPixel</a>
+ </li>
+ </ul>
+ <h3>map methods</h3>
+ <p>These methods update the map widget as a whole.</p>
+ <ul data-role="listview" data-inset="true">
+ <li>
+ <a href="zoomMethod.html">zoom</a>
+ </li>
+ <li>
+ <a href="refresh.html">refresh</a>
+ </li>
+ <li>
+ <a href="resize.html">resize</a>
+ </li>
+ <li>
+ <a href="destroy.html">destroy</a>
+ </li>
+ </ul>
+ <h3>service modification</h3>
+ <p>Methods that help update objects in the services array.</p>
+ <ul data-role="listview" data-inset="true">
+ <li>
+ <a href="toggle.html">toggle</a>
+ </li>
+ <li>
+ <a href="opacity.html">opacity</a>
+ </li>
+ </ul>
+ <h3>shapes</h3>
+ <p>These methods manage geometry or features drawn on the geomap widget itself or on individual servies within the map.</p>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="append.html">append</a></li>
+ <li><a href="remove.html">remove</a></li>
+ <li><a href="empty.html">empty</a></li>
+ </ul>
+ <p>The find method allows you to search for shapes appended to the map. Its syntax and service-level operation is slightly different than the other three shape methods so the link is visually broken out from the rest.</p>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="find.html">find</a></li>
+ </ul>
+ <h2>style</h2>
+ <p>A geomap style is an object whose properties follow a subset of <a href="http://www.w3.org/TR/SVG/styling.html">SVG styling</a> properties. The specific styles that geomap recognizes and to which geometry they apply are listed below.</p>
+ <p>Use the drawStyle option of the geomap widget to define the style used on incomplete lines and polygons as they are being drawn when mode is drawLineString or drawPolygon.</p>
+ <p>Use the shapeStyle option to define the style of shapes drawn after being appended to the map via the append method.</p>
+ <p>Please note that in drawPoint mode, the shape event is triggered immediately and so no shape will appear until you append a point to the map at which time the shapeStyle will be used.</p>
+ <h3>geomap style properties</h3>
+ <table class="objectProperties">
+ <tr>
+ <th>property</th>
+ <th>default</th>
+ <th>description</th>
+ </tr>
+ <tr>
+ <td>borderRadius</td>
+ <td>"8px"</td>
+ <td>The radii of a quarter ellipse that defines the shape of the corner of the outer border of a box drawn around Point shapes, which means it turns your boxes into curved rectangles. If the width, height and borderRadius properties of a style are the same (the default), the point is drawn as a circle.</td>
+ </tr>
+ <tr>
+ <td>color</td>
+ <td>#7f0000</td>
+ <td>An indirect, fallback value for the fill and stroke properties if they are not set.</td>
+ </tr>
+ <tr>
+ <td>fill</td>
+ <td>undefined</td>
+ <td>Color to use when drawing the interior of a shape. The area to be drawn consists of any areas inside the outline of the shape. By default, fill will use the value of the color property.</td>
+ </tr>
+ <tr>
+ <td>fillOpacity</td>
+ <td>.2</td>
+ <td>Specifies the opacity of the drawing operation used to draw the interior of a shape. The final fill opacity also depends on the value of the opacity property.</td>
+ </tr>
+ <tr>
+ <td>height</td>
+ <td>"8px"</td>
+ <td>The height of a box drawn around Point shapes. Currently only pixel values are allowed. If either width or height are zero, no shape is drawn for the Point.</td>
+ </tr>
+ <tr>
+ <td>opacity</td>
+ <td>1</td>
+ <td>The object opacity of the entire shape. This is a multiplicative operation when determining the final fillOpacity and strokeOpacity where any fill or stroke operation is made even more translucent if this value is below 1.0.</td>
+ </tr>
+ <tr>
+ <td>stroke</td>
+ <td>undefined</td>
+ <td>Color to use when drawing along the outline of a shape. By default, stroke will use the value of the color property.</td>
+ </tr>
+ <tr>
+ <td>strokeOpacity</td>
+ <td>1</td>
+ <td>Specifies the opacity of the drawing operation used to draw the outline of a shape. The final stroke opacity also depends on the value of the opacity property.</td>
+ </tr>
+ <tr>
+ <td>strokeWidth</td>
+ <td>"2px"</td>
+ <td>The width of the stroke of a shape. A zero value causes no stroke to be drawn. Currently only pixel values are allowed.</td>
+ </tr>
+ <tr>
+ <td>visibility</td>
+ <td>"visible"</td>
+ <td>Determines if the shape is drawn ("visible") or not drawn ("hidden") on the map. Shapes that are hidden can still be returned by the find method.</td>
+ </tr>
+ <tr>
+ <td>width</td>
+ <td>"8px"</td>
+ <td>The width of a rounded rectangle drawn around Point shapes. Currently only pixel values are allowed. If either width or height are zero, no shape is drawn for the Point.</td>
+ </tr>
+ </table>
+ <p>All properties apply to Point shapes which means that you can adjust the stroke and fill of the box surrounding the point location.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>measureLabels | geomap</title>
+ <meta name="description" content="geomap measureLabels option">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="measureLabels" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>measureLabels</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Object</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td><pre><code>{
+ length: "{{=length}} m",
+ area: "{{=area}} sq m"
+}</code></pre></td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( { measureLabels: { length: "{{=length}} meters" } } );</pre></code></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><code><pre>var measureLabels = $( <i>selector</i> ).geomap( "option", "measureLabels" );</pre></code></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( "option", "measureLabels", { area: "{{=area}} square meters" } );</pre></code></td>
+ </tr>
+ </table>
+ <p>The measureLabels option controls how the length or area text is formatted when displayed on the map during measuring.</p>
+ <p>In the label strings, the {{= }} syntax is used as a placeholder for the current length or area. All other text is displayed verbatim.</p>
+ <p>The developer may change each measureLabels property separately during both initialization of the widget or any time after.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>mode | geomap</title>
+ <meta name="description" content="geomap mode option">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="mode" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>mode</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>String</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td>"pan"</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><pre><code>$( <i>selector</i> ).geomap( { mode: "pan" } );</code></pre></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><pre><code>var mode = $( <i>selector</i> ).geomap( "option", "mode" );</code></pre></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><pre><code>$( <i>selector</i> ).geomap( "option", "mode", "drawPoint" );</code></pre></td>
+ </tr>
+ </table>
+ <p>The mode option determines how the map responds to user interaction and which events the developer receives.</p>
+
+ <p>The current list of built-in modes is:</p>
+ <ul>
+ <li>static</li>
+ <li>pan</li>
+ <li>zoom</li>
+ <li>drawPoint</li>
+ <li>drawLineString</li>
+ <li>drawPolygon</li>
+ <li>measureLength</li>
+ <li>measureArea</li>
+ </ul>
+
+ <p>You are free to set mode to any other string, this is called <a href="javascript:document.getElementById('custom-modes').scrollIntoView();" rel="external">custom modes</a> in jQuery Geo and described at the end of this page.</p>
+
+ <h2>options</h2>
+ <p>Each mode has a matching property on the <a href="cursors.html">cursors</a> option. For example, to change the cursor for drawPoint mode to an I-beam, you can initialize the geomap widget like this:</p>
+ <pre><code>$( <i>selector</i> ).geomap( { cursors: { drawPoint: "text" } } )</code></pre>
+
+ <p>The <a href="drawStyle.html">drawStyle</a> option determines how shapes look while being drawn in all of the draw modes and all of the measure modes.</p>
+
+ <p>The <a href="measureLabels.html">measureLabels</a> option determines how the text is formatted while using the measure modes.</p>
+
+ <p>You can remove a user's ability to pan the map by setting the <a href="panning.html">panning</a> option to false. Yes, you can disable panning even when mode is set to "pan".<p>
+
+ <p>You can shut off mouse wheel scroll in any mode by setting the <a href="scroll.html">scroll</a> option to "off".</p>
+
+ <p>However, when mode is static, setting panning to true or scroll to "zoom" will not enable panning or mouse wheel zoom. In static mode, the geomap widget ignores the panning and scroll options.</p>
+
+ <h2>style</h2>
+ <p>The label containing the measure length or area text has the geo-measure-label CSS class. To change how the measure text looks, you can update properties in that rule:</p>
+
+ <pre><code>.geo-measure-label { font-size: 1.5em; }</code></pre>
+
+ <h2>static</h2>
+
+ <h3>user experience</h3>
+ <p>The default cursor is the default arrow pointer.</p>
+ <p>The map widget displays tiles and map images as normal but the user cannot interact with them, e.g., the user can't pan or zoom in any way, even if the <a href="pannable.html">pannable</a> option is set to true.</p>
+
+ <p>As a developer, you can still call geomap methods and set options in order to change the static map's appearance. Events are not triggered when you change the map programmatically.</p>
+
+ <h3>events</h3>
+ <p>All regular browser events bubble up to parent controls and eventually the document. No widget-specific events trigger.</p>
+
+ <h2>pan</h2>
+ <h3>user experience</h3>
+ <p>The default cursor is an open hand in browsers that support data URIs and a four point arrow otherwise.</p>
+
+ <p>The user can drag the map to pan. The map will continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. They can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android).</p>
+
+ <h3>events</h3>
+ <p>In pan mode, the geomap widget triggers the following events on the original map div.</p>
+ <ul>
+ <li>move – when the user moves the mouse above the map but is not actively panning</li>
+ <li>click – when the user clicks or taps a point on the map without initiating a pan, i.e., they let go of the map at the same point and within a short time threshold</li>
+ <li>dblclick – when the user double-clicks or double-taps a point on the map</li>
+ <li>bboxchange – when the user changes the bbox by panning or zooming</li>
+ </ul>
+
+ <h2>zoom</h2>
+
+ <h3>user experience</h3>
+ <p>The default cursor is a crosshair.</p>
+
+ <p>In this mode the user can perform a marquee zoom by clicking and holding one point and dragging the mouse cursor. A box will form. When the user lets go of the mouse, the map will zoom to the closest approximation of the bbox of the drawn shape.</p>
+ <p>Shingled (dynamic) services are only limited by the ratio between the size of the drawn shape and the map div's current size. Cached services are limited to those as well but also specific map zoom levels so the final bbox will not be as close.</p>
+ <p>The user can also zoom in or out with the scroll wheel as well as double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android).</p>
+ <p>This is not a very useful mode for mobile applications but provides a more exact method of zooming into an area for desktop users who want it.</p>
+
+ <h3>events</h3>
+ <p>In zoom mode the geomap widget triggers the following events on the original map div.</p>
+ <ul>
+ <li>move – when the user moves the mouse above the map but is not actively performing a marquee zoom</li>
+ <li>click – when the user clicks or taps a point on the map without initiating a marquee zoom, i.e., they let go of the map at the same point and within a short time threshold</li>
+ <li>dblclick – when the user double-clicks or double-taps a point on the map</li>
+ <li>bboxchange – when the user changes the bbox by zooming</li>
+ </ul>
+
+ <h2>drawPoint</h2>
+
+ <h3>user experience</h3>
+ <p>The default cursor is a crosshair.</p>
+
+ <p>In this mode the user can digitize a Point shape by single-clicking or tapping the map. Apart from the default cursor, this mode is similar to pan in that the user can drag the map to pan. However, to allow a user more accuracy during digitization, the map will not continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. They can also double-click or double-tap to zoom in one level.</p>
+
+ <p>A visual point will appear temporarily until they either let go to draw the point or begin panning.</p>
+
+ <p>Similar to pan mode, the user can drag the map to pan. However, to allow a user more accuracy during digitization, the map will not continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. They can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android).</p>
+
+ <h3>events</h3>
+ <p>In drawPoint mode, the geomap widget triggers the following events on the original map div. Note that the shape event replaces the click event.</p>
+ <ul>
+ <li>move – when the user moves the mouse above the map but is not actively panning</li>
+ <li>dblclick – when the user double-clicks or double-taps a point on the map</li>
+ <li>bboxchange – when the user changes the bbox by panning or zooming</li>
+ <li>shape – when the user clicks or taps a point on the map, this action will send a GeoJSON Point object to the developer</li>
+ </ul>
+
+ <h2>drawLineString</h2>
+
+ <h3>user experience</h3>
+ <p>The default cursor is a crosshair.</p>
+
+ <p>In this mode the user can digitize a LineString shape. The first single-click or tap on the map will begin the shape drawing. Once initialized, subsequent single-clicks will add points to the LineString. Finally, a double-click or tap will end the digitization and trigger the shape event.</p>
+
+ <p>On a non-touch device a visual line will follow the mouse cursor from the last point to show the user the next segment of the line they will draw. On all devices, the next segment becomes visible when the user confirms the next point location by clicking or tapping. At any point, the user can hit the escape key to remove one point or, if there is only one point, stop drawing the shape alltogether.</p>
+
+ <p>Similar to pan mode, the user can drag the map to pan, even while drawing a shape. However, to allow a user more accuracy during digitization, the map will not continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not drawing, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android).</p>
+
+ <h3>events</h3>
+ <p>In drawLineString mode, the geomap widget triggers the following events on the original map div.</p>
+ <ul>
+ <li>move – when the user moves the mouse above the map but is not actively panning, this event triggers even while drawing a shape</li>
+ <li>click – when the user clicks or taps a point on the map without initiating a pan, this event triggers even while drawing a shape</li>
+ <li>dblclick – when the user double-clicks or double-taps a point on the map but is not actively drawing</li>
+ <li>bboxchange – when the user changes the bbox by panning or zooming</li>
+ <li>shape – when the user double-clicks or taps a point on the map after beginning a drawing operation with a single click, this action will send a GeoJSON LineString object to the developer</li>
+ </ul>
+
+ <h2>drawPolygon</h2>
+
+ <h3>user experience</h3>
+ <p>The default cursor is a crosshair.</p>
+
+ <p>In this mode the user can digitize a Polygon shape. The first single-click or tap on the map will begin the shape drawing. Once initialized, subsequent single-clicks will add points to the Polygon. Finally, a double-click or tap will end the digitization and trigger the shape event.</p>
+
+ <p>On a non-touch device two visual lines will follow the mouse cursor. One from the last point to show the user the next segment of the Polygon they will draw, the other from the first point to show the user an extra segment that will complete the Polygon. On all devices, the next segment becomes visible when the user confirms the next point location by clicking or tapping. At any point, the user can hit the escape key to remove one point or, if there is only one point, stop drawing the shape alltogether.</p>
+
+ <p>Similar to pan mode, the user can drag the map to pan, even while drawing a shape. However, to allow a user more accuracy during digitization, the map will not continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not drawing, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android).</p>
+
+ <h3>events</h3>
+ <p>In drawPolygon mode, the geomap widget triggers the following events on the original map div.</p>
+ <ul>
+ <li>move – when the user moves the mouse above the map but is not actively panning, this event triggers even while drawing a shape</li>
+ <li>click – when the user clicks or taps a point on the map without initiating a pan, this event triggers even while drawing a shape</li>
+ <li>dblclick – when the user double-clicks or double-taps a point on the map but is not actively drawing</li>
+ <li>bboxchange – when the user changes the bbox by panning or zooming</li>
+ <li>shape – when the user double-clicks or taps a point on the map after beginning a drawing operation with a single click, this action will send a GeoJSON Polygon object to the developer</li>
+ </ul>
+
+ <h2>measureLength</h2>
+
+ <h3>user experience</h3>
+ <p>The default cursor is a crosshair.</p>
+
+ <p>In this mode the user can visually measure the length of lines on the map. The first single-click or tap on the map will begin the measurement. Once initialized, subsequent single-clicks or taps will add points to a LineString being measured. Whenever the mouse moves, a label follows the cursor which displays the total length so far. Touch devices will only see an updated measurment when they add a new point. A double-click or tap will end the measurement and remove all graphics and labels.</p>
+
+ <p>On a non-touch device a visual line will follow the mouse cursor from the last point to show the user the next segment of the line they are measuring and update the measurement. On all devices, the next segment becomes visible when the user confirms the next point location by clicking or tapping. At any point, the user can hit the escape key to remove one point or, if there is only one point, stop measuring alltogether.</p>
+
+ <p>Similar to pan mode, the user can drag the map to pan, even while measuring. The map will continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not measuring, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android).</p>
+
+ <p>By default the unit of measurment is meters because the default projection is web mercator meters. If you change the tilingScheme (on tiled services) or switch to a shingled service, the unit of measurment will be based on your new service's units.</p>
+ <h3>events</h3>
+ <p>In measureLength mode, the geomap widget triggers the following events on the original map div.</p>
+ <ul>
+ <li>move – when the user moves the mouse above the map but is not actively panning, this event triggers even while measuring</li>
+ <li>click – when the user clicks or taps a point on the map without initiating a pan, this event triggers even while measuring</li>
+ <li>dblclick – when the user double-clicks or double-taps a point on the map but is not actively measuring</li>
+ <li>bboxchange – when the user changes the bbox by panning or zooming</li>
+ </ul>
+
+ <h2>measureArea</h2>
+
+ <h3>user experience</h3>
+ <p>The default cursor is a crosshair.</p>
+
+ <p>In this mode the user can visually measure an area on the map. The first single-click or tap on the map will begin the measurement. Once initialized, subsequent single-clicks or taps will add points to a Polygon being measured. Whenever the mouse moves, a label follows the center of the polygon that displays the total area so far. Touch devices will only see an updated measurment when they add a new point. A double-click or tap will end the measurement and remove all graphics and labels.</p>
+
+ <p>On a non-touch device two visual lines will follow the mouse cursor. One from the last point to show the user the next segment of the Polygon they will draw, the other from the first point to show the user an extra segment that will complete the Polygon we need to calculate area. On all devices, the next segment becomes visible when the user confirms the next point location by clicking or tapping. At any point, the user can hit the escape key to remove one point or, if there is only one point, stop measuring alltogether.</p>
+
+ <p>Similar to pan mode, the user can drag the map to pan, even while measuring. The map will continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not measuring, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android).</p>
+
+ <p>By default the unit of measurment is meters because the default projection is web mercator meters. If you change the tilingScheme (on tiled services) or switch to a shingled service, the unit of measurment will be based on your new service's units.</p>
+
+ <h3>events</h3>
+ <p>In measureArea mode, the geomap widget triggers the following events on the original map div.</p>
+ <ul>
+ <li>move – when the user moves the mouse above the map but is not actively panning, this event triggers even while measuring</li>
+ <li>click – when the user clicks or taps a point on the map without initiating a pan, this event triggers even while measuring</li>
+ <li>dblclick – when the user double-clicks or double-taps a point on the map but is not actively measuring</li>
+ <li>bboxchange – when the user changes the bbox by panning or zooming</li>
+ </ul>
+
+ <h2 id="custom-modes">custom modes</h2>
+
+ <p>As mentioned above, you can also set mode to any other string. It will behave exactly like pan mode. However, you can set a different cursor:</p>
+
+ <pre><code>var map = $( "#map" ).geomap( {
+ mode: "click",
+ cursors: { click: "crosshair" }
+} );</code></pre>
+
+ <p>The above example creates a new custom mode, click, and sets the geomap widget to that mode during initialization. When the widget is in this mode, it will behave exactly like pan, but have a crosshair. This means you will get all the same events as pan: move, click, dblclick & bboxchange. A mode like this is useful if you want to give users more accuracy when clicking the map.</p>
+
+ <p>Custom modes will still allow panning. While panning, the cursor will temporarily switch to the pan cursor. You can disable panning for your mode by setting the widget's panning option to false whenever you change the mode option.</p>
+
+ <pre><code>function setMode( mode ) {
+ map.geomap( "option", {
+ mode: mode,
+ panning: mode !== "click"
+ } );
+}</code></pre>
+
+ <p>In this last example, we create a new map with two modes, find and remove. They both trigger the click event so we can check our current mode and behave differently depending on which one is set, or do nothing if we're not in find or remove mode.</p>
+
+ <pre><code>var map = $( "#map" ).geomap( {
+ mode: "drawPoint",
+ cursors: {
+ find: "crosshair",
+ remove: "crosshair"
+ },
+ shape: function( e, geo ) {
+ <span class="comment">// only the draw modes trigger this event</span>
+ map.geomap( "append", geo );
+ },
+ click: function( e, geo ) {
+ switch( map.geomap( "option", "mode" ) ) {
+ case "find":
+ <span class="comment">// search for shapes but just alert the user</span>
+ var shapes = map.geomap( "find", geo, 3 );
+ if ( shapes.length > 0 ) {
+ alert( "Found " + shapes.length + " shape(s) !" );
+ }
+ break;
+
+ case "remove":
+ <span class="comment">// search for shapes and remove one of them</span>
+ var shapes = map.geomap( "find", geo, 3 );
+ if ( shapes.length > 0 ) {
+ map.geomap( "remove", shapes[ 0 ] );
+ }
+ break;
+
+ default:
+ <span class="comment">// ignore the click event for all other modes: pan, zoom, etc.</span>
+ break;
+ }
+ }
+} );</code></pre>
+
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>opacity | geomap</title>
+ <meta name="description" content="geomap opacity method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="opacity" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>opacity</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>undefined</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$( <i>map or service selector</i> ).geomap( "opacity", Number opacity )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>$("#map").geomap( "opacity", .5 )
+$("#map .osm").geomap( "opacity", .7 )</code></pre>
+ </td>
+ </tr>
+ </table>
+ <p>This method sets the value of the opacity property of service objects in the services array.</p>
+ <p>It will also update the opacity of all images already requested by the service.</p>
+ <p>If you call opacity directly on geomap's div element, it will apply to all services. You can target individual services using a CSS selector based on the map div id and the class supplied for the service in its service object or just the id of the service if supplied in its service object.</p>
+ <pre><code>// for example, given the following as the map div
+<div id="map"></div>
+
+// and initializing geomap with the following services
+$("#map").geomap({
+ services: [
+ {
+ id: "water",
+ class: "mass-gis",
+ type: "shingled",
+ src: function ( view ) { return null; }
+ },
+ {
+ id: "towns",
+ class: "mass-gis",
+ type: "shingled",
+ src: function ( view ) { return null; }
+ },
+ {
+ id: "harbor-cruise",
+ type: "shingled",
+ src: function ( view ) { return null; }
+ }
+ ]
+});
+
+// you can later change the opacity of all services
+$("#map").geomap("opacity", .8);
+
+// all mass-gis services
+$("#map .mass-gis").geomap("opacity", .5);
+
+// or a specific service
+$("#harbor-cruise").geomap("opacity", 1.0);</code></pre>
+ <p>This is much faster than changing a service object's opacity value yourself and updating geomap's services property.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>pannable | geomap</title>
+ <meta name="description" content="geomap pannable option">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="pannable" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>pannable</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Boolean</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td>true</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><pre><code>$( <i>map selector</i> ).geomap( { pannable: true } );</code></pre></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><pre><code>var pannable = $( <i>map selector</i> ).geomap( "option", "pannable" );</code></pre></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><pre><code>$( <i>map selector</i> ).geomap( "option", "pannable", false );</code></pre></td>
+ </tr>
+ </table>
+
+ <p>The pannable option determines whether or not a user can pan the map.</p>
+
+ <p>When true, the default, users can drag the map image or tiles to change the bbox in any <a href="mode.html">mode</a> except for "static". For example, they can pan the map in the middle of drawing a polygon with the drawPolygon mode.</p>
+
+ <p>When false, a user's dragging of the map image will not cause it to move regardless of what mode the widget is in. Developers can still make programatic changes to the bbox, such as setting options and calling methods.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>pixelSize | geomap</title>
+ <meta name="description" content="geomap pixelSize option">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="pixelSize" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>pixelSize</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Number</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td>156543.03392799936</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><i>cannot be initialized</i></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><pre><code>var pixelSize = $( <i>selector</i> ).geomap( "option", "pixelSize" );</code></pre></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><i>read only</i></td>
+ </tr>
+ </table>
+ <p>The pixel size is the number of map units a single pixel occupies in the current view. A more interesting way to think of it is the Earth-size of the pixel.</p>
+ <p>Because the default internal projection is web mercator meters, the default return value for pixelSize is in meters even if you set other map values in geodetic coordinates, e.g., lon/lat. The unit type will always match the type you set on tilingScheme for tiled maps or bboxMax for shingled (dynamic) maps. For more information on how the plugin handles projections, please read the geo section of this documentation.</p>
+ <p>The map's pixel size is read-only. To change it you will need to use one of the mutable properties such as bbox, center or zoom.</p>
+ <p>pixelSize is calculated based on tilingScheme & zoom for tiled maps. It is based on the bbox/bboxMax ratio for shingled maps.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>refresh | geomap</title>
+ <meta name="description" content="geomap refresh method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="refresh" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>refresh</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>undefined</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( "refresh" )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>$("#map").geomap( "refresh" )</code></pre></td>
+ </tr>
+ </table>
+ <p>
+ This method refreshes
+ all services and graphics in the map. Usually, changing geomap properties or calling methods automatically refreshes the map appropriately. However, you can call this after you have added or removed shapes to geomap by passing false as the refresh argument to the append, remove, or empty methods.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>remove | geomap</title>
+ <meta name="description" content="geomap remove method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="remove" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>remove</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>jQuery collection</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( "remove", Object shape [ , Boolean refresh ] )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>$( <i>map or service selector</i> ).geomap( "remove", existingShape )
+$( <i>map or service selector</i> ).geomap( "remove", existingShape, false )</code></pre></td>
+ </tr>
+ </table>
+ <p>The remove method removes a shape you have previously added with the append method. The existing shape can be an object reference used in a call to <a href="append.html">append</a> that you have held on to or one that you retrieved by using the <a href="find.html">find</a> method.</p>
+ <p>The jQuery UI widget factory returns the original jQuery collection to maintain call chaining.</p>
+ <h2>delaying refresh</h2>
+ <p>The optional refresh argument determines if geomap refreshes the map graphics after this call to remove. It defaults to true. If you pass false, geomap will remove the shape internally but not immediately redraw the graphics. The changes will display if the user moves the map or you call geomap's refresh method.</p>
+ <p>If the shape is not found on the specified service, the map is not changed and will not be refreshed even if you pass true for the refresh argument.</p>
+ <h2>service-level shapes</h2>
+ <p>Similar to how you can append shapes to specific services, you can remove shapes from specific services as well.</p>
+ <p>You do this by targeting a service inside a map instead of the map itself for your call to geomap's remove method. For example, the default map service has the CSS class: osm. We can remove a shape from that service specifically by using jQuery to target the service:</p>
+ <pre><code>$( "#map .osm" ).geomap( "remove", shape );</code></pre>
+ <p>Shapes appended to a specific service will not be removed by calling remove on the map itself. For example, the shape will remain after this sequence:<p>
+ <pre><code>$( "#map .osm" ).geomap( "append", shape );
+$( "#map" ).geomap( "remove", shape );</code></pre>
+ <p>To remove all references to a shape from the map and all services, you can use the comma selector and the built-in geo-service CSS class:</p>
+ <pre><code><span class="comment">// remove the shape from both the map widget and any services</span>
+$( "#map,#map .geo-service" ).geomap( "remove", shape );</code></pre>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>resize | geomap</title>
+ <meta name="description" content="geomap resize method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="resize" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>resize</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>undefined</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( "resize" )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>$("#map").geomap( "resize" )</code></pre></td>
+ </tr>
+ </table>
+ <p>
+ This method tells the geomap widget to recalculate its frame and adjust its bbox to fit a new size. The map will maintain its center point and pixel size and expand or contract to fill the new surroundings.</p>
+ <p>
+ The geomap widget watches the browser window for you. If your map widget's div position is related to the window in some way, geomap will automatically resize to fit when the window size changes. If the map widget's div is not related to the window and you manually change its size, you need to call resize so that the map can adjust.</p>
+ <p>
+ This method refreshes the map.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>scroll | geomap</title>
+ <meta name="description" content="geomap scroll option">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="scroll" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>scroll</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>String</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td>"default"</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><pre><code>$( <i>map selector</i> ).geomap( { scroll: "default" } );</code></pre></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><pre><code>var scroll = $( <i>map selector</i> ).geomap( "option", "scroll" );</code></pre></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><pre><code>$( <i>map selector</i> ).geomap( "option", "scroll", "off" );</code></pre></td>
+ </tr>
+ </table>
+
+ <p>The scroll option determines what the map widget does when the user rotates a mouse wheel. There are currently three values: default, zoom, and off. However, default is currently the same as zoom.</p>
+
+ <p>When scroll is default or zoom, users can use a mouse wheel to zoom the map in or out.</p>
+
+ <p>When set to off, mouse wheel scrolling is ignored. This is useful when the document itself or a section that contains the map requires scrolling due to content. A desktop user will expect to be able to use the mouse wheel to scroll the document and you don't want the map to interfere. For example, if the user's mouse cursor is over a map that's part of a long document, there's a greater chance they will want the mouse wheel to scroll document instead of zooming the map. Set the scroll property to "off" to ensure the wheel will work as expected.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>services | geomap</title>
+ <meta name="description" content="geomap services option">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="services" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>services</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Array</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ </tr>
+ <tr>
+ <td colspan=2><code><pre>[ {
+ "class": "osm",
+ type: "tiled",
+ src: function( view ) {
+ return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "&copy; OpenStreetMap &amp; contributors, CC-BY-SA"
+} ]</pre></code></td>
+ </tr>
+ <tr>
+ <th>init</th>
+ </tr>
+ <tr>
+ <td colspan=2><pre><code>$( <i>selector</i> ).geomap( { services: [ {
+ "class": "osm",
+ type: "tiled",
+ src: function( view ) {
+ return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "&copy; OpenStreetMap &amp; contributors, CC-BY-SA",
+ style: {
+ visibility: "visible",
+ opacity: 1.0
+ }
+} ] } );</code></pre></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><pre><code>var services = $( <i>selector</i> ).geomap( "option", "services" );</code></pre></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ </tr>
+ <tr>
+ <td colspan=2><pre><code>$( <i>selector</i> ).geomap( "option", "services", [ {
+ id: "mapquest-open",
+ "class": "basemap",
+ type: "tiled",
+ src: function( view ) {
+ return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "<p>Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'></p>"
+} ] );</code></pre></td>
+ </tr>
+ </table>
+
+ <p>The services option is an array of service objects. The service objects are JavaScript objects that control how the geomap widget displays map images.</p>
+
+ <p>By default, geomap will display OpenStreetMap tiles. You can change all services at once by setting this option with an entirely new array of service objects. You can set a specific part of of a specific service by getting the current array, modifying, adding, or deleting one of the service objects and then re-setting the services option with the modified array.</p>
+
+ <pre><code><span class="comment">// get the current services array</span>
+var services = map.geomap( "option", "services" );
+
+<span class="comment">// add a service</span>
+services.push( {
+ id: "Ortho_MapQuest",
+ type: "tiled",
+ src: function (view) {
+ return "http://oatile" + ((view.index % 4) + 1) + ".mqcdn.com/naip/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "<p>Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest<a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'><p>"
+} );
+
+<span class="comment">// re-set the services option</span>
+map.geomap( "option", "services", services );</code></pre>
+
+ <h2>service object</h2>
+
+ <p>A service object has six properties, two of which are required. The id and class properties are optional but at least one is recommended so you can target specific services with the toggle and opacity methods.</p>
+ <h3>id</h3>
+ <p>Each service can have an id that distinguishes it from other service objects in the array. The id is a string and must be follow the HTML element id naming conditions. If present, the id must be unique across all services in all maps as well as unique from any other HTML element on the page. The default service object of a geomap widget does not have an id.</p>
+ <h3>class</h3>
+ <p>Each service can have a class as well. The class is a string and must be follow the CSS class naming conditions. You can consider this as the class of images the service will supply and usually name it after the service, such as osm, mass-gis, etc. The default service object of a geomap widget has the class: osm.</p>
+ <p>All services also get the class geo-service whether you supply a class to the service object or not. Therefore, the default service is both .osm (as part of its service object) and .geo-service (as added by the widget).</p>
+ <p>Unfortunately, class is a reserved word in JavaScript. When you specify class in your service object, you must quote the word class. This is exactly how it's done in jQuery itself when applying attributes to an element based on an object. To quote the jQuery API:</p>
+ <blockquote>The name "class" must be quoted since it is a JavaScript reserved word, and "className" cannot be used since it is not the correct attribute name.</blockquote>
+ <h3>type</h3>
+ <p>A service object has a type property which is either "tiled" or "shingled". Tiled servies will get one image request per tile needed to fill a given view when the map refreshes. The tile request's bbox will only be the size of the given tile. Shingled services will get only one image request each time the map refreshes and the bbox will be the extent of the whole map view.</p>
+ <h3>src</h3>
+ <p>The src property of a service object can be one of the following three options:</p>
+ <ul>
+ <li>a function that accepts an object specifying information about the current image request which <b>returns a URL to an image</b> or null to indicate that no image is available or required</li>
+ <li>a function that accepts an object specifying information about the current image request which <b>returns a jQuery Promise object</b> and, later, calls either resolve passing a URL to an image or reject to indicate that no image is available</li>
+ <li>a template string that the geomap widget can use to build a URL itself</li>
+ </ul>
+ <p>For tiled services, the image is placed at the tile location specified. For shingled services, the image will fill the whole map view.</p>
+ <p>If the browser's request of the image results in a 404 status the map will not show that tile or image.</p>
+ <p>When src is a function, the argument to that function has the following properties:</p>
+ <table>
+ <tr>
+ <th>bbox (Array)</th><td>A <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> of the current tile or image in map units. The map unit type (projected or geodetic) depends on how you last set the bbox or center options on the geomap widget.</td>
+ </tr>
+ <tr>
+ <th>width (Number)</th><td>The width of the tile or image in pixels.</td>
+ </tr>
+ <tr>
+ <th>height (Number)</th><td>The height of the tile or image in pixels.</td>
+ </tr>
+ <tr>
+ <th>zoom (Number)</th><td>The current zoom level of the map during this request.</td>
+ </tr>
+ <tr>
+ <th>tile (Object)</th><td>If the service is tiled, this object has column and row properties specifying the location of the tile of this request in the current zoom, otherwise it is null.</td>
+ </tr>
+ <tr>
+ <th>index (Number)</th><td>A whole number which is usually incremented between requests that you can use to cycle image URLs to different index, e.g., if there are four servers hosting the same tile images named tile0, tile1, tile2 and tile3 you can target them in your src function with the string: "tile" + (view.index % 4).</td>
+ </tr>
+ </table>
+ <p>You can use the properties of this argument to build and return a URL (or initiate an AJAX request and return a Promise).</p>
+ <p>For more infomration about returning a jQuery Promise, please read the section on <a href="http://api.jquery.com/category/deferred-object/" rel="external">Deferred Objects</a> in the jQuery API documentation. It might useful to know that, as of jQuery 1.5, the <a href="http://api.jquery.com/jQuery.ajax/" rel="external">$.ajax method</a> returns a Promise object. If your ajax call returns a URL to an image, your src function can look something like this:</p>
+ <pre><code>src: function ( view ) { return $.ajax( { ... } ); }</code></pre>
+ <p>When src is a string, those same properties can be used in the template by surrounding each property with: {{=propertyName}}.</p>
+ <p>The default value for src is a function because it is slightly faster than rendering a template. However, as an example, we can rewrite the default src function as a template string:</p>
+ <pre><code>src: "http://tile.openstreetmap.org/{{=zoom}}/{{=tile.column}}/{{=tile.row}}.png"</code></pre>
+ <p>A couple advantages of using a string are that it is more concise and, unlike a function, can be stored as JSON.</p>
+ <p>You do not have to have template parameters in the string, so if you want a static map image, you can set src to a static URL.</p>
+ <h3>attr</h3>
+ <p>The attr property is optional. It stands for attribution and is a way to give credit to the source of your map imagery. It defaults to an empty string if not specified in a service object. When present, the map widget displays the HTML provided on the bottom-left corner of the map when the service is visible. Users can click links but cannot interact with all other text or images.</p>
+ <h3>style</h3>
+ <p>The style property is optional. It contains presentation options for the service.</p>
+
+ <p>The visibility property defaults to "visible". It determines whether or not the map will show images from this service while refreshing. You can change the visibility of a service either by changing the visibility property of the service object to "visible" or "hidden" and then setting geomap's services option or by using the toggle method of the geomap widget. The latter is recommended because it is a lot faster and does not cause services to be recreated.</p>
+
+ <p>The opacity defaults to 1.0. It determines how transparent a service is when it is visible. Valid values are floating point numbers between 0 and 1 inclusive. Services with an opacity of 0 will not show on the map even if visible is true. You can change the opacity of a service either by changing the opacity property of the service object and then setting geomap's services option or by using the opacity method of the geomap widget. The latter is recommended because it is a lot faster and does not cause services to be recreated.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>shapeStyle | geomap</title>
+ <meta name="description" content="geomap shapeStyle option">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="shapeStyle" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>shapeStyle</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Object ( geomap style )</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td><pre><code>{
+ borderRadius: "8px",
+ color: "#7f0000",
+ fillOpacity: .2,
+ height: "8px",
+ opacity: 1,
+ strokeOpacity: 1,
+ strokeWidth: "2px",
+ visibility: "visible",
+ width: "8px"
+}</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><pre><code>$( <i>map or service selector</i> ).geomap( { shapeStyle: { color: "green" } } );</code></pre></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><pre><code>var shapeStyle = $( <i>map or service selector</i> ).geomap( "option", "shapeStyle" );</code></pre></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><pre><code>$( <i>map or service selector</i> ).geomap( "option", "shapeStyle", { strokeWidth: "4px" } );</code></pre></td>
+ </tr>
+ </table>
+ <p>The shapeStyle option retrieves or updates the <i>base</i> style of shapes appended to the map.</p>
+ <p>This differs from the drawStyle option which defines the style of incomplete lines and polygons as they are being drawn.</p>
+ <p>Two extra color properties, stroke and fill, are not defined by default and use the value of the color property until they are defined individually.</p>
+ <p>This option changes specific properties of the internal base style. If you send an incomplete style object, only the style properties you reference are updated.</p>
+ <p>Similar to CSS, you can override this style on a per-shape basis by passing a different style to the append method.</p>
+ <p>Changing this base style will update how geomap draws existing shapes that do not have their own style. For shapes that do have their own style, changing the base shapeStyle will update any style properties not referenced in the shape-specific style. For example, assume the following:</p>
+ <ol>
+ <li>
+ <span>the base shapeStyle starts with its initial style having a red stroke color and strokeWidth of 2px</span>
+ <pre><code>$( "#map" ).geomap( );</code></pre>
+ </li>
+ <li>
+ <span>you call append with a style that increases the stroke width to 4px but does not supply a stroke color</span>
+ <pre><code>$( "#map" ).geomap(
+ "append",
+ { type: "Point", coordinates: [ -71, 42 ] },
+ { strokeWidth: "4px" }
+);</code></pre>
+ </li>
+ <li>
+ <span>you later change the base shapeStyle's stroke color to blue</span>
+ <pre><code>$( "#map" ).geomap( "option", "shapeStyle", { stroke: "#00f" } );</code></pre>
+ </li>
+ </ol>
+ <p>The shape described in the above example will draw with a blue stroke color and a strokeWidth of 4px.</p>
+ <p>You can also set a base style for a specific service. These are called service-level styles and apply only to service-level shapes. To do this, target a service inside a map instead of the map itself for your call to geomap's shapeStyle option. To expand upon the above example, consider the following additional steps:</p>
+ <ol start="4">
+ <li>
+ <span>you change the shapeStyle option of the default service specifically so that points are twice as long as usual; the default service has the CSS class: osm</span>
+ <pre><code>$( "#map .osm" ).geomap( "option", "shapeStyle", { width: "16px" } )</code></pre>
+ </li>
+ <li>
+ <span>you append a second point directly to the default .osm service</span>
+ <pre><code>$( "#map .osm" ).geomap(
+ "append",
+ { type: "Point", coordinates: [ -70.5, 42.5 ] }
+);</code></pre>
+ </li>
+ </ol>
+ <p>This second point will:</p>
+ <ul>
+ <li>have a blue stroke color because it cascades from the base shapeStyle for the map as a whole (which you set with your first call to shapeStyle)</li>
+ <li>have a strokeWidth of only 2px because it is unaffected by the style applied to the first shape during the first append call</li>
+ <li>have a width of 16px which it gets from the shapeStyle of the service where it was appended</li>
+ </ul>
+ <p>This is the only option that can be applied to services. All other options require a reference to the original map element.</p>
+ <p>When called with a second argument to set the shapeStyle, the jQuery UI widget factory returns the original jQuery collection to maintain call chaining.</p>
+ <p>Please see the style section at the bottom of the <a href="#" onclick="javascript:window.history.back();">geomap widget</a> page for more information about the style object.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>tilingScheme | geomap</title>
+ <meta name="description" content="geomap tilingScheme property">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="tilingScheme" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>tilingScheme</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Object</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td><pre><code>{
+ tileWidth: 256,
+ tileHeight: 256,
+ levels: 18,
+ basePixelSize: 156543.03392799936,
+ pixelSizes: null,
+ origin: [ -20037508.342787, 20037508.342787 ]
+}</code></pre></td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( { tilingScheme: {
+ tileWidth: 256,
+ tileHeight: 256,
+ levels: 18,
+ basePixelSize: 156543.03392799936,
+ pixelSizes: null,
+ origin: [ -20037508.342787, 20037508.342787 ]
+} } );</pre></code></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><code><pre>var tilingScheme = $( <i>selector</i> ).geomap( "option", "tilingScheme" );</pre></code></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><code><pre>$( <i>selector</i> ).geomap( "option", "tilingScheme", null );</pre></code></td>
+ </tr>
+ </table>
+ <p>The tilingScheme property defines a grid that the geomap widget can use to build a map view as adjacent tiles instead of a single, full image each time.</p>
+ <p>Only tiled services will get a non-null tile property as an argument to their src method or template. Shingled services, even when layered on top of a tiled map will only get bbox data.</p>
+ <p>When a tilingScheme is set, the geomap widget will limit the user to specific zoom levels defined by the tiling scheme.</p>
+ <p>You can set the map widget to be fully dynamic and allow any arbitrary zoom level by setting the tilingScheme to null. This is only useful if all of your services are backed by live spatial data and can produce map images at any scale.</p>
+ <p>This is one of the few places where you must use non-geodetic (i.e., non-lon/lat) units even if you are using longitude & latitude for properties such as center or bbox. You must use projected units when defining a tiling scheme. The default map tiles use web mercator meters.</p>
+ <p>
+ All tilingScheme objects have the first three of the following properties. Apart from those, a tilingScheme object must have either <b>just</b> the pixelSizes property or <b>both</b> basePixelSize & levels.</p>
+ <table>
+ <tr><th>tileWidth (Number)</th><td>the width in pixels of a single tile</td></tr>
+ <tr><th>tileHeight (Number)</th><td>the height in pixels of a single tile</td></tr>
+ <tr><th>origin (Array<Number>)</th><td>a <a href="http://geojson.org/geojson-spec.html#positions" rel="external">GeoJSON position</a> for the top-left corner of the map tiles in map units, this is used to correctly position tiles into the map view</td></tr>
+ <tr><th>pixelSizes (Array<Number>)</th><td>an array of all pixel sizes (called resolutions on Esri's products) hosted by the map service, each one represents a zoom level therefore the total number of zoom levels equals the length of the pixelSizes array</td></tr>
+ <tr><th>basePixelSize (Number)</th><td>the pixelSize represented by the tiles on zoom level 0, used when each pixelSize is a power of two smaller than the previous one</td></tr>
+ <tr><th>levels (Number)</th><td>the total number of pixelSizes allowed, used in conjuction with basePixelSize to determine how far a user is allowed to zoom</td></tr>
+ </table>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>toMap | geomap</title>
+ <meta name="description" content="geomap toMap method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="toMap" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>toMap</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Array (<a href="http://geojson.org/geojson-spec.html#positions" rel="external">GeoJSON positions</a>)</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( "toMap", Array pixelPositions )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var mapPos = $("#map").geomap( "toMap", [ 120, 240 ] )
+var mapPositions = $("#map").geomap( "toMap", [ [ 120, 240 ], [ 192, 48 ] ] )</code></pre></td>
+ </tr>
+ </table>
+ <p>The toMap method takes a single pixel position (which is an array of two values: the left and top of the pixel), an array of pixel positions, an array of arrays of pixel positions, or an array of arrays of arrays of pixel positions. In other words, it accepts the pixel representation of the coordinates of any geometry up to MultiPolygon. It returns the map coordinates for all of the pixel positions.</p>
+ <p>The return coordinates are in projected map units if you have previously set the bbox or center options using projected coordinates. Otherwise, they are in geodetic (lon, lat) coordinates.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>toPixel | geomap</title>
+ <meta name="description" content="geomap toPixel method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="toPixel" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>toPixel</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>Array (<a href="http://geojson.org/geojson-spec.html#positions" rel="external">GeoJSON positions</a>)</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( "toPixel", Array mapPositions )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>var pixelPos = $("#map").geomap( "toPixel", [ -71.098709, 42.330322 ] )
+var pixelPositions = $("#map").geomap( "toPixel", [ [ -71.098709, 42.330322 ], [ -71.072617, 42.351608 ] ] )</code></pre></td>
+ </tr>
+ </table>
+ <p>The toPixel method takes a single GeoJSON position (Point.coordinates), an array of GeoJSON positions (MultiPoint.coordinates or LineString.coordinates), an array of arrays of positions (MultiLineString.coordinates or Polygon.coordinates) or an array of arrays of arrays of positions (MultiPolygon.coordinates). It returns the pixel coordinates for all of the map positions.</p>
+ <p>You can pass geodetic (lon, lat) or projected coordinates regardless of how you last set the bbox or center options.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>toggle | geomap</title>
+ <meta name="description" content="geomap toggle method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="toggle" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>toggle</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>undefined</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>$( <i>map or service selector</i> ).geomap( "toggle" [ , Boolean show_or_hide ] )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>$("#map").geomap( "toggle" )
+$("#map .osm").geomap( "toggle", false )</code></pre>
+ </td>
+ </tr>
+ </table>
+ <p>This method toggles or sets the visibility property of service objects in the services array.</p>
+ <p>If you call toggle directly on geomap's div element, it will apply to all services. You can target individual services using a CSS selector based on the map div id and the class supplied for the service in its service object or just the id of the service if supplied in its service object.</p>
+ <pre><code>// for example, given the following as the map div
+<div id="map"></div>
+
+// and initializing geomap with the following services
+$("#map").geomap({
+ services: [
+ {
+ id: "water",
+ class: "mass-gis",
+ type: "shingled",
+ src: function ( view ) { return null; }
+ },
+ {
+ id: "towns",
+ class: "mass-gis",
+ type: "shingled",
+ src: function ( view ) { return null; }
+ },
+ {
+ id: "harbor-cruise",
+ type: "shingled",
+ src: function ( view ) { return null; }
+ }
+ ]
+});
+
+// you can later hide all services
+$("#map").geomap("toggle", false);
+
+// all mass-gis services
+$("#map .mass-gis").geomap("toggle", false);
+
+// or a specific service
+$("#harbor-cruise").geomap("toggle", false);</code></pre>
+ <p>If the optional boolean value is not supplied, the visibility of the services will be toggled.</p>
+ <p>The change will happen immediately and you do not need to call refresh. This is recommended over manually changing the visibility property of the service object as it does not cause other services to refresh.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>zoom | geomap</title>
+ <meta name="description" content="geomap zoom option">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="zoom" data-role="page">
+ <div data-role="header" data-theme="f">
+ <h1>zoom</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>type</th>
+ <td>Number</td>
+ </tr>
+ <tr>
+ <th>default</th>
+ <td>0</td>
+ </tr>
+ <tr>
+ <th>init</th>
+ <td><pre><code>$( <i>selector</i> ).geomap( { zoom: 0 } );</code></pre></td>
+ </tr>
+ <tr>
+ <th>get</th>
+ <td><pre><code>var zoom = $( <i>selector</i> ).geomap( "option", "zoom" );</code></pre></td>
+ </tr>
+ <tr>
+ <th>set</th>
+ <td><pre><code>$( <i>selector</i> ).geomap( "option", "zoom", 7 );</code></pre></td>
+ </tr>
+ </table>
+ <p>The zoom property gets or sets the current zoom of the map view.</p>
+ <p>For tiled services the zoom property's range is zero to the current geomap tilingScheme's levels property minus one.</p>
+ <p>For shingled services, the zoom property is based on the ratio between sizes of the bbox and bboxMax properties. If they are equal, the zoom property is 0. Smaller bbox areas will have larger zoom values.</p>
+ <p>If you attempt to initialize both zoom and bbox at the same time when creating a geomap widget, bbox will be applied and zoom will modify the final bbox.</p>
+ <p>Apart from setting the zoom property directly, you can use the <a href="zoommethod.html">zoom method</a> to change the zoom by relative amounts.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>zoom | geomap</title>
+ <meta name="description" content="geomap zoom method">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="zoomMethod" data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>zoom</h1>
+ </div>
+
+ <div data-role="content">
+ <table>
+ <tr>
+ <th>return type</th>
+ <td>undefined</td>
+ </tr>
+ <tr>
+ <th>syntax</th>
+ <td>.geomap( "zoom", Number numberOfLevels )</td>
+ </tr>
+ <tr>
+ <th>usage</th>
+ <td><pre><code>$("#map").geomap( "zoom", 1 )
+$("#map").geomap( "zoom", -2 )</code></pre></td>
+ </tr>
+ </table>
+ <p>The zoom method can zoom the map in or out by a given number of zoom levels. Positive values zoom the map in, negative values zoom the map out.</p>
+ <p>This method will not zoom out beyond zoom level 0. If you are using a tiling scheme, this method will not zoom in past the maximum number of zoom levels defined in the tilingScheme property.</p>
+ <p>This method accepts values <b>relative</b> to the map's current zoom level. This is different than the zoom property, which <b>is</b> the map's current zoom level.
+ It might be useful to add an explicit plus sign when using this zoom method.</p>
+ <pre><code>// set the map to zoom level 2
+$("#map").geomap( "option", "zoom", 2 );
+
+// zoom the map in 2 levels from its current zoom
+$("#map").geomap( "zoom", +2 );</code></pre>
+ <p>This method does not trigger events, not even bboxchange.</p>
+ <p>There is no default value. Passing null or undefined will not change the map's zoom.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>html | jQuery Geo</title>
+ <meta name="description" content="jQuery Geo html requirements">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="html" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>html</h1>
+ </div>
+
+ <div data-role="content">
+ <p>Our geospatial plugin's only widget is a geographic map that you can create on any div with a computable width and height.</p>
+ <pre><code><div style="width: 640px; height: 480px;"></div></code></pre>
+ <p>If the div is not already in relative, absolute or fixed position, the widget will force relative positioning.</p>
+ <h2>fullscreen</h2>
+ <p>The div size does not have to be so specific.</p>
+ <pre><code><div style="position: fixed; top: 0; right: 0; bottom: 0; left: 0;"></div></code></pre>
+ <p>As in the above example, you can have the map fill the window by setting position to either absolute or fixed and the top, right, bottom and left properties to all zero. The map will follow the size of the window and recenter when the size of the window changes.</p>
+ <p>Fixed position is preferred because it will not create scroll bars when making the window smaller. However, keep in mind that fixed position is not supported by IE6 and can be odd on some mobile browsers. If you do use absolute position, you can set the overflow style property on the body element to hidden and avoid scroll bars.</p>
+ <pre><code><body style="overflow: hidden;">
+ <div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"></div>
+</body></code></pre>
+ <h2>box model</h2>
+ <p>The map supports divs that have padding, borders and margins. The plugin will create the map where text would normally go in such a situation, i.e., the map content will be inset from the border by the padding amount.</p>
+ <pre><code><style>
+ #map {
+ width: 90%;
+ max-width: 640px;
+ height: 480px;
+ padding: 8px;
+ border: solid 3px #444;
+ margin: .5em;
+ background: #ddf;
+ }
+</style>
+<div id="map">O HAI</div></code></pre>
+ <div style="width: 90%; max-width: 640px; height: 128px; padding: 8px; border: solid 3px #444; margin: .5em; background: #ddf;">O HAI</div>
+ <h2>inner elements</h2>
+ <p>Any elements inside the map div can be absolutely positioned and will not interfere with map operation. Map images will appear beneath them. This is useful if you want to layout a scale bar for example.</p>
+ <pre><code><style>
+ #bar {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ padding: 16px;
+ background: #ccc;
+ opacity: .8;
+ border-radius: 8px;
+ text-align: center;
+ font-size: 10px;
+ }
+ #bar div {
+ width: 96px;
+ height: 2px;
+ margin-bottom: 8px;
+ background: #444;
+ color: #444;
+ }
+</style>
+<div id="map"><div id="bar"><div></div><span>1134 meters</span></div></div></code></pre>
+ <div style="position: relative; width: 90%; max-width: 640px; height: 128px; padding: 8px; border: solid 3px #444; margin: .5em; background: #ddf;"><div style="position: absolute; top: 10px; right: 10px; padding: 16px; background: #ccc; opacity: .8; border-radius: 8px; text-align: center; font-size: 10px;"><div style="width: 96px; height: 2px; margin-bottom: 8px; background: #444; color: #444;"></div><span>1134 meters</span></div></div>
+ <p>This rather large scale bar will not interfere with a user trying to pan the map.</p>
+ <h2>mobile</h2>
+ <p>The geomap widget works on modern mobile browsers without any additional JavaScript development. However, some web design is necessary. For starters, as with any mobile development you should add a viewport meta tag into your head element. This should appear above most other tags so the mobile browser can get ready for a mobile page before doing any other work.</p>
+ <pre><code><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"></code></pre>
+ <p>If you have done any other mobile web developement, you're probably frowning at my decision to disable the default zoom capability of the device's web browser. If you haven't done much with mobile, I am disabling double-tap to zoom into a page by setting the min and max scale to 1.</p>
+ <p>In almost all other cases, I would agree that disabling browser zoom is a bad user experience, however for this example I am considering a full-screen mapping application. With that in mind, double-tap has a whole new meaning and users expect it to zoom the map itself, not the page. It is in this case only that I suggest you disable browser page zoom. If you are targeting modern mobile browsers such as iOS, Android, Windows Phone 7 or Opera Mobile, you can used fixed positioning and the HTML for the full screen mobile app would look like the first fullscreen example:</p>
+ <pre><code><div style="position: fixed; top: 0; right: 0; bottom: 0; left: 0;"></div></code></pre>
+ <p>Other mobile browsers are currently untested.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <title>jQuery Geo docs</title>
+ <meta name="description" content="Documentation for jQuery Geo, a JavaScript geospatial mapping plugin from Applied Geographics">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="index" data-role="page" data-theme="b">
+ <div data-role="header">
+ <h1><img src="images/$.geo-logo.png" alt="" />jQuery Geo docs</h1>
+ </div>
+
+ <div data-role="content">
+ <h2>Welcome!</h2>
+
+ <p>jQuery Geo is an open-source, geospatial mapping jQuery plugin from Applied Geographics developed with the intention of making spatial web mapping significantly simpler than it may initially seem. We would like to point out the term "open-source" to explictly state that Google, Bing, MapQuest, Yahoo! & Esri are generally free but not open.</p>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="http://github.com/AppGeo/geo" rel="external">project source on GitHub</a></li>
+ </ul>
+
+ <p>Please read the following sections for more information and examples, and thank you for considering us! If you have any questions feel free to ask the lead developer on Twitter.</p>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="https://twitter.com/#!/ryanttb" rel="external">ryanttb on Twitter</a></li>
+ </ul>
+
+ <h2>docs</h2>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="what/index.html">what?</a></li>
+ <li><a href="quickstart/index.html">quickstart</a></li>
+ <li><a href="html/index.html">html</a></li>
+ <li><a href="geomap/index.html">geomap widget</a></li>
+ <li><a href="geo/index.html">geo namespace</a></li>
+ </ul>
+
+ <p>This project takes pride in having easy-to-use, up-to-date documentation. Before any code is committed, these docs are updated with any public API changes and sometimes internal design decisions. The side effect is that the documenation may be ahead of the code at times. Also, any undocumented features you find in the source should be ignored or asked about.</p>
+
+ <h2>examples</h2>
+
+ <p>Now that that's out of the way, here are some code examples! Use these as a suppliment to reading the above sections but above all, have fun!</p>
+
+ <h3>"everything" examples</h3>
+
+ <p>These first two examples attempt to let you test as many of jQuery Geo's features as possible on one page. The first link is a tiled map, i.e., it has a tilingScheme, set-in-stone zoom levels, and uses at least one tiled map service object. The second link is a dynamic map, i.e., it does not have a tilingScheme, displays fully dynamic data from MassGIS, and uses all shingled map service objects. The second type of map usually redraws slower but allows for more accurate zooming.</p>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="examples/all-tiled.html" rel="external">tiled</a></li>
+ <li><a href="examples/all-shingled.html" rel="external">shingled</a></li>
+ </ul>
+
+ <p>You can find isolated examples of individual jQuery Geo features in the <a href="javascript:document.getElementById('component-examples').scrollIntoView();">component examples</a> section at the bottom of this page.<p>
+
+ <h3>demos</h3>
+
+ <p>The examples in this second set of use the features of jQuery Geo in a more interesting way. They attempt to show & test how you can use different parts jQuery Geo together to build apps and how we can integrate with external data and libraries.</p>
+
+ <ul data-role="listview" data-inset=true>
+ <li><a href="examples/logo.html" rel="external">jQuery Geo logos!</a></li>
+ <li><a href="examples/usastates.html" rel="external">USA states</a></li>
+ <li><a href="examples/twitter-heat.html" rel="external">Twitter heat map</a></li>
+ <li><a href="examples/tracking.html" rel="external">GPS tracking</a></li>
+ <li><a href="examples/hurricane.html" rel="external">Hurricane tracking</a></li>
+ <li><a href="examples/voting.html" rel="external">MA Voting District Demographics</a></li>
+ </ul>
+
+ <h3>showcase</h3>
+
+ <p>This third set are more complete examples using jQuery Geo. These try to implement slimmed-down versions of an existing applications and test how jQuery Geo can be used in real-world situations.</p>
+
+ <ul data-role="listview" data-inset=true>
+ <li><a href="examples/utah/index.html" rel="external"><h3>Atlas Utah!</h3><p>implementation of Utah map cache viewer</p></a></li>
+ <li><a href="http://twheat.jquerygeo.com/" rel="external"><h3>Twheat !</h3><p>full implementation of our Twitter heat map demo</p></a></li>
+ </ul>
+
+ <h3 id="component-examples">component examples</h3>
+
+ <p>This last set of examples attempts to test various components of jQuery Geo in an insolated way.</p>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="examples/simplest.html" rel="external">simplest</a></li>
+ <li><a href="examples/mobile.html" rel="external">mobile</a></li>
+ <li><a href="examples/proj.html" rel="external">proj</a></li>
+ <li><a href="examples/bbox.html" rel="external">bbox</a></li>
+ <li><a href="examples/center.html" rel="external">center, zoom, & pixelSize options</a></li>
+ <li><a href="examples/static.html" rel="external">static mode</a></li>
+ <li><a href="examples/mode-zoom.html" rel="external">zoom mode</a></li>
+ <li><a href="examples/zoom.html" rel="external">zoom method</a></li>
+ <li><a href="examples/panscroll.html" rel="external">pannable & scroll options</a></li>
+ <li><a href="examples/destroy.html" rel="external">destroy</a></li>
+ <li><a href="examples/tiledservices.html" rel="external">tiled services</a></li>
+ <li><a href="examples/shingled.html" rel="external">shingled (dynamic) services</a></li>
+ <li><a href="examples/stringsrc.html" rel="external">string service src</a></li>
+ <li><a href="examples/tilingScheme.html" rel="external">tilingScheme</a></li>
+ <li><a href="examples/opacity.html" rel="external">opacity & toggle</a></li>
+ <li><a href="examples/events.html" rel="external">events</a></li>
+ <li><a href="examples/append.html" rel="external">append</a></li>
+ <li><a href="examples/shapeStyle.html" rel="external">shapeStyle</a></li>
+ <li><a href="examples/find.html" rel="external">find</a></li>
+ <li><a href="examples/remove.html" rel="external">remove</a></li>
+ <li><a href="examples/empty.html" rel="external">empty</a></li>
+ <li><a href="examples/draw.html" rel="external">draw</a></li>
+ <li><a href="examples/measure.html" rel="external">measure</a></li>
+ <li><a href="examples/drawStyle.html" rel="external">drawStyle</a></li>
+ <li><a href="examples/label.html" rel="external">label</a></li>
+ <li><a href="examples/geo-geometry.html" rel="external">geometry functions</a></li>
+ </ul>
+
+ <h2>internals</h2>
+
+ <p>Lastly, short of looking through the source code you can read a bit about the internal design decisions we made in the following section.</p>
+
+ <ul data-role="listview" data-inset=true>
+ <li><a href="internals/index.html">internals</a></li>
+ </ul>
+
+ <img src="images/bostonbuilt.png" alt="Boston Built badge"/>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>internals | jQuery Geo</title>
+ <meta name="description" content="jQuery Geo internals">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="internals" data-role="page" data-theme="b">
+ <div data-role="header">
+ <h1>internals</h1>
+ </div>
+
+ <div data-role="content">
+ <p>We keep some plugin design decisions here.</p>
+ <h2>jQuery UI widget factory</h2>
+ <p>The geomap widget uses the same widget factory that all other jQuery UI and jQuery Mobile widgets use. Like jQuery Mobile, we include a copy of jquery.ui.widget.js in the project. While this adds 3k to the final compressed build it allows us to easilly follow the patterns designed by UI and better integrate into the jQuery plugin community.</p>
+ <pre><code>$.widget( "geo.geomap", { } );</code></pre>
+ <h2>Virtual state</h2>
+ <p>The public properties bbox, bboxMax and center do not always match the internal state of the map widget. In fact internally, geomap only tracks center and pixelSize. The bbox and bboxMax properties are calculated based on the current or max center and pixelSize. In the code, you will see two properties each for each of these. One is public, the other is private. For center, the internal position (_center) is always in internal map units (web mercator meters by default) even if the developer sets the public bbox or center by longitude & latitude.</p>
+ <h2>Initialization options</h2>
+ <p>You may notice that we override jQuery UI's _createWidget function in order to capture the options passed in by the user. <a href="http://twitter.com/ryanttb">Let us know</a> if there's a better way to do that. At the end of _create, we iterate over the passed options and set certain internal state values before creating services and refreshing the map. This insures that we handle supplied bbox or center properly. Since bbox and center can potentially conflict, only supply one. If both are supplied the behavior is technically undefined but currently center will override bbox.</p>
+ <h2>bbox cache</h2>
+ <p>When you append a shape to the map, the geomap widget will cache the shape's bounding box (in non-geodetic
+ coordinates) for faster searches when you call find. When you remove a shape from the map, the cache will be cleared. When you use the $.geo.bbox method on a shape after it has been appended to the map, the cached bounding box will be returned.</p>
+ <pre><code><span class="comment">// the bbox of an appended shape is cached while it is on the map</span>
+var calculatedBbox = $.geo.bbox(shape);
+$("#map").geomap("append", shape);
+var cachedBbox = $.geo.bbox(shape);
+$("#map").geomap("remove", shape);
+var calculatedAgain = $.geo.bbox(shape);</code></pre>
+ <p>jQuery Geo caches the bbox using jQuery's data function under the name geoBbox. Though I can't think of a reason to do so, you can remove this cache by calling removeData directly on the shape object:</p>
+ <pre><code>$.removeData(shape, "geoBbox");</code></pre>
+ <p>jQuery Geo's caching will not alter your geometry object so you don't have to worry about unintentionally storing or sending extra data to a server.</p>
+ <h2>External libraries</h2>
+ <p>Apart from the jQuery UI widget factory, geomap includes a couple external libraries.</p>
+ <h3>Mouse wheel extension 3.0.2</h3>
+ <a href="http://plugins.jquery.com/node/7146">http://plugins.jquery.com/node/7146</a>
+ <p>We've found this to be a very stable mousewheel special event plugin and are using it to handle mouse wheel interaction. This plugin's license comment and source are included intact in the minified releases of jQuery Geo.</p>
+ <h3>Google excanvas</h3>
+ <p>We include parts of Google's excanvas library to support graphic drawing in IE6-8. Only functions required to support jQuery Geo's feature list are included. This library's license comment and source are included intact in the non-minified releases of jQuery Geo. The license comment and partial source are included intact in the minified releases of jQuery Geo.</p>
+ <h3>jsRender</h3>
+ <a href="https://github.com/BorisMoore/jsrender">https://github.com/BorisMoore/jsrender</a>
+ <p>jQuery Geo includes a snapshot of jsRender, the next-generation templating engine from the jQuery team. This is used for measure text templates and src string templates.</p>
+ <h2>Service types</h2>
+ <p>Developers can set the services array used by the geomap widget. When it comes time to draw map images, the geomap widget uses an internal _serviceTypes object. The object contains one property for each service type geomap supports, e.g., tiled and shingled. The type property on each service object determines which serviceType object geomap uses to refresh the service. The following code snippet is a simplification of the relationship.</p>
+ <pre><code>options: {
+ services: [
+ {
+ "class": "osm",
+ type: "tiled"
+ /* ,... */
+ }
+ ]
+},
+
+_serviceTypes: {
+ tiled: {
+ refresh: function (map, service) {
+ }
+ /* ,... */
+ }
+}</code></pre>
+ <p>In the future the _serviceTypes property will be public and developers can extend the service types geomap supports.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+// excanvas
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/*
+ * AppGeo/geo
+ * (c) 2007-2011, Applied Geographics, Inc. All rights reserved.
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+
+
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// Known Issues:
+//
+// * Patterns only support repeat.
+// * Radial gradient are not implemented. The VML version of these look very
+// different from the canvas one.
+// * Clipping paths are not implemented.
+// * Coordsize. The width and height attribute have higher priority than the
+// width and height style values which isn't correct.
+// * Painting mode isn't implemented.
+// * Canvas width/height should is using content-box by default. IE in
+// Quirks mode will draw the canvas using border-box. Either change your
+// doctype to HTML5
+// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
+// or use Box Sizing Behavior from WebFX
+// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
+// * Non uniform scaling does not correctly scale strokes.
+// * Optimize. There is always room for speed improvements.
+
+// Only add this code if we do not already have a canvas implementation
+if (!document.createElement('canvas').getContext) {
+
+ (function () {
+
+ // alias some functions to make (compiled) code shorter
+ var m = Math;
+ var mr = m.round;
+ var ms = m.sin;
+ var mc = m.cos;
+ var abs = m.abs;
+ var sqrt = m.sqrt;
+
+ // this is used for sub pixel precision
+ var Z = 10;
+ var Z2 = Z / 2;
+
+ var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
+
+ /**
+ * This funtion is assigned to the <canvas> elements as element.getContext().
+ * @this {HTMLElement}
+ * @return {CanvasRenderingContext2D_}
+ */
+ function getContext() {
+ return this.context_ ||
+ (this.context_ = new CanvasRenderingContext2D_(this));
+ }
+
+ var slice = Array.prototype.slice;
+
+ /**
+ * Binds a function to an object. The returned function will always use the
+ * passed in {@code obj} as {@code this}.
+ *
+ * Example:
+ *
+ * g = bind(f, obj, a, b)
+ * g(c, d) // will do f.call(obj, a, b, c, d)
+ *
+ * @param {Function} f The function to bind the object to
+ * @param {Object} obj The object that should act as this when the function
+ * is called
+ * @param {*} var_args Rest arguments that will be used as the initial
+ * arguments when the function is called
+ * @return {Function} A new function that has bound this
+ */
+ function bind(f, obj, var_args) {
+ var a = slice.call(arguments, 2);
+ return function () {
+ return f.apply(obj, a.concat(slice.call(arguments)));
+ };
+ }
+
+ function encodeHtmlAttribute(s) {
+ return String(s).replace(/&/g, '&').replace(/"/g, '"');
+ }
+
+ function addNamespace(doc, prefix, urn) {
+ if (!doc.namespaces[prefix]) {
+ doc.namespaces.add(prefix, urn, '#default#VML');
+ }
+ }
+
+ function addNamespacesAndStylesheet(doc) {
+ addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
+ addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
+
+ // Setup default CSS. Only add one style sheet per document
+ if (!doc.styleSheets['ex_canvas_']) {
+ var ss = doc.createStyleSheet();
+ ss.owningElement.id = 'ex_canvas_';
+ ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
+ // default size is 300x150 in Gecko and Opera
+ 'text-align:left;width:300px;height:150px}';
+ }
+ }
+
+ // Add namespaces and stylesheet at startup.
+ addNamespacesAndStylesheet(document);
+
+ var G_vmlCanvasManager_ = {
+ init: function (opt_doc) {
+ var doc = opt_doc || document;
+ // Create a dummy element so that IE will allow canvas elements to be
+ // recognized.
+ doc.createElement('canvas');
+ doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
+ },
+
+ init_: function (doc) {
+ // find all canvas elements
+ var els = doc.getElementsByTagName('canvas');
+ for (var i = 0; i < els.length; i++) {
+ this.initElement(els[i]);
+ }
+ },
+
+ /**
+ * Public initializes a canvas element so that it can be used as canvas
+ * element from now on. This is called automatically before the page is
+ * loaded but if you are creating elements using createElement you need to
+ * make sure this is called on the element.
+ * @param {HTMLElement} el The canvas element to initialize.
+ * @return {HTMLElement} the element that was created.
+ */
+ initElement: function (el) {
+ if (!el.getContext) {
+ el.getContext = getContext;
+
+ // Add namespaces and stylesheet to document of the element.
+ addNamespacesAndStylesheet(el.ownerDocument);
+
+ // Remove fallback content. There is no way to hide text nodes so we
+ // just remove all childNodes. We could hide all elements and remove
+ // text nodes but who really cares about the fallback content.
+ el.innerHTML = '';
+
+ // do not use inline function because that will leak memory
+ el.attachEvent('onpropertychange', onPropertyChange);
+ el.attachEvent('onresize', onResize);
+
+ var attrs = el.attributes;
+ if (attrs.width && attrs.width.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setWidth_(attrs.width.nodeValue);
+ el.style.width = attrs.width.nodeValue + 'px';
+ } else {
+ el.width = el.clientWidth;
+ }
+ if (attrs.height && attrs.height.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setHeight_(attrs.height.nodeValue);
+ el.style.height = attrs.height.nodeValue + 'px';
+ } else {
+ el.height = el.clientHeight;
+ }
+ //el.getContext().setCoordsize_()
+ }
+ return el;
+ }
+ };
+
+ function onPropertyChange(e) {
+ var el = e.srcElement;
+
+ switch (e.propertyName) {
+ case 'width':
+ el.getContext().clearRect();
+ el.style.width = el.attributes.width.nodeValue + 'px';
+ // In IE8 this does not trigger onresize.
+ el.firstChild.style.width = el.clientWidth + 'px';
+ break;
+ case 'height':
+ el.getContext().clearRect();
+ el.style.height = el.attributes.height.nodeValue + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ break;
+ }
+ }
+
+ function onResize(e) {
+ var el = e.srcElement;
+ if (el.firstChild) {
+ el.firstChild.style.width = el.clientWidth + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ }
+ }
+
+ G_vmlCanvasManager_.init();
+
+ // precompute "00" to "FF"
+ var decToHex = [];
+ for (var i = 0; i < 16; i++) {
+ for (var j = 0; j < 16; j++) {
+ decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
+ }
+ }
+
+ function createMatrixIdentity() {
+ return [
+ [1, 0, 0],
+ [0, 1, 0],
+ [0, 0, 1]
+ ];
+ }
+
+ function matrixMultiply(m1, m2) {
+ var result = createMatrixIdentity();
+
+ for (var x = 0; x < 3; x++) {
+ for (var y = 0; y < 3; y++) {
+ var sum = 0;
+
+ for (var z = 0; z < 3; z++) {
+ sum += m1[x][z] * m2[z][y];
+ }
+
+ result[x][y] = sum;
+ }
+ }
+ return result;
+ }
+
+ function copyState(o1, o2) {
+ o2.fillStyle = o1.fillStyle;
+ o2.lineCap = o1.lineCap;
+ o2.lineJoin = o1.lineJoin;
+ o2.lineWidth = o1.lineWidth;
+ o2.miterLimit = o1.miterLimit;
+ o2.shadowBlur = o1.shadowBlur;
+ o2.shadowColor = o1.shadowColor;
+ o2.shadowOffsetX = o1.shadowOffsetX;
+ o2.shadowOffsetY = o1.shadowOffsetY;
+ o2.strokeStyle = o1.strokeStyle;
+ o2.globalAlpha = o1.globalAlpha;
+ o2.font = o1.font;
+ o2.textAlign = o1.textAlign;
+ o2.textBaseline = o1.textBaseline;
+ o2.arcScaleX_ = o1.arcScaleX_;
+ o2.arcScaleY_ = o1.arcScaleY_;
+ o2.lineScale_ = o1.lineScale_;
+ }
+
+ // var colorData = {
+ // aliceblue: '#F0F8FF',
+ // antiquewhite: '#FAEBD7',
+ // aquamarine: '#7FFFD4',
+ // azure: '#F0FFFF',
+ // beige: '#F5F5DC',
+ // bisque: '#FFE4C4',
+ // black: '#000000',
+ // blanchedalmond: '#FFEBCD',
+ // blueviolet: '#8A2BE2',
+ // brown: '#A52A2A',
+ // burlywood: '#DEB887',
+ // cadetblue: '#5F9EA0',
+ // chartreuse: '#7FFF00',
+ // chocolate: '#D2691E',
+ // coral: '#FF7F50',
+ // cornflowerblue: '#6495ED',
+ // cornsilk: '#FFF8DC',
+ // crimson: '#DC143C',
+ // cyan: '#00FFFF',
+ // darkblue: '#00008B',
+ // darkcyan: '#008B8B',
+ // darkgoldenrod: '#B8860B',
+ // darkgray: '#A9A9A9',
+ // darkgreen: '#006400',
+ // darkgrey: '#A9A9A9',
+ // darkkhaki: '#BDB76B',
+ // darkmagenta: '#8B008B',
+ // darkolivegreen: '#556B2F',
+ // darkorange: '#FF8C00',
+ // darkorchid: '#9932CC',
+ // darkred: '#8B0000',
+ // darksalmon: '#E9967A',
+ // darkseagreen: '#8FBC8F',
+ // darkslateblue: '#483D8B',
+ // darkslategray: '#2F4F4F',
+ // darkslategrey: '#2F4F4F',
+ // darkturquoise: '#00CED1',
+ // darkviolet: '#9400D3',
+ // deeppink: '#FF1493',
+ // deepskyblue: '#00BFFF',
+ // dimgray: '#696969',
+ // dimgrey: '#696969',
+ // dodgerblue: '#1E90FF',
+ // firebrick: '#B22222',
+ // floralwhite: '#FFFAF0',
+ // forestgreen: '#228B22',
+ // gainsboro: '#DCDCDC',
+ // ghostwhite: '#F8F8FF',
+ // gold: '#FFD700',
+ // goldenrod: '#DAA520',
+ // grey: '#808080',
+ // greenyellow: '#ADFF2F',
+ // honeydew: '#F0FFF0',
+ // hotpink: '#FF69B4',
+ // indianred: '#CD5C5C',
+ // indigo: '#4B0082',
+ // ivory: '#FFFFF0',
+ // khaki: '#F0E68C',
+ // lavender: '#E6E6FA',
+ // lavenderblush: '#FFF0F5',
+ // lawngreen: '#7CFC00',
+ // lemonchiffon: '#FFFACD',
+ // lightblue: '#ADD8E6',
+ // lightcoral: '#F08080',
+ // lightcyan: '#E0FFFF',
+ // lightgoldenrodyellow: '#FAFAD2',
+ // lightgreen: '#90EE90',
+ // lightgrey: '#D3D3D3',
+ // lightpink: '#FFB6C1',
+ // lightsalmon: '#FFA07A',
+ // lightseagreen: '#20B2AA',
+ // lightskyblue: '#87CEFA',
+ // lightslategray: '#778899',
+ // lightslategrey: '#778899',
+ // lightsteelblue: '#B0C4DE',
+ // lightyellow: '#FFFFE0',
+ // limegreen: '#32CD32',
+ // linen: '#FAF0E6',
+ // magenta: '#FF00FF',
+ // mediumaquamarine: '#66CDAA',
+ // mediumblue: '#0000CD',
+ // mediumorchid: '#BA55D3',
+ // mediumpurple: '#9370DB',
+ // mediumseagreen: '#3CB371',
+ // mediumslateblue: '#7B68EE',
+ // mediumspringgreen: '#00FA9A',
+ // mediumturquoise: '#48D1CC',
+ // mediumvioletred: '#C71585',
+ // midnightblue: '#191970',
+ // mintcream: '#F5FFFA',
+ // mistyrose: '#FFE4E1',
+ // moccasin: '#FFE4B5',
+ // navajowhite: '#FFDEAD',
+ // oldlace: '#FDF5E6',
+ // olivedrab: '#6B8E23',
+ // orange: '#FFA500',
+ // orangered: '#FF4500',
+ // orchid: '#DA70D6',
+ // palegoldenrod: '#EEE8AA',
+ // palegreen: '#98FB98',
+ // paleturquoise: '#AFEEEE',
+ // palevioletred: '#DB7093',
+ // papayawhip: '#FFEFD5',
+ // peachpuff: '#FFDAB9',
+ // peru: '#CD853F',
+ // pink: '#FFC0CB',
+ // plum: '#DDA0DD',
+ // powderblue: '#B0E0E6',
+ // rosybrown: '#BC8F8F',
+ // royalblue: '#4169E1',
+ // saddlebrown: '#8B4513',
+ // salmon: '#FA8072',
+ // sandybrown: '#F4A460',
+ // seagreen: '#2E8B57',
+ // seashell: '#FFF5EE',
+ // sienna: '#A0522D',
+ // skyblue: '#87CEEB',
+ // slateblue: '#6A5ACD',
+ // slategray: '#708090',
+ // slategrey: '#708090',
+ // snow: '#FFFAFA',
+ // springgreen: '#00FF7F',
+ // steelblue: '#4682B4',
+ // tan: '#D2B48C',
+ // thistle: '#D8BFD8',
+ // tomato: '#FF6347',
+ // turquoise: '#40E0D0',
+ // violet: '#EE82EE',
+ // wheat: '#F5DEB3',
+ // whitesmoke: '#F5F5F5',
+ // yellowgreen: '#9ACD32'
+ // };
+
+
+ function getRgbHslContent(styleString) {
+ var start = styleString.indexOf('(', 3);
+ var end = styleString.indexOf(')', start + 1);
+ var parts = styleString.substring(start + 1, end).split(',');
+ // add alpha if needed
+ if (parts.length != 4 || styleString.charAt(3) != 'a') {
+ parts[3] = 1;
+ }
+ return parts;
+ }
+
+ function percent(s) {
+ return parseFloat(s) / 100;
+ }
+
+ function clamp(v, min, max) {
+ return Math.min(max, Math.max(min, v));
+ }
+
+ function hslToRgb(parts) {
+ var r, g, b, h, s, l;
+ h = parseFloat(parts[0]) / 360 % 360;
+ if (h < 0)
+ h++;
+ s = clamp(percent(parts[1]), 0, 1);
+ l = clamp(percent(parts[2]), 0, 1);
+ if (s == 0) {
+ r = g = b = l; // achromatic
+ } else {
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ var p = 2 * l - q;
+ r = hueToRgb(p, q, h + 1 / 3);
+ g = hueToRgb(p, q, h);
+ b = hueToRgb(p, q, h - 1 / 3);
+ }
+
+ return '#' + decToHex[Math.floor(r * 255)] +
+ decToHex[Math.floor(g * 255)] +
+ decToHex[Math.floor(b * 255)];
+ }
+
+ function hueToRgb(m1, m2, h) {
+ if (h < 0)
+ h++;
+ if (h > 1)
+ h--;
+
+ if (6 * h < 1)
+ return m1 + (m2 - m1) * 6 * h;
+ else if (2 * h < 1)
+ return m2;
+ else if (3 * h < 2)
+ return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+ else
+ return m1;
+ }
+
+ var processStyleCache = {};
+
+ function processStyle(styleString) {
+ if (styleString in processStyleCache) {
+ return processStyleCache[styleString];
+ }
+
+ var str, alpha = 1;
+
+ styleString = String(styleString);
+ if (styleString.charAt(0) == '#') {
+ str = styleString;
+ } else if (/^rgb/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ var str = '#', n;
+ for (var i = 0; i < 3; i++) {
+ if (parts[i].indexOf('%') != -1) {
+ n = Math.floor(percent(parts[i]) * 255);
+ } else {
+ n = +parts[i];
+ }
+ str += decToHex[clamp(n, 0, 255)];
+ }
+ alpha = +parts[3];
+ } else if (/^hsl/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ str = hslToRgb(parts);
+ alpha = parts[3];
+ } else {
+ str = /*colorData[styleString] ||*/styleString;
+ }
+ return processStyleCache[styleString] = { color: str, alpha: alpha };
+ }
+
+ var DEFAULT_STYLE = {
+ style: 'normal',
+ variant: 'normal',
+ weight: 'normal',
+ size: 10,
+ family: 'sans-serif'
+ };
+
+ // Internal text style cache
+ // var fontStyleCache = {};
+
+ // function processFontStyle(styleString) {
+ // if (fontStyleCache[styleString]) {
+ // return fontStyleCache[styleString];
+ // }
+
+ // var el = document.createElement('div');
+ // var style = el.style;
+ // try {
+ // style.font = styleString;
+ // } catch (ex) {
+ // // Ignore failures to set to invalid font.
+ // }
+
+ // return fontStyleCache[styleString] = {
+ // style: style.fontStyle || DEFAULT_STYLE.style,
+ // variant: style.fontVariant || DEFAULT_STYLE.variant,
+ // weight: style.fontWeight || DEFAULT_STYLE.weight,
+ // size: style.fontSize || DEFAULT_STYLE.size,
+ // family: style.fontFamily || DEFAULT_STYLE.family
+ // };
+ // }
+
+ // function getComputedStyle(style, element) {
+ // var computedStyle = {};
+
+ // for (var p in style) {
+ // computedStyle[p] = style[p];
+ // }
+
+ // // Compute the size
+ // var canvasFontSize = parseFloat(element.currentStyle.fontSize),
+ // fontSize = parseFloat(style.size);
+
+ // if (typeof style.size == 'number') {
+ // computedStyle.size = style.size;
+ // } else if (style.size.indexOf('px') != -1) {
+ // computedStyle.size = fontSize;
+ // } else if (style.size.indexOf('em') != -1) {
+ // computedStyle.size = canvasFontSize * fontSize;
+ // } else if(style.size.indexOf('%') != -1) {
+ // computedStyle.size = (canvasFontSize / 100) * fontSize;
+ // } else if (style.size.indexOf('pt') != -1) {
+ // computedStyle.size = fontSize / .75;
+ // } else {
+ // computedStyle.size = canvasFontSize;
+ // }
+
+ // // Different scaling between normal text and VML text. This was found using
+ // // trial and error to get the same size as non VML text.
+ // computedStyle.size *= 0.981;
+
+ // return computedStyle;
+ // }
+
+ // function buildStyle(style) {
+ // return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
+ // style.size + 'px ' + style.family;
+ // }
+
+ var lineCapMap = {
+ 'butt': 'flat',
+ 'round': 'round'
+ };
+
+ function processLineCap(lineCap) {
+ return lineCapMap[lineCap] || 'square';
+ }
+
+ /**
+ * This class implements CanvasRenderingContext2D interface as described by
+ * the WHATWG.
+ * @param {HTMLElement} canvasElement The element that the 2D context should
+ * be associated with
+ */
+ function CanvasRenderingContext2D_(canvasElement) {
+ this.m_ = createMatrixIdentity();
+
+ this.mStack_ = [];
+ this.aStack_ = [];
+ this.currentPath_ = [];
+
+ // Canvas context properties
+ this.strokeStyle = '#000';
+ this.fillStyle = '#000';
+
+ this.lineWidth = 1;
+ this.lineJoin = 'miter';
+ this.lineCap = 'butt';
+ this.miterLimit = Z * 1;
+ this.globalAlpha = 1;
+ //this.font = '10px sans-serif';
+ //this.textAlign = 'left';
+ //this.textBaseline = 'alphabetic';
+ this.canvas = canvasElement;
+
+ var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
+ canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
+ var el = canvasElement.ownerDocument.createElement('div');
+ el.style.cssText = cssText;
+ canvasElement.appendChild(el);
+
+ var overlayEl = el.cloneNode(false);
+ // Use a non transparent background.
+ overlayEl.style.backgroundColor = 'red';
+ overlayEl.style.filter = 'alpha(opacity=0)';
+ canvasElement.appendChild(overlayEl);
+
+ this.element_ = el;
+ this.arcScaleX_ = 1;
+ this.arcScaleY_ = 1;
+ this.lineScale_ = 1;
+ }
+
+ var contextPrototype = CanvasRenderingContext2D_.prototype;
+ contextPrototype.clearRect = function () {
+ if (this.textMeasureEl_) {
+ this.textMeasureEl_.removeNode(true);
+ this.textMeasureEl_ = null;
+ }
+ this.element_.innerHTML = '';
+ };
+
+ contextPrototype.beginPath = function () {
+ // TODO: Branch current matrix so that save/restore has no effect
+ // as per safari docs.
+ this.currentPath_ = [];
+ };
+
+ contextPrototype.moveTo = function (aX, aY) {
+ var p = getCoords(this, aX, aY);
+ this.currentPath_.push({ type: 'moveTo', x: p.x, y: p.y });
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
+ };
+
+ contextPrototype.lineTo = function (aX, aY) {
+ var p = getCoords(this, aX, aY);
+ this.currentPath_.push({ type: 'lineTo', x: p.x, y: p.y });
+
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
+ };
+
+ contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
+ aCP2x, aCP2y,
+ aX, aY) {
+ var p = getCoords(this, aX, aY);
+ var cp1 = getCoords(this, aCP1x, aCP1y);
+ var cp2 = getCoords(this, aCP2x, aCP2y);
+ bezierCurveTo(this, cp1, cp2, p);
+ };
+
+ // Helper function that takes the already fixed cordinates.
+ function bezierCurveTo(self, cp1, cp2, p) {
+ self.currentPath_.push({
+ type: 'bezierCurveTo',
+ cp1x: cp1.x,
+ cp1y: cp1.y,
+ cp2x: cp2.x,
+ cp2y: cp2.y,
+ x: p.x,
+ y: p.y
+ });
+ self.currentX_ = p.x;
+ self.currentY_ = p.y;
+ }
+
+ contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
+ // the following is lifted almost directly from
+ // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
+
+ var cp = getCoords(this, aCPx, aCPy);
+ var p = getCoords(this, aX, aY);
+
+ var cp1 = {
+ x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
+ y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
+ };
+ var cp2 = {
+ x: cp1.x + (p.x - this.currentX_) / 3.0,
+ y: cp1.y + (p.y - this.currentY_) / 3.0
+ };
+
+ bezierCurveTo(this, cp1, cp2, p);
+ };
+
+ contextPrototype.arc = function (aX, aY, aRadius,
+ aStartAngle, aEndAngle, aClockwise) {
+ aRadius *= Z;
+ var arcType = aClockwise ? 'at' : 'wa';
+
+ var xStart = aX + mc(aStartAngle) * aRadius - Z2;
+ var yStart = aY + ms(aStartAngle) * aRadius - Z2;
+
+ var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
+ var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
+
+ // IE won't render arches drawn counter clockwise if xStart == xEnd.
+ if (xStart == xEnd && !aClockwise) {
+ xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
+ // that can be represented in binary
+ }
+
+ var p = getCoords(this, aX, aY);
+ var pStart = getCoords(this, xStart, yStart);
+ var pEnd = getCoords(this, xEnd, yEnd);
+
+ this.currentPath_.push({ type: arcType,
+ x: p.x,
+ y: p.y,
+ radius: aRadius,
+ xStart: pStart.x,
+ yStart: pStart.y,
+ xEnd: pEnd.x,
+ yEnd: pEnd.y
+ });
+
+ };
+
+ // contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // };
+
+ // contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
+ // var oldPath = this.currentPath_;
+ // this.beginPath();
+
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // this.stroke();
+
+ // this.currentPath_ = oldPath;
+ // };
+
+ // contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
+ // var oldPath = this.currentPath_;
+ // this.beginPath();
+
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // this.fill();
+
+ // this.currentPath_ = oldPath;
+ // };
+
+ // contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
+ // var gradient = new CanvasGradient_('gradient');
+ // gradient.x0_ = aX0;
+ // gradient.y0_ = aY0;
+ // gradient.x1_ = aX1;
+ // gradient.y1_ = aY1;
+ // return gradient;
+ // };
+
+ // contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
+ // aX1, aY1, aR1) {
+ // var gradient = new CanvasGradient_('gradientradial');
+ // gradient.x0_ = aX0;
+ // gradient.y0_ = aY0;
+ // gradient.r0_ = aR0;
+ // gradient.x1_ = aX1;
+ // gradient.y1_ = aY1;
+ // gradient.r1_ = aR1;
+ // return gradient;
+ // };
+
+ // contextPrototype.drawImage = function(image, var_args) {
+ // var dx, dy, dw, dh, sx, sy, sw, sh;
+
+ // // to find the original width we overide the width and height
+ // var oldRuntimeWidth = image.runtimeStyle.width;
+ // var oldRuntimeHeight = image.runtimeStyle.height;
+ // image.runtimeStyle.width = 'auto';
+ // image.runtimeStyle.height = 'auto';
+
+ // // get the original size
+ // var w = image.width;
+ // var h = image.height;
+
+ // // and remove overides
+ // image.runtimeStyle.width = oldRuntimeWidth;
+ // image.runtimeStyle.height = oldRuntimeHeight;
+
+ // if (arguments.length == 3) {
+ // dx = arguments[1];
+ // dy = arguments[2];
+ // sx = sy = 0;
+ // sw = dw = w;
+ // sh = dh = h;
+ // } else if (arguments.length == 5) {
+ // dx = arguments[1];
+ // dy = arguments[2];
+ // dw = arguments[3];
+ // dh = arguments[4];
+ // sx = sy = 0;
+ // sw = w;
+ // sh = h;
+ // } else if (arguments.length == 9) {
+ // sx = arguments[1];
+ // sy = arguments[2];
+ // sw = arguments[3];
+ // sh = arguments[4];
+ // dx = arguments[5];
+ // dy = arguments[6];
+ // dw = arguments[7];
+ // dh = arguments[8];
+ // } else {
+ // throw Error('Invalid number of arguments');
+ // }
+
+ // var d = getCoords(this, dx, dy);
+
+ // var w2 = sw / 2;
+ // var h2 = sh / 2;
+
+ // var vmlStr = [];
+
+ // var W = 10;
+ // var H = 10;
+
+ // // For some reason that I've now forgotten, using divs didn't work
+ // vmlStr.push(' <g_vml_:group',
+ // ' coordsize="', Z * W, ',', Z * H, '"',
+ // ' coordorigin="0,0"' ,
+ // ' style="width:', W, 'px;height:', H, 'px;position:absolute;');
+
+ // // If filters are necessary (rotation exists), create them
+ // // filters are bog-slow, so only create them if abbsolutely necessary
+ // // The following check doesn't account for skews (which don't exist
+ // // in the canvas spec (yet) anyway.
+
+ // if (this.m_[0][0] != 1 || this.m_[0][1] ||
+ // this.m_[1][1] != 1 || this.m_[1][0]) {
+ // var filter = [];
+
+ // // Note the 12/21 reversal
+ // filter.push('M11=', this.m_[0][0], ',',
+ // 'M12=', this.m_[1][0], ',',
+ // 'M21=', this.m_[0][1], ',',
+ // 'M22=', this.m_[1][1], ',',
+ // 'Dx=', mr(d.x / Z), ',',
+ // 'Dy=', mr(d.y / Z), '');
+
+ // // Bounding box calculation (need to minimize displayed area so that
+ // // filters don't waste time on unused pixels.
+ // var max = d;
+ // var c2 = getCoords(this, dx + dw, dy);
+ // var c3 = getCoords(this, dx, dy + dh);
+ // var c4 = getCoords(this, dx + dw, dy + dh);
+
+ // max.x = m.max(max.x, c2.x, c3.x, c4.x);
+ // max.y = m.max(max.y, c2.y, c3.y, c4.y);
+
+ // vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
+ // 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
+ // filter.join(''), ", sizingmethod='clip');");
+
+ // } else {
+ // vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
+ // }
+
+ // vmlStr.push(' ">' ,
+ // '<g_vml_:image src="', image.src, '"',
+ // ' style="width:', Z * dw, 'px;',
+ // ' height:', Z * dh, 'px"',
+ // ' cropleft="', sx / w, '"',
+ // ' croptop="', sy / h, '"',
+ // ' cropright="', (w - sx - sw) / w, '"',
+ // ' cropbottom="', (h - sy - sh) / h, '"',
+ // ' />',
+ // '</g_vml_:group>');
+
+ // this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
+ // };
+
+ contextPrototype.stroke = function (aFill) {
+ var lineStr = [];
+ var lineOpen = false;
+
+ var W = 10;
+ var H = 10;
+
+ lineStr.push('<g_vml_:shape',
+ ' filled="', !!aFill, '"',
+ ' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
+ ' coordorigin="0,0"',
+ ' coordsize="', Z * W, ',', Z * H, '"',
+ ' stroked="', !aFill, '"',
+ ' path="');
+
+ var newSeq = false;
+ var min = { x: null, y: null };
+ var max = { x: null, y: null };
+
+ for (var i = 0; i < this.currentPath_.length; i++) {
+ var p = this.currentPath_[i];
+ var c;
+
+ switch (p.type) {
+ case 'moveTo':
+ c = p;
+ lineStr.push(' m ', mr(p.x), ',', mr(p.y));
+ break;
+ case 'lineTo':
+ lineStr.push(' l ', mr(p.x), ',', mr(p.y));
+ break;
+ case 'close':
+ lineStr.push(' x ');
+ p = null;
+ break;
+ case 'bezierCurveTo':
+ lineStr.push(' c ',
+ mr(p.cp1x), ',', mr(p.cp1y), ',',
+ mr(p.cp2x), ',', mr(p.cp2y), ',',
+ mr(p.x), ',', mr(p.y));
+ break;
+ case 'at':
+ case 'wa':
+ lineStr.push(' ', p.type, ' ',
+ mr(p.x - this.arcScaleX_ * p.radius), ',',
+ mr(p.y - this.arcScaleY_ * p.radius), ' ',
+ mr(p.x + this.arcScaleX_ * p.radius), ',',
+ mr(p.y + this.arcScaleY_ * p.radius), ' ',
+ mr(p.xStart), ',', mr(p.yStart), ' ',
+ mr(p.xEnd), ',', mr(p.yEnd));
+ break;
+ }
+
+
+ // TODO: Following is broken for curves due to
+ // move to proper paths.
+
+ // Figure out dimensions so we can do gradient fills
+ // properly
+ if (p) {
+ if (min.x == null || p.x < min.x) {
+ min.x = p.x;
+ }
+ if (max.x == null || p.x > max.x) {
+ max.x = p.x;
+ }
+ if (min.y == null || p.y < min.y) {
+ min.y = p.y;
+ }
+ if (max.y == null || p.y > max.y) {
+ max.y = p.y;
+ }
+ }
+ }
+ lineStr.push(' ">');
+
+ if (!aFill) {
+ appendStroke(this, lineStr);
+ } else {
+ appendFill(this, lineStr, min, max);
+ }
+
+ lineStr.push('</g_vml_:shape>');
+
+ this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ };
+
+ function appendStroke(ctx, lineStr) {
+ var a = processStyle(ctx.strokeStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
+ var lineWidth = ctx.lineScale_ * ctx.lineWidth;
+
+ // VML cannot correctly render a line if the width is less than 1px.
+ // In that case, we dilute the color to make the line look thinner.
+ if (lineWidth < 1) {
+ opacity *= lineWidth;
+ }
+
+ lineStr.push(
+ '<g_vml_:stroke',
+ ' opacity="', opacity, '"',
+ ' joinstyle="', ctx.lineJoin, '"',
+ ' miterlimit="', ctx.miterLimit, '"',
+ ' endcap="', processLineCap(ctx.lineCap), '"',
+ ' weight="', lineWidth, 'px"',
+ ' color="', color, '" />'
+ );
+ }
+
+ function appendFill(ctx, lineStr, min, max) {
+ var fillStyle = ctx.fillStyle;
+ var arcScaleX = ctx.arcScaleX_;
+ var arcScaleY = ctx.arcScaleY_;
+ var width = max.x - min.x;
+ var height = max.y - min.y;
+ // if (fillStyle instanceof CanvasGradient_) {
+ // // TODO: Gradients transformed with the transformation matrix.
+ // var angle = 0;
+ // var focus = {x: 0, y: 0};
+
+ // // additional offset
+ // var shift = 0;
+ // // scale factor for offset
+ // var expansion = 1;
+
+ // if (fillStyle.type_ == 'gradient') {
+ // var x0 = fillStyle.x0_ / arcScaleX;
+ // var y0 = fillStyle.y0_ / arcScaleY;
+ // var x1 = fillStyle.x1_ / arcScaleX;
+ // var y1 = fillStyle.y1_ / arcScaleY;
+ // var p0 = getCoords(ctx, x0, y0);
+ // var p1 = getCoords(ctx, x1, y1);
+ // var dx = p1.x - p0.x;
+ // var dy = p1.y - p0.y;
+ // angle = Math.atan2(dx, dy) * 180 / Math.PI;
+
+ // // The angle should be a non-negative number.
+ // if (angle < 0) {
+ // angle += 360;
+ // }
+
+ // // Very small angles produce an unexpected result because they are
+ // // converted to a scientific notation string.
+ // if (angle < 1e-6) {
+ // angle = 0;
+ // }
+ // } else {
+ // var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
+ // focus = {
+ // x: (p0.x - min.x) / width,
+ // y: (p0.y - min.y) / height
+ // };
+
+ // width /= arcScaleX * Z;
+ // height /= arcScaleY * Z;
+ // var dimension = m.max(width, height);
+ // shift = 2 * fillStyle.r0_ / dimension;
+ // expansion = 2 * fillStyle.r1_ / dimension - shift;
+ // }
+
+ // // We need to sort the color stops in ascending order by offset,
+ // // otherwise IE won't interpret it correctly.
+ // var stops = fillStyle.colors_;
+ // stops.sort(function(cs1, cs2) {
+ // return cs1.offset - cs2.offset;
+ // });
+
+ // var length = stops.length;
+ // var color1 = stops[0].color;
+ // var color2 = stops[length - 1].color;
+ // var opacity1 = stops[0].alpha * ctx.globalAlpha;
+ // var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
+
+ // var colors = [];
+ // for (var i = 0; i < length; i++) {
+ // var stop = stops[i];
+ // colors.push(stop.offset * expansion + shift + ' ' + stop.color);
+ // }
+
+ // // When colors attribute is used, the meanings of opacity and o:opacity2
+ // // are reversed.
+ // lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
+ // ' method="none" focus="100%"',
+ // ' color="', color1, '"',
+ // ' color2="', color2, '"',
+ // ' colors="', colors.join(','), '"',
+ // ' opacity="', opacity2, '"',
+ // ' g_o_:opacity2="', opacity1, '"',
+ // ' angle="', angle, '"',
+ // ' focusposition="', focus.x, ',', focus.y, '" />');
+ // } else if (fillStyle instanceof CanvasPattern_) {
+ // if (width && height) {
+ // var deltaLeft = -min.x;
+ // var deltaTop = -min.y;
+ // lineStr.push('<g_vml_:fill',
+ // ' position="',
+ // deltaLeft / width * arcScaleX * arcScaleX, ',',
+ // deltaTop / height * arcScaleY * arcScaleY, '"',
+ // ' type="tile"',
+ // // TODO: Figure out the correct size to fit the scale.
+ // //' size="', w, 'px ', h, 'px"',
+ // ' src="', fillStyle.src_, '" />');
+ // }
+ // } else {
+ var a = processStyle(ctx.fillStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
+ lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
+ '" />');
+ // }
+ }
+
+ contextPrototype.fill = function () {
+ this.stroke(true);
+ };
+
+ contextPrototype.closePath = function () {
+ this.currentPath_.push({ type: 'close' });
+ };
+
+ function getCoords(ctx, aX, aY) {
+ var m = ctx.m_;
+ return {
+ x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
+ y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
+ };
+ };
+
+ contextPrototype.save = function () {
+ var o = {};
+ copyState(this, o);
+ this.aStack_.push(o);
+ this.mStack_.push(this.m_);
+ this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
+ };
+
+ contextPrototype.restore = function () {
+ if (this.aStack_.length) {
+ copyState(this.aStack_.pop(), this);
+ this.m_ = this.mStack_.pop();
+ }
+ };
+
+ function matrixIsFinite(m) {
+ return isFinite(m[0][0]) && isFinite(m[0][1]) &&
+ isFinite(m[1][0]) && isFinite(m[1][1]) &&
+ isFinite(m[2][0]) && isFinite(m[2][1]);
+ }
+
+ function setM(ctx, m, updateLineScale) {
+ if (!matrixIsFinite(m)) {
+ return;
+ }
+ ctx.m_ = m;
+
+ if (updateLineScale) {
+ // Get the line scale.
+ // Determinant of this.m_ means how much the area is enlarged by the
+ // transformation. So its square root can be used as a scale factor
+ // for width.
+ var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
+ ctx.lineScale_ = sqrt(abs(det));
+ }
+ }
+
+ contextPrototype.translate = function (aX, aY) {
+ var m1 = [
+ [1, 0, 0],
+ [0, 1, 0],
+ [aX, aY, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), false);
+ };
+
+ // contextPrototype.rotate = function(aRot) {
+ // var c = mc(aRot);
+ // var s = ms(aRot);
+
+ // var m1 = [
+ // [c, s, 0],
+ // [-s, c, 0],
+ // [0, 0, 1]
+ // ];
+
+ // setM(this, matrixMultiply(m1, this.m_), false);
+ // };
+
+ contextPrototype.scale = function (aX, aY) {
+ this.arcScaleX_ *= aX;
+ this.arcScaleY_ *= aY;
+ var m1 = [
+ [aX, 0, 0],
+ [0, aY, 0],
+ [0, 0, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), true);
+ };
+
+ // contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
+ // var m1 = [
+ // [m11, m12, 0],
+ // [m21, m22, 0],
+ // [dx, dy, 1]
+ // ];
+
+ // setM(this, matrixMultiply(m1, this.m_), true);
+ // };
+
+ // contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
+ // var m = [
+ // [m11, m12, 0],
+ // [m21, m22, 0],
+ // [dx, dy, 1]
+ // ];
+
+ // setM(this, m, true);
+ // };
+
+ /**
+ * The text drawing function.
+ * The maxWidth argument isn't taken in account, since no browser supports
+ * it yet.
+ */
+ // contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
+ // var m = this.m_,
+ // delta = 1000,
+ // left = 0,
+ // right = delta,
+ // offset = {x: 0, y: 0},
+ // lineStr = [];
+
+ // var fontStyle = getComputedStyle(processFontStyle(this.font),
+ // this.element_);
+
+ // var fontStyleString = buildStyle(fontStyle);
+
+ // var elementStyle = this.element_.currentStyle;
+ // var textAlign = this.textAlign.toLowerCase();
+ // switch (textAlign) {
+ // case 'left':
+ // case 'center':
+ // case 'right':
+ // break;
+ // case 'end':
+ // textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
+ // break;
+ // case 'start':
+ // textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
+ // break;
+ // default:
+ // textAlign = 'left';
+ // }
+
+ // // 1.75 is an arbitrary number, as there is no info about the text baseline
+ // switch (this.textBaseline) {
+ // case 'hanging':
+ // case 'top':
+ // offset.y = fontStyle.size / 1.75;
+ // break;
+ // case 'middle':
+ // break;
+ // default:
+ // case null:
+ // case 'alphabetic':
+ // case 'ideographic':
+ // case 'bottom':
+ // offset.y = -fontStyle.size / 2.25;
+ // break;
+ // }
+
+ // switch(textAlign) {
+ // case 'right':
+ // left = delta;
+ // right = 0.05;
+ // break;
+ // case 'center':
+ // left = right = delta / 2;
+ // break;
+ // }
+
+ // var d = getCoords(this, x + offset.x, y + offset.y);
+
+ // lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
+ // ' coordsize="100 100" coordorigin="0 0"',
+ // ' filled="', !stroke, '" stroked="', !!stroke,
+ // '" style="position:absolute;width:1px;height:1px;">');
+
+ // if (stroke) {
+ // appendStroke(this, lineStr);
+ // } else {
+ // // TODO: Fix the min and max params.
+ // appendFill(this, lineStr, {x: -left, y: 0},
+ // {x: right, y: fontStyle.size});
+ // }
+
+ // var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
+ // m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
+
+ // var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
+
+ // lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
+ // ' offset="', skewOffset, '" origin="', left ,' 0" />',
+ // '<g_vml_:path textpathok="true" />',
+ // '<g_vml_:textpath on="true" string="',
+ // encodeHtmlAttribute(text),
+ // '" style="v-text-align:', textAlign,
+ // ';font:', encodeHtmlAttribute(fontStyleString),
+ // '" /></g_vml_:line>');
+
+ // this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ // };
+
+ // contextPrototype.fillText = function(text, x, y, maxWidth) {
+ // this.drawText_(text, x, y, maxWidth, false);
+ // };
+
+ // contextPrototype.strokeText = function(text, x, y, maxWidth) {
+ // this.drawText_(text, x, y, maxWidth, true);
+ // };
+
+ // contextPrototype.measureText = function(text) {
+ // if (!this.textMeasureEl_) {
+ // var s = '<span style="position:absolute;' +
+ // 'top:-20000px;left:0;padding:0;margin:0;border:none;' +
+ // 'white-space:pre;"></span>';
+ // this.element_.insertAdjacentHTML('beforeEnd', s);
+ // this.textMeasureEl_ = this.element_.lastChild;
+ // }
+ // var doc = this.element_.ownerDocument;
+ // this.textMeasureEl_.innerHTML = '';
+ // this.textMeasureEl_.style.font = this.font;
+ // // Don't use innerHTML or innerText because they allow markup/whitespace.
+ // this.textMeasureEl_.appendChild(doc.createTextNode(text));
+ // return {width: this.textMeasureEl_.offsetWidth};
+ // };
+
+ /******** STUBS ********/
+ // contextPrototype.clip = function() {
+ // // TODO: Implement
+ // };
+
+ // contextPrototype.arcTo = function() {
+ // // TODO: Implement
+ // };
+
+ // contextPrototype.createPattern = function(image, repetition) {
+ // return new CanvasPattern_(image, repetition);
+ // };
+
+ // // Gradient / Pattern Stubs
+ // function CanvasGradient_(aType) {
+ // this.type_ = aType;
+ // this.x0_ = 0;
+ // this.y0_ = 0;
+ // this.r0_ = 0;
+ // this.x1_ = 0;
+ // this.y1_ = 0;
+ // this.r1_ = 0;
+ // this.colors_ = [];
+ // }
+
+ // CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
+ // aColor = processStyle(aColor);
+ // this.colors_.push({offset: aOffset,
+ // color: aColor.color,
+ // alpha: aColor.alpha});
+ // };
+
+ // function CanvasPattern_(image, repetition) {
+ // assertImageIsValid(image);
+ // switch (repetition) {
+ // case 'repeat':
+ // case null:
+ // case '':
+ // this.repetition_ = 'repeat';
+ // break
+ // case 'repeat-x':
+ // case 'repeat-y':
+ // case 'no-repeat':
+ // this.repetition_ = repetition;
+ // break;
+ // default:
+ // throwException('SYNTAX_ERR');
+ // }
+
+ // this.src_ = image.src;
+ // this.width_ = image.width;
+ // this.height_ = image.height;
+ // }
+
+ function throwException(s) {
+ throw new DOMException_(s);
+ }
+
+ // function assertImageIsValid(img) {
+ // if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
+ // throwException('TYPE_MISMATCH_ERR');
+ // }
+ // if (img.readyState != 'complete') {
+ // throwException('INVALID_STATE_ERR');
+ // }
+ // }
+
+ function DOMException_(s) {
+ this.code = this[s];
+ this.message = s + ': DOM Exception ' + this.code;
+ }
+ var p = DOMException_.prototype = new Error;
+ p.INDEX_SIZE_ERR = 1;
+ p.DOMSTRING_SIZE_ERR = 2;
+ p.HIERARCHY_REQUEST_ERR = 3;
+ p.WRONG_DOCUMENT_ERR = 4;
+ p.INVALID_CHARACTER_ERR = 5;
+ p.NO_DATA_ALLOWED_ERR = 6;
+ p.NO_MODIFICATION_ALLOWED_ERR = 7;
+ p.NOT_FOUND_ERR = 8;
+ p.NOT_SUPPORTED_ERR = 9;
+ p.INUSE_ATTRIBUTE_ERR = 10;
+ p.INVALID_STATE_ERR = 11;
+ p.SYNTAX_ERR = 12;
+ p.INVALID_MODIFICATION_ERR = 13;
+ p.NAMESPACE_ERR = 14;
+ p.INVALID_ACCESS_ERR = 15;
+ p.VALIDATION_ERR = 16;
+ p.TYPE_MISMATCH_ERR = 17;
+
+ // set up externs
+ G_vmlCanvasManager = G_vmlCanvasManager_;
+ CanvasRenderingContext2D = CanvasRenderingContext2D_;
+ //CanvasGradient = CanvasGradient_;
+ //CanvasPattern = CanvasPattern_;
+ DOMException = DOMException_;
+ })();
+
+} // if
+/* Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ *
+ * Version: 3.0.2
+ *
+ * Requires: 1.2.2+
+ */
+(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
+
+/*!
+ * jQuery UI Widget @VERSION
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Widget
+ */
+if (!$.widget) {
+(function( $, undefined ) {
+
+var slice = Array.prototype.slice;
+
+var _cleanData = $.cleanData;
+$.cleanData = function( elems ) {
+ for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
+ $( elem ).triggerHandler( "remove" );
+ }
+ _cleanData( elems );
+};
+
+$.widget = function( name, base, prototype ) {
+ var namespace = name.split( "." )[ 0 ],
+ fullName;
+ name = name.split( "." )[ 1 ];
+ fullName = namespace + "-" + name;
+
+ if ( !prototype ) {
+ prototype = base;
+ base = $.Widget;
+ }
+
+ // create selector for plugin
+ $.expr[ ":" ][ fullName ] = function( elem ) {
+ return !!$.data( elem, name );
+ };
+
+ $[ namespace ] = $[ namespace ] || {};
+ // create the constructor using $.extend() so we can carry over any
+ // static properties stored on the existing constructor (if there is one)
+ $[ namespace ][ name ] = $.extend( function( options, element ) {
+ // allow instantiation without "new" keyword
+ if ( !this._createWidget ) {
+ return new $[ namespace ][ name ]( options, element );
+ }
+
+ // allow instantiation without initializing for simple inheritance
+ // must use "new" keyword (the code above always passes args)
+ if ( arguments.length ) {
+ this._createWidget( options, element );
+ }
+ }, $[ namespace ][ name ] );
+
+ var basePrototype = new base();
+ // we need to make the options hash a property directly on the new instance
+ // otherwise we'll modify the options hash on the prototype that we're
+ // inheriting from
+ basePrototype.options = $.extend( true, {}, basePrototype.options );
+ $.each( prototype, function( prop, value ) {
+ if ( $.isFunction( value ) ) {
+ prototype[ prop ] = (function() {
+ var _super = function( method ) {
+ return base.prototype[ method ].apply( this, slice.call( arguments, 1 ) );
+ };
+ var _superApply = function( method, args ) {
+ return base.prototype[ method ].apply( this, args );
+ };
+ return function() {
+ var __super = this._super,
+ __superApply = this._superApply,
+ returnValue;
+
+ this._super = _super;
+ this._superApply = _superApply;
+
+ returnValue = value.apply( this, arguments );
+
+ this._super = __super;
+ this._superApply = __superApply;
+
+ return returnValue;
+ };
+ }());
+ }
+ });
+ $[ namespace ][ name ].prototype = $.extend( true, basePrototype, {
+ namespace: namespace,
+ widgetName: name,
+ widgetEventPrefix: name,
+ widgetBaseClass: fullName
+ }, prototype );
+
+ $.widget.bridge( name, $[ namespace ][ name ] );
+};
+
+$.widget.bridge = function( name, object ) {
+ $.fn[ name ] = function( options ) {
+ var isMethodCall = typeof options === "string",
+ args = slice.call( arguments, 1 ),
+ returnValue = this;
+
+ // allow multiple hashes to be passed on init
+ options = !isMethodCall && args.length ?
+ $.extend.apply( null, [ true, options ].concat(args) ) :
+ options;
+
+ if ( isMethodCall ) {
+ this.each(function() {
+ var instance = $.data( this, name );
+ if ( !instance ) {
+ return $.error( "cannot call methods on " + name + " prior to initialization; " +
+ "attempted to call method '" + options + "'" );
+ }
+ if ( !$.isFunction( instance[options] ) || options.charAt( 0 ) === "_" ) {
+ return $.error( "no such method '" + options + "' for " + name + " widget instance" );
+ }
+ var methodValue = instance[ options ].apply( instance, args );
+ if ( methodValue !== instance && methodValue !== undefined ) {
+ returnValue = methodValue;
+ return false;
+ }
+ });
+ } else {
+ this.each(function() {
+ var instance = $.data( this, name );
+ if ( instance ) {
+ instance.option( options || {} )._init();
+ } else {
+ object( options, this );
+ }
+ });
+ }
+
+ return returnValue;
+ };
+};
+
+$.Widget = function( options, element ) {
+ // allow instantiation without "new" keyword
+ if ( !this._createWidget ) {
+ return new $[ namespace ][ name ]( options, element );
+ }
+
+ // allow instantiation without initializing for simple inheritance
+ // must use "new" keyword (the code above always passes args)
+ if ( arguments.length ) {
+ this._createWidget( options, element );
+ }
+};
+
+$.Widget.prototype = {
+ widgetName: "widget",
+ widgetEventPrefix: "",
+ defaultElement: "<div>",
+ options: {
+ disabled: false
+ },
+ _createWidget: function( options, element ) {
+ element = $( element || this.defaultElement || this )[ 0 ];
+ this.element = $( element );
+ this.options = $.extend( true, {},
+ this.options,
+ this._getCreateOptions(),
+ options );
+
+ this.bindings = $();
+ this.hoverable = $();
+ this.focusable = $();
+
+ if ( element !== this ) {
+ $.data( element, this.widgetName, this );
+ this._bind({ remove: "destroy" });
+ }
+
+ this._create();
+ this._trigger( "create" );
+ this._init();
+ },
+ _getCreateOptions: function() {
+ return $.metadata && $.metadata.get( this.element[0] )[ this.widgetName ];
+ },
+ _create: $.noop,
+ _init: $.noop,
+
+ destroy: function() {
+ this._destroy();
+ // we can probably remove the unbind calls in 2.0
+ // all event bindings should go through this._bind()
+ this.element
+ .unbind( "." + this.widgetName )
+ .removeData( this.widgetName );
+ this.widget()
+ .unbind( "." + this.widgetName )
+ .removeAttr( "aria-disabled" )
+ .removeClass(
+ this.widgetBaseClass + "-disabled " +
+ "ui-state-disabled" );
+
+ // clean up events and states
+ this.bindings.unbind( "." + this.widgetName );
+ this.hoverable.removeClass( "ui-state-hover" );
+ this.focusable.removeClass( "ui-state-focus" );
+ },
+ _destroy: $.noop,
+
+ widget: function() {
+ return this.element;
+ },
+
+ option: function( key, value ) {
+ var options = key;
+
+ if ( arguments.length === 0 ) {
+ // don't return a reference to the internal hash
+ return $.extend( {}, this.options );
+ }
+
+ if (typeof key === "string" ) {
+ if ( value === undefined ) {
+ return this.options[ key ];
+ }
+ options = {};
+ options[ key ] = value;
+ }
+
+ this._setOptions( options );
+
+ return this;
+ },
+ _setOptions: function( options ) {
+ var self = this;
+ $.each( options, function( key, value ) {
+ self._setOption( key, value );
+ });
+
+ return this;
+ },
+ _setOption: function( key, value ) {
+ this.options[ key ] = value;
+
+ if ( key === "disabled" ) {
+ this.widget()
+ .toggleClass( this.widgetBaseClass + "-disabled ui-state-disabled", !!value )
+ .attr( "aria-disabled", value );
+ this.hoverable.removeClass( "ui-state-hover" );
+ this.focusable.removeClass( "ui-state-focus" );
+ }
+
+ return this;
+ },
+
+ enable: function() {
+ return this._setOption( "disabled", false );
+ },
+ disable: function() {
+ return this._setOption( "disabled", true );
+ },
+
+ _bind: function( element, handlers ) {
+ // no element argument, shuffle and use this.element
+ if ( !handlers ) {
+ handlers = element;
+ element = this.element;
+ } else {
+ // accept selectors, DOM elements
+ element = $( element );
+ this.bindings = this.bindings.add( element );
+ }
+ var instance = this;
+ $.each( handlers, function( event, handler ) {
+ element.bind( event + "." + instance.widgetName, function() {
+ // allow widgets to customize the disabled handling
+ // - disabled as an array instead of boolean
+ // - disabled class as method for disabling individual parts
+ if ( instance.options.disabled === true ||
+ $( this ).hasClass( "ui-state-disabled" ) ) {
+ return;
+ }
+ return ( typeof handler === "string" ? instance[ handler ] : handler )
+ .apply( instance, arguments );
+ });
+ });
+ },
+
+ _hoverable: function( element ) {
+ this.hoverable = this.hoverable.add( element );
+ this._bind( element, {
+ mouseenter: function( event ) {
+ $( event.currentTarget ).addClass( "ui-state-hover" );
+ },
+ mouseleave: function( event ) {
+ $( event.currentTarget ).removeClass( "ui-state-hover" );
+ }
+ });
+ },
+
+ _focusable: function( element ) {
+ this.focusable = this.focusable.add( element );
+ this._bind( element, {
+ focusin: function( event ) {
+ $( event.currentTarget ).addClass( "ui-state-focus" );
+ },
+ focusout: function( event ) {
+ $( event.currentTarget ).removeClass( "ui-state-focus" );
+ }
+ });
+ },
+
+ _trigger: function( type, event, data ) {
+ var callback = this.options[ type ],
+ args;
+
+ event = $.Event( event );
+ event.type = ( type === this.widgetEventPrefix ?
+ type :
+ this.widgetEventPrefix + type ).toLowerCase();
+ data = data || {};
+
+ // copy original event properties over to the new event
+ // this would happen if we could call $.event.fix instead of $.Event
+ // but we don't have a way to force an event to be fixed multiple times
+ if ( event.originalEvent ) {
+ for ( var i = $.event.props.length, prop; i; ) {
+ prop = $.event.props[ --i ];
+ event[ prop ] = event.originalEvent[ prop ];
+ }
+ }
+
+ this.element.trigger( event, data );
+
+ args = $.isArray( data ) ?
+ [ event ].concat( data ) :
+ [ event, data ];
+
+ return !( $.isFunction( callback ) &&
+ callback.apply( this.element[0], args ) === false ||
+ event.isDefaultPrevented() );
+ }
+};
+
+})( jQuery );
+}(function ($, window, undefined) {
+ var pos_oo = Number.POSITIVE_INFINITY,
+ neg_oo = Number.NEGATIVE_INFINITY;
+
+ $.geo = {
+ //
+ // utility functions
+ //
+
+ _allCoordinates: function (geom) {
+ // return array of all positions in all geometries of geom
+ // not in JTS
+ var geometries = this._flatten(geom),
+ curGeom = 0,
+ result = [];
+
+ for (; curGeom < geometries.length; curGeom++) {
+ var coordinates = geometries[curGeom].coordinates,
+ isArray = coordinates && $.isArray(coordinates[0]),
+ isDblArray = isArray && $.isArray(coordinates[0][0]),
+ isTriArray = isDblArray && $.isArray(coordinates[0][0][0]),
+ i, j, k;
+
+ if (!isTriArray) {
+ if (!isDblArray) {
+ if (!isArray) {
+ coordinates = [coordinates];
+ }
+ coordinates = [coordinates];
+ }
+ coordinates = [coordinates];
+ }
+
+ for (i = 0; i < coordinates.length; i++) {
+ for (j = 0; j < coordinates[i].length; j++) {
+ for (k = 0; k < coordinates[i][j].length; k++) {
+ result.push(coordinates[i][j][k]);
+ }
+ }
+ }
+ }
+ return result;
+ },
+
+ //
+ // bbox functions
+ //
+
+ center: function (bbox, _ignoreGeo /* Internal Use Only */) {
+ // Envelope.centre in JTS
+ // bbox only, use centroid for geom
+ if (!_ignoreGeo && $.geo.proj) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+ var center = [(bbox[0] + bbox[2]) / 2, (bbox[1] + bbox[3]) / 2];
+ return !_ignoreGeo && $.geo.proj ? $.geo.proj.toGeodetic(center) : center;
+ },
+
+ expandBy: function (bbox, dx, dy) {
+ if ($.geo.proj) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+ bbox = [bbox[0] - dx, bbox[1] - dy, bbox[2] + dx, bbox[3] + dy];
+ return $.geo.proj ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ height: function (bbox, _ignoreGeo /* Internal Use Only */ ) {
+ if (!_ignoreGeo && $.geo.proj) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+ return bbox[3] - bbox[1];
+ },
+
+ _in: function(bbox1, bbox2) {
+ return bbox1[0] <= bbox2[0] &&
+ bbox1[1] <= bbox2[1] &&
+ bbox1[2] >= bbox2[2] &&
+ bbox1[3] >= bbox2[3];
+ },
+
+ _bboxDisjoint: function( bbox1, bbox2 ) {
+ return bbox2[ 0 ] > bbox1[ 2 ] ||
+ bbox2[ 2 ] < bbox1[ 0 ] ||
+ bbox2[ 1 ] > bbox1[ 3 ] ||
+ bbox2[ 3 ] < bbox1[ 1 ];
+ },
+
+ reaspect: function (bbox, ratio, _ignoreGeo /* Internal Use Only */ ) {
+ // not in JTS
+ if (!_ignoreGeo && $.geo.proj) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+ var width = this.width(bbox, true),
+ height = this.height(bbox, true),
+ center = this.center(bbox, true),
+ dx, dy;
+
+ if (width != 0 && height != 0 && ratio > 0) {
+ if (width / height > ratio) {
+ dx = width / 2;
+ dy = dx / ratio;
+ } else {
+ dy = height / 2;
+ dx = dy * ratio;
+ }
+
+ bbox = [center[0] - dx, center[1] - dy, center[0] + dx, center[1] + dy];
+ }
+ return $.geo.proj ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ scaleBy: function ( bbox, scale, _ignoreGeo /* Internal Use Only */ ) {
+ // not in JTS
+ if (!_ignoreGeo && $.geo.proj) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+ var c = this.center(bbox, true),
+ dx = (bbox[2] - bbox[0]) * scale / 2,
+ dy = (bbox[3] - bbox[1]) * scale / 2;
+ bbox = [c[0] - dx, c[1] - dy, c[0] + dx, c[1] + dy];
+ return !_ignoreGeo && $.geo.proj ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ width: function (bbox, _ignoreGeo /* Internal Use Only */ ) {
+ if (!_ignoreGeo && $.geo.proj) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+ return bbox[2] - bbox[0];
+ },
+
+ //
+ // geometry functions
+ //
+
+ // bbox (Geometry.getEnvelope in JTS)
+
+ bbox: function ( geom, _ignoreGeo /* Internal Use Only */ ) {
+ if ( !geom ) {
+ return undefined;
+ } else if ( geom.bbox ) {
+ result = !_ignoreGeo && $.geo.proj ? $.geo.proj.fromGeodetic( geom.bbox ) : geom.bbox;
+ } else {
+ result = [ pos_oo, pos_oo, neg_oo, neg_oo ];
+
+ var coordinates = this._allCoordinates( geom ),
+ curCoord = 0;
+
+ if ( coordinates.length == 0 ) {
+ return undefined;
+ }
+
+ if ( $.geo.proj ) {
+ coordinates = $.geo.proj.fromGeodetic( coordinates );
+ }
+
+ for ( ; curCoord < coordinates.length; curCoord++ ) {
+ result[0] = Math.min(coordinates[curCoord][0], result[0]);
+ result[1] = Math.min(coordinates[curCoord][1], result[1]);
+ result[2] = Math.max(coordinates[curCoord][0], result[2]);
+ result[3] = Math.max(coordinates[curCoord][1], result[3]);
+ }
+ }
+
+ return $.geo.proj ? $.geo.proj.toGeodetic(result) : result;
+ },
+
+ // centroid
+
+ centroid: function( geom, _ignoreGeo /* Internal Use Only */ ) {
+ switch (geom.type) {
+ case "Point":
+ return $.extend({}, geom);
+
+ case "LineString":
+ case "Polygon":
+ var a = 0,
+ c = [0, 0],
+ coords = $.merge( [ ], geom.type == "Polygon" ? geom.coordinates[0] : geom.coordinates ),
+ i = 1, j, n;
+
+ if ( !_ignoreGeo && $.geo.proj ) {
+ coords = $.geo.proj.fromGeodetic(coords);
+ }
+
+ //if (coords[0][0] != coords[coords.length - 1][0] || coords[0][1] != coords[coords.length - 1][1]) {
+ // coords.push(coords[0]);
+ //}
+
+ for (; i <= coords.length; i++) {
+ j = i % coords.length;
+ n = (coords[i - 1][0] * coords[j][1]) - (coords[j][0] * coords[i - 1][1]);
+ a += n;
+ c[0] += (coords[i - 1][0] + coords[j][0]) * n;
+ c[1] += (coords[i - 1][1] + coords[j][1]) * n;
+ }
+
+ if (a == 0) {
+ if (coords.length > 0) {
+ c[0] = coords[0][0];
+ c[1] = coords[0][1];
+ return { type: "Point", coordinates: !_ignoreGeo && $.geo.proj ? $.geo.proj.toGeodetic(c) : c };
+ } else {
+ return undefined;
+ }
+ }
+
+ a *= 3;
+ c[0] /= a;
+ c[1] /= a;
+
+ return { type: "Point", coordinates: !_ignoreGeo && $.geo.proj ? $.geo.proj.toGeodetic(c) : c };
+ }
+ return undefined;
+ },
+
+ // contains
+
+ contains: function (geom1, geom2) {
+ if (geom1.type != "Polygon") {
+ return false;
+ }
+
+ switch (geom2.type) {
+ case "Point":
+ return this._containsPolygonPoint(geom1.coordinates, geom2.coordinates);
+
+ case "LineString":
+ return this._containsPolygonLineString(geom1.coordinates, geom2.coordinates);
+
+ case "Polygon":
+ return this._containsPolygonLineString(geom1.coordinates, geom2.coordinates[0]);
+
+ default:
+ return false;
+ }
+ },
+
+ _containsPolygonPoint: function (polygonCoordinates, pointCoordinate) {
+ if (polygonCoordinates.length == 0 || polygonCoordinates[0].length < 4) {
+ return false;
+ }
+
+ var rayCross = 0,
+ a = polygonCoordinates[0][0],
+ i = 1,
+ b,
+ x;
+
+ for (; i < polygonCoordinates[0].length; i++) {
+ b = polygonCoordinates[0][i];
+
+ if ((a[1] <= pointCoordinate[1] && pointCoordinate[1] < b[1]) || (b[1] <= pointCoordinate[1] && pointCoordinate[1] < a[1]) && (pointCoordinate[0] < a[0] || pointCoordinate[0] < b[0])) {
+ x = a[0] + (b[0] - a[0]) * (pointCoordinate[1] - a[1]) / (b[1] - a[1]);
+
+ if (x > pointCoordinate[0]) {
+ rayCross++;
+ }
+ }
+
+ a = b;
+ }
+
+ return rayCross % 2 == 1;
+ },
+
+ _containsPolygonLineString: function (polygonCoordinates, lineStringCoordinates) {
+ for (var i = 0; i < lineStringCoordinates.length; i++) {
+ if (!this._containsPolygonPoint(polygonCoordinates, lineStringCoordinates[i])) {
+ return false;
+ }
+ }
+ return true;
+ },
+
+ // distance
+
+ distance: function ( geom1, geom2, _ignoreGeo /* Internal Use Only */ ) {
+ var geom1CoordinatesProjected = !_ignoreGeo && $.geo.proj ? $.geo.proj.fromGeodetic(geom1.coordinates) : geom1.coordinates,
+ geom2CoordinatesProjected = !_ignoreGeo && $.geo.proj ? $.geo.proj.fromGeodetic(geom2.coordinates) : geom2.coordinates;
+
+ switch (geom1.type) {
+ case "Point":
+ switch (geom2.type) {
+ case "Point":
+ return this._distancePointPoint(geom2CoordinatesProjected, geom1CoordinatesProjected);
+ case "LineString":
+ return this._distanceLineStringPoint(geom2CoordinatesProjected, geom1CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonPoint(geom2CoordinatesProjected, geom1CoordinatesProjected) ? 0 : this._distanceLineStringPoint(geom2CoordinatesProjected[0], geom1CoordinatesProjected);
+ default:
+ return undefined;
+ }
+ break;
+
+ case "LineString":
+ switch (geom2.type) {
+ case "Point":
+ return this._distanceLineStringPoint(geom1CoordinatesProjected, geom2CoordinatesProjected);
+ case "LineString":
+ return this._distanceLineStringLineString(geom1CoordinatesProjected, geom2CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonLineString(geom2CoordinatesProjected, geom1CoordinatesProjected) ? 0 : this._distanceLineStringLineString(geom2CoordinatesProjected[0], geom1CoordinatesProjected);
+ default:
+ return undefined;
+ }
+ break;
+
+ case "Polygon":
+ switch (geom2.type) {
+ case "Point":
+ return this._containsPolygonPoint(geom1CoordinatesProjected, geom2CoordinatesProjected) ? 0 : this._distanceLineStringPoint(geom1CoordinatesProjected[0], geom2CoordinatesProjected);
+ case "LineString":
+ return this._containsPolygonLineString(geom1CoordinatesProjected, geom2CoordinatesProjected) ? 0 : this._distanceLineStringLineString(geom1CoordinatesProjected[0], geom2CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonLineString(geom1CoordinatesProjected, geom2CoordinatesProjected[0]) ? 0 : this._distanceLineStringLineString(geom1CoordinatesProjected[0], geom2CoordinatesProjected[0]);
+ default:
+ return undefined;
+ }
+ break;
+ }
+ },
+
+ _distancePointPoint: function (coordinate1, coordinate2) {
+ var dx = coordinate2[0] - coordinate1[0],
+ dy = coordinate2[1] - coordinate1[1];
+ return Math.sqrt((dx * dx) + (dy * dy));
+ },
+
+ _distanceLineStringPoint: function (lineStringCoordinates, pointCoordinate) {
+ var minDist = pos_oo;
+
+ if (lineStringCoordinates.length > 0) {
+ var a = lineStringCoordinates[0],
+
+ apx = pointCoordinate[0] - a[0],
+ apy = pointCoordinate[1] - a[1];
+
+ if (lineStringCoordinates.length == 1) {
+ return Math.sqrt(apx * apx + apy * apy);
+ } else {
+ for (var i = 1; i < lineStringCoordinates.length; i++) {
+ var b = lineStringCoordinates[i],
+
+ abx = b[0] - a[0],
+ aby = b[1] - a[1],
+ bpx = pointCoordinate[0] - b[0],
+ bpy = pointCoordinate[1] - b[1],
+
+ d = this._distanceSegmentPoint(abx, aby, apx, apy, bpx, bpy);
+
+ if (d == 0) {
+ return 0;
+ }
+
+ if (d < minDist) {
+ minDist = d;
+ }
+
+ a = b;
+ apx = bpx;
+ apy = bpy;
+ }
+ }
+ }
+
+ return Math.sqrt(minDist);
+ },
+
+ _distanceSegmentPoint: function (abx, aby, apx, apy, bpx, bpy) {
+ var dot1 = abx * apx + aby * apy;
+
+ if (dot1 <= 0) {
+ return apx * apx + apy * apy;
+ }
+
+ var dot2 = abx * abx + aby * aby;
+
+ if (dot1 >= dot2) {
+ return bpx * bpx + bpy * bpy;
+ }
+
+ return apx * apx + apy * apy - dot1 * dot1 / dot2;
+ },
+
+ _distanceLineStringLineString: function (lineStringCoordinates1, lineStringCoordinates2) {
+ var minDist = pos_oo;
+ for (var i = 0; i < lineStringCoordinates2.length; i++) {
+ minDist = Math.min(minDist, this._distanceLineStringPoint(lineStringCoordinates1, lineStringCoordinates2[i]));
+ }
+ return minDist;
+ },
+
+ //
+ // feature
+ //
+
+ _flatten: function (geom) {
+ // return an array of all basic geometries
+ // not in JTS
+ var geometries = [],
+ curGeom = 0;
+ switch (geom.type) {
+ case "Feature":
+ $.merge(geometries, this._flatten(geom.geometry));
+ break;
+
+ case "FeatureCollection":
+ for (; curGeom < geom.features.length; curGeom++) {
+ $.merge(geometries, this._flatten(geom.features[curGeom].geometry));
+ }
+ break;
+
+ case "GeometryCollection":
+ for (; curGeom < geom.geometries.length; curGeom++) {
+ $.merge(geometries, this._flatten(geom.geometries[curGeom]));
+ }
+ break;
+
+ default:
+ geometries[0] = geom;
+ break;
+ }
+ return geometries;
+ },
+
+ //
+ // WKT functions
+ //
+
+ _WKT: (function () {
+ function pointToString(value) {
+ return "POINT " + pointToUntaggedString(value.coordinates);
+ }
+
+ function pointToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ return "(" + coordinates.join(" ") + ")";
+ }
+ }
+
+ function lineStringToString(value) {
+ return "LINESTRING " + lineStringToUntaggedString(value.coordinates);
+ }
+
+ function lineStringToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ var points = []
+
+ for (var i = 0; i < coordinates.length; i++) {
+ points.push(coordinates[i].join(" "));
+ }
+
+ return "(" + points + ")";
+ }
+ }
+
+ function polygonToString(value) {
+ return "POLYGON " + polygonToUntaggedString(value.coordinates);
+ }
+
+ function polygonToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMTPY";
+ } else {
+ var lineStrings = [];
+
+ for (var i = 0; i < coordinates.length; i++) {
+ lineStrings.push(lineStringToUntaggedString(coordinates[i]));
+ }
+
+ return "(" + lineStrings + ")";
+ }
+ }
+
+ function multiPointToString(value) {
+ return "MULTIPOINT " + lineStringToUntaggedString(value.coordinates);
+ }
+
+ function multiLineStringToString(value) {
+ return "MULTILINSTRING " + polygonToUntaggedString(value.coordinates);
+ }
+
+ function multiPolygonToString(value) {
+ return "MULTIPOLYGON " + multiPolygonToUntaggedString(value.coordinates);
+ }
+
+ function multiPolygonToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ var polygons = [];
+ for (var i = 0; i < coordinates.length; i++) {
+ polygons.push(polygonToUntaggedString(coordinates[i]));
+ }
+ return "(" + polygons + ")";
+ }
+ }
+
+ function geometryCollectionToString(value) {
+ return "GEOMETRYCOLLECTION " + geometryCollectionToUntaggedString(value.geometries);
+ }
+
+ function geometryCollectionToUntaggedString(geometries) {
+ if (!(geometries && geometries.length)) {
+ return "EMPTY";
+ } else {
+ var geometryText = [];
+ for (var i = 0; i < geometries.length; i++) {
+ geometryText.push(stringify(geometries[i]));
+ }
+ return "(" + geometries + ")";
+ }
+ }
+
+ function stringify(value) {
+ if (!(value && value.type)) {
+ return "";
+ } else {
+ switch (value.type) {
+ case "Point":
+ return pointToString(value);
+
+ case "LineString":
+ return lineStringToString(value);
+
+ case "Polygon":
+ return polygonToString(value);
+
+ case "MultiPoint":
+ return multiPointToString(value);
+
+ case "MultiLineString":
+ return multiLineStringToString(value);
+
+ case "MultiPolygon":
+ return multiPolygonToString(value);
+
+ case "GeometryCollection":
+ return geometryCollectionToString(value);
+
+ default:
+ return "";
+ }
+ }
+ }
+
+ function pointParseUntagged(wkt) {
+ var pointString = wkt.match(/\(\s*([\d\.-]+)\s+([\d\.-]+)\s*\)/);
+ return pointString && pointString.length >= 2 ? {
+ type: "Point",
+ coordinates: [
+ parseFloat(pointString[1]),
+ parseFloat(pointString[2])
+ ]
+ } : null;
+ }
+
+ function parse(wkt) {
+ wkt = $.trim(wkt);
+
+ var typeIndex = wkt.indexOf(" ");
+
+ switch (wkt.substr(0, typeIndex).toUpperCase()) {
+ case "POINT":
+ return pointParseUntagged(wkt.substr(typeIndex + 1));
+ }
+ }
+
+ return {
+ stringify: stringify,
+
+ parse: parse
+ };
+ })(),
+
+ //
+ // projection functions
+ //
+
+ proj: (function () {
+ var halfPi = 1.5707963267948966192,
+ quarterPi = 0.7853981633974483096,
+ radiansPerDegree = 0.0174532925199432958,
+ degreesPerRadian = 57.295779513082320877,
+ semiMajorAxis = 6378137;
+
+ return {
+ fromGeodeticPos: function (coordinate) {
+ if (!coordinate) {
+ debugger;
+ }
+ return [
+ semiMajorAxis * coordinate[ 0 ] * radiansPerDegree,
+ semiMajorAxis * Math.log(Math.tan(quarterPi + coordinate[ 1 ] * radiansPerDegree / 2))
+ ];
+ },
+
+ fromGeodetic: function (coordinates) {
+ var isMultiPointOrLineString = $.isArray(coordinates[ 0 ]),
+ fromGeodeticPos = this.fromGeodeticPos;
+
+ if (!isMultiPointOrLineString && coordinates.length == 4) {
+ // bbox
+ var min = fromGeodeticPos([ coordinates[ 0 ], coordinates[ 1 ] ]),
+ max = fromGeodeticPos([ coordinates[ 2 ], coordinates[ 3 ] ]);
+ return [ min[ 0 ], min[ 1 ], max[ 0 ], max[ 1 ] ];
+ } else {
+ // geometry
+ var isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray(coordinates[ 0 ][ 0 ]),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray(coordinates[ 0 ][ 0 ][ 0 ]),
+ result = [ ],
+ i, j, k;
+
+ if (!isMultiPolygon) {
+ if (!isMultiLineStringOrPolygon) {
+ if (!isMultiPointOrLineString) {
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+
+ for ( i = 0; i < coordinates.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < coordinates[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < coordinates[ i ][ j ].length; k++ ) {
+ result[ i ][ j ][ k ] = fromGeodeticPos(coordinates[ i ][ j ][ k ]);
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ }
+ },
+
+ toGeodeticPos: function (coordinate) {
+ return [
+ (coordinate[ 0 ] / semiMajorAxis) * degreesPerRadian,
+ (halfPi - 2 * Math.atan(1 / Math.exp(coordinate[ 1 ] / semiMajorAxis))) * degreesPerRadian
+ ];
+ },
+
+ toGeodetic: function (coordinates) {
+ var isMultiPointOrLineString = $.isArray(coordinates[ 0 ]),
+ toGeodeticPos = this.toGeodeticPos;
+
+ if (!isMultiPointOrLineString && coordinates.length == 4) {
+ // bbox
+ var min = toGeodeticPos([ coordinates[ 0 ], coordinates[ 1 ] ]),
+ max = toGeodeticPos([ coordinates[ 2 ], coordinates[ 3 ] ]);
+ return [ min[ 0 ], min[ 1 ], max[ 0 ], max[ 1 ] ];
+ } else {
+ // geometry
+ var isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray(coordinates[ 0 ][ 0 ]),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray(coordinates[ 0 ][ 0 ][ 0 ]),
+ result = [ ];
+
+ if (!isMultiPolygon) {
+ if (!isMultiLineStringOrPolygon) {
+ if (!isMultiPointOrLineString) {
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+
+ for ( i = 0; i < coordinates.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < coordinates[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < coordinates[ i ][ j ].length; k++ ) {
+ result[ i ][ j ][ k ] = toGeodeticPos(coordinates[ i ][ j ][ k ]);
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ }
+ }
+ }
+ })(),
+
+ //
+ // service types (defined in other files)
+ //
+
+ _serviceTypes: {}
+ }
+})(jQuery, this);
+(function ($, undefined) {
+
+ var _ieVersion = (function () {
+ var v = 5, div = document.createElement("div"), a = div.all || [];
+ while (div.innerHTML = "<!--[if gt IE " + (++v) + "]><br><![endif]-->", a[0]) { }
+ return v > 6 ? v : !v;
+ } ());
+
+ $.widget("geo.geographics", {
+ _$elem: undefined,
+ _options: {},
+ _trueCanvas: true,
+
+ _width: 0,
+ _height: 0,
+
+ _$canvas: undefined,
+ _context: undefined,
+
+ options: {
+ style: {
+ borderRadius: "8px",
+ color: "#7f0000",
+ //fill: undefined,
+ fillOpacity: .2,
+ height: "8px",
+ opacity: 1,
+ //stroke: undefined,
+ strokeOpacity: 1,
+ strokeWidth: "2px",
+ visibility: "visible",
+ width: "8px"
+ }
+ },
+
+ _create: function () {
+ this._$elem = this.element;
+ this._options = this.options;
+
+ this._$elem.css({ display: "inline-block", overflow: "hidden", textAlign: "left" });
+
+ if (this._$elem.css("position") == "static") {
+ this._$elem.css("position", "relative");
+ }
+
+ this._width = this._$elem.width();
+ this._height = this._$elem.height();
+
+ if (!(this._width && this._height)) {
+ this._width = parseInt(this._$elem.css("width"));
+ this._height = parseInt(this._$elem.css("height"));
+ }
+
+ if (document.createElement('canvas').getContext) {
+ this._$elem.append('<canvas width="' + this._width + '" height="' + this._height + '" style="position:absolute; left:0; top:0; width:' + this._width + 'px; height:' + this._height + 'px;"></canvas>');
+ this._$canvas = this._$elem.children(':last');
+ this._context = this._$canvas[0].getContext("2d");
+ } else if (_ieVersion <= 8) {
+ this._trueCanvas = false;
+ this._$elem.append('<div width="' + this._width + '" height="' + this._height + '" style="position:absolute; left:0; top:0; width:' + this._width + 'px; height:' + this._height + 'px; margin:0; padding:0;"></div>');
+ this._$canvas = this._$elem.children(':last');
+
+ G_vmlCanvasManager.initElement(this._$canvas[0]);
+ this._context = this._$canvas[0].getContext("2d");
+ this._$canvas.children().css({ backgroundColor: "transparent", width: this._width, height: this._height });
+ }
+ },
+
+ _setOption: function (key, value) {
+ if (key == "style") {
+ value = $.extend({}, this._options.style, value);
+ }
+ $.Widget.prototype._setOption.apply(this, arguments);
+ },
+
+ destroy: function () {
+ $.Widget.prototype.destroy.apply(this, arguments);
+ this._$elem.html("");
+ },
+
+ clear: function () {
+ this._context.clearRect(0, 0, this._width, this._height);
+ },
+
+ drawArc: function (coordinates, startAngle, sweepAngle, style) {
+ style = this._getGraphicStyle(style);
+
+ if (style.visibility != "hidden" && style.opacity > 0 && style.widthValue > 0 && style.heightValue > 0) {
+ var r = Math.min(style.widthValue, style.heightValue) / 2;
+
+ startAngle = (startAngle * Math.PI / 180);
+ sweepAngle = (sweepAngle * Math.PI / 180);
+
+ this._context.save();
+ this._context.translate(coordinates[0], coordinates[1]);
+ if (style.widthValue > style.heightValue) {
+ this._context.scale(style.widthValue / style.heightValue, 1);
+ } else {
+ this._context.scale(1, style.heightValue / style.widthValue);
+ }
+
+ this._context.beginPath();
+ this._context.arc(0, 0, r, startAngle, sweepAngle, false);
+
+ if (this._trueCanvas) {
+ this._context.restore();
+ }
+
+ if (style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+ this._context.stroke();
+ }
+
+ if (!this._trueCanvas) {
+ this._context.restore();
+ }
+ }
+ },
+
+ drawPoint: function (coordinates, style) {
+ var style = this._getGraphicStyle(style);
+ if (style.widthValue == style.heightValue && style.heightValue == style.borderRadiusValue) {
+ this.drawArc(coordinates, 0, 360, style);
+ } else if (style.visibility != "hidden" && style.opacity > 0) {
+ style.borderRadiusValue = Math.min(Math.min(style.widthValue, style.heightValue) / 2, style.borderRadiusValue);
+ coordinates[0] -= style.widthValue / 2;
+ coordinates[1] -= style.heightValue / 2;
+ this._context.beginPath();
+ this._context.moveTo(coordinates[0] + style.borderRadiusValue, coordinates[1]);
+ this._context.lineTo(coordinates[0] + style.widthValue - style.borderRadiusValue, coordinates[1]);
+ this._context.quadraticCurveTo(coordinates[0] + style.widthValue, coordinates[1], coordinates[0] + style.widthValue, coordinates[1] + style.borderRadiusValue);
+ this._context.lineTo(coordinates[0] + style.widthValue, coordinates[1] + style.heightValue - style.borderRadiusValue);
+ this._context.quadraticCurveTo(coordinates[0] + style.widthValue, coordinates[1] + style.heightValue, coordinates[0] + style.widthValue - style.borderRadiusValue, coordinates[1] + style.heightValue);
+ this._context.lineTo(coordinates[0] + style.borderRadiusValue, coordinates[1] + style.heightValue);
+ this._context.quadraticCurveTo(coordinates[0], coordinates[1] + style.heightValue, coordinates[0], coordinates[1] + style.heightValue - style.borderRadiusValue);
+ this._context.lineTo(coordinates[0], coordinates[1] + style.borderRadiusValue);
+ this._context.quadraticCurveTo(coordinates[0], coordinates[1], coordinates[0] + style.borderRadiusValue, coordinates[1]);
+ this._context.closePath();
+
+ if (style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+
+ this._context.stroke();
+ }
+ }
+ },
+
+ drawLineString: function (coordinates, style) {
+ this._drawLines([coordinates], false, style);
+ },
+
+ drawPolygon: function (coordinates, style) {
+ this._drawLines(coordinates, true, style);
+ },
+
+ drawBbox: function (bbox, style) {
+ this._drawLines([[
+ [bbox[0], bbox[1]],
+ [bbox[0], bbox[3]],
+ [bbox[2], bbox[3]],
+ [bbox[2], bbox[1]],
+ [bbox[0], bbox[1]]
+ ]], true, style);
+ },
+
+ _getGraphicStyle: function (style) {
+ function safeParse(value) {
+ value = parseInt(value);
+ return (+value + '') === value ? +value : value;
+ }
+
+ style = $.extend({}, this._options.style, style);
+ style.borderRadiusValue = safeParse(style.borderRadius);
+ style.fill = style.fill || style.color;
+ style.doFill = style.fill && style.fillOpacity > 0;
+ style.stroke = style.stroke || style.color;
+ style.strokeWidthValue = safeParse(style.strokeWidth);
+ style.doStroke = style.stroke && style.strokeOpacity > 0 && style.strokeWidthValue > 0;
+ style.widthValue = safeParse(style.width);
+ style.heightValue = safeParse(style.height);
+ return style;
+ },
+
+ _drawLines: function (coordinates, close, style) {
+ if (!coordinates || !coordinates.length || coordinates[0].length < 2) {
+ return;
+ }
+
+ var style = this._getGraphicStyle(style),
+ i, j;
+
+ if (style.visibility != "hidden" && style.opacity > 0) {
+ this._context.beginPath();
+ this._context.moveTo(coordinates[0][0][0], coordinates[0][0][1]);
+
+ for (i = 0; i < coordinates.length; i++) {
+ for (j = 0; j < coordinates[i].length; j++) {
+ this._context.lineTo(coordinates[i][j][0], coordinates[i][j][1]);
+ }
+ }
+
+ if (close) {
+ this._context.closePath();
+ }
+
+ if (close && style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineCap = this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+ this._context.stroke();
+ }
+ }
+ }
+ });
+
+
+})(jQuery);
+
+(function ($, undefined) {
+ var _ieVersion = (function () {
+ var v = 5, div = document.createElement("div"), a = div.all || [];
+ while (div.innerHTML = "<!--[if gt IE " + (++v) + "]><br><![endif]-->", a[0]) { }
+ return v > 6 ? v : !v;
+ } ()),
+
+ _defaultOptions = {
+ bbox: [-180, -85, 180, 85],
+ bboxMax: [-180, -85, 180, 85],
+ center: [0, 0],
+ cursors: {
+ pan: "move",
+ zoom: "crosshair",
+ drawPoint: "crosshair",
+ drawLineString: "crosshair",
+ drawPolygon: "crosshair"
+ },
+ drawStyle: {},
+ shapeStyle: {},
+ mode: "pan",
+ services: [
+ {
+ "class": "osm",
+ type: "tiled",
+ getUrl: function (view) {
+ return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "© OpenStreetMap & contributors, CC-BY-SA"
+ }
+ ],
+ tilingScheme: {
+ tileWidth: 256,
+ tileHeight: 256,
+ levels: 18,
+ basePixelSize: 156543.03392799936,
+ origin: [-20037508.342787, 20037508.342787]
+ },
+ zoom: 0,
+ pixelSize: 0
+ };
+
+ $.widget("geo.geomap", {
+ // private widget members
+ _$elem: undefined,
+ _created: false,
+
+ _contentBounds: {},
+
+ _$contentFrame: undefined,
+ _$existingChildren: undefined,
+ _$servicesContainer: undefined,
+ _$drawContainer: undefined,
+ _$shapesContainer: undefined,
+ _$textContainer: undefined,
+ _$textContent: undefined,
+ _$eventTarget: undefined,
+
+ _dpi: 96,
+
+ _currentServices: [], //< internal copy
+
+ _center: undefined,
+ _pixelSize: undefined,
+ _centerMax: undefined,
+ _pixelSizeMax: undefined,
+
+ _wheelZoomFactor: 1.18920711500273,
+ _wheelTimeout: null,
+ _wheelLevel: 0,
+
+ _zoomFactor: 2,
+
+ _mouseDown: undefined,
+ _inOp: undefined,
+ _toolPan: undefined,
+ _shiftZoom: undefined,
+ _anchor: undefined,
+ _current: undefined,
+ _downDate: undefined,
+ _moveDate: undefined,
+ _clickDate: undefined,
+ _lastMove: undefined,
+ _lastDrag: undefined,
+
+ _windowHandler: null,
+ _resizeTimeout: null,
+
+ _panning: undefined,
+ _velocity: undefined,
+ _friction: undefined,
+
+ _supportTouch: undefined,
+ _softDblClick: undefined,
+ _isTap: undefined,
+ _isDbltap: undefined,
+
+ _drawTimeout: null, //< used in drawPoint mode so we don't send two shape events on dbltap
+ _drawPixels: [], //< an array of coordinate arrays for drawing lines & polygons, in pixel coordinates
+ _drawCoords: [],
+
+ _graphicShapes: [], //< an array of objects containing style object refs & GeoJSON object refs
+
+ _initOptions: {},
+
+ _options: {},
+
+ options: $.extend({}, _defaultOptions),
+
+ _createWidget: function (options, element) {
+ this._$elem = $(element);
+
+ if (this._$elem.is("[data-geo-service]")) {
+ $.Widget.prototype._createWidget.apply(this, arguments);
+ return;
+ }
+
+ this._$elem.attr("data-geo-map", "data-geo-map");
+
+ this._graphicShapes = [];
+
+ this._initOptions = options || {};
+
+ this._forcePosition(this._$elem);
+
+ this._$elem.css("text-align", "left");
+
+ var size = this._findMapSize();
+ this._contentBounds = {
+ x: parseInt(this._$elem.css("padding-left")),
+ y: parseInt(this._$elem.css("padding-top")),
+ width: size["width"],
+ height: size["height"]
+ };
+
+ this._createChildren();
+
+ this._center = this._centerMax = [0, 0];
+
+ this.options["pixelSize"] = this._pixelSize = this._pixelSizeMax = 156543.03392799936;
+
+ this._mouseDown =
+ this._inOp =
+ this._toolPan =
+ this._shiftZoom =
+ this._panning =
+ this._isTap =
+ this._isDbltap = false;
+
+ this._anchor =
+ this._current =
+ this._lastMove =
+ this._lastDrag =
+ this._velocity = [0, 0];
+
+ this._friction = [.8, .8];
+
+ this._downDate =
+ this._moveDate =
+ this._clickDate = 0;
+
+ $.Widget.prototype._createWidget.apply(this, arguments);
+ },
+
+ _create: function () {
+ if (this._$elem.is("[data-geo-service]")) {
+ return;
+ }
+
+ this._options = this.options;
+
+ this._supportTouch = "ontouchend" in document;
+ this._softDblClick = this._supportTouch || _ieVersion == 7;
+
+ var touchStartEvent = this._supportTouch ? "touchstart" : "mousedown",
+ touchStopEvent = this._supportTouch ? "touchend touchcancel" : "mouseup",
+ touchMoveEvent = this._supportTouch ? "touchmove" : "mousemove";
+
+ $(document).keydown($.proxy(this._document_keydown, this));
+
+ this._$eventTarget.dblclick($.proxy(this._eventTarget_dblclick, this));
+
+ this._$eventTarget.bind(touchStartEvent, $.proxy(this._eventTarget_touchstart, this));
+
+ var dragTarget = (this._$eventTarget[0].setCapture) ? this._$eventTarget : $(document);
+ dragTarget.bind(touchMoveEvent, $.proxy(this._dragTarget_touchmove, this));
+ dragTarget.bind(touchStopEvent, $.proxy(this._dragTarget_touchstop, this));
+
+ this._$eventTarget.mousewheel($.proxy(this._eventTarget_mousewheel, this));
+
+ var geomap = this;
+ this._windowHandler = function () {
+ if (geomap._resizeTimeout) {
+ clearTimeout(geomap._resizeTimeout);
+ }
+ this._resizeTimeout = setTimeout(function () {
+ if (geomap._created) {
+ geomap._$elem.geomap("resize");
+ }
+ }, 500);
+ };
+
+ $(window).resize(this._windowHandler);
+
+ this._$drawContainer.geographics({ style: this._initOptions.drawStyle || {} });
+ this._options["drawStyle"] = this._$drawContainer.geographics("option", "style");
+
+ this._$shapesContainer.geographics( { style: this._initOptions.shapeStyle || { } } );
+ this._options["shapeStyle"] = this._$shapesContainer.geographics("option", "style");
+
+ if (this._initOptions) {
+ if (this._initOptions.bbox) {
+ this._setOption("bbox", this._initOptions.bbox, false);
+ }
+ if (this._initOptions.center) {
+ this._setOption("center", this._initOptions.center, false);
+ }
+ if (this._initOptions.zoom) {
+ this._setZoom(this._initOptions.zoom, false, false);
+ }
+ }
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+
+ this._createServices();
+
+ this._refresh();
+
+ this._created = true;
+ },
+
+ _setOption: function (key, value, refresh) {
+ if ( this._$elem.is( "[data-geo-service]" ) || key == "pixelSize" ) {
+ return;
+ }
+
+ refresh = (refresh === undefined || refresh);
+
+ switch (key) {
+ case "bbox":
+ if ($.geo.proj) {
+ value = $.geo.proj.fromGeodetic([[value[0], value[1]], [value[2], value[3]]]);
+ value = [value[0][0], value[0][1], value[1][0], value[1][1]];
+ }
+
+ this._setBbox(value, false, refresh);
+ value = this._getBbox();
+
+ if ($.geo.proj) {
+ value = $.geo.proj.toGeodetic([[value[0], value[1]], [value[2], value[3]]]);
+ value = [value[0][0], value[0][1], value[1][0], value[1][1]];
+ }
+ break;
+
+ case "center":
+ this._setCenterAndSize($.geo.proj ? $.geo.proj.fromGeodetic([[value[0], value[1]]])[0] : value, this._pixelSize, false, refresh);
+ break;
+
+ case "drawStyle":
+ if (this._$drawContainer) {
+ this._$drawContainer.geographics("option", "style", value);
+ value = this._$drawContainer.geographics("option", "style");
+ }
+ break;
+
+ case "shapeStyle":
+ if (this._$shapesContainer) {
+ this._$shapesContainer.geographics("option", "style", value);
+ value = this._$shapesContainer.geographics("option", "style");
+ }
+ break;
+
+ case "mode":
+ this._$drawContainer.geographics("clear");
+ this._$eventTarget.css("cursor", this._options["cursors"][value]);
+ break;
+
+ case "zoom":
+ this._setZoom(value, false, refresh);
+ break;
+ }
+
+ $.Widget.prototype._setOption.apply(this, arguments);
+
+ switch (key) {
+ case "services":
+ this._createServices();
+ if (refresh) {
+ this._refresh();
+ }
+ break;
+
+ case "shapeStyle":
+ if ( refresh ) {
+ this._$shapesContainer.geographics("clear");
+ this._refreshShapes( this._$shapesContainer, this._graphicShapes, this._graphicShapes );
+ }
+ break;
+ }
+ },
+
+ destroy: function () {
+ if (this._$elem.is("[data-geo-map]")) {
+ this._created = false;
+
+ $(window).unbind("resize", this._windowHandler);
+
+ for ( var i = 0; i < this._currentServices.length; i++ ) {
+ this._currentServices[i].serviceContainer.geomap("destroy");
+ $.geo["_serviceTypes"][this._currentServices[i].type].destroy(this, this._$servicesContainer, this._currentServices[i]);
+ }
+
+ this._$shapesContainer.geographics("destroy");
+ this._$drawContainer.geographics("destroy");
+
+ this._$existingChildren.detach();
+ this._$elem.html("");
+ this._$elem.append(this._$existingChildren);
+ this._$elem.removeAttr("data-geo-map");
+ }
+ $.Widget.prototype.destroy.apply(this, arguments);
+ },
+
+ toMap: function (p) {
+ p = this._toMap(p);
+ return $.geo.proj ? $.geo.proj.toGeodetic(p) : p;
+ },
+
+ toPixel: function ( p, _center /* Internal Use Only */, _pixelSize /* Internal Use Only */ ) {
+ p = $.geo.proj ? $.geo.proj.fromGeodetic(p) : p;
+ return this._toPixel(p, _center, _pixelSize);
+ },
+
+ opacity: function (value, _serviceContainer) {
+ if (this._$elem.is("[data-geo-service]")) {
+ this._$elem.closest("[data-geo-map]").geomap("opacity", value, this._$elem);
+ } else {
+ if (value >= 0 || value <= 1) {
+ for ( var i = 0; i < this._currentServices.length; i++ ) {
+ var service = this._currentServices[i];
+ if ( !_serviceContainer || service.serviceContainer[0] == _serviceContainer[0] ) {
+ this._options["services"][i].opacity = service.opacity = value;
+ $.geo["_serviceTypes"][service.type].opacity(this, service);
+ }
+ }
+ }
+ }
+ },
+
+ toggle: function (value, _serviceContainer) {
+ if (this._$elem.is("[data-geo-service]")) {
+ this._$elem.closest("[data-geo-map]").geomap("toggle", value, this._$elem);
+ } else {
+ for (var i = 0; i < this._currentServices.length; i++) {
+ var service = this._currentServices[i];
+ if (!_serviceContainer || service.serviceContainer[0] == _serviceContainer[0]) {
+ if (value === undefined) {
+ value = (service.visibility === undefined || service.visibility === "visible" ? false : true);
+ }
+
+ this._options["services"][i].visibility = service.visibility = ( value ? "visible" : "hidden" );
+ $.geo["_serviceTypes"][service.type].toggle(this, service);
+
+ if (value) {
+ $.geo["_serviceTypes"][service.type].refresh(this, service);
+ }
+ }
+ }
+ }
+ },
+
+ zoom: function (numberOfLevels) {
+ if (numberOfLevels != null) {
+ this._setZoom(this._options["zoom"] + numberOfLevels, false, true);
+ }
+ },
+
+ refresh: function () {
+ this._refresh();
+ },
+
+ resize: function () {
+ var size = this._findMapSize(),
+ dx = size["width"]/2 - this._contentBounds.width/2,
+ dy = size["height"]/2 - this._contentBounds.height/2,
+ i;
+
+ this._contentBounds = {
+ x: parseInt(this._$elem.css("padding-left")),
+ y: parseInt(this._$elem.css("padding-top")),
+ width: size["width"],
+ height: size["height"]
+ };
+
+ this._$contentFrame.css({
+ width: size["width"],
+ height: size["height"]
+ });
+
+ this._$servicesContainer.css({
+ width: size["width"],
+ height: size["height"]
+ });
+
+ this._$eventTarget.css({
+ width: size["width"],
+ height: size["height"]
+ });
+
+ var shapeStyle = this._$shapesContainer.geographics("option", "style");
+
+ this._$shapesContainer.geographics("destroy");
+ this._$drawContainer.geographics("destroy");
+
+ for (i = 0; i < this._currentServices.length; i++) {
+ $.geo["_serviceTypes"][this._currentServices[i].type].resize(this, this._currentServices[i]);
+ }
+
+
+ this._$drawContainer.css({
+ width: size.width,
+ height: size.height
+ });
+ this._$drawContainer.geographics();
+
+ this._$shapesContainer.css({
+ width: size.width,
+ height: size.height
+ });
+ this._$shapesContainer.geographics( { style: shapeStyle } );
+
+ for (i = 0; i < this._drawPixels.length; i++) {
+ this._drawPixels[i][0] += dx;
+ this._drawPixels[i][1] += dy;
+ }
+
+ this._setCenterAndSize(this._center, this._pixelSize, false, true);
+ },
+
+ append: function ( shape, style, refresh ) {
+ if ( shape ) {
+ var shapes, i = 0;
+ if ( shape.type == "FeatureCollection" ) {
+ shapes = shape.features;
+ } else {
+ shapes = $.isArray( shape ) ? shape : [ shape ];
+ }
+
+ if ( typeof style === "boolean" ) {
+ refresh = style;
+ style = null;
+ }
+
+ for ( ; i < shapes.length; i++ ) {
+ if ( shapes[ i ].type != "Point" ) {
+ var bbox = $.geo.bbox( shapes[ i ] );
+ if ( $.geo.proj ) {
+ bbox = $.geo.proj.fromGeodetic( bbox );
+ }
+ $.data( shapes[ i ], "geoBbox", bbox );
+ }
+
+ this._graphicShapes.push( {
+ shape: shapes[ i ],
+ style: style
+ } );
+ }
+
+ if ( refresh === undefined || refresh ) {
+ this._refresh( );
+ }
+ }
+ },
+
+ empty: function ( refresh ) {
+ $.each( this._graphicShapes, function( ) {
+ $.removeData( this, "geoBbox" );
+ } );
+ this._graphicShapes = [];
+ if ( refresh === undefined || refresh ) {
+ this._refresh();
+ }
+ },
+
+ find: function (point, pixelTolerance) {
+ var searchPixel = this.toPixel( point.coordinates ),
+ mapTol = this._pixelSize * pixelTolerance,
+ result = [],
+ curGeom;
+
+ $.each( this._graphicShapes, function ( i ) {
+ if ( this.shape.type == "Point" ) {
+ if ( $.geo.distance(this.shape, point) <= mapTol ) {
+ result.push( this.shape );
+ }
+ } else {
+ var bbox = $.data( this.shape, "geoBbox" ),
+ bboxPolygon = {
+ type: "Polygon",
+ coordinates: [ [
+ [bbox[0], bbox[1]],
+ [bbox[0], bbox[3]],
+ [bbox[2], bbox[3]],
+ [bbox[2], bbox[1]],
+ [bbox[0], bbox[1]]
+ ] ]
+ },
+ projectedPoint = {
+ type: "Point",
+ coordinates: $.geo.proj ? $.geo.proj.fromGeodetic( point.coordinates ) : point.coordinates
+ };
+
+ if ( $.geo.distance( bboxPolygon, projectedPoint, true ) <= mapTol ) {
+ var geometries = $.geo._flatten( this.shape );
+ for ( curGeom = 0; curGeom < geometries.length; curGeom++ ) {
+ if ( $.geo.distance( geometries[curGeom], point ) <= mapTol ) {
+ result.push( this.shape );
+ break;
+ }
+ }
+ }
+ }
+ });
+
+ return result;
+ },
+
+ remove: function ( shape, refresh ) {
+ var geomap = this;
+ $.each( this._graphicShapes, function ( i ) {
+ if ( this.shape == shape ) {
+ $.removeData( shape, "geoBbox" );
+ var rest = geomap._graphicShapes.slice( i + 1 );
+ geomap._graphicShapes.length = i;
+ geomap._graphicShapes.push.apply(geomap._graphicShapes, rest);
+ return false;
+ }
+ });
+
+ if ( refresh === undefined || refresh ) {
+ this._refresh();
+ }
+ },
+
+ _getBbox: function (center, pixelSize) {
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+ // calculate the internal bbox
+ var halfWidth = this._contentBounds["width"] / 2 * pixelSize,
+ halfHeight = this._contentBounds["height"] / 2 * pixelSize;
+ return [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight];
+ },
+
+ _setBbox: function (value, trigger, refresh) {
+ var center = [value[0] + (value[2] - value[0]) / 2, value[1] + (value[3] - value[1]) / 2],
+ pixelSize = Math.max($.geo.width(value, true) / this._contentBounds.width, $.geo.height(value, true) / this._contentBounds.height);
+
+ if (this._options["tilingScheme"]) {
+ var zoom = this._getTiledZoom(pixelSize);
+ pixelSize = this._getTiledPixelSize(zoom);
+ }
+ this._setCenterAndSize(center, pixelSize, trigger, refresh);
+ },
+
+ _getBboxMax: function () {
+ // calculate the internal bboxMax
+ var halfWidth = this._contentBounds["width"] / 2 * this._pixelSizeMax,
+ halfHeight = this._contentBounds["height"] / 2 * this._pixelSizeMax;
+ return [this._centerMax[0] - halfWidth, this._centerMax[1] - halfHeight, this._centerMax[0] + halfWidth, this._centerMax[1] + halfHeight];
+ },
+
+ _getCenter: function () {
+ return this._center;
+ },
+
+ _getContentBounds: function () {
+ return this._contentBounds;
+ },
+
+ _getServicesContainer: function () {
+ return this._$servicesContainer;
+ },
+
+ _getZoom: function () {
+ // calculate the internal zoom level, vs. public zoom property
+ if (this._options["tilingScheme"]) {
+ return this._getTiledZoom(this._pixelSize);
+ } else {
+ var ratio = this._contentBounds["width"] / this._contentBounds["height"],
+ bbox = $.geo.reaspect(this._getBbox(), ratio, true),
+ bboxMax = $.geo.reaspect(this._getBboxMax(), ratio, true);
+
+ return Math.log($.geo.width(bboxMax, true) / $.geo.width(bbox, true)) / Math.log(this._zoomFactor);
+ }
+ },
+
+ _setZoom: function (value, trigger, refresh) {
+ value = Math.max(value, 0);
+
+ if (this._options["tilingScheme"]) {
+ this._setCenterAndSize(this._center, this._getTiledPixelSize(value), trigger, refresh);
+ } else {
+ var bbox = $.geo.scaleBy(this._getBboxMax(), 1 / Math.pow(this._zoomFactor, value), true),
+ pixelSize = Math.max($.geo.width(bbox, true) / this._contentBounds.width, $.geo.height(bbox, true) / this._contentBounds.height);
+ this._setCenterAndSize(this._center, pixelSize, trigger, refresh);
+ }
+ },
+
+ _createChildren: function () {
+ this._$existingChildren = this._$elem.children().detach();
+
+ this._forcePosition(this._$existingChildren);
+
+ this._$existingChildren.css("-moz-user-select", "none");
+
+ this._$elem.prepend("<div style='position:absolute; left:" + this._contentBounds.x + "px; top:" + this._contentBounds.y + "px; width:" + this._contentBounds["width"] + "px; height:" + this._contentBounds["height"] + "px; margin:0; padding:0; overflow:hidden; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none;' unselectable='on'></div>");
+ this._$eventTarget = this._$contentFrame = this._$elem.children(':first');
+
+ this._$contentFrame.append('<div style="position:absolute; left:0; top:0; width:' + this._contentBounds["width"] + 'px; height:' + this._contentBounds["height"] + 'px; margin:0; padding:0;"></div>');
+ this._$servicesContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append('<div style="position:absolute; left:0; top:0; width:' + this._contentBounds["width"] + 'px; height:' + this._contentBounds["height"] + 'px; margin:0; padding:0;"></div>');
+ this._$shapesContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append('<div style="position:absolute; left:0; top:0; width:' + this._contentBounds["width"] + 'px; height:' + this._contentBounds["height"] + 'px; margin:0; padding:0;"></div>');
+ this._$drawContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append('<div class="ui-widget ui-widget-content ui-corner-all" style="position:absolute; left:0; top:0px; max-width:128px; display:none;"><div style="margin:.2em;"></div></div>');
+ this._$textContainer = this._$contentFrame.children(':last');
+ this._$textContent = this._$textContainer.children();
+
+ this._$contentFrame.append(this._$existingChildren);
+ },
+
+ _createServices: function () {
+ var i;
+
+ for (i = 0; i < this._currentServices.length; i++) {
+ this._currentServices[i].serviceContainer.geomap("destroy");
+ $.geo["_serviceTypes"][this._currentServices[i].type].destroy(this, this._$servicesContainer, this._currentServices[i]);
+ }
+
+ this._currentServices = [];
+ for (i = 0; i < this._options["services"].length; i++) {
+ this._currentServices[i] = this._options["services"][i];
+ this._currentServices[i].serviceContainer = $.geo["_serviceTypes"][this._currentServices[i].type].create(this, this._$servicesContainer, this._currentServices[i], i).geomap();
+ }
+ },
+
+ _refreshDrawing: function () {
+ this._$drawContainer.geographics("clear");
+
+ if ( this._drawPixels.length > 0 ) {
+ var mode = this._options[ "mode" ],
+ coords = this._drawPixels;
+
+ if ( mode == "drawPolygon" ) {
+ coords = [ coords ];
+ }
+
+ this._$drawContainer.geographics( mode, coords );
+ }
+ },
+
+ _resetDrawing: function () {
+ //this._$textContainer.hide();
+ this._drawPixels = [];
+ this._drawCoords = [];
+ this._$drawContainer.geographics("clear");
+ },
+
+ _refreshShapes: function (geographics, shapes, styles, center, pixelSize) {
+ var i,
+ mgi,
+ shape,
+ shapeBbox,
+ style,
+ pixelPositions,
+ bbox = this._getBbox(center, pixelSize),
+ geomap = this;
+
+ for (i = 0; i < shapes.length; i++) {
+ shape = shapes[i].shape || shapes[i];
+ shape = shape.geometry || shape;
+ shapeBbox = $.data(shape, "geoBbox");
+
+ if ( shapeBbox && $.geo._bboxDisjoint( bbox, shapeBbox ) ) {
+ continue;
+ }
+
+ style = $.isArray(styles) ? styles[i].style : styles;
+
+ switch (shape.type) {
+ case "Point":
+ this._$shapesContainer.geographics("drawPoint", this.toPixel(shape.coordinates, center, pixelSize), style);
+ break;
+ case "LineString":
+ this._$shapesContainer.geographics("drawLineString", this.toPixel(shape.coordinates, center, pixelSize), style);
+ break;
+ case "Polygon":
+ pixelPositions = [];
+ $.each(shape.coordinates, function (i) {
+ pixelPositions[i] = geomap.toPixel(this, center, pixelSize);
+ });
+ this._$shapesContainer.geographics("drawPolygon", pixelPositions, style);
+ break;
+ case "MultiPoint":
+ for (mgi = 0; mgi < shape.coordinates; mgi++) {
+ this._$shapesContainer.geographics("drawPoint", this.toPixel(shape.coordinates[mgi], center, pixelSize), style);
+ }
+ break;
+ case "MultiLineString":
+ for (mgi = 0; mgi < shape.coordinates; mgi++) {
+ this._$shapesContainer.geographics("drawLineString", this.toPixel(shape.coordinates[mgi], center, pixelSize), style);
+ }
+ break;
+ case "MultiPolygon":
+ for (mgi = 0; mgi < shape.coordinates; mgi++) {
+ pixelPositions = [];
+ $.each(shape.coordinates[mgi], function (i) {
+ pixelPositions[i] = geomap.toPixel(this, center, pixelSize);
+ });
+ this._$shapesContainer.geographics("drawPolygon", pixelPositions, style);
+ }
+ break;
+
+ case "GeometryCollection":
+ geomap._refreshShapes(geographics, shape.geometries, style, center, pixelSize);
+ break;
+ }
+ }
+ },
+
+ _findMapSize: function () {
+ // really, really attempt to find a size for this thing
+ // even if it's hidden (look at parents)
+ var size = { width: 0, height: 0 },
+ sizeContainer = this._$elem;
+
+ while (sizeContainer.size() && !(size["width"] > 0 && size["height"] > 0)) {
+ size = { width: sizeContainer.width(), height: sizeContainer.height() };
+ if (size["width"] <= 0 || size["height"] <= 0) {
+ size = { width: parseInt(sizeContainer.css("width")), height: parseInt(sizeContainer.css("height")) };
+ }
+ sizeContainer = sizeContainer.parent();
+ }
+ return size;
+ },
+
+ _forcePosition: function (elem) {
+ var cssPosition = elem.css("position");
+ if (cssPosition != "relative" && cssPosition != "absolute" && cssPosition != "fixed") {
+ elem.css("position", "relative");
+ }
+ },
+
+ _getTiledPixelSize: function (zoom) {
+ var tilingScheme = this._options["tilingScheme"];
+ if (tilingScheme != null) {
+ if (zoom === 0) {
+ return tilingScheme.pixelSizes != null ? tilingScheme.pixelSizes[0] : tilingScheme.basePixelSize;
+ }
+
+ zoom = Math.round(zoom);
+ zoom = Math.max(zoom, 0);
+ var levels = tilingScheme.pixelSizes != null ? tilingScheme.pixelSizes.length : tilingScheme.levels;
+ zoom = Math.min(zoom, levels - 1);
+
+ if (tilingScheme.pixelSizes != null) {
+ return tilingScheme.pixelSizes[zoom];
+ } else {
+ return tilingScheme.basePixelSize / Math.pow(2, zoom);
+ }
+ } else {
+ return NaN;
+ }
+ },
+
+ _getTiledZoom: function (pixelSize) {
+ var tilingScheme = this._options["tilingScheme"];
+ if (tilingScheme.pixelSizes != null) {
+ var roundedPixelSize = Math.floor(pixelSize * 1000),
+ levels = tilingScheme.pixelSizes != null ? tilingScheme.pixelSizes.length : tilingScheme.levels;
+ for (var i = levels - 1; i >= 0; i--) {
+ if (Math.floor(tilingScheme.pixelSizes[i] * 1000) >= roundedPixelSize) {
+ return i;
+ }
+ }
+ return 0;
+ } else {
+ return Math.max(Math.round(Math.log(tilingScheme.basePixelSize / pixelSize) / Math.log(2)), 0);
+ }
+ },
+
+ _getZoomCenterAndSize: function (anchor, zoomDelta, zoomFactor) {
+ var pixelSize, zoomLevel, scale;
+ if (this._options["tilingScheme"]) {
+ zoomLevel = this._getTiledZoom(this._pixelSize) + zoomDelta;
+ pixelSize = this._getTiledPixelSize(zoomLevel);
+ } else {
+ scale = Math.pow(zoomFactor, -zoomDelta);
+ pixelSize = this._pixelSize * scale;
+ }
+
+ var
+ ratio = pixelSize / this._pixelSize,
+ anchorMapCoord = this._toMap(anchor),
+ centerDelta = [(this._center[0] - anchorMapCoord[0]) * ratio, (this._center[1] - anchorMapCoord[1]) * ratio],
+ scaleCenter = [anchorMapCoord[0] + centerDelta[0], anchorMapCoord[1] + centerDelta[1]];
+
+ return { pixelSize: pixelSize, center: scaleCenter };
+ },
+
+ _mouseWheelFinish: function () {
+ this._wheelTimeout = null;
+
+ if (this._wheelLevel != 0) {
+ var wheelCenterAndSize = this._getZoomCenterAndSize(this._anchor, this._wheelLevel, this._wheelZoomFactor);
+
+ this._setCenterAndSize(wheelCenterAndSize.center, wheelCenterAndSize.pixelSize, true, true);
+
+ this._wheelLevel = 0;
+ } else {
+ this._refresh();
+ }
+ },
+
+ _panEnd: function () {
+ this._velocity = [
+ (this._velocity[0] > 0 ? Math.floor(this._velocity[0] * this._friction[0]) : Math.ceil(this._velocity[0] * this._friction[0])),
+ (this._velocity[1] > 0 ? Math.floor(this._velocity[1] * this._friction[1]) : Math.ceil(this._velocity[1] * this._friction[1]))
+ ];
+
+ if (Math.abs(this._velocity[0]) < 4 && Math.abs(this._velocity[1]) < 4) {
+ this._panFinalize();
+ } else {
+ this._current = [
+ this._current[0] + this._velocity[0],
+ this._current[1] + this._velocity[1]
+ ];
+
+ this._panMove();
+ setTimeout($.proxy(this._panEnd, this), 30);
+ }
+ },
+
+ _panFinalize: function () {
+ if (this._panning) {
+ this._velocity = [0, 0];
+
+ var dx = this._current[0] - this._anchor[0],
+ dy = this._current[1] - this._anchor[1],
+ dxMap = -dx * this._pixelSize,
+ dyMap = dy * this._pixelSize;
+
+ this._$shapesContainer.css({ left: 0, top: 0 });
+
+ this._setCenterAndSize([this._center[0] + dxMap, this._center[1] + dyMap], this._pixelSize, true, true);
+
+ this._inOp = false;
+ this._anchor = this._current;
+ this._toolPan = this._panning = false;
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+ }
+ },
+
+ _panMove: function () {
+ var dx = this._current[0] - this._lastDrag[0],
+ dy = this._current[1] - this._lastDrag[1],
+ i = 0,
+ service;
+
+ if (this._toolPan || dx > 3 || dx < -3 || dy > 3 || dy < -3) {
+ if (!this._toolPan) {
+ this._toolPan = true;
+ this._$eventTarget.css("cursor", this._options["cursors"]["pan"]);
+ }
+
+ if (this._mouseDown) {
+ this._velocity = [dx, dy];
+ }
+
+ if (dx != 0 || dy != 0) {
+ this._panning = true;
+ this._lastDrag = this._current;
+
+ for (i = 0; i < this._options["services"].length; i++) {
+ service = this._options["services"][i];
+ $.geo["_serviceTypes"][service.type].interactivePan(this, service, dx, dy);
+ }
+
+ this._$shapesContainer.css({
+ left: function (index, value) {
+ return parseInt(value) + dx;
+ },
+ top: function (index, value) {
+ return parseInt(value) + dy;
+ }
+ });
+
+ for (i = 0; i < this._drawPixels.length; i++) {
+ this._drawPixels[i][0] += dx;
+ this._drawPixels[i][1] += dy;
+ }
+
+ this._refreshDrawing();
+ }
+ }
+ },
+
+ _refresh: function () {
+ for (var i = 0; i < this._options["services"].length; i++) {
+ var service = this._options["services"][i];
+ if (!this._mouseDown && $.geo["_serviceTypes"][service.type] != null) {
+ $.geo["_serviceTypes"][service.type].refresh(this, service);
+ }
+ }
+
+ if (this._$shapesContainer) {
+ this._$shapesContainer.geographics("clear");
+ if (this._graphicShapes.length > 0) {
+ this._refreshShapes(this._$shapesContainer, this._graphicShapes, this._graphicShapes);
+ }
+ }
+ },
+
+ _setCenterAndSize: function (center, pixelSize, trigger, refresh) {
+ // the final call during any extent change
+ if (this._pixelSize != pixelSize) {
+ this._$shapesContainer.geographics("clear");
+ for (var i = 0; i < this._options["services"].length; i++) {
+ var service = this._options["services"][i];
+ $.geo["_serviceTypes"][service.type].interactiveScale(this, service, center, pixelSize);
+ }
+ }
+
+ this._center = center;
+ this.options["pixelSize"] = this._pixelSize = pixelSize;
+
+ if ($.geo.proj) {
+ var bbox = this._getBbox();
+ bbox = $.geo.proj.toGeodetic([[bbox[0], bbox[1]], [bbox[2], bbox[3]]]);
+ bbox = [bbox[0][0], bbox[0][1], bbox[1][0], bbox[1][1]];
+ this._options["bbox"] = bbox;
+
+ this._options["center"] = $.geo.proj.toGeodetic([[this._center[0], this._center[1]]])[0];
+ } else {
+ this._options["bbox"] = this._getBbox();
+
+ this._options["center"] = this._center;
+ }
+
+ this._options["zoom"] = this._getZoom();
+
+ if (this._drawCoords.length > 0) {
+ this._drawPixels = this._toPixel(this._drawCoords);
+ }
+
+ if (trigger) {
+ this._trigger("bboxchange", window.event, { bbox: this._options["bbox"] });
+ }
+
+ if (refresh) {
+ this._refresh();
+ this._refreshDrawing();
+ }
+ },
+
+ _toMap: function (p, center, pixelSize) {
+ // ignores $.geo.proj
+ var isArray = $.isArray(p[0]);
+ if (!isArray) {
+ p = [p];
+ }
+
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ var width = this._contentBounds["width"],
+ height = this._contentBounds["height"],
+ halfWidth = width / 2 * pixelSize,
+ halfHeight = height / 2 * pixelSize,
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight],
+ xRatio = $.geo.width(bbox, true) / width,
+ yRatio = $.geo.height(bbox, true) / height,
+ result = [];
+
+ $.each(p, function (i) {
+ var yOffset = (this[1] * yRatio);
+ result[i] = [bbox[0] + (this[0] * xRatio), bbox[3] - yOffset];
+ });
+
+ return isArray ? result : result[0];
+ },
+
+ _toPixel: function (p, center, pixelSize) {
+ // ignores $.geo.proj
+ var isArray = $.isArray(p[0]);
+ if (!isArray) {
+ p = [p];
+ }
+
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ var
+ width = this._contentBounds["width"],
+ height = this._contentBounds["height"],
+ halfWidth = width / 2 * pixelSize,
+ halfHeight = height / 2 * pixelSize,
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight],
+ bboxWidth = $.geo.width(bbox, true),
+ bboxHeight = $.geo.height(bbox, true),
+ result = [];
+
+ $.each(p, function (i) {
+ result[i] = [
+ Math.round((this[0] - bbox[0]) * width / bboxWidth),
+ Math.round((bbox[3] - this[1]) * height / bboxHeight)
+ ];
+ });
+
+ return isArray ? result : result[0];
+ },
+
+ _zoomTo: function (coord, zoom, trigger, refresh) {
+ zoom = zoom < 0 ? 0 : zoom;
+
+ var tiledPixelSize = this._getTiledPixelSize(zoom);
+
+ if (!isNaN(tiledPixelSize)) {
+ this._setCenterAndSize(coord, tiledPixelSize, trigger, refresh);
+ } else {
+ var bboxMax = $.geo._scaleBy(this._getBboxMax(), 1 / Math.pow(this._zoomFactor, zoom), true),
+ pixelSize = Math.max($.geo.width(bboxMax, true) / this._contentBounds["width"], $.geo.height(bboxMax, true) / this._contentBounds["height"]);
+
+ this._setCenterAndSize(coord, pixelSize, trigger, refresh);
+ }
+ },
+
+ _document_keydown: function (e) {
+ var len = this._drawCoords.length;
+ if (len > 0 && e.which == 27) {
+ if (len <= 2) {
+ this._resetDrawing();
+ this._inOp = false;
+ } else {
+ this._drawCoords[len - 2] = $.merge( [], this._drawCoords[ len - 1 ] );
+ this._drawPixels[len - 2] = $.merge( [], this._drawPixels[ len - 1 ] );
+
+ this._drawCoords.length--;
+ this._drawPixels.length--;
+
+ this._refreshDrawing();
+ }
+ }
+ },
+
+ _eventTarget_dblclick_zoom: function(e) {
+ this._trigger("dblclick", e, { type: "Point", coordinates: this.toMap(this._current) });
+ if (!e.isDefaultPrevented()) {
+ var centerAndSize = this._getZoomCenterAndSize(this._current, 1, this._zoomFactor);
+ this._setCenterAndSize(centerAndSize.center, centerAndSize.pixelSize, true, true);
+ }
+ },
+
+ _eventTarget_dblclick: function (e) {
+ this._panFinalize();
+
+ if (this._drawTimeout) {
+ window.clearTimeout(this._drawTimeout);
+ this._drawTimeout = null;
+ }
+
+ var offset = $(e.currentTarget).offset();
+
+ switch (this._options["mode"]) {
+ case "pan":
+ case "drawPoint":
+ this._eventTarget_dblclick_zoom(e);
+ break;
+
+ case "drawLineString":
+ if ( this._drawCoords.length > 1 && ! ( this._drawCoords[0][0] == this._drawCoords[1][0] &&
+ this._drawCoords[0][1] == this._drawCoords[1][1] ) ) {
+ this._drawCoords.length--;
+ this._trigger( "shape", e, {
+ type: "LineString",
+ coordinates: $.geo.proj ? $.geo.proj.toGeodetic(this._drawCoords) : this._drawCoords
+ } );
+ } else {
+ this._eventTarget_dblclick_zoom(e);
+ }
+ this._resetDrawing();
+ break;
+
+ case "drawPolygon":
+ if ( this._drawCoords.length > 1 && ! ( this._drawCoords[0][0] == this._drawCoords[1][0] &&
+ this._drawCoords[0][1] == this._drawCoords[1][1] ) ) {
+ var endIndex = this._drawCoords.length - 1;
+ if (endIndex > 2) {
+ this._drawCoords[endIndex] = $.merge( [], this._drawCoords[0] );
+ this._trigger( "shape", e, {
+ type: "Polygon",
+ coordinates: [ $.geo.proj ? $.geo.proj.toGeodetic(this._drawCoords) : this._drawCoords ]
+ } );
+ }
+ } else {
+ this._eventTarget_dblclick_zoom(e);
+ }
+ this._resetDrawing();
+ break;
+ }
+
+ this._inOp = false;
+ },
+
+ _eventTarget_touchstart: function (e) {
+ if (!this._supportTouch && e.which != 1) {
+ return;
+ }
+
+ this._panFinalize();
+ this._mouseWheelFinish();
+
+ var offset = $(e.currentTarget).offset();
+
+ if (this._supportTouch) {
+ this._current = [e.originalEvent.changedTouches[0].pageX - offset.left, e.originalEvent.changedTouches[0].pageY - offset.top];
+ } else {
+ this._current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ if (this._softDblClick) {
+ var downDate = $.now();
+ if (downDate - this._downDate < 750) {
+ if (this._isTap) {
+ var dx = this._current[0] - this._anchor[0],
+ dy = this._current[1] - this._anchor[1],
+ distance = Math.sqrt((dx * dx) + (dy * dy));
+ if (distance > 10) {
+ this._isTap = false;
+ } else {
+ this._current = this._anchor;
+ }
+ }
+
+ if (this._isDbltap) {
+ this._isDbltap = false;
+ } else {
+ this._isDbltap = this._isTap;
+ }
+ } else {
+ this._isDbltap = false;
+ }
+ this._isTap = true;
+ this._downDate = downDate;
+ }
+
+
+ this._mouseDown = true;
+ this._anchor = this._current;
+
+ if (!this._inOp && e.shiftKey) {
+ this._shiftZoom = true;
+ this._$eventTarget.css("cursor", this._options["cursors"]["zoom"]);
+ } else {
+ this._inOp = true;
+
+ switch (this._options["mode"]) {
+ case "pan":
+ case "drawPoint":
+ case "drawLineString":
+ case "drawPolygon":
+ this._lastDrag = this._current;
+
+ if (e.currentTarget.setCapture) {
+ e.currentTarget.setCapture();
+ }
+
+ break;
+ }
+ }
+
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ },
+
+ _dragTarget_touchmove: function (e) {
+ var offset = this._$eventTarget.offset(),
+ drawCoordsLen = this._drawCoords.length,
+ current;
+
+ if (this._supportTouch) {
+ current = [e.originalEvent.changedTouches[0].pageX - offset.left, e.originalEvent.changedTouches[0].pageY - offset.top];
+ } else {
+ current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ if (current[0] === this._lastMove[0] && current[1] === this._lastMove[1]) {
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ }
+
+ if (this._softDblClick) {
+ this._isDbltap = this._isTap = false;
+ }
+
+ if (this._mouseDown) {
+ this._current = current;
+ this._moveDate = $.now();
+ }
+
+ var mode = this._shiftZoom ? "zoom" : this._options["mode"];
+
+ switch (mode) {
+ case "zoom":
+ if ( this._mouseDown ) {
+ this._$drawContainer.geographics( "clear" );
+ this._$drawContainer.geographics( "drawBbox", [
+ this._anchor[ 0 ],
+ this._anchor[ 1 ],
+ current[ 0 ],
+ current[ 1 ]
+ ] );
+ } else {
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+
+ case "pan":
+ case "drawPoint":
+ if (this._mouseDown || this._toolPan) {
+ this._panMove();
+ } else {
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+
+ case "drawLineString":
+ case "drawPolygon":
+ if (this._mouseDown || this._toolPan) {
+ this._panMove();
+ } else {
+ if (drawCoordsLen > 0) {
+ this._drawCoords[drawCoordsLen - 1] = this._toMap(current);
+ this._drawPixels[drawCoordsLen - 1] = current;
+
+ this._refreshDrawing();
+ }
+
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+ }
+
+ this._lastMove = current;
+
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ },
+
+ _dragTarget_touchstop: function (e) {
+ if (!this._mouseDown && _ieVersion == 7) {
+ // ie7 doesn't appear to trigger dblclick on this._$eventTarget,
+ // we fake regular click here to cause soft dblclick
+ this._eventTarget_touchstart(e);
+ }
+
+ var mouseWasDown = this._mouseDown,
+ wasToolPan = this._toolPan,
+ offset = this._$eventTarget.offset(),
+ mode = this._shiftZoom ? "zoom" : this._options["mode"],
+ current, i, clickDate,
+ dx, dy;
+
+ if (this._supportTouch) {
+ current = [e.originalEvent.changedTouches[0].pageX - offset.left, e.originalEvent.changedTouches[0].pageY - offset.top];
+ } else {
+ current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ dx = current[0] - this._anchor[0];
+ dy = current[1] - this._anchor[1];
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+
+ this._shiftZoom = this._mouseDown = this._toolPan = false;
+
+ if (document.releaseCapture) {
+ document.releaseCapture();
+ }
+
+ if (mouseWasDown) {
+ clickDate = $.now();
+ this._current = current;
+
+ switch (mode) {
+ case "zoom":
+ if ( dx > 0 || dy > 0 ) {
+ var minSize = this._pixelSize * 6,
+ bboxCoords = this._toMap( [ [
+ Math.min( this._anchor[ 0 ], current[ 0 ] ),
+ Math.max( this._anchor[ 1 ], current[ 1 ] )
+ ], [
+ Math.max( this._anchor[ 0 ], current[ 0 ] ),
+ Math.min( this._anchor[ 1 ], current[ 1 ] )
+ ]
+ ] ),
+ bbox = [
+ bboxCoords[0][0],
+ bboxCoords[0][1],
+ bboxCoords[1][0],
+ bboxCoords[1][1]
+ ];
+
+ if ( ( bbox[2] - bbox[0] ) < minSize && ( bbox[3] - bbox[1] ) < minSize ) {
+ bbox = $.geo.scaleBy( this._getBbox( $.geo.center( bbox, true ) ), .5, true );
+ }
+
+ this._setBbox(bbox, true, true);
+ }
+
+ this._resetDrawing();
+ break;
+
+ case "pan":
+ if (wasToolPan) {
+ this._panEnd();
+ } else {
+ if (clickDate - this._clickDate > 100) {
+ this._trigger("click", e, { type: "Point", coordinates: this.toMap(current) });
+ this._inOp = false;
+ }
+ }
+ break;
+
+ case "drawPoint":
+ if (this._drawTimeout) {
+ window.clearTimeout(this._drawTimeout);
+ this._drawTimeout = null;
+ }
+
+ if (wasToolPan) {
+ this._panFinalize();
+ } else {
+ if (clickDate - this._clickDate > 100) {
+ var geomap = this;
+ this._drawTimeout = setTimeout(function () {
+ if (geomap._drawTimeout) {
+ geomap._trigger("shape", e, { type: "Point", coordinates: geomap.toMap(current) });
+ geomap._inOp = false;
+ geomap._drawTimeout = false;
+ }
+ }, 250);
+ }
+ }
+ break;
+
+ case "drawLineString":
+ case "drawPolygon":
+ if (wasToolPan) {
+ this._panFinalize();
+ } else {
+ i = (this._drawCoords.length == 0 ? 0 : this._drawCoords.length - 1);
+
+ this._drawCoords[i] = this._toMap(current);
+ this._drawPixels[i] = current;
+
+ if (i < 2 || !(this._drawCoords[i][0] == this._drawCoords[i-1][0] &&
+ this._drawCoords[i][1] == this._drawCoords[i-1][1])) {
+ this._drawCoords[i + 1] = this._toMap(current);
+ this._drawPixels[i + 1] = current;
+ }
+
+ this._refreshDrawing();
+ }
+ break;
+ }
+
+ this._clickDate = clickDate;
+
+ if (this._softDblClick && this._isDbltap) {
+ this._isDbltap = this._isTap = false;
+ this._$eventTarget.trigger("dblclick", e);
+ }
+ }
+
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ },
+
+ _eventTarget_mousewheel: function (e, delta) {
+ e.preventDefault();
+
+ this._panFinalize();
+
+ if (this._mouseDown) {
+ return false;
+ }
+
+ if (delta != 0) {
+ if (this._wheelTimeout) {
+ window.clearTimeout(this._wheelTimeout);
+ this._wheelTimeout = null;
+ } else {
+ var offset = $(e.currentTarget).offset();
+ this._anchor = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ this._wheelLevel += delta;
+
+ var wheelCenterAndSize = this._getZoomCenterAndSize(this._anchor, this._wheelLevel, this._wheelZoomFactor);
+
+ this._$shapesContainer.geographics("clear");
+
+ for (i = 0; i < this._options["services"].length; i++) {
+ var service = this._options["services"][i];
+ $.geo["_serviceTypes"][service.type].interactiveScale(this, service, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ }
+
+ this._$shapesContainer.geographics("clear");
+ if (this._graphicShapes.length > 0 && this._graphicShapes.length < 256) {
+ this._refreshShapes(this._$shapesContainer, this._graphicShapes, this._graphicShapes, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ }
+
+ if (this._drawCoords.length > 0) {
+ this._drawPixels = this._toPixel(this._drawCoords, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ this._refreshDrawing();
+ }
+
+ var geomap = this;
+ this._wheelTimeout = window.setTimeout(function () {
+ geomap._mouseWheelFinish();
+ }, 1000);
+ }
+
+ return false;
+ }
+ }
+ );
+})(jQuery);
+
+(function ($, undefined) {
+ $.geo._serviceTypes.tiled = (function () {
+ return {
+ create: function (map, servicesContainer, service, index) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( !serviceState ) {
+ serviceState = {
+ loadCount: 0,
+ reloadTiles: false
+ };
+
+ var idString = service.id ? ' id="' + service.id + '"' : "",
+ classString = service["class"] ? ' class="' + service["class"] + '"' : "",
+ scHtml = '<div data-geo-service="tiled"' + idString + classString + ' style="position:absolute; left:0; top:0; width:8px; height:8px; margin:0; padding:0; display:' + (service.visibility === undefined || service.visibility === "visible" ? "block" : "none") + ';"></div>';
+
+ servicesContainer.append(scHtml);
+
+ serviceState.serviceContainer = servicesContainer.children(":last");
+ $.data(service, "geoServiceState", serviceState);
+ }
+
+ return serviceState.serviceContainer;
+ },
+
+ destroy: function (map, servicesContainer, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ serviceState.serviceContainer.remove();
+
+ $.removeData(service, "geoServiceState");
+ },
+
+ interactivePan: function ( map, service, dx, dy ) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if ( serviceState ) {
+ this._cancelUnloaded( map, service );
+
+ serviceState.serviceContainer.children( ).css( {
+ left: function ( index, value ) {
+ return parseInt( value ) + dx;
+ },
+ top: function ( index, value ) {
+ return parseInt( value ) + dy;
+ }
+ });
+
+ if ( service && ( service.visibility === undefined || service.visibility === "visible" ) ) {
+ var pixelSize = map._pixelSize,
+
+ serviceContainer = serviceState.serviceContainer,
+ scaleContainer = serviceContainer.children("[data-pixelSize='" + pixelSize + "']"),
+
+ /* same as refresh 1 */
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight,
+ /* end same as refresh 1 */
+
+ halfWidth = mapWidth / 2 * pixelSize,
+ halfHeight = mapHeight / 2 * pixelSize,
+
+ currentPosition = scaleContainer.position(),
+ scaleOriginParts = scaleContainer.data("scaleOrigin").split(","),
+ totalDx = parseInt(scaleOriginParts[0]) - currentPosition.left,
+ totalDy = parseInt(scaleOriginParts[1]) - currentPosition.top,
+
+ mapCenterOriginal = map._getCenter(),
+ mapCenter = [mapCenterOriginal[0] + totalDx * pixelSize, mapCenterOriginal[1] - totalDy * pixelSize],
+
+ /* same as refresh 2 */
+ tileX = Math.floor(((mapCenter[0] - halfWidth) - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY = Math.floor((tilingScheme.origin[1] - (mapCenter[1] + halfHeight)) / (pixelSize * tileHeight)),
+ tileX2 = Math.ceil(((mapCenter[0] + halfWidth) - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY2 = Math.ceil((tilingScheme.origin[1] - (mapCenter[1] - halfHeight)) / (pixelSize * tileHeight)),
+
+ bboxMax = map._getBboxMax(),
+ pixelSizeAtZero = map._getTiledPixelSize(0),
+ ratio = pixelSizeAtZero / pixelSize,
+ fullXAtScale = Math.floor((bboxMax[0] - tilingScheme.origin[0]) / (pixelSizeAtZero * tileWidth)) * ratio,
+ fullYAtScale = Math.floor((tilingScheme.origin[1] - bboxMax[3]) / (pixelSizeAtZero * tileHeight)) * ratio,
+
+ fullXMinX = tilingScheme.origin[0] + (fullXAtScale * tileWidth) * pixelSize,
+ fullYMaxY = tilingScheme.origin[1] - (fullYAtScale * tileHeight) * pixelSize,
+ /* end same as refresh 2 */
+
+ serviceLeft = Math.round((fullXMinX - (mapCenterOriginal[0] - halfWidth)) / pixelSize),
+ serviceTop = Math.round(((mapCenterOriginal[1] + halfHeight) - fullYMaxY) / pixelSize),
+
+ opacity = (service.opacity === undefined ? 1 : service.opacity),
+
+ x, y;
+
+ for ( x = tileX; x < tileX2; x++ ) {
+ for ( y = tileY; y < tileY2; y++ ) {
+ var tileStr = "" + x + "," + y,
+ $img = scaleContainer.children("[data-tile='" + tileStr + "']").removeAttr("data-dirty");
+
+ if ( $img.size( ) === 0 ) {
+ /* same as refresh 3 */
+ var bottomLeft = [
+ tilingScheme.origin[0] + (x * tileWidth) * pixelSize,
+ tilingScheme.origin[1] - (y * tileHeight) * pixelSize
+ ],
+
+ topRight = [
+ tilingScheme.origin[0] + ((x + 1) * tileWidth - 1) * pixelSize,
+ tilingScheme.origin[1] - ((y + 1) * tileHeight - 1) * pixelSize
+ ],
+
+ tileBbox = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]],
+
+ imageUrl = service.getUrl( {
+ bbox: tileBbox,
+ width: tileWidth,
+ height: tileHeight,
+ zoom: map._getZoom(),
+ tile: {
+ row: y,
+ column: x
+ },
+ index: Math.abs(y + x)
+ } );
+ /* end same as refresh 3 */
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ if ( serviceState.reloadTiles && $img.size() > 0 ) {
+ $img.attr( "src", imageUrl );
+ } else {
+ /* same as refresh 4 */
+ var imgMarkup = "<img style='position:absolute; " +
+ "left:" + (((x - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%; " +
+ "top:" + (((y - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%; ";
+
+ if ($("body")[0].filters === undefined) {
+ imgMarkup += "width: 100%; height: 100%;";
+ }
+
+ imgMarkup += "margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='" + tileStr + "' />";
+
+ scaleContainer.append( imgMarkup );
+ $img = scaleContainer.children(":last");
+ $img.load(function (e) {
+ if (opacity < 1) {
+ $(e.target).fadeTo(0, opacity);
+ } else {
+ $(e.target).show();
+ }
+
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).error(function (e) {
+ $(e.target).remove();
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).attr("src", imageUrl);
+ /* end same as refresh 4 */
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+
+ interactiveScale: function (map, service, center, pixelSize) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if ( serviceState && service && ( service.visibility === undefined || service.visibility === "visible" ) ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight;
+
+
+ serviceContainer.children( ).each( function ( i ) {
+ var $scaleContainer = $(this),
+ scaleRatio = $scaleContainer.attr("data-pixelSize") / pixelSize;
+
+ scaleRatio = Math.round(scaleRatio * 1000) / 1000;
+
+ var scaleOriginParts = $scaleContainer.data("scaleOrigin").split(","),
+ oldMapCoord = map._toMap([scaleOriginParts[0], scaleOriginParts[1]]),
+ newPixelPoint = map._toPixel(oldMapCoord, center, pixelSize);
+
+ $scaleContainer.css( {
+ left: Math.round(newPixelPoint[0]) + "px",
+ top: Math.round(newPixelPoint[1]) + "px",
+ width: tileWidth * scaleRatio,
+ height: tileHeight * scaleRatio
+ } );
+
+ if ( $("body")[0].filters !== undefined ) {
+ $scaleContainer.children().each( function ( i ) {
+ $( this ).css( "filter", "progid:DXImageTransform.Microsoft.Matrix(FilterType=bilinear,M11=" + scaleRatio + ",M22=" + scaleRatio + ",sizingmethod='auto expand')" );
+ } );
+ }
+ });
+ }
+ },
+
+ refresh: function (map, service) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if ( serviceState && service && ( service.visibility === undefined || service.visibility === "visible" ) ) {
+ this._cancelUnloaded(map, service);
+
+ var bbox = map._getBbox(),
+ pixelSize = map._pixelSize,
+
+ $serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight,
+
+ tileX = Math.floor((bbox[0] - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY = Math.floor((tilingScheme.origin[1] - bbox[3]) / (pixelSize * tileHeight)),
+ tileX2 = Math.ceil((bbox[2] - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY2 = Math.ceil((tilingScheme.origin[1] - bbox[1]) / (pixelSize * tileHeight)),
+
+ bboxMax = map._getBboxMax(),
+ pixelSizeAtZero = map._getTiledPixelSize(0),
+ ratio = pixelSizeAtZero / pixelSize,
+ fullXAtScale = Math.floor((bboxMax[0] - tilingScheme.origin[0]) / (pixelSizeAtZero * tileWidth)) * ratio,
+ fullYAtScale = Math.floor((tilingScheme.origin[1] - bboxMax[3]) / (pixelSizeAtZero * tileHeight)) * ratio,
+
+ fullXMinX = tilingScheme.origin[0] + (fullXAtScale * tileWidth) * pixelSize,
+ fullYMaxY = tilingScheme.origin[1] - (fullYAtScale * tileHeight) * pixelSize,
+
+ serviceLeft = Math.round((fullXMinX - bbox[0]) / pixelSize),
+ serviceTop = Math.round((bbox[3] - fullYMaxY) / pixelSize),
+
+ scaleContainers = $serviceContainer.children().show(),
+ scaleContainer = scaleContainers.filter("[data-pixelSize='" + pixelSize + "']").appendTo($serviceContainer),
+
+ opacity = (service.opacity === undefined ? 1 : service.opacity),
+
+ x, y;
+
+ if (serviceState.reloadTiles) {
+ scaleContainers.find("img").attr("data-dirty", "true");
+ }
+
+ if (!scaleContainer.size()) {
+ $serviceContainer.append("<div style='position:absolute; left:" + serviceLeft % tileWidth + "px; top:" + serviceTop % tileHeight + "px; width:" + tileWidth + "px; height:" + tileHeight + "px; margin:0; padding:0;' data-pixelSize='" + pixelSize + "'></div>");
+ scaleContainer = $serviceContainer.children(":last").data("scaleOrigin", (serviceLeft % tileWidth) + "," + (serviceTop % tileHeight));
+ } else {
+ scaleContainer.css({
+ left: (serviceLeft % tileWidth) + "px",
+ top: (serviceTop % tileHeight) + "px"
+ }).data("scaleOrigin", (serviceLeft % tileWidth) + "," + (serviceTop % tileHeight));
+
+ scaleContainer.children().each(function (i) {
+ var
+ $img = $(this),
+ tile = $img.attr("data-tile").split(",");
+
+ $img.css({
+ left: Math.round(((parseInt(tile[0]) - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%",
+ top: Math.round(((parseInt(tile[1]) - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%"
+ });
+
+ if (opacity < 1) {
+ $img.fadeTo(0, opacity);
+ }
+ });
+ }
+
+ for (x = tileX; x < tileX2; x++) {
+ for (y = tileY; y < tileY2; y++) {
+ var
+ tileStr = "" + x + "," + y,
+ $img = scaleContainer.children("[data-tile='" + tileStr + "']").removeAttr("data-dirty");
+
+ if ($img.size() === 0 || serviceState.reloadTiles) {
+ var bottomLeft = [
+ tilingScheme.origin[0] + (x * tileWidth) * pixelSize,
+ tilingScheme.origin[1] - (y * tileHeight) * pixelSize
+ ],
+
+ topRight = [
+ tilingScheme.origin[0] + ((x + 1) * tileWidth - 1) * pixelSize,
+ tilingScheme.origin[1] - ((y + 1) * tileHeight - 1) * pixelSize
+ ],
+
+ tileBbox = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]],
+
+ imageUrl = service.getUrl({
+ bbox: tileBbox,
+ width: tileWidth,
+ height: tileHeight,
+ zoom: map._getZoom(),
+ tile: {
+ row: y,
+ column: x
+ },
+ index: Math.abs(y + x)
+ });
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ if (serviceState.reloadTiles && $img.size() > 0) {
+ $img.attr("src", imageUrl);
+ } else {
+ var imgMarkup = "<img style='position:absolute; " +
+ "left:" + (((x - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%; " +
+ "top:" + (((y - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%; ";
+
+ if ($("body")[0].filters === undefined) {
+ imgMarkup += "width: 100%; height: 100%;";
+ }
+
+ imgMarkup += "margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='" + tileStr + "' />";
+
+ scaleContainer.append(imgMarkup);
+ $img = scaleContainer.children(":last");
+ $img.load(function (e) {
+ if (opacity < 1) {
+ $(e.target).fadeTo(0, opacity);
+ } else {
+ $(e.target).show();
+ }
+
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ $serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).error(function (e) {
+ $(e.target).remove();
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ $serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).attr("src", imageUrl);
+ }
+ }
+ }
+ }
+
+ scaleContainers.find("[data-dirty]").remove();
+ serviceState.reloadTiles = false;
+ }
+ },
+
+ resize: function (map, service) {
+ },
+
+ opacity: function (map, service) {
+ var serviceState = $.data( service, "geoServiceState" );
+ serviceState.serviceContainer.find("img").stop(true).fadeTo("fast", service.opacity);
+ },
+
+ toggle: function (map, service) {
+ var serviceState = $.data( service, "geoServiceState" );
+ serviceState.serviceContainer.css("display", service.visibility === "visible" ? "block" : "none");
+ },
+
+ _cancelUnloaded: function (map, service) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if (serviceState && serviceState.loadCount > 0) {
+ serviceState.serviceContainer.find("img:hidden").remove();
+ while (serviceState.loadCount > 0) {
+ serviceState.loadCount--;
+ }
+ }
+ }
+ };
+ })();
+})(jQuery);
+(function ($, undefined) {
+ $.geo._serviceTypes.shingled = (function () {
+ return {
+ create: function (map, servicesContainer, service, index) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( !serviceState ) {
+ serviceState = {
+ loadCount: 0
+ };
+
+ var idString = service.id ? ' id="' + service.id + '"' : "",
+ classString = service["class"] ? ' class="' + service["class"] + '"' : "",
+ scHtml = '<div data-geo-service="shingled"' + idString + classString + ' style="position:absolute; left:0; top:0; width:16px; height:16px; margin:0; padding:0; display:' + (service.visibility === undefined || service.visibility === "visible" ? "block" : "none") + ';"></div>';
+
+ servicesContainer.append(scHtml);
+
+ serviceState.serviceContainer = servicesContainer.children(":last");
+ $.data(service, "geoServiceState", serviceState);
+ }
+
+ return serviceState.serviceContainer;
+ },
+
+ destroy: function (map, servicesContainer, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ serviceState.serviceContainer.remove();
+
+ $.removeData(service, "geoServiceState");
+ },
+
+ interactivePan: function (map, service, dx, dy) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+ pixelSize = map._pixelSize,
+ scaleContainer = serviceContainer.children("[data-pixelSize='" + pixelSize + "']"),
+ panContainer = scaleContainer.children("div");
+
+ if ( !panContainer.length ) {
+ scaleContainer.children("img").wrap('<div style="position:absolute; left:0; top:0; width:100%; height:100%;"></div>');
+ panContainer = scaleContainer.children("div");
+ }
+
+ panContainer.css( {
+ left: function (index, value) {
+ return parseInt(value) + dx;
+ },
+ top: function (index, value) {
+ return parseInt(value) + dy;
+ }
+ } );
+ }
+ },
+
+ interactiveScale: function (map, service, center, pixelSize) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight];
+
+ serviceContainer.children().each(function (i) {
+ var $scaleContainer = $(this),
+ scalePixelSize = $scaleContainer.attr("data-pixelSize"),
+ ratio = scalePixelSize / pixelSize;
+
+ $scaleContainer.css({ width: mapWidth * ratio, height: mapHeight * ratio }).children("img").each(function (i) {
+ var $img = $(this),
+ imgCenter = $img.data("center"),
+ x = (Math.round((imgCenter[0] - center[0]) / scalePixelSize) - halfWidth) * ratio,
+ y = (Math.round((center[1] - imgCenter[1]) / scalePixelSize) - halfHeight) * ratio;
+
+ $img.css({ left: x + "px", top: y + "px" });
+ });
+ });
+ }
+ },
+
+ refresh: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if (serviceState && service && (service.visibility === undefined || service.visibility === "visible")) {
+ this._cancelUnloaded(map, service);
+
+ var bbox = map._getBbox(),
+ pixelSize = map._pixelSize,
+
+ serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ scaleContainer = serviceContainer.children('[data-pixelSize="' + pixelSize + '"]'),
+
+ opacity = (service.opacity === undefined ? 1 : service.opacity),
+
+ $img;
+
+ if ( !scaleContainer.size() ) {
+ serviceContainer.append('<div style="position:absolute; left:' + halfWidth + 'px; top:' + halfHeight + 'px; width:' + mapWidth + 'px; height:' + mapHeight + 'px; margin:0; padding:0;" data-pixelSize="' + pixelSize + '"></div>');
+ scaleContainer = serviceContainer.children(":last");
+ }
+
+ scaleContainer.children("img").each(function (i) {
+ var $thisimg = $(this),
+ imgCenter = $thisimg.data("center"),
+ center = map._getCenter(),
+ x = Math.round((imgCenter[0] - center[0]) / pixelSize) - halfWidth,
+ y = Math.round((center[1] - imgCenter[1]) / pixelSize) - halfHeight;
+
+ $thisimg.css({ left: x + "px", top: y + "px" });
+ });
+
+ if (opacity < 1) {
+ serviceContainer.find("img").attr("data-keepAlive", "0");
+ }
+
+ var imageUrl = service.getUrl({
+ bbox: bbox,
+ width: mapWidth,
+ height: mapHeight,
+ zoom: map._getZoom(),
+ tile: null,
+ index: 0
+ });
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ scaleContainer.append('<img style="position:absolute; left:-' + halfWidth + 'px; top:-' + halfHeight + 'px; width:100%; height:100%; margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;" unselectable="on" />');
+ $img = scaleContainer.children(":last").data("center", map._getCenter());
+ $img.load(function (e) {
+ if (opacity < 1) {
+ $(e.target).fadeTo(0, opacity);
+ } else {
+ $(e.target).show();
+ }
+
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(':not([data-pixelSize="' + pixelSize + '"])').remove();
+
+ var panContainer = serviceContainer.find('[data-pixelSize="' + pixelSize + '"]>div');
+ if (panContainer.size() > 0) {
+ var panContainerPos = panContainer.position();
+
+ panContainer.children("img").each(function (i) {
+ var $thisimg = $(this),
+ x = panContainerPos.left + parseInt($thisimg.css("left")),
+ y = panContainerPos.top + parseInt($thisimg.css("top"));
+
+ $thisimg.css({ left: x + "px", top: y + "px" });
+ }).unwrap();
+
+ panContainer.remove();
+ }
+
+ serviceState.loadCount = 0;
+ }
+ }).error(function (e) {
+ $(e.target).remove();
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).attr("src", imageUrl);
+ }
+ },
+
+ resize: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState && service && (service.visibility === undefined || service.visibility === "visible")) {
+ this._cancelUnloaded(map, service);
+
+ var serviceState = shingledServicesState[service.id],
+ serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ scaleContainer = serviceContainer.children();
+
+ scaleContainer.attr("data-pixelSize", "0");
+ scaleContainer.css({
+ left: halfWidth + 'px',
+ top: halfHeight + 'px'
+ });
+ }
+ },
+
+ opacity: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+ serviceState.serviceContainer.find("img").stop(true).fadeTo("fast", service.opacity);
+ },
+
+ toggle: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+ serviceState.serviceContainer.css("display", service.visibility === "visible" ? "block" : "none");
+ },
+
+ _cancelUnloaded: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if (serviceState && serviceState.loadCount > 0) {
+ serviceState.serviceContainer.find("img:hidden").remove();
+ while (serviceState.loadCount > 0) {
+ serviceState.loadCount--;
+ }
+ }
+ }
+ }
+ })();
+})(jQuery);
--- /dev/null
+document.createElement("canvas").getContext||function(){function e(){return this.context_||(this.context_=new s(this))}function r(h,n){var q=K.call(arguments,2);return function(){return h.apply(n,q.concat(K.call(arguments)))}}function p(h){h.namespaces.g_vml_||h.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml","#default#VML");h.namespaces.g_o_||h.namespaces.add("g_o_","urn:schemas-microsoft-com:office:office","#default#VML");if(!h.styleSheets.ex_canvas_){h=h.createStyleSheet();h.owningElement.id=
+"ex_canvas_";h.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}"}}function a(h){var n=h.srcElement;switch(h.propertyName){case "width":n.getContext().clearRect();n.style.width=n.attributes.width.nodeValue+"px";n.firstChild.style.width=n.clientWidth+"px";break;case "height":n.getContext().clearRect();n.style.height=n.attributes.height.nodeValue+"px";n.firstChild.style.height=n.clientHeight+"px"}}function c(h){h=h.srcElement;if(h.firstChild){h.firstChild.style.width=
+h.clientWidth+"px";h.firstChild.style.height=h.clientHeight+"px"}}function b(){return[[1,0,0],[0,1,0],[0,0,1]]}function d(h,n){for(var q=b(),u=0;u<3;u++)for(var z=0;z<3;z++){for(var v=0,L=0;L<3;L++)v+=h[u][L]*n[L][z];q[u][z]=v}return q}function g(h,n){n.fillStyle=h.fillStyle;n.lineCap=h.lineCap;n.lineJoin=h.lineJoin;n.lineWidth=h.lineWidth;n.miterLimit=h.miterLimit;n.shadowBlur=h.shadowBlur;n.shadowColor=h.shadowColor;n.shadowOffsetX=h.shadowOffsetX;n.shadowOffsetY=h.shadowOffsetY;n.strokeStyle=h.strokeStyle;
+n.globalAlpha=h.globalAlpha;n.font=h.font;n.textAlign=h.textAlign;n.textBaseline=h.textBaseline;n.arcScaleX_=h.arcScaleX_;n.arcScaleY_=h.arcScaleY_;n.lineScale_=h.lineScale_}function f(h){var n=h.indexOf("(",3),q=h.indexOf(")",n+1);n=h.substring(n+1,q).split(",");if(n.length!=4||h.charAt(3)!="a")n[3]=1;return n}function m(h,n,q){return Math.min(q,Math.max(n,h))}function l(h,n,q){q<0&&q++;q>1&&q--;return 6*q<1?h+(n-h)*6*q:2*q<1?n:3*q<2?h+(n-h)*(2/3-q)*6:h}function o(h){if(h in O)return O[h];var n,
+q=1;h=String(h);if(h.charAt(0)=="#")n=h;else if(/^rgb/.test(h)){q=f(h);n="#";for(var u,z=0;z<3;z++){u=q[z].indexOf("%")!=-1?Math.floor(parseFloat(q[z])/100*255):+q[z];n+=F[m(u,0,255)]}q=+q[3]}else if(/^hsl/.test(h)){z=q=f(h);n=parseFloat(z[0])/360%360;n<0&&n++;u=m(parseFloat(z[1])/100,0,1);z=m(parseFloat(z[2])/100,0,1);if(u==0)u=z=n=z;else{var v=z<0.5?z*(1+u):z+u-z*u,L=2*z-v;u=l(L,v,n+1/3);z=l(L,v,n);n=l(L,v,n-1/3)}n="#"+F[Math.floor(u*255)]+F[Math.floor(z*255)]+F[Math.floor(n*255)];q=q[3]}else n=
+h;return O[h]={color:n,alpha:q}}function s(h){this.m_=b();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.fillStyle=this.strokeStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=D*1;this.globalAlpha=1;this.canvas=h;var n="width:"+h.clientWidth+"px;height:"+h.clientHeight+"px;overflow:hidden;position:absolute",q=h.ownerDocument.createElement("div");q.style.cssText=n;h.appendChild(q);n=q.cloneNode(false);n.style.backgroundColor="red";n.style.filter="alpha(opacity=0)";
+h.appendChild(n);this.element_=q;this.lineScale_=this.arcScaleY_=this.arcScaleX_=1}function x(h,n,q,u){h.currentPath_.push({type:"bezierCurveTo",cp1x:n.x,cp1y:n.y,cp2x:q.x,cp2y:q.y,x:u.x,y:u.y});h.currentX_=u.x;h.currentY_=u.y}function t(h,n,q){h=h.m_;return{x:D*(n*h[0][0]+q*h[1][0]+h[2][0])-J,y:D*(n*h[0][1]+q*h[1][1]+h[2][1])-J}}function A(h,n,q){if(isFinite(n[0][0])&&isFinite(n[0][1])&&isFinite(n[1][0])&&isFinite(n[1][1])&&isFinite(n[2][0])&&isFinite(n[2][1])){h.m_=n;if(q)h.lineScale_=E(G(n[0][0]*
+n[1][1]-n[0][1]*n[1][0]))}}function B(h){this.code=this[h];this.message=h+": DOM Exception "+this.code}var C=Math,y=C.round,H=C.sin,I=C.cos,G=C.abs,E=C.sqrt,D=10,J=D/2;navigator.userAgent.match(/MSIE ([\d.]+)?/);var K=Array.prototype.slice;p(document);C={init:function(h){h=h||document;h.createElement("canvas");h.attachEvent("onreadystatechange",r(this.init_,this,h))},init_:function(h){h=h.getElementsByTagName("canvas");for(var n=0;n<h.length;n++)this.initElement(h[n])},initElement:function(h){if(!h.getContext){h.getContext=
+e;p(h.ownerDocument);h.innerHTML="";h.attachEvent("onpropertychange",a);h.attachEvent("onresize",c);var n=h.attributes;if(n.width&&n.width.specified)h.style.width=n.width.nodeValue+"px";else h.width=h.clientWidth;if(n.height&&n.height.specified)h.style.height=n.height.nodeValue+"px";else h.height=h.clientHeight}return h}};C.init();for(var F=[],w=0;w<16;w++)for(var M=0;M<16;M++)F[w*16+M]=w.toString(16)+M.toString(16);var O={},P={butt:"flat",round:"round"};w=s.prototype;w.clearRect=function(){if(this.textMeasureEl_){this.textMeasureEl_.removeNode(true);
+this.textMeasureEl_=null}this.element_.innerHTML=""};w.beginPath=function(){this.currentPath_=[]};w.moveTo=function(h,n){var q=t(this,h,n);this.currentPath_.push({type:"moveTo",x:q.x,y:q.y});this.currentX_=q.x;this.currentY_=q.y};w.lineTo=function(h,n){var q=t(this,h,n);this.currentPath_.push({type:"lineTo",x:q.x,y:q.y});this.currentX_=q.x;this.currentY_=q.y};w.bezierCurveTo=function(h,n,q,u,z,v){z=t(this,z,v);h=t(this,h,n);q=t(this,q,u);x(this,h,q,z)};w.quadraticCurveTo=function(h,n,q,u){h=t(this,
+h,n);q=t(this,q,u);u={x:this.currentX_+2/3*(h.x-this.currentX_),y:this.currentY_+2/3*(h.y-this.currentY_)};x(this,u,{x:u.x+(q.x-this.currentX_)/3,y:u.y+(q.y-this.currentY_)/3},q)};w.arc=function(h,n,q,u,z,v){q*=D;var L=v?"at":"wa",N=h+I(u)*q-J,Q=n+H(u)*q-J;u=h+I(z)*q-J;z=n+H(z)*q-J;if(N==u&&!v)N+=0.125;h=t(this,h,n);N=t(this,N,Q);u=t(this,u,z);this.currentPath_.push({type:L,x:h.x,y:h.y,radius:q,xStart:N.x,yStart:N.y,xEnd:u.x,yEnd:u.y})};w.stroke=function(h){var n=[];n.push("<g_vml_:shape",' filled="',
+!!h,'"',' style="position:absolute;width:',10,"px;height:",10,'px;"',' coordorigin="0,0"',' coordsize="',D*10,",",D*10,'"',' stroked="',!h,'"',' path="');for(var q={x:null,y:null},u={x:null,y:null},z=0;z<this.currentPath_.length;z++){var v=this.currentPath_[z];switch(v.type){case "moveTo":n.push(" m ",y(v.x),",",y(v.y));break;case "lineTo":n.push(" l ",y(v.x),",",y(v.y));break;case "close":n.push(" x ");v=null;break;case "bezierCurveTo":n.push(" c ",y(v.cp1x),",",y(v.cp1y),",",y(v.cp2x),",",y(v.cp2y),
+",",y(v.x),",",y(v.y));break;case "at":case "wa":n.push(" ",v.type," ",y(v.x-this.arcScaleX_*v.radius),",",y(v.y-this.arcScaleY_*v.radius)," ",y(v.x+this.arcScaleX_*v.radius),",",y(v.y+this.arcScaleY_*v.radius)," ",y(v.xStart),",",y(v.yStart)," ",y(v.xEnd),",",y(v.yEnd))}if(v){if(q.x==null||v.x<q.x)q.x=v.x;if(u.x==null||v.x>u.x)u.x=v.x;if(q.y==null||v.y<q.y)q.y=v.y;if(u.y==null||v.y>u.y)u.y=v.y}}n.push(' ">');if(h){h=o(this.fillStyle);n.push('<g_vml_:fill color="',h.color,'" opacity="',h.alpha*this.globalAlpha,
+'" />')}else{q=o(this.strokeStyle);h=q.color;q=q.alpha*this.globalAlpha;u=this.lineScale_*this.lineWidth;if(u<1)q*=u;n.push("<g_vml_:stroke",' opacity="',q,'"',' joinstyle="',this.lineJoin,'"',' miterlimit="',this.miterLimit,'"',' endcap="',P[this.lineCap]||"square",'"',' weight="',u,'px"',' color="',h,'" />')}n.push("</g_vml_:shape>");this.element_.insertAdjacentHTML("beforeEnd",n.join(""))};w.fill=function(){this.stroke(true)};w.closePath=function(){this.currentPath_.push({type:"close"})};w.save=
+function(){var h={};g(this,h);this.aStack_.push(h);this.mStack_.push(this.m_);this.m_=d(b(),this.m_)};w.restore=function(){if(this.aStack_.length){g(this.aStack_.pop(),this);this.m_=this.mStack_.pop()}};w.translate=function(h,n){A(this,d([[1,0,0],[0,1,0],[h,n,1]],this.m_),false)};w.scale=function(h,n){this.arcScaleX_*=h;this.arcScaleY_*=n;A(this,d([[h,0,0],[0,n,0],[0,0,1]],this.m_),true)};w=B.prototype=Error();w.INDEX_SIZE_ERR=1;w.DOMSTRING_SIZE_ERR=2;w.HIERARCHY_REQUEST_ERR=3;w.WRONG_DOCUMENT_ERR=
+4;w.INVALID_CHARACTER_ERR=5;w.NO_DATA_ALLOWED_ERR=6;w.NO_MODIFICATION_ALLOWED_ERR=7;w.NOT_FOUND_ERR=8;w.NOT_SUPPORTED_ERR=9;w.INUSE_ATTRIBUTE_ERR=10;w.INVALID_STATE_ERR=11;w.SYNTAX_ERR=12;w.INVALID_MODIFICATION_ERR=13;w.NAMESPACE_ERR=14;w.INVALID_ACCESS_ERR=15;w.VALIDATION_ERR=16;w.TYPE_MISMATCH_ERR=17;G_vmlCanvasManager=C;CanvasRenderingContext2D=s;DOMException=B}();
+(function(e){function r(a){var c=[].slice.call(arguments,1),b=0;a=e.event.fix(a||window.event);a.type="mousewheel";if(a.wheelDelta)b=a.wheelDelta/120;if(a.detail)b=-a.detail/3;c.unshift(a,b);return e.event.handle.apply(this,c)}var p=["DOMMouseScroll","mousewheel"];e.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=p.length;a;)this.addEventListener(p[--a],r,false);else this.onmousewheel=r},teardown:function(){if(this.removeEventListener)for(var a=p.length;a;)this.removeEventListener(p[--a],
+r,false);else this.onmousewheel=null}};e.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery);
+$.widget||function(e,r){var p=Array.prototype.slice,a=e.cleanData;e.cleanData=function(c){for(var b=0,d;(d=c[b])!=null;b++)e(d).triggerHandler("remove");a(c)};e.widget=function(c,b,d){var g=c.split(".")[0],f;c=c.split(".")[1];f=g+"-"+c;if(!d){d=b;b=e.Widget}e.expr[":"][f]=function(l){return!!e.data(l,c)};e[g]=e[g]||{};e[g][c]=e.extend(function(l,o){if(!this._createWidget)return new e[g][c](l,o);arguments.length&&this._createWidget(l,o)},e[g][c]);var m=new b;m.options=e.extend(true,{},m.options);e.each(d,
+function(l,o){if(e.isFunction(o))d[l]=function(){var s=function(t){return b.prototype[t].apply(this,p.call(arguments,1))},x=function(t,A){return b.prototype[t].apply(this,A)};return function(){var t=this._super,A=this._superApply,B;this._super=s;this._superApply=x;B=o.apply(this,arguments);this._super=t;this._superApply=A;return B}}()});e[g][c].prototype=e.extend(true,m,{namespace:g,widgetName:c,widgetEventPrefix:c,widgetBaseClass:f},d);e.widget.bridge(c,e[g][c])};e.widget.bridge=function(c,b){e.fn[c]=
+function(d){var g=typeof d==="string",f=p.call(arguments,1),m=this;d=!g&&f.length?e.extend.apply(null,[true,d].concat(f)):d;g?this.each(function(){var l=e.data(this,c);if(!l)return e.error("cannot call methods on "+c+" prior to initialization; attempted to call method '"+d+"'");if(!e.isFunction(l[d])||d.charAt(0)==="_")return e.error("no such method '"+d+"' for "+c+" widget instance");var o=l[d].apply(l,f);if(o!==l&&o!==r){m=o;return false}}):this.each(function(){var l=e.data(this,c);l?l.option(d||
+{})._init():b(d,this)});return m}};e.Widget=function(c,b){if(!this._createWidget)return new e[namespace][name](c,b);arguments.length&&this._createWidget(c,b)};e.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",defaultElement:"<div>",options:{disabled:false},_createWidget:function(c,b){b=e(b||this.defaultElement||this)[0];this.element=e(b);this.options=e.extend(true,{},this.options,this._getCreateOptions(),c);this.bindings=e();this.hoverable=e();this.focusable=e();if(b!==this){e.data(b,this.widgetName,
+this);this._bind({remove:"destroy"})}this._create();this._trigger("create");this._init()},_getCreateOptions:function(){return e.metadata&&e.metadata.get(this.element[0])[this.widgetName]},_create:e.noop,_init:e.noop,destroy:function(){this._destroy();this.element.unbind("."+this.widgetName).removeData(this.widgetName);this.widget().unbind("."+this.widgetName).removeAttr("aria-disabled").removeClass(this.widgetBaseClass+"-disabled ui-state-disabled");this.bindings.unbind("."+this.widgetName);this.hoverable.removeClass("ui-state-hover");
+this.focusable.removeClass("ui-state-focus")},_destroy:e.noop,widget:function(){return this.element},option:function(c,b){var d=c;if(arguments.length===0)return e.extend({},this.options);if(typeof c==="string"){if(b===r)return this.options[c];d={};d[c]=b}this._setOptions(d);return this},_setOptions:function(c){var b=this;e.each(c,function(d,g){b._setOption(d,g)});return this},_setOption:function(c,b){this.options[c]=b;if(c==="disabled"){this.widget().toggleClass(this.widgetBaseClass+"-disabled ui-state-disabled",
+!!b).attr("aria-disabled",b);this.hoverable.removeClass("ui-state-hover");this.focusable.removeClass("ui-state-focus")}return this},enable:function(){return this._setOption("disabled",false)},disable:function(){return this._setOption("disabled",true)},_bind:function(c,b){if(b){c=e(c);this.bindings=this.bindings.add(c)}else{b=c;c=this.element}var d=this;e.each(b,function(g,f){c.bind(g+"."+d.widgetName,function(){if(!(d.options.disabled===true||e(this).hasClass("ui-state-disabled")))return(typeof f===
+"string"?d[f]:f).apply(d,arguments)})})},_hoverable:function(c){this.hoverable=this.hoverable.add(c);this._bind(c,{mouseenter:function(b){e(b.currentTarget).addClass("ui-state-hover")},mouseleave:function(b){e(b.currentTarget).removeClass("ui-state-hover")}})},_focusable:function(c){this.focusable=this.focusable.add(c);this._bind(c,{focusin:function(b){e(b.currentTarget).addClass("ui-state-focus")},focusout:function(b){e(b.currentTarget).removeClass("ui-state-focus")}})},_trigger:function(c,b,d){var g=
+this.options[c];b=e.Event(b);b.type=(c===this.widgetEventPrefix?c:this.widgetEventPrefix+c).toLowerCase();d=d||{};if(b.originalEvent){c=e.event.props.length;for(var f;c;){f=e.event.props[--c];b[f]=b.originalEvent[f]}}this.element.trigger(b,d);d=e.isArray(d)?[b].concat(d):[b,d];return!(e.isFunction(g)&&g.apply(this.element[0],d)===false||b.isDefaultPrevented())}}}(jQuery);
+(function(e,r,p){var a=Number.POSITIVE_INFINITY,c=Number.NEGATIVE_INFINITY;e.geo={_allCoordinates:function(b){b=this._flatten(b);for(var d=0,g=[];d<b.length;d++){var f=b[d].coordinates,m=f&&e.isArray(f[0]),l=m&&e.isArray(f[0][0]),o;if(!(l&&e.isArray(f[0][0][0]))){if(!l){m||(f=[f]);f=[f]}f=[f]}for(m=0;m<f.length;m++)for(l=0;l<f[m].length;l++)for(o=0;o<f[m][l].length;o++)g.push(f[m][l][o])}return g},center:function(b,d){if(!d&&e.geo.proj)b=e.geo.proj.fromGeodetic(b);var g=[(b[0]+b[2])/2,(b[1]+b[3])/
+2];return!d&&e.geo.proj?e.geo.proj.toGeodetic(g):g},expandBy:function(b,d,g){if(e.geo.proj)b=e.geo.proj.fromGeodetic(b);b=[b[0]-d,b[1]-g,b[2]+d,b[3]+g];return e.geo.proj?e.geo.proj.toGeodetic(b):b},height:function(b,d){if(!d&&e.geo.proj)b=e.geo.proj.fromGeodetic(b);return b[3]-b[1]},_in:function(b,d){return b[0]<=d[0]&&b[1]<=d[1]&&b[2]>=d[2]&&b[3]>=d[3]},_bboxDisjoint:function(b,d){return d[0]>b[2]||d[2]<b[0]||d[1]>b[3]||d[3]<b[1]},reaspect:function(b,d,g){if(!g&&e.geo.proj)b=e.geo.proj.fromGeodetic(b);
+var f=this.width(b,true),m=this.height(b,true);g=this.center(b,true);if(f!=0&&m!=0&&d>0){if(f/m>d){b=f/2;f=b/d}else{f=m/2;b=f*d}b=[g[0]-b,g[1]-f,g[0]+b,g[1]+f]}return e.geo.proj?e.geo.proj.toGeodetic(b):b},scaleBy:function(b,d,g){if(!g&&e.geo.proj)b=e.geo.proj.fromGeodetic(b);var f=this.center(b,true),m=(b[2]-b[0])*d/2;b=(b[3]-b[1])*d/2;b=[f[0]-m,f[1]-b,f[0]+m,f[1]+b];return!g&&e.geo.proj?e.geo.proj.toGeodetic(b):b},width:function(b,d){if(!d&&e.geo.proj)b=e.geo.proj.fromGeodetic(b);return b[2]-b[0]},
+bbox:function(b,d){if(b)if(b.bbox)result=!d&&e.geo.proj?e.geo.proj.fromGeodetic(b.bbox):b.bbox;else{result=[a,a,c,c];var g=this._allCoordinates(b),f=0;if(g.length==0)return p;if(e.geo.proj)g=e.geo.proj.fromGeodetic(g);for(;f<g.length;f++){result[0]=Math.min(g[f][0],result[0]);result[1]=Math.min(g[f][1],result[1]);result[2]=Math.max(g[f][0],result[2]);result[3]=Math.max(g[f][1],result[3])}}else return p;return e.geo.proj?e.geo.proj.toGeodetic(result):result},centroid:function(b,d){switch(b.type){case "Point":return e.extend({},
+b);case "LineString":case "Polygon":var g=0,f=[0,0],m=e.merge([],b.type=="Polygon"?b.coordinates[0]:b.coordinates),l=1,o,s;if(!d&&e.geo.proj)m=e.geo.proj.fromGeodetic(m);for(;l<=m.length;l++){o=l%m.length;s=m[l-1][0]*m[o][1]-m[o][0]*m[l-1][1];g+=s;f[0]+=(m[l-1][0]+m[o][0])*s;f[1]+=(m[l-1][1]+m[o][1])*s}if(g==0)if(m.length>0){f[0]=m[0][0];f[1]=m[0][1];return{type:"Point",coordinates:!d&&e.geo.proj?e.geo.proj.toGeodetic(f):f}}else break;g*=3;f[0]/=g;f[1]/=g;return{type:"Point",coordinates:!d&&e.geo.proj?
+e.geo.proj.toGeodetic(f):f}}return p},contains:function(b,d){if(b.type!="Polygon")return false;switch(d.type){case "Point":return this._containsPolygonPoint(b.coordinates,d.coordinates);case "LineString":return this._containsPolygonLineString(b.coordinates,d.coordinates);case "Polygon":return this._containsPolygonLineString(b.coordinates,d.coordinates[0]);default:return false}},_containsPolygonPoint:function(b,d){if(b.length==0||b[0].length<4)return false;for(var g=0,f=b[0][0],m=1,l;m<b[0].length;m++){l=
+b[0][m];if(f[1]<=d[1]&&d[1]<l[1]||l[1]<=d[1]&&d[1]<f[1]&&(d[0]<f[0]||d[0]<l[0])){f=f[0]+(l[0]-f[0])*(d[1]-f[1])/(l[1]-f[1]);f>d[0]&&g++}f=l}return g%2==1},_containsPolygonLineString:function(b,d){for(var g=0;g<d.length;g++)if(!this._containsPolygonPoint(b,d[g]))return false;return true},distance:function(b,d,g){var f=!g&&e.geo.proj?e.geo.proj.fromGeodetic(b.coordinates):b.coordinates;g=!g&&e.geo.proj?e.geo.proj.fromGeodetic(d.coordinates):d.coordinates;switch(b.type){case "Point":switch(d.type){case "Point":return this._distancePointPoint(g,
+f);case "LineString":return this._distanceLineStringPoint(g,f);case "Polygon":return this._containsPolygonPoint(g,f)?0:this._distanceLineStringPoint(g[0],f);default:return p}case "LineString":switch(d.type){case "Point":return this._distanceLineStringPoint(f,g);case "LineString":return this._distanceLineStringLineString(f,g);case "Polygon":return this._containsPolygonLineString(g,f)?0:this._distanceLineStringLineString(g[0],f);default:return p}case "Polygon":switch(d.type){case "Point":return this._containsPolygonPoint(f,
+g)?0:this._distanceLineStringPoint(f[0],g);case "LineString":return this._containsPolygonLineString(f,g)?0:this._distanceLineStringLineString(f[0],g);case "Polygon":return this._containsPolygonLineString(f,g[0])?0:this._distanceLineStringLineString(f[0],g[0]);default:return p}}},_distancePointPoint:function(b,d){var g=d[0]-b[0],f=d[1]-b[1];return Math.sqrt(g*g+f*f)},_distanceLineStringPoint:function(b,d){var g=a;if(b.length>0){var f=b[0],m=d[0]-f[0],l=d[1]-f[1];if(b.length==1)return Math.sqrt(m*m+
+l*l);else for(var o=1;o<b.length;o++){var s=b[o],x=d[0]-s[0],t=d[1]-s[1];f=this._distanceSegmentPoint(s[0]-f[0],s[1]-f[1],m,l,x,t);if(f==0)return 0;if(f<g)g=f;f=s;m=x;l=t}}return Math.sqrt(g)},_distanceSegmentPoint:function(b,d,g,f,m,l){var o=b*g+d*f;if(o<=0)return g*g+f*f;b=b*b+d*d;if(o>=b)return m*m+l*l;return g*g+f*f-o*o/b},_distanceLineStringLineString:function(b,d){for(var g=a,f=0;f<d.length;f++)g=Math.min(g,this._distanceLineStringPoint(b,d[f]));return g},_flatten:function(b){var d=[],g=0;switch(b.type){case "Feature":e.merge(d,
+this._flatten(b.geometry));break;case "FeatureCollection":for(;g<b.features.length;g++)e.merge(d,this._flatten(b.features[g].geometry));break;case "GeometryCollection":for(;g<b.geometries.length;g++)e.merge(d,this._flatten(b.geometries[g]));break;default:d[0]=b}return d},_WKT:function(){function b(f){if(f&&f.length){for(var m=[],l=0;l<f.length;l++)m.push(f[l].join(" "));return"("+m+")"}else return"EMPTY"}function d(f){if(f&&f.length){for(var m=[],l=0;l<f.length;l++)m.push(b(f[l]));return"("+m+")"}else return"EMTPY"}
+function g(f){if(f&&f.type)switch(f.type){case "Point":return"POINT "+(f.coordinates&&f.coordinates.length?"("+f.coordinates.join(" ")+")":"EMPTY");case "LineString":return"LINESTRING "+b(f.coordinates);case "Polygon":return"POLYGON "+d(f.coordinates);case "MultiPoint":return"MULTIPOINT "+b(f.coordinates);case "MultiLineString":return"MULTILINSTRING "+d(f.coordinates);case "MultiPolygon":if((f=f.coordinates)&&f.length){for(var m=[],l=0;l<f.length;l++)m.push(d(f[l]));f="("+m+")"}else f="EMPTY";return"MULTIPOLYGON "+
+f;case "GeometryCollection":if((f=f.geometries)&&f.length){m=[];for(l=0;l<f.length;l++)m.push(g(f[l]));f="("+f+")"}else f="EMPTY";return"GEOMETRYCOLLECTION "+f;default:return""}else return""}return{stringify:g,parse:function(f){f=e.trim(f);var m=f.indexOf(" ");switch(f.substr(0,m).toUpperCase()){case "POINT":return(f=f.substr(m+1).match(/\(\s*([\d\.-]+)\s+([\d\.-]+)\s*\)/))&&f.length>=2?{type:"Point",coordinates:[parseFloat(f[1]),parseFloat(f[2])]}:null}}}}(),proj:function(){return{fromGeodeticPos:function(b){if(!b)debugger;
+return[6378137*b[0]*0.017453292519943295,6378137*Math.log(Math.tan(0.7853981633974483+b[1]*0.017453292519943295/2))]},fromGeodetic:function(b){var d=e.isArray(b[0]),g=this.fromGeodeticPos;if(!d&&b.length==4){d=g([b[0],b[1]]);b=g([b[2],b[3]]);return[d[0],d[1],b[0],b[1]]}else{var f=d&&e.isArray(b[0][0]),m=f&&e.isArray(b[0][0][0]),l=[],o,s,x;if(!m){if(!f){d||(b=[b]);b=[b]}b=[b]}for(o=0;o<b.length;o++){l[o]=[];for(s=0;s<b[o].length;s++){l[o][s]=[];for(x=0;x<b[o][s].length;x++)l[o][s][x]=g(b[o][s][x])}}return m?
+l:f?l[0]:d?l[0][0]:l[0][0][0]}},toGeodeticPos:function(b){return[b[0]/6378137*57.29577951308232,(1.5707963267948966-2*Math.atan(1/Math.exp(b[1]/6378137)))*57.29577951308232]},toGeodetic:function(b){var d=e.isArray(b[0]),g=this.toGeodeticPos;if(!d&&b.length==4){d=g([b[0],b[1]]);b=g([b[2],b[3]]);return[d[0],d[1],b[0],b[1]]}else{var f=d&&e.isArray(b[0][0]),m=f&&e.isArray(b[0][0][0]),l=[];if(!m){if(!f){d||(b=[b]);b=[b]}b=[b]}for(i=0;i<b.length;i++){l[i]=[];for(j=0;j<b[i].length;j++){l[i][j]=[];for(k=
+0;k<b[i][j].length;k++)l[i][j][k]=g(b[i][j][k])}}return m?l:f?l[0]:d?l[0][0]:l[0][0][0]}}}}(),_serviceTypes:{}}})(jQuery,this);
+(function(e,r){var p=function(){for(var a=5,c=document.createElement("div"),b=c.all||[];c.innerHTML="<!--[if gt IE "+ ++a+"]><br><![endif]--\>",b[0];);return a>6?a:!a}();e.widget("geo.geographics",{_$elem:r,_options:{},_trueCanvas:true,_width:0,_height:0,_$canvas:r,_context:r,options:{style:{borderRadius:"8px",color:"#7f0000",fillOpacity:0.2,height:"8px",opacity:1,strokeOpacity:1,strokeWidth:"2px",visibility:"visible",width:"8px"}},_create:function(){this._$elem=this.element;this._options=this.options;
+this._$elem.css({display:"inline-block",overflow:"hidden",textAlign:"left"});this._$elem.css("position")=="static"&&this._$elem.css("position","relative");this._width=this._$elem.width();this._height=this._$elem.height();if(!(this._width&&this._height)){this._width=parseInt(this._$elem.css("width"));this._height=parseInt(this._$elem.css("height"))}if(document.createElement("canvas").getContext){this._$elem.append('<canvas width="'+this._width+'" height="'+this._height+'" style="position:absolute; left:0; top:0; width:'+
+this._width+"px; height:"+this._height+'px;"></canvas>');this._$canvas=this._$elem.children(":last");this._context=this._$canvas[0].getContext("2d")}else if(p<=8){this._trueCanvas=false;this._$elem.append('<div width="'+this._width+'" height="'+this._height+'" style="position:absolute; left:0; top:0; width:'+this._width+"px; height:"+this._height+'px; margin:0; padding:0;"></div>');this._$canvas=this._$elem.children(":last");G_vmlCanvasManager.initElement(this._$canvas[0]);this._context=this._$canvas[0].getContext("2d");
+this._$canvas.children().css({backgroundColor:"transparent",width:this._width,height:this._height})}},_setOption:function(a,c){if(a=="style")c=e.extend({},this._options.style,c);e.Widget.prototype._setOption.apply(this,arguments)},destroy:function(){e.Widget.prototype.destroy.apply(this,arguments);this._$elem.html("")},clear:function(){this._context.clearRect(0,0,this._width,this._height)},drawArc:function(a,c,b,d){d=this._getGraphicStyle(d);if(d.visibility!="hidden"&&d.opacity>0&&d.widthValue>0&&
+d.heightValue>0){var g=Math.min(d.widthValue,d.heightValue)/2;c=c*Math.PI/180;b=b*Math.PI/180;this._context.save();this._context.translate(a[0],a[1]);d.widthValue>d.heightValue?this._context.scale(d.widthValue/d.heightValue,1):this._context.scale(1,d.heightValue/d.widthValue);this._context.beginPath();this._context.arc(0,0,g,c,b,false);this._trueCanvas&&this._context.restore();if(d.doFill){this._context.fillStyle=d.fill;this._context.globalAlpha=d.opacity*d.fillOpacity;this._context.fill()}if(d.doStroke){this._context.lineJoin=
+"round";this._context.lineWidth=d.strokeWidthValue;this._context.strokeStyle=d.stroke;this._context.globalAlpha=d.opacity*d.strokeOpacity;this._context.stroke()}this._trueCanvas||this._context.restore()}},drawPoint:function(a,c){c=this._getGraphicStyle(c);if(c.widthValue==c.heightValue&&c.heightValue==c.borderRadiusValue)this.drawArc(a,0,360,c);else if(c.visibility!="hidden"&&c.opacity>0){c.borderRadiusValue=Math.min(Math.min(c.widthValue,c.heightValue)/2,c.borderRadiusValue);a[0]-=c.widthValue/2;
+a[1]-=c.heightValue/2;this._context.beginPath();this._context.moveTo(a[0]+c.borderRadiusValue,a[1]);this._context.lineTo(a[0]+c.widthValue-c.borderRadiusValue,a[1]);this._context.quadraticCurveTo(a[0]+c.widthValue,a[1],a[0]+c.widthValue,a[1]+c.borderRadiusValue);this._context.lineTo(a[0]+c.widthValue,a[1]+c.heightValue-c.borderRadiusValue);this._context.quadraticCurveTo(a[0]+c.widthValue,a[1]+c.heightValue,a[0]+c.widthValue-c.borderRadiusValue,a[1]+c.heightValue);this._context.lineTo(a[0]+c.borderRadiusValue,
+a[1]+c.heightValue);this._context.quadraticCurveTo(a[0],a[1]+c.heightValue,a[0],a[1]+c.heightValue-c.borderRadiusValue);this._context.lineTo(a[0],a[1]+c.borderRadiusValue);this._context.quadraticCurveTo(a[0],a[1],a[0]+c.borderRadiusValue,a[1]);this._context.closePath();if(c.doFill){this._context.fillStyle=c.fill;this._context.globalAlpha=c.opacity*c.fillOpacity;this._context.fill()}if(c.doStroke){this._context.lineJoin="round";this._context.lineWidth=c.strokeWidthValue;this._context.strokeStyle=c.stroke;
+this._context.globalAlpha=c.opacity*c.strokeOpacity;this._context.stroke()}}},drawLineString:function(a,c){this._drawLines([a],false,c)},drawPolygon:function(a,c){this._drawLines(a,true,c)},drawBbox:function(a,c){this._drawLines([[[a[0],a[1]],[a[0],a[3]],[a[2],a[3]],[a[2],a[1]],[a[0],a[1]]]],true,c)},_getGraphicStyle:function(a){function c(b){b=parseInt(b);return+b+""===b?+b:b}a=e.extend({},this._options.style,a);a.borderRadiusValue=c(a.borderRadius);a.fill=a.fill||a.color;a.doFill=a.fill&&a.fillOpacity>
+0;a.stroke=a.stroke||a.color;a.strokeWidthValue=c(a.strokeWidth);a.doStroke=a.stroke&&a.strokeOpacity>0&&a.strokeWidthValue>0;a.widthValue=c(a.width);a.heightValue=c(a.height);return a},_drawLines:function(a,c,b){if(!(!a||!a.length||a[0].length<2)){b=this._getGraphicStyle(b);var d,g;if(b.visibility!="hidden"&&b.opacity>0){this._context.beginPath();this._context.moveTo(a[0][0][0],a[0][0][1]);for(d=0;d<a.length;d++)for(g=0;g<a[d].length;g++)this._context.lineTo(a[d][g][0],a[d][g][1]);c&&this._context.closePath();
+if(c&&b.doFill){this._context.fillStyle=b.fill;this._context.globalAlpha=b.opacity*b.fillOpacity;this._context.fill()}if(b.doStroke){this._context.lineCap=this._context.lineJoin="round";this._context.lineWidth=b.strokeWidthValue;this._context.strokeStyle=b.stroke;this._context.globalAlpha=b.opacity*b.strokeOpacity;this._context.stroke()}}}}})})(jQuery);
+(function(e,r){var p=function(){for(var a=5,c=document.createElement("div"),b=c.all||[];c.innerHTML="<!--[if gt IE "+ ++a+"]><br><![endif]--\>",b[0];);return a>6?a:!a}();e.widget("geo.geomap",{_$elem:r,_created:false,_contentBounds:{},_$contentFrame:r,_$existingChildren:r,_$servicesContainer:r,_$drawContainer:r,_$shapesContainer:r,_$textContainer:r,_$textContent:r,_$eventTarget:r,_dpi:96,_currentServices:[],_center:r,_pixelSize:r,_centerMax:r,_pixelSizeMax:r,_wheelZoomFactor:1.18920711500273,_wheelTimeout:null,
+_wheelLevel:0,_zoomFactor:2,_mouseDown:r,_inOp:r,_toolPan:r,_shiftZoom:r,_anchor:r,_current:r,_downDate:r,_moveDate:r,_clickDate:r,_lastMove:r,_lastDrag:r,_windowHandler:null,_resizeTimeout:null,_panning:r,_velocity:r,_friction:r,_supportTouch:r,_softDblClick:r,_isTap:r,_isDbltap:r,_drawTimeout:null,_drawPixels:[],_drawCoords:[],_graphicShapes:[],_initOptions:{},_options:{},options:e.extend({},{bbox:[-180,-85,180,85],bboxMax:[-180,-85,180,85],center:[0,0],cursors:{pan:"move",zoom:"crosshair",drawPoint:"crosshair",
+drawLineString:"crosshair",drawPolygon:"crosshair"},drawStyle:{},shapeStyle:{},mode:"pan",services:[{"class":"osm",type:"tiled",getUrl:function(a){return"http://tile.openstreetmap.org/"+a.zoom+"/"+a.tile.column+"/"+a.tile.row+".png"},attr:"© OpenStreetMap & contributors, CC-BY-SA"}],tilingScheme:{tileWidth:256,tileHeight:256,levels:18,basePixelSize:156543.03392799935,origin:[-2.0037508342787E7,2.0037508342787E7]},zoom:0,pixelSize:0}),_createWidget:function(a,c){this._$elem=e(c);if(!this._$elem.is("[data-geo-service]")){this._$elem.attr("data-geo-map",
+"data-geo-map");this._graphicShapes=[];this._initOptions=a||{};this._forcePosition(this._$elem);this._$elem.css("text-align","left");var b=this._findMapSize();this._contentBounds={x:parseInt(this._$elem.css("padding-left")),y:parseInt(this._$elem.css("padding-top")),width:b.width,height:b.height};this._createChildren();this._center=this._centerMax=[0,0];this.options.pixelSize=this._pixelSize=this._pixelSizeMax=156543.03392799935;this._mouseDown=this._inOp=this._toolPan=this._shiftZoom=this._panning=
+this._isTap=this._isDbltap=false;this._anchor=this._current=this._lastMove=this._lastDrag=this._velocity=[0,0];this._friction=[0.8,0.8];this._downDate=this._moveDate=this._clickDate=0}e.Widget.prototype._createWidget.apply(this,arguments)},_create:function(){if(!this._$elem.is("[data-geo-service]")){this._options=this.options;this._softDblClick=(this._supportTouch="ontouchend"in document)||p==7;var a=this._supportTouch?"touchstart":"mousedown",c=this._supportTouch?"touchend touchcancel":"mouseup",
+b=this._supportTouch?"touchmove":"mousemove";e(document).keydown(e.proxy(this._document_keydown,this));this._$eventTarget.dblclick(e.proxy(this._eventTarget_dblclick,this));this._$eventTarget.bind(a,e.proxy(this._eventTarget_touchstart,this));a=this._$eventTarget[0].setCapture?this._$eventTarget:e(document);a.bind(b,e.proxy(this._dragTarget_touchmove,this));a.bind(c,e.proxy(this._dragTarget_touchstop,this));this._$eventTarget.mousewheel(e.proxy(this._eventTarget_mousewheel,this));var d=this;this._windowHandler=
+function(){d._resizeTimeout&&clearTimeout(d._resizeTimeout);this._resizeTimeout=setTimeout(function(){d._created&&d._$elem.geomap("resize")},500)};e(window).resize(this._windowHandler);this._$drawContainer.geographics({style:this._initOptions.drawStyle||{}});this._options.drawStyle=this._$drawContainer.geographics("option","style");this._$shapesContainer.geographics({style:this._initOptions.shapeStyle||{}});this._options.shapeStyle=this._$shapesContainer.geographics("option","style");if(this._initOptions){this._initOptions.bbox&&
+this._setOption("bbox",this._initOptions.bbox,false);this._initOptions.center&&this._setOption("center",this._initOptions.center,false);this._initOptions.zoom&&this._setZoom(this._initOptions.zoom,false,false)}this._$eventTarget.css("cursor",this._options.cursors[this._options.mode]);this._createServices();this._refresh();this._created=true}},_setOption:function(a,c,b){if(!(this._$elem.is("[data-geo-service]")||a=="pixelSize")){b=b===r||b;switch(a){case "bbox":if(e.geo.proj){c=e.geo.proj.fromGeodetic([[c[0],
+c[1]],[c[2],c[3]]]);c=[c[0][0],c[0][1],c[1][0],c[1][1]]}this._setBbox(c,false,b);c=this._getBbox();if(e.geo.proj){c=e.geo.proj.toGeodetic([[c[0],c[1]],[c[2],c[3]]]);c=[c[0][0],c[0][1],c[1][0],c[1][1]]}break;case "center":this._setCenterAndSize(e.geo.proj?e.geo.proj.fromGeodetic([[c[0],c[1]]])[0]:c,this._pixelSize,false,b);break;case "drawStyle":if(this._$drawContainer){this._$drawContainer.geographics("option","style",c);c=this._$drawContainer.geographics("option","style")}break;case "shapeStyle":if(this._$shapesContainer){this._$shapesContainer.geographics("option",
+"style",c);c=this._$shapesContainer.geographics("option","style")}break;case "mode":this._$drawContainer.geographics("clear");this._$eventTarget.css("cursor",this._options.cursors[c]);break;case "zoom":this._setZoom(c,false,b)}e.Widget.prototype._setOption.apply(this,arguments);switch(a){case "services":this._createServices();b&&this._refresh();break;case "shapeStyle":if(b){this._$shapesContainer.geographics("clear");this._refreshShapes(this._$shapesContainer,this._graphicShapes,this._graphicShapes)}}}},
+destroy:function(){if(this._$elem.is("[data-geo-map]")){this._created=false;e(window).unbind("resize",this._windowHandler);for(var a=0;a<this._currentServices.length;a++){this._currentServices[a].serviceContainer.geomap("destroy");e.geo._serviceTypes[this._currentServices[a].type].destroy(this,this._$servicesContainer,this._currentServices[a])}this._$shapesContainer.geographics("destroy");this._$drawContainer.geographics("destroy");this._$existingChildren.detach();this._$elem.html("");this._$elem.append(this._$existingChildren);
+this._$elem.removeAttr("data-geo-map")}e.Widget.prototype.destroy.apply(this,arguments)},toMap:function(a){a=this._toMap(a);return e.geo.proj?e.geo.proj.toGeodetic(a):a},toPixel:function(a,c,b){a=e.geo.proj?e.geo.proj.fromGeodetic(a):a;return this._toPixel(a,c,b)},opacity:function(a,c){if(this._$elem.is("[data-geo-service]"))this._$elem.closest("[data-geo-map]").geomap("opacity",a,this._$elem);else if(a>=0||a<=1)for(var b=0;b<this._currentServices.length;b++){var d=this._currentServices[b];if(!c||
+d.serviceContainer[0]==c[0]){this._options.services[b].opacity=d.opacity=a;e.geo._serviceTypes[d.type].opacity(this,d)}}},toggle:function(a,c){if(this._$elem.is("[data-geo-service]"))this._$elem.closest("[data-geo-map]").geomap("toggle",a,this._$elem);else for(var b=0;b<this._currentServices.length;b++){var d=this._currentServices[b];if(!c||d.serviceContainer[0]==c[0]){if(a===r)a=d.visibility===r||d.visibility==="visible"?false:true;this._options.services[b].visibility=d.visibility=a?"visible":"hidden";
+e.geo._serviceTypes[d.type].toggle(this,d);a&&e.geo._serviceTypes[d.type].refresh(this,d)}}},zoom:function(a){a!=null&&this._setZoom(this._options.zoom+a,false,true)},refresh:function(){this._refresh()},resize:function(){var a=this._findMapSize(),c=a.width/2-this._contentBounds.width/2,b=a.height/2-this._contentBounds.height/2,d;this._contentBounds={x:parseInt(this._$elem.css("padding-left")),y:parseInt(this._$elem.css("padding-top")),width:a.width,height:a.height};this._$contentFrame.css({width:a.width,
+height:a.height});this._$servicesContainer.css({width:a.width,height:a.height});this._$eventTarget.css({width:a.width,height:a.height});var g=this._$shapesContainer.geographics("option","style");this._$shapesContainer.geographics("destroy");this._$drawContainer.geographics("destroy");for(d=0;d<this._currentServices.length;d++)e.geo._serviceTypes[this._currentServices[d].type].resize(this,this._currentServices[d]);this._$drawContainer.css({width:a.width,height:a.height});this._$drawContainer.geographics();
+this._$shapesContainer.css({width:a.width,height:a.height});this._$shapesContainer.geographics({style:g});for(d=0;d<this._drawPixels.length;d++){this._drawPixels[d][0]+=c;this._drawPixels[d][1]+=b}this._setCenterAndSize(this._center,this._pixelSize,false,true)},append:function(a,c,b){if(a){var d=0;a=a.type=="FeatureCollection"?a.features:e.isArray(a)?a:[a];if(typeof c==="boolean"){b=c;c=null}for(;d<a.length;d++){if(a[d].type!="Point"){var g=e.geo.bbox(a[d]);if(e.geo.proj)g=e.geo.proj.fromGeodetic(g);
+e.data(a[d],"geoBbox",g)}this._graphicShapes.push({shape:a[d],style:c})}if(b===r||b)this._refresh()}},empty:function(a){e.each(this._graphicShapes,function(){e.removeData(this,"geoBbox")});this._graphicShapes=[];if(a===r||a)this._refresh()},find:function(a,c){this.toPixel(a.coordinates);var b=this._pixelSize*c,d=[],g;e.each(this._graphicShapes,function(){if(this.shape.type=="Point")e.geo.distance(this.shape,a)<=b&&d.push(this.shape);else{var f=e.data(this.shape,"geoBbox");f={type:"Polygon",coordinates:[[[f[0],
+f[1]],[f[0],f[3]],[f[2],f[3]],[f[2],f[1]],[f[0],f[1]]]]};var m={type:"Point",coordinates:e.geo.proj?e.geo.proj.fromGeodetic(a.coordinates):a.coordinates};if(e.geo.distance(f,m,true)<=b){f=e.geo._flatten(this.shape);for(g=0;g<f.length;g++)if(e.geo.distance(f[g],a)<=b){d.push(this.shape);break}}}});return d},remove:function(a,c){var b=this;e.each(this._graphicShapes,function(d){if(this.shape==a){e.removeData(a,"geoBbox");var g=b._graphicShapes.slice(d+1);b._graphicShapes.length=d;b._graphicShapes.push.apply(b._graphicShapes,
+g);return false}});if(c===r||c)this._refresh()},_getBbox:function(a,c){a=a||this._center;c=c||this._pixelSize;var b=this._contentBounds.width/2*c,d=this._contentBounds.height/2*c;return[a[0]-b,a[1]-d,a[0]+b,a[1]+d]},_setBbox:function(a,c,b){var d=[a[0]+(a[2]-a[0])/2,a[1]+(a[3]-a[1])/2];a=Math.max(e.geo.width(a,true)/this._contentBounds.width,e.geo.height(a,true)/this._contentBounds.height);if(this._options.tilingScheme)a=this._getTiledPixelSize(this._getTiledZoom(a));this._setCenterAndSize(d,a,c,
+b)},_getBboxMax:function(){var a=this._contentBounds.width/2*this._pixelSizeMax,c=this._contentBounds.height/2*this._pixelSizeMax;return[this._centerMax[0]-a,this._centerMax[1]-c,this._centerMax[0]+a,this._centerMax[1]+c]},_getCenter:function(){return this._center},_getContentBounds:function(){return this._contentBounds},_getServicesContainer:function(){return this._$servicesContainer},_getZoom:function(){if(this._options.tilingScheme)return this._getTiledZoom(this._pixelSize);else{var a=this._contentBounds.width/
+this._contentBounds.height,c=e.geo.reaspect(this._getBbox(),a,true);a=e.geo.reaspect(this._getBboxMax(),a,true);return Math.log(e.geo.width(a,true)/e.geo.width(c,true))/Math.log(this._zoomFactor)}},_setZoom:function(a,c,b){a=Math.max(a,0);if(this._options.tilingScheme)this._setCenterAndSize(this._center,this._getTiledPixelSize(a),c,b);else{a=e.geo.scaleBy(this._getBboxMax(),1/Math.pow(this._zoomFactor,a),true);this._setCenterAndSize(this._center,Math.max(e.geo.width(a,true)/this._contentBounds.width,
+e.geo.height(a,true)/this._contentBounds.height),c,b)}},_createChildren:function(){this._$existingChildren=this._$elem.children().detach();this._forcePosition(this._$existingChildren);this._$existingChildren.css("-moz-user-select","none");this._$elem.prepend("<div style='position:absolute; left:"+this._contentBounds.x+"px; top:"+this._contentBounds.y+"px; width:"+this._contentBounds.width+"px; height:"+this._contentBounds.height+"px; margin:0; padding:0; overflow:hidden; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none;' unselectable='on'></div>");
+this._$eventTarget=this._$contentFrame=this._$elem.children(":first");this._$contentFrame.append('<div style="position:absolute; left:0; top:0; width:'+this._contentBounds.width+"px; height:"+this._contentBounds.height+'px; margin:0; padding:0;"></div>');this._$servicesContainer=this._$contentFrame.children(":last");this._$contentFrame.append('<div style="position:absolute; left:0; top:0; width:'+this._contentBounds.width+"px; height:"+this._contentBounds.height+'px; margin:0; padding:0;"></div>');
+this._$shapesContainer=this._$contentFrame.children(":last");this._$contentFrame.append('<div style="position:absolute; left:0; top:0; width:'+this._contentBounds.width+"px; height:"+this._contentBounds.height+'px; margin:0; padding:0;"></div>');this._$drawContainer=this._$contentFrame.children(":last");this._$contentFrame.append('<div class="ui-widget ui-widget-content ui-corner-all" style="position:absolute; left:0; top:0px; max-width:128px; display:none;"><div style="margin:.2em;"></div></div>');
+this._$textContainer=this._$contentFrame.children(":last");this._$textContent=this._$textContainer.children();this._$contentFrame.append(this._$existingChildren)},_createServices:function(){var a;for(a=0;a<this._currentServices.length;a++){this._currentServices[a].serviceContainer.geomap("destroy");e.geo._serviceTypes[this._currentServices[a].type].destroy(this,this._$servicesContainer,this._currentServices[a])}this._currentServices=[];for(a=0;a<this._options.services.length;a++){this._currentServices[a]=
+this._options.services[a];this._currentServices[a].serviceContainer=e.geo._serviceTypes[this._currentServices[a].type].create(this,this._$servicesContainer,this._currentServices[a],a).geomap()}},_refreshDrawing:function(){this._$drawContainer.geographics("clear");if(this._drawPixels.length>0){var a=this._options.mode,c=this._drawPixels;if(a=="drawPolygon")c=[c];this._$drawContainer.geographics(a,c)}},_resetDrawing:function(){this._drawPixels=[];this._drawCoords=[];this._$drawContainer.geographics("clear")},
+_refreshShapes:function(a,c,b,d,g){var f,m,l,o,s,x=this._getBbox(d,g),t=this;for(f=0;f<c.length;f++){l=c[f].shape||c[f];l=l.geometry||l;m=e.data(l,"geoBbox");if(!(m&&e.geo._bboxDisjoint(x,m))){o=e.isArray(b)?b[f].style:b;switch(l.type){case "Point":this._$shapesContainer.geographics("drawPoint",this.toPixel(l.coordinates,d,g),o);break;case "LineString":this._$shapesContainer.geographics("drawLineString",this.toPixel(l.coordinates,d,g),o);break;case "Polygon":s=[];e.each(l.coordinates,function(A){s[A]=
+t.toPixel(this,d,g)});this._$shapesContainer.geographics("drawPolygon",s,o);break;case "MultiPoint":for(m=0;m<l.coordinates;m++)this._$shapesContainer.geographics("drawPoint",this.toPixel(l.coordinates[m],d,g),o);break;case "MultiLineString":for(m=0;m<l.coordinates;m++)this._$shapesContainer.geographics("drawLineString",this.toPixel(l.coordinates[m],d,g),o);break;case "MultiPolygon":for(m=0;m<l.coordinates;m++){s=[];e.each(l.coordinates[m],function(A){s[A]=t.toPixel(this,d,g)});this._$shapesContainer.geographics("drawPolygon",
+s,o)}break;case "GeometryCollection":t._refreshShapes(a,l.geometries,o,d,g)}}}},_findMapSize:function(){for(var a={width:0,height:0},c=this._$elem;c.size()&&!(a.width>0&&a.height>0);){a={width:c.width(),height:c.height()};if(a.width<=0||a.height<=0)a={width:parseInt(c.css("width")),height:parseInt(c.css("height"))};c=c.parent()}return a},_forcePosition:function(a){var c=a.css("position");c!="relative"&&c!="absolute"&&c!="fixed"&&a.css("position","relative")},_getTiledPixelSize:function(a){var c=this._options.tilingScheme;
+if(c!=null){if(a===0)return c.pixelSizes!=null?c.pixelSizes[0]:c.basePixelSize;a=Math.round(a);a=Math.max(a,0);a=Math.min(a,(c.pixelSizes!=null?c.pixelSizes.length:c.levels)-1);return c.pixelSizes!=null?c.pixelSizes[a]:c.basePixelSize/Math.pow(2,a)}else return NaN},_getTiledZoom:function(a){var c=this._options.tilingScheme;if(c.pixelSizes!=null){a=Math.floor(a*1E3);for(var b=(c.pixelSizes!=null?c.pixelSizes.length:c.levels)-1;b>=0;b--)if(Math.floor(c.pixelSizes[b]*1E3)>=a)return b;return 0}else return Math.max(Math.round(Math.log(c.basePixelSize/
+a)/Math.log(2)),0)},_getZoomCenterAndSize:function(a,c,b){if(this._options.tilingScheme){c=this._getTiledZoom(this._pixelSize)+c;c=this._getTiledPixelSize(c)}else{c=Math.pow(b,-c);c=this._pixelSize*c}b=c/this._pixelSize;a=this._toMap(a);b=[(this._center[0]-a[0])*b,(this._center[1]-a[1])*b];return{pixelSize:c,center:[a[0]+b[0],a[1]+b[1]]}},_mouseWheelFinish:function(){this._wheelTimeout=null;if(this._wheelLevel!=0){var a=this._getZoomCenterAndSize(this._anchor,this._wheelLevel,this._wheelZoomFactor);
+this._setCenterAndSize(a.center,a.pixelSize,true,true);this._wheelLevel=0}else this._refresh()},_panEnd:function(){this._velocity=[this._velocity[0]>0?Math.floor(this._velocity[0]*this._friction[0]):Math.ceil(this._velocity[0]*this._friction[0]),this._velocity[1]>0?Math.floor(this._velocity[1]*this._friction[1]):Math.ceil(this._velocity[1]*this._friction[1])];if(Math.abs(this._velocity[0])<4&&Math.abs(this._velocity[1])<4)this._panFinalize();else{this._current=[this._current[0]+this._velocity[0],
+this._current[1]+this._velocity[1]];this._panMove();setTimeout(e.proxy(this._panEnd,this),30)}},_panFinalize:function(){if(this._panning){this._velocity=[0,0];var a=-(this._current[0]-this._anchor[0])*this._pixelSize,c=(this._current[1]-this._anchor[1])*this._pixelSize;this._$shapesContainer.css({left:0,top:0});this._setCenterAndSize([this._center[0]+a,this._center[1]+c],this._pixelSize,true,true);this._inOp=false;this._anchor=this._current;this._toolPan=this._panning=false;this._$eventTarget.css("cursor",
+this._options.cursors[this._options.mode])}},_panMove:function(){var a=this._current[0]-this._lastDrag[0],c=this._current[1]-this._lastDrag[1],b=0,d;if(this._toolPan||a>3||a<-3||c>3||c<-3){if(!this._toolPan){this._toolPan=true;this._$eventTarget.css("cursor",this._options.cursors.pan)}if(this._mouseDown)this._velocity=[a,c];if(a!=0||c!=0){this._panning=true;this._lastDrag=this._current;for(b=0;b<this._options.services.length;b++){d=this._options.services[b];e.geo._serviceTypes[d.type].interactivePan(this,
+d,a,c)}this._$shapesContainer.css({left:function(g,f){return parseInt(f)+a},top:function(g,f){return parseInt(f)+c}});for(b=0;b<this._drawPixels.length;b++){this._drawPixels[b][0]+=a;this._drawPixels[b][1]+=c}this._refreshDrawing()}}},_refresh:function(){for(var a=0;a<this._options.services.length;a++){var c=this._options.services[a];!this._mouseDown&&e.geo._serviceTypes[c.type]!=null&&e.geo._serviceTypes[c.type].refresh(this,c)}if(this._$shapesContainer){this._$shapesContainer.geographics("clear");
+this._graphicShapes.length>0&&this._refreshShapes(this._$shapesContainer,this._graphicShapes,this._graphicShapes)}},_setCenterAndSize:function(a,c,b,d){if(this._pixelSize!=c){this._$shapesContainer.geographics("clear");for(var g=0;g<this._options.services.length;g++){var f=this._options.services[g];e.geo._serviceTypes[f.type].interactiveScale(this,f,a,c)}}this._center=a;this.options.pixelSize=this._pixelSize=c;if(e.geo.proj){a=this._getBbox();a=e.geo.proj.toGeodetic([[a[0],a[1]],[a[2],a[3]]]);a=[a[0][0],
+a[0][1],a[1][0],a[1][1]];this._options.bbox=a;this._options.center=e.geo.proj.toGeodetic([[this._center[0],this._center[1]]])[0]}else{this._options.bbox=this._getBbox();this._options.center=this._center}this._options.zoom=this._getZoom();if(this._drawCoords.length>0)this._drawPixels=this._toPixel(this._drawCoords);b&&this._trigger("bboxchange",window.event,{bbox:this._options.bbox});if(d){this._refresh();this._refreshDrawing()}},_toMap:function(a,c,b){var d=e.isArray(a[0]);d||(a=[a]);c=c||this._center;
+b=b||this._pixelSize;var g=this._contentBounds.width,f=this._contentBounds.height,m=g/2*b;b=f/2*b;var l=[c[0]-m,c[1]-b,c[0]+m,c[1]+b],o=e.geo.width(l,true)/g,s=e.geo.height(l,true)/f,x=[];e.each(a,function(t){x[t]=[l[0]+this[0]*o,l[3]-this[1]*s]});return d?x:x[0]},_toPixel:function(a,c,b){var d=e.isArray(a[0]);d||(a=[a]);c=c||this._center;b=b||this._pixelSize;var g=this._contentBounds.width,f=this._contentBounds.height,m=g/2*b;b=f/2*b;var l=[c[0]-m,c[1]-b,c[0]+m,c[1]+b],o=e.geo.width(l,true),s=e.geo.height(l,
+true),x=[];e.each(a,function(t){x[t]=[Math.round((this[0]-l[0])*g/o),Math.round((l[3]-this[1])*f/s)]});return d?x:x[0]},_zoomTo:function(a,c,b,d){c=c<0?0:c;var g=this._getTiledPixelSize(c);if(isNaN(g)){c=e.geo._scaleBy(this._getBboxMax(),1/Math.pow(this._zoomFactor,c),true);c=Math.max(e.geo.width(c,true)/this._contentBounds.width,e.geo.height(c,true)/this._contentBounds.height);this._setCenterAndSize(a,c,b,d)}else this._setCenterAndSize(a,g,b,d)},_document_keydown:function(a){var c=this._drawCoords.length;
+if(c>0&&a.which==27)if(c<=2){this._resetDrawing();this._inOp=false}else{this._drawCoords[c-2]=e.merge([],this._drawCoords[c-1]);this._drawPixels[c-2]=e.merge([],this._drawPixels[c-1]);this._drawCoords.length--;this._drawPixels.length--;this._refreshDrawing()}},_eventTarget_dblclick_zoom:function(a){this._trigger("dblclick",a,{type:"Point",coordinates:this.toMap(this._current)});if(!a.isDefaultPrevented()){a=this._getZoomCenterAndSize(this._current,1,this._zoomFactor);this._setCenterAndSize(a.center,
+a.pixelSize,true,true)}},_eventTarget_dblclick:function(a){this._panFinalize();if(this._drawTimeout){window.clearTimeout(this._drawTimeout);this._drawTimeout=null}e(a.currentTarget).offset();switch(this._options.mode){case "pan":case "drawPoint":this._eventTarget_dblclick_zoom(a);break;case "drawLineString":if(this._drawCoords.length>1&&!(this._drawCoords[0][0]==this._drawCoords[1][0]&&this._drawCoords[0][1]==this._drawCoords[1][1])){this._drawCoords.length--;this._trigger("shape",a,{type:"LineString",
+coordinates:e.geo.proj?e.geo.proj.toGeodetic(this._drawCoords):this._drawCoords})}else this._eventTarget_dblclick_zoom(a);this._resetDrawing();break;case "drawPolygon":if(this._drawCoords.length>1&&!(this._drawCoords[0][0]==this._drawCoords[1][0]&&this._drawCoords[0][1]==this._drawCoords[1][1])){var c=this._drawCoords.length-1;if(c>2){this._drawCoords[c]=e.merge([],this._drawCoords[0]);this._trigger("shape",a,{type:"Polygon",coordinates:[e.geo.proj?e.geo.proj.toGeodetic(this._drawCoords):this._drawCoords]})}}else this._eventTarget_dblclick_zoom(a);
+this._resetDrawing()}this._inOp=false},_eventTarget_touchstart:function(a){if(!(!this._supportTouch&&a.which!=1)){this._panFinalize();this._mouseWheelFinish();var c=e(a.currentTarget).offset();this._current=this._supportTouch?[a.originalEvent.changedTouches[0].pageX-c.left,a.originalEvent.changedTouches[0].pageY-c.top]:[a.pageX-c.left,a.pageY-c.top];if(this._softDblClick){c=e.now();if(c-this._downDate<750){if(this._isTap){var b=this._current[0]-this._anchor[0],d=this._current[1]-this._anchor[1];if(Math.sqrt(b*
+b+d*d)>10)this._isTap=false;else this._current=this._anchor}this._isDbltap=this._isDbltap?false:this._isTap}else this._isDbltap=false;this._isTap=true;this._downDate=c}this._mouseDown=true;this._anchor=this._current;if(!this._inOp&&a.shiftKey){this._shiftZoom=true;this._$eventTarget.css("cursor",this._options.cursors.zoom)}else{this._inOp=true;switch(this._options.mode){case "pan":case "drawPoint":case "drawLineString":case "drawPolygon":this._lastDrag=this._current;a.currentTarget.setCapture&&a.currentTarget.setCapture()}}if(this._inOp){a.preventDefault();
+return false}}},_dragTarget_touchmove:function(a){var c=this._$eventTarget.offset(),b=this._drawCoords.length;c=this._supportTouch?[a.originalEvent.changedTouches[0].pageX-c.left,a.originalEvent.changedTouches[0].pageY-c.top]:[a.pageX-c.left,a.pageY-c.top];if(c[0]===this._lastMove[0]&&c[1]===this._lastMove[1])if(this._inOp){a.preventDefault();return false}if(this._softDblClick)this._isDbltap=this._isTap=false;if(this._mouseDown){this._current=c;this._moveDate=e.now()}switch(this._shiftZoom?"zoom":
+this._options.mode){case "zoom":if(this._mouseDown){this._$drawContainer.geographics("clear");this._$drawContainer.geographics("drawBbox",[this._anchor[0],this._anchor[1],c[0],c[1]])}else this._trigger("move",a,{type:"Point",coordinates:this.toMap(c)});break;case "pan":case "drawPoint":this._mouseDown||this._toolPan?this._panMove():this._trigger("move",a,{type:"Point",coordinates:this.toMap(c)});break;case "drawLineString":case "drawPolygon":if(this._mouseDown||this._toolPan)this._panMove();else{if(b>
+0){this._drawCoords[b-1]=this._toMap(c);this._drawPixels[b-1]=c;this._refreshDrawing()}this._trigger("move",a,{type:"Point",coordinates:this.toMap(c)})}}this._lastMove=c;if(this._inOp){a.preventDefault();return false}},_dragTarget_touchstop:function(a){!this._mouseDown&&p==7&&this._eventTarget_touchstart(a);var c=this._mouseDown,b=this._toolPan,d=this._$eventTarget.offset(),g=this._shiftZoom?"zoom":this._options.mode,f,m;f=this._supportTouch?[a.originalEvent.changedTouches[0].pageX-d.left,a.originalEvent.changedTouches[0].pageY-
+d.top]:[a.pageX-d.left,a.pageY-d.top];d=f[0]-this._anchor[0];m=f[1]-this._anchor[1];this._$eventTarget.css("cursor",this._options.cursors[this._options.mode]);this._shiftZoom=this._mouseDown=this._toolPan=false;document.releaseCapture&&document.releaseCapture();if(c){c=e.now();this._current=f;switch(g){case "zoom":if(d>0||m>0){b=this._pixelSize*6;g=this._toMap([[Math.min(this._anchor[0],f[0]),Math.max(this._anchor[1],f[1])],[Math.max(this._anchor[0],f[0]),Math.min(this._anchor[1],f[1])]]);g=[g[0][0],
+g[0][1],g[1][0],g[1][1]];if(g[2]-g[0]<b&&g[3]-g[1]<b)g=e.geo.scaleBy(this._getBbox(e.geo.center(g,true)),0.5,true);this._setBbox(g,true,true)}this._resetDrawing();break;case "pan":if(b)this._panEnd();else if(c-this._clickDate>100){this._trigger("click",a,{type:"Point",coordinates:this.toMap(f)});this._inOp=false}break;case "drawPoint":if(this._drawTimeout){window.clearTimeout(this._drawTimeout);this._drawTimeout=null}if(b)this._panFinalize();else if(c-this._clickDate>100){var l=this;this._drawTimeout=
+setTimeout(function(){if(l._drawTimeout){l._trigger("shape",a,{type:"Point",coordinates:l.toMap(f)});l._inOp=false;l._drawTimeout=false}},250)}break;case "drawLineString":case "drawPolygon":if(b)this._panFinalize();else{b=this._drawCoords.length==0?0:this._drawCoords.length-1;this._drawCoords[b]=this._toMap(f);this._drawPixels[b]=f;if(b<2||!(this._drawCoords[b][0]==this._drawCoords[b-1][0]&&this._drawCoords[b][1]==this._drawCoords[b-1][1])){this._drawCoords[b+1]=this._toMap(f);this._drawPixels[b+
+1]=f}this._refreshDrawing()}}this._clickDate=c;if(this._softDblClick&&this._isDbltap){this._isDbltap=this._isTap=false;this._$eventTarget.trigger("dblclick",a)}}if(this._inOp){a.preventDefault();return false}},_eventTarget_mousewheel:function(a,c){a.preventDefault();this._panFinalize();if(this._mouseDown)return false;if(c!=0){if(this._wheelTimeout){window.clearTimeout(this._wheelTimeout);this._wheelTimeout=null}else{var b=e(a.currentTarget).offset();this._anchor=[a.pageX-b.left,a.pageY-b.top]}this._wheelLevel+=
+c;b=this._getZoomCenterAndSize(this._anchor,this._wheelLevel,this._wheelZoomFactor);this._$shapesContainer.geographics("clear");for(i=0;i<this._options.services.length;i++){var d=this._options.services[i];e.geo._serviceTypes[d.type].interactiveScale(this,d,b.center,b.pixelSize)}this._$shapesContainer.geographics("clear");this._graphicShapes.length>0&&this._graphicShapes.length<256&&this._refreshShapes(this._$shapesContainer,this._graphicShapes,this._graphicShapes,b.center,b.pixelSize);if(this._drawCoords.length>
+0){this._drawPixels=this._toPixel(this._drawCoords,b.center,b.pixelSize);this._refreshDrawing()}var g=this;this._wheelTimeout=window.setTimeout(function(){g._mouseWheelFinish()},1E3)}return false}})})(jQuery);
+(function(e,r){e.geo._serviceTypes.tiled=function(){return{create:function(p,a,c){p=e.data(c,"geoServiceState");if(!p){p={loadCount:0,reloadTiles:false};a.append('<div data-geo-service="tiled"'+(c.id?' id="'+c.id+'"':"")+(c["class"]?' class="'+c["class"]+'"':"")+' style="position:absolute; left:0; top:0; width:8px; height:8px; margin:0; padding:0; display:'+(c.visibility===r||c.visibility==="visible"?"block":"none")+';"></div>');p.serviceContainer=a.children(":last");e.data(c,"geoServiceState",p)}return p.serviceContainer},
+destroy:function(p,a,c){e.data(c,"geoServiceState").serviceContainer.remove();e.removeData(c,"geoServiceState")},interactivePan:function(p,a,c,b){var d=e.data(a,"geoServiceState");if(d){this._cancelUnloaded(p,a);d.serviceContainer.children().css({left:function(w,M){return parseInt(M)+c},top:function(w,M){return parseInt(M)+b}});if(a&&(a.visibility===r||a.visibility==="visible")){var g=p._pixelSize,f=d.serviceContainer,m=f.children("[data-pixelSize='"+g+"']"),l=p._getContentBounds(),o=p.options.tilingScheme,
+s=o.tileWidth,x=o.tileHeight,t=l.width/2*g,A=l.height/2*g,B=m.position(),C=m.data("scaleOrigin").split(",");l=parseInt(C[0])-B.left;B=parseInt(C[1])-B.top;var y=p._getCenter();C=[y[0]+l*g,y[1]-B*g];var H=Math.floor((C[0]-t-o.origin[0])/(g*s));l=Math.floor((o.origin[1]-(C[1]+A))/(g*x));B=Math.ceil((C[0]+t-o.origin[0])/(g*s));C=Math.ceil((o.origin[1]-(C[1]-A))/(g*x));var I=p._getBboxMax(),G=p._getTiledPixelSize(0),E=G/g,D=Math.floor((I[0]-o.origin[0])/(G*s))*E;I=Math.floor((o.origin[1]-I[3])/(G*x))*
+E;t=Math.round((o.origin[0]+D*s*g-(y[0]-t))/g);A=Math.round((y[1]+A-(o.origin[1]-I*x*g))/g);var J=a.opacity===r?1:a.opacity;for(y=H;y<B;y++)for(H=l;H<C;H++){G=""+y+","+H;E=m.children("[data-tile='"+G+"']").removeAttr("data-dirty");if(E.size()===0){var K=[o.origin[0]+y*s*g,o.origin[1]-H*x*g],F=[o.origin[0]+((y+1)*s-1)*g,o.origin[1]-((H+1)*x-1)*g];K=a.getUrl({bbox:[K[0],K[1],F[0],F[1]],width:s,height:x,zoom:p._getZoom(),tile:{row:H,column:y},index:Math.abs(H+y)});d.loadCount++;if(d.reloadTiles&&E.size()>
+0)E.attr("src",K);else{E="<img style='position:absolute; left:"+((y-D)*100+(t-t%s)/s*100)+"%; top:"+((H-I)*100+(A-A%x)/x*100)+"%; ";if(e("body")[0].filters===r)E+="width: 100%; height: 100%;";E+="margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='"+G+"' />";m.append(E);E=m.children(":last");E.load(function(w){J<1?e(w.target).fadeTo(0,J):e(w.target).show();d.loadCount--;if(d.loadCount<=0){f.children(":not([data-pixelSize='"+
+g+"'])").remove();d.loadCount=0}}).error(function(w){e(w.target).remove();d.loadCount--;if(d.loadCount<=0){f.children(":not([data-pixelSize='"+g+"'])").remove();d.loadCount=0}}).attr("src",K)}}}}}},interactiveScale:function(p,a,c,b){var d=e.data(a,"geoServiceState");if(d&&a&&(a.visibility===r||a.visibility==="visible")){this._cancelUnloaded(p,a);a=p.options.tilingScheme;var g=a.tileWidth,f=a.tileHeight;d.serviceContainer.children().each(function(){var m=e(this),l=m.attr("data-pixelSize")/b;l=Math.round(l*
+1E3)/1E3;var o=m.data("scaleOrigin").split(",");o=p._toMap([o[0],o[1]]);o=p._toPixel(o,c,b);m.css({left:Math.round(o[0])+"px",top:Math.round(o[1])+"px",width:g*l,height:f*l});e("body")[0].filters!==r&&m.children().each(function(){e(this).css("filter","progid:DXImageTransform.Microsoft.Matrix(FilterType=bilinear,M11="+l+",M22="+l+",sizingmethod='auto expand')")})})}},refresh:function(p,a){var c=e.data(a,"geoServiceState");if(c&&a&&(a.visibility===r||a.visibility==="visible")){this._cancelUnloaded(p,
+a);var b=p._getBbox(),d=p._pixelSize,g=c.serviceContainer;p._getContentBounds();var f=p.options.tilingScheme,m=f.tileWidth,l=f.tileHeight,o=Math.floor((b[0]-f.origin[0])/(d*m)),s=Math.floor((f.origin[1]-b[3])/(d*l)),x=Math.ceil((b[2]-f.origin[0])/(d*m)),t=Math.ceil((f.origin[1]-b[1])/(d*l)),A=p._getBboxMax(),B=p._getTiledPixelSize(0),C=B/d,y=Math.floor((A[0]-f.origin[0])/(B*m))*C,H=Math.floor((f.origin[1]-A[3])/(B*l))*C,I=Math.round((f.origin[0]+y*m*d-b[0])/d),G=Math.round((b[3]-(f.origin[1]-H*l*
+d))/d);b=g.children().show();A=b.filter("[data-pixelSize='"+d+"']").appendTo(g);var E=a.opacity===r?1:a.opacity;c.reloadTiles&&b.find("img").attr("data-dirty","true");if(A.size()){A.css({left:I%m+"px",top:G%l+"px"}).data("scaleOrigin",I%m+","+G%l);A.children().each(function(){var F=e(this),w=F.attr("data-tile").split(",");F.css({left:Math.round((parseInt(w[0])-y)*100+(I-I%m)/m*100)+"%",top:Math.round((parseInt(w[1])-H)*100+(G-G%l)/l*100)+"%"});E<1&&F.fadeTo(0,E)})}else{g.append("<div style='position:absolute; left:"+
+I%m+"px; top:"+G%l+"px; width:"+m+"px; height:"+l+"px; margin:0; padding:0;' data-pixelSize='"+d+"'></div>");A=g.children(":last").data("scaleOrigin",I%m+","+G%l)}for(o=o;o<x;o++)for(B=s;B<t;B++){C=""+o+","+B;var D=A.children("[data-tile='"+C+"']").removeAttr("data-dirty");if(D.size()===0||c.reloadTiles){var J=[f.origin[0]+o*m*d,f.origin[1]-B*l*d],K=[f.origin[0]+((o+1)*m-1)*d,f.origin[1]-((B+1)*l-1)*d];J=a.getUrl({bbox:[J[0],J[1],K[0],K[1]],width:m,height:l,zoom:p._getZoom(),tile:{row:B,column:o},
+index:Math.abs(B+o)});c.loadCount++;if(c.reloadTiles&&D.size()>0)D.attr("src",J);else{D="<img style='position:absolute; left:"+((o-y)*100+(I-I%m)/m*100)+"%; top:"+((B-H)*100+(G-G%l)/l*100)+"%; ";if(e("body")[0].filters===r)D+="width: 100%; height: 100%;";D+="margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='"+C+"' />";A.append(D);D=A.children(":last");D.load(function(F){E<1?e(F.target).fadeTo(0,
+E):e(F.target).show();c.loadCount--;if(c.loadCount<=0){g.children(":not([data-pixelSize='"+d+"'])").remove();c.loadCount=0}}).error(function(F){e(F.target).remove();c.loadCount--;if(c.loadCount<=0){g.children(":not([data-pixelSize='"+d+"'])").remove();c.loadCount=0}}).attr("src",J)}}}b.find("[data-dirty]").remove();c.reloadTiles=false}},resize:function(){},opacity:function(p,a){e.data(a,"geoServiceState").serviceContainer.find("img").stop(true).fadeTo("fast",a.opacity)},toggle:function(p,a){e.data(a,
+"geoServiceState").serviceContainer.css("display",a.visibility==="visible"?"block":"none")},_cancelUnloaded:function(p,a){var c=e.data(a,"geoServiceState");if(c&&c.loadCount>0)for(c.serviceContainer.find("img:hidden").remove();c.loadCount>0;)c.loadCount--}}}()})(jQuery);
+(function(e,r){e.geo._serviceTypes.shingled=function(){return{create:function(p,a,c){p=e.data(c,"geoServiceState");if(!p){p={loadCount:0};a.append('<div data-geo-service="shingled"'+(c.id?' id="'+c.id+'"':"")+(c["class"]?' class="'+c["class"]+'"':"")+' style="position:absolute; left:0; top:0; width:16px; height:16px; margin:0; padding:0; display:'+(c.visibility===r||c.visibility==="visible"?"block":"none")+';"></div>');p.serviceContainer=a.children(":last");e.data(c,"geoServiceState",p)}return p.serviceContainer},
+destroy:function(p,a,c){e.data(c,"geoServiceState").serviceContainer.remove();e.removeData(c,"geoServiceState")},interactivePan:function(p,a,c,b){var d=e.data(a,"geoServiceState");if(d){this._cancelUnloaded(p,a);p=d.serviceContainer.children("[data-pixelSize='"+p._pixelSize+"']");a=p.children("div");if(!a.length){p.children("img").wrap('<div style="position:absolute; left:0; top:0; width:100%; height:100%;"></div>');a=p.children("div")}a.css({left:function(g,f){return parseInt(f)+c},top:function(g,
+f){return parseInt(f)+b}})}},interactiveScale:function(p,a,c,b){var d=e.data(a,"geoServiceState");if(d){this._cancelUnloaded(p,a);a=d.serviceContainer;p=p._getContentBounds();var g=p.width,f=p.height,m=g/2,l=f/2;a.children().each(function(){var o=e(this),s=o.attr("data-pixelSize"),x=s/b;o.css({width:g*x,height:f*x}).children("img").each(function(){var t=e(this),A=t.data("center");t.css({left:(Math.round((A[0]-c[0])/s)-m)*x+"px",top:(Math.round((c[1]-A[1])/s)-l)*x+"px"})})})}},refresh:function(p,a){var c=
+e.data(a,"geoServiceState");if(c&&a&&(a.visibility===r||a.visibility==="visible")){this._cancelUnloaded(p,a);var b=p._getBbox(),d=p._pixelSize,g=c.serviceContainer,f=p._getContentBounds(),m=f.width,l=f.height,o=m/2,s=l/2;f=g.children('[data-pixelSize="'+d+'"]');var x=a.opacity===r?1:a.opacity;if(!f.size()){g.append('<div style="position:absolute; left:'+o+"px; top:"+s+"px; width:"+m+"px; height:"+l+'px; margin:0; padding:0;" data-pixelSize="'+d+'"></div>');f=g.children(":last")}f.children("img").each(function(){var t=
+e(this),A=t.data("center"),B=p._getCenter();t.css({left:Math.round((A[0]-B[0])/d)-o+"px",top:Math.round((B[1]-A[1])/d)-s+"px"})});x<1&&g.find("img").attr("data-keepAlive","0");b=a.getUrl({bbox:b,width:m,height:l,zoom:p._getZoom(),tile:null,index:0});c.loadCount++;f.append('<img style="position:absolute; left:-'+o+"px; top:-"+s+'px; width:100%; height:100%; margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;" unselectable="on" />');
+f.children(":last").data("center",p._getCenter()).load(function(t){x<1?e(t.target).fadeTo(0,x):e(t.target).show();c.loadCount--;if(c.loadCount<=0){g.children(':not([data-pixelSize="'+d+'"])').remove();t=g.find('[data-pixelSize="'+d+'"]>div');if(t.size()>0){var A=t.position();t.children("img").each(function(){var B=e(this),C=A.left+parseInt(B.css("left")),y=A.top+parseInt(B.css("top"));B.css({left:C+"px",top:y+"px"})}).unwrap();t.remove()}c.loadCount=0}}).error(function(t){e(t.target).remove();c.loadCount--;
+if(c.loadCount<=0){g.children(":not([data-pixelSize='"+d+"'])").remove();c.loadCount=0}}).attr("src",b)}},resize:function(p,a){var c=e.data(a,"geoServiceState");if(c&&a&&(a.visibility===r||a.visibility==="visible")){this._cancelUnloaded(p,a);c=shingledServicesState[a.id];var b=c.serviceContainer,d=p._getContentBounds();c=d.width/2;d=d.height/2;b=b.children();b.attr("data-pixelSize","0");b.css({left:c+"px",top:d+"px"})}},opacity:function(p,a){e.data(a,"geoServiceState").serviceContainer.find("img").stop(true).fadeTo("fast",
+a.opacity)},toggle:function(p,a){e.data(a,"geoServiceState").serviceContainer.css("display",a.visibility==="visible"?"block":"none")},_cancelUnloaded:function(p,a){var c=e.data(a,"geoServiceState");if(c&&c.loadCount>0)for(c.serviceContainer.find("img:hidden").remove();c.loadCount>0;)c.loadCount--}}}()})(jQuery);
--- /dev/null
+// excanvas
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/*
+ * AppGeo/geo
+ * (c) 2007-2011, Applied Geographics, Inc. All rights reserved.
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+
+
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// Known Issues:
+//
+// * Patterns only support repeat.
+// * Radial gradient are not implemented. The VML version of these look very
+// different from the canvas one.
+// * Clipping paths are not implemented.
+// * Coordsize. The width and height attribute have higher priority than the
+// width and height style values which isn't correct.
+// * Painting mode isn't implemented.
+// * Canvas width/height should is using content-box by default. IE in
+// Quirks mode will draw the canvas using border-box. Either change your
+// doctype to HTML5
+// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
+// or use Box Sizing Behavior from WebFX
+// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
+// * Non uniform scaling does not correctly scale strokes.
+// * Optimize. There is always room for speed improvements.
+
+// Only add this code if we do not already have a canvas implementation
+if (!document.createElement('canvas').getContext) {
+
+ (function () {
+
+ // alias some functions to make (compiled) code shorter
+ var m = Math;
+ var mr = m.round;
+ var ms = m.sin;
+ var mc = m.cos;
+ var abs = m.abs;
+ var sqrt = m.sqrt;
+
+ // this is used for sub pixel precision
+ var Z = 10;
+ var Z2 = Z / 2;
+
+ var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
+
+ /**
+ * This funtion is assigned to the <canvas> elements as element.getContext().
+ * @this {HTMLElement}
+ * @return {CanvasRenderingContext2D_}
+ */
+ function getContext() {
+ return this.context_ ||
+ (this.context_ = new CanvasRenderingContext2D_(this));
+ }
+
+ var slice = Array.prototype.slice;
+
+ /**
+ * Binds a function to an object. The returned function will always use the
+ * passed in {@code obj} as {@code this}.
+ *
+ * Example:
+ *
+ * g = bind(f, obj, a, b)
+ * g(c, d) // will do f.call(obj, a, b, c, d)
+ *
+ * @param {Function} f The function to bind the object to
+ * @param {Object} obj The object that should act as this when the function
+ * is called
+ * @param {*} var_args Rest arguments that will be used as the initial
+ * arguments when the function is called
+ * @return {Function} A new function that has bound this
+ */
+ function bind(f, obj, var_args) {
+ var a = slice.call(arguments, 2);
+ return function () {
+ return f.apply(obj, a.concat(slice.call(arguments)));
+ };
+ }
+
+ function encodeHtmlAttribute(s) {
+ return String(s).replace(/&/g, '&').replace(/"/g, '"');
+ }
+
+ function addNamespace(doc, prefix, urn) {
+ if (!doc.namespaces[prefix]) {
+ doc.namespaces.add(prefix, urn, '#default#VML');
+ }
+ }
+
+ function addNamespacesAndStylesheet(doc) {
+ addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
+ addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
+
+ // Setup default CSS. Only add one style sheet per document
+ if (!doc.styleSheets['ex_canvas_']) {
+ var ss = doc.createStyleSheet();
+ ss.owningElement.id = 'ex_canvas_';
+ ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
+ // default size is 300x150 in Gecko and Opera
+ 'text-align:left;width:300px;height:150px}';
+ }
+ }
+
+ // Add namespaces and stylesheet at startup.
+ addNamespacesAndStylesheet(document);
+
+ var G_vmlCanvasManager_ = {
+ init: function (opt_doc) {
+ var doc = opt_doc || document;
+ // Create a dummy element so that IE will allow canvas elements to be
+ // recognized.
+ doc.createElement('canvas');
+ doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
+ },
+
+ init_: function (doc) {
+ // find all canvas elements
+ var els = doc.getElementsByTagName('canvas');
+ for (var i = 0; i < els.length; i++) {
+ this.initElement(els[i]);
+ }
+ },
+
+ /**
+ * Public initializes a canvas element so that it can be used as canvas
+ * element from now on. This is called automatically before the page is
+ * loaded but if you are creating elements using createElement you need to
+ * make sure this is called on the element.
+ * @param {HTMLElement} el The canvas element to initialize.
+ * @return {HTMLElement} the element that was created.
+ */
+ initElement: function (el) {
+ if (!el.getContext) {
+ el.getContext = getContext;
+
+ // Add namespaces and stylesheet to document of the element.
+ addNamespacesAndStylesheet(el.ownerDocument);
+
+ // Remove fallback content. There is no way to hide text nodes so we
+ // just remove all childNodes. We could hide all elements and remove
+ // text nodes but who really cares about the fallback content.
+ el.innerHTML = '';
+
+ // do not use inline function because that will leak memory
+ el.attachEvent('onpropertychange', onPropertyChange);
+ el.attachEvent('onresize', onResize);
+
+ var attrs = el.attributes;
+ if (attrs.width && attrs.width.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setWidth_(attrs.width.nodeValue);
+ el.style.width = attrs.width.nodeValue + 'px';
+ } else {
+ el.width = el.clientWidth;
+ }
+ if (attrs.height && attrs.height.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setHeight_(attrs.height.nodeValue);
+ el.style.height = attrs.height.nodeValue + 'px';
+ } else {
+ el.height = el.clientHeight;
+ }
+ //el.getContext().setCoordsize_()
+ }
+ return el;
+ }
+ };
+
+ function onPropertyChange(e) {
+ var el = e.srcElement;
+
+ switch (e.propertyName) {
+ case 'width':
+ el.getContext().clearRect();
+ el.style.width = el.attributes.width.nodeValue + 'px';
+ // In IE8 this does not trigger onresize.
+ el.firstChild.style.width = el.clientWidth + 'px';
+ break;
+ case 'height':
+ el.getContext().clearRect();
+ el.style.height = el.attributes.height.nodeValue + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ break;
+ }
+ }
+
+ function onResize(e) {
+ var el = e.srcElement;
+ if (el.firstChild) {
+ el.firstChild.style.width = el.clientWidth + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ }
+ }
+
+ G_vmlCanvasManager_.init();
+
+ // precompute "00" to "FF"
+ var decToHex = [];
+ for (var i = 0; i < 16; i++) {
+ for (var j = 0; j < 16; j++) {
+ decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
+ }
+ }
+
+ function createMatrixIdentity() {
+ return [
+ [1, 0, 0],
+ [0, 1, 0],
+ [0, 0, 1]
+ ];
+ }
+
+ function matrixMultiply(m1, m2) {
+ var result = createMatrixIdentity();
+
+ for (var x = 0; x < 3; x++) {
+ for (var y = 0; y < 3; y++) {
+ var sum = 0;
+
+ for (var z = 0; z < 3; z++) {
+ sum += m1[x][z] * m2[z][y];
+ }
+
+ result[x][y] = sum;
+ }
+ }
+ return result;
+ }
+
+ function copyState(o1, o2) {
+ o2.fillStyle = o1.fillStyle;
+ o2.lineCap = o1.lineCap;
+ o2.lineJoin = o1.lineJoin;
+ o2.lineWidth = o1.lineWidth;
+ o2.miterLimit = o1.miterLimit;
+ o2.shadowBlur = o1.shadowBlur;
+ o2.shadowColor = o1.shadowColor;
+ o2.shadowOffsetX = o1.shadowOffsetX;
+ o2.shadowOffsetY = o1.shadowOffsetY;
+ o2.strokeStyle = o1.strokeStyle;
+ o2.globalAlpha = o1.globalAlpha;
+ o2.font = o1.font;
+ o2.textAlign = o1.textAlign;
+ o2.textBaseline = o1.textBaseline;
+ o2.arcScaleX_ = o1.arcScaleX_;
+ o2.arcScaleY_ = o1.arcScaleY_;
+ o2.lineScale_ = o1.lineScale_;
+ }
+
+ // var colorData = {
+ // aliceblue: '#F0F8FF',
+ // antiquewhite: '#FAEBD7',
+ // aquamarine: '#7FFFD4',
+ // azure: '#F0FFFF',
+ // beige: '#F5F5DC',
+ // bisque: '#FFE4C4',
+ // black: '#000000',
+ // blanchedalmond: '#FFEBCD',
+ // blueviolet: '#8A2BE2',
+ // brown: '#A52A2A',
+ // burlywood: '#DEB887',
+ // cadetblue: '#5F9EA0',
+ // chartreuse: '#7FFF00',
+ // chocolate: '#D2691E',
+ // coral: '#FF7F50',
+ // cornflowerblue: '#6495ED',
+ // cornsilk: '#FFF8DC',
+ // crimson: '#DC143C',
+ // cyan: '#00FFFF',
+ // darkblue: '#00008B',
+ // darkcyan: '#008B8B',
+ // darkgoldenrod: '#B8860B',
+ // darkgray: '#A9A9A9',
+ // darkgreen: '#006400',
+ // darkgrey: '#A9A9A9',
+ // darkkhaki: '#BDB76B',
+ // darkmagenta: '#8B008B',
+ // darkolivegreen: '#556B2F',
+ // darkorange: '#FF8C00',
+ // darkorchid: '#9932CC',
+ // darkred: '#8B0000',
+ // darksalmon: '#E9967A',
+ // darkseagreen: '#8FBC8F',
+ // darkslateblue: '#483D8B',
+ // darkslategray: '#2F4F4F',
+ // darkslategrey: '#2F4F4F',
+ // darkturquoise: '#00CED1',
+ // darkviolet: '#9400D3',
+ // deeppink: '#FF1493',
+ // deepskyblue: '#00BFFF',
+ // dimgray: '#696969',
+ // dimgrey: '#696969',
+ // dodgerblue: '#1E90FF',
+ // firebrick: '#B22222',
+ // floralwhite: '#FFFAF0',
+ // forestgreen: '#228B22',
+ // gainsboro: '#DCDCDC',
+ // ghostwhite: '#F8F8FF',
+ // gold: '#FFD700',
+ // goldenrod: '#DAA520',
+ // grey: '#808080',
+ // greenyellow: '#ADFF2F',
+ // honeydew: '#F0FFF0',
+ // hotpink: '#FF69B4',
+ // indianred: '#CD5C5C',
+ // indigo: '#4B0082',
+ // ivory: '#FFFFF0',
+ // khaki: '#F0E68C',
+ // lavender: '#E6E6FA',
+ // lavenderblush: '#FFF0F5',
+ // lawngreen: '#7CFC00',
+ // lemonchiffon: '#FFFACD',
+ // lightblue: '#ADD8E6',
+ // lightcoral: '#F08080',
+ // lightcyan: '#E0FFFF',
+ // lightgoldenrodyellow: '#FAFAD2',
+ // lightgreen: '#90EE90',
+ // lightgrey: '#D3D3D3',
+ // lightpink: '#FFB6C1',
+ // lightsalmon: '#FFA07A',
+ // lightseagreen: '#20B2AA',
+ // lightskyblue: '#87CEFA',
+ // lightslategray: '#778899',
+ // lightslategrey: '#778899',
+ // lightsteelblue: '#B0C4DE',
+ // lightyellow: '#FFFFE0',
+ // limegreen: '#32CD32',
+ // linen: '#FAF0E6',
+ // magenta: '#FF00FF',
+ // mediumaquamarine: '#66CDAA',
+ // mediumblue: '#0000CD',
+ // mediumorchid: '#BA55D3',
+ // mediumpurple: '#9370DB',
+ // mediumseagreen: '#3CB371',
+ // mediumslateblue: '#7B68EE',
+ // mediumspringgreen: '#00FA9A',
+ // mediumturquoise: '#48D1CC',
+ // mediumvioletred: '#C71585',
+ // midnightblue: '#191970',
+ // mintcream: '#F5FFFA',
+ // mistyrose: '#FFE4E1',
+ // moccasin: '#FFE4B5',
+ // navajowhite: '#FFDEAD',
+ // oldlace: '#FDF5E6',
+ // olivedrab: '#6B8E23',
+ // orange: '#FFA500',
+ // orangered: '#FF4500',
+ // orchid: '#DA70D6',
+ // palegoldenrod: '#EEE8AA',
+ // palegreen: '#98FB98',
+ // paleturquoise: '#AFEEEE',
+ // palevioletred: '#DB7093',
+ // papayawhip: '#FFEFD5',
+ // peachpuff: '#FFDAB9',
+ // peru: '#CD853F',
+ // pink: '#FFC0CB',
+ // plum: '#DDA0DD',
+ // powderblue: '#B0E0E6',
+ // rosybrown: '#BC8F8F',
+ // royalblue: '#4169E1',
+ // saddlebrown: '#8B4513',
+ // salmon: '#FA8072',
+ // sandybrown: '#F4A460',
+ // seagreen: '#2E8B57',
+ // seashell: '#FFF5EE',
+ // sienna: '#A0522D',
+ // skyblue: '#87CEEB',
+ // slateblue: '#6A5ACD',
+ // slategray: '#708090',
+ // slategrey: '#708090',
+ // snow: '#FFFAFA',
+ // springgreen: '#00FF7F',
+ // steelblue: '#4682B4',
+ // tan: '#D2B48C',
+ // thistle: '#D8BFD8',
+ // tomato: '#FF6347',
+ // turquoise: '#40E0D0',
+ // violet: '#EE82EE',
+ // wheat: '#F5DEB3',
+ // whitesmoke: '#F5F5F5',
+ // yellowgreen: '#9ACD32'
+ // };
+
+
+ function getRgbHslContent(styleString) {
+ var start = styleString.indexOf('(', 3);
+ var end = styleString.indexOf(')', start + 1);
+ var parts = styleString.substring(start + 1, end).split(',');
+ // add alpha if needed
+ if (parts.length != 4 || styleString.charAt(3) != 'a') {
+ parts[3] = 1;
+ }
+ return parts;
+ }
+
+ function percent(s) {
+ return parseFloat(s) / 100;
+ }
+
+ function clamp(v, min, max) {
+ return Math.min(max, Math.max(min, v));
+ }
+
+ function hslToRgb(parts) {
+ var r, g, b, h, s, l;
+ h = parseFloat(parts[0]) / 360 % 360;
+ if (h < 0)
+ h++;
+ s = clamp(percent(parts[1]), 0, 1);
+ l = clamp(percent(parts[2]), 0, 1);
+ if (s == 0) {
+ r = g = b = l; // achromatic
+ } else {
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ var p = 2 * l - q;
+ r = hueToRgb(p, q, h + 1 / 3);
+ g = hueToRgb(p, q, h);
+ b = hueToRgb(p, q, h - 1 / 3);
+ }
+
+ return '#' + decToHex[Math.floor(r * 255)] +
+ decToHex[Math.floor(g * 255)] +
+ decToHex[Math.floor(b * 255)];
+ }
+
+ function hueToRgb(m1, m2, h) {
+ if (h < 0)
+ h++;
+ if (h > 1)
+ h--;
+
+ if (6 * h < 1)
+ return m1 + (m2 - m1) * 6 * h;
+ else if (2 * h < 1)
+ return m2;
+ else if (3 * h < 2)
+ return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+ else
+ return m1;
+ }
+
+ var processStyleCache = {};
+
+ function processStyle(styleString) {
+ if (styleString in processStyleCache) {
+ return processStyleCache[styleString];
+ }
+
+ var str, alpha = 1;
+
+ styleString = String(styleString);
+ if (styleString.charAt(0) == '#') {
+ str = styleString;
+ } else if (/^rgb/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ var str = '#', n;
+ for (var i = 0; i < 3; i++) {
+ if (parts[i].indexOf('%') != -1) {
+ n = Math.floor(percent(parts[i]) * 255);
+ } else {
+ n = +parts[i];
+ }
+ str += decToHex[clamp(n, 0, 255)];
+ }
+ alpha = +parts[3];
+ } else if (/^hsl/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ str = hslToRgb(parts);
+ alpha = parts[3];
+ } else {
+ str = /*colorData[styleString] ||*/styleString;
+ }
+ return processStyleCache[styleString] = { color: str, alpha: alpha };
+ }
+
+ var DEFAULT_STYLE = {
+ style: 'normal',
+ variant: 'normal',
+ weight: 'normal',
+ size: 10,
+ family: 'sans-serif'
+ };
+
+ // Internal text style cache
+ // var fontStyleCache = {};
+
+ // function processFontStyle(styleString) {
+ // if (fontStyleCache[styleString]) {
+ // return fontStyleCache[styleString];
+ // }
+
+ // var el = document.createElement('div');
+ // var style = el.style;
+ // try {
+ // style.font = styleString;
+ // } catch (ex) {
+ // // Ignore failures to set to invalid font.
+ // }
+
+ // return fontStyleCache[styleString] = {
+ // style: style.fontStyle || DEFAULT_STYLE.style,
+ // variant: style.fontVariant || DEFAULT_STYLE.variant,
+ // weight: style.fontWeight || DEFAULT_STYLE.weight,
+ // size: style.fontSize || DEFAULT_STYLE.size,
+ // family: style.fontFamily || DEFAULT_STYLE.family
+ // };
+ // }
+
+ // function getComputedStyle(style, element) {
+ // var computedStyle = {};
+
+ // for (var p in style) {
+ // computedStyle[p] = style[p];
+ // }
+
+ // // Compute the size
+ // var canvasFontSize = parseFloat(element.currentStyle.fontSize),
+ // fontSize = parseFloat(style.size);
+
+ // if (typeof style.size == 'number') {
+ // computedStyle.size = style.size;
+ // } else if (style.size.indexOf('px') != -1) {
+ // computedStyle.size = fontSize;
+ // } else if (style.size.indexOf('em') != -1) {
+ // computedStyle.size = canvasFontSize * fontSize;
+ // } else if(style.size.indexOf('%') != -1) {
+ // computedStyle.size = (canvasFontSize / 100) * fontSize;
+ // } else if (style.size.indexOf('pt') != -1) {
+ // computedStyle.size = fontSize / .75;
+ // } else {
+ // computedStyle.size = canvasFontSize;
+ // }
+
+ // // Different scaling between normal text and VML text. This was found using
+ // // trial and error to get the same size as non VML text.
+ // computedStyle.size *= 0.981;
+
+ // return computedStyle;
+ // }
+
+ // function buildStyle(style) {
+ // return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
+ // style.size + 'px ' + style.family;
+ // }
+
+ var lineCapMap = {
+ 'butt': 'flat',
+ 'round': 'round'
+ };
+
+ function processLineCap(lineCap) {
+ return lineCapMap[lineCap] || 'square';
+ }
+
+ /**
+ * This class implements CanvasRenderingContext2D interface as described by
+ * the WHATWG.
+ * @param {HTMLElement} canvasElement The element that the 2D context should
+ * be associated with
+ */
+ function CanvasRenderingContext2D_(canvasElement) {
+ this.m_ = createMatrixIdentity();
+
+ this.mStack_ = [];
+ this.aStack_ = [];
+ this.currentPath_ = [];
+
+ // Canvas context properties
+ this.strokeStyle = '#000';
+ this.fillStyle = '#000';
+
+ this.lineWidth = 1;
+ this.lineJoin = 'miter';
+ this.lineCap = 'butt';
+ this.miterLimit = Z * 1;
+ this.globalAlpha = 1;
+ //this.font = '10px sans-serif';
+ //this.textAlign = 'left';
+ //this.textBaseline = 'alphabetic';
+ this.canvas = canvasElement;
+
+ var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
+ canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
+ var el = canvasElement.ownerDocument.createElement('div');
+ el.style.cssText = cssText;
+ canvasElement.appendChild(el);
+
+ var overlayEl = el.cloneNode(false);
+ // Use a non transparent background.
+ overlayEl.style.backgroundColor = 'red';
+ overlayEl.style.filter = 'alpha(opacity=0)';
+ canvasElement.appendChild(overlayEl);
+
+ this.element_ = el;
+ this.arcScaleX_ = 1;
+ this.arcScaleY_ = 1;
+ this.lineScale_ = 1;
+ }
+
+ var contextPrototype = CanvasRenderingContext2D_.prototype;
+ contextPrototype.clearRect = function () {
+ if (this.textMeasureEl_) {
+ this.textMeasureEl_.removeNode(true);
+ this.textMeasureEl_ = null;
+ }
+ this.element_.innerHTML = '';
+ };
+
+ contextPrototype.beginPath = function () {
+ // TODO: Branch current matrix so that save/restore has no effect
+ // as per safari docs.
+ this.currentPath_ = [];
+ };
+
+ contextPrototype.moveTo = function (aX, aY) {
+ var p = getCoords(this, aX, aY);
+ this.currentPath_.push({ type: 'moveTo', x: p.x, y: p.y });
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
+ };
+
+ contextPrototype.lineTo = function (aX, aY) {
+ var p = getCoords(this, aX, aY);
+ this.currentPath_.push({ type: 'lineTo', x: p.x, y: p.y });
+
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
+ };
+
+ contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
+ aCP2x, aCP2y,
+ aX, aY) {
+ var p = getCoords(this, aX, aY);
+ var cp1 = getCoords(this, aCP1x, aCP1y);
+ var cp2 = getCoords(this, aCP2x, aCP2y);
+ bezierCurveTo(this, cp1, cp2, p);
+ };
+
+ // Helper function that takes the already fixed cordinates.
+ function bezierCurveTo(self, cp1, cp2, p) {
+ self.currentPath_.push({
+ type: 'bezierCurveTo',
+ cp1x: cp1.x,
+ cp1y: cp1.y,
+ cp2x: cp2.x,
+ cp2y: cp2.y,
+ x: p.x,
+ y: p.y
+ });
+ self.currentX_ = p.x;
+ self.currentY_ = p.y;
+ }
+
+ contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
+ // the following is lifted almost directly from
+ // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
+
+ var cp = getCoords(this, aCPx, aCPy);
+ var p = getCoords(this, aX, aY);
+
+ var cp1 = {
+ x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
+ y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
+ };
+ var cp2 = {
+ x: cp1.x + (p.x - this.currentX_) / 3.0,
+ y: cp1.y + (p.y - this.currentY_) / 3.0
+ };
+
+ bezierCurveTo(this, cp1, cp2, p);
+ };
+
+ contextPrototype.arc = function (aX, aY, aRadius,
+ aStartAngle, aEndAngle, aClockwise) {
+ aRadius *= Z;
+ var arcType = aClockwise ? 'at' : 'wa';
+
+ var xStart = aX + mc(aStartAngle) * aRadius - Z2;
+ var yStart = aY + ms(aStartAngle) * aRadius - Z2;
+
+ var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
+ var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
+
+ // IE won't render arches drawn counter clockwise if xStart == xEnd.
+ if (xStart == xEnd && !aClockwise) {
+ xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
+ // that can be represented in binary
+ }
+
+ var p = getCoords(this, aX, aY);
+ var pStart = getCoords(this, xStart, yStart);
+ var pEnd = getCoords(this, xEnd, yEnd);
+
+ this.currentPath_.push({ type: arcType,
+ x: p.x,
+ y: p.y,
+ radius: aRadius,
+ xStart: pStart.x,
+ yStart: pStart.y,
+ xEnd: pEnd.x,
+ yEnd: pEnd.y
+ });
+
+ };
+
+ // contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // };
+
+ // contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
+ // var oldPath = this.currentPath_;
+ // this.beginPath();
+
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // this.stroke();
+
+ // this.currentPath_ = oldPath;
+ // };
+
+ // contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
+ // var oldPath = this.currentPath_;
+ // this.beginPath();
+
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // this.fill();
+
+ // this.currentPath_ = oldPath;
+ // };
+
+ // contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
+ // var gradient = new CanvasGradient_('gradient');
+ // gradient.x0_ = aX0;
+ // gradient.y0_ = aY0;
+ // gradient.x1_ = aX1;
+ // gradient.y1_ = aY1;
+ // return gradient;
+ // };
+
+ // contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
+ // aX1, aY1, aR1) {
+ // var gradient = new CanvasGradient_('gradientradial');
+ // gradient.x0_ = aX0;
+ // gradient.y0_ = aY0;
+ // gradient.r0_ = aR0;
+ // gradient.x1_ = aX1;
+ // gradient.y1_ = aY1;
+ // gradient.r1_ = aR1;
+ // return gradient;
+ // };
+
+ // contextPrototype.drawImage = function(image, var_args) {
+ // var dx, dy, dw, dh, sx, sy, sw, sh;
+
+ // // to find the original width we overide the width and height
+ // var oldRuntimeWidth = image.runtimeStyle.width;
+ // var oldRuntimeHeight = image.runtimeStyle.height;
+ // image.runtimeStyle.width = 'auto';
+ // image.runtimeStyle.height = 'auto';
+
+ // // get the original size
+ // var w = image.width;
+ // var h = image.height;
+
+ // // and remove overides
+ // image.runtimeStyle.width = oldRuntimeWidth;
+ // image.runtimeStyle.height = oldRuntimeHeight;
+
+ // if (arguments.length == 3) {
+ // dx = arguments[1];
+ // dy = arguments[2];
+ // sx = sy = 0;
+ // sw = dw = w;
+ // sh = dh = h;
+ // } else if (arguments.length == 5) {
+ // dx = arguments[1];
+ // dy = arguments[2];
+ // dw = arguments[3];
+ // dh = arguments[4];
+ // sx = sy = 0;
+ // sw = w;
+ // sh = h;
+ // } else if (arguments.length == 9) {
+ // sx = arguments[1];
+ // sy = arguments[2];
+ // sw = arguments[3];
+ // sh = arguments[4];
+ // dx = arguments[5];
+ // dy = arguments[6];
+ // dw = arguments[7];
+ // dh = arguments[8];
+ // } else {
+ // throw Error('Invalid number of arguments');
+ // }
+
+ // var d = getCoords(this, dx, dy);
+
+ // var w2 = sw / 2;
+ // var h2 = sh / 2;
+
+ // var vmlStr = [];
+
+ // var W = 10;
+ // var H = 10;
+
+ // // For some reason that I've now forgotten, using divs didn't work
+ // vmlStr.push(' <g_vml_:group',
+ // ' coordsize="', Z * W, ',', Z * H, '"',
+ // ' coordorigin="0,0"' ,
+ // ' style="width:', W, 'px;height:', H, 'px;position:absolute;');
+
+ // // If filters are necessary (rotation exists), create them
+ // // filters are bog-slow, so only create them if abbsolutely necessary
+ // // The following check doesn't account for skews (which don't exist
+ // // in the canvas spec (yet) anyway.
+
+ // if (this.m_[0][0] != 1 || this.m_[0][1] ||
+ // this.m_[1][1] != 1 || this.m_[1][0]) {
+ // var filter = [];
+
+ // // Note the 12/21 reversal
+ // filter.push('M11=', this.m_[0][0], ',',
+ // 'M12=', this.m_[1][0], ',',
+ // 'M21=', this.m_[0][1], ',',
+ // 'M22=', this.m_[1][1], ',',
+ // 'Dx=', mr(d.x / Z), ',',
+ // 'Dy=', mr(d.y / Z), '');
+
+ // // Bounding box calculation (need to minimize displayed area so that
+ // // filters don't waste time on unused pixels.
+ // var max = d;
+ // var c2 = getCoords(this, dx + dw, dy);
+ // var c3 = getCoords(this, dx, dy + dh);
+ // var c4 = getCoords(this, dx + dw, dy + dh);
+
+ // max.x = m.max(max.x, c2.x, c3.x, c4.x);
+ // max.y = m.max(max.y, c2.y, c3.y, c4.y);
+
+ // vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
+ // 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
+ // filter.join(''), ", sizingmethod='clip');");
+
+ // } else {
+ // vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
+ // }
+
+ // vmlStr.push(' ">' ,
+ // '<g_vml_:image src="', image.src, '"',
+ // ' style="width:', Z * dw, 'px;',
+ // ' height:', Z * dh, 'px"',
+ // ' cropleft="', sx / w, '"',
+ // ' croptop="', sy / h, '"',
+ // ' cropright="', (w - sx - sw) / w, '"',
+ // ' cropbottom="', (h - sy - sh) / h, '"',
+ // ' />',
+ // '</g_vml_:group>');
+
+ // this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
+ // };
+
+ contextPrototype.stroke = function (aFill) {
+ var lineStr = [];
+ var lineOpen = false;
+
+ var W = 10;
+ var H = 10;
+
+ lineStr.push('<g_vml_:shape',
+ ' filled="', !!aFill, '"',
+ ' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
+ ' coordorigin="0,0"',
+ ' coordsize="', Z * W, ',', Z * H, '"',
+ ' stroked="', !aFill, '"',
+ ' path="');
+
+ var newSeq = false;
+ var min = { x: null, y: null };
+ var max = { x: null, y: null };
+
+ for (var i = 0; i < this.currentPath_.length; i++) {
+ var p = this.currentPath_[i];
+ var c;
+
+ switch (p.type) {
+ case 'moveTo':
+ c = p;
+ lineStr.push(' m ', mr(p.x), ',', mr(p.y));
+ break;
+ case 'lineTo':
+ lineStr.push(' l ', mr(p.x), ',', mr(p.y));
+ break;
+ case 'close':
+ lineStr.push(' x ');
+ p = null;
+ break;
+ case 'bezierCurveTo':
+ lineStr.push(' c ',
+ mr(p.cp1x), ',', mr(p.cp1y), ',',
+ mr(p.cp2x), ',', mr(p.cp2y), ',',
+ mr(p.x), ',', mr(p.y));
+ break;
+ case 'at':
+ case 'wa':
+ lineStr.push(' ', p.type, ' ',
+ mr(p.x - this.arcScaleX_ * p.radius), ',',
+ mr(p.y - this.arcScaleY_ * p.radius), ' ',
+ mr(p.x + this.arcScaleX_ * p.radius), ',',
+ mr(p.y + this.arcScaleY_ * p.radius), ' ',
+ mr(p.xStart), ',', mr(p.yStart), ' ',
+ mr(p.xEnd), ',', mr(p.yEnd));
+ break;
+ }
+
+
+ // TODO: Following is broken for curves due to
+ // move to proper paths.
+
+ // Figure out dimensions so we can do gradient fills
+ // properly
+ if (p) {
+ if (min.x == null || p.x < min.x) {
+ min.x = p.x;
+ }
+ if (max.x == null || p.x > max.x) {
+ max.x = p.x;
+ }
+ if (min.y == null || p.y < min.y) {
+ min.y = p.y;
+ }
+ if (max.y == null || p.y > max.y) {
+ max.y = p.y;
+ }
+ }
+ }
+ lineStr.push(' ">');
+
+ if (!aFill) {
+ appendStroke(this, lineStr);
+ } else {
+ appendFill(this, lineStr, min, max);
+ }
+
+ lineStr.push('</g_vml_:shape>');
+
+ this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ };
+
+ function appendStroke(ctx, lineStr) {
+ var a = processStyle(ctx.strokeStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
+ var lineWidth = ctx.lineScale_ * ctx.lineWidth;
+
+ // VML cannot correctly render a line if the width is less than 1px.
+ // In that case, we dilute the color to make the line look thinner.
+ if (lineWidth < 1) {
+ opacity *= lineWidth;
+ }
+
+ lineStr.push(
+ '<g_vml_:stroke',
+ ' opacity="', opacity, '"',
+ ' joinstyle="', ctx.lineJoin, '"',
+ ' miterlimit="', ctx.miterLimit, '"',
+ ' endcap="', processLineCap(ctx.lineCap), '"',
+ ' weight="', lineWidth, 'px"',
+ ' color="', color, '" />'
+ );
+ }
+
+ function appendFill(ctx, lineStr, min, max) {
+ var fillStyle = ctx.fillStyle;
+ var arcScaleX = ctx.arcScaleX_;
+ var arcScaleY = ctx.arcScaleY_;
+ var width = max.x - min.x;
+ var height = max.y - min.y;
+ // if (fillStyle instanceof CanvasGradient_) {
+ // // TODO: Gradients transformed with the transformation matrix.
+ // var angle = 0;
+ // var focus = {x: 0, y: 0};
+
+ // // additional offset
+ // var shift = 0;
+ // // scale factor for offset
+ // var expansion = 1;
+
+ // if (fillStyle.type_ == 'gradient') {
+ // var x0 = fillStyle.x0_ / arcScaleX;
+ // var y0 = fillStyle.y0_ / arcScaleY;
+ // var x1 = fillStyle.x1_ / arcScaleX;
+ // var y1 = fillStyle.y1_ / arcScaleY;
+ // var p0 = getCoords(ctx, x0, y0);
+ // var p1 = getCoords(ctx, x1, y1);
+ // var dx = p1.x - p0.x;
+ // var dy = p1.y - p0.y;
+ // angle = Math.atan2(dx, dy) * 180 / Math.PI;
+
+ // // The angle should be a non-negative number.
+ // if (angle < 0) {
+ // angle += 360;
+ // }
+
+ // // Very small angles produce an unexpected result because they are
+ // // converted to a scientific notation string.
+ // if (angle < 1e-6) {
+ // angle = 0;
+ // }
+ // } else {
+ // var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
+ // focus = {
+ // x: (p0.x - min.x) / width,
+ // y: (p0.y - min.y) / height
+ // };
+
+ // width /= arcScaleX * Z;
+ // height /= arcScaleY * Z;
+ // var dimension = m.max(width, height);
+ // shift = 2 * fillStyle.r0_ / dimension;
+ // expansion = 2 * fillStyle.r1_ / dimension - shift;
+ // }
+
+ // // We need to sort the color stops in ascending order by offset,
+ // // otherwise IE won't interpret it correctly.
+ // var stops = fillStyle.colors_;
+ // stops.sort(function(cs1, cs2) {
+ // return cs1.offset - cs2.offset;
+ // });
+
+ // var length = stops.length;
+ // var color1 = stops[0].color;
+ // var color2 = stops[length - 1].color;
+ // var opacity1 = stops[0].alpha * ctx.globalAlpha;
+ // var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
+
+ // var colors = [];
+ // for (var i = 0; i < length; i++) {
+ // var stop = stops[i];
+ // colors.push(stop.offset * expansion + shift + ' ' + stop.color);
+ // }
+
+ // // When colors attribute is used, the meanings of opacity and o:opacity2
+ // // are reversed.
+ // lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
+ // ' method="none" focus="100%"',
+ // ' color="', color1, '"',
+ // ' color2="', color2, '"',
+ // ' colors="', colors.join(','), '"',
+ // ' opacity="', opacity2, '"',
+ // ' g_o_:opacity2="', opacity1, '"',
+ // ' angle="', angle, '"',
+ // ' focusposition="', focus.x, ',', focus.y, '" />');
+ // } else if (fillStyle instanceof CanvasPattern_) {
+ // if (width && height) {
+ // var deltaLeft = -min.x;
+ // var deltaTop = -min.y;
+ // lineStr.push('<g_vml_:fill',
+ // ' position="',
+ // deltaLeft / width * arcScaleX * arcScaleX, ',',
+ // deltaTop / height * arcScaleY * arcScaleY, '"',
+ // ' type="tile"',
+ // // TODO: Figure out the correct size to fit the scale.
+ // //' size="', w, 'px ', h, 'px"',
+ // ' src="', fillStyle.src_, '" />');
+ // }
+ // } else {
+ var a = processStyle(ctx.fillStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
+ lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
+ '" />');
+ // }
+ }
+
+ contextPrototype.fill = function () {
+ this.stroke(true);
+ };
+
+ contextPrototype.closePath = function () {
+ this.currentPath_.push({ type: 'close' });
+ };
+
+ function getCoords(ctx, aX, aY) {
+ var m = ctx.m_;
+ return {
+ x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
+ y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
+ };
+ };
+
+ contextPrototype.save = function () {
+ var o = {};
+ copyState(this, o);
+ this.aStack_.push(o);
+ this.mStack_.push(this.m_);
+ this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
+ };
+
+ contextPrototype.restore = function () {
+ if (this.aStack_.length) {
+ copyState(this.aStack_.pop(), this);
+ this.m_ = this.mStack_.pop();
+ }
+ };
+
+ function matrixIsFinite(m) {
+ return isFinite(m[0][0]) && isFinite(m[0][1]) &&
+ isFinite(m[1][0]) && isFinite(m[1][1]) &&
+ isFinite(m[2][0]) && isFinite(m[2][1]);
+ }
+
+ function setM(ctx, m, updateLineScale) {
+ if (!matrixIsFinite(m)) {
+ return;
+ }
+ ctx.m_ = m;
+
+ if (updateLineScale) {
+ // Get the line scale.
+ // Determinant of this.m_ means how much the area is enlarged by the
+ // transformation. So its square root can be used as a scale factor
+ // for width.
+ var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
+ ctx.lineScale_ = sqrt(abs(det));
+ }
+ }
+
+ contextPrototype.translate = function (aX, aY) {
+ var m1 = [
+ [1, 0, 0],
+ [0, 1, 0],
+ [aX, aY, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), false);
+ };
+
+ // contextPrototype.rotate = function(aRot) {
+ // var c = mc(aRot);
+ // var s = ms(aRot);
+
+ // var m1 = [
+ // [c, s, 0],
+ // [-s, c, 0],
+ // [0, 0, 1]
+ // ];
+
+ // setM(this, matrixMultiply(m1, this.m_), false);
+ // };
+
+ contextPrototype.scale = function (aX, aY) {
+ this.arcScaleX_ *= aX;
+ this.arcScaleY_ *= aY;
+ var m1 = [
+ [aX, 0, 0],
+ [0, aY, 0],
+ [0, 0, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), true);
+ };
+
+ // contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
+ // var m1 = [
+ // [m11, m12, 0],
+ // [m21, m22, 0],
+ // [dx, dy, 1]
+ // ];
+
+ // setM(this, matrixMultiply(m1, this.m_), true);
+ // };
+
+ // contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
+ // var m = [
+ // [m11, m12, 0],
+ // [m21, m22, 0],
+ // [dx, dy, 1]
+ // ];
+
+ // setM(this, m, true);
+ // };
+
+ /**
+ * The text drawing function.
+ * The maxWidth argument isn't taken in account, since no browser supports
+ * it yet.
+ */
+ // contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
+ // var m = this.m_,
+ // delta = 1000,
+ // left = 0,
+ // right = delta,
+ // offset = {x: 0, y: 0},
+ // lineStr = [];
+
+ // var fontStyle = getComputedStyle(processFontStyle(this.font),
+ // this.element_);
+
+ // var fontStyleString = buildStyle(fontStyle);
+
+ // var elementStyle = this.element_.currentStyle;
+ // var textAlign = this.textAlign.toLowerCase();
+ // switch (textAlign) {
+ // case 'left':
+ // case 'center':
+ // case 'right':
+ // break;
+ // case 'end':
+ // textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
+ // break;
+ // case 'start':
+ // textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
+ // break;
+ // default:
+ // textAlign = 'left';
+ // }
+
+ // // 1.75 is an arbitrary number, as there is no info about the text baseline
+ // switch (this.textBaseline) {
+ // case 'hanging':
+ // case 'top':
+ // offset.y = fontStyle.size / 1.75;
+ // break;
+ // case 'middle':
+ // break;
+ // default:
+ // case null:
+ // case 'alphabetic':
+ // case 'ideographic':
+ // case 'bottom':
+ // offset.y = -fontStyle.size / 2.25;
+ // break;
+ // }
+
+ // switch(textAlign) {
+ // case 'right':
+ // left = delta;
+ // right = 0.05;
+ // break;
+ // case 'center':
+ // left = right = delta / 2;
+ // break;
+ // }
+
+ // var d = getCoords(this, x + offset.x, y + offset.y);
+
+ // lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
+ // ' coordsize="100 100" coordorigin="0 0"',
+ // ' filled="', !stroke, '" stroked="', !!stroke,
+ // '" style="position:absolute;width:1px;height:1px;">');
+
+ // if (stroke) {
+ // appendStroke(this, lineStr);
+ // } else {
+ // // TODO: Fix the min and max params.
+ // appendFill(this, lineStr, {x: -left, y: 0},
+ // {x: right, y: fontStyle.size});
+ // }
+
+ // var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
+ // m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
+
+ // var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
+
+ // lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
+ // ' offset="', skewOffset, '" origin="', left ,' 0" />',
+ // '<g_vml_:path textpathok="true" />',
+ // '<g_vml_:textpath on="true" string="',
+ // encodeHtmlAttribute(text),
+ // '" style="v-text-align:', textAlign,
+ // ';font:', encodeHtmlAttribute(fontStyleString),
+ // '" /></g_vml_:line>');
+
+ // this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ // };
+
+ // contextPrototype.fillText = function(text, x, y, maxWidth) {
+ // this.drawText_(text, x, y, maxWidth, false);
+ // };
+
+ // contextPrototype.strokeText = function(text, x, y, maxWidth) {
+ // this.drawText_(text, x, y, maxWidth, true);
+ // };
+
+ // contextPrototype.measureText = function(text) {
+ // if (!this.textMeasureEl_) {
+ // var s = '<span style="position:absolute;' +
+ // 'top:-20000px;left:0;padding:0;margin:0;border:none;' +
+ // 'white-space:pre;"></span>';
+ // this.element_.insertAdjacentHTML('beforeEnd', s);
+ // this.textMeasureEl_ = this.element_.lastChild;
+ // }
+ // var doc = this.element_.ownerDocument;
+ // this.textMeasureEl_.innerHTML = '';
+ // this.textMeasureEl_.style.font = this.font;
+ // // Don't use innerHTML or innerText because they allow markup/whitespace.
+ // this.textMeasureEl_.appendChild(doc.createTextNode(text));
+ // return {width: this.textMeasureEl_.offsetWidth};
+ // };
+
+ /******** STUBS ********/
+ // contextPrototype.clip = function() {
+ // // TODO: Implement
+ // };
+
+ // contextPrototype.arcTo = function() {
+ // // TODO: Implement
+ // };
+
+ // contextPrototype.createPattern = function(image, repetition) {
+ // return new CanvasPattern_(image, repetition);
+ // };
+
+ // // Gradient / Pattern Stubs
+ // function CanvasGradient_(aType) {
+ // this.type_ = aType;
+ // this.x0_ = 0;
+ // this.y0_ = 0;
+ // this.r0_ = 0;
+ // this.x1_ = 0;
+ // this.y1_ = 0;
+ // this.r1_ = 0;
+ // this.colors_ = [];
+ // }
+
+ // CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
+ // aColor = processStyle(aColor);
+ // this.colors_.push({offset: aOffset,
+ // color: aColor.color,
+ // alpha: aColor.alpha});
+ // };
+
+ // function CanvasPattern_(image, repetition) {
+ // assertImageIsValid(image);
+ // switch (repetition) {
+ // case 'repeat':
+ // case null:
+ // case '':
+ // this.repetition_ = 'repeat';
+ // break
+ // case 'repeat-x':
+ // case 'repeat-y':
+ // case 'no-repeat':
+ // this.repetition_ = repetition;
+ // break;
+ // default:
+ // throwException('SYNTAX_ERR');
+ // }
+
+ // this.src_ = image.src;
+ // this.width_ = image.width;
+ // this.height_ = image.height;
+ // }
+
+ function throwException(s) {
+ throw new DOMException_(s);
+ }
+
+ // function assertImageIsValid(img) {
+ // if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
+ // throwException('TYPE_MISMATCH_ERR');
+ // }
+ // if (img.readyState != 'complete') {
+ // throwException('INVALID_STATE_ERR');
+ // }
+ // }
+
+ function DOMException_(s) {
+ this.code = this[s];
+ this.message = s + ': DOM Exception ' + this.code;
+ }
+ var p = DOMException_.prototype = new Error;
+ p.INDEX_SIZE_ERR = 1;
+ p.DOMSTRING_SIZE_ERR = 2;
+ p.HIERARCHY_REQUEST_ERR = 3;
+ p.WRONG_DOCUMENT_ERR = 4;
+ p.INVALID_CHARACTER_ERR = 5;
+ p.NO_DATA_ALLOWED_ERR = 6;
+ p.NO_MODIFICATION_ALLOWED_ERR = 7;
+ p.NOT_FOUND_ERR = 8;
+ p.NOT_SUPPORTED_ERR = 9;
+ p.INUSE_ATTRIBUTE_ERR = 10;
+ p.INVALID_STATE_ERR = 11;
+ p.SYNTAX_ERR = 12;
+ p.INVALID_MODIFICATION_ERR = 13;
+ p.NAMESPACE_ERR = 14;
+ p.INVALID_ACCESS_ERR = 15;
+ p.VALIDATION_ERR = 16;
+ p.TYPE_MISMATCH_ERR = 17;
+
+ // set up externs
+ G_vmlCanvasManager = G_vmlCanvasManager_;
+ CanvasRenderingContext2D = CanvasRenderingContext2D_;
+ //CanvasGradient = CanvasGradient_;
+ //CanvasPattern = CanvasPattern_;
+ DOMException = DOMException_;
+ })();
+
+} // if
+/*!
+ * jQuery UI Widget @VERSION
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Widget
+ */
+
+if ( ! $.widget ) {
+
+(function( $, undefined ) {
+
+// jQuery 1.4+
+if ( $.cleanData ) {
+ var _cleanData = $.cleanData;
+ $.cleanData = function( elems ) {
+ for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
+ try {
+ $( elem ).triggerHandler( "remove" );
+ // http://bugs.jquery.com/ticket/8235
+ } catch( e ) {}
+ }
+ _cleanData( elems );
+ };
+} else {
+ var _remove = $.fn.remove;
+ $.fn.remove = function( selector, keepData ) {
+ return this.each(function() {
+ if ( !keepData ) {
+ if ( !selector || $.filter( selector, [ this ] ).length ) {
+ $( "*", this ).add( [ this ] ).each(function() {
+ try {
+ $( this ).triggerHandler( "remove" );
+ // http://bugs.jquery.com/ticket/8235
+ } catch( e ) {}
+ });
+ }
+ }
+ return _remove.call( $(this), selector, keepData );
+ });
+ };
+}
+
+$.widget = function( name, base, prototype ) {
+ var namespace = name.split( "." )[ 0 ],
+ fullName;
+ name = name.split( "." )[ 1 ];
+ fullName = namespace + "-" + name;
+
+ if ( !prototype ) {
+ prototype = base;
+ base = $.Widget;
+ }
+
+ // create selector for plugin
+ $.expr[ ":" ][ fullName ] = function( elem ) {
+ return !!$.data( elem, name );
+ };
+
+ $[ namespace ] = $[ namespace ] || {};
+ $[ namespace ][ name ] = function( options, element ) {
+ // allow instantiation without initializing for simple inheritance
+ if ( arguments.length ) {
+ this._createWidget( options, element );
+ }
+ };
+
+ var basePrototype = new base();
+ // we need to make the options hash a property directly on the new instance
+ // otherwise we'll modify the options hash on the prototype that we're
+ // inheriting from
+// $.each( basePrototype, function( key, val ) {
+// if ( $.isPlainObject(val) ) {
+// basePrototype[ key ] = $.extend( {}, val );
+// }
+// });
+ basePrototype.options = $.extend( true, {}, basePrototype.options );
+ $[ namespace ][ name ].prototype = $.extend( true, basePrototype, {
+ namespace: namespace,
+ widgetName: name,
+ widgetEventPrefix: $[ namespace ][ name ].prototype.widgetEventPrefix || name,
+ widgetBaseClass: fullName
+ }, prototype );
+
+ $.widget.bridge( name, $[ namespace ][ name ] );
+};
+
+$.widget.bridge = function( name, object ) {
+ $.fn[ name ] = function( options ) {
+ var isMethodCall = typeof options === "string",
+ args = Array.prototype.slice.call( arguments, 1 ),
+ returnValue = this;
+
+ // allow multiple hashes to be passed on init
+ options = !isMethodCall && args.length ?
+ $.extend.apply( null, [ true, options ].concat(args) ) :
+ options;
+
+ // prevent calls to internal methods
+ if ( isMethodCall && options.charAt( 0 ) === "_" ) {
+ return returnValue;
+ }
+
+ if ( isMethodCall ) {
+ this.each(function() {
+ var instance = $.data( this, name ),
+ methodValue = instance && $.isFunction( instance[options] ) ?
+ instance[ options ].apply( instance, args ) :
+ instance;
+ // TODO: add this back in 1.9 and use $.error() (see #5972)
+// if ( !instance ) {
+// throw "cannot call methods on " + name + " prior to initialization; " +
+// "attempted to call method '" + options + "'";
+// }
+// if ( !$.isFunction( instance[options] ) ) {
+// throw "no such method '" + options + "' for " + name + " widget instance";
+// }
+// var methodValue = instance[ options ].apply( instance, args );
+ if ( methodValue !== instance && methodValue !== undefined ) {
+ returnValue = methodValue;
+ return false;
+ }
+ });
+ } else {
+ this.each(function() {
+ var instance = $.data( this, name );
+ if ( instance ) {
+ instance.option( options || {} )._init();
+ } else {
+ $.data( this, name, new object( options, this ) );
+ }
+ });
+ }
+
+ return returnValue;
+ };
+};
+
+$.Widget = function( options, element ) {
+ // allow instantiation without initializing for simple inheritance
+ if ( arguments.length ) {
+ this._createWidget( options, element );
+ }
+};
+
+$.Widget.prototype = {
+ widgetName: "widget",
+ widgetEventPrefix: "",
+ options: {
+ disabled: false
+ },
+ _createWidget: function( options, element ) {
+ // $.widget.bridge stores the plugin instance, but we do it anyway
+ // so that it's stored even before the _create function runs
+ $.data( element, this.widgetName, this );
+ this.element = $( element );
+ this.options = $.extend( true, {},
+ this.options,
+ this._getCreateOptions(),
+ options );
+
+ var self = this;
+ this.element.bind( "remove." + this.widgetName, function() {
+ self.destroy();
+ });
+
+ this._create();
+ this._trigger( "create" );
+ this._init();
+ },
+ _getCreateOptions: function() {
+ return $.metadata && $.metadata.get( this.element[0] )[ this.widgetName ];
+ },
+ _create: function() {},
+ _init: function() {},
+
+ destroy: function() {
+ this.element
+ .unbind( "." + this.widgetName )
+ .removeData( this.widgetName );
+ this.widget()
+ .unbind( "." + this.widgetName )
+ .removeAttr( "aria-disabled" )
+ .removeClass(
+ this.widgetBaseClass + "-disabled " +
+ "ui-state-disabled" );
+ },
+
+ widget: function() {
+ return this.element;
+ },
+
+ option: function( key, value ) {
+ var options = key;
+
+ if ( arguments.length === 0 ) {
+ // don't return a reference to the internal hash
+ return $.extend( {}, this.options );
+ }
+
+ if (typeof key === "string" ) {
+ if ( value === undefined ) {
+ return this.options[ key ];
+ }
+ options = {};
+ options[ key ] = value;
+ }
+
+ this._setOptions( options );
+
+ return this;
+ },
+ _setOptions: function( options ) {
+ var self = this;
+ $.each( options, function( key, value ) {
+ self._setOption( key, value );
+ });
+
+ return this;
+ },
+ _setOption: function( key, value ) {
+ this.options[ key ] = value;
+
+ if ( key === "disabled" ) {
+ this.widget()
+ [ value ? "addClass" : "removeClass"](
+ this.widgetBaseClass + "-disabled" + " " +
+ "ui-state-disabled" )
+ .attr( "aria-disabled", value );
+ }
+
+ return this;
+ },
+
+ enable: function() {
+ return this._setOption( "disabled", false );
+ },
+ disable: function() {
+ return this._setOption( "disabled", true );
+ },
+
+ _trigger: function( type, event, data ) {
+ var prop, orig,
+ callback = this.options[ type ];
+
+ data = data || {};
+ event = $.Event( event );
+ event.type = ( type === this.widgetEventPrefix ?
+ type :
+ this.widgetEventPrefix + type ).toLowerCase();
+ // the original event may come from any element
+ // so we need to reset the target on the new event
+ event.target = this.element[ 0 ];
+
+ // copy original event properties over to the new event
+ orig = event.originalEvent;
+ if ( orig ) {
+ for ( prop in orig ) {
+ if ( !( prop in event ) ) {
+ event[ prop ] = orig[ prop ];
+ }
+ }
+ }
+
+ this.element.trigger( event, data );
+
+ return !( $.isFunction(callback) &&
+ callback.call( this.element[0], event, data ) === false ||
+ event.isDefaultPrevented() );
+ }
+};
+
+})( jQuery );
+
+}
+
+/*! JsRender v1.0pre - (jsrender.js version: does not require jQuery): http://github.com/BorisMoore/jsrender */
+/*
+ * Optimized version of jQuery Templates, fosr rendering to string, using 'codeless' markup.
+ *
+ * Copyright 2011, Boris Moore
+ * Released under the MIT License.
+ */
+window.JsViews || window.jQuery && jQuery.views || (function( window, undefined ) {
+
+var $, _$, JsViews, viewsNs, tmplEncode, render, rTag, registerTags, registerHelpers, extend,
+ FALSE = false, TRUE = true,
+ jQuery = window.jQuery, document = window.document,
+ htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
+ rPath = /^(true|false|null|[\d\.]+)|(\w+|\$(view|data|ctx|(\w+)))([\w\.]*)|((['"])(?:\\\1|.)*\7)$/g,
+ rParams = /(\$?[\w\.\[\]]+)(?:(\()|\s*(===|!==|==|!=|<|>|<=|>=)\s*|\s*(\=)\s*)?|(\,\s*)|\\?(\')|\\?(\")|(\))|(\s+)/g,
+ rNewLine = /\r?\n/g,
+ rUnescapeQuotes = /\\(['"])/g,
+ rEscapeQuotes = /\\?(['"])/g,
+ rBuildHash = /\x08([^\x08]+)\x08/g,
+ autoName = 0,
+ escapeMapForHtml = {
+ "&": "&",
+ "<": "<",
+ ">": ">"
+ },
+ htmlSpecialChar = /[\x00"&'<>]/g,
+ slice = Array.prototype.slice;
+
+if ( jQuery ) {
+
+ ////////////////////////////////////////////////////////////////////////////////////////////////
+ // jQuery is loaded, so make $ the jQuery object
+ $ = jQuery;
+
+ $.fn.extend({
+ // Use first wrapped element as template markup.
+ // Return string obtained by rendering the template against data.
+ render: function( data, context, parentView, path ) {
+ return render( data, this[0], context, parentView, path );
+ },
+
+ // Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
+ template: function( name, context ) {
+ return $.template( name, this[0], context );
+ }
+ });
+
+} else {
+
+ ////////////////////////////////////////////////////////////////////////////////////////////////
+ // jQuery is not loaded. Make $ the JsViews object
+
+ // Map over the $ in case of overwrite
+ _$ = window.$;
+
+ window.JsViews = JsViews = window.$ = $ = {
+ extend: function( target, source ) {
+ var name;
+ for ( name in source ) {
+ target[ name ] = source[ name ];
+ }
+ return target;
+ },
+ isArray: Array.isArray || function( obj ) {
+ return Object.prototype.toString.call( obj ) === "[object Array]";
+ },
+ noConflict: function() {
+ if ( window.$ === JsViews ) {
+ window.$ = _$;
+ }
+ return JsViews;
+ }
+ };
+}
+
+extend = $.extend;
+
+//=================
+// View constructor
+//=================
+
+function View( context, path, parentView, data, template ) {
+ // Returns a view data structure for a new rendered instance of a template.
+ // The content field is a hierarchical array of strings and nested views.
+
+ parentView = parentView || { viewsCount:0, ctx: viewsNs.helpers };
+
+ var parentContext = parentView && parentView.ctx;
+
+ return {
+ jsViews: "v1.0pre",
+ path: path || "",
+ // inherit context from parentView, merged with new context.
+ itemNumber: ++parentView.viewsCount || 1,
+ viewsCount: 0,
+ tmpl: template,
+ data: data || parentView.data || {},
+ // Set additional context on this view (which will modify the context inherited from the parent, and be inherited by child views)
+ ctx : context && context === parentContext
+ ? parentContext
+ : (parentContext ? extend( extend( {}, parentContext ), context ) : context||{}),
+ // If no jQuery, extend does not support chained copies - so limit to two parameters
+ parent: parentView
+ };
+}
+extend( $, {
+ views: viewsNs = {
+ templates: {},
+ tags: {
+ "if": function() {
+ var ifTag = this,
+ view = ifTag._view;
+ view.onElse = function( presenter, args ) {
+ var i = 0,
+ l = args.length;
+ while ( l && !args[ i++ ]) {
+ // Only render content if args.length === 0 (i.e. this is an else with no condition) or if a condition argument is truey
+ if ( i === l ) {
+ return "";
+ }
+ }
+ view.onElse = undefined; // If condition satisfied, so won't run 'else'.
+ return render( view.data, presenter.tmpl, view.ctx, view);
+ };
+ return view.onElse( this, arguments );
+ },
+ "else": function() {
+ var view = this._view;
+ return view.onElse ? view.onElse( this, arguments ) : "";
+ },
+ each: function() {
+ var i,
+ self = this,
+ result = "",
+ args = arguments,
+ l = args.length,
+ content = self.tmpl,
+ view = self._view;
+ for ( i = 0; i < l; i++ ) {
+ result += args[ i ] ? render( args[ i ], content, self.ctx || view.ctx, view, self._path, self._ctor ) : "";
+ }
+ return l ? result
+ // If no data parameter, use the current $data from view, and render once
+ : result + render( view.data, content, view.ctx, view, self._path, self.tag );
+ },
+ "=": function( value ) {
+ return value;
+ },
+ "*": function( value ) {
+ return value;
+ }
+ },
+ helpers: {
+ not: function( value ) {
+ return !value;
+ }
+ },
+ allowCode: FALSE,
+ debugMode: TRUE,
+ err: function( e ) {
+ return viewsNs.debugMode ? ("<br/><b>Error:</b> <em> " + (e.message || e) + ". </em>"): '""';
+ },
+
+//===============
+// setDelimiters
+//===============
+
+ setDelimiters: function( openTag, closeTag ) {
+ // Set or modify the delimiter characters for tags: "{{" and "}}"
+ var firstCloseChar = closeTag.charAt( 0 ),
+ secondCloseChar = closeTag.charAt( 1 );
+ openTag = "\\" + openTag.charAt( 0 ) + "\\" + openTag.charAt( 1 );
+ closeTag = "\\" + firstCloseChar + "\\" + secondCloseChar;
+
+ // Build regex with new delimiters
+ // {{
+ rTag = openTag
+ // # tag (followed by space,! or }) or equals or code
+ + "(?:(?:(\\#)?(\\w+(?=[!\\s\\" + firstCloseChar + "]))" + "|(?:(\\=)|(\\*)))"
+ // params
+ + "\\s*((?:[^\\" + firstCloseChar + "]|\\" + firstCloseChar + "(?!\\" + secondCloseChar + "))*?)"
+ // encoding
+ + "(!(\\w*))?"
+ // closeBlock
+ + "|(?:\\/([\\w\\$\\.\\[\\]]+)))"
+ // }}
+ + closeTag;
+
+ // Default rTag: # tag equals code params encoding closeBlock
+ // /\{\{(?:(?:(\#)?(\w+(?=[\s\}!]))|(?:(\=)|(\*)))((?:[^\}]|\}(?!\}))*?)(!(\w*))?|(?:\/([\w\$\.\[\]]+)))\}\}/g;
+
+ rTag = new RegExp( rTag, "g" );
+ },
+
+
+//===============
+// registerTags
+//===============
+
+ // Register declarative tag.
+ registerTags: registerTags = function( name, tagFn ) {
+ var key;
+ if ( typeof name === "object" ) {
+ for ( key in name ) {
+ registerTags( key, name[ key ]);
+ }
+ } else {
+ // Simple single property case.
+ viewsNs.tags[ name ] = tagFn;
+ }
+ return this;
+ },
+
+//===============
+// registerHelpers
+//===============
+
+ // Register helper function for use in markup.
+ registerHelpers: registerHelpers = function( name, helper ) {
+ if ( typeof name === "object" ) {
+ // Object representation where property name is path and property value is value.
+ // TODO: We've discussed an "objectchange" event to capture all N property updates here. See TODO note above about propertyChanges.
+ var key;
+ for ( key in name ) {
+ registerHelpers( key, name[ key ]);
+ }
+ } else {
+ // Simple single property case.
+ viewsNs.helpers[ name ] = helper;
+ }
+ return this;
+ },
+
+//===============
+// tmpl.encode
+//===============
+
+ encode: function( encoding, text ) {
+ return text
+ ? ( tmplEncode[ encoding || "html" ] || tmplEncode.html)( text ) // HTML encoding is the default
+ : "";
+ },
+
+ encoders: tmplEncode = {
+ "none": function( text ) {
+ return text;
+ },
+ "html": function( text ) {
+ // HTML encoding helper: Replace < > & and ' and " by corresponding entities.
+ // Implementation, from Mike Samuel <msamuel@google.com>
+ return String( text ).replace( htmlSpecialChar, replacerForHtml );
+ }
+ //TODO add URL encoding, and perhaps other encoding helpers...
+ },
+
+//===============
+// renderTag
+//===============
+
+ renderTag: function( tag, view, encode, content, tagProperties ) {
+ // This is a tag call, with arguments: "tag", view, encode, content, presenter [, params...]
+ var ret, ctx, name,
+ args = arguments,
+ presenters = viewsNs.presenters;
+ hash = tagProperties._hash,
+ tagFn = viewsNs.tags[ tag ];
+
+ if ( !tagFn ) {
+ return "";
+ }
+
+ content = content && view.tmpl.nested[ content - 1 ];
+ tagProperties.tmpl = tagProperties.tmpl || content || undefined;
+ // Set the tmpl property to the content of the block tag, unless set as an override property on the tag
+
+ if ( presenters && presenters[ tag ]) {
+ ctx = extend( extend( {}, tagProperties.ctx ), tagProperties );
+ delete ctx.ctx;
+ delete ctx._path;
+ delete ctx.tmpl;
+ tagProperties.ctx = ctx;
+ tagProperties._ctor = tag + (hash ? "=" + hash.slice( 0, -1 ) : "");
+
+ tagProperties = extend( extend( {}, tagFn ), tagProperties );
+ tagFn = viewsNs.tags.each; // Use each to render the layout template against the data
+ }
+
+ tagProperties._encode = encode;
+ tagProperties._view = view;
+ ret = tagFn.apply( tagProperties, args.length > 5 ? slice.call( args, 5 ) : [view.data] );
+ return ret || (ret === undefined ? "" : ret.toString()); // (If ret is the value 0 or false or null, will render to string)
+ }
+ },
+
+//===============
+// render
+//===============
+
+ render: render = function( data, tmpl, context, parentView, path, tagName ) {
+ // Render template against data as a tree of subviews (nested template), or as a string (top-level template).
+ // tagName parameter for internal use only. Used for rendering templates registered as tags (which may have associated presenter objects)
+ var i, l, dataItem, arrayView, content, result = "";
+
+ if ( arguments.length === 2 && data.jsViews ) {
+ parentView = data;
+ context = parentView.ctx;
+ data = parentView.data;
+ }
+ tmpl = $.template( tmpl );
+ if ( !tmpl ) {
+ return ""; // Could throw...
+ }
+
+ if ( $.isArray( data )) {
+ // Create a view item for the array, whose child views correspond to each data item.
+ arrayView = new View( context, path, parentView, data);
+ l = data.length;
+ for ( i = 0, l = data.length; i < l; i++ ) {
+ dataItem = data[ i ];
+ content = dataItem ? tmpl( dataItem, new View( context, path, arrayView, dataItem, tmpl, this )) : "";
+ result += viewsNs.activeViews ? "<!--item-->" + content + "<!--/item-->" : content;
+ }
+ } else {
+ result += tmpl( data, new View( context, path, parentView, data, tmpl ));
+ }
+
+ return viewsNs.activeViews
+ // If in activeView mode, include annotations
+ ? "<!--tmpl(" + (path || "") + ") " + (tagName ? "tag=" + tagName : tmpl._name) + "-->" + result + "<!--/tmpl-->"
+ // else return just the string result
+ : result;
+ },
+
+//===============
+// template
+//===============
+
+ template: function( name, tmpl ) {
+ // Set:
+ // Use $.template( name, tmpl ) to cache a named template,
+ // where tmpl is a template string, a script element or a jQuery instance wrapping a script element, etc.
+ // Use $( "selector" ).template( name ) to provide access by name to a script block template declaration.
+
+ // Get:
+ // Use $.template( name ) to access a cached template.
+ // Also $( selectorToScriptBlock ).template(), or $.template( null, templateString )
+ // will return the compiled template, without adding a name reference.
+ // If templateString is not a selector, $.template( templateString ) is equivalent
+ // to $.template( null, templateString ). To ensure a string is treated as a template,
+ // include an HTML element, an HTML comment, or a template comment tag.
+
+ if (tmpl) {
+ // Compile template and associate with name
+ if ( "" + tmpl === tmpl ) { // type string
+ // This is an HTML string being passed directly in.
+ tmpl = compile( tmpl );
+ } else if ( jQuery && tmpl instanceof $ ) {
+ tmpl = tmpl[0];
+ }
+ if ( tmpl ) {
+ if ( jQuery && tmpl.nodeType ) {
+ // If this is a template block, use cached copy, or generate tmpl function and cache.
+ tmpl = $.data( tmpl, "tmpl" ) || $.data( tmpl, "tmpl", compile( tmpl.innerHTML ));
+ }
+ viewsNs.templates[ tmpl._name = tmpl._name || name || "_" + autoName++ ] = tmpl;
+ }
+ return tmpl;
+ }
+ // Return named compiled template
+ return name
+ ? "" + name !== name // not type string
+ ? (name._name
+ ? name // already compiled
+ : $.template( null, name ))
+ : viewsNs.templates[ name ] ||
+ // If not in map, treat as a selector. (If integrated with core, use quickExpr.exec)
+ $.template( null, htmlExpr.test( name ) ? name : try$( name ))
+ : null;
+ }
+});
+
+viewsNs.setDelimiters( "{{", "}}" );
+
+//=================
+// compile template
+//=================
+
+// Generate a reusable function that will serve to render a template against data
+// (Compile AST then build template function)
+
+function parsePath( all, comp, object, viewDataCtx, viewProperty, path, string, quot ) {
+ return object
+ ? ((viewDataCtx
+ ? viewProperty
+ ? ("$view." + viewProperty)
+ : object
+ :("$data." + object)
+ ) + ( path || "" ))
+ : string || (comp || "");
+}
+
+function compile( markup ) {
+ var newNode,
+ loc = 0,
+ stack = [],
+ topNode = [],
+ content = topNode,
+ current = [,,topNode];
+
+ function pushPreceedingContent( shift ) {
+ shift -= loc;
+ if ( shift ) {
+ content.push( markup.substr( loc, shift ).replace( rNewLine,"\\n"));
+ }
+ }
+
+ function parseTag( all, isBlock, tagName, equals, code, params, useEncode, encode, closeBlock, index ) {
+ // rTag : # tagName equals code params encode closeBlock
+ // /\{\{(?:(?:(\#)?(\w+(?=[\s\}!]))|(?:(\=)|(\*)))((?:[^\}]|\}(?!\}))*?)(!(\w*))?|(?:\/([\w\$\.\[\]]+)))\}\}/g;
+
+ // Build abstract syntax tree: [ tagName, params, content, encode ]
+ var named,
+ hash = "",
+ parenDepth = 0,
+ quoted = FALSE, // boolean for string content in double qoutes
+ aposed = FALSE; // or in single qoutes
+
+ function parseParams( all, path, paren, comp, eq, comma, apos, quot, rightParen, space, index ) {
+ // path paren eq comma apos quot rtPrn space
+ // /(\$?[\w\.\[\]]+)(?:(\()|(===)|(\=))?|(\,\s*)|\\?(\')|\\?(\")|(\))|(\s+)/g
+
+ return aposed
+ // within single-quoted string
+ ? ( aposed = !apos, (aposed ? all : '"'))
+ : quoted
+ // within double-quoted string
+ ? ( quoted = !quot, (quoted ? all : '"'))
+ : comp
+ // comparison
+ ? ( path.replace( rPath, parsePath ) + comp)
+ : eq
+ // named param
+ ? parenDepth ? "" :( named = TRUE, '\b' + path + ':')
+ : paren
+ // function
+ ? (parenDepth++, path.replace( rPath, parsePath ) + '(')
+ : rightParen
+ // function
+ ? (parenDepth--, ")")
+ : path
+ // path
+ ? path.replace( rPath, parsePath )
+ : comma
+ ? ","
+ : space
+ ? (parenDepth
+ ? ""
+ : named
+ ? ( named = FALSE, "\b")
+ : ","
+ )
+ : (aposed = apos, quoted = quot, '"');
+ }
+
+ tagName = tagName || equals;
+ pushPreceedingContent( index );
+ if ( code ) {
+ if ( viewsNs.allowCode ) {
+ content.push([ "*", params.replace( rUnescapeQuotes, "$1" )]);
+ }
+ } else if ( tagName ) {
+ if ( tagName === "else" ) {
+ current = stack.pop();
+ content = current[ 2 ];
+ isBlock = TRUE;
+ }
+ params = (params
+ ? (params + " ")
+ .replace( rParams, parseParams )
+ .replace( rBuildHash, function( all, keyValue, index ) {
+ hash += keyValue + ",";
+ return "";
+ })
+ : "");
+ params = params.slice( 0, -1 );
+ newNode = [
+ tagName,
+ useEncode ? encode || "none" : "",
+ isBlock && [],
+ "{" + hash + "_hash:'" + hash + "',_path:'" + params + "'}",
+ params
+ ];
+
+ if ( isBlock ) {
+ stack.push( current );
+ current = newNode;
+ }
+ content.push( newNode );
+ } else if ( closeBlock ) {
+ current = stack.pop();
+ }
+ loc = index + all.length; // location marker - parsed up to here
+ if ( !current ) {
+ throw "Expected block tag";
+ }
+ content = current[ 2 ];
+ }
+ markup = markup.replace( rEscapeQuotes, "\\$1" );
+ markup.replace( rTag, parseTag );
+ pushPreceedingContent( markup.length );
+ return buildTmplFunction( topNode );
+}
+
+// Build javascript compiled template function, from AST
+function buildTmplFunction( nodes ) {
+ var ret, node, i,
+ nested = [],
+ l = nodes.length,
+ code = "try{var views="
+ + (jQuery ? "jQuery" : "JsViews")
+ + '.views,tag=views.renderTag,enc=views.encode,html=views.encoders.html,$ctx=$view && $view.ctx,result=""+\n\n';
+
+ for ( i = 0; i < l; i++ ) {
+ node = nodes[ i ];
+ if ( node[ 0 ] === "*" ) {
+ code = code.slice( 0, i ? -1 : -3 ) + ";" + node[ 1 ] + ( i + 1 < l ? "result+=" : "" );
+ } else if ( "" + node === node ) { // type string
+ code += '"' + node + '"+';
+ } else {
+ var tag = node[ 0 ],
+ encode = node[ 1 ],
+ content = node[ 2 ],
+ obj = node[ 3 ],
+ params = node[ 4 ],
+ paramsOrEmptyString = params + '||"")+';
+
+ if( content ) {
+ nested.push( buildTmplFunction( content ));
+ }
+ code += tag === "="
+ ? (!encode || encode === "html"
+ ? "html(" + paramsOrEmptyString
+ : encode === "none"
+ ? ("(" + paramsOrEmptyString)
+ : ('enc("' + encode + '",' + paramsOrEmptyString)
+ )
+ : 'tag("' + tag + '",$view,"' + ( encode || "" ) + '",'
+ + (content ? nested.length : '""') // For block tags, pass in the key (nested.length) to the nested content template
+ + "," + obj + (params ? "," : "") + params + ")+";
+ }
+ }
+ ret = new Function( "$data, $view", code.slice( 0, -1) + ";return result;\n\n}catch(e){return views.err(e);}" );
+ ret.nested = nested;
+ return ret;
+}
+
+//========================== Private helper functions, used by code above ==========================
+
+function replacerForHtml( ch ) {
+ // Original code from Mike Samuel <msamuel@google.com>
+ return escapeMapForHtml[ ch ]
+ // Intentional assignment that caches the result of encoding ch.
+ || ( escapeMapForHtml[ ch ] = "&#" + ch.charCodeAt( 0 ) + ";" );
+}
+
+function try$( selector ) {
+ // If selector is valid, return jQuery object, otherwise return (invalid) selector string
+ try {
+ return $( selector );
+ } catch( e) {}
+ return selector;
+}
+})( window );
+(function ($, window, undefined) {
+ var pos_oo = Number.POSITIVE_INFINITY,
+ neg_oo = Number.NEGATIVE_INFINITY;
+
+ $.geo = {
+ //
+ // utility functions
+ //
+
+ _allCoordinates: function (geom) {
+ // return array of all positions in all geometries of geom
+ // not in JTS
+ var geometries = this._flatten(geom),
+ curGeom = 0,
+ result = [];
+
+ for (; curGeom < geometries.length; curGeom++) {
+ var coordinates = geometries[curGeom].coordinates,
+ isArray = coordinates && $.isArray(coordinates[0]),
+ isDblArray = isArray && $.isArray(coordinates[0][0]),
+ isTriArray = isDblArray && $.isArray(coordinates[0][0][0]),
+ i, j, k;
+
+ if (!isTriArray) {
+ if (!isDblArray) {
+ if (!isArray) {
+ coordinates = [coordinates];
+ }
+ coordinates = [coordinates];
+ }
+ coordinates = [coordinates];
+ }
+
+ for (i = 0; i < coordinates.length; i++) {
+ for (j = 0; j < coordinates[i].length; j++) {
+ for (k = 0; k < coordinates[i][j].length; k++) {
+ result.push(coordinates[i][j][k]);
+ }
+ }
+ }
+ }
+ return result;
+ },
+
+ _isGeodetic: function( coords ) {
+ // returns true if the first coordinate it can find is geodetic
+
+ while ( $.isArray( coords ) ) {
+ if ( coords.length > 1 && ! $.isArray( coords[ 0 ] ) ) {
+ return ( coords[ 0 ] >= -180 && coords[ 0 ] <= 180 && coords[ 1 ] >= -85 && coords[ 1 ] <= 85 );
+ } else {
+ coords = coords[ 0 ];
+ }
+ }
+
+ return false;
+ },
+
+ //
+ // bbox functions
+ //
+
+ center: function (bbox, _ignoreGeo /* Internal Use Only */) {
+ // Envelope.centre in JTS
+ // bbox only, use centroid for geom
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ var center = [(bbox[0] + bbox[2]) / 2, (bbox[1] + bbox[3]) / 2];
+ return wasGeodetic ? $.geo.proj.toGeodetic(center) : center;
+ },
+
+ expandBy: function (bbox, dx, dy, _ignoreGeo /* Internal Use Only */) {
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ bbox = [bbox[0] - dx, bbox[1] - dy, bbox[2] + dx, bbox[3] + dy];
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ height: function (bbox, _ignoreGeo /* Internal Use Only */ ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ return bbox[3] - bbox[1];
+ },
+
+ _in: function(bbox1, bbox2) {
+ return bbox1[0] <= bbox2[0] &&
+ bbox1[1] <= bbox2[1] &&
+ bbox1[2] >= bbox2[2] &&
+ bbox1[3] >= bbox2[3];
+ },
+
+ _bboxDisjoint: function( bbox1, bbox2 ) {
+ return bbox2[ 0 ] > bbox1[ 2 ] ||
+ bbox2[ 2 ] < bbox1[ 0 ] ||
+ bbox2[ 1 ] > bbox1[ 3 ] ||
+ bbox2[ 3 ] < bbox1[ 1 ];
+ },
+
+ reaspect: function (bbox, ratio, _ignoreGeo /* Internal Use Only */ ) {
+ // not in JTS
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ var width = this.width(bbox, true),
+ height = this.height(bbox, true),
+ center = this.center(bbox, true),
+ dx, dy;
+
+ if (width != 0 && height != 0 && ratio > 0) {
+ if (width / height > ratio) {
+ dx = width / 2;
+ dy = dx / ratio;
+ } else {
+ dy = height / 2;
+ dx = dy * ratio;
+ }
+
+ bbox = [center[0] - dx, center[1] - dy, center[0] + dx, center[1] + dy];
+ }
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ recenter: function( bbox, center, _ignoreGeo /* Internal Use Only */ ) {
+ // not in JTS
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj ) {
+ if ( this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ if ( this._isGeodetic( center ) ) {
+ center = $.geo.proj.fromGeodetic(center);
+ }
+ }
+
+ var halfWidth = ( bbox[ 2 ] - bbox[ 0 ] ) / 2,
+ halfHeight = ( bbox[ 3 ] - bbox[ 1 ] ) / 2;
+
+ bbox = [
+ center[ 0 ] - halfWidth,
+ center[ 1 ] - halfHeight,
+ center[ 0 ] + halfWidth,
+ center[ 1 ] + halfHeight
+ ];
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ scaleBy: function ( bbox, scale, _ignoreGeo /* Internal Use Only */ ) {
+ // not in JTS
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ var c = this.center(bbox, true),
+ dx = (bbox[2] - bbox[0]) * scale / 2,
+ dy = (bbox[3] - bbox[1]) * scale / 2;
+
+ bbox = [c[0] - dx, c[1] - dy, c[0] + dx, c[1] + dy];
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ width: function (bbox, _ignoreGeo /* Internal Use Only */ ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ return bbox[2] - bbox[0];
+ },
+
+ //
+ // geometry functions
+ //
+
+ // bbox (Geometry.getEnvelope in JTS)
+
+ bbox: function ( geom, _ignoreGeo /* Internal Use Only */ ) {
+ if ( !geom ) {
+ return undefined;
+ } else if ( geom.bbox ) {
+ result = ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom.bbox ) ) ? $.geo.proj.fromGeodetic( geom.bbox ) : geom.bbox;
+ } else {
+ result = [ pos_oo, pos_oo, neg_oo, neg_oo ];
+
+ var coordinates = this._allCoordinates( geom ),
+ curCoord = 0;
+
+ if ( coordinates.length == 0 ) {
+ return undefined;
+ }
+
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( coordinates ) ) {
+ wasGeodetic = true;
+ coordinates = $.geo.proj.fromGeodetic( coordinates );
+ }
+
+ for ( ; curCoord < coordinates.length; curCoord++ ) {
+ result[0] = Math.min(coordinates[curCoord][0], result[0]);
+ result[1] = Math.min(coordinates[curCoord][1], result[1]);
+ result[2] = Math.max(coordinates[curCoord][0], result[2]);
+ result[3] = Math.max(coordinates[curCoord][1], result[3]);
+ }
+ }
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(result) : result;
+ },
+
+ // centroid
+
+ centroid: function( geom, _ignoreGeo /* Internal Use Only */ ) {
+ switch (geom.type) {
+ case "Point":
+ return $.extend({}, geom);
+
+ case "LineString":
+ case "Polygon":
+ var a = 0,
+ c = [0, 0],
+ coords = $.merge( [ ], geom.type == "Polygon" ? geom.coordinates[0] : geom.coordinates ),
+ i = 1, j, n;
+
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( coords ) ) {
+ wasGeodetic = true;
+ coords = $.geo.proj.fromGeodetic(coords);
+ }
+
+ //if (coords[0][0] != coords[coords.length - 1][0] || coords[0][1] != coords[coords.length - 1][1]) {
+ // coords.push(coords[0]);
+ //}
+
+ for (; i <= coords.length; i++) {
+ j = i % coords.length;
+ n = (coords[i - 1][0] * coords[j][1]) - (coords[j][0] * coords[i - 1][1]);
+ a += n;
+ c[0] += (coords[i - 1][0] + coords[j][0]) * n;
+ c[1] += (coords[i - 1][1] + coords[j][1]) * n;
+ }
+
+ if (a == 0) {
+ if (coords.length > 0) {
+ c[0] = coords[0][0];
+ c[1] = coords[0][1];
+ return { type: "Point", coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c };
+ } else {
+ return undefined;
+ }
+ }
+
+ a *= 3;
+ c[0] /= a;
+ c[1] /= a;
+
+ return { type: "Point", coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c };
+ }
+ return undefined;
+ },
+
+ // contains
+
+ contains: function (geom1, geom2) {
+ if (geom1.type != "Polygon") {
+ return false;
+ }
+
+ switch (geom2.type) {
+ case "Point":
+ return this._containsPolygonPoint(geom1.coordinates, geom2.coordinates);
+
+ case "LineString":
+ return this._containsPolygonLineString(geom1.coordinates, geom2.coordinates);
+
+ case "Polygon":
+ return this._containsPolygonLineString(geom1.coordinates, geom2.coordinates[0]);
+
+ default:
+ return false;
+ }
+ },
+
+ _containsPolygonPoint: function (polygonCoordinates, pointCoordinate) {
+ if (polygonCoordinates.length == 0 || polygonCoordinates[0].length < 4) {
+ return false;
+ }
+
+ var rayCross = 0,
+ a = polygonCoordinates[0][0],
+ i = 1,
+ b,
+ x;
+
+ for (; i < polygonCoordinates[0].length; i++) {
+ b = polygonCoordinates[0][i];
+
+ if ((a[1] <= pointCoordinate[1] && pointCoordinate[1] < b[1]) || (b[1] <= pointCoordinate[1] && pointCoordinate[1] < a[1]) && (pointCoordinate[0] < a[0] || pointCoordinate[0] < b[0])) {
+ x = a[0] + (b[0] - a[0]) * (pointCoordinate[1] - a[1]) / (b[1] - a[1]);
+
+ if (x > pointCoordinate[0]) {
+ rayCross++;
+ }
+ }
+
+ a = b;
+ }
+
+ return rayCross % 2 == 1;
+ },
+
+ _containsPolygonLineString: function (polygonCoordinates, lineStringCoordinates) {
+ for (var i = 0; i < lineStringCoordinates.length; i++) {
+ if (!this._containsPolygonPoint(polygonCoordinates, lineStringCoordinates[i])) {
+ return false;
+ }
+ }
+ return true;
+ },
+
+ // distance
+
+ distance: function ( geom1, geom2, _ignoreGeo /* Internal Use Only */ ) {
+ var geom1CoordinatesProjected = ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom1.coordinates ) ) ? $.geo.proj.fromGeodetic(geom1.coordinates) : geom1.coordinates,
+ geom2CoordinatesProjected = ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom2.coordinates ) ) ? $.geo.proj.fromGeodetic(geom2.coordinates) : geom2.coordinates;
+
+ switch (geom1.type) {
+ case "Point":
+ switch (geom2.type) {
+ case "Point":
+ return this._distancePointPoint(geom2CoordinatesProjected, geom1CoordinatesProjected);
+ case "LineString":
+ return this._distanceLineStringPoint(geom2CoordinatesProjected, geom1CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonPoint(geom2CoordinatesProjected, geom1CoordinatesProjected) ? 0 : this._distanceLineStringPoint(geom2CoordinatesProjected[0], geom1CoordinatesProjected);
+ default:
+ return undefined;
+ }
+ break;
+
+ case "LineString":
+ switch (geom2.type) {
+ case "Point":
+ return this._distanceLineStringPoint(geom1CoordinatesProjected, geom2CoordinatesProjected);
+ case "LineString":
+ return this._distanceLineStringLineString(geom1CoordinatesProjected, geom2CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonLineString(geom2CoordinatesProjected, geom1CoordinatesProjected) ? 0 : this._distanceLineStringLineString(geom2CoordinatesProjected[0], geom1CoordinatesProjected);
+ default:
+ return undefined;
+ }
+ break;
+
+ case "Polygon":
+ switch (geom2.type) {
+ case "Point":
+ return this._containsPolygonPoint(geom1CoordinatesProjected, geom2CoordinatesProjected) ? 0 : this._distanceLineStringPoint(geom1CoordinatesProjected[0], geom2CoordinatesProjected);
+ case "LineString":
+ return this._containsPolygonLineString(geom1CoordinatesProjected, geom2CoordinatesProjected) ? 0 : this._distanceLineStringLineString(geom1CoordinatesProjected[0], geom2CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonLineString(geom1CoordinatesProjected, geom2CoordinatesProjected[0]) ? 0 : this._distanceLineStringLineString(geom1CoordinatesProjected[0], geom2CoordinatesProjected[0]);
+ default:
+ return undefined;
+ }
+ break;
+ }
+ },
+
+ _distancePointPoint: function (coordinate1, coordinate2) {
+ var dx = coordinate2[0] - coordinate1[0],
+ dy = coordinate2[1] - coordinate1[1];
+ return Math.sqrt((dx * dx) + (dy * dy));
+ },
+
+ _distanceLineStringPoint: function (lineStringCoordinates, pointCoordinate) {
+ var minDist = pos_oo;
+
+ if (lineStringCoordinates.length > 0) {
+ var a = lineStringCoordinates[0],
+
+ apx = pointCoordinate[0] - a[0],
+ apy = pointCoordinate[1] - a[1];
+
+ if (lineStringCoordinates.length == 1) {
+ return Math.sqrt(apx * apx + apy * apy);
+ } else {
+ for (var i = 1; i < lineStringCoordinates.length; i++) {
+ var b = lineStringCoordinates[i],
+
+ abx = b[0] - a[0],
+ aby = b[1] - a[1],
+ bpx = pointCoordinate[0] - b[0],
+ bpy = pointCoordinate[1] - b[1],
+
+ d = this._distanceSegmentPoint(abx, aby, apx, apy, bpx, bpy);
+
+ if (d == 0) {
+ return 0;
+ }
+
+ if (d < minDist) {
+ minDist = d;
+ }
+
+ a = b;
+ apx = bpx;
+ apy = bpy;
+ }
+ }
+ }
+
+ return Math.sqrt(minDist);
+ },
+
+ _distanceSegmentPoint: function (abx, aby, apx, apy, bpx, bpy) {
+ var dot1 = abx * apx + aby * apy;
+
+ if (dot1 <= 0) {
+ return apx * apx + apy * apy;
+ }
+
+ var dot2 = abx * abx + aby * aby;
+
+ if (dot1 >= dot2) {
+ return bpx * bpx + bpy * bpy;
+ }
+
+ return apx * apx + apy * apy - dot1 * dot1 / dot2;
+ },
+
+ _distanceLineStringLineString: function (lineStringCoordinates1, lineStringCoordinates2) {
+ var minDist = pos_oo;
+ for (var i = 0; i < lineStringCoordinates2.length; i++) {
+ minDist = Math.min(minDist, this._distanceLineStringPoint(lineStringCoordinates1, lineStringCoordinates2[i]));
+ }
+ return minDist;
+ },
+
+ // buffer
+
+ _buffer: function( geom, distance, _ignoreGeo /* Internal Use Only */ ) {
+ var wasGeodetic = false,
+ coords = geom.coordinates;
+
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom.coordinates ) ) {
+ wasGeodetic = true;
+ coords = $.geo.proj.fromGeodetic( geom.coordinates );
+ }
+
+ switch ( geom.type ) {
+ case "Point":
+ var resultCoords = [],
+ slices = 180,
+ i = 0,
+ a;
+
+ for ( ; i <= slices; i++ ) {
+ a = ( i * 360 / slices ) * ( Math.PI / 180 );
+ resultCoords.push( [
+ coords[ 0 ] + Math.cos( a ) * distance,
+ coords[ 1 ] + Math.sin( a ) * distance
+ ] );
+ }
+
+ return {
+ type: "Polygon",
+ coordinates: [ ( wasGeodetic ? $.geo.proj.toGeodetic( resultCoords ) : resultCoords ) ]
+ };
+
+ break;
+
+ default:
+ return undefined;
+ }
+ },
+
+
+ //
+ // feature
+ //
+
+ _flatten: function (geom) {
+ // return an array of all basic geometries
+ // not in JTS
+ var geometries = [],
+ curGeom = 0;
+ switch (geom.type) {
+ case "Feature":
+ $.merge(geometries, this._flatten(geom.geometry));
+ break;
+
+ case "FeatureCollection":
+ for (; curGeom < geom.features.length; curGeom++) {
+ $.merge(geometries, this._flatten(geom.features[curGeom].geometry));
+ }
+ break;
+
+ case "GeometryCollection":
+ for (; curGeom < geom.geometries.length; curGeom++) {
+ $.merge(geometries, this._flatten(geom.geometries[curGeom]));
+ }
+ break;
+
+ default:
+ geometries[0] = geom;
+ break;
+ }
+ return geometries;
+ },
+
+ length: function( geom, _ignoreGeo /* Internal Use Only */ ) {
+ var sum = 0,
+ lineStringCoordinates,
+ i = 1, dx, dy;
+
+ switch ( geom.type ) {
+ case "Point":
+ return 0;
+
+ case "LineString":
+ lineStringCoordinates = geom.coordinates;
+ break;
+
+ case "Polygon":
+ lineStringCoordinates = geom.coordinates[ 0 ];
+ break;
+ }
+
+ if ( lineStringCoordinates ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( lineStringCoordinates ) ) {
+ lineStringCoordinates = $.geo.proj.fromGeodetic( lineStringCoordinates );
+ }
+
+ for ( ; i < lineStringCoordinates.length; i++ ) {
+ dx = lineStringCoordinates[ i ][0] - lineStringCoordinates[ i - 1 ][0];
+ dy = lineStringCoordinates[ i ][1] - lineStringCoordinates[ i - 1 ][1];
+ sum += Math.sqrt((dx * dx) + (dy * dy));
+ }
+
+ return sum;
+ }
+
+ // return undefined;
+ },
+
+ area: function( geom, _ignoreGeo /* Internal Use Only */ ) {
+ var sum = 0,
+ polygonCoordinates,
+ i = 1, j;
+
+ switch ( geom.type ) {
+ case "Point":
+ case "LineString":
+ return 0;
+
+ case "Polygon":
+ polygonCoordinates = geom.coordinates[ 0 ];
+ break;
+ }
+
+ if ( polygonCoordinates ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( polygonCoordinates ) ) {
+ polygonCoordinates = $.geo.proj.fromGeodetic( polygonCoordinates );
+ }
+
+ for ( ; i <= polygonCoordinates.length; i++) {
+ j = i % polygonCoordinates.length;
+ sum += ( polygonCoordinates[ i - 1 ][ 0 ] - polygonCoordinates[ j ][ 0 ] ) * ( polygonCoordinates[ i - 1 ][ 1 ] + polygonCoordinates[ j ][ 1 ] ) / 2;
+ }
+
+ return Math.abs( sum );
+ }
+ },
+
+ pointAlong: function( geom, percentage, _ignoreGeo /* Internal Use Only */ ) {
+ var totalLength = 0,
+ previousPercentageSum = 0,
+ percentageSum = 0,
+ remainderPercentageSum,
+ len,
+ lineStringCoordinates,
+ segmentLengths = [],
+ i = 1, dx, dy,
+ c, c0, c1,
+ wasGeodetic = false;
+
+ switch ( geom.type ) {
+ case "Point":
+ return $.extend( { }, geom );
+
+ case "LineString":
+ lineStringCoordinates = geom.coordinates;
+ break;
+
+ case "Polygon":
+ lineStringCoordinates = geom.coordinates[ 0 ];
+ break;
+ }
+
+ if ( lineStringCoordinates ) {
+ if ( percentage === 0 ) {
+ return {
+ type: "Point",
+ coordinates: [ lineStringCoordinates[ 0 ][ 0 ], lineStringCoordinates[ 0 ][ 1 ] ]
+ };
+ } else if ( percentage === 1 ) {
+ i = lineStringCoordinates.length - 1;
+ return {
+ type: "Point",
+ coordinates: [ lineStringCoordinates[ i ][ 0 ], lineStringCoordinates[ i ][ 1 ] ]
+ };
+ } else {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( lineStringCoordinates ) ) {
+ wasGeodetic = true;
+ lineStringCoordinates = $.geo.proj.fromGeodetic( lineStringCoordinates );
+ }
+
+ for ( ; i < lineStringCoordinates.length; i++ ) {
+ dx = lineStringCoordinates[ i ][ 0 ] - lineStringCoordinates[ i - 1 ][ 0 ];
+ dy = lineStringCoordinates[ i ][ 1 ] - lineStringCoordinates[ i - 1 ][ 1 ];
+ len = Math.sqrt((dx * dx) + (dy * dy));
+ segmentLengths.push( len );
+ totalLength += len;
+ }
+
+ for ( i = 0; i < segmentLengths.length && percentageSum < percentage; i++ ) {
+ previousPercentageSum = percentageSum;
+ percentageSum += ( segmentLengths[ i ] / totalLength );
+ }
+
+ remainderPercentageSum = percentage - previousPercentageSum;
+
+ c0 = lineStringCoordinates[ i - 1 ];
+ c1 = lineStringCoordinates[ i ];
+
+ c = [
+ c0[ 0 ] + ( remainderPercentageSum * ( c1[ 0 ] - c0[ 0 ] ) ),
+ c0[ 1 ] + ( remainderPercentageSum * ( c1[ 1 ] - c0[ 1 ] ) )
+ ];
+
+ return {
+ type: "Point",
+ coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c
+ };
+ }
+ }
+ },
+
+ //
+ // WKT functions
+ //
+
+ _WKT: (function () {
+ function pointToString(value) {
+ return "POINT " + pointToUntaggedString(value.coordinates);
+ }
+
+ function pointToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ return "(" + coordinates.join(" ") + ")";
+ }
+ }
+
+ function lineStringToString(value) {
+ return "LINESTRING " + lineStringToUntaggedString(value.coordinates);
+ }
+
+ function lineStringToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ var points = []
+
+ for (var i = 0; i < coordinates.length; i++) {
+ points.push(coordinates[i].join(" "));
+ }
+
+ return "(" + points + ")";
+ }
+ }
+
+ function polygonToString(value) {
+ return "POLYGON " + polygonToUntaggedString(value.coordinates);
+ }
+
+ function polygonToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMTPY";
+ } else {
+ var lineStrings = [];
+
+ for (var i = 0; i < coordinates.length; i++) {
+ lineStrings.push(lineStringToUntaggedString(coordinates[i]));
+ }
+
+ return "(" + lineStrings + ")";
+ }
+ }
+
+ function multiPointToString(value) {
+ return "MULTIPOINT " + lineStringToUntaggedString(value.coordinates);
+ }
+
+ function multiLineStringToString(value) {
+ return "MULTILINSTRING " + polygonToUntaggedString(value.coordinates);
+ }
+
+ function multiPolygonToString(value) {
+ return "MULTIPOLYGON " + multiPolygonToUntaggedString(value.coordinates);
+ }
+
+ function multiPolygonToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ var polygons = [];
+ for (var i = 0; i < coordinates.length; i++) {
+ polygons.push(polygonToUntaggedString(coordinates[i]));
+ }
+ return "(" + polygons + ")";
+ }
+ }
+
+ function geometryCollectionToString(value) {
+ return "GEOMETRYCOLLECTION " + geometryCollectionToUntaggedString(value.geometries);
+ }
+
+ function geometryCollectionToUntaggedString(geometries) {
+ if (!(geometries && geometries.length)) {
+ return "EMPTY";
+ } else {
+ var geometryText = [];
+ for (var i = 0; i < geometries.length; i++) {
+ geometryText.push(stringify(geometries[i]));
+ }
+ return "(" + geometries + ")";
+ }
+ }
+
+ function stringify(value) {
+ if (!(value && value.type)) {
+ return "";
+ } else {
+ switch (value.type) {
+ case "Point":
+ return pointToString(value);
+
+ case "LineString":
+ return lineStringToString(value);
+
+ case "Polygon":
+ return polygonToString(value);
+
+ case "MultiPoint":
+ return multiPointToString(value);
+
+ case "MultiLineString":
+ return multiLineStringToString(value);
+
+ case "MultiPolygon":
+ return multiPolygonToString(value);
+
+ case "GeometryCollection":
+ return geometryCollectionToString(value);
+
+ default:
+ return "";
+ }
+ }
+ }
+
+ function pointParseUntagged(wkt) {
+ var pointString = wkt.match( /\(\s*([\d\.-]+)\s+([\d\.-]+)\s*\)/ );
+ return pointString && pointString.length > 2 ? {
+ type: "Point",
+ coordinates: [
+ parseFloat(pointString[1]),
+ parseFloat(pointString[2])
+ ]
+ } : null;
+ }
+
+ function lineStringParseUntagged(wkt) {
+ var lineString = wkt.match( /\s*\((.*)\)/ ),
+ coords = [],
+ pointStrings,
+ pointParts,
+ i = 0;
+
+ if ( lineString.length > 1 ) {
+ pointStrings = lineString[ 1 ].match( /[\d\.-]+\s+[\d\.-]+/g );
+
+ for ( ; i < pointStrings.length; i++ ) {
+ pointParts = pointStrings[ i ].match( /\s*([\d\.-]+)\s+([\d\.-]+)\s*/ );
+ coords[ i ] = [ parseFloat( pointParts[ 1 ] ), parseFloat( pointParts[ 2 ] ) ];
+ }
+
+ return {
+ type: "LineString",
+ coordinates: coords
+ };
+ } else {
+ return null
+ }
+ }
+
+ function polygonParseUntagged(wkt) {
+ var polygon = wkt.match( /\s*\(\s*\((.*)\)\s*\)/ ),
+ coords = [],
+ pointStrings,
+ pointParts,
+ i = 0;
+
+ if ( polygon.length > 1 ) {
+ pointStrings = polygon[ 1 ].match( /[\d\.-]+\s+[\d\.-]+/g );
+
+ for ( ; i < pointStrings.length; i++ ) {
+ pointParts = pointStrings[ i ].match( /\s*([\d\.-]+)\s+([\d\.-]+)\s*/ );
+ coords[ i ] = [ parseFloat( pointParts[ 1 ] ), parseFloat( pointParts[ 2 ] ) ];
+ }
+
+ return {
+ type: "Polygon",
+ coordinates: [ coords ]
+ };
+ } else {
+ return null;
+ }
+ }
+
+ function parse(wkt) {
+ wkt = $.trim(wkt);
+
+ var typeIndex = wkt.indexOf( " " ),
+ untagged = wkt.substr( typeIndex + 1 );
+
+ switch (wkt.substr(0, typeIndex).toUpperCase()) {
+ case "POINT":
+ return pointParseUntagged( untagged );
+
+ case "LINESTRING":
+ return lineStringParseUntagged( untagged );
+
+ case "POLYGON":
+ return polygonParseUntagged( untagged );
+
+ default:
+ return null;
+ }
+ }
+
+ return {
+ stringify: stringify,
+
+ parse: parse
+ };
+ })(),
+
+ //
+ // projection functions
+ //
+
+ proj: (function () {
+ var halfPi = 1.5707963267948966192,
+ quarterPi = 0.7853981633974483096,
+ radiansPerDegree = 0.0174532925199432958,
+ degreesPerRadian = 57.295779513082320877,
+ semiMajorAxis = 6378137;
+
+ return {
+ fromGeodeticPos: function (coordinate) {
+ if (!coordinate) {
+ debugger;
+ }
+ return [
+ semiMajorAxis * coordinate[ 0 ] * radiansPerDegree,
+ semiMajorAxis * Math.log(Math.tan(quarterPi + coordinate[ 1 ] * radiansPerDegree / 2))
+ ];
+ },
+
+ fromGeodetic: function ( coordinates ) {
+ if ( ! $.geo._isGeodetic( coordinates ) ) {
+ return coordinates;
+ }
+
+ var isMultiPointOrLineString = $.isArray(coordinates[ 0 ]),
+ fromGeodeticPos = this.fromGeodeticPos;
+
+ if (!isMultiPointOrLineString && coordinates.length == 4) {
+ // bbox
+ var min = fromGeodeticPos([ coordinates[ 0 ], coordinates[ 1 ] ]),
+ max = fromGeodeticPos([ coordinates[ 2 ], coordinates[ 3 ] ]);
+ return [ min[ 0 ], min[ 1 ], max[ 0 ], max[ 1 ] ];
+ } else {
+ // geometry
+ var isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray(coordinates[ 0 ][ 0 ]),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray(coordinates[ 0 ][ 0 ][ 0 ]),
+ result = [ ],
+ i, j, k;
+
+ if (!isMultiPolygon) {
+ if (!isMultiLineStringOrPolygon) {
+ if (!isMultiPointOrLineString) {
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+
+ for ( i = 0; i < coordinates.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < coordinates[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < coordinates[ i ][ j ].length; k++ ) {
+ result[ i ][ j ][ k ] = fromGeodeticPos(coordinates[ i ][ j ][ k ]);
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ }
+ },
+
+ toGeodeticPos: function (coordinate) {
+ return [
+ (coordinate[ 0 ] / semiMajorAxis) * degreesPerRadian,
+ (halfPi - 2 * Math.atan(1 / Math.exp(coordinate[ 1 ] / semiMajorAxis))) * degreesPerRadian
+ ];
+ },
+
+ toGeodetic: function (coordinates) {
+ if ( $.geo._isGeodetic( coordinates ) ) {
+ return coordinates;
+ }
+
+ var isMultiPointOrLineString = $.isArray(coordinates[ 0 ]),
+ toGeodeticPos = this.toGeodeticPos;
+
+ if (!isMultiPointOrLineString && coordinates.length == 4) {
+ // bbox
+ var min = toGeodeticPos([ coordinates[ 0 ], coordinates[ 1 ] ]),
+ max = toGeodeticPos([ coordinates[ 2 ], coordinates[ 3 ] ]);
+ return [ min[ 0 ], min[ 1 ], max[ 0 ], max[ 1 ] ];
+ } else {
+ // geometry
+ var isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray(coordinates[ 0 ][ 0 ]),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray(coordinates[ 0 ][ 0 ][ 0 ]),
+ result = [ ];
+
+ if (!isMultiPolygon) {
+ if (!isMultiLineStringOrPolygon) {
+ if (!isMultiPointOrLineString) {
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+
+ for ( i = 0; i < coordinates.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < coordinates[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < coordinates[ i ][ j ].length; k++ ) {
+ result[ i ][ j ][ k ] = toGeodeticPos(coordinates[ i ][ j ][ k ]);
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ }
+ }
+ }
+ })(),
+
+ //
+ // service types (defined in other files)
+ //
+
+ _serviceTypes: {}
+ }
+})(jQuery, this);
+(function ($, undefined) {
+
+ var _ieVersion = (function () {
+ var v = 5, div = document.createElement("div"), a = div.all || [];
+ while (div.innerHTML = "<!--[if gt IE " + (++v) + "]><br><![endif]-->", a[0]) { }
+ return v > 6 ? v : !v;
+ } ());
+
+ $.widget("geo.geographics", {
+ _$elem: undefined,
+ _options: {},
+ _trueCanvas: true,
+
+ _width: 0,
+ _height: 0,
+
+ _$canvas: undefined,
+ _context: undefined,
+ _$labelsContainer: undefined,
+
+ options: {
+ style: {
+ borderRadius: "8px",
+ color: "#7f0000",
+ //fill: undefined,
+ fillOpacity: .2,
+ height: "8px",
+ opacity: 1,
+ //stroke: undefined,
+ strokeOpacity: 1,
+ strokeWidth: "2px",
+ visibility: "visible",
+ width: "8px"
+ }
+ },
+
+ _create: function () {
+ this._$elem = this.element;
+ this._options = this.options;
+
+ this._$elem.css({ display: "inline-block", overflow: "hidden", textAlign: "left" });
+
+ if (this._$elem.css("position") == "static") {
+ this._$elem.css("position", "relative");
+ }
+
+ this._$elem.addClass( "geo-graphics" );
+
+ this._width = this._$elem.width();
+ this._height = this._$elem.height();
+
+ if (!(this._width && this._height)) {
+ this._width = parseInt(this._$elem.css("width"));
+ this._height = parseInt(this._$elem.css("height"));
+ }
+
+ var posCss = 'position:absolute;left:0;top:0;margin:0;padding:0;',
+ sizeCss = 'width:' + this._width + 'px;height:' + this._height + 'px;',
+ sizeAttr = 'width="' + this._width + '" height="' + this._height + '"';
+
+ if (document.createElement('canvas').getContext) {
+ this._$elem.append('<canvas ' + sizeAttr + ' style="' + posCss + '"></canvas>');
+ this._$canvas = this._$elem.children(':last');
+ this._context = this._$canvas[0].getContext("2d");
+ } else if (_ieVersion <= 8) {
+ this._trueCanvas = false;
+ this._$elem.append( '<div ' + sizeAttr + ' style="' + posCss + sizeCss + '"></div>');
+ this._$canvas = this._$elem.children(':last');
+
+ G_vmlCanvasManager.initElement(this._$canvas[0]);
+ this._context = this._$canvas[0].getContext("2d");
+ this._$canvas.children().css({ backgroundColor: "transparent", width: this._width, height: this._height });
+ }
+
+ this._$elem.append('<div class="geo-labels-container" style="' + posCss + sizeCss + '"></div>');
+ this._$labelsContainer = this._$elem.children(':last');
+ },
+
+ _setOption: function (key, value) {
+ if (key == "style") {
+ value = $.extend({}, this._options.style, value);
+ }
+ $.Widget.prototype._setOption.apply(this, arguments);
+ },
+
+ destroy: function () {
+ $.Widget.prototype.destroy.apply(this, arguments);
+ this._$elem.html("");
+ this._$elem.removeClass( "geo-graphics" );
+ },
+
+ clear: function () {
+ this._context.clearRect(0, 0, this._width, this._height);
+ this._$labelsContainer.html("");
+ },
+
+ drawArc: function (coordinates, startAngle, sweepAngle, style) {
+ style = this._getGraphicStyle(style);
+
+ if (style.visibility != "hidden" && style.opacity > 0 && style.widthValue > 0 && style.heightValue > 0) {
+ var r = Math.min(style.widthValue, style.heightValue) / 2;
+
+ startAngle = (startAngle * Math.PI / 180);
+ sweepAngle = (sweepAngle * Math.PI / 180);
+
+ this._context.save();
+ this._context.translate(coordinates[0], coordinates[1]);
+ if (style.widthValue > style.heightValue) {
+ this._context.scale(style.widthValue / style.heightValue, 1);
+ } else {
+ this._context.scale(1, style.heightValue / style.widthValue);
+ }
+
+ this._context.beginPath();
+ this._context.arc(0, 0, r, startAngle, sweepAngle, false);
+
+ if (this._trueCanvas) {
+ this._context.restore();
+ }
+
+ if (style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+ this._context.stroke();
+ }
+
+ if (!this._trueCanvas) {
+ this._context.restore();
+ }
+ }
+ },
+
+ drawPoint: function (coordinates, style) {
+ var style = this._getGraphicStyle(style);
+ if (style.widthValue == style.heightValue && style.heightValue == style.borderRadiusValue) {
+ this.drawArc(coordinates, 0, 360, style);
+ } else if (style.visibility != "hidden" && style.opacity > 0) {
+ style.borderRadiusValue = Math.min(Math.min(style.widthValue, style.heightValue) / 2, style.borderRadiusValue);
+ coordinates[0] -= style.widthValue / 2;
+ coordinates[1] -= style.heightValue / 2;
+ this._context.beginPath();
+ this._context.moveTo(coordinates[0] + style.borderRadiusValue, coordinates[1]);
+ this._context.lineTo(coordinates[0] + style.widthValue - style.borderRadiusValue, coordinates[1]);
+ this._context.quadraticCurveTo(coordinates[0] + style.widthValue, coordinates[1], coordinates[0] + style.widthValue, coordinates[1] + style.borderRadiusValue);
+ this._context.lineTo(coordinates[0] + style.widthValue, coordinates[1] + style.heightValue - style.borderRadiusValue);
+ this._context.quadraticCurveTo(coordinates[0] + style.widthValue, coordinates[1] + style.heightValue, coordinates[0] + style.widthValue - style.borderRadiusValue, coordinates[1] + style.heightValue);
+ this._context.lineTo(coordinates[0] + style.borderRadiusValue, coordinates[1] + style.heightValue);
+ this._context.quadraticCurveTo(coordinates[0], coordinates[1] + style.heightValue, coordinates[0], coordinates[1] + style.heightValue - style.borderRadiusValue);
+ this._context.lineTo(coordinates[0], coordinates[1] + style.borderRadiusValue);
+ this._context.quadraticCurveTo(coordinates[0], coordinates[1], coordinates[0] + style.borderRadiusValue, coordinates[1]);
+ this._context.closePath();
+
+ if (style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+
+ this._context.stroke();
+ }
+ }
+ },
+
+ drawLineString: function (coordinates, style) {
+ this._drawLines([coordinates], false, style);
+ },
+
+ drawPolygon: function (coordinates, style) {
+ this._drawLines(coordinates, true, style);
+ },
+
+ drawBbox: function (bbox, style) {
+ this._drawLines([[
+ [bbox[0], bbox[1]],
+ [bbox[0], bbox[3]],
+ [bbox[2], bbox[3]],
+ [bbox[2], bbox[1]],
+ [bbox[0], bbox[1]]
+ ]], true, style);
+ },
+
+ drawLabel: function( coordinates, label ) {
+ this._$labelsContainer.append( '<div class="geo-label" style="position:absolute; left:' + coordinates[ 0 ] + 'px; top:' + coordinates[ 1 ] + 'px;">' + label + '</div>');
+ },
+
+ resize: function( ) {
+ this._width = this._$elem.width();
+ this._height = this._$elem.height();
+
+ if (!(this._width && this._height)) {
+ this._width = parseInt(this._$elem.css("width"));
+ this._height = parseInt(this._$elem.css("height"));
+ }
+
+ if ( this._trueCanvas ) {
+ this._$canvas[0].width = this._width;
+ this._$canvas[0].height = this._height;
+ } else {
+ }
+
+ this._$labelsContainer.css( {
+ width: this._width,
+ height: this._height
+ } );
+ },
+
+ _getGraphicStyle: function (style) {
+ function safeParse(value) {
+ value = parseInt(value);
+ return (+value + '') === value ? +value : value;
+ }
+
+ style = $.extend({}, this._options.style, style);
+ style.borderRadiusValue = safeParse(style.borderRadius);
+ style.fill = style.fill || style.color;
+ style.doFill = style.fill && style.fillOpacity > 0;
+ style.stroke = style.stroke || style.color;
+ style.strokeWidthValue = safeParse(style.strokeWidth);
+ style.doStroke = style.stroke && style.strokeOpacity > 0 && style.strokeWidthValue > 0;
+ style.widthValue = safeParse(style.width);
+ style.heightValue = safeParse(style.height);
+ return style;
+ },
+
+ _drawLines: function (coordinates, close, style) {
+ if (!coordinates || !coordinates.length || coordinates[0].length < 2) {
+ return;
+ }
+
+ var style = this._getGraphicStyle(style),
+ i, j;
+
+ if (style.visibility != "hidden" && style.opacity > 0) {
+ this._context.beginPath();
+ this._context.moveTo(coordinates[0][0][0], coordinates[0][0][1]);
+
+ for (i = 0; i < coordinates.length; i++) {
+ for (j = 0; j < coordinates[i].length; j++) {
+ this._context.lineTo(coordinates[i][j][0], coordinates[i][j][1]);
+ }
+ }
+
+ if (close) {
+ this._context.closePath();
+ }
+
+ if (close && style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineCap = this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+ this._context.stroke();
+ }
+ }
+ }
+ });
+
+
+})(jQuery);
+
+(function ($, undefined) {
+ var _ieVersion = (function () {
+ var v = 5, div = document.createElement("div"), a = div.all || [];
+ while (div.innerHTML = "<!--[if gt IE " + (++v) + "]><br><![endif]-->", a[0]) { }
+ return v > 6 ? v : !v;
+ } ()),
+
+ _defaultOptions = {
+ bbox: [-180, -85, 180, 85],
+ bboxMax: [-180, -85, 180, 85],
+ center: [0, 0],
+ cursors: {
+ "static": "default",
+ pan: "url(data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAgACAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=), move",
+ zoom: "crosshair",
+ drawPoint: "crosshair",
+ drawLineString: "crosshair",
+ drawPolygon: "crosshair",
+ measureLength: "crosshair",
+ measureArea: "crosshair"
+ },
+ measureLabels: {
+ length: "{{=length.toFixed( 2 )}} m",
+ area: "{{=area.toFixed( 2 )}} sq m"
+ },
+ drawStyle: {},
+ shapeStyle: {},
+ mode: "pan",
+ pannable: true,
+ scroll: "default",
+ services: [
+ {
+ "class": "osm",
+ type: "tiled",
+ src: function (view) {
+ return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "© OpenStreetMap & contributors, CC-BY-SA"
+ }
+ ],
+ tilingScheme: {
+ tileWidth: 256,
+ tileHeight: 256,
+ levels: 18,
+ basePixelSize: 156543.03392799936,
+ origin: [-20037508.342787, 20037508.342787]
+ },
+ axisLayout: "map",
+ zoom: 0,
+ pixelSize: 0
+ };
+
+ $.widget("geo.geomap", {
+ // private widget members
+ _$elem: undefined, //< map div for maps, service div for services
+ _map: undefined, //< only defined in services
+ _created: false,
+
+ _contentBounds: {},
+
+ _$resizeContainer: undefined, //< all elements that should match _contentBounds' size
+
+ _$eventTarget: undefined,
+ _$contentFrame: undefined,
+ _$existingChildren: undefined,
+ _$attrList: undefined,
+ _$servicesContainer: undefined,
+
+ _$panContainer: undefined, //< all non-service elements that move while panning
+ _$shapesContainer: undefined,
+ _$drawContainer: undefined,
+ _$measureContainer: undefined,
+ _$measureLabel: undefined,
+
+ _dpi: 96,
+
+ _currentServices: [], //< internal copy
+
+ _center: undefined,
+ _pixelSize: undefined,
+ _centerMax: undefined,
+ _pixelSizeMax: undefined,
+
+ _userGeodetic: true,
+
+ _wheelTimeout: null,
+ _wheelLevel: 0,
+
+ _zoomFactor: 2, //< determines what a zoom level means
+
+ _fullZoomFactor: 2, //< interactiveScale factor needed to zoom a whole level
+ _partialZoomFactor: 1.18920711500273, //< interactiveScale factor needed to zoom a fraction of a level (the fourth root of 2)
+
+ _mouseDown: undefined,
+ _inOp: undefined,
+ _toolPan: undefined,
+ _shiftZoom: undefined,
+ _anchor: undefined,
+ _current: undefined,
+ _downDate: undefined,
+ _moveDate: undefined,
+ _clickDate: undefined,
+ _lastMove: undefined,
+ _lastDrag: undefined,
+
+ _windowHandler: null,
+ _resizeTimeout: null,
+
+ _panning: undefined,
+ _velocity: undefined,
+ _friction: undefined,
+
+ _supportTouch: undefined,
+ _softDblClick: undefined,
+ _isTap: undefined,
+ _isDbltap: undefined,
+
+ _isMultiTouch: undefined,
+ _multiTouchAnchor: undefined, //< TouchList
+ _multiTouchAnchorBbox: undefined, //< bbox
+ _multiTouchCurrentBbox: undefined, //< bbox
+
+ _drawTimeout: null, //< used in drawPoint mode so we don't send two shape events on dbltap
+ _drawPixels: [], //< an array of coordinate arrays for drawing lines & polygons, in pixel coordinates
+ _drawCoords: [],
+
+ _graphicShapes: [], //< an array of objects containing style object refs & GeoJSON object refs
+
+ _initOptions: {},
+
+ _options: {},
+
+ options: $.extend({}, _defaultOptions),
+
+ _createWidget: function (options, element) {
+ this._$elem = $(element);
+
+ if (this._$elem.is(".geo-service")) {
+ var $contentFrame = this._$elem.closest( ".geo-content-frame" );
+ this._$elem.append('<div class="geo-shapes-container" style="position:absolute; left:0; top:0; width:' + $contentFrame.css( "width" ) + '; height:' + $contentFrame.css( "height" ) + '; margin:0; padding:0;"></div>');
+ this._$shapesContainer = this._$elem.children(':last');
+ this._graphicShapes = [];
+ $.Widget.prototype._createWidget.apply(this, arguments);
+ return;
+ }
+
+ this._$elem.addClass("geo-map");
+
+ this._initOptions = options || {};
+
+ this._forcePosition(this._$elem);
+
+ this._$elem.css("text-align", "left");
+
+ var size = this._findMapSize();
+ this._contentBounds = {
+ x: parseInt(this._$elem.css("padding-left")),
+ y: parseInt(this._$elem.css("padding-top")),
+ width: size["width"],
+ height: size["height"]
+ };
+
+ this._createChildren();
+
+ this._center = this._centerMax = [0, 0];
+
+ this.options["pixelSize"] = this._pixelSize = this._pixelSizeMax = 156543.03392799936;
+
+ this._mouseDown =
+ this._inOp =
+ this._toolPan =
+ this._shiftZoom =
+ this._panning =
+ this._isTap =
+ this._isDbltap = false;
+
+ this._anchor = [ 0, 0 ];
+ this._current = [ 0, 0 ];
+ this._lastMove = [ 0, 0 ];
+ this._lastDrag = [ 0, 0 ];
+ this._velocity = [ 0, 0 ];
+
+ this._friction = [.8, .8];
+
+ this._downDate =
+ this._moveDate =
+ this._clickDate = 0;
+
+ this._drawPixels = [];
+ this._drawCoords = [];
+ this._graphicShapes = [];
+
+
+ $.Widget.prototype._createWidget.apply(this, arguments);
+ },
+
+ _create: function () {
+ this._options = this.options;
+
+ if (this._$elem.is(".geo-service")) {
+ this._map = this._$elem.data( "geoMap" );
+ this._$shapesContainer.geographics( );
+ this._options["shapeStyle"] = this._$shapesContainer.geographics("option", "style");
+ return;
+ }
+
+ this._map = this;
+
+ this._supportTouch = "ontouchend" in document;
+ this._softDblClick = this._supportTouch || _ieVersion == 7;
+
+ var geomap = this,
+ touchStartEvent = this._supportTouch ? "touchstart" : "mousedown",
+ touchStopEvent = this._supportTouch ? "touchend touchcancel" : "mouseup",
+ touchMoveEvent = this._supportTouch ? "touchmove" : "mousemove";
+
+ $(document).keydown($.proxy(this._document_keydown, this));
+
+ this._$eventTarget.dblclick($.proxy(this._eventTarget_dblclick, this));
+
+ this._$eventTarget.bind(touchStartEvent, $.proxy(this._eventTarget_touchstart, this));
+
+ var dragTarget = (this._$eventTarget[0].setCapture) ? this._$eventTarget : $(document);
+ dragTarget.bind(touchMoveEvent, $.proxy(this._dragTarget_touchmove, this));
+ dragTarget.bind(touchStopEvent, $.proxy(this._dragTarget_touchstop, this));
+
+ this._$eventTarget.mousewheel($.proxy(this._eventTarget_mousewheel, this));
+
+ this._windowHandler = function () {
+ if (geomap._resizeTimeout) {
+ clearTimeout(geomap._resizeTimeout);
+ }
+ geomap._resizeTimeout = setTimeout(function () {
+ if (geomap._created) {
+ geomap._$elem.geomap("resize");
+ }
+ }, 500);
+ };
+
+ $(window).resize(this._windowHandler);
+
+ this._$drawContainer.geographics({ style: this._initOptions.drawStyle || {} });
+ this._options["drawStyle"] = this._$drawContainer.geographics("option", "style");
+
+ this._$shapesContainer.geographics( { style: this._initOptions.shapeStyle || { } } );
+ this._options["shapeStyle"] = this._$shapesContainer.geographics("option", "style");
+
+ if (this._initOptions) {
+ if (this._initOptions.tilingScheme) {
+ this._setOption("tilingScheme", this._initOptions.tilingScheme, false);
+ }
+ if ( this._initOptions.services ) {
+ // jQuery UI Widget Factory merges user services with our default, we want to clobber the default
+ this._options[ "services" ] = $.merge( [ ], this._initOptions.services );
+ }
+ if (this._initOptions.bbox) {
+ this._setOption("bbox", this._initOptions.bbox, false);
+ }
+ if (this._initOptions.center) {
+ this._setOption("center", this._initOptions.center, false);
+ }
+ if (this._initOptions.zoom !== undefined) {
+ this._setZoom(this._initOptions.zoom, false, false);
+ }
+ }
+
+ $.template( "geoMeasureLength", this._options[ "measureLabels" ].length );
+ $.template( "geoMeasureArea", this._options[ "measureLabels" ].area );
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+
+ this._createServices();
+ this._refresh();
+
+ this._created = true;
+ },
+
+ _setOption: function (key, value, refresh) {
+ if ( key == "pixelSize" ) {
+ return;
+ }
+
+ refresh = (refresh === undefined || refresh);
+
+ if ( this._$elem.is( ".geo-map" ) ) {
+ this._panFinalize();
+ }
+
+ switch (key) {
+ case "bbox":
+ this._userGeodetic = $.geo.proj && $.geo._isGeodetic( value );
+ if ( this._userGeodetic ) {
+ value = $.geo.proj.fromGeodetic( value );
+ }
+
+ this._setBbox(value, false, refresh);
+ value = this._getBbox();
+ break;
+
+ case "center":
+ this._userGeodetic = $.geo.proj && $.geo._isGeodetic( value );
+ if ( this._userGeodetic ) {
+ value = $.geo.proj.fromGeodetic( value );
+ }
+
+ this._setCenterAndSize( value, this._pixelSize, false, refresh );
+ break;
+
+ case "measureLabels":
+ value = $.extend( this._options[ "measureLabels" ], value );
+ $.template( "geoMeasureLength", value.length );
+ $.template( "geoMeasureArea", value.area );
+ break;
+
+ case "drawStyle":
+ if (this._$drawContainer) {
+ this._$drawContainer.geographics("option", "style", value);
+ value = this._$drawContainer.geographics("option", "style");
+ }
+ break;
+
+ case "shapeStyle":
+ if (this._$shapesContainer) {
+ this._$shapesContainer.geographics("option", "style", value);
+ value = this._$shapesContainer.geographics("option", "style");
+ }
+ break;
+
+ case "mode":
+ this._resetDrawing( );
+ this._$eventTarget.css("cursor", this._options["cursors"][value]);
+ break;
+
+ case "zoom":
+ this._setZoom(value, false, refresh);
+ break;
+ }
+
+ $.Widget.prototype._setOption.apply(this, arguments);
+
+ switch ( key ) {
+ case "bbox":
+ case "center":
+ if ( this._userGeodetic ) {
+ this._options[ "bbox" ] = $.geo.proj.toGeodetic( this._options[ "bbox" ] );
+ this._options[ "center" ] = $.geo.proj.toGeodetic( this._center );
+ }
+ break;
+
+ case "tilingScheme":
+ if ( value != null ) {
+ this._pixelSizeMax = this._getPixelSize( 0 );
+ this._centerMax = [
+ value.origin[ 0 ] + this._pixelSizeMax * value.tileWidth / 2,
+ value.origin[ 1 ] + this._pixelSizeMax * value.tileHeight / 2
+ ];
+ }
+ break;
+
+ case "bboxMax":
+ this._pixelSizeMax = this._getPixelSize( 0 );
+
+ if ( $.geo.proj && $.geo._isGeodetic( value ) ) {
+ this._centerMax = $.geo.center( $.geo.proj.fromGeodetic( value ) );
+ } else {
+ this._centerMax = $.geo.center( value );
+ }
+ break;
+
+ case "services":
+ this._createServices();
+ if (refresh) {
+ this._refresh();
+ }
+ break;
+
+ case "shapeStyle":
+ if ( refresh ) {
+ this._$shapesContainer.geographics("clear");
+ this._refreshShapes( this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes );
+ }
+ break;
+ }
+ },
+
+ destroy: function () {
+ if ( this._$elem.is(".geo-service") ) {
+ this._$shapesContainer.geographics("destroy");
+ this._$shapesContainer = undefined;
+ } else {
+ this._created = false;
+
+ $(window).unbind("resize", this._windowHandler);
+
+ for ( var i = 0; i < this._currentServices.length; i++ ) {
+ this._currentServices[ i ].serviceContainer.geomap("destroy");
+ $.geo["_serviceTypes"][this._currentServices[i].type].destroy(this, this._$servicesContainer, this._currentServices[i]);
+ }
+
+ this._$shapesContainer.geographics("destroy");
+ this._$shapesContainer = undefined;
+ this._$drawContainer.geographics("destroy");
+ this._$drawContainer = undefined;
+
+ this._$existingChildren.detach();
+ this._$elem.html("");
+ this._$elem.append(this._$existingChildren);
+ this._$elem.removeClass("geo-map");
+ }
+
+ $.Widget.prototype.destroy.apply(this, arguments);
+ },
+
+ toMap: function (p) {
+ p = this._toMap(p);
+ return this._userGeodetic ? $.geo.proj.toGeodetic(p) : p;
+ },
+
+ toPixel: function ( p, _center /* Internal Use Only */, _pixelSize /* Internal Use Only */ ) {
+ return this._toPixel( $.geo.proj ? $.geo.proj.fromGeodetic( p ) : p, _center, _pixelSize );
+ },
+
+ opacity: function ( value, _serviceContainer ) {
+ if ( this._$elem.is( ".geo-service" ) ) {
+ this._$elem.closest( ".geo-map" ).geomap( "opacity", value, this._$elem );
+ } else {
+ if ( value >= 0 || value <= 1 ) {
+ for ( var i = 0; i < this._currentServices.length; i++ ) {
+ var service = this._currentServices[ i ];
+ if ( !_serviceContainer || service.serviceContainer[ 0 ] == _serviceContainer[ 0 ] ) {
+ service.style.opacity = value;
+ $.geo[ "_serviceTypes" ][ service.type ].opacity( this, service );
+ }
+ }
+ }
+ }
+ },
+
+ toggle: function ( value, _serviceContainer ) {
+ if ( this._$elem.is( ".geo-service" ) ) {
+ this._$elem.closest( ".geo-map" ).geomap( "toggle", value, this._$elem );
+ } else {
+
+ for ( var i = 0; i < this._currentServices.length; i++ ) {
+ var service = this._currentServices[ i ];
+
+ if ( !_serviceContainer || service.serviceContainer[ 0 ] == _serviceContainer[ 0 ] ) {
+ if ( value === undefined ) {
+ // toggle visibility
+ value = ( service.style.visibility !== "visible" );
+ }
+
+ service.style.visibility = ( value ? "visible" : "hidden" );
+
+ service.serviceContainer.toggle( value );
+
+ if ( value ) {
+ $.geo[ "_serviceTypes" ][ service.type ].refresh( this, service );
+ }
+ }
+ }
+ }
+ },
+
+ zoom: function (numberOfLevels) {
+ if (numberOfLevels != null) {
+ this._setZoom(this._options["zoom"] + numberOfLevels, false, true);
+ }
+ },
+
+ refresh: function () {
+ this._refresh();
+ },
+
+ resize: function () {
+ var size = this._findMapSize(),
+ dx = size["width"]/2 - this._contentBounds.width/2,
+ dy = size["height"]/2 - this._contentBounds.height/2,
+ i;
+
+ this._contentBounds = {
+ x: parseInt(this._$elem.css("padding-left")),
+ y: parseInt(this._$elem.css("padding-top")),
+ width: size["width"],
+ height: size["height"]
+ };
+
+ this._$resizeContainer.css( {
+ width: size["width"],
+ height: size["height"]
+ } );
+
+ for (i = 0; i < this._currentServices.length; i++) {
+ $.geo["_serviceTypes"][this._currentServices[i].type].resize(this, this._currentServices[i]);
+ }
+
+ this._$elem.find( ".geo-graphics" ).css( {
+ width: size["width"],
+ height: size["height"]
+ }).geographics( "resize" );
+
+ for (i = 0; i < this._drawPixels.length; i++) {
+ this._drawPixels[i][0] += dx;
+ this._drawPixels[i][1] += dy;
+ }
+
+ this._setCenterAndSize(this._center, this._pixelSize, false, true);
+ },
+
+ append: function ( shape, style, label, refresh ) {
+ if ( shape && $.isPlainObject( shape ) ) {
+ var shapes, arg, i, realStyle, realLabel, realRefresh;
+
+ if ( shape.type == "FeatureCollection" ) {
+ shapes = shape.features;
+ } else {
+ shapes = $.isArray( shape ) ? shape : [ shape ];
+ }
+
+ for ( i = 1; i < arguments.length; i++ ) {
+ arg = arguments[ i ];
+
+ if ( typeof arg === "object" ) {
+ realStyle = arg;
+ } else if ( typeof arg === "number" || typeof arg === "string" ) {
+ realLabel = arg;
+ } else if ( typeof arg === "boolean" ) {
+ realRefresh = arg;
+ }
+ }
+
+ for ( i = 0; i < shapes.length; i++ ) {
+ if ( shapes[ i ].type != "Point" ) {
+ var bbox = $.geo.bbox( shapes[ i ] );
+ if ( $.geo.proj && $.geo._isGeodetic( bbox ) ) {
+ bbox = $.geo.proj.fromGeodetic( bbox );
+ }
+ $.data( shapes[ i ], "geoBbox", bbox );
+ }
+
+ this._graphicShapes.push( {
+ shape: shapes[ i ],
+ style: realStyle,
+ label: realLabel
+ } );
+ }
+
+ if ( realRefresh === undefined || realRefresh ) {
+ this._refresh( );
+ }
+ }
+ },
+
+ empty: function ( refresh ) {
+ for ( var i = 0; i < this._graphicShapes.length; i++ ) {
+ $.removeData( this._graphicShapes[ i ].shape, "geoBbox" );
+ }
+
+ this._graphicShapes = [];
+
+ if ( refresh === undefined || refresh ) {
+ this._refresh();
+ }
+ },
+
+ find: function ( selector, pixelTolerance ) {
+ var isPoint = $.isPlainObject( selector ),
+ searchPixel = isPoint ? this._map.toPixel( selector.coordinates ) : undefined,
+ mapTol = this._map._pixelSize * pixelTolerance,
+ result = [],
+ graphicShape,
+ geometries,
+ curGeom,
+ i = 0;
+
+ for ( ; i < this._graphicShapes.length; i++ ) {
+ graphicShape = this._graphicShapes[ i ];
+
+ if ( isPoint ) {
+ if ( graphicShape.shape.type == "Point" ) {
+ if ( $.geo.distance( graphicShape.shape, selector ) <= mapTol ) {
+ result.push( graphicShape.shape );
+ }
+ } else {
+ var bbox = $.data( graphicShape.shape, "geoBbox" ),
+ bboxPolygon = {
+ type: "Polygon",
+ coordinates: [ [
+ [bbox[0], bbox[1]],
+ [bbox[0], bbox[3]],
+ [bbox[2], bbox[3]],
+ [bbox[2], bbox[1]],
+ [bbox[0], bbox[1]]
+ ] ]
+ },
+ projectedPoint = {
+ type: "Point",
+ coordinates: $.geo.proj && $.geo._isGeodetic( selector.coordinates ) ? $.geo.proj.fromGeodetic( selector.coordinates ) : selector.coordinates
+ };
+
+ if ( $.geo.distance( bboxPolygon, projectedPoint, true ) <= mapTol ) {
+ geometries = $.geo._flatten( graphicShape.shape );
+ for ( curGeom = 0; curGeom < geometries.length; curGeom++ ) {
+ if ( $.geo.distance( geometries[ curGeom ], selector ) <= mapTol ) {
+ result.push( graphicShape.shape );
+ break;
+ }
+ }
+ }
+ }
+ } else {
+ result.push( graphicShape.shape );
+ }
+ }
+
+ if ( this._$elem.is( ".geo-map" ) ) {
+ this._$elem.find( ".geo-service" ).each( function( ) {
+ result = $.merge( result, $( this ).geomap( "find", selector, pixelTolerance ) );
+ } );
+ }
+
+ return result;
+ },
+
+ remove: function ( shape, refresh ) {
+ for ( var i = 0; i < this._graphicShapes.length; i++ ) {
+ if ( this._graphicShapes[ i ].shape == shape ) {
+ $.removeData( shape, "geoBbox" );
+ var rest = this._graphicShapes.slice( i + 1 );
+ this._graphicShapes.length = i;
+ this._graphicShapes.push.apply( this._graphicShapes, rest );
+ break;
+ }
+ }
+
+ if ( refresh === undefined || refresh ) {
+ this._refresh();
+ }
+ },
+
+ _getBbox: function (center, pixelSize) {
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ // calculate the internal bbox
+ var halfWidth = this._contentBounds[ "width" ] / 2 * pixelSize,
+ halfHeight = this._contentBounds[ "height" ] / 2 * pixelSize;
+ return [ center[ 0 ] - halfWidth, center[ 1 ] - halfHeight, center[ 0 ] + halfWidth, center[ 1 ] + halfHeight ];
+ },
+
+ _setBbox: function (value, trigger, refresh) {
+ var center = [value[0] + (value[2] - value[0]) / 2, value[1] + (value[3] - value[1]) / 2],
+ pixelSize = Math.max($.geo.width(value, true) / this._contentBounds.width, $.geo.height(value, true) / this._contentBounds.height);
+
+ if (this._options["tilingScheme"]) {
+ var zoom = this._getZoom( center, pixelSize );
+ pixelSize = this._getPixelSize( zoom );
+ } else {
+ if ( this._getZoom( center, pixelSize ) < 0 ) {
+ pixelSize = this._pixelSizeMax;
+ }
+ }
+
+ this._setCenterAndSize(center, pixelSize, trigger, refresh);
+ },
+
+ _getBboxMax: function () {
+ // calculate the internal bboxMax
+ var halfWidth = this._contentBounds["width"] / 2 * this._pixelSizeMax,
+ halfHeight = this._contentBounds["height"] / 2 * this._pixelSizeMax;
+ return [this._centerMax[0] - halfWidth, this._centerMax[1] - halfHeight, this._centerMax[0] + halfWidth, this._centerMax[1] + halfHeight];
+ },
+
+ _getCenter: function () {
+ return this._center;
+ },
+
+ _getContentBounds: function () {
+ return this._contentBounds;
+ },
+
+ _getServicesContainer: function () {
+ return this._$servicesContainer;
+ },
+
+ _getZoom: function ( center, pixelSize ) {
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ // calculate the internal zoom level, vs. public zoom property
+ var tilingScheme = this._options["tilingScheme"];
+ if ( tilingScheme ) {
+ if ( tilingScheme.pixelSizes != null ) {
+ var roundedPixelSize = Math.floor(pixelSize * 1000),
+ levels = tilingScheme.pixelSizes.length,
+ i = levels - 1;
+
+ for ( ; i >= 0; i-- ) {
+ if ( Math.floor( tilingScheme.pixelSizes[ i ] * 1000 ) >= roundedPixelSize ) {
+ return i;
+ }
+ }
+
+ return 0;
+ } else {
+ return Math.max( Math.round( Math.log( tilingScheme.basePixelSize / pixelSize) / Math.log( 2 ) ), 0 );
+ }
+ } else {
+ var ratio = this._contentBounds["width"] / this._contentBounds["height"],
+ bbox = $.geo.reaspect( this._getBbox( center, pixelSize ), ratio, true ),
+ bboxMax = $.geo.reaspect(this._getBboxMax(), ratio, true);
+
+ return Math.max( Math.round( Math.log($.geo.width(bboxMax, true) / $.geo.width(bbox, true)) / Math.log(this._zoomFactor) ), 0 );
+ }
+ },
+
+ _setZoom: function ( value, trigger, refresh ) {
+ value = Math.max( value, 0 );
+
+ this._setCenterAndSize( this._center, this._getPixelSize( value ), trigger, refresh );
+ },
+
+ _createChildren: function () {
+ this._$existingChildren = this._$elem.children().detach();
+
+ this._forcePosition(this._$existingChildren);
+
+ this._$existingChildren.css("-moz-user-select", "none");
+
+ var contentSizeCss = "width:" + this._contentBounds["width"] + "px; height:" + this._contentBounds["height"] + "px; margin:0; padding:0;",
+ contentPosCss = "position:absolute; left:0; top:0;";
+
+ this._$elem.prepend('<div class="geo-event-target geo-content-frame" style="position:absolute; left:' + this._contentBounds.x + 'px; top:' + this._contentBounds.y + 'px;' + contentSizeCss + 'overflow:hidden; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none;" unselectable="on"></div>');
+ this._$eventTarget = this._$contentFrame = this._$elem.children(':first');
+
+ this._$contentFrame.append('<div class="geo-services-container" style="' + contentPosCss + contentSizeCss + '"></div>');
+ this._$servicesContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append('<div class="geo-shapes-container" style="' + contentPosCss + contentSizeCss + '"></div>');
+ this._$shapesContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append( '<ul style="position: absolute; bottom: 8px; left: 8px; list-style-type: none; max-width: 50%; padding: 0; margin: 0;"></ul>' );
+ this._$attrList = this._$contentFrame.children( ":last" );
+
+ this._$contentFrame.append('<div class="geo-draw-container" style="' + contentPosCss + contentSizeCss + '"></div>');
+ this._$drawContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append('<div class="geo-measure-container" style="' + contentPosCss + contentSizeCss + '"><div class="geo-measure-label" style="' + contentPosCss + '; display: none;"></div></div>');
+ this._$measureContainer = this._$contentFrame.children(':last');
+ this._$measureLabel = this._$measureContainer.children();
+
+ this._$panContainer = $( [ this._$shapesContainer[ 0 ], this._$drawContainer[ 0 ], this._$measureContainer[ 0 ] ] );
+
+ this._$resizeContainer = $( [ this._$contentFrame[ 0 ], this._$servicesContainer[ 0 ], this._$eventTarget[ 0 ], this._$measureContainer[ 0 ] ] );
+
+ this._$contentFrame.append(this._$existingChildren);
+
+ if ( ! $("#geo-measure-style").length ) {
+ $("head").prepend( '<style type="text/css" id="geo-measure-style">.geo-measure-label { margin: 4px 0 0 6px; font-family: sans-serif;' + ( _ieVersion ? 'letter-spacing: 2px; color: #444; filter:progid:DXImageTransform.Microsoft.DropShadow(Color=white, OffX=1, OffY=2, Positive=true);' : 'color: #000; text-shadow: #fff 1px 2px; font-weight: bold;' ) + ' }</style>' );
+ }
+ },
+
+ _createServices: function () {
+ var service, i;
+
+ for ( i = 0; i < this._currentServices.length; i++ ) {
+ this._currentServices[ i ].serviceContainer.geomap( "destroy" );
+ $.geo[ "_serviceTypes" ][ this._currentServices[ i ].type ].destroy( this, this._$servicesContainer, this._currentServices[ i ] );
+ }
+
+ this._currentServices = [ ];
+ this._$servicesContainer.html( "" );
+ this._$attrList.html( "" );
+
+ for ( i = 0; i < this._options[ "services" ].length; i++ ) {
+ service = this._currentServices[ i ] = $.extend( { }, this._options[ "services" ][ i ] );
+
+ // default the service style property on our copy
+ service.style = $.extend( {
+ visibility: "visible",
+ opacity: 1
+ }, service.style );
+
+ var idString = service.id ? ' id="' + service.id + '"' : "",
+ classString = 'class="geo-service ' + ( service["class"] ? service["class"] : '' ) + '"',
+ scHtml = '<div ' + idString + classString + ' style="position:absolute; left:0; top:0; width:32px; height:32px; margin:0; padding:0; display:' + ( service.style.visibility === "visible" ? "block" : "none" ) + ';"></div>',
+ servicesContainer;
+
+ this._$servicesContainer.append( scHtml );
+ serviceContainer = this._$servicesContainer.children( ":last" );
+ this._currentServices[ i ].serviceContainer = serviceContainer;
+
+ $.geo[ "_serviceTypes" ][ service.type ].create( this, serviceContainer, service, i );
+
+ serviceContainer.data( "geoMap", this ).geomap();
+
+ if ( service.attr ) {
+ this._$attrList.append( '<li>' + service.attr + '</li>' );
+ }
+ }
+
+ this._$attrList.find( "a" ).css( {
+ position: "relative",
+ zIndex: 100
+ } );
+ },
+
+ _refreshDrawing: function ( ) {
+ this._$drawContainer.geographics("clear");
+
+ if ( this._drawPixels.length > 0 ) {
+ var mode = this._options[ "mode" ],
+ pixels = this._drawPixels,
+ coords = this._drawCoords,
+ label,
+ labelShape,
+ labelPixel,
+ widthOver,
+ heightOver;
+
+ switch ( mode ) {
+ case "measureLength":
+ mode = "drawLineString";
+ labelShape = {
+ type: "LineString",
+ coordinates: coords
+ };
+ label = $.render( { length: $.geo.length( labelShape, true ) }, "geoMeasureLength" );
+ labelPixel = $.merge( [], pixels[ pixels.length - 1 ] );
+ break;
+
+ case "measureArea":
+ mode = "drawPolygon";
+
+ labelShape = {
+ type: "Polygon",
+ coordinates: [ $.merge( [ ], coords ) ]
+ };
+ labelShape.coordinates[ 0 ].push( coords[ 0 ] );
+
+ label = $.render( { area: $.geo.area( labelShape, true ) }, "geoMeasureArea" );
+ labelPixel = $.merge( [], pixels[ pixels.length - 1 ] );
+ pixels = [ pixels ];
+ break;
+
+ case "drawPolygon":
+ pixels = [ pixels ];
+ break;
+ }
+
+ this._$drawContainer.geographics( mode, pixels );
+
+ if ( label ) {
+ this._$measureLabel.html( label );
+
+ widthOver = this._contentBounds.width - ( this._$measureLabel.outerWidth( true ) + labelPixel[ 0 ] );
+ heightOver = this._contentBounds.height - ( this._$measureLabel.outerHeight( true ) + labelPixel[ 1 ] );
+
+ if ( widthOver < 0 ) {
+ labelPixel[ 0 ] += widthOver;
+ }
+
+ if ( heightOver < 0 ) {
+ labelPixel[ 1 ] += heightOver;
+ }
+
+ this._$measureLabel.css( {
+ left: labelPixel[ 0 ],
+ top: labelPixel[ 1 ]
+ } ).show();
+ }
+ }
+ },
+
+ _resetDrawing: function () {
+ this._drawPixels = [];
+ this._drawCoords = [];
+ this._$drawContainer.geographics("clear");
+ this._$measureLabel.hide();
+ },
+
+ _refreshShapes: function (geographics, shapes, styles, labels, center, pixelSize) {
+ var i, mgi,
+ shape,
+ shapeBbox,
+ style,
+ label,
+ hasLabel,
+ labelPixel,
+ bbox = this._map._getBbox(center, pixelSize);
+
+ for (i = 0; i < shapes.length; i++) {
+ shape = shapes[i].shape || shapes[i];
+ shape = shape.geometry || shape;
+ shapeBbox = $.data(shape, "geoBbox");
+
+ if ( shapeBbox && $.geo._bboxDisjoint( bbox, shapeBbox ) ) {
+ continue;
+ }
+
+ style = $.isArray(styles) ? styles[i].style : styles;
+ label = $.isArray(labels) ? labels[i].label : labels;
+ hasLabel = ( label !== undefined );
+ labelPixel = undefined;
+
+ switch (shape.type) {
+ case "Point":
+ labelPixel = this._map.toPixel( shape.coordinates, center, pixelSize );
+ this._$shapesContainer.geographics("drawPoint", labelPixel, style);
+ break;
+ case "LineString":
+ this._$shapesContainer.geographics("drawLineString", this._map.toPixel(shape.coordinates, center, pixelSize), style);
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.pointAlong( shape, .5 ).coordinates, center, pixelSize );
+ }
+ break;
+ case "Polygon":
+ this._$shapesContainer.geographics("drawPolygon", this._map.toPixel(shape.coordinates, center, pixelSize), style);
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+ case "MultiPoint":
+ for (mgi = 0; mgi < shape.coordinates.length; mgi++) {
+ this._$shapesContainer.geographics("drawPoint", this._map.toPixel(shape.coordinates[mgi], center, pixelSize), style);
+ }
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+ case "MultiLineString":
+ for (mgi = 0; mgi < shape.coordinates.length; mgi++) {
+ this._$shapesContainer.geographics("drawLineString", this._map.toPixel(shape.coordinates[mgi], center, pixelSize), style);
+ }
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+ case "MultiPolygon":
+ for (mgi = 0; mgi < shape.coordinates.length; mgi++) {
+ this._$shapesContainer.geographics("drawPolygon", this._map.toPixel(shape.coordinates[mgi], center, pixelSize), style);
+ }
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+
+ case "GeometryCollection":
+ this._refreshShapes(geographics, shape.geometries, style, label, center, pixelSize);
+ break;
+ }
+
+ if ( hasLabel && labelPixel ) {
+ this._$shapesContainer.geographics( "drawLabel", labelPixel, label );
+ }
+ }
+ },
+
+ _findMapSize: function () {
+ // really, really attempt to find a size for this thing
+ // even if it's hidden (look at parents)
+ var size = { width: 0, height: 0 },
+ sizeContainer = this._$elem;
+
+ while (sizeContainer.size() && !(size["width"] > 0 && size["height"] > 0)) {
+ size = { width: sizeContainer.width(), height: sizeContainer.height() };
+ if (size["width"] <= 0 || size["height"] <= 0) {
+ size = { width: parseInt(sizeContainer.css("width")), height: parseInt(sizeContainer.css("height")) };
+ }
+ sizeContainer = sizeContainer.parent();
+ }
+ return size;
+ },
+
+ _forcePosition: function (elem) {
+ var cssPosition = elem.css("position");
+ if (cssPosition != "relative" && cssPosition != "absolute" && cssPosition != "fixed") {
+ elem.css("position", "relative");
+ }
+ },
+
+ _getPixelSize: function ( zoom ) {
+ var tilingScheme = this._options["tilingScheme"];
+ if (tilingScheme != null) {
+ if (zoom === 0) {
+ return tilingScheme.pixelSizes != null ? tilingScheme.pixelSizes[0] : tilingScheme.basePixelSize;
+ }
+
+ zoom = Math.round(zoom);
+ zoom = Math.max(zoom, 0);
+ var levels = tilingScheme.pixelSizes != null ? tilingScheme.pixelSizes.length : tilingScheme.levels;
+ zoom = Math.min(zoom, levels - 1);
+
+ if (tilingScheme.pixelSizes != null) {
+ return tilingScheme.pixelSizes[zoom];
+ } else {
+ return tilingScheme.basePixelSize / Math.pow(2, zoom);
+ }
+ } else {
+ var bbox = $.geo.scaleBy( this._getBboxMax(), 1 / Math.pow( this._zoomFactor, zoom ), true );
+ return Math.max( $.geo.width( bbox, true ) / this._contentBounds.width, $.geo.height( bbox, true ) / this._contentBounds.height );
+ }
+ },
+
+ _getZoomCenterAndSize: function ( anchor, zoomDelta, full ) {
+ var zoomFactor = ( full ? this._fullZoomFactor : this._partialZoomFactor ),
+ scale = Math.pow( zoomFactor, -zoomDelta ),
+ pixelSize,
+ zoomLevel;
+
+ if ( this._options[ "tilingScheme" ] ) {
+ zoomLevel = this._getZoom(this._center, this._pixelSize * scale);
+ pixelSize = this._getPixelSize(zoomLevel);
+ } else {
+ pixelSize = this._pixelSize * scale;
+
+ if ( this._getZoom( this._center, pixelSize ) < 0 ) {
+ pixelSize = this._pixelSizeMax;
+ }
+ }
+
+ var ratio = pixelSize / this._pixelSize,
+ anchorMapCoord = this._toMap(anchor),
+ centerDelta = [(this._center[0] - anchorMapCoord[0]) * ratio, (this._center[1] - anchorMapCoord[1]) * ratio],
+ scaleCenter = [anchorMapCoord[0] + centerDelta[0], anchorMapCoord[1] + centerDelta[1]];
+
+ return { pixelSize: pixelSize, center: scaleCenter };
+ },
+
+ _mouseWheelFinish: function () {
+ this._wheelTimeout = null;
+
+ if (this._wheelLevel != 0) {
+ var wheelCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, this._options[ "tilingScheme" ] != null );
+
+ this._setCenterAndSize(wheelCenterAndSize.center, wheelCenterAndSize.pixelSize, true, true);
+
+ this._wheelLevel = 0;
+ } else {
+ this._refresh();
+ }
+ },
+
+ _panEnd: function () {
+ this._velocity = [
+ (this._velocity[0] > 0 ? Math.floor(this._velocity[0] * this._friction[0]) : Math.ceil(this._velocity[0] * this._friction[0])),
+ (this._velocity[1] > 0 ? Math.floor(this._velocity[1] * this._friction[1]) : Math.ceil(this._velocity[1] * this._friction[1]))
+ ];
+
+ if (Math.abs(this._velocity[0]) < 4 && Math.abs(this._velocity[1]) < 4) {
+ this._panFinalize();
+ } else {
+ this._current = [
+ this._current[0] + this._velocity[0],
+ this._current[1] + this._velocity[1]
+ ];
+
+ this._panMove();
+ setTimeout($.proxy(this._panEnd, this), 30);
+ }
+ },
+
+ _panFinalize: function () {
+ if (this._panning) {
+ this._velocity = [0, 0];
+
+ var dx = this._current[0] - this._anchor[0],
+ dy = this._current[1] - this._anchor[1],
+ image = this._options[ "axisLayout" ] === "image",
+ dxMap = -dx * this._pixelSize,
+ dyMap = ( image ? -1 : 1 ) * dy * this._pixelSize;
+
+ this._$panContainer.css({ left: 0, top: 0 });
+
+ this._$servicesContainer.find( ".geo-shapes-container" ).css( { left: 0, top: 0 } );
+
+ this._setCenterAndSize([this._center[0] + dxMap, this._center[1] + dyMap], this._pixelSize, true, true);
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+
+ this._inOp = false;
+ this._anchor = this._current;
+ this._mouseDown = this._toolPan = this._panning = false;
+ }
+ },
+
+ _panMove: function () {
+ if ( ! this._options[ "pannable" ] ) {
+ return;
+ }
+
+ var dx = this._current[0] - this._lastDrag[0],
+ dy = this._current[1] - this._lastDrag[1],
+ i = 0,
+ service,
+ translateObj;
+
+ if (this._toolPan || dx > 3 || dx < -3 || dy > 3 || dy < -3) {
+ if (!this._toolPan) {
+ this._toolPan = true;
+ this._$eventTarget.css("cursor", this._options["cursors"]["pan"]);
+ }
+
+ if (this._mouseDown) {
+ this._velocity = [dx, dy];
+ }
+
+ if (dx != 0 || dy != 0) {
+ this._panning = true;
+ this._lastDrag = this._current;
+
+ translateObj = {
+ left: function (index, value) {
+ return parseInt(value) + dx;
+ },
+ top: function (index, value) {
+ return parseInt(value) + dy;
+ }
+ };
+
+ for ( i = 0; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+ $.geo[ "_serviceTypes" ][ service.type ].interactivePan( this, service, dx, dy );
+
+ service.serviceContainer.find( ".geo-shapes-container" ).css( translateObj );
+ }
+
+ this._$panContainer.css( translateObj );
+
+ //this._refreshDrawing();
+ }
+ }
+ },
+
+ _refresh: function () {
+ var service,
+ i = 0;
+
+ if ( this._$elem.is( ".geo-map" ) ) {
+ for ( ; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+
+ if ( !this._mouseDown && $.geo[ "_serviceTypes" ][ service.type ] !== null ) {
+ $.geo[ "_serviceTypes" ][ service.type ].refresh( this, service );
+ service.serviceContainer.geomap( "refresh" );
+ }
+ }
+ }
+
+ if ( this._$shapesContainer ) {
+ this._$shapesContainer.geographics( "clear" );
+ if ( this._graphicShapes.length > 0 ) {
+ this._refreshShapes( this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes );
+ }
+ }
+ },
+
+ _setCenterAndSize: function (center, pixelSize, trigger, refresh) {
+ if ( ! $.isArray( center ) || center.length != 2 || typeof center[ 0 ] !== "number" || typeof center[ 1 ] !== "number" ) {
+ return;
+ }
+
+ // the final call during any extent change
+ if (this._pixelSize != pixelSize) {
+ this._$elem.find( ".geo-shapes-container" ).geographics("clear");
+ for (var i = 0; i < this._currentServices.length; i++) {
+ var service = this._currentServices[i];
+ $.geo["_serviceTypes"][service.type].interactiveScale(this, service, center, pixelSize);
+ }
+ }
+
+ this._center = $.merge( [ ], center );
+ this._options["pixelSize"] = this._pixelSize = pixelSize;
+
+ if ( this._userGeodetic ) {
+ this._options["bbox"] = $.geo.proj.toGeodetic( this._getBbox() );
+ this._options["center"] = $.geo.proj.toGeodetic( this._center );
+ } else {
+ this._options["bbox"] = this._getBbox();
+ this._options["center"] = $.merge( [ ], center );
+ }
+
+ this._options["zoom"] = this._getZoom();
+
+ if (this._drawCoords.length > 0) {
+ this._drawPixels = this._toPixel(this._drawCoords);
+ }
+
+ if (trigger) {
+ this._trigger("bboxchange", window.event, { bbox: $.merge( [ ], this._options["bbox"] ) });
+ }
+
+ if (refresh) {
+ this._refresh();
+ this._refreshDrawing();
+ }
+ },
+
+ _toMap: function (p, center, pixelSize) {
+ // ignores $.geo.proj
+
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ var isMultiPointOrLineString = $.isArray( p[ 0 ] ),
+ isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray( p[ 0 ][ 0 ] ),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray( p[ 0 ][ 0 ][ 0 ] ),
+ width = this._contentBounds["width"],
+ height = this._contentBounds["height"],
+ halfWidth = width / 2 * pixelSize,
+ halfHeight = height / 2 * pixelSize,
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight],
+ xRatio = $.geo.width(bbox, true) / width,
+ yRatio = $.geo.height(bbox, true) / height,
+ yOffset,
+ image = this._options[ "axisLayout" ] === "image",
+ result = [],
+ i, j, k;
+
+ if ( !isMultiPolygon ) {
+ if ( !isMultiLineStringOrPolygon ) {
+ if ( !isMultiPointOrLineString ) {
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+
+ for ( i = 0; i < p.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < p[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < p[ i ][ j ].length; k++ ) {
+ yOffset = (p[ i ][ j ][ k ][1] * yRatio);
+ result[ i ][ j ][ k ] = [
+ bbox[ 0 ] + ( p[ i ][ j ][ k ][ 0 ] * xRatio ),
+ image ? bbox[ 1 ] + yOffset : bbox[ 3 ] - yOffset
+ ];
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ },
+
+ _toPixel: function (p, center, pixelSize) {
+ // ignores $.geo.proj
+
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ var isMultiPointOrLineString = $.isArray( p[ 0 ] ),
+ isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray( p[ 0 ][ 0 ] ),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray( p[ 0 ][ 0 ][ 0 ] ),
+ width = this._contentBounds["width"],
+ height = this._contentBounds["height"],
+ halfWidth = width / 2 * pixelSize,
+ halfHeight = height / 2 * pixelSize,
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight],
+ bboxWidth = $.geo.width(bbox, true),
+ bboxHeight = $.geo.height(bbox, true),
+ image = this._options[ "axisLayout" ] === "image",
+ xRatio = width / bboxWidth,
+ yRatio = height / bboxHeight,
+ result = [ ],
+ i, j, k;
+
+ if ( !isMultiPolygon ) {
+ if ( !isMultiLineStringOrPolygon ) {
+ if ( !isMultiPointOrLineString ) {
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+
+ for ( i = 0; i < p.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < p[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < p[ i ][ j ].length; k++ ) {
+ result[ i ][ j ][ k ] = [
+ Math.round( ( p[ i ][ j ][ k ][ 0 ] - bbox[ 0 ] ) * xRatio ),
+ Math.round( ( image ? p[ i ][ j ][ k ][ 1 ] - bbox[ 1 ] : bbox[ 3 ] - p[ i ][ j ][ k ][ 1 ] ) * yRatio )
+ ];
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ },
+
+ _zoomTo: function (coord, zoom, trigger, refresh) {
+ zoom = zoom < 0 ? 0 : zoom;
+
+ var pixelSize = this._getPixelSize( zoom );
+
+ this._setCenterAndSize( coord, pixelSize, trigger, refresh );
+ },
+
+ _document_keydown: function (e) {
+ var len = this._drawCoords.length;
+ if (len > 0 && e.which == 27) {
+ if (len <= 2) {
+ this._resetDrawing();
+ this._inOp = false;
+ } else {
+ this._drawCoords[len - 2] = $.merge( [], this._drawCoords[ len - 1 ] );
+ this._drawPixels[len - 2] = $.merge( [], this._drawPixels[ len - 1 ] );
+
+ this._drawCoords.length--;
+ this._drawPixels.length--;
+
+ this._refreshDrawing();
+ }
+ }
+ },
+
+ _eventTarget_dblclick_zoom: function(e) {
+ this._trigger("dblclick", e, { type: "Point", coordinates: this.toMap(this._current) });
+ if (!e.isDefaultPrevented()) {
+ var centerAndSize = this._getZoomCenterAndSize(this._current, 1, true );
+ this._setCenterAndSize(centerAndSize.center, centerAndSize.pixelSize, true, true);
+ }
+ },
+
+ _eventTarget_dblclick: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ this._panFinalize();
+
+ if (this._drawTimeout) {
+ window.clearTimeout(this._drawTimeout);
+ this._drawTimeout = null;
+ }
+
+ var offset = $(e.currentTarget).offset();
+
+ switch (this._options["mode"]) {
+ case "drawLineString":
+ if ( this._drawCoords.length > 1 && ! ( this._drawCoords[0][0] == this._drawCoords[1][0] &&
+ this._drawCoords[0][1] == this._drawCoords[1][1] ) ) {
+ this._drawCoords.length--;
+ this._trigger( "shape", e, {
+ type: "LineString",
+ coordinates: this._userGeodetic ? $.geo.proj.toGeodetic(this._drawCoords) : this._drawCoords
+ } );
+ } else {
+ this._eventTarget_dblclick_zoom(e);
+ }
+ this._resetDrawing();
+ break;
+
+ case "drawPolygon":
+ if ( this._drawCoords.length > 1 && ! ( this._drawCoords[0][0] == this._drawCoords[1][0] &&
+ this._drawCoords[0][1] == this._drawCoords[1][1] ) ) {
+ var endIndex = this._drawCoords.length - 1;
+ if (endIndex > 2) {
+ this._drawCoords[endIndex] = $.merge( [], this._drawCoords[0] );
+ this._trigger( "shape", e, {
+ type: "Polygon",
+ coordinates: [ this._userGeodetic ? $.geo.proj.toGeodetic(this._drawCoords) : this._drawCoords ]
+ } );
+ }
+ } else {
+ this._eventTarget_dblclick_zoom(e);
+ }
+ this._resetDrawing();
+ break;
+
+ case "measureLength":
+ case "measureArea":
+ this._resetDrawing();
+ break;
+
+ default:
+ this._eventTarget_dblclick_zoom(e);
+ break;
+ }
+
+ this._inOp = false;
+ },
+
+ _eventTarget_touchstart: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ if ( !this._supportTouch && e.which != 1 ) {
+ return;
+ }
+
+ this._panFinalize();
+ this._mouseWheelFinish();
+
+ var offset = $(e.currentTarget).offset(),
+ touches = e.originalEvent.changedTouches;
+
+ if ( this._supportTouch ) {
+ this._multiTouchAnchor = $.merge( [ ], touches );
+
+ this._isMultiTouch = this._multiTouchAnchor.length > 1;
+
+ if ( this._isMultiTouch ) {
+ this._multiTouchCurrentBbox = [
+ touches[0].pageX - offset.left,
+ touches[0].pageY - offset.top,
+ touches[1].pageX - offset.left,
+ touches[1].pageY - offset.top
+ ];
+
+ this._multiTouchAnchorBbox = $.merge( [ ], this._multiTouchCurrentBbox );
+
+ this._current = $.geo.center( this._multiTouchCurrentBbox, true );
+ } else {
+ this._multiTouchCurrentBbox = [
+ touches[0].pageX - offset.left,
+ touches[0].pageY - offset.top,
+ NaN,
+ NaN
+ ];
+
+ this._current = [ touches[0].pageX - offset.left, touches[0].pageY - offset.top ];
+ }
+ } else {
+ this._current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ if (this._softDblClick) {
+ var downDate = $.now();
+ if (downDate - this._downDate < 750) {
+ if (this._isTap) {
+ var dx = this._current[0] - this._anchor[0],
+ dy = this._current[1] - this._anchor[1],
+ distance = Math.sqrt((dx * dx) + (dy * dy));
+ if (distance > 8) {
+ this._isTap = false;
+ } else {
+ this._current = $.merge( [ ], this._anchor );
+ }
+ }
+
+ if (this._isDbltap) {
+ this._isDbltap = false;
+ } else {
+ this._isDbltap = this._isTap;
+ }
+ } else {
+ this._isDbltap = false;
+ }
+ this._isTap = true;
+ this._downDate = downDate;
+ }
+
+ this._mouseDown = true;
+ this._anchor = $.merge( [ ], this._current );
+
+ if (!this._inOp && e.shiftKey) {
+ this._shiftZoom = true;
+ this._$eventTarget.css("cursor", this._options["cursors"]["zoom"]);
+ } else if ( !this._isMultiTouch && this._options[ "pannable" ] ) {
+ this._inOp = true;
+
+ switch (this._options["mode"]) {
+ case "zoom":
+ break;
+
+ default:
+ this._lastDrag = this._current;
+
+ if (e.currentTarget.setCapture) {
+ e.currentTarget.setCapture();
+ }
+
+ break;
+ }
+ }
+
+ e.preventDefault();
+ return false;
+ },
+
+ _dragTarget_touchmove: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ var offset = this._$eventTarget.offset(),
+ drawCoordsLen = this._drawCoords.length,
+ touches = e.originalEvent.changedTouches,
+ current,
+ service,
+ i = 0;
+
+ if ( this._supportTouch ) {
+ if ( !this._isMultiTouch && touches[ 0 ].identifier !== this._multiTouchAnchor[ 0 ].identifier ) {
+ // switch to multitouch
+ this._mouseDown = false;
+ this._dragTarget_touchstop( e );
+
+ this._isMultiTouch = true;
+
+ this._multiTouchAnchor.push( touches[ 0 ] );
+
+ this._multiTouchCurrentBbox = [
+ this._multiTouchCurrentBbox[ 0 ],
+ this._multiTouchCurrentBbox[ 1 ],
+ this._multiTouchAnchor[1].pageX - offset.left,
+ this._multiTouchAnchor[1].pageY - offset.top
+ ];
+
+ this._multiTouchAnchorBbox = $.merge( [ ], this._multiTouchCurrentBbox );
+
+ this._mouseDown = true;
+ this._anchor = this._current = $.geo.center( this._multiTouchCurrentBbox, true );
+
+ return false;
+ }
+
+ if ( this._isMultiTouch ) {
+ for ( ; i < touches.length; i++ ) {
+ if ( touches[ i ].identifier === this._multiTouchAnchor[ 0 ].identifier ) {
+ this._multiTouchCurrentBbox[ 0 ] = touches[ i ].pageX - offset.left;
+ this._multiTouchCurrentBbox[ 1 ] = touches[ i ].pageY - offset.top;
+ } else if ( touches[ i ].identifier === this._multiTouchAnchor[ 1 ].identifier ) {
+ this._multiTouchCurrentBbox[ 2 ] = touches[ i ].pageX - offset.left;
+ this._multiTouchCurrentBbox[ 3 ] = touches[ i ].pageY - offset.top;
+ }
+ }
+
+ current = $.geo.center( this._multiTouchCurrentBbox, true );
+
+ var currentWidth = this._multiTouchCurrentBbox[ 2 ] - this._multiTouchCurrentBbox[ 0 ],
+ anchorWidth = this._multiTouchAnchorBbox[ 2 ] - this._multiTouchAnchorBbox[ 0 ],
+ ratioWidth = currentWidth / anchorWidth;
+
+ this._wheelLevel = Math.abs( Math.floor( ( 1 - ratioWidth ) * 10 ) );
+ if ( Math.abs( currentWidth ) < Math.abs( anchorWidth ) ) {
+ this._wheelLevel = - this._wheelLevel;
+ }
+
+ var pinchCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, false );
+ this._$elem.find( ".geo-shapes-container" ).geographics("clear");
+
+ for ( i = 0; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+ $.geo[ "_serviceTypes" ][ service.type ].interactiveScale( this, service, pinchCenterAndSize.center, pinchCenterAndSize.pixelSize );
+ }
+
+ if (this._graphicShapes.length > 0 && this._graphicShapes.length < 256) {
+ this._refreshShapes(this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes, pinchCenterAndSize.center, pinchCenterAndSize.pixelSize);
+ }
+
+
+ if (this._drawCoords.length > 0) {
+ this._drawPixels = this._toPixel(this._drawCoords, pinchCenterAndSize.center, pinchCenterAndSize.pixelSize);
+ this._refreshDrawing();
+ }
+
+ current = $.geo.center( this._multiTouchCurrentBbox, true );
+ } else {
+ current = [e.originalEvent.changedTouches[0].pageX - offset.left, e.originalEvent.changedTouches[0].pageY - offset.top];
+ }
+ } else {
+ current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ if (current[0] === this._lastMove[0] && current[1] === this._lastMove[1]) {
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ }
+
+ if ( _ieVersion == 7 ) {
+ this._isDbltap = this._isTap = false;
+ }
+
+ if (this._mouseDown) {
+ this._current = current;
+ this._moveDate = $.now();
+ }
+
+ if ( this._isMultiTouch ) {
+ e.preventDefault( );
+ this._isDbltap = this._isTap = false;
+ return false;
+ }
+
+ var mode = this._shiftZoom ? "zoom" : this._options["mode"];
+
+ switch (mode) {
+ case "zoom":
+ if ( this._mouseDown ) {
+ this._$drawContainer.geographics( "clear" );
+ this._$drawContainer.geographics( "drawBbox", [
+ this._anchor[ 0 ],
+ this._anchor[ 1 ],
+ current[ 0 ],
+ current[ 1 ]
+ ] );
+ } else {
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+
+ case "drawLineString":
+ case "drawPolygon":
+ case "measureLength":
+ case "measureArea":
+ if (this._mouseDown || this._toolPan) {
+ this._panMove();
+ } else {
+ if (drawCoordsLen > 0) {
+ this._drawCoords[drawCoordsLen - 1] = this._toMap(current);
+ this._drawPixels[drawCoordsLen - 1] = current;
+
+ this._refreshDrawing();
+ }
+
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+
+ default:
+ if (this._mouseDown || this._toolPan) {
+ this._panMove();
+ } else {
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+ }
+
+ this._lastMove = current;
+
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ },
+
+ _dragTarget_touchstop: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ if (!this._mouseDown && _ieVersion == 7) {
+ // ie7 doesn't appear to trigger dblclick on this._$eventTarget,
+ // we fake regular click here to cause soft dblclick
+ this._eventTarget_touchstart(e);
+ }
+
+ var mouseWasDown = this._mouseDown,
+ wasToolPan = this._toolPan,
+ offset = this._$eventTarget.offset(),
+ mode = this._shiftZoom ? "zoom" : this._options["mode"],
+ current, i, clickDate,
+ dx, dy;
+
+ if (this._supportTouch) {
+ current = [e.originalEvent.changedTouches[0].pageX - offset.left, e.originalEvent.changedTouches[0].pageY - offset.top];
+ } else {
+ current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ if (this._softDblClick) {
+ if (this._isTap) {
+ var dx = current[0] - this._anchor[0],
+ dy = current[1] - this._anchor[1],
+ distance = Math.sqrt((dx * dx) + (dy * dy));
+ if (distance <= 8) {
+ current = $.merge( [ ], this._anchor );
+ }
+ }
+ }
+
+ dx = current[0] - this._anchor[0];
+ dy = current[1] - this._anchor[1];
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+
+ this._shiftZoom = this._mouseDown = this._toolPan = false;
+
+ if ( this._isMultiTouch ) {
+ e.preventDefault( );
+ this._isMultiTouch = false;
+
+ var pinchCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, false );
+
+ this._setCenterAndSize(pinchCenterAndSize.center, pinchCenterAndSize.pixelSize, true, true);
+
+ this._wheelLevel = 0;
+
+ return false;
+ }
+
+ if (document.releaseCapture) {
+ document.releaseCapture();
+ }
+
+ if (mouseWasDown) {
+ clickDate = $.now();
+ this._current = current;
+
+ switch (mode) {
+ case "zoom":
+ if ( dx > 0 || dy > 0 ) {
+ var minSize = this._pixelSize * 6,
+ bboxCoords = this._toMap( [ [
+ Math.min( this._anchor[ 0 ], current[ 0 ] ),
+ Math.max( this._anchor[ 1 ], current[ 1 ] )
+ ], [
+ Math.max( this._anchor[ 0 ], current[ 0 ] ),
+ Math.min( this._anchor[ 1 ], current[ 1 ] )
+ ]
+ ] ),
+ bbox = [
+ bboxCoords[0][0],
+ bboxCoords[0][1],
+ bboxCoords[1][0],
+ bboxCoords[1][1]
+ ];
+
+ if ( ( bbox[2] - bbox[0] ) < minSize && ( bbox[3] - bbox[1] ) < minSize ) {
+ bbox = $.geo.scaleBy( this._getBbox( $.geo.center( bbox, true ) ), .5, true );
+ }
+
+ this._setBbox(bbox, true, true);
+ }
+
+ this._resetDrawing();
+ break;
+
+ case "drawPoint":
+ if (this._drawTimeout) {
+ window.clearTimeout(this._drawTimeout);
+ this._drawTimeout = null;
+ }
+
+ if (wasToolPan) {
+ this._panFinalize();
+ } else {
+ if (clickDate - this._clickDate > 100) {
+ var geomap = this;
+ this._drawTimeout = setTimeout(function () {
+ if (geomap._drawTimeout) {
+ geomap._trigger("shape", e, { type: "Point", coordinates: geomap.toMap(current) });
+ geomap._inOp = false;
+ geomap._drawTimeout = null;
+ }
+ }, 250);
+ }
+ }
+ break;
+
+ case "drawLineString":
+ case "drawPolygon":
+ case "measureLength":
+ case "measureArea":
+ if (wasToolPan) {
+ this._panFinalize();
+ } else {
+ i = (this._drawCoords.length == 0 ? 0 : this._drawCoords.length - 1);
+
+ this._drawCoords[i] = this._toMap(current);
+ this._drawPixels[i] = current;
+
+ if (i < 2 || !(this._drawCoords[i][0] == this._drawCoords[i-1][0] &&
+ this._drawCoords[i][1] == this._drawCoords[i-1][1])) {
+ this._drawCoords[i + 1] = this._toMap(current);
+ this._drawPixels[i + 1] = current;
+ }
+
+ this._refreshDrawing();
+ }
+ break;
+
+ default:
+ if (wasToolPan) {
+ this._panEnd();
+ } else {
+ if (clickDate - this._clickDate > 100) {
+ this._trigger("click", e, { type: "Point", coordinates: this.toMap(current) });
+ this._inOp = false;
+ }
+ }
+ break;
+ }
+
+ this._clickDate = clickDate;
+
+ if (this._softDblClick && this._isDbltap) {
+ this._isDbltap = this._isTap = false;
+ this._$eventTarget.trigger("dblclick", e);
+ }
+ }
+
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ },
+
+ _eventTarget_mousewheel: function (e, delta) {
+ if ( this._options[ "mode" ] === "static" || this._options[ "scroll" ] === "off" ) {
+ return;
+ }
+
+ e.preventDefault();
+
+ this._panFinalize();
+
+ if ( this._mouseDown ) {
+ return false;
+ }
+
+ if (delta != 0) {
+ if (this._wheelTimeout) {
+ window.clearTimeout(this._wheelTimeout);
+ this._wheelTimeout = null;
+ } else {
+ var offset = $(e.currentTarget).offset();
+ this._anchor = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ this._wheelLevel += delta;
+
+ var wheelCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, this._options[ "tilingScheme" ] != null ),
+ service,
+ i = 0;
+
+ this._$elem.find( ".geo-shapes-container" ).geographics("clear");
+
+ for ( ; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+ $.geo["_serviceTypes"][service.type].interactiveScale(this, service, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ }
+
+ if (this._graphicShapes.length > 0 && this._graphicShapes.length < 256) {
+ this._refreshShapes(this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ }
+
+ if (this._drawCoords.length > 0) {
+ this._drawPixels = this._toPixel(this._drawCoords, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ this._refreshDrawing();
+ }
+
+ var geomap = this;
+ this._wheelTimeout = window.setTimeout(function () {
+ geomap._mouseWheelFinish();
+ }, 1000);
+ }
+
+ return false;
+ }
+ }
+ );
+})(jQuery);
+
+(function ($, undefined) {
+ $.geo._serviceTypes.tiled = (function () {
+ return {
+ create: function (map, serviceContainer, service, index) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( !serviceState ) {
+ serviceState = {
+ loadCount: 0,
+ reloadTiles: false
+ };
+
+ var scHtml = '<div data-geo-service="tiled" style="position:absolute; left:0; top:0; width:8px; height:8px; margin:0; padding:0;"></div>';
+
+ serviceContainer.append(scHtml);
+
+ serviceState.serviceContainer = serviceContainer.children( ":last" );
+
+ $.data(service, "geoServiceState", serviceState);
+ }
+
+ return serviceState.serviceContainer;
+ },
+
+ destroy: function (map, serviceContainer, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ serviceState.serviceContainer.remove();
+
+ $.removeData(service, "geoServiceState");
+ },
+
+ interactivePan: function ( map, service, dx, dy ) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if ( serviceState ) {
+ this._cancelUnloaded( map, service );
+
+ serviceState.serviceContainer.children( ).css( "-moz-transition", "").css( {
+ webkitTransition: "",
+ transition: "",
+ left: function ( index, value ) {
+ return parseInt( value ) + dx;
+ },
+ top: function ( index, value ) {
+ return parseInt( value ) + dy;
+ }
+ });
+
+ if ( service && service.style.visibility === "visible" ) {
+ var pixelSize = map._pixelSize,
+
+ serviceObj = this,
+ serviceContainer = serviceState.serviceContainer,
+ scaleContainer = serviceContainer.children("[data-pixelSize='" + pixelSize + "']"),
+
+ /* same as refresh 1 */
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ image = map.options[ "axisLayout" ] === "image",
+ ySign = image ? +1 : -1,
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight,
+ /* end same as refresh 1 */
+
+ halfWidth = mapWidth / 2 * pixelSize,
+ halfHeight = mapHeight / 2 * pixelSize,
+
+ currentPosition = scaleContainer.position(),
+ scaleOriginParts = scaleContainer.data("scaleOrigin").split(","),
+ totalDx = parseInt(scaleOriginParts[0]) - currentPosition.left,
+ totalDy = parseInt(scaleOriginParts[1]) - currentPosition.top,
+
+ mapCenterOriginal = map._getCenter(),
+ mapCenter = [
+ mapCenterOriginal[0] + totalDx * pixelSize,
+ mapCenterOriginal[1] + ySign * totalDy * pixelSize
+ ],
+
+ /* same as refresh 2 */
+ tileX = Math.floor(((mapCenter[0] - halfWidth) - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY = Math.max( Math.floor(( image ? (mapCenter[1] - halfHeight) - tilingScheme.origin[1] : tilingScheme.origin[1] - (mapCenter[1] + halfHeight)) / (pixelSize * tileHeight)), 0 ),
+ tileX2 = Math.ceil(((mapCenter[0] + halfWidth) - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY2 = Math.ceil(( image ? (mapCenter[1] + halfHeight) - tilingScheme.origin[1] : tilingScheme.origin[1] - (mapCenter[1] - halfHeight)) / (pixelSize * tileHeight)),
+
+ bboxMax = map._getBboxMax(),
+ pixelSizeAtZero = map._getPixelSize(0),
+ ratio = pixelSizeAtZero / pixelSize,
+ fullXAtScale = Math.floor((bboxMax[0] - tilingScheme.origin[0]) / (pixelSizeAtZero * tileWidth)) * ratio,
+ fullYAtScale = Math.floor((tilingScheme.origin[1] + ySign * bboxMax[3]) / (pixelSizeAtZero * tileHeight)) * ratio,
+
+ fullXMinX = tilingScheme.origin[0] + (fullXAtScale * tileWidth) * pixelSize,
+ fullYMinOrMaxY = tilingScheme.origin[1] + ySign * (fullYAtScale * tileHeight) * pixelSize,
+ /* end same as refresh 2 */
+
+ serviceLeft = Math.round((fullXMinX - (mapCenterOriginal[0] - halfWidth)) / pixelSize),
+ serviceTop = Math.round(( image ? fullYMinOrMaxY - (mapCenterOriginal[1] - halfHeight) : (mapCenterOriginal[1] + halfHeight) - fullYMinOrMaxY ) / pixelSize),
+
+ opacity = service.style.opacity,
+
+ x, y;
+
+ for ( x = tileX; x < tileX2; x++ ) {
+ for ( y = tileY; y < tileY2; y++ ) {
+ var tileStr = "" + x + "," + y,
+ $img = scaleContainer.children("[data-tile='" + tileStr + "']").removeAttr("data-dirty");
+
+ if ( $img.size( ) === 0 ) {
+ /* same as refresh 3 */
+ var bottomLeft = [
+ tilingScheme.origin[0] + (x * tileWidth) * pixelSize,
+ tilingScheme.origin[1] + ySign * (y * tileHeight) * pixelSize
+ ],
+
+ topRight = [
+ tilingScheme.origin[0] + ((x + 1) * tileWidth - 1) * pixelSize,
+ tilingScheme.origin[1] + ySign * ((y + 1) * tileHeight - 1) * pixelSize
+ ],
+
+ tileBbox = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]],
+
+ urlProp = ( service.hasOwnProperty("src") ? "src" : "getUrl" ),
+ urlArgs = {
+ bbox: tileBbox,
+ width: tileWidth,
+ height: tileHeight,
+ zoom: map._getZoom(),
+ tile: {
+ row: y,
+ column: x
+ },
+ index: Math.abs(y + x)
+ },
+ isFunc = $.isFunction( service[ urlProp ] ),
+ imageUrl;
+
+ if ( isFunc ) {
+ imageUrl = service[ urlProp ]( urlArgs );
+ } else {
+ $.template( "geoSrc", service[ urlProp ] );
+ imageUrl = $.render( urlArgs, "geoSrc" );
+ }
+ /* end same as refresh 3 */
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ if ( serviceState.reloadTiles && $img.size() > 0 ) {
+ $img.attr( "src", imageUrl );
+ } else {
+ /* same as refresh 4 */
+ var imgMarkup = "<img style='position:absolute; " +
+ "left:" + (((x - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%; " +
+ "top:" + (((y - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%; ";
+
+ if ($("body")[0].filters === undefined) {
+ imgMarkup += "width: 100%; height: 100%;";
+ }
+
+ imgMarkup += "margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='" + tileStr + "' />";
+
+ scaleContainer.append( imgMarkup );
+ $img = scaleContainer.children(":last");
+ }
+
+ if ( typeof imageUrl === "string" ) {
+ serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, serviceContainer, opacity );
+ } else {
+ // assume Deferred
+ imageUrl.done( function( url ) {
+ serviceObj._loadImage( $img, url, pixelSize, serviceState, serviceContainer, opacity );
+ } ).fail( function( ) {
+ $img.remove( );
+ serviceState.loadCount--;
+ } );
+ }
+
+ /* end same as refresh 4 */
+ }
+ }
+ }
+ }
+ }
+ },
+
+ interactiveScale: function (map, service, center, pixelSize) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if ( serviceState && service && service.style.visibility === "visible" ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight;
+
+
+ serviceContainer.children( ).each( function ( i ) {
+ var $scaleContainer = $(this),
+ scaleRatio = $scaleContainer.attr("data-pixelSize") / pixelSize,
+ transitionCss = ""; //"width .25s ease-in, height .25s ease-in, left .25s ease-in, top .25s ease-in";
+
+ scaleRatio = Math.round(scaleRatio * 1000) / 1000;
+
+
+ var scaleOriginParts = $scaleContainer.data("scaleOrigin").split(","),
+ oldMapCoord = map._toMap([scaleOriginParts[0], scaleOriginParts[1]]),
+ newPixelPoint = map._toPixel(oldMapCoord, center, pixelSize);
+
+ $scaleContainer.css( "-moz-transition", transitionCss ).css( {
+ webkitTransition: transitionCss,
+ transition: transitionCss,
+ left: Math.round(newPixelPoint[0]) + "px",
+ top: Math.round(newPixelPoint[1]) + "px",
+ width: tileWidth * scaleRatio,
+ height: tileHeight * scaleRatio
+ } );
+
+ if ( $("body")[0].filters !== undefined ) {
+ $scaleContainer.children().each( function ( i ) {
+ $( this ).css( "filter", "progid:DXImageTransform.Microsoft.Matrix(FilterType=bilinear,M11=" + scaleRatio + ",M22=" + scaleRatio + ",sizingmethod='auto expand')" );
+ } );
+ }
+ });
+ }
+ },
+
+ refresh: function (map, service) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ this._cancelUnloaded(map, service);
+
+ if ( serviceState && service && service.style.visibility === "visible" && !( serviceState.serviceContainer.is( ":hidden" ) ) ) {
+
+ var bbox = map._getBbox(),
+ pixelSize = map._pixelSize,
+
+ serviceObj = this,
+ $serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ image = map.options[ "axisLayout" ] === "image",
+ ySign = image ? +1 : -1,
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight,
+
+ tileX = Math.floor((bbox[0] - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY = Math.max( Math.floor( ( image ? bbox[1] - tilingScheme.origin[1] : tilingScheme.origin[1] - bbox[ 3 ] ) / (pixelSize * tileHeight) ), 0 ),
+ tileX2 = Math.ceil((bbox[2] - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY2 = Math.ceil( ( image ? bbox[3] - tilingScheme.origin[1] : tilingScheme.origin[1] - bbox[ 1 ] ) / (pixelSize * tileHeight) ),
+
+ bboxMax = map._getBboxMax(),
+ pixelSizeAtZero = map._getPixelSize(0),
+ ratio = pixelSizeAtZero / pixelSize,
+ fullXAtScale = Math.floor((bboxMax[0] - tilingScheme.origin[0]) / (pixelSizeAtZero * tileWidth)) * ratio,
+ fullYAtScale = Math.floor((tilingScheme.origin[1] + ySign * bboxMax[3]) / (pixelSizeAtZero * tileHeight)) * ratio,
+
+ fullXMinX = tilingScheme.origin[0] + (fullXAtScale * tileWidth) * pixelSize,
+ fullYMinOrMaxY = tilingScheme.origin[1] + ySign * (fullYAtScale * tileHeight) * pixelSize,
+
+ serviceLeft = Math.round((fullXMinX - bbox[0]) / pixelSize),
+ serviceTop = Math.round( ( image ? fullYMinOrMaxY - bbox[1] : bbox[3] - fullYMinOrMaxY ) / pixelSize),
+
+ scaleContainers = $serviceContainer.children().show(),
+ scaleContainer = scaleContainers.filter("[data-pixelSize='" + pixelSize + "']").appendTo($serviceContainer),
+
+ opacity = service.style.opacity,
+
+ x, y;
+
+ if (serviceState.reloadTiles) {
+ scaleContainers.find("img").attr("data-dirty", "true");
+ }
+
+ if (!scaleContainer.size()) {
+ $serviceContainer.append("<div style='position:absolute; left:" + serviceLeft % tileWidth + "px; top:" + serviceTop % tileHeight + "px; width:" + tileWidth + "px; height:" + tileHeight + "px; margin:0; padding:0;' data-pixelSize='" + pixelSize + "'></div>");
+ scaleContainer = $serviceContainer.children(":last").data("scaleOrigin", (serviceLeft % tileWidth) + "," + (serviceTop % tileHeight));
+ } else {
+ scaleContainer.css({
+ left: (serviceLeft % tileWidth) + "px",
+ top: (serviceTop % tileHeight) + "px"
+ }).data("scaleOrigin", (serviceLeft % tileWidth) + "," + (serviceTop % tileHeight));
+
+ scaleContainer.children().each(function (i) {
+ var
+ $img = $(this),
+ tile = $img.attr("data-tile").split(",");
+
+ $img.css({
+ left: Math.round(((parseInt(tile[0]) - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%",
+ top: Math.round(((parseInt(tile[1]) - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%"
+ });
+
+ if (opacity < 1) {
+ $img.fadeTo(0, opacity);
+ }
+ });
+ }
+
+ for (x = tileX; x < tileX2; x++) {
+ for (y = tileY; y < tileY2; y++) {
+ var tileStr = "" + x + "," + y,
+ $img = scaleContainer.children("[data-tile='" + tileStr + "']").removeAttr("data-dirty");
+
+ if ($img.size() === 0 || serviceState.reloadTiles) {
+ var bottomLeft = [
+ tilingScheme.origin[0] + (x * tileWidth) * pixelSize,
+ tilingScheme.origin[1] + ySign * (y * tileHeight) * pixelSize
+ ],
+
+ topRight = [
+ tilingScheme.origin[0] + ((x + 1) * tileWidth - 1) * pixelSize,
+ tilingScheme.origin[1] + ySign * ((y + 1) * tileHeight - 1) * pixelSize
+ ],
+
+ tileBbox = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]],
+
+ urlProp = ( service.hasOwnProperty( "src" ) ? "src" : "getUrl" ),
+ urlArgs = {
+ bbox: tileBbox,
+ width: tileWidth,
+ height: tileHeight,
+ zoom: map._getZoom(),
+ tile: {
+ row: y,
+ column: x
+ },
+ index: Math.abs(y + x)
+ },
+ isFunc = $.isFunction( service[ urlProp ] ),
+ imageUrl;
+
+ if ( isFunc ) {
+ imageUrl = service[ urlProp ]( urlArgs );
+ } else {
+ $.template( "geoSrc", service[ urlProp ] );
+ imageUrl = $.render( urlArgs, "geoSrc" );
+ }
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ if (serviceState.reloadTiles && $img.size() > 0) {
+ $img.attr("src", imageUrl);
+ } else {
+ var imgMarkup = "<img style='position:absolute; " +
+ "left:" + (((x - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%; " +
+ "top:" + (((y - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%; ";
+
+ if ($("body")[0].filters === undefined) {
+ imgMarkup += "width: 100%; height: 100%;";
+ }
+
+ imgMarkup += "margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='" + tileStr + "' />";
+
+ scaleContainer.append(imgMarkup);
+ $img = scaleContainer.children(":last");
+ }
+
+ if ( typeof imageUrl === "string" ) {
+ serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, $serviceContainer, opacity );
+ } else {
+ // assume Deferred
+ imageUrl.done( function( url ) {
+ serviceObj._loadImage( $img, url, pixelSize, serviceState, $serviceContainer, opacity );
+ } ).fail( function( ) {
+ $img.remove( );
+ serviceState.loadCount--;
+ } );
+ }
+ }
+ }
+ }
+
+ scaleContainers.find("[data-dirty]").remove();
+ serviceState.reloadTiles = false;
+ }
+ },
+
+ resize: function (map, service) {
+ },
+
+ opacity: function ( map, service ) {
+ var serviceState = $.data( service, "geoServiceState" );
+ serviceState.serviceContainer.find( "img" ).stop( true ).fadeTo( "fast", service.style.opacity );
+ },
+
+ toggle: function ( map, service ) {
+ var serviceState = $.data( service, "geoServiceState" );
+ serviceState.serviceContainer.css( "display", service.style.visibility === "visible" ? "block" : "none" );
+ },
+
+ _cancelUnloaded: function (map, service) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if (serviceState && serviceState.loadCount > 0) {
+ serviceState.serviceContainer.find("img:hidden").remove();
+ while (serviceState.loadCount > 0) {
+ serviceState.loadCount--;
+ }
+ }
+ },
+
+ _loadImage: function ( $img, url, pixelSize, serviceState, serviceContainer, opacity ) {
+ $img.load(function (e) {
+ if (opacity < 1) {
+ $(e.target).fadeTo(0, opacity);
+ } else {
+ $(e.target).show();
+ }
+
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).error(function (e) {
+ $(e.target).remove();
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).attr("src", url);
+ }
+ };
+ })();
+})(jQuery);
+(function ($, undefined) {
+ $.geo._serviceTypes.shingled = (function () {
+ return {
+ create: function (map, serviceContainer, service, index) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( !serviceState ) {
+ serviceState = {
+ loadCount: 0
+ };
+
+ var scHtml = '<div data-geo-service="shingled" style="position:absolute; left:0; top:0; width:16px; height:16px; margin:0; padding:0;"></div>';
+
+ serviceContainer.append(scHtml);
+
+ serviceState.serviceContainer = serviceContainer.children(":last");
+ $.data(service, "geoServiceState", serviceState);
+ }
+
+ return serviceState.serviceContainer;
+ },
+
+ destroy: function (map, serviceContainer, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ serviceState.serviceContainer.remove();
+
+ $.removeData(service, "geoServiceState");
+ },
+
+ interactivePan: function (map, service, dx, dy) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+ pixelSize = map._pixelSize,
+ scaleContainer = serviceContainer.children("[data-pixelSize='" + pixelSize + "']"),
+ panContainer = scaleContainer.children("div");
+
+ if ( !panContainer.length ) {
+ scaleContainer.children("img").wrap('<div style="position:absolute; left:0; top:0; width:100%; height:100%;"></div>');
+ panContainer = scaleContainer.children("div");
+ }
+
+ panContainer.css( {
+ left: function (index, value) {
+ return parseInt(value) + dx;
+ },
+ top: function (index, value) {
+ return parseInt(value) + dy;
+ }
+ } );
+
+ // until pan/zoom rewrite, remove all containers not in this scale
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ }
+ },
+
+ interactiveScale: function (map, service, center, pixelSize) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight];
+
+ serviceContainer.children().each(function (i) {
+ var $scaleContainer = $(this),
+ scalePixelSize = $scaleContainer.attr("data-pixelSize"),
+ ratio = scalePixelSize / pixelSize;
+
+ $scaleContainer.css( {
+ width: mapWidth * ratio,
+ height: mapHeight * ratio } ).children("img").each(function (i) {
+ var $img = $(this),
+ imgCenter = $img.data("center"),
+ x = (Math.round((imgCenter[0] - center[0]) / scalePixelSize) - halfWidth) * ratio,
+ y = (Math.round((center[1] - imgCenter[1]) / scalePixelSize) - halfHeight) * ratio;
+
+ $img.css({ left: x + "px", top: y + "px" });
+ });
+ });
+ }
+ },
+
+ refresh: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ this._cancelUnloaded(map, service);
+
+ if ( serviceState && service && service.style.visibility === "visible" && !( serviceState.serviceContainer.is( ":hidden" ) ) ) {
+
+ var bbox = map._getBbox(),
+ pixelSize = map._pixelSize,
+
+ serviceObj = this,
+ serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ scaleContainer = serviceContainer.children('[data-pixelSize="' + pixelSize + '"]'),
+
+ opacity = service.style.opacity,
+
+ $img;
+
+ if ( !scaleContainer.size() ) {
+ serviceContainer.append('<div style="position:absolute; left:' + halfWidth + 'px; top:' + halfHeight + 'px; width:' + mapWidth + 'px; height:' + mapHeight + 'px; margin:0; padding:0;" data-pixelSize="' + pixelSize + '"></div>');
+ scaleContainer = serviceContainer.children(":last");
+ }
+
+ scaleContainer.children("img").each(function (i) {
+ var $thisimg = $(this),
+ imgCenter = $thisimg.data("center"),
+ center = map._getCenter(),
+ x = Math.round((imgCenter[0] - center[0]) / pixelSize) - halfWidth,
+ y = Math.round((center[1] - imgCenter[1]) / pixelSize) - halfHeight;
+
+ $thisimg.css({ left: x + "px", top: y + "px" });
+ });
+
+ if (opacity < 1) {
+ serviceContainer.find("img").attr("data-keepAlive", "0");
+ }
+
+ var urlProp = ( service.hasOwnProperty("src") ? "src" : "getUrl" ),
+ urlArgs = {
+ bbox: bbox,
+ width: mapWidth,
+ height: mapHeight,
+ zoom: map._getZoom(),
+ tile: null,
+ index: 0
+ },
+ isFunc = $.isFunction( service[ urlProp ] ),
+ imageUrl;
+
+
+ if ( isFunc ) {
+ imageUrl = service[ urlProp ]( urlArgs );
+ } else {
+ $.template( "geoSrc", service[ urlProp ] );
+ imageUrl = $.render( urlArgs, "geoSrc" );
+ }
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ scaleContainer.append('<img style="position:absolute; left:-' + halfWidth + 'px; top:-' + halfHeight + 'px; width:100%; height:100%; margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;" unselectable="on" />');
+ $img = scaleContainer.children(":last").data("center", map._getCenter());
+
+ if ( typeof imageUrl === "string" ) {
+ serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, serviceContainer, opacity );
+ } else {
+ // assume Deferred
+ imageUrl.done( function( url ) {
+ serviceObj._loadImage( $img, url, pixelSize, serviceState, serviceContainer, opacity );
+ } ).fail( function( ) {
+ $img.remove( );
+ serviceState.loadCount--;
+ } );
+ }
+
+ }
+ },
+
+ resize: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState && service && service.style.visibility === "visible" ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ scaleContainer = serviceContainer.children();
+
+ scaleContainer.attr("data-pixelSize", "0");
+ scaleContainer.css({
+ left: halfWidth + 'px',
+ top: halfHeight + 'px'
+ });
+ }
+ },
+
+ opacity: function ( map, service ) {
+ var serviceState = $.data( service, "geoServiceState" );
+ serviceState.serviceContainer.find( "img" ).stop( true ).fadeTo( "fast", service.style.opacity );
+ },
+
+ toggle: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+ serviceState.serviceContainer.css("display", service.style.visibility === "visible" ? "block" : "none");
+ },
+
+ _cancelUnloaded: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if (serviceState && serviceState.loadCount > 0) {
+ serviceState.serviceContainer.find("img:hidden").remove();
+ while (serviceState.loadCount > 0) {
+ serviceState.loadCount--;
+ }
+ }
+ },
+
+ _loadImage: function ( $img, url, pixelSize, serviceState, serviceContainer, opacity ) {
+ $img.load(function (e) {
+ if (opacity < 1) {
+ $(e.target).fadeTo(0, opacity);
+ } else {
+ $(e.target).show();
+ }
+
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(':not([data-pixelSize="' + pixelSize + '"])').remove();
+
+ var panContainer = serviceContainer.find('[data-pixelSize="' + pixelSize + '"]>div');
+ if (panContainer.size() > 0) {
+ var panContainerPos = panContainer.position();
+
+ panContainer.children("img").each(function (i) {
+ var $thisimg = $(this),
+ x = panContainerPos.left + parseInt($thisimg.css("left")),
+ y = panContainerPos.top + parseInt($thisimg.css("top"));
+
+ $thisimg.css({ left: x + "px", top: y + "px" });
+ }).unwrap();
+
+ panContainer.remove();
+ }
+
+ serviceState.loadCount = 0;
+ }
+ }).error(function (e) {
+ $(e.target).remove();
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).attr("src", url);
+ }
+ }
+ })();
+})(jQuery);
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ *
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+ for ( var i=types.length; i; ) {
+ $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+ }
+}
+
+$.event.special.mousewheel = {
+ setup: function() {
+ if ( this.addEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.addEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = handler;
+ }
+ },
+
+ teardown: function() {
+ if ( this.removeEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.removeEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = null;
+ }
+ }
+};
+
+$.fn.extend({
+ mousewheel: function(fn) {
+ return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+ },
+
+ unmousewheel: function(fn) {
+ return this.unbind("mousewheel", fn);
+ }
+});
+
+
+function handler(event) {
+ var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+ event = $.event.fix(orgEvent);
+ event.type = "mousewheel";
+
+ // Old school scrollwheel delta
+ if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+ if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
+
+ // New school multidimensional scroll (touchpads) deltas
+ deltaY = delta;
+
+ // Gecko
+ if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+ deltaY = 0;
+ deltaX = -1*delta;
+ }
+
+ // Webkit
+ if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+ if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+
+ // Add event and delta to the front of the arguments
+ args.unshift(event, delta, deltaX, deltaY);
+
+ return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
--- /dev/null
+document.createElement("canvas").getContext||function(){function g(){return this.context_||(this.context_=new t(this))}function q(p,h){var o=G.call(arguments,2);return function(){return p.apply(h,o.concat(G.call(arguments)))}}function r(p){p.namespaces.g_vml_||p.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml","#default#VML");p.namespaces.g_o_||p.namespaces.add("g_o_","urn:schemas-microsoft-com:office:office","#default#VML");if(!p.styleSheets.ex_canvas_){p=p.createStyleSheet();p.owningElement.id=
+"ex_canvas_";p.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}"}}function b(p){var h=p.srcElement;switch(p.propertyName){case "width":h.getContext().clearRect();h.style.width=h.attributes.width.nodeValue+"px";h.firstChild.style.width=h.clientWidth+"px";break;case "height":h.getContext().clearRect();h.style.height=h.attributes.height.nodeValue+"px";h.firstChild.style.height=h.clientHeight+"px"}}function c(p){p=p.srcElement;if(p.firstChild){p.firstChild.style.width=
+p.clientWidth+"px";p.firstChild.style.height=p.clientHeight+"px"}}function a(){return[[1,0,0],[0,1,0],[0,0,1]]}function d(p,h){for(var o=a(),s=0;s<3;s++)for(var x=0;x<3;x++){for(var v=0,A=0;A<3;A++)v+=p[s][A]*h[A][x];o[s][x]=v}return o}function f(p,h){h.fillStyle=p.fillStyle;h.lineCap=p.lineCap;h.lineJoin=p.lineJoin;h.lineWidth=p.lineWidth;h.miterLimit=p.miterLimit;h.shadowBlur=p.shadowBlur;h.shadowColor=p.shadowColor;h.shadowOffsetX=p.shadowOffsetX;h.shadowOffsetY=p.shadowOffsetY;h.strokeStyle=p.strokeStyle;
+h.globalAlpha=p.globalAlpha;h.font=p.font;h.textAlign=p.textAlign;h.textBaseline=p.textBaseline;h.arcScaleX_=p.arcScaleX_;h.arcScaleY_=p.arcScaleY_;h.lineScale_=p.lineScale_}function e(p){var h=p.indexOf("(",3),o=p.indexOf(")",h+1);h=p.substring(h+1,o).split(",");if(h.length!=4||p.charAt(3)!="a")h[3]=1;return h}function l(p,h,o){return Math.min(o,Math.max(h,p))}function m(p,h,o){o<0&&o++;o>1&&o--;return 6*o<1?p+(h-p)*6*o:2*o<1?h:3*o<2?p+(h-p)*(2/3-o)*6:p}function n(p){if(p in R)return R[p];var h,
+o=1;p=String(p);if(p.charAt(0)=="#")h=p;else if(/^rgb/.test(p)){o=e(p);h="#";for(var s,x=0;x<3;x++){s=o[x].indexOf("%")!=-1?Math.floor(parseFloat(o[x])/100*255):+o[x];h+=M[l(s,0,255)]}o=+o[3]}else if(/^hsl/.test(p)){x=o=e(p);h=parseFloat(x[0])/360%360;h<0&&h++;s=l(parseFloat(x[1])/100,0,1);x=l(parseFloat(x[2])/100,0,1);if(s==0)s=x=h=x;else{var v=x<0.5?x*(1+s):x+s-x*s,A=2*x-v;s=m(A,v,h+1/3);x=m(A,v,h);h=m(A,v,h-1/3)}h="#"+M[Math.floor(s*255)]+M[Math.floor(x*255)]+M[Math.floor(h*255)];o=o[3]}else h=
+p;return R[p]={color:h,alpha:o}}function t(p){this.m_=a();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.fillStyle=this.strokeStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=H*1;this.globalAlpha=1;this.canvas=p;var h="width:"+p.clientWidth+"px;height:"+p.clientHeight+"px;overflow:hidden;position:absolute",o=p.ownerDocument.createElement("div");o.style.cssText=h;p.appendChild(o);h=o.cloneNode(false);h.style.backgroundColor="red";h.style.filter="alpha(opacity=0)";
+p.appendChild(h);this.element_=o;this.lineScale_=this.arcScaleY_=this.arcScaleX_=1}function u(p,h,o,s){p.currentPath_.push({type:"bezierCurveTo",cp1x:h.x,cp1y:h.y,cp2x:o.x,cp2y:o.y,x:s.x,y:s.y});p.currentX_=s.x;p.currentY_=s.y}function w(p,h,o){p=p.m_;return{x:H*(h*p[0][0]+o*p[1][0]+p[2][0])-C,y:H*(h*p[0][1]+o*p[1][1]+p[2][1])-C}}function B(p,h,o){if(isFinite(h[0][0])&&isFinite(h[0][1])&&isFinite(h[1][0])&&isFinite(h[1][1])&&isFinite(h[2][0])&&isFinite(h[2][1])){p.m_=h;if(o)p.lineScale_=P(J(h[0][0]*
+h[1][1]-h[0][1]*h[1][0]))}}function I(p){this.code=this[p];this.message=p+": DOM Exception "+this.code}var F=Math,y=F.round,K=F.sin,D=F.cos,J=F.abs,P=F.sqrt,H=10,C=H/2;navigator.userAgent.match(/MSIE ([\d.]+)?/);var G=Array.prototype.slice;r(document);F={init:function(p){p=p||document;p.createElement("canvas");p.attachEvent("onreadystatechange",q(this.init_,this,p))},init_:function(p){p=p.getElementsByTagName("canvas");for(var h=0;h<p.length;h++)this.initElement(p[h])},initElement:function(p){if(!p.getContext){p.getContext=
+g;r(p.ownerDocument);p.innerHTML="";p.attachEvent("onpropertychange",b);p.attachEvent("onresize",c);var h=p.attributes;if(h.width&&h.width.specified)p.style.width=h.width.nodeValue+"px";else p.width=p.clientWidth;if(h.height&&h.height.specified)p.style.height=h.height.nodeValue+"px";else p.height=p.clientHeight}return p}};F.init();for(var M=[],z=0;z<16;z++)for(var L=0;L<16;L++)M[z*16+L]=z.toString(16)+L.toString(16);var R={},U={butt:"flat",round:"round"};z=t.prototype;z.clearRect=function(){if(this.textMeasureEl_){this.textMeasureEl_.removeNode(true);
+this.textMeasureEl_=null}this.element_.innerHTML=""};z.beginPath=function(){this.currentPath_=[]};z.moveTo=function(p,h){var o=w(this,p,h);this.currentPath_.push({type:"moveTo",x:o.x,y:o.y});this.currentX_=o.x;this.currentY_=o.y};z.lineTo=function(p,h){var o=w(this,p,h);this.currentPath_.push({type:"lineTo",x:o.x,y:o.y});this.currentX_=o.x;this.currentY_=o.y};z.bezierCurveTo=function(p,h,o,s,x,v){x=w(this,x,v);p=w(this,p,h);o=w(this,o,s);u(this,p,o,x)};z.quadraticCurveTo=function(p,h,o,s){p=w(this,
+p,h);o=w(this,o,s);s={x:this.currentX_+2/3*(p.x-this.currentX_),y:this.currentY_+2/3*(p.y-this.currentY_)};u(this,s,{x:s.x+(o.x-this.currentX_)/3,y:s.y+(o.y-this.currentY_)/3},o)};z.arc=function(p,h,o,s,x,v){o*=H;var A=v?"at":"wa",E=p+D(s)*o-C,N=h+K(s)*o-C;s=p+D(x)*o-C;x=h+K(x)*o-C;if(E==s&&!v)E+=0.125;p=w(this,p,h);E=w(this,E,N);s=w(this,s,x);this.currentPath_.push({type:A,x:p.x,y:p.y,radius:o,xStart:E.x,yStart:E.y,xEnd:s.x,yEnd:s.y})};z.stroke=function(p){var h=[];h.push("<g_vml_:shape",' filled="',
+!!p,'"',' style="position:absolute;width:',10,"px;height:",10,'px;"',' coordorigin="0,0"',' coordsize="',H*10,",",H*10,'"',' stroked="',!p,'"',' path="');for(var o={x:null,y:null},s={x:null,y:null},x=0;x<this.currentPath_.length;x++){var v=this.currentPath_[x];switch(v.type){case "moveTo":h.push(" m ",y(v.x),",",y(v.y));break;case "lineTo":h.push(" l ",y(v.x),",",y(v.y));break;case "close":h.push(" x ");v=null;break;case "bezierCurveTo":h.push(" c ",y(v.cp1x),",",y(v.cp1y),",",y(v.cp2x),",",y(v.cp2y),
+",",y(v.x),",",y(v.y));break;case "at":case "wa":h.push(" ",v.type," ",y(v.x-this.arcScaleX_*v.radius),",",y(v.y-this.arcScaleY_*v.radius)," ",y(v.x+this.arcScaleX_*v.radius),",",y(v.y+this.arcScaleY_*v.radius)," ",y(v.xStart),",",y(v.yStart)," ",y(v.xEnd),",",y(v.yEnd))}if(v){if(o.x==null||v.x<o.x)o.x=v.x;if(s.x==null||v.x>s.x)s.x=v.x;if(o.y==null||v.y<o.y)o.y=v.y;if(s.y==null||v.y>s.y)s.y=v.y}}h.push(' ">');if(p){p=n(this.fillStyle);h.push('<g_vml_:fill color="',p.color,'" opacity="',p.alpha*this.globalAlpha,
+'" />')}else{o=n(this.strokeStyle);p=o.color;o=o.alpha*this.globalAlpha;s=this.lineScale_*this.lineWidth;if(s<1)o*=s;h.push("<g_vml_:stroke",' opacity="',o,'"',' joinstyle="',this.lineJoin,'"',' miterlimit="',this.miterLimit,'"',' endcap="',U[this.lineCap]||"square",'"',' weight="',s,'px"',' color="',p,'" />')}h.push("</g_vml_:shape>");this.element_.insertAdjacentHTML("beforeEnd",h.join(""))};z.fill=function(){this.stroke(true)};z.closePath=function(){this.currentPath_.push({type:"close"})};z.save=
+function(){var p={};f(this,p);this.aStack_.push(p);this.mStack_.push(this.m_);this.m_=d(a(),this.m_)};z.restore=function(){if(this.aStack_.length){f(this.aStack_.pop(),this);this.m_=this.mStack_.pop()}};z.translate=function(p,h){B(this,d([[1,0,0],[0,1,0],[p,h,1]],this.m_),false)};z.scale=function(p,h){this.arcScaleX_*=p;this.arcScaleY_*=h;B(this,d([[p,0,0],[0,h,0],[0,0,1]],this.m_),true)};z=I.prototype=Error();z.INDEX_SIZE_ERR=1;z.DOMSTRING_SIZE_ERR=2;z.HIERARCHY_REQUEST_ERR=3;z.WRONG_DOCUMENT_ERR=
+4;z.INVALID_CHARACTER_ERR=5;z.NO_DATA_ALLOWED_ERR=6;z.NO_MODIFICATION_ALLOWED_ERR=7;z.NOT_FOUND_ERR=8;z.NOT_SUPPORTED_ERR=9;z.INUSE_ATTRIBUTE_ERR=10;z.INVALID_STATE_ERR=11;z.SYNTAX_ERR=12;z.INVALID_MODIFICATION_ERR=13;z.NAMESPACE_ERR=14;z.INVALID_ACCESS_ERR=15;z.VALIDATION_ERR=16;z.TYPE_MISMATCH_ERR=17;G_vmlCanvasManager=F;CanvasRenderingContext2D=t;DOMException=I}();
+$.widget||function(g,q){if(g.cleanData){var r=g.cleanData;g.cleanData=function(c){for(var a=0,d;(d=c[a])!=null;a++)try{g(d).triggerHandler("remove")}catch(f){}r(c)}}else{var b=g.fn.remove;g.fn.remove=function(c,a){return this.each(function(){if(!a)if(!c||g.filter(c,[this]).length)g("*",this).add([this]).each(function(){try{g(this).triggerHandler("remove")}catch(d){}});return b.call(g(this),c,a)})}}g.widget=function(c,a,d){var f=c.split(".")[0],e;c=c.split(".")[1];e=f+"-"+c;if(!d){d=a;a=g.Widget}g.expr[":"][e]=
+function(l){return!!g.data(l,c)};g[f]=g[f]||{};g[f][c]=function(l,m){arguments.length&&this._createWidget(l,m)};a=new a;a.options=g.extend(true,{},a.options);g[f][c].prototype=g.extend(true,a,{namespace:f,widgetName:c,widgetEventPrefix:g[f][c].prototype.widgetEventPrefix||c,widgetBaseClass:e},d);g.widget.bridge(c,g[f][c])};g.widget.bridge=function(c,a){g.fn[c]=function(d){var f=typeof d==="string",e=Array.prototype.slice.call(arguments,1),l=this;d=!f&&e.length?g.extend.apply(null,[true,d].concat(e)):
+d;if(f&&d.charAt(0)==="_")return l;f?this.each(function(){var m=g.data(this,c),n=m&&g.isFunction(m[d])?m[d].apply(m,e):m;if(n!==m&&n!==q){l=n;return false}}):this.each(function(){var m=g.data(this,c);m?m.option(d||{})._init():g.data(this,c,new a(d,this))});return l}};g.Widget=function(c,a){arguments.length&&this._createWidget(c,a)};g.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",options:{disabled:false},_createWidget:function(c,a){g.data(a,this.widgetName,this);this.element=g(a);this.options=
+g.extend(true,{},this.options,this._getCreateOptions(),c);var d=this;this.element.bind("remove."+this.widgetName,function(){d.destroy()});this._create();this._trigger("create");this._init()},_getCreateOptions:function(){return g.metadata&&g.metadata.get(this.element[0])[this.widgetName]},_create:function(){},_init:function(){},destroy:function(){this.element.unbind("."+this.widgetName).removeData(this.widgetName);this.widget().unbind("."+this.widgetName).removeAttr("aria-disabled").removeClass(this.widgetBaseClass+
+"-disabled ui-state-disabled")},widget:function(){return this.element},option:function(c,a){var d=c;if(arguments.length===0)return g.extend({},this.options);if(typeof c==="string"){if(a===q)return this.options[c];d={};d[c]=a}this._setOptions(d);return this},_setOptions:function(c){var a=this;g.each(c,function(d,f){a._setOption(d,f)});return this},_setOption:function(c,a){this.options[c]=a;if(c==="disabled")this.widget()[a?"addClass":"removeClass"](this.widgetBaseClass+"-disabled ui-state-disabled").attr("aria-disabled",
+a);return this},enable:function(){return this._setOption("disabled",false)},disable:function(){return this._setOption("disabled",true)},_trigger:function(c,a,d){var f,e=this.options[c];d=d||{};a=g.Event(a);a.type=(c===this.widgetEventPrefix?c:this.widgetEventPrefix+c).toLowerCase();a.target=this.element[0];if(c=a.originalEvent)for(f in c)f in a||(a[f]=c[f]);this.element.trigger(a,d);return!(g.isFunction(e)&&e.call(this.element[0],a,d)===false||a.isDefaultPrevented())}}}(jQuery);
+window.JsViews||window.jQuery&&jQuery.views||function(g,q){function r(h,o,s,x,v){var A=(s=s||{viewsCount:0,ctx:n.helpers})&&s.ctx;return{jsViews:"v1.0pre",path:o||"",itemNumber:++s.viewsCount||1,viewsCount:0,tmpl:v,data:x||s.data||{},ctx:h&&h===A?A:A?F(F({},A),h):h||{},parent:s}}function b(h,o,s,x,v,A,E){return s?(x?v?"$view."+v:s:"$data."+s)+(A||""):E||o||""}function c(h){function o(O){O-=x;O&&E.push(h.substr(x,O).replace(C,"\\n"))}var s,x=0,v=[],A=[],E=A,N=[,,A];h=h.replace(M,"\\$1");h.replace(w,
+function(O,S,Q,ga,ha,T,ia,ja,ka,ca){function la(Z,V,ma,da,na,oa,ea,fa,pa,qa){return W?(W=!ea,W?Z:'"'):X?(X=!fa,X?Z:'"'):da?V.replace(P,b)+da:na?Y?"":(aa=K,"\u0008"+V+":"):ma?(Y++,V.replace(P,b)+"("):pa?(Y--,")"):V?V.replace(P,b):oa?",":qa?Y?"":aa?(aa=y,"\u0008"):",":(W=ea,X=fa,'"')}var aa,ba="",Y=0,X=y,W=y;Q=Q||ga;o(ca);if(ha)n.allowCode&&E.push(["*",T.replace(G,"$1")]);else if(Q){if(Q==="else"){N=v.pop();E=N[2];S=K}T=T?(T+" ").replace(H,la).replace(z,function(Z,V){ba+=V+",";return""}):"";T=T.slice(0,
+-1);s=[Q,ia?ja||"none":"",S&&[],"{"+ba+"_hash:'"+ba+"',_path:'"+T+"'}",T];if(S){v.push(N);N=s}E.push(s)}else if(ka)N=v.pop();x=ca+O.length;if(!N)throw"Expected block tag";E=N[2]});o(h.length);return a(A)}function a(h){var o,s,x=[],v=h.length,A="try{var views="+(D?"jQuery":"JsViews")+'.views,tag=views.renderTag,enc=views.encode,html=views.encoders.html,$ctx=$view && $view.ctx,result=""+\n\n';for(s=0;s<v;s++){o=h[s];if(o[0]==="*")A=A.slice(0,s?-1:-3)+";"+o[1]+(s+1<v?"result+=":"");else if(""+o===o)A+=
+'"'+o+'"+';else{var E=o[0],N=o[1],O=o[2],S=o[3];o=o[4];var Q=o+'||"")+';O&&x.push(a(O));A+=E==="="?!N||N==="html"?"html("+Q:N==="none"?"("+Q:'enc("'+N+'",'+Q:'tag("'+E+'",$view,"'+(N||"")+'",'+(O?x.length:'""')+","+S+(o?",":"")+o+")+"}}h=new Function("$data, $view",A.slice(0,-1)+";return result;\n\n}catch(e){return views.err(e);}");h.nested=x;return h}function d(h){return R[h]||(R[h]="&#"+h.charCodeAt(0)+";")}function f(h){try{return e(h)}catch(o){}return h}var e,l,m,n,t,u,w,B,I,F,y=false,K=true,
+D=g.jQuery,J=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,P=/^(true|false|null|[\d\.]+)|(\w+|\$(view|data|ctx|(\w+)))([\w\.]*)|((['"])(?:\\\1|.)*\7)$/g,H=/(\$?[\w\.\[\]]+)(?:(\()|\s*(===|!==|==|!=|<|>|<=|>=)\s*|\s*(\=)\s*)?|(\,\s*)|\\?(\')|\\?(\")|(\))|(\s+)/g,C=/\r?\n/g,G=/\\(['"])/g,M=/\\?(['"])/g,z=/\x08([^\x08]+)\x08/g,L=0,R={"&":"&","<":"<",">":">"},U=/[\x00"&'<>]/g,p=Array.prototype.slice;if(D){e=D;e.fn.extend({render:function(h,o,s,x){return u(h,this[0],o,s,x)},template:function(h,o){return e.template(h,
+this[0],o)}})}else{l=g.$;g.JsViews=m=g.$=e={extend:function(h,o){for(var s in o)h[s]=o[s];return h},isArray:Array.isArray||function(h){return Object.prototype.toString.call(h)==="[object Array]"},noConflict:function(){if(g.$===m)g.$=l;return m}}}F=e.extend;F(e,{views:n={templates:{},tags:{"if":function(){var h=this._view;h.onElse=function(o,s){for(var x=0,v=s.length;v&&!s[x++];)if(x===v)return"";h.onElse=q;return u(h.data,o.tmpl,h.ctx,h)};return h.onElse(this,arguments)},"else":function(){var h=this._view;
+return h.onElse?h.onElse(this,arguments):""},each:function(){var h,o="",s=arguments,x=s.length,v=this.tmpl,A=this._view;for(h=0;h<x;h++)o+=s[h]?u(s[h],v,this.ctx||A.ctx,A,this._path,this._ctor):"";return x?o:o+u(A.data,v,A.ctx,A,this._path,this.tag)},"=":function(h){return h},"*":function(h){return h}},helpers:{not:function(h){return!h}},allowCode:y,debugMode:K,err:function(h){return n.debugMode?"<br/><b>Error:</b> <em> "+(h.message||h)+". </em>":'""'},setDelimiters:function(h,o){var s=o.charAt(0),
+x=o.charAt(1);h="\\"+h.charAt(0)+"\\"+h.charAt(1);o="\\"+s+"\\"+x;w=h+"(?:(?:(\\#)?(\\w+(?=[!\\s\\"+s+"]))|(?:(\\=)|(\\*)))\\s*((?:[^\\"+s+"]|\\"+s+"(?!\\"+x+"))*?)(!(\\w*))?|(?:\\/([\\w\\$\\.\\[\\]]+)))"+o;w=RegExp(w,"g")},registerTags:B=function(h,o){var s;if(typeof h==="object")for(s in h)B(s,h[s]);else n.tags[h]=o;return this},registerHelpers:I=function(h,o){if(typeof h==="object")for(var s in h)I(s,h[s]);else n.helpers[h]=o;return this},encode:function(h,o){return o?(t[h||"html"]||t.html)(o):
+""},encoders:t={none:function(h){return h},html:function(h){return String(h).replace(U,d)}},renderTag:function(h,o,s,x,v){var A,E;A=arguments;E=n.presenters;hash=v._hash;tagFn=n.tags[h];if(!tagFn)return"";x=x&&o.tmpl.nested[x-1];v.tmpl=v.tmpl||x||q;if(E&&E[h]){E=F(F({},v.ctx),v);delete E.ctx;delete E._path;delete E.tmpl;v.ctx=E;v._ctor=h+(hash?"="+hash.slice(0,-1):"");v=F(F({},tagFn),v);tagFn=n.tags.each}v._encode=s;v._view=o;return(A=tagFn.apply(v,A.length>5?p.call(A,5):[o.data]))||(A===q?"":A.toString())}},
+render:u=function(h,o,s,x,v,A){var E,N,O,S,Q="";if(arguments.length===2&&h.jsViews){x=h;s=x.ctx;h=x.data}o=e.template(o);if(!o)return"";if(e.isArray(h)){S=new r(s,v,x,h);E=0;for(N=h.length;E<N;E++){O=(O=h[E])?o(O,new r(s,v,S,O,o,this)):"";Q+=n.activeViews?"<!--item--\>"+O+"<!--/item--\>":O}}else Q+=o(h,new r(s,v,x,h,o));return n.activeViews?"<!--tmpl("+(v||"")+") "+(A?"tag="+A:o._name)+"--\>"+Q+"<!--/tmpl--\>":Q},template:function(h,o){if(o){if(""+o===o)o=c(o);else if(D&&o instanceof e)o=o[0];if(o){if(D&&
+o.nodeType)o=e.data(o,"tmpl")||e.data(o,"tmpl",c(o.innerHTML));n.templates[o._name=o._name||h||"_"+L++]=o}return o}return h?""+h!==h?h._name?h:e.template(null,h):n.templates[h]||e.template(null,J.test(h)?h:f(h)):null}});n.setDelimiters("{{","}}")}(window);
+(function(g,q,r){var b=Number.POSITIVE_INFINITY,c=Number.NEGATIVE_INFINITY;g.geo={_allCoordinates:function(a){a=this._flatten(a);for(var d=0,f=[];d<a.length;d++){var e=a[d].coordinates,l=e&&g.isArray(e[0]),m=l&&g.isArray(e[0][0]),n;if(!(m&&g.isArray(e[0][0][0]))){if(!m){l||(e=[e]);e=[e]}e=[e]}for(l=0;l<e.length;l++)for(m=0;m<e[l].length;m++)for(n=0;n<e[l][m].length;n++)f.push(e[l][m][n])}return f},_isGeodetic:function(a){for(;g.isArray(a);)if(a.length>1&&!g.isArray(a[0]))return a[0]>=-180&&a[0]<=
+180&&a[1]>=-85&&a[1]<=85;else a=a[0];return false},center:function(a,d){var f=false;if(!d&&g.geo.proj&&this._isGeodetic(a)){f=true;a=g.geo.proj.fromGeodetic(a)}var e=[(a[0]+a[2])/2,(a[1]+a[3])/2];return f?g.geo.proj.toGeodetic(e):e},expandBy:function(a,d,f,e){var l=false;if(!e&&g.geo.proj&&this._isGeodetic(a)){l=true;a=g.geo.proj.fromGeodetic(a)}a=[a[0]-d,a[1]-f,a[2]+d,a[3]+f];return l?g.geo.proj.toGeodetic(a):a},height:function(a,d){if(!d&&g.geo.proj&&this._isGeodetic(a))a=g.geo.proj.fromGeodetic(a);
+return a[3]-a[1]},_in:function(a,d){return a[0]<=d[0]&&a[1]<=d[1]&&a[2]>=d[2]&&a[3]>=d[3]},_bboxDisjoint:function(a,d){return d[0]>a[2]||d[2]<a[0]||d[1]>a[3]||d[3]<a[1]},reaspect:function(a,d,f){var e=false;if(!f&&g.geo.proj&&this._isGeodetic(a)){e=true;a=g.geo.proj.fromGeodetic(a)}var l=this.width(a,true),m=this.height(a,true);f=this.center(a,true);if(l!=0&&m!=0&&d>0){if(l/m>d){a=l/2;l=a/d}else{l=m/2;a=l*d}a=[f[0]-a,f[1]-l,f[0]+a,f[1]+l]}return e?g.geo.proj.toGeodetic(a):a},recenter:function(a,d,
+f){var e=false;if(!f&&g.geo.proj){if(this._isGeodetic(a)){e=true;a=g.geo.proj.fromGeodetic(a)}if(this._isGeodetic(d))d=g.geo.proj.fromGeodetic(d)}f=(a[2]-a[0])/2;a=(a[3]-a[1])/2;a=[d[0]-f,d[1]-a,d[0]+f,d[1]+a];return e?g.geo.proj.toGeodetic(a):a},scaleBy:function(a,d,f){var e=false;if(!f&&g.geo.proj&&this._isGeodetic(a)){e=true;a=g.geo.proj.fromGeodetic(a)}f=this.center(a,true);var l=(a[2]-a[0])*d/2;a=(a[3]-a[1])*d/2;a=[f[0]-l,f[1]-a,f[0]+l,f[1]+a];return e?g.geo.proj.toGeodetic(a):a},width:function(a,
+d){if(!d&&g.geo.proj&&this._isGeodetic(a))a=g.geo.proj.fromGeodetic(a);return a[2]-a[0]},bbox:function(a,d){if(a)if(a.bbox)result=!d&&g.geo.proj&&this._isGeodetic(a.bbox)?g.geo.proj.fromGeodetic(a.bbox):a.bbox;else{result=[b,b,c,c];var f=this._allCoordinates(a),e=0;if(f.length==0)return r;var l=false;if(!d&&g.geo.proj&&this._isGeodetic(f)){l=true;f=g.geo.proj.fromGeodetic(f)}for(;e<f.length;e++){result[0]=Math.min(f[e][0],result[0]);result[1]=Math.min(f[e][1],result[1]);result[2]=Math.max(f[e][0],
+result[2]);result[3]=Math.max(f[e][1],result[3])}}else return r;return l?g.geo.proj.toGeodetic(result):result},centroid:function(a,d){switch(a.type){case "Point":return g.extend({},a);case "LineString":case "Polygon":var f=0,e=[0,0],l=g.merge([],a.type=="Polygon"?a.coordinates[0]:a.coordinates),m=1,n,t,u=false;if(!d&&g.geo.proj&&this._isGeodetic(l)){u=true;l=g.geo.proj.fromGeodetic(l)}for(;m<=l.length;m++){n=m%l.length;t=l[m-1][0]*l[n][1]-l[n][0]*l[m-1][1];f+=t;e[0]+=(l[m-1][0]+l[n][0])*t;e[1]+=(l[m-
+1][1]+l[n][1])*t}if(f==0)if(l.length>0){e[0]=l[0][0];e[1]=l[0][1];return{type:"Point",coordinates:u?g.geo.proj.toGeodetic(e):e}}else break;f*=3;e[0]/=f;e[1]/=f;return{type:"Point",coordinates:u?g.geo.proj.toGeodetic(e):e}}return r},contains:function(a,d){if(a.type!="Polygon")return false;switch(d.type){case "Point":return this._containsPolygonPoint(a.coordinates,d.coordinates);case "LineString":return this._containsPolygonLineString(a.coordinates,d.coordinates);case "Polygon":return this._containsPolygonLineString(a.coordinates,
+d.coordinates[0]);default:return false}},_containsPolygonPoint:function(a,d){if(a.length==0||a[0].length<4)return false;for(var f=0,e=a[0][0],l=1,m;l<a[0].length;l++){m=a[0][l];if(e[1]<=d[1]&&d[1]<m[1]||m[1]<=d[1]&&d[1]<e[1]&&(d[0]<e[0]||d[0]<m[0])){e=e[0]+(m[0]-e[0])*(d[1]-e[1])/(m[1]-e[1]);e>d[0]&&f++}e=m}return f%2==1},_containsPolygonLineString:function(a,d){for(var f=0;f<d.length;f++)if(!this._containsPolygonPoint(a,d[f]))return false;return true},distance:function(a,d,f){var e=!f&&g.geo.proj&&
+this._isGeodetic(a.coordinates)?g.geo.proj.fromGeodetic(a.coordinates):a.coordinates;f=!f&&g.geo.proj&&this._isGeodetic(d.coordinates)?g.geo.proj.fromGeodetic(d.coordinates):d.coordinates;switch(a.type){case "Point":switch(d.type){case "Point":return this._distancePointPoint(f,e);case "LineString":return this._distanceLineStringPoint(f,e);case "Polygon":return this._containsPolygonPoint(f,e)?0:this._distanceLineStringPoint(f[0],e);default:return r}case "LineString":switch(d.type){case "Point":return this._distanceLineStringPoint(e,
+f);case "LineString":return this._distanceLineStringLineString(e,f);case "Polygon":return this._containsPolygonLineString(f,e)?0:this._distanceLineStringLineString(f[0],e);default:return r}case "Polygon":switch(d.type){case "Point":return this._containsPolygonPoint(e,f)?0:this._distanceLineStringPoint(e[0],f);case "LineString":return this._containsPolygonLineString(e,f)?0:this._distanceLineStringLineString(e[0],f);case "Polygon":return this._containsPolygonLineString(e,f[0])?0:this._distanceLineStringLineString(e[0],
+f[0]);default:return r}}},_distancePointPoint:function(a,d){var f=d[0]-a[0],e=d[1]-a[1];return Math.sqrt(f*f+e*e)},_distanceLineStringPoint:function(a,d){var f=b;if(a.length>0){var e=a[0],l=d[0]-e[0],m=d[1]-e[1];if(a.length==1)return Math.sqrt(l*l+m*m);else for(var n=1;n<a.length;n++){var t=a[n],u=d[0]-t[0],w=d[1]-t[1];e=this._distanceSegmentPoint(t[0]-e[0],t[1]-e[1],l,m,u,w);if(e==0)return 0;if(e<f)f=e;e=t;l=u;m=w}}return Math.sqrt(f)},_distanceSegmentPoint:function(a,d,f,e,l,m){var n=a*f+d*e;if(n<=
+0)return f*f+e*e;a=a*a+d*d;if(n>=a)return l*l+m*m;return f*f+e*e-n*n/a},_distanceLineStringLineString:function(a,d){for(var f=b,e=0;e<d.length;e++)f=Math.min(f,this._distanceLineStringPoint(a,d[e]));return f},_buffer:function(a,d,f){var e=false,l=a.coordinates;if(!f&&g.geo.proj&&this._isGeodetic(a.coordinates)){e=true;l=g.geo.proj.fromGeodetic(a.coordinates)}switch(a.type){case "Point":a=[];f=0;for(var m;f<=180;f++){m=f*360/180*(Math.PI/180);a.push([l[0]+Math.cos(m)*d,l[1]+Math.sin(m)*d])}return{type:"Polygon",
+coordinates:[e?g.geo.proj.toGeodetic(a):a]};default:return r}},_flatten:function(a){var d=[],f=0;switch(a.type){case "Feature":g.merge(d,this._flatten(a.geometry));break;case "FeatureCollection":for(;f<a.features.length;f++)g.merge(d,this._flatten(a.features[f].geometry));break;case "GeometryCollection":for(;f<a.geometries.length;f++)g.merge(d,this._flatten(a.geometries[f]));break;default:d[0]=a}return d},length:function(a,d){var f=0,e,l=1,m,n;switch(a.type){case "Point":return 0;case "LineString":e=
+a.coordinates;break;case "Polygon":e=a.coordinates[0]}if(e){if(!d&&g.geo.proj&&this._isGeodetic(e))e=g.geo.proj.fromGeodetic(e);for(;l<e.length;l++){m=e[l][0]-e[l-1][0];n=e[l][1]-e[l-1][1];f+=Math.sqrt(m*m+n*n)}return f}},area:function(a,d){var f=0,e,l=1,m;switch(a.type){case "Point":case "LineString":return 0;case "Polygon":e=a.coordinates[0]}if(e){if(!d&&g.geo.proj&&this._isGeodetic(e))e=g.geo.proj.fromGeodetic(e);for(;l<=e.length;l++){m=l%e.length;f+=(e[l-1][0]-e[m][0])*(e[l-1][1]+e[m][1])/2}return Math.abs(f)}},
+pointAlong:function(a,d,f){var e=0,l=0,m=0,n,t=[],u=1,w=false;switch(a.type){case "Point":return g.extend({},a);case "LineString":n=a.coordinates;break;case "Polygon":n=a.coordinates[0]}if(n)if(d===0)return{type:"Point",coordinates:[n[0][0],n[0][1]]};else if(d===1){u=n.length-1;return{type:"Point",coordinates:[n[u][0],n[u][1]]}}else{if(!f&&g.geo.proj&&this._isGeodetic(n)){w=true;n=g.geo.proj.fromGeodetic(n)}for(;u<n.length;u++){a=n[u][0]-n[u-1][0];f=n[u][1]-n[u-1][1];a=Math.sqrt(a*a+f*f);t.push(a);
+e+=a}for(u=0;u<t.length&&m<d;u++){l=m;m+=t[u]/e}d=d-l;e=n[u-1];n=n[u];n=[e[0]+d*(n[0]-e[0]),e[1]+d*(n[1]-e[1])];return{type:"Point",coordinates:w?g.geo.proj.toGeodetic(n):n}}},_WKT:function(){function a(e){if(e&&e.length){for(var l=[],m=0;m<e.length;m++)l.push(e[m].join(" "));return"("+l+")"}else return"EMPTY"}function d(e){if(e&&e.length){for(var l=[],m=0;m<e.length;m++)l.push(a(e[m]));return"("+l+")"}else return"EMTPY"}function f(e){if(e&&e.type)switch(e.type){case "Point":return"POINT "+(e.coordinates&&
+e.coordinates.length?"("+e.coordinates.join(" ")+")":"EMPTY");case "LineString":return"LINESTRING "+a(e.coordinates);case "Polygon":return"POLYGON "+d(e.coordinates);case "MultiPoint":return"MULTIPOINT "+a(e.coordinates);case "MultiLineString":return"MULTILINSTRING "+d(e.coordinates);case "MultiPolygon":if((e=e.coordinates)&&e.length){for(var l=[],m=0;m<e.length;m++)l.push(d(e[m]));e="("+l+")"}else e="EMPTY";return"MULTIPOLYGON "+e;case "GeometryCollection":if((e=e.geometries)&&e.length){l=[];for(m=
+0;m<e.length;m++)l.push(f(e[m]));e="("+e+")"}else e="EMPTY";return"GEOMETRYCOLLECTION "+e;default:return""}else return""}return{stringify:f,parse:function(e){e=g.trim(e);var l=e.indexOf(" "),m=e.substr(l+1);switch(e.substr(0,l).toUpperCase()){case "POINT":return(e=m.match(/\(\s*([\d\.-]+)\s+([\d\.-]+)\s*\)/))&&e.length>2?{type:"Point",coordinates:[parseFloat(e[1]),parseFloat(e[2])]}:null;case "LINESTRING":m=m.match(/\s*\((.*)\)/);e=[];var n;l=0;if(m.length>1){for(m=m[1].match(/[\d\.-]+\s+[\d\.-]+/g);l<
+m.length;l++){n=m[l].match(/\s*([\d\.-]+)\s+([\d\.-]+)\s*/);e[l]=[parseFloat(n[1]),parseFloat(n[2])]}e={type:"LineString",coordinates:e}}else e=null;return e;case "POLYGON":m=m.match(/\s*\(\s*\((.*)\)\s*\)/);e=[];l=0;if(m.length>1){for(m=m[1].match(/[\d\.-]+\s+[\d\.-]+/g);l<m.length;l++){n=m[l].match(/\s*([\d\.-]+)\s+([\d\.-]+)\s*/);e[l]=[parseFloat(n[1]),parseFloat(n[2])]}e={type:"Polygon",coordinates:[e]}}else e=null;return e;default:return null}}}}(),proj:function(){return{fromGeodeticPos:function(a){if(!a)debugger;
+return[6378137*a[0]*0.017453292519943295,6378137*Math.log(Math.tan(0.7853981633974483+a[1]*0.017453292519943295/2))]},fromGeodetic:function(a){if(!g.geo._isGeodetic(a))return a;var d=g.isArray(a[0]),f=this.fromGeodeticPos;if(!d&&a.length==4){d=f([a[0],a[1]]);a=f([a[2],a[3]]);return[d[0],d[1],a[0],a[1]]}else{var e=d&&g.isArray(a[0][0]),l=e&&g.isArray(a[0][0][0]),m=[],n,t,u;if(!l){if(!e){d||(a=[a]);a=[a]}a=[a]}for(n=0;n<a.length;n++){m[n]=[];for(t=0;t<a[n].length;t++){m[n][t]=[];for(u=0;u<a[n][t].length;u++)m[n][t][u]=
+f(a[n][t][u])}}return l?m:e?m[0]:d?m[0][0]:m[0][0][0]}},toGeodeticPos:function(a){return[a[0]/6378137*57.29577951308232,(1.5707963267948966-2*Math.atan(1/Math.exp(a[1]/6378137)))*57.29577951308232]},toGeodetic:function(a){if(g.geo._isGeodetic(a))return a;var d=g.isArray(a[0]),f=this.toGeodeticPos;if(!d&&a.length==4){d=f([a[0],a[1]]);a=f([a[2],a[3]]);return[d[0],d[1],a[0],a[1]]}else{var e=d&&g.isArray(a[0][0]),l=e&&g.isArray(a[0][0][0]),m=[];if(!l){if(!e){d||(a=[a]);a=[a]}a=[a]}for(i=0;i<a.length;i++){m[i]=
+[];for(j=0;j<a[i].length;j++){m[i][j]=[];for(k=0;k<a[i][j].length;k++)m[i][j][k]=f(a[i][j][k])}}return l?m:e?m[0]:d?m[0][0]:m[0][0][0]}}}}(),_serviceTypes:{}}})(jQuery,this);
+(function(g,q){var r=function(){for(var b=5,c=document.createElement("div"),a=c.all||[];c.innerHTML="<!--[if gt IE "+ ++b+"]><br><![endif]--\>",a[0];);return b>6?b:!b}();g.widget("geo.geographics",{_$elem:q,_options:{},_trueCanvas:true,_width:0,_height:0,_$canvas:q,_context:q,_$labelsContainer:q,options:{style:{borderRadius:"8px",color:"#7f0000",fillOpacity:0.2,height:"8px",opacity:1,strokeOpacity:1,strokeWidth:"2px",visibility:"visible",width:"8px"}},_create:function(){this._$elem=this.element;this._options=
+this.options;this._$elem.css({display:"inline-block",overflow:"hidden",textAlign:"left"});this._$elem.css("position")=="static"&&this._$elem.css("position","relative");this._$elem.addClass("geo-graphics");this._width=this._$elem.width();this._height=this._$elem.height();if(!(this._width&&this._height)){this._width=parseInt(this._$elem.css("width"));this._height=parseInt(this._$elem.css("height"))}var b="width:"+this._width+"px;height:"+this._height+"px;",c='width="'+this._width+'" height="'+this._height+
+'"';if(document.createElement("canvas").getContext){this._$elem.append("<canvas "+c+' style="position:absolute;left:0;top:0;margin:0;padding:0;"></canvas>');this._$canvas=this._$elem.children(":last");this._context=this._$canvas[0].getContext("2d")}else if(r<=8){this._trueCanvas=false;this._$elem.append("<div "+c+' style="position:absolute;left:0;top:0;margin:0;padding:0;'+b+'"></div>');this._$canvas=this._$elem.children(":last");G_vmlCanvasManager.initElement(this._$canvas[0]);this._context=this._$canvas[0].getContext("2d");
+this._$canvas.children().css({backgroundColor:"transparent",width:this._width,height:this._height})}this._$elem.append('<div class="geo-labels-container" style="position:absolute;left:0;top:0;margin:0;padding:0;'+b+'"></div>');this._$labelsContainer=this._$elem.children(":last")},_setOption:function(b,c){if(b=="style")c=g.extend({},this._options.style,c);g.Widget.prototype._setOption.apply(this,arguments)},destroy:function(){g.Widget.prototype.destroy.apply(this,arguments);this._$elem.html("");this._$elem.removeClass("geo-graphics")},
+clear:function(){this._context.clearRect(0,0,this._width,this._height);this._$labelsContainer.html("")},drawArc:function(b,c,a,d){d=this._getGraphicStyle(d);if(d.visibility!="hidden"&&d.opacity>0&&d.widthValue>0&&d.heightValue>0){var f=Math.min(d.widthValue,d.heightValue)/2;c=c*Math.PI/180;a=a*Math.PI/180;this._context.save();this._context.translate(b[0],b[1]);d.widthValue>d.heightValue?this._context.scale(d.widthValue/d.heightValue,1):this._context.scale(1,d.heightValue/d.widthValue);this._context.beginPath();
+this._context.arc(0,0,f,c,a,false);this._trueCanvas&&this._context.restore();if(d.doFill){this._context.fillStyle=d.fill;this._context.globalAlpha=d.opacity*d.fillOpacity;this._context.fill()}if(d.doStroke){this._context.lineJoin="round";this._context.lineWidth=d.strokeWidthValue;this._context.strokeStyle=d.stroke;this._context.globalAlpha=d.opacity*d.strokeOpacity;this._context.stroke()}this._trueCanvas||this._context.restore()}},drawPoint:function(b,c){c=this._getGraphicStyle(c);if(c.widthValue==
+c.heightValue&&c.heightValue==c.borderRadiusValue)this.drawArc(b,0,360,c);else if(c.visibility!="hidden"&&c.opacity>0){c.borderRadiusValue=Math.min(Math.min(c.widthValue,c.heightValue)/2,c.borderRadiusValue);b[0]-=c.widthValue/2;b[1]-=c.heightValue/2;this._context.beginPath();this._context.moveTo(b[0]+c.borderRadiusValue,b[1]);this._context.lineTo(b[0]+c.widthValue-c.borderRadiusValue,b[1]);this._context.quadraticCurveTo(b[0]+c.widthValue,b[1],b[0]+c.widthValue,b[1]+c.borderRadiusValue);this._context.lineTo(b[0]+
+c.widthValue,b[1]+c.heightValue-c.borderRadiusValue);this._context.quadraticCurveTo(b[0]+c.widthValue,b[1]+c.heightValue,b[0]+c.widthValue-c.borderRadiusValue,b[1]+c.heightValue);this._context.lineTo(b[0]+c.borderRadiusValue,b[1]+c.heightValue);this._context.quadraticCurveTo(b[0],b[1]+c.heightValue,b[0],b[1]+c.heightValue-c.borderRadiusValue);this._context.lineTo(b[0],b[1]+c.borderRadiusValue);this._context.quadraticCurveTo(b[0],b[1],b[0]+c.borderRadiusValue,b[1]);this._context.closePath();if(c.doFill){this._context.fillStyle=
+c.fill;this._context.globalAlpha=c.opacity*c.fillOpacity;this._context.fill()}if(c.doStroke){this._context.lineJoin="round";this._context.lineWidth=c.strokeWidthValue;this._context.strokeStyle=c.stroke;this._context.globalAlpha=c.opacity*c.strokeOpacity;this._context.stroke()}}},drawLineString:function(b,c){this._drawLines([b],false,c)},drawPolygon:function(b,c){this._drawLines(b,true,c)},drawBbox:function(b,c){this._drawLines([[[b[0],b[1]],[b[0],b[3]],[b[2],b[3]],[b[2],b[1]],[b[0],b[1]]]],true,c)},
+drawLabel:function(b,c){this._$labelsContainer.append('<div class="geo-label" style="position:absolute; left:'+b[0]+"px; top:"+b[1]+'px;">'+c+"</div>")},resize:function(){this._width=this._$elem.width();this._height=this._$elem.height();if(!(this._width&&this._height)){this._width=parseInt(this._$elem.css("width"));this._height=parseInt(this._$elem.css("height"))}if(this._trueCanvas){this._$canvas[0].width=this._width;this._$canvas[0].height=this._height}this._$labelsContainer.css({width:this._width,
+height:this._height})},_getGraphicStyle:function(b){function c(a){a=parseInt(a);return+a+""===a?+a:a}b=g.extend({},this._options.style,b);b.borderRadiusValue=c(b.borderRadius);b.fill=b.fill||b.color;b.doFill=b.fill&&b.fillOpacity>0;b.stroke=b.stroke||b.color;b.strokeWidthValue=c(b.strokeWidth);b.doStroke=b.stroke&&b.strokeOpacity>0&&b.strokeWidthValue>0;b.widthValue=c(b.width);b.heightValue=c(b.height);return b},_drawLines:function(b,c,a){if(!(!b||!b.length||b[0].length<2)){a=this._getGraphicStyle(a);
+var d,f;if(a.visibility!="hidden"&&a.opacity>0){this._context.beginPath();this._context.moveTo(b[0][0][0],b[0][0][1]);for(d=0;d<b.length;d++)for(f=0;f<b[d].length;f++)this._context.lineTo(b[d][f][0],b[d][f][1]);c&&this._context.closePath();if(c&&a.doFill){this._context.fillStyle=a.fill;this._context.globalAlpha=a.opacity*a.fillOpacity;this._context.fill()}if(a.doStroke){this._context.lineCap=this._context.lineJoin="round";this._context.lineWidth=a.strokeWidthValue;this._context.strokeStyle=a.stroke;
+this._context.globalAlpha=a.opacity*a.strokeOpacity;this._context.stroke()}}}}})})(jQuery);
+(function(g,q){var r=function(){for(var b=5,c=document.createElement("div"),a=c.all||[];c.innerHTML="<!--[if gt IE "+ ++b+"]><br><![endif]--\>",a[0];);return b>6?b:!b}();g.widget("geo.geomap",{_$elem:q,_map:q,_created:false,_contentBounds:{},_$resizeContainer:q,_$eventTarget:q,_$contentFrame:q,_$existingChildren:q,_$attrList:q,_$servicesContainer:q,_$panContainer:q,_$shapesContainer:q,_$drawContainer:q,_$measureContainer:q,_$measureLabel:q,_dpi:96,_currentServices:[],_center:q,_pixelSize:q,_centerMax:q,
+_pixelSizeMax:q,_userGeodetic:true,_wheelTimeout:null,_wheelLevel:0,_zoomFactor:2,_fullZoomFactor:2,_partialZoomFactor:1.18920711500273,_mouseDown:q,_inOp:q,_toolPan:q,_shiftZoom:q,_anchor:q,_current:q,_downDate:q,_moveDate:q,_clickDate:q,_lastMove:q,_lastDrag:q,_windowHandler:null,_resizeTimeout:null,_panning:q,_velocity:q,_friction:q,_supportTouch:q,_softDblClick:q,_isTap:q,_isDbltap:q,_isMultiTouch:q,_multiTouchAnchor:q,_multiTouchAnchorBbox:q,_multiTouchCurrentBbox:q,_drawTimeout:null,_drawPixels:[],
+_drawCoords:[],_graphicShapes:[],_initOptions:{},_options:{},options:g.extend({},{bbox:[-180,-85,180,85],bboxMax:[-180,-85,180,85],center:[0,0],cursors:{"static":"default",pan:"url(data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAgACAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=), move",
+zoom:"crosshair",drawPoint:"crosshair",drawLineString:"crosshair",drawPolygon:"crosshair",measureLength:"crosshair",measureArea:"crosshair"},measureLabels:{length:"{{=length.toFixed( 2 )}} m",area:"{{=area.toFixed( 2 )}} sq m"},drawStyle:{},shapeStyle:{},mode:"pan",pannable:true,scroll:"default",services:[{"class":"osm",type:"tiled",src:function(b){return"http://tile.openstreetmap.org/"+b.zoom+"/"+b.tile.column+"/"+b.tile.row+".png"},attr:"© OpenStreetMap & contributors, CC-BY-SA"}],tilingScheme:{tileWidth:256,
+tileHeight:256,levels:18,basePixelSize:156543.03392799935,origin:[-2.0037508342787E7,2.0037508342787E7]},axisLayout:"map",zoom:0,pixelSize:0}),_createWidget:function(b,c){this._$elem=g(c);if(this._$elem.is(".geo-service")){var a=this._$elem.closest(".geo-content-frame");this._$elem.append('<div class="geo-shapes-container" style="position:absolute; left:0; top:0; width:'+a.css("width")+"; height:"+a.css("height")+'; margin:0; padding:0;"></div>');this._$shapesContainer=this._$elem.children(":last")}else{this._$elem.addClass("geo-map");
+this._initOptions=b||{};this._forcePosition(this._$elem);this._$elem.css("text-align","left");a=this._findMapSize();this._contentBounds={x:parseInt(this._$elem.css("padding-left")),y:parseInt(this._$elem.css("padding-top")),width:a.width,height:a.height};this._createChildren();this._center=this._centerMax=[0,0];this.options.pixelSize=this._pixelSize=this._pixelSizeMax=156543.03392799935;this._mouseDown=this._inOp=this._toolPan=this._shiftZoom=this._panning=this._isTap=this._isDbltap=false;this._anchor=
+[0,0];this._current=[0,0];this._lastMove=[0,0];this._lastDrag=[0,0];this._velocity=[0,0];this._friction=[0.8,0.8];this._downDate=this._moveDate=this._clickDate=0;this._drawPixels=[];this._drawCoords=[]}this._graphicShapes=[];g.Widget.prototype._createWidget.apply(this,arguments)},_create:function(){this._options=this.options;if(this._$elem.is(".geo-service")){this._map=this._$elem.data("geoMap");this._$shapesContainer.geographics();this._options.shapeStyle=this._$shapesContainer.geographics("option",
+"style")}else{this._map=this;this._softDblClick=(this._supportTouch="ontouchend"in document)||r==7;var b=this,c=this._supportTouch?"touchstart":"mousedown",a=this._supportTouch?"touchend touchcancel":"mouseup",d=this._supportTouch?"touchmove":"mousemove";g(document).keydown(g.proxy(this._document_keydown,this));this._$eventTarget.dblclick(g.proxy(this._eventTarget_dblclick,this));this._$eventTarget.bind(c,g.proxy(this._eventTarget_touchstart,this));c=this._$eventTarget[0].setCapture?this._$eventTarget:
+g(document);c.bind(d,g.proxy(this._dragTarget_touchmove,this));c.bind(a,g.proxy(this._dragTarget_touchstop,this));this._$eventTarget.mousewheel(g.proxy(this._eventTarget_mousewheel,this));this._windowHandler=function(){b._resizeTimeout&&clearTimeout(b._resizeTimeout);b._resizeTimeout=setTimeout(function(){b._created&&b._$elem.geomap("resize")},500)};g(window).resize(this._windowHandler);this._$drawContainer.geographics({style:this._initOptions.drawStyle||{}});this._options.drawStyle=this._$drawContainer.geographics("option",
+"style");this._$shapesContainer.geographics({style:this._initOptions.shapeStyle||{}});this._options.shapeStyle=this._$shapesContainer.geographics("option","style");if(this._initOptions){this._initOptions.tilingScheme&&this._setOption("tilingScheme",this._initOptions.tilingScheme,false);if(this._initOptions.services)this._options.services=g.merge([],this._initOptions.services);this._initOptions.bbox&&this._setOption("bbox",this._initOptions.bbox,false);this._initOptions.center&&this._setOption("center",
+this._initOptions.center,false);this._initOptions.zoom!==q&&this._setZoom(this._initOptions.zoom,false,false)}g.template("geoMeasureLength",this._options.measureLabels.length);g.template("geoMeasureArea",this._options.measureLabels.area);this._$eventTarget.css("cursor",this._options.cursors[this._options.mode]);this._createServices();this._refresh();this._created=true}},_setOption:function(b,c,a){if(b!="pixelSize"){a=a===q||a;this._$elem.is(".geo-map")&&this._panFinalize();switch(b){case "bbox":if(this._userGeodetic=
+g.geo.proj&&g.geo._isGeodetic(c))c=g.geo.proj.fromGeodetic(c);this._setBbox(c,false,a);c=this._getBbox();break;case "center":if(this._userGeodetic=g.geo.proj&&g.geo._isGeodetic(c))c=g.geo.proj.fromGeodetic(c);this._setCenterAndSize(c,this._pixelSize,false,a);break;case "measureLabels":c=g.extend(this._options.measureLabels,c);g.template("geoMeasureLength",c.length);g.template("geoMeasureArea",c.area);break;case "drawStyle":if(this._$drawContainer){this._$drawContainer.geographics("option","style",
+c);c=this._$drawContainer.geographics("option","style")}break;case "shapeStyle":if(this._$shapesContainer){this._$shapesContainer.geographics("option","style",c);c=this._$shapesContainer.geographics("option","style")}break;case "mode":this._resetDrawing();this._$eventTarget.css("cursor",this._options.cursors[c]);break;case "zoom":this._setZoom(c,false,a)}g.Widget.prototype._setOption.apply(this,arguments);switch(b){case "bbox":case "center":if(this._userGeodetic){this._options.bbox=g.geo.proj.toGeodetic(this._options.bbox);
+this._options.center=g.geo.proj.toGeodetic(this._center)}break;case "tilingScheme":if(c!=null){this._pixelSizeMax=this._getPixelSize(0);this._centerMax=[c.origin[0]+this._pixelSizeMax*c.tileWidth/2,c.origin[1]+this._pixelSizeMax*c.tileHeight/2]}break;case "bboxMax":this._pixelSizeMax=this._getPixelSize(0);this._centerMax=g.geo.proj&&g.geo._isGeodetic(c)?g.geo.center(g.geo.proj.fromGeodetic(c)):g.geo.center(c);break;case "services":this._createServices();a&&this._refresh();break;case "shapeStyle":if(a){this._$shapesContainer.geographics("clear");
+this._refreshShapes(this._$shapesContainer,this._graphicShapes,this._graphicShapes,this._graphicShapes)}}}},destroy:function(){if(this._$elem.is(".geo-service")){this._$shapesContainer.geographics("destroy");this._$shapesContainer=q}else{this._created=false;g(window).unbind("resize",this._windowHandler);for(var b=0;b<this._currentServices.length;b++){this._currentServices[b].serviceContainer.geomap("destroy");g.geo._serviceTypes[this._currentServices[b].type].destroy(this,this._$servicesContainer,
+this._currentServices[b])}this._$shapesContainer.geographics("destroy");this._$shapesContainer=q;this._$drawContainer.geographics("destroy");this._$drawContainer=q;this._$existingChildren.detach();this._$elem.html("");this._$elem.append(this._$existingChildren);this._$elem.removeClass("geo-map")}g.Widget.prototype.destroy.apply(this,arguments)},toMap:function(b){b=this._toMap(b);return this._userGeodetic?g.geo.proj.toGeodetic(b):b},toPixel:function(b,c,a){return this._toPixel(g.geo.proj?g.geo.proj.fromGeodetic(b):
+b,c,a)},opacity:function(b,c){if(this._$elem.is(".geo-service"))this._$elem.closest(".geo-map").geomap("opacity",b,this._$elem);else if(b>=0||b<=1)for(var a=0;a<this._currentServices.length;a++){var d=this._currentServices[a];if(!c||d.serviceContainer[0]==c[0]){d.style.opacity=b;g.geo._serviceTypes[d.type].opacity(this,d)}}},toggle:function(b,c){if(this._$elem.is(".geo-service"))this._$elem.closest(".geo-map").geomap("toggle",b,this._$elem);else for(var a=0;a<this._currentServices.length;a++){var d=
+this._currentServices[a];if(!c||d.serviceContainer[0]==c[0]){if(b===q)b=d.style.visibility!=="visible";d.style.visibility=b?"visible":"hidden";d.serviceContainer.toggle(b);b&&g.geo._serviceTypes[d.type].refresh(this,d)}}},zoom:function(b){b!=null&&this._setZoom(this._options.zoom+b,false,true)},refresh:function(){this._refresh()},resize:function(){var b=this._findMapSize(),c=b.width/2-this._contentBounds.width/2,a=b.height/2-this._contentBounds.height/2,d;this._contentBounds={x:parseInt(this._$elem.css("padding-left")),
+y:parseInt(this._$elem.css("padding-top")),width:b.width,height:b.height};this._$resizeContainer.css({width:b.width,height:b.height});for(d=0;d<this._currentServices.length;d++)g.geo._serviceTypes[this._currentServices[d].type].resize(this,this._currentServices[d]);this._$elem.find(".geo-graphics").css({width:b.width,height:b.height}).geographics("resize");for(d=0;d<this._drawPixels.length;d++){this._drawPixels[d][0]+=c;this._drawPixels[d][1]+=a}this._setCenterAndSize(this._center,this._pixelSize,
+false,true)},append:function(b){if(b&&g.isPlainObject(b)){var c,a,d,f,e,l;c=b.type=="FeatureCollection"?b.features:g.isArray(b)?b:[b];for(d=1;d<arguments.length;d++){a=arguments[d];if(typeof a==="object")f=a;else if(typeof a==="number"||typeof a==="string")e=a;else if(typeof a==="boolean")l=a}for(d=0;d<c.length;d++){if(c[d].type!="Point"){a=g.geo.bbox(c[d]);if(g.geo.proj&&g.geo._isGeodetic(a))a=g.geo.proj.fromGeodetic(a);g.data(c[d],"geoBbox",a)}this._graphicShapes.push({shape:c[d],style:f,label:e})}if(l===
+q||l)this._refresh()}},empty:function(b){for(var c=0;c<this._graphicShapes.length;c++)g.removeData(this._graphicShapes[c].shape,"geoBbox");this._graphicShapes=[];if(b===q||b)this._refresh()},find:function(b,c){var a=g.isPlainObject(b);a&&this._map.toPixel(b.coordinates);for(var d=this._map._pixelSize*c,f=[],e,l,m,n=0;n<this._graphicShapes.length;n++){e=this._graphicShapes[n];if(a)if(e.shape.type=="Point")g.geo.distance(e.shape,b)<=d&&f.push(e.shape);else{l=g.data(e.shape,"geoBbox");l={type:"Polygon",
+coordinates:[[[l[0],l[1]],[l[0],l[3]],[l[2],l[3]],[l[2],l[1]],[l[0],l[1]]]]};m={type:"Point",coordinates:g.geo.proj&&g.geo._isGeodetic(b.coordinates)?g.geo.proj.fromGeodetic(b.coordinates):b.coordinates};if(g.geo.distance(l,m,true)<=d){l=g.geo._flatten(e.shape);for(m=0;m<l.length;m++)if(g.geo.distance(l[m],b)<=d){f.push(e.shape);break}}}else f.push(e.shape)}this._$elem.is(".geo-map")&&this._$elem.find(".geo-service").each(function(){f=g.merge(f,g(this).geomap("find",b,c))});return f},remove:function(b,
+c){for(var a=0;a<this._graphicShapes.length;a++)if(this._graphicShapes[a].shape==b){g.removeData(b,"geoBbox");var d=this._graphicShapes.slice(a+1);this._graphicShapes.length=a;this._graphicShapes.push.apply(this._graphicShapes,d);break}if(c===q||c)this._refresh()},_getBbox:function(b,c){b=b||this._center;c=c||this._pixelSize;var a=this._contentBounds.width/2*c,d=this._contentBounds.height/2*c;return[b[0]-a,b[1]-d,b[0]+a,b[1]+d]},_setBbox:function(b,c,a){var d=[b[0]+(b[2]-b[0])/2,b[1]+(b[3]-b[1])/
+2];b=Math.max(g.geo.width(b,true)/this._contentBounds.width,g.geo.height(b,true)/this._contentBounds.height);if(this._options.tilingScheme)b=this._getPixelSize(this._getZoom(d,b));else if(this._getZoom(d,b)<0)b=this._pixelSizeMax;this._setCenterAndSize(d,b,c,a)},_getBboxMax:function(){var b=this._contentBounds.width/2*this._pixelSizeMax,c=this._contentBounds.height/2*this._pixelSizeMax;return[this._centerMax[0]-b,this._centerMax[1]-c,this._centerMax[0]+b,this._centerMax[1]+c]},_getCenter:function(){return this._center},
+_getContentBounds:function(){return this._contentBounds},_getServicesContainer:function(){return this._$servicesContainer},_getZoom:function(b,c){b=b||this._center;c=c||this._pixelSize;var a=this._options.tilingScheme;if(a)if(a.pixelSizes!=null){for(var d=Math.floor(c*1E3),f=a.pixelSizes.length-1;f>=0;f--)if(Math.floor(a.pixelSizes[f]*1E3)>=d)return f;return 0}else return Math.max(Math.round(Math.log(a.basePixelSize/c)/Math.log(2)),0);else{d=this._contentBounds.width/this._contentBounds.height;a=
+g.geo.reaspect(this._getBbox(b,c),d,true);d=g.geo.reaspect(this._getBboxMax(),d,true);return Math.max(Math.round(Math.log(g.geo.width(d,true)/g.geo.width(a,true))/Math.log(this._zoomFactor)),0)}},_setZoom:function(b,c,a){b=Math.max(b,0);this._setCenterAndSize(this._center,this._getPixelSize(b),c,a)},_createChildren:function(){this._$existingChildren=this._$elem.children().detach();this._forcePosition(this._$existingChildren);this._$existingChildren.css("-moz-user-select","none");var b="width:"+this._contentBounds.width+
+"px; height:"+this._contentBounds.height+"px; margin:0; padding:0;";this._$elem.prepend('<div class="geo-event-target geo-content-frame" style="position:absolute; left:'+this._contentBounds.x+"px; top:"+this._contentBounds.y+"px;"+b+'overflow:hidden; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none;" unselectable="on"></div>');this._$eventTarget=this._$contentFrame=this._$elem.children(":first");this._$contentFrame.append('<div class="geo-services-container" style="position:absolute; left:0; top:0;'+
+b+'"></div>');this._$servicesContainer=this._$contentFrame.children(":last");this._$contentFrame.append('<div class="geo-shapes-container" style="position:absolute; left:0; top:0;'+b+'"></div>');this._$shapesContainer=this._$contentFrame.children(":last");this._$contentFrame.append('<ul style="position: absolute; bottom: 8px; left: 8px; list-style-type: none; max-width: 50%; padding: 0; margin: 0;"></ul>');this._$attrList=this._$contentFrame.children(":last");this._$contentFrame.append('<div class="geo-draw-container" style="position:absolute; left:0; top:0;'+
+b+'"></div>');this._$drawContainer=this._$contentFrame.children(":last");this._$contentFrame.append('<div class="geo-measure-container" style="position:absolute; left:0; top:0;'+b+'"><div class="geo-measure-label" style="position:absolute; left:0; top:0;; display: none;"></div></div>');this._$measureContainer=this._$contentFrame.children(":last");this._$measureLabel=this._$measureContainer.children();this._$panContainer=g([this._$shapesContainer[0],this._$drawContainer[0],this._$measureContainer[0]]);
+this._$resizeContainer=g([this._$contentFrame[0],this._$servicesContainer[0],this._$eventTarget[0],this._$measureContainer[0]]);this._$contentFrame.append(this._$existingChildren);g("#geo-measure-style").length||g("head").prepend('<style type="text/css" id="geo-measure-style">.geo-measure-label { margin: 4px 0 0 6px; font-family: sans-serif;'+(r?"letter-spacing: 2px; color: #444; filter:progid:DXImageTransform.Microsoft.DropShadow(Color=white, OffX=1, OffY=2, Positive=true);":"color: #000; text-shadow: #fff 1px 2px; font-weight: bold;")+
+" }</style>")},_createServices:function(){var b,c;for(c=0;c<this._currentServices.length;c++){this._currentServices[c].serviceContainer.geomap("destroy");g.geo._serviceTypes[this._currentServices[c].type].destroy(this,this._$servicesContainer,this._currentServices[c])}this._currentServices=[];this._$servicesContainer.html("");this._$attrList.html("");for(c=0;c<this._options.services.length;c++){b=this._currentServices[c]=g.extend({},this._options.services[c]);b.style=g.extend({visibility:"visible",
+opacity:1},b.style);this._$servicesContainer.append("<div "+(b.id?' id="'+b.id+'"':"")+('class="geo-service '+(b["class"]?b["class"]:"")+'"')+' style="position:absolute; left:0; top:0; width:32px; height:32px; margin:0; padding:0; display:'+(b.style.visibility==="visible"?"block":"none")+';"></div>');serviceContainer=this._$servicesContainer.children(":last");this._currentServices[c].serviceContainer=serviceContainer;g.geo._serviceTypes[b.type].create(this,serviceContainer,b,c);serviceContainer.data("geoMap",
+this).geomap();b.attr&&this._$attrList.append("<li>"+b.attr+"</li>")}this._$attrList.find("a").css({position:"relative",zIndex:100})},_refreshDrawing:function(){this._$drawContainer.geographics("clear");if(this._drawPixels.length>0){var b=this._options.mode,c=this._drawPixels,a=this._drawCoords,d,f;switch(b){case "measureLength":b="drawLineString";f={type:"LineString",coordinates:a};d=g.render({length:g.geo.length(f,true)},"geoMeasureLength");f=g.merge([],c[c.length-1]);break;case "measureArea":b=
+"drawPolygon";f={type:"Polygon",coordinates:[g.merge([],a)]};f.coordinates[0].push(a[0]);d=g.render({area:g.geo.area(f,true)},"geoMeasureArea");f=g.merge([],c[c.length-1]);c=[c];break;case "drawPolygon":c=[c]}this._$drawContainer.geographics(b,c);if(d){this._$measureLabel.html(d);b=this._contentBounds.width-(this._$measureLabel.outerWidth(true)+f[0]);c=this._contentBounds.height-(this._$measureLabel.outerHeight(true)+f[1]);if(b<0)f[0]+=b;if(c<0)f[1]+=c;this._$measureLabel.css({left:f[0],top:f[1]}).show()}}},
+_resetDrawing:function(){this._drawPixels=[];this._drawCoords=[];this._$drawContainer.geographics("clear");this._$measureLabel.hide()},_refreshShapes:function(b,c,a,d,f,e){var l,m,n,t,u,w,B,I=this._map._getBbox(f,e);for(l=0;l<c.length;l++){n=c[l].shape||c[l];n=n.geometry||n;m=g.data(n,"geoBbox");if(!(m&&g.geo._bboxDisjoint(I,m))){t=g.isArray(a)?a[l].style:a;u=g.isArray(d)?d[l].label:d;w=u!==q;B=q;switch(n.type){case "Point":B=this._map.toPixel(n.coordinates,f,e);this._$shapesContainer.geographics("drawPoint",
+B,t);break;case "LineString":this._$shapesContainer.geographics("drawLineString",this._map.toPixel(n.coordinates,f,e),t);if(w)B=this._map.toPixel(g.geo.pointAlong(n,0.5).coordinates,f,e);break;case "Polygon":this._$shapesContainer.geographics("drawPolygon",this._map.toPixel(n.coordinates,f,e),t);if(w)B=this._map.toPixel(g.geo.centroid(n).coordinates,f,e);break;case "MultiPoint":for(m=0;m<n.coordinates.length;m++)this._$shapesContainer.geographics("drawPoint",this._map.toPixel(n.coordinates[m],f,e),
+t);if(w)B=this._map.toPixel(g.geo.centroid(n).coordinates,f,e);break;case "MultiLineString":for(m=0;m<n.coordinates.length;m++)this._$shapesContainer.geographics("drawLineString",this._map.toPixel(n.coordinates[m],f,e),t);if(w)B=this._map.toPixel(g.geo.centroid(n).coordinates,f,e);break;case "MultiPolygon":for(m=0;m<n.coordinates.length;m++)this._$shapesContainer.geographics("drawPolygon",this._map.toPixel(n.coordinates[m],f,e),t);if(w)B=this._map.toPixel(g.geo.centroid(n).coordinates,f,e);break;
+case "GeometryCollection":this._refreshShapes(b,n.geometries,t,u,f,e)}w&&B&&this._$shapesContainer.geographics("drawLabel",B,u)}}},_findMapSize:function(){for(var b={width:0,height:0},c=this._$elem;c.size()&&!(b.width>0&&b.height>0);){b={width:c.width(),height:c.height()};if(b.width<=0||b.height<=0)b={width:parseInt(c.css("width")),height:parseInt(c.css("height"))};c=c.parent()}return b},_forcePosition:function(b){var c=b.css("position");c!="relative"&&c!="absolute"&&c!="fixed"&&b.css("position",
+"relative")},_getPixelSize:function(b){var c=this._options.tilingScheme;if(c!=null){if(b===0)return c.pixelSizes!=null?c.pixelSizes[0]:c.basePixelSize;b=Math.round(b);b=Math.max(b,0);b=Math.min(b,(c.pixelSizes!=null?c.pixelSizes.length:c.levels)-1);return c.pixelSizes!=null?c.pixelSizes[b]:c.basePixelSize/Math.pow(2,b)}else{b=g.geo.scaleBy(this._getBboxMax(),1/Math.pow(this._zoomFactor,b),true);return Math.max(g.geo.width(b,true)/this._contentBounds.width,g.geo.height(b,true)/this._contentBounds.height)}},
+_getZoomCenterAndSize:function(b,c,a){c=Math.pow(a?this._fullZoomFactor:this._partialZoomFactor,-c);if(this._options.tilingScheme){c=this._getZoom(this._center,this._pixelSize*c);c=this._getPixelSize(c)}else{c=this._pixelSize*c;if(this._getZoom(this._center,c)<0)c=this._pixelSizeMax}a=c/this._pixelSize;b=this._toMap(b);a=[(this._center[0]-b[0])*a,(this._center[1]-b[1])*a];return{pixelSize:c,center:[b[0]+a[0],b[1]+a[1]]}},_mouseWheelFinish:function(){this._wheelTimeout=null;if(this._wheelLevel!=0){var b=
+this._getZoomCenterAndSize(this._anchor,this._wheelLevel,this._options.tilingScheme!=null);this._setCenterAndSize(b.center,b.pixelSize,true,true);this._wheelLevel=0}else this._refresh()},_panEnd:function(){this._velocity=[this._velocity[0]>0?Math.floor(this._velocity[0]*this._friction[0]):Math.ceil(this._velocity[0]*this._friction[0]),this._velocity[1]>0?Math.floor(this._velocity[1]*this._friction[1]):Math.ceil(this._velocity[1]*this._friction[1])];if(Math.abs(this._velocity[0])<4&&Math.abs(this._velocity[1])<
+4)this._panFinalize();else{this._current=[this._current[0]+this._velocity[0],this._current[1]+this._velocity[1]];this._panMove();setTimeout(g.proxy(this._panEnd,this),30)}},_panFinalize:function(){if(this._panning){this._velocity=[0,0];var b=-(this._current[0]-this._anchor[0])*this._pixelSize,c=(this._options.axisLayout==="image"?-1:1)*(this._current[1]-this._anchor[1])*this._pixelSize;this._$panContainer.css({left:0,top:0});this._$servicesContainer.find(".geo-shapes-container").css({left:0,top:0});
+this._setCenterAndSize([this._center[0]+b,this._center[1]+c],this._pixelSize,true,true);this._$eventTarget.css("cursor",this._options.cursors[this._options.mode]);this._inOp=false;this._anchor=this._current;this._mouseDown=this._toolPan=this._panning=false}},_panMove:function(){if(this._options.pannable){var b=this._current[0]-this._lastDrag[0],c=this._current[1]-this._lastDrag[1],a=0,d,f;if(this._toolPan||b>3||b<-3||c>3||c<-3){if(!this._toolPan){this._toolPan=true;this._$eventTarget.css("cursor",
+this._options.cursors.pan)}if(this._mouseDown)this._velocity=[b,c];if(b!=0||c!=0){this._panning=true;this._lastDrag=this._current;f={left:function(e,l){return parseInt(l)+b},top:function(e,l){return parseInt(l)+c}};for(a=0;a<this._currentServices.length;a++){d=this._currentServices[a];g.geo._serviceTypes[d.type].interactivePan(this,d,b,c);d.serviceContainer.find(".geo-shapes-container").css(f)}this._$panContainer.css(f)}}}},_refresh:function(){var b,c=0;if(this._$elem.is(".geo-map"))for(;c<this._currentServices.length;c++){b=
+this._currentServices[c];if(!this._mouseDown&&g.geo._serviceTypes[b.type]!==null){g.geo._serviceTypes[b.type].refresh(this,b);b.serviceContainer.geomap("refresh")}}if(this._$shapesContainer){this._$shapesContainer.geographics("clear");this._graphicShapes.length>0&&this._refreshShapes(this._$shapesContainer,this._graphicShapes,this._graphicShapes,this._graphicShapes)}},_setCenterAndSize:function(b,c,a,d){if(!(!g.isArray(b)||b.length!=2||typeof b[0]!=="number"||typeof b[1]!=="number")){if(this._pixelSize!=
+c){this._$elem.find(".geo-shapes-container").geographics("clear");for(var f=0;f<this._currentServices.length;f++){var e=this._currentServices[f];g.geo._serviceTypes[e.type].interactiveScale(this,e,b,c)}}this._center=g.merge([],b);this._options.pixelSize=this._pixelSize=c;if(this._userGeodetic){this._options.bbox=g.geo.proj.toGeodetic(this._getBbox());this._options.center=g.geo.proj.toGeodetic(this._center)}else{this._options.bbox=this._getBbox();this._options.center=g.merge([],b)}this._options.zoom=
+this._getZoom();if(this._drawCoords.length>0)this._drawPixels=this._toPixel(this._drawCoords);a&&this._trigger("bboxchange",window.event,{bbox:g.merge([],this._options.bbox)});if(d){this._refresh();this._refreshDrawing()}}},_toMap:function(b,c,a){c=c||this._center;a=a||this._pixelSize;var d=g.isArray(b[0]),f=d&&g.isArray(b[0][0]),e=f&&g.isArray(b[0][0][0]),l=this._contentBounds.width,m=this._contentBounds.height,n=l/2*a;a=m/2*a;c=[c[0]-n,c[1]-a,c[0]+n,c[1]+a];l=g.geo.width(c,true)/l;m=g.geo.height(c,
+true)/m;a=this._options.axisLayout==="image";var t=[],u,w,B;if(!e){if(!f){d||(b=[b]);b=[b]}b=[b]}for(u=0;u<b.length;u++){t[u]=[];for(w=0;w<b[u].length;w++){t[u][w]=[];for(B=0;B<b[u][w].length;B++){n=b[u][w][B][1]*m;t[u][w][B]=[c[0]+b[u][w][B][0]*l,a?c[1]+n:c[3]-n]}}}return e?t:f?t[0]:d?t[0][0]:t[0][0][0]},_toPixel:function(b,c,a){c=c||this._center;a=a||this._pixelSize;var d=g.isArray(b[0]),f=d&&g.isArray(b[0][0]),e=f&&g.isArray(b[0][0][0]),l=this._contentBounds.width,m=this._contentBounds.height,
+n=l/2*a;a=m/2*a;c=[c[0]-n,c[1]-a,c[0]+n,c[1]+a];var t=g.geo.width(c,true);a=g.geo.height(c,true);n=this._options.axisLayout==="image";l=l/t;m=m/a;a=[];var u,w;if(!e){if(!f){d||(b=[b]);b=[b]}b=[b]}for(t=0;t<b.length;t++){a[t]=[];for(u=0;u<b[t].length;u++){a[t][u]=[];for(w=0;w<b[t][u].length;w++)a[t][u][w]=[Math.round((b[t][u][w][0]-c[0])*l),Math.round((n?b[t][u][w][1]-c[1]:c[3]-b[t][u][w][1])*m)]}}return e?a:f?a[0]:d?a[0][0]:a[0][0][0]},_zoomTo:function(b,c,a,d){c=c<0?0:c;c=this._getPixelSize(c);this._setCenterAndSize(b,
+c,a,d)},_document_keydown:function(b){var c=this._drawCoords.length;if(c>0&&b.which==27)if(c<=2){this._resetDrawing();this._inOp=false}else{this._drawCoords[c-2]=g.merge([],this._drawCoords[c-1]);this._drawPixels[c-2]=g.merge([],this._drawPixels[c-1]);this._drawCoords.length--;this._drawPixels.length--;this._refreshDrawing()}},_eventTarget_dblclick_zoom:function(b){this._trigger("dblclick",b,{type:"Point",coordinates:this.toMap(this._current)});if(!b.isDefaultPrevented()){b=this._getZoomCenterAndSize(this._current,
+1,true);this._setCenterAndSize(b.center,b.pixelSize,true,true)}},_eventTarget_dblclick:function(b){if(this._options.mode!=="static"){this._panFinalize();if(this._drawTimeout){window.clearTimeout(this._drawTimeout);this._drawTimeout=null}g(b.currentTarget).offset();switch(this._options.mode){case "drawLineString":if(this._drawCoords.length>1&&!(this._drawCoords[0][0]==this._drawCoords[1][0]&&this._drawCoords[0][1]==this._drawCoords[1][1])){this._drawCoords.length--;this._trigger("shape",b,{type:"LineString",
+coordinates:this._userGeodetic?g.geo.proj.toGeodetic(this._drawCoords):this._drawCoords})}else this._eventTarget_dblclick_zoom(b);this._resetDrawing();break;case "drawPolygon":if(this._drawCoords.length>1&&!(this._drawCoords[0][0]==this._drawCoords[1][0]&&this._drawCoords[0][1]==this._drawCoords[1][1])){var c=this._drawCoords.length-1;if(c>2){this._drawCoords[c]=g.merge([],this._drawCoords[0]);this._trigger("shape",b,{type:"Polygon",coordinates:[this._userGeodetic?g.geo.proj.toGeodetic(this._drawCoords):
+this._drawCoords]})}}else this._eventTarget_dblclick_zoom(b);this._resetDrawing();break;case "measureLength":case "measureArea":this._resetDrawing();break;default:this._eventTarget_dblclick_zoom(b)}this._inOp=false}},_eventTarget_touchstart:function(b){if(this._options.mode!=="static")if(!(!this._supportTouch&&b.which!=1)){this._panFinalize();this._mouseWheelFinish();var c=g(b.currentTarget).offset(),a=b.originalEvent.changedTouches;if(this._supportTouch){this._multiTouchAnchor=g.merge([],a);if(this._isMultiTouch=
+this._multiTouchAnchor.length>1){this._multiTouchCurrentBbox=[a[0].pageX-c.left,a[0].pageY-c.top,a[1].pageX-c.left,a[1].pageY-c.top];this._multiTouchAnchorBbox=g.merge([],this._multiTouchCurrentBbox);this._current=g.geo.center(this._multiTouchCurrentBbox,true)}else{this._multiTouchCurrentBbox=[a[0].pageX-c.left,a[0].pageY-c.top,NaN,NaN];this._current=[a[0].pageX-c.left,a[0].pageY-c.top]}}else this._current=[b.pageX-c.left,b.pageY-c.top];if(this._softDblClick){c=g.now();if(c-this._downDate<750){if(this._isTap){a=
+this._current[0]-this._anchor[0];var d=this._current[1]-this._anchor[1];if(Math.sqrt(a*a+d*d)>8)this._isTap=false;else this._current=g.merge([],this._anchor)}this._isDbltap=this._isDbltap?false:this._isTap}else this._isDbltap=false;this._isTap=true;this._downDate=c}this._mouseDown=true;this._anchor=g.merge([],this._current);if(!this._inOp&&b.shiftKey){this._shiftZoom=true;this._$eventTarget.css("cursor",this._options.cursors.zoom)}else if(!this._isMultiTouch&&this._options.pannable){this._inOp=true;
+switch(this._options.mode){case "zoom":break;default:this._lastDrag=this._current;b.currentTarget.setCapture&&b.currentTarget.setCapture()}}b.preventDefault();return false}},_dragTarget_touchmove:function(b){if(this._options.mode!=="static"){var c=this._$eventTarget.offset(),a=this._drawCoords.length,d=b.originalEvent.changedTouches,f;f=0;if(this._supportTouch){if(!this._isMultiTouch&&d[0].identifier!==this._multiTouchAnchor[0].identifier){this._mouseDown=false;this._dragTarget_touchstop(b);this._isMultiTouch=
+true;this._multiTouchAnchor.push(d[0]);this._multiTouchCurrentBbox=[this._multiTouchCurrentBbox[0],this._multiTouchCurrentBbox[1],this._multiTouchAnchor[1].pageX-c.left,this._multiTouchAnchor[1].pageY-c.top];this._multiTouchAnchorBbox=g.merge([],this._multiTouchCurrentBbox);this._mouseDown=true;this._anchor=this._current=g.geo.center(this._multiTouchCurrentBbox,true);return false}if(this._isMultiTouch){for(;f<d.length;f++)if(d[f].identifier===this._multiTouchAnchor[0].identifier){this._multiTouchCurrentBbox[0]=
+d[f].pageX-c.left;this._multiTouchCurrentBbox[1]=d[f].pageY-c.top}else if(d[f].identifier===this._multiTouchAnchor[1].identifier){this._multiTouchCurrentBbox[2]=d[f].pageX-c.left;this._multiTouchCurrentBbox[3]=d[f].pageY-c.top}g.geo.center(this._multiTouchCurrentBbox,true);f=this._multiTouchCurrentBbox[2]-this._multiTouchCurrentBbox[0];c=this._multiTouchAnchorBbox[2]-this._multiTouchAnchorBbox[0];this._wheelLevel=Math.abs(Math.floor((1-f/c)*10));if(Math.abs(f)<Math.abs(c))this._wheelLevel=-this._wheelLevel;
+d=this._getZoomCenterAndSize(this._anchor,this._wheelLevel,false);this._$elem.find(".geo-shapes-container").geographics("clear");for(f=0;f<this._currentServices.length;f++){c=this._currentServices[f];g.geo._serviceTypes[c.type].interactiveScale(this,c,d.center,d.pixelSize)}this._graphicShapes.length>0&&this._graphicShapes.length<256&&this._refreshShapes(this._$shapesContainer,this._graphicShapes,this._graphicShapes,this._graphicShapes,d.center,d.pixelSize);if(this._drawCoords.length>0){this._drawPixels=
+this._toPixel(this._drawCoords,d.center,d.pixelSize);this._refreshDrawing()}f=g.geo.center(this._multiTouchCurrentBbox,true)}else f=[b.originalEvent.changedTouches[0].pageX-c.left,b.originalEvent.changedTouches[0].pageY-c.top]}else f=[b.pageX-c.left,b.pageY-c.top];if(f[0]===this._lastMove[0]&&f[1]===this._lastMove[1])if(this._inOp){b.preventDefault();return false}if(r==7)this._isDbltap=this._isTap=false;if(this._mouseDown){this._current=f;this._moveDate=g.now()}if(this._isMultiTouch){b.preventDefault();
+return this._isDbltap=this._isTap=false}switch(this._shiftZoom?"zoom":this._options.mode){case "zoom":if(this._mouseDown){this._$drawContainer.geographics("clear");this._$drawContainer.geographics("drawBbox",[this._anchor[0],this._anchor[1],f[0],f[1]])}else this._trigger("move",b,{type:"Point",coordinates:this.toMap(f)});break;case "drawLineString":case "drawPolygon":case "measureLength":case "measureArea":if(this._mouseDown||this._toolPan)this._panMove();else{if(a>0){this._drawCoords[a-1]=this._toMap(f);
+this._drawPixels[a-1]=f;this._refreshDrawing()}this._trigger("move",b,{type:"Point",coordinates:this.toMap(f)})}break;default:this._mouseDown||this._toolPan?this._panMove():this._trigger("move",b,{type:"Point",coordinates:this.toMap(f)})}this._lastMove=f;if(this._inOp){b.preventDefault();return false}}},_dragTarget_touchstop:function(b){if(this._options.mode!=="static"){!this._mouseDown&&r==7&&this._eventTarget_touchstart(b);var c=this._mouseDown,a=this._toolPan,d=this._$eventTarget.offset(),f=this._shiftZoom?
+"zoom":this._options.mode,e,l;e=this._supportTouch?[b.originalEvent.changedTouches[0].pageX-d.left,b.originalEvent.changedTouches[0].pageY-d.top]:[b.pageX-d.left,b.pageY-d.top];if(this._softDblClick)if(this._isTap){d=e[0]-this._anchor[0];l=e[1]-this._anchor[1];if(Math.sqrt(d*d+l*l)<=8)e=g.merge([],this._anchor)}d=e[0]-this._anchor[0];l=e[1]-this._anchor[1];this._$eventTarget.css("cursor",this._options.cursors[this._options.mode]);this._shiftZoom=this._mouseDown=this._toolPan=false;if(this._isMultiTouch){b.preventDefault();
+this._isMultiTouch=false;c=this._getZoomCenterAndSize(this._anchor,this._wheelLevel,false);this._setCenterAndSize(c.center,c.pixelSize,true,true);this._wheelLevel=0;return false}document.releaseCapture&&document.releaseCapture();if(c){c=g.now();this._current=e;switch(f){case "zoom":if(d>0||l>0){a=this._pixelSize*6;f=this._toMap([[Math.min(this._anchor[0],e[0]),Math.max(this._anchor[1],e[1])],[Math.max(this._anchor[0],e[0]),Math.min(this._anchor[1],e[1])]]);f=[f[0][0],f[0][1],f[1][0],f[1][1]];if(f[2]-
+f[0]<a&&f[3]-f[1]<a)f=g.geo.scaleBy(this._getBbox(g.geo.center(f,true)),0.5,true);this._setBbox(f,true,true)}this._resetDrawing();break;case "drawPoint":if(this._drawTimeout){window.clearTimeout(this._drawTimeout);this._drawTimeout=null}if(a)this._panFinalize();else if(c-this._clickDate>100){var m=this;this._drawTimeout=setTimeout(function(){if(m._drawTimeout){m._trigger("shape",b,{type:"Point",coordinates:m.toMap(e)});m._inOp=false;m._drawTimeout=null}},250)}break;case "drawLineString":case "drawPolygon":case "measureLength":case "measureArea":if(a)this._panFinalize();
+else{a=this._drawCoords.length==0?0:this._drawCoords.length-1;this._drawCoords[a]=this._toMap(e);this._drawPixels[a]=e;if(a<2||!(this._drawCoords[a][0]==this._drawCoords[a-1][0]&&this._drawCoords[a][1]==this._drawCoords[a-1][1])){this._drawCoords[a+1]=this._toMap(e);this._drawPixels[a+1]=e}this._refreshDrawing()}break;default:if(a)this._panEnd();else if(c-this._clickDate>100){this._trigger("click",b,{type:"Point",coordinates:this.toMap(e)});this._inOp=false}}this._clickDate=c;if(this._softDblClick&&
+this._isDbltap){this._isDbltap=this._isTap=false;this._$eventTarget.trigger("dblclick",b)}}if(this._inOp){b.preventDefault();return false}}},_eventTarget_mousewheel:function(b,c){if(!(this._options.mode==="static"||this._options.scroll==="off")){b.preventDefault();this._panFinalize();if(this._mouseDown)return false;if(c!=0){if(this._wheelTimeout){window.clearTimeout(this._wheelTimeout);this._wheelTimeout=null}else{var a=g(b.currentTarget).offset();this._anchor=[b.pageX-a.left,b.pageY-a.top]}this._wheelLevel+=
+c;a=this._getZoomCenterAndSize(this._anchor,this._wheelLevel,this._options.tilingScheme!=null);var d,f=0;for(this._$elem.find(".geo-shapes-container").geographics("clear");f<this._currentServices.length;f++){d=this._currentServices[f];g.geo._serviceTypes[d.type].interactiveScale(this,d,a.center,a.pixelSize)}this._graphicShapes.length>0&&this._graphicShapes.length<256&&this._refreshShapes(this._$shapesContainer,this._graphicShapes,this._graphicShapes,this._graphicShapes,a.center,a.pixelSize);if(this._drawCoords.length>
+0){this._drawPixels=this._toPixel(this._drawCoords,a.center,a.pixelSize);this._refreshDrawing()}var e=this;this._wheelTimeout=window.setTimeout(function(){e._mouseWheelFinish()},1E3)}return false}}})})(jQuery);
+(function(g,q){g.geo._serviceTypes.tiled=function(){return{create:function(r,b,c){r=g.data(c,"geoServiceState");if(!r){r={loadCount:0,reloadTiles:false};b.append('<div data-geo-service="tiled" style="position:absolute; left:0; top:0; width:8px; height:8px; margin:0; padding:0;"></div>');r.serviceContainer=b.children(":last");g.data(c,"geoServiceState",r)}return r.serviceContainer},destroy:function(r,b,c){g.data(c,"geoServiceState").serviceContainer.remove();g.removeData(c,"geoServiceState")},interactivePan:function(r,
+b,c,a){var d=g.data(b,"geoServiceState");if(d){this._cancelUnloaded(r,b);d.serviceContainer.children().css("-moz-transition","").css({webkitTransition:"",transition:"",left:function(R,U){return parseInt(U)+c},top:function(R,U){return parseInt(U)+a}});if(b&&b.style.visibility==="visible"){var f=r._pixelSize,e=this,l=d.serviceContainer,m=l.children("[data-pixelSize='"+f+"']"),n=r._getContentBounds(),t=r.options.axisLayout==="image",u=t?+1:-1,w=r.options.tilingScheme,B=w.tileWidth,I=w.tileHeight,F=n.width/
+2*f,y=n.height/2*f,K=m.position(),D=m.data("scaleOrigin").split(",");n=parseInt(D[0])-K.left;K=parseInt(D[1])-K.top;var J=r._getCenter();D=[J[0]+n*f,J[1]+u*K*f];var P=Math.floor((D[0]-F-w.origin[0])/(f*B));n=Math.max(Math.floor((t?D[1]-y-w.origin[1]:w.origin[1]-(D[1]+y))/(f*I)),0);K=Math.ceil((D[0]+F-w.origin[0])/(f*B));D=Math.ceil((t?D[1]+y-w.origin[1]:w.origin[1]-(D[1]-y))/(f*I));var H=r._getBboxMax(),C=r._getPixelSize(0),G=C/f,M=Math.floor((H[0]-w.origin[0])/(C*B))*G;H=Math.floor((w.origin[1]+
+u*H[3])/(C*I))*G;C=w.origin[1]+u*H*I*f;F=Math.round((w.origin[0]+M*B*f-(J[0]-F))/f);t=Math.round((t?C-(J[1]-y):J[1]+y-C)/f);var z=b.style.opacity;for(y=P;y<K;y++)for(J=n;J<D;J++){P=""+y+","+J;var L=m.children("[data-tile='"+P+"']").removeAttr("data-dirty");if(L.size()===0){C=[w.origin[0]+y*B*f,w.origin[1]+u*J*I*f];G=[w.origin[0]+((y+1)*B-1)*f,w.origin[1]+u*((J+1)*I-1)*f];G=[C[0],C[1],G[0],G[1]];C=b.hasOwnProperty("src")?"src":"getUrl";G={bbox:G,width:B,height:I,zoom:r._getZoom(),tile:{row:J,column:y},
+index:Math.abs(J+y)};if(g.isFunction(b[C]))C=b[C](G);else{g.template("geoSrc",b[C]);C=g.render(G,"geoSrc")}d.loadCount++;if(d.reloadTiles&&L.size()>0)L.attr("src",C);else{G="<img style='position:absolute; left:"+((y-M)*100+(F-F%B)/B*100)+"%; top:"+((J-H)*100+(t-t%I)/I*100)+"%; ";if(g("body")[0].filters===q)G+="width: 100%; height: 100%;";G+="margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='"+
+P+"' />";m.append(G);L=m.children(":last")}typeof C==="string"?e._loadImage(L,C,f,d,l,z):C.done(function(R){e._loadImage(L,R,f,d,l,z)}).fail(function(){L.remove();d.loadCount--})}}}}},interactiveScale:function(r,b,c,a){var d=g.data(b,"geoServiceState");if(d&&b&&b.style.visibility==="visible"){this._cancelUnloaded(r,b);b=r.options.tilingScheme;var f=b.tileWidth,e=b.tileHeight;d.serviceContainer.children().each(function(){var l=g(this),m=l.attr("data-pixelSize")/a;m=Math.round(m*1E3)/1E3;var n=l.data("scaleOrigin").split(",");
+n=r._toMap([n[0],n[1]]);n=r._toPixel(n,c,a);l.css("-moz-transition","").css({webkitTransition:"",transition:"",left:Math.round(n[0])+"px",top:Math.round(n[1])+"px",width:f*m,height:e*m});g("body")[0].filters!==q&&l.children().each(function(){g(this).css("filter","progid:DXImageTransform.Microsoft.Matrix(FilterType=bilinear,M11="+m+",M22="+m+",sizingmethod='auto expand')")})})}},refresh:function(r,b){var c=g.data(b,"geoServiceState");this._cancelUnloaded(r,b);if(c&&b&&b.style.visibility==="visible"&&
+!c.serviceContainer.is(":hidden")){var a=r._getBbox(),d=r._pixelSize,f=this,e=c.serviceContainer;r._getContentBounds();var l=r.options.axisLayout==="image",m=l?+1:-1,n=r.options.tilingScheme,t=n.tileWidth,u=n.tileHeight,w=Math.floor((a[0]-n.origin[0])/(d*t)),B=Math.max(Math.floor((l?a[1]-n.origin[1]:n.origin[1]-a[3])/(d*u)),0),I=Math.ceil((a[2]-n.origin[0])/(d*t)),F=Math.ceil((l?a[3]-n.origin[1]:n.origin[1]-a[1])/(d*u)),y=r._getBboxMax(),K=r._getPixelSize(0),D=K/d,J=Math.floor((y[0]-n.origin[0])/
+(K*t))*D,P=Math.floor((n.origin[1]+m*y[3])/(K*u))*D;y=n.origin[1]+m*P*u*d;var H=Math.round((n.origin[0]+J*t*d-a[0])/d),C=Math.round((l?y-a[1]:a[3]-y)/d);a=e.children().show();l=a.filter("[data-pixelSize='"+d+"']").appendTo(e);var G=b.style.opacity;c.reloadTiles&&a.find("img").attr("data-dirty","true");if(l.size()){l.css({left:H%t+"px",top:C%u+"px"}).data("scaleOrigin",H%t+","+C%u);l.children().each(function(){var L=g(this),R=L.attr("data-tile").split(",");L.css({left:Math.round((parseInt(R[0])-J)*
+100+(H-H%t)/t*100)+"%",top:Math.round((parseInt(R[1])-P)*100+(C-C%u)/u*100)+"%"});G<1&&L.fadeTo(0,G)})}else{e.append("<div style='position:absolute; left:"+H%t+"px; top:"+C%u+"px; width:"+t+"px; height:"+u+"px; margin:0; padding:0;' data-pixelSize='"+d+"'></div>");l=e.children(":last").data("scaleOrigin",H%t+","+C%u)}for(w=w;w<I;w++)for(y=B;y<F;y++){K=""+w+","+y;var M=l.children("[data-tile='"+K+"']").removeAttr("data-dirty");if(M.size()===0||c.reloadTiles){D=[n.origin[0]+w*t*d,n.origin[1]+m*y*u*
+d];var z=[n.origin[0]+((w+1)*t-1)*d,n.origin[1]+m*((y+1)*u-1)*d];z=[D[0],D[1],z[0],z[1]];D=b.hasOwnProperty("src")?"src":"getUrl";z={bbox:z,width:t,height:u,zoom:r._getZoom(),tile:{row:y,column:w},index:Math.abs(y+w)};if(g.isFunction(b[D]))D=b[D](z);else{g.template("geoSrc",b[D]);D=g.render(z,"geoSrc")}c.loadCount++;if(c.reloadTiles&&M.size()>0)M.attr("src",D);else{z="<img style='position:absolute; left:"+((w-J)*100+(H-H%t)/t*100)+"%; top:"+((y-P)*100+(C-C%u)/u*100)+"%; ";if(g("body")[0].filters===
+q)z+="width: 100%; height: 100%;";z+="margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='"+K+"' />";l.append(z);M=l.children(":last")}typeof D==="string"?f._loadImage(M,D,d,c,e,G):D.done(function(L){f._loadImage(M,L,d,c,e,G)}).fail(function(){M.remove();c.loadCount--})}}a.find("[data-dirty]").remove();c.reloadTiles=false}},resize:function(){},opacity:function(r,b){g.data(b,"geoServiceState").serviceContainer.find("img").stop(true).fadeTo("fast",
+b.style.opacity)},toggle:function(r,b){g.data(b,"geoServiceState").serviceContainer.css("display",b.style.visibility==="visible"?"block":"none")},_cancelUnloaded:function(r,b){var c=g.data(b,"geoServiceState");if(c&&c.loadCount>0)for(c.serviceContainer.find("img:hidden").remove();c.loadCount>0;)c.loadCount--},_loadImage:function(r,b,c,a,d,f){r.load(function(e){f<1?g(e.target).fadeTo(0,f):g(e.target).show();a.loadCount--;if(a.loadCount<=0){d.children(":not([data-pixelSize='"+c+"'])").remove();a.loadCount=
+0}}).error(function(e){g(e.target).remove();a.loadCount--;if(a.loadCount<=0){d.children(":not([data-pixelSize='"+c+"'])").remove();a.loadCount=0}}).attr("src",b)}}}()})(jQuery);
+(function(g){g.geo._serviceTypes.shingled=function(){return{create:function(q,r,b){q=g.data(b,"geoServiceState");if(!q){q={loadCount:0};r.append('<div data-geo-service="shingled" style="position:absolute; left:0; top:0; width:16px; height:16px; margin:0; padding:0;"></div>');q.serviceContainer=r.children(":last");g.data(b,"geoServiceState",q)}return q.serviceContainer},destroy:function(q,r,b){g.data(b,"geoServiceState").serviceContainer.remove();g.removeData(b,"geoServiceState")},interactivePan:function(q,
+r,b,c){var a=g.data(r,"geoServiceState");if(a){this._cancelUnloaded(q,r);r=a.serviceContainer;q=q._pixelSize;a=r.children("[data-pixelSize='"+q+"']");var d=a.children("div");if(!d.length){a.children("img").wrap('<div style="position:absolute; left:0; top:0; width:100%; height:100%;"></div>');d=a.children("div")}d.css({left:function(f,e){return parseInt(e)+b},top:function(f,e){return parseInt(e)+c}});r.children(":not([data-pixelSize='"+q+"'])").remove()}},interactiveScale:function(q,r,b,c){var a=g.data(r,
+"geoServiceState");if(a){this._cancelUnloaded(q,r);r=a.serviceContainer;q=q._getContentBounds();var d=q.width,f=q.height,e=d/2,l=f/2;r.children().each(function(){var m=g(this),n=m.attr("data-pixelSize"),t=n/c;m.css({width:d*t,height:f*t}).children("img").each(function(){var u=g(this),w=u.data("center");u.css({left:(Math.round((w[0]-b[0])/n)-e)*t+"px",top:(Math.round((b[1]-w[1])/n)-l)*t+"px"})})})}},refresh:function(q,r){var b=g.data(r,"geoServiceState");this._cancelUnloaded(q,r);if(b&&r&&r.style.visibility===
+"visible"&&!b.serviceContainer.is(":hidden")){var c=q._getBbox(),a=q._pixelSize,d=this,f=b.serviceContainer,e=q._getContentBounds(),l=e.width,m=e.height,n=l/2,t=m/2;e=f.children('[data-pixelSize="'+a+'"]');var u=r.style.opacity,w;if(!e.size()){f.append('<div style="position:absolute; left:'+n+"px; top:"+t+"px; width:"+l+"px; height:"+m+'px; margin:0; padding:0;" data-pixelSize="'+a+'"></div>');e=f.children(":last")}e.children("img").each(function(){var I=g(this),F=I.data("center"),y=q._getCenter();
+I.css({left:Math.round((F[0]-y[0])/a)-n+"px",top:Math.round((y[1]-F[1])/a)-t+"px"})});u<1&&f.find("img").attr("data-keepAlive","0");var B=r.hasOwnProperty("src")?"src":"getUrl";c={bbox:c,width:l,height:m,zoom:q._getZoom(),tile:null,index:0};if(g.isFunction(r[B]))c=r[B](c);else{g.template("geoSrc",r[B]);c=g.render(c,"geoSrc")}b.loadCount++;e.append('<img style="position:absolute; left:-'+n+"px; top:-"+t+'px; width:100%; height:100%; margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;" unselectable="on" />');
+w=e.children(":last").data("center",q._getCenter());typeof c==="string"?d._loadImage(w,c,a,b,f,u):c.done(function(I){d._loadImage(w,I,a,b,f,u)}).fail(function(){w.remove();b.loadCount--})}},resize:function(q,r){var b=g.data(r,"geoServiceState");if(b&&r&&r.style.visibility==="visible"){this._cancelUnloaded(q,r);var c=b.serviceContainer,a=q._getContentBounds();b=a.width/2;a=a.height/2;c=c.children();c.attr("data-pixelSize","0");c.css({left:b+"px",top:a+"px"})}},opacity:function(q,r){g.data(r,"geoServiceState").serviceContainer.find("img").stop(true).fadeTo("fast",
+r.style.opacity)},toggle:function(q,r){g.data(r,"geoServiceState").serviceContainer.css("display",r.style.visibility==="visible"?"block":"none")},_cancelUnloaded:function(q,r){var b=g.data(r,"geoServiceState");if(b&&b.loadCount>0)for(b.serviceContainer.find("img:hidden").remove();b.loadCount>0;)b.loadCount--},_loadImage:function(q,r,b,c,a,d){q.load(function(f){d<1?g(f.target).fadeTo(0,d):g(f.target).show();c.loadCount--;if(c.loadCount<=0){a.children(':not([data-pixelSize="'+b+'"])').remove();f=a.find('[data-pixelSize="'+
+b+'"]>div');if(f.size()>0){var e=f.position();f.children("img").each(function(){var l=g(this),m=e.left+parseInt(l.css("left")),n=e.top+parseInt(l.css("top"));l.css({left:m+"px",top:n+"px"})}).unwrap();f.remove()}c.loadCount=0}}).error(function(f){g(f.target).remove();c.loadCount--;if(c.loadCount<=0){a.children(":not([data-pixelSize='"+b+"'])").remove();c.loadCount=0}}).attr("src",r)}}}()})(jQuery);
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ *
+ * Requires: 1.2.2+
+ */
+(function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)
--- /dev/null
+// excanvas
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/*
+ * AppGeo/geo
+ * (c) 2007-2011, Applied Geographics, Inc. All rights reserved.
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+
+
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// Known Issues:
+//
+// * Patterns only support repeat.
+// * Radial gradient are not implemented. The VML version of these look very
+// different from the canvas one.
+// * Clipping paths are not implemented.
+// * Coordsize. The width and height attribute have higher priority than the
+// width and height style values which isn't correct.
+// * Painting mode isn't implemented.
+// * Canvas width/height should is using content-box by default. IE in
+// Quirks mode will draw the canvas using border-box. Either change your
+// doctype to HTML5
+// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
+// or use Box Sizing Behavior from WebFX
+// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
+// * Non uniform scaling does not correctly scale strokes.
+// * Optimize. There is always room for speed improvements.
+
+// Only add this code if we do not already have a canvas implementation
+if (!document.createElement('canvas').getContext) {
+
+ (function () {
+
+ // alias some functions to make (compiled) code shorter
+ var m = Math;
+ var mr = m.round;
+ var ms = m.sin;
+ var mc = m.cos;
+ var abs = m.abs;
+ var sqrt = m.sqrt;
+
+ // this is used for sub pixel precision
+ var Z = 10;
+ var Z2 = Z / 2;
+
+ var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
+
+ /**
+ * This funtion is assigned to the <canvas> elements as element.getContext().
+ * @this {HTMLElement}
+ * @return {CanvasRenderingContext2D_}
+ */
+ function getContext() {
+ return this.context_ ||
+ (this.context_ = new CanvasRenderingContext2D_(this));
+ }
+
+ var slice = Array.prototype.slice;
+
+ /**
+ * Binds a function to an object. The returned function will always use the
+ * passed in {@code obj} as {@code this}.
+ *
+ * Example:
+ *
+ * g = bind(f, obj, a, b)
+ * g(c, d) // will do f.call(obj, a, b, c, d)
+ *
+ * @param {Function} f The function to bind the object to
+ * @param {Object} obj The object that should act as this when the function
+ * is called
+ * @param {*} var_args Rest arguments that will be used as the initial
+ * arguments when the function is called
+ * @return {Function} A new function that has bound this
+ */
+ function bind(f, obj, var_args) {
+ var a = slice.call(arguments, 2);
+ return function () {
+ return f.apply(obj, a.concat(slice.call(arguments)));
+ };
+ }
+
+ function encodeHtmlAttribute(s) {
+ return String(s).replace(/&/g, '&').replace(/"/g, '"');
+ }
+
+ function addNamespace(doc, prefix, urn) {
+ if (!doc.namespaces[prefix]) {
+ doc.namespaces.add(prefix, urn, '#default#VML');
+ }
+ }
+
+ function addNamespacesAndStylesheet(doc) {
+ addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
+ addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
+
+ // Setup default CSS. Only add one style sheet per document
+ if (!doc.styleSheets['ex_canvas_']) {
+ var ss = doc.createStyleSheet();
+ ss.owningElement.id = 'ex_canvas_';
+ ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
+ // default size is 300x150 in Gecko and Opera
+ 'text-align:left;width:300px;height:150px}';
+ }
+ }
+
+ // Add namespaces and stylesheet at startup.
+ addNamespacesAndStylesheet(document);
+
+ var G_vmlCanvasManager_ = {
+ init: function (opt_doc) {
+ var doc = opt_doc || document;
+ // Create a dummy element so that IE will allow canvas elements to be
+ // recognized.
+ doc.createElement('canvas');
+ doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
+ },
+
+ init_: function (doc) {
+ // find all canvas elements
+ var els = doc.getElementsByTagName('canvas');
+ for (var i = 0; i < els.length; i++) {
+ this.initElement(els[i]);
+ }
+ },
+
+ /**
+ * Public initializes a canvas element so that it can be used as canvas
+ * element from now on. This is called automatically before the page is
+ * loaded but if you are creating elements using createElement you need to
+ * make sure this is called on the element.
+ * @param {HTMLElement} el The canvas element to initialize.
+ * @return {HTMLElement} the element that was created.
+ */
+ initElement: function (el) {
+ if (!el.getContext) {
+ el.getContext = getContext;
+
+ // Add namespaces and stylesheet to document of the element.
+ addNamespacesAndStylesheet(el.ownerDocument);
+
+ // Remove fallback content. There is no way to hide text nodes so we
+ // just remove all childNodes. We could hide all elements and remove
+ // text nodes but who really cares about the fallback content.
+ el.innerHTML = '';
+
+ // do not use inline function because that will leak memory
+ el.attachEvent('onpropertychange', onPropertyChange);
+ el.attachEvent('onresize', onResize);
+
+ var attrs = el.attributes;
+ if (attrs.width && attrs.width.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setWidth_(attrs.width.nodeValue);
+ el.style.width = attrs.width.nodeValue + 'px';
+ } else {
+ el.width = el.clientWidth;
+ }
+ if (attrs.height && attrs.height.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setHeight_(attrs.height.nodeValue);
+ el.style.height = attrs.height.nodeValue + 'px';
+ } else {
+ el.height = el.clientHeight;
+ }
+ //el.getContext().setCoordsize_()
+ }
+ return el;
+ }
+ };
+
+ function onPropertyChange(e) {
+ var el = e.srcElement;
+
+ switch (e.propertyName) {
+ case 'width':
+ el.getContext().clearRect();
+ el.style.width = el.attributes.width.nodeValue + 'px';
+ // In IE8 this does not trigger onresize.
+ el.firstChild.style.width = el.clientWidth + 'px';
+ break;
+ case 'height':
+ el.getContext().clearRect();
+ el.style.height = el.attributes.height.nodeValue + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ break;
+ }
+ }
+
+ function onResize(e) {
+ var el = e.srcElement;
+ if (el.firstChild) {
+ el.firstChild.style.width = el.clientWidth + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ }
+ }
+
+ G_vmlCanvasManager_.init();
+
+ // precompute "00" to "FF"
+ var decToHex = [];
+ for (var i = 0; i < 16; i++) {
+ for (var j = 0; j < 16; j++) {
+ decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
+ }
+ }
+
+ function createMatrixIdentity() {
+ return [
+ [1, 0, 0],
+ [0, 1, 0],
+ [0, 0, 1]
+ ];
+ }
+
+ function matrixMultiply(m1, m2) {
+ var result = createMatrixIdentity();
+
+ for (var x = 0; x < 3; x++) {
+ for (var y = 0; y < 3; y++) {
+ var sum = 0;
+
+ for (var z = 0; z < 3; z++) {
+ sum += m1[x][z] * m2[z][y];
+ }
+
+ result[x][y] = sum;
+ }
+ }
+ return result;
+ }
+
+ function copyState(o1, o2) {
+ o2.fillStyle = o1.fillStyle;
+ o2.lineCap = o1.lineCap;
+ o2.lineJoin = o1.lineJoin;
+ o2.lineWidth = o1.lineWidth;
+ o2.miterLimit = o1.miterLimit;
+ o2.shadowBlur = o1.shadowBlur;
+ o2.shadowColor = o1.shadowColor;
+ o2.shadowOffsetX = o1.shadowOffsetX;
+ o2.shadowOffsetY = o1.shadowOffsetY;
+ o2.strokeStyle = o1.strokeStyle;
+ o2.globalAlpha = o1.globalAlpha;
+ o2.font = o1.font;
+ o2.textAlign = o1.textAlign;
+ o2.textBaseline = o1.textBaseline;
+ o2.arcScaleX_ = o1.arcScaleX_;
+ o2.arcScaleY_ = o1.arcScaleY_;
+ o2.lineScale_ = o1.lineScale_;
+ }
+
+ // var colorData = {
+ // aliceblue: '#F0F8FF',
+ // antiquewhite: '#FAEBD7',
+ // aquamarine: '#7FFFD4',
+ // azure: '#F0FFFF',
+ // beige: '#F5F5DC',
+ // bisque: '#FFE4C4',
+ // black: '#000000',
+ // blanchedalmond: '#FFEBCD',
+ // blueviolet: '#8A2BE2',
+ // brown: '#A52A2A',
+ // burlywood: '#DEB887',
+ // cadetblue: '#5F9EA0',
+ // chartreuse: '#7FFF00',
+ // chocolate: '#D2691E',
+ // coral: '#FF7F50',
+ // cornflowerblue: '#6495ED',
+ // cornsilk: '#FFF8DC',
+ // crimson: '#DC143C',
+ // cyan: '#00FFFF',
+ // darkblue: '#00008B',
+ // darkcyan: '#008B8B',
+ // darkgoldenrod: '#B8860B',
+ // darkgray: '#A9A9A9',
+ // darkgreen: '#006400',
+ // darkgrey: '#A9A9A9',
+ // darkkhaki: '#BDB76B',
+ // darkmagenta: '#8B008B',
+ // darkolivegreen: '#556B2F',
+ // darkorange: '#FF8C00',
+ // darkorchid: '#9932CC',
+ // darkred: '#8B0000',
+ // darksalmon: '#E9967A',
+ // darkseagreen: '#8FBC8F',
+ // darkslateblue: '#483D8B',
+ // darkslategray: '#2F4F4F',
+ // darkslategrey: '#2F4F4F',
+ // darkturquoise: '#00CED1',
+ // darkviolet: '#9400D3',
+ // deeppink: '#FF1493',
+ // deepskyblue: '#00BFFF',
+ // dimgray: '#696969',
+ // dimgrey: '#696969',
+ // dodgerblue: '#1E90FF',
+ // firebrick: '#B22222',
+ // floralwhite: '#FFFAF0',
+ // forestgreen: '#228B22',
+ // gainsboro: '#DCDCDC',
+ // ghostwhite: '#F8F8FF',
+ // gold: '#FFD700',
+ // goldenrod: '#DAA520',
+ // grey: '#808080',
+ // greenyellow: '#ADFF2F',
+ // honeydew: '#F0FFF0',
+ // hotpink: '#FF69B4',
+ // indianred: '#CD5C5C',
+ // indigo: '#4B0082',
+ // ivory: '#FFFFF0',
+ // khaki: '#F0E68C',
+ // lavender: '#E6E6FA',
+ // lavenderblush: '#FFF0F5',
+ // lawngreen: '#7CFC00',
+ // lemonchiffon: '#FFFACD',
+ // lightblue: '#ADD8E6',
+ // lightcoral: '#F08080',
+ // lightcyan: '#E0FFFF',
+ // lightgoldenrodyellow: '#FAFAD2',
+ // lightgreen: '#90EE90',
+ // lightgrey: '#D3D3D3',
+ // lightpink: '#FFB6C1',
+ // lightsalmon: '#FFA07A',
+ // lightseagreen: '#20B2AA',
+ // lightskyblue: '#87CEFA',
+ // lightslategray: '#778899',
+ // lightslategrey: '#778899',
+ // lightsteelblue: '#B0C4DE',
+ // lightyellow: '#FFFFE0',
+ // limegreen: '#32CD32',
+ // linen: '#FAF0E6',
+ // magenta: '#FF00FF',
+ // mediumaquamarine: '#66CDAA',
+ // mediumblue: '#0000CD',
+ // mediumorchid: '#BA55D3',
+ // mediumpurple: '#9370DB',
+ // mediumseagreen: '#3CB371',
+ // mediumslateblue: '#7B68EE',
+ // mediumspringgreen: '#00FA9A',
+ // mediumturquoise: '#48D1CC',
+ // mediumvioletred: '#C71585',
+ // midnightblue: '#191970',
+ // mintcream: '#F5FFFA',
+ // mistyrose: '#FFE4E1',
+ // moccasin: '#FFE4B5',
+ // navajowhite: '#FFDEAD',
+ // oldlace: '#FDF5E6',
+ // olivedrab: '#6B8E23',
+ // orange: '#FFA500',
+ // orangered: '#FF4500',
+ // orchid: '#DA70D6',
+ // palegoldenrod: '#EEE8AA',
+ // palegreen: '#98FB98',
+ // paleturquoise: '#AFEEEE',
+ // palevioletred: '#DB7093',
+ // papayawhip: '#FFEFD5',
+ // peachpuff: '#FFDAB9',
+ // peru: '#CD853F',
+ // pink: '#FFC0CB',
+ // plum: '#DDA0DD',
+ // powderblue: '#B0E0E6',
+ // rosybrown: '#BC8F8F',
+ // royalblue: '#4169E1',
+ // saddlebrown: '#8B4513',
+ // salmon: '#FA8072',
+ // sandybrown: '#F4A460',
+ // seagreen: '#2E8B57',
+ // seashell: '#FFF5EE',
+ // sienna: '#A0522D',
+ // skyblue: '#87CEEB',
+ // slateblue: '#6A5ACD',
+ // slategray: '#708090',
+ // slategrey: '#708090',
+ // snow: '#FFFAFA',
+ // springgreen: '#00FF7F',
+ // steelblue: '#4682B4',
+ // tan: '#D2B48C',
+ // thistle: '#D8BFD8',
+ // tomato: '#FF6347',
+ // turquoise: '#40E0D0',
+ // violet: '#EE82EE',
+ // wheat: '#F5DEB3',
+ // whitesmoke: '#F5F5F5',
+ // yellowgreen: '#9ACD32'
+ // };
+
+
+ function getRgbHslContent(styleString) {
+ var start = styleString.indexOf('(', 3);
+ var end = styleString.indexOf(')', start + 1);
+ var parts = styleString.substring(start + 1, end).split(',');
+ // add alpha if needed
+ if (parts.length != 4 || styleString.charAt(3) != 'a') {
+ parts[3] = 1;
+ }
+ return parts;
+ }
+
+ function percent(s) {
+ return parseFloat(s) / 100;
+ }
+
+ function clamp(v, min, max) {
+ return Math.min(max, Math.max(min, v));
+ }
+
+ function hslToRgb(parts) {
+ var r, g, b, h, s, l;
+ h = parseFloat(parts[0]) / 360 % 360;
+ if (h < 0)
+ h++;
+ s = clamp(percent(parts[1]), 0, 1);
+ l = clamp(percent(parts[2]), 0, 1);
+ if (s == 0) {
+ r = g = b = l; // achromatic
+ } else {
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ var p = 2 * l - q;
+ r = hueToRgb(p, q, h + 1 / 3);
+ g = hueToRgb(p, q, h);
+ b = hueToRgb(p, q, h - 1 / 3);
+ }
+
+ return '#' + decToHex[Math.floor(r * 255)] +
+ decToHex[Math.floor(g * 255)] +
+ decToHex[Math.floor(b * 255)];
+ }
+
+ function hueToRgb(m1, m2, h) {
+ if (h < 0)
+ h++;
+ if (h > 1)
+ h--;
+
+ if (6 * h < 1)
+ return m1 + (m2 - m1) * 6 * h;
+ else if (2 * h < 1)
+ return m2;
+ else if (3 * h < 2)
+ return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+ else
+ return m1;
+ }
+
+ var processStyleCache = {};
+
+ function processStyle(styleString) {
+ if (styleString in processStyleCache) {
+ return processStyleCache[styleString];
+ }
+
+ var str, alpha = 1;
+
+ styleString = String(styleString);
+ if (styleString.charAt(0) == '#') {
+ str = styleString;
+ } else if (/^rgb/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ var str = '#', n;
+ for (var i = 0; i < 3; i++) {
+ if (parts[i].indexOf('%') != -1) {
+ n = Math.floor(percent(parts[i]) * 255);
+ } else {
+ n = +parts[i];
+ }
+ str += decToHex[clamp(n, 0, 255)];
+ }
+ alpha = +parts[3];
+ } else if (/^hsl/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ str = hslToRgb(parts);
+ alpha = parts[3];
+ } else {
+ str = /*colorData[styleString] ||*/styleString;
+ }
+ return processStyleCache[styleString] = { color: str, alpha: alpha };
+ }
+
+ var DEFAULT_STYLE = {
+ style: 'normal',
+ variant: 'normal',
+ weight: 'normal',
+ size: 10,
+ family: 'sans-serif'
+ };
+
+ // Internal text style cache
+ // var fontStyleCache = {};
+
+ // function processFontStyle(styleString) {
+ // if (fontStyleCache[styleString]) {
+ // return fontStyleCache[styleString];
+ // }
+
+ // var el = document.createElement('div');
+ // var style = el.style;
+ // try {
+ // style.font = styleString;
+ // } catch (ex) {
+ // // Ignore failures to set to invalid font.
+ // }
+
+ // return fontStyleCache[styleString] = {
+ // style: style.fontStyle || DEFAULT_STYLE.style,
+ // variant: style.fontVariant || DEFAULT_STYLE.variant,
+ // weight: style.fontWeight || DEFAULT_STYLE.weight,
+ // size: style.fontSize || DEFAULT_STYLE.size,
+ // family: style.fontFamily || DEFAULT_STYLE.family
+ // };
+ // }
+
+ // function getComputedStyle(style, element) {
+ // var computedStyle = {};
+
+ // for (var p in style) {
+ // computedStyle[p] = style[p];
+ // }
+
+ // // Compute the size
+ // var canvasFontSize = parseFloat(element.currentStyle.fontSize),
+ // fontSize = parseFloat(style.size);
+
+ // if (typeof style.size == 'number') {
+ // computedStyle.size = style.size;
+ // } else if (style.size.indexOf('px') != -1) {
+ // computedStyle.size = fontSize;
+ // } else if (style.size.indexOf('em') != -1) {
+ // computedStyle.size = canvasFontSize * fontSize;
+ // } else if(style.size.indexOf('%') != -1) {
+ // computedStyle.size = (canvasFontSize / 100) * fontSize;
+ // } else if (style.size.indexOf('pt') != -1) {
+ // computedStyle.size = fontSize / .75;
+ // } else {
+ // computedStyle.size = canvasFontSize;
+ // }
+
+ // // Different scaling between normal text and VML text. This was found using
+ // // trial and error to get the same size as non VML text.
+ // computedStyle.size *= 0.981;
+
+ // return computedStyle;
+ // }
+
+ // function buildStyle(style) {
+ // return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
+ // style.size + 'px ' + style.family;
+ // }
+
+ var lineCapMap = {
+ 'butt': 'flat',
+ 'round': 'round'
+ };
+
+ function processLineCap(lineCap) {
+ return lineCapMap[lineCap] || 'square';
+ }
+
+ /**
+ * This class implements CanvasRenderingContext2D interface as described by
+ * the WHATWG.
+ * @param {HTMLElement} canvasElement The element that the 2D context should
+ * be associated with
+ */
+ function CanvasRenderingContext2D_(canvasElement) {
+ this.m_ = createMatrixIdentity();
+
+ this.mStack_ = [];
+ this.aStack_ = [];
+ this.currentPath_ = [];
+
+ // Canvas context properties
+ this.strokeStyle = '#000';
+ this.fillStyle = '#000';
+
+ this.lineWidth = 1;
+ this.lineJoin = 'miter';
+ this.lineCap = 'butt';
+ this.miterLimit = Z * 1;
+ this.globalAlpha = 1;
+ //this.font = '10px sans-serif';
+ //this.textAlign = 'left';
+ //this.textBaseline = 'alphabetic';
+ this.canvas = canvasElement;
+
+ var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
+ canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
+ var el = canvasElement.ownerDocument.createElement('div');
+ el.style.cssText = cssText;
+ canvasElement.appendChild(el);
+
+ var overlayEl = el.cloneNode(false);
+ // Use a non transparent background.
+ overlayEl.style.backgroundColor = 'red';
+ overlayEl.style.filter = 'alpha(opacity=0)';
+ canvasElement.appendChild(overlayEl);
+
+ this.element_ = el;
+ this.arcScaleX_ = 1;
+ this.arcScaleY_ = 1;
+ this.lineScale_ = 1;
+ }
+
+ var contextPrototype = CanvasRenderingContext2D_.prototype;
+ contextPrototype.clearRect = function () {
+ if (this.textMeasureEl_) {
+ this.textMeasureEl_.removeNode(true);
+ this.textMeasureEl_ = null;
+ }
+ this.element_.innerHTML = '';
+ };
+
+ contextPrototype.beginPath = function () {
+ // TODO: Branch current matrix so that save/restore has no effect
+ // as per safari docs.
+ this.currentPath_ = [];
+ };
+
+ contextPrototype.moveTo = function (aX, aY) {
+ var p = getCoords(this, aX, aY);
+ this.currentPath_.push({ type: 'moveTo', x: p.x, y: p.y });
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
+ };
+
+ contextPrototype.lineTo = function (aX, aY) {
+ var p = getCoords(this, aX, aY);
+ this.currentPath_.push({ type: 'lineTo', x: p.x, y: p.y });
+
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
+ };
+
+ contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
+ aCP2x, aCP2y,
+ aX, aY) {
+ var p = getCoords(this, aX, aY);
+ var cp1 = getCoords(this, aCP1x, aCP1y);
+ var cp2 = getCoords(this, aCP2x, aCP2y);
+ bezierCurveTo(this, cp1, cp2, p);
+ };
+
+ // Helper function that takes the already fixed cordinates.
+ function bezierCurveTo(self, cp1, cp2, p) {
+ self.currentPath_.push({
+ type: 'bezierCurveTo',
+ cp1x: cp1.x,
+ cp1y: cp1.y,
+ cp2x: cp2.x,
+ cp2y: cp2.y,
+ x: p.x,
+ y: p.y
+ });
+ self.currentX_ = p.x;
+ self.currentY_ = p.y;
+ }
+
+ contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
+ // the following is lifted almost directly from
+ // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
+
+ var cp = getCoords(this, aCPx, aCPy);
+ var p = getCoords(this, aX, aY);
+
+ var cp1 = {
+ x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
+ y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
+ };
+ var cp2 = {
+ x: cp1.x + (p.x - this.currentX_) / 3.0,
+ y: cp1.y + (p.y - this.currentY_) / 3.0
+ };
+
+ bezierCurveTo(this, cp1, cp2, p);
+ };
+
+ contextPrototype.arc = function (aX, aY, aRadius,
+ aStartAngle, aEndAngle, aClockwise) {
+ aRadius *= Z;
+ var arcType = aClockwise ? 'at' : 'wa';
+
+ var xStart = aX + mc(aStartAngle) * aRadius - Z2;
+ var yStart = aY + ms(aStartAngle) * aRadius - Z2;
+
+ var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
+ var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
+
+ // IE won't render arches drawn counter clockwise if xStart == xEnd.
+ if (xStart == xEnd && !aClockwise) {
+ xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
+ // that can be represented in binary
+ }
+
+ var p = getCoords(this, aX, aY);
+ var pStart = getCoords(this, xStart, yStart);
+ var pEnd = getCoords(this, xEnd, yEnd);
+
+ this.currentPath_.push({ type: arcType,
+ x: p.x,
+ y: p.y,
+ radius: aRadius,
+ xStart: pStart.x,
+ yStart: pStart.y,
+ xEnd: pEnd.x,
+ yEnd: pEnd.y
+ });
+
+ };
+
+ // contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // };
+
+ // contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
+ // var oldPath = this.currentPath_;
+ // this.beginPath();
+
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // this.stroke();
+
+ // this.currentPath_ = oldPath;
+ // };
+
+ // contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
+ // var oldPath = this.currentPath_;
+ // this.beginPath();
+
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // this.fill();
+
+ // this.currentPath_ = oldPath;
+ // };
+
+ // contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
+ // var gradient = new CanvasGradient_('gradient');
+ // gradient.x0_ = aX0;
+ // gradient.y0_ = aY0;
+ // gradient.x1_ = aX1;
+ // gradient.y1_ = aY1;
+ // return gradient;
+ // };
+
+ // contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
+ // aX1, aY1, aR1) {
+ // var gradient = new CanvasGradient_('gradientradial');
+ // gradient.x0_ = aX0;
+ // gradient.y0_ = aY0;
+ // gradient.r0_ = aR0;
+ // gradient.x1_ = aX1;
+ // gradient.y1_ = aY1;
+ // gradient.r1_ = aR1;
+ // return gradient;
+ // };
+
+ // contextPrototype.drawImage = function(image, var_args) {
+ // var dx, dy, dw, dh, sx, sy, sw, sh;
+
+ // // to find the original width we overide the width and height
+ // var oldRuntimeWidth = image.runtimeStyle.width;
+ // var oldRuntimeHeight = image.runtimeStyle.height;
+ // image.runtimeStyle.width = 'auto';
+ // image.runtimeStyle.height = 'auto';
+
+ // // get the original size
+ // var w = image.width;
+ // var h = image.height;
+
+ // // and remove overides
+ // image.runtimeStyle.width = oldRuntimeWidth;
+ // image.runtimeStyle.height = oldRuntimeHeight;
+
+ // if (arguments.length == 3) {
+ // dx = arguments[1];
+ // dy = arguments[2];
+ // sx = sy = 0;
+ // sw = dw = w;
+ // sh = dh = h;
+ // } else if (arguments.length == 5) {
+ // dx = arguments[1];
+ // dy = arguments[2];
+ // dw = arguments[3];
+ // dh = arguments[4];
+ // sx = sy = 0;
+ // sw = w;
+ // sh = h;
+ // } else if (arguments.length == 9) {
+ // sx = arguments[1];
+ // sy = arguments[2];
+ // sw = arguments[3];
+ // sh = arguments[4];
+ // dx = arguments[5];
+ // dy = arguments[6];
+ // dw = arguments[7];
+ // dh = arguments[8];
+ // } else {
+ // throw Error('Invalid number of arguments');
+ // }
+
+ // var d = getCoords(this, dx, dy);
+
+ // var w2 = sw / 2;
+ // var h2 = sh / 2;
+
+ // var vmlStr = [];
+
+ // var W = 10;
+ // var H = 10;
+
+ // // For some reason that I've now forgotten, using divs didn't work
+ // vmlStr.push(' <g_vml_:group',
+ // ' coordsize="', Z * W, ',', Z * H, '"',
+ // ' coordorigin="0,0"' ,
+ // ' style="width:', W, 'px;height:', H, 'px;position:absolute;');
+
+ // // If filters are necessary (rotation exists), create them
+ // // filters are bog-slow, so only create them if abbsolutely necessary
+ // // The following check doesn't account for skews (which don't exist
+ // // in the canvas spec (yet) anyway.
+
+ // if (this.m_[0][0] != 1 || this.m_[0][1] ||
+ // this.m_[1][1] != 1 || this.m_[1][0]) {
+ // var filter = [];
+
+ // // Note the 12/21 reversal
+ // filter.push('M11=', this.m_[0][0], ',',
+ // 'M12=', this.m_[1][0], ',',
+ // 'M21=', this.m_[0][1], ',',
+ // 'M22=', this.m_[1][1], ',',
+ // 'Dx=', mr(d.x / Z), ',',
+ // 'Dy=', mr(d.y / Z), '');
+
+ // // Bounding box calculation (need to minimize displayed area so that
+ // // filters don't waste time on unused pixels.
+ // var max = d;
+ // var c2 = getCoords(this, dx + dw, dy);
+ // var c3 = getCoords(this, dx, dy + dh);
+ // var c4 = getCoords(this, dx + dw, dy + dh);
+
+ // max.x = m.max(max.x, c2.x, c3.x, c4.x);
+ // max.y = m.max(max.y, c2.y, c3.y, c4.y);
+
+ // vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
+ // 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
+ // filter.join(''), ", sizingmethod='clip');");
+
+ // } else {
+ // vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
+ // }
+
+ // vmlStr.push(' ">' ,
+ // '<g_vml_:image src="', image.src, '"',
+ // ' style="width:', Z * dw, 'px;',
+ // ' height:', Z * dh, 'px"',
+ // ' cropleft="', sx / w, '"',
+ // ' croptop="', sy / h, '"',
+ // ' cropright="', (w - sx - sw) / w, '"',
+ // ' cropbottom="', (h - sy - sh) / h, '"',
+ // ' />',
+ // '</g_vml_:group>');
+
+ // this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
+ // };
+
+ contextPrototype.stroke = function (aFill) {
+ var lineStr = [];
+ var lineOpen = false;
+
+ var W = 10;
+ var H = 10;
+
+ lineStr.push('<g_vml_:shape',
+ ' filled="', !!aFill, '"',
+ ' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
+ ' coordorigin="0,0"',
+ ' coordsize="', Z * W, ',', Z * H, '"',
+ ' stroked="', !aFill, '"',
+ ' path="');
+
+ var newSeq = false;
+ var min = { x: null, y: null };
+ var max = { x: null, y: null };
+
+ for (var i = 0; i < this.currentPath_.length; i++) {
+ var p = this.currentPath_[i];
+ var c;
+
+ switch (p.type) {
+ case 'moveTo':
+ c = p;
+ lineStr.push(' m ', mr(p.x), ',', mr(p.y));
+ break;
+ case 'lineTo':
+ lineStr.push(' l ', mr(p.x), ',', mr(p.y));
+ break;
+ case 'close':
+ lineStr.push(' x ');
+ p = null;
+ break;
+ case 'bezierCurveTo':
+ lineStr.push(' c ',
+ mr(p.cp1x), ',', mr(p.cp1y), ',',
+ mr(p.cp2x), ',', mr(p.cp2y), ',',
+ mr(p.x), ',', mr(p.y));
+ break;
+ case 'at':
+ case 'wa':
+ lineStr.push(' ', p.type, ' ',
+ mr(p.x - this.arcScaleX_ * p.radius), ',',
+ mr(p.y - this.arcScaleY_ * p.radius), ' ',
+ mr(p.x + this.arcScaleX_ * p.radius), ',',
+ mr(p.y + this.arcScaleY_ * p.radius), ' ',
+ mr(p.xStart), ',', mr(p.yStart), ' ',
+ mr(p.xEnd), ',', mr(p.yEnd));
+ break;
+ }
+
+
+ // TODO: Following is broken for curves due to
+ // move to proper paths.
+
+ // Figure out dimensions so we can do gradient fills
+ // properly
+ if (p) {
+ if (min.x == null || p.x < min.x) {
+ min.x = p.x;
+ }
+ if (max.x == null || p.x > max.x) {
+ max.x = p.x;
+ }
+ if (min.y == null || p.y < min.y) {
+ min.y = p.y;
+ }
+ if (max.y == null || p.y > max.y) {
+ max.y = p.y;
+ }
+ }
+ }
+ lineStr.push(' ">');
+
+ if (!aFill) {
+ appendStroke(this, lineStr);
+ } else {
+ appendFill(this, lineStr, min, max);
+ }
+
+ lineStr.push('</g_vml_:shape>');
+
+ this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ };
+
+ function appendStroke(ctx, lineStr) {
+ var a = processStyle(ctx.strokeStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
+ var lineWidth = ctx.lineScale_ * ctx.lineWidth;
+
+ // VML cannot correctly render a line if the width is less than 1px.
+ // In that case, we dilute the color to make the line look thinner.
+ if (lineWidth < 1) {
+ opacity *= lineWidth;
+ }
+
+ lineStr.push(
+ '<g_vml_:stroke',
+ ' opacity="', opacity, '"',
+ ' joinstyle="', ctx.lineJoin, '"',
+ ' miterlimit="', ctx.miterLimit, '"',
+ ' endcap="', processLineCap(ctx.lineCap), '"',
+ ' weight="', lineWidth, 'px"',
+ ' color="', color, '" />'
+ );
+ }
+
+ function appendFill(ctx, lineStr, min, max) {
+ var fillStyle = ctx.fillStyle;
+ var arcScaleX = ctx.arcScaleX_;
+ var arcScaleY = ctx.arcScaleY_;
+ var width = max.x - min.x;
+ var height = max.y - min.y;
+ // if (fillStyle instanceof CanvasGradient_) {
+ // // TODO: Gradients transformed with the transformation matrix.
+ // var angle = 0;
+ // var focus = {x: 0, y: 0};
+
+ // // additional offset
+ // var shift = 0;
+ // // scale factor for offset
+ // var expansion = 1;
+
+ // if (fillStyle.type_ == 'gradient') {
+ // var x0 = fillStyle.x0_ / arcScaleX;
+ // var y0 = fillStyle.y0_ / arcScaleY;
+ // var x1 = fillStyle.x1_ / arcScaleX;
+ // var y1 = fillStyle.y1_ / arcScaleY;
+ // var p0 = getCoords(ctx, x0, y0);
+ // var p1 = getCoords(ctx, x1, y1);
+ // var dx = p1.x - p0.x;
+ // var dy = p1.y - p0.y;
+ // angle = Math.atan2(dx, dy) * 180 / Math.PI;
+
+ // // The angle should be a non-negative number.
+ // if (angle < 0) {
+ // angle += 360;
+ // }
+
+ // // Very small angles produce an unexpected result because they are
+ // // converted to a scientific notation string.
+ // if (angle < 1e-6) {
+ // angle = 0;
+ // }
+ // } else {
+ // var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
+ // focus = {
+ // x: (p0.x - min.x) / width,
+ // y: (p0.y - min.y) / height
+ // };
+
+ // width /= arcScaleX * Z;
+ // height /= arcScaleY * Z;
+ // var dimension = m.max(width, height);
+ // shift = 2 * fillStyle.r0_ / dimension;
+ // expansion = 2 * fillStyle.r1_ / dimension - shift;
+ // }
+
+ // // We need to sort the color stops in ascending order by offset,
+ // // otherwise IE won't interpret it correctly.
+ // var stops = fillStyle.colors_;
+ // stops.sort(function(cs1, cs2) {
+ // return cs1.offset - cs2.offset;
+ // });
+
+ // var length = stops.length;
+ // var color1 = stops[0].color;
+ // var color2 = stops[length - 1].color;
+ // var opacity1 = stops[0].alpha * ctx.globalAlpha;
+ // var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
+
+ // var colors = [];
+ // for (var i = 0; i < length; i++) {
+ // var stop = stops[i];
+ // colors.push(stop.offset * expansion + shift + ' ' + stop.color);
+ // }
+
+ // // When colors attribute is used, the meanings of opacity and o:opacity2
+ // // are reversed.
+ // lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
+ // ' method="none" focus="100%"',
+ // ' color="', color1, '"',
+ // ' color2="', color2, '"',
+ // ' colors="', colors.join(','), '"',
+ // ' opacity="', opacity2, '"',
+ // ' g_o_:opacity2="', opacity1, '"',
+ // ' angle="', angle, '"',
+ // ' focusposition="', focus.x, ',', focus.y, '" />');
+ // } else if (fillStyle instanceof CanvasPattern_) {
+ // if (width && height) {
+ // var deltaLeft = -min.x;
+ // var deltaTop = -min.y;
+ // lineStr.push('<g_vml_:fill',
+ // ' position="',
+ // deltaLeft / width * arcScaleX * arcScaleX, ',',
+ // deltaTop / height * arcScaleY * arcScaleY, '"',
+ // ' type="tile"',
+ // // TODO: Figure out the correct size to fit the scale.
+ // //' size="', w, 'px ', h, 'px"',
+ // ' src="', fillStyle.src_, '" />');
+ // }
+ // } else {
+ var a = processStyle(ctx.fillStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
+ lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
+ '" />');
+ // }
+ }
+
+ contextPrototype.fill = function () {
+ this.stroke(true);
+ };
+
+ contextPrototype.closePath = function () {
+ this.currentPath_.push({ type: 'close' });
+ };
+
+ function getCoords(ctx, aX, aY) {
+ var m = ctx.m_;
+ return {
+ x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
+ y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
+ };
+ };
+
+ contextPrototype.save = function () {
+ var o = {};
+ copyState(this, o);
+ this.aStack_.push(o);
+ this.mStack_.push(this.m_);
+ this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
+ };
+
+ contextPrototype.restore = function () {
+ if (this.aStack_.length) {
+ copyState(this.aStack_.pop(), this);
+ this.m_ = this.mStack_.pop();
+ }
+ };
+
+ function matrixIsFinite(m) {
+ return isFinite(m[0][0]) && isFinite(m[0][1]) &&
+ isFinite(m[1][0]) && isFinite(m[1][1]) &&
+ isFinite(m[2][0]) && isFinite(m[2][1]);
+ }
+
+ function setM(ctx, m, updateLineScale) {
+ if (!matrixIsFinite(m)) {
+ return;
+ }
+ ctx.m_ = m;
+
+ if (updateLineScale) {
+ // Get the line scale.
+ // Determinant of this.m_ means how much the area is enlarged by the
+ // transformation. So its square root can be used as a scale factor
+ // for width.
+ var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
+ ctx.lineScale_ = sqrt(abs(det));
+ }
+ }
+
+ contextPrototype.translate = function (aX, aY) {
+ var m1 = [
+ [1, 0, 0],
+ [0, 1, 0],
+ [aX, aY, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), false);
+ };
+
+ // contextPrototype.rotate = function(aRot) {
+ // var c = mc(aRot);
+ // var s = ms(aRot);
+
+ // var m1 = [
+ // [c, s, 0],
+ // [-s, c, 0],
+ // [0, 0, 1]
+ // ];
+
+ // setM(this, matrixMultiply(m1, this.m_), false);
+ // };
+
+ contextPrototype.scale = function (aX, aY) {
+ this.arcScaleX_ *= aX;
+ this.arcScaleY_ *= aY;
+ var m1 = [
+ [aX, 0, 0],
+ [0, aY, 0],
+ [0, 0, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), true);
+ };
+
+ // contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
+ // var m1 = [
+ // [m11, m12, 0],
+ // [m21, m22, 0],
+ // [dx, dy, 1]
+ // ];
+
+ // setM(this, matrixMultiply(m1, this.m_), true);
+ // };
+
+ // contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
+ // var m = [
+ // [m11, m12, 0],
+ // [m21, m22, 0],
+ // [dx, dy, 1]
+ // ];
+
+ // setM(this, m, true);
+ // };
+
+ /**
+ * The text drawing function.
+ * The maxWidth argument isn't taken in account, since no browser supports
+ * it yet.
+ */
+ // contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
+ // var m = this.m_,
+ // delta = 1000,
+ // left = 0,
+ // right = delta,
+ // offset = {x: 0, y: 0},
+ // lineStr = [];
+
+ // var fontStyle = getComputedStyle(processFontStyle(this.font),
+ // this.element_);
+
+ // var fontStyleString = buildStyle(fontStyle);
+
+ // var elementStyle = this.element_.currentStyle;
+ // var textAlign = this.textAlign.toLowerCase();
+ // switch (textAlign) {
+ // case 'left':
+ // case 'center':
+ // case 'right':
+ // break;
+ // case 'end':
+ // textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
+ // break;
+ // case 'start':
+ // textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
+ // break;
+ // default:
+ // textAlign = 'left';
+ // }
+
+ // // 1.75 is an arbitrary number, as there is no info about the text baseline
+ // switch (this.textBaseline) {
+ // case 'hanging':
+ // case 'top':
+ // offset.y = fontStyle.size / 1.75;
+ // break;
+ // case 'middle':
+ // break;
+ // default:
+ // case null:
+ // case 'alphabetic':
+ // case 'ideographic':
+ // case 'bottom':
+ // offset.y = -fontStyle.size / 2.25;
+ // break;
+ // }
+
+ // switch(textAlign) {
+ // case 'right':
+ // left = delta;
+ // right = 0.05;
+ // break;
+ // case 'center':
+ // left = right = delta / 2;
+ // break;
+ // }
+
+ // var d = getCoords(this, x + offset.x, y + offset.y);
+
+ // lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
+ // ' coordsize="100 100" coordorigin="0 0"',
+ // ' filled="', !stroke, '" stroked="', !!stroke,
+ // '" style="position:absolute;width:1px;height:1px;">');
+
+ // if (stroke) {
+ // appendStroke(this, lineStr);
+ // } else {
+ // // TODO: Fix the min and max params.
+ // appendFill(this, lineStr, {x: -left, y: 0},
+ // {x: right, y: fontStyle.size});
+ // }
+
+ // var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
+ // m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
+
+ // var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
+
+ // lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
+ // ' offset="', skewOffset, '" origin="', left ,' 0" />',
+ // '<g_vml_:path textpathok="true" />',
+ // '<g_vml_:textpath on="true" string="',
+ // encodeHtmlAttribute(text),
+ // '" style="v-text-align:', textAlign,
+ // ';font:', encodeHtmlAttribute(fontStyleString),
+ // '" /></g_vml_:line>');
+
+ // this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ // };
+
+ // contextPrototype.fillText = function(text, x, y, maxWidth) {
+ // this.drawText_(text, x, y, maxWidth, false);
+ // };
+
+ // contextPrototype.strokeText = function(text, x, y, maxWidth) {
+ // this.drawText_(text, x, y, maxWidth, true);
+ // };
+
+ // contextPrototype.measureText = function(text) {
+ // if (!this.textMeasureEl_) {
+ // var s = '<span style="position:absolute;' +
+ // 'top:-20000px;left:0;padding:0;margin:0;border:none;' +
+ // 'white-space:pre;"></span>';
+ // this.element_.insertAdjacentHTML('beforeEnd', s);
+ // this.textMeasureEl_ = this.element_.lastChild;
+ // }
+ // var doc = this.element_.ownerDocument;
+ // this.textMeasureEl_.innerHTML = '';
+ // this.textMeasureEl_.style.font = this.font;
+ // // Don't use innerHTML or innerText because they allow markup/whitespace.
+ // this.textMeasureEl_.appendChild(doc.createTextNode(text));
+ // return {width: this.textMeasureEl_.offsetWidth};
+ // };
+
+ /******** STUBS ********/
+ // contextPrototype.clip = function() {
+ // // TODO: Implement
+ // };
+
+ // contextPrototype.arcTo = function() {
+ // // TODO: Implement
+ // };
+
+ // contextPrototype.createPattern = function(image, repetition) {
+ // return new CanvasPattern_(image, repetition);
+ // };
+
+ // // Gradient / Pattern Stubs
+ // function CanvasGradient_(aType) {
+ // this.type_ = aType;
+ // this.x0_ = 0;
+ // this.y0_ = 0;
+ // this.r0_ = 0;
+ // this.x1_ = 0;
+ // this.y1_ = 0;
+ // this.r1_ = 0;
+ // this.colors_ = [];
+ // }
+
+ // CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
+ // aColor = processStyle(aColor);
+ // this.colors_.push({offset: aOffset,
+ // color: aColor.color,
+ // alpha: aColor.alpha});
+ // };
+
+ // function CanvasPattern_(image, repetition) {
+ // assertImageIsValid(image);
+ // switch (repetition) {
+ // case 'repeat':
+ // case null:
+ // case '':
+ // this.repetition_ = 'repeat';
+ // break
+ // case 'repeat-x':
+ // case 'repeat-y':
+ // case 'no-repeat':
+ // this.repetition_ = repetition;
+ // break;
+ // default:
+ // throwException('SYNTAX_ERR');
+ // }
+
+ // this.src_ = image.src;
+ // this.width_ = image.width;
+ // this.height_ = image.height;
+ // }
+
+ function throwException(s) {
+ throw new DOMException_(s);
+ }
+
+ // function assertImageIsValid(img) {
+ // if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
+ // throwException('TYPE_MISMATCH_ERR');
+ // }
+ // if (img.readyState != 'complete') {
+ // throwException('INVALID_STATE_ERR');
+ // }
+ // }
+
+ function DOMException_(s) {
+ this.code = this[s];
+ this.message = s + ': DOM Exception ' + this.code;
+ }
+ var p = DOMException_.prototype = new Error;
+ p.INDEX_SIZE_ERR = 1;
+ p.DOMSTRING_SIZE_ERR = 2;
+ p.HIERARCHY_REQUEST_ERR = 3;
+ p.WRONG_DOCUMENT_ERR = 4;
+ p.INVALID_CHARACTER_ERR = 5;
+ p.NO_DATA_ALLOWED_ERR = 6;
+ p.NO_MODIFICATION_ALLOWED_ERR = 7;
+ p.NOT_FOUND_ERR = 8;
+ p.NOT_SUPPORTED_ERR = 9;
+ p.INUSE_ATTRIBUTE_ERR = 10;
+ p.INVALID_STATE_ERR = 11;
+ p.SYNTAX_ERR = 12;
+ p.INVALID_MODIFICATION_ERR = 13;
+ p.NAMESPACE_ERR = 14;
+ p.INVALID_ACCESS_ERR = 15;
+ p.VALIDATION_ERR = 16;
+ p.TYPE_MISMATCH_ERR = 17;
+
+ // set up externs
+ G_vmlCanvasManager = G_vmlCanvasManager_;
+ CanvasRenderingContext2D = CanvasRenderingContext2D_;
+ //CanvasGradient = CanvasGradient_;
+ //CanvasPattern = CanvasPattern_;
+ DOMException = DOMException_;
+ })();
+
+} // if
+/*!
+ * jQuery UI Widget @VERSION
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Widget
+ */
+
+if ( ! $.widget ) {
+
+(function( $, undefined ) {
+
+// jQuery 1.4+
+if ( $.cleanData ) {
+ var _cleanData = $.cleanData;
+ $.cleanData = function( elems ) {
+ for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
+ try {
+ $( elem ).triggerHandler( "remove" );
+ // http://bugs.jquery.com/ticket/8235
+ } catch( e ) {}
+ }
+ _cleanData( elems );
+ };
+} else {
+ var _remove = $.fn.remove;
+ $.fn.remove = function( selector, keepData ) {
+ return this.each(function() {
+ if ( !keepData ) {
+ if ( !selector || $.filter( selector, [ this ] ).length ) {
+ $( "*", this ).add( [ this ] ).each(function() {
+ try {
+ $( this ).triggerHandler( "remove" );
+ // http://bugs.jquery.com/ticket/8235
+ } catch( e ) {}
+ });
+ }
+ }
+ return _remove.call( $(this), selector, keepData );
+ });
+ };
+}
+
+$.widget = function( name, base, prototype ) {
+ var namespace = name.split( "." )[ 0 ],
+ fullName;
+ name = name.split( "." )[ 1 ];
+ fullName = namespace + "-" + name;
+
+ if ( !prototype ) {
+ prototype = base;
+ base = $.Widget;
+ }
+
+ // create selector for plugin
+ $.expr[ ":" ][ fullName ] = function( elem ) {
+ return !!$.data( elem, name );
+ };
+
+ $[ namespace ] = $[ namespace ] || {};
+ $[ namespace ][ name ] = function( options, element ) {
+ // allow instantiation without initializing for simple inheritance
+ if ( arguments.length ) {
+ this._createWidget( options, element );
+ }
+ };
+
+ var basePrototype = new base();
+ // we need to make the options hash a property directly on the new instance
+ // otherwise we'll modify the options hash on the prototype that we're
+ // inheriting from
+// $.each( basePrototype, function( key, val ) {
+// if ( $.isPlainObject(val) ) {
+// basePrototype[ key ] = $.extend( {}, val );
+// }
+// });
+ basePrototype.options = $.extend( true, {}, basePrototype.options );
+ $[ namespace ][ name ].prototype = $.extend( true, basePrototype, {
+ namespace: namespace,
+ widgetName: name,
+ widgetEventPrefix: $[ namespace ][ name ].prototype.widgetEventPrefix || name,
+ widgetBaseClass: fullName
+ }, prototype );
+
+ $.widget.bridge( name, $[ namespace ][ name ] );
+};
+
+$.widget.bridge = function( name, object ) {
+ $.fn[ name ] = function( options ) {
+ var isMethodCall = typeof options === "string",
+ args = Array.prototype.slice.call( arguments, 1 ),
+ returnValue = this;
+
+ // allow multiple hashes to be passed on init
+ options = !isMethodCall && args.length ?
+ $.extend.apply( null, [ true, options ].concat(args) ) :
+ options;
+
+ // prevent calls to internal methods
+ if ( isMethodCall && options.charAt( 0 ) === "_" ) {
+ return returnValue;
+ }
+
+ if ( isMethodCall ) {
+ this.each(function() {
+ var instance = $.data( this, name ),
+ methodValue = instance && $.isFunction( instance[options] ) ?
+ instance[ options ].apply( instance, args ) :
+ instance;
+ // TODO: add this back in 1.9 and use $.error() (see #5972)
+// if ( !instance ) {
+// throw "cannot call methods on " + name + " prior to initialization; " +
+// "attempted to call method '" + options + "'";
+// }
+// if ( !$.isFunction( instance[options] ) ) {
+// throw "no such method '" + options + "' for " + name + " widget instance";
+// }
+// var methodValue = instance[ options ].apply( instance, args );
+ if ( methodValue !== instance && methodValue !== undefined ) {
+ returnValue = methodValue;
+ return false;
+ }
+ });
+ } else {
+ this.each(function() {
+ var instance = $.data( this, name );
+ if ( instance ) {
+ instance.option( options || {} )._init();
+ } else {
+ $.data( this, name, new object( options, this ) );
+ }
+ });
+ }
+
+ return returnValue;
+ };
+};
+
+$.Widget = function( options, element ) {
+ // allow instantiation without initializing for simple inheritance
+ if ( arguments.length ) {
+ this._createWidget( options, element );
+ }
+};
+
+$.Widget.prototype = {
+ widgetName: "widget",
+ widgetEventPrefix: "",
+ options: {
+ disabled: false
+ },
+ _createWidget: function( options, element ) {
+ // $.widget.bridge stores the plugin instance, but we do it anyway
+ // so that it's stored even before the _create function runs
+ $.data( element, this.widgetName, this );
+ this.element = $( element );
+ this.options = $.extend( true, {},
+ this.options,
+ this._getCreateOptions(),
+ options );
+
+ var self = this;
+ this.element.bind( "remove." + this.widgetName, function() {
+ self.destroy();
+ });
+
+ this._create();
+ this._trigger( "create" );
+ this._init();
+ },
+ _getCreateOptions: function() {
+ return $.metadata && $.metadata.get( this.element[0] )[ this.widgetName ];
+ },
+ _create: function() {},
+ _init: function() {},
+
+ destroy: function() {
+ this.element
+ .unbind( "." + this.widgetName )
+ .removeData( this.widgetName );
+ this.widget()
+ .unbind( "." + this.widgetName )
+ .removeAttr( "aria-disabled" )
+ .removeClass(
+ this.widgetBaseClass + "-disabled " +
+ "ui-state-disabled" );
+ },
+
+ widget: function() {
+ return this.element;
+ },
+
+ option: function( key, value ) {
+ var options = key;
+
+ if ( arguments.length === 0 ) {
+ // don't return a reference to the internal hash
+ return $.extend( {}, this.options );
+ }
+
+ if (typeof key === "string" ) {
+ if ( value === undefined ) {
+ return this.options[ key ];
+ }
+ options = {};
+ options[ key ] = value;
+ }
+
+ this._setOptions( options );
+
+ return this;
+ },
+ _setOptions: function( options ) {
+ var self = this;
+ $.each( options, function( key, value ) {
+ self._setOption( key, value );
+ });
+
+ return this;
+ },
+ _setOption: function( key, value ) {
+ this.options[ key ] = value;
+
+ if ( key === "disabled" ) {
+ this.widget()
+ [ value ? "addClass" : "removeClass"](
+ this.widgetBaseClass + "-disabled" + " " +
+ "ui-state-disabled" )
+ .attr( "aria-disabled", value );
+ }
+
+ return this;
+ },
+
+ enable: function() {
+ return this._setOption( "disabled", false );
+ },
+ disable: function() {
+ return this._setOption( "disabled", true );
+ },
+
+ _trigger: function( type, event, data ) {
+ var prop, orig,
+ callback = this.options[ type ];
+
+ data = data || {};
+ event = $.Event( event );
+ event.type = ( type === this.widgetEventPrefix ?
+ type :
+ this.widgetEventPrefix + type ).toLowerCase();
+ // the original event may come from any element
+ // so we need to reset the target on the new event
+ event.target = this.element[ 0 ];
+
+ // copy original event properties over to the new event
+ orig = event.originalEvent;
+ if ( orig ) {
+ for ( prop in orig ) {
+ if ( !( prop in event ) ) {
+ event[ prop ] = orig[ prop ];
+ }
+ }
+ }
+
+ this.element.trigger( event, data );
+
+ return !( $.isFunction(callback) &&
+ callback.call( this.element[0], event, data ) === false ||
+ event.isDefaultPrevented() );
+ }
+};
+
+})( jQuery );
+
+}
+
+/*! JsRender v1.0pre - (jsrender.js version: does not require jQuery): http://github.com/BorisMoore/jsrender */
+/*
+ * Optimized version of jQuery Templates, fosr rendering to string, using 'codeless' markup.
+ *
+ * Copyright 2011, Boris Moore
+ * Released under the MIT License.
+ */
+window.JsViews || window.jQuery && jQuery.views || (function( window, undefined ) {
+
+var $, _$, JsViews, viewsNs, tmplEncode, render, rTag, registerTags, registerHelpers, extend,
+ FALSE = false, TRUE = true,
+ jQuery = window.jQuery, document = window.document,
+ htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
+ rPath = /^(true|false|null|[\d\.]+)|(\w+|\$(view|data|ctx|(\w+)))([\w\.]*)|((['"])(?:\\\1|.)*\7)$/g,
+ rParams = /(\$?[\w\.\[\]]+)(?:(\()|\s*(===|!==|==|!=|<|>|<=|>=)\s*|\s*(\=)\s*)?|(\,\s*)|\\?(\')|\\?(\")|(\))|(\s+)/g,
+ rNewLine = /\r?\n/g,
+ rUnescapeQuotes = /\\(['"])/g,
+ rEscapeQuotes = /\\?(['"])/g,
+ rBuildHash = /\x08([^\x08]+)\x08/g,
+ autoName = 0,
+ escapeMapForHtml = {
+ "&": "&",
+ "<": "<",
+ ">": ">"
+ },
+ htmlSpecialChar = /[\x00"&'<>]/g,
+ slice = Array.prototype.slice;
+
+if ( jQuery ) {
+
+ ////////////////////////////////////////////////////////////////////////////////////////////////
+ // jQuery is loaded, so make $ the jQuery object
+ $ = jQuery;
+
+ $.fn.extend({
+ // Use first wrapped element as template markup.
+ // Return string obtained by rendering the template against data.
+ render: function( data, context, parentView, path ) {
+ return render( data, this[0], context, parentView, path );
+ },
+
+ // Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
+ template: function( name, context ) {
+ return $.template( name, this[0], context );
+ }
+ });
+
+} else {
+
+ ////////////////////////////////////////////////////////////////////////////////////////////////
+ // jQuery is not loaded. Make $ the JsViews object
+
+ // Map over the $ in case of overwrite
+ _$ = window.$;
+
+ window.JsViews = JsViews = window.$ = $ = {
+ extend: function( target, source ) {
+ var name;
+ for ( name in source ) {
+ target[ name ] = source[ name ];
+ }
+ return target;
+ },
+ isArray: Array.isArray || function( obj ) {
+ return Object.prototype.toString.call( obj ) === "[object Array]";
+ },
+ noConflict: function() {
+ if ( window.$ === JsViews ) {
+ window.$ = _$;
+ }
+ return JsViews;
+ }
+ };
+}
+
+extend = $.extend;
+
+//=================
+// View constructor
+//=================
+
+function View( context, path, parentView, data, template ) {
+ // Returns a view data structure for a new rendered instance of a template.
+ // The content field is a hierarchical array of strings and nested views.
+
+ parentView = parentView || { viewsCount:0, ctx: viewsNs.helpers };
+
+ var parentContext = parentView && parentView.ctx;
+
+ return {
+ jsViews: "v1.0pre",
+ path: path || "",
+ // inherit context from parentView, merged with new context.
+ itemNumber: ++parentView.viewsCount || 1,
+ viewsCount: 0,
+ tmpl: template,
+ data: data || parentView.data || {},
+ // Set additional context on this view (which will modify the context inherited from the parent, and be inherited by child views)
+ ctx : context && context === parentContext
+ ? parentContext
+ : (parentContext ? extend( extend( {}, parentContext ), context ) : context||{}),
+ // If no jQuery, extend does not support chained copies - so limit to two parameters
+ parent: parentView
+ };
+}
+extend( $, {
+ views: viewsNs = {
+ templates: {},
+ tags: {
+ "if": function() {
+ var ifTag = this,
+ view = ifTag._view;
+ view.onElse = function( presenter, args ) {
+ var i = 0,
+ l = args.length;
+ while ( l && !args[ i++ ]) {
+ // Only render content if args.length === 0 (i.e. this is an else with no condition) or if a condition argument is truey
+ if ( i === l ) {
+ return "";
+ }
+ }
+ view.onElse = undefined; // If condition satisfied, so won't run 'else'.
+ return render( view.data, presenter.tmpl, view.ctx, view);
+ };
+ return view.onElse( this, arguments );
+ },
+ "else": function() {
+ var view = this._view;
+ return view.onElse ? view.onElse( this, arguments ) : "";
+ },
+ each: function() {
+ var i,
+ self = this,
+ result = "",
+ args = arguments,
+ l = args.length,
+ content = self.tmpl,
+ view = self._view;
+ for ( i = 0; i < l; i++ ) {
+ result += args[ i ] ? render( args[ i ], content, self.ctx || view.ctx, view, self._path, self._ctor ) : "";
+ }
+ return l ? result
+ // If no data parameter, use the current $data from view, and render once
+ : result + render( view.data, content, view.ctx, view, self._path, self.tag );
+ },
+ "=": function( value ) {
+ return value;
+ },
+ "*": function( value ) {
+ return value;
+ }
+ },
+ helpers: {
+ not: function( value ) {
+ return !value;
+ }
+ },
+ allowCode: FALSE,
+ debugMode: TRUE,
+ err: function( e ) {
+ return viewsNs.debugMode ? ("<br/><b>Error:</b> <em> " + (e.message || e) + ". </em>"): '""';
+ },
+
+//===============
+// setDelimiters
+//===============
+
+ setDelimiters: function( openTag, closeTag ) {
+ // Set or modify the delimiter characters for tags: "{{" and "}}"
+ var firstCloseChar = closeTag.charAt( 0 ),
+ secondCloseChar = closeTag.charAt( 1 );
+ openTag = "\\" + openTag.charAt( 0 ) + "\\" + openTag.charAt( 1 );
+ closeTag = "\\" + firstCloseChar + "\\" + secondCloseChar;
+
+ // Build regex with new delimiters
+ // {{
+ rTag = openTag
+ // # tag (followed by space,! or }) or equals or code
+ + "(?:(?:(\\#)?(\\w+(?=[!\\s\\" + firstCloseChar + "]))" + "|(?:(\\=)|(\\*)))"
+ // params
+ + "\\s*((?:[^\\" + firstCloseChar + "]|\\" + firstCloseChar + "(?!\\" + secondCloseChar + "))*?)"
+ // encoding
+ + "(!(\\w*))?"
+ // closeBlock
+ + "|(?:\\/([\\w\\$\\.\\[\\]]+)))"
+ // }}
+ + closeTag;
+
+ // Default rTag: # tag equals code params encoding closeBlock
+ // /\{\{(?:(?:(\#)?(\w+(?=[\s\}!]))|(?:(\=)|(\*)))((?:[^\}]|\}(?!\}))*?)(!(\w*))?|(?:\/([\w\$\.\[\]]+)))\}\}/g;
+
+ rTag = new RegExp( rTag, "g" );
+ },
+
+
+//===============
+// registerTags
+//===============
+
+ // Register declarative tag.
+ registerTags: registerTags = function( name, tagFn ) {
+ var key;
+ if ( typeof name === "object" ) {
+ for ( key in name ) {
+ registerTags( key, name[ key ]);
+ }
+ } else {
+ // Simple single property case.
+ viewsNs.tags[ name ] = tagFn;
+ }
+ return this;
+ },
+
+//===============
+// registerHelpers
+//===============
+
+ // Register helper function for use in markup.
+ registerHelpers: registerHelpers = function( name, helper ) {
+ if ( typeof name === "object" ) {
+ // Object representation where property name is path and property value is value.
+ // TODO: We've discussed an "objectchange" event to capture all N property updates here. See TODO note above about propertyChanges.
+ var key;
+ for ( key in name ) {
+ registerHelpers( key, name[ key ]);
+ }
+ } else {
+ // Simple single property case.
+ viewsNs.helpers[ name ] = helper;
+ }
+ return this;
+ },
+
+//===============
+// tmpl.encode
+//===============
+
+ encode: function( encoding, text ) {
+ return text
+ ? ( tmplEncode[ encoding || "html" ] || tmplEncode.html)( text ) // HTML encoding is the default
+ : "";
+ },
+
+ encoders: tmplEncode = {
+ "none": function( text ) {
+ return text;
+ },
+ "html": function( text ) {
+ // HTML encoding helper: Replace < > & and ' and " by corresponding entities.
+ // Implementation, from Mike Samuel <msamuel@google.com>
+ return String( text ).replace( htmlSpecialChar, replacerForHtml );
+ }
+ //TODO add URL encoding, and perhaps other encoding helpers...
+ },
+
+//===============
+// renderTag
+//===============
+
+ renderTag: function( tag, view, encode, content, tagProperties ) {
+ // This is a tag call, with arguments: "tag", view, encode, content, presenter [, params...]
+ var ret, ctx, name,
+ args = arguments,
+ presenters = viewsNs.presenters;
+ hash = tagProperties._hash,
+ tagFn = viewsNs.tags[ tag ];
+
+ if ( !tagFn ) {
+ return "";
+ }
+
+ content = content && view.tmpl.nested[ content - 1 ];
+ tagProperties.tmpl = tagProperties.tmpl || content || undefined;
+ // Set the tmpl property to the content of the block tag, unless set as an override property on the tag
+
+ if ( presenters && presenters[ tag ]) {
+ ctx = extend( extend( {}, tagProperties.ctx ), tagProperties );
+ delete ctx.ctx;
+ delete ctx._path;
+ delete ctx.tmpl;
+ tagProperties.ctx = ctx;
+ tagProperties._ctor = tag + (hash ? "=" + hash.slice( 0, -1 ) : "");
+
+ tagProperties = extend( extend( {}, tagFn ), tagProperties );
+ tagFn = viewsNs.tags.each; // Use each to render the layout template against the data
+ }
+
+ tagProperties._encode = encode;
+ tagProperties._view = view;
+ ret = tagFn.apply( tagProperties, args.length > 5 ? slice.call( args, 5 ) : [view.data] );
+ return ret || (ret === undefined ? "" : ret.toString()); // (If ret is the value 0 or false or null, will render to string)
+ }
+ },
+
+//===============
+// render
+//===============
+
+ render: render = function( data, tmpl, context, parentView, path, tagName ) {
+ // Render template against data as a tree of subviews (nested template), or as a string (top-level template).
+ // tagName parameter for internal use only. Used for rendering templates registered as tags (which may have associated presenter objects)
+ var i, l, dataItem, arrayView, content, result = "";
+
+ if ( arguments.length === 2 && data.jsViews ) {
+ parentView = data;
+ context = parentView.ctx;
+ data = parentView.data;
+ }
+ tmpl = $.template( tmpl );
+ if ( !tmpl ) {
+ return ""; // Could throw...
+ }
+
+ if ( $.isArray( data )) {
+ // Create a view item for the array, whose child views correspond to each data item.
+ arrayView = new View( context, path, parentView, data);
+ l = data.length;
+ for ( i = 0, l = data.length; i < l; i++ ) {
+ dataItem = data[ i ];
+ content = dataItem ? tmpl( dataItem, new View( context, path, arrayView, dataItem, tmpl, this )) : "";
+ result += viewsNs.activeViews ? "<!--item-->" + content + "<!--/item-->" : content;
+ }
+ } else {
+ result += tmpl( data, new View( context, path, parentView, data, tmpl ));
+ }
+
+ return viewsNs.activeViews
+ // If in activeView mode, include annotations
+ ? "<!--tmpl(" + (path || "") + ") " + (tagName ? "tag=" + tagName : tmpl._name) + "-->" + result + "<!--/tmpl-->"
+ // else return just the string result
+ : result;
+ },
+
+//===============
+// template
+//===============
+
+ template: function( name, tmpl ) {
+ // Set:
+ // Use $.template( name, tmpl ) to cache a named template,
+ // where tmpl is a template string, a script element or a jQuery instance wrapping a script element, etc.
+ // Use $( "selector" ).template( name ) to provide access by name to a script block template declaration.
+
+ // Get:
+ // Use $.template( name ) to access a cached template.
+ // Also $( selectorToScriptBlock ).template(), or $.template( null, templateString )
+ // will return the compiled template, without adding a name reference.
+ // If templateString is not a selector, $.template( templateString ) is equivalent
+ // to $.template( null, templateString ). To ensure a string is treated as a template,
+ // include an HTML element, an HTML comment, or a template comment tag.
+
+ if (tmpl) {
+ // Compile template and associate with name
+ if ( "" + tmpl === tmpl ) { // type string
+ // This is an HTML string being passed directly in.
+ tmpl = compile( tmpl );
+ } else if ( jQuery && tmpl instanceof $ ) {
+ tmpl = tmpl[0];
+ }
+ if ( tmpl ) {
+ if ( jQuery && tmpl.nodeType ) {
+ // If this is a template block, use cached copy, or generate tmpl function and cache.
+ tmpl = $.data( tmpl, "tmpl" ) || $.data( tmpl, "tmpl", compile( tmpl.innerHTML ));
+ }
+ viewsNs.templates[ tmpl._name = tmpl._name || name || "_" + autoName++ ] = tmpl;
+ }
+ return tmpl;
+ }
+ // Return named compiled template
+ return name
+ ? "" + name !== name // not type string
+ ? (name._name
+ ? name // already compiled
+ : $.template( null, name ))
+ : viewsNs.templates[ name ] ||
+ // If not in map, treat as a selector. (If integrated with core, use quickExpr.exec)
+ $.template( null, htmlExpr.test( name ) ? name : try$( name ))
+ : null;
+ }
+});
+
+viewsNs.setDelimiters( "{{", "}}" );
+
+//=================
+// compile template
+//=================
+
+// Generate a reusable function that will serve to render a template against data
+// (Compile AST then build template function)
+
+function parsePath( all, comp, object, viewDataCtx, viewProperty, path, string, quot ) {
+ return object
+ ? ((viewDataCtx
+ ? viewProperty
+ ? ("$view." + viewProperty)
+ : object
+ :("$data." + object)
+ ) + ( path || "" ))
+ : string || (comp || "");
+}
+
+function compile( markup ) {
+ var newNode,
+ loc = 0,
+ stack = [],
+ topNode = [],
+ content = topNode,
+ current = [,,topNode];
+
+ function pushPreceedingContent( shift ) {
+ shift -= loc;
+ if ( shift ) {
+ content.push( markup.substr( loc, shift ).replace( rNewLine,"\\n"));
+ }
+ }
+
+ function parseTag( all, isBlock, tagName, equals, code, params, useEncode, encode, closeBlock, index ) {
+ // rTag : # tagName equals code params encode closeBlock
+ // /\{\{(?:(?:(\#)?(\w+(?=[\s\}!]))|(?:(\=)|(\*)))((?:[^\}]|\}(?!\}))*?)(!(\w*))?|(?:\/([\w\$\.\[\]]+)))\}\}/g;
+
+ // Build abstract syntax tree: [ tagName, params, content, encode ]
+ var named,
+ hash = "",
+ parenDepth = 0,
+ quoted = FALSE, // boolean for string content in double qoutes
+ aposed = FALSE; // or in single qoutes
+
+ function parseParams( all, path, paren, comp, eq, comma, apos, quot, rightParen, space, index ) {
+ // path paren eq comma apos quot rtPrn space
+ // /(\$?[\w\.\[\]]+)(?:(\()|(===)|(\=))?|(\,\s*)|\\?(\')|\\?(\")|(\))|(\s+)/g
+
+ return aposed
+ // within single-quoted string
+ ? ( aposed = !apos, (aposed ? all : '"'))
+ : quoted
+ // within double-quoted string
+ ? ( quoted = !quot, (quoted ? all : '"'))
+ : comp
+ // comparison
+ ? ( path.replace( rPath, parsePath ) + comp)
+ : eq
+ // named param
+ ? parenDepth ? "" :( named = TRUE, '\b' + path + ':')
+ : paren
+ // function
+ ? (parenDepth++, path.replace( rPath, parsePath ) + '(')
+ : rightParen
+ // function
+ ? (parenDepth--, ")")
+ : path
+ // path
+ ? path.replace( rPath, parsePath )
+ : comma
+ ? ","
+ : space
+ ? (parenDepth
+ ? ""
+ : named
+ ? ( named = FALSE, "\b")
+ : ","
+ )
+ : (aposed = apos, quoted = quot, '"');
+ }
+
+ tagName = tagName || equals;
+ pushPreceedingContent( index );
+ if ( code ) {
+ if ( viewsNs.allowCode ) {
+ content.push([ "*", params.replace( rUnescapeQuotes, "$1" )]);
+ }
+ } else if ( tagName ) {
+ if ( tagName === "else" ) {
+ current = stack.pop();
+ content = current[ 2 ];
+ isBlock = TRUE;
+ }
+ params = (params
+ ? (params + " ")
+ .replace( rParams, parseParams )
+ .replace( rBuildHash, function( all, keyValue, index ) {
+ hash += keyValue + ",";
+ return "";
+ })
+ : "");
+ params = params.slice( 0, -1 );
+ newNode = [
+ tagName,
+ useEncode ? encode || "none" : "",
+ isBlock && [],
+ "{" + hash + "_hash:'" + hash + "',_path:'" + params + "'}",
+ params
+ ];
+
+ if ( isBlock ) {
+ stack.push( current );
+ current = newNode;
+ }
+ content.push( newNode );
+ } else if ( closeBlock ) {
+ current = stack.pop();
+ }
+ loc = index + all.length; // location marker - parsed up to here
+ if ( !current ) {
+ throw "Expected block tag";
+ }
+ content = current[ 2 ];
+ }
+ markup = markup.replace( rEscapeQuotes, "\\$1" );
+ markup.replace( rTag, parseTag );
+ pushPreceedingContent( markup.length );
+ return buildTmplFunction( topNode );
+}
+
+// Build javascript compiled template function, from AST
+function buildTmplFunction( nodes ) {
+ var ret, node, i,
+ nested = [],
+ l = nodes.length,
+ code = "try{var views="
+ + (jQuery ? "jQuery" : "JsViews")
+ + '.views,tag=views.renderTag,enc=views.encode,html=views.encoders.html,$ctx=$view && $view.ctx,result=""+\n\n';
+
+ for ( i = 0; i < l; i++ ) {
+ node = nodes[ i ];
+ if ( node[ 0 ] === "*" ) {
+ code = code.slice( 0, i ? -1 : -3 ) + ";" + node[ 1 ] + ( i + 1 < l ? "result+=" : "" );
+ } else if ( "" + node === node ) { // type string
+ code += '"' + node + '"+';
+ } else {
+ var tag = node[ 0 ],
+ encode = node[ 1 ],
+ content = node[ 2 ],
+ obj = node[ 3 ],
+ params = node[ 4 ],
+ paramsOrEmptyString = params + '||"")+';
+
+ if( content ) {
+ nested.push( buildTmplFunction( content ));
+ }
+ code += tag === "="
+ ? (!encode || encode === "html"
+ ? "html(" + paramsOrEmptyString
+ : encode === "none"
+ ? ("(" + paramsOrEmptyString)
+ : ('enc("' + encode + '",' + paramsOrEmptyString)
+ )
+ : 'tag("' + tag + '",$view,"' + ( encode || "" ) + '",'
+ + (content ? nested.length : '""') // For block tags, pass in the key (nested.length) to the nested content template
+ + "," + obj + (params ? "," : "") + params + ")+";
+ }
+ }
+ ret = new Function( "$data, $view", code.slice( 0, -1) + ";return result;\n\n}catch(e){return views.err(e);}" );
+ ret.nested = nested;
+ return ret;
+}
+
+//========================== Private helper functions, used by code above ==========================
+
+function replacerForHtml( ch ) {
+ // Original code from Mike Samuel <msamuel@google.com>
+ return escapeMapForHtml[ ch ]
+ // Intentional assignment that caches the result of encoding ch.
+ || ( escapeMapForHtml[ ch ] = "&#" + ch.charCodeAt( 0 ) + ";" );
+}
+
+function try$( selector ) {
+ // If selector is valid, return jQuery object, otherwise return (invalid) selector string
+ try {
+ return $( selector );
+ } catch( e) {}
+ return selector;
+}
+})( window );
+(function ($, window, undefined) {
+ var pos_oo = Number.POSITIVE_INFINITY,
+ neg_oo = Number.NEGATIVE_INFINITY;
+
+ $.geo = {
+ //
+ // utility functions
+ //
+
+ _allCoordinates: function (geom) {
+ // return array of all positions in all geometries of geom
+ // not in JTS
+ var geometries = this._flatten(geom),
+ curGeom = 0,
+ result = [];
+
+ for (; curGeom < geometries.length; curGeom++) {
+ var coordinates = geometries[curGeom].coordinates,
+ isArray = coordinates && $.isArray(coordinates[0]),
+ isDblArray = isArray && $.isArray(coordinates[0][0]),
+ isTriArray = isDblArray && $.isArray(coordinates[0][0][0]),
+ i, j, k;
+
+ if (!isTriArray) {
+ if (!isDblArray) {
+ if (!isArray) {
+ coordinates = [coordinates];
+ }
+ coordinates = [coordinates];
+ }
+ coordinates = [coordinates];
+ }
+
+ for (i = 0; i < coordinates.length; i++) {
+ for (j = 0; j < coordinates[i].length; j++) {
+ for (k = 0; k < coordinates[i][j].length; k++) {
+ result.push(coordinates[i][j][k]);
+ }
+ }
+ }
+ }
+ return result;
+ },
+
+ _isGeodetic: function( coords ) {
+ // returns true if the first coordinate it can find is geodetic
+
+ while ( $.isArray( coords ) ) {
+ if ( coords.length > 1 && ! $.isArray( coords[ 0 ] ) ) {
+ return ( coords[ 0 ] >= -180 && coords[ 0 ] <= 180 && coords[ 1 ] >= -85 && coords[ 1 ] <= 85 );
+ } else {
+ coords = coords[ 0 ];
+ }
+ }
+
+ return false;
+ },
+
+ //
+ // bbox functions
+ //
+
+ center: function (bbox, _ignoreGeo /* Internal Use Only */) {
+ // Envelope.centre in JTS
+ // bbox only, use centroid for geom
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ var center = [(bbox[0] + bbox[2]) / 2, (bbox[1] + bbox[3]) / 2];
+ return wasGeodetic ? $.geo.proj.toGeodetic(center) : center;
+ },
+
+ expandBy: function (bbox, dx, dy, _ignoreGeo /* Internal Use Only */) {
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ bbox = [bbox[0] - dx, bbox[1] - dy, bbox[2] + dx, bbox[3] + dy];
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ height: function (bbox, _ignoreGeo /* Internal Use Only */ ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ return bbox[3] - bbox[1];
+ },
+
+ _in: function(bbox1, bbox2) {
+ return bbox1[0] <= bbox2[0] &&
+ bbox1[1] <= bbox2[1] &&
+ bbox1[2] >= bbox2[2] &&
+ bbox1[3] >= bbox2[3];
+ },
+
+ _bboxDisjoint: function( bbox1, bbox2 ) {
+ return bbox2[ 0 ] > bbox1[ 2 ] ||
+ bbox2[ 2 ] < bbox1[ 0 ] ||
+ bbox2[ 1 ] > bbox1[ 3 ] ||
+ bbox2[ 3 ] < bbox1[ 1 ];
+ },
+
+ reaspect: function (bbox, ratio, _ignoreGeo /* Internal Use Only */ ) {
+ // not in JTS
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ var width = this.width(bbox, true),
+ height = this.height(bbox, true),
+ center = this.center(bbox, true),
+ dx, dy;
+
+ if (width != 0 && height != 0 && ratio > 0) {
+ if (width / height > ratio) {
+ dx = width / 2;
+ dy = dx / ratio;
+ } else {
+ dy = height / 2;
+ dx = dy * ratio;
+ }
+
+ bbox = [center[0] - dx, center[1] - dy, center[0] + dx, center[1] + dy];
+ }
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ recenter: function( bbox, center, _ignoreGeo /* Internal Use Only */ ) {
+ // not in JTS
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj ) {
+ if ( this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ if ( this._isGeodetic( center ) ) {
+ center = $.geo.proj.fromGeodetic(center);
+ }
+ }
+
+ var halfWidth = ( bbox[ 2 ] - bbox[ 0 ] ) / 2,
+ halfHeight = ( bbox[ 3 ] - bbox[ 1 ] ) / 2;
+
+ bbox = [
+ center[ 0 ] - halfWidth,
+ center[ 1 ] - halfHeight,
+ center[ 0 ] + halfWidth,
+ center[ 1 ] + halfHeight
+ ];
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ scaleBy: function ( bbox, scale, _ignoreGeo /* Internal Use Only */ ) {
+ // not in JTS
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ var c = this.center(bbox, true),
+ dx = (bbox[2] - bbox[0]) * scale / 2,
+ dy = (bbox[3] - bbox[1]) * scale / 2;
+
+ bbox = [c[0] - dx, c[1] - dy, c[0] + dx, c[1] + dy];
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ width: function (bbox, _ignoreGeo /* Internal Use Only */ ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ return bbox[2] - bbox[0];
+ },
+
+ //
+ // geometry functions
+ //
+
+ // bbox (Geometry.getEnvelope in JTS)
+
+ bbox: function ( geom, _ignoreGeo /* Internal Use Only */ ) {
+ if ( !geom ) {
+ return undefined;
+ } else if ( geom.bbox ) {
+ result = ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom.bbox ) ) ? $.geo.proj.fromGeodetic( geom.bbox ) : geom.bbox;
+ } else {
+ result = [ pos_oo, pos_oo, neg_oo, neg_oo ];
+
+ var coordinates = this._allCoordinates( geom ),
+ curCoord = 0;
+
+ if ( coordinates.length == 0 ) {
+ return undefined;
+ }
+
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( coordinates ) ) {
+ wasGeodetic = true;
+ coordinates = $.geo.proj.fromGeodetic( coordinates );
+ }
+
+ for ( ; curCoord < coordinates.length; curCoord++ ) {
+ result[0] = Math.min(coordinates[curCoord][0], result[0]);
+ result[1] = Math.min(coordinates[curCoord][1], result[1]);
+ result[2] = Math.max(coordinates[curCoord][0], result[2]);
+ result[3] = Math.max(coordinates[curCoord][1], result[3]);
+ }
+ }
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(result) : result;
+ },
+
+ // centroid
+
+ centroid: function( geom, _ignoreGeo /* Internal Use Only */ ) {
+ switch (geom.type) {
+ case "Point":
+ return $.extend({}, geom);
+
+ case "LineString":
+ case "Polygon":
+ var a = 0,
+ c = [0, 0],
+ coords = $.merge( [ ], geom.type == "Polygon" ? geom.coordinates[0] : geom.coordinates ),
+ i = 1, j, n;
+
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( coords ) ) {
+ wasGeodetic = true;
+ coords = $.geo.proj.fromGeodetic(coords);
+ }
+
+ //if (coords[0][0] != coords[coords.length - 1][0] || coords[0][1] != coords[coords.length - 1][1]) {
+ // coords.push(coords[0]);
+ //}
+
+ for (; i <= coords.length; i++) {
+ j = i % coords.length;
+ n = (coords[i - 1][0] * coords[j][1]) - (coords[j][0] * coords[i - 1][1]);
+ a += n;
+ c[0] += (coords[i - 1][0] + coords[j][0]) * n;
+ c[1] += (coords[i - 1][1] + coords[j][1]) * n;
+ }
+
+ if (a == 0) {
+ if (coords.length > 0) {
+ c[0] = coords[0][0];
+ c[1] = coords[0][1];
+ return { type: "Point", coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c };
+ } else {
+ return undefined;
+ }
+ }
+
+ a *= 3;
+ c[0] /= a;
+ c[1] /= a;
+
+ return { type: "Point", coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c };
+ }
+ return undefined;
+ },
+
+ // contains
+
+ contains: function (geom1, geom2) {
+ if (geom1.type != "Polygon") {
+ return false;
+ }
+
+ switch (geom2.type) {
+ case "Point":
+ return this._containsPolygonPoint(geom1.coordinates, geom2.coordinates);
+
+ case "LineString":
+ return this._containsPolygonLineString(geom1.coordinates, geom2.coordinates);
+
+ case "Polygon":
+ return this._containsPolygonLineString(geom1.coordinates, geom2.coordinates[0]);
+
+ default:
+ return false;
+ }
+ },
+
+ _containsPolygonPoint: function (polygonCoordinates, pointCoordinate) {
+ if (polygonCoordinates.length == 0 || polygonCoordinates[0].length < 4) {
+ return false;
+ }
+
+ var rayCross = 0,
+ a = polygonCoordinates[0][0],
+ i = 1,
+ b,
+ x;
+
+ for (; i < polygonCoordinates[0].length; i++) {
+ b = polygonCoordinates[0][i];
+
+ if ((a[1] <= pointCoordinate[1] && pointCoordinate[1] < b[1]) || (b[1] <= pointCoordinate[1] && pointCoordinate[1] < a[1]) && (pointCoordinate[0] < a[0] || pointCoordinate[0] < b[0])) {
+ x = a[0] + (b[0] - a[0]) * (pointCoordinate[1] - a[1]) / (b[1] - a[1]);
+
+ if (x > pointCoordinate[0]) {
+ rayCross++;
+ }
+ }
+
+ a = b;
+ }
+
+ return rayCross % 2 == 1;
+ },
+
+ _containsPolygonLineString: function (polygonCoordinates, lineStringCoordinates) {
+ for (var i = 0; i < lineStringCoordinates.length; i++) {
+ if (!this._containsPolygonPoint(polygonCoordinates, lineStringCoordinates[i])) {
+ return false;
+ }
+ }
+ return true;
+ },
+
+ // distance
+
+ distance: function ( geom1, geom2, _ignoreGeo /* Internal Use Only */ ) {
+ var geom1CoordinatesProjected = ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom1.coordinates ) ) ? $.geo.proj.fromGeodetic(geom1.coordinates) : geom1.coordinates,
+ geom2CoordinatesProjected = ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom2.coordinates ) ) ? $.geo.proj.fromGeodetic(geom2.coordinates) : geom2.coordinates;
+
+ switch (geom1.type) {
+ case "Point":
+ switch (geom2.type) {
+ case "Point":
+ return this._distancePointPoint(geom2CoordinatesProjected, geom1CoordinatesProjected);
+ case "LineString":
+ return this._distanceLineStringPoint(geom2CoordinatesProjected, geom1CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonPoint(geom2CoordinatesProjected, geom1CoordinatesProjected) ? 0 : this._distanceLineStringPoint(geom2CoordinatesProjected[0], geom1CoordinatesProjected);
+ default:
+ return undefined;
+ }
+ break;
+
+ case "LineString":
+ switch (geom2.type) {
+ case "Point":
+ return this._distanceLineStringPoint(geom1CoordinatesProjected, geom2CoordinatesProjected);
+ case "LineString":
+ return this._distanceLineStringLineString(geom1CoordinatesProjected, geom2CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonLineString(geom2CoordinatesProjected, geom1CoordinatesProjected) ? 0 : this._distanceLineStringLineString(geom2CoordinatesProjected[0], geom1CoordinatesProjected);
+ default:
+ return undefined;
+ }
+ break;
+
+ case "Polygon":
+ switch (geom2.type) {
+ case "Point":
+ return this._containsPolygonPoint(geom1CoordinatesProjected, geom2CoordinatesProjected) ? 0 : this._distanceLineStringPoint(geom1CoordinatesProjected[0], geom2CoordinatesProjected);
+ case "LineString":
+ return this._containsPolygonLineString(geom1CoordinatesProjected, geom2CoordinatesProjected) ? 0 : this._distanceLineStringLineString(geom1CoordinatesProjected[0], geom2CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonLineString(geom1CoordinatesProjected, geom2CoordinatesProjected[0]) ? 0 : this._distanceLineStringLineString(geom1CoordinatesProjected[0], geom2CoordinatesProjected[0]);
+ default:
+ return undefined;
+ }
+ break;
+ }
+ },
+
+ _distancePointPoint: function (coordinate1, coordinate2) {
+ var dx = coordinate2[0] - coordinate1[0],
+ dy = coordinate2[1] - coordinate1[1];
+ return Math.sqrt((dx * dx) + (dy * dy));
+ },
+
+ _distanceLineStringPoint: function (lineStringCoordinates, pointCoordinate) {
+ var minDist = pos_oo;
+
+ if (lineStringCoordinates.length > 0) {
+ var a = lineStringCoordinates[0],
+
+ apx = pointCoordinate[0] - a[0],
+ apy = pointCoordinate[1] - a[1];
+
+ if (lineStringCoordinates.length == 1) {
+ return Math.sqrt(apx * apx + apy * apy);
+ } else {
+ for (var i = 1; i < lineStringCoordinates.length; i++) {
+ var b = lineStringCoordinates[i],
+
+ abx = b[0] - a[0],
+ aby = b[1] - a[1],
+ bpx = pointCoordinate[0] - b[0],
+ bpy = pointCoordinate[1] - b[1],
+
+ d = this._distanceSegmentPoint(abx, aby, apx, apy, bpx, bpy);
+
+ if (d == 0) {
+ return 0;
+ }
+
+ if (d < minDist) {
+ minDist = d;
+ }
+
+ a = b;
+ apx = bpx;
+ apy = bpy;
+ }
+ }
+ }
+
+ return Math.sqrt(minDist);
+ },
+
+ _distanceSegmentPoint: function (abx, aby, apx, apy, bpx, bpy) {
+ var dot1 = abx * apx + aby * apy;
+
+ if (dot1 <= 0) {
+ return apx * apx + apy * apy;
+ }
+
+ var dot2 = abx * abx + aby * aby;
+
+ if (dot1 >= dot2) {
+ return bpx * bpx + bpy * bpy;
+ }
+
+ return apx * apx + apy * apy - dot1 * dot1 / dot2;
+ },
+
+ _distanceLineStringLineString: function (lineStringCoordinates1, lineStringCoordinates2) {
+ var minDist = pos_oo;
+ for (var i = 0; i < lineStringCoordinates2.length; i++) {
+ minDist = Math.min(minDist, this._distanceLineStringPoint(lineStringCoordinates1, lineStringCoordinates2[i]));
+ }
+ return minDist;
+ },
+
+ // buffer
+
+ _buffer: function( geom, distance, _ignoreGeo /* Internal Use Only */ ) {
+ var wasGeodetic = false,
+ coords = geom.coordinates;
+
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom.coordinates ) ) {
+ wasGeodetic = true;
+ coords = $.geo.proj.fromGeodetic( geom.coordinates );
+ }
+
+ switch ( geom.type ) {
+ case "Point":
+ var resultCoords = [],
+ slices = 180,
+ i = 0,
+ a;
+
+ for ( ; i <= slices; i++ ) {
+ a = ( i * 360 / slices ) * ( Math.PI / 180 );
+ resultCoords.push( [
+ coords[ 0 ] + Math.cos( a ) * distance,
+ coords[ 1 ] + Math.sin( a ) * distance
+ ] );
+ }
+
+ return {
+ type: "Polygon",
+ coordinates: [ ( wasGeodetic ? $.geo.proj.toGeodetic( resultCoords ) : resultCoords ) ]
+ };
+
+ break;
+
+ default:
+ return undefined;
+ }
+ },
+
+
+ //
+ // feature
+ //
+
+ _flatten: function (geom) {
+ // return an array of all basic geometries
+ // not in JTS
+ var geometries = [],
+ curGeom = 0;
+ switch (geom.type) {
+ case "Feature":
+ $.merge(geometries, this._flatten(geom.geometry));
+ break;
+
+ case "FeatureCollection":
+ for (; curGeom < geom.features.length; curGeom++) {
+ $.merge(geometries, this._flatten(geom.features[curGeom].geometry));
+ }
+ break;
+
+ case "GeometryCollection":
+ for (; curGeom < geom.geometries.length; curGeom++) {
+ $.merge(geometries, this._flatten(geom.geometries[curGeom]));
+ }
+ break;
+
+ default:
+ geometries[0] = geom;
+ break;
+ }
+ return geometries;
+ },
+
+ length: function( geom, _ignoreGeo /* Internal Use Only */ ) {
+ var sum = 0,
+ lineStringCoordinates,
+ i = 1, dx, dy;
+
+ switch ( geom.type ) {
+ case "Point":
+ return 0;
+
+ case "LineString":
+ lineStringCoordinates = geom.coordinates;
+ break;
+
+ case "Polygon":
+ lineStringCoordinates = geom.coordinates[ 0 ];
+ break;
+ }
+
+ if ( lineStringCoordinates ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( lineStringCoordinates ) ) {
+ lineStringCoordinates = $.geo.proj.fromGeodetic( lineStringCoordinates );
+ }
+
+ for ( ; i < lineStringCoordinates.length; i++ ) {
+ dx = lineStringCoordinates[ i ][0] - lineStringCoordinates[ i - 1 ][0];
+ dy = lineStringCoordinates[ i ][1] - lineStringCoordinates[ i - 1 ][1];
+ sum += Math.sqrt((dx * dx) + (dy * dy));
+ }
+
+ return sum;
+ }
+
+ // return undefined;
+ },
+
+ area: function( geom, _ignoreGeo /* Internal Use Only */ ) {
+ var sum = 0,
+ polygonCoordinates,
+ i = 1, j;
+
+ switch ( geom.type ) {
+ case "Point":
+ case "LineString":
+ return 0;
+
+ case "Polygon":
+ polygonCoordinates = geom.coordinates[ 0 ];
+ break;
+ }
+
+ if ( polygonCoordinates ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( polygonCoordinates ) ) {
+ polygonCoordinates = $.geo.proj.fromGeodetic( polygonCoordinates );
+ }
+
+ for ( ; i <= polygonCoordinates.length; i++) {
+ j = i % polygonCoordinates.length;
+ sum += ( polygonCoordinates[ i - 1 ][ 0 ] - polygonCoordinates[ j ][ 0 ] ) * ( polygonCoordinates[ i - 1 ][ 1 ] + polygonCoordinates[ j ][ 1 ] ) / 2;
+ }
+
+ return Math.abs( sum );
+ }
+ },
+
+ pointAlong: function( geom, percentage, _ignoreGeo /* Internal Use Only */ ) {
+ var totalLength = 0,
+ previousPercentageSum = 0,
+ percentageSum = 0,
+ remainderPercentageSum,
+ len,
+ lineStringCoordinates,
+ segmentLengths = [],
+ i = 1, dx, dy,
+ c, c0, c1,
+ wasGeodetic = false;
+
+ switch ( geom.type ) {
+ case "Point":
+ return $.extend( { }, geom );
+
+ case "LineString":
+ lineStringCoordinates = geom.coordinates;
+ break;
+
+ case "Polygon":
+ lineStringCoordinates = geom.coordinates[ 0 ];
+ break;
+ }
+
+ if ( lineStringCoordinates ) {
+ if ( percentage === 0 ) {
+ return {
+ type: "Point",
+ coordinates: [ lineStringCoordinates[ 0 ][ 0 ], lineStringCoordinates[ 0 ][ 1 ] ]
+ };
+ } else if ( percentage === 1 ) {
+ i = lineStringCoordinates.length - 1;
+ return {
+ type: "Point",
+ coordinates: [ lineStringCoordinates[ i ][ 0 ], lineStringCoordinates[ i ][ 1 ] ]
+ };
+ } else {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( lineStringCoordinates ) ) {
+ wasGeodetic = true;
+ lineStringCoordinates = $.geo.proj.fromGeodetic( lineStringCoordinates );
+ }
+
+ for ( ; i < lineStringCoordinates.length; i++ ) {
+ dx = lineStringCoordinates[ i ][ 0 ] - lineStringCoordinates[ i - 1 ][ 0 ];
+ dy = lineStringCoordinates[ i ][ 1 ] - lineStringCoordinates[ i - 1 ][ 1 ];
+ len = Math.sqrt((dx * dx) + (dy * dy));
+ segmentLengths.push( len );
+ totalLength += len;
+ }
+
+ for ( i = 0; i < segmentLengths.length && percentageSum < percentage; i++ ) {
+ previousPercentageSum = percentageSum;
+ percentageSum += ( segmentLengths[ i ] / totalLength );
+ }
+
+ remainderPercentageSum = percentage - previousPercentageSum;
+
+ c0 = lineStringCoordinates[ i - 1 ];
+ c1 = lineStringCoordinates[ i ];
+
+ c = [
+ c0[ 0 ] + ( remainderPercentageSum * ( c1[ 0 ] - c0[ 0 ] ) ),
+ c0[ 1 ] + ( remainderPercentageSum * ( c1[ 1 ] - c0[ 1 ] ) )
+ ];
+
+ return {
+ type: "Point",
+ coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c
+ };
+ }
+ }
+ },
+
+ //
+ // WKT functions
+ //
+
+ _WKT: (function () {
+ function pointToString(value) {
+ return "POINT " + pointToUntaggedString(value.coordinates);
+ }
+
+ function pointToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ return "(" + coordinates.join(" ") + ")";
+ }
+ }
+
+ function lineStringToString(value) {
+ return "LINESTRING " + lineStringToUntaggedString(value.coordinates);
+ }
+
+ function lineStringToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ var points = []
+
+ for (var i = 0; i < coordinates.length; i++) {
+ points.push(coordinates[i].join(" "));
+ }
+
+ return "(" + points + ")";
+ }
+ }
+
+ function polygonToString(value) {
+ return "POLYGON " + polygonToUntaggedString(value.coordinates);
+ }
+
+ function polygonToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMTPY";
+ } else {
+ var lineStrings = [];
+
+ for (var i = 0; i < coordinates.length; i++) {
+ lineStrings.push(lineStringToUntaggedString(coordinates[i]));
+ }
+
+ return "(" + lineStrings + ")";
+ }
+ }
+
+ function multiPointToString(value) {
+ return "MULTIPOINT " + lineStringToUntaggedString(value.coordinates);
+ }
+
+ function multiLineStringToString(value) {
+ return "MULTILINSTRING " + polygonToUntaggedString(value.coordinates);
+ }
+
+ function multiPolygonToString(value) {
+ return "MULTIPOLYGON " + multiPolygonToUntaggedString(value.coordinates);
+ }
+
+ function multiPolygonToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ var polygons = [];
+ for (var i = 0; i < coordinates.length; i++) {
+ polygons.push(polygonToUntaggedString(coordinates[i]));
+ }
+ return "(" + polygons + ")";
+ }
+ }
+
+ function geometryCollectionToString(value) {
+ return "GEOMETRYCOLLECTION " + geometryCollectionToUntaggedString(value.geometries);
+ }
+
+ function geometryCollectionToUntaggedString(geometries) {
+ if (!(geometries && geometries.length)) {
+ return "EMPTY";
+ } else {
+ var geometryText = [];
+ for (var i = 0; i < geometries.length; i++) {
+ geometryText.push(stringify(geometries[i]));
+ }
+ return "(" + geometries + ")";
+ }
+ }
+
+ function stringify(value) {
+ if (!(value && value.type)) {
+ return "";
+ } else {
+ switch (value.type) {
+ case "Point":
+ return pointToString(value);
+
+ case "LineString":
+ return lineStringToString(value);
+
+ case "Polygon":
+ return polygonToString(value);
+
+ case "MultiPoint":
+ return multiPointToString(value);
+
+ case "MultiLineString":
+ return multiLineStringToString(value);
+
+ case "MultiPolygon":
+ return multiPolygonToString(value);
+
+ case "GeometryCollection":
+ return geometryCollectionToString(value);
+
+ default:
+ return "";
+ }
+ }
+ }
+
+ function pointParseUntagged(wkt) {
+ var pointString = wkt.match( /\(\s*([\d\.-]+)\s+([\d\.-]+)\s*\)/ );
+ return pointString && pointString.length > 2 ? {
+ type: "Point",
+ coordinates: [
+ parseFloat(pointString[1]),
+ parseFloat(pointString[2])
+ ]
+ } : null;
+ }
+
+ function lineStringParseUntagged(wkt) {
+ var lineString = wkt.match( /\s*\((.*)\)/ ),
+ coords = [],
+ pointStrings,
+ pointParts,
+ i = 0;
+
+ if ( lineString.length > 1 ) {
+ pointStrings = lineString[ 1 ].match( /[\d\.-]+\s+[\d\.-]+/g );
+
+ for ( ; i < pointStrings.length; i++ ) {
+ pointParts = pointStrings[ i ].match( /\s*([\d\.-]+)\s+([\d\.-]+)\s*/ );
+ coords[ i ] = [ parseFloat( pointParts[ 1 ] ), parseFloat( pointParts[ 2 ] ) ];
+ }
+
+ return {
+ type: "LineString",
+ coordinates: coords
+ };
+ } else {
+ return null
+ }
+ }
+
+ function polygonParseUntagged(wkt) {
+ var polygon = wkt.match( /\s*\(\s*\((.*)\)\s*\)/ ),
+ coords = [],
+ pointStrings,
+ pointParts,
+ i = 0;
+
+ if ( polygon.length > 1 ) {
+ pointStrings = polygon[ 1 ].match( /[\d\.-]+\s+[\d\.-]+/g );
+
+ for ( ; i < pointStrings.length; i++ ) {
+ pointParts = pointStrings[ i ].match( /\s*([\d\.-]+)\s+([\d\.-]+)\s*/ );
+ coords[ i ] = [ parseFloat( pointParts[ 1 ] ), parseFloat( pointParts[ 2 ] ) ];
+ }
+
+ return {
+ type: "Polygon",
+ coordinates: [ coords ]
+ };
+ } else {
+ return null;
+ }
+ }
+
+ function parse(wkt) {
+ wkt = $.trim(wkt);
+
+ var typeIndex = wkt.indexOf( " " ),
+ untagged = wkt.substr( typeIndex + 1 );
+
+ switch (wkt.substr(0, typeIndex).toUpperCase()) {
+ case "POINT":
+ return pointParseUntagged( untagged );
+
+ case "LINESTRING":
+ return lineStringParseUntagged( untagged );
+
+ case "POLYGON":
+ return polygonParseUntagged( untagged );
+
+ default:
+ return null;
+ }
+ }
+
+ return {
+ stringify: stringify,
+
+ parse: parse
+ };
+ })(),
+
+ //
+ // projection functions
+ //
+
+ proj: (function () {
+ var halfPi = 1.5707963267948966192,
+ quarterPi = 0.7853981633974483096,
+ radiansPerDegree = 0.0174532925199432958,
+ degreesPerRadian = 57.295779513082320877,
+ semiMajorAxis = 6378137;
+
+ return {
+ fromGeodeticPos: function (coordinate) {
+ if (!coordinate) {
+ debugger;
+ }
+ return [
+ semiMajorAxis * coordinate[ 0 ] * radiansPerDegree,
+ semiMajorAxis * Math.log(Math.tan(quarterPi + coordinate[ 1 ] * radiansPerDegree / 2))
+ ];
+ },
+
+ fromGeodetic: function ( coordinates ) {
+ if ( ! $.geo._isGeodetic( coordinates ) ) {
+ return coordinates;
+ }
+
+ var isMultiPointOrLineString = $.isArray(coordinates[ 0 ]),
+ fromGeodeticPos = this.fromGeodeticPos;
+
+ if (!isMultiPointOrLineString && coordinates.length == 4) {
+ // bbox
+ var min = fromGeodeticPos([ coordinates[ 0 ], coordinates[ 1 ] ]),
+ max = fromGeodeticPos([ coordinates[ 2 ], coordinates[ 3 ] ]);
+ return [ min[ 0 ], min[ 1 ], max[ 0 ], max[ 1 ] ];
+ } else {
+ // geometry
+ var isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray(coordinates[ 0 ][ 0 ]),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray(coordinates[ 0 ][ 0 ][ 0 ]),
+ result = [ ],
+ i, j, k;
+
+ if (!isMultiPolygon) {
+ if (!isMultiLineStringOrPolygon) {
+ if (!isMultiPointOrLineString) {
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+
+ for ( i = 0; i < coordinates.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < coordinates[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < coordinates[ i ][ j ].length; k++ ) {
+ result[ i ][ j ][ k ] = fromGeodeticPos(coordinates[ i ][ j ][ k ]);
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ }
+ },
+
+ toGeodeticPos: function (coordinate) {
+ return [
+ (coordinate[ 0 ] / semiMajorAxis) * degreesPerRadian,
+ (halfPi - 2 * Math.atan(1 / Math.exp(coordinate[ 1 ] / semiMajorAxis))) * degreesPerRadian
+ ];
+ },
+
+ toGeodetic: function (coordinates) {
+ if ( $.geo._isGeodetic( coordinates ) ) {
+ return coordinates;
+ }
+
+ var isMultiPointOrLineString = $.isArray(coordinates[ 0 ]),
+ toGeodeticPos = this.toGeodeticPos;
+
+ if (!isMultiPointOrLineString && coordinates.length == 4) {
+ // bbox
+ var min = toGeodeticPos([ coordinates[ 0 ], coordinates[ 1 ] ]),
+ max = toGeodeticPos([ coordinates[ 2 ], coordinates[ 3 ] ]);
+ return [ min[ 0 ], min[ 1 ], max[ 0 ], max[ 1 ] ];
+ } else {
+ // geometry
+ var isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray(coordinates[ 0 ][ 0 ]),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray(coordinates[ 0 ][ 0 ][ 0 ]),
+ result = [ ];
+
+ if (!isMultiPolygon) {
+ if (!isMultiLineStringOrPolygon) {
+ if (!isMultiPointOrLineString) {
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+
+ for ( i = 0; i < coordinates.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < coordinates[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < coordinates[ i ][ j ].length; k++ ) {
+ result[ i ][ j ][ k ] = toGeodeticPos(coordinates[ i ][ j ][ k ]);
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ }
+ }
+ }
+ })(),
+
+ //
+ // service types (defined in other files)
+ //
+
+ _serviceTypes: {}
+ }
+})(jQuery, this);
+(function ($, undefined) {
+
+ var _ieVersion = (function () {
+ var v = 5, div = document.createElement("div"), a = div.all || [];
+ while (div.innerHTML = "<!--[if gt IE " + (++v) + "]><br><![endif]-->", a[0]) { }
+ return v > 6 ? v : !v;
+ } ());
+
+ $.widget("geo.geographics", {
+ _$elem: undefined,
+ _options: {},
+ _trueCanvas: true,
+
+ _width: 0,
+ _height: 0,
+
+ _$canvas: undefined,
+ _context: undefined,
+ _$labelsContainer: undefined,
+
+ options: {
+ style: {
+ borderRadius: "8px",
+ color: "#7f0000",
+ //fill: undefined,
+ fillOpacity: .2,
+ height: "8px",
+ opacity: 1,
+ //stroke: undefined,
+ strokeOpacity: 1,
+ strokeWidth: "2px",
+ visibility: "visible",
+ width: "8px"
+ }
+ },
+
+ _create: function () {
+ this._$elem = this.element;
+ this._options = this.options;
+
+ this._$elem.css({ display: "inline-block", overflow: "hidden", textAlign: "left" });
+
+ if (this._$elem.css("position") == "static") {
+ this._$elem.css("position", "relative");
+ }
+
+ this._$elem.addClass( "geo-graphics" );
+
+ this._width = this._$elem.width();
+ this._height = this._$elem.height();
+
+ if (!(this._width && this._height)) {
+ this._width = parseInt(this._$elem.css("width"));
+ this._height = parseInt(this._$elem.css("height"));
+ }
+
+ var posCss = 'position:absolute;left:0;top:0;margin:0;padding:0;',
+ sizeCss = 'width:' + this._width + 'px;height:' + this._height + 'px;',
+ sizeAttr = 'width="' + this._width + '" height="' + this._height + '"';
+
+ if (document.createElement('canvas').getContext) {
+ this._$elem.append('<canvas ' + sizeAttr + ' style="' + posCss + '"></canvas>');
+ this._$canvas = this._$elem.children(':last');
+ this._context = this._$canvas[0].getContext("2d");
+ } else if (_ieVersion <= 8) {
+ this._trueCanvas = false;
+ this._$elem.append( '<div ' + sizeAttr + ' style="' + posCss + sizeCss + '"></div>');
+ this._$canvas = this._$elem.children(':last');
+
+ G_vmlCanvasManager.initElement(this._$canvas[0]);
+ this._context = this._$canvas[0].getContext("2d");
+ this._$canvas.children().css({ backgroundColor: "transparent", width: this._width, height: this._height });
+ }
+
+ this._$elem.append('<div class="geo-labels-container" style="' + posCss + sizeCss + '"></div>');
+ this._$labelsContainer = this._$elem.children(':last');
+ },
+
+ _setOption: function (key, value) {
+ if (key == "style") {
+ value = $.extend({}, this._options.style, value);
+ }
+ $.Widget.prototype._setOption.apply(this, arguments);
+ },
+
+ destroy: function () {
+ $.Widget.prototype.destroy.apply(this, arguments);
+ this._$elem.html("");
+ this._$elem.removeClass( "geo-graphics" );
+ },
+
+ clear: function () {
+ this._context.clearRect(0, 0, this._width, this._height);
+ this._$labelsContainer.html("");
+ },
+
+ drawArc: function (coordinates, startAngle, sweepAngle, style) {
+ style = this._getGraphicStyle(style);
+
+ if (style.visibility != "hidden" && style.opacity > 0 && style.widthValue > 0 && style.heightValue > 0) {
+ var r = Math.min(style.widthValue, style.heightValue) / 2;
+
+ startAngle = (startAngle * Math.PI / 180);
+ sweepAngle = (sweepAngle * Math.PI / 180);
+
+ this._context.save();
+ this._context.translate(coordinates[0], coordinates[1]);
+ if (style.widthValue > style.heightValue) {
+ this._context.scale(style.widthValue / style.heightValue, 1);
+ } else {
+ this._context.scale(1, style.heightValue / style.widthValue);
+ }
+
+ this._context.beginPath();
+ this._context.arc(0, 0, r, startAngle, sweepAngle, false);
+
+ if (this._trueCanvas) {
+ this._context.restore();
+ }
+
+ if (style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+ this._context.stroke();
+ }
+
+ if (!this._trueCanvas) {
+ this._context.restore();
+ }
+ }
+ },
+
+ drawPoint: function (coordinates, style) {
+ var style = this._getGraphicStyle(style);
+ if (style.widthValue == style.heightValue && style.heightValue == style.borderRadiusValue) {
+ this.drawArc(coordinates, 0, 360, style);
+ } else if (style.visibility != "hidden" && style.opacity > 0) {
+ style.borderRadiusValue = Math.min(Math.min(style.widthValue, style.heightValue) / 2, style.borderRadiusValue);
+ coordinates[0] -= style.widthValue / 2;
+ coordinates[1] -= style.heightValue / 2;
+ this._context.beginPath();
+ this._context.moveTo(coordinates[0] + style.borderRadiusValue, coordinates[1]);
+ this._context.lineTo(coordinates[0] + style.widthValue - style.borderRadiusValue, coordinates[1]);
+ this._context.quadraticCurveTo(coordinates[0] + style.widthValue, coordinates[1], coordinates[0] + style.widthValue, coordinates[1] + style.borderRadiusValue);
+ this._context.lineTo(coordinates[0] + style.widthValue, coordinates[1] + style.heightValue - style.borderRadiusValue);
+ this._context.quadraticCurveTo(coordinates[0] + style.widthValue, coordinates[1] + style.heightValue, coordinates[0] + style.widthValue - style.borderRadiusValue, coordinates[1] + style.heightValue);
+ this._context.lineTo(coordinates[0] + style.borderRadiusValue, coordinates[1] + style.heightValue);
+ this._context.quadraticCurveTo(coordinates[0], coordinates[1] + style.heightValue, coordinates[0], coordinates[1] + style.heightValue - style.borderRadiusValue);
+ this._context.lineTo(coordinates[0], coordinates[1] + style.borderRadiusValue);
+ this._context.quadraticCurveTo(coordinates[0], coordinates[1], coordinates[0] + style.borderRadiusValue, coordinates[1]);
+ this._context.closePath();
+
+ if (style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+
+ this._context.stroke();
+ }
+ }
+ },
+
+ drawLineString: function (coordinates, style) {
+ this._drawLines([coordinates], false, style);
+ },
+
+ drawPolygon: function (coordinates, style) {
+ this._drawLines(coordinates, true, style);
+ },
+
+ drawBbox: function (bbox, style) {
+ this._drawLines([[
+ [bbox[0], bbox[1]],
+ [bbox[0], bbox[3]],
+ [bbox[2], bbox[3]],
+ [bbox[2], bbox[1]],
+ [bbox[0], bbox[1]]
+ ]], true, style);
+ },
+
+ drawLabel: function( coordinates, label ) {
+ this._$labelsContainer.append( '<div class="geo-label" style="position:absolute; left:' + coordinates[ 0 ] + 'px; top:' + coordinates[ 1 ] + 'px;">' + label + '</div>');
+ },
+
+ resize: function( ) {
+ this._width = this._$elem.width();
+ this._height = this._$elem.height();
+
+ if (!(this._width && this._height)) {
+ this._width = parseInt(this._$elem.css("width"));
+ this._height = parseInt(this._$elem.css("height"));
+ }
+
+ if ( this._trueCanvas ) {
+ this._$canvas[0].width = this._width;
+ this._$canvas[0].height = this._height;
+ } else {
+ }
+
+ this._$labelsContainer.css( {
+ width: this._width,
+ height: this._height
+ } );
+ },
+
+ _getGraphicStyle: function (style) {
+ function safeParse(value) {
+ value = parseInt(value);
+ return (+value + '') === value ? +value : value;
+ }
+
+ style = $.extend({}, this._options.style, style);
+ style.borderRadiusValue = safeParse(style.borderRadius);
+ style.fill = style.fill || style.color;
+ style.doFill = style.fill && style.fillOpacity > 0;
+ style.stroke = style.stroke || style.color;
+ style.strokeWidthValue = safeParse(style.strokeWidth);
+ style.doStroke = style.stroke && style.strokeOpacity > 0 && style.strokeWidthValue > 0;
+ style.widthValue = safeParse(style.width);
+ style.heightValue = safeParse(style.height);
+ return style;
+ },
+
+ _drawLines: function (coordinates, close, style) {
+ if (!coordinates || !coordinates.length || coordinates[0].length < 2) {
+ return;
+ }
+
+ var style = this._getGraphicStyle(style),
+ i, j;
+
+ if (style.visibility != "hidden" && style.opacity > 0) {
+ this._context.beginPath();
+ this._context.moveTo(coordinates[0][0][0], coordinates[0][0][1]);
+
+ for (i = 0; i < coordinates.length; i++) {
+ for (j = 0; j < coordinates[i].length; j++) {
+ this._context.lineTo(coordinates[i][j][0], coordinates[i][j][1]);
+ }
+ }
+
+ if (close) {
+ this._context.closePath();
+ }
+
+ if (close && style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineCap = this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+ this._context.stroke();
+ }
+ }
+ }
+ });
+
+
+})(jQuery);
+
+(function ($, undefined) {
+ var _ieVersion = (function () {
+ var v = 5, div = document.createElement("div"), a = div.all || [];
+ while (div.innerHTML = "<!--[if gt IE " + (++v) + "]><br><![endif]-->", a[0]) { }
+ return v > 6 ? v : !v;
+ } ()),
+
+ _defaultOptions = {
+ bbox: [-180, -85, 180, 85],
+ bboxMax: [-180, -85, 180, 85],
+ center: [0, 0],
+ cursors: {
+ "static": "default",
+ pan: "url(data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAgACAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=), move",
+ zoom: "crosshair",
+ drawPoint: "crosshair",
+ drawLineString: "crosshair",
+ drawPolygon: "crosshair",
+ measureLength: "crosshair",
+ measureArea: "crosshair"
+ },
+ measureLabels: {
+ length: "{{=length.toFixed( 2 )}} m",
+ area: "{{=area.toFixed( 2 )}} sq m"
+ },
+ drawStyle: {},
+ shapeStyle: {},
+ mode: "pan",
+ pannable: true,
+ scroll: "default",
+ services: [
+ {
+ "class": "osm",
+ type: "tiled",
+ src: function (view) {
+ return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "© OpenStreetMap & contributors, CC-BY-SA"
+ }
+ ],
+ tilingScheme: {
+ tileWidth: 256,
+ tileHeight: 256,
+ levels: 18,
+ basePixelSize: 156543.03392799936,
+ origin: [-20037508.342787, 20037508.342787]
+ },
+ axisLayout: "map",
+ zoom: 0,
+ pixelSize: 0
+ };
+
+ $.widget("geo.geomap", {
+ // private widget members
+ _$elem: undefined, //< map div for maps, service div for services
+ _map: undefined, //< only defined in services
+ _created: false,
+
+ _contentBounds: {},
+
+ _$resizeContainer: undefined, //< all elements that should match _contentBounds' size
+
+ _$eventTarget: undefined,
+ _$contentFrame: undefined,
+ _$existingChildren: undefined,
+ _$attrList: undefined,
+ _$servicesContainer: undefined,
+
+ _$panContainer: undefined, //< all non-service elements that move while panning
+ _$shapesContainer: undefined,
+ _$drawContainer: undefined,
+ _$measureContainer: undefined,
+ _$measureLabel: undefined,
+
+ _dpi: 96,
+
+ _currentServices: [], //< internal copy
+
+ _center: undefined,
+ _pixelSize: undefined,
+ _centerMax: undefined,
+ _pixelSizeMax: undefined,
+
+ _userGeodetic: true,
+
+ _wheelTimeout: null,
+ _wheelLevel: 0,
+
+ _zoomFactor: 2, //< determines what a zoom level means
+
+ _fullZoomFactor: 2, //< interactiveScale factor needed to zoom a whole level
+ _partialZoomFactor: 1.18920711500273, //< interactiveScale factor needed to zoom a fraction of a level (the fourth root of 2)
+
+ _mouseDown: undefined,
+ _inOp: undefined,
+ _toolPan: undefined,
+ _shiftZoom: undefined,
+ _anchor: undefined,
+ _current: undefined,
+ _downDate: undefined,
+ _moveDate: undefined,
+ _clickDate: undefined,
+ _lastMove: undefined,
+ _lastDrag: undefined,
+
+ _windowHandler: null,
+ _resizeTimeout: null,
+
+ _panning: undefined,
+ _velocity: undefined,
+ _friction: undefined,
+
+ _supportTouch: undefined,
+ _softDblClick: undefined,
+ _isTap: undefined,
+ _isDbltap: undefined,
+
+ _isMultiTouch: undefined,
+ _multiTouchAnchor: undefined, //< TouchList
+ _multiTouchAnchorBbox: undefined, //< bbox
+ _multiTouchCurrentBbox: undefined, //< bbox
+
+ _drawTimeout: null, //< used in drawPoint mode so we don't send two shape events on dbltap
+ _drawPixels: [], //< an array of coordinate arrays for drawing lines & polygons, in pixel coordinates
+ _drawCoords: [],
+
+ _graphicShapes: [], //< an array of objects containing style object refs & GeoJSON object refs
+
+ _initOptions: {},
+
+ _options: {},
+
+ options: $.extend({}, _defaultOptions),
+
+ _createWidget: function (options, element) {
+ this._$elem = $(element);
+
+ if (this._$elem.is(".geo-service")) {
+ var $contentFrame = this._$elem.closest( ".geo-content-frame" );
+ this._$elem.append('<div class="geo-shapes-container" style="position:absolute; left:0; top:0; width:' + $contentFrame.css( "width" ) + '; height:' + $contentFrame.css( "height" ) + '; margin:0; padding:0;"></div>');
+ this._$shapesContainer = this._$elem.children(':last');
+ this._graphicShapes = [];
+ $.Widget.prototype._createWidget.apply(this, arguments);
+ return;
+ }
+
+ this._$elem.addClass("geo-map");
+
+ this._initOptions = options || {};
+
+ this._forcePosition(this._$elem);
+
+ this._$elem.css("text-align", "left");
+
+ var size = this._findMapSize();
+ this._contentBounds = {
+ x: parseInt(this._$elem.css("padding-left")),
+ y: parseInt(this._$elem.css("padding-top")),
+ width: size["width"],
+ height: size["height"]
+ };
+
+ this._createChildren();
+
+ this._center = this._centerMax = [0, 0];
+
+ this.options["pixelSize"] = this._pixelSize = this._pixelSizeMax = 156543.03392799936;
+
+ this._mouseDown =
+ this._inOp =
+ this._toolPan =
+ this._shiftZoom =
+ this._panning =
+ this._isTap =
+ this._isDbltap = false;
+
+ this._anchor = [ 0, 0 ];
+ this._current = [ 0, 0 ];
+ this._lastMove = [ 0, 0 ];
+ this._lastDrag = [ 0, 0 ];
+ this._velocity = [ 0, 0 ];
+
+ this._friction = [.8, .8];
+
+ this._downDate =
+ this._moveDate =
+ this._clickDate = 0;
+
+ this._drawPixels = [];
+ this._drawCoords = [];
+ this._graphicShapes = [];
+
+
+ $.Widget.prototype._createWidget.apply(this, arguments);
+ },
+
+ _create: function () {
+ this._options = this.options;
+
+ if (this._$elem.is(".geo-service")) {
+ this._map = this._$elem.data( "geoMap" );
+ this._$shapesContainer.geographics( );
+ this._options["shapeStyle"] = this._$shapesContainer.geographics("option", "style");
+ return;
+ }
+
+ this._map = this;
+
+ this._supportTouch = "ontouchend" in document;
+ this._softDblClick = this._supportTouch || _ieVersion == 7;
+
+ var geomap = this,
+ touchStartEvent = this._supportTouch ? "touchstart" : "mousedown",
+ touchStopEvent = this._supportTouch ? "touchend touchcancel" : "mouseup",
+ touchMoveEvent = this._supportTouch ? "touchmove" : "mousemove";
+
+ $(document).keydown($.proxy(this._document_keydown, this));
+
+ this._$eventTarget.dblclick($.proxy(this._eventTarget_dblclick, this));
+
+ this._$eventTarget.bind(touchStartEvent, $.proxy(this._eventTarget_touchstart, this));
+
+ var dragTarget = (this._$eventTarget[0].setCapture) ? this._$eventTarget : $(document);
+ dragTarget.bind(touchMoveEvent, $.proxy(this._dragTarget_touchmove, this));
+ dragTarget.bind(touchStopEvent, $.proxy(this._dragTarget_touchstop, this));
+
+ this._$eventTarget.mousewheel($.proxy(this._eventTarget_mousewheel, this));
+
+ this._windowHandler = function () {
+ if (geomap._resizeTimeout) {
+ clearTimeout(geomap._resizeTimeout);
+ }
+ geomap._resizeTimeout = setTimeout(function () {
+ if (geomap._created) {
+ geomap._$elem.geomap("resize");
+ }
+ }, 500);
+ };
+
+ $(window).resize(this._windowHandler);
+
+ this._$drawContainer.geographics({ style: this._initOptions.drawStyle || {} });
+ this._options["drawStyle"] = this._$drawContainer.geographics("option", "style");
+
+ this._$shapesContainer.geographics( { style: this._initOptions.shapeStyle || { } } );
+ this._options["shapeStyle"] = this._$shapesContainer.geographics("option", "style");
+
+ if (this._initOptions) {
+ if (this._initOptions.tilingScheme) {
+ this._setOption("tilingScheme", this._initOptions.tilingScheme, false);
+ }
+ if ( this._initOptions.services ) {
+ // jQuery UI Widget Factory merges user services with our default, we want to clobber the default
+ this._options[ "services" ] = $.merge( [ ], this._initOptions.services );
+ }
+ if (this._initOptions.bbox) {
+ this._setOption("bbox", this._initOptions.bbox, false);
+ }
+ if (this._initOptions.center) {
+ this._setOption("center", this._initOptions.center, false);
+ }
+ if (this._initOptions.zoom !== undefined) {
+ this._setZoom(this._initOptions.zoom, false, false);
+ }
+ }
+
+ $.template( "geoMeasureLength", this._options[ "measureLabels" ].length );
+ $.template( "geoMeasureArea", this._options[ "measureLabels" ].area );
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+
+ this._createServices();
+ this._refresh();
+
+ this._created = true;
+ },
+
+ _setOption: function (key, value, refresh) {
+ if ( key == "pixelSize" ) {
+ return;
+ }
+
+ refresh = (refresh === undefined || refresh);
+
+ if ( this._$elem.is( ".geo-map" ) ) {
+ this._panFinalize();
+ }
+
+ switch (key) {
+ case "bbox":
+ this._userGeodetic = $.geo.proj && $.geo._isGeodetic( value );
+ if ( this._userGeodetic ) {
+ value = $.geo.proj.fromGeodetic( value );
+ }
+
+ this._setBbox(value, false, refresh);
+ value = this._getBbox();
+ break;
+
+ case "center":
+ this._userGeodetic = $.geo.proj && $.geo._isGeodetic( value );
+ if ( this._userGeodetic ) {
+ value = $.geo.proj.fromGeodetic( value );
+ }
+
+ this._setCenterAndSize( value, this._pixelSize, false, refresh );
+ break;
+
+ case "measureLabels":
+ value = $.extend( this._options[ "measureLabels" ], value );
+ $.template( "geoMeasureLength", value.length );
+ $.template( "geoMeasureArea", value.area );
+ break;
+
+ case "drawStyle":
+ if (this._$drawContainer) {
+ this._$drawContainer.geographics("option", "style", value);
+ value = this._$drawContainer.geographics("option", "style");
+ }
+ break;
+
+ case "shapeStyle":
+ if (this._$shapesContainer) {
+ this._$shapesContainer.geographics("option", "style", value);
+ value = this._$shapesContainer.geographics("option", "style");
+ }
+ break;
+
+ case "mode":
+ this._resetDrawing( );
+ this._$eventTarget.css("cursor", this._options["cursors"][value]);
+ break;
+
+ case "zoom":
+ this._setZoom(value, false, refresh);
+ break;
+ }
+
+ $.Widget.prototype._setOption.apply(this, arguments);
+
+ switch ( key ) {
+ case "bbox":
+ case "center":
+ if ( this._userGeodetic ) {
+ this._options[ "bbox" ] = $.geo.proj.toGeodetic( this._options[ "bbox" ] );
+ this._options[ "center" ] = $.geo.proj.toGeodetic( this._center );
+ }
+ break;
+
+ case "tilingScheme":
+ if ( value != null ) {
+ this._pixelSizeMax = this._getPixelSize( 0 );
+ this._centerMax = [
+ value.origin[ 0 ] + this._pixelSizeMax * value.tileWidth / 2,
+ value.origin[ 1 ] + this._pixelSizeMax * value.tileHeight / 2
+ ];
+ }
+ break;
+
+ case "bboxMax":
+ this._pixelSizeMax = this._getPixelSize( 0 );
+
+ if ( $.geo.proj && $.geo._isGeodetic( value ) ) {
+ this._centerMax = $.geo.center( $.geo.proj.fromGeodetic( value ) );
+ } else {
+ this._centerMax = $.geo.center( value );
+ }
+ break;
+
+ case "services":
+ this._createServices();
+ if (refresh) {
+ this._refresh();
+ }
+ break;
+
+ case "shapeStyle":
+ if ( refresh ) {
+ this._$shapesContainer.geographics("clear");
+ this._refreshShapes( this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes );
+ }
+ break;
+ }
+ },
+
+ destroy: function () {
+ if ( this._$elem.is(".geo-service") ) {
+ this._$shapesContainer.geographics("destroy");
+ this._$shapesContainer = undefined;
+ } else {
+ this._created = false;
+
+ $(window).unbind("resize", this._windowHandler);
+
+ for ( var i = 0; i < this._currentServices.length; i++ ) {
+ this._currentServices[ i ].serviceContainer.geomap("destroy");
+ $.geo["_serviceTypes"][this._currentServices[i].type].destroy(this, this._$servicesContainer, this._currentServices[i]);
+ }
+
+ this._$shapesContainer.geographics("destroy");
+ this._$shapesContainer = undefined;
+ this._$drawContainer.geographics("destroy");
+ this._$drawContainer = undefined;
+
+ this._$existingChildren.detach();
+ this._$elem.html("");
+ this._$elem.append(this._$existingChildren);
+ this._$elem.removeClass("geo-map");
+ }
+
+ $.Widget.prototype.destroy.apply(this, arguments);
+ },
+
+ toMap: function (p) {
+ p = this._toMap(p);
+ return this._userGeodetic ? $.geo.proj.toGeodetic(p) : p;
+ },
+
+ toPixel: function ( p, _center /* Internal Use Only */, _pixelSize /* Internal Use Only */ ) {
+ return this._toPixel( $.geo.proj ? $.geo.proj.fromGeodetic( p ) : p, _center, _pixelSize );
+ },
+
+ opacity: function ( value, _serviceContainer ) {
+ if ( this._$elem.is( ".geo-service" ) ) {
+ this._$elem.closest( ".geo-map" ).geomap( "opacity", value, this._$elem );
+ } else {
+ if ( value >= 0 || value <= 1 ) {
+ for ( var i = 0; i < this._currentServices.length; i++ ) {
+ var service = this._currentServices[ i ];
+ if ( !_serviceContainer || service.serviceContainer[ 0 ] == _serviceContainer[ 0 ] ) {
+ service.style.opacity = value;
+ $.geo[ "_serviceTypes" ][ service.type ].opacity( this, service );
+ }
+ }
+ }
+ }
+ },
+
+ toggle: function ( value, _serviceContainer ) {
+ if ( this._$elem.is( ".geo-service" ) ) {
+ this._$elem.closest( ".geo-map" ).geomap( "toggle", value, this._$elem );
+ } else {
+
+ for ( var i = 0; i < this._currentServices.length; i++ ) {
+ var service = this._currentServices[ i ];
+
+ if ( !_serviceContainer || service.serviceContainer[ 0 ] == _serviceContainer[ 0 ] ) {
+ if ( value === undefined ) {
+ // toggle visibility
+ value = ( service.style.visibility !== "visible" );
+ }
+
+ service.style.visibility = ( value ? "visible" : "hidden" );
+
+ service.serviceContainer.toggle( value );
+
+ if ( value ) {
+ $.geo[ "_serviceTypes" ][ service.type ].refresh( this, service );
+ }
+ }
+ }
+ }
+ },
+
+ zoom: function (numberOfLevels) {
+ if (numberOfLevels != null) {
+ this._setZoom(this._options["zoom"] + numberOfLevels, false, true);
+ }
+ },
+
+ refresh: function () {
+ this._refresh();
+ },
+
+ resize: function () {
+ var size = this._findMapSize(),
+ dx = size["width"]/2 - this._contentBounds.width/2,
+ dy = size["height"]/2 - this._contentBounds.height/2,
+ i;
+
+ this._contentBounds = {
+ x: parseInt(this._$elem.css("padding-left")),
+ y: parseInt(this._$elem.css("padding-top")),
+ width: size["width"],
+ height: size["height"]
+ };
+
+ this._$resizeContainer.css( {
+ width: size["width"],
+ height: size["height"]
+ } );
+
+ for (i = 0; i < this._currentServices.length; i++) {
+ $.geo["_serviceTypes"][this._currentServices[i].type].resize(this, this._currentServices[i]);
+ }
+
+ this._$elem.find( ".geo-graphics" ).css( {
+ width: size["width"],
+ height: size["height"]
+ }).geographics( "resize" );
+
+ for (i = 0; i < this._drawPixels.length; i++) {
+ this._drawPixels[i][0] += dx;
+ this._drawPixels[i][1] += dy;
+ }
+
+ this._setCenterAndSize(this._center, this._pixelSize, false, true);
+ },
+
+ append: function ( shape, style, label, refresh ) {
+ if ( shape && $.isPlainObject( shape ) ) {
+ var shapes, arg, i, realStyle, realLabel, realRefresh;
+
+ if ( shape.type == "FeatureCollection" ) {
+ shapes = shape.features;
+ } else {
+ shapes = $.isArray( shape ) ? shape : [ shape ];
+ }
+
+ for ( i = 1; i < arguments.length; i++ ) {
+ arg = arguments[ i ];
+
+ if ( typeof arg === "object" ) {
+ realStyle = arg;
+ } else if ( typeof arg === "number" || typeof arg === "string" ) {
+ realLabel = arg;
+ } else if ( typeof arg === "boolean" ) {
+ realRefresh = arg;
+ }
+ }
+
+ for ( i = 0; i < shapes.length; i++ ) {
+ if ( shapes[ i ].type != "Point" ) {
+ var bbox = $.geo.bbox( shapes[ i ] );
+ if ( $.geo.proj && $.geo._isGeodetic( bbox ) ) {
+ bbox = $.geo.proj.fromGeodetic( bbox );
+ }
+ $.data( shapes[ i ], "geoBbox", bbox );
+ }
+
+ this._graphicShapes.push( {
+ shape: shapes[ i ],
+ style: realStyle,
+ label: realLabel
+ } );
+ }
+
+ if ( realRefresh === undefined || realRefresh ) {
+ this._refresh( );
+ }
+ }
+ },
+
+ empty: function ( refresh ) {
+ for ( var i = 0; i < this._graphicShapes.length; i++ ) {
+ $.removeData( this._graphicShapes[ i ].shape, "geoBbox" );
+ }
+
+ this._graphicShapes = [];
+
+ if ( refresh === undefined || refresh ) {
+ this._refresh();
+ }
+ },
+
+ find: function ( selector, pixelTolerance ) {
+ var isPoint = $.isPlainObject( selector ),
+ searchPixel = isPoint ? this._map.toPixel( selector.coordinates ) : undefined,
+ mapTol = this._map._pixelSize * pixelTolerance,
+ result = [],
+ graphicShape,
+ geometries,
+ curGeom,
+ i = 0;
+
+ for ( ; i < this._graphicShapes.length; i++ ) {
+ graphicShape = this._graphicShapes[ i ];
+
+ if ( isPoint ) {
+ if ( graphicShape.shape.type == "Point" ) {
+ if ( $.geo.distance( graphicShape.shape, selector ) <= mapTol ) {
+ result.push( graphicShape.shape );
+ }
+ } else {
+ var bbox = $.data( graphicShape.shape, "geoBbox" ),
+ bboxPolygon = {
+ type: "Polygon",
+ coordinates: [ [
+ [bbox[0], bbox[1]],
+ [bbox[0], bbox[3]],
+ [bbox[2], bbox[3]],
+ [bbox[2], bbox[1]],
+ [bbox[0], bbox[1]]
+ ] ]
+ },
+ projectedPoint = {
+ type: "Point",
+ coordinates: $.geo.proj && $.geo._isGeodetic( selector.coordinates ) ? $.geo.proj.fromGeodetic( selector.coordinates ) : selector.coordinates
+ };
+
+ if ( $.geo.distance( bboxPolygon, projectedPoint, true ) <= mapTol ) {
+ geometries = $.geo._flatten( graphicShape.shape );
+ for ( curGeom = 0; curGeom < geometries.length; curGeom++ ) {
+ if ( $.geo.distance( geometries[ curGeom ], selector ) <= mapTol ) {
+ result.push( graphicShape.shape );
+ break;
+ }
+ }
+ }
+ }
+ } else {
+ result.push( graphicShape.shape );
+ }
+ }
+
+ if ( this._$elem.is( ".geo-map" ) ) {
+ this._$elem.find( ".geo-service" ).each( function( ) {
+ result = $.merge( result, $( this ).geomap( "find", selector, pixelTolerance ) );
+ } );
+ }
+
+ return result;
+ },
+
+ remove: function ( shape, refresh ) {
+ for ( var i = 0; i < this._graphicShapes.length; i++ ) {
+ if ( this._graphicShapes[ i ].shape == shape ) {
+ $.removeData( shape, "geoBbox" );
+ var rest = this._graphicShapes.slice( i + 1 );
+ this._graphicShapes.length = i;
+ this._graphicShapes.push.apply( this._graphicShapes, rest );
+ break;
+ }
+ }
+
+ if ( refresh === undefined || refresh ) {
+ this._refresh();
+ }
+ },
+
+ _getBbox: function (center, pixelSize) {
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ // calculate the internal bbox
+ var halfWidth = this._contentBounds[ "width" ] / 2 * pixelSize,
+ halfHeight = this._contentBounds[ "height" ] / 2 * pixelSize;
+ return [ center[ 0 ] - halfWidth, center[ 1 ] - halfHeight, center[ 0 ] + halfWidth, center[ 1 ] + halfHeight ];
+ },
+
+ _setBbox: function (value, trigger, refresh) {
+ var center = [value[0] + (value[2] - value[0]) / 2, value[1] + (value[3] - value[1]) / 2],
+ pixelSize = Math.max($.geo.width(value, true) / this._contentBounds.width, $.geo.height(value, true) / this._contentBounds.height);
+
+ if (this._options["tilingScheme"]) {
+ var zoom = this._getZoom( center, pixelSize );
+ pixelSize = this._getPixelSize( zoom );
+ } else {
+ if ( this._getZoom( center, pixelSize ) < 0 ) {
+ pixelSize = this._pixelSizeMax;
+ }
+ }
+
+ this._setCenterAndSize(center, pixelSize, trigger, refresh);
+ },
+
+ _getBboxMax: function () {
+ // calculate the internal bboxMax
+ var halfWidth = this._contentBounds["width"] / 2 * this._pixelSizeMax,
+ halfHeight = this._contentBounds["height"] / 2 * this._pixelSizeMax;
+ return [this._centerMax[0] - halfWidth, this._centerMax[1] - halfHeight, this._centerMax[0] + halfWidth, this._centerMax[1] + halfHeight];
+ },
+
+ _getCenter: function () {
+ return this._center;
+ },
+
+ _getContentBounds: function () {
+ return this._contentBounds;
+ },
+
+ _getServicesContainer: function () {
+ return this._$servicesContainer;
+ },
+
+ _getZoom: function ( center, pixelSize ) {
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ // calculate the internal zoom level, vs. public zoom property
+ var tilingScheme = this._options["tilingScheme"];
+ if ( tilingScheme ) {
+ if ( tilingScheme.pixelSizes != null ) {
+ var roundedPixelSize = Math.floor(pixelSize * 1000),
+ levels = tilingScheme.pixelSizes.length,
+ i = levels - 1;
+
+ for ( ; i >= 0; i-- ) {
+ if ( Math.floor( tilingScheme.pixelSizes[ i ] * 1000 ) >= roundedPixelSize ) {
+ return i;
+ }
+ }
+
+ return 0;
+ } else {
+ return Math.max( Math.round( Math.log( tilingScheme.basePixelSize / pixelSize) / Math.log( 2 ) ), 0 );
+ }
+ } else {
+ var ratio = this._contentBounds["width"] / this._contentBounds["height"],
+ bbox = $.geo.reaspect( this._getBbox( center, pixelSize ), ratio, true ),
+ bboxMax = $.geo.reaspect(this._getBboxMax(), ratio, true);
+
+ return Math.max( Math.round( Math.log($.geo.width(bboxMax, true) / $.geo.width(bbox, true)) / Math.log(this._zoomFactor) ), 0 );
+ }
+ },
+
+ _setZoom: function ( value, trigger, refresh ) {
+ value = Math.max( value, 0 );
+
+ this._setCenterAndSize( this._center, this._getPixelSize( value ), trigger, refresh );
+ },
+
+ _createChildren: function () {
+ this._$existingChildren = this._$elem.children().detach();
+
+ this._forcePosition(this._$existingChildren);
+
+ this._$existingChildren.css("-moz-user-select", "none");
+
+ var contentSizeCss = "width:" + this._contentBounds["width"] + "px; height:" + this._contentBounds["height"] + "px; margin:0; padding:0;",
+ contentPosCss = "position:absolute; left:0; top:0;";
+
+ this._$elem.prepend('<div class="geo-event-target geo-content-frame" style="position:absolute; left:' + this._contentBounds.x + 'px; top:' + this._contentBounds.y + 'px;' + contentSizeCss + 'overflow:hidden; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none;" unselectable="on"></div>');
+ this._$eventTarget = this._$contentFrame = this._$elem.children(':first');
+
+ this._$contentFrame.append('<div class="geo-services-container" style="' + contentPosCss + contentSizeCss + '"></div>');
+ this._$servicesContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append('<div class="geo-shapes-container" style="' + contentPosCss + contentSizeCss + '"></div>');
+ this._$shapesContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append( '<ul style="position: absolute; bottom: 8px; left: 8px; list-style-type: none; max-width: 50%; padding: 0; margin: 0;"></ul>' );
+ this._$attrList = this._$contentFrame.children( ":last" );
+
+ this._$contentFrame.append('<div class="geo-draw-container" style="' + contentPosCss + contentSizeCss + '"></div>');
+ this._$drawContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append('<div class="geo-measure-container" style="' + contentPosCss + contentSizeCss + '"><div class="geo-measure-label" style="' + contentPosCss + '; display: none;"></div></div>');
+ this._$measureContainer = this._$contentFrame.children(':last');
+ this._$measureLabel = this._$measureContainer.children();
+
+ this._$panContainer = $( [ this._$shapesContainer[ 0 ], this._$drawContainer[ 0 ], this._$measureContainer[ 0 ] ] );
+
+ this._$resizeContainer = $( [ this._$contentFrame[ 0 ], this._$servicesContainer[ 0 ], this._$eventTarget[ 0 ], this._$measureContainer[ 0 ] ] );
+
+ this._$contentFrame.append(this._$existingChildren);
+
+ if ( ! $("#geo-measure-style").length ) {
+ $("head").prepend( '<style type="text/css" id="geo-measure-style">.geo-measure-label { margin: 4px 0 0 6px; font-family: sans-serif;' + ( _ieVersion ? 'letter-spacing: 2px; color: #444; filter:progid:DXImageTransform.Microsoft.DropShadow(Color=white, OffX=1, OffY=2, Positive=true);' : 'color: #000; text-shadow: #fff 1px 2px; font-weight: bold;' ) + ' }</style>' );
+ }
+ },
+
+ _createServices: function () {
+ var service, i;
+
+ for ( i = 0; i < this._currentServices.length; i++ ) {
+ this._currentServices[ i ].serviceContainer.geomap( "destroy" );
+ $.geo[ "_serviceTypes" ][ this._currentServices[ i ].type ].destroy( this, this._$servicesContainer, this._currentServices[ i ] );
+ }
+
+ this._currentServices = [ ];
+ this._$servicesContainer.html( "" );
+ this._$attrList.html( "" );
+
+ for ( i = 0; i < this._options[ "services" ].length; i++ ) {
+ service = this._currentServices[ i ] = $.extend( { }, this._options[ "services" ][ i ] );
+
+ // default the service style property on our copy
+ service.style = $.extend( {
+ visibility: "visible",
+ opacity: 1
+ }, service.style );
+
+ var idString = service.id ? ' id="' + service.id + '"' : "",
+ classString = 'class="geo-service ' + ( service["class"] ? service["class"] : '' ) + '"',
+ scHtml = '<div ' + idString + classString + ' style="position:absolute; left:0; top:0; width:32px; height:32px; margin:0; padding:0; display:' + ( service.style.visibility === "visible" ? "block" : "none" ) + ';"></div>',
+ servicesContainer;
+
+ this._$servicesContainer.append( scHtml );
+ serviceContainer = this._$servicesContainer.children( ":last" );
+ this._currentServices[ i ].serviceContainer = serviceContainer;
+
+ $.geo[ "_serviceTypes" ][ service.type ].create( this, serviceContainer, service, i );
+
+ serviceContainer.data( "geoMap", this ).geomap();
+
+ if ( service.attr ) {
+ this._$attrList.append( '<li>' + service.attr + '</li>' );
+ }
+ }
+
+ this._$attrList.find( "a" ).css( {
+ position: "relative",
+ zIndex: 100
+ } );
+ },
+
+ _refreshDrawing: function ( ) {
+ this._$drawContainer.geographics("clear");
+
+ if ( this._drawPixels.length > 0 ) {
+ var mode = this._options[ "mode" ],
+ pixels = this._drawPixels,
+ coords = this._drawCoords,
+ label,
+ labelShape,
+ labelPixel,
+ widthOver,
+ heightOver;
+
+ switch ( mode ) {
+ case "measureLength":
+ mode = "drawLineString";
+ labelShape = {
+ type: "LineString",
+ coordinates: coords
+ };
+ label = $.render( { length: $.geo.length( labelShape, true ) }, "geoMeasureLength" );
+ labelPixel = $.merge( [], pixels[ pixels.length - 1 ] );
+ break;
+
+ case "measureArea":
+ mode = "drawPolygon";
+
+ labelShape = {
+ type: "Polygon",
+ coordinates: [ $.merge( [ ], coords ) ]
+ };
+ labelShape.coordinates[ 0 ].push( coords[ 0 ] );
+
+ label = $.render( { area: $.geo.area( labelShape, true ) }, "geoMeasureArea" );
+ labelPixel = $.merge( [], pixels[ pixels.length - 1 ] );
+ pixels = [ pixels ];
+ break;
+
+ case "drawPolygon":
+ pixels = [ pixels ];
+ break;
+ }
+
+ this._$drawContainer.geographics( mode, pixels );
+
+ if ( label ) {
+ this._$measureLabel.html( label );
+
+ widthOver = this._contentBounds.width - ( this._$measureLabel.outerWidth( true ) + labelPixel[ 0 ] );
+ heightOver = this._contentBounds.height - ( this._$measureLabel.outerHeight( true ) + labelPixel[ 1 ] );
+
+ if ( widthOver < 0 ) {
+ labelPixel[ 0 ] += widthOver;
+ }
+
+ if ( heightOver < 0 ) {
+ labelPixel[ 1 ] += heightOver;
+ }
+
+ this._$measureLabel.css( {
+ left: labelPixel[ 0 ],
+ top: labelPixel[ 1 ]
+ } ).show();
+ }
+ }
+ },
+
+ _resetDrawing: function () {
+ this._drawPixels = [];
+ this._drawCoords = [];
+ this._$drawContainer.geographics("clear");
+ this._$measureLabel.hide();
+ },
+
+ _refreshShapes: function (geographics, shapes, styles, labels, center, pixelSize) {
+ var i, mgi,
+ shape,
+ shapeBbox,
+ style,
+ label,
+ hasLabel,
+ labelPixel,
+ bbox = this._map._getBbox(center, pixelSize);
+
+ for (i = 0; i < shapes.length; i++) {
+ shape = shapes[i].shape || shapes[i];
+ shape = shape.geometry || shape;
+ shapeBbox = $.data(shape, "geoBbox");
+
+ if ( shapeBbox && $.geo._bboxDisjoint( bbox, shapeBbox ) ) {
+ continue;
+ }
+
+ style = $.isArray(styles) ? styles[i].style : styles;
+ label = $.isArray(labels) ? labels[i].label : labels;
+ hasLabel = ( label !== undefined );
+ labelPixel = undefined;
+
+ switch (shape.type) {
+ case "Point":
+ labelPixel = this._map.toPixel( shape.coordinates, center, pixelSize );
+ this._$shapesContainer.geographics("drawPoint", labelPixel, style);
+ break;
+ case "LineString":
+ this._$shapesContainer.geographics("drawLineString", this._map.toPixel(shape.coordinates, center, pixelSize), style);
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.pointAlong( shape, .5 ).coordinates, center, pixelSize );
+ }
+ break;
+ case "Polygon":
+ this._$shapesContainer.geographics("drawPolygon", this._map.toPixel(shape.coordinates, center, pixelSize), style);
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+ case "MultiPoint":
+ for (mgi = 0; mgi < shape.coordinates.length; mgi++) {
+ this._$shapesContainer.geographics("drawPoint", this._map.toPixel(shape.coordinates[mgi], center, pixelSize), style);
+ }
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+ case "MultiLineString":
+ for (mgi = 0; mgi < shape.coordinates.length; mgi++) {
+ this._$shapesContainer.geographics("drawLineString", this._map.toPixel(shape.coordinates[mgi], center, pixelSize), style);
+ }
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+ case "MultiPolygon":
+ for (mgi = 0; mgi < shape.coordinates.length; mgi++) {
+ this._$shapesContainer.geographics("drawPolygon", this._map.toPixel(shape.coordinates[mgi], center, pixelSize), style);
+ }
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+
+ case "GeometryCollection":
+ this._refreshShapes(geographics, shape.geometries, style, label, center, pixelSize);
+ break;
+ }
+
+ if ( hasLabel && labelPixel ) {
+ this._$shapesContainer.geographics( "drawLabel", labelPixel, label );
+ }
+ }
+ },
+
+ _findMapSize: function () {
+ // really, really attempt to find a size for this thing
+ // even if it's hidden (look at parents)
+ var size = { width: 0, height: 0 },
+ sizeContainer = this._$elem;
+
+ while (sizeContainer.size() && !(size["width"] > 0 && size["height"] > 0)) {
+ size = { width: sizeContainer.width(), height: sizeContainer.height() };
+ if (size["width"] <= 0 || size["height"] <= 0) {
+ size = { width: parseInt(sizeContainer.css("width")), height: parseInt(sizeContainer.css("height")) };
+ }
+ sizeContainer = sizeContainer.parent();
+ }
+ return size;
+ },
+
+ _forcePosition: function (elem) {
+ var cssPosition = elem.css("position");
+ if (cssPosition != "relative" && cssPosition != "absolute" && cssPosition != "fixed") {
+ elem.css("position", "relative");
+ }
+ },
+
+ _getPixelSize: function ( zoom ) {
+ var tilingScheme = this._options["tilingScheme"];
+ if (tilingScheme != null) {
+ if (zoom === 0) {
+ return tilingScheme.pixelSizes != null ? tilingScheme.pixelSizes[0] : tilingScheme.basePixelSize;
+ }
+
+ zoom = Math.round(zoom);
+ zoom = Math.max(zoom, 0);
+ var levels = tilingScheme.pixelSizes != null ? tilingScheme.pixelSizes.length : tilingScheme.levels;
+ zoom = Math.min(zoom, levels - 1);
+
+ if (tilingScheme.pixelSizes != null) {
+ return tilingScheme.pixelSizes[zoom];
+ } else {
+ return tilingScheme.basePixelSize / Math.pow(2, zoom);
+ }
+ } else {
+ var bbox = $.geo.scaleBy( this._getBboxMax(), 1 / Math.pow( this._zoomFactor, zoom ), true );
+ return Math.max( $.geo.width( bbox, true ) / this._contentBounds.width, $.geo.height( bbox, true ) / this._contentBounds.height );
+ }
+ },
+
+ _getZoomCenterAndSize: function ( anchor, zoomDelta, full ) {
+ var zoomFactor = ( full ? this._fullZoomFactor : this._partialZoomFactor ),
+ scale = Math.pow( zoomFactor, -zoomDelta ),
+ pixelSize,
+ zoomLevel;
+
+ if ( this._options[ "tilingScheme" ] ) {
+ zoomLevel = this._getZoom(this._center, this._pixelSize * scale);
+ pixelSize = this._getPixelSize(zoomLevel);
+ } else {
+ pixelSize = this._pixelSize * scale;
+
+ if ( this._getZoom( this._center, pixelSize ) < 0 ) {
+ pixelSize = this._pixelSizeMax;
+ }
+ }
+
+ var ratio = pixelSize / this._pixelSize,
+ anchorMapCoord = this._toMap(anchor),
+ centerDelta = [(this._center[0] - anchorMapCoord[0]) * ratio, (this._center[1] - anchorMapCoord[1]) * ratio],
+ scaleCenter = [anchorMapCoord[0] + centerDelta[0], anchorMapCoord[1] + centerDelta[1]];
+
+ return { pixelSize: pixelSize, center: scaleCenter };
+ },
+
+ _mouseWheelFinish: function () {
+ this._wheelTimeout = null;
+
+ if (this._wheelLevel != 0) {
+ var wheelCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, this._options[ "tilingScheme" ] != null );
+
+ this._setCenterAndSize(wheelCenterAndSize.center, wheelCenterAndSize.pixelSize, true, true);
+
+ this._wheelLevel = 0;
+ } else {
+ this._refresh();
+ }
+ },
+
+ _panEnd: function () {
+ this._velocity = [
+ (this._velocity[0] > 0 ? Math.floor(this._velocity[0] * this._friction[0]) : Math.ceil(this._velocity[0] * this._friction[0])),
+ (this._velocity[1] > 0 ? Math.floor(this._velocity[1] * this._friction[1]) : Math.ceil(this._velocity[1] * this._friction[1]))
+ ];
+
+ if (Math.abs(this._velocity[0]) < 4 && Math.abs(this._velocity[1]) < 4) {
+ this._panFinalize();
+ } else {
+ this._current = [
+ this._current[0] + this._velocity[0],
+ this._current[1] + this._velocity[1]
+ ];
+
+ this._panMove();
+ setTimeout($.proxy(this._panEnd, this), 30);
+ }
+ },
+
+ _panFinalize: function () {
+ if (this._panning) {
+ this._velocity = [0, 0];
+
+ var dx = this._current[0] - this._anchor[0],
+ dy = this._current[1] - this._anchor[1],
+ image = this._options[ "axisLayout" ] === "image",
+ dxMap = -dx * this._pixelSize,
+ dyMap = ( image ? -1 : 1 ) * dy * this._pixelSize;
+
+ this._$panContainer.css({ left: 0, top: 0 });
+
+ this._$servicesContainer.find( ".geo-shapes-container" ).css( { left: 0, top: 0 } );
+
+ this._setCenterAndSize([this._center[0] + dxMap, this._center[1] + dyMap], this._pixelSize, true, true);
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+
+ this._inOp = false;
+ this._anchor = this._current;
+ this._mouseDown = this._toolPan = this._panning = false;
+ }
+ },
+
+ _panMove: function () {
+ if ( ! this._options[ "pannable" ] ) {
+ return;
+ }
+
+ var dx = this._current[0] - this._lastDrag[0],
+ dy = this._current[1] - this._lastDrag[1],
+ i = 0,
+ service,
+ translateObj;
+
+ if (this._toolPan || dx > 3 || dx < -3 || dy > 3 || dy < -3) {
+ if (!this._toolPan) {
+ this._toolPan = true;
+ this._$eventTarget.css("cursor", this._options["cursors"]["pan"]);
+ }
+
+ if (this._mouseDown) {
+ this._velocity = [dx, dy];
+ }
+
+ if (dx != 0 || dy != 0) {
+ this._panning = true;
+ this._lastDrag = this._current;
+
+ translateObj = {
+ left: function (index, value) {
+ return parseInt(value) + dx;
+ },
+ top: function (index, value) {
+ return parseInt(value) + dy;
+ }
+ };
+
+ for ( i = 0; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+ $.geo[ "_serviceTypes" ][ service.type ].interactivePan( this, service, dx, dy );
+
+ service.serviceContainer.find( ".geo-shapes-container" ).css( translateObj );
+ }
+
+ this._$panContainer.css( translateObj );
+
+ //this._refreshDrawing();
+ }
+ }
+ },
+
+ _refresh: function () {
+ var service,
+ i = 0;
+
+ if ( this._$elem.is( ".geo-map" ) ) {
+ for ( ; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+
+ if ( !this._mouseDown && $.geo[ "_serviceTypes" ][ service.type ] !== null ) {
+ $.geo[ "_serviceTypes" ][ service.type ].refresh( this, service );
+ service.serviceContainer.geomap( "refresh" );
+ }
+ }
+ }
+
+ if ( this._$shapesContainer ) {
+ this._$shapesContainer.geographics( "clear" );
+ if ( this._graphicShapes.length > 0 ) {
+ this._refreshShapes( this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes );
+ }
+ }
+ },
+
+ _setCenterAndSize: function (center, pixelSize, trigger, refresh) {
+ if ( ! $.isArray( center ) || center.length != 2 || typeof center[ 0 ] !== "number" || typeof center[ 1 ] !== "number" ) {
+ return;
+ }
+
+ // the final call during any extent change
+ if (this._pixelSize != pixelSize) {
+ this._$elem.find( ".geo-shapes-container" ).geographics("clear");
+ for (var i = 0; i < this._currentServices.length; i++) {
+ var service = this._currentServices[i];
+ $.geo["_serviceTypes"][service.type].interactiveScale(this, service, center, pixelSize);
+ }
+ }
+
+ this._center = $.merge( [ ], center );
+ this._options["pixelSize"] = this._pixelSize = pixelSize;
+
+ if ( this._userGeodetic ) {
+ this._options["bbox"] = $.geo.proj.toGeodetic( this._getBbox() );
+ this._options["center"] = $.geo.proj.toGeodetic( this._center );
+ } else {
+ this._options["bbox"] = this._getBbox();
+ this._options["center"] = $.merge( [ ], center );
+ }
+
+ this._options["zoom"] = this._getZoom();
+
+ if (this._drawCoords.length > 0) {
+ this._drawPixels = this._toPixel(this._drawCoords);
+ }
+
+ if (trigger) {
+ this._trigger("bboxchange", window.event, { bbox: $.merge( [ ], this._options["bbox"] ) });
+ }
+
+ if (refresh) {
+ this._refresh();
+ this._refreshDrawing();
+ }
+ },
+
+ _toMap: function (p, center, pixelSize) {
+ // ignores $.geo.proj
+
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ var isMultiPointOrLineString = $.isArray( p[ 0 ] ),
+ isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray( p[ 0 ][ 0 ] ),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray( p[ 0 ][ 0 ][ 0 ] ),
+ width = this._contentBounds["width"],
+ height = this._contentBounds["height"],
+ halfWidth = width / 2 * pixelSize,
+ halfHeight = height / 2 * pixelSize,
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight],
+ xRatio = $.geo.width(bbox, true) / width,
+ yRatio = $.geo.height(bbox, true) / height,
+ yOffset,
+ image = this._options[ "axisLayout" ] === "image",
+ result = [],
+ i, j, k;
+
+ if ( !isMultiPolygon ) {
+ if ( !isMultiLineStringOrPolygon ) {
+ if ( !isMultiPointOrLineString ) {
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+
+ for ( i = 0; i < p.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < p[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < p[ i ][ j ].length; k++ ) {
+ yOffset = (p[ i ][ j ][ k ][1] * yRatio);
+ result[ i ][ j ][ k ] = [
+ bbox[ 0 ] + ( p[ i ][ j ][ k ][ 0 ] * xRatio ),
+ image ? bbox[ 1 ] + yOffset : bbox[ 3 ] - yOffset
+ ];
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ },
+
+ _toPixel: function (p, center, pixelSize) {
+ // ignores $.geo.proj
+
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ var isMultiPointOrLineString = $.isArray( p[ 0 ] ),
+ isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray( p[ 0 ][ 0 ] ),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray( p[ 0 ][ 0 ][ 0 ] ),
+ width = this._contentBounds["width"],
+ height = this._contentBounds["height"],
+ halfWidth = width / 2 * pixelSize,
+ halfHeight = height / 2 * pixelSize,
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight],
+ bboxWidth = $.geo.width(bbox, true),
+ bboxHeight = $.geo.height(bbox, true),
+ image = this._options[ "axisLayout" ] === "image",
+ xRatio = width / bboxWidth,
+ yRatio = height / bboxHeight,
+ result = [ ],
+ i, j, k;
+
+ if ( !isMultiPolygon ) {
+ if ( !isMultiLineStringOrPolygon ) {
+ if ( !isMultiPointOrLineString ) {
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+
+ for ( i = 0; i < p.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < p[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < p[ i ][ j ].length; k++ ) {
+ result[ i ][ j ][ k ] = [
+ Math.round( ( p[ i ][ j ][ k ][ 0 ] - bbox[ 0 ] ) * xRatio ),
+ Math.round( ( image ? p[ i ][ j ][ k ][ 1 ] - bbox[ 1 ] : bbox[ 3 ] - p[ i ][ j ][ k ][ 1 ] ) * yRatio )
+ ];
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ },
+
+ _zoomTo: function (coord, zoom, trigger, refresh) {
+ zoom = zoom < 0 ? 0 : zoom;
+
+ var pixelSize = this._getPixelSize( zoom );
+
+ this._setCenterAndSize( coord, pixelSize, trigger, refresh );
+ },
+
+ _document_keydown: function (e) {
+ var len = this._drawCoords.length;
+ if (len > 0 && e.which == 27) {
+ if (len <= 2) {
+ this._resetDrawing();
+ this._inOp = false;
+ } else {
+ this._drawCoords[len - 2] = $.merge( [], this._drawCoords[ len - 1 ] );
+ this._drawPixels[len - 2] = $.merge( [], this._drawPixels[ len - 1 ] );
+
+ this._drawCoords.length--;
+ this._drawPixels.length--;
+
+ this._refreshDrawing();
+ }
+ }
+ },
+
+ _eventTarget_dblclick_zoom: function(e) {
+ this._trigger("dblclick", e, { type: "Point", coordinates: this.toMap(this._current) });
+ if (!e.isDefaultPrevented()) {
+ var centerAndSize = this._getZoomCenterAndSize(this._current, 1, true );
+ this._setCenterAndSize(centerAndSize.center, centerAndSize.pixelSize, true, true);
+ }
+ },
+
+ _eventTarget_dblclick: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ this._panFinalize();
+
+ if (this._drawTimeout) {
+ window.clearTimeout(this._drawTimeout);
+ this._drawTimeout = null;
+ }
+
+ var offset = $(e.currentTarget).offset();
+
+ switch (this._options["mode"]) {
+ case "drawLineString":
+ if ( this._drawCoords.length > 1 && ! ( this._drawCoords[0][0] == this._drawCoords[1][0] &&
+ this._drawCoords[0][1] == this._drawCoords[1][1] ) ) {
+ this._drawCoords.length--;
+ this._trigger( "shape", e, {
+ type: "LineString",
+ coordinates: this._userGeodetic ? $.geo.proj.toGeodetic(this._drawCoords) : this._drawCoords
+ } );
+ } else {
+ this._eventTarget_dblclick_zoom(e);
+ }
+ this._resetDrawing();
+ break;
+
+ case "drawPolygon":
+ if ( this._drawCoords.length > 1 && ! ( this._drawCoords[0][0] == this._drawCoords[1][0] &&
+ this._drawCoords[0][1] == this._drawCoords[1][1] ) ) {
+ var endIndex = this._drawCoords.length - 1;
+ if (endIndex > 2) {
+ this._drawCoords[endIndex] = $.merge( [], this._drawCoords[0] );
+ this._trigger( "shape", e, {
+ type: "Polygon",
+ coordinates: [ this._userGeodetic ? $.geo.proj.toGeodetic(this._drawCoords) : this._drawCoords ]
+ } );
+ }
+ } else {
+ this._eventTarget_dblclick_zoom(e);
+ }
+ this._resetDrawing();
+ break;
+
+ case "measureLength":
+ case "measureArea":
+ this._resetDrawing();
+ break;
+
+ default:
+ this._eventTarget_dblclick_zoom(e);
+ break;
+ }
+
+ this._inOp = false;
+ },
+
+ _eventTarget_touchstart: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ if ( !this._supportTouch && e.which != 1 ) {
+ return;
+ }
+
+ this._panFinalize();
+ this._mouseWheelFinish();
+
+ var offset = $(e.currentTarget).offset(),
+ touches = e.originalEvent.changedTouches;
+
+ if ( this._supportTouch ) {
+ this._multiTouchAnchor = $.merge( [ ], touches );
+
+ this._isMultiTouch = this._multiTouchAnchor.length > 1;
+
+ if ( this._isMultiTouch ) {
+ this._multiTouchCurrentBbox = [
+ touches[0].pageX - offset.left,
+ touches[0].pageY - offset.top,
+ touches[1].pageX - offset.left,
+ touches[1].pageY - offset.top
+ ];
+
+ this._multiTouchAnchorBbox = $.merge( [ ], this._multiTouchCurrentBbox );
+
+ this._current = $.geo.center( this._multiTouchCurrentBbox, true );
+ } else {
+ this._multiTouchCurrentBbox = [
+ touches[0].pageX - offset.left,
+ touches[0].pageY - offset.top,
+ NaN,
+ NaN
+ ];
+
+ this._current = [ touches[0].pageX - offset.left, touches[0].pageY - offset.top ];
+ }
+ } else {
+ this._current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ if (this._softDblClick) {
+ var downDate = $.now();
+ if (downDate - this._downDate < 750) {
+ if (this._isTap) {
+ var dx = this._current[0] - this._anchor[0],
+ dy = this._current[1] - this._anchor[1],
+ distance = Math.sqrt((dx * dx) + (dy * dy));
+ if (distance > 8) {
+ this._isTap = false;
+ } else {
+ this._current = $.merge( [ ], this._anchor );
+ }
+ }
+
+ if (this._isDbltap) {
+ this._isDbltap = false;
+ } else {
+ this._isDbltap = this._isTap;
+ }
+ } else {
+ this._isDbltap = false;
+ }
+ this._isTap = true;
+ this._downDate = downDate;
+ }
+
+ this._mouseDown = true;
+ this._anchor = $.merge( [ ], this._current );
+
+ if (!this._inOp && e.shiftKey) {
+ this._shiftZoom = true;
+ this._$eventTarget.css("cursor", this._options["cursors"]["zoom"]);
+ } else if ( !this._isMultiTouch && this._options[ "pannable" ] ) {
+ this._inOp = true;
+
+ switch (this._options["mode"]) {
+ case "zoom":
+ break;
+
+ default:
+ this._lastDrag = this._current;
+
+ if (e.currentTarget.setCapture) {
+ e.currentTarget.setCapture();
+ }
+
+ break;
+ }
+ }
+
+ e.preventDefault();
+ return false;
+ },
+
+ _dragTarget_touchmove: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ var offset = this._$eventTarget.offset(),
+ drawCoordsLen = this._drawCoords.length,
+ touches = e.originalEvent.changedTouches,
+ current,
+ service,
+ i = 0;
+
+ if ( this._supportTouch ) {
+ if ( !this._isMultiTouch && touches[ 0 ].identifier !== this._multiTouchAnchor[ 0 ].identifier ) {
+ // switch to multitouch
+ this._mouseDown = false;
+ this._dragTarget_touchstop( e );
+
+ this._isMultiTouch = true;
+
+ this._multiTouchAnchor.push( touches[ 0 ] );
+
+ this._multiTouchCurrentBbox = [
+ this._multiTouchCurrentBbox[ 0 ],
+ this._multiTouchCurrentBbox[ 1 ],
+ this._multiTouchAnchor[1].pageX - offset.left,
+ this._multiTouchAnchor[1].pageY - offset.top
+ ];
+
+ this._multiTouchAnchorBbox = $.merge( [ ], this._multiTouchCurrentBbox );
+
+ this._mouseDown = true;
+ this._anchor = this._current = $.geo.center( this._multiTouchCurrentBbox, true );
+
+ return false;
+ }
+
+ if ( this._isMultiTouch ) {
+ for ( ; i < touches.length; i++ ) {
+ if ( touches[ i ].identifier === this._multiTouchAnchor[ 0 ].identifier ) {
+ this._multiTouchCurrentBbox[ 0 ] = touches[ i ].pageX - offset.left;
+ this._multiTouchCurrentBbox[ 1 ] = touches[ i ].pageY - offset.top;
+ } else if ( touches[ i ].identifier === this._multiTouchAnchor[ 1 ].identifier ) {
+ this._multiTouchCurrentBbox[ 2 ] = touches[ i ].pageX - offset.left;
+ this._multiTouchCurrentBbox[ 3 ] = touches[ i ].pageY - offset.top;
+ }
+ }
+
+ current = $.geo.center( this._multiTouchCurrentBbox, true );
+
+ var currentWidth = this._multiTouchCurrentBbox[ 2 ] - this._multiTouchCurrentBbox[ 0 ],
+ anchorWidth = this._multiTouchAnchorBbox[ 2 ] - this._multiTouchAnchorBbox[ 0 ],
+ ratioWidth = currentWidth / anchorWidth;
+
+ this._wheelLevel = Math.abs( Math.floor( ( 1 - ratioWidth ) * 10 ) );
+ if ( Math.abs( currentWidth ) < Math.abs( anchorWidth ) ) {
+ this._wheelLevel = - this._wheelLevel;
+ }
+
+ var pinchCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, false );
+ this._$elem.find( ".geo-shapes-container" ).geographics("clear");
+
+ for ( i = 0; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+ $.geo[ "_serviceTypes" ][ service.type ].interactiveScale( this, service, pinchCenterAndSize.center, pinchCenterAndSize.pixelSize );
+ }
+
+ if (this._graphicShapes.length > 0 && this._graphicShapes.length < 256) {
+ this._refreshShapes(this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes, pinchCenterAndSize.center, pinchCenterAndSize.pixelSize);
+ }
+
+
+ if (this._drawCoords.length > 0) {
+ this._drawPixels = this._toPixel(this._drawCoords, pinchCenterAndSize.center, pinchCenterAndSize.pixelSize);
+ this._refreshDrawing();
+ }
+
+ current = $.geo.center( this._multiTouchCurrentBbox, true );
+ } else {
+ current = [e.originalEvent.changedTouches[0].pageX - offset.left, e.originalEvent.changedTouches[0].pageY - offset.top];
+ }
+ } else {
+ current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ if (current[0] === this._lastMove[0] && current[1] === this._lastMove[1]) {
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ }
+
+ if ( _ieVersion == 7 ) {
+ this._isDbltap = this._isTap = false;
+ }
+
+ if (this._mouseDown) {
+ this._current = current;
+ this._moveDate = $.now();
+ }
+
+ if ( this._isMultiTouch ) {
+ e.preventDefault( );
+ this._isDbltap = this._isTap = false;
+ return false;
+ }
+
+ var mode = this._shiftZoom ? "zoom" : this._options["mode"];
+
+ switch (mode) {
+ case "zoom":
+ if ( this._mouseDown ) {
+ this._$drawContainer.geographics( "clear" );
+ this._$drawContainer.geographics( "drawBbox", [
+ this._anchor[ 0 ],
+ this._anchor[ 1 ],
+ current[ 0 ],
+ current[ 1 ]
+ ] );
+ } else {
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+
+ case "drawLineString":
+ case "drawPolygon":
+ case "measureLength":
+ case "measureArea":
+ if (this._mouseDown || this._toolPan) {
+ this._panMove();
+ } else {
+ if (drawCoordsLen > 0) {
+ this._drawCoords[drawCoordsLen - 1] = this._toMap(current);
+ this._drawPixels[drawCoordsLen - 1] = current;
+
+ this._refreshDrawing();
+ }
+
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+
+ default:
+ if (this._mouseDown || this._toolPan) {
+ this._panMove();
+ } else {
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+ }
+
+ this._lastMove = current;
+
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ },
+
+ _dragTarget_touchstop: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ if (!this._mouseDown && _ieVersion == 7) {
+ // ie7 doesn't appear to trigger dblclick on this._$eventTarget,
+ // we fake regular click here to cause soft dblclick
+ this._eventTarget_touchstart(e);
+ }
+
+ var mouseWasDown = this._mouseDown,
+ wasToolPan = this._toolPan,
+ offset = this._$eventTarget.offset(),
+ mode = this._shiftZoom ? "zoom" : this._options["mode"],
+ current, i, clickDate,
+ dx, dy;
+
+ if (this._supportTouch) {
+ current = [e.originalEvent.changedTouches[0].pageX - offset.left, e.originalEvent.changedTouches[0].pageY - offset.top];
+ } else {
+ current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ if (this._softDblClick) {
+ if (this._isTap) {
+ var dx = current[0] - this._anchor[0],
+ dy = current[1] - this._anchor[1],
+ distance = Math.sqrt((dx * dx) + (dy * dy));
+ if (distance <= 8) {
+ current = $.merge( [ ], this._anchor );
+ }
+ }
+ }
+
+ dx = current[0] - this._anchor[0];
+ dy = current[1] - this._anchor[1];
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+
+ this._shiftZoom = this._mouseDown = this._toolPan = false;
+
+ if ( this._isMultiTouch ) {
+ e.preventDefault( );
+ this._isMultiTouch = false;
+
+ var pinchCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, false );
+
+ this._setCenterAndSize(pinchCenterAndSize.center, pinchCenterAndSize.pixelSize, true, true);
+
+ this._wheelLevel = 0;
+
+ return false;
+ }
+
+ if (document.releaseCapture) {
+ document.releaseCapture();
+ }
+
+ if (mouseWasDown) {
+ clickDate = $.now();
+ this._current = current;
+
+ switch (mode) {
+ case "zoom":
+ if ( dx > 0 || dy > 0 ) {
+ var minSize = this._pixelSize * 6,
+ bboxCoords = this._toMap( [ [
+ Math.min( this._anchor[ 0 ], current[ 0 ] ),
+ Math.max( this._anchor[ 1 ], current[ 1 ] )
+ ], [
+ Math.max( this._anchor[ 0 ], current[ 0 ] ),
+ Math.min( this._anchor[ 1 ], current[ 1 ] )
+ ]
+ ] ),
+ bbox = [
+ bboxCoords[0][0],
+ bboxCoords[0][1],
+ bboxCoords[1][0],
+ bboxCoords[1][1]
+ ];
+
+ if ( ( bbox[2] - bbox[0] ) < minSize && ( bbox[3] - bbox[1] ) < minSize ) {
+ bbox = $.geo.scaleBy( this._getBbox( $.geo.center( bbox, true ) ), .5, true );
+ }
+
+ this._setBbox(bbox, true, true);
+ }
+
+ this._resetDrawing();
+ break;
+
+ case "drawPoint":
+ if (this._drawTimeout) {
+ window.clearTimeout(this._drawTimeout);
+ this._drawTimeout = null;
+ }
+
+ if (wasToolPan) {
+ this._panFinalize();
+ } else {
+ if (clickDate - this._clickDate > 100) {
+ var geomap = this;
+ this._drawTimeout = setTimeout(function () {
+ if (geomap._drawTimeout) {
+ geomap._trigger("shape", e, { type: "Point", coordinates: geomap.toMap(current) });
+ geomap._inOp = false;
+ geomap._drawTimeout = null;
+ }
+ }, 250);
+ }
+ }
+ break;
+
+ case "drawLineString":
+ case "drawPolygon":
+ case "measureLength":
+ case "measureArea":
+ if (wasToolPan) {
+ this._panFinalize();
+ } else {
+ i = (this._drawCoords.length == 0 ? 0 : this._drawCoords.length - 1);
+
+ this._drawCoords[i] = this._toMap(current);
+ this._drawPixels[i] = current;
+
+ if (i < 2 || !(this._drawCoords[i][0] == this._drawCoords[i-1][0] &&
+ this._drawCoords[i][1] == this._drawCoords[i-1][1])) {
+ this._drawCoords[i + 1] = this._toMap(current);
+ this._drawPixels[i + 1] = current;
+ }
+
+ this._refreshDrawing();
+ }
+ break;
+
+ default:
+ if (wasToolPan) {
+ this._panEnd();
+ } else {
+ if (clickDate - this._clickDate > 100) {
+ this._trigger("click", e, { type: "Point", coordinates: this.toMap(current) });
+ this._inOp = false;
+ }
+ }
+ break;
+ }
+
+ this._clickDate = clickDate;
+
+ if (this._softDblClick && this._isDbltap) {
+ this._isDbltap = this._isTap = false;
+ this._$eventTarget.trigger("dblclick", e);
+ }
+ }
+
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ },
+
+ _eventTarget_mousewheel: function (e, delta) {
+ if ( this._options[ "mode" ] === "static" || this._options[ "scroll" ] === "off" ) {
+ return;
+ }
+
+ e.preventDefault();
+
+ this._panFinalize();
+
+ if ( this._mouseDown ) {
+ return false;
+ }
+
+ if (delta != 0) {
+ if (this._wheelTimeout) {
+ window.clearTimeout(this._wheelTimeout);
+ this._wheelTimeout = null;
+ } else {
+ var offset = $(e.currentTarget).offset();
+ this._anchor = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ this._wheelLevel += delta;
+
+ var wheelCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, this._options[ "tilingScheme" ] != null ),
+ service,
+ i = 0;
+
+ this._$elem.find( ".geo-shapes-container" ).geographics("clear");
+
+ for ( ; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+ $.geo["_serviceTypes"][service.type].interactiveScale(this, service, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ }
+
+ if (this._graphicShapes.length > 0 && this._graphicShapes.length < 256) {
+ this._refreshShapes(this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ }
+
+ if (this._drawCoords.length > 0) {
+ this._drawPixels = this._toPixel(this._drawCoords, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ this._refreshDrawing();
+ }
+
+ var geomap = this;
+ this._wheelTimeout = window.setTimeout(function () {
+ geomap._mouseWheelFinish();
+ }, 1000);
+ }
+
+ return false;
+ }
+ }
+ );
+})(jQuery);
+
+(function ($, undefined) {
+ $.geo._serviceTypes.tiled = (function () {
+ return {
+ create: function (map, serviceContainer, service, index) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( !serviceState ) {
+ serviceState = {
+ loadCount: 0,
+ reloadTiles: false
+ };
+
+ var scHtml = '<div data-geo-service="tiled" style="position:absolute; left:0; top:0; width:8px; height:8px; margin:0; padding:0;"></div>';
+
+ serviceContainer.append(scHtml);
+
+ serviceState.serviceContainer = serviceContainer.children( ":last" );
+
+ $.data(service, "geoServiceState", serviceState);
+ }
+
+ return serviceState.serviceContainer;
+ },
+
+ destroy: function (map, serviceContainer, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ serviceState.serviceContainer.remove();
+
+ $.removeData(service, "geoServiceState");
+ },
+
+ interactivePan: function ( map, service, dx, dy ) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if ( serviceState ) {
+ this._cancelUnloaded( map, service );
+
+ serviceState.serviceContainer.children( ).css( "-moz-transition", "").css( {
+ webkitTransition: "",
+ transition: "",
+ left: function ( index, value ) {
+ return parseInt( value ) + dx;
+ },
+ top: function ( index, value ) {
+ return parseInt( value ) + dy;
+ }
+ });
+
+ if ( service && service.style.visibility === "visible" ) {
+ var pixelSize = map._pixelSize,
+
+ serviceObj = this,
+ serviceContainer = serviceState.serviceContainer,
+ scaleContainer = serviceContainer.children("[data-pixelSize='" + pixelSize + "']"),
+
+ /* same as refresh 1 */
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ image = map.options[ "axisLayout" ] === "image",
+ ySign = image ? +1 : -1,
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight,
+ /* end same as refresh 1 */
+
+ halfWidth = mapWidth / 2 * pixelSize,
+ halfHeight = mapHeight / 2 * pixelSize,
+
+ currentPosition = scaleContainer.position(),
+ scaleOriginParts = scaleContainer.data("scaleOrigin").split(","),
+ totalDx = parseInt(scaleOriginParts[0]) - currentPosition.left,
+ totalDy = parseInt(scaleOriginParts[1]) - currentPosition.top,
+
+ mapCenterOriginal = map._getCenter(),
+ mapCenter = [
+ mapCenterOriginal[0] + totalDx * pixelSize,
+ mapCenterOriginal[1] + ySign * totalDy * pixelSize
+ ],
+
+ /* same as refresh 2 */
+ tileX = Math.floor(((mapCenter[0] - halfWidth) - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY = Math.max( Math.floor(( image ? (mapCenter[1] - halfHeight) - tilingScheme.origin[1] : tilingScheme.origin[1] - (mapCenter[1] + halfHeight)) / (pixelSize * tileHeight)), 0 ),
+ tileX2 = Math.ceil(((mapCenter[0] + halfWidth) - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY2 = Math.ceil(( image ? (mapCenter[1] + halfHeight) - tilingScheme.origin[1] : tilingScheme.origin[1] - (mapCenter[1] - halfHeight)) / (pixelSize * tileHeight)),
+
+ bboxMax = map._getBboxMax(),
+ pixelSizeAtZero = map._getPixelSize(0),
+ ratio = pixelSizeAtZero / pixelSize,
+ fullXAtScale = Math.floor((bboxMax[0] - tilingScheme.origin[0]) / (pixelSizeAtZero * tileWidth)) * ratio,
+ fullYAtScale = Math.floor((tilingScheme.origin[1] + ySign * bboxMax[3]) / (pixelSizeAtZero * tileHeight)) * ratio,
+
+ fullXMinX = tilingScheme.origin[0] + (fullXAtScale * tileWidth) * pixelSize,
+ fullYMinOrMaxY = tilingScheme.origin[1] + ySign * (fullYAtScale * tileHeight) * pixelSize,
+ /* end same as refresh 2 */
+
+ serviceLeft = Math.round((fullXMinX - (mapCenterOriginal[0] - halfWidth)) / pixelSize),
+ serviceTop = Math.round(( image ? fullYMinOrMaxY - (mapCenterOriginal[1] - halfHeight) : (mapCenterOriginal[1] + halfHeight) - fullYMinOrMaxY ) / pixelSize),
+
+ opacity = service.style.opacity,
+
+ x, y;
+
+ for ( x = tileX; x < tileX2; x++ ) {
+ for ( y = tileY; y < tileY2; y++ ) {
+ var tileStr = "" + x + "," + y,
+ $img = scaleContainer.children("[data-tile='" + tileStr + "']").removeAttr("data-dirty");
+
+ if ( $img.size( ) === 0 ) {
+ /* same as refresh 3 */
+ var bottomLeft = [
+ tilingScheme.origin[0] + (x * tileWidth) * pixelSize,
+ tilingScheme.origin[1] + ySign * (y * tileHeight) * pixelSize
+ ],
+
+ topRight = [
+ tilingScheme.origin[0] + ((x + 1) * tileWidth - 1) * pixelSize,
+ tilingScheme.origin[1] + ySign * ((y + 1) * tileHeight - 1) * pixelSize
+ ],
+
+ tileBbox = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]],
+
+ urlProp = ( service.hasOwnProperty("src") ? "src" : "getUrl" ),
+ urlArgs = {
+ bbox: tileBbox,
+ width: tileWidth,
+ height: tileHeight,
+ zoom: map._getZoom(),
+ tile: {
+ row: y,
+ column: x
+ },
+ index: Math.abs(y + x)
+ },
+ isFunc = $.isFunction( service[ urlProp ] ),
+ imageUrl;
+
+ if ( isFunc ) {
+ imageUrl = service[ urlProp ]( urlArgs );
+ } else {
+ $.template( "geoSrc", service[ urlProp ] );
+ imageUrl = $.render( urlArgs, "geoSrc" );
+ }
+ /* end same as refresh 3 */
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ if ( serviceState.reloadTiles && $img.size() > 0 ) {
+ $img.attr( "src", imageUrl );
+ } else {
+ /* same as refresh 4 */
+ var imgMarkup = "<img style='position:absolute; " +
+ "left:" + (((x - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%; " +
+ "top:" + (((y - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%; ";
+
+ if ($("body")[0].filters === undefined) {
+ imgMarkup += "width: 100%; height: 100%;";
+ }
+
+ imgMarkup += "margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='" + tileStr + "' />";
+
+ scaleContainer.append( imgMarkup );
+ $img = scaleContainer.children(":last");
+ }
+
+ if ( typeof imageUrl === "string" ) {
+ serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, serviceContainer, opacity );
+ } else {
+ // assume Deferred
+ imageUrl.done( function( url ) {
+ serviceObj._loadImage( $img, url, pixelSize, serviceState, serviceContainer, opacity );
+ } ).fail( function( ) {
+ $img.remove( );
+ serviceState.loadCount--;
+ } );
+ }
+
+ /* end same as refresh 4 */
+ }
+ }
+ }
+ }
+ }
+ },
+
+ interactiveScale: function (map, service, center, pixelSize) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if ( serviceState && service && service.style.visibility === "visible" ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight;
+
+
+ serviceContainer.children( ).each( function ( i ) {
+ var $scaleContainer = $(this),
+ scaleRatio = $scaleContainer.attr("data-pixelSize") / pixelSize,
+ transitionCss = ""; //"width .25s ease-in, height .25s ease-in, left .25s ease-in, top .25s ease-in";
+
+ scaleRatio = Math.round(scaleRatio * 1000) / 1000;
+
+
+ var scaleOriginParts = $scaleContainer.data("scaleOrigin").split(","),
+ oldMapCoord = map._toMap([scaleOriginParts[0], scaleOriginParts[1]]),
+ newPixelPoint = map._toPixel(oldMapCoord, center, pixelSize);
+
+ $scaleContainer.css( "-moz-transition", transitionCss ).css( {
+ webkitTransition: transitionCss,
+ transition: transitionCss,
+ left: Math.round(newPixelPoint[0]) + "px",
+ top: Math.round(newPixelPoint[1]) + "px",
+ width: tileWidth * scaleRatio,
+ height: tileHeight * scaleRatio
+ } );
+
+ if ( $("body")[0].filters !== undefined ) {
+ $scaleContainer.children().each( function ( i ) {
+ $( this ).css( "filter", "progid:DXImageTransform.Microsoft.Matrix(FilterType=bilinear,M11=" + scaleRatio + ",M22=" + scaleRatio + ",sizingmethod='auto expand')" );
+ } );
+ }
+ });
+ }
+ },
+
+ refresh: function (map, service) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ this._cancelUnloaded(map, service);
+
+ if ( serviceState && service && service.style.visibility === "visible" && !( serviceState.serviceContainer.is( ":hidden" ) ) ) {
+
+ var bbox = map._getBbox(),
+ pixelSize = map._pixelSize,
+
+ serviceObj = this,
+ $serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ image = map.options[ "axisLayout" ] === "image",
+ ySign = image ? +1 : -1,
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight,
+
+ tileX = Math.floor((bbox[0] - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY = Math.max( Math.floor( ( image ? bbox[1] - tilingScheme.origin[1] : tilingScheme.origin[1] - bbox[ 3 ] ) / (pixelSize * tileHeight) ), 0 ),
+ tileX2 = Math.ceil((bbox[2] - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY2 = Math.ceil( ( image ? bbox[3] - tilingScheme.origin[1] : tilingScheme.origin[1] - bbox[ 1 ] ) / (pixelSize * tileHeight) ),
+
+ bboxMax = map._getBboxMax(),
+ pixelSizeAtZero = map._getPixelSize(0),
+ ratio = pixelSizeAtZero / pixelSize,
+ fullXAtScale = Math.floor((bboxMax[0] - tilingScheme.origin[0]) / (pixelSizeAtZero * tileWidth)) * ratio,
+ fullYAtScale = Math.floor((tilingScheme.origin[1] + ySign * bboxMax[3]) / (pixelSizeAtZero * tileHeight)) * ratio,
+
+ fullXMinX = tilingScheme.origin[0] + (fullXAtScale * tileWidth) * pixelSize,
+ fullYMinOrMaxY = tilingScheme.origin[1] + ySign * (fullYAtScale * tileHeight) * pixelSize,
+
+ serviceLeft = Math.round((fullXMinX - bbox[0]) / pixelSize),
+ serviceTop = Math.round( ( image ? fullYMinOrMaxY - bbox[1] : bbox[3] - fullYMinOrMaxY ) / pixelSize),
+
+ scaleContainers = $serviceContainer.children().show(),
+ scaleContainer = scaleContainers.filter("[data-pixelSize='" + pixelSize + "']").appendTo($serviceContainer),
+
+ opacity = service.style.opacity,
+
+ x, y;
+
+ if (serviceState.reloadTiles) {
+ scaleContainers.find("img").attr("data-dirty", "true");
+ }
+
+ if (!scaleContainer.size()) {
+ $serviceContainer.append("<div style='position:absolute; left:" + serviceLeft % tileWidth + "px; top:" + serviceTop % tileHeight + "px; width:" + tileWidth + "px; height:" + tileHeight + "px; margin:0; padding:0;' data-pixelSize='" + pixelSize + "'></div>");
+ scaleContainer = $serviceContainer.children(":last").data("scaleOrigin", (serviceLeft % tileWidth) + "," + (serviceTop % tileHeight));
+ } else {
+ scaleContainer.css({
+ left: (serviceLeft % tileWidth) + "px",
+ top: (serviceTop % tileHeight) + "px"
+ }).data("scaleOrigin", (serviceLeft % tileWidth) + "," + (serviceTop % tileHeight));
+
+ scaleContainer.children().each(function (i) {
+ var
+ $img = $(this),
+ tile = $img.attr("data-tile").split(",");
+
+ $img.css({
+ left: Math.round(((parseInt(tile[0]) - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%",
+ top: Math.round(((parseInt(tile[1]) - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%"
+ });
+
+ if (opacity < 1) {
+ $img.fadeTo(0, opacity);
+ }
+ });
+ }
+
+ for (x = tileX; x < tileX2; x++) {
+ for (y = tileY; y < tileY2; y++) {
+ var tileStr = "" + x + "," + y,
+ $img = scaleContainer.children("[data-tile='" + tileStr + "']").removeAttr("data-dirty");
+
+ if ($img.size() === 0 || serviceState.reloadTiles) {
+ var bottomLeft = [
+ tilingScheme.origin[0] + (x * tileWidth) * pixelSize,
+ tilingScheme.origin[1] + ySign * (y * tileHeight) * pixelSize
+ ],
+
+ topRight = [
+ tilingScheme.origin[0] + ((x + 1) * tileWidth - 1) * pixelSize,
+ tilingScheme.origin[1] + ySign * ((y + 1) * tileHeight - 1) * pixelSize
+ ],
+
+ tileBbox = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]],
+
+ urlProp = ( service.hasOwnProperty( "src" ) ? "src" : "getUrl" ),
+ urlArgs = {
+ bbox: tileBbox,
+ width: tileWidth,
+ height: tileHeight,
+ zoom: map._getZoom(),
+ tile: {
+ row: y,
+ column: x
+ },
+ index: Math.abs(y + x)
+ },
+ isFunc = $.isFunction( service[ urlProp ] ),
+ imageUrl;
+
+ if ( isFunc ) {
+ imageUrl = service[ urlProp ]( urlArgs );
+ } else {
+ $.template( "geoSrc", service[ urlProp ] );
+ imageUrl = $.render( urlArgs, "geoSrc" );
+ }
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ if (serviceState.reloadTiles && $img.size() > 0) {
+ $img.attr("src", imageUrl);
+ } else {
+ var imgMarkup = "<img style='position:absolute; " +
+ "left:" + (((x - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%; " +
+ "top:" + (((y - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%; ";
+
+ if ($("body")[0].filters === undefined) {
+ imgMarkup += "width: 100%; height: 100%;";
+ }
+
+ imgMarkup += "margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='" + tileStr + "' />";
+
+ scaleContainer.append(imgMarkup);
+ $img = scaleContainer.children(":last");
+ }
+
+ if ( typeof imageUrl === "string" ) {
+ serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, $serviceContainer, opacity );
+ } else {
+ // assume Deferred
+ imageUrl.done( function( url ) {
+ serviceObj._loadImage( $img, url, pixelSize, serviceState, $serviceContainer, opacity );
+ } ).fail( function( ) {
+ $img.remove( );
+ serviceState.loadCount--;
+ } );
+ }
+ }
+ }
+ }
+
+ scaleContainers.find("[data-dirty]").remove();
+ serviceState.reloadTiles = false;
+ }
+ },
+
+ resize: function (map, service) {
+ },
+
+ opacity: function ( map, service ) {
+ var serviceState = $.data( service, "geoServiceState" );
+ serviceState.serviceContainer.find( "img" ).stop( true ).fadeTo( "fast", service.style.opacity );
+ },
+
+ toggle: function ( map, service ) {
+ var serviceState = $.data( service, "geoServiceState" );
+ serviceState.serviceContainer.css( "display", service.style.visibility === "visible" ? "block" : "none" );
+ },
+
+ _cancelUnloaded: function (map, service) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if (serviceState && serviceState.loadCount > 0) {
+ serviceState.serviceContainer.find("img:hidden").remove();
+ while (serviceState.loadCount > 0) {
+ serviceState.loadCount--;
+ }
+ }
+ },
+
+ _loadImage: function ( $img, url, pixelSize, serviceState, serviceContainer, opacity ) {
+ $img.load(function (e) {
+ if (opacity < 1) {
+ $(e.target).fadeTo(0, opacity);
+ } else {
+ $(e.target).show();
+ }
+
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).error(function (e) {
+ $(e.target).remove();
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).attr("src", url);
+ }
+ };
+ })();
+})(jQuery);
+(function ($, undefined) {
+ $.geo._serviceTypes.shingled = (function () {
+ return {
+ create: function (map, serviceContainer, service, index) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( !serviceState ) {
+ serviceState = {
+ loadCount: 0
+ };
+
+ var scHtml = '<div data-geo-service="shingled" style="position:absolute; left:0; top:0; width:16px; height:16px; margin:0; padding:0;"></div>';
+
+ serviceContainer.append(scHtml);
+
+ serviceState.serviceContainer = serviceContainer.children(":last");
+ $.data(service, "geoServiceState", serviceState);
+ }
+
+ return serviceState.serviceContainer;
+ },
+
+ destroy: function (map, serviceContainer, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ serviceState.serviceContainer.remove();
+
+ $.removeData(service, "geoServiceState");
+ },
+
+ interactivePan: function (map, service, dx, dy) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+ pixelSize = map._pixelSize,
+ scaleContainer = serviceContainer.children("[data-pixelSize='" + pixelSize + "']"),
+ panContainer = scaleContainer.children("div");
+
+ if ( !panContainer.length ) {
+ scaleContainer.children("img").wrap('<div style="position:absolute; left:0; top:0; width:100%; height:100%;"></div>');
+ panContainer = scaleContainer.children("div");
+ }
+
+ panContainer.css( {
+ left: function (index, value) {
+ return parseInt(value) + dx;
+ },
+ top: function (index, value) {
+ return parseInt(value) + dy;
+ }
+ } );
+
+ // until pan/zoom rewrite, remove all containers not in this scale
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ }
+ },
+
+ interactiveScale: function (map, service, center, pixelSize) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight];
+
+ serviceContainer.children().each(function (i) {
+ var $scaleContainer = $(this),
+ scalePixelSize = $scaleContainer.attr("data-pixelSize"),
+ ratio = scalePixelSize / pixelSize;
+
+ $scaleContainer.css( {
+ width: mapWidth * ratio,
+ height: mapHeight * ratio } ).children("img").each(function (i) {
+ var $img = $(this),
+ imgCenter = $img.data("center"),
+ x = (Math.round((imgCenter[0] - center[0]) / scalePixelSize) - halfWidth) * ratio,
+ y = (Math.round((center[1] - imgCenter[1]) / scalePixelSize) - halfHeight) * ratio;
+
+ $img.css({ left: x + "px", top: y + "px" });
+ });
+ });
+ }
+ },
+
+ refresh: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ this._cancelUnloaded(map, service);
+
+ if ( serviceState && service && service.style.visibility === "visible" && !( serviceState.serviceContainer.is( ":hidden" ) ) ) {
+
+ var bbox = map._getBbox(),
+ pixelSize = map._pixelSize,
+
+ serviceObj = this,
+ serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ scaleContainer = serviceContainer.children('[data-pixelSize="' + pixelSize + '"]'),
+
+ opacity = service.style.opacity,
+
+ $img;
+
+ if ( !scaleContainer.size() ) {
+ serviceContainer.append('<div style="position:absolute; left:' + halfWidth + 'px; top:' + halfHeight + 'px; width:' + mapWidth + 'px; height:' + mapHeight + 'px; margin:0; padding:0;" data-pixelSize="' + pixelSize + '"></div>');
+ scaleContainer = serviceContainer.children(":last");
+ }
+
+ scaleContainer.children("img").each(function (i) {
+ var $thisimg = $(this),
+ imgCenter = $thisimg.data("center"),
+ center = map._getCenter(),
+ x = Math.round((imgCenter[0] - center[0]) / pixelSize) - halfWidth,
+ y = Math.round((center[1] - imgCenter[1]) / pixelSize) - halfHeight;
+
+ $thisimg.css({ left: x + "px", top: y + "px" });
+ });
+
+ if (opacity < 1) {
+ serviceContainer.find("img").attr("data-keepAlive", "0");
+ }
+
+ var urlProp = ( service.hasOwnProperty("src") ? "src" : "getUrl" ),
+ urlArgs = {
+ bbox: bbox,
+ width: mapWidth,
+ height: mapHeight,
+ zoom: map._getZoom(),
+ tile: null,
+ index: 0
+ },
+ isFunc = $.isFunction( service[ urlProp ] ),
+ imageUrl;
+
+
+ if ( isFunc ) {
+ imageUrl = service[ urlProp ]( urlArgs );
+ } else {
+ $.template( "geoSrc", service[ urlProp ] );
+ imageUrl = $.render( urlArgs, "geoSrc" );
+ }
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ scaleContainer.append('<img style="position:absolute; left:-' + halfWidth + 'px; top:-' + halfHeight + 'px; width:100%; height:100%; margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;" unselectable="on" />');
+ $img = scaleContainer.children(":last").data("center", map._getCenter());
+
+ if ( typeof imageUrl === "string" ) {
+ serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, serviceContainer, opacity );
+ } else {
+ // assume Deferred
+ imageUrl.done( function( url ) {
+ serviceObj._loadImage( $img, url, pixelSize, serviceState, serviceContainer, opacity );
+ } ).fail( function( ) {
+ $img.remove( );
+ serviceState.loadCount--;
+ } );
+ }
+
+ }
+ },
+
+ resize: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState && service && service.style.visibility === "visible" ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ scaleContainer = serviceContainer.children();
+
+ scaleContainer.attr("data-pixelSize", "0");
+ scaleContainer.css({
+ left: halfWidth + 'px',
+ top: halfHeight + 'px'
+ });
+ }
+ },
+
+ opacity: function ( map, service ) {
+ var serviceState = $.data( service, "geoServiceState" );
+ serviceState.serviceContainer.find( "img" ).stop( true ).fadeTo( "fast", service.style.opacity );
+ },
+
+ toggle: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+ serviceState.serviceContainer.css("display", service.style.visibility === "visible" ? "block" : "none");
+ },
+
+ _cancelUnloaded: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if (serviceState && serviceState.loadCount > 0) {
+ serviceState.serviceContainer.find("img:hidden").remove();
+ while (serviceState.loadCount > 0) {
+ serviceState.loadCount--;
+ }
+ }
+ },
+
+ _loadImage: function ( $img, url, pixelSize, serviceState, serviceContainer, opacity ) {
+ $img.load(function (e) {
+ if (opacity < 1) {
+ $(e.target).fadeTo(0, opacity);
+ } else {
+ $(e.target).show();
+ }
+
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(':not([data-pixelSize="' + pixelSize + '"])').remove();
+
+ var panContainer = serviceContainer.find('[data-pixelSize="' + pixelSize + '"]>div');
+ if (panContainer.size() > 0) {
+ var panContainerPos = panContainer.position();
+
+ panContainer.children("img").each(function (i) {
+ var $thisimg = $(this),
+ x = panContainerPos.left + parseInt($thisimg.css("left")),
+ y = panContainerPos.top + parseInt($thisimg.css("top"));
+
+ $thisimg.css({ left: x + "px", top: y + "px" });
+ }).unwrap();
+
+ panContainer.remove();
+ }
+
+ serviceState.loadCount = 0;
+ }
+ }).error(function (e) {
+ $(e.target).remove();
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).attr("src", url);
+ }
+ }
+ })();
+})(jQuery);
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ *
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+ for ( var i=types.length; i; ) {
+ $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+ }
+}
+
+$.event.special.mousewheel = {
+ setup: function() {
+ if ( this.addEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.addEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = handler;
+ }
+ },
+
+ teardown: function() {
+ if ( this.removeEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.removeEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = null;
+ }
+ }
+};
+
+$.fn.extend({
+ mousewheel: function(fn) {
+ return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+ },
+
+ unmousewheel: function(fn) {
+ return this.unbind("mousewheel", fn);
+ }
+});
+
+
+function handler(event) {
+ var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+ event = $.event.fix(orgEvent);
+ event.type = "mousewheel";
+
+ // Old school scrollwheel delta
+ if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+ if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
+
+ // New school multidimensional scroll (touchpads) deltas
+ deltaY = delta;
+
+ // Gecko
+ if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+ deltaY = 0;
+ deltaX = -1*delta;
+ }
+
+ // Webkit
+ if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+ if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+
+ // Add event and delta to the front of the arguments
+ args.unshift(event, delta, deltaX, deltaY);
+
+ return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
--- /dev/null
+document.createElement("canvas").getContext||function(){function g(){return this.context_||(this.context_=new t(this))}function q(p,h){var o=G.call(arguments,2);return function(){return p.apply(h,o.concat(G.call(arguments)))}}function r(p){p.namespaces.g_vml_||p.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml","#default#VML");p.namespaces.g_o_||p.namespaces.add("g_o_","urn:schemas-microsoft-com:office:office","#default#VML");if(!p.styleSheets.ex_canvas_){p=p.createStyleSheet();p.owningElement.id=
+"ex_canvas_";p.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}"}}function b(p){var h=p.srcElement;switch(p.propertyName){case "width":h.getContext().clearRect();h.style.width=h.attributes.width.nodeValue+"px";h.firstChild.style.width=h.clientWidth+"px";break;case "height":h.getContext().clearRect();h.style.height=h.attributes.height.nodeValue+"px";h.firstChild.style.height=h.clientHeight+"px"}}function c(p){p=p.srcElement;if(p.firstChild){p.firstChild.style.width=
+p.clientWidth+"px";p.firstChild.style.height=p.clientHeight+"px"}}function a(){return[[1,0,0],[0,1,0],[0,0,1]]}function d(p,h){for(var o=a(),s=0;s<3;s++)for(var x=0;x<3;x++){for(var v=0,A=0;A<3;A++)v+=p[s][A]*h[A][x];o[s][x]=v}return o}function f(p,h){h.fillStyle=p.fillStyle;h.lineCap=p.lineCap;h.lineJoin=p.lineJoin;h.lineWidth=p.lineWidth;h.miterLimit=p.miterLimit;h.shadowBlur=p.shadowBlur;h.shadowColor=p.shadowColor;h.shadowOffsetX=p.shadowOffsetX;h.shadowOffsetY=p.shadowOffsetY;h.strokeStyle=p.strokeStyle;
+h.globalAlpha=p.globalAlpha;h.font=p.font;h.textAlign=p.textAlign;h.textBaseline=p.textBaseline;h.arcScaleX_=p.arcScaleX_;h.arcScaleY_=p.arcScaleY_;h.lineScale_=p.lineScale_}function e(p){var h=p.indexOf("(",3),o=p.indexOf(")",h+1);h=p.substring(h+1,o).split(",");if(h.length!=4||p.charAt(3)!="a")h[3]=1;return h}function l(p,h,o){return Math.min(o,Math.max(h,p))}function m(p,h,o){o<0&&o++;o>1&&o--;return 6*o<1?p+(h-p)*6*o:2*o<1?h:3*o<2?p+(h-p)*(2/3-o)*6:p}function n(p){if(p in R)return R[p];var h,
+o=1;p=String(p);if(p.charAt(0)=="#")h=p;else if(/^rgb/.test(p)){o=e(p);h="#";for(var s,x=0;x<3;x++){s=o[x].indexOf("%")!=-1?Math.floor(parseFloat(o[x])/100*255):+o[x];h+=M[l(s,0,255)]}o=+o[3]}else if(/^hsl/.test(p)){x=o=e(p);h=parseFloat(x[0])/360%360;h<0&&h++;s=l(parseFloat(x[1])/100,0,1);x=l(parseFloat(x[2])/100,0,1);if(s==0)s=x=h=x;else{var v=x<0.5?x*(1+s):x+s-x*s,A=2*x-v;s=m(A,v,h+1/3);x=m(A,v,h);h=m(A,v,h-1/3)}h="#"+M[Math.floor(s*255)]+M[Math.floor(x*255)]+M[Math.floor(h*255)];o=o[3]}else h=
+p;return R[p]={color:h,alpha:o}}function t(p){this.m_=a();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.fillStyle=this.strokeStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=H*1;this.globalAlpha=1;this.canvas=p;var h="width:"+p.clientWidth+"px;height:"+p.clientHeight+"px;overflow:hidden;position:absolute",o=p.ownerDocument.createElement("div");o.style.cssText=h;p.appendChild(o);h=o.cloneNode(false);h.style.backgroundColor="red";h.style.filter="alpha(opacity=0)";
+p.appendChild(h);this.element_=o;this.lineScale_=this.arcScaleY_=this.arcScaleX_=1}function u(p,h,o,s){p.currentPath_.push({type:"bezierCurveTo",cp1x:h.x,cp1y:h.y,cp2x:o.x,cp2y:o.y,x:s.x,y:s.y});p.currentX_=s.x;p.currentY_=s.y}function w(p,h,o){p=p.m_;return{x:H*(h*p[0][0]+o*p[1][0]+p[2][0])-C,y:H*(h*p[0][1]+o*p[1][1]+p[2][1])-C}}function B(p,h,o){if(isFinite(h[0][0])&&isFinite(h[0][1])&&isFinite(h[1][0])&&isFinite(h[1][1])&&isFinite(h[2][0])&&isFinite(h[2][1])){p.m_=h;if(o)p.lineScale_=P(J(h[0][0]*
+h[1][1]-h[0][1]*h[1][0]))}}function I(p){this.code=this[p];this.message=p+": DOM Exception "+this.code}var F=Math,y=F.round,K=F.sin,D=F.cos,J=F.abs,P=F.sqrt,H=10,C=H/2;navigator.userAgent.match(/MSIE ([\d.]+)?/);var G=Array.prototype.slice;r(document);F={init:function(p){p=p||document;p.createElement("canvas");p.attachEvent("onreadystatechange",q(this.init_,this,p))},init_:function(p){p=p.getElementsByTagName("canvas");for(var h=0;h<p.length;h++)this.initElement(p[h])},initElement:function(p){if(!p.getContext){p.getContext=
+g;r(p.ownerDocument);p.innerHTML="";p.attachEvent("onpropertychange",b);p.attachEvent("onresize",c);var h=p.attributes;if(h.width&&h.width.specified)p.style.width=h.width.nodeValue+"px";else p.width=p.clientWidth;if(h.height&&h.height.specified)p.style.height=h.height.nodeValue+"px";else p.height=p.clientHeight}return p}};F.init();for(var M=[],z=0;z<16;z++)for(var L=0;L<16;L++)M[z*16+L]=z.toString(16)+L.toString(16);var R={},U={butt:"flat",round:"round"};z=t.prototype;z.clearRect=function(){if(this.textMeasureEl_){this.textMeasureEl_.removeNode(true);
+this.textMeasureEl_=null}this.element_.innerHTML=""};z.beginPath=function(){this.currentPath_=[]};z.moveTo=function(p,h){var o=w(this,p,h);this.currentPath_.push({type:"moveTo",x:o.x,y:o.y});this.currentX_=o.x;this.currentY_=o.y};z.lineTo=function(p,h){var o=w(this,p,h);this.currentPath_.push({type:"lineTo",x:o.x,y:o.y});this.currentX_=o.x;this.currentY_=o.y};z.bezierCurveTo=function(p,h,o,s,x,v){x=w(this,x,v);p=w(this,p,h);o=w(this,o,s);u(this,p,o,x)};z.quadraticCurveTo=function(p,h,o,s){p=w(this,
+p,h);o=w(this,o,s);s={x:this.currentX_+2/3*(p.x-this.currentX_),y:this.currentY_+2/3*(p.y-this.currentY_)};u(this,s,{x:s.x+(o.x-this.currentX_)/3,y:s.y+(o.y-this.currentY_)/3},o)};z.arc=function(p,h,o,s,x,v){o*=H;var A=v?"at":"wa",E=p+D(s)*o-C,N=h+K(s)*o-C;s=p+D(x)*o-C;x=h+K(x)*o-C;if(E==s&&!v)E+=0.125;p=w(this,p,h);E=w(this,E,N);s=w(this,s,x);this.currentPath_.push({type:A,x:p.x,y:p.y,radius:o,xStart:E.x,yStart:E.y,xEnd:s.x,yEnd:s.y})};z.stroke=function(p){var h=[];h.push("<g_vml_:shape",' filled="',
+!!p,'"',' style="position:absolute;width:',10,"px;height:",10,'px;"',' coordorigin="0,0"',' coordsize="',H*10,",",H*10,'"',' stroked="',!p,'"',' path="');for(var o={x:null,y:null},s={x:null,y:null},x=0;x<this.currentPath_.length;x++){var v=this.currentPath_[x];switch(v.type){case "moveTo":h.push(" m ",y(v.x),",",y(v.y));break;case "lineTo":h.push(" l ",y(v.x),",",y(v.y));break;case "close":h.push(" x ");v=null;break;case "bezierCurveTo":h.push(" c ",y(v.cp1x),",",y(v.cp1y),",",y(v.cp2x),",",y(v.cp2y),
+",",y(v.x),",",y(v.y));break;case "at":case "wa":h.push(" ",v.type," ",y(v.x-this.arcScaleX_*v.radius),",",y(v.y-this.arcScaleY_*v.radius)," ",y(v.x+this.arcScaleX_*v.radius),",",y(v.y+this.arcScaleY_*v.radius)," ",y(v.xStart),",",y(v.yStart)," ",y(v.xEnd),",",y(v.yEnd))}if(v){if(o.x==null||v.x<o.x)o.x=v.x;if(s.x==null||v.x>s.x)s.x=v.x;if(o.y==null||v.y<o.y)o.y=v.y;if(s.y==null||v.y>s.y)s.y=v.y}}h.push(' ">');if(p){p=n(this.fillStyle);h.push('<g_vml_:fill color="',p.color,'" opacity="',p.alpha*this.globalAlpha,
+'" />')}else{o=n(this.strokeStyle);p=o.color;o=o.alpha*this.globalAlpha;s=this.lineScale_*this.lineWidth;if(s<1)o*=s;h.push("<g_vml_:stroke",' opacity="',o,'"',' joinstyle="',this.lineJoin,'"',' miterlimit="',this.miterLimit,'"',' endcap="',U[this.lineCap]||"square",'"',' weight="',s,'px"',' color="',p,'" />')}h.push("</g_vml_:shape>");this.element_.insertAdjacentHTML("beforeEnd",h.join(""))};z.fill=function(){this.stroke(true)};z.closePath=function(){this.currentPath_.push({type:"close"})};z.save=
+function(){var p={};f(this,p);this.aStack_.push(p);this.mStack_.push(this.m_);this.m_=d(a(),this.m_)};z.restore=function(){if(this.aStack_.length){f(this.aStack_.pop(),this);this.m_=this.mStack_.pop()}};z.translate=function(p,h){B(this,d([[1,0,0],[0,1,0],[p,h,1]],this.m_),false)};z.scale=function(p,h){this.arcScaleX_*=p;this.arcScaleY_*=h;B(this,d([[p,0,0],[0,h,0],[0,0,1]],this.m_),true)};z=I.prototype=Error();z.INDEX_SIZE_ERR=1;z.DOMSTRING_SIZE_ERR=2;z.HIERARCHY_REQUEST_ERR=3;z.WRONG_DOCUMENT_ERR=
+4;z.INVALID_CHARACTER_ERR=5;z.NO_DATA_ALLOWED_ERR=6;z.NO_MODIFICATION_ALLOWED_ERR=7;z.NOT_FOUND_ERR=8;z.NOT_SUPPORTED_ERR=9;z.INUSE_ATTRIBUTE_ERR=10;z.INVALID_STATE_ERR=11;z.SYNTAX_ERR=12;z.INVALID_MODIFICATION_ERR=13;z.NAMESPACE_ERR=14;z.INVALID_ACCESS_ERR=15;z.VALIDATION_ERR=16;z.TYPE_MISMATCH_ERR=17;G_vmlCanvasManager=F;CanvasRenderingContext2D=t;DOMException=I}();
+$.widget||function(g,q){if(g.cleanData){var r=g.cleanData;g.cleanData=function(c){for(var a=0,d;(d=c[a])!=null;a++)try{g(d).triggerHandler("remove")}catch(f){}r(c)}}else{var b=g.fn.remove;g.fn.remove=function(c,a){return this.each(function(){if(!a)if(!c||g.filter(c,[this]).length)g("*",this).add([this]).each(function(){try{g(this).triggerHandler("remove")}catch(d){}});return b.call(g(this),c,a)})}}g.widget=function(c,a,d){var f=c.split(".")[0],e;c=c.split(".")[1];e=f+"-"+c;if(!d){d=a;a=g.Widget}g.expr[":"][e]=
+function(l){return!!g.data(l,c)};g[f]=g[f]||{};g[f][c]=function(l,m){arguments.length&&this._createWidget(l,m)};a=new a;a.options=g.extend(true,{},a.options);g[f][c].prototype=g.extend(true,a,{namespace:f,widgetName:c,widgetEventPrefix:g[f][c].prototype.widgetEventPrefix||c,widgetBaseClass:e},d);g.widget.bridge(c,g[f][c])};g.widget.bridge=function(c,a){g.fn[c]=function(d){var f=typeof d==="string",e=Array.prototype.slice.call(arguments,1),l=this;d=!f&&e.length?g.extend.apply(null,[true,d].concat(e)):
+d;if(f&&d.charAt(0)==="_")return l;f?this.each(function(){var m=g.data(this,c),n=m&&g.isFunction(m[d])?m[d].apply(m,e):m;if(n!==m&&n!==q){l=n;return false}}):this.each(function(){var m=g.data(this,c);m?m.option(d||{})._init():g.data(this,c,new a(d,this))});return l}};g.Widget=function(c,a){arguments.length&&this._createWidget(c,a)};g.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",options:{disabled:false},_createWidget:function(c,a){g.data(a,this.widgetName,this);this.element=g(a);this.options=
+g.extend(true,{},this.options,this._getCreateOptions(),c);var d=this;this.element.bind("remove."+this.widgetName,function(){d.destroy()});this._create();this._trigger("create");this._init()},_getCreateOptions:function(){return g.metadata&&g.metadata.get(this.element[0])[this.widgetName]},_create:function(){},_init:function(){},destroy:function(){this.element.unbind("."+this.widgetName).removeData(this.widgetName);this.widget().unbind("."+this.widgetName).removeAttr("aria-disabled").removeClass(this.widgetBaseClass+
+"-disabled ui-state-disabled")},widget:function(){return this.element},option:function(c,a){var d=c;if(arguments.length===0)return g.extend({},this.options);if(typeof c==="string"){if(a===q)return this.options[c];d={};d[c]=a}this._setOptions(d);return this},_setOptions:function(c){var a=this;g.each(c,function(d,f){a._setOption(d,f)});return this},_setOption:function(c,a){this.options[c]=a;if(c==="disabled")this.widget()[a?"addClass":"removeClass"](this.widgetBaseClass+"-disabled ui-state-disabled").attr("aria-disabled",
+a);return this},enable:function(){return this._setOption("disabled",false)},disable:function(){return this._setOption("disabled",true)},_trigger:function(c,a,d){var f,e=this.options[c];d=d||{};a=g.Event(a);a.type=(c===this.widgetEventPrefix?c:this.widgetEventPrefix+c).toLowerCase();a.target=this.element[0];if(c=a.originalEvent)for(f in c)f in a||(a[f]=c[f]);this.element.trigger(a,d);return!(g.isFunction(e)&&e.call(this.element[0],a,d)===false||a.isDefaultPrevented())}}}(jQuery);
+window.JsViews||window.jQuery&&jQuery.views||function(g,q){function r(h,o,s,x,v){var A=(s=s||{viewsCount:0,ctx:n.helpers})&&s.ctx;return{jsViews:"v1.0pre",path:o||"",itemNumber:++s.viewsCount||1,viewsCount:0,tmpl:v,data:x||s.data||{},ctx:h&&h===A?A:A?F(F({},A),h):h||{},parent:s}}function b(h,o,s,x,v,A,E){return s?(x?v?"$view."+v:s:"$data."+s)+(A||""):E||o||""}function c(h){function o(O){O-=x;O&&E.push(h.substr(x,O).replace(C,"\\n"))}var s,x=0,v=[],A=[],E=A,N=[,,A];h=h.replace(M,"\\$1");h.replace(w,
+function(O,S,Q,ga,ha,T,ia,ja,ka,ca){function la(Z,V,ma,da,na,oa,ea,fa,pa,qa){return W?(W=!ea,W?Z:'"'):X?(X=!fa,X?Z:'"'):da?V.replace(P,b)+da:na?Y?"":(aa=K,"\u0008"+V+":"):ma?(Y++,V.replace(P,b)+"("):pa?(Y--,")"):V?V.replace(P,b):oa?",":qa?Y?"":aa?(aa=y,"\u0008"):",":(W=ea,X=fa,'"')}var aa,ba="",Y=0,X=y,W=y;Q=Q||ga;o(ca);if(ha)n.allowCode&&E.push(["*",T.replace(G,"$1")]);else if(Q){if(Q==="else"){N=v.pop();E=N[2];S=K}T=T?(T+" ").replace(H,la).replace(z,function(Z,V){ba+=V+",";return""}):"";T=T.slice(0,
+-1);s=[Q,ia?ja||"none":"",S&&[],"{"+ba+"_hash:'"+ba+"',_path:'"+T+"'}",T];if(S){v.push(N);N=s}E.push(s)}else if(ka)N=v.pop();x=ca+O.length;if(!N)throw"Expected block tag";E=N[2]});o(h.length);return a(A)}function a(h){var o,s,x=[],v=h.length,A="try{var views="+(D?"jQuery":"JsViews")+'.views,tag=views.renderTag,enc=views.encode,html=views.encoders.html,$ctx=$view && $view.ctx,result=""+\n\n';for(s=0;s<v;s++){o=h[s];if(o[0]==="*")A=A.slice(0,s?-1:-3)+";"+o[1]+(s+1<v?"result+=":"");else if(""+o===o)A+=
+'"'+o+'"+';else{var E=o[0],N=o[1],O=o[2],S=o[3];o=o[4];var Q=o+'||"")+';O&&x.push(a(O));A+=E==="="?!N||N==="html"?"html("+Q:N==="none"?"("+Q:'enc("'+N+'",'+Q:'tag("'+E+'",$view,"'+(N||"")+'",'+(O?x.length:'""')+","+S+(o?",":"")+o+")+"}}h=new Function("$data, $view",A.slice(0,-1)+";return result;\n\n}catch(e){return views.err(e);}");h.nested=x;return h}function d(h){return R[h]||(R[h]="&#"+h.charCodeAt(0)+";")}function f(h){try{return e(h)}catch(o){}return h}var e,l,m,n,t,u,w,B,I,F,y=false,K=true,
+D=g.jQuery,J=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,P=/^(true|false|null|[\d\.]+)|(\w+|\$(view|data|ctx|(\w+)))([\w\.]*)|((['"])(?:\\\1|.)*\7)$/g,H=/(\$?[\w\.\[\]]+)(?:(\()|\s*(===|!==|==|!=|<|>|<=|>=)\s*|\s*(\=)\s*)?|(\,\s*)|\\?(\')|\\?(\")|(\))|(\s+)/g,C=/\r?\n/g,G=/\\(['"])/g,M=/\\?(['"])/g,z=/\x08([^\x08]+)\x08/g,L=0,R={"&":"&","<":"<",">":">"},U=/[\x00"&'<>]/g,p=Array.prototype.slice;if(D){e=D;e.fn.extend({render:function(h,o,s,x){return u(h,this[0],o,s,x)},template:function(h,o){return e.template(h,
+this[0],o)}})}else{l=g.$;g.JsViews=m=g.$=e={extend:function(h,o){for(var s in o)h[s]=o[s];return h},isArray:Array.isArray||function(h){return Object.prototype.toString.call(h)==="[object Array]"},noConflict:function(){if(g.$===m)g.$=l;return m}}}F=e.extend;F(e,{views:n={templates:{},tags:{"if":function(){var h=this._view;h.onElse=function(o,s){for(var x=0,v=s.length;v&&!s[x++];)if(x===v)return"";h.onElse=q;return u(h.data,o.tmpl,h.ctx,h)};return h.onElse(this,arguments)},"else":function(){var h=this._view;
+return h.onElse?h.onElse(this,arguments):""},each:function(){var h,o="",s=arguments,x=s.length,v=this.tmpl,A=this._view;for(h=0;h<x;h++)o+=s[h]?u(s[h],v,this.ctx||A.ctx,A,this._path,this._ctor):"";return x?o:o+u(A.data,v,A.ctx,A,this._path,this.tag)},"=":function(h){return h},"*":function(h){return h}},helpers:{not:function(h){return!h}},allowCode:y,debugMode:K,err:function(h){return n.debugMode?"<br/><b>Error:</b> <em> "+(h.message||h)+". </em>":'""'},setDelimiters:function(h,o){var s=o.charAt(0),
+x=o.charAt(1);h="\\"+h.charAt(0)+"\\"+h.charAt(1);o="\\"+s+"\\"+x;w=h+"(?:(?:(\\#)?(\\w+(?=[!\\s\\"+s+"]))|(?:(\\=)|(\\*)))\\s*((?:[^\\"+s+"]|\\"+s+"(?!\\"+x+"))*?)(!(\\w*))?|(?:\\/([\\w\\$\\.\\[\\]]+)))"+o;w=RegExp(w,"g")},registerTags:B=function(h,o){var s;if(typeof h==="object")for(s in h)B(s,h[s]);else n.tags[h]=o;return this},registerHelpers:I=function(h,o){if(typeof h==="object")for(var s in h)I(s,h[s]);else n.helpers[h]=o;return this},encode:function(h,o){return o?(t[h||"html"]||t.html)(o):
+""},encoders:t={none:function(h){return h},html:function(h){return String(h).replace(U,d)}},renderTag:function(h,o,s,x,v){var A,E;A=arguments;E=n.presenters;hash=v._hash;tagFn=n.tags[h];if(!tagFn)return"";x=x&&o.tmpl.nested[x-1];v.tmpl=v.tmpl||x||q;if(E&&E[h]){E=F(F({},v.ctx),v);delete E.ctx;delete E._path;delete E.tmpl;v.ctx=E;v._ctor=h+(hash?"="+hash.slice(0,-1):"");v=F(F({},tagFn),v);tagFn=n.tags.each}v._encode=s;v._view=o;return(A=tagFn.apply(v,A.length>5?p.call(A,5):[o.data]))||(A===q?"":A.toString())}},
+render:u=function(h,o,s,x,v,A){var E,N,O,S,Q="";if(arguments.length===2&&h.jsViews){x=h;s=x.ctx;h=x.data}o=e.template(o);if(!o)return"";if(e.isArray(h)){S=new r(s,v,x,h);E=0;for(N=h.length;E<N;E++){O=(O=h[E])?o(O,new r(s,v,S,O,o,this)):"";Q+=n.activeViews?"<!--item--\>"+O+"<!--/item--\>":O}}else Q+=o(h,new r(s,v,x,h,o));return n.activeViews?"<!--tmpl("+(v||"")+") "+(A?"tag="+A:o._name)+"--\>"+Q+"<!--/tmpl--\>":Q},template:function(h,o){if(o){if(""+o===o)o=c(o);else if(D&&o instanceof e)o=o[0];if(o){if(D&&
+o.nodeType)o=e.data(o,"tmpl")||e.data(o,"tmpl",c(o.innerHTML));n.templates[o._name=o._name||h||"_"+L++]=o}return o}return h?""+h!==h?h._name?h:e.template(null,h):n.templates[h]||e.template(null,J.test(h)?h:f(h)):null}});n.setDelimiters("{{","}}")}(window);
+(function(g,q,r){var b=Number.POSITIVE_INFINITY,c=Number.NEGATIVE_INFINITY;g.geo={_allCoordinates:function(a){a=this._flatten(a);for(var d=0,f=[];d<a.length;d++){var e=a[d].coordinates,l=e&&g.isArray(e[0]),m=l&&g.isArray(e[0][0]),n;if(!(m&&g.isArray(e[0][0][0]))){if(!m){l||(e=[e]);e=[e]}e=[e]}for(l=0;l<e.length;l++)for(m=0;m<e[l].length;m++)for(n=0;n<e[l][m].length;n++)f.push(e[l][m][n])}return f},_isGeodetic:function(a){for(;g.isArray(a);)if(a.length>1&&!g.isArray(a[0]))return a[0]>=-180&&a[0]<=
+180&&a[1]>=-85&&a[1]<=85;else a=a[0];return false},center:function(a,d){var f=false;if(!d&&g.geo.proj&&this._isGeodetic(a)){f=true;a=g.geo.proj.fromGeodetic(a)}var e=[(a[0]+a[2])/2,(a[1]+a[3])/2];return f?g.geo.proj.toGeodetic(e):e},expandBy:function(a,d,f,e){var l=false;if(!e&&g.geo.proj&&this._isGeodetic(a)){l=true;a=g.geo.proj.fromGeodetic(a)}a=[a[0]-d,a[1]-f,a[2]+d,a[3]+f];return l?g.geo.proj.toGeodetic(a):a},height:function(a,d){if(!d&&g.geo.proj&&this._isGeodetic(a))a=g.geo.proj.fromGeodetic(a);
+return a[3]-a[1]},_in:function(a,d){return a[0]<=d[0]&&a[1]<=d[1]&&a[2]>=d[2]&&a[3]>=d[3]},_bboxDisjoint:function(a,d){return d[0]>a[2]||d[2]<a[0]||d[1]>a[3]||d[3]<a[1]},reaspect:function(a,d,f){var e=false;if(!f&&g.geo.proj&&this._isGeodetic(a)){e=true;a=g.geo.proj.fromGeodetic(a)}var l=this.width(a,true),m=this.height(a,true);f=this.center(a,true);if(l!=0&&m!=0&&d>0){if(l/m>d){a=l/2;l=a/d}else{l=m/2;a=l*d}a=[f[0]-a,f[1]-l,f[0]+a,f[1]+l]}return e?g.geo.proj.toGeodetic(a):a},recenter:function(a,d,
+f){var e=false;if(!f&&g.geo.proj){if(this._isGeodetic(a)){e=true;a=g.geo.proj.fromGeodetic(a)}if(this._isGeodetic(d))d=g.geo.proj.fromGeodetic(d)}f=(a[2]-a[0])/2;a=(a[3]-a[1])/2;a=[d[0]-f,d[1]-a,d[0]+f,d[1]+a];return e?g.geo.proj.toGeodetic(a):a},scaleBy:function(a,d,f){var e=false;if(!f&&g.geo.proj&&this._isGeodetic(a)){e=true;a=g.geo.proj.fromGeodetic(a)}f=this.center(a,true);var l=(a[2]-a[0])*d/2;a=(a[3]-a[1])*d/2;a=[f[0]-l,f[1]-a,f[0]+l,f[1]+a];return e?g.geo.proj.toGeodetic(a):a},width:function(a,
+d){if(!d&&g.geo.proj&&this._isGeodetic(a))a=g.geo.proj.fromGeodetic(a);return a[2]-a[0]},bbox:function(a,d){if(a)if(a.bbox)result=!d&&g.geo.proj&&this._isGeodetic(a.bbox)?g.geo.proj.fromGeodetic(a.bbox):a.bbox;else{result=[b,b,c,c];var f=this._allCoordinates(a),e=0;if(f.length==0)return r;var l=false;if(!d&&g.geo.proj&&this._isGeodetic(f)){l=true;f=g.geo.proj.fromGeodetic(f)}for(;e<f.length;e++){result[0]=Math.min(f[e][0],result[0]);result[1]=Math.min(f[e][1],result[1]);result[2]=Math.max(f[e][0],
+result[2]);result[3]=Math.max(f[e][1],result[3])}}else return r;return l?g.geo.proj.toGeodetic(result):result},centroid:function(a,d){switch(a.type){case "Point":return g.extend({},a);case "LineString":case "Polygon":var f=0,e=[0,0],l=g.merge([],a.type=="Polygon"?a.coordinates[0]:a.coordinates),m=1,n,t,u=false;if(!d&&g.geo.proj&&this._isGeodetic(l)){u=true;l=g.geo.proj.fromGeodetic(l)}for(;m<=l.length;m++){n=m%l.length;t=l[m-1][0]*l[n][1]-l[n][0]*l[m-1][1];f+=t;e[0]+=(l[m-1][0]+l[n][0])*t;e[1]+=(l[m-
+1][1]+l[n][1])*t}if(f==0)if(l.length>0){e[0]=l[0][0];e[1]=l[0][1];return{type:"Point",coordinates:u?g.geo.proj.toGeodetic(e):e}}else break;f*=3;e[0]/=f;e[1]/=f;return{type:"Point",coordinates:u?g.geo.proj.toGeodetic(e):e}}return r},contains:function(a,d){if(a.type!="Polygon")return false;switch(d.type){case "Point":return this._containsPolygonPoint(a.coordinates,d.coordinates);case "LineString":return this._containsPolygonLineString(a.coordinates,d.coordinates);case "Polygon":return this._containsPolygonLineString(a.coordinates,
+d.coordinates[0]);default:return false}},_containsPolygonPoint:function(a,d){if(a.length==0||a[0].length<4)return false;for(var f=0,e=a[0][0],l=1,m;l<a[0].length;l++){m=a[0][l];if(e[1]<=d[1]&&d[1]<m[1]||m[1]<=d[1]&&d[1]<e[1]&&(d[0]<e[0]||d[0]<m[0])){e=e[0]+(m[0]-e[0])*(d[1]-e[1])/(m[1]-e[1]);e>d[0]&&f++}e=m}return f%2==1},_containsPolygonLineString:function(a,d){for(var f=0;f<d.length;f++)if(!this._containsPolygonPoint(a,d[f]))return false;return true},distance:function(a,d,f){var e=!f&&g.geo.proj&&
+this._isGeodetic(a.coordinates)?g.geo.proj.fromGeodetic(a.coordinates):a.coordinates;f=!f&&g.geo.proj&&this._isGeodetic(d.coordinates)?g.geo.proj.fromGeodetic(d.coordinates):d.coordinates;switch(a.type){case "Point":switch(d.type){case "Point":return this._distancePointPoint(f,e);case "LineString":return this._distanceLineStringPoint(f,e);case "Polygon":return this._containsPolygonPoint(f,e)?0:this._distanceLineStringPoint(f[0],e);default:return r}case "LineString":switch(d.type){case "Point":return this._distanceLineStringPoint(e,
+f);case "LineString":return this._distanceLineStringLineString(e,f);case "Polygon":return this._containsPolygonLineString(f,e)?0:this._distanceLineStringLineString(f[0],e);default:return r}case "Polygon":switch(d.type){case "Point":return this._containsPolygonPoint(e,f)?0:this._distanceLineStringPoint(e[0],f);case "LineString":return this._containsPolygonLineString(e,f)?0:this._distanceLineStringLineString(e[0],f);case "Polygon":return this._containsPolygonLineString(e,f[0])?0:this._distanceLineStringLineString(e[0],
+f[0]);default:return r}}},_distancePointPoint:function(a,d){var f=d[0]-a[0],e=d[1]-a[1];return Math.sqrt(f*f+e*e)},_distanceLineStringPoint:function(a,d){var f=b;if(a.length>0){var e=a[0],l=d[0]-e[0],m=d[1]-e[1];if(a.length==1)return Math.sqrt(l*l+m*m);else for(var n=1;n<a.length;n++){var t=a[n],u=d[0]-t[0],w=d[1]-t[1];e=this._distanceSegmentPoint(t[0]-e[0],t[1]-e[1],l,m,u,w);if(e==0)return 0;if(e<f)f=e;e=t;l=u;m=w}}return Math.sqrt(f)},_distanceSegmentPoint:function(a,d,f,e,l,m){var n=a*f+d*e;if(n<=
+0)return f*f+e*e;a=a*a+d*d;if(n>=a)return l*l+m*m;return f*f+e*e-n*n/a},_distanceLineStringLineString:function(a,d){for(var f=b,e=0;e<d.length;e++)f=Math.min(f,this._distanceLineStringPoint(a,d[e]));return f},_buffer:function(a,d,f){var e=false,l=a.coordinates;if(!f&&g.geo.proj&&this._isGeodetic(a.coordinates)){e=true;l=g.geo.proj.fromGeodetic(a.coordinates)}switch(a.type){case "Point":a=[];f=0;for(var m;f<=180;f++){m=f*360/180*(Math.PI/180);a.push([l[0]+Math.cos(m)*d,l[1]+Math.sin(m)*d])}return{type:"Polygon",
+coordinates:[e?g.geo.proj.toGeodetic(a):a]};default:return r}},_flatten:function(a){var d=[],f=0;switch(a.type){case "Feature":g.merge(d,this._flatten(a.geometry));break;case "FeatureCollection":for(;f<a.features.length;f++)g.merge(d,this._flatten(a.features[f].geometry));break;case "GeometryCollection":for(;f<a.geometries.length;f++)g.merge(d,this._flatten(a.geometries[f]));break;default:d[0]=a}return d},length:function(a,d){var f=0,e,l=1,m,n;switch(a.type){case "Point":return 0;case "LineString":e=
+a.coordinates;break;case "Polygon":e=a.coordinates[0]}if(e){if(!d&&g.geo.proj&&this._isGeodetic(e))e=g.geo.proj.fromGeodetic(e);for(;l<e.length;l++){m=e[l][0]-e[l-1][0];n=e[l][1]-e[l-1][1];f+=Math.sqrt(m*m+n*n)}return f}},area:function(a,d){var f=0,e,l=1,m;switch(a.type){case "Point":case "LineString":return 0;case "Polygon":e=a.coordinates[0]}if(e){if(!d&&g.geo.proj&&this._isGeodetic(e))e=g.geo.proj.fromGeodetic(e);for(;l<=e.length;l++){m=l%e.length;f+=(e[l-1][0]-e[m][0])*(e[l-1][1]+e[m][1])/2}return Math.abs(f)}},
+pointAlong:function(a,d,f){var e=0,l=0,m=0,n,t=[],u=1,w=false;switch(a.type){case "Point":return g.extend({},a);case "LineString":n=a.coordinates;break;case "Polygon":n=a.coordinates[0]}if(n)if(d===0)return{type:"Point",coordinates:[n[0][0],n[0][1]]};else if(d===1){u=n.length-1;return{type:"Point",coordinates:[n[u][0],n[u][1]]}}else{if(!f&&g.geo.proj&&this._isGeodetic(n)){w=true;n=g.geo.proj.fromGeodetic(n)}for(;u<n.length;u++){a=n[u][0]-n[u-1][0];f=n[u][1]-n[u-1][1];a=Math.sqrt(a*a+f*f);t.push(a);
+e+=a}for(u=0;u<t.length&&m<d;u++){l=m;m+=t[u]/e}d=d-l;e=n[u-1];n=n[u];n=[e[0]+d*(n[0]-e[0]),e[1]+d*(n[1]-e[1])];return{type:"Point",coordinates:w?g.geo.proj.toGeodetic(n):n}}},_WKT:function(){function a(e){if(e&&e.length){for(var l=[],m=0;m<e.length;m++)l.push(e[m].join(" "));return"("+l+")"}else return"EMPTY"}function d(e){if(e&&e.length){for(var l=[],m=0;m<e.length;m++)l.push(a(e[m]));return"("+l+")"}else return"EMTPY"}function f(e){if(e&&e.type)switch(e.type){case "Point":return"POINT "+(e.coordinates&&
+e.coordinates.length?"("+e.coordinates.join(" ")+")":"EMPTY");case "LineString":return"LINESTRING "+a(e.coordinates);case "Polygon":return"POLYGON "+d(e.coordinates);case "MultiPoint":return"MULTIPOINT "+a(e.coordinates);case "MultiLineString":return"MULTILINSTRING "+d(e.coordinates);case "MultiPolygon":if((e=e.coordinates)&&e.length){for(var l=[],m=0;m<e.length;m++)l.push(d(e[m]));e="("+l+")"}else e="EMPTY";return"MULTIPOLYGON "+e;case "GeometryCollection":if((e=e.geometries)&&e.length){l=[];for(m=
+0;m<e.length;m++)l.push(f(e[m]));e="("+e+")"}else e="EMPTY";return"GEOMETRYCOLLECTION "+e;default:return""}else return""}return{stringify:f,parse:function(e){e=g.trim(e);var l=e.indexOf(" "),m=e.substr(l+1);switch(e.substr(0,l).toUpperCase()){case "POINT":return(e=m.match(/\(\s*([\d\.-]+)\s+([\d\.-]+)\s*\)/))&&e.length>2?{type:"Point",coordinates:[parseFloat(e[1]),parseFloat(e[2])]}:null;case "LINESTRING":m=m.match(/\s*\((.*)\)/);e=[];var n;l=0;if(m.length>1){for(m=m[1].match(/[\d\.-]+\s+[\d\.-]+/g);l<
+m.length;l++){n=m[l].match(/\s*([\d\.-]+)\s+([\d\.-]+)\s*/);e[l]=[parseFloat(n[1]),parseFloat(n[2])]}e={type:"LineString",coordinates:e}}else e=null;return e;case "POLYGON":m=m.match(/\s*\(\s*\((.*)\)\s*\)/);e=[];l=0;if(m.length>1){for(m=m[1].match(/[\d\.-]+\s+[\d\.-]+/g);l<m.length;l++){n=m[l].match(/\s*([\d\.-]+)\s+([\d\.-]+)\s*/);e[l]=[parseFloat(n[1]),parseFloat(n[2])]}e={type:"Polygon",coordinates:[e]}}else e=null;return e;default:return null}}}}(),proj:function(){return{fromGeodeticPos:function(a){if(!a)debugger;
+return[6378137*a[0]*0.017453292519943295,6378137*Math.log(Math.tan(0.7853981633974483+a[1]*0.017453292519943295/2))]},fromGeodetic:function(a){if(!g.geo._isGeodetic(a))return a;var d=g.isArray(a[0]),f=this.fromGeodeticPos;if(!d&&a.length==4){d=f([a[0],a[1]]);a=f([a[2],a[3]]);return[d[0],d[1],a[0],a[1]]}else{var e=d&&g.isArray(a[0][0]),l=e&&g.isArray(a[0][0][0]),m=[],n,t,u;if(!l){if(!e){d||(a=[a]);a=[a]}a=[a]}for(n=0;n<a.length;n++){m[n]=[];for(t=0;t<a[n].length;t++){m[n][t]=[];for(u=0;u<a[n][t].length;u++)m[n][t][u]=
+f(a[n][t][u])}}return l?m:e?m[0]:d?m[0][0]:m[0][0][0]}},toGeodeticPos:function(a){return[a[0]/6378137*57.29577951308232,(1.5707963267948966-2*Math.atan(1/Math.exp(a[1]/6378137)))*57.29577951308232]},toGeodetic:function(a){if(g.geo._isGeodetic(a))return a;var d=g.isArray(a[0]),f=this.toGeodeticPos;if(!d&&a.length==4){d=f([a[0],a[1]]);a=f([a[2],a[3]]);return[d[0],d[1],a[0],a[1]]}else{var e=d&&g.isArray(a[0][0]),l=e&&g.isArray(a[0][0][0]),m=[];if(!l){if(!e){d||(a=[a]);a=[a]}a=[a]}for(i=0;i<a.length;i++){m[i]=
+[];for(j=0;j<a[i].length;j++){m[i][j]=[];for(k=0;k<a[i][j].length;k++)m[i][j][k]=f(a[i][j][k])}}return l?m:e?m[0]:d?m[0][0]:m[0][0][0]}}}}(),_serviceTypes:{}}})(jQuery,this);
+(function(g,q){var r=function(){for(var b=5,c=document.createElement("div"),a=c.all||[];c.innerHTML="<!--[if gt IE "+ ++b+"]><br><![endif]--\>",a[0];);return b>6?b:!b}();g.widget("geo.geographics",{_$elem:q,_options:{},_trueCanvas:true,_width:0,_height:0,_$canvas:q,_context:q,_$labelsContainer:q,options:{style:{borderRadius:"8px",color:"#7f0000",fillOpacity:0.2,height:"8px",opacity:1,strokeOpacity:1,strokeWidth:"2px",visibility:"visible",width:"8px"}},_create:function(){this._$elem=this.element;this._options=
+this.options;this._$elem.css({display:"inline-block",overflow:"hidden",textAlign:"left"});this._$elem.css("position")=="static"&&this._$elem.css("position","relative");this._$elem.addClass("geo-graphics");this._width=this._$elem.width();this._height=this._$elem.height();if(!(this._width&&this._height)){this._width=parseInt(this._$elem.css("width"));this._height=parseInt(this._$elem.css("height"))}var b="width:"+this._width+"px;height:"+this._height+"px;",c='width="'+this._width+'" height="'+this._height+
+'"';if(document.createElement("canvas").getContext){this._$elem.append("<canvas "+c+' style="position:absolute;left:0;top:0;margin:0;padding:0;"></canvas>');this._$canvas=this._$elem.children(":last");this._context=this._$canvas[0].getContext("2d")}else if(r<=8){this._trueCanvas=false;this._$elem.append("<div "+c+' style="position:absolute;left:0;top:0;margin:0;padding:0;'+b+'"></div>');this._$canvas=this._$elem.children(":last");G_vmlCanvasManager.initElement(this._$canvas[0]);this._context=this._$canvas[0].getContext("2d");
+this._$canvas.children().css({backgroundColor:"transparent",width:this._width,height:this._height})}this._$elem.append('<div class="geo-labels-container" style="position:absolute;left:0;top:0;margin:0;padding:0;'+b+'"></div>');this._$labelsContainer=this._$elem.children(":last")},_setOption:function(b,c){if(b=="style")c=g.extend({},this._options.style,c);g.Widget.prototype._setOption.apply(this,arguments)},destroy:function(){g.Widget.prototype.destroy.apply(this,arguments);this._$elem.html("");this._$elem.removeClass("geo-graphics")},
+clear:function(){this._context.clearRect(0,0,this._width,this._height);this._$labelsContainer.html("")},drawArc:function(b,c,a,d){d=this._getGraphicStyle(d);if(d.visibility!="hidden"&&d.opacity>0&&d.widthValue>0&&d.heightValue>0){var f=Math.min(d.widthValue,d.heightValue)/2;c=c*Math.PI/180;a=a*Math.PI/180;this._context.save();this._context.translate(b[0],b[1]);d.widthValue>d.heightValue?this._context.scale(d.widthValue/d.heightValue,1):this._context.scale(1,d.heightValue/d.widthValue);this._context.beginPath();
+this._context.arc(0,0,f,c,a,false);this._trueCanvas&&this._context.restore();if(d.doFill){this._context.fillStyle=d.fill;this._context.globalAlpha=d.opacity*d.fillOpacity;this._context.fill()}if(d.doStroke){this._context.lineJoin="round";this._context.lineWidth=d.strokeWidthValue;this._context.strokeStyle=d.stroke;this._context.globalAlpha=d.opacity*d.strokeOpacity;this._context.stroke()}this._trueCanvas||this._context.restore()}},drawPoint:function(b,c){c=this._getGraphicStyle(c);if(c.widthValue==
+c.heightValue&&c.heightValue==c.borderRadiusValue)this.drawArc(b,0,360,c);else if(c.visibility!="hidden"&&c.opacity>0){c.borderRadiusValue=Math.min(Math.min(c.widthValue,c.heightValue)/2,c.borderRadiusValue);b[0]-=c.widthValue/2;b[1]-=c.heightValue/2;this._context.beginPath();this._context.moveTo(b[0]+c.borderRadiusValue,b[1]);this._context.lineTo(b[0]+c.widthValue-c.borderRadiusValue,b[1]);this._context.quadraticCurveTo(b[0]+c.widthValue,b[1],b[0]+c.widthValue,b[1]+c.borderRadiusValue);this._context.lineTo(b[0]+
+c.widthValue,b[1]+c.heightValue-c.borderRadiusValue);this._context.quadraticCurveTo(b[0]+c.widthValue,b[1]+c.heightValue,b[0]+c.widthValue-c.borderRadiusValue,b[1]+c.heightValue);this._context.lineTo(b[0]+c.borderRadiusValue,b[1]+c.heightValue);this._context.quadraticCurveTo(b[0],b[1]+c.heightValue,b[0],b[1]+c.heightValue-c.borderRadiusValue);this._context.lineTo(b[0],b[1]+c.borderRadiusValue);this._context.quadraticCurveTo(b[0],b[1],b[0]+c.borderRadiusValue,b[1]);this._context.closePath();if(c.doFill){this._context.fillStyle=
+c.fill;this._context.globalAlpha=c.opacity*c.fillOpacity;this._context.fill()}if(c.doStroke){this._context.lineJoin="round";this._context.lineWidth=c.strokeWidthValue;this._context.strokeStyle=c.stroke;this._context.globalAlpha=c.opacity*c.strokeOpacity;this._context.stroke()}}},drawLineString:function(b,c){this._drawLines([b],false,c)},drawPolygon:function(b,c){this._drawLines(b,true,c)},drawBbox:function(b,c){this._drawLines([[[b[0],b[1]],[b[0],b[3]],[b[2],b[3]],[b[2],b[1]],[b[0],b[1]]]],true,c)},
+drawLabel:function(b,c){this._$labelsContainer.append('<div class="geo-label" style="position:absolute; left:'+b[0]+"px; top:"+b[1]+'px;">'+c+"</div>")},resize:function(){this._width=this._$elem.width();this._height=this._$elem.height();if(!(this._width&&this._height)){this._width=parseInt(this._$elem.css("width"));this._height=parseInt(this._$elem.css("height"))}if(this._trueCanvas){this._$canvas[0].width=this._width;this._$canvas[0].height=this._height}this._$labelsContainer.css({width:this._width,
+height:this._height})},_getGraphicStyle:function(b){function c(a){a=parseInt(a);return+a+""===a?+a:a}b=g.extend({},this._options.style,b);b.borderRadiusValue=c(b.borderRadius);b.fill=b.fill||b.color;b.doFill=b.fill&&b.fillOpacity>0;b.stroke=b.stroke||b.color;b.strokeWidthValue=c(b.strokeWidth);b.doStroke=b.stroke&&b.strokeOpacity>0&&b.strokeWidthValue>0;b.widthValue=c(b.width);b.heightValue=c(b.height);return b},_drawLines:function(b,c,a){if(!(!b||!b.length||b[0].length<2)){a=this._getGraphicStyle(a);
+var d,f;if(a.visibility!="hidden"&&a.opacity>0){this._context.beginPath();this._context.moveTo(b[0][0][0],b[0][0][1]);for(d=0;d<b.length;d++)for(f=0;f<b[d].length;f++)this._context.lineTo(b[d][f][0],b[d][f][1]);c&&this._context.closePath();if(c&&a.doFill){this._context.fillStyle=a.fill;this._context.globalAlpha=a.opacity*a.fillOpacity;this._context.fill()}if(a.doStroke){this._context.lineCap=this._context.lineJoin="round";this._context.lineWidth=a.strokeWidthValue;this._context.strokeStyle=a.stroke;
+this._context.globalAlpha=a.opacity*a.strokeOpacity;this._context.stroke()}}}}})})(jQuery);
+(function(g,q){var r=function(){for(var b=5,c=document.createElement("div"),a=c.all||[];c.innerHTML="<!--[if gt IE "+ ++b+"]><br><![endif]--\>",a[0];);return b>6?b:!b}();g.widget("geo.geomap",{_$elem:q,_map:q,_created:false,_contentBounds:{},_$resizeContainer:q,_$eventTarget:q,_$contentFrame:q,_$existingChildren:q,_$attrList:q,_$servicesContainer:q,_$panContainer:q,_$shapesContainer:q,_$drawContainer:q,_$measureContainer:q,_$measureLabel:q,_dpi:96,_currentServices:[],_center:q,_pixelSize:q,_centerMax:q,
+_pixelSizeMax:q,_userGeodetic:true,_wheelTimeout:null,_wheelLevel:0,_zoomFactor:2,_fullZoomFactor:2,_partialZoomFactor:1.18920711500273,_mouseDown:q,_inOp:q,_toolPan:q,_shiftZoom:q,_anchor:q,_current:q,_downDate:q,_moveDate:q,_clickDate:q,_lastMove:q,_lastDrag:q,_windowHandler:null,_resizeTimeout:null,_panning:q,_velocity:q,_friction:q,_supportTouch:q,_softDblClick:q,_isTap:q,_isDbltap:q,_isMultiTouch:q,_multiTouchAnchor:q,_multiTouchAnchorBbox:q,_multiTouchCurrentBbox:q,_drawTimeout:null,_drawPixels:[],
+_drawCoords:[],_graphicShapes:[],_initOptions:{},_options:{},options:g.extend({},{bbox:[-180,-85,180,85],bboxMax:[-180,-85,180,85],center:[0,0],cursors:{"static":"default",pan:"url(data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAgACAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=), move",
+zoom:"crosshair",drawPoint:"crosshair",drawLineString:"crosshair",drawPolygon:"crosshair",measureLength:"crosshair",measureArea:"crosshair"},measureLabels:{length:"{{=length.toFixed( 2 )}} m",area:"{{=area.toFixed( 2 )}} sq m"},drawStyle:{},shapeStyle:{},mode:"pan",pannable:true,scroll:"default",services:[{"class":"osm",type:"tiled",src:function(b){return"http://tile.openstreetmap.org/"+b.zoom+"/"+b.tile.column+"/"+b.tile.row+".png"},attr:"© OpenStreetMap & contributors, CC-BY-SA"}],tilingScheme:{tileWidth:256,
+tileHeight:256,levels:18,basePixelSize:156543.03392799935,origin:[-2.0037508342787E7,2.0037508342787E7]},axisLayout:"map",zoom:0,pixelSize:0}),_createWidget:function(b,c){this._$elem=g(c);if(this._$elem.is(".geo-service")){var a=this._$elem.closest(".geo-content-frame");this._$elem.append('<div class="geo-shapes-container" style="position:absolute; left:0; top:0; width:'+a.css("width")+"; height:"+a.css("height")+'; margin:0; padding:0;"></div>');this._$shapesContainer=this._$elem.children(":last")}else{this._$elem.addClass("geo-map");
+this._initOptions=b||{};this._forcePosition(this._$elem);this._$elem.css("text-align","left");a=this._findMapSize();this._contentBounds={x:parseInt(this._$elem.css("padding-left")),y:parseInt(this._$elem.css("padding-top")),width:a.width,height:a.height};this._createChildren();this._center=this._centerMax=[0,0];this.options.pixelSize=this._pixelSize=this._pixelSizeMax=156543.03392799935;this._mouseDown=this._inOp=this._toolPan=this._shiftZoom=this._panning=this._isTap=this._isDbltap=false;this._anchor=
+[0,0];this._current=[0,0];this._lastMove=[0,0];this._lastDrag=[0,0];this._velocity=[0,0];this._friction=[0.8,0.8];this._downDate=this._moveDate=this._clickDate=0;this._drawPixels=[];this._drawCoords=[]}this._graphicShapes=[];g.Widget.prototype._createWidget.apply(this,arguments)},_create:function(){this._options=this.options;if(this._$elem.is(".geo-service")){this._map=this._$elem.data("geoMap");this._$shapesContainer.geographics();this._options.shapeStyle=this._$shapesContainer.geographics("option",
+"style")}else{this._map=this;this._softDblClick=(this._supportTouch="ontouchend"in document)||r==7;var b=this,c=this._supportTouch?"touchstart":"mousedown",a=this._supportTouch?"touchend touchcancel":"mouseup",d=this._supportTouch?"touchmove":"mousemove";g(document).keydown(g.proxy(this._document_keydown,this));this._$eventTarget.dblclick(g.proxy(this._eventTarget_dblclick,this));this._$eventTarget.bind(c,g.proxy(this._eventTarget_touchstart,this));c=this._$eventTarget[0].setCapture?this._$eventTarget:
+g(document);c.bind(d,g.proxy(this._dragTarget_touchmove,this));c.bind(a,g.proxy(this._dragTarget_touchstop,this));this._$eventTarget.mousewheel(g.proxy(this._eventTarget_mousewheel,this));this._windowHandler=function(){b._resizeTimeout&&clearTimeout(b._resizeTimeout);b._resizeTimeout=setTimeout(function(){b._created&&b._$elem.geomap("resize")},500)};g(window).resize(this._windowHandler);this._$drawContainer.geographics({style:this._initOptions.drawStyle||{}});this._options.drawStyle=this._$drawContainer.geographics("option",
+"style");this._$shapesContainer.geographics({style:this._initOptions.shapeStyle||{}});this._options.shapeStyle=this._$shapesContainer.geographics("option","style");if(this._initOptions){this._initOptions.tilingScheme&&this._setOption("tilingScheme",this._initOptions.tilingScheme,false);if(this._initOptions.services)this._options.services=g.merge([],this._initOptions.services);this._initOptions.bbox&&this._setOption("bbox",this._initOptions.bbox,false);this._initOptions.center&&this._setOption("center",
+this._initOptions.center,false);this._initOptions.zoom!==q&&this._setZoom(this._initOptions.zoom,false,false)}g.template("geoMeasureLength",this._options.measureLabels.length);g.template("geoMeasureArea",this._options.measureLabels.area);this._$eventTarget.css("cursor",this._options.cursors[this._options.mode]);this._createServices();this._refresh();this._created=true}},_setOption:function(b,c,a){if(b!="pixelSize"){a=a===q||a;this._$elem.is(".geo-map")&&this._panFinalize();switch(b){case "bbox":if(this._userGeodetic=
+g.geo.proj&&g.geo._isGeodetic(c))c=g.geo.proj.fromGeodetic(c);this._setBbox(c,false,a);c=this._getBbox();break;case "center":if(this._userGeodetic=g.geo.proj&&g.geo._isGeodetic(c))c=g.geo.proj.fromGeodetic(c);this._setCenterAndSize(c,this._pixelSize,false,a);break;case "measureLabels":c=g.extend(this._options.measureLabels,c);g.template("geoMeasureLength",c.length);g.template("geoMeasureArea",c.area);break;case "drawStyle":if(this._$drawContainer){this._$drawContainer.geographics("option","style",
+c);c=this._$drawContainer.geographics("option","style")}break;case "shapeStyle":if(this._$shapesContainer){this._$shapesContainer.geographics("option","style",c);c=this._$shapesContainer.geographics("option","style")}break;case "mode":this._resetDrawing();this._$eventTarget.css("cursor",this._options.cursors[c]);break;case "zoom":this._setZoom(c,false,a)}g.Widget.prototype._setOption.apply(this,arguments);switch(b){case "bbox":case "center":if(this._userGeodetic){this._options.bbox=g.geo.proj.toGeodetic(this._options.bbox);
+this._options.center=g.geo.proj.toGeodetic(this._center)}break;case "tilingScheme":if(c!=null){this._pixelSizeMax=this._getPixelSize(0);this._centerMax=[c.origin[0]+this._pixelSizeMax*c.tileWidth/2,c.origin[1]+this._pixelSizeMax*c.tileHeight/2]}break;case "bboxMax":this._pixelSizeMax=this._getPixelSize(0);this._centerMax=g.geo.proj&&g.geo._isGeodetic(c)?g.geo.center(g.geo.proj.fromGeodetic(c)):g.geo.center(c);break;case "services":this._createServices();a&&this._refresh();break;case "shapeStyle":if(a){this._$shapesContainer.geographics("clear");
+this._refreshShapes(this._$shapesContainer,this._graphicShapes,this._graphicShapes,this._graphicShapes)}}}},destroy:function(){if(this._$elem.is(".geo-service")){this._$shapesContainer.geographics("destroy");this._$shapesContainer=q}else{this._created=false;g(window).unbind("resize",this._windowHandler);for(var b=0;b<this._currentServices.length;b++){this._currentServices[b].serviceContainer.geomap("destroy");g.geo._serviceTypes[this._currentServices[b].type].destroy(this,this._$servicesContainer,
+this._currentServices[b])}this._$shapesContainer.geographics("destroy");this._$shapesContainer=q;this._$drawContainer.geographics("destroy");this._$drawContainer=q;this._$existingChildren.detach();this._$elem.html("");this._$elem.append(this._$existingChildren);this._$elem.removeClass("geo-map")}g.Widget.prototype.destroy.apply(this,arguments)},toMap:function(b){b=this._toMap(b);return this._userGeodetic?g.geo.proj.toGeodetic(b):b},toPixel:function(b,c,a){return this._toPixel(g.geo.proj?g.geo.proj.fromGeodetic(b):
+b,c,a)},opacity:function(b,c){if(this._$elem.is(".geo-service"))this._$elem.closest(".geo-map").geomap("opacity",b,this._$elem);else if(b>=0||b<=1)for(var a=0;a<this._currentServices.length;a++){var d=this._currentServices[a];if(!c||d.serviceContainer[0]==c[0]){d.style.opacity=b;g.geo._serviceTypes[d.type].opacity(this,d)}}},toggle:function(b,c){if(this._$elem.is(".geo-service"))this._$elem.closest(".geo-map").geomap("toggle",b,this._$elem);else for(var a=0;a<this._currentServices.length;a++){var d=
+this._currentServices[a];if(!c||d.serviceContainer[0]==c[0]){if(b===q)b=d.style.visibility!=="visible";d.style.visibility=b?"visible":"hidden";d.serviceContainer.toggle(b);b&&g.geo._serviceTypes[d.type].refresh(this,d)}}},zoom:function(b){b!=null&&this._setZoom(this._options.zoom+b,false,true)},refresh:function(){this._refresh()},resize:function(){var b=this._findMapSize(),c=b.width/2-this._contentBounds.width/2,a=b.height/2-this._contentBounds.height/2,d;this._contentBounds={x:parseInt(this._$elem.css("padding-left")),
+y:parseInt(this._$elem.css("padding-top")),width:b.width,height:b.height};this._$resizeContainer.css({width:b.width,height:b.height});for(d=0;d<this._currentServices.length;d++)g.geo._serviceTypes[this._currentServices[d].type].resize(this,this._currentServices[d]);this._$elem.find(".geo-graphics").css({width:b.width,height:b.height}).geographics("resize");for(d=0;d<this._drawPixels.length;d++){this._drawPixels[d][0]+=c;this._drawPixels[d][1]+=a}this._setCenterAndSize(this._center,this._pixelSize,
+false,true)},append:function(b){if(b&&g.isPlainObject(b)){var c,a,d,f,e,l;c=b.type=="FeatureCollection"?b.features:g.isArray(b)?b:[b];for(d=1;d<arguments.length;d++){a=arguments[d];if(typeof a==="object")f=a;else if(typeof a==="number"||typeof a==="string")e=a;else if(typeof a==="boolean")l=a}for(d=0;d<c.length;d++){if(c[d].type!="Point"){a=g.geo.bbox(c[d]);if(g.geo.proj&&g.geo._isGeodetic(a))a=g.geo.proj.fromGeodetic(a);g.data(c[d],"geoBbox",a)}this._graphicShapes.push({shape:c[d],style:f,label:e})}if(l===
+q||l)this._refresh()}},empty:function(b){for(var c=0;c<this._graphicShapes.length;c++)g.removeData(this._graphicShapes[c].shape,"geoBbox");this._graphicShapes=[];if(b===q||b)this._refresh()},find:function(b,c){var a=g.isPlainObject(b);a&&this._map.toPixel(b.coordinates);for(var d=this._map._pixelSize*c,f=[],e,l,m,n=0;n<this._graphicShapes.length;n++){e=this._graphicShapes[n];if(a)if(e.shape.type=="Point")g.geo.distance(e.shape,b)<=d&&f.push(e.shape);else{l=g.data(e.shape,"geoBbox");l={type:"Polygon",
+coordinates:[[[l[0],l[1]],[l[0],l[3]],[l[2],l[3]],[l[2],l[1]],[l[0],l[1]]]]};m={type:"Point",coordinates:g.geo.proj&&g.geo._isGeodetic(b.coordinates)?g.geo.proj.fromGeodetic(b.coordinates):b.coordinates};if(g.geo.distance(l,m,true)<=d){l=g.geo._flatten(e.shape);for(m=0;m<l.length;m++)if(g.geo.distance(l[m],b)<=d){f.push(e.shape);break}}}else f.push(e.shape)}this._$elem.is(".geo-map")&&this._$elem.find(".geo-service").each(function(){f=g.merge(f,g(this).geomap("find",b,c))});return f},remove:function(b,
+c){for(var a=0;a<this._graphicShapes.length;a++)if(this._graphicShapes[a].shape==b){g.removeData(b,"geoBbox");var d=this._graphicShapes.slice(a+1);this._graphicShapes.length=a;this._graphicShapes.push.apply(this._graphicShapes,d);break}if(c===q||c)this._refresh()},_getBbox:function(b,c){b=b||this._center;c=c||this._pixelSize;var a=this._contentBounds.width/2*c,d=this._contentBounds.height/2*c;return[b[0]-a,b[1]-d,b[0]+a,b[1]+d]},_setBbox:function(b,c,a){var d=[b[0]+(b[2]-b[0])/2,b[1]+(b[3]-b[1])/
+2];b=Math.max(g.geo.width(b,true)/this._contentBounds.width,g.geo.height(b,true)/this._contentBounds.height);if(this._options.tilingScheme)b=this._getPixelSize(this._getZoom(d,b));else if(this._getZoom(d,b)<0)b=this._pixelSizeMax;this._setCenterAndSize(d,b,c,a)},_getBboxMax:function(){var b=this._contentBounds.width/2*this._pixelSizeMax,c=this._contentBounds.height/2*this._pixelSizeMax;return[this._centerMax[0]-b,this._centerMax[1]-c,this._centerMax[0]+b,this._centerMax[1]+c]},_getCenter:function(){return this._center},
+_getContentBounds:function(){return this._contentBounds},_getServicesContainer:function(){return this._$servicesContainer},_getZoom:function(b,c){b=b||this._center;c=c||this._pixelSize;var a=this._options.tilingScheme;if(a)if(a.pixelSizes!=null){for(var d=Math.floor(c*1E3),f=a.pixelSizes.length-1;f>=0;f--)if(Math.floor(a.pixelSizes[f]*1E3)>=d)return f;return 0}else return Math.max(Math.round(Math.log(a.basePixelSize/c)/Math.log(2)),0);else{d=this._contentBounds.width/this._contentBounds.height;a=
+g.geo.reaspect(this._getBbox(b,c),d,true);d=g.geo.reaspect(this._getBboxMax(),d,true);return Math.max(Math.round(Math.log(g.geo.width(d,true)/g.geo.width(a,true))/Math.log(this._zoomFactor)),0)}},_setZoom:function(b,c,a){b=Math.max(b,0);this._setCenterAndSize(this._center,this._getPixelSize(b),c,a)},_createChildren:function(){this._$existingChildren=this._$elem.children().detach();this._forcePosition(this._$existingChildren);this._$existingChildren.css("-moz-user-select","none");var b="width:"+this._contentBounds.width+
+"px; height:"+this._contentBounds.height+"px; margin:0; padding:0;";this._$elem.prepend('<div class="geo-event-target geo-content-frame" style="position:absolute; left:'+this._contentBounds.x+"px; top:"+this._contentBounds.y+"px;"+b+'overflow:hidden; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none;" unselectable="on"></div>');this._$eventTarget=this._$contentFrame=this._$elem.children(":first");this._$contentFrame.append('<div class="geo-services-container" style="position:absolute; left:0; top:0;'+
+b+'"></div>');this._$servicesContainer=this._$contentFrame.children(":last");this._$contentFrame.append('<div class="geo-shapes-container" style="position:absolute; left:0; top:0;'+b+'"></div>');this._$shapesContainer=this._$contentFrame.children(":last");this._$contentFrame.append('<ul style="position: absolute; bottom: 8px; left: 8px; list-style-type: none; max-width: 50%; padding: 0; margin: 0;"></ul>');this._$attrList=this._$contentFrame.children(":last");this._$contentFrame.append('<div class="geo-draw-container" style="position:absolute; left:0; top:0;'+
+b+'"></div>');this._$drawContainer=this._$contentFrame.children(":last");this._$contentFrame.append('<div class="geo-measure-container" style="position:absolute; left:0; top:0;'+b+'"><div class="geo-measure-label" style="position:absolute; left:0; top:0;; display: none;"></div></div>');this._$measureContainer=this._$contentFrame.children(":last");this._$measureLabel=this._$measureContainer.children();this._$panContainer=g([this._$shapesContainer[0],this._$drawContainer[0],this._$measureContainer[0]]);
+this._$resizeContainer=g([this._$contentFrame[0],this._$servicesContainer[0],this._$eventTarget[0],this._$measureContainer[0]]);this._$contentFrame.append(this._$existingChildren);g("#geo-measure-style").length||g("head").prepend('<style type="text/css" id="geo-measure-style">.geo-measure-label { margin: 4px 0 0 6px; font-family: sans-serif;'+(r?"letter-spacing: 2px; color: #444; filter:progid:DXImageTransform.Microsoft.DropShadow(Color=white, OffX=1, OffY=2, Positive=true);":"color: #000; text-shadow: #fff 1px 2px; font-weight: bold;")+
+" }</style>")},_createServices:function(){var b,c;for(c=0;c<this._currentServices.length;c++){this._currentServices[c].serviceContainer.geomap("destroy");g.geo._serviceTypes[this._currentServices[c].type].destroy(this,this._$servicesContainer,this._currentServices[c])}this._currentServices=[];this._$servicesContainer.html("");this._$attrList.html("");for(c=0;c<this._options.services.length;c++){b=this._currentServices[c]=g.extend({},this._options.services[c]);b.style=g.extend({visibility:"visible",
+opacity:1},b.style);this._$servicesContainer.append("<div "+(b.id?' id="'+b.id+'"':"")+('class="geo-service '+(b["class"]?b["class"]:"")+'"')+' style="position:absolute; left:0; top:0; width:32px; height:32px; margin:0; padding:0; display:'+(b.style.visibility==="visible"?"block":"none")+';"></div>');serviceContainer=this._$servicesContainer.children(":last");this._currentServices[c].serviceContainer=serviceContainer;g.geo._serviceTypes[b.type].create(this,serviceContainer,b,c);serviceContainer.data("geoMap",
+this).geomap();b.attr&&this._$attrList.append("<li>"+b.attr+"</li>")}this._$attrList.find("a").css({position:"relative",zIndex:100})},_refreshDrawing:function(){this._$drawContainer.geographics("clear");if(this._drawPixels.length>0){var b=this._options.mode,c=this._drawPixels,a=this._drawCoords,d,f;switch(b){case "measureLength":b="drawLineString";f={type:"LineString",coordinates:a};d=g.render({length:g.geo.length(f,true)},"geoMeasureLength");f=g.merge([],c[c.length-1]);break;case "measureArea":b=
+"drawPolygon";f={type:"Polygon",coordinates:[g.merge([],a)]};f.coordinates[0].push(a[0]);d=g.render({area:g.geo.area(f,true)},"geoMeasureArea");f=g.merge([],c[c.length-1]);c=[c];break;case "drawPolygon":c=[c]}this._$drawContainer.geographics(b,c);if(d){this._$measureLabel.html(d);b=this._contentBounds.width-(this._$measureLabel.outerWidth(true)+f[0]);c=this._contentBounds.height-(this._$measureLabel.outerHeight(true)+f[1]);if(b<0)f[0]+=b;if(c<0)f[1]+=c;this._$measureLabel.css({left:f[0],top:f[1]}).show()}}},
+_resetDrawing:function(){this._drawPixels=[];this._drawCoords=[];this._$drawContainer.geographics("clear");this._$measureLabel.hide()},_refreshShapes:function(b,c,a,d,f,e){var l,m,n,t,u,w,B,I=this._map._getBbox(f,e);for(l=0;l<c.length;l++){n=c[l].shape||c[l];n=n.geometry||n;m=g.data(n,"geoBbox");if(!(m&&g.geo._bboxDisjoint(I,m))){t=g.isArray(a)?a[l].style:a;u=g.isArray(d)?d[l].label:d;w=u!==q;B=q;switch(n.type){case "Point":B=this._map.toPixel(n.coordinates,f,e);this._$shapesContainer.geographics("drawPoint",
+B,t);break;case "LineString":this._$shapesContainer.geographics("drawLineString",this._map.toPixel(n.coordinates,f,e),t);if(w)B=this._map.toPixel(g.geo.pointAlong(n,0.5).coordinates,f,e);break;case "Polygon":this._$shapesContainer.geographics("drawPolygon",this._map.toPixel(n.coordinates,f,e),t);if(w)B=this._map.toPixel(g.geo.centroid(n).coordinates,f,e);break;case "MultiPoint":for(m=0;m<n.coordinates.length;m++)this._$shapesContainer.geographics("drawPoint",this._map.toPixel(n.coordinates[m],f,e),
+t);if(w)B=this._map.toPixel(g.geo.centroid(n).coordinates,f,e);break;case "MultiLineString":for(m=0;m<n.coordinates.length;m++)this._$shapesContainer.geographics("drawLineString",this._map.toPixel(n.coordinates[m],f,e),t);if(w)B=this._map.toPixel(g.geo.centroid(n).coordinates,f,e);break;case "MultiPolygon":for(m=0;m<n.coordinates.length;m++)this._$shapesContainer.geographics("drawPolygon",this._map.toPixel(n.coordinates[m],f,e),t);if(w)B=this._map.toPixel(g.geo.centroid(n).coordinates,f,e);break;
+case "GeometryCollection":this._refreshShapes(b,n.geometries,t,u,f,e)}w&&B&&this._$shapesContainer.geographics("drawLabel",B,u)}}},_findMapSize:function(){for(var b={width:0,height:0},c=this._$elem;c.size()&&!(b.width>0&&b.height>0);){b={width:c.width(),height:c.height()};if(b.width<=0||b.height<=0)b={width:parseInt(c.css("width")),height:parseInt(c.css("height"))};c=c.parent()}return b},_forcePosition:function(b){var c=b.css("position");c!="relative"&&c!="absolute"&&c!="fixed"&&b.css("position",
+"relative")},_getPixelSize:function(b){var c=this._options.tilingScheme;if(c!=null){if(b===0)return c.pixelSizes!=null?c.pixelSizes[0]:c.basePixelSize;b=Math.round(b);b=Math.max(b,0);b=Math.min(b,(c.pixelSizes!=null?c.pixelSizes.length:c.levels)-1);return c.pixelSizes!=null?c.pixelSizes[b]:c.basePixelSize/Math.pow(2,b)}else{b=g.geo.scaleBy(this._getBboxMax(),1/Math.pow(this._zoomFactor,b),true);return Math.max(g.geo.width(b,true)/this._contentBounds.width,g.geo.height(b,true)/this._contentBounds.height)}},
+_getZoomCenterAndSize:function(b,c,a){c=Math.pow(a?this._fullZoomFactor:this._partialZoomFactor,-c);if(this._options.tilingScheme){c=this._getZoom(this._center,this._pixelSize*c);c=this._getPixelSize(c)}else{c=this._pixelSize*c;if(this._getZoom(this._center,c)<0)c=this._pixelSizeMax}a=c/this._pixelSize;b=this._toMap(b);a=[(this._center[0]-b[0])*a,(this._center[1]-b[1])*a];return{pixelSize:c,center:[b[0]+a[0],b[1]+a[1]]}},_mouseWheelFinish:function(){this._wheelTimeout=null;if(this._wheelLevel!=0){var b=
+this._getZoomCenterAndSize(this._anchor,this._wheelLevel,this._options.tilingScheme!=null);this._setCenterAndSize(b.center,b.pixelSize,true,true);this._wheelLevel=0}else this._refresh()},_panEnd:function(){this._velocity=[this._velocity[0]>0?Math.floor(this._velocity[0]*this._friction[0]):Math.ceil(this._velocity[0]*this._friction[0]),this._velocity[1]>0?Math.floor(this._velocity[1]*this._friction[1]):Math.ceil(this._velocity[1]*this._friction[1])];if(Math.abs(this._velocity[0])<4&&Math.abs(this._velocity[1])<
+4)this._panFinalize();else{this._current=[this._current[0]+this._velocity[0],this._current[1]+this._velocity[1]];this._panMove();setTimeout(g.proxy(this._panEnd,this),30)}},_panFinalize:function(){if(this._panning){this._velocity=[0,0];var b=-(this._current[0]-this._anchor[0])*this._pixelSize,c=(this._options.axisLayout==="image"?-1:1)*(this._current[1]-this._anchor[1])*this._pixelSize;this._$panContainer.css({left:0,top:0});this._$servicesContainer.find(".geo-shapes-container").css({left:0,top:0});
+this._setCenterAndSize([this._center[0]+b,this._center[1]+c],this._pixelSize,true,true);this._$eventTarget.css("cursor",this._options.cursors[this._options.mode]);this._inOp=false;this._anchor=this._current;this._mouseDown=this._toolPan=this._panning=false}},_panMove:function(){if(this._options.pannable){var b=this._current[0]-this._lastDrag[0],c=this._current[1]-this._lastDrag[1],a=0,d,f;if(this._toolPan||b>3||b<-3||c>3||c<-3){if(!this._toolPan){this._toolPan=true;this._$eventTarget.css("cursor",
+this._options.cursors.pan)}if(this._mouseDown)this._velocity=[b,c];if(b!=0||c!=0){this._panning=true;this._lastDrag=this._current;f={left:function(e,l){return parseInt(l)+b},top:function(e,l){return parseInt(l)+c}};for(a=0;a<this._currentServices.length;a++){d=this._currentServices[a];g.geo._serviceTypes[d.type].interactivePan(this,d,b,c);d.serviceContainer.find(".geo-shapes-container").css(f)}this._$panContainer.css(f)}}}},_refresh:function(){var b,c=0;if(this._$elem.is(".geo-map"))for(;c<this._currentServices.length;c++){b=
+this._currentServices[c];if(!this._mouseDown&&g.geo._serviceTypes[b.type]!==null){g.geo._serviceTypes[b.type].refresh(this,b);b.serviceContainer.geomap("refresh")}}if(this._$shapesContainer){this._$shapesContainer.geographics("clear");this._graphicShapes.length>0&&this._refreshShapes(this._$shapesContainer,this._graphicShapes,this._graphicShapes,this._graphicShapes)}},_setCenterAndSize:function(b,c,a,d){if(!(!g.isArray(b)||b.length!=2||typeof b[0]!=="number"||typeof b[1]!=="number")){if(this._pixelSize!=
+c){this._$elem.find(".geo-shapes-container").geographics("clear");for(var f=0;f<this._currentServices.length;f++){var e=this._currentServices[f];g.geo._serviceTypes[e.type].interactiveScale(this,e,b,c)}}this._center=g.merge([],b);this._options.pixelSize=this._pixelSize=c;if(this._userGeodetic){this._options.bbox=g.geo.proj.toGeodetic(this._getBbox());this._options.center=g.geo.proj.toGeodetic(this._center)}else{this._options.bbox=this._getBbox();this._options.center=g.merge([],b)}this._options.zoom=
+this._getZoom();if(this._drawCoords.length>0)this._drawPixels=this._toPixel(this._drawCoords);a&&this._trigger("bboxchange",window.event,{bbox:g.merge([],this._options.bbox)});if(d){this._refresh();this._refreshDrawing()}}},_toMap:function(b,c,a){c=c||this._center;a=a||this._pixelSize;var d=g.isArray(b[0]),f=d&&g.isArray(b[0][0]),e=f&&g.isArray(b[0][0][0]),l=this._contentBounds.width,m=this._contentBounds.height,n=l/2*a;a=m/2*a;c=[c[0]-n,c[1]-a,c[0]+n,c[1]+a];l=g.geo.width(c,true)/l;m=g.geo.height(c,
+true)/m;a=this._options.axisLayout==="image";var t=[],u,w,B;if(!e){if(!f){d||(b=[b]);b=[b]}b=[b]}for(u=0;u<b.length;u++){t[u]=[];for(w=0;w<b[u].length;w++){t[u][w]=[];for(B=0;B<b[u][w].length;B++){n=b[u][w][B][1]*m;t[u][w][B]=[c[0]+b[u][w][B][0]*l,a?c[1]+n:c[3]-n]}}}return e?t:f?t[0]:d?t[0][0]:t[0][0][0]},_toPixel:function(b,c,a){c=c||this._center;a=a||this._pixelSize;var d=g.isArray(b[0]),f=d&&g.isArray(b[0][0]),e=f&&g.isArray(b[0][0][0]),l=this._contentBounds.width,m=this._contentBounds.height,
+n=l/2*a;a=m/2*a;c=[c[0]-n,c[1]-a,c[0]+n,c[1]+a];var t=g.geo.width(c,true);a=g.geo.height(c,true);n=this._options.axisLayout==="image";l=l/t;m=m/a;a=[];var u,w;if(!e){if(!f){d||(b=[b]);b=[b]}b=[b]}for(t=0;t<b.length;t++){a[t]=[];for(u=0;u<b[t].length;u++){a[t][u]=[];for(w=0;w<b[t][u].length;w++)a[t][u][w]=[Math.round((b[t][u][w][0]-c[0])*l),Math.round((n?b[t][u][w][1]-c[1]:c[3]-b[t][u][w][1])*m)]}}return e?a:f?a[0]:d?a[0][0]:a[0][0][0]},_zoomTo:function(b,c,a,d){c=c<0?0:c;c=this._getPixelSize(c);this._setCenterAndSize(b,
+c,a,d)},_document_keydown:function(b){var c=this._drawCoords.length;if(c>0&&b.which==27)if(c<=2){this._resetDrawing();this._inOp=false}else{this._drawCoords[c-2]=g.merge([],this._drawCoords[c-1]);this._drawPixels[c-2]=g.merge([],this._drawPixels[c-1]);this._drawCoords.length--;this._drawPixels.length--;this._refreshDrawing()}},_eventTarget_dblclick_zoom:function(b){this._trigger("dblclick",b,{type:"Point",coordinates:this.toMap(this._current)});if(!b.isDefaultPrevented()){b=this._getZoomCenterAndSize(this._current,
+1,true);this._setCenterAndSize(b.center,b.pixelSize,true,true)}},_eventTarget_dblclick:function(b){if(this._options.mode!=="static"){this._panFinalize();if(this._drawTimeout){window.clearTimeout(this._drawTimeout);this._drawTimeout=null}g(b.currentTarget).offset();switch(this._options.mode){case "drawLineString":if(this._drawCoords.length>1&&!(this._drawCoords[0][0]==this._drawCoords[1][0]&&this._drawCoords[0][1]==this._drawCoords[1][1])){this._drawCoords.length--;this._trigger("shape",b,{type:"LineString",
+coordinates:this._userGeodetic?g.geo.proj.toGeodetic(this._drawCoords):this._drawCoords})}else this._eventTarget_dblclick_zoom(b);this._resetDrawing();break;case "drawPolygon":if(this._drawCoords.length>1&&!(this._drawCoords[0][0]==this._drawCoords[1][0]&&this._drawCoords[0][1]==this._drawCoords[1][1])){var c=this._drawCoords.length-1;if(c>2){this._drawCoords[c]=g.merge([],this._drawCoords[0]);this._trigger("shape",b,{type:"Polygon",coordinates:[this._userGeodetic?g.geo.proj.toGeodetic(this._drawCoords):
+this._drawCoords]})}}else this._eventTarget_dblclick_zoom(b);this._resetDrawing();break;case "measureLength":case "measureArea":this._resetDrawing();break;default:this._eventTarget_dblclick_zoom(b)}this._inOp=false}},_eventTarget_touchstart:function(b){if(this._options.mode!=="static")if(!(!this._supportTouch&&b.which!=1)){this._panFinalize();this._mouseWheelFinish();var c=g(b.currentTarget).offset(),a=b.originalEvent.changedTouches;if(this._supportTouch){this._multiTouchAnchor=g.merge([],a);if(this._isMultiTouch=
+this._multiTouchAnchor.length>1){this._multiTouchCurrentBbox=[a[0].pageX-c.left,a[0].pageY-c.top,a[1].pageX-c.left,a[1].pageY-c.top];this._multiTouchAnchorBbox=g.merge([],this._multiTouchCurrentBbox);this._current=g.geo.center(this._multiTouchCurrentBbox,true)}else{this._multiTouchCurrentBbox=[a[0].pageX-c.left,a[0].pageY-c.top,NaN,NaN];this._current=[a[0].pageX-c.left,a[0].pageY-c.top]}}else this._current=[b.pageX-c.left,b.pageY-c.top];if(this._softDblClick){c=g.now();if(c-this._downDate<750){if(this._isTap){a=
+this._current[0]-this._anchor[0];var d=this._current[1]-this._anchor[1];if(Math.sqrt(a*a+d*d)>8)this._isTap=false;else this._current=g.merge([],this._anchor)}this._isDbltap=this._isDbltap?false:this._isTap}else this._isDbltap=false;this._isTap=true;this._downDate=c}this._mouseDown=true;this._anchor=g.merge([],this._current);if(!this._inOp&&b.shiftKey){this._shiftZoom=true;this._$eventTarget.css("cursor",this._options.cursors.zoom)}else if(!this._isMultiTouch&&this._options.pannable){this._inOp=true;
+switch(this._options.mode){case "zoom":break;default:this._lastDrag=this._current;b.currentTarget.setCapture&&b.currentTarget.setCapture()}}b.preventDefault();return false}},_dragTarget_touchmove:function(b){if(this._options.mode!=="static"){var c=this._$eventTarget.offset(),a=this._drawCoords.length,d=b.originalEvent.changedTouches,f;f=0;if(this._supportTouch){if(!this._isMultiTouch&&d[0].identifier!==this._multiTouchAnchor[0].identifier){this._mouseDown=false;this._dragTarget_touchstop(b);this._isMultiTouch=
+true;this._multiTouchAnchor.push(d[0]);this._multiTouchCurrentBbox=[this._multiTouchCurrentBbox[0],this._multiTouchCurrentBbox[1],this._multiTouchAnchor[1].pageX-c.left,this._multiTouchAnchor[1].pageY-c.top];this._multiTouchAnchorBbox=g.merge([],this._multiTouchCurrentBbox);this._mouseDown=true;this._anchor=this._current=g.geo.center(this._multiTouchCurrentBbox,true);return false}if(this._isMultiTouch){for(;f<d.length;f++)if(d[f].identifier===this._multiTouchAnchor[0].identifier){this._multiTouchCurrentBbox[0]=
+d[f].pageX-c.left;this._multiTouchCurrentBbox[1]=d[f].pageY-c.top}else if(d[f].identifier===this._multiTouchAnchor[1].identifier){this._multiTouchCurrentBbox[2]=d[f].pageX-c.left;this._multiTouchCurrentBbox[3]=d[f].pageY-c.top}g.geo.center(this._multiTouchCurrentBbox,true);f=this._multiTouchCurrentBbox[2]-this._multiTouchCurrentBbox[0];c=this._multiTouchAnchorBbox[2]-this._multiTouchAnchorBbox[0];this._wheelLevel=Math.abs(Math.floor((1-f/c)*10));if(Math.abs(f)<Math.abs(c))this._wheelLevel=-this._wheelLevel;
+d=this._getZoomCenterAndSize(this._anchor,this._wheelLevel,false);this._$elem.find(".geo-shapes-container").geographics("clear");for(f=0;f<this._currentServices.length;f++){c=this._currentServices[f];g.geo._serviceTypes[c.type].interactiveScale(this,c,d.center,d.pixelSize)}this._graphicShapes.length>0&&this._graphicShapes.length<256&&this._refreshShapes(this._$shapesContainer,this._graphicShapes,this._graphicShapes,this._graphicShapes,d.center,d.pixelSize);if(this._drawCoords.length>0){this._drawPixels=
+this._toPixel(this._drawCoords,d.center,d.pixelSize);this._refreshDrawing()}f=g.geo.center(this._multiTouchCurrentBbox,true)}else f=[b.originalEvent.changedTouches[0].pageX-c.left,b.originalEvent.changedTouches[0].pageY-c.top]}else f=[b.pageX-c.left,b.pageY-c.top];if(f[0]===this._lastMove[0]&&f[1]===this._lastMove[1])if(this._inOp){b.preventDefault();return false}if(r==7)this._isDbltap=this._isTap=false;if(this._mouseDown){this._current=f;this._moveDate=g.now()}if(this._isMultiTouch){b.preventDefault();
+return this._isDbltap=this._isTap=false}switch(this._shiftZoom?"zoom":this._options.mode){case "zoom":if(this._mouseDown){this._$drawContainer.geographics("clear");this._$drawContainer.geographics("drawBbox",[this._anchor[0],this._anchor[1],f[0],f[1]])}else this._trigger("move",b,{type:"Point",coordinates:this.toMap(f)});break;case "drawLineString":case "drawPolygon":case "measureLength":case "measureArea":if(this._mouseDown||this._toolPan)this._panMove();else{if(a>0){this._drawCoords[a-1]=this._toMap(f);
+this._drawPixels[a-1]=f;this._refreshDrawing()}this._trigger("move",b,{type:"Point",coordinates:this.toMap(f)})}break;default:this._mouseDown||this._toolPan?this._panMove():this._trigger("move",b,{type:"Point",coordinates:this.toMap(f)})}this._lastMove=f;if(this._inOp){b.preventDefault();return false}}},_dragTarget_touchstop:function(b){if(this._options.mode!=="static"){!this._mouseDown&&r==7&&this._eventTarget_touchstart(b);var c=this._mouseDown,a=this._toolPan,d=this._$eventTarget.offset(),f=this._shiftZoom?
+"zoom":this._options.mode,e,l;e=this._supportTouch?[b.originalEvent.changedTouches[0].pageX-d.left,b.originalEvent.changedTouches[0].pageY-d.top]:[b.pageX-d.left,b.pageY-d.top];if(this._softDblClick)if(this._isTap){d=e[0]-this._anchor[0];l=e[1]-this._anchor[1];if(Math.sqrt(d*d+l*l)<=8)e=g.merge([],this._anchor)}d=e[0]-this._anchor[0];l=e[1]-this._anchor[1];this._$eventTarget.css("cursor",this._options.cursors[this._options.mode]);this._shiftZoom=this._mouseDown=this._toolPan=false;if(this._isMultiTouch){b.preventDefault();
+this._isMultiTouch=false;c=this._getZoomCenterAndSize(this._anchor,this._wheelLevel,false);this._setCenterAndSize(c.center,c.pixelSize,true,true);this._wheelLevel=0;return false}document.releaseCapture&&document.releaseCapture();if(c){c=g.now();this._current=e;switch(f){case "zoom":if(d>0||l>0){a=this._pixelSize*6;f=this._toMap([[Math.min(this._anchor[0],e[0]),Math.max(this._anchor[1],e[1])],[Math.max(this._anchor[0],e[0]),Math.min(this._anchor[1],e[1])]]);f=[f[0][0],f[0][1],f[1][0],f[1][1]];if(f[2]-
+f[0]<a&&f[3]-f[1]<a)f=g.geo.scaleBy(this._getBbox(g.geo.center(f,true)),0.5,true);this._setBbox(f,true,true)}this._resetDrawing();break;case "drawPoint":if(this._drawTimeout){window.clearTimeout(this._drawTimeout);this._drawTimeout=null}if(a)this._panFinalize();else if(c-this._clickDate>100){var m=this;this._drawTimeout=setTimeout(function(){if(m._drawTimeout){m._trigger("shape",b,{type:"Point",coordinates:m.toMap(e)});m._inOp=false;m._drawTimeout=null}},250)}break;case "drawLineString":case "drawPolygon":case "measureLength":case "measureArea":if(a)this._panFinalize();
+else{a=this._drawCoords.length==0?0:this._drawCoords.length-1;this._drawCoords[a]=this._toMap(e);this._drawPixels[a]=e;if(a<2||!(this._drawCoords[a][0]==this._drawCoords[a-1][0]&&this._drawCoords[a][1]==this._drawCoords[a-1][1])){this._drawCoords[a+1]=this._toMap(e);this._drawPixels[a+1]=e}this._refreshDrawing()}break;default:if(a)this._panEnd();else if(c-this._clickDate>100){this._trigger("click",b,{type:"Point",coordinates:this.toMap(e)});this._inOp=false}}this._clickDate=c;if(this._softDblClick&&
+this._isDbltap){this._isDbltap=this._isTap=false;this._$eventTarget.trigger("dblclick",b)}}if(this._inOp){b.preventDefault();return false}}},_eventTarget_mousewheel:function(b,c){if(!(this._options.mode==="static"||this._options.scroll==="off")){b.preventDefault();this._panFinalize();if(this._mouseDown)return false;if(c!=0){if(this._wheelTimeout){window.clearTimeout(this._wheelTimeout);this._wheelTimeout=null}else{var a=g(b.currentTarget).offset();this._anchor=[b.pageX-a.left,b.pageY-a.top]}this._wheelLevel+=
+c;a=this._getZoomCenterAndSize(this._anchor,this._wheelLevel,this._options.tilingScheme!=null);var d,f=0;for(this._$elem.find(".geo-shapes-container").geographics("clear");f<this._currentServices.length;f++){d=this._currentServices[f];g.geo._serviceTypes[d.type].interactiveScale(this,d,a.center,a.pixelSize)}this._graphicShapes.length>0&&this._graphicShapes.length<256&&this._refreshShapes(this._$shapesContainer,this._graphicShapes,this._graphicShapes,this._graphicShapes,a.center,a.pixelSize);if(this._drawCoords.length>
+0){this._drawPixels=this._toPixel(this._drawCoords,a.center,a.pixelSize);this._refreshDrawing()}var e=this;this._wheelTimeout=window.setTimeout(function(){e._mouseWheelFinish()},1E3)}return false}}})})(jQuery);
+(function(g,q){g.geo._serviceTypes.tiled=function(){return{create:function(r,b,c){r=g.data(c,"geoServiceState");if(!r){r={loadCount:0,reloadTiles:false};b.append('<div data-geo-service="tiled" style="position:absolute; left:0; top:0; width:8px; height:8px; margin:0; padding:0;"></div>');r.serviceContainer=b.children(":last");g.data(c,"geoServiceState",r)}return r.serviceContainer},destroy:function(r,b,c){g.data(c,"geoServiceState").serviceContainer.remove();g.removeData(c,"geoServiceState")},interactivePan:function(r,
+b,c,a){var d=g.data(b,"geoServiceState");if(d){this._cancelUnloaded(r,b);d.serviceContainer.children().css("-moz-transition","").css({webkitTransition:"",transition:"",left:function(R,U){return parseInt(U)+c},top:function(R,U){return parseInt(U)+a}});if(b&&b.style.visibility==="visible"){var f=r._pixelSize,e=this,l=d.serviceContainer,m=l.children("[data-pixelSize='"+f+"']"),n=r._getContentBounds(),t=r.options.axisLayout==="image",u=t?+1:-1,w=r.options.tilingScheme,B=w.tileWidth,I=w.tileHeight,F=n.width/
+2*f,y=n.height/2*f,K=m.position(),D=m.data("scaleOrigin").split(",");n=parseInt(D[0])-K.left;K=parseInt(D[1])-K.top;var J=r._getCenter();D=[J[0]+n*f,J[1]+u*K*f];var P=Math.floor((D[0]-F-w.origin[0])/(f*B));n=Math.max(Math.floor((t?D[1]-y-w.origin[1]:w.origin[1]-(D[1]+y))/(f*I)),0);K=Math.ceil((D[0]+F-w.origin[0])/(f*B));D=Math.ceil((t?D[1]+y-w.origin[1]:w.origin[1]-(D[1]-y))/(f*I));var H=r._getBboxMax(),C=r._getPixelSize(0),G=C/f,M=Math.floor((H[0]-w.origin[0])/(C*B))*G;H=Math.floor((w.origin[1]+
+u*H[3])/(C*I))*G;C=w.origin[1]+u*H*I*f;F=Math.round((w.origin[0]+M*B*f-(J[0]-F))/f);t=Math.round((t?C-(J[1]-y):J[1]+y-C)/f);var z=b.style.opacity;for(y=P;y<K;y++)for(J=n;J<D;J++){P=""+y+","+J;var L=m.children("[data-tile='"+P+"']").removeAttr("data-dirty");if(L.size()===0){C=[w.origin[0]+y*B*f,w.origin[1]+u*J*I*f];G=[w.origin[0]+((y+1)*B-1)*f,w.origin[1]+u*((J+1)*I-1)*f];G=[C[0],C[1],G[0],G[1]];C=b.hasOwnProperty("src")?"src":"getUrl";G={bbox:G,width:B,height:I,zoom:r._getZoom(),tile:{row:J,column:y},
+index:Math.abs(J+y)};if(g.isFunction(b[C]))C=b[C](G);else{g.template("geoSrc",b[C]);C=g.render(G,"geoSrc")}d.loadCount++;if(d.reloadTiles&&L.size()>0)L.attr("src",C);else{G="<img style='position:absolute; left:"+((y-M)*100+(F-F%B)/B*100)+"%; top:"+((J-H)*100+(t-t%I)/I*100)+"%; ";if(g("body")[0].filters===q)G+="width: 100%; height: 100%;";G+="margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='"+
+P+"' />";m.append(G);L=m.children(":last")}typeof C==="string"?e._loadImage(L,C,f,d,l,z):C.done(function(R){e._loadImage(L,R,f,d,l,z)}).fail(function(){L.remove();d.loadCount--})}}}}},interactiveScale:function(r,b,c,a){var d=g.data(b,"geoServiceState");if(d&&b&&b.style.visibility==="visible"){this._cancelUnloaded(r,b);b=r.options.tilingScheme;var f=b.tileWidth,e=b.tileHeight;d.serviceContainer.children().each(function(){var l=g(this),m=l.attr("data-pixelSize")/a;m=Math.round(m*1E3)/1E3;var n=l.data("scaleOrigin").split(",");
+n=r._toMap([n[0],n[1]]);n=r._toPixel(n,c,a);l.css("-moz-transition","").css({webkitTransition:"",transition:"",left:Math.round(n[0])+"px",top:Math.round(n[1])+"px",width:f*m,height:e*m});g("body")[0].filters!==q&&l.children().each(function(){g(this).css("filter","progid:DXImageTransform.Microsoft.Matrix(FilterType=bilinear,M11="+m+",M22="+m+",sizingmethod='auto expand')")})})}},refresh:function(r,b){var c=g.data(b,"geoServiceState");this._cancelUnloaded(r,b);if(c&&b&&b.style.visibility==="visible"&&
+!c.serviceContainer.is(":hidden")){var a=r._getBbox(),d=r._pixelSize,f=this,e=c.serviceContainer;r._getContentBounds();var l=r.options.axisLayout==="image",m=l?+1:-1,n=r.options.tilingScheme,t=n.tileWidth,u=n.tileHeight,w=Math.floor((a[0]-n.origin[0])/(d*t)),B=Math.max(Math.floor((l?a[1]-n.origin[1]:n.origin[1]-a[3])/(d*u)),0),I=Math.ceil((a[2]-n.origin[0])/(d*t)),F=Math.ceil((l?a[3]-n.origin[1]:n.origin[1]-a[1])/(d*u)),y=r._getBboxMax(),K=r._getPixelSize(0),D=K/d,J=Math.floor((y[0]-n.origin[0])/
+(K*t))*D,P=Math.floor((n.origin[1]+m*y[3])/(K*u))*D;y=n.origin[1]+m*P*u*d;var H=Math.round((n.origin[0]+J*t*d-a[0])/d),C=Math.round((l?y-a[1]:a[3]-y)/d);a=e.children().show();l=a.filter("[data-pixelSize='"+d+"']").appendTo(e);var G=b.style.opacity;c.reloadTiles&&a.find("img").attr("data-dirty","true");if(l.size()){l.css({left:H%t+"px",top:C%u+"px"}).data("scaleOrigin",H%t+","+C%u);l.children().each(function(){var L=g(this),R=L.attr("data-tile").split(",");L.css({left:Math.round((parseInt(R[0])-J)*
+100+(H-H%t)/t*100)+"%",top:Math.round((parseInt(R[1])-P)*100+(C-C%u)/u*100)+"%"});G<1&&L.fadeTo(0,G)})}else{e.append("<div style='position:absolute; left:"+H%t+"px; top:"+C%u+"px; width:"+t+"px; height:"+u+"px; margin:0; padding:0;' data-pixelSize='"+d+"'></div>");l=e.children(":last").data("scaleOrigin",H%t+","+C%u)}for(w=w;w<I;w++)for(y=B;y<F;y++){K=""+w+","+y;var M=l.children("[data-tile='"+K+"']").removeAttr("data-dirty");if(M.size()===0||c.reloadTiles){D=[n.origin[0]+w*t*d,n.origin[1]+m*y*u*
+d];var z=[n.origin[0]+((w+1)*t-1)*d,n.origin[1]+m*((y+1)*u-1)*d];z=[D[0],D[1],z[0],z[1]];D=b.hasOwnProperty("src")?"src":"getUrl";z={bbox:z,width:t,height:u,zoom:r._getZoom(),tile:{row:y,column:w},index:Math.abs(y+w)};if(g.isFunction(b[D]))D=b[D](z);else{g.template("geoSrc",b[D]);D=g.render(z,"geoSrc")}c.loadCount++;if(c.reloadTiles&&M.size()>0)M.attr("src",D);else{z="<img style='position:absolute; left:"+((w-J)*100+(H-H%t)/t*100)+"%; top:"+((y-P)*100+(C-C%u)/u*100)+"%; ";if(g("body")[0].filters===
+q)z+="width: 100%; height: 100%;";z+="margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='"+K+"' />";l.append(z);M=l.children(":last")}typeof D==="string"?f._loadImage(M,D,d,c,e,G):D.done(function(L){f._loadImage(M,L,d,c,e,G)}).fail(function(){M.remove();c.loadCount--})}}a.find("[data-dirty]").remove();c.reloadTiles=false}},resize:function(){},opacity:function(r,b){g.data(b,"geoServiceState").serviceContainer.find("img").stop(true).fadeTo("fast",
+b.style.opacity)},toggle:function(r,b){g.data(b,"geoServiceState").serviceContainer.css("display",b.style.visibility==="visible"?"block":"none")},_cancelUnloaded:function(r,b){var c=g.data(b,"geoServiceState");if(c&&c.loadCount>0)for(c.serviceContainer.find("img:hidden").remove();c.loadCount>0;)c.loadCount--},_loadImage:function(r,b,c,a,d,f){r.load(function(e){f<1?g(e.target).fadeTo(0,f):g(e.target).show();a.loadCount--;if(a.loadCount<=0){d.children(":not([data-pixelSize='"+c+"'])").remove();a.loadCount=
+0}}).error(function(e){g(e.target).remove();a.loadCount--;if(a.loadCount<=0){d.children(":not([data-pixelSize='"+c+"'])").remove();a.loadCount=0}}).attr("src",b)}}}()})(jQuery);
+(function(g){g.geo._serviceTypes.shingled=function(){return{create:function(q,r,b){q=g.data(b,"geoServiceState");if(!q){q={loadCount:0};r.append('<div data-geo-service="shingled" style="position:absolute; left:0; top:0; width:16px; height:16px; margin:0; padding:0;"></div>');q.serviceContainer=r.children(":last");g.data(b,"geoServiceState",q)}return q.serviceContainer},destroy:function(q,r,b){g.data(b,"geoServiceState").serviceContainer.remove();g.removeData(b,"geoServiceState")},interactivePan:function(q,
+r,b,c){var a=g.data(r,"geoServiceState");if(a){this._cancelUnloaded(q,r);r=a.serviceContainer;q=q._pixelSize;a=r.children("[data-pixelSize='"+q+"']");var d=a.children("div");if(!d.length){a.children("img").wrap('<div style="position:absolute; left:0; top:0; width:100%; height:100%;"></div>');d=a.children("div")}d.css({left:function(f,e){return parseInt(e)+b},top:function(f,e){return parseInt(e)+c}});r.children(":not([data-pixelSize='"+q+"'])").remove()}},interactiveScale:function(q,r,b,c){var a=g.data(r,
+"geoServiceState");if(a){this._cancelUnloaded(q,r);r=a.serviceContainer;q=q._getContentBounds();var d=q.width,f=q.height,e=d/2,l=f/2;r.children().each(function(){var m=g(this),n=m.attr("data-pixelSize"),t=n/c;m.css({width:d*t,height:f*t}).children("img").each(function(){var u=g(this),w=u.data("center");u.css({left:(Math.round((w[0]-b[0])/n)-e)*t+"px",top:(Math.round((b[1]-w[1])/n)-l)*t+"px"})})})}},refresh:function(q,r){var b=g.data(r,"geoServiceState");this._cancelUnloaded(q,r);if(b&&r&&r.style.visibility===
+"visible"&&!b.serviceContainer.is(":hidden")){var c=q._getBbox(),a=q._pixelSize,d=this,f=b.serviceContainer,e=q._getContentBounds(),l=e.width,m=e.height,n=l/2,t=m/2;e=f.children('[data-pixelSize="'+a+'"]');var u=r.style.opacity,w;if(!e.size()){f.append('<div style="position:absolute; left:'+n+"px; top:"+t+"px; width:"+l+"px; height:"+m+'px; margin:0; padding:0;" data-pixelSize="'+a+'"></div>');e=f.children(":last")}e.children("img").each(function(){var I=g(this),F=I.data("center"),y=q._getCenter();
+I.css({left:Math.round((F[0]-y[0])/a)-n+"px",top:Math.round((y[1]-F[1])/a)-t+"px"})});u<1&&f.find("img").attr("data-keepAlive","0");var B=r.hasOwnProperty("src")?"src":"getUrl";c={bbox:c,width:l,height:m,zoom:q._getZoom(),tile:null,index:0};if(g.isFunction(r[B]))c=r[B](c);else{g.template("geoSrc",r[B]);c=g.render(c,"geoSrc")}b.loadCount++;e.append('<img style="position:absolute; left:-'+n+"px; top:-"+t+'px; width:100%; height:100%; margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;" unselectable="on" />');
+w=e.children(":last").data("center",q._getCenter());typeof c==="string"?d._loadImage(w,c,a,b,f,u):c.done(function(I){d._loadImage(w,I,a,b,f,u)}).fail(function(){w.remove();b.loadCount--})}},resize:function(q,r){var b=g.data(r,"geoServiceState");if(b&&r&&r.style.visibility==="visible"){this._cancelUnloaded(q,r);var c=b.serviceContainer,a=q._getContentBounds();b=a.width/2;a=a.height/2;c=c.children();c.attr("data-pixelSize","0");c.css({left:b+"px",top:a+"px"})}},opacity:function(q,r){g.data(r,"geoServiceState").serviceContainer.find("img").stop(true).fadeTo("fast",
+r.style.opacity)},toggle:function(q,r){g.data(r,"geoServiceState").serviceContainer.css("display",r.style.visibility==="visible"?"block":"none")},_cancelUnloaded:function(q,r){var b=g.data(r,"geoServiceState");if(b&&b.loadCount>0)for(b.serviceContainer.find("img:hidden").remove();b.loadCount>0;)b.loadCount--},_loadImage:function(q,r,b,c,a,d){q.load(function(f){d<1?g(f.target).fadeTo(0,d):g(f.target).show();c.loadCount--;if(c.loadCount<=0){a.children(':not([data-pixelSize="'+b+'"])').remove();f=a.find('[data-pixelSize="'+
+b+'"]>div');if(f.size()>0){var e=f.position();f.children("img").each(function(){var l=g(this),m=e.left+parseInt(l.css("left")),n=e.top+parseInt(l.css("top"));l.css({left:m+"px",top:n+"px"})}).unwrap();f.remove()}c.loadCount=0}}).error(function(f){g(f.target).remove();c.loadCount--;if(c.loadCount<=0){a.children(":not([data-pixelSize='"+b+"'])").remove();c.loadCount=0}}).attr("src",r)}}}()})(jQuery);
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ *
+ * Requires: 1.2.2+
+ */
+(function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)
--- /dev/null
+
+(function($){
+
+
+
+
+
+
+
+
+
+
+
+})(this.jQuery);
+
+
+
+
+window.log = function(){
+ log.history = log.history || [];
+ log.history.push(arguments);
+ if(this.console){
+ console.log( Array.prototype.slice.call(arguments) );
+ }
+};
+(function(doc){
+ var write = doc.write;
+ doc.write = function(q){
+ log('document.write(): ',arguments);
+ if (/docwriteregexwhitelist/.test(q)) write.apply(doc,arguments);
+ };
+})(document);
+
+
--- /dev/null
+/* Author: Ryan Westphal
+
+*/
+
+if ($("html").hasClass("ie9") || $("html").hasClass("ie8")) {
+ $(".ui-page").live("pageshow", function (e) {
+ window.focus();
+ });
+}
+
+$(function () {
+ $(document).bind("mobileinit", function () {
+ $.mobile.gradeA = function () { return $.support.mediaquery || $("html").hasClass("ie8") };
+ });
+
+ $("a[data-href]").live("click", function (e) {
+ $("#" + $(this).data("href"))[0].scrollIntoView();
+ });
+
+ $(".ui-page").live("pageshow", function () {
+ $(this).find(".geomap-indoc").geomap({ zoom: 1, scroll: "off" });
+ });
+
+ $(".ui-page").live("pagebeforehide", function () {
+ $(this).find(".geomap-indoc").geomap("destroy");
+ });
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>quickstart | jQuery Geo</title>
+ <meta name="description" content="jQuery Geo quickstart">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="quickstart" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>quickstart</h1>
+ </div>
+
+ <div data-role="content">
+ <p>The jQuery Geo plugin has one widget, geomap, that you can instantiate on any div with a computable width and height.</p>
+ <h2>html</h2>
+ <pre><code><div id="map" style="width: 640px; height: 480px;"></div>
+<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
+<script src="//code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script></code></pre>
+ <h2>javascript</h2>
+ <pre><code>$("#map").geomap();</code></pre>
+ <p>By default, this one line of code will create a fully functional map on your page showing the whole world and using the <a href="http://www.openstreetmap.org/" rel="external">OpenStreetMap</a> tile set.</p>
+ <p>The default units are <i>longitude & latitude degrees</i> which is the most common format for GPS and other online spatial data. <!--More advanced users can easily switch to <i>web mercator meters</i> which is the same unit type that Google, Bing and ESRI now use.--> You can set the center and zoom of the map at the same time you initialize it by passing a JavaScript object of options.</p>
+ <pre><code>$("#map").geomap({
+ center: [ -71.037598, 42.363281 ],
+ zoom: 10
+});</code></pre>
+ <p><b>Please note that longitude is the first value, x, even though it is commonly spoken second.</b> This plugin does not distinguish between lon/lat and any other x/y coordinate system.</p>
+ <p>The above example will show the City of Boston. The value passed to the center property is a <a href="http://geojson.org/geojson-spec.html#positions" rel="external">GeoJSON</a> position, which is an array with an x value followed by a y value.</p>
+ <p>If you need help determining the center point values the <a href="../examples/events.html" rel="external">events example</a> can help. Pan and zoom the map to an area and click the location you want. Then copy the coordinates value displayed under the <b>geo argument</b> heading of the click event and paste it into you code.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+<!doctype html>
+
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <title>what? | jQuery Geo</title>
+ <meta name="description" content="What is jQuery Geo?">
+ <meta name="author" content="Ryan Westphal">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="../css/style.css?v=2">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+ <div id="what" data-role="page">
+ <div data-role="header" data-theme="b">
+ <h1>what?</h1>
+ </div>
+
+ <div data-role="content">
+ <h2>open-source</h2>
+ <p>
+ jQuery Geo is a jQuery plugin, which means it is 100% JavaScript that ties into the popular jQuery library. It helps make interacting with various web mapping servers and tile sets such as Open Street Map, WMS and Esri ArcGIS Server as simple as possible.
+ </p>
+ <p>
+ Internally, Applied Geographics, Inc. has been developing a JavaScript mapping component over the last four years or so and are proud to give our reasearch to the open-source community.
+ </p>
+ <p>
+ Our intention is to be a simple & fast approach to a decent percentage of the spatial web's needs.
+ </p>
+ <h2>widget</h2>
+ <p>
+ The primary component of our geospatial plugin is a single user interface widget that pulls in tiled or dynamic map images from map servers. By default, this component targets Open Street Map tiles but can be easilly configured to use other WMS layers or cached tile sets.</p>
+ <div class="geomap-indoc"></div>
+ <p>The map widget includes only what is required to show mapping data and handle direct user interaction with the map. The rest can be handled programmatically by the web developer and any other UI framework they choose, e.g., showing and hiding services, changing the widget's mode and hooking into an external zoom bar.</p>
+ <h2>geo</h2>
+ <p>Apart from the widget, jQuery Geo has useful geospatial functions in the $.geo namespace. These functions help you calculate bounding boxes, measure the distance between geometries, determine if one geometry contains another, and other functions you might find in the well-known Java Topology Suite. They are all implemented in JavaScript and are included with the rest of jQuery Geo.</p>
+ </div>
+ </div> <!-- end of #container -->
+
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script src="../js/script.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
--- /dev/null
+config.init( {
+ lint: {
+ files: [ "js/jquery.geo.core.js" ]
+ }
+} );
+
+task.registerTask( "default", "lint" );
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <title>jQuery Geo</title>
+ <meta name="description" content="jQuery Geo - A spatial mapping plugin for jQuery" />
+ <meta name="author" content="Ryan Westphal" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+ <style type="text/css">
+ html { font:13px/1.231 sans-serif; }
+
+ body, h1 { margin: 0; padding: 0; }
+
+ body, select, input, textarea
+ {
+ color: #444;
+ }
+
+ pre
+ {
+ white-space: pre-wrap;
+ white-space: pre-line;
+ }
+
+ .geomap
+ {
+ background: #444;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ }
+
+ .container
+ {
+ position: relative;
+ margin: 32px auto;
+ width: 80%;
+ }
+
+ .project-links
+ {
+ float: right;
+ }
+
+ .header
+ {
+ margin: 32px 0 0 10%;
+ }
+
+ .header img
+ {
+ height: 64px;
+ width: 64px;
+ vertical-align: bottom;
+ }
+
+ .header h1
+ {
+ display: inline-block;
+ }
+
+ .header h1 .framework
+ {
+ color: #fff;
+ font-size: 32px;
+ }
+
+ .header h1 .subtitle
+ {
+ color: #faa;
+ display: block;
+ font-size: 14px;
+ font-style: italic;
+ margin-left: 48px;
+ }
+
+ h2
+ {
+ clear: both;
+ margin-bottom: 8px;
+ }
+
+ time
+ {
+ font-size: 8pt;
+ font-style: italic;
+ margin: 2px;
+ }
+
+ .main
+ {
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 2px 2px #555;
+ margin-top: 128px;
+ padding: 32px;
+ }
+
+ .thanks
+ {
+ list-style-type: none;
+ }
+
+ .thanks li
+ {
+ display: inline-block;
+ margin: 1em;
+ }
+
+ #jQueryLogo
+ {
+ background: #39414A;
+ border-radius: 8px;
+ padding: .5em;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="geomap">
+ <div class="header">
+ <img src="apple-touch-icon.png" alt="" />
+ <h1><span class="framework">jQuery Geo</span><span class="subtitle">write less, map more</span></h1>
+ </div>
+ </div>
+ <div class="container">
+ <div class="main" role="main">
+ <div class="nav project-links">
+ <a href="http://jquerygeo.com/1.0a4/" title="Documentation and demos">Docs & Demos</a>
+ <a href="https://github.com/AppGeo/geo/" title="Source code on GitHub">GitHub</a>
+ </div>
+
+ <h2>jQuery Geo - an interactive mapping plugin</h2>
+
+ <p>jQuery Geo, an open-source geospatial mapping project from Applied Geographics, provides a streamlined JavaScript API for a large percentage of your online mapping needs. Whether you just want to display a map on a wep page as quickly as possible or you are a more advanced GIS user, jQuery Geo can help!</p>
+
+ <p>This project is considered alpha only because it does not yet fully implement the feature set of our scheduled beta release. Alpha releases are stable and should not change much as we port technology from our internal library to the open source one.</p>
+
+ <p>You can check back here, follow <a href="https://twitter.com/jQueryGeo">@jQueryGeo</a> on Twitter for release announcements. Also, head over to the lead developer's Twitter account, <a href="https://twitter.com/ryanttb">@ryanttb</a>, for development info, links, or to ask questions.</p>
+
+ <h2>Download</h2>
+ <p>Using jQuery Geo requires adding one element, including one script (apart from jQuery itself) and calling one function. The following copy-and-paste snippet will help you get started.</p>
+ <pre><div id="map" style="height: 320px;"></div>
+<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+<script>$(function() { $( "#map" ).geomap( ); });</script></pre>
+
+ <p>code.jquerygeo.com is on the CloudFlare Content Delivery Network (CDN) so our minified, gzipped library will get to your client as fast as possible!</p>
+
+ <h2>Alpha 4 released!</h2>
+ <time>2012-02-19</time>
+
+ <p>It's been a long three months but we're very happy to announce the release of jQuery Geo 1.0a4! Here are some highlights and details:</p>
+
+ <h3>At the service level</h3>
+
+ <p>In alpha 3, you could append and interact with shapes on the map. In alpha 4, this is extended to services! Service-level shapes have their own shapeStyle apart from the map's and hide when their service is hidden.</p>
+
+ <h3>More modes!</h3>
+
+ <p>There are new modes to let you measure distance & area, and a static mode for when you want to display a map but not let users interact with it. Apart from the three new built-in modes, you can also create custom modes to help organize your app.</p>
+
+ <h3>What's that? CSS labels!</h3>
+
+ <p>You can now give any shape a label when you append it. You can style the label from your regular style sheet using the .geo-label class which opens labeling up to all the design power of CSS3. There's even more potential if you put a class or id on your map service because you can target labels on different services using CSS rules. Also, labels can be any HTML which opens them up to new features in HTML5!</p>
+
+ <h3>More service src options</h3>
+
+ <p>The old getUrl property has been renamed to src (see Breaking below) and you can now set it to a string template. jQuery Geo will stick your tile row, column, zoom, or image bbox in for you. Services defined as a string are a little easier on the eyes than a function and can be stored as JSON data.</p>
+
+ <p>You can still use a function and the function can now return a <a href="http://api.jquery.com/category/deferred-object/">jQuery Promise</a> to delay loading of the map image or tile. Want to calculate a Mandlebrot image in a JavaScript web worker without blocking user interaction? Return a new jQuery.Deferred() and call resolve when you're done!</p>
+
+ <h3>Mobile</h3>
+
+ <p>This version has better mobile support including pinch zoom on iOS and Android 3+ as well as other bug fixes for mobile devices.</p>
+
+ <h3>Don't worry about $.geo.proj so much</h3>
+
+ <p>You can now send either geodetic (lon, lat) or projected (x, y) coordinates to any library function and it will return accordingly if you stay on the default web mercator projection. You should still set it to null or implement the (to|from)GeodeticPos functions if you need to change projections.</p>
+
+ <h3>Breaking</h3>
+
+ <p>There is one deprecation (a service object property will be renamed in beta) and one minor breaking change.</p>
+
+ <p>To align this API with HTML itself, the getUrl property on service objects will be renamed to src. Using either src or getUrl will work for this alpha release but getUrl will be removed for beta. Please update any map services to use the new src property when you're defining them.</p>
+
+ <p>Also on service objects, the initial opacity and visibility are in a property of the service object itself named style. Your old services will still function but ones you may expect to be hidden initially will be visible until you update the service object.</p>
+
+ <p>To exemplify both of these changes, instead of: <pre><code>{
+ type: "tiled",
+ getUrl: function( view ) { return ""; },
+ visibility: "hidden"
+}</code></pre> you should write: <pre><code>{
+ type: "tiled",
+ src: function( view ) { return ""; },
+ style: { visibility: "hidden" }
+}</code></pre></p>
+
+ <h3>Everything else</h3>
+
+ <p>With over 60 commits, there are more features and bug fixes to write about. If you dare to click the link below (or read the README file on the project's GitHub page) you can get a better idea of what went into this build. This is the last alpha release (!) and the path to beta will add unit testing, a better build process, and smaller, more refined source code. Thanks for all your support!</p>
+
+ <a href="javascript:jQuery('#a4changelog').show();void(0);">Show changelog</a>
+
+<pre id="a4changelog" style="display: none;">* geomap - [bug] changing the tilingScheme doesn't update pixelSize, maxPixelSize, center or centerMax
+* geomap - [bug] shingled services throw exception during resize
+* docs - geomap - axisLayout option
+* geomap - axisLayout option
+* docs - upgrade to jQuery Mobile rc3
+* docs - allow page refreshing
+* docs - geomap - more modes: measureDistance, measureArea, static
+* docs - geomap - append label argument
+* docs - geomap - toPixel/toMap should take all coordinate dimensions like the proj functions
+* geomap - toPixel/toMap should take all coordinate dimensions like the proj functions
+* geomap - move the drawing container instead of individual points during pan
+* geomap - [bug] drawStyle resets after window resize
+* geomap - append label argument
+* docs - geomap - measureLabels option
+* geomap - measureLabels option
+* geomap - measureDistance mode
+* geomap - measureArea mode
+* docs - geomap - service-level shapeStyle
+* docs - geomap - getUrl string option
+* geomap - [bug] create doesn't clear drawing shapes
+* docs - geomap - service-level shapes
+* docs - geo - detect geodetic coordinates and call $.geo.proj automatically, don't require devs to set $.geo.proj to null
+* docs - geomap - add projection section explaining how bbox & center affect map unit type
+* docs - geomap - rename getUrl to src
+* docs - geomap - scroll option
+* docs - geomap - pannable option
+* geomap - src string option
+* examples - string service src
+* geomap - [bug] map tracks mouse when not panning if click on other elements
+* geomap - pannable option
+* geomap - scroll option
+* geomap - [bug] shapesContainer is being cleared twice during mouse wheel zoom
+* geomap - support pinch zoom on iOS
+* docs - geo - add recenter function for bbox
+* geomap - static mode
+* docs - geomap - allow Deferred or Promise as return value from src function
+* geomap - [bug] widget factory merges first service with default sometimes causing exceptions with shingled services
+* geomap - allow Deferred or Promise as return value from src function
+* geomap - [bug] resize event triggered too many times during resize
+* geomap - service-level shapes
+* geomap - service-level find
+* geographics - add a resize method, call from geomap.resize
+* geo - add recenter function for bbox
+* geomap - [bug] errors creating second un-tiled map after destroying a first on same element
+* geomap - refresh shouldn't request new images if the map element is hidden
+* geomap - [bug] delayed multitouch isn't nearly as smooth as true multitouch
+* geomap - [bug] tiled pinch zoom isn't smooth
+* geo - detect geodetic coordinates and call $.geo.proj automatically, don't require devs to set $.geo.proj to null
+* geomap - [bug] mouse wheel doesn't work with jQuery 1.7
+** upgrade to latest jquery.mousewheel plugin
+* geomap - service object visibility and opacity options should be moved to a style property
+* geomap - use _currentServices in all functions unless we actually need to update the public options services object
+* geomap - don't change user's service objects in opacity/toggle
+* geomap - show attr text
+* docs - geomap - selector argument to find method
+* geomap - selector argument to find method
+* geomap - pan mode should use a hand cursor by default
+* geomap - [bug] only services that have finished refreshing move when the user pans
+** for a4: hide unfinished services
+* geomap - [bug] a user can mess with the center option, e.g., convert numbers to strings, and it can wreck havoc with map state
+* geomap - [bug] zoom option doesn't return proper values for shingled services
+* geomap - [bug] non-tiled maps can zoom out past zoom 0
+* geomap - don't request tiles that are -y index
+* geomap - [bug] initializing tiled map by non-geodetic bbox always causes zoom level 0
+* docs - geomap - empty string needed for label element
+* geomap - [bug] double tap to end shapes adds two points before ending the shape, in different places
+* geomap - [bug] lifting fingers after pinch zoom in drawLineString or drawPolygon modes sometimes adds fake visual coordinate on touch point last lifted
+* docs - upgrade to jQuery 1.7.1
+* geomap - [bug] scroll=off doesn't zoom map but also doesn't allow document scroll
+* geomap - [bug] changing mode does not reset measure drawing
+* geomap - [bug] jQuery UI Widget Factory no longer passes pageX & pageY event properties during _trigger when using jQuery 1.7
+** upgrade to Widget Factory 1.8.17
+* examples - all demo (shingled)
+* docs - geomap - custom modes
+* examples - all demo (tiled)</pre>
+
+ <h2>Alpha 3 released!</h2>
+ <time>2011-11-01</time>
+
+ <h3>jQuery Geo 1.0 Alpha 3 is mostly about sketching!</h3>
+ <ul>
+ <li>new modes: drawPoint, drawLineString, and drawPolygon allow users to draw on your map</li>
+ <li>new event: shape triggers anytime a user draws a feature</li>
+ <li>new style option: drawStyle lets you change how the shapes look while being drawn</li>
+ </ul>
+ <h3>It's also about geometry functions!</h3>
+ <ul>
+ <li>$.geo's center, height/width, expandBy, scaleBy & reaspect functions operate on bounding boxes</li>
+ <li>$.geo's bbox, distance, contains & centroid functions operate on geometries</li>
+ </ul>
+ <p>Many examples have more class and now link to jsFiddles to further explain what's going on!</p>
+ <h3>And a tiny bit about size</h3>
+ <p>jQuery Geo is now hosted on a CDN with gzip enabled bringing the entire library to your neighborhood at under 18k.</p>
+ <h3>Breaking</h3>
+ <p>There are some minor breaking changes to make the API more consistent.</p>
+ <ul>
+ <li>The getPixelSize function is now a read-only option named pixelSize: <pre><code>$( "#map" ).geomap( "option", "pixelSize" );</code></pre></li>
+ <li>The shapeStyle function is also now an option, e.g.: <pre><code>$( "#map" ).geomap( "option", "shapeStyle", { color: "red" } );</code></pre></li>
+ <li>
+ The boolean visible property on service objects is now the visibility property found in CSS and geomap styles and can be "visible" or "hidden":
+ <pre><code>$( "#map" ).geomap( { services: [ { id: "roads", visibility: "hidden", ... } ] } );</code></pre>
+ </li>
+ </ul>
+
+ <h2>Edge</h2>
+ <p>The links above will always point to the latest stable release. However, you can test the most recently committed docs, code & demos by heading over to the test release.</p>
+ <a data-role="button" href="http://jquerygeo.com/test/" title="jQuery Geo test build">Test docs & demos</a>
+
+ <h2>Thanks!</h2>
+
+ <ul class="thanks">
+ <li>
+ <!-- AppGeo -->
+ <a href="http://www.appgeo.com"><img width="180" height="48" title="Applied Geographics" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAAwCAIAAAA3jserAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAD/NJREFUeF7tnAlwVeUVx8Vax7HWqqXKqG2t2tbasdZaW7XtOOp0H1u1KjqtC4KAKIvKvoUlJAQIJIQQQkJMWBOyQEIgIQtJCCSQBBII2clC9n3fN/vDi9fL/e67776XhxJ5mTtMePmW853v/53zP+d89133mf3HrgETGrjOrhm7Bkxp4IqAo7ipZd2xE/2Dg994vbf39h0tK9+Ymj4jMmby/kPysyg20f/0mbTK6lGtAduDY2h4+JU9odctXrUl7fSoVo2O8BVt7Tuysp//dNdNy1xYqc7zPcd1rwWGbTuVVdvROeq0YXtwcFzudnFHX8/47mjo6hp1GtERePizz5q6u52PpjzisdUsLJSIudFh9S83bl125GhRY/MoUojtwTHtQPSYJU6o5tsOziHn8keRLsyKmlFV8/eAQH1TofNX1PJ26AGzs1w9DWwMDoznLSvWyAp6ZtuOrv7+q2e1I5HE8+Sp21e5Wo0MOt7u6BpzvmQkMnzFfW0JjoGhoSVxSUr14XH35xVcoSUNDQ/1DPS097W39rbwNHU31nbWSA+/Sx/yV9oMDA2MRIa+wcGt6Zm3rFg7EmTQ91879/YMjEiSkazCir62BEdZS+sv3L1VGnxpV4gVYpnqwk4XNhUkXUgIzgvyy/L1SHd3SXVyPLacxyFp0Zz4j6RnadJC6UOXlFW08cn03n1uZ0xJ9KmajAttZYPDloVR4XmFoHyEyABbsedLbaiKr2AoW4IDpqapwdPVNVavpHewt6SlGDT4n/VblDB/yqGJ7x2cMPJnUeJ8z4yNkUURwKWstbR7oNuUhNm19T9c66GPjJuXr3l887YXdu6VQtn/Bof/2X/3Tzd4wbrkjpPDD40us4FCbAaOmo7ORzf5aCrxndAD3f0WmNPh4WHcwfnmorD84FXHVnwSN8tWmBBR9UH0lNlxsxyOLt6a6YVpKWkpaexuAJESVgjLX94dcv3n/Fp8IJj3rds0Ozoeolrd3tHe1yf1wg219PSUNrccKS57PyLqIbct31259kxtndUn5OvqaDNwEMqbiu7GrXbn/BlcYW1nbUThfpzFtKjJOhZi/pHZCxLmjNyEqEaYemjS4sQFGJXTtacQ+ERF1Q1Lvzz9Knz8Y3ugEaN4oaXtQH6RweVfVc1sAw6o6APrN+vY3vf2H9Rfdmd/x8mqExvT3ZS7xZkGJXCL6OJDGTXpVe2Vrb2t4jgcdCBV2V5xpi7rRGXK4eKovbl7Pmckbs7HHRckzMU8WAojhurs638tcJ/mor61xOnFXcHf+BSwDcBBaigir1DfK//E1TO3vlHc1+HPhlt6mpPLj65IXipt4cexM1YkO+zIDsisPU3cgX8hKrHiPEmxTFtvW31XfUV7eXb9mbjS2ICzfqtTVi1MmDsz5gMdVzUj5oO+wb5zdfV3rXbTXNdvNm+DfVsh1ejqYgNw4F/NpoY4aovjElWqIWpIKDsCq5D2iT0Lyw8pai7s6r+yedWG7oachpwjZXGbMzw+iZspGhUCHETdnpltCvE7s84p13KlBf66IGUDcBwuKjGSSyaD1NpziegRHSSUxRMysDFz4z/xP+MHJvQtBH3zGxqhfvyLwbdCX/2DQ9REGAFuKFc6mLS6o+rQ+YObMtxnx32EPCAVyDL+myERmuAgMIF+ygLg0egFU/HL8km6kFjQlNfS02KFeHKX3oGBkuaWU9U1iFre2tZtYWqE7rCczOpaujNOxxc02QqRRgoOwjNyOyolEtPf7+opanZDSlr3QE9uY86aVGdMN+CAH1R3VPcPXdxsjxMZb+zdr3w+joqr6+w6fqFiSvghahM/XreJqg3/Pua5jT9l1dQRTSjXDD1UjcB/0VFpS6t7avoffbYTXjLCvWs2EkFAGsJy8jF70gj4ILwYvGf7WX+CW1jUE15+muBAmMGhLz0dFki2PQDro9jpixPnQ3fgSQVN+Q1dDYxsZGNAfHxx6fTIw49v9oPA3b1mI6I+uGHzb738mPFkRZV+rlnqPvNgzO+3fPrg+s33fN6dcR7z9AXl+H0r6lwjBQcF67HOG1RKRL6g7FxRs09s8fRI955++H1gEV8W19xzWRWKjVR1YYVTw6NMJaAgBCQuiRtl1R/I16A+0yKioAia24zBo2R6QYs9YFoAkGYvv1Nn5Bn7BnvxTTpsd1HCPJxUeME+cnfSGdD8yalvIDuiY4BRwgcHok2Vds12J+PyvN+uuOJSIzCV24wUHK8Ehoka9Eq7GAf+SpH2uGGp4883znsrfOKsmDkYbc0cpQgOI0lJjpqcXNIEh9lBOF4iPjDIpuIvZlH4lBoSsgZDIYJzx2SXoHOpKhtAeZJjYFZOGmBFRHxwDr/vtN5Id9q4paQZz8WNCBxFTc0i2B9Y71nY2IT61h8/KSUJ7nBa+mzA9PGhk3/tNfsPPpupemvi1zpw3LpynU96pjSgdeBAQi6gyP5FGgqfhffR1LgSHKRDJh981wg43gh775lPZ9zlsuRJb1+ZsuAUz9bWG99a5MFHtPVeom5kC8mzWdSddBxXk1Tu2JQ5sR4ceOW50fGi+nCQUD/mI3a9z9XjvvULgMVzAdPHOi+lMXQk5FyeDcHBmBw7iaJaDQ7xdgGcDs9tFhwVbeXk4Lec8pTItebzZvikp7fNut3JYcySi2lWJZ/lnJgN9FQycBqhSpICARke3KDNkJtRDYCHGfEv1oNDMw2Aqciuu5QMbeppmhnt/GLQ1HvXLRqzxFEWDgZgETioU3ikprPxe87mcMQ1HTOnQQccZFkgsIywL7fAIf6o5lF70tufO3+yYNA3sYgoLQGLqCk/uThirrjSmD05u9zSXFcmL5t4YNajXrNvWrZCuX9KcGDzxK3FncGlUGNBYxMs4S/+e1Rt/hawRzp+msUsqBisCO/DgQk+lwd5F6eADFxBcGDQ0LI46598dmCyiA9LW0rc09a7pvqOc1EXJihVQGNF4US3AtQmhEVyvOSYpKWnF14mzvvvncGUNjQtB9pJq6ySDSm/7M3O/YFAou9c7ZZSXilLRbOntgZoHsoJYQeULFhTy8TqBLQrE2PHCEUZGRwM8uy2naopbl6+fHzIgr25gadrTpERJomXWl4m3ayTH7Be2NiMH2QoVXdwDyCUIrF22ovmp0YRjdvYrcDXfubmJU5JhYWZTlalkojMaThX39nxrJ96/fQaH7hPzFWI4Bjn4s7aVKKr7hNJMuACEEkTHC5HU1QjsPGvB6nz4gAxIPOssqUmCpkLi2IwPcotaxFeMjgwvWK99/4N8ydFXnJPRPuk/9ekuD7nv/SetYtuW+Vwo8NKBiRjxKWh5LJyEeJUhiWjokQ5VlMUY9eZy/J4mviw0q04JR0Xa5WkIi60NpHlDMrd09F3KU2EiRMlg3mwNpVAIjg4MZreUTxw+JqsmlpNcLBD4soDz+aIUn0SFadsCTcy5c69Tl4Mx8z+6IMjNCefWr9qCtiJWXoLt30n4t2JkRNeD538asjk57dPf8hj7g1LL+LG82SGKBV2WlzIx4dizcpvDTg49GSixPmmRISG5genVZ+US95MT2NNH/92aIQK48bB8aGWZwFGxsFBudUsOIi5qMhr4uNhd++cugazytUHh29GpnTZVvm8HDRvmm6ZcGrUpJkxH16sJkbNe8p31o9cF35nxfLrv6B0u8/miFLBXcRVcO/ErPzWgEPTGNzquHLl0S35jRqRiOZeEmKQ4lXKZxwc5DbE1VoEDhqbBQf5gHfDIjXBwaZSrzdbldUHh3f6aXHw/flp1J/jS2M5ZhBbMq3SszM7IDgvkKwrZefchpz6rjqvtAyx+9cMDlw+xF4U6429AZr1dLafYzpOq7xJ9tM6cIg8Bvt8pqbOuOWgciYuAYqtOkxUYXSyluBD337og4M3X5RXxSR5SIGbPdBSA44o5UzVKnwyMsXuvCwiLnZG5GGzE1lsOSAy4pKYW+deNbT8hR3q+gtdYB4VrW2yiAYtR31nl+iqycZSVDMIDtwZuWqVvni1ZEdmtqgv0jbiHkh9sR+k2Iknzzc1y9fApBGYgpqZpoWTCSk4uGOVOrPpmHjM7J5JDVC4eBueS3eqBBdx5ZrkVBEcRl45swwcVPzEsJuJCc3JiemsyhS5W5lwTF6MCI6xTuuTSi8ohwVnC2ISxKVSIsELaIKDC/EqfR0pKRN5vujmpHl5tdNUkUUW4z7XTYQJUDxMBc+c6Pj/BYc/4uGjeYpkcICeBzeoIz4C78q2diP4IAMmBoxkdSHmyu5Yes1EGUTE7CyWgYM0vnhDnyCQjL3+TDUdHb/TyuURghc0XJJSM31OsAfGU8srYQncDRgftE/z3p5ktzTBgcAfRh6mLyMwDukyzddPGNnUEmD7qkyDqSjGyOfKJBgpE7ELBZTowmL2XsI0+QxyzXxC8u0/u0OV79/O1zonHFQEJg7guNJY8zCTVzSLDBpYAA5k/eeOIHExpm55KacfHB5elXRc7ItllhOOpmornD+yfmzPbY6uIr0ny/SUt7+UlTKVPqcXfRmBcTRPM+Y98XITpRQeLUcVFltUwtBBiRIc7KLoWehLDRarQCqZxtJdBT6RcgfK/ATFWM3qIHVy7BZGiNu7ok9kIQbvtFoADm5LaJ7at0IijBRyKlrb8eui1h7d5CtVGq0rvN3p7IabkPbS6trK4thEs0lP3s4y+46CpZaDSZnaSC+5jXPSlzk91K4ZOeoPyBcCqJIIpqyIUXDg0d8USBxCwA2VWWd9YwWMRLkBnFQZsQIcGAPOtDypFeDAkLxqrNAg8Q+YrM59dP1d4RBzEqjvqICIWoxcpZMGn7TvIBxTqWd8OrVWgwijVmr8Hp1RcKRXVo91Ul/qQSCKQM3dhm46fX6yizRv7hBrAD6LwMEOPbzRm7qUkghrgsPUWycIj5dZGJtoXH6WQHGO0sxzfruMvwOHU8N38J0DfGOHJtlkzLXJqfgRHVHlvYd6q66DoDq4IPfHdFALLvH+5LWNI8MCzuFyUfot4rP98nqEvuVACy/tDtEcB+8rgoMN4KCIWuMTQj7Yvmo6TXDwPuZfA/aojiaclIACfmrQwKom4mImDHFaRLRY01KeYNwor5ITkRG1EujpKAdjQG1o+ZFkeIbmHhNeQfj4ThgUpRkY4pphb097B6i6AzjUteJIsvFXh2Q5jVoOI+R2hG108hxVbR0QC/Ye2ljVbjLS08lzcGLgTAcLimiTV99olmEYXwu7criomCK7FMfyEF5FFZ4nVtQP701NgagwTcZEVMahdi9fzDYilXKlpB8bu0y+6Wl2tNEBDrPL0CGkmoU3gwNe483s4LjGAaC3fDs47OAwqQE7OOzgsIPDjgHLNWC3HJbr7JrpYQfHNbPVli/UDg7LdXbN9LiKwOGbkaX8hmh+52KE5ouspnaHi1uqEfjv6Pp2x6sKeFcROK4qvdiFQQN2cNhhYFID/wfNU8THoBH93AAAAABJRU5ErkJggg==" /></a>
+ </li>
+
+ <li>
+ <!-- jQuery -->
+ <a href="http://jquery.com"><img id="jQueryLogo" title="jQuery" alt="" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" /></a>
+ </li>
+
+ <li>
+ <!-- html5 -->
+ <img title="HTML5" alt="" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_64.png" />
+ </li>
+
+ <li>
+ <!-- (mt) -->
+ <a href="http://mediatemple.net"><img title="Media Temple" alt="" src="http://mediatemple.net/_images/partnerlogos/mt-120x60-dk.png" /></a>
+ </li>
+
+ <li>
+ <!-- CloudFlare -->
+ <a href="http://www.cloudflare.com"><img title="CloudFlare" alt="" src="https://www.cloudflare.com/media/images/web-badges/cf-web-badges-a-gray-on.png" /></a>
+ </li>
+ </ul>
+
+
+ </div>
+ </div>
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script type="text/javascript" src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+ <script type="text/javascript">
+ $(function () {
+ var map;
+
+ $(".nav").buttonset();
+ $("a").filter("[data-role='button']").button();
+
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(function (p) {
+ initMap([p.coords.longitude, p.coords.latitude]);
+ }, function (error) {
+ initMap();
+ });
+ } else {
+ initMap();
+ }
+
+ function initMap(center) {
+ map = $(".geomap").geomap({
+ center: center || [-71.0597732, 42.3584308],
+ zoom: 7
+ });
+
+ $( ".geomap .osm" ).geomap("opacity", .5);
+ }
+ });
+ </script>
+ <script type="text/javascript">
+ var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+ (function (d, t) {
+ var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+ g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ } (document, 'script'));
+ </script>
+</body>
+</html>
--- /dev/null
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// Known Issues:
+//
+// * Patterns only support repeat.
+// * Radial gradient are not implemented. The VML version of these look very
+// different from the canvas one.
+// * Clipping paths are not implemented.
+// * Coordsize. The width and height attribute have higher priority than the
+// width and height style values which isn't correct.
+// * Painting mode isn't implemented.
+// * Canvas width/height should is using content-box by default. IE in
+// Quirks mode will draw the canvas using border-box. Either change your
+// doctype to HTML5
+// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
+// or use Box Sizing Behavior from WebFX
+// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
+// * Non uniform scaling does not correctly scale strokes.
+// * Optimize. There is always room for speed improvements.
+
+// Only add this code if we do not already have a canvas implementation
+if (!document.createElement('canvas').getContext) {
+
+ (function () {
+
+ // alias some functions to make (compiled) code shorter
+ var m = Math;
+ var mr = m.round;
+ var ms = m.sin;
+ var mc = m.cos;
+ var abs = m.abs;
+ var sqrt = m.sqrt;
+
+ // this is used for sub pixel precision
+ var Z = 10;
+ var Z2 = Z / 2;
+
+ var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
+
+ /**
+ * This funtion is assigned to the <canvas> elements as element.getContext().
+ * @this {HTMLElement}
+ * @return {CanvasRenderingContext2D_}
+ */
+ function getContext() {
+ return this.context_ ||
+ (this.context_ = new CanvasRenderingContext2D_(this));
+ }
+
+ var slice = Array.prototype.slice;
+
+ /**
+ * Binds a function to an object. The returned function will always use the
+ * passed in {@code obj} as {@code this}.
+ *
+ * Example:
+ *
+ * g = bind(f, obj, a, b)
+ * g(c, d) // will do f.call(obj, a, b, c, d)
+ *
+ * @param {Function} f The function to bind the object to
+ * @param {Object} obj The object that should act as this when the function
+ * is called
+ * @param {*} var_args Rest arguments that will be used as the initial
+ * arguments when the function is called
+ * @return {Function} A new function that has bound this
+ */
+ function bind(f, obj, var_args) {
+ var a = slice.call(arguments, 2);
+ return function () {
+ return f.apply(obj, a.concat(slice.call(arguments)));
+ };
+ }
+
+ function encodeHtmlAttribute(s) {
+ return String(s).replace(/&/g, '&').replace(/"/g, '"');
+ }
+
+ function addNamespace(doc, prefix, urn) {
+ if (!doc.namespaces[prefix]) {
+ doc.namespaces.add(prefix, urn, '#default#VML');
+ }
+ }
+
+ function addNamespacesAndStylesheet(doc) {
+ addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
+ addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
+
+ // Setup default CSS. Only add one style sheet per document
+ if (!doc.styleSheets['ex_canvas_']) {
+ var ss = doc.createStyleSheet();
+ ss.owningElement.id = 'ex_canvas_';
+ ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
+ // default size is 300x150 in Gecko and Opera
+ 'text-align:left;width:300px;height:150px}';
+ }
+ }
+
+ // Add namespaces and stylesheet at startup.
+ addNamespacesAndStylesheet(document);
+
+ var G_vmlCanvasManager_ = {
+ init: function (opt_doc) {
+ var doc = opt_doc || document;
+ // Create a dummy element so that IE will allow canvas elements to be
+ // recognized.
+ doc.createElement('canvas');
+ doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
+ },
+
+ init_: function (doc) {
+ // find all canvas elements
+ var els = doc.getElementsByTagName('canvas');
+ for (var i = 0; i < els.length; i++) {
+ this.initElement(els[i]);
+ }
+ },
+
+ /**
+ * Public initializes a canvas element so that it can be used as canvas
+ * element from now on. This is called automatically before the page is
+ * loaded but if you are creating elements using createElement you need to
+ * make sure this is called on the element.
+ * @param {HTMLElement} el The canvas element to initialize.
+ * @return {HTMLElement} the element that was created.
+ */
+ initElement: function (el) {
+ if (!el.getContext) {
+ el.getContext = getContext;
+
+ // Add namespaces and stylesheet to document of the element.
+ addNamespacesAndStylesheet(el.ownerDocument);
+
+ // Remove fallback content. There is no way to hide text nodes so we
+ // just remove all childNodes. We could hide all elements and remove
+ // text nodes but who really cares about the fallback content.
+ el.innerHTML = '';
+
+ // do not use inline function because that will leak memory
+ el.attachEvent('onpropertychange', onPropertyChange);
+ el.attachEvent('onresize', onResize);
+
+ var attrs = el.attributes;
+ if (attrs.width && attrs.width.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setWidth_(attrs.width.nodeValue);
+ el.style.width = attrs.width.nodeValue + 'px';
+ } else {
+ el.width = el.clientWidth;
+ }
+ if (attrs.height && attrs.height.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setHeight_(attrs.height.nodeValue);
+ el.style.height = attrs.height.nodeValue + 'px';
+ } else {
+ el.height = el.clientHeight;
+ }
+ //el.getContext().setCoordsize_()
+ }
+ return el;
+ }
+ };
+
+ function onPropertyChange(e) {
+ var el = e.srcElement;
+
+ switch (e.propertyName) {
+ case 'width':
+ el.getContext().clearRect();
+ el.style.width = el.attributes.width.nodeValue + 'px';
+ // In IE8 this does not trigger onresize.
+ el.firstChild.style.width = el.clientWidth + 'px';
+ break;
+ case 'height':
+ el.getContext().clearRect();
+ el.style.height = el.attributes.height.nodeValue + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ break;
+ }
+ }
+
+ function onResize(e) {
+ var el = e.srcElement;
+ if (el.firstChild) {
+ el.firstChild.style.width = el.clientWidth + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ }
+ }
+
+ G_vmlCanvasManager_.init();
+
+ // precompute "00" to "FF"
+ var decToHex = [];
+ for (var i = 0; i < 16; i++) {
+ for (var j = 0; j < 16; j++) {
+ decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
+ }
+ }
+
+ function createMatrixIdentity() {
+ return [
+ [1, 0, 0],
+ [0, 1, 0],
+ [0, 0, 1]
+ ];
+ }
+
+ function matrixMultiply(m1, m2) {
+ var result = createMatrixIdentity();
+
+ for (var x = 0; x < 3; x++) {
+ for (var y = 0; y < 3; y++) {
+ var sum = 0;
+
+ for (var z = 0; z < 3; z++) {
+ sum += m1[x][z] * m2[z][y];
+ }
+
+ result[x][y] = sum;
+ }
+ }
+ return result;
+ }
+
+ function copyState(o1, o2) {
+ o2.fillStyle = o1.fillStyle;
+ o2.lineCap = o1.lineCap;
+ o2.lineJoin = o1.lineJoin;
+ o2.lineWidth = o1.lineWidth;
+ o2.miterLimit = o1.miterLimit;
+ o2.shadowBlur = o1.shadowBlur;
+ o2.shadowColor = o1.shadowColor;
+ o2.shadowOffsetX = o1.shadowOffsetX;
+ o2.shadowOffsetY = o1.shadowOffsetY;
+ o2.strokeStyle = o1.strokeStyle;
+ o2.globalAlpha = o1.globalAlpha;
+ o2.font = o1.font;
+ o2.textAlign = o1.textAlign;
+ o2.textBaseline = o1.textBaseline;
+ o2.arcScaleX_ = o1.arcScaleX_;
+ o2.arcScaleY_ = o1.arcScaleY_;
+ o2.lineScale_ = o1.lineScale_;
+ }
+
+ // var colorData = {
+ // aliceblue: '#F0F8FF',
+ // antiquewhite: '#FAEBD7',
+ // aquamarine: '#7FFFD4',
+ // azure: '#F0FFFF',
+ // beige: '#F5F5DC',
+ // bisque: '#FFE4C4',
+ // black: '#000000',
+ // blanchedalmond: '#FFEBCD',
+ // blueviolet: '#8A2BE2',
+ // brown: '#A52A2A',
+ // burlywood: '#DEB887',
+ // cadetblue: '#5F9EA0',
+ // chartreuse: '#7FFF00',
+ // chocolate: '#D2691E',
+ // coral: '#FF7F50',
+ // cornflowerblue: '#6495ED',
+ // cornsilk: '#FFF8DC',
+ // crimson: '#DC143C',
+ // cyan: '#00FFFF',
+ // darkblue: '#00008B',
+ // darkcyan: '#008B8B',
+ // darkgoldenrod: '#B8860B',
+ // darkgray: '#A9A9A9',
+ // darkgreen: '#006400',
+ // darkgrey: '#A9A9A9',
+ // darkkhaki: '#BDB76B',
+ // darkmagenta: '#8B008B',
+ // darkolivegreen: '#556B2F',
+ // darkorange: '#FF8C00',
+ // darkorchid: '#9932CC',
+ // darkred: '#8B0000',
+ // darksalmon: '#E9967A',
+ // darkseagreen: '#8FBC8F',
+ // darkslateblue: '#483D8B',
+ // darkslategray: '#2F4F4F',
+ // darkslategrey: '#2F4F4F',
+ // darkturquoise: '#00CED1',
+ // darkviolet: '#9400D3',
+ // deeppink: '#FF1493',
+ // deepskyblue: '#00BFFF',
+ // dimgray: '#696969',
+ // dimgrey: '#696969',
+ // dodgerblue: '#1E90FF',
+ // firebrick: '#B22222',
+ // floralwhite: '#FFFAF0',
+ // forestgreen: '#228B22',
+ // gainsboro: '#DCDCDC',
+ // ghostwhite: '#F8F8FF',
+ // gold: '#FFD700',
+ // goldenrod: '#DAA520',
+ // grey: '#808080',
+ // greenyellow: '#ADFF2F',
+ // honeydew: '#F0FFF0',
+ // hotpink: '#FF69B4',
+ // indianred: '#CD5C5C',
+ // indigo: '#4B0082',
+ // ivory: '#FFFFF0',
+ // khaki: '#F0E68C',
+ // lavender: '#E6E6FA',
+ // lavenderblush: '#FFF0F5',
+ // lawngreen: '#7CFC00',
+ // lemonchiffon: '#FFFACD',
+ // lightblue: '#ADD8E6',
+ // lightcoral: '#F08080',
+ // lightcyan: '#E0FFFF',
+ // lightgoldenrodyellow: '#FAFAD2',
+ // lightgreen: '#90EE90',
+ // lightgrey: '#D3D3D3',
+ // lightpink: '#FFB6C1',
+ // lightsalmon: '#FFA07A',
+ // lightseagreen: '#20B2AA',
+ // lightskyblue: '#87CEFA',
+ // lightslategray: '#778899',
+ // lightslategrey: '#778899',
+ // lightsteelblue: '#B0C4DE',
+ // lightyellow: '#FFFFE0',
+ // limegreen: '#32CD32',
+ // linen: '#FAF0E6',
+ // magenta: '#FF00FF',
+ // mediumaquamarine: '#66CDAA',
+ // mediumblue: '#0000CD',
+ // mediumorchid: '#BA55D3',
+ // mediumpurple: '#9370DB',
+ // mediumseagreen: '#3CB371',
+ // mediumslateblue: '#7B68EE',
+ // mediumspringgreen: '#00FA9A',
+ // mediumturquoise: '#48D1CC',
+ // mediumvioletred: '#C71585',
+ // midnightblue: '#191970',
+ // mintcream: '#F5FFFA',
+ // mistyrose: '#FFE4E1',
+ // moccasin: '#FFE4B5',
+ // navajowhite: '#FFDEAD',
+ // oldlace: '#FDF5E6',
+ // olivedrab: '#6B8E23',
+ // orange: '#FFA500',
+ // orangered: '#FF4500',
+ // orchid: '#DA70D6',
+ // palegoldenrod: '#EEE8AA',
+ // palegreen: '#98FB98',
+ // paleturquoise: '#AFEEEE',
+ // palevioletred: '#DB7093',
+ // papayawhip: '#FFEFD5',
+ // peachpuff: '#FFDAB9',
+ // peru: '#CD853F',
+ // pink: '#FFC0CB',
+ // plum: '#DDA0DD',
+ // powderblue: '#B0E0E6',
+ // rosybrown: '#BC8F8F',
+ // royalblue: '#4169E1',
+ // saddlebrown: '#8B4513',
+ // salmon: '#FA8072',
+ // sandybrown: '#F4A460',
+ // seagreen: '#2E8B57',
+ // seashell: '#FFF5EE',
+ // sienna: '#A0522D',
+ // skyblue: '#87CEEB',
+ // slateblue: '#6A5ACD',
+ // slategray: '#708090',
+ // slategrey: '#708090',
+ // snow: '#FFFAFA',
+ // springgreen: '#00FF7F',
+ // steelblue: '#4682B4',
+ // tan: '#D2B48C',
+ // thistle: '#D8BFD8',
+ // tomato: '#FF6347',
+ // turquoise: '#40E0D0',
+ // violet: '#EE82EE',
+ // wheat: '#F5DEB3',
+ // whitesmoke: '#F5F5F5',
+ // yellowgreen: '#9ACD32'
+ // };
+
+
+ function getRgbHslContent(styleString) {
+ var start = styleString.indexOf('(', 3);
+ var end = styleString.indexOf(')', start + 1);
+ var parts = styleString.substring(start + 1, end).split(',');
+ // add alpha if needed
+ if (parts.length != 4 || styleString.charAt(3) != 'a') {
+ parts[3] = 1;
+ }
+ return parts;
+ }
+
+ function percent(s) {
+ return parseFloat(s) / 100;
+ }
+
+ function clamp(v, min, max) {
+ return Math.min(max, Math.max(min, v));
+ }
+
+ function hslToRgb(parts) {
+ var r, g, b, h, s, l;
+ h = parseFloat(parts[0]) / 360 % 360;
+ if (h < 0)
+ h++;
+ s = clamp(percent(parts[1]), 0, 1);
+ l = clamp(percent(parts[2]), 0, 1);
+ if (s == 0) {
+ r = g = b = l; // achromatic
+ } else {
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ var p = 2 * l - q;
+ r = hueToRgb(p, q, h + 1 / 3);
+ g = hueToRgb(p, q, h);
+ b = hueToRgb(p, q, h - 1 / 3);
+ }
+
+ return '#' + decToHex[Math.floor(r * 255)] +
+ decToHex[Math.floor(g * 255)] +
+ decToHex[Math.floor(b * 255)];
+ }
+
+ function hueToRgb(m1, m2, h) {
+ if (h < 0)
+ h++;
+ if (h > 1)
+ h--;
+
+ if (6 * h < 1)
+ return m1 + (m2 - m1) * 6 * h;
+ else if (2 * h < 1)
+ return m2;
+ else if (3 * h < 2)
+ return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+ else
+ return m1;
+ }
+
+ var processStyleCache = {};
+
+ function processStyle(styleString) {
+ if (styleString in processStyleCache) {
+ return processStyleCache[styleString];
+ }
+
+ var str, alpha = 1;
+
+ styleString = String(styleString);
+ if (styleString.charAt(0) == '#') {
+ str = styleString;
+ } else if (/^rgb/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ var str = '#', n;
+ for (var i = 0; i < 3; i++) {
+ if (parts[i].indexOf('%') != -1) {
+ n = Math.floor(percent(parts[i]) * 255);
+ } else {
+ n = +parts[i];
+ }
+ str += decToHex[clamp(n, 0, 255)];
+ }
+ alpha = +parts[3];
+ } else if (/^hsl/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ str = hslToRgb(parts);
+ alpha = parts[3];
+ } else {
+ str = /*colorData[styleString] ||*/styleString;
+ }
+ return processStyleCache[styleString] = { color: str, alpha: alpha };
+ }
+
+ var DEFAULT_STYLE = {
+ style: 'normal',
+ variant: 'normal',
+ weight: 'normal',
+ size: 10,
+ family: 'sans-serif'
+ };
+
+ // Internal text style cache
+ // var fontStyleCache = {};
+
+ // function processFontStyle(styleString) {
+ // if (fontStyleCache[styleString]) {
+ // return fontStyleCache[styleString];
+ // }
+
+ // var el = document.createElement('div');
+ // var style = el.style;
+ // try {
+ // style.font = styleString;
+ // } catch (ex) {
+ // // Ignore failures to set to invalid font.
+ // }
+
+ // return fontStyleCache[styleString] = {
+ // style: style.fontStyle || DEFAULT_STYLE.style,
+ // variant: style.fontVariant || DEFAULT_STYLE.variant,
+ // weight: style.fontWeight || DEFAULT_STYLE.weight,
+ // size: style.fontSize || DEFAULT_STYLE.size,
+ // family: style.fontFamily || DEFAULT_STYLE.family
+ // };
+ // }
+
+ // function getComputedStyle(style, element) {
+ // var computedStyle = {};
+
+ // for (var p in style) {
+ // computedStyle[p] = style[p];
+ // }
+
+ // // Compute the size
+ // var canvasFontSize = parseFloat(element.currentStyle.fontSize),
+ // fontSize = parseFloat(style.size);
+
+ // if (typeof style.size == 'number') {
+ // computedStyle.size = style.size;
+ // } else if (style.size.indexOf('px') != -1) {
+ // computedStyle.size = fontSize;
+ // } else if (style.size.indexOf('em') != -1) {
+ // computedStyle.size = canvasFontSize * fontSize;
+ // } else if(style.size.indexOf('%') != -1) {
+ // computedStyle.size = (canvasFontSize / 100) * fontSize;
+ // } else if (style.size.indexOf('pt') != -1) {
+ // computedStyle.size = fontSize / .75;
+ // } else {
+ // computedStyle.size = canvasFontSize;
+ // }
+
+ // // Different scaling between normal text and VML text. This was found using
+ // // trial and error to get the same size as non VML text.
+ // computedStyle.size *= 0.981;
+
+ // return computedStyle;
+ // }
+
+ // function buildStyle(style) {
+ // return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
+ // style.size + 'px ' + style.family;
+ // }
+
+ var lineCapMap = {
+ 'butt': 'flat',
+ 'round': 'round'
+ };
+
+ function processLineCap(lineCap) {
+ return lineCapMap[lineCap] || 'square';
+ }
+
+ /**
+ * This class implements CanvasRenderingContext2D interface as described by
+ * the WHATWG.
+ * @param {HTMLElement} canvasElement The element that the 2D context should
+ * be associated with
+ */
+ function CanvasRenderingContext2D_(canvasElement) {
+ this.m_ = createMatrixIdentity();
+
+ this.mStack_ = [];
+ this.aStack_ = [];
+ this.currentPath_ = [];
+
+ // Canvas context properties
+ this.strokeStyle = '#000';
+ this.fillStyle = '#000';
+
+ this.lineWidth = 1;
+ this.lineJoin = 'miter';
+ this.lineCap = 'butt';
+ this.miterLimit = Z * 1;
+ this.globalAlpha = 1;
+ //this.font = '10px sans-serif';
+ //this.textAlign = 'left';
+ //this.textBaseline = 'alphabetic';
+ this.canvas = canvasElement;
+
+ var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
+ canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
+ var el = canvasElement.ownerDocument.createElement('div');
+ el.style.cssText = cssText;
+ canvasElement.appendChild(el);
+
+ var overlayEl = el.cloneNode(false);
+ // Use a non transparent background.
+ overlayEl.style.backgroundColor = 'red';
+ overlayEl.style.filter = 'alpha(opacity=0)';
+ canvasElement.appendChild(overlayEl);
+
+ this.element_ = el;
+ this.arcScaleX_ = 1;
+ this.arcScaleY_ = 1;
+ this.lineScale_ = 1;
+ }
+
+ var contextPrototype = CanvasRenderingContext2D_.prototype;
+ contextPrototype.clearRect = function () {
+ if (this.textMeasureEl_) {
+ this.textMeasureEl_.removeNode(true);
+ this.textMeasureEl_ = null;
+ }
+ this.element_.innerHTML = '';
+ };
+
+ contextPrototype.beginPath = function () {
+ // TODO: Branch current matrix so that save/restore has no effect
+ // as per safari docs.
+ this.currentPath_ = [];
+ };
+
+ contextPrototype.moveTo = function (aX, aY) {
+ var p = getCoords(this, aX, aY);
+ this.currentPath_.push({ type: 'moveTo', x: p.x, y: p.y });
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
+ };
+
+ contextPrototype.lineTo = function (aX, aY) {
+ var p = getCoords(this, aX, aY);
+ this.currentPath_.push({ type: 'lineTo', x: p.x, y: p.y });
+
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
+ };
+
+ contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
+ aCP2x, aCP2y,
+ aX, aY) {
+ var p = getCoords(this, aX, aY);
+ var cp1 = getCoords(this, aCP1x, aCP1y);
+ var cp2 = getCoords(this, aCP2x, aCP2y);
+ bezierCurveTo(this, cp1, cp2, p);
+ };
+
+ // Helper function that takes the already fixed cordinates.
+ function bezierCurveTo(self, cp1, cp2, p) {
+ self.currentPath_.push({
+ type: 'bezierCurveTo',
+ cp1x: cp1.x,
+ cp1y: cp1.y,
+ cp2x: cp2.x,
+ cp2y: cp2.y,
+ x: p.x,
+ y: p.y
+ });
+ self.currentX_ = p.x;
+ self.currentY_ = p.y;
+ }
+
+ contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
+ // the following is lifted almost directly from
+ // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
+
+ var cp = getCoords(this, aCPx, aCPy);
+ var p = getCoords(this, aX, aY);
+
+ var cp1 = {
+ x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
+ y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
+ };
+ var cp2 = {
+ x: cp1.x + (p.x - this.currentX_) / 3.0,
+ y: cp1.y + (p.y - this.currentY_) / 3.0
+ };
+
+ bezierCurveTo(this, cp1, cp2, p);
+ };
+
+ contextPrototype.arc = function (aX, aY, aRadius,
+ aStartAngle, aEndAngle, aClockwise) {
+ aRadius *= Z;
+ var arcType = aClockwise ? 'at' : 'wa';
+
+ var xStart = aX + mc(aStartAngle) * aRadius - Z2;
+ var yStart = aY + ms(aStartAngle) * aRadius - Z2;
+
+ var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
+ var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
+
+ // IE won't render arches drawn counter clockwise if xStart == xEnd.
+ if (xStart == xEnd && !aClockwise) {
+ xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
+ // that can be represented in binary
+ }
+
+ var p = getCoords(this, aX, aY);
+ var pStart = getCoords(this, xStart, yStart);
+ var pEnd = getCoords(this, xEnd, yEnd);
+
+ this.currentPath_.push({ type: arcType,
+ x: p.x,
+ y: p.y,
+ radius: aRadius,
+ xStart: pStart.x,
+ yStart: pStart.y,
+ xEnd: pEnd.x,
+ yEnd: pEnd.y
+ });
+
+ };
+
+ // contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // };
+
+ // contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
+ // var oldPath = this.currentPath_;
+ // this.beginPath();
+
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // this.stroke();
+
+ // this.currentPath_ = oldPath;
+ // };
+
+ // contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
+ // var oldPath = this.currentPath_;
+ // this.beginPath();
+
+ // this.moveTo(aX, aY);
+ // this.lineTo(aX + aWidth, aY);
+ // this.lineTo(aX + aWidth, aY + aHeight);
+ // this.lineTo(aX, aY + aHeight);
+ // this.closePath();
+ // this.fill();
+
+ // this.currentPath_ = oldPath;
+ // };
+
+ // contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
+ // var gradient = new CanvasGradient_('gradient');
+ // gradient.x0_ = aX0;
+ // gradient.y0_ = aY0;
+ // gradient.x1_ = aX1;
+ // gradient.y1_ = aY1;
+ // return gradient;
+ // };
+
+ // contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
+ // aX1, aY1, aR1) {
+ // var gradient = new CanvasGradient_('gradientradial');
+ // gradient.x0_ = aX0;
+ // gradient.y0_ = aY0;
+ // gradient.r0_ = aR0;
+ // gradient.x1_ = aX1;
+ // gradient.y1_ = aY1;
+ // gradient.r1_ = aR1;
+ // return gradient;
+ // };
+
+ // contextPrototype.drawImage = function(image, var_args) {
+ // var dx, dy, dw, dh, sx, sy, sw, sh;
+
+ // // to find the original width we overide the width and height
+ // var oldRuntimeWidth = image.runtimeStyle.width;
+ // var oldRuntimeHeight = image.runtimeStyle.height;
+ // image.runtimeStyle.width = 'auto';
+ // image.runtimeStyle.height = 'auto';
+
+ // // get the original size
+ // var w = image.width;
+ // var h = image.height;
+
+ // // and remove overides
+ // image.runtimeStyle.width = oldRuntimeWidth;
+ // image.runtimeStyle.height = oldRuntimeHeight;
+
+ // if (arguments.length == 3) {
+ // dx = arguments[1];
+ // dy = arguments[2];
+ // sx = sy = 0;
+ // sw = dw = w;
+ // sh = dh = h;
+ // } else if (arguments.length == 5) {
+ // dx = arguments[1];
+ // dy = arguments[2];
+ // dw = arguments[3];
+ // dh = arguments[4];
+ // sx = sy = 0;
+ // sw = w;
+ // sh = h;
+ // } else if (arguments.length == 9) {
+ // sx = arguments[1];
+ // sy = arguments[2];
+ // sw = arguments[3];
+ // sh = arguments[4];
+ // dx = arguments[5];
+ // dy = arguments[6];
+ // dw = arguments[7];
+ // dh = arguments[8];
+ // } else {
+ // throw Error('Invalid number of arguments');
+ // }
+
+ // var d = getCoords(this, dx, dy);
+
+ // var w2 = sw / 2;
+ // var h2 = sh / 2;
+
+ // var vmlStr = [];
+
+ // var W = 10;
+ // var H = 10;
+
+ // // For some reason that I've now forgotten, using divs didn't work
+ // vmlStr.push(' <g_vml_:group',
+ // ' coordsize="', Z * W, ',', Z * H, '"',
+ // ' coordorigin="0,0"' ,
+ // ' style="width:', W, 'px;height:', H, 'px;position:absolute;');
+
+ // // If filters are necessary (rotation exists), create them
+ // // filters are bog-slow, so only create them if abbsolutely necessary
+ // // The following check doesn't account for skews (which don't exist
+ // // in the canvas spec (yet) anyway.
+
+ // if (this.m_[0][0] != 1 || this.m_[0][1] ||
+ // this.m_[1][1] != 1 || this.m_[1][0]) {
+ // var filter = [];
+
+ // // Note the 12/21 reversal
+ // filter.push('M11=', this.m_[0][0], ',',
+ // 'M12=', this.m_[1][0], ',',
+ // 'M21=', this.m_[0][1], ',',
+ // 'M22=', this.m_[1][1], ',',
+ // 'Dx=', mr(d.x / Z), ',',
+ // 'Dy=', mr(d.y / Z), '');
+
+ // // Bounding box calculation (need to minimize displayed area so that
+ // // filters don't waste time on unused pixels.
+ // var max = d;
+ // var c2 = getCoords(this, dx + dw, dy);
+ // var c3 = getCoords(this, dx, dy + dh);
+ // var c4 = getCoords(this, dx + dw, dy + dh);
+
+ // max.x = m.max(max.x, c2.x, c3.x, c4.x);
+ // max.y = m.max(max.y, c2.y, c3.y, c4.y);
+
+ // vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
+ // 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
+ // filter.join(''), ", sizingmethod='clip');");
+
+ // } else {
+ // vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
+ // }
+
+ // vmlStr.push(' ">' ,
+ // '<g_vml_:image src="', image.src, '"',
+ // ' style="width:', Z * dw, 'px;',
+ // ' height:', Z * dh, 'px"',
+ // ' cropleft="', sx / w, '"',
+ // ' croptop="', sy / h, '"',
+ // ' cropright="', (w - sx - sw) / w, '"',
+ // ' cropbottom="', (h - sy - sh) / h, '"',
+ // ' />',
+ // '</g_vml_:group>');
+
+ // this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
+ // };
+
+ contextPrototype.stroke = function (aFill) {
+ var lineStr = [];
+ var lineOpen = false;
+
+ var W = 10;
+ var H = 10;
+
+ lineStr.push('<g_vml_:shape',
+ ' filled="', !!aFill, '"',
+ ' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
+ ' coordorigin="0,0"',
+ ' coordsize="', Z * W, ',', Z * H, '"',
+ ' stroked="', !aFill, '"',
+ ' path="');
+
+ var newSeq = false;
+ var min = { x: null, y: null };
+ var max = { x: null, y: null };
+
+ for (var i = 0; i < this.currentPath_.length; i++) {
+ var p = this.currentPath_[i];
+ var c;
+
+ switch (p.type) {
+ case 'moveTo':
+ c = p;
+ lineStr.push(' m ', mr(p.x), ',', mr(p.y));
+ break;
+ case 'lineTo':
+ lineStr.push(' l ', mr(p.x), ',', mr(p.y));
+ break;
+ case 'close':
+ lineStr.push(' x ');
+ p = null;
+ break;
+ case 'bezierCurveTo':
+ lineStr.push(' c ',
+ mr(p.cp1x), ',', mr(p.cp1y), ',',
+ mr(p.cp2x), ',', mr(p.cp2y), ',',
+ mr(p.x), ',', mr(p.y));
+ break;
+ case 'at':
+ case 'wa':
+ lineStr.push(' ', p.type, ' ',
+ mr(p.x - this.arcScaleX_ * p.radius), ',',
+ mr(p.y - this.arcScaleY_ * p.radius), ' ',
+ mr(p.x + this.arcScaleX_ * p.radius), ',',
+ mr(p.y + this.arcScaleY_ * p.radius), ' ',
+ mr(p.xStart), ',', mr(p.yStart), ' ',
+ mr(p.xEnd), ',', mr(p.yEnd));
+ break;
+ }
+
+
+ // TODO: Following is broken for curves due to
+ // move to proper paths.
+
+ // Figure out dimensions so we can do gradient fills
+ // properly
+ if (p) {
+ if (min.x == null || p.x < min.x) {
+ min.x = p.x;
+ }
+ if (max.x == null || p.x > max.x) {
+ max.x = p.x;
+ }
+ if (min.y == null || p.y < min.y) {
+ min.y = p.y;
+ }
+ if (max.y == null || p.y > max.y) {
+ max.y = p.y;
+ }
+ }
+ }
+ lineStr.push(' ">');
+
+ if (!aFill) {
+ appendStroke(this, lineStr);
+ } else {
+ appendFill(this, lineStr, min, max);
+ }
+
+ lineStr.push('</g_vml_:shape>');
+
+ this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ };
+
+ function appendStroke(ctx, lineStr) {
+ var a = processStyle(ctx.strokeStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
+ var lineWidth = ctx.lineScale_ * ctx.lineWidth;
+
+ // VML cannot correctly render a line if the width is less than 1px.
+ // In that case, we dilute the color to make the line look thinner.
+ if (lineWidth < 1) {
+ opacity *= lineWidth;
+ }
+
+ lineStr.push(
+ '<g_vml_:stroke',
+ ' opacity="', opacity, '"',
+ ' joinstyle="', ctx.lineJoin, '"',
+ ' miterlimit="', ctx.miterLimit, '"',
+ ' endcap="', processLineCap(ctx.lineCap), '"',
+ ' weight="', lineWidth, 'px"',
+ ' color="', color, '" />'
+ );
+ }
+
+ function appendFill(ctx, lineStr, min, max) {
+ var fillStyle = ctx.fillStyle;
+ var arcScaleX = ctx.arcScaleX_;
+ var arcScaleY = ctx.arcScaleY_;
+ var width = max.x - min.x;
+ var height = max.y - min.y;
+ // if (fillStyle instanceof CanvasGradient_) {
+ // // TODO: Gradients transformed with the transformation matrix.
+ // var angle = 0;
+ // var focus = {x: 0, y: 0};
+
+ // // additional offset
+ // var shift = 0;
+ // // scale factor for offset
+ // var expansion = 1;
+
+ // if (fillStyle.type_ == 'gradient') {
+ // var x0 = fillStyle.x0_ / arcScaleX;
+ // var y0 = fillStyle.y0_ / arcScaleY;
+ // var x1 = fillStyle.x1_ / arcScaleX;
+ // var y1 = fillStyle.y1_ / arcScaleY;
+ // var p0 = getCoords(ctx, x0, y0);
+ // var p1 = getCoords(ctx, x1, y1);
+ // var dx = p1.x - p0.x;
+ // var dy = p1.y - p0.y;
+ // angle = Math.atan2(dx, dy) * 180 / Math.PI;
+
+ // // The angle should be a non-negative number.
+ // if (angle < 0) {
+ // angle += 360;
+ // }
+
+ // // Very small angles produce an unexpected result because they are
+ // // converted to a scientific notation string.
+ // if (angle < 1e-6) {
+ // angle = 0;
+ // }
+ // } else {
+ // var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
+ // focus = {
+ // x: (p0.x - min.x) / width,
+ // y: (p0.y - min.y) / height
+ // };
+
+ // width /= arcScaleX * Z;
+ // height /= arcScaleY * Z;
+ // var dimension = m.max(width, height);
+ // shift = 2 * fillStyle.r0_ / dimension;
+ // expansion = 2 * fillStyle.r1_ / dimension - shift;
+ // }
+
+ // // We need to sort the color stops in ascending order by offset,
+ // // otherwise IE won't interpret it correctly.
+ // var stops = fillStyle.colors_;
+ // stops.sort(function(cs1, cs2) {
+ // return cs1.offset - cs2.offset;
+ // });
+
+ // var length = stops.length;
+ // var color1 = stops[0].color;
+ // var color2 = stops[length - 1].color;
+ // var opacity1 = stops[0].alpha * ctx.globalAlpha;
+ // var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
+
+ // var colors = [];
+ // for (var i = 0; i < length; i++) {
+ // var stop = stops[i];
+ // colors.push(stop.offset * expansion + shift + ' ' + stop.color);
+ // }
+
+ // // When colors attribute is used, the meanings of opacity and o:opacity2
+ // // are reversed.
+ // lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
+ // ' method="none" focus="100%"',
+ // ' color="', color1, '"',
+ // ' color2="', color2, '"',
+ // ' colors="', colors.join(','), '"',
+ // ' opacity="', opacity2, '"',
+ // ' g_o_:opacity2="', opacity1, '"',
+ // ' angle="', angle, '"',
+ // ' focusposition="', focus.x, ',', focus.y, '" />');
+ // } else if (fillStyle instanceof CanvasPattern_) {
+ // if (width && height) {
+ // var deltaLeft = -min.x;
+ // var deltaTop = -min.y;
+ // lineStr.push('<g_vml_:fill',
+ // ' position="',
+ // deltaLeft / width * arcScaleX * arcScaleX, ',',
+ // deltaTop / height * arcScaleY * arcScaleY, '"',
+ // ' type="tile"',
+ // // TODO: Figure out the correct size to fit the scale.
+ // //' size="', w, 'px ', h, 'px"',
+ // ' src="', fillStyle.src_, '" />');
+ // }
+ // } else {
+ var a = processStyle(ctx.fillStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
+ lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
+ '" />');
+ // }
+ }
+
+ contextPrototype.fill = function () {
+ this.stroke(true);
+ };
+
+ contextPrototype.closePath = function () {
+ this.currentPath_.push({ type: 'close' });
+ };
+
+ function getCoords(ctx, aX, aY) {
+ var m = ctx.m_;
+ return {
+ x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
+ y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
+ };
+ };
+
+ contextPrototype.save = function () {
+ var o = {};
+ copyState(this, o);
+ this.aStack_.push(o);
+ this.mStack_.push(this.m_);
+ this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
+ };
+
+ contextPrototype.restore = function () {
+ if (this.aStack_.length) {
+ copyState(this.aStack_.pop(), this);
+ this.m_ = this.mStack_.pop();
+ }
+ };
+
+ function matrixIsFinite(m) {
+ return isFinite(m[0][0]) && isFinite(m[0][1]) &&
+ isFinite(m[1][0]) && isFinite(m[1][1]) &&
+ isFinite(m[2][0]) && isFinite(m[2][1]);
+ }
+
+ function setM(ctx, m, updateLineScale) {
+ if (!matrixIsFinite(m)) {
+ return;
+ }
+ ctx.m_ = m;
+
+ if (updateLineScale) {
+ // Get the line scale.
+ // Determinant of this.m_ means how much the area is enlarged by the
+ // transformation. So its square root can be used as a scale factor
+ // for width.
+ var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
+ ctx.lineScale_ = sqrt(abs(det));
+ }
+ }
+
+ contextPrototype.translate = function (aX, aY) {
+ var m1 = [
+ [1, 0, 0],
+ [0, 1, 0],
+ [aX, aY, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), false);
+ };
+
+ // contextPrototype.rotate = function(aRot) {
+ // var c = mc(aRot);
+ // var s = ms(aRot);
+
+ // var m1 = [
+ // [c, s, 0],
+ // [-s, c, 0],
+ // [0, 0, 1]
+ // ];
+
+ // setM(this, matrixMultiply(m1, this.m_), false);
+ // };
+
+ contextPrototype.scale = function (aX, aY) {
+ this.arcScaleX_ *= aX;
+ this.arcScaleY_ *= aY;
+ var m1 = [
+ [aX, 0, 0],
+ [0, aY, 0],
+ [0, 0, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), true);
+ };
+
+ // contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
+ // var m1 = [
+ // [m11, m12, 0],
+ // [m21, m22, 0],
+ // [dx, dy, 1]
+ // ];
+
+ // setM(this, matrixMultiply(m1, this.m_), true);
+ // };
+
+ // contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
+ // var m = [
+ // [m11, m12, 0],
+ // [m21, m22, 0],
+ // [dx, dy, 1]
+ // ];
+
+ // setM(this, m, true);
+ // };
+
+ /**
+ * The text drawing function.
+ * The maxWidth argument isn't taken in account, since no browser supports
+ * it yet.
+ */
+ // contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
+ // var m = this.m_,
+ // delta = 1000,
+ // left = 0,
+ // right = delta,
+ // offset = {x: 0, y: 0},
+ // lineStr = [];
+
+ // var fontStyle = getComputedStyle(processFontStyle(this.font),
+ // this.element_);
+
+ // var fontStyleString = buildStyle(fontStyle);
+
+ // var elementStyle = this.element_.currentStyle;
+ // var textAlign = this.textAlign.toLowerCase();
+ // switch (textAlign) {
+ // case 'left':
+ // case 'center':
+ // case 'right':
+ // break;
+ // case 'end':
+ // textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
+ // break;
+ // case 'start':
+ // textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
+ // break;
+ // default:
+ // textAlign = 'left';
+ // }
+
+ // // 1.75 is an arbitrary number, as there is no info about the text baseline
+ // switch (this.textBaseline) {
+ // case 'hanging':
+ // case 'top':
+ // offset.y = fontStyle.size / 1.75;
+ // break;
+ // case 'middle':
+ // break;
+ // default:
+ // case null:
+ // case 'alphabetic':
+ // case 'ideographic':
+ // case 'bottom':
+ // offset.y = -fontStyle.size / 2.25;
+ // break;
+ // }
+
+ // switch(textAlign) {
+ // case 'right':
+ // left = delta;
+ // right = 0.05;
+ // break;
+ // case 'center':
+ // left = right = delta / 2;
+ // break;
+ // }
+
+ // var d = getCoords(this, x + offset.x, y + offset.y);
+
+ // lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
+ // ' coordsize="100 100" coordorigin="0 0"',
+ // ' filled="', !stroke, '" stroked="', !!stroke,
+ // '" style="position:absolute;width:1px;height:1px;">');
+
+ // if (stroke) {
+ // appendStroke(this, lineStr);
+ // } else {
+ // // TODO: Fix the min and max params.
+ // appendFill(this, lineStr, {x: -left, y: 0},
+ // {x: right, y: fontStyle.size});
+ // }
+
+ // var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
+ // m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
+
+ // var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
+
+ // lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
+ // ' offset="', skewOffset, '" origin="', left ,' 0" />',
+ // '<g_vml_:path textpathok="true" />',
+ // '<g_vml_:textpath on="true" string="',
+ // encodeHtmlAttribute(text),
+ // '" style="v-text-align:', textAlign,
+ // ';font:', encodeHtmlAttribute(fontStyleString),
+ // '" /></g_vml_:line>');
+
+ // this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ // };
+
+ // contextPrototype.fillText = function(text, x, y, maxWidth) {
+ // this.drawText_(text, x, y, maxWidth, false);
+ // };
+
+ // contextPrototype.strokeText = function(text, x, y, maxWidth) {
+ // this.drawText_(text, x, y, maxWidth, true);
+ // };
+
+ // contextPrototype.measureText = function(text) {
+ // if (!this.textMeasureEl_) {
+ // var s = '<span style="position:absolute;' +
+ // 'top:-20000px;left:0;padding:0;margin:0;border:none;' +
+ // 'white-space:pre;"></span>';
+ // this.element_.insertAdjacentHTML('beforeEnd', s);
+ // this.textMeasureEl_ = this.element_.lastChild;
+ // }
+ // var doc = this.element_.ownerDocument;
+ // this.textMeasureEl_.innerHTML = '';
+ // this.textMeasureEl_.style.font = this.font;
+ // // Don't use innerHTML or innerText because they allow markup/whitespace.
+ // this.textMeasureEl_.appendChild(doc.createTextNode(text));
+ // return {width: this.textMeasureEl_.offsetWidth};
+ // };
+
+ /******** STUBS ********/
+ // contextPrototype.clip = function() {
+ // // TODO: Implement
+ // };
+
+ // contextPrototype.arcTo = function() {
+ // // TODO: Implement
+ // };
+
+ // contextPrototype.createPattern = function(image, repetition) {
+ // return new CanvasPattern_(image, repetition);
+ // };
+
+ // // Gradient / Pattern Stubs
+ // function CanvasGradient_(aType) {
+ // this.type_ = aType;
+ // this.x0_ = 0;
+ // this.y0_ = 0;
+ // this.r0_ = 0;
+ // this.x1_ = 0;
+ // this.y1_ = 0;
+ // this.r1_ = 0;
+ // this.colors_ = [];
+ // }
+
+ // CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
+ // aColor = processStyle(aColor);
+ // this.colors_.push({offset: aOffset,
+ // color: aColor.color,
+ // alpha: aColor.alpha});
+ // };
+
+ // function CanvasPattern_(image, repetition) {
+ // assertImageIsValid(image);
+ // switch (repetition) {
+ // case 'repeat':
+ // case null:
+ // case '':
+ // this.repetition_ = 'repeat';
+ // break
+ // case 'repeat-x':
+ // case 'repeat-y':
+ // case 'no-repeat':
+ // this.repetition_ = repetition;
+ // break;
+ // default:
+ // throwException('SYNTAX_ERR');
+ // }
+
+ // this.src_ = image.src;
+ // this.width_ = image.width;
+ // this.height_ = image.height;
+ // }
+
+ function throwException(s) {
+ throw new DOMException_(s);
+ }
+
+ // function assertImageIsValid(img) {
+ // if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
+ // throwException('TYPE_MISMATCH_ERR');
+ // }
+ // if (img.readyState != 'complete') {
+ // throwException('INVALID_STATE_ERR');
+ // }
+ // }
+
+ function DOMException_(s) {
+ this.code = this[s];
+ this.message = s + ': DOM Exception ' + this.code;
+ }
+ var p = DOMException_.prototype = new Error;
+ p.INDEX_SIZE_ERR = 1;
+ p.DOMSTRING_SIZE_ERR = 2;
+ p.HIERARCHY_REQUEST_ERR = 3;
+ p.WRONG_DOCUMENT_ERR = 4;
+ p.INVALID_CHARACTER_ERR = 5;
+ p.NO_DATA_ALLOWED_ERR = 6;
+ p.NO_MODIFICATION_ALLOWED_ERR = 7;
+ p.NOT_FOUND_ERR = 8;
+ p.NOT_SUPPORTED_ERR = 9;
+ p.INUSE_ATTRIBUTE_ERR = 10;
+ p.INVALID_STATE_ERR = 11;
+ p.SYNTAX_ERR = 12;
+ p.INVALID_MODIFICATION_ERR = 13;
+ p.NAMESPACE_ERR = 14;
+ p.INVALID_ACCESS_ERR = 15;
+ p.VALIDATION_ERR = 16;
+ p.TYPE_MISMATCH_ERR = 17;
+
+ // set up externs
+ G_vmlCanvasManager = G_vmlCanvasManager_;
+ CanvasRenderingContext2D = CanvasRenderingContext2D_;
+ //CanvasGradient = CanvasGradient_;
+ //CanvasPattern = CanvasPattern_;
+ DOMException = DOMException_;
+ })();
+
+} // if
--- /dev/null
+(function ($, window, undefined) {
+ var pos_oo = Number.POSITIVE_INFINITY,
+ neg_oo = Number.NEGATIVE_INFINITY;
+
+ $.geo = {
+ //
+ // utility functions
+ //
+
+ _allCoordinates: function (geom) {
+ // return array of all positions in all geometries of geom
+ // not in JTS
+ var geometries = this._flatten(geom),
+ curGeom = 0,
+ result = [];
+
+ for (; curGeom < geometries.length; curGeom++) {
+ var coordinates = geometries[curGeom].coordinates,
+ isArray = coordinates && $.isArray(coordinates[0]),
+ isDblArray = isArray && $.isArray(coordinates[0][0]),
+ isTriArray = isDblArray && $.isArray(coordinates[0][0][0]),
+ i, j, k;
+
+ if (!isTriArray) {
+ if (!isDblArray) {
+ if (!isArray) {
+ coordinates = [coordinates];
+ }
+ coordinates = [coordinates];
+ }
+ coordinates = [coordinates];
+ }
+
+ for (i = 0; i < coordinates.length; i++) {
+ for (j = 0; j < coordinates[i].length; j++) {
+ for (k = 0; k < coordinates[i][j].length; k++) {
+ result.push(coordinates[i][j][k]);
+ }
+ }
+ }
+ }
+ return result;
+ },
+
+ _isGeodetic: function( coords ) {
+ // returns true if the first coordinate it can find is geodetic
+
+ while ( $.isArray( coords ) ) {
+ if ( coords.length > 1 && ! $.isArray( coords[ 0 ] ) ) {
+ return ( coords[ 0 ] >= -180 && coords[ 0 ] <= 180 && coords[ 1 ] >= -85 && coords[ 1 ] <= 85 );
+ } else {
+ coords = coords[ 0 ];
+ }
+ }
+
+ return false;
+ },
+
+ //
+ // bbox functions
+ //
+
+ center: function (bbox, _ignoreGeo /* Internal Use Only */) {
+ // Envelope.centre in JTS
+ // bbox only, use centroid for geom
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ var center = [(bbox[0] + bbox[2]) / 2, (bbox[1] + bbox[3]) / 2];
+ return wasGeodetic ? $.geo.proj.toGeodetic(center) : center;
+ },
+
+ expandBy: function (bbox, dx, dy, _ignoreGeo /* Internal Use Only */) {
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ bbox = [bbox[0] - dx, bbox[1] - dy, bbox[2] + dx, bbox[3] + dy];
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ height: function (bbox, _ignoreGeo /* Internal Use Only */ ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ return bbox[3] - bbox[1];
+ },
+
+ _in: function(bbox1, bbox2) {
+ return bbox1[0] <= bbox2[0] &&
+ bbox1[1] <= bbox2[1] &&
+ bbox1[2] >= bbox2[2] &&
+ bbox1[3] >= bbox2[3];
+ },
+
+ _bboxDisjoint: function( bbox1, bbox2 ) {
+ return bbox2[ 0 ] > bbox1[ 2 ] ||
+ bbox2[ 2 ] < bbox1[ 0 ] ||
+ bbox2[ 1 ] > bbox1[ 3 ] ||
+ bbox2[ 3 ] < bbox1[ 1 ];
+ },
+
+ reaspect: function (bbox, ratio, _ignoreGeo /* Internal Use Only */ ) {
+ // not in JTS
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ var width = this.width(bbox, true),
+ height = this.height(bbox, true),
+ center = this.center(bbox, true),
+ dx, dy;
+
+ if (width != 0 && height != 0 && ratio > 0) {
+ if (width / height > ratio) {
+ dx = width / 2;
+ dy = dx / ratio;
+ } else {
+ dy = height / 2;
+ dx = dy * ratio;
+ }
+
+ bbox = [center[0] - dx, center[1] - dy, center[0] + dx, center[1] + dy];
+ }
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ recenter: function( bbox, center, _ignoreGeo /* Internal Use Only */ ) {
+ // not in JTS
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj ) {
+ if ( this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ if ( this._isGeodetic( center ) ) {
+ center = $.geo.proj.fromGeodetic(center);
+ }
+ }
+
+ var halfWidth = ( bbox[ 2 ] - bbox[ 0 ] ) / 2,
+ halfHeight = ( bbox[ 3 ] - bbox[ 1 ] ) / 2;
+
+ bbox = [
+ center[ 0 ] - halfWidth,
+ center[ 1 ] - halfHeight,
+ center[ 0 ] + halfWidth,
+ center[ 1 ] + halfHeight
+ ];
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ scaleBy: function ( bbox, scale, _ignoreGeo /* Internal Use Only */ ) {
+ // not in JTS
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ var c = this.center(bbox, true),
+ dx = (bbox[2] - bbox[0]) * scale / 2,
+ dy = (bbox[3] - bbox[1]) * scale / 2;
+
+ bbox = [c[0] - dx, c[1] - dy, c[0] + dx, c[1] + dy];
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(bbox) : bbox;
+ },
+
+ width: function (bbox, _ignoreGeo /* Internal Use Only */ ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ return bbox[2] - bbox[0];
+ },
+
+ //
+ // geometry functions
+ //
+
+ // bbox (Geometry.getEnvelope in JTS)
+
+ bbox: function ( geom, _ignoreGeo /* Internal Use Only */ ) {
+ if ( !geom ) {
+ return undefined;
+ } else if ( geom.bbox ) {
+ result = ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom.bbox ) ) ? $.geo.proj.fromGeodetic( geom.bbox ) : geom.bbox;
+ } else {
+ result = [ pos_oo, pos_oo, neg_oo, neg_oo ];
+
+ var coordinates = this._allCoordinates( geom ),
+ curCoord = 0;
+
+ if ( coordinates.length == 0 ) {
+ return undefined;
+ }
+
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( coordinates ) ) {
+ wasGeodetic = true;
+ coordinates = $.geo.proj.fromGeodetic( coordinates );
+ }
+
+ for ( ; curCoord < coordinates.length; curCoord++ ) {
+ result[0] = Math.min(coordinates[curCoord][0], result[0]);
+ result[1] = Math.min(coordinates[curCoord][1], result[1]);
+ result[2] = Math.max(coordinates[curCoord][0], result[2]);
+ result[3] = Math.max(coordinates[curCoord][1], result[3]);
+ }
+ }
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(result) : result;
+ },
+
+ // centroid
+
+ centroid: function( geom, _ignoreGeo /* Internal Use Only */ ) {
+ switch (geom.type) {
+ case "Point":
+ return $.extend({}, geom);
+
+ case "LineString":
+ case "Polygon":
+ var a = 0,
+ c = [0, 0],
+ coords = $.merge( [ ], geom.type == "Polygon" ? geom.coordinates[0] : geom.coordinates ),
+ i = 1, j, n;
+
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( coords ) ) {
+ wasGeodetic = true;
+ coords = $.geo.proj.fromGeodetic(coords);
+ }
+
+ //if (coords[0][0] != coords[coords.length - 1][0] || coords[0][1] != coords[coords.length - 1][1]) {
+ // coords.push(coords[0]);
+ //}
+
+ for (; i <= coords.length; i++) {
+ j = i % coords.length;
+ n = (coords[i - 1][0] * coords[j][1]) - (coords[j][0] * coords[i - 1][1]);
+ a += n;
+ c[0] += (coords[i - 1][0] + coords[j][0]) * n;
+ c[1] += (coords[i - 1][1] + coords[j][1]) * n;
+ }
+
+ if (a == 0) {
+ if (coords.length > 0) {
+ c[0] = coords[0][0];
+ c[1] = coords[0][1];
+ return { type: "Point", coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c };
+ } else {
+ return undefined;
+ }
+ }
+
+ a *= 3;
+ c[0] /= a;
+ c[1] /= a;
+
+ return { type: "Point", coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c };
+ }
+ return undefined;
+ },
+
+ // contains
+
+ contains: function (geom1, geom2) {
+ if (geom1.type != "Polygon") {
+ return false;
+ }
+
+ switch (geom2.type) {
+ case "Point":
+ return this._containsPolygonPoint(geom1.coordinates, geom2.coordinates);
+
+ case "LineString":
+ return this._containsPolygonLineString(geom1.coordinates, geom2.coordinates);
+
+ case "Polygon":
+ return this._containsPolygonLineString(geom1.coordinates, geom2.coordinates[0]);
+
+ default:
+ return false;
+ }
+ },
+
+ _containsPolygonPoint: function (polygonCoordinates, pointCoordinate) {
+ if (polygonCoordinates.length == 0 || polygonCoordinates[0].length < 4) {
+ return false;
+ }
+
+ var rayCross = 0,
+ a = polygonCoordinates[0][0],
+ i = 1,
+ b,
+ x;
+
+ for (; i < polygonCoordinates[0].length; i++) {
+ b = polygonCoordinates[0][i];
+
+ if ((a[1] <= pointCoordinate[1] && pointCoordinate[1] < b[1]) || (b[1] <= pointCoordinate[1] && pointCoordinate[1] < a[1]) && (pointCoordinate[0] < a[0] || pointCoordinate[0] < b[0])) {
+ x = a[0] + (b[0] - a[0]) * (pointCoordinate[1] - a[1]) / (b[1] - a[1]);
+
+ if (x > pointCoordinate[0]) {
+ rayCross++;
+ }
+ }
+
+ a = b;
+ }
+
+ return rayCross % 2 == 1;
+ },
+
+ _containsPolygonLineString: function (polygonCoordinates, lineStringCoordinates) {
+ for (var i = 0; i < lineStringCoordinates.length; i++) {
+ if (!this._containsPolygonPoint(polygonCoordinates, lineStringCoordinates[i])) {
+ return false;
+ }
+ }
+ return true;
+ },
+
+ // distance
+
+ distance: function ( geom1, geom2, _ignoreGeo /* Internal Use Only */ ) {
+ var geom1CoordinatesProjected = ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom1.coordinates ) ) ? $.geo.proj.fromGeodetic(geom1.coordinates) : geom1.coordinates,
+ geom2CoordinatesProjected = ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom2.coordinates ) ) ? $.geo.proj.fromGeodetic(geom2.coordinates) : geom2.coordinates;
+
+ switch (geom1.type) {
+ case "Point":
+ switch (geom2.type) {
+ case "Point":
+ return this._distancePointPoint(geom2CoordinatesProjected, geom1CoordinatesProjected);
+ case "LineString":
+ return this._distanceLineStringPoint(geom2CoordinatesProjected, geom1CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonPoint(geom2CoordinatesProjected, geom1CoordinatesProjected) ? 0 : this._distanceLineStringPoint(geom2CoordinatesProjected[0], geom1CoordinatesProjected);
+ default:
+ return undefined;
+ }
+ break;
+
+ case "LineString":
+ switch (geom2.type) {
+ case "Point":
+ return this._distanceLineStringPoint(geom1CoordinatesProjected, geom2CoordinatesProjected);
+ case "LineString":
+ return this._distanceLineStringLineString(geom1CoordinatesProjected, geom2CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonLineString(geom2CoordinatesProjected, geom1CoordinatesProjected) ? 0 : this._distanceLineStringLineString(geom2CoordinatesProjected[0], geom1CoordinatesProjected);
+ default:
+ return undefined;
+ }
+ break;
+
+ case "Polygon":
+ switch (geom2.type) {
+ case "Point":
+ return this._containsPolygonPoint(geom1CoordinatesProjected, geom2CoordinatesProjected) ? 0 : this._distanceLineStringPoint(geom1CoordinatesProjected[0], geom2CoordinatesProjected);
+ case "LineString":
+ return this._containsPolygonLineString(geom1CoordinatesProjected, geom2CoordinatesProjected) ? 0 : this._distanceLineStringLineString(geom1CoordinatesProjected[0], geom2CoordinatesProjected);
+ case "Polygon":
+ return this._containsPolygonLineString(geom1CoordinatesProjected, geom2CoordinatesProjected[0]) ? 0 : this._distanceLineStringLineString(geom1CoordinatesProjected[0], geom2CoordinatesProjected[0]);
+ default:
+ return undefined;
+ }
+ break;
+ }
+ },
+
+ _distancePointPoint: function (coordinate1, coordinate2) {
+ var dx = coordinate2[0] - coordinate1[0],
+ dy = coordinate2[1] - coordinate1[1];
+ return Math.sqrt((dx * dx) + (dy * dy));
+ },
+
+ _distanceLineStringPoint: function (lineStringCoordinates, pointCoordinate) {
+ var minDist = pos_oo;
+
+ if (lineStringCoordinates.length > 0) {
+ var a = lineStringCoordinates[0],
+
+ apx = pointCoordinate[0] - a[0],
+ apy = pointCoordinate[1] - a[1];
+
+ if (lineStringCoordinates.length == 1) {
+ return Math.sqrt(apx * apx + apy * apy);
+ } else {
+ for (var i = 1; i < lineStringCoordinates.length; i++) {
+ var b = lineStringCoordinates[i],
+
+ abx = b[0] - a[0],
+ aby = b[1] - a[1],
+ bpx = pointCoordinate[0] - b[0],
+ bpy = pointCoordinate[1] - b[1],
+
+ d = this._distanceSegmentPoint(abx, aby, apx, apy, bpx, bpy);
+
+ if (d == 0) {
+ return 0;
+ }
+
+ if (d < minDist) {
+ minDist = d;
+ }
+
+ a = b;
+ apx = bpx;
+ apy = bpy;
+ }
+ }
+ }
+
+ return Math.sqrt(minDist);
+ },
+
+ _distanceSegmentPoint: function (abx, aby, apx, apy, bpx, bpy) {
+ var dot1 = abx * apx + aby * apy;
+
+ if (dot1 <= 0) {
+ return apx * apx + apy * apy;
+ }
+
+ var dot2 = abx * abx + aby * aby;
+
+ if (dot1 >= dot2) {
+ return bpx * bpx + bpy * bpy;
+ }
+
+ return apx * apx + apy * apy - dot1 * dot1 / dot2;
+ },
+
+ _distanceLineStringLineString: function (lineStringCoordinates1, lineStringCoordinates2) {
+ var minDist = pos_oo;
+ for (var i = 0; i < lineStringCoordinates2.length; i++) {
+ minDist = Math.min(minDist, this._distanceLineStringPoint(lineStringCoordinates1, lineStringCoordinates2[i]));
+ }
+ return minDist;
+ },
+
+ // buffer
+
+ _buffer: function( geom, distance, _ignoreGeo /* Internal Use Only */ ) {
+ var wasGeodetic = false,
+ coords = geom.coordinates;
+
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( geom.coordinates ) ) {
+ wasGeodetic = true;
+ coords = $.geo.proj.fromGeodetic( geom.coordinates );
+ }
+
+ switch ( geom.type ) {
+ case "Point":
+ var resultCoords = [],
+ slices = 180,
+ i = 0,
+ a;
+
+ for ( ; i <= slices; i++ ) {
+ a = ( i * 360 / slices ) * ( Math.PI / 180 );
+ resultCoords.push( [
+ coords[ 0 ] + Math.cos( a ) * distance,
+ coords[ 1 ] + Math.sin( a ) * distance
+ ] );
+ }
+
+ return {
+ type: "Polygon",
+ coordinates: [ ( wasGeodetic ? $.geo.proj.toGeodetic( resultCoords ) : resultCoords ) ]
+ };
+
+ break;
+
+ default:
+ return undefined;
+ }
+ },
+
+
+ //
+ // feature
+ //
+
+ _flatten: function (geom) {
+ // return an array of all basic geometries
+ // not in JTS
+ var geometries = [],
+ curGeom = 0;
+ switch (geom.type) {
+ case "Feature":
+ $.merge(geometries, this._flatten(geom.geometry));
+ break;
+
+ case "FeatureCollection":
+ for (; curGeom < geom.features.length; curGeom++) {
+ $.merge(geometries, this._flatten(geom.features[curGeom].geometry));
+ }
+ break;
+
+ case "GeometryCollection":
+ for (; curGeom < geom.geometries.length; curGeom++) {
+ $.merge(geometries, this._flatten(geom.geometries[curGeom]));
+ }
+ break;
+
+ default:
+ geometries[0] = geom;
+ break;
+ }
+ return geometries;
+ },
+
+ length: function( geom, _ignoreGeo /* Internal Use Only */ ) {
+ var sum = 0,
+ lineStringCoordinates,
+ i = 1, dx, dy;
+
+ switch ( geom.type ) {
+ case "Point":
+ return 0;
+
+ case "LineString":
+ lineStringCoordinates = geom.coordinates;
+ break;
+
+ case "Polygon":
+ lineStringCoordinates = geom.coordinates[ 0 ];
+ break;
+ }
+
+ if ( lineStringCoordinates ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( lineStringCoordinates ) ) {
+ lineStringCoordinates = $.geo.proj.fromGeodetic( lineStringCoordinates );
+ }
+
+ for ( ; i < lineStringCoordinates.length; i++ ) {
+ dx = lineStringCoordinates[ i ][0] - lineStringCoordinates[ i - 1 ][0];
+ dy = lineStringCoordinates[ i ][1] - lineStringCoordinates[ i - 1 ][1];
+ sum += Math.sqrt((dx * dx) + (dy * dy));
+ }
+
+ return sum;
+ }
+
+ // return undefined;
+ },
+
+ area: function( geom, _ignoreGeo /* Internal Use Only */ ) {
+ var sum = 0,
+ polygonCoordinates,
+ i = 1, j;
+
+ switch ( geom.type ) {
+ case "Point":
+ case "LineString":
+ return 0;
+
+ case "Polygon":
+ polygonCoordinates = geom.coordinates[ 0 ];
+ break;
+ }
+
+ if ( polygonCoordinates ) {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( polygonCoordinates ) ) {
+ polygonCoordinates = $.geo.proj.fromGeodetic( polygonCoordinates );
+ }
+
+ for ( ; i <= polygonCoordinates.length; i++) {
+ j = i % polygonCoordinates.length;
+ sum += ( polygonCoordinates[ i - 1 ][ 0 ] - polygonCoordinates[ j ][ 0 ] ) * ( polygonCoordinates[ i - 1 ][ 1 ] + polygonCoordinates[ j ][ 1 ] ) / 2;
+ }
+
+ return Math.abs( sum );
+ }
+ },
+
+ pointAlong: function( geom, percentage, _ignoreGeo /* Internal Use Only */ ) {
+ var totalLength = 0,
+ previousPercentageSum = 0,
+ percentageSum = 0,
+ remainderPercentageSum,
+ len,
+ lineStringCoordinates,
+ segmentLengths = [],
+ i = 1, dx, dy,
+ c, c0, c1,
+ wasGeodetic = false;
+
+ switch ( geom.type ) {
+ case "Point":
+ return $.extend( { }, geom );
+
+ case "LineString":
+ lineStringCoordinates = geom.coordinates;
+ break;
+
+ case "Polygon":
+ lineStringCoordinates = geom.coordinates[ 0 ];
+ break;
+ }
+
+ if ( lineStringCoordinates ) {
+ if ( percentage === 0 ) {
+ return {
+ type: "Point",
+ coordinates: [ lineStringCoordinates[ 0 ][ 0 ], lineStringCoordinates[ 0 ][ 1 ] ]
+ };
+ } else if ( percentage === 1 ) {
+ i = lineStringCoordinates.length - 1;
+ return {
+ type: "Point",
+ coordinates: [ lineStringCoordinates[ i ][ 0 ], lineStringCoordinates[ i ][ 1 ] ]
+ };
+ } else {
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( lineStringCoordinates ) ) {
+ wasGeodetic = true;
+ lineStringCoordinates = $.geo.proj.fromGeodetic( lineStringCoordinates );
+ }
+
+ for ( ; i < lineStringCoordinates.length; i++ ) {
+ dx = lineStringCoordinates[ i ][ 0 ] - lineStringCoordinates[ i - 1 ][ 0 ];
+ dy = lineStringCoordinates[ i ][ 1 ] - lineStringCoordinates[ i - 1 ][ 1 ];
+ len = Math.sqrt((dx * dx) + (dy * dy));
+ segmentLengths.push( len );
+ totalLength += len;
+ }
+
+ for ( i = 0; i < segmentLengths.length && percentageSum < percentage; i++ ) {
+ previousPercentageSum = percentageSum;
+ percentageSum += ( segmentLengths[ i ] / totalLength );
+ }
+
+ remainderPercentageSum = percentage - previousPercentageSum;
+
+ c0 = lineStringCoordinates[ i - 1 ];
+ c1 = lineStringCoordinates[ i ];
+
+ c = [
+ c0[ 0 ] + ( remainderPercentageSum * ( c1[ 0 ] - c0[ 0 ] ) ),
+ c0[ 1 ] + ( remainderPercentageSum * ( c1[ 1 ] - c0[ 1 ] ) )
+ ];
+
+ return {
+ type: "Point",
+ coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c
+ };
+ }
+ }
+ },
+
+ //
+ // WKT functions
+ //
+
+ _WKT: (function () {
+ function pointToString(value) {
+ return "POINT " + pointToUntaggedString(value.coordinates);
+ }
+
+ function pointToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ return "(" + coordinates.join(" ") + ")";
+ }
+ }
+
+ function lineStringToString(value) {
+ return "LINESTRING " + lineStringToUntaggedString(value.coordinates);
+ }
+
+ function lineStringToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ var points = []
+
+ for (var i = 0; i < coordinates.length; i++) {
+ points.push(coordinates[i].join(" "));
+ }
+
+ return "(" + points + ")";
+ }
+ }
+
+ function polygonToString(value) {
+ return "POLYGON " + polygonToUntaggedString(value.coordinates);
+ }
+
+ function polygonToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMTPY";
+ } else {
+ var lineStrings = [];
+
+ for (var i = 0; i < coordinates.length; i++) {
+ lineStrings.push(lineStringToUntaggedString(coordinates[i]));
+ }
+
+ return "(" + lineStrings + ")";
+ }
+ }
+
+ function multiPointToString(value) {
+ return "MULTIPOINT " + lineStringToUntaggedString(value.coordinates);
+ }
+
+ function multiLineStringToString(value) {
+ return "MULTILINSTRING " + polygonToUntaggedString(value.coordinates);
+ }
+
+ function multiPolygonToString(value) {
+ return "MULTIPOLYGON " + multiPolygonToUntaggedString(value.coordinates);
+ }
+
+ function multiPolygonToUntaggedString(coordinates) {
+ if (!(coordinates && coordinates.length)) {
+ return "EMPTY";
+ } else {
+ var polygons = [];
+ for (var i = 0; i < coordinates.length; i++) {
+ polygons.push(polygonToUntaggedString(coordinates[i]));
+ }
+ return "(" + polygons + ")";
+ }
+ }
+
+ function geometryCollectionToString(value) {
+ return "GEOMETRYCOLLECTION " + geometryCollectionToUntaggedString(value.geometries);
+ }
+
+ function geometryCollectionToUntaggedString(geometries) {
+ if (!(geometries && geometries.length)) {
+ return "EMPTY";
+ } else {
+ var geometryText = [];
+ for (var i = 0; i < geometries.length; i++) {
+ geometryText.push(stringify(geometries[i]));
+ }
+ return "(" + geometries + ")";
+ }
+ }
+
+ function stringify(value) {
+ if (!(value && value.type)) {
+ return "";
+ } else {
+ switch (value.type) {
+ case "Point":
+ return pointToString(value);
+
+ case "LineString":
+ return lineStringToString(value);
+
+ case "Polygon":
+ return polygonToString(value);
+
+ case "MultiPoint":
+ return multiPointToString(value);
+
+ case "MultiLineString":
+ return multiLineStringToString(value);
+
+ case "MultiPolygon":
+ return multiPolygonToString(value);
+
+ case "GeometryCollection":
+ return geometryCollectionToString(value);
+
+ default:
+ return "";
+ }
+ }
+ }
+
+ function pointParseUntagged(wkt) {
+ var pointString = wkt.match( /\(\s*([\d\.-]+)\s+([\d\.-]+)\s*\)/ );
+ return pointString && pointString.length > 2 ? {
+ type: "Point",
+ coordinates: [
+ parseFloat(pointString[1]),
+ parseFloat(pointString[2])
+ ]
+ } : null;
+ }
+
+ function lineStringParseUntagged(wkt) {
+ var lineString = wkt.match( /\s*\((.*)\)/ ),
+ coords = [],
+ pointStrings,
+ pointParts,
+ i = 0;
+
+ if ( lineString.length > 1 ) {
+ pointStrings = lineString[ 1 ].match( /[\d\.-]+\s+[\d\.-]+/g );
+
+ for ( ; i < pointStrings.length; i++ ) {
+ pointParts = pointStrings[ i ].match( /\s*([\d\.-]+)\s+([\d\.-]+)\s*/ );
+ coords[ i ] = [ parseFloat( pointParts[ 1 ] ), parseFloat( pointParts[ 2 ] ) ];
+ }
+
+ return {
+ type: "LineString",
+ coordinates: coords
+ };
+ } else {
+ return null
+ }
+ }
+
+ function polygonParseUntagged(wkt) {
+ var polygon = wkt.match( /\s*\(\s*\((.*)\)\s*\)/ ),
+ coords = [],
+ pointStrings,
+ pointParts,
+ i = 0;
+
+ if ( polygon.length > 1 ) {
+ pointStrings = polygon[ 1 ].match( /[\d\.-]+\s+[\d\.-]+/g );
+
+ for ( ; i < pointStrings.length; i++ ) {
+ pointParts = pointStrings[ i ].match( /\s*([\d\.-]+)\s+([\d\.-]+)\s*/ );
+ coords[ i ] = [ parseFloat( pointParts[ 1 ] ), parseFloat( pointParts[ 2 ] ) ];
+ }
+
+ return {
+ type: "Polygon",
+ coordinates: [ coords ]
+ };
+ } else {
+ return null;
+ }
+ }
+
+ function parse(wkt) {
+ wkt = $.trim(wkt);
+
+ var typeIndex = wkt.indexOf( " " ),
+ untagged = wkt.substr( typeIndex + 1 );
+
+ switch (wkt.substr(0, typeIndex).toUpperCase()) {
+ case "POINT":
+ return pointParseUntagged( untagged );
+
+ case "LINESTRING":
+ return lineStringParseUntagged( untagged );
+
+ case "POLYGON":
+ return polygonParseUntagged( untagged );
+
+ default:
+ return null;
+ }
+ }
+
+ return {
+ stringify: stringify,
+
+ parse: parse
+ };
+ })(),
+
+ //
+ // projection functions
+ //
+
+ proj: (function () {
+ var halfPi = 1.5707963267948966192,
+ quarterPi = 0.7853981633974483096,
+ radiansPerDegree = 0.0174532925199432958,
+ degreesPerRadian = 57.295779513082320877,
+ semiMajorAxis = 6378137;
+
+ return {
+ fromGeodeticPos: function (coordinate) {
+ if (!coordinate) {
+ debugger;
+ }
+ return [
+ semiMajorAxis * coordinate[ 0 ] * radiansPerDegree,
+ semiMajorAxis * Math.log(Math.tan(quarterPi + coordinate[ 1 ] * radiansPerDegree / 2))
+ ];
+ },
+
+ fromGeodetic: function ( coordinates ) {
+ if ( ! $.geo._isGeodetic( coordinates ) ) {
+ return coordinates;
+ }
+
+ var isMultiPointOrLineString = $.isArray(coordinates[ 0 ]),
+ fromGeodeticPos = this.fromGeodeticPos;
+
+ if (!isMultiPointOrLineString && coordinates.length == 4) {
+ // bbox
+ var min = fromGeodeticPos([ coordinates[ 0 ], coordinates[ 1 ] ]),
+ max = fromGeodeticPos([ coordinates[ 2 ], coordinates[ 3 ] ]);
+ return [ min[ 0 ], min[ 1 ], max[ 0 ], max[ 1 ] ];
+ } else {
+ // geometry
+ var isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray(coordinates[ 0 ][ 0 ]),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray(coordinates[ 0 ][ 0 ][ 0 ]),
+ result = [ ],
+ i, j, k;
+
+ if (!isMultiPolygon) {
+ if (!isMultiLineStringOrPolygon) {
+ if (!isMultiPointOrLineString) {
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+
+ for ( i = 0; i < coordinates.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < coordinates[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < coordinates[ i ][ j ].length; k++ ) {
+ result[ i ][ j ][ k ] = fromGeodeticPos(coordinates[ i ][ j ][ k ]);
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ }
+ },
+
+ toGeodeticPos: function (coordinate) {
+ return [
+ (coordinate[ 0 ] / semiMajorAxis) * degreesPerRadian,
+ (halfPi - 2 * Math.atan(1 / Math.exp(coordinate[ 1 ] / semiMajorAxis))) * degreesPerRadian
+ ];
+ },
+
+ toGeodetic: function (coordinates) {
+ if ( $.geo._isGeodetic( coordinates ) ) {
+ return coordinates;
+ }
+
+ var isMultiPointOrLineString = $.isArray(coordinates[ 0 ]),
+ toGeodeticPos = this.toGeodeticPos;
+
+ if (!isMultiPointOrLineString && coordinates.length == 4) {
+ // bbox
+ var min = toGeodeticPos([ coordinates[ 0 ], coordinates[ 1 ] ]),
+ max = toGeodeticPos([ coordinates[ 2 ], coordinates[ 3 ] ]);
+ return [ min[ 0 ], min[ 1 ], max[ 0 ], max[ 1 ] ];
+ } else {
+ // geometry
+ var isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray(coordinates[ 0 ][ 0 ]),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray(coordinates[ 0 ][ 0 ][ 0 ]),
+ result = [ ];
+
+ if (!isMultiPolygon) {
+ if (!isMultiLineStringOrPolygon) {
+ if (!isMultiPointOrLineString) {
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+ coordinates = [ coordinates ];
+ }
+
+ for ( i = 0; i < coordinates.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < coordinates[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < coordinates[ i ][ j ].length; k++ ) {
+ result[ i ][ j ][ k ] = toGeodeticPos(coordinates[ i ][ j ][ k ]);
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ }
+ }
+ }
+ })(),
+
+ //
+ // service types (defined in other files)
+ //
+
+ _serviceTypes: {}
+ }
+})(jQuery, this);
+
--- /dev/null
+(function ($, undefined) {
+
+ var _ieVersion = (function () {
+ var v = 5, div = document.createElement("div"), a = div.all || [];
+ while (div.innerHTML = "<!--[if gt IE " + (++v) + "]><br><![endif]-->", a[0]) { }
+ return v > 6 ? v : !v;
+ } ());
+
+ $.widget("geo.geographics", {
+ _$elem: undefined,
+ _options: {},
+ _trueCanvas: true,
+
+ _width: 0,
+ _height: 0,
+
+ _$canvas: undefined,
+ _context: undefined,
+ _$labelsContainer: undefined,
+
+ options: {
+ style: {
+ borderRadius: "8px",
+ color: "#7f0000",
+ //fill: undefined,
+ fillOpacity: .2,
+ height: "8px",
+ opacity: 1,
+ //stroke: undefined,
+ strokeOpacity: 1,
+ strokeWidth: "2px",
+ visibility: "visible",
+ width: "8px"
+ }
+ },
+
+ _create: function () {
+ this._$elem = this.element;
+ this._options = this.options;
+
+ this._$elem.css({ display: "inline-block", overflow: "hidden", textAlign: "left" });
+
+ if (this._$elem.css("position") == "static") {
+ this._$elem.css("position", "relative");
+ }
+
+ this._$elem.addClass( "geo-graphics" );
+
+ this._width = this._$elem.width();
+ this._height = this._$elem.height();
+
+ if (!(this._width && this._height)) {
+ this._width = parseInt(this._$elem.css("width"));
+ this._height = parseInt(this._$elem.css("height"));
+ }
+
+ var posCss = 'position:absolute;left:0;top:0;margin:0;padding:0;',
+ sizeCss = 'width:' + this._width + 'px;height:' + this._height + 'px;',
+ sizeAttr = 'width="' + this._width + '" height="' + this._height + '"';
+
+ if (document.createElement('canvas').getContext) {
+ this._$elem.append('<canvas ' + sizeAttr + ' style="' + posCss + '"></canvas>');
+ this._$canvas = this._$elem.children(':last');
+ this._context = this._$canvas[0].getContext("2d");
+ } else if (_ieVersion <= 8) {
+ this._trueCanvas = false;
+ this._$elem.append( '<div ' + sizeAttr + ' style="' + posCss + sizeCss + '"></div>');
+ this._$canvas = this._$elem.children(':last');
+
+ G_vmlCanvasManager.initElement(this._$canvas[0]);
+ this._context = this._$canvas[0].getContext("2d");
+ this._$canvas.children().css({ backgroundColor: "transparent", width: this._width, height: this._height });
+ }
+
+ this._$elem.append('<div class="geo-labels-container" style="' + posCss + sizeCss + '"></div>');
+ this._$labelsContainer = this._$elem.children(':last');
+ },
+
+ _setOption: function (key, value) {
+ if (key == "style") {
+ value = $.extend({}, this._options.style, value);
+ }
+ $.Widget.prototype._setOption.apply(this, arguments);
+ },
+
+ destroy: function () {
+ $.Widget.prototype.destroy.apply(this, arguments);
+ this._$elem.html("");
+ this._$elem.removeClass( "geo-graphics" );
+ },
+
+ clear: function () {
+ this._context.clearRect(0, 0, this._width, this._height);
+ this._$labelsContainer.html("");
+ },
+
+ drawArc: function (coordinates, startAngle, sweepAngle, style) {
+ style = this._getGraphicStyle(style);
+
+ if (style.visibility != "hidden" && style.opacity > 0 && style.widthValue > 0 && style.heightValue > 0) {
+ var r = Math.min(style.widthValue, style.heightValue) / 2;
+
+ startAngle = (startAngle * Math.PI / 180);
+ sweepAngle = (sweepAngle * Math.PI / 180);
+
+ this._context.save();
+ this._context.translate(coordinates[0], coordinates[1]);
+ if (style.widthValue > style.heightValue) {
+ this._context.scale(style.widthValue / style.heightValue, 1);
+ } else {
+ this._context.scale(1, style.heightValue / style.widthValue);
+ }
+
+ this._context.beginPath();
+ this._context.arc(0, 0, r, startAngle, sweepAngle, false);
+
+ if (this._trueCanvas) {
+ this._context.restore();
+ }
+
+ if (style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+ this._context.stroke();
+ }
+
+ if (!this._trueCanvas) {
+ this._context.restore();
+ }
+ }
+ },
+
+ drawPoint: function (coordinates, style) {
+ var style = this._getGraphicStyle(style);
+ if (style.widthValue == style.heightValue && style.heightValue == style.borderRadiusValue) {
+ this.drawArc(coordinates, 0, 360, style);
+ } else if (style.visibility != "hidden" && style.opacity > 0) {
+ style.borderRadiusValue = Math.min(Math.min(style.widthValue, style.heightValue) / 2, style.borderRadiusValue);
+ coordinates[0] -= style.widthValue / 2;
+ coordinates[1] -= style.heightValue / 2;
+ this._context.beginPath();
+ this._context.moveTo(coordinates[0] + style.borderRadiusValue, coordinates[1]);
+ this._context.lineTo(coordinates[0] + style.widthValue - style.borderRadiusValue, coordinates[1]);
+ this._context.quadraticCurveTo(coordinates[0] + style.widthValue, coordinates[1], coordinates[0] + style.widthValue, coordinates[1] + style.borderRadiusValue);
+ this._context.lineTo(coordinates[0] + style.widthValue, coordinates[1] + style.heightValue - style.borderRadiusValue);
+ this._context.quadraticCurveTo(coordinates[0] + style.widthValue, coordinates[1] + style.heightValue, coordinates[0] + style.widthValue - style.borderRadiusValue, coordinates[1] + style.heightValue);
+ this._context.lineTo(coordinates[0] + style.borderRadiusValue, coordinates[1] + style.heightValue);
+ this._context.quadraticCurveTo(coordinates[0], coordinates[1] + style.heightValue, coordinates[0], coordinates[1] + style.heightValue - style.borderRadiusValue);
+ this._context.lineTo(coordinates[0], coordinates[1] + style.borderRadiusValue);
+ this._context.quadraticCurveTo(coordinates[0], coordinates[1], coordinates[0] + style.borderRadiusValue, coordinates[1]);
+ this._context.closePath();
+
+ if (style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+
+ this._context.stroke();
+ }
+ }
+ },
+
+ drawLineString: function (coordinates, style) {
+ this._drawLines([coordinates], false, style);
+ },
+
+ drawPolygon: function (coordinates, style) {
+ this._drawLines(coordinates, true, style);
+ },
+
+ drawBbox: function (bbox, style) {
+ this._drawLines([[
+ [bbox[0], bbox[1]],
+ [bbox[0], bbox[3]],
+ [bbox[2], bbox[3]],
+ [bbox[2], bbox[1]],
+ [bbox[0], bbox[1]]
+ ]], true, style);
+ },
+
+ drawLabel: function( coordinates, label ) {
+ this._$labelsContainer.append( '<div class="geo-label" style="position:absolute; left:' + coordinates[ 0 ] + 'px; top:' + coordinates[ 1 ] + 'px;">' + label + '</div>');
+ },
+
+ resize: function( ) {
+ this._width = this._$elem.width();
+ this._height = this._$elem.height();
+
+ if (!(this._width && this._height)) {
+ this._width = parseInt(this._$elem.css("width"));
+ this._height = parseInt(this._$elem.css("height"));
+ }
+
+ if ( this._trueCanvas ) {
+ this._$canvas[0].width = this._width;
+ this._$canvas[0].height = this._height;
+ } else {
+ }
+
+ this._$labelsContainer.css( {
+ width: this._width,
+ height: this._height
+ } );
+ },
+
+ _getGraphicStyle: function (style) {
+ function safeParse(value) {
+ value = parseInt(value);
+ return (+value + '') === value ? +value : value;
+ }
+
+ style = $.extend({}, this._options.style, style);
+ style.borderRadiusValue = safeParse(style.borderRadius);
+ style.fill = style.fill || style.color;
+ style.doFill = style.fill && style.fillOpacity > 0;
+ style.stroke = style.stroke || style.color;
+ style.strokeWidthValue = safeParse(style.strokeWidth);
+ style.doStroke = style.stroke && style.strokeOpacity > 0 && style.strokeWidthValue > 0;
+ style.widthValue = safeParse(style.width);
+ style.heightValue = safeParse(style.height);
+ return style;
+ },
+
+ _drawLines: function (coordinates, close, style) {
+ if (!coordinates || !coordinates.length || coordinates[0].length < 2) {
+ return;
+ }
+
+ var style = this._getGraphicStyle(style),
+ i, j;
+
+ if (style.visibility != "hidden" && style.opacity > 0) {
+ this._context.beginPath();
+ this._context.moveTo(coordinates[0][0][0], coordinates[0][0][1]);
+
+ for (i = 0; i < coordinates.length; i++) {
+ for (j = 0; j < coordinates[i].length; j++) {
+ this._context.lineTo(coordinates[i][j][0], coordinates[i][j][1]);
+ }
+ }
+
+ if (close) {
+ this._context.closePath();
+ }
+
+ if (close && style.doFill) {
+ this._context.fillStyle = style.fill;
+ this._context.globalAlpha = style.opacity * style.fillOpacity;
+ this._context.fill();
+ }
+
+ if (style.doStroke) {
+ this._context.lineCap = this._context.lineJoin = "round";
+ this._context.lineWidth = style.strokeWidthValue;
+ this._context.strokeStyle = style.stroke;
+
+ this._context.globalAlpha = style.opacity * style.strokeOpacity;
+ this._context.stroke();
+ }
+ }
+ }
+ });
+
+
+})(jQuery);
+
+
--- /dev/null
+(function ($, undefined) {
+ var _ieVersion = (function () {
+ var v = 5, div = document.createElement("div"), a = div.all || [];
+ while (div.innerHTML = "<!--[if gt IE " + (++v) + "]><br><![endif]-->", a[0]) { }
+ return v > 6 ? v : !v;
+ } ()),
+
+ _defaultOptions = {
+ bbox: [-180, -85, 180, 85],
+ bboxMax: [-180, -85, 180, 85],
+ center: [0, 0],
+ cursors: {
+ "static": "default",
+ pan: "url(data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAgACAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=), move",
+ zoom: "crosshair",
+ drawPoint: "crosshair",
+ drawLineString: "crosshair",
+ drawPolygon: "crosshair",
+ measureLength: "crosshair",
+ measureArea: "crosshair"
+ },
+ measureLabels: {
+ length: "{{=length.toFixed( 2 )}} m",
+ area: "{{=area.toFixed( 2 )}} sq m"
+ },
+ drawStyle: {},
+ shapeStyle: {},
+ mode: "pan",
+ pannable: true,
+ scroll: "default",
+ services: [
+ {
+ "class": "osm",
+ type: "tiled",
+ src: function (view) {
+ return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
+ },
+ attr: "© OpenStreetMap & contributors, CC-BY-SA"
+ }
+ ],
+ tilingScheme: {
+ tileWidth: 256,
+ tileHeight: 256,
+ levels: 18,
+ basePixelSize: 156543.03392799936,
+ origin: [-20037508.342787, 20037508.342787]
+ },
+ axisLayout: "map",
+ zoom: 0,
+ pixelSize: 0
+ };
+
+ $.widget("geo.geomap", {
+ // private widget members
+ _$elem: undefined, //< map div for maps, service div for services
+ _map: undefined, //< only defined in services
+ _created: false,
+
+ _contentBounds: {},
+
+ _$resizeContainer: undefined, //< all elements that should match _contentBounds' size
+
+ _$eventTarget: undefined,
+ _$contentFrame: undefined,
+ _$existingChildren: undefined,
+ _$attrList: undefined,
+ _$servicesContainer: undefined,
+
+ _$panContainer: undefined, //< all non-service elements that move while panning
+ _$shapesContainer: undefined,
+ _$drawContainer: undefined,
+ _$measureContainer: undefined,
+ _$measureLabel: undefined,
+
+ _dpi: 96,
+
+ _currentServices: [], //< internal copy
+
+ _center: undefined,
+ _pixelSize: undefined,
+ _centerMax: undefined,
+ _pixelSizeMax: undefined,
+
+ _userGeodetic: true,
+
+ _wheelTimeout: null,
+ _wheelLevel: 0,
+
+ _zoomFactor: 2, //< determines what a zoom level means
+
+ _fullZoomFactor: 2, //< interactiveScale factor needed to zoom a whole level
+ _partialZoomFactor: 1.18920711500273, //< interactiveScale factor needed to zoom a fraction of a level (the fourth root of 2)
+
+ _mouseDown: undefined,
+ _inOp: undefined,
+ _toolPan: undefined,
+ _shiftZoom: undefined,
+ _anchor: undefined,
+ _current: undefined,
+ _downDate: undefined,
+ _moveDate: undefined,
+ _clickDate: undefined,
+ _lastMove: undefined,
+ _lastDrag: undefined,
+
+ _windowHandler: null,
+ _resizeTimeout: null,
+
+ _panning: undefined,
+ _velocity: undefined,
+ _friction: undefined,
+
+ _supportTouch: undefined,
+ _softDblClick: undefined,
+ _isTap: undefined,
+ _isDbltap: undefined,
+
+ _isMultiTouch: undefined,
+ _multiTouchAnchor: undefined, //< TouchList
+ _multiTouchAnchorBbox: undefined, //< bbox
+ _multiTouchCurrentBbox: undefined, //< bbox
+
+ _drawTimeout: null, //< used in drawPoint mode so we don't send two shape events on dbltap
+ _drawPixels: [], //< an array of coordinate arrays for drawing lines & polygons, in pixel coordinates
+ _drawCoords: [],
+
+ _graphicShapes: [], //< an array of objects containing style object refs & GeoJSON object refs
+
+ _initOptions: {},
+
+ _options: {},
+
+ options: $.extend({}, _defaultOptions),
+
+ _createWidget: function (options, element) {
+ this._$elem = $(element);
+
+ if (this._$elem.is(".geo-service")) {
+ var $contentFrame = this._$elem.closest( ".geo-content-frame" );
+ this._$elem.append('<div class="geo-shapes-container" style="position:absolute; left:0; top:0; width:' + $contentFrame.css( "width" ) + '; height:' + $contentFrame.css( "height" ) + '; margin:0; padding:0;"></div>');
+ this._$shapesContainer = this._$elem.children(':last');
+ this._graphicShapes = [];
+ $.Widget.prototype._createWidget.apply(this, arguments);
+ return;
+ }
+
+ this._$elem.addClass("geo-map");
+
+ this._initOptions = options || {};
+
+ this._forcePosition(this._$elem);
+
+ this._$elem.css("text-align", "left");
+
+ var size = this._findMapSize();
+ this._contentBounds = {
+ x: parseInt(this._$elem.css("padding-left")),
+ y: parseInt(this._$elem.css("padding-top")),
+ width: size["width"],
+ height: size["height"]
+ };
+
+ this._createChildren();
+
+ this._center = this._centerMax = [0, 0];
+
+ this.options["pixelSize"] = this._pixelSize = this._pixelSizeMax = 156543.03392799936;
+
+ this._mouseDown =
+ this._inOp =
+ this._toolPan =
+ this._shiftZoom =
+ this._panning =
+ this._isTap =
+ this._isDbltap = false;
+
+ this._anchor = [ 0, 0 ];
+ this._current = [ 0, 0 ];
+ this._lastMove = [ 0, 0 ];
+ this._lastDrag = [ 0, 0 ];
+ this._velocity = [ 0, 0 ];
+
+ this._friction = [.8, .8];
+
+ this._downDate =
+ this._moveDate =
+ this._clickDate = 0;
+
+ this._drawPixels = [];
+ this._drawCoords = [];
+ this._graphicShapes = [];
+
+
+ $.Widget.prototype._createWidget.apply(this, arguments);
+ },
+
+ _create: function () {
+ this._options = this.options;
+
+ if (this._$elem.is(".geo-service")) {
+ this._map = this._$elem.data( "geoMap" );
+ this._$shapesContainer.geographics( );
+ this._options["shapeStyle"] = this._$shapesContainer.geographics("option", "style");
+ return;
+ }
+
+ this._map = this;
+
+ this._supportTouch = "ontouchend" in document;
+ this._softDblClick = this._supportTouch || _ieVersion == 7;
+
+ var geomap = this,
+ touchStartEvent = this._supportTouch ? "touchstart" : "mousedown",
+ touchStopEvent = this._supportTouch ? "touchend touchcancel" : "mouseup",
+ touchMoveEvent = this._supportTouch ? "touchmove" : "mousemove";
+
+ $(document).keydown($.proxy(this._document_keydown, this));
+
+ this._$eventTarget.dblclick($.proxy(this._eventTarget_dblclick, this));
+
+ this._$eventTarget.bind(touchStartEvent, $.proxy(this._eventTarget_touchstart, this));
+
+ var dragTarget = (this._$eventTarget[0].setCapture) ? this._$eventTarget : $(document);
+ dragTarget.bind(touchMoveEvent, $.proxy(this._dragTarget_touchmove, this));
+ dragTarget.bind(touchStopEvent, $.proxy(this._dragTarget_touchstop, this));
+
+ this._$eventTarget.mousewheel($.proxy(this._eventTarget_mousewheel, this));
+
+ this._windowHandler = function () {
+ if (geomap._resizeTimeout) {
+ clearTimeout(geomap._resizeTimeout);
+ }
+ geomap._resizeTimeout = setTimeout(function () {
+ if (geomap._created) {
+ geomap._$elem.geomap("resize");
+ }
+ }, 500);
+ };
+
+ $(window).resize(this._windowHandler);
+
+ this._$drawContainer.geographics({ style: this._initOptions.drawStyle || {} });
+ this._options["drawStyle"] = this._$drawContainer.geographics("option", "style");
+
+ this._$shapesContainer.geographics( { style: this._initOptions.shapeStyle || { } } );
+ this._options["shapeStyle"] = this._$shapesContainer.geographics("option", "style");
+
+ if (this._initOptions) {
+ if (this._initOptions.tilingScheme) {
+ this._setOption("tilingScheme", this._initOptions.tilingScheme, false);
+ }
+ if ( this._initOptions.services ) {
+ // jQuery UI Widget Factory merges user services with our default, we want to clobber the default
+ this._options[ "services" ] = $.merge( [ ], this._initOptions.services );
+ }
+ if (this._initOptions.bbox) {
+ this._setOption("bbox", this._initOptions.bbox, false);
+ }
+ if (this._initOptions.center) {
+ this._setOption("center", this._initOptions.center, false);
+ }
+ if (this._initOptions.zoom !== undefined) {
+ this._setZoom(this._initOptions.zoom, false, false);
+ }
+ }
+
+ $.template( "geoMeasureLength", this._options[ "measureLabels" ].length );
+ $.template( "geoMeasureArea", this._options[ "measureLabels" ].area );
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+
+ this._createServices();
+ this._refresh();
+
+ this._created = true;
+ },
+
+ _setOption: function (key, value, refresh) {
+ if ( key == "pixelSize" ) {
+ return;
+ }
+
+ refresh = (refresh === undefined || refresh);
+
+ if ( this._$elem.is( ".geo-map" ) ) {
+ this._panFinalize();
+ }
+
+ switch (key) {
+ case "bbox":
+ this._userGeodetic = $.geo.proj && $.geo._isGeodetic( value );
+ if ( this._userGeodetic ) {
+ value = $.geo.proj.fromGeodetic( value );
+ }
+
+ this._setBbox(value, false, refresh);
+ value = this._getBbox();
+ break;
+
+ case "center":
+ this._userGeodetic = $.geo.proj && $.geo._isGeodetic( value );
+ if ( this._userGeodetic ) {
+ value = $.geo.proj.fromGeodetic( value );
+ }
+
+ this._setCenterAndSize( value, this._pixelSize, false, refresh );
+ break;
+
+ case "measureLabels":
+ value = $.extend( this._options[ "measureLabels" ], value );
+ $.template( "geoMeasureLength", value.length );
+ $.template( "geoMeasureArea", value.area );
+ break;
+
+ case "drawStyle":
+ if (this._$drawContainer) {
+ this._$drawContainer.geographics("option", "style", value);
+ value = this._$drawContainer.geographics("option", "style");
+ }
+ break;
+
+ case "shapeStyle":
+ if (this._$shapesContainer) {
+ this._$shapesContainer.geographics("option", "style", value);
+ value = this._$shapesContainer.geographics("option", "style");
+ }
+ break;
+
+ case "mode":
+ this._resetDrawing( );
+ this._$eventTarget.css("cursor", this._options["cursors"][value]);
+ break;
+
+ case "zoom":
+ this._setZoom(value, false, refresh);
+ break;
+ }
+
+ $.Widget.prototype._setOption.apply(this, arguments);
+
+ switch ( key ) {
+ case "bbox":
+ case "center":
+ if ( this._userGeodetic ) {
+ this._options[ "bbox" ] = $.geo.proj.toGeodetic( this._options[ "bbox" ] );
+ this._options[ "center" ] = $.geo.proj.toGeodetic( this._center );
+ }
+ break;
+
+ case "tilingScheme":
+ if ( value != null ) {
+ this._pixelSizeMax = this._getPixelSize( 0 );
+ this._centerMax = [
+ value.origin[ 0 ] + this._pixelSizeMax * value.tileWidth / 2,
+ value.origin[ 1 ] + this._pixelSizeMax * value.tileHeight / 2
+ ];
+ }
+ break;
+
+ case "bboxMax":
+ this._pixelSizeMax = this._getPixelSize( 0 );
+
+ if ( $.geo.proj && $.geo._isGeodetic( value ) ) {
+ this._centerMax = $.geo.center( $.geo.proj.fromGeodetic( value ) );
+ } else {
+ this._centerMax = $.geo.center( value );
+ }
+ break;
+
+ case "services":
+ this._createServices();
+ if (refresh) {
+ this._refresh();
+ }
+ break;
+
+ case "shapeStyle":
+ if ( refresh ) {
+ this._$shapesContainer.geographics("clear");
+ this._refreshShapes( this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes );
+ }
+ break;
+ }
+ },
+
+ destroy: function () {
+ if ( this._$elem.is(".geo-service") ) {
+ this._$shapesContainer.geographics("destroy");
+ this._$shapesContainer = undefined;
+ } else {
+ this._created = false;
+
+ $(window).unbind("resize", this._windowHandler);
+
+ for ( var i = 0; i < this._currentServices.length; i++ ) {
+ this._currentServices[ i ].serviceContainer.geomap("destroy");
+ $.geo["_serviceTypes"][this._currentServices[i].type].destroy(this, this._$servicesContainer, this._currentServices[i]);
+ }
+
+ this._$shapesContainer.geographics("destroy");
+ this._$shapesContainer = undefined;
+ this._$drawContainer.geographics("destroy");
+ this._$drawContainer = undefined;
+
+ this._$existingChildren.detach();
+ this._$elem.html("");
+ this._$elem.append(this._$existingChildren);
+ this._$elem.removeClass("geo-map");
+ }
+
+ $.Widget.prototype.destroy.apply(this, arguments);
+ },
+
+ toMap: function (p) {
+ p = this._toMap(p);
+ return this._userGeodetic ? $.geo.proj.toGeodetic(p) : p;
+ },
+
+ toPixel: function ( p, _center /* Internal Use Only */, _pixelSize /* Internal Use Only */ ) {
+ return this._toPixel( $.geo.proj ? $.geo.proj.fromGeodetic( p ) : p, _center, _pixelSize );
+ },
+
+ opacity: function ( value, _serviceContainer ) {
+ if ( this._$elem.is( ".geo-service" ) ) {
+ this._$elem.closest( ".geo-map" ).geomap( "opacity", value, this._$elem );
+ } else {
+ if ( value >= 0 || value <= 1 ) {
+ for ( var i = 0; i < this._currentServices.length; i++ ) {
+ var service = this._currentServices[ i ];
+ if ( !_serviceContainer || service.serviceContainer[ 0 ] == _serviceContainer[ 0 ] ) {
+ service.style.opacity = value;
+ $.geo[ "_serviceTypes" ][ service.type ].opacity( this, service );
+ }
+ }
+ }
+ }
+ },
+
+ toggle: function ( value, _serviceContainer ) {
+ if ( this._$elem.is( ".geo-service" ) ) {
+ this._$elem.closest( ".geo-map" ).geomap( "toggle", value, this._$elem );
+ } else {
+
+ for ( var i = 0; i < this._currentServices.length; i++ ) {
+ var service = this._currentServices[ i ];
+
+ if ( !_serviceContainer || service.serviceContainer[ 0 ] == _serviceContainer[ 0 ] ) {
+ if ( value === undefined ) {
+ // toggle visibility
+ value = ( service.style.visibility !== "visible" );
+ }
+
+ service.style.visibility = ( value ? "visible" : "hidden" );
+
+ service.serviceContainer.toggle( value );
+
+ if ( value ) {
+ $.geo[ "_serviceTypes" ][ service.type ].refresh( this, service );
+ }
+ }
+ }
+ }
+ },
+
+ zoom: function (numberOfLevels) {
+ if (numberOfLevels != null) {
+ this._setZoom(this._options["zoom"] + numberOfLevels, false, true);
+ }
+ },
+
+ refresh: function () {
+ this._refresh();
+ },
+
+ resize: function () {
+ var size = this._findMapSize(),
+ dx = size["width"]/2 - this._contentBounds.width/2,
+ dy = size["height"]/2 - this._contentBounds.height/2,
+ i;
+
+ this._contentBounds = {
+ x: parseInt(this._$elem.css("padding-left")),
+ y: parseInt(this._$elem.css("padding-top")),
+ width: size["width"],
+ height: size["height"]
+ };
+
+ this._$resizeContainer.css( {
+ width: size["width"],
+ height: size["height"]
+ } );
+
+ for (i = 0; i < this._currentServices.length; i++) {
+ $.geo["_serviceTypes"][this._currentServices[i].type].resize(this, this._currentServices[i]);
+ }
+
+ this._$elem.find( ".geo-graphics" ).css( {
+ width: size["width"],
+ height: size["height"]
+ }).geographics( "resize" );
+
+ for (i = 0; i < this._drawPixels.length; i++) {
+ this._drawPixels[i][0] += dx;
+ this._drawPixels[i][1] += dy;
+ }
+
+ this._setCenterAndSize(this._center, this._pixelSize, false, true);
+ },
+
+ append: function ( shape, style, label, refresh ) {
+ if ( shape && $.isPlainObject( shape ) ) {
+ var shapes, arg, i, realStyle, realLabel, realRefresh;
+
+ if ( shape.type == "FeatureCollection" ) {
+ shapes = shape.features;
+ } else {
+ shapes = $.isArray( shape ) ? shape : [ shape ];
+ }
+
+ for ( i = 1; i < arguments.length; i++ ) {
+ arg = arguments[ i ];
+
+ if ( typeof arg === "object" ) {
+ realStyle = arg;
+ } else if ( typeof arg === "number" || typeof arg === "string" ) {
+ realLabel = arg;
+ } else if ( typeof arg === "boolean" ) {
+ realRefresh = arg;
+ }
+ }
+
+ for ( i = 0; i < shapes.length; i++ ) {
+ if ( shapes[ i ].type != "Point" ) {
+ var bbox = $.geo.bbox( shapes[ i ] );
+ if ( $.geo.proj && $.geo._isGeodetic( bbox ) ) {
+ bbox = $.geo.proj.fromGeodetic( bbox );
+ }
+ $.data( shapes[ i ], "geoBbox", bbox );
+ }
+
+ this._graphicShapes.push( {
+ shape: shapes[ i ],
+ style: realStyle,
+ label: realLabel
+ } );
+ }
+
+ if ( realRefresh === undefined || realRefresh ) {
+ this._refresh( );
+ }
+ }
+ },
+
+ empty: function ( refresh ) {
+ for ( var i = 0; i < this._graphicShapes.length; i++ ) {
+ $.removeData( this._graphicShapes[ i ].shape, "geoBbox" );
+ }
+
+ this._graphicShapes = [];
+
+ if ( refresh === undefined || refresh ) {
+ this._refresh();
+ }
+ },
+
+ find: function ( selector, pixelTolerance ) {
+ var isPoint = $.isPlainObject( selector ),
+ searchPixel = isPoint ? this._map.toPixel( selector.coordinates ) : undefined,
+ mapTol = this._map._pixelSize * pixelTolerance,
+ result = [],
+ graphicShape,
+ geometries,
+ curGeom,
+ i = 0;
+
+ for ( ; i < this._graphicShapes.length; i++ ) {
+ graphicShape = this._graphicShapes[ i ];
+
+ if ( isPoint ) {
+ if ( graphicShape.shape.type == "Point" ) {
+ if ( $.geo.distance( graphicShape.shape, selector ) <= mapTol ) {
+ result.push( graphicShape.shape );
+ }
+ } else {
+ var bbox = $.data( graphicShape.shape, "geoBbox" ),
+ bboxPolygon = {
+ type: "Polygon",
+ coordinates: [ [
+ [bbox[0], bbox[1]],
+ [bbox[0], bbox[3]],
+ [bbox[2], bbox[3]],
+ [bbox[2], bbox[1]],
+ [bbox[0], bbox[1]]
+ ] ]
+ },
+ projectedPoint = {
+ type: "Point",
+ coordinates: $.geo.proj && $.geo._isGeodetic( selector.coordinates ) ? $.geo.proj.fromGeodetic( selector.coordinates ) : selector.coordinates
+ };
+
+ if ( $.geo.distance( bboxPolygon, projectedPoint, true ) <= mapTol ) {
+ geometries = $.geo._flatten( graphicShape.shape );
+ for ( curGeom = 0; curGeom < geometries.length; curGeom++ ) {
+ if ( $.geo.distance( geometries[ curGeom ], selector ) <= mapTol ) {
+ result.push( graphicShape.shape );
+ break;
+ }
+ }
+ }
+ }
+ } else {
+ result.push( graphicShape.shape );
+ }
+ }
+
+ if ( this._$elem.is( ".geo-map" ) ) {
+ this._$elem.find( ".geo-service" ).each( function( ) {
+ result = $.merge( result, $( this ).geomap( "find", selector, pixelTolerance ) );
+ } );
+ }
+
+ return result;
+ },
+
+ remove: function ( shape, refresh ) {
+ for ( var i = 0; i < this._graphicShapes.length; i++ ) {
+ if ( this._graphicShapes[ i ].shape == shape ) {
+ $.removeData( shape, "geoBbox" );
+ var rest = this._graphicShapes.slice( i + 1 );
+ this._graphicShapes.length = i;
+ this._graphicShapes.push.apply( this._graphicShapes, rest );
+ break;
+ }
+ }
+
+ if ( refresh === undefined || refresh ) {
+ this._refresh();
+ }
+ },
+
+ _getBbox: function (center, pixelSize) {
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ // calculate the internal bbox
+ var halfWidth = this._contentBounds[ "width" ] / 2 * pixelSize,
+ halfHeight = this._contentBounds[ "height" ] / 2 * pixelSize;
+ return [ center[ 0 ] - halfWidth, center[ 1 ] - halfHeight, center[ 0 ] + halfWidth, center[ 1 ] + halfHeight ];
+ },
+
+ _setBbox: function (value, trigger, refresh) {
+ var center = [value[0] + (value[2] - value[0]) / 2, value[1] + (value[3] - value[1]) / 2],
+ pixelSize = Math.max($.geo.width(value, true) / this._contentBounds.width, $.geo.height(value, true) / this._contentBounds.height);
+
+ if (this._options["tilingScheme"]) {
+ var zoom = this._getZoom( center, pixelSize );
+ pixelSize = this._getPixelSize( zoom );
+ } else {
+ if ( this._getZoom( center, pixelSize ) < 0 ) {
+ pixelSize = this._pixelSizeMax;
+ }
+ }
+
+ this._setCenterAndSize(center, pixelSize, trigger, refresh);
+ },
+
+ _getBboxMax: function () {
+ // calculate the internal bboxMax
+ var halfWidth = this._contentBounds["width"] / 2 * this._pixelSizeMax,
+ halfHeight = this._contentBounds["height"] / 2 * this._pixelSizeMax;
+ return [this._centerMax[0] - halfWidth, this._centerMax[1] - halfHeight, this._centerMax[0] + halfWidth, this._centerMax[1] + halfHeight];
+ },
+
+ _getCenter: function () {
+ return this._center;
+ },
+
+ _getContentBounds: function () {
+ return this._contentBounds;
+ },
+
+ _getServicesContainer: function () {
+ return this._$servicesContainer;
+ },
+
+ _getZoom: function ( center, pixelSize ) {
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ // calculate the internal zoom level, vs. public zoom property
+ var tilingScheme = this._options["tilingScheme"];
+ if ( tilingScheme ) {
+ if ( tilingScheme.pixelSizes != null ) {
+ var roundedPixelSize = Math.floor(pixelSize * 1000),
+ levels = tilingScheme.pixelSizes.length,
+ i = levels - 1;
+
+ for ( ; i >= 0; i-- ) {
+ if ( Math.floor( tilingScheme.pixelSizes[ i ] * 1000 ) >= roundedPixelSize ) {
+ return i;
+ }
+ }
+
+ return 0;
+ } else {
+ return Math.max( Math.round( Math.log( tilingScheme.basePixelSize / pixelSize) / Math.log( 2 ) ), 0 );
+ }
+ } else {
+ var ratio = this._contentBounds["width"] / this._contentBounds["height"],
+ bbox = $.geo.reaspect( this._getBbox( center, pixelSize ), ratio, true ),
+ bboxMax = $.geo.reaspect(this._getBboxMax(), ratio, true);
+
+ return Math.max( Math.round( Math.log($.geo.width(bboxMax, true) / $.geo.width(bbox, true)) / Math.log(this._zoomFactor) ), 0 );
+ }
+ },
+
+ _setZoom: function ( value, trigger, refresh ) {
+ value = Math.max( value, 0 );
+
+ this._setCenterAndSize( this._center, this._getPixelSize( value ), trigger, refresh );
+ },
+
+ _createChildren: function () {
+ this._$existingChildren = this._$elem.children().detach();
+
+ this._forcePosition(this._$existingChildren);
+
+ this._$existingChildren.css("-moz-user-select", "none");
+
+ var contentSizeCss = "width:" + this._contentBounds["width"] + "px; height:" + this._contentBounds["height"] + "px; margin:0; padding:0;",
+ contentPosCss = "position:absolute; left:0; top:0;";
+
+ this._$elem.prepend('<div class="geo-event-target geo-content-frame" style="position:absolute; left:' + this._contentBounds.x + 'px; top:' + this._contentBounds.y + 'px;' + contentSizeCss + 'overflow:hidden; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none;" unselectable="on"></div>');
+ this._$eventTarget = this._$contentFrame = this._$elem.children(':first');
+
+ this._$contentFrame.append('<div class="geo-services-container" style="' + contentPosCss + contentSizeCss + '"></div>');
+ this._$servicesContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append('<div class="geo-shapes-container" style="' + contentPosCss + contentSizeCss + '"></div>');
+ this._$shapesContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append( '<ul style="position: absolute; bottom: 8px; left: 8px; list-style-type: none; max-width: 50%; padding: 0; margin: 0;"></ul>' );
+ this._$attrList = this._$contentFrame.children( ":last" );
+
+ this._$contentFrame.append('<div class="geo-draw-container" style="' + contentPosCss + contentSizeCss + '"></div>');
+ this._$drawContainer = this._$contentFrame.children(':last');
+
+ this._$contentFrame.append('<div class="geo-measure-container" style="' + contentPosCss + contentSizeCss + '"><div class="geo-measure-label" style="' + contentPosCss + '; display: none;"></div></div>');
+ this._$measureContainer = this._$contentFrame.children(':last');
+ this._$measureLabel = this._$measureContainer.children();
+
+ this._$panContainer = $( [ this._$shapesContainer[ 0 ], this._$drawContainer[ 0 ], this._$measureContainer[ 0 ] ] );
+
+ this._$resizeContainer = $( [ this._$contentFrame[ 0 ], this._$servicesContainer[ 0 ], this._$eventTarget[ 0 ], this._$measureContainer[ 0 ] ] );
+
+ this._$contentFrame.append(this._$existingChildren);
+
+ if ( ! $("#geo-measure-style").length ) {
+ $("head").prepend( '<style type="text/css" id="geo-measure-style">.geo-measure-label { margin: 4px 0 0 6px; font-family: sans-serif;' + ( _ieVersion ? 'letter-spacing: 2px; color: #444; filter:progid:DXImageTransform.Microsoft.DropShadow(Color=white, OffX=1, OffY=2, Positive=true);' : 'color: #000; text-shadow: #fff 1px 2px; font-weight: bold;' ) + ' }</style>' );
+ }
+ },
+
+ _createServices: function () {
+ var service, i;
+
+ for ( i = 0; i < this._currentServices.length; i++ ) {
+ this._currentServices[ i ].serviceContainer.geomap( "destroy" );
+ $.geo[ "_serviceTypes" ][ this._currentServices[ i ].type ].destroy( this, this._$servicesContainer, this._currentServices[ i ] );
+ }
+
+ this._currentServices = [ ];
+ this._$servicesContainer.html( "" );
+ this._$attrList.html( "" );
+
+ for ( i = 0; i < this._options[ "services" ].length; i++ ) {
+ service = this._currentServices[ i ] = $.extend( { }, this._options[ "services" ][ i ] );
+
+ // default the service style property on our copy
+ service.style = $.extend( {
+ visibility: "visible",
+ opacity: 1
+ }, service.style );
+
+ var idString = service.id ? ' id="' + service.id + '"' : "",
+ classString = 'class="geo-service ' + ( service["class"] ? service["class"] : '' ) + '"',
+ scHtml = '<div ' + idString + classString + ' style="position:absolute; left:0; top:0; width:32px; height:32px; margin:0; padding:0; display:' + ( service.style.visibility === "visible" ? "block" : "none" ) + ';"></div>',
+ servicesContainer;
+
+ this._$servicesContainer.append( scHtml );
+ serviceContainer = this._$servicesContainer.children( ":last" );
+ this._currentServices[ i ].serviceContainer = serviceContainer;
+
+ $.geo[ "_serviceTypes" ][ service.type ].create( this, serviceContainer, service, i );
+
+ serviceContainer.data( "geoMap", this ).geomap();
+
+ if ( service.attr ) {
+ this._$attrList.append( '<li>' + service.attr + '</li>' );
+ }
+ }
+
+ this._$attrList.find( "a" ).css( {
+ position: "relative",
+ zIndex: 100
+ } );
+ },
+
+ _refreshDrawing: function ( ) {
+ this._$drawContainer.geographics("clear");
+
+ if ( this._drawPixels.length > 0 ) {
+ var mode = this._options[ "mode" ],
+ pixels = this._drawPixels,
+ coords = this._drawCoords,
+ label,
+ labelShape,
+ labelPixel,
+ widthOver,
+ heightOver;
+
+ switch ( mode ) {
+ case "measureLength":
+ mode = "drawLineString";
+ labelShape = {
+ type: "LineString",
+ coordinates: coords
+ };
+ label = $.render( { length: $.geo.length( labelShape, true ) }, "geoMeasureLength" );
+ labelPixel = $.merge( [], pixels[ pixels.length - 1 ] );
+ break;
+
+ case "measureArea":
+ mode = "drawPolygon";
+
+ labelShape = {
+ type: "Polygon",
+ coordinates: [ $.merge( [ ], coords ) ]
+ };
+ labelShape.coordinates[ 0 ].push( coords[ 0 ] );
+
+ label = $.render( { area: $.geo.area( labelShape, true ) }, "geoMeasureArea" );
+ labelPixel = $.merge( [], pixels[ pixels.length - 1 ] );
+ pixels = [ pixels ];
+ break;
+
+ case "drawPolygon":
+ pixels = [ pixels ];
+ break;
+ }
+
+ this._$drawContainer.geographics( mode, pixels );
+
+ if ( label ) {
+ this._$measureLabel.html( label );
+
+ widthOver = this._contentBounds.width - ( this._$measureLabel.outerWidth( true ) + labelPixel[ 0 ] );
+ heightOver = this._contentBounds.height - ( this._$measureLabel.outerHeight( true ) + labelPixel[ 1 ] );
+
+ if ( widthOver < 0 ) {
+ labelPixel[ 0 ] += widthOver;
+ }
+
+ if ( heightOver < 0 ) {
+ labelPixel[ 1 ] += heightOver;
+ }
+
+ this._$measureLabel.css( {
+ left: labelPixel[ 0 ],
+ top: labelPixel[ 1 ]
+ } ).show();
+ }
+ }
+ },
+
+ _resetDrawing: function () {
+ this._drawPixels = [];
+ this._drawCoords = [];
+ this._$drawContainer.geographics("clear");
+ this._$measureLabel.hide();
+ },
+
+ _refreshShapes: function (geographics, shapes, styles, labels, center, pixelSize) {
+ var i, mgi,
+ shape,
+ shapeBbox,
+ style,
+ label,
+ hasLabel,
+ labelPixel,
+ bbox = this._map._getBbox(center, pixelSize);
+
+ for (i = 0; i < shapes.length; i++) {
+ shape = shapes[i].shape || shapes[i];
+ shape = shape.geometry || shape;
+ shapeBbox = $.data(shape, "geoBbox");
+
+ if ( shapeBbox && $.geo._bboxDisjoint( bbox, shapeBbox ) ) {
+ continue;
+ }
+
+ style = $.isArray(styles) ? styles[i].style : styles;
+ label = $.isArray(labels) ? labels[i].label : labels;
+ hasLabel = ( label !== undefined );
+ labelPixel = undefined;
+
+ switch (shape.type) {
+ case "Point":
+ labelPixel = this._map.toPixel( shape.coordinates, center, pixelSize );
+ this._$shapesContainer.geographics("drawPoint", labelPixel, style);
+ break;
+ case "LineString":
+ this._$shapesContainer.geographics("drawLineString", this._map.toPixel(shape.coordinates, center, pixelSize), style);
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.pointAlong( shape, .5 ).coordinates, center, pixelSize );
+ }
+ break;
+ case "Polygon":
+ this._$shapesContainer.geographics("drawPolygon", this._map.toPixel(shape.coordinates, center, pixelSize), style);
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+ case "MultiPoint":
+ for (mgi = 0; mgi < shape.coordinates.length; mgi++) {
+ this._$shapesContainer.geographics("drawPoint", this._map.toPixel(shape.coordinates[mgi], center, pixelSize), style);
+ }
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+ case "MultiLineString":
+ for (mgi = 0; mgi < shape.coordinates.length; mgi++) {
+ this._$shapesContainer.geographics("drawLineString", this._map.toPixel(shape.coordinates[mgi], center, pixelSize), style);
+ }
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+ case "MultiPolygon":
+ for (mgi = 0; mgi < shape.coordinates.length; mgi++) {
+ this._$shapesContainer.geographics("drawPolygon", this._map.toPixel(shape.coordinates[mgi], center, pixelSize), style);
+ }
+ if ( hasLabel ) {
+ labelPixel = this._map.toPixel( $.geo.centroid( shape ).coordinates, center, pixelSize );
+ }
+ break;
+
+ case "GeometryCollection":
+ this._refreshShapes(geographics, shape.geometries, style, label, center, pixelSize);
+ break;
+ }
+
+ if ( hasLabel && labelPixel ) {
+ this._$shapesContainer.geographics( "drawLabel", labelPixel, label );
+ }
+ }
+ },
+
+ _findMapSize: function () {
+ // really, really attempt to find a size for this thing
+ // even if it's hidden (look at parents)
+ var size = { width: 0, height: 0 },
+ sizeContainer = this._$elem;
+
+ while (sizeContainer.size() && !(size["width"] > 0 && size["height"] > 0)) {
+ size = { width: sizeContainer.width(), height: sizeContainer.height() };
+ if (size["width"] <= 0 || size["height"] <= 0) {
+ size = { width: parseInt(sizeContainer.css("width")), height: parseInt(sizeContainer.css("height")) };
+ }
+ sizeContainer = sizeContainer.parent();
+ }
+ return size;
+ },
+
+ _forcePosition: function (elem) {
+ var cssPosition = elem.css("position");
+ if (cssPosition != "relative" && cssPosition != "absolute" && cssPosition != "fixed") {
+ elem.css("position", "relative");
+ }
+ },
+
+ _getPixelSize: function ( zoom ) {
+ var tilingScheme = this._options["tilingScheme"];
+ if (tilingScheme != null) {
+ if (zoom === 0) {
+ return tilingScheme.pixelSizes != null ? tilingScheme.pixelSizes[0] : tilingScheme.basePixelSize;
+ }
+
+ zoom = Math.round(zoom);
+ zoom = Math.max(zoom, 0);
+ var levels = tilingScheme.pixelSizes != null ? tilingScheme.pixelSizes.length : tilingScheme.levels;
+ zoom = Math.min(zoom, levels - 1);
+
+ if (tilingScheme.pixelSizes != null) {
+ return tilingScheme.pixelSizes[zoom];
+ } else {
+ return tilingScheme.basePixelSize / Math.pow(2, zoom);
+ }
+ } else {
+ var bbox = $.geo.scaleBy( this._getBboxMax(), 1 / Math.pow( this._zoomFactor, zoom ), true );
+ return Math.max( $.geo.width( bbox, true ) / this._contentBounds.width, $.geo.height( bbox, true ) / this._contentBounds.height );
+ }
+ },
+
+ _getZoomCenterAndSize: function ( anchor, zoomDelta, full ) {
+ var zoomFactor = ( full ? this._fullZoomFactor : this._partialZoomFactor ),
+ scale = Math.pow( zoomFactor, -zoomDelta ),
+ pixelSize,
+ zoomLevel;
+
+ if ( this._options[ "tilingScheme" ] ) {
+ zoomLevel = this._getZoom(this._center, this._pixelSize * scale);
+ pixelSize = this._getPixelSize(zoomLevel);
+ } else {
+ pixelSize = this._pixelSize * scale;
+
+ if ( this._getZoom( this._center, pixelSize ) < 0 ) {
+ pixelSize = this._pixelSizeMax;
+ }
+ }
+
+ var ratio = pixelSize / this._pixelSize,
+ anchorMapCoord = this._toMap(anchor),
+ centerDelta = [(this._center[0] - anchorMapCoord[0]) * ratio, (this._center[1] - anchorMapCoord[1]) * ratio],
+ scaleCenter = [anchorMapCoord[0] + centerDelta[0], anchorMapCoord[1] + centerDelta[1]];
+
+ return { pixelSize: pixelSize, center: scaleCenter };
+ },
+
+ _mouseWheelFinish: function () {
+ this._wheelTimeout = null;
+
+ if (this._wheelLevel != 0) {
+ var wheelCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, this._options[ "tilingScheme" ] != null );
+
+ this._setCenterAndSize(wheelCenterAndSize.center, wheelCenterAndSize.pixelSize, true, true);
+
+ this._wheelLevel = 0;
+ } else {
+ this._refresh();
+ }
+ },
+
+ _panEnd: function () {
+ this._velocity = [
+ (this._velocity[0] > 0 ? Math.floor(this._velocity[0] * this._friction[0]) : Math.ceil(this._velocity[0] * this._friction[0])),
+ (this._velocity[1] > 0 ? Math.floor(this._velocity[1] * this._friction[1]) : Math.ceil(this._velocity[1] * this._friction[1]))
+ ];
+
+ if (Math.abs(this._velocity[0]) < 4 && Math.abs(this._velocity[1]) < 4) {
+ this._panFinalize();
+ } else {
+ this._current = [
+ this._current[0] + this._velocity[0],
+ this._current[1] + this._velocity[1]
+ ];
+
+ this._panMove();
+ setTimeout($.proxy(this._panEnd, this), 30);
+ }
+ },
+
+ _panFinalize: function () {
+ if (this._panning) {
+ this._velocity = [0, 0];
+
+ var dx = this._current[0] - this._anchor[0],
+ dy = this._current[1] - this._anchor[1],
+ image = this._options[ "axisLayout" ] === "image",
+ dxMap = -dx * this._pixelSize,
+ dyMap = ( image ? -1 : 1 ) * dy * this._pixelSize;
+
+ this._$panContainer.css({ left: 0, top: 0 });
+
+ this._$servicesContainer.find( ".geo-shapes-container" ).css( { left: 0, top: 0 } );
+
+ this._setCenterAndSize([this._center[0] + dxMap, this._center[1] + dyMap], this._pixelSize, true, true);
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+
+ this._inOp = false;
+ this._anchor = this._current;
+ this._mouseDown = this._toolPan = this._panning = false;
+ }
+ },
+
+ _panMove: function () {
+ if ( ! this._options[ "pannable" ] ) {
+ return;
+ }
+
+ var dx = this._current[0] - this._lastDrag[0],
+ dy = this._current[1] - this._lastDrag[1],
+ i = 0,
+ service,
+ translateObj;
+
+ if (this._toolPan || dx > 3 || dx < -3 || dy > 3 || dy < -3) {
+ if (!this._toolPan) {
+ this._toolPan = true;
+ this._$eventTarget.css("cursor", this._options["cursors"]["pan"]);
+ }
+
+ if (this._mouseDown) {
+ this._velocity = [dx, dy];
+ }
+
+ if (dx != 0 || dy != 0) {
+ this._panning = true;
+ this._lastDrag = this._current;
+
+ translateObj = {
+ left: function (index, value) {
+ return parseInt(value) + dx;
+ },
+ top: function (index, value) {
+ return parseInt(value) + dy;
+ }
+ };
+
+ for ( i = 0; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+ $.geo[ "_serviceTypes" ][ service.type ].interactivePan( this, service, dx, dy );
+
+ service.serviceContainer.find( ".geo-shapes-container" ).css( translateObj );
+ }
+
+ this._$panContainer.css( translateObj );
+
+ //this._refreshDrawing();
+ }
+ }
+ },
+
+ _refresh: function () {
+ var service,
+ i = 0;
+
+ if ( this._$elem.is( ".geo-map" ) ) {
+ for ( ; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+
+ if ( !this._mouseDown && $.geo[ "_serviceTypes" ][ service.type ] !== null ) {
+ $.geo[ "_serviceTypes" ][ service.type ].refresh( this, service );
+ service.serviceContainer.geomap( "refresh" );
+ }
+ }
+ }
+
+ if ( this._$shapesContainer ) {
+ this._$shapesContainer.geographics( "clear" );
+ if ( this._graphicShapes.length > 0 ) {
+ this._refreshShapes( this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes );
+ }
+ }
+ },
+
+ _setCenterAndSize: function (center, pixelSize, trigger, refresh) {
+ if ( ! $.isArray( center ) || center.length != 2 || typeof center[ 0 ] !== "number" || typeof center[ 1 ] !== "number" ) {
+ return;
+ }
+
+ // the final call during any extent change
+ if (this._pixelSize != pixelSize) {
+ this._$elem.find( ".geo-shapes-container" ).geographics("clear");
+ for (var i = 0; i < this._currentServices.length; i++) {
+ var service = this._currentServices[i];
+ $.geo["_serviceTypes"][service.type].interactiveScale(this, service, center, pixelSize);
+ }
+ }
+
+ this._center = $.merge( [ ], center );
+ this._options["pixelSize"] = this._pixelSize = pixelSize;
+
+ if ( this._userGeodetic ) {
+ this._options["bbox"] = $.geo.proj.toGeodetic( this._getBbox() );
+ this._options["center"] = $.geo.proj.toGeodetic( this._center );
+ } else {
+ this._options["bbox"] = this._getBbox();
+ this._options["center"] = $.merge( [ ], center );
+ }
+
+ this._options["zoom"] = this._getZoom();
+
+ if (this._drawCoords.length > 0) {
+ this._drawPixels = this._toPixel(this._drawCoords);
+ }
+
+ if (trigger) {
+ this._trigger("bboxchange", window.event, { bbox: $.merge( [ ], this._options["bbox"] ) });
+ }
+
+ if (refresh) {
+ this._refresh();
+ this._refreshDrawing();
+ }
+ },
+
+ _toMap: function (p, center, pixelSize) {
+ // ignores $.geo.proj
+
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ var isMultiPointOrLineString = $.isArray( p[ 0 ] ),
+ isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray( p[ 0 ][ 0 ] ),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray( p[ 0 ][ 0 ][ 0 ] ),
+ width = this._contentBounds["width"],
+ height = this._contentBounds["height"],
+ halfWidth = width / 2 * pixelSize,
+ halfHeight = height / 2 * pixelSize,
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight],
+ xRatio = $.geo.width(bbox, true) / width,
+ yRatio = $.geo.height(bbox, true) / height,
+ yOffset,
+ image = this._options[ "axisLayout" ] === "image",
+ result = [],
+ i, j, k;
+
+ if ( !isMultiPolygon ) {
+ if ( !isMultiLineStringOrPolygon ) {
+ if ( !isMultiPointOrLineString ) {
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+
+ for ( i = 0; i < p.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < p[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < p[ i ][ j ].length; k++ ) {
+ yOffset = (p[ i ][ j ][ k ][1] * yRatio);
+ result[ i ][ j ][ k ] = [
+ bbox[ 0 ] + ( p[ i ][ j ][ k ][ 0 ] * xRatio ),
+ image ? bbox[ 1 ] + yOffset : bbox[ 3 ] - yOffset
+ ];
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ },
+
+ _toPixel: function (p, center, pixelSize) {
+ // ignores $.geo.proj
+
+ center = center || this._center;
+ pixelSize = pixelSize || this._pixelSize;
+
+ var isMultiPointOrLineString = $.isArray( p[ 0 ] ),
+ isMultiLineStringOrPolygon = isMultiPointOrLineString && $.isArray( p[ 0 ][ 0 ] ),
+ isMultiPolygon = isMultiLineStringOrPolygon && $.isArray( p[ 0 ][ 0 ][ 0 ] ),
+ width = this._contentBounds["width"],
+ height = this._contentBounds["height"],
+ halfWidth = width / 2 * pixelSize,
+ halfHeight = height / 2 * pixelSize,
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight],
+ bboxWidth = $.geo.width(bbox, true),
+ bboxHeight = $.geo.height(bbox, true),
+ image = this._options[ "axisLayout" ] === "image",
+ xRatio = width / bboxWidth,
+ yRatio = height / bboxHeight,
+ result = [ ],
+ i, j, k;
+
+ if ( !isMultiPolygon ) {
+ if ( !isMultiLineStringOrPolygon ) {
+ if ( !isMultiPointOrLineString ) {
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+ p = [ p ];
+ }
+
+ for ( i = 0; i < p.length; i++ ) {
+ result[ i ] = [ ];
+ for ( j = 0; j < p[ i ].length; j++ ) {
+ result[ i ][ j ] = [ ];
+ for ( k = 0; k < p[ i ][ j ].length; k++ ) {
+ result[ i ][ j ][ k ] = [
+ Math.round( ( p[ i ][ j ][ k ][ 0 ] - bbox[ 0 ] ) * xRatio ),
+ Math.round( ( image ? p[ i ][ j ][ k ][ 1 ] - bbox[ 1 ] : bbox[ 3 ] - p[ i ][ j ][ k ][ 1 ] ) * yRatio )
+ ];
+ }
+ }
+ }
+
+ return isMultiPolygon ? result : isMultiLineStringOrPolygon ? result[ 0 ] : isMultiPointOrLineString ? result[ 0 ][ 0 ] : result[ 0 ][ 0 ][ 0 ];
+ },
+
+ _zoomTo: function (coord, zoom, trigger, refresh) {
+ zoom = zoom < 0 ? 0 : zoom;
+
+ var pixelSize = this._getPixelSize( zoom );
+
+ this._setCenterAndSize( coord, pixelSize, trigger, refresh );
+ },
+
+ _document_keydown: function (e) {
+ var len = this._drawCoords.length;
+ if (len > 0 && e.which == 27) {
+ if (len <= 2) {
+ this._resetDrawing();
+ this._inOp = false;
+ } else {
+ this._drawCoords[len - 2] = $.merge( [], this._drawCoords[ len - 1 ] );
+ this._drawPixels[len - 2] = $.merge( [], this._drawPixels[ len - 1 ] );
+
+ this._drawCoords.length--;
+ this._drawPixels.length--;
+
+ this._refreshDrawing();
+ }
+ }
+ },
+
+ _eventTarget_dblclick_zoom: function(e) {
+ this._trigger("dblclick", e, { type: "Point", coordinates: this.toMap(this._current) });
+ if (!e.isDefaultPrevented()) {
+ var centerAndSize = this._getZoomCenterAndSize(this._current, 1, true );
+ this._setCenterAndSize(centerAndSize.center, centerAndSize.pixelSize, true, true);
+ }
+ },
+
+ _eventTarget_dblclick: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ this._panFinalize();
+
+ if (this._drawTimeout) {
+ window.clearTimeout(this._drawTimeout);
+ this._drawTimeout = null;
+ }
+
+ var offset = $(e.currentTarget).offset();
+
+ switch (this._options["mode"]) {
+ case "drawLineString":
+ if ( this._drawCoords.length > 1 && ! ( this._drawCoords[0][0] == this._drawCoords[1][0] &&
+ this._drawCoords[0][1] == this._drawCoords[1][1] ) ) {
+ this._drawCoords.length--;
+ this._trigger( "shape", e, {
+ type: "LineString",
+ coordinates: this._userGeodetic ? $.geo.proj.toGeodetic(this._drawCoords) : this._drawCoords
+ } );
+ } else {
+ this._eventTarget_dblclick_zoom(e);
+ }
+ this._resetDrawing();
+ break;
+
+ case "drawPolygon":
+ if ( this._drawCoords.length > 1 && ! ( this._drawCoords[0][0] == this._drawCoords[1][0] &&
+ this._drawCoords[0][1] == this._drawCoords[1][1] ) ) {
+ var endIndex = this._drawCoords.length - 1;
+ if (endIndex > 2) {
+ this._drawCoords[endIndex] = $.merge( [], this._drawCoords[0] );
+ this._trigger( "shape", e, {
+ type: "Polygon",
+ coordinates: [ this._userGeodetic ? $.geo.proj.toGeodetic(this._drawCoords) : this._drawCoords ]
+ } );
+ }
+ } else {
+ this._eventTarget_dblclick_zoom(e);
+ }
+ this._resetDrawing();
+ break;
+
+ case "measureLength":
+ case "measureArea":
+ this._resetDrawing();
+ break;
+
+ default:
+ this._eventTarget_dblclick_zoom(e);
+ break;
+ }
+
+ this._inOp = false;
+ },
+
+ _eventTarget_touchstart: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ if ( !this._supportTouch && e.which != 1 ) {
+ return;
+ }
+
+ this._panFinalize();
+ this._mouseWheelFinish();
+
+ var offset = $(e.currentTarget).offset(),
+ touches = e.originalEvent.changedTouches;
+
+ if ( this._supportTouch ) {
+ this._multiTouchAnchor = $.merge( [ ], touches );
+
+ this._isMultiTouch = this._multiTouchAnchor.length > 1;
+
+ if ( this._isMultiTouch ) {
+ this._multiTouchCurrentBbox = [
+ touches[0].pageX - offset.left,
+ touches[0].pageY - offset.top,
+ touches[1].pageX - offset.left,
+ touches[1].pageY - offset.top
+ ];
+
+ this._multiTouchAnchorBbox = $.merge( [ ], this._multiTouchCurrentBbox );
+
+ this._current = $.geo.center( this._multiTouchCurrentBbox, true );
+ } else {
+ this._multiTouchCurrentBbox = [
+ touches[0].pageX - offset.left,
+ touches[0].pageY - offset.top,
+ NaN,
+ NaN
+ ];
+
+ this._current = [ touches[0].pageX - offset.left, touches[0].pageY - offset.top ];
+ }
+ } else {
+ this._current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ if (this._softDblClick) {
+ var downDate = $.now();
+ if (downDate - this._downDate < 750) {
+ if (this._isTap) {
+ var dx = this._current[0] - this._anchor[0],
+ dy = this._current[1] - this._anchor[1],
+ distance = Math.sqrt((dx * dx) + (dy * dy));
+ if (distance > 8) {
+ this._isTap = false;
+ } else {
+ this._current = $.merge( [ ], this._anchor );
+ }
+ }
+
+ if (this._isDbltap) {
+ this._isDbltap = false;
+ } else {
+ this._isDbltap = this._isTap;
+ }
+ } else {
+ this._isDbltap = false;
+ }
+ this._isTap = true;
+ this._downDate = downDate;
+ }
+
+ this._mouseDown = true;
+ this._anchor = $.merge( [ ], this._current );
+
+ if (!this._inOp && e.shiftKey) {
+ this._shiftZoom = true;
+ this._$eventTarget.css("cursor", this._options["cursors"]["zoom"]);
+ } else if ( !this._isMultiTouch && this._options[ "pannable" ] ) {
+ this._inOp = true;
+
+ switch (this._options["mode"]) {
+ case "zoom":
+ break;
+
+ default:
+ this._lastDrag = this._current;
+
+ if (e.currentTarget.setCapture) {
+ e.currentTarget.setCapture();
+ }
+
+ break;
+ }
+ }
+
+ e.preventDefault();
+ return false;
+ },
+
+ _dragTarget_touchmove: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ var offset = this._$eventTarget.offset(),
+ drawCoordsLen = this._drawCoords.length,
+ touches = e.originalEvent.changedTouches,
+ current,
+ service,
+ i = 0;
+
+ if ( this._supportTouch ) {
+ if ( !this._isMultiTouch && touches[ 0 ].identifier !== this._multiTouchAnchor[ 0 ].identifier ) {
+ // switch to multitouch
+ this._mouseDown = false;
+ this._dragTarget_touchstop( e );
+
+ this._isMultiTouch = true;
+
+ this._multiTouchAnchor.push( touches[ 0 ] );
+
+ this._multiTouchCurrentBbox = [
+ this._multiTouchCurrentBbox[ 0 ],
+ this._multiTouchCurrentBbox[ 1 ],
+ this._multiTouchAnchor[1].pageX - offset.left,
+ this._multiTouchAnchor[1].pageY - offset.top
+ ];
+
+ this._multiTouchAnchorBbox = $.merge( [ ], this._multiTouchCurrentBbox );
+
+ this._mouseDown = true;
+ this._anchor = this._current = $.geo.center( this._multiTouchCurrentBbox, true );
+
+ return false;
+ }
+
+ if ( this._isMultiTouch ) {
+ for ( ; i < touches.length; i++ ) {
+ if ( touches[ i ].identifier === this._multiTouchAnchor[ 0 ].identifier ) {
+ this._multiTouchCurrentBbox[ 0 ] = touches[ i ].pageX - offset.left;
+ this._multiTouchCurrentBbox[ 1 ] = touches[ i ].pageY - offset.top;
+ } else if ( touches[ i ].identifier === this._multiTouchAnchor[ 1 ].identifier ) {
+ this._multiTouchCurrentBbox[ 2 ] = touches[ i ].pageX - offset.left;
+ this._multiTouchCurrentBbox[ 3 ] = touches[ i ].pageY - offset.top;
+ }
+ }
+
+ current = $.geo.center( this._multiTouchCurrentBbox, true );
+
+ var currentWidth = this._multiTouchCurrentBbox[ 2 ] - this._multiTouchCurrentBbox[ 0 ],
+ anchorWidth = this._multiTouchAnchorBbox[ 2 ] - this._multiTouchAnchorBbox[ 0 ],
+ ratioWidth = currentWidth / anchorWidth;
+
+ this._wheelLevel = Math.abs( Math.floor( ( 1 - ratioWidth ) * 10 ) );
+ if ( Math.abs( currentWidth ) < Math.abs( anchorWidth ) ) {
+ this._wheelLevel = - this._wheelLevel;
+ }
+
+ var pinchCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, false );
+ this._$elem.find( ".geo-shapes-container" ).geographics("clear");
+
+ for ( i = 0; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+ $.geo[ "_serviceTypes" ][ service.type ].interactiveScale( this, service, pinchCenterAndSize.center, pinchCenterAndSize.pixelSize );
+ }
+
+ if (this._graphicShapes.length > 0 && this._graphicShapes.length < 256) {
+ this._refreshShapes(this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes, pinchCenterAndSize.center, pinchCenterAndSize.pixelSize);
+ }
+
+
+ if (this._drawCoords.length > 0) {
+ this._drawPixels = this._toPixel(this._drawCoords, pinchCenterAndSize.center, pinchCenterAndSize.pixelSize);
+ this._refreshDrawing();
+ }
+
+ current = $.geo.center( this._multiTouchCurrentBbox, true );
+ } else {
+ current = [e.originalEvent.changedTouches[0].pageX - offset.left, e.originalEvent.changedTouches[0].pageY - offset.top];
+ }
+ } else {
+ current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ if (current[0] === this._lastMove[0] && current[1] === this._lastMove[1]) {
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ }
+
+ if ( _ieVersion == 7 ) {
+ this._isDbltap = this._isTap = false;
+ }
+
+ if (this._mouseDown) {
+ this._current = current;
+ this._moveDate = $.now();
+ }
+
+ if ( this._isMultiTouch ) {
+ e.preventDefault( );
+ this._isDbltap = this._isTap = false;
+ return false;
+ }
+
+ var mode = this._shiftZoom ? "zoom" : this._options["mode"];
+
+ switch (mode) {
+ case "zoom":
+ if ( this._mouseDown ) {
+ this._$drawContainer.geographics( "clear" );
+ this._$drawContainer.geographics( "drawBbox", [
+ this._anchor[ 0 ],
+ this._anchor[ 1 ],
+ current[ 0 ],
+ current[ 1 ]
+ ] );
+ } else {
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+
+ case "drawLineString":
+ case "drawPolygon":
+ case "measureLength":
+ case "measureArea":
+ if (this._mouseDown || this._toolPan) {
+ this._panMove();
+ } else {
+ if (drawCoordsLen > 0) {
+ this._drawCoords[drawCoordsLen - 1] = this._toMap(current);
+ this._drawPixels[drawCoordsLen - 1] = current;
+
+ this._refreshDrawing();
+ }
+
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+
+ default:
+ if (this._mouseDown || this._toolPan) {
+ this._panMove();
+ } else {
+ this._trigger("move", e, { type: "Point", coordinates: this.toMap(current) });
+ }
+ break;
+ }
+
+ this._lastMove = current;
+
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ },
+
+ _dragTarget_touchstop: function (e) {
+ if ( this._options[ "mode" ] === "static" ) {
+ return;
+ }
+
+ if (!this._mouseDown && _ieVersion == 7) {
+ // ie7 doesn't appear to trigger dblclick on this._$eventTarget,
+ // we fake regular click here to cause soft dblclick
+ this._eventTarget_touchstart(e);
+ }
+
+ var mouseWasDown = this._mouseDown,
+ wasToolPan = this._toolPan,
+ offset = this._$eventTarget.offset(),
+ mode = this._shiftZoom ? "zoom" : this._options["mode"],
+ current, i, clickDate,
+ dx, dy;
+
+ if (this._supportTouch) {
+ current = [e.originalEvent.changedTouches[0].pageX - offset.left, e.originalEvent.changedTouches[0].pageY - offset.top];
+ } else {
+ current = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ if (this._softDblClick) {
+ if (this._isTap) {
+ var dx = current[0] - this._anchor[0],
+ dy = current[1] - this._anchor[1],
+ distance = Math.sqrt((dx * dx) + (dy * dy));
+ if (distance <= 8) {
+ current = $.merge( [ ], this._anchor );
+ }
+ }
+ }
+
+ dx = current[0] - this._anchor[0];
+ dy = current[1] - this._anchor[1];
+
+ this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
+
+ this._shiftZoom = this._mouseDown = this._toolPan = false;
+
+ if ( this._isMultiTouch ) {
+ e.preventDefault( );
+ this._isMultiTouch = false;
+
+ var pinchCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, false );
+
+ this._setCenterAndSize(pinchCenterAndSize.center, pinchCenterAndSize.pixelSize, true, true);
+
+ this._wheelLevel = 0;
+
+ return false;
+ }
+
+ if (document.releaseCapture) {
+ document.releaseCapture();
+ }
+
+ if (mouseWasDown) {
+ clickDate = $.now();
+ this._current = current;
+
+ switch (mode) {
+ case "zoom":
+ if ( dx > 0 || dy > 0 ) {
+ var minSize = this._pixelSize * 6,
+ bboxCoords = this._toMap( [ [
+ Math.min( this._anchor[ 0 ], current[ 0 ] ),
+ Math.max( this._anchor[ 1 ], current[ 1 ] )
+ ], [
+ Math.max( this._anchor[ 0 ], current[ 0 ] ),
+ Math.min( this._anchor[ 1 ], current[ 1 ] )
+ ]
+ ] ),
+ bbox = [
+ bboxCoords[0][0],
+ bboxCoords[0][1],
+ bboxCoords[1][0],
+ bboxCoords[1][1]
+ ];
+
+ if ( ( bbox[2] - bbox[0] ) < minSize && ( bbox[3] - bbox[1] ) < minSize ) {
+ bbox = $.geo.scaleBy( this._getBbox( $.geo.center( bbox, true ) ), .5, true );
+ }
+
+ this._setBbox(bbox, true, true);
+ }
+
+ this._resetDrawing();
+ break;
+
+ case "drawPoint":
+ if (this._drawTimeout) {
+ window.clearTimeout(this._drawTimeout);
+ this._drawTimeout = null;
+ }
+
+ if (wasToolPan) {
+ this._panFinalize();
+ } else {
+ if (clickDate - this._clickDate > 100) {
+ var geomap = this;
+ this._drawTimeout = setTimeout(function () {
+ if (geomap._drawTimeout) {
+ geomap._trigger("shape", e, { type: "Point", coordinates: geomap.toMap(current) });
+ geomap._inOp = false;
+ geomap._drawTimeout = null;
+ }
+ }, 250);
+ }
+ }
+ break;
+
+ case "drawLineString":
+ case "drawPolygon":
+ case "measureLength":
+ case "measureArea":
+ if (wasToolPan) {
+ this._panFinalize();
+ } else {
+ i = (this._drawCoords.length == 0 ? 0 : this._drawCoords.length - 1);
+
+ this._drawCoords[i] = this._toMap(current);
+ this._drawPixels[i] = current;
+
+ if (i < 2 || !(this._drawCoords[i][0] == this._drawCoords[i-1][0] &&
+ this._drawCoords[i][1] == this._drawCoords[i-1][1])) {
+ this._drawCoords[i + 1] = this._toMap(current);
+ this._drawPixels[i + 1] = current;
+ }
+
+ this._refreshDrawing();
+ }
+ break;
+
+ default:
+ if (wasToolPan) {
+ this._panEnd();
+ } else {
+ if (clickDate - this._clickDate > 100) {
+ this._trigger("click", e, { type: "Point", coordinates: this.toMap(current) });
+ this._inOp = false;
+ }
+ }
+ break;
+ }
+
+ this._clickDate = clickDate;
+
+ if (this._softDblClick && this._isDbltap) {
+ this._isDbltap = this._isTap = false;
+ this._$eventTarget.trigger("dblclick", e);
+ }
+ }
+
+ if ( this._inOp ) {
+ e.preventDefault();
+ return false;
+ }
+ },
+
+ _eventTarget_mousewheel: function (e, delta) {
+ if ( this._options[ "mode" ] === "static" || this._options[ "scroll" ] === "off" ) {
+ return;
+ }
+
+ e.preventDefault();
+
+ this._panFinalize();
+
+ if ( this._mouseDown ) {
+ return false;
+ }
+
+ if (delta != 0) {
+ if (this._wheelTimeout) {
+ window.clearTimeout(this._wheelTimeout);
+ this._wheelTimeout = null;
+ } else {
+ var offset = $(e.currentTarget).offset();
+ this._anchor = [e.pageX - offset.left, e.pageY - offset.top];
+ }
+
+ this._wheelLevel += delta;
+
+ var wheelCenterAndSize = this._getZoomCenterAndSize( this._anchor, this._wheelLevel, this._options[ "tilingScheme" ] != null ),
+ service,
+ i = 0;
+
+ this._$elem.find( ".geo-shapes-container" ).geographics("clear");
+
+ for ( ; i < this._currentServices.length; i++ ) {
+ service = this._currentServices[ i ];
+ $.geo["_serviceTypes"][service.type].interactiveScale(this, service, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ }
+
+ if (this._graphicShapes.length > 0 && this._graphicShapes.length < 256) {
+ this._refreshShapes(this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ }
+
+ if (this._drawCoords.length > 0) {
+ this._drawPixels = this._toPixel(this._drawCoords, wheelCenterAndSize.center, wheelCenterAndSize.pixelSize);
+ this._refreshDrawing();
+ }
+
+ var geomap = this;
+ this._wheelTimeout = window.setTimeout(function () {
+ geomap._mouseWheelFinish();
+ }, 1000);
+ }
+
+ return false;
+ }
+ }
+ );
+})(jQuery);
+
+
--- /dev/null
+// excanvas
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/*
+ * AppGeo/geo
+ * (c) 2007-2011, Applied Geographics, Inc. All rights reserved.
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+
+
--- /dev/null
+(function ($, undefined) {
+ $.geo._serviceTypes.shingled = (function () {
+ return {
+ create: function (map, serviceContainer, service, index) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( !serviceState ) {
+ serviceState = {
+ loadCount: 0
+ };
+
+ var scHtml = '<div data-geo-service="shingled" style="position:absolute; left:0; top:0; width:16px; height:16px; margin:0; padding:0;"></div>';
+
+ serviceContainer.append(scHtml);
+
+ serviceState.serviceContainer = serviceContainer.children(":last");
+ $.data(service, "geoServiceState", serviceState);
+ }
+
+ return serviceState.serviceContainer;
+ },
+
+ destroy: function (map, serviceContainer, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ serviceState.serviceContainer.remove();
+
+ $.removeData(service, "geoServiceState");
+ },
+
+ interactivePan: function (map, service, dx, dy) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+ pixelSize = map._pixelSize,
+ scaleContainer = serviceContainer.children("[data-pixelSize='" + pixelSize + "']"),
+ panContainer = scaleContainer.children("div");
+
+ if ( !panContainer.length ) {
+ scaleContainer.children("img").wrap('<div style="position:absolute; left:0; top:0; width:100%; height:100%;"></div>');
+ panContainer = scaleContainer.children("div");
+ }
+
+ panContainer.css( {
+ left: function (index, value) {
+ return parseInt(value) + dx;
+ },
+ top: function (index, value) {
+ return parseInt(value) + dy;
+ }
+ } );
+
+ // until pan/zoom rewrite, remove all containers not in this scale
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ }
+ },
+
+ interactiveScale: function (map, service, center, pixelSize) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight];
+
+ serviceContainer.children().each(function (i) {
+ var $scaleContainer = $(this),
+ scalePixelSize = $scaleContainer.attr("data-pixelSize"),
+ ratio = scalePixelSize / pixelSize;
+
+ $scaleContainer.css( {
+ width: mapWidth * ratio,
+ height: mapHeight * ratio } ).children("img").each(function (i) {
+ var $img = $(this),
+ imgCenter = $img.data("center"),
+ x = (Math.round((imgCenter[0] - center[0]) / scalePixelSize) - halfWidth) * ratio,
+ y = (Math.round((center[1] - imgCenter[1]) / scalePixelSize) - halfHeight) * ratio;
+
+ $img.css({ left: x + "px", top: y + "px" });
+ });
+ });
+ }
+ },
+
+ refresh: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ this._cancelUnloaded(map, service);
+
+ if ( serviceState && service && service.style.visibility === "visible" && !( serviceState.serviceContainer.is( ":hidden" ) ) ) {
+
+ var bbox = map._getBbox(),
+ pixelSize = map._pixelSize,
+
+ serviceObj = this,
+ serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ scaleContainer = serviceContainer.children('[data-pixelSize="' + pixelSize + '"]'),
+
+ opacity = service.style.opacity,
+
+ $img;
+
+ if ( !scaleContainer.size() ) {
+ serviceContainer.append('<div style="position:absolute; left:' + halfWidth + 'px; top:' + halfHeight + 'px; width:' + mapWidth + 'px; height:' + mapHeight + 'px; margin:0; padding:0;" data-pixelSize="' + pixelSize + '"></div>');
+ scaleContainer = serviceContainer.children(":last");
+ }
+
+ scaleContainer.children("img").each(function (i) {
+ var $thisimg = $(this),
+ imgCenter = $thisimg.data("center"),
+ center = map._getCenter(),
+ x = Math.round((imgCenter[0] - center[0]) / pixelSize) - halfWidth,
+ y = Math.round((center[1] - imgCenter[1]) / pixelSize) - halfHeight;
+
+ $thisimg.css({ left: x + "px", top: y + "px" });
+ });
+
+ if (opacity < 1) {
+ serviceContainer.find("img").attr("data-keepAlive", "0");
+ }
+
+ var urlProp = ( service.hasOwnProperty("src") ? "src" : "getUrl" ),
+ urlArgs = {
+ bbox: bbox,
+ width: mapWidth,
+ height: mapHeight,
+ zoom: map._getZoom(),
+ tile: null,
+ index: 0
+ },
+ isFunc = $.isFunction( service[ urlProp ] ),
+ imageUrl;
+
+
+ if ( isFunc ) {
+ imageUrl = service[ urlProp ]( urlArgs );
+ } else {
+ $.template( "geoSrc", service[ urlProp ] );
+ imageUrl = $.render( urlArgs, "geoSrc" );
+ }
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ scaleContainer.append('<img style="position:absolute; left:-' + halfWidth + 'px; top:-' + halfHeight + 'px; width:100%; height:100%; margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;" unselectable="on" />');
+ $img = scaleContainer.children(":last").data("center", map._getCenter());
+
+ if ( typeof imageUrl === "string" ) {
+ serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, serviceContainer, opacity );
+ } else {
+ // assume Deferred
+ imageUrl.done( function( url ) {
+ serviceObj._loadImage( $img, url, pixelSize, serviceState, serviceContainer, opacity );
+ } ).fail( function( ) {
+ $img.remove( );
+ serviceState.loadCount--;
+ } );
+ }
+
+ }
+ },
+
+ resize: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( serviceState && service && service.style.visibility === "visible" ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ halfWidth = mapWidth / 2,
+ halfHeight = mapHeight / 2,
+
+ scaleContainer = serviceContainer.children();
+
+ scaleContainer.attr("data-pixelSize", "0");
+ scaleContainer.css({
+ left: halfWidth + 'px',
+ top: halfHeight + 'px'
+ });
+ }
+ },
+
+ opacity: function ( map, service ) {
+ var serviceState = $.data( service, "geoServiceState" );
+ serviceState.serviceContainer.find( "img" ).stop( true ).fadeTo( "fast", service.style.opacity );
+ },
+
+ toggle: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+ serviceState.serviceContainer.css("display", service.style.visibility === "visible" ? "block" : "none");
+ },
+
+ _cancelUnloaded: function (map, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if (serviceState && serviceState.loadCount > 0) {
+ serviceState.serviceContainer.find("img:hidden").remove();
+ while (serviceState.loadCount > 0) {
+ serviceState.loadCount--;
+ }
+ }
+ },
+
+ _loadImage: function ( $img, url, pixelSize, serviceState, serviceContainer, opacity ) {
+ $img.load(function (e) {
+ if (opacity < 1) {
+ $(e.target).fadeTo(0, opacity);
+ } else {
+ $(e.target).show();
+ }
+
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(':not([data-pixelSize="' + pixelSize + '"])').remove();
+
+ var panContainer = serviceContainer.find('[data-pixelSize="' + pixelSize + '"]>div');
+ if (panContainer.size() > 0) {
+ var panContainerPos = panContainer.position();
+
+ panContainer.children("img").each(function (i) {
+ var $thisimg = $(this),
+ x = panContainerPos.left + parseInt($thisimg.css("left")),
+ y = panContainerPos.top + parseInt($thisimg.css("top"));
+
+ $thisimg.css({ left: x + "px", top: y + "px" });
+ }).unwrap();
+
+ panContainer.remove();
+ }
+
+ serviceState.loadCount = 0;
+ }
+ }).error(function (e) {
+ $(e.target).remove();
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).attr("src", url);
+ }
+ }
+ })();
+})(jQuery);
+
--- /dev/null
+(function ($, undefined) {
+ $.geo._serviceTypes.tiled = (function () {
+ return {
+ create: function (map, serviceContainer, service, index) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ if ( !serviceState ) {
+ serviceState = {
+ loadCount: 0,
+ reloadTiles: false
+ };
+
+ var scHtml = '<div data-geo-service="tiled" style="position:absolute; left:0; top:0; width:8px; height:8px; margin:0; padding:0;"></div>';
+
+ serviceContainer.append(scHtml);
+
+ serviceState.serviceContainer = serviceContainer.children( ":last" );
+
+ $.data(service, "geoServiceState", serviceState);
+ }
+
+ return serviceState.serviceContainer;
+ },
+
+ destroy: function (map, serviceContainer, service) {
+ var serviceState = $.data(service, "geoServiceState");
+
+ serviceState.serviceContainer.remove();
+
+ $.removeData(service, "geoServiceState");
+ },
+
+ interactivePan: function ( map, service, dx, dy ) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if ( serviceState ) {
+ this._cancelUnloaded( map, service );
+
+ serviceState.serviceContainer.children( ).css( "-moz-transition", "").css( {
+ webkitTransition: "",
+ transition: "",
+ left: function ( index, value ) {
+ return parseInt( value ) + dx;
+ },
+ top: function ( index, value ) {
+ return parseInt( value ) + dy;
+ }
+ });
+
+ if ( service && service.style.visibility === "visible" ) {
+ var pixelSize = map._pixelSize,
+
+ serviceObj = this,
+ serviceContainer = serviceState.serviceContainer,
+ scaleContainer = serviceContainer.children("[data-pixelSize='" + pixelSize + "']"),
+
+ /* same as refresh 1 */
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ image = map.options[ "axisLayout" ] === "image",
+ ySign = image ? +1 : -1,
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight,
+ /* end same as refresh 1 */
+
+ halfWidth = mapWidth / 2 * pixelSize,
+ halfHeight = mapHeight / 2 * pixelSize,
+
+ currentPosition = scaleContainer.position(),
+ scaleOriginParts = scaleContainer.data("scaleOrigin").split(","),
+ totalDx = parseInt(scaleOriginParts[0]) - currentPosition.left,
+ totalDy = parseInt(scaleOriginParts[1]) - currentPosition.top,
+
+ mapCenterOriginal = map._getCenter(),
+ mapCenter = [
+ mapCenterOriginal[0] + totalDx * pixelSize,
+ mapCenterOriginal[1] + ySign * totalDy * pixelSize
+ ],
+
+ /* same as refresh 2 */
+ tileX = Math.floor(((mapCenter[0] - halfWidth) - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY = Math.max( Math.floor(( image ? (mapCenter[1] - halfHeight) - tilingScheme.origin[1] : tilingScheme.origin[1] - (mapCenter[1] + halfHeight)) / (pixelSize * tileHeight)), 0 ),
+ tileX2 = Math.ceil(((mapCenter[0] + halfWidth) - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY2 = Math.ceil(( image ? (mapCenter[1] + halfHeight) - tilingScheme.origin[1] : tilingScheme.origin[1] - (mapCenter[1] - halfHeight)) / (pixelSize * tileHeight)),
+
+ bboxMax = map._getBboxMax(),
+ pixelSizeAtZero = map._getPixelSize(0),
+ ratio = pixelSizeAtZero / pixelSize,
+ fullXAtScale = Math.floor((bboxMax[0] - tilingScheme.origin[0]) / (pixelSizeAtZero * tileWidth)) * ratio,
+ fullYAtScale = Math.floor((tilingScheme.origin[1] + ySign * bboxMax[3]) / (pixelSizeAtZero * tileHeight)) * ratio,
+
+ fullXMinX = tilingScheme.origin[0] + (fullXAtScale * tileWidth) * pixelSize,
+ fullYMinOrMaxY = tilingScheme.origin[1] + ySign * (fullYAtScale * tileHeight) * pixelSize,
+ /* end same as refresh 2 */
+
+ serviceLeft = Math.round((fullXMinX - (mapCenterOriginal[0] - halfWidth)) / pixelSize),
+ serviceTop = Math.round(( image ? fullYMinOrMaxY - (mapCenterOriginal[1] - halfHeight) : (mapCenterOriginal[1] + halfHeight) - fullYMinOrMaxY ) / pixelSize),
+
+ opacity = service.style.opacity,
+
+ x, y;
+
+ for ( x = tileX; x < tileX2; x++ ) {
+ for ( y = tileY; y < tileY2; y++ ) {
+ var tileStr = "" + x + "," + y,
+ $img = scaleContainer.children("[data-tile='" + tileStr + "']").removeAttr("data-dirty");
+
+ if ( $img.size( ) === 0 ) {
+ /* same as refresh 3 */
+ var bottomLeft = [
+ tilingScheme.origin[0] + (x * tileWidth) * pixelSize,
+ tilingScheme.origin[1] + ySign * (y * tileHeight) * pixelSize
+ ],
+
+ topRight = [
+ tilingScheme.origin[0] + ((x + 1) * tileWidth - 1) * pixelSize,
+ tilingScheme.origin[1] + ySign * ((y + 1) * tileHeight - 1) * pixelSize
+ ],
+
+ tileBbox = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]],
+
+ urlProp = ( service.hasOwnProperty("src") ? "src" : "getUrl" ),
+ urlArgs = {
+ bbox: tileBbox,
+ width: tileWidth,
+ height: tileHeight,
+ zoom: map._getZoom(),
+ tile: {
+ row: y,
+ column: x
+ },
+ index: Math.abs(y + x)
+ },
+ isFunc = $.isFunction( service[ urlProp ] ),
+ imageUrl;
+
+ if ( isFunc ) {
+ imageUrl = service[ urlProp ]( urlArgs );
+ } else {
+ $.template( "geoSrc", service[ urlProp ] );
+ imageUrl = $.render( urlArgs, "geoSrc" );
+ }
+ /* end same as refresh 3 */
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ if ( serviceState.reloadTiles && $img.size() > 0 ) {
+ $img.attr( "src", imageUrl );
+ } else {
+ /* same as refresh 4 */
+ var imgMarkup = "<img style='position:absolute; " +
+ "left:" + (((x - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%; " +
+ "top:" + (((y - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%; ";
+
+ if ($("body")[0].filters === undefined) {
+ imgMarkup += "width: 100%; height: 100%;";
+ }
+
+ imgMarkup += "margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='" + tileStr + "' />";
+
+ scaleContainer.append( imgMarkup );
+ $img = scaleContainer.children(":last");
+ }
+
+ if ( typeof imageUrl === "string" ) {
+ serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, serviceContainer, opacity );
+ } else {
+ // assume Deferred
+ imageUrl.done( function( url ) {
+ serviceObj._loadImage( $img, url, pixelSize, serviceState, serviceContainer, opacity );
+ } ).fail( function( ) {
+ $img.remove( );
+ serviceState.loadCount--;
+ } );
+ }
+
+ /* end same as refresh 4 */
+ }
+ }
+ }
+ }
+ }
+ },
+
+ interactiveScale: function (map, service, center, pixelSize) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if ( serviceState && service && service.style.visibility === "visible" ) {
+ this._cancelUnloaded(map, service);
+
+ var serviceContainer = serviceState.serviceContainer,
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight;
+
+
+ serviceContainer.children( ).each( function ( i ) {
+ var $scaleContainer = $(this),
+ scaleRatio = $scaleContainer.attr("data-pixelSize") / pixelSize,
+ transitionCss = ""; //"width .25s ease-in, height .25s ease-in, left .25s ease-in, top .25s ease-in";
+
+ scaleRatio = Math.round(scaleRatio * 1000) / 1000;
+
+
+ var scaleOriginParts = $scaleContainer.data("scaleOrigin").split(","),
+ oldMapCoord = map._toMap([scaleOriginParts[0], scaleOriginParts[1]]),
+ newPixelPoint = map._toPixel(oldMapCoord, center, pixelSize);
+
+ $scaleContainer.css( "-moz-transition", transitionCss ).css( {
+ webkitTransition: transitionCss,
+ transition: transitionCss,
+ left: Math.round(newPixelPoint[0]) + "px",
+ top: Math.round(newPixelPoint[1]) + "px",
+ width: tileWidth * scaleRatio,
+ height: tileHeight * scaleRatio
+ } );
+
+ if ( $("body")[0].filters !== undefined ) {
+ $scaleContainer.children().each( function ( i ) {
+ $( this ).css( "filter", "progid:DXImageTransform.Microsoft.Matrix(FilterType=bilinear,M11=" + scaleRatio + ",M22=" + scaleRatio + ",sizingmethod='auto expand')" );
+ } );
+ }
+ });
+ }
+ },
+
+ refresh: function (map, service) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ this._cancelUnloaded(map, service);
+
+ if ( serviceState && service && service.style.visibility === "visible" && !( serviceState.serviceContainer.is( ":hidden" ) ) ) {
+
+ var bbox = map._getBbox(),
+ pixelSize = map._pixelSize,
+
+ serviceObj = this,
+ $serviceContainer = serviceState.serviceContainer,
+
+ contentBounds = map._getContentBounds(),
+ mapWidth = contentBounds["width"],
+ mapHeight = contentBounds["height"],
+
+ image = map.options[ "axisLayout" ] === "image",
+ ySign = image ? +1 : -1,
+
+ tilingScheme = map.options["tilingScheme"],
+ tileWidth = tilingScheme.tileWidth,
+ tileHeight = tilingScheme.tileHeight,
+
+ tileX = Math.floor((bbox[0] - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY = Math.max( Math.floor( ( image ? bbox[1] - tilingScheme.origin[1] : tilingScheme.origin[1] - bbox[ 3 ] ) / (pixelSize * tileHeight) ), 0 ),
+ tileX2 = Math.ceil((bbox[2] - tilingScheme.origin[0]) / (pixelSize * tileWidth)),
+ tileY2 = Math.ceil( ( image ? bbox[3] - tilingScheme.origin[1] : tilingScheme.origin[1] - bbox[ 1 ] ) / (pixelSize * tileHeight) ),
+
+ bboxMax = map._getBboxMax(),
+ pixelSizeAtZero = map._getPixelSize(0),
+ ratio = pixelSizeAtZero / pixelSize,
+ fullXAtScale = Math.floor((bboxMax[0] - tilingScheme.origin[0]) / (pixelSizeAtZero * tileWidth)) * ratio,
+ fullYAtScale = Math.floor((tilingScheme.origin[1] + ySign * bboxMax[3]) / (pixelSizeAtZero * tileHeight)) * ratio,
+
+ fullXMinX = tilingScheme.origin[0] + (fullXAtScale * tileWidth) * pixelSize,
+ fullYMinOrMaxY = tilingScheme.origin[1] + ySign * (fullYAtScale * tileHeight) * pixelSize,
+
+ serviceLeft = Math.round((fullXMinX - bbox[0]) / pixelSize),
+ serviceTop = Math.round( ( image ? fullYMinOrMaxY - bbox[1] : bbox[3] - fullYMinOrMaxY ) / pixelSize),
+
+ scaleContainers = $serviceContainer.children().show(),
+ scaleContainer = scaleContainers.filter("[data-pixelSize='" + pixelSize + "']").appendTo($serviceContainer),
+
+ opacity = service.style.opacity,
+
+ x, y;
+
+ if (serviceState.reloadTiles) {
+ scaleContainers.find("img").attr("data-dirty", "true");
+ }
+
+ if (!scaleContainer.size()) {
+ $serviceContainer.append("<div style='position:absolute; left:" + serviceLeft % tileWidth + "px; top:" + serviceTop % tileHeight + "px; width:" + tileWidth + "px; height:" + tileHeight + "px; margin:0; padding:0;' data-pixelSize='" + pixelSize + "'></div>");
+ scaleContainer = $serviceContainer.children(":last").data("scaleOrigin", (serviceLeft % tileWidth) + "," + (serviceTop % tileHeight));
+ } else {
+ scaleContainer.css({
+ left: (serviceLeft % tileWidth) + "px",
+ top: (serviceTop % tileHeight) + "px"
+ }).data("scaleOrigin", (serviceLeft % tileWidth) + "," + (serviceTop % tileHeight));
+
+ scaleContainer.children().each(function (i) {
+ var
+ $img = $(this),
+ tile = $img.attr("data-tile").split(",");
+
+ $img.css({
+ left: Math.round(((parseInt(tile[0]) - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%",
+ top: Math.round(((parseInt(tile[1]) - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%"
+ });
+
+ if (opacity < 1) {
+ $img.fadeTo(0, opacity);
+ }
+ });
+ }
+
+ for (x = tileX; x < tileX2; x++) {
+ for (y = tileY; y < tileY2; y++) {
+ var tileStr = "" + x + "," + y,
+ $img = scaleContainer.children("[data-tile='" + tileStr + "']").removeAttr("data-dirty");
+
+ if ($img.size() === 0 || serviceState.reloadTiles) {
+ var bottomLeft = [
+ tilingScheme.origin[0] + (x * tileWidth) * pixelSize,
+ tilingScheme.origin[1] + ySign * (y * tileHeight) * pixelSize
+ ],
+
+ topRight = [
+ tilingScheme.origin[0] + ((x + 1) * tileWidth - 1) * pixelSize,
+ tilingScheme.origin[1] + ySign * ((y + 1) * tileHeight - 1) * pixelSize
+ ],
+
+ tileBbox = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]],
+
+ urlProp = ( service.hasOwnProperty( "src" ) ? "src" : "getUrl" ),
+ urlArgs = {
+ bbox: tileBbox,
+ width: tileWidth,
+ height: tileHeight,
+ zoom: map._getZoom(),
+ tile: {
+ row: y,
+ column: x
+ },
+ index: Math.abs(y + x)
+ },
+ isFunc = $.isFunction( service[ urlProp ] ),
+ imageUrl;
+
+ if ( isFunc ) {
+ imageUrl = service[ urlProp ]( urlArgs );
+ } else {
+ $.template( "geoSrc", service[ urlProp ] );
+ imageUrl = $.render( urlArgs, "geoSrc" );
+ }
+
+ serviceState.loadCount++;
+ //this._map._requestQueued();
+
+ if (serviceState.reloadTiles && $img.size() > 0) {
+ $img.attr("src", imageUrl);
+ } else {
+ var imgMarkup = "<img style='position:absolute; " +
+ "left:" + (((x - fullXAtScale) * 100) + (serviceLeft - (serviceLeft % tileWidth)) / tileWidth * 100) + "%; " +
+ "top:" + (((y - fullYAtScale) * 100) + (serviceTop - (serviceTop % tileHeight)) / tileHeight * 100) + "%; ";
+
+ if ($("body")[0].filters === undefined) {
+ imgMarkup += "width: 100%; height: 100%;";
+ }
+
+ imgMarkup += "margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;' unselectable='on' data-tile='" + tileStr + "' />";
+
+ scaleContainer.append(imgMarkup);
+ $img = scaleContainer.children(":last");
+ }
+
+ if ( typeof imageUrl === "string" ) {
+ serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, $serviceContainer, opacity );
+ } else {
+ // assume Deferred
+ imageUrl.done( function( url ) {
+ serviceObj._loadImage( $img, url, pixelSize, serviceState, $serviceContainer, opacity );
+ } ).fail( function( ) {
+ $img.remove( );
+ serviceState.loadCount--;
+ } );
+ }
+ }
+ }
+ }
+
+ scaleContainers.find("[data-dirty]").remove();
+ serviceState.reloadTiles = false;
+ }
+ },
+
+ resize: function (map, service) {
+ },
+
+ opacity: function ( map, service ) {
+ var serviceState = $.data( service, "geoServiceState" );
+ serviceState.serviceContainer.find( "img" ).stop( true ).fadeTo( "fast", service.style.opacity );
+ },
+
+ toggle: function ( map, service ) {
+ var serviceState = $.data( service, "geoServiceState" );
+ serviceState.serviceContainer.css( "display", service.style.visibility === "visible" ? "block" : "none" );
+ },
+
+ _cancelUnloaded: function (map, service) {
+ var serviceState = $.data( service, "geoServiceState" );
+
+ if (serviceState && serviceState.loadCount > 0) {
+ serviceState.serviceContainer.find("img:hidden").remove();
+ while (serviceState.loadCount > 0) {
+ serviceState.loadCount--;
+ }
+ }
+ },
+
+ _loadImage: function ( $img, url, pixelSize, serviceState, serviceContainer, opacity ) {
+ $img.load(function (e) {
+ if (opacity < 1) {
+ $(e.target).fadeTo(0, opacity);
+ } else {
+ $(e.target).show();
+ }
+
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).error(function (e) {
+ $(e.target).remove();
+ serviceState.loadCount--;
+
+ if (serviceState.loadCount <= 0) {
+ serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
+ serviceState.loadCount = 0;
+ }
+ }).attr("src", url);
+ }
+ };
+ })();
+})(jQuery);
+
--- /dev/null
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ *
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+ for ( var i=types.length; i; ) {
+ $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+ }
+}
+
+$.event.special.mousewheel = {
+ setup: function() {
+ if ( this.addEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.addEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = handler;
+ }
+ },
+
+ teardown: function() {
+ if ( this.removeEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.removeEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = null;
+ }
+ }
+};
+
+$.fn.extend({
+ mousewheel: function(fn) {
+ return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+ },
+
+ unmousewheel: function(fn) {
+ return this.unbind("mousewheel", fn);
+ }
+});
+
+
+function handler(event) {
+ var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+ event = $.event.fix(orgEvent);
+ event.type = "mousewheel";
+
+ // Old school scrollwheel delta
+ if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+ if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
+
+ // New school multidimensional scroll (touchpads) deltas
+ deltaY = delta;
+
+ // Gecko
+ if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+ deltaY = 0;
+ deltaX = -1*delta;
+ }
+
+ // Webkit
+ if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+ if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+
+ // Add event and delta to the front of the arguments
+ args.unshift(event, delta, deltaX, deltaY);
+
+ return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
--- /dev/null
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ *
+ * Requires: 1.2.2+
+ */
+(function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)
--- /dev/null
+/*!
+ * jQuery UI Widget @VERSION
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Widget
+ */
+
+if ( ! $.widget ) {
+
+(function( $, undefined ) {
+
+// jQuery 1.4+
+if ( $.cleanData ) {
+ var _cleanData = $.cleanData;
+ $.cleanData = function( elems ) {
+ for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
+ try {
+ $( elem ).triggerHandler( "remove" );
+ // http://bugs.jquery.com/ticket/8235
+ } catch( e ) {}
+ }
+ _cleanData( elems );
+ };
+} else {
+ var _remove = $.fn.remove;
+ $.fn.remove = function( selector, keepData ) {
+ return this.each(function() {
+ if ( !keepData ) {
+ if ( !selector || $.filter( selector, [ this ] ).length ) {
+ $( "*", this ).add( [ this ] ).each(function() {
+ try {
+ $( this ).triggerHandler( "remove" );
+ // http://bugs.jquery.com/ticket/8235
+ } catch( e ) {}
+ });
+ }
+ }
+ return _remove.call( $(this), selector, keepData );
+ });
+ };
+}
+
+$.widget = function( name, base, prototype ) {
+ var namespace = name.split( "." )[ 0 ],
+ fullName;
+ name = name.split( "." )[ 1 ];
+ fullName = namespace + "-" + name;
+
+ if ( !prototype ) {
+ prototype = base;
+ base = $.Widget;
+ }
+
+ // create selector for plugin
+ $.expr[ ":" ][ fullName ] = function( elem ) {
+ return !!$.data( elem, name );
+ };
+
+ $[ namespace ] = $[ namespace ] || {};
+ $[ namespace ][ name ] = function( options, element ) {
+ // allow instantiation without initializing for simple inheritance
+ if ( arguments.length ) {
+ this._createWidget( options, element );
+ }
+ };
+
+ var basePrototype = new base();
+ // we need to make the options hash a property directly on the new instance
+ // otherwise we'll modify the options hash on the prototype that we're
+ // inheriting from
+// $.each( basePrototype, function( key, val ) {
+// if ( $.isPlainObject(val) ) {
+// basePrototype[ key ] = $.extend( {}, val );
+// }
+// });
+ basePrototype.options = $.extend( true, {}, basePrototype.options );
+ $[ namespace ][ name ].prototype = $.extend( true, basePrototype, {
+ namespace: namespace,
+ widgetName: name,
+ widgetEventPrefix: $[ namespace ][ name ].prototype.widgetEventPrefix || name,
+ widgetBaseClass: fullName
+ }, prototype );
+
+ $.widget.bridge( name, $[ namespace ][ name ] );
+};
+
+$.widget.bridge = function( name, object ) {
+ $.fn[ name ] = function( options ) {
+ var isMethodCall = typeof options === "string",
+ args = Array.prototype.slice.call( arguments, 1 ),
+ returnValue = this;
+
+ // allow multiple hashes to be passed on init
+ options = !isMethodCall && args.length ?
+ $.extend.apply( null, [ true, options ].concat(args) ) :
+ options;
+
+ // prevent calls to internal methods
+ if ( isMethodCall && options.charAt( 0 ) === "_" ) {
+ return returnValue;
+ }
+
+ if ( isMethodCall ) {
+ this.each(function() {
+ var instance = $.data( this, name ),
+ methodValue = instance && $.isFunction( instance[options] ) ?
+ instance[ options ].apply( instance, args ) :
+ instance;
+ // TODO: add this back in 1.9 and use $.error() (see #5972)
+// if ( !instance ) {
+// throw "cannot call methods on " + name + " prior to initialization; " +
+// "attempted to call method '" + options + "'";
+// }
+// if ( !$.isFunction( instance[options] ) ) {
+// throw "no such method '" + options + "' for " + name + " widget instance";
+// }
+// var methodValue = instance[ options ].apply( instance, args );
+ if ( methodValue !== instance && methodValue !== undefined ) {
+ returnValue = methodValue;
+ return false;
+ }
+ });
+ } else {
+ this.each(function() {
+ var instance = $.data( this, name );
+ if ( instance ) {
+ instance.option( options || {} )._init();
+ } else {
+ $.data( this, name, new object( options, this ) );
+ }
+ });
+ }
+
+ return returnValue;
+ };
+};
+
+$.Widget = function( options, element ) {
+ // allow instantiation without initializing for simple inheritance
+ if ( arguments.length ) {
+ this._createWidget( options, element );
+ }
+};
+
+$.Widget.prototype = {
+ widgetName: "widget",
+ widgetEventPrefix: "",
+ options: {
+ disabled: false
+ },
+ _createWidget: function( options, element ) {
+ // $.widget.bridge stores the plugin instance, but we do it anyway
+ // so that it's stored even before the _create function runs
+ $.data( element, this.widgetName, this );
+ this.element = $( element );
+ this.options = $.extend( true, {},
+ this.options,
+ this._getCreateOptions(),
+ options );
+
+ var self = this;
+ this.element.bind( "remove." + this.widgetName, function() {
+ self.destroy();
+ });
+
+ this._create();
+ this._trigger( "create" );
+ this._init();
+ },
+ _getCreateOptions: function() {
+ return $.metadata && $.metadata.get( this.element[0] )[ this.widgetName ];
+ },
+ _create: function() {},
+ _init: function() {},
+
+ destroy: function() {
+ this.element
+ .unbind( "." + this.widgetName )
+ .removeData( this.widgetName );
+ this.widget()
+ .unbind( "." + this.widgetName )
+ .removeAttr( "aria-disabled" )
+ .removeClass(
+ this.widgetBaseClass + "-disabled " +
+ "ui-state-disabled" );
+ },
+
+ widget: function() {
+ return this.element;
+ },
+
+ option: function( key, value ) {
+ var options = key;
+
+ if ( arguments.length === 0 ) {
+ // don't return a reference to the internal hash
+ return $.extend( {}, this.options );
+ }
+
+ if (typeof key === "string" ) {
+ if ( value === undefined ) {
+ return this.options[ key ];
+ }
+ options = {};
+ options[ key ] = value;
+ }
+
+ this._setOptions( options );
+
+ return this;
+ },
+ _setOptions: function( options ) {
+ var self = this;
+ $.each( options, function( key, value ) {
+ self._setOption( key, value );
+ });
+
+ return this;
+ },
+ _setOption: function( key, value ) {
+ this.options[ key ] = value;
+
+ if ( key === "disabled" ) {
+ this.widget()
+ [ value ? "addClass" : "removeClass"](
+ this.widgetBaseClass + "-disabled" + " " +
+ "ui-state-disabled" )
+ .attr( "aria-disabled", value );
+ }
+
+ return this;
+ },
+
+ enable: function() {
+ return this._setOption( "disabled", false );
+ },
+ disable: function() {
+ return this._setOption( "disabled", true );
+ },
+
+ _trigger: function( type, event, data ) {
+ var prop, orig,
+ callback = this.options[ type ];
+
+ data = data || {};
+ event = $.Event( event );
+ event.type = ( type === this.widgetEventPrefix ?
+ type :
+ this.widgetEventPrefix + type ).toLowerCase();
+ // the original event may come from any element
+ // so we need to reset the target on the new event
+ event.target = this.element[ 0 ];
+
+ // copy original event properties over to the new event
+ orig = event.originalEvent;
+ if ( orig ) {
+ for ( prop in orig ) {
+ if ( !( prop in event ) ) {
+ event[ prop ] = orig[ prop ];
+ }
+ }
+ }
+
+ this.element.trigger( event, data );
+
+ return !( $.isFunction(callback) &&
+ callback.call( this.element[0], event, data ) === false ||
+ event.isDefaultPrevented() );
+ }
+};
+
+})( jQuery );
+
+}
+
--- /dev/null
+/*! JsRender v1.0pre - (jsrender.js version: does not require jQuery): http://github.com/BorisMoore/jsrender */
+/*
+ * Optimized version of jQuery Templates, fosr rendering to string, using 'codeless' markup.
+ *
+ * Copyright 2011, Boris Moore
+ * Released under the MIT License.
+ */
+window.JsViews || window.jQuery && jQuery.views || (function( window, undefined ) {
+
+var $, _$, JsViews, viewsNs, tmplEncode, render, rTag, registerTags, registerHelpers, extend,
+ FALSE = false, TRUE = true,
+ jQuery = window.jQuery, document = window.document,
+ htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
+ rPath = /^(true|false|null|[\d\.]+)|(\w+|\$(view|data|ctx|(\w+)))([\w\.]*)|((['"])(?:\\\1|.)*\7)$/g,
+ rParams = /(\$?[\w\.\[\]]+)(?:(\()|\s*(===|!==|==|!=|<|>|<=|>=)\s*|\s*(\=)\s*)?|(\,\s*)|\\?(\')|\\?(\")|(\))|(\s+)/g,
+ rNewLine = /\r?\n/g,
+ rUnescapeQuotes = /\\(['"])/g,
+ rEscapeQuotes = /\\?(['"])/g,
+ rBuildHash = /\x08([^\x08]+)\x08/g,
+ autoName = 0,
+ escapeMapForHtml = {
+ "&": "&",
+ "<": "<",
+ ">": ">"
+ },
+ htmlSpecialChar = /[\x00"&'<>]/g,
+ slice = Array.prototype.slice;
+
+if ( jQuery ) {
+
+ ////////////////////////////////////////////////////////////////////////////////////////////////
+ // jQuery is loaded, so make $ the jQuery object
+ $ = jQuery;
+
+ $.fn.extend({
+ // Use first wrapped element as template markup.
+ // Return string obtained by rendering the template against data.
+ render: function( data, context, parentView, path ) {
+ return render( data, this[0], context, parentView, path );
+ },
+
+ // Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
+ template: function( name, context ) {
+ return $.template( name, this[0], context );
+ }
+ });
+
+} else {
+
+ ////////////////////////////////////////////////////////////////////////////////////////////////
+ // jQuery is not loaded. Make $ the JsViews object
+
+ // Map over the $ in case of overwrite
+ _$ = window.$;
+
+ window.JsViews = JsViews = window.$ = $ = {
+ extend: function( target, source ) {
+ var name;
+ for ( name in source ) {
+ target[ name ] = source[ name ];
+ }
+ return target;
+ },
+ isArray: Array.isArray || function( obj ) {
+ return Object.prototype.toString.call( obj ) === "[object Array]";
+ },
+ noConflict: function() {
+ if ( window.$ === JsViews ) {
+ window.$ = _$;
+ }
+ return JsViews;
+ }
+ };
+}
+
+extend = $.extend;
+
+//=================
+// View constructor
+//=================
+
+function View( context, path, parentView, data, template ) {
+ // Returns a view data structure for a new rendered instance of a template.
+ // The content field is a hierarchical array of strings and nested views.
+
+ parentView = parentView || { viewsCount:0, ctx: viewsNs.helpers };
+
+ var parentContext = parentView && parentView.ctx;
+
+ return {
+ jsViews: "v1.0pre",
+ path: path || "",
+ // inherit context from parentView, merged with new context.
+ itemNumber: ++parentView.viewsCount || 1,
+ viewsCount: 0,
+ tmpl: template,
+ data: data || parentView.data || {},
+ // Set additional context on this view (which will modify the context inherited from the parent, and be inherited by child views)
+ ctx : context && context === parentContext
+ ? parentContext
+ : (parentContext ? extend( extend( {}, parentContext ), context ) : context||{}),
+ // If no jQuery, extend does not support chained copies - so limit to two parameters
+ parent: parentView
+ };
+}
+extend( $, {
+ views: viewsNs = {
+ templates: {},
+ tags: {
+ "if": function() {
+ var ifTag = this,
+ view = ifTag._view;
+ view.onElse = function( presenter, args ) {
+ var i = 0,
+ l = args.length;
+ while ( l && !args[ i++ ]) {
+ // Only render content if args.length === 0 (i.e. this is an else with no condition) or if a condition argument is truey
+ if ( i === l ) {
+ return "";
+ }
+ }
+ view.onElse = undefined; // If condition satisfied, so won't run 'else'.
+ return render( view.data, presenter.tmpl, view.ctx, view);
+ };
+ return view.onElse( this, arguments );
+ },
+ "else": function() {
+ var view = this._view;
+ return view.onElse ? view.onElse( this, arguments ) : "";
+ },
+ each: function() {
+ var i,
+ self = this,
+ result = "",
+ args = arguments,
+ l = args.length,
+ content = self.tmpl,
+ view = self._view;
+ for ( i = 0; i < l; i++ ) {
+ result += args[ i ] ? render( args[ i ], content, self.ctx || view.ctx, view, self._path, self._ctor ) : "";
+ }
+ return l ? result
+ // If no data parameter, use the current $data from view, and render once
+ : result + render( view.data, content, view.ctx, view, self._path, self.tag );
+ },
+ "=": function( value ) {
+ return value;
+ },
+ "*": function( value ) {
+ return value;
+ }
+ },
+ helpers: {
+ not: function( value ) {
+ return !value;
+ }
+ },
+ allowCode: FALSE,
+ debugMode: TRUE,
+ err: function( e ) {
+ return viewsNs.debugMode ? ("<br/><b>Error:</b> <em> " + (e.message || e) + ". </em>"): '""';
+ },
+
+//===============
+// setDelimiters
+//===============
+
+ setDelimiters: function( openTag, closeTag ) {
+ // Set or modify the delimiter characters for tags: "{{" and "}}"
+ var firstCloseChar = closeTag.charAt( 0 ),
+ secondCloseChar = closeTag.charAt( 1 );
+ openTag = "\\" + openTag.charAt( 0 ) + "\\" + openTag.charAt( 1 );
+ closeTag = "\\" + firstCloseChar + "\\" + secondCloseChar;
+
+ // Build regex with new delimiters
+ // {{
+ rTag = openTag
+ // # tag (followed by space,! or }) or equals or code
+ + "(?:(?:(\\#)?(\\w+(?=[!\\s\\" + firstCloseChar + "]))" + "|(?:(\\=)|(\\*)))"
+ // params
+ + "\\s*((?:[^\\" + firstCloseChar + "]|\\" + firstCloseChar + "(?!\\" + secondCloseChar + "))*?)"
+ // encoding
+ + "(!(\\w*))?"
+ // closeBlock
+ + "|(?:\\/([\\w\\$\\.\\[\\]]+)))"
+ // }}
+ + closeTag;
+
+ // Default rTag: # tag equals code params encoding closeBlock
+ // /\{\{(?:(?:(\#)?(\w+(?=[\s\}!]))|(?:(\=)|(\*)))((?:[^\}]|\}(?!\}))*?)(!(\w*))?|(?:\/([\w\$\.\[\]]+)))\}\}/g;
+
+ rTag = new RegExp( rTag, "g" );
+ },
+
+
+//===============
+// registerTags
+//===============
+
+ // Register declarative tag.
+ registerTags: registerTags = function( name, tagFn ) {
+ var key;
+ if ( typeof name === "object" ) {
+ for ( key in name ) {
+ registerTags( key, name[ key ]);
+ }
+ } else {
+ // Simple single property case.
+ viewsNs.tags[ name ] = tagFn;
+ }
+ return this;
+ },
+
+//===============
+// registerHelpers
+//===============
+
+ // Register helper function for use in markup.
+ registerHelpers: registerHelpers = function( name, helper ) {
+ if ( typeof name === "object" ) {
+ // Object representation where property name is path and property value is value.
+ // TODO: We've discussed an "objectchange" event to capture all N property updates here. See TODO note above about propertyChanges.
+ var key;
+ for ( key in name ) {
+ registerHelpers( key, name[ key ]);
+ }
+ } else {
+ // Simple single property case.
+ viewsNs.helpers[ name ] = helper;
+ }
+ return this;
+ },
+
+//===============
+// tmpl.encode
+//===============
+
+ encode: function( encoding, text ) {
+ return text
+ ? ( tmplEncode[ encoding || "html" ] || tmplEncode.html)( text ) // HTML encoding is the default
+ : "";
+ },
+
+ encoders: tmplEncode = {
+ "none": function( text ) {
+ return text;
+ },
+ "html": function( text ) {
+ // HTML encoding helper: Replace < > & and ' and " by corresponding entities.
+ // Implementation, from Mike Samuel <msamuel@google.com>
+ return String( text ).replace( htmlSpecialChar, replacerForHtml );
+ }
+ //TODO add URL encoding, and perhaps other encoding helpers...
+ },
+
+//===============
+// renderTag
+//===============
+
+ renderTag: function( tag, view, encode, content, tagProperties ) {
+ // This is a tag call, with arguments: "tag", view, encode, content, presenter [, params...]
+ var ret, ctx, name,
+ args = arguments,
+ presenters = viewsNs.presenters;
+ hash = tagProperties._hash,
+ tagFn = viewsNs.tags[ tag ];
+
+ if ( !tagFn ) {
+ return "";
+ }
+
+ content = content && view.tmpl.nested[ content - 1 ];
+ tagProperties.tmpl = tagProperties.tmpl || content || undefined;
+ // Set the tmpl property to the content of the block tag, unless set as an override property on the tag
+
+ if ( presenters && presenters[ tag ]) {
+ ctx = extend( extend( {}, tagProperties.ctx ), tagProperties );
+ delete ctx.ctx;
+ delete ctx._path;
+ delete ctx.tmpl;
+ tagProperties.ctx = ctx;
+ tagProperties._ctor = tag + (hash ? "=" + hash.slice( 0, -1 ) : "");
+
+ tagProperties = extend( extend( {}, tagFn ), tagProperties );
+ tagFn = viewsNs.tags.each; // Use each to render the layout template against the data
+ }
+
+ tagProperties._encode = encode;
+ tagProperties._view = view;
+ ret = tagFn.apply( tagProperties, args.length > 5 ? slice.call( args, 5 ) : [view.data] );
+ return ret || (ret === undefined ? "" : ret.toString()); // (If ret is the value 0 or false or null, will render to string)
+ }
+ },
+
+//===============
+// render
+//===============
+
+ render: render = function( data, tmpl, context, parentView, path, tagName ) {
+ // Render template against data as a tree of subviews (nested template), or as a string (top-level template).
+ // tagName parameter for internal use only. Used for rendering templates registered as tags (which may have associated presenter objects)
+ var i, l, dataItem, arrayView, content, result = "";
+
+ if ( arguments.length === 2 && data.jsViews ) {
+ parentView = data;
+ context = parentView.ctx;
+ data = parentView.data;
+ }
+ tmpl = $.template( tmpl );
+ if ( !tmpl ) {
+ return ""; // Could throw...
+ }
+
+ if ( $.isArray( data )) {
+ // Create a view item for the array, whose child views correspond to each data item.
+ arrayView = new View( context, path, parentView, data);
+ l = data.length;
+ for ( i = 0, l = data.length; i < l; i++ ) {
+ dataItem = data[ i ];
+ content = dataItem ? tmpl( dataItem, new View( context, path, arrayView, dataItem, tmpl, this )) : "";
+ result += viewsNs.activeViews ? "<!--item-->" + content + "<!--/item-->" : content;
+ }
+ } else {
+ result += tmpl( data, new View( context, path, parentView, data, tmpl ));
+ }
+
+ return viewsNs.activeViews
+ // If in activeView mode, include annotations
+ ? "<!--tmpl(" + (path || "") + ") " + (tagName ? "tag=" + tagName : tmpl._name) + "-->" + result + "<!--/tmpl-->"
+ // else return just the string result
+ : result;
+ },
+
+//===============
+// template
+//===============
+
+ template: function( name, tmpl ) {
+ // Set:
+ // Use $.template( name, tmpl ) to cache a named template,
+ // where tmpl is a template string, a script element or a jQuery instance wrapping a script element, etc.
+ // Use $( "selector" ).template( name ) to provide access by name to a script block template declaration.
+
+ // Get:
+ // Use $.template( name ) to access a cached template.
+ // Also $( selectorToScriptBlock ).template(), or $.template( null, templateString )
+ // will return the compiled template, without adding a name reference.
+ // If templateString is not a selector, $.template( templateString ) is equivalent
+ // to $.template( null, templateString ). To ensure a string is treated as a template,
+ // include an HTML element, an HTML comment, or a template comment tag.
+
+ if (tmpl) {
+ // Compile template and associate with name
+ if ( "" + tmpl === tmpl ) { // type string
+ // This is an HTML string being passed directly in.
+ tmpl = compile( tmpl );
+ } else if ( jQuery && tmpl instanceof $ ) {
+ tmpl = tmpl[0];
+ }
+ if ( tmpl ) {
+ if ( jQuery && tmpl.nodeType ) {
+ // If this is a template block, use cached copy, or generate tmpl function and cache.
+ tmpl = $.data( tmpl, "tmpl" ) || $.data( tmpl, "tmpl", compile( tmpl.innerHTML ));
+ }
+ viewsNs.templates[ tmpl._name = tmpl._name || name || "_" + autoName++ ] = tmpl;
+ }
+ return tmpl;
+ }
+ // Return named compiled template
+ return name
+ ? "" + name !== name // not type string
+ ? (name._name
+ ? name // already compiled
+ : $.template( null, name ))
+ : viewsNs.templates[ name ] ||
+ // If not in map, treat as a selector. (If integrated with core, use quickExpr.exec)
+ $.template( null, htmlExpr.test( name ) ? name : try$( name ))
+ : null;
+ }
+});
+
+viewsNs.setDelimiters( "{{", "}}" );
+
+//=================
+// compile template
+//=================
+
+// Generate a reusable function that will serve to render a template against data
+// (Compile AST then build template function)
+
+function parsePath( all, comp, object, viewDataCtx, viewProperty, path, string, quot ) {
+ return object
+ ? ((viewDataCtx
+ ? viewProperty
+ ? ("$view." + viewProperty)
+ : object
+ :("$data." + object)
+ ) + ( path || "" ))
+ : string || (comp || "");
+}
+
+function compile( markup ) {
+ var newNode,
+ loc = 0,
+ stack = [],
+ topNode = [],
+ content = topNode,
+ current = [,,topNode];
+
+ function pushPreceedingContent( shift ) {
+ shift -= loc;
+ if ( shift ) {
+ content.push( markup.substr( loc, shift ).replace( rNewLine,"\\n"));
+ }
+ }
+
+ function parseTag( all, isBlock, tagName, equals, code, params, useEncode, encode, closeBlock, index ) {
+ // rTag : # tagName equals code params encode closeBlock
+ // /\{\{(?:(?:(\#)?(\w+(?=[\s\}!]))|(?:(\=)|(\*)))((?:[^\}]|\}(?!\}))*?)(!(\w*))?|(?:\/([\w\$\.\[\]]+)))\}\}/g;
+
+ // Build abstract syntax tree: [ tagName, params, content, encode ]
+ var named,
+ hash = "",
+ parenDepth = 0,
+ quoted = FALSE, // boolean for string content in double qoutes
+ aposed = FALSE; // or in single qoutes
+
+ function parseParams( all, path, paren, comp, eq, comma, apos, quot, rightParen, space, index ) {
+ // path paren eq comma apos quot rtPrn space
+ // /(\$?[\w\.\[\]]+)(?:(\()|(===)|(\=))?|(\,\s*)|\\?(\')|\\?(\")|(\))|(\s+)/g
+
+ return aposed
+ // within single-quoted string
+ ? ( aposed = !apos, (aposed ? all : '"'))
+ : quoted
+ // within double-quoted string
+ ? ( quoted = !quot, (quoted ? all : '"'))
+ : comp
+ // comparison
+ ? ( path.replace( rPath, parsePath ) + comp)
+ : eq
+ // named param
+ ? parenDepth ? "" :( named = TRUE, '\b' + path + ':')
+ : paren
+ // function
+ ? (parenDepth++, path.replace( rPath, parsePath ) + '(')
+ : rightParen
+ // function
+ ? (parenDepth--, ")")
+ : path
+ // path
+ ? path.replace( rPath, parsePath )
+ : comma
+ ? ","
+ : space
+ ? (parenDepth
+ ? ""
+ : named
+ ? ( named = FALSE, "\b")
+ : ","
+ )
+ : (aposed = apos, quoted = quot, '"');
+ }
+
+ tagName = tagName || equals;
+ pushPreceedingContent( index );
+ if ( code ) {
+ if ( viewsNs.allowCode ) {
+ content.push([ "*", params.replace( rUnescapeQuotes, "$1" )]);
+ }
+ } else if ( tagName ) {
+ if ( tagName === "else" ) {
+ current = stack.pop();
+ content = current[ 2 ];
+ isBlock = TRUE;
+ }
+ params = (params
+ ? (params + " ")
+ .replace( rParams, parseParams )
+ .replace( rBuildHash, function( all, keyValue, index ) {
+ hash += keyValue + ",";
+ return "";
+ })
+ : "");
+ params = params.slice( 0, -1 );
+ newNode = [
+ tagName,
+ useEncode ? encode || "none" : "",
+ isBlock && [],
+ "{" + hash + "_hash:'" + hash + "',_path:'" + params + "'}",
+ params
+ ];
+
+ if ( isBlock ) {
+ stack.push( current );
+ current = newNode;
+ }
+ content.push( newNode );
+ } else if ( closeBlock ) {
+ current = stack.pop();
+ }
+ loc = index + all.length; // location marker - parsed up to here
+ if ( !current ) {
+ throw "Expected block tag";
+ }
+ content = current[ 2 ];
+ }
+ markup = markup.replace( rEscapeQuotes, "\\$1" );
+ markup.replace( rTag, parseTag );
+ pushPreceedingContent( markup.length );
+ return buildTmplFunction( topNode );
+}
+
+// Build javascript compiled template function, from AST
+function buildTmplFunction( nodes ) {
+ var ret, node, i,
+ nested = [],
+ l = nodes.length,
+ code = "try{var views="
+ + (jQuery ? "jQuery" : "JsViews")
+ + '.views,tag=views.renderTag,enc=views.encode,html=views.encoders.html,$ctx=$view && $view.ctx,result=""+\n\n';
+
+ for ( i = 0; i < l; i++ ) {
+ node = nodes[ i ];
+ if ( node[ 0 ] === "*" ) {
+ code = code.slice( 0, i ? -1 : -3 ) + ";" + node[ 1 ] + ( i + 1 < l ? "result+=" : "" );
+ } else if ( "" + node === node ) { // type string
+ code += '"' + node + '"+';
+ } else {
+ var tag = node[ 0 ],
+ encode = node[ 1 ],
+ content = node[ 2 ],
+ obj = node[ 3 ],
+ params = node[ 4 ],
+ paramsOrEmptyString = params + '||"")+';
+
+ if( content ) {
+ nested.push( buildTmplFunction( content ));
+ }
+ code += tag === "="
+ ? (!encode || encode === "html"
+ ? "html(" + paramsOrEmptyString
+ : encode === "none"
+ ? ("(" + paramsOrEmptyString)
+ : ('enc("' + encode + '",' + paramsOrEmptyString)
+ )
+ : 'tag("' + tag + '",$view,"' + ( encode || "" ) + '",'
+ + (content ? nested.length : '""') // For block tags, pass in the key (nested.length) to the nested content template
+ + "," + obj + (params ? "," : "") + params + ")+";
+ }
+ }
+ ret = new Function( "$data, $view", code.slice( 0, -1) + ";return result;\n\n}catch(e){return views.err(e);}" );
+ ret.nested = nested;
+ return ret;
+}
+
+//========================== Private helper functions, used by code above ==========================
+
+function replacerForHtml( ch ) {
+ // Original code from Mike Samuel <msamuel@google.com>
+ return escapeMapForHtml[ ch ]
+ // Intentional assignment that caches the result of encoding ch.
+ || ( escapeMapForHtml[ ch ] = "&#" + ch.charCodeAt( 0 ) + ";" );
+}
+
+function try$( selector ) {
+ // If selector is valid, return jQuery object, otherwise return (invalid) selector string
+ try {
+ return $( selector );
+ } catch( e) {}
+ return selector;
+}
+})( window );
+++ /dev/null
-# The files to include when compiling the JS files
-JSFILES = 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.navigation.pushstate.js \
- js/jquery.mobile.transition.js \
- js/jquery.mobile.degradeInputs.js \
- js/jquery.mobile.dialog.js \
- js/jquery.mobile.page.sections.js \
- js/jquery.mobile.collapsible.js \
- js/jquery.mobile.fieldContain.js \
- js/jquery.mobile.grid.js \
- js/jquery.mobile.navbar.js \
- js/jquery.mobile.listview.js \
- js/jquery.mobile.listview.filter.js \
- js/jquery.mobile.nojs.js \
- js/jquery.mobile.forms.checkboxradio.js \
- js/jquery.mobile.forms.button.js \
- js/jquery.mobile.forms.slider.js \
- js/jquery.mobile.forms.textinput.js \
- js/jquery.mobile.forms.select.custom.js \
- js/jquery.mobile.forms.select.js \
- js/jquery.mobile.buttonMarkup.js \
- js/jquery.mobile.controlGroup.js \
- js/jquery.mobile.links.js \
- js/jquery.mobile.fixHeaderFooter.js \
- js/jquery.mobile.fixHeaderFooter.native.js \
- js/jquery.mobile.init.js
-
-# The files to include when compiling the CSS files
-CSSFILES = css/structure/jquery.mobile.core.css \
- css/structure/jquery.mobile.transitions.css \
- css/structure/jquery.mobile.grids.css \
- css/structure/jquery.mobile.headerfooter.css \
- css/structure/jquery.mobile.navbar.css \
- css/structure/jquery.mobile.button.css \
- css/structure/jquery.mobile.collapsible.css \
- css/structure/jquery.mobile.controlgroup.css \
- css/structure/jquery.mobile.dialog.css \
- css/structure/jquery.mobile.forms.checkboxradio.css \
- css/structure/jquery.mobile.forms.fieldcontain.css \
- css/structure/jquery.mobile.forms.select.css \
- css/structure/jquery.mobile.forms.textinput.css \
- css/structure/jquery.mobile.listview.css \
- css/structure/jquery.mobile.forms.slider.css
-CSSTHEMEFILES = css/themes/${THEME}/jquery.mobile.theme.css
-
-
-
-
-# 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${VER_OFFICIAL} jquerymobile.com | jquery.org/license */"
-VER_OFFICIAL = $(shell cat version.txt)
-
-# The output folder for the finished files
-OUTPUT = compiled
-
-# 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}
-
-# The CSS theme being used
-THEME = default
-
-
-
-
-
-# Build Targets
-
-# When no build target is specified, all gets ran
-all: init css js zip notify
-
-
-# Build and minify the CSS files
-css: init
- # Build the CSS file with the theme included
- @@cat js/jquery.mobile.intro.js | ${VER} > ${OUTPUT}/${NAME}.css
- @@cat ${CSSTHEMEFILES} ${CSSFILES} >> ${OUTPUT}/${NAME}.css
- # ..... and then minify it
- @@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.css
- @@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${NAME}.css >> ${OUTPUT}/${NAME}.min.css
- # Build the CSS Structure-only file
- @@cat js/jquery.mobile.intro.js | ${VER} > ${OUTPUT}/${STRUCTURE}.css
- @@cat ${CSSFILES} >> ${OUTPUT}/${STRUCTURE}.css
- # ..... and then minify it
- @@echo ${VER_MIN} > ${OUTPUT}/${STRUCTURE}.min.css
- @@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${STRUCTURE}.css >> ${OUTPUT}/${STRUCTURE}.min.css
- # ..... and then copy in the images
- @@cp -R css/themes/${THEME}/images ${OUTPUT}/
- # Css portion is complete.
- # -------------------------------------------------
-
-
-docs: init css js
- # Create the Demos/Docs/Tests/Tools
- @@mkdir -p tmp/${NAME}
- @@cp -r index.html docs experiments external js/jquery.js tests tmp/${NAME}/
- @@cp ${OUTPUT}/${NAME}.min.css ${OUTPUT}/${NAME}.min.js tmp/${NAME}/
- # ... Update the JavaScript and CSS paths
- @@find tmp/${NAME} -type f \
- \( -name '*.html' -o -name '*.php' \) \
- -exec perl -pi -e \
- 's|js/"|${NAME}.min.js"|g;s|css/themes/default/|${NAME}.min.css|g;s|js/jquery.js"|jquery.js"|g' {} \;
- # ... Move and zip up the the whole folder
- @@zip -rq ${OUTPUT}/${NAME}.docs.zip tmp/${NAME}
- @@mv tmp/${NAME} ${OUTPUT}/demos
- # Finish by removing the temporary files
- @@rm -rf tmp
- # -------------------------------------------------
-
-
-# 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}
- # -------------------------------------------------
-
-
-# Build and minify the JS files
-js: init
- # Build the JavaScript file
- @@cat js/jquery.mobile.intro.js | ${VER} > ${OUTPUT}/${NAME}.js
- @@cat ${JSFILES} >> ${OUTPUT}/${NAME}.js
- # ..... and then minify it
- @@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.js
- @@java -jar build/google-compiler-20111003.jar --js ${OUTPUT}/${NAME}.js --warning_level QUIET >> ${OUTPUT}/${NAME}.min.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}
- @@zip -rq ${OUTPUT}/${NAME}.zip tmp/${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 js css zip
- # Time to put these on the CDN
- @@scp -qr ${OUTPUT}/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/latest/
- # Do some cleanup to wrap it up
- @@rm -rf ${OUTPUT}
- # -------------------------------------------------
-
-# Build the nightly backups. This is done on a server cronjob
-nightlies: init js css zip docs
- # 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 js css 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
- @@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.6.4.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}
- # -------------------------------------------------
-
-
+++ /dev/null
-jQuery Mobile Framework
-=======================
-[Official Site: http://jquerymobile.com](http://jquerymobile.com)
-
-[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.
-
-
-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.
-
-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.
-
-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.
-
-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 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)
-
-You need the following Apache modules loaded:
-
-* Rewrite (mod\_rewrite.so)
-* Expire (mod\_expires.so)
-* Header (mod\_headers.so)
-
-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.
+++ /dev/null
-<?php
-$files = array_merge($files, array(
- '../../../LICENSE-INFO.txt',
- '../../structure/jquery.mobile.core.css',
- '../../structure/jquery.mobile.transitions.css',
- '../../structure/jquery.mobile.grids.css',
- '../../structure/jquery.mobile.headerfooter.css',
- '../../structure/jquery.mobile.navbar.css',
- '../../structure/jquery.mobile.button.css',
- '../../structure/jquery.mobile.collapsible.css',
- '../../structure/jquery.mobile.controlgroup.css',
- '../../structure/jquery.mobile.dialog.css',
- '../../structure/jquery.mobile.forms.checkboxradio.css',
- '../../structure/jquery.mobile.forms.fieldcontain.css',
- '../../structure/jquery.mobile.forms.select.css',
- '../../structure/jquery.mobile.forms.textinput.css',
- '../../structure/jquery.mobile.listview.css',
- '../../structure/jquery.mobile.forms.slider.css'
-));
-
-require_once($base.'/../../../combine.php');
-
+++ /dev/null
-.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; }
-.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; }
-.ui-btn-inline { display: inline-block; }
-.ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
-.ui-btn input, .ui-btn button { z-index: 2; }
-.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: .4em 8px .5em; }
-.ui-btn-icon-notext { width: 24px; height: 24px; }
-.ui-btn-icon-notext .ui-btn-inner { padding: 2px 1px 2px 3px; }
-.ui-btn-text { position: relative; z-index: 1; }
-.ui-btn-icon-notext .ui-btn-text { position: absolute; left: -9999px; }
-.ui-btn-icon-left .ui-btn-inner { padding-left: 33px; }
-.ui-header .ui-btn-icon-left .ui-btn-inner,
-.ui-footer .ui-btn-icon-left .ui-btn-inner,
-.ui-bar .ui-btn-icon-left .ui-btn-inner { padding-left: 27px; }
-.ui-btn-icon-right .ui-btn-inner { padding-right: 33px; }
-.ui-header .ui-btn-icon-right .ui-btn-inner,
-.ui-footer .ui-btn-icon-right .ui-btn-inner,
-.ui-bar .ui-btn-icon-right .ui-btn-inner { padding-right: 27px; }
-.ui-btn-icon-top .ui-btn-inner { padding-top: 33px; }
-.ui-header .ui-btn-icon-top .ui-btn-inner,
-.ui-footer .ui-btn-icon-top .ui-btn-inner,
-.ui-bar .ui-btn-icon-top .ui-btn-inner { padding-top: 27px; }
-.ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 33px; }
-.ui-header .ui-btn-icon-bottom .ui-btn-inner,
-.ui-footer .ui-btn-icon-bottom .ui-btn-inner,
-.ui-bar .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 27px; }
-
-/*btn icon positioning*/
-.ui-btn-icon-notext .ui-icon { display: block; z-index: 0;}
-.ui-btn-icon-left .ui-icon, .ui-btn-icon-right .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
-.ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%; margin-left: -9px; }
-.ui-btn-icon-left .ui-icon { left: 10px; }
-.ui-btn-icon-right .ui-icon { right: 10px; }
-.ui-btn-icon-top .ui-icon { top: 10px; }
-.ui-btn-icon-bottom .ui-icon { bottom: 10px; }
-.ui-header .ui-btn-icon-left .ui-icon,
-.ui-footer .ui-btn-icon-left .ui-icon,
-.ui-bar .ui-btn-icon-left .ui-icon { left: 4px; }
-.ui-header .ui-btn-icon-right .ui-icon,
-.ui-footer .ui-btn-icon-right .ui-icon,
-.ui-bar .ui-btn-icon-right .ui-icon { right: 4px; }
-.ui-header .ui-btn-icon-top .ui-icon,
-.ui-footer .ui-btn-icon-top .ui-icon,
-.ui-bar .ui-btn-icon-top .ui-icon { top: 4px; }
-.ui-header .ui-btn-icon-bottom .ui-icon,
-.ui-footer .ui-btn-icon-bottom .ui-icon,
-.ui-bar .ui-btn-icon-bottom .ui-icon { bottom: 4px; }
-
-/*hiding native button,inputs */
-.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: .1; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=.0001); font-size: 1px; border: none; line-height: 999px; }
+++ /dev/null
-.ui-collapsible { margin: .5em 0; }
-.ui-collapsible-heading { font-size: 16px; display: block; margin: 0 -8px; padding: 0; border-width: 0 0 1px 0; position: relative; }
-.ui-collapsible-heading a { text-align: left; margin: 0; }
-.ui-collapsible-heading a .ui-btn-inner { padding-left: 40px; }
-.ui-collapsible-heading a span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
-.ui-collapsible-heading a span.ui-btn .ui-btn-inner { padding: 10px 0; }
-.ui-collapsible-heading a span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
-.ui-collapsible-heading-status { position: absolute; top: -9999px; left:0px; }
-.ui-collapsible-content {
- display: block;
- margin: 0 -8px;
- padding: 10px 16px;
- border-top: none; /* Overrides ui-btn-up-* */
- background-image: none; /* Overrides ui-btn-up-* */
- font-weight: normal; /* Overrides ui-btn-up-* */
-}
-.ui-collapsible-content-collapsed { display: none; }
-
-.ui-collapsible-set { margin: .5em 0; }
-.ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
+++ /dev/null
-.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; }
-.ui-bar .ui-controlgroup { margin: 0 .3em; }
-.ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; }
-.ui-controlgroup-controls { display: block; width: 100%;}
-.ui-controlgroup li { list-style: none; }
-.ui-controlgroup-vertical .ui-btn,
-.ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; }
-.ui-controlgroup-controls label.ui-select { position: absolute; left: -9999px; }
-
-.ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; }
-.ui-controlgroup-horizontal { padding: 0; }
-.ui-controlgroup-horizontal .ui-btn, .ui-controlgroup-horizontal .ui-select { display: inline-block; margin: 0 -5px 0 0; }
-.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { float: left; margin: 0 -1px 0 0; }
-.ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn,
-.ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child { margin-right: 0; }
-.ui-controlgroup-horizontal .ui-controlgroup-last { margin-right: 0; }
-.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }
-/* conflicts with listview..
-.ui-controlgroup .ui-btn-icon-notext { width: 30px; height: 30px; text-indent: -9999px; }
-.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { padding: 5px 6px 5px 5px; }
-*/
-
-@media all and (min-width: 450px){
- .ui-field-contain .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
- .ui-field-contain .ui-controlgroup-controls { width: 60%; display: inline-block; }
- .ui-field-contain .ui-controlgroup .ui-select { width: 100%; }
- .ui-field-contain .ui-controlgroup-horizontal .ui-select { width: auto; }
-}
\ No newline at end of file
+++ /dev/null
-/* some unsets - more probably needed */
-.ui-mobile, .ui-mobile body { height: 100%; }
-.ui-mobile fieldset, .ui-page { padding: 0; margin: 0; }
-.ui-mobile a img, .ui-mobile fieldset { border: 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; }
-}
-
-/* native overflow scrolling */
-.ui-page.ui-mobile-touch-overflow,
-.ui-mobile-touch-overflow.ui-native-fixed .ui-content {
- overflow: auto;
- height: 100%;
- -webkit-overflow-scrolling: touch;
- -moz-overflow-scrolling: touch;
- -o-overflow-scrolling: touch;
- -ms-overflow-scrolling: touch;
- overflow-scrolling: touch;
-}
-.ui-page.ui-mobile-touch-overflow,
-.ui-page.ui-mobile-touch-overflow * {
- /* some level of transform keeps elements from blinking out of visibility on iOS */
- -webkit-transform: rotateY(0);
-}
-.ui-page.ui-mobile-pre-transition {
- display: block;
-}
-
-/* loading screen */
-.ui-loading .ui-mobile-viewport { overflow: hidden !important; }
-.ui-loading .ui-loader { display: block; }
-.ui-loading .ui-page { overflow: hidden; }
-.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; }
-.ui-loader h1 { font-size: 15px; text-align: center; }
-.ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 0 auto; width: 35px; height: 35px; background-color: transparent; }
-
-/*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 { display: block; }
-.ui-page .ui-header, .ui-page .ui-footer { position: relative; }
-.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 90px .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; }
-.ui-page-fullscreen .ui-content { padding:0; }
-
-/* native fixed headers and footers */
-.ui-mobile-touch-overflow.ui-page.ui-native-fixed,
-.ui-mobile-touch-overflow.ui-page.ui-native-fullscreen {
- overflow: visible;
-}
-.ui-mobile-touch-overflow.ui-native-fixed .ui-header,
-.ui-mobile-touch-overflow.ui-native-fixed .ui-footer {
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- z-index: 200;
-}
-.ui-mobile-touch-overflow.ui-page.ui-native-fixed .ui-footer {
- top: auto;
- bottom: 0;
-}
-.ui-mobile-touch-overflow.ui-native-fixed .ui-content {
- padding-top: 2.5em;
- padding-bottom: 3em;
- top: 0;
- bottom: 0;
- height: auto;
- position: absolute;
-}
-.ui-mobile-touch-overflow.ui-native-fullscreen .ui-content {
- padding-top: 0;
- padding-bottom: 0;
-}
-.ui-mobile-touch-overflow.ui-native-fullscreen .ui-header,
-.ui-mobile-touch-overflow.ui-native-fullscreen .ui-footer {
- opacity: .9;
-}
-.ui-native-bars-hidden {
- display: none;
-}
-
-/* icons sizing */
-.ui-icon { width: 18px; height: 18px; }
-
-/* fullscreen class on ui-content div */
-.ui-fullscreen { }
-.ui-fullscreen 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); }
+++ /dev/null
-.ui-dialog { min-height: 480px; }
-.ui-dialog .ui-header,
-.ui-dialog .ui-content,
-.ui-dialog .ui-footer {
- max-width: 500px;
- margin: 10% auto 15px auto;
- width: 85%;
- position: relative;
-}
-.ui-dialog .ui-header,
-.ui-dialog .ui-footer {
- padding: 0 15px;
- z-index: 10;
-}
-.ui-dialog .ui-content {
- padding: 15px;
-}
-.ui-dialog .ui-content,
-.ui-dialog .ui-footer {
- margin-top: -15px;
-}
+++ /dev/null
-.ui-checkbox, .ui-radio { position:relative; margin: .2em 0 .5em; z-index: 1; }
-.ui-checkbox .ui-btn, .ui-radio .ui-btn { margin: 0; text-align: left; z-index: 2; }
-.ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }
-.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 45px; }
-.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
-.ui-checkbox .ui-icon, .ui-radio .ui-icon { top: 1.1em; }
-.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {left: 15px; }
-.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon {right: 15px; }
-/* input, label positioning */
-.ui-checkbox input,.ui-radio input { position:absolute; left:20px; top:50%; width: 10px; height: 10px; margin:-5px 0 0 0; outline: 0 !important; z-index: 1; }
\ No newline at end of file
+++ /dev/null
-.ui-field-contain { padding: 1.5em 0; margin: 0; border-bottom-width: 1px; overflow: visible; }
-.ui-field-contain:first-child { border-top-width: 0; }
-@media all and (min-width: 450px){
- .ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
-}
\ No newline at end of file
+++ /dev/null
-.ui-select { display: block; position: relative; }
-.ui-select select { position: absolute; left: -9999px; top: -9999px; }
-.ui-select .ui-btn { overflow: hidden; }
-
-
-.ui-select .ui-btn { opacity: 1; }
-
-/* Fixes #2588 — When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select—including “inherit”—without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
-.ui-select .ui-btn select { cursor: pointer; -webkit-appearance: button; left: 0; top:0; width: 100%; min-height: 1.5em; min-height: 100%; height: 3em; max-height: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); z-index: 2; }
-
-.ui-select .ui-disabled { opacity: .3; }
-
-@-moz-document url-prefix() {.ui-select .ui-btn select { opacity: 0.0001; }}
-.ui-select .ui-btn select.ui-select-nativeonly { opacity: 1; text-indent: 0; }
-
-.ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
-.ui-select .ui-btn-icon-right .ui-icon { right: 15px; }
-
-/* labels */
-label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
-
-/*listbox*/
-.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: block; min-height: 1em; overflow: hidden; }
-.ui-select .ui-btn-text { text-overflow: ellipsis; }
-
-.ui-selectmenu { position: absolute; padding: 0; z-index: 1100 !important; width: 80%; max-width: 350px; padding: 6px; }
-.ui-selectmenu .ui-listview { margin: 0; }
-.ui-selectmenu .ui-btn.ui-li-divider { cursor: default; }
-.ui-selectmenu-hidden { top: -9999px; left: -9999px; }
-.ui-selectmenu-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; }
-.ui-screen-hidden, .ui-selectmenu-list .ui-li .ui-icon { display: none; }
-.ui-selectmenu-list .ui-li .ui-icon { display: block; }
-.ui-li.ui-selectmenu-placeholder { display: none; }
-.ui-selectmenu .ui-header .ui-title { margin: 0.6em 46px 0.8em; }
-
-@media all and (min-width: 450px){
- .ui-field-contain label.ui-select { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
- .ui-field-contain .ui-select { width: 60%; display: inline-block; }
-}
-
-/* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button. this shim's content in there */
-.ui-selectmenu .ui-header h1:after { content: '.'; visibility: hidden; }
\ No newline at end of file
+++ /dev/null
-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: 60%; }
-div.ui-slider-switch { width: 99.8%; }
-a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
-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%; }
-}
-
-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; }
-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: 20; width: 101%; height: 32px; margin-top: -18px; margin-left: -101%; }
-span.ui-slider-label { width: 100%; position: absolute;height: 32px; font-size: 16px; text-align: center; line-height: 2; 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 }
+++ /dev/null
-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%; }
-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*/ }
-}
\ No newline at end of file
+++ /dev/null
-/* fixed page header & footer configuration */
-.ui-header, .ui-footer, .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { position: absolute; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; }
-.ui-header-fixed, .ui-footer-fixed {
- z-index: 1000;
- -webkit-transform: translateZ(0); /* Force header/footer rendering to go through the same rendering pipeline as native page scrolling. */
-}
-.ui-footer-duplicate, .ui-page-fullscreen .ui-fixed-inline { display: none; }
-.ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { opacity: .9; }
+++ /dev/null
-.ui-listview { margin: 0; counter-reset: listnumbering; }
-.ui-content .ui-listview { margin: -15px; }
-.ui-content .ui-listview-inset { margin: 1em 0; }
-.ui-listview, .ui-li { list-style:none; padding:0; }
-.ui-li, .ui-li.ui-field-contain { display: block; margin:0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
-.ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
-.ui-li-divider, .ui-li-static { padding: .5em 15px; font-size: 14px; font-weight: bold; }
-.ui-li-divider { counter-reset: listnumbering; }
-ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal;counter-increment: listnumbering; content: counter(listnumbering) ". "; }
-ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
-.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
-.ui-li:last-child, .ui-li.ui-field-contain:last-child { border-bottom-width: 1px; }
-.ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
-.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px .7em 15px; display: block; }
-.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 60px; padding-left: 100px; }
-.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; }
-.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count { padding-right: 45px; }
-.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 30px; }
-.ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 75px; }
-.ui-li-has-count .ui-btn-text { padding-right: 15px; }
-.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
-.ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
-.ui-li-thumb, .ui-listview .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }
-.ui-listview .ui-li-icon { max-height: 40px; max-width: 40px; left: 10px; top: .9em; }
-.ui-li-thumb, .ui-listview .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }
-
-.ui-li-aside { float: right; width: 50%; text-align: right; margin: .3em 0; }
-@media all and (min-width: 480px){
- .ui-li-aside { width: 45%; }
-}
-.ui-li-divider { cursor: default; }
-.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt { padding-right: 95px; }
-.ui-li-has-count .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 38px; }
-.ui-li-divider .ui-li-count, .ui-li-static .ui-li-count { right: 10px; }
-.ui-li-has-alt .ui-li-count { right: 55px; }
-.ui-li-link-alt { position: absolute; width: 40px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; margin: 0; padding: 0; z-index: 2; }
-.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -11px 0 0 0; border-bottom-width: 1px; z-index: -1;}
-.ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;}
-.ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; }
-
-.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0px; }
-
-.ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px }
-.ui-listview-filter .ui-input-search { margin: 5px; width: auto; display: block; }
-
-.ui-listview-filter-inset { margin: -15px -5px -15px -5px; background: transparent; }
-.ui-li.ui-screen-hidden{display:none;}
-/* Odd iPad positioning issue. */
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
- .ui-li .ui-btn-text { overflow: visible; }
-}
\ No newline at end of file
+++ /dev/null
-.ui-navbar { overflow: hidden; }
-.ui-navbar ul, .ui-navbar-expanded ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0;}
-.ui-navbar-collapsed ul { float: left; width: 75%; margin-right: -2px; }
-.ui-navbar-collapsed .ui-navbar-toggle { float: left; width: 25%; }
-.ui-navbar li.ui-navbar-truncate { position: absolute; left: -9999px; top: -9999px; }
-.ui-navbar li .ui-btn, .ui-navbar .ui-navbar-toggle .ui-btn { display: block; font-size: 12px; text-align: center; margin: 0; border-right-width: 0; }
-.ui-navbar li .ui-btn { margin-right: -1px; }
-.ui-navbar li .ui-btn:last-child { margin-right: 0; }
-.ui-header .ui-navbar li .ui-btn, .ui-header .ui-navbar .ui-navbar-toggle .ui-btn,
-.ui-footer .ui-navbar li .ui-btn, .ui-footer .ui-navbar .ui-navbar-toggle .ui-btn { border-top-width: 0; border-bottom-width: 0; }
-.ui-navbar .ui-btn-inner { padding-left: 2px; padding-right: 2px; }
-.ui-navbar-noicons li .ui-btn .ui-btn-inner, .ui-navbar-noicons .ui-navbar-toggle .ui-btn-inner { padding-top: .8em; padding-bottom: .9em; }
-/*expanded page styles*/
-.ui-navbar-expanded .ui-btn { margin: 0; font-size: 14px; }
-.ui-navbar-expanded .ui-btn-inner { padding-left: 5px; padding-right: 5px; }
-.ui-navbar-expanded .ui-btn-icon-top .ui-btn-inner { padding: 45px 5px 15px; text-align: center; }
-.ui-navbar-expanded .ui-btn-icon-top .ui-icon { top: 15px; }
-.ui-navbar-expanded .ui-btn-icon-bottom .ui-btn-inner { padding: 15px 5px 45px; text-align: center; }
-.ui-navbar-expanded .ui-btn-icon-bottom .ui-icon { bottom: 15px; }
-.ui-navbar-expanded li .ui-btn .ui-btn-inner { min-height: 2.5em; }
-.ui-navbar-expanded .ui-navbar-noicons .ui-btn .ui-btn-inner { padding-top: 1.8em; padding-bottom: 1.9em; }
+++ /dev/null
-.spin {
- -webkit-transform: rotate(360deg);
- -webkit-animation-name: spin;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
-}
-@-webkit-keyframes spin {
- from {-webkit-transform: rotate(0deg);}
- to {-webkit-transform: rotate(360deg);}
-}
-
-/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
-Built by David Kaneda and maintained by Jonathan Stark.
-*/
-.in, .out {
- -webkit-animation-timing-function: ease-in-out;
- -webkit-animation-duration: 350ms;
-}
-
-
-.slide.out {
- -webkit-transform: translateX(-100%);
- -webkit-animation-name: slideouttoleft;
-}
-
-.slide.in {
- -webkit-transform: translateX(0);
- -webkit-animation-name: slideinfromright;
-}
-
-.slide.out.reverse {
- -webkit-transform: translateX(100%);
- -webkit-animation-name: slideouttoright;
-}
-
-.slide.in.reverse {
- -webkit-transform: translateX(0);
- -webkit-animation-name: slideinfromleft;
-}
-
-.slideup.out {
- -webkit-animation-name: dontmove;
- z-index: 0;
-}
-
-.slideup.in {
- -webkit-transform: translateY(0);
- -webkit-animation-name: slideinfrombottom;
- z-index: 10;
-}
-
-.slideup.in.reverse {
- z-index: 0;
- -webkit-animation-name: dontmove;
-}
-
-.slideup.out.reverse {
- -webkit-transform: translateY(100%);
- z-index: 10;
- -webkit-animation-name: slideouttobottom;
-}
-
-.slidedown.out {
- -webkit-animation-name: dontmove;
- z-index: 0;
-}
-
-.slidedown.in {
- -webkit-transform: translateY(0);
- -webkit-animation-name: slideinfromtop;
- z-index: 10;
-}
-
-.slidedown.in.reverse {
- z-index: 0;
- -webkit-animation-name: dontmove;
-}
-
-.slidedown.out.reverse {
- -webkit-transform: translateY(-100%);
- z-index: 10;
- -webkit-animation-name: slideouttotop;
-}
-
-@-webkit-keyframes slideinfromright {
- from { -webkit-transform: translateX(100%); }
- to { -webkit-transform: translateX(0); }
-}
-
-@-webkit-keyframes slideinfromleft {
- from { -webkit-transform: translateX(-100%); }
- to { -webkit-transform: translateX(0); }
-}
-
-@-webkit-keyframes slideouttoleft {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(-100%); }
-}
-
-@-webkit-keyframes slideouttoright {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(100%); }
-}
-
-@-webkit-keyframes slideinfromtop {
- from { -webkit-transform: translateY(-100%); }
- to { -webkit-transform: translateY(0); }
-}
-
-@-webkit-keyframes slideinfrombottom {
- from { -webkit-transform: translateY(100%); }
- to { -webkit-transform: translateY(0); }
-}
-
-@-webkit-keyframes slideouttobottom {
- from { -webkit-transform: translateY(0); }
- to { -webkit-transform: translateY(100%); }
-}
-
-@-webkit-keyframes slideouttotop {
- from { -webkit-transform: translateY(0); }
- to { -webkit-transform: translateY(-100%); }
-}
-@-webkit-keyframes fadein {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-
-@-webkit-keyframes fadeout {
- from { opacity: 1; }
- to { opacity: 0; }
-}
-
-.fade.out {
- z-index: 0;
- -webkit-animation-name: fadeout;
-}
-
-.fade.in {
- opacity: 1;
- z-index: 10;
- -webkit-animation-name: fadein;
-}
-
-/* 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;
- position: absolute;
-}
-
-.ui-mobile-viewport-transitioning,
-.ui-mobile-viewport-transitioning .ui-page {
- width: 100%;
- height: 100%;
- overflow: hidden;
-}
-
-.flip {
- -webkit-animation-duration: .65s;
- -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. */
-}
-
-.flip.out {
- -webkit-transform: rotateY(-180deg) scale(.8);
- -webkit-animation-name: flipouttoleft;
-}
-
-.flip.in {
- -webkit-transform: rotateY(0) scale(1);
- -webkit-animation-name: flipinfromleft;
-}
-
-/* Shake it all about */
-
-.flip.out.reverse {
- -webkit-transform: rotateY(180deg) scale(.8);
- -webkit-animation-name: flipouttoright;
-}
-
-.flip.in.reverse {
- -webkit-transform: rotateY(0) scale(1);
- -webkit-animation-name: flipinfromright;
-}
-
-@-webkit-keyframes flipinfromright {
- from { -webkit-transform: rotateY(-180deg) scale(.8); }
- to { -webkit-transform: rotateY(0) scale(1); }
-}
-
-@-webkit-keyframes flipinfromleft {
- from { -webkit-transform: rotateY(180deg) scale(.8); }
- to { -webkit-transform: rotateY(0) scale(1); }
-}
-
-@-webkit-keyframes flipouttoleft {
- from { -webkit-transform: rotateY(0) scale(1); }
- to { -webkit-transform: rotateY(-180deg) scale(.8); }
-}
-
-@-webkit-keyframes flipouttoright {
- from { -webkit-transform: rotateY(0) scale(1); }
- to { -webkit-transform: rotateY(180deg) scale(.8); }
-}
-
-
-/* Hackish, but reliable. */
-
-@-webkit-keyframes dontmove {
- from { opacity: 1; }
- to { opacity: 1; }
-}
-
-.pop {
- -webkit-transform-origin: 50% 50%;
-}
-
-.pop.in {
- -webkit-transform: scale(1);
- opacity: 1;
- -webkit-animation-name: popin;
- z-index: 10;
-}
-
-.pop.in.reverse {
- z-index: 0;
- -webkit-animation-name: dontmove;
-}
-
-.pop.out.reverse {
- -webkit-transform: scale(.2);
- opacity: 0;
- -webkit-animation-name: popout;
- z-index: 10;
-}
-
-@-webkit-keyframes popin {
- from {
- -webkit-transform: scale(.2);
- opacity: 0;
- }
- to {
- -webkit-transform: scale(1);
- opacity: 1;
- }
-}
-
-@-webkit-keyframes popout {
- from {
- -webkit-transform: scale(1);
- opacity: 1;
- }
- to {
- -webkit-transform: scale(.2);
- opacity: 0;
- }
-}
\ No newline at end of file
+++ /dev/null
-<?php
-$type = 'text/css';
-$files = array(
- '../../../LICENSE-INFO.txt',
- 'jquery.mobile.theme.css'
-);
-$base = dirname(__FILE__);
-require_once('../../structure/index.php');
+++ /dev/null
-/* Swatches */
-
-/* A
------------------------------------------------------------------------------------------------------------*/
-
-.ui-bar-a {
- border: 1px solid #2A2A2A /*{a-bar-border}*/;
- background: #111111 /*{a-bar-background-color}*/;
- color: #ffffff /*{a-bar-color}*/;
- font-weight: bold;
- text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 1px /*{a-bar-shadow-radius}*/ #000000 /*{a-bar-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c /*{a-bar-background-start}*/), to( #111 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/);
-}
-.ui-bar-a,
-.ui-bar-a input,
-.ui-bar-a select,
-.ui-bar-a textarea,
-.ui-bar-a button {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
-}
-.ui-bar-a .ui-link-inherit {
- color: #fff /*{a-bar-color}*/;
-}
-
-.ui-bar-a .ui-link {
- color: #7cc4e7 /*{a-bar-link-color}*/;
- font-weight: bold;
-}
-
-.ui-bar-a .ui-link:hover {
- color: #2489CE /*{a-bar-link-hover}*/;
-}
-
-.ui-bar-a .ui-link:active {
- color: #2489CE /*{a-bar-link-active}*/;
-}
-
-.ui-bar-a .ui-link:visited {
- color: #2489CE /*{a-bar-link-visited}*/;
-}
-.ui-body-a,
-.ui-dialog.ui-overlay-a {
- border: 1px solid #2A2A2A /*{a-body-border}*/;
- background: #222222 /*{a-body-background-color}*/;
- color: #fff /*{a-body-color}*/;
- text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #000 /*{a-body-shadow-color}*/;
- font-weight: normal;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #666 /*{a-body-background-start}*/), to( #222 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/);
-}
-.ui-body-a,
-.ui-body-a input,
-.ui-body-a select,
-.ui-body-a textarea,
-.ui-body-a button {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
-}
-.ui-body-a .ui-link-inherit {
- color: #fff /*{a-body-color}*/;
-}
-
-.ui-body-a .ui-link {
- color: #2489CE /*{a-body-link-color}*/;
- font-weight: bold;
-}
-
-.ui-body-a .ui-link:hover {
- color: #2489CE /*{a-body-link-hover}*/;
-}
-
-.ui-body-a .ui-link:active {
- color: #2489CE /*{a-body-link-active}*/;
-}
-
-.ui-body-a .ui-link:visited {
- color: #2489CE /*{a-body-link-visited}*/;
-}
-
-.ui-btn-up-a {
- border: 1px solid #222 /*{a-bup-border}*/;
- background: #333333 /*{a-bup-background-color}*/;
- font-weight: bold;
- color: #fff /*{a-bup-color}*/;
- text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
-}
-.ui-btn-up-a a.ui-link-inherit {
- color: #fff /*{a-bup-color}*/;
-}
-.ui-btn-hover-a {
- border: 1px solid #000 /*{a-bhover-border}*/;
- background: #444444 /*{a-bhover-background-color}*/;
- font-weight: bold;
- color: #fff /*{a-bhover-color}*/;
- text-shadow: 0 /*{a-bhover-shadow-x}*/ -1px /*{a-bhover-shadow-y}*/ 1px /*{a-bhover-shadow-radius}*/ #000 /*{a-bhover-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #666 /*{a-bhover-background-start}*/), to( #444 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/);
-}
-.ui-btn-hover-a a.ui-link-inherit {
- color: #fff /*{a-bhover-color}*/;
-}
-.ui-btn-down-a {
- border: 1px solid #000 /*{a-bdown-border}*/;
- background: #3d3d3d /*{a-bdown-background-color}*/;
- font-weight: bold;
- color: #fff /*{a-bdown-color}*/;
- text-shadow: 0 /*{a-bdown-shadow-x}*/ -1px /*{a-bdown-shadow-y}*/ 1px /*{a-bdown-shadow-radius}*/ #000 /*{a-bdown-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #333 /*{a-bdown-background-start}*/), to( #5a5a5a /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/);
-}
-.ui-btn-down-a a.ui-link-inherit {
- color: #fff /*{a-bdown-color}*/;
-}
-.ui-btn-up-a,
-.ui-btn-hover-a,
-.ui-btn-down-a {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
- text-decoration: none;
-}
-
-
-/* B
------------------------------------------------------------------------------------------------------------*/
-
-.ui-bar-b {
- border: 1px solid #456f9a /*{b-bar-border}*/;
- background: #5e87b0 /*{b-bar-background-color}*/;
- color: #fff /*{b-bar-color}*/;
- font-weight: bold;
- text-shadow: 0 /*{b-bar-shadow-x}*/ -1px /*{b-bar-shadow-y}*/ 1px /*{b-bar-shadow-radius}*/ #254f7a /*{b-bar-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #81a8ce /*{b-bar-background-start}*/), to( #5e87b0 /*{b-bar-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#81a8ce /*{b-bar-background-start}*/, #5e87b0 /*{b-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#81a8ce /*{b-bar-background-start}*/, #5e87b0 /*{b-bar-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#81a8ce /*{b-bar-background-start}*/, #5e87b0 /*{b-bar-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#81a8ce /*{b-bar-background-start}*/, #5e87b0 /*{b-bar-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#81a8ce /*{b-bar-background-start}*/, #5e87b0 /*{b-bar-background-end}*/);
-}
-.ui-bar-b,
-.ui-bar-b input,
-.ui-bar-b select,
-.ui-bar-b textarea,
-.ui-bar-b button {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
-}
-.ui-bar-b .ui-link-inherit {
- color: #fff /*{b-bar-color}*/;
-}
-.ui-bar-b .ui-link {
- color: #ddf0f8 /*{b-bar-link-color}*/;
- font-weight: bold;
-}
-
-.ui-bar-b .ui-link:hover {
- color: #ddf0f8 /*{b-bar-link-hover}*/;
-}
-
-.ui-bar-b .ui-link:active {
- color: #ddf0f8 /*{b-bar-link-active}*/;
-}
-
-.ui-bar-b .ui-link:visited {
- color: #ddf0f8 /*{b-bar-link-visited}*/;
-}
-.ui-body-b,
-.ui-dialog.ui-overlay-b {
- border: 1px solid #C6C6C6 /*{b-body-border}*/;
- background: #cccccc /*{b-body-background-color}*/;
- color: #333333 /*{b-body-color}*/;
- text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #fff /*{b-body-shadow-color}*/;
- font-weight: normal;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #e6e6e6 /*{b-body-background-start}*/), to( #ccc /*{b-body-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#e6e6e6 /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#e6e6e6 /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#e6e6e6 /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#e6e6e6 /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#e6e6e6 /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/);
-}
-.ui-body-b,
-.ui-body-b input,
-.ui-body-b select,
-.ui-body-b textarea,
-.ui-body-b button {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
-}
-.ui-body-b .ui-link-inherit {
- color: #333333 /*{b-body-color}*/;
-}
-
-.ui-body-b .ui-link {
- color: #2489CE /*{b-body-link-color}*/;
- font-weight: bold;
-}
-
-.ui-body-b .ui-link:hover {
- color: #2489CE /*{b-body-link-hover}*/;
-}
-
-.ui-body-b .ui-link:active {
- color: #2489CE /*{b-body-link-active}*/;
-}
-
-.ui-body-b .ui-link:visited {
- color: #2489CE /*{b-body-link-visited}*/;
-}
-
-.ui-btn-up-b {
- border: 1px solid #145072 /*{b-bup-border}*/;
- background: #2567ab /*{b-bup-background-color}*/;
- font-weight: bold;
- color: #fff /*{b-bup-color}*/;
- text-shadow: 0 /*{b-bup-shadow-x}*/ -1px /*{b-bup-shadow-y}*/ 1px /*{b-bup-shadow-radius}*/ #145072 /*{b-bup-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #5f9cc5 /*{b-bup-background-start}*/), to( #396b9e /*{b-bup-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/);
-}
-.ui-btn-up-b a.ui-link-inherit {
- color: #fff /*{b-bup-color}*/;
-}
-.ui-btn-hover-b {
- border: 1px solid #00516e /*{b-bhover-border}*/;
- background: #4b88b6 /*{b-bhover-background-color}*/;
- font-weight: bold;
- color: #fff /*{b-bhover-color}*/;
- text-shadow: 0 /*{b-bhover-shadow-x}*/ -1px /*{b-bhover-shadow-y}*/ 1px /*{b-bhover-shadow-radius}*/ #014D68 /*{b-bhover-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #72b0d4 /*{b-bhover-background-start}*/), to( #4b88b6 /*{b-bhover-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#72b0d4 /*{b-bhover-background-start}*/, #4b88b6 /*{b-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#72b0d4 /*{b-bhover-background-start}*/, #4b88b6 /*{b-bhover-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#72b0d4 /*{b-bhover-background-start}*/, #4b88b6 /*{b-bhover-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#72b0d4 /*{b-bhover-background-start}*/, #4b88b6 /*{b-bhover-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#72b0d4 /*{b-bhover-background-start}*/, #4b88b6 /*{b-bhover-background-end}*/);
-}
-.ui-btn-hover-b a.ui-link-inherit {
- color: #fff /*{b-bhover-color}*/;
-}
-.ui-btn-down-b {
- border: 1px solid #225377 /*{b-bdown-border}*/;
- background: #4e89c5 /*{b-bdown-background-color}*/;
- font-weight: bold;
- color: #fff /*{b-bdown-color}*/;
- text-shadow: 0 /*{b-bdown-shadow-x}*/ -1px /*{b-bdown-shadow-y}*/ 1px /*{b-bdown-shadow-radius}*/ #225377 /*{b-bdown-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #396b9e /*{b-bdown-background-start}*/), to( #4e89c5 /*{b-bdown-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#396b9e /*{b-bdown-background-start}*/, #4e89c5 /*{b-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#396b9e /*{b-bdown-background-start}*/, #4e89c5 /*{b-bdown-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#396b9e /*{b-bdown-background-start}*/, #4e89c5 /*{b-bdown-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#396b9e /*{b-bdown-background-start}*/, #4e89c5 /*{b-bdown-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#396b9e /*{b-bdown-background-start}*/, #4e89c5 /*{b-bdown-background-end}*/);
-}
-.ui-btn-down-b a.ui-link-inherit {
- color: #fff /*{b-bdown-color}*/;
-}
-.ui-btn-up-b,
-.ui-btn-hover-b,
-.ui-btn-down-b {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
- text-decoration: none;
-}
-
-
-/* C
------------------------------------------------------------------------------------------------------------*/
-
-.ui-bar-c {
- border: 1px solid #B3B3B3 /*{c-bar-border}*/;
- background: #e9eaeb /*{c-bar-background-color}*/;
- color: #3E3E3E /*{c-bar-color}*/;
- font-weight: bold;
- text-shadow: 0 /*{c-bar-shadow-x}*/ 1px /*{c-bar-shadow-y}*/ 1px /*{c-bar-shadow-radius}*/ #fff /*{c-bar-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #f0f0f0 /*{c-bar-background-start}*/), to( #e9eaeb /*{c-bar-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#f0f0f0 /*{c-bar-background-start}*/, #e9eaeb /*{c-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#f0f0f0 /*{c-bar-background-start}*/, #e9eaeb /*{c-bar-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#f0f0f0 /*{c-bar-background-start}*/, #e9eaeb /*{c-bar-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#f0f0f0 /*{c-bar-background-start}*/, #e9eaeb /*{c-bar-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#f0f0f0 /*{c-bar-background-start}*/, #e9eaeb /*{c-bar-background-end}*/);
-}
-
-.ui-bar-c .ui-link-inherit {
- color: #3E3E3E /*{c-bar-color}*/;
-}
-.ui-bar-c .ui-link {
- color: #7cc4e7 /*{c-bar-link-color}*/;
- font-weight: bold;
-}
-
-.ui-bar-c .ui-link:hover {
- color: #2489CE /*{c-bar-link-hover}*/;
-}
-
-.ui-bar-c .ui-link:active {
- color: #2489CE /*{c-bar-link-active}*/;
-}
-
-.ui-bar-c .ui-link:visited {
- color: #2489CE /*{c-bar-link-visited}*/;
-}
-
-.ui-bar-c,
-.ui-bar-c input,
-.ui-bar-c select,
-.ui-bar-c textarea,
-.ui-bar-c button {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
-}
-.ui-body-c,
-.ui-dialog.ui-overlay-c {
- border: 1px solid #B3B3B3 /*{c-body-border}*/;
- color: #333333 /*{c-body-color}*/;
- text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #fff /*{c-body-shadow-color}*/;
- background: #f0f0f0 /*{c-body-background-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #eee /*{c-body-background-start}*/), to( #ddd /*{c-body-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#eee /*{c-body-background-start}*/, #ddd /*{c-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#eee /*{c-body-background-start}*/, #ddd /*{c-body-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#eee /*{c-body-background-start}*/, #ddd /*{c-body-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#eee /*{c-body-background-start}*/, #ddd /*{c-body-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#eee /*{c-body-background-start}*/, #ddd /*{c-body-background-end}*/);
-}
-.ui-body-c,
-.ui-body-c input,
-.ui-body-c select,
-.ui-body-c textarea,
-.ui-body-c button {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
-}
-
-.ui-body-c .ui-link-inherit {
- color: #333333 /*{c-body-color}*/;
-}
-
-.ui-body-c .ui-link {
- color: #2489CE /*{c-body-link-color}*/;
- font-weight: bold;
-}
-
-.ui-body-c .ui-link:hover {
- color: #2489CE /*{c-body-link-hover}*/;
-}
-
-.ui-body-c .ui-link:active {
- color: #2489CE /*{c-body-link-active}*/;
-}
-
-.ui-body-c .ui-link:visited {
- color: #2489CE /*{c-body-link-visited}*/;
-}
-
-.ui-btn-up-c {
- border: 1px solid #ccc /*{c-bup-border}*/;
- background: #eee /*{c-bup-background-color}*/;
- font-weight: bold;
- color: #444 /*{c-bup-color}*/;
- text-shadow: 0 /*{c-bup-shadow-x}*/ 1px /*{c-bup-shadow-y}*/ 1px /*{c-bup-shadow-radius}*/ #f6f6f6 /*{c-bup-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #fdfdfd /*{c-bup-background-start}*/), to( #eee /*{c-bup-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#fdfdfd /*{c-bup-background-start}*/, #eee /*{c-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#fdfdfd /*{c-bup-background-start}*/, #eee /*{c-bup-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#fdfdfd /*{c-bup-background-start}*/, #eee /*{c-bup-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#fdfdfd /*{c-bup-background-start}*/, #eee /*{c-bup-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#fdfdfd /*{c-bup-background-start}*/, #eee /*{c-bup-background-end}*/);
-}
-.ui-btn-up-c a.ui-link-inherit {
- color: #2F3E46 /*{c-bup-color}*/;
-}
-
-.ui-btn-hover-c {
- border: 1px solid #bbbbbb /*{c-bhover-border}*/;
- background: #dadada /*{c-bhover-background-color}*/;
- font-weight: bold;
- color: #101010 /*{c-bhover-color}*/;
- text-shadow: 0 /*{c-bhover-shadow-x}*/ 1px /*{c-bhover-shadow-y}*/ 1px /*{c-bhover-shadow-radius}*/ #fff /*{c-bhover-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #ededed /*{c-bhover-background-start}*/), to( #dadada /*{c-bhover-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#ededed /*{c-bhover-background-start}*/, #dadada /*{c-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#ededed /*{c-bhover-background-start}*/, #dadada /*{c-bhover-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#ededed /*{c-bhover-background-start}*/, #dadada /*{c-bhover-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#ededed /*{c-bhover-background-start}*/, #dadada /*{c-bhover-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#ededed /*{c-bhover-background-start}*/, #dadada /*{c-bhover-background-end}*/);
-}
-.ui-btn-hover-c a.ui-link-inherit {
- color: #2F3E46 /*{c-bhover-color}*/;
-}
-.ui-btn-down-c {
- border: 1px solid #808080 /*{c-bdown-border}*/;
- background: #fdfdfd /*{c-bdown-background-color}*/;
- font-weight: bold;
- color: #111111 /*{c-bdown-color}*/;
- text-shadow: 0 /*{c-bdown-shadow-x}*/ 1px /*{c-bdown-shadow-y}*/ 1px /*{c-bdown-shadow-radius}*/ #ffffff /*{c-bdown-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #eee /*{c-bdown-background-start}*/), to( #fdfdfd /*{c-bdown-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#eee /*{c-bdown-background-start}*/, #fdfdfd /*{c-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#eee /*{c-bdown-background-start}*/, #fdfdfd /*{c-bdown-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#eee /*{c-bdown-background-start}*/, #fdfdfd /*{c-bdown-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#eee /*{c-bdown-background-start}*/, #fdfdfd /*{c-bdown-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#eee /*{c-bdown-background-start}*/, #fdfdfd /*{c-bdown-background-end}*/);
-}
-.ui-btn-down-c a.ui-link-inherit {
- color: #2F3E46 /*{c-bdown-color}*/;
-}
-.ui-btn-up-c,
-.ui-btn-hover-c,
-.ui-btn-down-c {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
- text-decoration: none;
-}
-
-
-/* D
------------------------------------------------------------------------------------------------------------*/
-
-.ui-bar-d {
- border: 1px solid #ccc /*{d-bar-border}*/;
- background: #bbb /*{d-bar-background-color}*/;
- color: #333 /*{d-bar-color}*/;
- text-shadow: 0 /*{d-bar-shadow-x}*/ 1px /*{d-bar-shadow-y}*/ 0 /*{d-bar-shadow-radius}*/ #eee /*{d-bar-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #ddd /*{d-bar-background-start}*/), to( #bbb /*{d-bar-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/);
-}
-.ui-bar-d,
-.ui-bar-d input,
-.ui-bar-d select,
-.ui-bar-d textarea,
-.ui-bar-d button {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
-}
-
-.ui-bar-d .ui-link-inherit {
- color: #333333 /*{d-bar-color}*/;
-}
-.ui-bar-d .ui-link {
- color: #2489CE /*{d-bar-link-color}*/;
- font-weight: bold;
-}
-
-.ui-bar-d .ui-link:hover {
- color: #2489CE /*{d-bar-link-hover}*/;
-}
-
-.ui-bar-d .ui-link:active {
- color: #2489CE /*{d-bar-link-active}*/;
-}
-
-.ui-bar-d .ui-link:visited {
- color: #2489CE /*{d-bar-link-visited}*/;
-}
-
-.ui-body-d,
-.ui-dialog.ui-overlay-d {
- border: 1px solid #ccc /*{d-body-border}*/;
- color: #333333 /*{d-body-color}*/;
- text-shadow: 0 /*{d-body-shadow-x}*/ 1px /*{d-body-shadow-y}*/ 0 /*{d-body-shadow-radius}*/ #fff /*{d-body-shadow-color}*/;
- background: #ffffff /*{d-body-background-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #fff), to( #fff /*{d-body-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/);
-}
-.ui-body-d,
-.ui-body-d input,
-.ui-body-d select,
-.ui-body-d textarea,
-.ui-body-d button {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
-}
-
-.ui-body-d .ui-link-inherit {
- color: #333333 /*{d-body-color}*/;
-}
-
-.ui-body-d .ui-link {
- color: #2489CE /*{d-body-link-color}*/;
- font-weight: bold;
-}
-
-.ui-body-d .ui-link:hover {
- color: #2489CE /*{d-body-link-hover}*/;
-}
-
-.ui-body-d .ui-link:active {
- color: #2489CE /*{d-body-link-active}*/;
-}
-
-.ui-body-d .ui-link:visited {
- color: #2489CE /*{d-body-link-visited}*/;
-}
-
-.ui-btn-up-d {
- border: 1px solid #ccc /*{d-bup-border}*/;
- background: #fff /*{d-bup-background-color}*/;
- font-weight: bold;
- color: #444 /*{d-bup-color}*/;
- text-shadow: 0 /*{d-bup-shadow-x}*/ 1px /*{d-bup-shadow-y}*/ 1px /*{d-bup-shadow-radius}*/ #fff /*{d-bup-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #fff), to( #fff /*{d-bup-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#fff /*{d-bup-background-start}*/, #fff /*{d-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#fff /*{d-bup-background-start}*/, #fff /*{d-bup-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#fff /*{d-bup-background-start}*/, #fff /*{d-bup-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#fff /*{d-bup-background-start}*/, #fff /*{d-bup-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#fff /*{d-bup-background-start}*/, #fff /*{d-bup-background-end}*/);
-}
-.ui-btn-up-d a.ui-link-inherit {
- color: #333 /*{d-bup-color}*/;
-}
-.ui-btn-hover-d {
- border: 1px solid #aaa /*{d-bhover-border}*/;
- background: #eeeeee /*{d-bhover-background-color}*/;
- font-weight: bold;
- color: #222 /*{d-bhover-color}*/;
- cursor: pointer;
- text-shadow: 0 /*{d-bhover-shadow-x}*/ 1px /*{d-bhover-shadow-y}*/ 1px /*{d-bhover-shadow-radius}*/ #fff /*{d-bhover-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #fdfdfd), to( #eee /*{d-bhover-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#fdfdfd /*{d-bhover-background-start}*/, #eee /*{d-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#fdfdfd /*{d-bhover-background-start}*/, #eee /*{d-bhover-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#fdfdfd /*{d-bhover-background-start}*/, #eee /*{d-bhover-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#fdfdfd /*{d-bhover-background-start}*/, #eee /*{d-bhover-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#fdfdfd /*{d-bhover-background-start}*/, #eee /*{d-bhover-background-end}*/);
-}
-.ui-btn-hover-d a.ui-link-inherit {
- color: #222 /*{d-bhover-color}*/;
-}
-.ui-btn-down-d {
- border: 1px solid #aaaaaa /*{d-bdown-border}*/;
- background: #ffffff /*{d-bdown-background-color}*/;
- font-weight: bold;
- color: #111 /*{d-bdown-color}*/;
- text-shadow: 0 /*{d-bdown-shadow-x}*/ 1px /*{d-bdown-shadow-y}*/ 1px /*{d-bdown-shadow-radius}*/ #ffffff /*{d-bdown-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #eee /*{d-bdown-background-start}*/), to( #fff /*{d-bdown-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#eee /*{d-bdown-background-start}*/, #fff /*{d-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#eee /*{d-bdown-background-start}*/, #fff /*{d-bdown-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#eee /*{d-bdown-background-start}*/, #fff /*{d-bdown-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#eee /*{d-bdown-background-start}*/, #fff /*{d-bdown-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#eee /*{d-bdown-background-start}*/, #fff /*{d-bdown-background-end}*/);
-}
-.ui-btn-down-d a.ui-link-inherit {
- color: #111 /*{d-bdown-color}*/;
-}
-.ui-btn-up-d,
-.ui-btn-hover-d,
-.ui-btn-down-d {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
- text-decoration: none;
-}
-
-
-/* E
------------------------------------------------------------------------------------------------------------*/
-
-.ui-bar-e {
- border: 1px solid #F7C942 /*{e-bar-border}*/;
- background: #fadb4e /*{e-bar-background-color}*/;
- color: #333 /*{e-bar-color}*/;
- text-shadow: 0 /*{e-bar-shadow-x}*/ 1px /*{e-bar-shadow-y}*/ 0 /*{e-bar-shadow-radius}*/ #fff /*{e-bar-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #fceda7 /*{e-bar-background-start}*/), to( #fadb4e /*{e-bar-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#fceda7 /*{e-bar-background-start}*/, #fadb4e /*{e-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#fceda7 /*{e-bar-background-start}*/, #fadb4e /*{e-bar-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#fceda7 /*{e-bar-background-start}*/, #fadb4e /*{e-bar-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#fceda7 /*{e-bar-background-start}*/, #fadb4e /*{e-bar-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#fceda7 /*{e-bar-background-start}*/, #fadb4e /*{e-bar-background-end}*/);
-}
-.ui-bar-e,
-.ui-bar-e input,
-.ui-bar-e select,
-.ui-bar-e textarea,
-.ui-bar-e button {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
-}
-.ui-bar-e .ui-link-inherit {
- color: #333333 /*{e-bar-color}*/;
-}
-.ui-bar-e .ui-link {
- color: #2489CE /*{e-bar-link-color}*/;
- font-weight: bold;
-}
-
-.ui-bar-e .ui-link:hover {
- color: #2489CE /*{e-bar-link-hover}*/;
-}
-
-.ui-bar-e .ui-link:active {
- color: #2489CE /*{e-bar-link-active}*/;
-}
-
-.ui-bar-e .ui-link:visited {
- color: #2489CE /*{e-bar-link-visited}*/;
-}
-
-.ui-body-e,
-.ui-dialog.ui-overlay-e {
- border: 1px solid #F7C942 /*{e-body-border}*/;
- color: #333333 /*{e-body-color}*/;
- text-shadow: 0 /*{e-body-shadow-x}*/ 1px /*{e-body-shadow-y}*/ 0 /*{e-body-shadow-radius}*/ #fff /*{e-body-shadow-color}*/;
- background: #faeb9e /*{e-body-background-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #fff /*{e-body-background-start}*/), to( #faeb9e /*{e-body-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#fff /*{e-body-background-start}*/, #faeb9e /*{e-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#fff /*{e-body-background-start}*/, #faeb9e /*{e-body-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#fff /*{e-body-background-start}*/, #faeb9e /*{e-body-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#fff /*{e-body-background-start}*/, #faeb9e /*{e-body-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#fff /*{e-body-background-start}*/, #faeb9e /*{e-body-background-end}*/);
-}
-.ui-body-e,
-.ui-body-e input,
-.ui-body-e select,
-.ui-body-e textarea,
-.ui-body-e button {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
-}
-.ui-body-e .ui-link-inherit {
- color: #333333 /*{e-body-color}*/;
-}
-
-.ui-body-e .ui-link {
- color: #2489CE /*{e-body-link-color}*/;
- font-weight: bold;
-}
-
-.ui-body-e .ui-link:hover {
- color: #2489CE /*{e-body-link-hover}*/;
-}
-
-.ui-body-e .ui-link:active {
- color: #2489CE /*{e-body-link-active}*/;
-}
-
-.ui-body-e .ui-link:visited {
- color: #2489CE /*{e-body-link-visited}*/;
-}
-
-.ui-btn-up-e {
- border: 1px solid #F7C942 /*{e-bup-border}*/;
- background: #fadb4e /*{e-bup-background-color}*/;
- font-weight: bold;
- color: #333 /*{e-bup-color}*/;
- text-shadow: 0 /*{e-bup-shadow-x}*/ 1px /*{e-bup-shadow-y}*/ 0 /*{e-bup-shadow-radius}*/ #fff /*{e-bup-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #fceda7 /*{e-bup-background-start}*/), to( #fadb4e /*{e-bup-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#fceda7 /*{e-bup-background-start}*/, #fadb4e /*{e-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#fceda7 /*{e-bup-background-start}*/, #fadb4e /*{e-bup-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#fceda7 /*{e-bup-background-start}*/, #fadb4e /*{e-bup-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#fceda7 /*{e-bup-background-start}*/, #fadb4e /*{e-bup-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#fceda7 /*{e-bup-background-start}*/, #fadb4e /*{e-bup-background-end}*/);
-}
-.ui-btn-up-e a.ui-link-inherit {
- color: #333 /*{e-bup-color}*/;
-}
-.ui-btn-hover-e {
- border: 1px solid #e79952 /*{e-bhover-border}*/;
- background: #fbe26f /*{e-bhover-background-color}*/;
- font-weight: bold;
- color: #111 /*{e-bhover-color}*/;
- text-shadow: 0 /*{e-bhover-shadow-x}*/ 1px /*{e-bhover-shadow-y}*/ 1px /*{e-bhover-shadow-radius}*/ #fff /*{e-bhover-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #fcf0b5 /*{e-bhover-background-start}*/), to( #fbe26f /*{e-bhover-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#fcf0b5 /*{e-bhover-background-start}*/, #fbe26f /*{e-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#fcf0b5 /*{e-bhover-background-start}*/, #fbe26f /*{e-bhover-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#fcf0b5 /*{e-bhover-background-start}*/, #fbe26f /*{e-bhover-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#fcf0b5 /*{e-bhover-background-start}*/, #fbe26f /*{e-bhover-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#fcf0b5 /*{e-bhover-background-start}*/, #fbe26f /*{e-bhover-background-end}*/);
-}
-
-.ui-btn-hover-e a.ui-link-inherit {
- color: #333 /*{e-bhover-color}*/;
-}
-.ui-btn-down-e {
- border: 1px solid #F7C942 /*{e-bdown-border}*/;
- background: #fceda7 /*{e-bdown-background-color}*/;
- font-weight: bold;
- color: #111 /*{e-bdown-color}*/;
- text-shadow: 0 /*{e-bdown-shadow-x}*/ 1px /*{e-bdown-shadow-y}*/ 1px /*{e-bdown-shadow-radius}*/ #ffffff /*{e-bdown-shadow-color}*/;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #fadb4e /*{e-bdown-background-start}*/), to( #fceda7 /*{e-bdown-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#fadb4e /*{e-bdown-background-start}*/, #fceda7 /*{e-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#fadb4e /*{e-bdown-background-start}*/, #fceda7 /*{e-bdown-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#fadb4e /*{e-bdown-background-start}*/, #fceda7 /*{e-bdown-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#fadb4e /*{e-bdown-background-start}*/, #fceda7 /*{e-bdown-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#fadb4e /*{e-bdown-background-start}*/, #fceda7 /*{e-bdown-background-end}*/);
-}
-.ui-btn-down-e a.ui-link-inherit {
- color: #333 /*{e-bdown-color}*/;
-}
-.ui-btn-up-e,
-.ui-btn-hover-e,
-.ui-btn-down-e {
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
- text-decoration: none;
-}
-
-/* Structure */
-
-/* links within "buttons"
------------------------------------------------------------------------------------------------------------*/
-
-a.ui-link-inherit {
- text-decoration: none !important;
-}
-
-
-/* Active class used as the "on" state across all themes
------------------------------------------------------------------------------------------------------------*/
-
-.ui-btn-active {
- border: 1px solid #155678 /*{global-active-border}*/;
- background: #4596ce /*{global-active-background-color}*/;
- font-weight: bold;
- color: #fff /*{global-active-color}*/;
- cursor: pointer;
- text-shadow: 0 /*{global-active-shadow-x}*/ -1px /*{global-active-shadow-y}*/ 1px /*{global-active-shadow-radius}*/ #145072 /*{global-active-shadow-color}*/;
- text-decoration: none;
- background-image: -webkit-gradient(linear, left top, left bottom, from( #85bae4 /*{global-active-background-start}*/), to( #5393c5 /*{global-active-background-end}*/)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(#85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(#85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/); /* FF3.6 */
- background-image: -ms-linear-gradient(#85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/); /* IE10 */
- background-image: -o-linear-gradient(#85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/); /* Opera 11.10+ */
- background-image: linear-gradient(#85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/);
- font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
-}
-.ui-btn-active a.ui-link-inherit {
- color: #fff /*{global-active-color}*/;
-}
-
-
-/* button inner top highlight
------------------------------------------------------------------------------------------------------------*/
-
-.ui-btn-inner {
- border-top: 1px solid #fff;
- border-color: rgba(255,255,255,.3);
-}
-
-
-/* corner rounding classes
------------------------------------------------------------------------------------------------------------*/
-
-.ui-corner-tl {
- -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
- border-top-left-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-tr {
- -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
- border-top-right-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-bl {
- -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-br {
- -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-top {
- -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
- border-top-left-radius: .6em /*{global-radii-blocks}*/;
- -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
- border-top-right-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-bottom {
- -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
- -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
- }
-.ui-corner-right {
- -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
- border-top-right-radius: .6em /*{global-radii-blocks}*/;
- -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-left {
- -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
- border-top-left-radius: .6em /*{global-radii-blocks}*/;
- -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-all {
- -moz-border-radius: .6em /*{global-radii-blocks}*/;
- -webkit-border-radius: .6em /*{global-radii-blocks}*/;
- border-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-none {
- -moz-border-radius: 0;
- -webkit-border-radius: 0;
- border-radius: 0;
-}
-
-/* Form field separator
------------------------------------------------------------------------------------------------------------*/
-.ui-br {
- border-bottom: rgb(130,130,130);
- border-bottom: rgba(130,130,130,.3);
- border-bottom-width: 1px;
- border-bottom-style: solid;
-}
-
-/* Interaction cues
------------------------------------------------------------------------------------------------------------*/
-.ui-disabled {
- opacity: .3;
-}
-.ui-disabled,
-.ui-disabled a {
- pointer-events: none;
- cursor: default;
-}
-
-/* Icons
------------------------------------------------------------------------------------------------------------*/
-
-.ui-icon,
-.ui-icon-searchfield:after {
- background: #666 /*{global-icon-color}*/;
- background: rgba(0,0,0,.4) /*{global-icon-disc}*/;
- background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
- background-repeat: no-repeat;
- -moz-border-radius: 9px;
- -webkit-border-radius: 9px;
- border-radius: 9px;
-}
-
-
-/* Alt icon color
------------------------------------------------------------------------------------------------------------*/
-
-.ui-icon-alt {
- background: #fff;
- background: rgba(255,255,255,.3);
- background-image: url(images/icons-18-black.png);
- background-repeat: no-repeat;
-}
-
-/* HD/"retina" sprite
------------------------------------------------------------------------------------------------------------*/
-
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
- only screen and (min--moz-device-pixel-ratio: 1.5),
- only screen and (min-resolution: 240dpi) {
-
- .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
- .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
- .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
- .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
- .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
- background-image: url(images/icons-36-white.png);
- -moz-background-size: 776px 18px;
- -o-background-size: 776px 18px;
- -webkit-background-size: 776px 18px;
- background-size: 776px 18px;
- }
- .ui-icon-alt {
- background-image: url(images/icons-36-black.png);
- }
-}
-
-/* plus minus */
-.ui-icon-plus {
- background-position: -0 50%;
-}
-.ui-icon-minus {
- background-position: -36px 50%;
-}
-
-/* delete/close */
-.ui-icon-delete {
- background-position: -72px 50%;
-}
-
-/* arrows */
-.ui-icon-arrow-r {
- background-position: -108px 50%;
-}
-.ui-icon-arrow-l {
- background-position: -144px 50%;
-}
-.ui-icon-arrow-u {
- background-position: -180px 50%;
-}
-.ui-icon-arrow-d {
- background-position: -216px 50%;
-}
-
-/* misc */
-.ui-icon-check {
- background-position: -252px 50%;
-}
-.ui-icon-gear {
- background-position: -288px 50%;
-}
-.ui-icon-refresh {
- background-position: -324px 50%;
-}
-.ui-icon-forward {
- background-position: -360px 50%;
-}
-.ui-icon-back {
- background-position: -396px 50%;
-}
-.ui-icon-grid {
- background-position: -432px 50%;
-}
-.ui-icon-star {
- background-position: -468px 50%;
-}
-.ui-icon-alert {
- background-position: -504px 50%;
-}
-.ui-icon-info {
- background-position: -540px 50%;
-}
-.ui-icon-home {
- background-position: -576px 50%;
-}
-.ui-icon-search,
-.ui-icon-searchfield:after {
- background-position: -612px 50%;
-}
-.ui-icon-checkbox-off {
- background-position: -684px 50%;
-}
-.ui-icon-checkbox-on {
- background-position: -648px 50%;
-}
-.ui-icon-radio-off {
- background-position: -756px 50%;
-}
-.ui-icon-radio-on {
- background-position: -720px 50%;
-}
-
-
-/* checks,radios */
-.ui-checkbox .ui-icon {
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
-}
-.ui-icon-checkbox-off,
-.ui-icon-radio-off {
- background-color: transparent;
-}
-.ui-checkbox-on .ui-icon,
-.ui-radio-on .ui-icon {
- background-color: #4596ce /*{global-active-background-color}*/; /* NOTE: this hex should match the active state color. It's repeated here for cascade */
-}
-
-/* loading icon */
-.ui-icon-loading {
- background-image: url(images/ajax-loader.png);
- width: 40px;
- height: 40px;
- -moz-border-radius: 20px;
- -webkit-border-radius: 20px;
- border-radius: 20px;
- background-size: 35px 35px;
-}
-
-
-/* Button corner classes
------------------------------------------------------------------------------------------------------------*/
-
-.ui-btn-corner-tl {
- -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
- border-top-left-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-tr {
- -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
- border-top-right-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-bl {
- -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-br {
- -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-top {
- -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
- border-top-left-radius: 1em /*{global-radii-buttons}*/;
- -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
- border-top-right-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-bottom {
- -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
- -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-right {
- -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
- border-top-right-radius: 1em /*{global-radii-buttons}*/;
- -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-left {
- -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
- border-top-left-radius: 1em /*{global-radii-buttons}*/;
- -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-all {
- -moz-border-radius: 1em /*{global-radii-buttons}*/;
- -webkit-border-radius: 1em /*{global-radii-buttons}*/;
- border-radius: 1em /*{global-radii-buttons}*/;
-}
-
-/* radius clip workaround for cleaning up corner trapping */
-.ui-corner-tl,
-.ui-corner-tr,
-.ui-corner-bl,
-.ui-corner-br,
-.ui-corner-top,
-.ui-corner-bottom,
-.ui-corner-right,
-.ui-corner-left,
-.ui-corner-all,
-.ui-btn-corner-tl,
-.ui-btn-corner-tr,
-.ui-btn-corner-bl,
-.ui-btn-corner-br,
-.ui-btn-corner-top,
-.ui-btn-corner-bottom,
-.ui-btn-corner-right,
-.ui-btn-corner-left,
-.ui-btn-corner-all {
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-}
-
-/* Overlay / modal
------------------------------------------------------------------------------------------------------------*/
-
-.ui-overlay {
- background: #666;
- opacity: .5;
- filter: Alpha(Opacity=50);
- position: absolute;
- width: 100%;
- height: 100%;
-}
-.ui-overlay-shadow {
- -moz-box-shadow: 0px 0px 12px rgba(0,0,0,.6);
- -webkit-box-shadow: 0px 0px 12px rgba(0,0,0,.6);
- box-shadow: 0px 0px 12px rgba(0,0,0,.6);
-}
-.ui-shadow {
- -moz-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/;
- -webkit-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/;
- box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/;
-}
-.ui-bar-a .ui-shadow,
-.ui-bar-b .ui-shadow ,
-.ui-bar-c .ui-shadow {
- -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.3);
- -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.3);
- box-shadow: 0px 1px 0 rgba(255,255,255,.3);
-}
-.ui-shadow-inset {
- -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
- -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
- box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
-}
-.ui-icon-shadow {
- -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4);
- -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4);
- box-shadow: 0px 1px 0 rgba(255,255,255,.4);
-}
-
-/* Focus state - set here for specificity
------------------------------------------------------------------------------------------------------------*/
-
-.ui-focus {
- -moz-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
- -webkit-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
- box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
-}
-
-/* unset box shadow in browsers that don't do it right
------------------------------------------------------------------------------------------------------------*/
-
-.ui-mobile-nosupport-boxshadow * {
- -moz-box-shadow: none !important;
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
-}
-
-/* ...and bring back focus */
-.ui-mobile-nosupport-boxshadow .ui-focus {
- outline-width: 2px;
-}
+++ /dev/null
-<?php
-$type = 'text/css';
-$files = array(
- '../../../LICENSE-INFO.txt',
- 'jquery.mobile.theme.css'
-);
-$base = dirname(__FILE__);
-require_once('../../structure/index.php');
+++ /dev/null
-/* jqm docs css
-
-Beware: lots of last-minute CSS going on in here
-cobblers, shoes,
-*/
-
-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; }
-p 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%;
- }
-}
\ No newline at end of file
+++ /dev/null
-//set up the theme switcher on the homepage
-$('div').live('pagecreate',function(event){
- if( !$(this).is('.ui-dialog')){
- var appendEl = $(this).find('.ui-footer:last');
-
- if( !appendEl.length ){
- appendEl = $(this).find('.ui-content');
- }
-
- if( appendEl.is("[data-position]") ){
- return;
- }
-
- $('<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( appendEl )
- .wrap('<div class="jqm-themeswitcher">')
- .bind( "vclick", function(){
- $.themeswitcher();
- });
- }
-
-});
-
-//collapse page navs after use
-$(function(){
- $('body').delegate('.content-secondary .ui-collapsible-content', 'click', function(){
- $(this).trigger("collapse")
- });
-});
-
-function setDefaultTransition(){
- var winwidth = $( window ).width(),
- trans ="slide";
-
- if( winwidth >= 1000 ){
- trans = "none";
- }
- else if( winwidth >= 650 ){
- trans = "fade";
- }
-
- $.mobile.defaultPageTransition = trans;
-}
-
-
-$(function(){
- setDefaultTransition();
- $( window ).bind( "throttledresize", setDefaultTransition );
-});
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Accessibility</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <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>
-
- <p>By utilizing these techniques, we do our best to ensure an accessible experience to users with disabilities such as blindness, who may use screen readers (like <em>VoiceOver</em>, on Apple's iPhone device) or other assistive technology to access the web.</p>
-
- <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>© 2011 The jQuery Project</p>
- </div>
-
-
-
- </div><!-- /content -->
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Features</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <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 the features needed for a particular application</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>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 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>© 2011 The jQuery Project</p>
- </div>
-
-
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <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/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../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>
-<!DOCTYPE html>
-<html>
- <head>
- <title>My Page</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
-</head>
-<body>
-
-<div <strong>data-role="page"</strong>>
-
- <div <strong>data-role="header"</strong>>
- <h1>My Title</h1>
- </div><!-- /header -->
-
- <div <strong>data-role="content"</strong>>
- <p>Hello world</p>
- </div><!-- /content -->
-
-</div><!-- /page -->
-
-</body>
-</html>
-</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>
-<ul <strong>data-role="listview" data-inset="true" data-filter="true"</strong>>
- <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>
-
-</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>
-<form>
- <label for="slider-0">Input slider:</label>
- <input <strong>type="range"</strong> name="slider" id="slider-0" value="25" min="0" max="100" />
-</form>
-</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>
-<a href="#" <strong>data-role="button" data-icon="star"</strong>>Star button</a>
-</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><a href="#" data-role="button" data-icon="star" <strong>data-theme="a"</strong>>Button</a></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>© 2011 The jQuery Project</p>
- </div>
-
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery UI Mobile Framework - About</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
-<div data-role="header" data-theme="f">
- <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">
- <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>
- </ul>
-
-</div>
-
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Intro</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <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>jQuery’s 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>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms we’re targeting</a> with jQuery Mobile. We’ve 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, we’re 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>
-
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Supported platforms</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <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>
- <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 & 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 the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0)</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>
- </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>
- </ul>
- <h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #aaaaaa; padding: 6px 0 8px 8px;"><strong>Not Officially Supported - </strong>May work, but haven't been thoroughly tested or debugged</h3>
- <ul>
- <li><strong>Samsung Bada</strong> - The project doesn't currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0</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><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>© 2011 The jQuery Project</p>
- </div>
-
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <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/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../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>Container with <code>data-role="page"</code> or <code>"dialog"</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-id</th>
- <td>string (unique id for the page)</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-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-position</th>
- <td>fixed</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-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-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-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="../pages/page-anatomy.html">Page</a></h2>
- <p>Container with <code>data-role="page"</code></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-id</th>
- <td>string (unique id for the page)</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 & 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 & 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>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!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/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <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 pageInit(), not $(document).ready()</h4>
- The first thing you learn in jQuery is to call code inside the $(document).ready() 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><strong>pageinit</strong></code> event. This event is explained in detail at the bottom of this page.</div>
-
- <p>
- <div class="ui-body ui-body-e">
- <h4 style="margin:.5em 0">Important: pageCreate() vs pageInit()</h4>
- 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><strong>pagecreate</strong></code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code><strong>pagecreate</strong></code> event in place of direct calls to the widget methods. As a result, users binding to the <code><strong>pagecreate</strong></code> in <code><strong>mobileinit</strong></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><strong>pageinit</strong></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><strong>pagecreate</strong></code> to manipulate the enhanced markup before the page was shown its very likely you'll want to migrate to 'pageinit'.
- </div></p>
-
- <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 isn’t 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>
-
- <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 mousedown, mouseup, and click events roughly 300ms after the touchend 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, 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 click instead of vclick 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> </p>
- <div class="ui-body ui-body-e">
- <h4 style="margin:.5em 0">Canceling an elements default click behavior</h4>
- <p>Applications can call preventDefault() on a vclick event to cancel an element's default click behavior. On mouse based devices, calling preventDefault() on a vclick event equates to calling preventDefault() on the real click event during the bubble event phase. On touch based devices, it's a bit more complicated since the actual click event is dispatched about 300ms after the vclick event is dispatched. For touch devices, calling preventDefault() on a vclick event triggers some code in the vmouse plugin that attempts to catch the next click event that gets dispatched by the browser, during the capture event phase, and call preventDefault() and stopPropagation() on it. As mentioned in the warning above, it is sometimes difficult 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 click event by coordinates. There are still cases where both target and coordinate identification fail, which results in the click 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 click 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 orientationChange 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>
-
- 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 orientationchange all together with <code>$.mobile.orientationChangeEnabled = false</code> to let the fallback resize code trigger your bindings.
- </div>
- </dl>
-
- <h2>Scroll events</h2>
- <dl>
- <dt><code>scrollstart</code></dt>
- <dd>Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts.</dd>
- </dl>
- <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 pagebeforeload. The 2nd event will be either pageload or pageloadfailed.</p>
- <dl>
- <dt><code>pagebeforeload</code></dt>
- <dd><p>Triggered before any load request is made. Callbacks bound to this event can call preventDefault() on the event to indicate that they are handling the load request. Callbacks that do this *MUST* make sure they call resolve() or reject() 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( "pagebeforeload", 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( "pagebeforeload", 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( "pageloadfailed", 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( "pageloadfailed", 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 "timeout", "error", "abort", and "parsererror". 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 toPage and options properties to alter the behavior of the current changePage() call. So for example, the toPage 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 changePage() 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 changePage() 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>
- <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>
-
- <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>
-
- <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>
-
- <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>
-
- </dl>
-
- <p>You can access the prevPage or nextPage 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);
-});
-
-$( 'div' ).live( 'pagehide',function(event, ui){
- alert( 'This page was just shown: '+ ui.nextPage);
-});
-</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>
-
- <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>
-
- <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();
-});
-</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!' );
-});
-</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>
-
- <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 & 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>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!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/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <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 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(){
- //apply overrides here
-});
- </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>
- <code>
-<script src="jquery.js"></script>
-<strong><script src="custom-scripting.js"></script></strong>
-<script src="jquery-mobile.js"></script>
- </code>
- </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(){
- $.extend( $.mobile , {
- <strong>foo: bar</strong>
- });
-});
- </code>
- </pre>
-
- <p>...or by setting them individually:</p>
- <pre>
- <code>
-$(document).bind("mobileinit", function(){
- <strong>$.mobile.foo = bar;</strong>
-});
- </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 until <code>$.mobile.initializePage</code> is manually called.</dd>
-
- <dt><code>subPageUrlKey</code> <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>
- <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>
- <dd>The class used for "active" button state, from CSS framework.</dd>
-
- <dt><code>ajaxEnabled</code> <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><code>hashListeningEnabled</code> <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: 150</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>
- <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>pageLoadErrorMessage</code> <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>gradeA</code> <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 & 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>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery UI Mobile Framework - API</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-<div data-role="page" class="type-index">
-
-<div data-role="header" data-theme="f">
- <h1>API</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">
- <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 & Utilities</a></li>
- <li><a href="data-attributes.html">Data attribute reference</a></li>
- <li><a href="themes.html">Theme framework</a></li>
- </ul>
-
-</div>
-
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Responsive Layout Helpers</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <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 & 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>
-
- <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>
- <pre>
- <code>
-.portrait {
- /* portrait orientation changes go here! */
-}
-.landscape {
- /* landscape orientation changes go here! */
-}
- </code>
- </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>
-<pre>
- <code>
-.myelement {
- float: none;
-}
-.min-width-480px .myelement {
- float: left;
-}
- </code>
-</pre>
-
- <p>Many plugins in jQuery Mobile leverage these width breakpoints. For example, form elements float beside their labels when the browser is wider than 480 pixels. The CSS to support this behavior for form text inputs looks like this:</p>
-
-<pre>
- <code>
-label.ui-input-text {
- display: block;
-}
-.min-width-480px label.ui-input-text {
- display: inline-block;
-}
- </code>
-</pre>
-
- <h3>Adding Width Breakpoints</h3>
- <p>To utilize width breakpoints of your own, jQuery Mobile exposes the <code>$.mobile.addResolutionBreakpoints </code> function, which accepts either a single number or array of numbers that will be added to the min/max breakpoints whenever they apply.</p>
-<pre>
- <code>
-//add a min/max class for 1200 pixel widths
-$.mobile.addResolutionBreakpoints(1200);
-
-//add min/max classes for 1200, and 1440 pixel widths
-$.mobile.addResolutionBreakpoints([1200, 1440]);
- </code>
-</pre>
-
-<h3>Running Media Queries</h3>
-<p>jQuery Mobile provides a function that allows you to test whether a particular CSS Media Query applies. Simple call <code>$.mobile.media()</code> and pass a media type or query. If the browser supports that type or query, and it currently applies, the function will return true. If not, it'll return false.</p>
-
-<pre>
- <code>
-//test for screen media type
-$.mobile.media("screen");
-
-//test a min-width media query
-$.mobile.media("screen and (min-width: 480px)");
-
-//test for iOS retina display
-$.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 & 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>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Methods</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <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>
-
-
- <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>
-
- <dl>
- <dt><code>·</code> Arguments</dt>
- <dd><code>to</code> (<em>string or object</em>, required)
-<ul>
- <li>String: Absolute or relative URL. ("about/us.html")</li>
- <li>Object: jQuery collection object. (<code>$("#about")</code>)</li>
- </ul>
- </dd>
-
- <dd><code>options</code> (<em>object</em>, optional)
- <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>data-url</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: "get") 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>
-
- </dl>
- </dd>
-
- <dd>Examples:
- <pre>
- <code>
-<strong>//transition to the "about us" page with a slideup transition</strong>
-$.mobile.changePage( "about/us.html", { transition: "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",
- 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
-});
-
- </code>
- </pre>
-
- </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>·</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: "get") 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>
- <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>·</code> 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>·</code> 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>
-
-
-
-
- <dt><code>$.mobile.showPageLoadingMsg</code> (<em></em>)</dt>
- <dd>Show the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
-
- <dd>Example:
- <pre>
- <code>
-<strong>//cue the page loader</strong>
-$.mobile.showPageLoadingMsg();
- </code>
- </pre>
-
- </dd>
-
-
-
-
- <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();
- </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>·</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>·</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>
-
- </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>·</code> Arguments</dt>
- <dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>
-
- <dt><code>·</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&type=unread#msg-content
-// obj.hrefNoHash: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&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&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>·</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>·</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&b=2</strong>
-var absUrl = $.mobile.path.makeUrlAbsolute("?a=1&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>·</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>·</code> Arguments</dt>
- <dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>
-
- <dt><code>·</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&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>·</code> Arguments</dt>
- <dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>
-
- <dt><code>·</code> Return Value</dt>
- <dd>This function returns a boolean true if the URL is absolute, false if it is absolute.</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&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>
-
-
-
- <dt><code>$.mobile.silentScroll</code> (<em>method</em>)</dt>
- <dd>Scroll to a particular Y position without triggering scroll event listeners.</dd>
- <dd>
- <dl>
- <dt><code>·</code> Arguments:</dt>
- <dd><code>yPos</code> (<em>number</em>, defaults to 0). Pass any number to scroll to that Y location.</dd>
- </dl>
- </dd>
-
- <dd>Examples:
- <pre>
- <code>
-<strong>//scroll to Y 100px</strong>
-$.mobile.silentScroll(100);
- </code>
- </pre>
-
- </dd>
-
-
-
-
-
- <dt><code>$.mobile.activePage</code> (<em>property</em>)</dt>
- <dd>Reference to the page currently in view.</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><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 & 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>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Static Containers, States</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <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>
-
- <ul>
- <li>It takes advantage of <strong>CSS3 properties</strong> to add rounded corners, box and text shadow and gradients instead of images, allowing the theme file to be very lightweight and reducing server requests.</li>
- <li>Themes include multiple <strong>color "swatches"</strong> — each consisting of a header bar, content body, and button states that can be freely mixed and matched to create visual texture — to make richer designs possible</li>
- <li><strong>Open-ended theming</strong> allows for up to 26 unique swatches per theme, to add almost unlimited variety to designs</li>
- <li>All backgrounds now use <strong>CSS3 gradients</strong> to dramatically reduce file size and number of server requests</li>
- <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 & swatches</h2>
-
- <p>The key to the Theme system is separation of color and texture, from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and be mixed, matched and combined to achieve a wide range of visual effects. </p>
-
- <p>Each Theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the Theme can include multiple color "swatches", each with color values for bars, content blocks, buttons and list items, and font <code>text-shadow</code>. </p>
-
- <p>jQuery Mobile's default Theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline level (gray) that we use by default in many situations, "d" for an alternate secondary level and "e" as an accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch "f" that has a red bar and button for use in error situations. </p>
-
- <p>A new ThemeRoller tool will launched with the jQuery Mobile 1.0 release in 2011. In the meantime, it's simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme css file: copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors.</p>
-
-
- <h3>Bars</h3>
- <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><!-- 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>
-
-
-
- <h3>Content Blocks</h3>
- <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><!-- 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" data-position="inline">
- <a href="#" data-icon="arrow-l">Back</a>
- <h1>Default Header</h1>
- </div>
- <div class="ui-body ui-body-c">
- <h3>Default Theme Content Header</h3>
- <p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
- <label for="slider1">Input slider:</label>
- <input type="range" name="slider1" id="slider1" value="50" min="0" max="100" />
- <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
- <legend>Cache settings:</legend>
- <input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
- <label for="radio-choice-a1">On</label>
- <input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off" />
- <label for="radio-choice-b1">Off</label>
- </fieldset>
- <a href="#" data-role="button" data-inline="true">Button</a>
- </div>
- <div class="ui-bar ui-bar-a">
- <div data-role="controlgroup" data-type="horizontal" >
- <a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a>
- </div><!-- /controlgroup -->
- </div>
-
-
- <p>Learn more about <a href="../content/content-themes.html">content theming</a>.</p>
-
-
- <h2>Lists & Buttons</h2>
- <p>Each swatch also includes default styles for interactive elements like list items and buttons.</p>
- <ul data-role="listview" data-inset="true" data-theme="a">
- <li><a href="index.html">List item</a></li>
- <li><a href="index.html">List item</a></li>
- </ul>
-
- <ul data-role="listview" data-inset="true" data-theme="b">
- <li><a href="index.html">List item</a></li>
- <li><a href="index.html">List item</a></li>
- </ul>
-
- <ul data-role="listview" data-inset="true" data-theme="c">
- <li><a href="index.html">List item</a></li>
- <li><a href="index.html">List item</a></li>
- </ul>
-
- <ul data-role="listview" data-inset="true" data-theme="d">
- <li><a href="index.html">List item</a></li>
- <li><a href="index.html">List item</a></li>
- </ul>
-
- <ul data-role="listview" data-inset="true" data-theme="e">
- <li><a href="index.html">List item</a></li>
- <li><a href="index.html">List item</a></li>
- </ul>
-
-
- <p>A button is included for each swatch in the theme. Each button has styles for normal, hover/focus and pressed states.</p>
-
- <div class="swatch-preview">
- <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Button A</a>
- <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Button B</a>
- <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Button C</a>
- <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Button D</a>
- <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l">Button E</a>
- </div><!-- end swatch-bars -->
-
-
- <p>By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent bar or content box, to visually integrate the button into the parent theme like a chameleon, as shown here:</p>
-
- <div class="swatch-preview">
- <div data-role="header" data-theme="a"><h1>Bar A</h1><a href="index.html" data-icon="arrow-l">Button A</a></div>
- <div data-role="header" data-theme="b"><h1>Bar B</h1><a href="index.html" data-icon="arrow-l">Button B</a></div>
- <div data-role="header" data-theme="c"><h1>Bar C</h1><a href="index.html" data-icon="arrow-l">Button C</a></div>
- <div data-role="header" data-theme="d"><h1>Bar D</h1><a href="index.html" data-icon="arrow-l">Button D</a></div>
- <div data-role="header" data-theme="e"><h1>Bar E</h1><a href="index.html" data-icon="arrow-l">Button E</a></div>
- </div><!-- end swatch-bars -->
-
- <p>This default behavior makes it easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container too. </p>
-
- <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><!-- 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>
- <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
- <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
- <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><!-- 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>
- <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
- <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
- <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><!-- 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>
- <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
- <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
- <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><!-- 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>
- <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
- <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
- <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><!-- 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>
- <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
- <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
- <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
- </div>
- </div>
-
- </div><!-- end swatch-bars -->
-
-<p>Learn more about <a href="../lists/lists-themes.html">list theming</a> and <a href="../buttons/buttons-themes.html">button theming</a>.</p>
-
- <h3>Global "Active" state</h3>
- <p>The jQuery Mobile framework uses a single Theme-level swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the Theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the <code>ui-btn-active</code> style rules.</p>
-
- <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
- <legend>Active is used for the on state of these toggles:</legend>
- <input type="radio" name=" radio-choice-a" id="radio-choice-a" value="on" checked="checked" />
- <label for="radio-choice-a">On</label>
- <input type="radio" name=" radio-choice-a" id="radio-choice-b" value="off" />
- <label for="radio-choice-b">Off</label>
- </fieldset>
-
-
- <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>
- <li><a href="../toolbars/bars-themes.html">Toolbar theming</a></li>
- <li><a href="../content/content-themes.html">Content theming</a></li>
- <li><a href="../buttons/buttons-themes.html">Button theming</a></li>
- <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 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 & 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>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Buttons</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Button API</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">
-
- <h2>Dependencies</h2>
- <p>To be documented</p>
-
- <h2>Options</h2>
- <p>To be documented</p>
-
- <h2>Methods</h2>
- <p>To be documented</p>
-
- <h2>Known Issues</h2>
- <p>To be documented</p>
-
-
-
- </div><!-- /content -->
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Button events</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Button basics</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">
-
- <form action="#" method="get">
-
- <h2>Button basics</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="buttons-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
- </ul>
-
- <p>Bind events directly to the <code>a</code>, <code>input</code>, or <code>button</code> element. Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
- <pre><code>
-$( ".myButton" ).bind( "click", function(event, ui) {
- ...
-});
-</code></pre>
-
- <p>The <strong>form button</strong> plugin has the following custom events:</p>
-
- <dl>
-
- <dt><code>create</code> triggered when a form button is created</dt>
- <dd>
-
- <pre><code>
-$('[type='submit']').button({
- create: function(event, ui) { ... }
-});
- </code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Buttons</li>
- <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
- <li><a href="buttons-icons.html">Button icons</a></li>
- <li><a href="buttons-inline.html">Inline buttons</a></li>
- <li><a href="buttons-grouped.html">Grouped buttons</a></li>
- <li><a href="buttons-themes.html">Theming buttons</a></li>
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Grouped Buttons</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Grouped buttons</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>Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code> data-role="controlgroup"</code> attribute — the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
-<pre><code>
-<div data-role="controlgroup">
-<a href="index.html" data-role="button">Yes</a>
-<a href="index.html" data-role="button">No</a>
-<a href="index.html" data-role="button">Maybe</a>
-</div>
-</code></pre>
-
- <p>By default, grouped buttons are presented as a vertical list:</p>
-
- <div data-role="controlgroup">
- <a href="index.html" data-role="button">Yes</a>
- <a href="index.html" data-role="button">No</a>
- <a href="index.html" data-role="button">Maybe</a>
- </div>
-
- <p>By adding the <code>data-type="horizontal"</code> attribute to the <code>controlgroup</code> container, you can swap to a horizontal-style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. (Be aware that these will wrap to multiple lines if the number of buttons or the overall text length is too wide for the screen.)
-
- <p>Horizontal grouped buttons:</p>
- <div data-role="controlgroup" data-type="horizontal">
- <a href="index.html" data-role="button">Yes</a>
- <a href="index.html" data-role="button">No</a>
- <a href="index.html" data-role="button">Maybe</a>
- </div>
-
- <p>Horizontal grouped buttons with icons:</p>
- <div data-role="controlgroup" data-type="horizontal" >
- <a href="index.html" data-role="button" data-icon="plus">Add</a>
- <a href="index.html" data-role="button" data-icon="delete">Delete</a>
- </div>
-
- <p>Horizontal grouped buttons, icon only:</p>
- <div data-role="controlgroup" data-type="horizontal" >
- <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
- <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
- <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
- </div>
-
-
- </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">Buttons</li>
- <li><a href="buttons-types.html">Button basics</a></li>
- <li><a href="buttons-icons.html">Button icons</a></li>
- <li><a href="buttons-inline.html">Inline buttons</a></li>
- <li data-theme="a"><a href="buttons-grouped.html">Grouped buttons</a></li>
- <li><a href="buttons-themes.html">Theming buttons</a></li>
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Button icons</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Button icons</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>Adding Icons to Buttons</h2>
- <p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.</p>
-
-
- <p>An icon can be added to a button by adding a <code> data-icon</code> attribute on the anchor specifying the icon to display. For example, the following markup:</p>
-
- <code>
- <a href="index.html" data-role="button" <strong> data-icon="delete"</strong>>Delete</a>
- </code>
-
- <p>Creates this button with an icon:</p>
- <a href="index.html" data-role="button" data-icon="delete">Delete</a>
-
- <h2>Icon set</h2>
-
- <p>The following <code> data-icon</code> attributes can be referenced to create the icons shown below:</p>
-
- <p><strong>Left arrow</strong> - data-icon="arrow-l"</p>
- <a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
- <p><strong>Right arrow</strong> - data-icon="arrow-r"</p>
- <a href="index.html" data-role="button" data-icon="arrow-r">My button</a>
- <p><strong>Up arrow</strong> - data-icon="arrow-u"</p>
- <a href="index.html" data-role="button" data-icon="arrow-u">My button</a>
- <p><strong>Down arrow</strong> - data-icon="arrow-d"</p>
- <a href="index.html" data-role="button" data-icon="arrow-d">My button</a>
- <p><strong>Delete</strong> - data-icon="delete"</p>
- <a href="index.html" data-role="button" data-icon="delete">My button</a>
- <p><strong>Plus</strong> - data-icon="plus"</p>
- <a href="index.html" data-role="button" data-icon="plus">My button</a>
- <p><strong>Minus</strong> - data-icon="minus"</p>
- <a href="index.html" data-role="button" data-icon="minus">My button</a>
- <p><strong>Check</strong> - data-icon="check"</p>
- <a href="index.html" data-role="button" data-icon="check">My button</a>
- <p><strong>Gear</strong> - data-icon="gear"</p>
- <a href="index.html" data-role="button" data-icon="gear">My button</a>
- <p><strong>Refresh</strong> - data-icon="refresh"</p>
- <a href="index.html" data-role="button" data-icon="refresh">My button</a>
- <p><strong>Forward</strong> - data-icon="forward"</p>
- <a href="index.html" data-role="button" data-icon="forward">My button</a>
- <p><strong>Back</strong> - data-icon="back"</p>
- <a href="index.html" data-role="button" data-icon="back">My button</a>
- <p><strong>Grid</strong> - data-icon="grid"</p>
- <a href="index.html" data-role="button" data-icon="grid">My button</a>
- <p><strong>Star</strong> - data-icon="star"</p>
- <a href="index.html" data-role="button" data-icon="star">My button</a>
- <p><strong>Alert</strong> - data-icon="alert"</p>
- <a href="index.html" data-role="button" data-icon="alert">My button</a>
- <p><strong>Info</strong> - data-icon="info"</p>
- <a href="index.html" data-role="button" data-icon="info">My button</a>
- <p><strong>Home</strong> - data-icon="home"</p>
- <a href="index.html" data-role="button" data-icon="home">My button</a>
- <p><strong>Search</strong> - data-icon="search"</p>
- <a href="index.html" data-role="button" data-icon="search">My button</a>
-
-
- <h2>Icon positioning</h2>
- <p>By default, all icons in buttons are placed to the left of the button text. </p>
- <a href="index.html" data-role="button" data-icon="delete" data-iconpos="left">Delete</a>
-
- <p>This default may be overridden using the <code> data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p>
-
-<code>
-<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="right"</strong>>Delete</a>
-</code>
-
- <p>Creates this button with right-aligned icon:</p>
- <a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
-
- <p>Icons can also be positioned above the text by specifying <code> data-iconpos="top"</code></p>
- <a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">Delete</a>
-
- <p>Or icons can also be positioned below the text by specifying <code> data-iconpos="bottom"</code></p>
- <a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">Delete</a>
-
- <p>You can also create an icon-only button, by setting the <code> data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code> data-iconpos="right"</code> on the previous example with <code> data-iconpos="notext"</code>:</p>
-
-<code>
-<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="notext"</strong>>Delete</a>
-</code>
-
- <p>Creates this icon-only button:</p>
- <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
-
- <h2>Custom Icons</h2>
- <p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code> data-icon</code> value and apply it to the button: <code>ui-icon-myapp-email</code>. </p>
- <p>You can then write a CSS rule in your stylesheet that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
- <p> In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.</p>
-
-<pre><code>.ui-icon-myapp-email {
- background-image: url("app-icon-email.png");
-}</code></pre>
-
- <p>This will create the standard resolution icon, but many devices now have very high resolution displays, like the retina display on the iPhone 4. To add a HD icon, create an icon that is 36x36 pixels (exactly double the 18 pixel size), and add second rule that uses the <code>-webkit-min-device-pixel-ratio: 2</code> media query to target a rule only to high resolution displays. Specify the background image for the HD icon file and set the background size to 18x18 pixels which will fit the 36 pixel icon into the same 18 pixel space. The media query block can wrap multiple icon rules:</p>
-<pre><code>
-@media only screen and (-webkit-min-device-pixel-ratio: 2) {
- .ui-icon-myapp-email {
- background-image: url("app-icon-email-highres.png");
- background-size: 18px 18px;
- }
- ...more HD icon rules go here...
-}
-</code></pre>
-
- <h2>Icons and themes</h2>
- <p>The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches in out theme.</p>
-
- <!-- A themed -->
- <p><strong>Swatch "A"</strong> themed buttons</p>
- <div data-role="controlgroup" data-type="horizontal">
- <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
- </div>
-
- <!-- B themed -->
- <p><strong>Swatch "B"</strong> themed buttons</p>
- <div data-role="controlgroup" data-type="horizontal">
- <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
- </div>
-
- <!-- C themed -->
- <p><strong>Swatch "C"</strong> themed buttons</p>
- <div data-role="controlgroup" data-type="horizontal">
- <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
- </div>
-
- </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">Buttons</li>
- <li><a href="buttons-types.html">Button basics</a></li>
- <li data-theme="a"><a href="buttons-icons.html">Button icons</a></li>
- <li><a href="buttons-inline.html">Inline buttons</a></li>
- <li><a href="buttons-grouped.html">Grouped buttons</a></li>
- <li><a href="buttons-themes.html">Theming buttons</a></li>
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Inline buttons</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Inline buttons</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>By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:</p>
-
- <a href="index.html" data-role="button">Button</a>
-
-
- <p>However, if you want a more compact button that is only as wide as the text and icons inside, add the <code> data-inline="true"</code> attribute to the button:</p>
-
-
- <a href="index.html" data-role="button" data-inline="true">Button</a>
-
- <p>If you have multiple buttons that should sit side-by-side on the same line, add the <code> data-inline="true"</code> attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
-
-<pre><code>
-<a href="index.html" data-role="button" data-inline="true">Cancel</a>
-<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>
-</code></pre>
-
- <p>The result is this:</p>
-
- <a href="index.html" data-role="button" data-inline="true">Cancel</a>
- <a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a>
-
-
- <p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the <a href="../content/content-grids.html">content column grids</a> to put normal full-width buttons into 2- or 3-columns.</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">Buttons</li>
- <li><a href="buttons-types.html">Button basics</a></li>
- <li><a href="buttons-icons.html">Button icons</a></li>
- <li data-theme="a"><a href="buttons-inline.html">Inline buttons</a></li>
- <li><a href="buttons-grouped.html">Grouped buttons</a></li>
- <li><a href="buttons-themes.html">Theming buttons</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Button methods</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Button basics</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">
-
- <form action="#" method="get">
-
- <h2>Button basics</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="buttons-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
- <li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The following methods apply only to <strong>form buttons</strong>. Link-based buttons do not have any associated methods.</p>
-
- <dl>
-
- <dt><code>enable</code> enable a disabled form button</dt>
- <dd>
- <pre><code>
-$('[type='submit']').button('enable');
- </code></pre>
- </dd>
-
- <dt><code>disable</code> disable a form button</dt>
- <dd>
- <pre><code>
-$('[type='submit']').button('disable');
- </code></pre>
- </dd>
-
- <dt><code>refresh</code> update the form button</dt>
- <dd>
- <p>If you manipulate a form button via JavaScript, you must call the refresh method on it to update the visual styling.</p>
-
- <pre><code>
-$('[type='submit']').button('refresh');
- </code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Buttons</li>
- <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
- <li><a href="buttons-icons.html">Button icons</a></li>
- <li><a href="buttons-inline.html">Inline buttons</a></li>
- <li><a href="buttons-grouped.html">Grouped buttons</a></li>
- <li><a href="buttons-themes.html">Theming buttons</a></li>
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Button options</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Button basics</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">
-
- <form action="#" method="get">
-
- <h2>Button basics</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="buttons-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
- <li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The following options apply to <strong>all buttons</strong>:</p>
-
- <dl>
- <dt><code>corners</code> <em>boolean</em></dt>
- <dd>
- <p class="default">default: true</p>
- <p>Applies the theme button border-radius if set to true. This option is also exposed as a data attribute: <code>data-corners="false"</code></p>
- <pre><code>$('a').buttonMarkup(<strong>{ corners: "false" }</strong>);</code></pre>
- <a href="#" data-role="button" data-corners="false">No rounded corners</a>
- </dd>
- <dt><code>icon</code> <em>string</em></dt>
- <dd>
- <p class="default">default: null</p>
- <p>Applies an icon from the <a href="../buttons/buttons-icons.html">icon set</a>. This option is also exposed as a data attribute: <code>data-icon="star"</code></p>
- <pre><code>$('a').buttonMarkup(<strong>{ icon: "star" }</strong>);</code></pre>
- <a href="#" data-role="button" data-icon="star">Star icon</a>
- </dd>
-
- <dt><code>iconpos</code> <em>string</em></dt>
- <dd>
- <p class="default">default: "left"</p>
- <p>Positions the icon in the button. Possible values: left, right, none, notext. The notext value will display an icon-only button with no text feedback. This option is also exposed as a data attribute: <code>data-iconpos="left"</code></p>
- <pre><code>$('a').buttonMarkup(<strong>{ iconpos: "right" }</strong>);</code></pre>
- <a href="#" data-role="button" data-icon="star" data-iconpos="right">Star icon</a>
- </dd>
-
- <dt><code>iconshadow</code> <em>boolean</em></dt>
- <dd>
- <p class="default">default: true</p>
- <p>Applies the theme shadow to the button's icon if set to true. This option is also exposed as a data attribute: <code>data-iconshadow="false"</code></p>
- <pre><code>$('a').buttonMarkup(<strong>{ iconshadow: "false" }</strong>);</code></pre>
- <a href="#" data-role="button" data-icon="star" data-iconshadow="false">No icon shadow</a>
- </dd>
-
- <dt><code>inline</code> <em>boolean</em></dt>
- <dd>
- <p class="default">default: null (false)</p>
- <p>If set to true, this will make the button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the button is full width, regardless of the feedback content. Possible values: true, false. This option is also exposed as a data attribute: <code>data-inline="true"</code></p>
- <pre><code>$('a').buttonMarkup(<strong>{ inline: "true" }</strong>);</code></pre>
- <a href="#" data-role="button" data-inline="true">Inline</a>
- </dd>
-
- <dt><code>shadow</code> <em>boolean</em></dt>
- <dd>
- <p class="default">default: true</p>
- <p>Applies the drop shadow style to the button if set to true. This option is also exposed as a data attribute: <code>data-shadow="false"</code></p>
- <pre><code>$('a').buttonMarkup(<strong>{ shadow: "false" }</strong>);</code></pre>
- <a href="#" data-role="button" data-shadow="false">No button shadow</a>
- </dd>
-
- <dt><code>theme</code> <em>string</em></dt>
- <dd>
- <p class="default">default: null, inherited from parent</p>
- <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
- <pre><code>$('a').buttonMarkup(<strong>{ theme: "a" }</strong>);</code></pre>
- <a href="#" data-role="button" data-theme="a">Theme A</a>
- </dd>
- </dl>
-
- <div class="ui-body ui-body-e">
- <p>The following option applies only to <strong>form buttons</strong>, which are automatically initialized by the framework:</p>
- </div>
-
- <dl>
- <dt><code>initSelector</code> <em>CSS selector string</em></dt>
- <dd>
- <p class="default">default: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"</p>
- <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as form buttons. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.button.prototype.options.initSelector = ".myButtons";</strong>
-});
-</code></pre>
- </dd>
- </dl>
-
-
- </form>
- </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">Buttons</li>
- <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
- <li><a href="buttons-icons.html">Button icons</a></li>
- <li><a href="buttons-inline.html">Inline buttons</a></li>
- <li><a href="buttons-grouped.html">Grouped buttons</a></li>
- <li><a href="buttons-themes.html">Theming buttons</a></li>
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Theming buttons</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Theming buttons</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>Theming buttons</h2>
-
- <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
-
- <div class="ui-body ui-body-a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div>
- <div class="ui-body ui-body-b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div>
- <div class="ui-body ui-body-c"><h4>C swatch</h4><a href="index.html" data-role="button">Button</a></div>
- <div class="ui-body ui-body-d"><h4>D swatch</h4><a href="index.html" data-role="button">Button</a></div>
- <div class="ui-body ui-body-e"><h4>E swatch</h4><a href="index.html" data-role="button">Button</a></div>
-
- <h2>Assigning theme swatches</h2>
- <p>Buttons can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code> data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
-
-<pre><code>
-<a href="index.html" data-role="button" data-theme="a">Theme a</a>
-</code></pre>
-
- <p>Here are 5 buttons with icons that have a different swatch letter assigned via the <code> data-theme</code> attribute.</p>
-
- <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
- <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
- <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
- <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
- <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
-
- <h2>Theme variations</h2>
-
- <p><strong>"a" theme</strong> on container with themed buttons inside</p>
- <div class="ui-body ui-body-a">
- <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
- <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
- <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
- <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
- <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
- </div>
-
- <p><strong>"b" theme</strong> on container with themed buttons inside</p>
- <div class="ui-body ui-body-b">
- <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
- <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
- <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
- <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
- <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
- </div>
-
- <p><strong>"c" theme</strong> on container with themed buttons inside</p>
- <div class="ui-body ui-body-c">
- <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
- <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
- <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
- <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
- <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
- </div>
-
- <p><strong>"d" theme</strong> on container with themed buttons inside</p>
- <div class="ui-body ui-body-d">
- <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
- <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
- <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
- <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
- <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
- </div>
-
- <p><strong>"e" theme</strong> on container with themed buttons inside</p>
- <div class="ui-body ui-body-e">
- <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
- <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
- <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
- <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
- <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
- </div>
-
- </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">Buttons</li>
- <li><a href="buttons-types.html">Button basics</a></li>
- <li><a href="buttons-icons.html">Button icons</a></li>
- <li><a href="buttons-inline.html">Inline buttons</a></li>
- <li><a href="buttons-grouped.html">Grouped buttons</a></li>
- <li data-theme="a"><a href="buttons-themes.html">Theming buttons</a></li>
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Button types</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Button basics</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>Button basics</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="buttons-types.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
- <li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
-
- <p>Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (<code>a</code> elements) to mark up navigation buttons, and <code>input</code> or <code>button</code> elements for form submission. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to buttons.</p>
-
- <h2>Styling links as buttons</h2>
-
- <p>In the main content block of a page, you can style any anchor link as a button by adding the <code>data-role="button"</code> attribute. The framework will enhance the link with markup and classes to style the link as a button. For example, this markup: </p>
-
-<code>
-<a href="index.html" data-role="button">Link button</a>
-</code>
-
- <p>Produces this <strong>link-based</strong> button:</p>
- <a href="index.html" data-role="button">Link button</a>
-
- <p>Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the <code>button</code> plugin and only just use the underlying <code>buttonMarkup</code> plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.</p>
-
- <h2>Form buttons</h2>
- <p>For ease of styling, the framework automatically converts any <code>button</code> or <code>input</code> element with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> into a custom styled button — there is no need to add the <code> data-role="button"</code> attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:</p>
-
-<code>
-$('[type='submit']').button();
-</code>
-
- <p>To preserve events bound to the original <code>button</code> or <code>input</code>, the framework hides the original element by making it transparent and positioning it over the new button markup. When a user clicks on the the custom-styled button, they're actually clicking on the original element. To prevent a form button from being converted into an enhanced button, add the <code>data-role="none"</code> attribute and hte native control will be rendered.</p>
-
- <p><strong>Button</strong> based button:</p>
- <button>Button element</button>
-
- <p><strong>Input type="button"</strong> based button:</p>
- <input type="button" value="buttonBtn" />
-
- <p><strong>Input type="submit"</strong> based button:</p>
- <input type="submit" value="submitBtn" />
-
- <p><strong>Input type="reset"</strong> based button:</p>
- <input type="reset" value="resetBtn" />
-
- <p><strong>Input type="image"</strong> based button:</p>
- <input type="image" value="imageBtn" />
-
- </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">Buttons</li>
- <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
- <li><a href="buttons-icons.html">Button icons</a></li>
- <li><a href="buttons-inline.html">Inline buttons</a></li>
- <li><a href="buttons-grouped.html">Grouped buttons</a></li>
- <li><a href="buttons-themes.html">Theming buttons</a></li>
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Buttons</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Buttons</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">
- <p>Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins.</p>
-
- <ul data-role="listview" data-inset="true">
- <li><a href="buttons-types.html">Button basics</a></li>
- <li><a href="buttons-icons.html">Button icons</a></li>
- <li><a href="buttons-inline.html">Inline buttons</a></li>
- <li><a href="buttons-grouped.html">Grouped buttons</a></li>
- <li><a href="buttons-themes.html">Theming buttons</a></li>
- </ul>
- </div>
- </div><!-- /content -->
-
-
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Configuration</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script>
- $(document).bind("mobileinit", function(){
- $.mobile.defaultDialogTransition = 'flip';
- });
- </script>
-
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Config applied</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">
-
- <h2>defaultDialogTransition is now "flip"</h2>
- <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
- <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
- <a href="../pages/dialog.html" data-role="button" data-rel="dialog">Or open a basic dialog</a>
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <link rel="apple-touch-icon" href="../_assets/images/ios_icon.png"/>
- <link rel="apple-touch-startup-image" href="../_assets/images/ios_startup.png" />
- <title>jQuery Mobile Docs - Configuration</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script>
- $(document).bind("mobileinit", function() {
- if (!!window.navigator.standalone) {
- $.mobile.page.prototype.options.addBackBtn = true;
- }
- });
- </script>
-
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>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">
-
- <h2>Fullscreen docs in iOS</h2>
- <p>First, hit Add to Home Screen to create a new shortcut icon on the home screen. Next, open the new shortcut and hit the button below to browse the docs as a fullscreen web app.</p>
- <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
-
- </div>
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Configuration</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Pages</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">
- <h2>Global config tests</h2>
- <p>The following links will cause a full page refresh so that the global options configuration can take effect. Each link below will tweak a different option for quick testing.</p>
-
-
- <ul data-role="listview" data-inset="true">
- <li>
- <a href="pushState.html" data-ajax="false">
- <h3>pushStateEnabled - False</h3>
- <p>Enhancement to use history.replaceState in supported browsers, to convert the hash-based Ajax URL into the full document path. </p>
- </a>
- </li>
- <li>
- <a href="touchOverflow.html" data-ajax="false">
- <h3>touchOverflowEnabled - True</h3>
- <p>Enable smoother page transitions and true fixed toolbars in devices that support both the overflow: and overflow-scrolling: touch; CSS properties.</p>
- </a>
- </li>
- <li>
- <a href="pageTransition.html" data-ajax="false">
- <h3>defaultPageTransition - Fade</h3>
- <p>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</p>
- </a>
- </li>
- <li>
- <a href="dialogTransition.html" data-ajax="false">
- <h3>defaultDialogTransition - Flip</h3>
- <p>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.</p>
- </a>
- </li>
- <li>
- <a href="minScrollBack.html" data-ajax="false">
- <h3>minScrollBack - 999</h3>
- <p>Minimum scroll distance that will be remembered when returning to a page.</p>
- </a>
- </li>
- <li>
- <a href="loadingMessage.html" data-ajax="false">
- <h3>loadingMessage - false</h3>
- <p>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</p>
- </a>
- </li>
- <li>
- <a href="pageLoadErrorMessage.html" data-ajax="false">
- <h3>pageLoadErrorMessage - "Yikes, we broke the internet!"</h3>
- <p>Set the text that appears when a page fails to load through Ajax.</p>
- </a>
- </li>
- <li>
- <a href="iOSFullscreen.html" data-ajax="false">
- <h3>apple-mobile-web-app-capable meta tag</h3>
- <p>View the docs without browser chrome in iOS.</p>
- </a>
- </li>
- <li>
- <a href="jq17b1.html" data-ajax="false">
- <h3>jQuery core version 1.7 Beta 1</h3>
- <p>Test the docs with the latest jQuery core version</p>
- </a>
- </li>
- </ul>
-
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Configuration</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="http://code.jquery.com/jquery-1.7b1.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>jQuery version</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">
-
- <h2>jQuery core version 1.7 Beta 1</h2>
- <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
- <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
-
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Configuration</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script>
- $(document).bind("mobileinit", function(){
- $.mobile.loadingMessage = false;
- });
- </script>
-
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Config applied</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">
-
- <h2>loadingMessage is now disabled</h2>
- <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
- <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
-
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Configuration</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script>
- $(document).bind("mobileinit", function(){
- $.mobile.minScrollBack = 999;
- });
- </script>
-
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Config applied</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">
-
- <h2>minScrollBack is now set to 999 (disabled)</h2>
- <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
- <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
-
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Configuration</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script>
- $(document).bind("mobileinit", function(){
- $.mobile.pageLoadErrorMessage = 'Yikes, we broke the internet!';
- });
- </script>
-
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Config applied</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">
-
- <h2>pageLoadErrorMessage is now "Yikes, we broke the internet!"</h2>
- <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
- <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
- <a href="broken.html" data-role="button" data-rel="dialog">Or try this broken link</a>
-
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Configuration</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script><!-- Moving the docs JS up here because it was overriding with my override -->
-
- <script>
- $(document).bind("mobileinit", function(){
- $.mobile.defaultPageTransition = 'fade';
- });
- </script>
-
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Config applied</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">
-
- <h2>defaultPageTransition is now "fade"</h2>
- <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
- <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Configuration</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script>
- $(document).bind("mobileinit", function(){
- $.mobile.pushStateEnabled = false;
- });
- </script>
-
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Config applied</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">
-
- <h2>pushStateEnabled is now disabled</h2>
- <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
- <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
-
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Configuration</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script>
- $(document).bind("mobileinit", function(){
- $.mobile.touchOverflowEnabled = true;
- });
- </script>
-
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f" data-position="fixed">
- <h1>Config applied</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">
-
- <h2>touchOverflowEnabled is now active</h2>
- <p>The toolbar on this page should now be fixed, like a native toolbar. To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
- <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
- <a href="../pages/touchoverflow.html" data-role="button" data-icon="arrow-r" data-iconpos="right">touchOverflow docs</a>
-
- <h3>Some good pages to test out:</h3>
- <a href="../toolbars/bars-fixed.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed toolbars</a>
- <a href="../toolbars/bars-fullscreen.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fullscreen toolbars</a>
- <a href="../toolbars/footer-persist-a.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed persistent footer</a>
- <a href="../pages/page-dialogs.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Dialogs & transitions</a>
-
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Content formatting</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Content formatting API</h1>
- </div><!-- /header -->
-
- <div data-role="content" data-theme="c">
-
- <h2>Dependencies</h2>
- <p>To be documented</p>
-
- <h2>Options</h2>
- <p>To be documented</p>
-
- <h2>Methods</h2>
- <p>To be documented</p>
-
- <h2>Known Issues</h2>
- <p>To be documented</p>
-
-
-
- </div><!-- /content -->
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Collapsible Content</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Collapsible sets (Accordions)</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>Collapsible set markup</h2>
- <p>Collapsible sets start with the exact same markup as <a href="content-collapsible.html">individual collapsibles</a>. By adding a parent wrapper with a <code> data-role="collapsible-set"</code> attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsible sets.</p>
- <p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
-
- <pre><code>
-<strong><div data-role="collapsible-set"></strong>
-
- <div data-role="collapsible" <strong>data-collapsed="false"</strong>>
- <h3>Section 1</h3>
- <p>I'm the collapsible set content for section B.</p>
- </div>
-
- <div data-role="collapsible">
- <h3>Section 2</h3>
- <p>I'm the collapsible set content for section B.</p>
- </div>
-
-<strong></div></strong>
- </code></pre>
-
-
- <p>Here is an example of a collapsible set with 5 sections.</p>
-
- <div data-role="collapsible-set">
- <div data-role="collapsible" data-collapsed="false">
- <h3>Section 1</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
- </div>
- <div data-role="collapsible">
- <h3>Section 2</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- <div data-role="collapsible">
- <h3>Section 3</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- <div data-role="collapsible">
- <h3>Section 4</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- <div data-role="collapsible">
- <h3>Section 5</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- </div>
-
- <h2>Theming collapsible content</h2>
- <p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>
-
-
-<pre><code>
-<div data-role="collapsible-set" <strong>data-theme="c" data-content-theme="d"</strong>>
-</code></pre>
-
-
- <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
- <div data-role="collapsible">
- <h3>Section 1</h3>
- <p>Collapsible content</p>
- </div>
- <div data-role="collapsible">
- <h3>Section 2</h3>
- <p>Collapsible content</p>
-
- </div>
- <div data-role="collapsible">
- <h3>Section 3</h3>
- <p>Collapsible content</p>
- </div>
- </div>
-
-
- <h2>Theming individual sections</h2>
- <p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>
-
- <div data-role="collapsible-set" data-content-theme="c">
- <div data-role="collapsible" data-theme="b" data-content-theme="b">
- <h3>Section header, swatch B</h3>
- <p>Collapsible content, swatch B</p>
-
- </div>
- <div data-role="collapsible" data-theme="a" data-content-theme="a">
- <h3>Section header, swatch A</h3>
- <p>Collapsible content, swatch A</p>
- </div>
- <div data-role="collapsible" data-theme="e" data-content-theme="d">
- <h3>Section header, swatch E</h3>
- <p>Collapsible content, swatch D</p>
- </div>
- </div>
-
- </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">Content Formatting</li>
- <li><a href="content-html.html">Basic HTML styles</a></li>
- <li><a href="content-grids.html">Layout grids (columns)</a></li>
- <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
- <li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
- <li><a href="content-themes.html">Theming content</a></li>
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Collapsible Content</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Collapsible content</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>Collapsible content markup</h2>
- <p>To create a collapsible block of content, create a container and add the <code> data-role="collapsible"</code> attribute. Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsibles.</p>
-
- <p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
-
- <p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>
-
- <p>By default, the content will be collapsed.</p>
-<pre><code>
-<div <strong>data-role="collapsible"</strong>>
- <h3>I'm a header</h3>
- <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
-</div>
-</code></pre>
-
-
- <div data-role="collapsible">
- <h3>I'm a header</h3>
- <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
- </div>
-
- <h2>Expanding collapsibles on load</h2>
-
- <p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
-
- <code>
- <div data-role="collapsible" <strong>data-collapsed="false"></strong>
- </code>
-
- <p>This code will create a collapsible widget like this:</p>
-
-
- <div data-role="collapsible" data-collapsed="false">
- <h3>I'm a header</h3>
- <p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
- </div>
-
- <h2>Theming collapsible content</h2>
-
-
- <p>Collapsible content is minimally styled — we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
-
- <p>To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This will apply the swatch's border and <em>flat</em> background color (not the gradient) to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.</p>
-
-<pre><code>
-<div data-role="collapsible" <strong>data-content-theme="c"</strong>>
- <h3>Header swatch A</h3>
- <p>I'm the collapsible content with a themed content block set to "C".</p>
-</div>
-</code></pre>
-
- <div data-role="collapsible" data-content-theme="c">
- <h3>Header swatch</h3>
- <p>I'm the collapsible content with a themed content block set to "C".</p>
- </div>
-
- <h2>Theming collapsible headers</h2>
- <p>To set the theme on a collapsible header button, add the <code>data-theme</code> attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.</p>
-
-<pre><code>
-<div data-role="collapsible" <strong>data-theme="a" data-content-theme="a"</strong>>
- <h3>Header swatch A</h3>
- <p>I'm the collapsible content with a themed content block set to "A".</p>
-</div>
-</code></pre>
-
- <div data-role="collapsible" data-theme="a" data-content-theme="a">
- <h3>Header swatch A</h3>
- <p>I'm the collapsible content with a themed content block set to "A".</p>
- </div>
-
-
-
- <div data-role="collapsible" data-theme="b" data-content-theme="d">
- <h3>Header swatch B</h3>
- <p>I'm the collapsible content with a themed content block set to "D".</p>
- </div>
-
-
-
- <h2>Nested Collapsibles</h2>
-
- <p>Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide clearer visual connection between the levels.</p>
- <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
- <h3>I'm a header</h3>
- <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
-
- <div data-role="collapsible" data-theme="c" data-content-theme="c">
- <h3>I'm a nested collapsible with a child collapsible</h3>
- <p>I'm a child collapsible.</p>
- <div data-role="collapsible" data-theme="d" data-content-theme="d">
- <h3>Nested inside again.</h3>
- <p>Three levels deep now.</p>
- </div><!-- /section 1A -->
- </div><!-- /section 1 -->
-
-
- <div data-role="collapsible" data-content-theme="c">
- <h3>Section 3: Form elements</h3>
- <form action="#" method="get">
- <div data-role="fieldcontain">
- <label for="textarea">Textarea:</label>
- <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
- </div>
- <div data-role="fieldcontain">
- <label for="slider">Input slider:</label>
- <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
- </div>
- <fieldset class="ui-grid-a">
- <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
- <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
- </fieldset>
- </form>
- </div><!-- /section 2 -->
-
- <div data-role="collapsible" data-content-theme="c">
- <h3>Section 4: Collapsed list</h3>
- <p>Here is an inset list:</p>
- <ul data-role="listview" data-inset="true" data-theme="d">
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- </ul>
- </div><!-- /section 3 -->
- </div>
-
-
-
- <h2>Collapsible sets (accordions)</h2>
- <p>It's possible to combine multiple collapsibles into a grouped sets that acts like an accordion widget. <a href="content-collapsible-set.html">Learn more</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">Content Formatting</li>
- <li><a href="content-html.html">Basic HTML styles</a></li>
- <li><a href="content-grids.html">Layout grids (columns)</a></li>
- <li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
- <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
- <li><a href="content-themes.html">Theming content</a></li>
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Content Grids</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Layout grids</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>Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). </p>
-
- <p>The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called <code>ui-grid</code>. </p>
-
- <p>There are four preset configurations layouts that can be used in any situation that requires columns:</p>
- <ul>
- <li><strong>two</strong>-column (using the <code>ui-grid-a</code> class)</li>
- <li><strong>three</strong>-column (using the <code>ui-grid-b</code> class)</li>
- <li><strong>four</strong>-column (using the <code>ui-grid-c</code> class)</li>
- <li><strong>five</strong>-column (using the <code>ui-grid-d</code> class)</li>
- </ul>
-
- <p>Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them. </p>
- <p>Within the grid container, child elements are assigned <code>ui-block-a/b/c/d</code> in a sequential manner which makes each "block" element float side-by-side, forming the grid. The <code>ui-block-a</code> class essentially clears the floats which will start a new line (see multiple row grids, below).</p>
-
- <h2>Two column grids</h2>
- <p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code>, and add two child containers inside it classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second:</p>
-
-<pre><code>
-<div class="ui-grid-a">
- <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
- <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
-</div><!-- /grid-a -->
-</code></pre>
-
-
-
- <p>The above markup produces the following content layout:</p>
-
- <div class="ui-grid-a">
- <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
- <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
- </div><!-- /grid-a -->
-
- <p>As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.</p>
-
- <p>Grid classes can be applied to any container. In this next example, we add <code>ui-grid-a</code> to a <code>fieldset</code>, and apply the <code>ui-block</code> classes to the two buttons inside to stretch them each to 50% of the screen width:</p>
-
-<pre><code>
-<fieldset class="ui-grid-a">
- <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
- <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
-</fieldset>
-</code></pre>
-
- <fieldset class="ui-grid-a">
- <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
- <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
- </fieldset>
-
-
- <p>Theme classes (not data-theme attributes) from the <a href="../api/themes.html">theming system</a> can be added to an element, including grids. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-e</code> to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline <code>style="height:120px"</code> attribute is also added to each grid to set each to a standard height. </p>
-
- <div class="ui-grid-a">
- <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
- <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
- </div><!-- /grid-a -->
-
- <h2>Three-column grids</h2>
- <p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%). Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
-
-<pre><code>
-<div class="ui-grid-b">
- <div class="ui-block-a">Block A</div>
- <div class="ui-block-b">Block B</div>
- <div class="ui-block-c">Block C</div>
-</div><!-- /grid-b -->
-</code></pre>
-
- <p>This will produce a 33/33/33% grid for our content.</p>
-
- <div class="ui-grid-b">
- <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
- <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
- <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
- </div><!-- /grid-b -->
-
- <p>And an example of a 3 column grid with buttons inside:</p>
-
- <fieldset class="ui-grid-b">
- <div class="ui-block-a"><button type="submit" data-theme="c">Hmm</button></div>
- <div class="ui-block-b"><button type="submit" data-theme="a">No</button></div>
- <div class="ui-block-b"><button type="submit" data-theme="b">Yes</button></div>
- </fieldset>
-
- <h2>Four-column grids</h2>
-
- <p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
-
- <div class="ui-grid-c">
- <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
- <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
- <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
- <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
- </div><!-- /grid-c -->
-
- <h2>Five-column grids</h2>
- <p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
-
- <div class="ui-grid-d">
- <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
- <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
- <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
- <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
- <div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
- </div><!-- /grid-c -->
-
- <h2>Multiple row grids</h2>
-
- <p>Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the <code>class=ui-block-a</code> is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:</p>
-
- <div class="ui-grid-b">
- <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
- <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
- <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
- <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
- <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
- <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
- <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
- <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
- <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
- </div><!-- /grid-c -->
-
-
- <h2>Grids in toolbars</h2>
- <p>Grids are helpful for creating layouts within a toolbar. Here's a footer with a 3 column grid.</p>
- <!-- NOTE: Inline styles are for demo purposes only, please use external styles -->
- <div data-role="footer" data-theme="a" class="ui-bar ui-grid-c">
- <div class="ui-block-a"><h3 style="margin-top:10px;">Settings</h3></div>
- <div class="ui-block-b"><label for="value" style="margin:8px 10px 0 0; text-align:right;">Price</label> </div>
- <div class="ui-block-c"><input id="value" value="5,000"></div>
- <div class="ui-block-d"><div style="margin:6px 0 0 10px;"><button type="submit" data-theme="b">Update</button></div></div>
- </div><!-- /footer -->
-
-
- </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">Content Formatting</li>
- <li><a href="content-html.html">Basic HTML styles</a></li>
- <li data-theme="a"><a href="content-grids.html">Layout grids (columns)</a></li>
- <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
- <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
- <li><a href="content-themes.html">Theming content</a></li>
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - HTML formatting</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>HTML Formatting</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">
- <style>
- table { width:100%; }
- table caption { text-align:left; }
- table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
- table th, td { text-align:left; padding:6px;}
- </style>
-
-
-
-
- <p>The default approach to styling content in jQuery Mobile is simple: Use a light hand. Our goal is to let the browser's native rendering take precedence; we add a bit of padding for more comfortable readability, and use the <a href="../api/themes.html">theming system</a> to apply the font family and colors. </p>
- <p>Taking a light hand with content styling gives designers and developers a clean slate to work with, instead of fighting against a lot of complex style overhead.</p>
-
- <h2>Default HTML markup styling</h2>
- <p>By default, jQuery Mobile themes use standard HTML styles and sizes for standard markup elements like headers, paragraph content, block quotes, anchor links, standard ordered, unordered and definition lists, and tables — as shown in the examples below:</p>
- <hr>
-
- <h1>H1 Heading</h1>
- <h2>H2 Heading</h2>
- <h3>H3 Heading</h3>
- <h4>H4 Heading</h4>
- <h5>H5 Heading</h5>
- <h6>H6 Heading</h6>
-
- <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
-
- <blockquote>How about some blockquote action with a <cite>cite</cite></blockquote>
-
- <p>This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.</p>
-
- <p>We add a few styles to <code>tables</code> and <code>fieldsets</code> to make them more legible, which are easily overridden with customs styles.</p>
-
- <ul>
- <li>Unordered list item 1</li>
- <li>Unordered list item 1</li>
- <li>Unordered list item 1</li>
- </ul>
-
- <ol>
- <li>Ordered list item 1</li>
- <li>Ordered list item 1</li>
- <li>Ordered list item 1</li>
- </ol>
-
- <dl title="Definition list">
- <dt>Definition term</dt>
- <dd>I'm the definition text</dd>
- <dt>Definition term</dt>
- <dd>I'm the definition text</dd>
- </dl>
-
-
-
- <table summary="This table lists all the JetBlue flights.">
- <caption>Travel Itinerary</caption>
- <thead>
- <tr>
- <th scope="col">Flight:</th>
- <th scope="col">From:</th>
- <th scope="col">To:</th>
- </tr>
- </thead>
- <tfoot>
- <tr>
- <td colspan="5">Total: 3 flights</td>
- </tr>
- </tfoot>
- <tbody>
- <tr>
- <th scope="row">JetBlue 983</th>
- <td>Boston (BOS)</td>
- <td>New York (JFK)</td>
- </tr>
- <tr>
- <th scope="row">JetBlue 354</th>
- <td>San Francisco (SFO)</td>
- <td>Los Angeles (LAX)</td>
- </tr>
- <tr>
- <th scope="row">JetBlue 465</th>
- <td>New York (JFK)</td>
- <td>Portland (PDX)</td>
- </tr>
- </tbody>
- </table>
-
-
- </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">Content Formatting</li>
- <li data-theme="a"><a href="content-html.html">Basic HTML styles</a></li>
- <li><a href="content-grids.html">Layout grids (columns)</a></li>
- <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
- <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
- <li><a href="content-themes.html">Theming content</a></li>
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Content Themes</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Theming content</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>Theming the content area</h2>
- <p>The main content area of a page (container with the <code> data-role="content"</code> attribute) should be themed by adding the <code> data-theme</code> attribute to the <code> data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add the <code> data-theme</code> attribute to the content container, the background color will stop after the content. So there may be a gap in color between the content and fixed footer.)</p>
- <p>Additionally, the content area of a collapsible can be themed to match the theme of the collapsible header using the <code>data-content-theme</code> attribute.</p>
-
-<code>
-<div data-role="page" <strong> data-theme="a"</strong> <strong>data-content-theme="a"</strong>>
-</code>
-
- <h2>Theming collapsible blocks</h2>
- <p>To set the color of the collapsible header, add the <code> data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>
-
-<code>
-<div data-role="collapsible" data-collapsed="true" <strong> data-theme="a"></strong>
-</code>
- <h2>Themed examples</h2>
-
- <p><strong>A</strong> theme swatch on content & collapsible</p>
- <div class="ui-body ui-body-a">
- <h1>H1 Heading</h1>
- <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
- <div data-role="collapsible" data-collapsed="true" data-theme="a">
- <h3>I'm a themed collapsible</h3>
- <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
- </div><!-- /collapsible -->
- <div data-role="collapsible" data-theme="a" data-content-theme="a">
- <h3>I'm a themed collapsible with a themed content</h3>
- <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
- </div>
- </div><!-- /themed container -->
-
- <p><strong>B</strong> theme swatch on content & collapsible</p>
- <div class="ui-body ui-body-b">
- <h1>H1 Heading</h1>
- <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
- <h3>I'm a themed collapsible</h3>
- <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
- </div><!-- /collapsible -->
- <div data-role="collapsible" data-theme="b" data-content-theme="b">
- <h3>I'm a themed collapsible with a themed content</h3>
- <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
- </div>
- </div><!-- /themed container -->
-
- <p><strong>C</strong> theme swatch on content & collapsible</p>
- <div class="ui-body ui-body-c">
- <h1>H1 Heading</h1>
- <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
- <div data-role="collapsible" data-collapsed="true" data-theme="c">
- <h3>I'm a themed collapsible</h3>
- <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
- </div><!-- /collapsible -->
- <div data-role="collapsible" data-theme="c" data-content-theme="c">
- <h3>I'm a themed collapsible with a themed content</h3>
- <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
- </div>
- </div><!-- /themed container -->
-
- <p><strong>D</strong> theme swatch on content & collapsible</p>
- <div class="ui-body ui-body-d">
- <h1>H1 Heading</h1>
- <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
- <div data-role="collapsible" data-collapsed="true" data-theme="d">
- <h3>I'm a themed collapsible</h3>
- <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
- </div><!-- /collapsible -->
- <div data-role="collapsible" data-theme="d" data-content-theme="d">
- <h3>I'm a themed collapsible with a themed content</h3>
- <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
- </div>
- </div><!-- /themed container -->
-
- <p><strong>E</strong> theme swatch on content & collapsible</p>
- <div class="ui-body ui-body-e">
- <h1>H1 Heading</h1>
- <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
- <div data-role="collapsible" data-collapsed="true" data-theme="e">
- <h3>I'm a themed collapsible</h3>
- <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
- </div><!-- /collapsible -->
- <div data-role="collapsible" data-theme="e" data-content-theme="e">
- <h3>I'm a themed collapsible with a themed content</h3>
- <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
- </div>
- </div><!-- /themed container -->
-
-
- </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">Content Formatting</li>
- <li><a href="content-html.html">Basic HTML styles</a></li>
- <li><a href="content-grids.html">Layout grids (columns)</a></li>
- <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
- <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
- <li data-theme="a"><a href="content-themes.html">Theming content</a></li>
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Content formatting</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Content formatting</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">
-
- <p>The content of pages in jQuery Mobile is completely open-ended, but the jQuery Mobile framework provides a number of helpful tools and widgets — such as collapsible panels and multiple-column grid layouts — to make it easy to format your content for mobile devices.</p>
-
-
-
-
- <ul data-role="listview" data-inset="true">
- <li><a href="content-html.html">Basic HTML styles</a></li>
- <li><a href="content-grids.html">Layout grids (columns)</a></li>
- <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
- <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
- <li><a href="content-themes.html">Theming content</a></li>
- <!--<li><a href="api-content.html">API documentation</a></li>-->
- </ul>
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Checkboxes</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Checkboxes</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">
-
- <form action="#" method="get">
-
- <h2>Checkboxes</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
- </ul>
-
- <p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
- <pre><code>
-$("input[type='checkbox']").bind( "change", function(event, ui) {
- ...
-});
-</code></pre>
-
- <p>The checkbox plugin has the following custom events:</p>
-
- <dl>
-
- <dt><code>create</code> triggered when a checkbox is created</dt>
- <dd>
-
- <pre><code>
-$("input[type='checkbox']").checkboxradio({
- create: function(event, ui) { ... }
-});
- </code></pre>
- </dd>
-
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li data-theme="a"><a href="index.html">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Checkboxes</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Checkboxes</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">
-
- <form action="#" method="get">
-
- <h2>Checkboxes</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
-
- <p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to checkboxes.</p>
-
- <p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated.</p>
-
- <pre><code>
-<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
-<label for="checkbox-0">I agree</label>
- </code></pre>
-
- <p>This will produce a basic checkbox. The default styles will set the width of the element to 100% of the parent container.</p>
-
- <input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" />
- <label for="checkbox-0">I agree</label>
-
-
-
- <p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
-
- <p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
-
-
-<pre><code>
-<div data-role="fieldcontain">
- <strong><fieldset data-role="controlgroup">
- <legend>Agree to the terms:</legend></strong>
- <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
- <label for="checkbox-1">I agree</label>
- <strong></fieldset></strong>
-</div>
-</code></pre>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Agree to the terms:</legend>
- <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
- <label for="checkbox-1">I agree</label>
- </fieldset>
- </div>
-
- <h2>Vertically grouped checkboxes</h2>
-
- <p>Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the fie.</p>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose as many snacks as you'd like:</legend>
- <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
- <label for="checkbox-1a">Cheetos</label>
-
- <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
- <label for="checkbox-2a">Doritos</label>
-
- <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
- <label for="checkbox-3a">Fritos</label>
-
- <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
- <label for="checkbox-4a">Sun Chips</label>
- </fieldset>
- </div>
-
- <h2>Horizontal toggle sets</h2>
-
- <p>Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
-
-<code>
-<fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong>>
-</code>
-
- <p>The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.</p>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
- <label for="checkbox-6">b</label>
-
- <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
- <label for="checkbox-7"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
- <label for="checkbox-8">u</label>
- </fieldset>
- </div>
-
-
-
-
- </form>
-
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li data-theme="a"><a href="index.html">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Checkboxes</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Checkboxes</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">
-
- <form action="#" method="get">
-
- <h2>Checkboxes</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The checkbox has the following methods:</p>
-
- <dl>
-
- <dt><code>enable</code> enable a disabled checkbox</dt>
- <dd>
- <pre><code>
- $("input[type='checkbox']").checkboxradio('enable');
- </code></pre>
- </dd>
-
- <dt><code>disable</code> disable a select.</dt>
- <dd>
- <pre><code>
-$("input[type='checkbox']").checkboxradio('disable');
- </code></pre>
- </dd>
-
- <dt><code>refresh</code> update the custom select</dt>
- <dd>
- If you manipulate a checkbox via JavaScript, you must call the refresh method on it to update the visual styling.
- <pre><code>
-$("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");
- </code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li data-theme="a"><a href="index.html">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Checkboxes</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Checkboxes</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">
-
- <form action="#" method="get">
-
- <h2>Checkboxes</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The checkbox has the following options:</p>
-
- <dl>
-
- <dt><code>theme</code> <em>string</em></dt>
- <dd>
- <p class="default">default: null, inherited from parent</p>
- <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
- <pre><code>$("input[type='checkbox']").checkboxradio(<strong>{ theme: "a" }</strong>);</code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li data-theme="a"><a href="index.html">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Forms</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Forms</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 provides a complete set of finger-friendly form elements that are based on native HTML form elements.</p>
-
- <h2>Form structure</h2>
-
- <p>All forms should be wrapped in a <code>form</code> tag that has an <code>action</code> and <code>method</code> that will handle the form data processing on the server.</p>
-
-<code>
-<form action="form.php" method="post">
-...
-</form>
-</code>
-
-
-<h2>Markup conventions</h2>
-<p>When constructing forms to be used in jQuery Mobile, most of the standard guidelines used to create forms that submit via normal HTTP post or get still apply. However, one thing to keep in mind is that the <code>id</code> attributes of form controls need to be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time, so you must be careful to use unique <code>id</code> attributes so there will be only one of each in the DOM (and of course, be sure to pair them properly with <code>label</code> elements via the <code>for</code> attribute).</p>
-
- <h2>Hiding labels accessibly</h2>
- <p>For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful <code>label</code>. To hide labels in a way that leaves them visible to assistive technologies—for example, when letting an element’s <code>placeholder</code> attribute serve as a label—apply the helper class <code>ui-hidden-accessible</code> to the label itself:</p>
-<code>
-<pre>
-<label for="username" <strong>class="ui-hidden-accessible"</strong>>Username:</label>
-<input type="text" name="username" id="username" value="" placeholder="Username"/>
-</pre>
-</code>
-
- <p>To hide labels within a field container and adjust the layout accordingly, add the class <code>ui-hide-label</code> to the field container as in the following:</p>
-
-<code>
-<pre>
-<div data-role="fieldcontain" <strong>class="ui-hide-label"</strong>>
- <label for="username">Username:</label>
- <input type="text" name="username" id="username" value="" placeholder="Username"/>
-</div>
-</pre>
-</code>
-
- <p>Both of the above examples will render as:</p>
- <div data-role="fieldcontain" class="ui-hide-label">
- <label for="username">Username:</label>
- <input type="text" name="username" id="username" value="" placeholder="Username" />
- </div>
-
- <p>While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.</p>
-
-
- <h2>Disabling form elements</h2>
- <p>All jQuery Mobile widgets can be disabled in the markup by adding the standard <code>disabled</code> attribute to the element, just like you would with native controls. Each form widget also has standard <code>disable</code> and <code>enable</code> methods that are documented with each form widget. Here are a few examples of disabled widgets: </p>
-
- <div data-role="fieldcontain">
- <label for="foo">Text Input:</label>
- <input type="text" name="name" id="foo" value="" disabled />
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Gender:</legend>
- <input type="radio" name="gender" id="radio-female" value="f" disabled />
- <label for="radio-female">Female</label>
-
- <input type="radio" name="gender" id="radio-male" value="m" disabled />
- <label for="radio-male">Male</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="flip-s">Server status:</label>
- <select name="flip-s" id="flip-s" data-role="slider" disabled >
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider">Max bandwidth:</label>
- <input type="range" name="slider" id="slider" value="0" min="0" max="100" disabled />
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-x" class="select">Shipping:</label>
- <select name="select-shipper" id="select-choice-x" disabled>
- <option></option>
- <option value="standard">Standard</option>
- <option value="rush">Rush</option>
- <option value="express">Express</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <p>Note that you can disable buttons created from <code>button</code> or <code>input</code>-based markup, but not links with a role of button. Links don't have a parallel disabled feature in HTML, but if you need to disable a link-based button (or any element), it's possible to apply the disabled class <code>ui-disabled</code> yourself with JavaScript to achieve the same effect. </p>
-
- <h2>Field containers</h2>
- <p>To improve the styling to labels and form elements on wider screens, we recommend wrapping a <code>div</code> or <code>fieldset </code>with the <code> data-role="fieldcontain"</code> attribute around each label/form element. This framework aligns the input and associated label side-by-side, and breaks to stacked block-level elements below ~480px. The framework will also add a thin bottom border to act as a field separator.</p>
-
- <p>For example:</p>
-<pre><code>
-<div data-role="fieldcontain">
-<label for="name">Text Input:</label>
-<input type="text" name="name" id="name" value="" />
-</div>
-</code></pre>
-
- <p>Will render as:</p>
-
- <div data-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" />
- </div>
-
- <p>For additional examples, see the <a href="forms-all.html">form elements gallery</a></p>
-
-
- <h2>Auto-initialization of form elements</h2>
- <p>By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them, so for instance, a <code>select</code> element will be found and initialized with the "selectmenu" plugin, while an <code>input</code> element with a <code>type="checkbox"</code> will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods - see options, methods and events listed on each form plugin's documentation page for details. </p>
-
- <h2>Initializing groups of dynamically-injected form elements</h2>
- <p>If you should generate new markup client-side or load in content via AJAX and inject it into a page, you can trigger the <code>create</code> event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (see below).</p>
-
- <p>For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:</p>
-
- <code>
- $( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
- </code>
-
- <h2>Refreshing form elements</h2>
-
- <p>In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom controls (selects, sliders) built from, and kept in sync with, the native control. To programmatically update a form control with JavaScript, first manipulate the native control, then use the <code>refresh</code> method to tell the enhanced control to update itself to match the new state. Here are some examples of how to update common form controls, then call the <code>refresh</code> method:</p>
- <h4>Checkboxes:</h4>
-
-<code>
-$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
-</code>
-
-<h4>Radios:</h4>
-<code>
-$("input[type='radio']").prop("checked",true).checkboxradio("refresh");
-</code>
-
-<h4>Selects:</h4>
-<code><pre>
-var myselect = $("#selectfoo");
-myselect[0].selectedIndex = 3;
-myselect.selectmenu("refresh");
-</pre></code>
-
-<h4>Sliders:</h4>
-<code>
-$("input[type='range']").val(60).slider("refresh");
-</code>
-
-<h4>Flip switches (they use slider):</h4>
-
-<code><pre>
-var myswitch = $("#selectbar");
-myswitch[0].selectedIndex = 1;
-myswitch.slider("refresh");
-</pre></code>
-
- <h2>Preventing auto-initialization of form elements</h2>
- <p>If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute <code> data-role="none"</code>. For example:</p>
- <pre><code>
-<label for="foo">
-<select name="foo" id="foo" <strong> data-role="none"</strong>>
- <option value="a" >A</option>
- <option value="b" >B</option>
- <option value="c" >C</option>
-</select>
-</code></pre>
-
-
- <p>Or, if you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>[data-role="none"]</code>. Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
- <pre><code>
-$(document).bind('mobileinit',function(){
- <strong>$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";</strong>
-});
- </pre></code>
-
-<p>One special case is that of selects. The above sample will prevent any and all augmentation from taking place on select elements in the page if <code>select</code> is included. If you wish to retain the native performance, look/feel of the menu itself and benefit from the visual augmentation of the select button by jQuery Mobile you can set $.mobile.nativeSelectMenu to true in a <code>mobileinit</code> callback as a global setting or use <code>data-native="true"</code> on a case by case basis.</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">Form elements</li>
- <li data-theme="a"><a href="docs-forms.html">Form basics</a></li>
- <li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
- <li><a href="search/">Search inputs</a></li>
- <li><a href="slider/">Slider</a></li>
- <li><a href="switch/">Flip toggle switch</a></li>
- <li><a href="radiobuttons/">Radio buttons</a></li>
- <li><a href="checkboxes/">Checkboxes</a></li>
- <li><a href="selects/">Select menus</a></li>
- <li><a href="forms-themes.html">Theming forms</a></li>
- <li><a href="forms-all-native.html">Native form elements</a></li>
- <li><a href="forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Native Form Controls</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Forms</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">
-
- <form action="#" method="get">
-
- <h2>Native form elements & buttons</h2>
-
- <p>Although the framework automatically enhances form elements and buttons into <a href="forms-all.html">touch input optimized controls</a> to streamline development, it's easy to tell jQuery Mobile to leave these elements alone so the standard, native control can be used instead.</p>
- <p>Adding the <code>data-role="none"</code> attribute to any form or button element tells the framework to not apply any enhanced styles or scripting. The examples below all have this attribute in place to demonstrate the effect. You may need to write custom styles to lay out your form controls because we try to leave all the default styling intact.</p>
-
- <div data-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" data-role="none" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="textarea">Textarea:</label>
- <textarea cols="40" rows="8" name="textarea" id="textarea" data-role="none"></textarea>
- </div>
-
- <div data-role="fieldcontain">
- <label for="search">Search Input:</label>
- <input type="search" name="password" id="search" value="" data-role="none" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider2">Flip switch:</label>
- <select name="slider2" id="slider2" data-role="none">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider">Slider:</label>
- <input type="range" name="slider" id="slider" value="0" min="0" max="100" data-role="none" />
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose as many snacks as you'd like:</legend>
- <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" data-role="none" />
- <label for="checkbox-1a">Cheetos</label>
-
- <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" data-role="none" />
- <label for="checkbox-2a">Doritos</label>
-
- <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" data-role="none" />
- <label for="checkbox-3a">Fritos</label>
-
- <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" data-role="none" />
- <label for="checkbox-4a">Sun Chips</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" data-role="none" />
- <label for="checkbox-6">b</label>
-
- <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" data-role="none" />
- <label for="checkbox-7"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" data-role="none" />
- <label for="checkbox-8">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" data-role="none" />
- <label for="radio-choice-1">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" data-role="none" />
- <label for="radio-choice-2">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" data-role="none" />
- <label for="radio-choice-3">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" data-role="none" />
- <label for="radio-choice-4">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Layout view:</legend>
- <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" data-role="none" />
- <label for="radio-choice-c">List</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" data-role="none" />
- <label for="radio-choice-d">Grid</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" data-role="none" />
- <label for="radio-choice-e">Gallery</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-1" class="select">Choose shipping method:</label>
- <select name="select-choice-1" id="select-choice-1" data-role="none">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-3" class="select">Your state:</label>
- <select name="select-choice-3" id="select-choice-3" data-role="none">
- <option>Choose...</option>
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
-
-
-
- <p><strong>Button</strong> based button:</p>
- <button data-role="none">Button element</button>
-
- <p><strong>Input type="button"</strong> based button:</p>
- <input type="button" value="Input type=button" data-role="none" />
-
- <p><strong>Input type="submit"</strong> based button:</p>
- <input type="submit" value="Input type=submit" data-role="none" />
-
- <p><strong>Input type="reset"</strong> based button:</p>
- <input type="reset" value="Input type=reset" data-role="none" />
-
- <p><strong>Input type="image"</strong> based button:</p>
- <input type="image" src="../_assets/images/jquery-logo.png" style="width:120px; padding:5px; background:#fff; border:1px solid #999;" value="Input type=image" data-role="none" />
-
- </form>
-
- </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">Form elements</li>
- <li><a href="docs-forms.html">Form basics</a></li>
- <li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
- <li><a href="search/">Search inputs</a></li>
- <li><a href="slider/">Slider</a></li>
- <li><a href="switch/">Flip toggle switch</a></li>
- <li><a href="radiobuttons/">Radio buttons</a></li>
- <li><a href="checkboxes/">Checkboxes</a></li>
- <li><a href="selects/">Select menus</a></li>
- <li><a href="forms-themes.html">Theming forms</a></li>
- <li data-theme="a"><a href="forms-all-native.html">Native form elements</a></li>
- <li><a href="forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Gallery of Form Controls</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Forms</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">
-
- <form action="#" method="get">
-
- <h2>Form elements</h2>
-
- <p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. </p>
-
- <p>Browsers that don't support the custom controls will still deliver a usable experience, because all are based on native form elements.</p>
-
- <div data-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="textarea">Textarea:</label>
- <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
- </div>
-
- <div data-role="fieldcontain">
- <label for="search">Search Input:</label>
- <input type="search" name="password" id="search" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider2">Flip switch:</label>
- <select name="slider2" id="slider2" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider">Slider:</label>
- <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose as many snacks as you'd like:</legend>
- <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
- <label for="checkbox-1a">Cheetos</label>
-
- <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
- <label for="checkbox-2a">Doritos</label>
-
- <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
- <label for="checkbox-3a">Fritos</label>
-
- <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
- <label for="checkbox-4a">Sun Chips</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
- <label for="checkbox-6">b</label>
-
- <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
- <label for="checkbox-7"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
- <label for="checkbox-8">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
- <label for="radio-choice-1">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
- <label for="radio-choice-2">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
- <label for="radio-choice-3">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
- <label for="radio-choice-4">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Layout view:</legend>
- <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
- <label for="radio-choice-c">List</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
- <label for="radio-choice-d">Grid</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
- <label for="radio-choice-e">Gallery</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-1" class="select">Choose shipping method:</label>
- <select name="select-choice-1" id="select-choice-1">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-3" class="select">Your state:</label>
- <select name="select-choice-3" id="select-choice-3">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-a" class="select">Choose shipping method:</label>
- <select name="select-choice-a" id="select-choice-a" data-native-menu="false">
- <option>Custom menu example</option>
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div class="ui-body ui-body-b">
- <fieldset class="ui-grid-a">
- <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
- <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
- </fieldset>
- </div>
- </form>
- </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">Form elements</li>
- <li><a href="docs-forms.html">Form basics</a></li>
- <li data-theme="a"><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
- <li><a href="search/">Search inputs</a></li>
- <li><a href="slider/">Slider</a></li>
- <li><a href="switch/">Flip toggle switch</a></li>
- <li><a href="radiobuttons/">Radio buttons</a></li>
- <li><a href="checkboxes/">Checkboxes</a></li>
- <li><a href="selects/">Select menus</a></li>
- <li><a href="forms-themes.html">Theming forms</a></li>
- <li><a href="forms-all-native.html">Native form elements</a></li>
- <li><a href="forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Sample form response</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="e">
- <h1>Sample form response</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">
-
- <form action="index.html" method="get">
-
- <h2>You Chose:</h2>
-
- <div class="ui-body ui-body-d ui-corner-all">
-
- <?php
- echo "<p> " . $_REQUEST['shipping'] . "</p>";
- ?>
-
- </div>
-
- <a href="forms-sample.html" data-role="button" data-theme="b" data-icon="arrow-l">Change shipping method</a>
-
- </form>
-
- </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">Form elements</li>
- <li><a href="docs-forms.html">Form basics</a></li>
- <li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
- <li><a href="search/">Search inputs</a></li>
- <li><a href="slider/">Slider</a></li>
- <li><a href="switch/">Flip toggle switch</a></li>
- <li><a href="radiobuttons/">Radio buttons</a></li>
- <li><a href="checkboxes/">Checkboxes</a></li>
- <li><a href="forms-selects.html">Select menus</a></li>
- <li><a href="forms-themes.html">Theming forms</a></li>
- <li><a href="forms-all-native.html">Native form elements</a></li>
- <li data-theme="a"><a href="forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Sample Form Submit to Self</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Sample form submit to self</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">
-
- <form action="forms-sample-selfsubmit.php" method="post">
-
- <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
- <legend>Testing</legend>
- <div>
- <?php $g = $_REQUEST['gender']; ?>
- <input type="radio" name="gender" value="m" id="gender-1" <?=$g=="m"? "checked": ""; ?> /><label for="gender-1">Male</label>
- <input type="radio" name="gender" value="f" id="gender-2" <?=$g=="f"? "checked": ""; ?> /><label for="gender-2">Female</label>
- </div>
- </fieldset>
-
- <button type="submit">Submit</submit>
- </form>
-
- </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">Form elements</li>
- <li><a href="docs-forms.html">Form basics</a></li>
- <li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
- <li><a href="search/">Search inputs</a></li>
- <li><a href="slider/">Slider</a></li>
- <li><a href="switch/">Flip toggle switch</a></li>
- <li><a href="radiobuttons/">Radio buttons</a></li>
- <li><a href="checkboxes/">Checkboxes</a></li>
- <li><a href="forms-selects.html">Select menus</a></li>
- <li><a href="forms-themes.html">Theming forms</a></li>
- <li><a href="forms-all-native.html">Native form elements</a></li>
- <li data-theme="a"><a href="forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Sample Form Submit</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Forms</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>Ajax form submission</h2>
-
- <p>In jQuery Mobile, form submissions are automatically handled using Ajax whenever possible, creating a smooth transition between the form and the result page. To ensure your form submits as intended, be sure to specify <code>action</code> and <code>method</code> properties on your form element. When unspecified, the method will default to <code>get</code>, and the <code>action</code> will default to the current page's relative path (found via <code>$.mobile.path.get()</code></p>
- <p>Forms also accept attributes for transitions just like anchors, such as <code>data-transition="pop"</code> and <code>data-direction="reverse"</code>. To submit a form without Ajax, you can either disable Ajax form handling globally, or per form via the <code>data-ajax="false"</code> attribute. The <code>target</code> attribute (as in <code>target="_blank"</code>) is respected on forms as well, and will default to the browser's handling of that target when the form submits. Note that unlike anchors, the <code>rel</code> attribute is not allowed on forms.</p>
-
-
- <h2>Default Ajax form example</h2>
- <p>This demonstrates automated ajax handling of form submissions. The form below is configured to send regular a <code>get</code> request to <code>forms-sample-response.php</code>. On submit, jQuery Mobile will make sure that the Url specified is able to be retrieved via Ajax, and handle it appropriately. Keep in mind that just like ordinary HTTP form submissions, jQuery Mobile allows <code>get</code> result pages to be bookmarked by updating the Url hash when the response returns successfully. Also like ordinary form submissions, <code>post</code> requests do not contain query parameters in the hash, so they are not bookmarkable.</p>
- <form action="forms-sample-response.php" method="get" class="ui-body ui-body-a ui-corner-all">
- <fieldset>
- <div data-role="fieldcontain">
- <label for="shipping" class="select">Shipping method:</label>
- <select name="shipping" id="shipping">
- <option value="Standard shipping">Standard: 7 day</option>
- <option value="Rush shipping">Rush: 3 days</option>
- <option value="Express shipping">Express: next day</option>
- <option value="Overnight shipping">Overnight</option>
- </select>
- </div>
- <button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
- </fieldset>
- </form>
-
- <h2>Non-Ajax form example</h2>
-
- <p>To prevent form submissions from being automatically handled with Ajax, add the <code>data-ajax="false"</code> attribute to the form element. You can also turn of Ajax form handling completely via the <code>ajaxEnabled</code> <a href="../api/globalconfig.html">global config option</a>.</p>
-
- <p>The form below is identical to the one above except for the addition of the <code>data-ajax="false"</code> attribute attribute. When the submit button is pressed, it will result in a full page refresh.</p>
- <form action="forms-sample-response.php" method="get" data-ajax="false" class="ui-body ui-body-a ui-corner-all">
- <fieldset>
- <div data-role="fieldcontain">
- <label for="shipping" class="select">Shipping method:</label>
- <select name="shipping" id="shipping">
- <option value="Standard shipping">Standard: 7 day</option>
- <option value="Rush shipping">Rush: 3 days</option>
- <option value="Express shipping">Express: next day</option>
- <option value="Overnight shipping">Overnight</option>
- </select>
- </div>
- <button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
- </fieldset>
- </form>
-
- <h2>Self-submitting Forms</h2>
- <p>Just like in ordinary HTML, can also submit forms to the same URL you're currently viewing by setting the form's <code>action</code> attribute to that URL. <A href="forms-sample-selfsubmit.php">This page demonstrates.</a></p>
- <p>When a <code>post</code> request is submitted to a page that's already in the DOM (which would commonly happen when submitting a form to the same URL currently in view), the response URL will be identical to that existing page, as <code>post</code> requests do not append query string parameters to the URL. In this situation, jQuery Mobile will replace the page that submitted the form with the page returned in the response body.</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">Form elements</li>
- <li><a href="docs-forms.html">Form basics</a></li>
- <li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
- <li><a href="search/">Search inputs</a></li>
- <li><a href="slider/">Slider</a></li>
- <li><a href="switch/">Flip toggle switch</a></li>
- <li><a href="radiobuttons/">Radio buttons</a></li>
- <li><a href="checkboxes/">Checkboxes</a></li>
- <li><a href="selects/">Select menus</a></li>
- <li><a href="forms-themes.html">Theming forms</a></li>
- <li><a href="forms-all-native.html">Native form elements</a></li>
- <li data-theme="a"><a href="forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Theming Forms</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Theming forms</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>Form themes</h2>
- <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages and forms are styled. By default all form elements inside a container will automatically adopt the same theme color swatch as their parent. This allows form elements to blend into their layouts with minimal work. The <code> data-theme</code> attribute can be applied any individual form element to apply any of the lettered theme color swatches to create contrast and emphasis in your designs.</p>
-
- <p>All the form elements in the examples below use the same HTML code with no theme swatch specified on the individual form elements. The only difference between each example block code is a <code> data-theme</code> swatch color assigned to each parent container. This illustrates the way form elements automatically adopt the theme swatch of their parent.</p>
-
-
- <h2>Body swatch A</h2>
- <div class="ui-body ui-body-a">
-
- <div data-role="fieldcontain">
- <label for="name-a">Text Input:</label>
- <input type="text" name="name" id="name-a" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="switch-a">Flip switch:</label>
- <select name="switch-a" id="switch-a" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider-a">Slider:</label>
- <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
- </div>
-
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
- <label for="checkbox-6a">b</label>
-
- <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
- <label for="checkbox-7a"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
- <label for="checkbox-8a">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
- <label for="radio-choice-1a">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
- <label for="radio-choice-2a">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
- <label for="radio-choice-3a">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
- <label for="radio-choice-4a">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-a" class="select">Choose shipping method:</label>
- <select name="select-choice-a" id="select-choice-a">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- </div><!-- /body-a -->
-
- <h2>Body swatch B</h2>
- <div class="ui-body ui-body-b">
-
- <div data-role="fieldcontain">
- <label for="name-b">Text Input:</label>
- <input type="text" name="name" id="name-b" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="switch-b">Flip switch:</label>
- <select name="switch-b" id="switch-b" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider-b">Slider:</label>
- <input type="range" name="slider" id="slider-b" value="0" min="0" max="100" />
- </div>
-
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6b" id="checkbox-6b" class="custom" />
- <label for="checkbox-6b">b</label>
-
- <input type="checkbox" name="checkbox-7b" id="checkbox-7b" class="custom" />
- <label for="checkbox-7b"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8b" id="checkbox-8b" class="custom" />
- <label for="checkbox-8b">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1b" value="choice-1" />
- <label for="radio-choice-1b">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2b" value="choice-2" />
- <label for="radio-choice-2b">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3b" value="choice-3" />
- <label for="radio-choice-3b">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4b" value="choice-4" />
- <label for="radio-choice-4b">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-b" class="select">Choose shipping method:</label>
- <select name="select-choice-b" id="select-choice-b">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
-
- </div><!-- /body-b -->
-
-
- <h2>Body swatch C</h2>
- <div class="ui-body ui-body-c">
-
- <div data-role="fieldcontain">
- <label for="name-c">Text Input:</label>
- <input type="text" name="name" id="name-c" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="switch-c">Flip switch:</label>
- <select name="switch-c" id="switch-c" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider-c">Slider:</label>
- <input type="range" name="slider" id="slider-c" value="0" min="0" max="100" />
- </div>
-
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6c" id="checkbox-6c" class="custom" />
- <label for="checkbox-6c">b</label>
-
- <input type="checkbox" name="checkbox-7c" id="checkbox-7c" class="custom" />
- <label for="checkbox-7c"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8c" id="checkbox-8c" class="custom" />
- <label for="checkbox-8c">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1c" value="choice-1" />
- <label for="radio-choice-1c">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2c" value="choice-2" />
- <label for="radio-choice-2c">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3c" value="choice-3" />
- <label for="radio-choice-3c">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4c" value="choice-4" />
- <label for="radio-choice-4c">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-c" class="select">Choose shipping method:</label>
- <select name="select-choice-c" id="select-choice-c">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
-
- </div><!-- /body-c -->
-
-
-
- <h2>Body swatch D</h2>
- <div class="ui-body ui-body-d">
-
- <div data-role="fieldcontain">
- <label for="name-d">Text Input:</label>
- <input type="text" name="name" id="name-d" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="switch-d">Flip switch:</label>
- <select name="switch-d" id="switch-d" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider-d">Slider:</label>
- <input type="range" name="slider" id="slider-d" value="0" min="0" max="100" />
- </div>
-
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6d" id="checkbox-6d" class="custom" />
- <label for="checkbox-6d">b</label>
-
- <input type="checkbox" name="checkbox-7d" id="checkbox-7d" class="custom" />
- <label for="checkbox-7d"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8d" id="checkbox-8d" class="custom" />
- <label for="checkbox-8d">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1d" value="choice-1" />
- <label for="radio-choice-1d">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2d" value="choice-2" />
- <label for="radio-choice-2d">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3d" value="choice-3" />
- <label for="radio-choice-3d">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4d" value="choice-4" />
- <label for="radio-choice-4d">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-d" class="select">Choose shipping method:</label>
- <select name="select-choice-d" id="select-choice-d">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
-
- </div><!-- /body-d -->
-
-
- <h2>Body swatch E</h2>
- <div class="ui-body ui-body-e">
-
- <div data-role="fieldcontain">
- <label for="name-e">Text Input:</label>
- <input type="text" name="name" id="name-e" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="switch-e">Flip switch:</label>
- <select name="switch-e" id="switch-e" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider-e">Slider:</label>
- <input type="range" name="slider" id="slider-e" value="0" min="0" max="100" />
- </div>
-
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6e" id="checkbox-6e" class="custom" />
- <label for="checkbox-6e">b</label>
-
- <input type="checkbox" name="checkbox-7e" id="checkbox-7e" class="custom" />
- <label for="checkbox-7e"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8e" id="checkbox-8e" class="custom" />
- <label for="checkbox-8e">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1e" value="choice-1" />
- <label for="radio-choice-1e">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2e" value="choice-2" />
- <label for="radio-choice-2e">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3e" value="choice-3" />
- <label for="radio-choice-3e">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4e" value="choice-4" />
- <label for="radio-choice-4e">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-e" class="select">Choose shipping method:</label>
- <select name="select-choice-e" id="select-choice-e">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
-
- </div><!-- /body-e -->
-
- </form>
-
- </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">Form elements</li>
- <li><a href="docs-forms.html">Form basics</a></li>
- <li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
- <li><a href="search/">Search inputs</a></li>
- <li><a href="slider/">Slider</a></li>
- <li><a href="switch/">Flip toggle switch</a></li>
- <li><a href="radiobuttons/">Radio buttons</a></li>
- <li><a href="checkboxes/">Checkboxes</a></li>
- <li><a href="selects/">Select menus</a></li>
- <li data-theme="a"><a href="forms-themes.html">Theming forms</a></li>
- <li><a href="forms-all-native.html">Native form elements</a></li>
- <li><a href="forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Forms</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Form elements</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">
-
- <p>All form elements begin with standard html controls that are enhanced to make them more attractive and easy-to-use. In browsers that don't support the custom controls, they will still have a usable experience because these are all based on native form elements.</p>
-
- <ul data-role="listview" data-inset="true">
- <li><a href="docs-forms.html">Form basics</a></li>
- <li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
- <li><a href="search/">Search inputs</a></li>
- <li><a href="slider/">Slider</a></li>
- <li><a href="switch/">Flip toggle switch</a></li>
- <li><a href="radiobuttons/">Radio buttons</a></li>
- <li><a href="checkboxes/">Checkboxes</a></li>
- <li><a href="selects/">Select menus</a></li>
- <li><a href="forms-themes.html">Theming forms</a></li>
- <li><a href="forms-all-native.html">Native form elements</a></li>
- <li><a href="forms-sample.html">Submitting forms</a></li>
-
- </ul>
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Form Plugin Methods</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Form Plugin 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">
-
- <div class="ui-body ui-body-e">
- <h4>We've retired this page.</h4>
-
- <p>Plugin events and methods are now documented separately for each component (see links on the left).</p>
- </div>
-
-
-
- </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">Form elements</li>
- <li><a href="docs-forms.html">Form basics</a></li>
- <li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
- <li><a href="search/">Search inputs</a></li>
- <li><a href="slider/">Slider</a></li>
- <li><a href="switch/">Flip toggle switch</a></li>
- <li><a href="radiobuttons/">Radio buttons</a></li>
- <li><a href="checkboxes/">Checkboxes</a></li>
- <li><a href="selects/">Select menus</a></li>
- <li><a href="forms-themes.html">Theming forms</a></li>
- <li><a href="forms-all-native.html">Native form elements</a></li>
- <li><a href="forms-sample.html">Submitting forms</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Radio buttons</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Radio buttons</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">
-
- <form action="#" method="get">
-
- <h2>Radio buttons</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
- </ul>
-
-
- <p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
- <pre><code>
-$("input[type='radio']").bind( "change", function(event, ui) {
- ...
-});
-</code></pre>
-
- <p>The radio button plugin has the following custom events:</p>
-
- <dl>
-
- <dt><code>create</code> triggered when a radio button is created</dt>
- <dd>
-
-
- <pre><code>
-$("input[type='radio']").checkboxradio({
- create: function(event, ui) { ... }
-});
- </code></pre>
- </dd>
-
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li data-theme="a"><a href="index.html">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Radio Buttons</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Radio buttons</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">
-
- <form action="#" method="get">
-
- <h2>Radio buttons</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>Radio buttons are used to provide a list of options where only a single items can be selected. Traditional desktop radio buttons are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
-
- <p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to radio buttons.</p>
-
- <h2>Vertically grouped radio buttons</h2>
-
- <p>To create a set of radio buttons, add an <code>input</code> with a <code>type="radio"</code> attribute and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated.</p>
-
- <p>Because radio buttons use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the radio buttons in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question.</p>
-
- <p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the container.</p>
-
-<pre><code>
-<strong><fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend></strong>
- <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
- <label for="radio-choice-1">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
- <label for="radio-choice-2">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
- <label for="radio-choice-3">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
- <label for="radio-choice-4">Lizard</label>
-<strong></fieldset></strong>
-</code></pre>
-
-
- <p>This will produce a vertically grouped radio button set. The default styles set the width of the button group to 100% of the parent container and stacks the label on a separate line.</p>
-
-
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-pet-1a" id="radio-pet-1a" value="choice-1" checked="checked" />
- <label for="radio-pet-1a">Cat</label>
-
- <input type="radio" name="radio-pet-1a" id="radio-pet-2a" value="choice-2" />
- <label for="radio-pet-2a">Dog</label>
-
- <input type="radio" name="radio-pet-1a" id="radio-pet-3a" value="choice-3" />
- <label for="radio-pet-3a">Hamster</label>
-
- <input type="radio" name="radio-pet-1a" id="radio-pet-4a" value="choice-4" />
- <label for="radio-pet-4a">Lizard</label>
- </fieldset>
-
-
- <pre><code>
-<strong><div data-role="fieldcontain">
-</strong> <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
- <label for="radio-choice-1">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
- <label for="radio-choice-2">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
- <label for="radio-choice-3">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
- <label for="radio-choice-4">Lizard</label>
- </fieldset>
-<strong></div>
-</strong> </code></pre>
-
-
- <p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the container.</p>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-pet-1" id="radio-pet-1" value="choice-1" checked="checked" />
- <label for="radio-pet-1">Cat</label>
-
- <input type="radio" name="radio-pet-1" id="radio-pet-2" value="choice-2" />
- <label for="radio-pet-2">Dog</label>
-
- <input type="radio" name="radio-pet-1" id="radio-pet-3" value="choice-3" />
- <label for="radio-pet-3">Hamster</label>
-
- <input type="radio" name="radio-pet-1" id="radio-pet-4" value="choice-4" />
- <label for="radio-pet-4">Lizard</label>
- </fieldset>
- </div>
- <h2>Horizontal radio button sets</h2>
-
- <p>Radio buttons can also be used for grouped button sets only a single button can be selected at once, such as a view switcher control. To make a horizontal radio button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
-
- <code>
- <fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong> >
- </code>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Layout view:</legend>
- <input type="radio" name="radio-view" id="radio-view-a" value="list" />
- <label for="radio-view-a">List</label>
- <input type="radio" name="radio-view" id="radio-view-b" value="grid" />
- <label for="radio-view-b">Grid</label>
- <input type="radio" name="radio-view" id="radio-view-c" value="gallery" />
- <label for="radio-view-c">Gallery</label>
- </fieldset>
- </div>
-
- <p>The framework will float the labels so they sit side-by-side on a line, hides the radio button icons and only round the left and right edges of the group.</p>
-
-
-
-
-
-
- </form>
-
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li data-theme="a"><a href="index.html">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Radio buttons</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Radio buttons</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">
-
- <form action="#" method="get">
-
- <h2>Radio buttons</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The radio button has the following methods:</p>
-
- <dl>
-
- <dt><code>enable</code> enable a disabled radio button</dt>
- <dd>
- <pre><code>
- $("input[type='radio']").checkboxradio('enable');
- </code></pre>
- </dd>
-
- <dt><code>disable</code> disable a select.</dt>
- <dd>
- <pre><code>
-$("input[type='radio']").checkboxradio('disable');
- </code></pre>
- </dd>
-
- <dt><code>refresh</code> update the custom select</dt>
- <dd>
- If you manipulate a radio button via JavaScript, you must call the refresh method on it to update the visual styling.
- <pre><code>
-$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");
- </code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li data-theme="a"><a href="index.html">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Radio buttons</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Radio buttons</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">
-
- <form action="#" method="get">
-
- <h2>Radio buttons</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The radio button has the following options:</p>
-
- <dl>
-
- <dt><code>theme</code> <em>string</em></dt>
- <dd>
- <p class="default">default: null, inherited from parent</p>
- <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
- <pre><code>$("input[type='radio']").checkboxradio(<strong>{ theme: "a" }</strong>);</code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li data-theme="a"><a href="index.html">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Search Input events</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Search input</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">
-
- <form action="#" method="get">
-
- <h2>Search input</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
- </ul>
-
-<p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
- <pre><code>
-$(".mySearchInput").bind( "change", function(event, ui) {
- ...
-});
-</code></pre>
-
- <p>The text input plugin has the following custom events:</p>
-
- <dl>
-
- <dt><code>create</code> triggered when a text input is created</dt>
- <dd>
-
- <pre><code>
-$( ".selector" ).textinput({
- create: function(event, ui) { ... }
-});
- </code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li data-theme="a"><a href="index.html">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Search input</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Search input</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">
-
- <form action="#" method="get">
-
- <h2>Search input</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an <code>input</code> with a <code>type="search"</code> attribute in your markup. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to search inputs.</p>
-
- <p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
-
- <pre><code>
-<label for="search-basic">Search Input:</label>
-<input type="search" name="search" id="searc-basic" value="" />
- </code></pre>
-
- <p>This will produce a basic search input. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.</p>
- <label for="search-basic">Search Input:</label>
- <input type="search" name="search" id="search-basic" value="" />
-
-
- <p>Optionally wrap the search input in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
-
-<pre><code>
-<strong><div data-role="fieldcontain">
-</strong> <label for="search">Search Input:</label>
- <input type="search" name="password" id="search" value="" />
-<strong></div>
-</strong></code></pre>
-
- <p>The search input is now displayed like this:</p>
- <div data-role="fieldcontain">
- <label for="search">Search Input:</label>
- <input type="search" name="search2" id="search" value="" />
- </div>
-
- <p>Themed variation:</p>
- <div data-role="fieldcontain">
- <label for="searchA">Search Input:</label>
- <input type="search" name="search3" id="searchA" value="" data-theme="a" />
- </div>
-
-
-
- <h2>Calling the textinput plugin</h2>
-
-<p>This plugin will auto initialize on any page that contains a text input with the <code>type="search"</code> attribute, no need for a <code>data-role</code> attribute in the markup. However, if needed you can directly call the <code>textinput</code> plugin on a selector, just like any jQuery plugin:</p>
-<pre><code>
-$('.mySearchInput').textinput();
-</code></pre>
-
-
- </form>
-
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li data-theme="a"><a href="index.html">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Search Input methods</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Search input</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">
-
- <form action="#" method="get">
-
- <h2>Search input</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The text input plugin has the following methods:</p>
-
- <dl>
-
- <dt><code>enable</code> enable a disabled text input</dt>
- <dd>
- <pre><code>
-$('.selector').textinput('enable');
- </code></pre>
- </dd>
-
- <dt><code>disable</code> disable a text input</dt>
- <dd>
- <pre><code>
-$('.selector').textinput('disable');
- </code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li data-theme="a"><a href="index.html">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Text Search options</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Search input</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">
-
- <form action="#" method="get">
-
- <h2>Search input</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The text input plugin has the following options:</p>
-
- <dl>
- <dt><code>initSelector</code> <em>CSS selector string</em></dt>
- <dd>
- <p class="default">default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"</p>
- <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as textinputs. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.textinput.prototype.options.initSelector = ".myInputs";</strong>
-});
-</code></pre>
- </dd>
-
- <dt><code>theme</code> <em>string</em></dt>
- <dd>
- <p class="default">default: null, inherited from parent</p>
- <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
- <pre><code>$('.selector').textinput(<strong>{ theme: "a" }</strong>);</code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li data-theme="a"><a href="index.html">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Select</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Select Menus</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>Select menus</h2>
-
-<ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
-</ul>
-
-<h2>Custom select menus</h2>
-<p>The framework is capable of building a custom menu based on the <code>select</code> element's list of options. We recommend using a custom menu when multiple selections are required, or when the menu itself must be styled with CSS.</p>
-
-<p>You can optionally use custom-styled select menus instead of the native OS menu. The custom menu supports disabled options and multiple selection (whereas native mobile OS support for both is inconsistent), adds an elegant way to handle placeholder values, and restores missing functionality on certain platforms such as <code>optgroup</code> support on Android (all explained below). In addition, the framework applies the custom button's theme to the menu to better match the look and feel and provide visual consistency across platforms. Lastly, custom menus often look better on desktop browsers because native desktop menus are smaller than their mobile counterparts and tend to look disproportionate.</p>
-
- <p>Keep in mind that there is overhead involved in parsing the native select to build a custom menu. If there are a lot of selects on a page, or a select has a long list of options, this can impact the performance of the page, so we recommend using custom menus sparingly. </p>
-
- <p>To use custom menus on a specific <code>select</code>, just add the <code>data-native-menu="false"</code> attribute. Alternately, this can also programmatically set the select menu's <code>nativeMenu</code> configuration option to <code>false</code> in a callback bound to the <code>mobileinit</code> event to achieve the same effect. This will globally make all selects use the custom menu by default. The following must be included in the page after jQuery is loaded but before jQuery Mobile is loaded.</p>
-
-
-<code>
-<pre>
-$(document).bind('mobileinit',function(){
- $.mobile.selectmenu.prototype.options.nativeMenu = false;
-});
-</pre>
-</code>
-
- <p>When the <code>select</code> has a small number of options that will fit on the device's screen, the menu will appear as a small overlay with a pop transition:</p>
-
- <div data-role="fieldcontain">
- <label for="select-choice-custom" class="select">Shipping method:</label>
- <select name="select-choice-1" id="select-choice-custom" data-native-menu="false">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <p>When it has too many options to show on the device's screen, the framework will automatically create a new "page" populated with a standard <a href="../../lists/docs-lists.html">list view</a> for the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the <code>label</code> is used as the title for this page.</p>
-
-
- <div data-role="fieldcontain">
- <label for="select-choice-3" class="select">Your state:</label>
- <select name="select-choice-3" id="select-choice-3" data-native-menu="false">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
- <h3>Disabled options</h3>
- <p>jQuery Mobile will automatically disable and style option tags with the <code>disabled</code> attribute. In the demo below, the second option "Rush: 3 days" has been set to disabled.</p>
-
- <div data-role="fieldcontain">
- <label for="select-choice-7" class="select">Shipping method:</label>
- <select name="select-choice-7" id="select-choice-7">
- <option value="standard">Standard: 7 day</option>
- <option value="rush" disabled="disabled">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <h3>Placeholder options</h3>
- <p>It's common for developers to include a "null" option in their select element to force a user to choose an option. If a placeholder option is present in your markup, jQuery Mobile will hide them in the overlay menu, showing only valid choices to the user, and display the placeholder text inside the menu as a header. A placeholder option is added when the framework finds:</p>
- <ul>
- <li>An option with no value attribute (or an empty value attribute)</li>
- <li>An option with no text node</li>
- <li>An option with a <code>data-placeholder="true"</code> attribute. (This allows you to use an option that has a value and a textnode as a placeholder option).</li>
- </ul>
-
- <p>You can disable this feature through the selectmenu plugin's <code>hidePlaceholderMenuItems</code> option, like this:</p>
- <pre>
- <code>
-$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
- </code>
- </pre>
-
- <p>Examples of various placeholder options:</p>
-
-
- <div data-role="fieldcontain">
- <label for="select-choice-4" class="select">Shipping method:</label>
- <select name="select-choice-4" id="select-choice-4" data-native-menu="false">
- <option></option>
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
-
- <div data-role="fieldcontain">
- <label for="select-choice-5" class="select">Shipping method:</label>
- <select name="select-choice-5" id="select-choice-5" data-native-menu="false">
- <option>Choose one...</option>
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
-
- <div data-role="fieldcontain">
- <label for="select-choice-6" class="select">Shipping method:</label>
- <select name="select-choice-6" id="select-choice-6" data-native-menu="false">
- <option value="choose-one" data-placeholder="true">Choose one...</option>
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
-
- <h3>Multiple selects</h3>
- <p>If the <code>multiple</code> attribute is present in your markup, jQuery Mobile will enhance the element with a few extra considerations:</p>
-
- <ul>
- <li>A header element will be created inside the menu and display the placeholder text and a close button.</li>
- <li>Clicking on an item inside the overlay menu will not close the widget.</li>
- <li>A ghosted, unchecked icon will appear adjacent to each unselected item. When the item is selected the icon will change to a checkbox. Neither icon will appear inside a single select box.</li>
- <li>Once 2+ items are selected, a counter element with the total number of selected items will appear inside the button.</li>
- <li>The text of each selected item will appear inside the button as a list. If the button is not wide enough to display the entire list, it is truncated with an ellipses.</li>
- <li>If no items are selected, the button's text will default to the placeholder text.</li>
- <li>If no placeholder element exists, the default button text will be blank and the header will appear with just a close button. Because this isn't a friendly user experience, we recommended that you always specify a placeholder element when using multiple select boxes.</li>
- </ul>
-
- <div data-role="fieldcontain">
- <label for="select-choice-9" class="select">Shipping method(s):</label>
- <select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
- <option>Choose options</option>
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <p>When a select is large enough to where the menu will open in a new page, the placeholder text is displayed in the button when no items are selected, and the <code>label</code> text is displayed in the menu's header. This differs from smaller overlay menus where the placeholder text is displayed in both the button and the header, and from full-page single selects where the placeholder text is not used at all.</p>
-
- <div data-role="fieldcontain">
- <label for="select-choice-10" class="select">Choose state(s):</label>
- <select name="select-choice-10" id="select-choice-10" multiple="multiple" data-native-menu="false">
- <option>Choose options</option>
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
-
-
-
-
- <h3>Optgroup support</h3>
- <p>If a select menu contains <code>optgroup</code> elements, jQuery Mobile will create a divider & group items based on the <code>label</code> attribute's text:</p>
-
- <div data-role="fieldcontain">
- <label for="select-choice-8" class="select">Shipping method:</label>
- <select name="select-choice-8" id="select-choice-8" data-native-menu="false">
- <optgroup label="USPS">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </optgroup>
- <optgroup label="FedEx">
- <option value="firstOvernight">First Overnight</option>
- <option value="expressSaver">Express Saver</option>
- <option value="ground">Ground</option>
- </optgroup>
- </select>
- </div>
-
-
-
-
-
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li data-theme="a"><a href="index.html">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Select events</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Select Menus</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">
-
- <form action="#" method="get">
-
- <h2>Select menus</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="custom.html" data-role="button" data-transition="fade">Custom</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
- </ul>
-
-
-<p>Bind events directly to the <code>select</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
- <pre><code>
-$(".mySelect").bind( "change", function(event, ui) {
- ...
-});
-</code></pre>
-
- <p>The select menu plugin has the following custom events:</p>
-
- <dl>
-
- <dt><code>create</code> triggered when a select menu is created</dt>
- <dd>
-
- <pre><code>
-$( ".selector" ).selectmenu({
- create: function(event, ui) { ... }
-});
- </code></pre>
- </dd>
-
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li data-theme="a"><a href="index.html">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Select</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Select Menus</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">
-
- <form action="#" method="get">
-
- <h2>Select menus</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The select menu is based on a native <code>select</code> element, which is hidden from view and replaced with a custom-styled select button that matches the look and feel of the jQuery Mobile framework. The select menu is ARIA-enabled and keyboard accessible on the desktop as well. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to selects.</p>
-
- <p>By default, the framework leverages the native OS options menu to use with the custom button. When the button is clicked, the native OS menu will open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value.</p>
-
- <p>To add a select menu to your page, start with a standard <code>select</code> element populated with a set of <code>option</code> elements. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>select</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons. </p>
-
- <p>The framework will find all <code>select</code> elements and automatically enhance them into select menus, no need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of a select, add <code>data-role="none"</code> attribute to the <code>select</code>.</p>
-
- <pre><code>
-<label for="select-choice-0" class="select">Shipping method:</label>
-<select name="select-choice-0" id="select-choice-1">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
-</select>
- </code></pre>
-
- <p>This will produce a basic select menu. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.</p>
-
- <label for="select-choice-0" class="select">Shipping method:</label>
- <select name="select-choice-0" id="select-choice-1">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
-
-
- <p>Optionally wrap the selects in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
-<pre><code>
-<strong><div data-role="fieldcontain">
-</strong> <label for="select-choice-1" class="select">Shipping method:</label>
- <select name="select-choice-1" id="select-choice-1">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
-<strong></div>
-</strong></code></pre>
-
- <p>The select input is now displayed like this:</p>
-
-
-<div data-role="fieldcontain">
- <label for="select-choice-1" class="select">Shipping method:</label>
- <select name="select-choice-1" id="select-choice-1">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
-</div>
-
-<p>An example of a select with a long list of options:</p>
-
-<div data-role="fieldcontain">
- <label for="select-choice-2" class="select">Your state:</label>
- <select name="select-choice-2" id="select-choice-2">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
-</div>
-
-<!--
-<p>The following example organizes the options into <code>optgroup</code> elements:</p>
-
-<div data-role="fieldcontain">
- <label for="select-choice-nc" class="select">Preferred delivery:</label>
- <select name="select-choice-8" id="select-choice-nc">
- <optgroup label="FedEx">
- <option value="firstOvernight">First Overnight</option>
- <option value="expressSaver">Express Saver</option>
- <option value="ground">Ground</option>
- </optgroup>
- <optgroup label="UPS">
- <option value="firstOvernight">First Overnight</option>
- <option value="expressSaver">Express Saver</option>
- <option value="ground">Ground</option>
- </optgroup>
- <optgroup label="US Mail">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day (disabled)</option>
- <option value="overnight">Overnight</option>
- </optgroup>
- </select>
-</div>
--->
-
-
-<h2>Vertically grouped select inputs</h2>
-
-<p>To create a grouped set of select inputs, first add <code>select</code> and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>select</code> so they are semantically associated.</p>
-
-<p>Because the <code>label</code> element will be associated with each individual select input, we recommend wrapping the selects in a <code>fieldset</code> element that has a <code>legend</code> which acts as the combined label for the grouped inputs.</p>
-
-<p>Lastly, one needs to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute, so it can be styled as a group.</p>
-
-<pre><code>
-<div data-role="fieldcontain">
-<fieldset data-role="controlgroup">
- <legend>Date of Birth:</legend>
-
- <label for="select-choice-month">Month</label>
-<select name="select-choice-month" id="select-choice-month">
- <option>Month</option>
- <option value="jan">January</option>
- <!-- etc. -->
-</select>
-
- <label for="select-choice-day">Day</label>
-<select name="select-choice-day" id="select-choice-day">
- <option>Day</option>
- <option value="1">1</option>
- <!-- etc. -->
-</select>
-
-<label for="select-choice-year">Year</label>
-<select name="select-choice-year" id="select-choice-year">
- <option>Year</option>
- <option value="2011">2011</option>
- <!-- etc. -->
-</select>
-</fieldset>
-</div>
-</code></pre>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Date of Birth:</legend>
-
- <label for="select-choice-month">Month</label>
- <select name="select-choice-month" id="select-choice-month">
- <option>Month</option>
- <option value="jan">January</option>
- <option value="dec">December</option>
- <option value="feb">February</option>
- <option value="mar">March</option>
- <option value="apr">April</option>
- <option value="may">May</option>
- <option value="jun">June</option>
- <option value="jul">July</option>
- <option value="aug">August</option>
- <option value="sep">September</option>
- <option value="oct">October</option>
- <option value="nov">November</option>
- <option value="dec">December</option>
- </select>
-
- <label for="select-choice-day">Day</label>
- <select name="select-choice-day" id="select-choice-day">
- <option>Day</option>
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- <option value="5">5</option>
- <option value="6">6</option>
- <option value="7">7</option>
- </select>
-
- <label for="select-choice-year">Year</label>
- <select name="select-choice-year" id="select-choice-year">
- <option>Year</option>
- <option value="2011">2011</option>
- <option value="2010">2010</option>
- <option value="2009">2009</option>
- <option value="2008">2008</option>
- <option value="2007">2007</option>
- <option value="2006">2006</option>
- <option value="2005">2005</option>
- <option value="2004">2004</option>
- </select>
- </fieldset>
-
-</div>
-
-<h2>Horizontally grouped select inputs</h2>
-<p>Select inputs can also be used for grouped sets with more than one related selections. To make a horizontal button set, add the <code>data-type="horizontal"</code> to the fieldset. Note that the buttons which trigger the select will resize depending on the currently selected option’s value. Note that browsers without support for <code>display: inline-block;</code> will group the selects vertically, as above.</p>
-
-<code>
-<fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong>>
-</code>
-
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Date of Birth:</legend>
-
- <label for="select-choice-month">Month</label>
- <select name="select-choice-month" id="select-choice-month">
- <option>Month</option>
- <option value="jan">January</option>
- <option value="dec">December</option>
- <option value="feb">February</option>
- <option value="mar">March</option>
- <option value="apr">April</option>
- <option value="may">May</option>
- <option value="jun">June</option>
- <option value="jul">July</option>
- <option value="aug">August</option>
- <option value="sep">September</option>
- <option value="oct">October</option>
- <option value="nov">November</option>
- <option value="dec">December</option>
- </select>
-
- <label for="select-choice-day">Day</label>
- <select name="select-choice-day" id="select-choice-day">
- <option>Day</option>
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- <option value="5">5</option>
- <option value="6">6</option>
- <option value="7">7</option>
- </select>
-
- <label for="select-choice-year">Year</label>
- <select name="select-choice-year" id="select-choice-year">
- <option>Year</option>
- <option value="2011">2011</option>
- <option value="2010">2010</option>
- <option value="2009">2009</option>
- <option value="2008">2008</option>
- <option value="2007">2007</option>
- <option value="2006">2006</option>
- <option value="2005">2005</option>
- <option value="2004">2004</option>
- </select>
- </fieldset>
-
-<h2>Calling the select menu plugin</h2>
-<p>The select menu plugin will auto initialize on any page that contains a select menu, no need for a <code>data-role</code> attribute in the markup. However, you can directly call the select menu plugin on any selector, just like any normal jQuery plugin:</p>
-<pre><code>
-$('select').selectmenu();
-</code></pre>
-
- </form>
-
-
- <h2>Theming selects</h2>
- <p>You can specify any jQuery Mobile button <code>data-</code> attribute on a select element, too. In this example, we're setting the theme, icon and inline properties:</p>
-
- <div data-role="fieldcontain">
- <label for="select-choice-11" class="select">Actions</label>
- <select name="select-choice-11" id="select-choice-11" data-theme="e" data-icon="gear" data-inline="true" data-native-menu="false">
- <option value="edit">Edit user</option>
- <option value="delete">Delete user</option>
- </select>
- </div>
-
- <p>The <code>data-overlay-theme</code> attribute can be added a select element to set the color of the overlay layer that the dialog-based custom select menus and the outer border of the smaller custom menus. By default, the content block colors for swatch A will be used for the overlays.</p>
-
- <div data-role="fieldcontain">
- <label for="select-choice-15" class="select">Size</label>
- <select name="select-choice-15" id="select-choice-15" data-theme="b" data-overlay-theme="d" data-native-menu="false">
- <option value="t">Tall</option>
- <option value="g">Grande</option>
- <option value="v">Vente</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-13" class="select">Choose state(s):</label>
- <select name="select-choice-13" id="select-choice-13" data-native-menu="false" data-theme="a" data-overlay-theme="e">
- <option>Choose options</option>
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
- <h2>Custom select menus</h2>
- <p>For the sake of advanced styling, the framework also offers a method of generating <a href="custom.html">custom menus</a> from existing select menu markup instead of the native OS menu. The custom menu supports disabled options and multiple selection (whereas native mobile OS support for both is inconsistent), adds an elegant way to handle placeholder values, and restores missing functionality on certain platforms such as <code>optgroup</code> support on Android.
-
- <a href="custom.html" data-role="button">Custom select menu docs</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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li data-theme="a"><a href="index.html">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Select methods</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Select Menus</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">
-
- <form action="#" method="get">
-
- <h2>Select menus</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The select menu plugin has the following methods:</p>
-
- <dl>
-
- <dt><code>close</code> close an open select menu</dt>
- <dd>
- <pre><code>
-$('select').selectmenu('close');
- </code></pre>
- </dd>
-
- <dt><code>enable</code> enable a disabled select</dt>
- <dd>
- <pre><code>
-$('select').selectmenu('enable');
- </code></pre>
- </dd>
-
- <dt><code>disable</code> disable a select.</dt>
- <dd>
- <pre><code>
-$('select').selectmenu('disable');
- </code></pre>
- </dd>
-
- <dt><code>open</code> open a closed select menu</dt>
- <dd>
- <pre><code>
-$('select').selectmenu('open');
- </code></pre>
- </dd>
-
- <dt><code>refresh</code> update the custom select</dt>
- <dd>
- This is used to update the custom select to reflect the native select element's value.If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu. Also, if you pass a true argument you can force the rebuild to happen.
- <pre><code>
-//refresh value
-$('select').selectmenu('refresh');
-
-//refresh and force rebuild
-$('select').selectmenu('refresh', true);
- </code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li data-theme="a"><a href="index.html">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Select options</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Select Menus</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">
-
- <form action="#" method="get">
-
- <h2>Select menus</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The select menu plugin has the following options:</p>
-
-
- <dl>
-
- <dt><code>corners</code> <em>boolean</em></dt>
- <dd>
- <p class="default">default: true</p>
- <p>Applies the theme button border-radius to the select button if set to true. This option is also exposed as a data attribute: <code>data-corners="false"</code></p>
- <pre><code>$('select').selectmenu(<strong>{ corners: "false" }</strong>);</code></pre>
- </dd>
- <dt><code>icon</code> <em>string</em></dt>
- <dd>
- <p class="default">default: "arrow-down"</p>
- <p>Applies an icon from the <a href="../../buttons/buttons-icons.html">icon set</a> to the custom button. This option is also exposed as a data attribute: <code>data-icon="star"</code></p>
- <pre><code>$('select').selectmenu(<strong>{ icon: "star" }</strong>);</code></pre>
- </dd>
-
- <dt><code>iconpos</code> <em>string</em></dt>
- <dd>
- <p class="default">default: "right"</p>
- <p>Position of the icon in the select button. Possible values: left, right, none, notext. The notext value will display the select as an icon-only button with no text feedback. This option is also exposed as a data attribute: <code>data-iconpos="left"</code></p>
- <pre><code>$('select').selectmenu(<strong>{ iconpos: "left" }</strong>);</code></pre>
- </dd>
-
- <dt><code>iconshadow</code> <em>boolean</em></dt>
- <dd>
- <p class="default">default: true</p>
- <p>Applies the theme shadow to the select button if set to true. This option is also exposed as a data attribute: <code>data-iconshadow="false"</code></p>
- <pre><code>$('select').selectmenu(<strong>{ iconshadow: "false" }</strong>);</code></pre>
- </dd>
-
- <dt><code>initSelector</code> <em>CSS selector string</em></dt>
- <dd>
- <p class="default">default: "select:not(:jqmData(role='slider'))"</p>
- <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as select menus. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
- <pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.selectmenu.prototype.options.initSelector = ".myselect";</strong>
-});
-</code></pre>
- </dd>
-
- <dt><code>inline</code> <em>boolean</em></dt>
- <dd>
- <p class="default">default: null (false)</p>
- <p>If set to true, this will make the select button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the select button is full width, regardless of the feedback content. Possible values: true, false. This option is also exposed as a data attribute: <code>data-inline="true"</code></p>
- <pre><code>$('select').selectmenu(<strong>{ inline: "true" }</strong>);</code></pre>
- </dd>
-
- <dt><code>nativeMenu</code> <em>boolean</em></dt>
- <dd>
- <p class="default">default: true</p>
- <p>When set to true, clicking the custom-styled select menu will open the native select menu which is best for performance. If set to false, the custom select menu style will be used instead of the native menu. This option is also exposed as a data attribute: <code>data-native-menu="false"</code></p>
- <pre><code>$('select').selectmenu(<strong>{ nativeMenu: "false" }</strong>);</code></pre>
- </dd>
-
- <dt><code>shadow</code> <em>boolean</em></dt>
- <dd>
- <p class="default">default: true</p>
- <p>Applies the drop shadow style to the select button if set to true. This option is also exposed as a data attribute: <code>data-shadow="false"</code></p>
- <pre><code>$('select').selectmenu(<strong>{ shadow: "false" }</strong>);</code></pre>
- </dd>
-
- <dt><code>theme</code> <em>string</em></dt>
- <dd>
- <p class="default">default: null, inherited from parent</p>
- <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
- <pre><code>$('select').selectmenu(<strong>{ theme: "a" }</strong>);</code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li data-theme="a"><a href="index.html">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Slider events</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Slider</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">
-
- <form action="#" method="get">
-
- <h2>Slider</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
- </ul>
-
- <p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
- <pre><code>
-$( ".selector" ).bind( "change", function(event, ui) {
- ...
-});
-</code></pre>
-
- <p>The slider plugin has the following custom event:</p>
-
- <dl>
-
- <dt><code>create</code> triggered when a slider is created</dt>
- <dd>
-
- <pre><code>
-$( ".selector" ).slider({
- create: function(event, ui) { ... }
-});
- </code></pre>
- </dd>
-
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li data-theme="a"><a href="index.html">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Slider</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Slider</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">
-
- <form action="#" method="get">
- <h2>Slider</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>To add a slider widget to your page, use a standard <code>input</code> with the <code>type="range"</code> attribute. The input's <code>value</code> is used to configure the starting position of the handle and the value is populated in the text input. Specify <code>min</code> and <code>max</code> attribute values to set the slider's range. The framework will parse these attributes to configure the slider widget. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to sliders.</p>
-
- <p>As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.</p>
- <p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
-
- <p>The framework will find all <code>input</code> elements with a <code>type="range"</code> and automatically enhance them into a slider with an accompanying input, no need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of this input into a slider, add <code>data-role="none"</code> attribute to the <code>input</code> and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
-
-<pre><code>
- <label for="slider-0">Input slider:</label>
- <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
-</code></pre>
-
- <p>The default slider is displayed like this:</p>
- <label for="slider-0">Input slider:</label>
- <input type="range" name="slider-1" id="slider-0" value="25" min="0" max="100" />
-
- <p>Optionally wrap the slider markup in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
-
-
-<pre><code>
-<strong><div data-role="fieldcontain">
-</strong> <label for="slider">Input slider:</label>
- <input type="range" name="slider" id="slider" value="25" min="0" max="100" />
-<strong></div>
-</strong></code></pre>
-
- <p>The slider is now displayed like this:</p>
- <div data-role="fieldcontain">
- <label for="slider-1">Input slider:</label>
- <input type="range" name="slider-1" id="slider-1" value="25" min="0" max="100" />
- </div>
-
- <p>Sliders also respond to key commands. Right Arrow, Up Arrow and Page Up keys increase the value; Left Arrow, Down Arrow and Page Down keys decrease it. To move the slider to its minimum or maximum value, use the Home or End key, respectively.</p>
-
-
- <h2>Calling the slider plugin</h2>
-
-<p>This plugin will auto initialize on any page that contains a text <code>input</code> with the <code>type="range"</code> attribute. However, if needed you can directly call the <code>slider</code> plugin on any selector, just like any jQuery plugin:</p>
-<pre><code>
-$('input').slider();
-</code></pre>
-
-
- <h2>Theming the slider</h2>
- <p>To set the theme swatch for the slider, add a <code>data-theme</code> attribute to the <code>input</code> which will apply the theme to both the input, handle and track. The track swatch can be set separately by adding the <code>data-track-theme</code> attribute to apply the down state version of the selected button swatch.</p>
-
- <pre><code>
-<div data-role="fieldcontain">
- <label for="slider-2">Input slider:</label>
- <input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" <strong>data-theme="a" data-track-theme="b"</strong> />
-</div>
- </code></pre>
-
- <p>This will produce a themed slider:</p>
- <div data-role="fieldcontain">
- <label for="slider-2">Input slider:</label>
- <input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" data-theme="a" data-track-theme="b" />
- </div>
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li data-theme="a"><a href="index.html">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Slider methods</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Slider</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">
-
- <form action="#" method="get">
-
- <h2>Slider</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The slider plugin has the following methods:</p>
-
- <dl>
- <dt><code>enable</code> enable a disabled slider</dt>
- <dd>
- <pre><code>
-$('.selector').slider('enable');
- </code></pre>
- </dd>
-
- <dt><code>disable</code> disable a slider</dt>
- <dd>
- <pre><code>
-$('.selector').slider('disable');
- </code></pre>
- </dd>
-
- <dt><code>refresh</code> update the slider</dt>
- <dd>
- <p>If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling.</p>
-
- <pre><code>
-$('.selector').slider('refresh');
- </code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li data-theme="a"><a href="index.html">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Slider options</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Slider</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">
-
- <form action="#" method="get">
-
- <h2>Slider</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The slider plugin has the following options:</p>
-
- <dl>
- <dt><code>disabled</code> <em>string</em></dt>
- <dd>
- <p class="default">default: false</p>
- <p>Sets the default state of the slider to disabled when "true".</p>
- <pre><code>$('.selector').slider(<strong>{ disabled: "true" }</strong>);</code></pre>
- </dd>
-
- <dt><code>initSelector</code> <em>CSS selector string</em></dt>
- <dd>
- <p class="default">default: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"</p>
- <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as sliders. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.slider.prototype.options.initSelector = ".myslider";</strong>
-});
-</code></pre>
- </dd>
-
- <dt><code>theme</code> <em>string</em></dt>
- <dd>
- <p class="default">default: null, inherited from parent</p>
- <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
- <pre><code>$('.selector').slider(<strong>{ theme: "a" }</strong>);</code></pre>
- </dd>
-
- <dt><code>trackTheme</code> <em>string</em></dt>
- <dd>
- <p class="default">default: null, inherited from parent</p>
- <p>Sets the color scheme (swatch) for the slider's track, specifically. It accepts a single letter from a-z that maps to the swatches included in your theme.</p>
- <pre><code>$('.selector').slider(<strong>{ theme: "a" }</strong>);</code></pre>
- <p>This option can be overridden in the markup by assigning a data attribute to the input, e.g. <code>data-track-theme="a"</code>.</p>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li data-theme="a"><a href="index.html">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Slider events</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Flip Toggle Switch</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">
-
- <form action="#" method="get">
-
- <h2>Flip toggle switch</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
- </ul>
-
- <p>Bind events directly to the <code>select</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
- <pre><code>
-$( ".selector" ).bind( "change", function(event, ui) {
- ...
-});
-</code></pre>
-
- <p>The slider plugin has the following custom event:</p>
-
- <dl>
-
- <dt><code>create</code> triggered when a slider is created</dt>
- <dd>
-
- <pre><code>
-$( ".selector" ).slider({
- create: function(event, ui) { ... }
-});
- </code></pre>
- </dd>
-
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Sliders</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Flip Toggle Switch</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">
-
- <form action="#" method="get">
- <h2>Flip toggle switch</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>A binary "flip" switch is a common UI element on mobile devices that is used for binary on/off or true/false data input. You can either drag the flip handle like a slider or tap one side of the switch.</p>
-
- <p>To create a flip toggle, start with a <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options accordingly. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to flip switches.</p>
-
- <p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
-
-<pre><code>
-<label for="flip-a">Select slider:</label>
-<select name="slider" id="flip-a" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
-</select>
-</code></pre>
-
- <p>This will produce a basic flip toggle switch input. The default styles set the width of the switch to 100% of the parent container and stacks the label on a separate line.</p>
-
- <label for="flip-a">Flip switch:</label>
- <select name="slider" id="flip-a" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
-
- <p>Optionally wrap the switch markup in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
-
-<pre><code>
-<strong><div data-role="fieldcontain">
-</strong><label for="flip-b">Flip switch:</label>
- <select name="slider" id="flip-b" data-role="slider">
- <option value="no">No</option>
- <option value="yes">Yes</option>
- </select>
-<strong></div>
-</strong></code></pre>
- <p>The flip toggle switch is now displayed like this:</p>
- <div data-role="fieldcontain">
- <label for="flip-b">Flip switch:</label>
- <select name="slider" id="flip-b" data-role="slider">
- <option value="no">No</option>
- <option value="yes">Yes</option>
- </select>
- </div>
-
-
- <h2>Theming the flip switch</h2>
-
- <p>Like all form elements, this widget will automatically inherit the theme from it's parent container. TO choose a specific theme color swatch, specify the <code>data-theme</code> attribute on the select and specify a swatch letter.</p>
-
-<pre><code>
-<div data-role="fieldcontain">
- <label for="flip-c">Flip switch:</label>
- <select name="slider" id="flip-c" data-role="slider" data-theme="a">
- <option value="no">No</option>
- <option value="yes">Yes</option>
- </select>
-</div>
-</code></pre>
- <p>This results in a switch with the A swatch colors for the handle. Note that the lefthand "on" state gets the active state color.</p>
- <div data-role="fieldcontain">
- <label for="flip-c">Flip switch:</label>
- <select name="slider" id="flip-c" data-role="slider" data-theme="a">
- <option value="no">No</option>
- <option value="yes">Yes</option>
- </select>
- </div>
-
- <p>Here is a E swatch variation:</p>
- <div data-role="fieldcontain">
- <label for="flip-d">Flip switch:</label>
- <select name="slider" id="flip-d" data-role="slider" data-theme="e">
- <option value="no">No</option>
- <option value="yes">Yes</option>
- </select>
- </div>
-
- <h2>Calling the switch plugin</h2>
-
-<p>This plugin will auto initialize on any page that contains a <code>select</code> with the <code>data-role="slider"</code> attribute. However, if needed you can directly call the <code>slider</code> plugin on any selector, just like any jQuery plugin:</p>
-<pre><code>
-$('select').slider();
-</code></pre>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Slider methods</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Flip Toggle Switch</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">
-
- <form action="#" method="get">
-
- <h2>Flip toggle switch</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The slider plugin has the following methods:</p>
-
- <dl>
- <dt><code>enable</code> enable a disabled slider</dt>
- <dd>
- <pre><code>
-$('.selector').slider('enable');
- </code></pre>
- </dd>
-
- <dt><code>disable</code> disable a slider</dt>
- <dd>
- <pre><code>
-$('.selector').slider('disable');
- </code></pre>
- </dd>
-
- <dt><code>refresh</code> update the slider</dt>
- <dd>
- <p>If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling.</p>
-
- <pre><code>
-$('.selector').slider('refresh');
- </code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Slider options</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Flip Toggle Switch</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">
-
- <form action="#" method="get">
-
- <h2>Flip toggle switch</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The slider plugin has the following options:</p>
-
- <dl>
- <dt><code>disabled</code> <em>string</em></dt>
- <dd>
- <p class="default">default: false</p>
- <p>Sets the default state of the slider to disabled when "true".</p>
- <pre><code>$('.selector').slider(<strong>{ disabled: "true" }</strong>);</code></pre>
- </dd>
-
- <dt><code>initSelector</code> <em>CSS selector string</em></dt>
- <dd>
- <p class="default">default: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"</p>
- <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as sliders. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.slider.prototype.options.initSelector = ".myslider";</strong>
-});
-</code></pre>
- </dd>
-
- <dt><code>theme</code> <em>string</em></dt>
- <dd>
- <p class="default">default: null, inherited from parent</p>
- <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
- <pre><code>$('.selector').slider(<strong>{ theme: "a" }</strong>);</code></pre>
- </dd>
-
- <dt><code>trackTheme</code> <em>string</em></dt>
- <dd>
- <p class="default">default: null, inherited from parent</p>
- <p>Sets the color scheme (swatch) for the slider's track, specifically. It accepts a single letter from a-z that maps to the swatches included in your theme.</p>
- <pre><code>$('.selector').slider(<strong>{ theme: "a" }</strong>);</code></pre>
- <p>This option can be overridden in the markup by assigning a data attribute to the input, e.g. <code>data-track-theme="a"</code>.</p>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li><a href="../textinputs/index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Text Input events</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Text inputs</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">
-
- <form action="#" method="get">
-
- <h2>Text inputs</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
- </ul>
-
- <p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
- <pre><code>
-$( ".selector" ).bind( "change", function(event, ui) {
- ...
-});
-</code></pre>
-
- <p>The text input plugin has the following custom events:</p>
-
- <dl>
-
- <dt><code>create</code> triggered when a text input is created</dt>
- <dd>
-
- <pre><code>
-$( ".selector" ).textinput({
- create: function(event, ui) { ... }
-});
- </code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li data-theme="a"><a href="index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Text inputs</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Text inputs</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">
-
- <form action="#" method="get">
-
- <h2>Text inputs & Textareas</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to text inputs.</p>
-
- <h2>Text inputs</h2>
- <p>To collect standard alphanumeric text, use an <code>input</code> with a <code>type="text"</code> attribute. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
-
-<pre><code>
- <label for="basic">Text Input:</label>
- <input type="text" name="name" id="basic" value="" />
-</code></pre>
-
- <p>This will produce a basic text input. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.</p>
-
- <label for="basic">Text Input:</label>
- <input type="text" name="name" id="basic" value="" />
-
- <p>Optionally wrap the text input in a container with the <code> data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
-
-<pre><code>
-<strong><div data-role="fieldcontain">
-</strong> <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" />
-<strong></div>
-</strong></code></pre>
-
- <p>The text input is now displayed like this:</p>
- <div data-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" />
- </div>
-
-
- <h3>More text input types</h3>
- <p>In jQuery Mobile, you can use existing and new HTML5 input types such as <code>password</code>, <code>email</code>, <code>tel</code>, <code>number</code>, and more. Some type values are rendered differently across browsers — for example, Chrome displays the <code>range</code> input renders as a slider — so we standardize their appearance by dynamically changing their type to <code>text</code> (currently, this applies to <code>range</code> and <code>search</code>). You can configure which input types are degraded to <code>text</code> with the <code>page</code> plugin's options.</p>
-
- <p>One major advantage of using these more specific input types if that on mobile devices, specialized keyboards that speed data entry are offered in place of the standard text keyboard. Try the followin inputs on a mobile device to see which display custom keyboards on various platforms.</p>
-
- <div data-role="fieldcontain">
- <label for="password">Password:</label>
- <input type="password" name="password" id="password" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="number">Number:</label>
- <input type="number" name="number" id="number" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="email">Email:</label>
- <input type="email" name="email" id="email" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="url">Url:</label>
- <input type="url" name="url" id="url" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="tel">Tel:</label>
- <input type="tel" name="tel" id="tel" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="time">Time:</label>
- <input type="time" name="time" id="time" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="date">Date:</label>
- <input type="date" name="date" id="date" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="month">Month:</label>
- <input type="month" name="month" id="month" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="week">Week:</label>
- <input type="week" name="week" id="week" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="datetime">Datetime:</label>
- <input type="datetime" name="datetime" id="datetime" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="datetime-l">Datetime local:</label>
- <input type="datetime-local" name="datetime-l" id="datetime-l" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="color">Color:</label>
- <input type="color" name="color" id="color" value="" />
- </div>
-
-
-
- <h2>Textareas</h2>
- <p>For multi-line text inputs, use a <code>textarea</code> element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar. </p>
- <p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>textarea</code> so they are semantically associated, and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
-
-<pre><code>
-<strong><label for="textarea-a">Textarea:</label>
-<textarea name="textarea" id="textarea-a"></strong>
-I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
-<strong></textarea></strong>
-</code></pre>
-
- <p>This will produce a basic textarea with the width set to 100% of the parent container and the label stacked on a separate line.The textarea will grow to fit new lines as you type:</p>
- <label for="textarea-a">Textarea:</label>
- <textarea name="textarea" id="textarea-a">
-I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
- </textarea>
-
-<pre><code>
-<strong><div data-role="fieldcontain">
-</strong><label for="textarea">Textarea:</label>
- <textarea name="textarea" id="textarea"></textarea>
-<strong></div></strong>
-</code></pre>
-
- <p>The textarea is displayed like this and will grow to fit new lines as you type:</p>
- <div data-role="fieldcontain">
- <label for="textarea">Textarea:</label>
- <textarea name="textarea" id="textarea"></textarea>
- </div>
-
-
- <h2>Calling the textinput plugin</h2>
-
- <p>This plugin will auto initialize on any page that contains a textarea or any of the text input types listed above, no need for a <code>data-role</code> attribute in the markup. However, if needed you can directly call the <code>textinput</code> plugin on any selector, just like any jQuery plugin:</p>
- <pre><code>
-$('input').textinput();
- </code></pre>
-
-
- <h2>Degraded input types</h2>
- <p>jQuery Mobile degrades several HTML5 input types back to type=text, or type=number after adding enhanced controls. For example, inputs with a type of range are enhanced with a custom slider control, and their type is set to number to offer a usable form input alongside that slider. Inputs with a type of search are degraded back to type=text after we add our own themable search input styling.</p>
- <p>The page plugin contains a list of input types that are set to either true which means they'll degrade to type=text, false which means they'll be left alone, or a string such as "number", which means they'll be converted to that type (such as the case of type=range).</p>
-
- <p>You can configure which types are changed via the page plugin's <code>degradeInputs</code> option, which can be manipulated externally via <code>$.mobile.page.prototype.options.degradeInputs</code>, which has properties: color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, and week. Be sure to configure this inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
-
-
- </form>
-
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li data-theme="a"><a href="index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Text Input methods</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Text inputs</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">
-
- <form action="#" method="get">
-
- <h2>Text inputs</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The text input plugin has the following methods:</p>
-
- <dl>
-
- <dt><code>enable</code> enable a disabled text input</dt>
- <dd>
- <pre><code>
-$('.selector').textinput('enable');
- </code></pre>
- </dd>
-
- <dt><code>disable</code> disable a text input</dt>
- <dd>
- <pre><code>
-$('.selector').textinput('disable');
- </code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li data-theme="a"><a href="index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Text Input options</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Text inputs</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">
-
- <form action="#" method="get">
-
- <h2>Text inputs</h2>
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
- <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
- <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
- <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
- </ul>
-
- <p>The text input plugin has the following options:</p>
-
- <dl>
- <dt><code>initSelector</code> <em>CSS selector string</em></dt>
- <dd>
- <p class="default">default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"</p>
- <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as textinputs. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.textinput.prototype.options.initSelector = ".myInputs";</strong>
-});
-</code></pre>
- </dd>
-
- <dt><code>theme</code> <em>string</em></dt>
- <dd>
- <p class="default">default: null, inherited from parent</p>
- <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
- <pre><code>$('.selector').textinput(<strong>{ theme: "a" }</strong>);</code></pre>
- </dd>
-
- </dl>
-
- </form>
- </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">Form elements</li>
- <li><a href="../docs-forms.html">Form basics</a></li>
- <li><a href="../forms-all.html">Form element gallery</a></li>
- <li data-theme="a"><a href="index.html">Text inputs</a></li>
- <li><a href="../search/">Search input</a></li>
- <li><a href="../slider/">Slider</a></li>
- <li><a href="../switch/">Flip toggle switch</a></li>
- <li><a href="../radiobuttons/">Radio buttons</a></li>
- <li><a href="../checkboxes/">Checkboxes</a></li>
- <li><a href="../selects/">Select menus</a></li>
- <li><a href="../forms-themes.html">Theming forms</a></li>
- <li><a href="../forms-all-native.html">Native form elements</a></li>
- <li><a href="../forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery UI Mobile Framework - Documentation</title>
- <link rel="stylesheet" href="../css/themes/default/" />
- <link rel="stylesheet" href="_assets/css/jqm-docs.css"/>
- <script src="../js/jquery.js"></script>
- <script src="../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="_assets/js/jqm-docs.js"></script>
- <script src="../js/"></script>
- <!-- Need to get a proper redirect hooked up. Blech. -->
- <meta http-equiv="refresh" content="0;url=../index.html">
-</head>
-<body>
- <div data-role="page" class="type-index">
-
-<div data-role="header" data-theme="f">
- <h1>jQuery Mobile Docs</h1>
- <a href="../index.html" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>
-</div>
-
-<div data-role="content">
-
-<p>Nothing to see here folks.</p>
-<a href="../index.html" data-role="button">View the documentation home page</a>
-
-</div>
-
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists Overview</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Lists</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>Basic linked lists</h2>
- <p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to listviews.</p>
- <p>Here is the HTML markup for a basic linked list.</p>
-
-<pre><code>
-<ul data-role="listview" data-theme="g">
- <li><a href="acura.html">Acura</a></li>
- <li><a href="audi.html">Audi</a></li>
- <li><a href="bmw.html">BMW</a></li>
-</ul>
-</code></pre>
-
- <a href="lists-ul.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Basic list example</a>
-
- <p><strong>Style note on non-inset lists</strong>: all standard, non-inset lists have a -15px margin to negate the 15px of padding on the content area to make lists fill to the edges of the screen. If you add other widgets above or below a list, the negative margin may make these elements overlap so you'll need to add additional spacing in your custom CSS.</p>
- <h2>Nested lists</h2>
- <p>By nesting child <code>ul</code> or <code>ol</code> inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework.</p>
- <p>To <a href="../lists/lists-themes.html">set the swatch color</a> of the child list views, set the <code>data-theme</code> attribute on each list inside.</p>
- <a href="lists-nested.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nested list example</a>
-
- <h2>Numbered lists</h2>
- <p>Lists can also be created from ordered lists <code>(ol)</code> which is useful when presenting items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the list view, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript.</p>
-
- <a href="lists-ol.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Numbered list example</a>
-
- <h2>Read-only lists</h2>
- <p>List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework defaults to styling these list with the "c" theme swatch and sets the text size to a smaller size than the clickable lists to save a bit of space.</p>
-
- <a href="lists-readonly-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Read-only list example</a>
-
- <h2>Split button lists</h2>
- <p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and set the <code>title</code> attribute of the link to the text the link for accessibility. </p>
- <p>You can set the icon for the right split icon by specifying a <code>data-split-icon</code> attribute with the <a href="../buttons/buttons-themes.html">icon name</a> you want. The theme swatch color of the split button can be set by specifying a swatch letter in the <code>data-split-theme</code> attribute</p>
-
- <a href="lists-split.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Split list example</a>
-
-
- <h2>List dividers</h2>
- <p>List items can be turned into dividers to organize and group the list items. This is done by adding the <code> data-role="list-divider"</code> to any list item. These items are styled with the body swatch "b" by default (light gray in the default theme) but you can specify a theme for dividers by adding the <code>data-dividertheme</code> attribute to the list element (<code>ul</code> or <code>ol</code>) and specifying a theme swatch letter.</p>
-
- <a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>
-
-
- <h2>Search filter</h2>
- <p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either <a href="../api/globalconfig.html">bind to the <code>mobileinit</code> event</a> and set the <code>$.mobile.listview.prototype.options.filterPlaceholder</code> option to a string of your choosing, or use the data-attribute <code>data-filter-placeholder</code> on your listview. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data-attribute <code>data-filter-theme</code> on your listview.</p>
-
- <a href="lists-search.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Search filter example</a>
-
- <p>If you want to change the way in which list items are filtered, ie fuzzy search or matching from the beginning of the string, you can configure the callback used internally by defining <code>$.mobile.listview.prototype.options.filterCallback</code> during <code>mobileinit</code> or after the widget has been created with <code>$("#mylist").listview('option', 'filterCallback', yourFilterFunction)</code>. Any function defined for the callback will be provided two arguments. First, the text of the current list item and second, the value being searched for. A truthy value will result in a hidden list item. The default callback which filters entries without the <code>searchValue</code> as a substring is described below:
- </p>
-
- <pre>
- <code>
-function( text, searchValue ){
- return text.toLowerCase().indexOf( searchValue ) === -1;
-};
- </code>
- </pre>
-
- <h2>Text formatting & counts</h2>
- <p>The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information and counts through semantic HTML markup.</p>
-
- <ul>
- <li>To add a count indicator to the right of the list item, wrap the number in an element with a class of <code>ui-li-count</code></li>
- <li>To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis. </li>
- <li>Supplemental information can be added to the right of each list item by wrapping content in an element with a class of <code>ui-li-aside</code></li>
- </ul>
- <a href="lists-count.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with count bubbles</a>
- <a href="lists-formatting.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with text formatting</a>
-
- <h2>Thumbnails & icons</h2>
- <p>To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square. To use standard 16x16 pixel icons in list items, add the class of <code>ui-li-icon</code> to the image element.</p>
- <a href="lists-thumbnails.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with thumbnail images</a>
- <a href="lists-icons.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with icon images</a>
-
- <h2>Inset lists</h2>
- <p>If lists are embedded in a page with other types of content, an inset list packages the list into a block that sits inside the content area with a bit of margin and rounded corners (theme controlled). By adding the <code> data-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance.</p>
-
- <a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inset list example</a>
-
- <h2>Calling the listview plugin</h2>
- <p>You can directly call the listview plugin on any selector, just like any jQuery plugin:</p>
- <code>$('#mylist').listview();</code>
-
- <h2>Updating lists</h2>
- <p>If you add items to a listview, you'll need to call the <code>refresh()</code> method on it to update the styles and create any nested lists that are added. For example:</p>
- <code>$('#mylist').listview('refresh');</code>
-
- <p>Note that the <code>refresh()</code> method only affects <strong>new nodes</strong> appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh. </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">List views</li>
- <li data-theme="a"><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
-
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Lists</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">
-
- <p>Lists are used for data display, navigation, result lists, and data entry so jQuery Mobile includes a wide range of list types and formatting examples to cover most common design patterns.</p>
-
- <ul data-role="listview" data-inset="true">
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
-
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
-
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
- <!--<li><a href="api-lists.html">API documentation</a></li>-->
- </ul>
-
-
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Linked list samples</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">
- <form>
- <h2>Simple list</h2>
-
- <ul data-role="listview">
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Ferrari</a></li>
- </ul>
-
- <h2>Count bubbles</h2>
- <ul data-role="listview">
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- <h2>Numbered list</h2>
- <ol data-role="listview">
- <li><a href="index.html">The Godfather</a></li>
- <li><a href="index.html">Inception</a></li>
- <li><a href="index.html">The Good, the Bad and the Ugly </a></li>
- <li><a href="index.html">Pulp Fiction</a></li>
- <li><a href="index.html">Schindler's List</a></li>
- </ol>
-
- <h2>Divided, formatted content</h2>
- <ul data-role="listview">
- <li><a href="index.html">
- <h3>Stephen Weber</h3>
- <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
- <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
- <p class="ui-li-aside"><strong>6:24</strong>PM</p>
- </a></li>
- <li><a href="index.html">
- <h3>jQuery Team</h3>
- <p><strong>Boston Conference Planning</strong></p>
- <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
- <p class="ui-li-aside"><strong>9:18</strong>AM</p>
- </a></li>
- </ul>
-
-
-
-
- <h2>Icon list</h2>
- <ul data-role="listview">
- <li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
- </ul>
-
- <h2>Thumbnail, split button list</h2>
-
- <ul data-role="listview">
- <li><a href="index.html">
- <img src="images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-p.jpg" />
- <h3>Wolfgang Amadeus Phoenix</h3>
- <p>Phoenix</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- </ul>
-
- <h2>Divided, filterable list</h2>
- <ul data-role="listview" data-filter="true">
- <li data-role="list-divider">A</li>
- <li><a href="index.html">Adam Kinkaid</a></li>
- <li><a href="index.html">Alex Wickerham</a></li>
- <li><a href="index.html">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="index.html">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="index.html">Caleb Booth</a></li>
- <li><a href="index.html">Christopher Adams</a></li>
- </ul>
-
-
-
-
- </form>
- </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">List views</li>
- <li data-theme="a"><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists Count Bubbles</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Basic list</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">
- <ul data-role="listview">
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li data-theme="a"><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - List Dividers</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>List dividers</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">
- <ul data-role="listview">
- <li data-role="list-divider">A</li>
- <li><a href="index.html">Adam Kinkaid</a></li>
- <li><a href="index.html">Alex Wickerham</a></li>
- <li><a href="index.html">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="index.html">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="index.html">Caleb Booth</a></li>
- <li><a href="index.html">Christopher Adams</a></li>
- <li><a href="index.html">Culver James</a></li>
- <li data-role="list-divider">D</li>
- <li><a href="index.html">David Walsh</a></li>
- <li><a href="index.html">Drake Alfred</a></li>
- <li data-role="list-divider">E</li>
- <li><a href="index.html">Elizabeth Bacon</a></li>
- <li><a href="index.html">Emery Parker</a></li>
- <li><a href="index.html">Enid Voldon</a></li>
- <li data-role="list-divider">F</li>
- <li><a href="index.html">Francis Wall</a></li>
- <li data-role="list-divider">G</li>
- <li><a href="index.html">Graham Smith</a></li>
- <li><a href="index.html">Greta Peete</a></li>
- <li data-role="list-divider">H</li>
- <li><a href="index.html">Harvey Walls</a></li>
- <li data-role="list-divider">M</li>
- <li><a href="index.html">Mike Farnsworth</a></li>
- <li><a href="index.html">Murray Vanderbuilt</a></li>
- <li data-role="list-divider">N</li>
- <li><a href="index.html">Nathan Williams</a></li>
- <li data-role="list-divider">P</li>
- <li><a href="index.html">Paul Baker</a></li>
- <li><a href="index.html">Pete Mason</a></li>
- <li data-role="list-divider">R</li>
- <li><a href="index.html">Rod Tarker</a></li>
- <li data-role="list-divider">S</li>
- <li><a href="index.html">Sawyer Wakefield</a></li>
- </ul>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li data-theme="a"><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - List Formatting</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>List formatting</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">
- <ul data-role="listview">
- <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
- <li><a href="index.html">
-
- <h3>Stephen Weber</h3>
- <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
- <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
- <p class="ui-li-aside"><strong>6:24</strong>PM</p>
-
- </a></li>
- <li><a href="index.html">
-
- <h3>jQuery Team</h3>
- <p><strong>Boston Conference Planning</strong></p>
- <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
- <p class="ui-li-aside"><strong>9:18</strong>AM</p>
-
- </a></li>
- <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
- <li><a href="index.html">
- <h3>Avery Walker</h3>
- <p><strong>Re: Dinner Tonight</strong></p>
- <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
- <p class="ui-li-aside"><strong>4:48</strong>PM</p>
- </a></li>
- <li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
- <li><a href="index.html">
- <h3>Amazon.com</h3>
- <p><strong>4-for-3 Books for Kids</strong></p>
- <p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
- <p class="ui-li-aside"><strong>12:47</strong>PM</p>
- </a></li>
- <li><a href="index.html">
- <h3>Mike Taylor</h3>
- <p><strong>Re: This weekend in Maine</strong></p>
- <p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
- <p class="ui-li-aside"><strong>6:24</strong>AM</p>
- </a></li>
- <li><a href="index.html">
- <h3>Redfin</h3>
- <p><strong>Redfin listing updates for today</strong></p>
- <p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
- <p class="ui-li-aside"><strong>5:52</strong>AM</p>
- </a></li>
- <li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
- <li><a href="index.html">
- <h3>Angela Smith</h3>
- <p><strong>Link Request</strong></p>
- <p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
- <p class="ui-li-aside"><strong>6:24</strong>AM</p>
- </a></li>
- <li><a href="index.html">
- <h3>Mike Taylor</h3>
- <p><strong>This weekend in Maine</strong></p>
- <p>Sounds good, let me check into our plans.</p>
- <p class="ui-li-aside"><strong>6:24</strong>AM</p>
- </a></li>
- </ul>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li data-theme="a"><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Inset Lists with Forms</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Inset with Forms</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">
- <form>
- <ul data-role="listview" data-inset="true">
- <li data-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" />
- </li>
- <li data-role="fieldcontain">
- <label for="textarea">Textarea:</label>
- <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
- </li>
- <li data-role="fieldcontain">
- <label for="search">Search Input:</label>
- <input type="search" name="password" id="search" value="" />
- </li>
- <li data-role="fieldcontain">
- <label for="slider2">Flip switch:</label>
- <select name="slider2" id="slider2" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </li>
- <li data-role="fieldcontain">
- <label for="slider">Slider:</label>
- <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
- </li>
- <li data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose as many snacks as you'd like:</legend>
- <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
- <label for="checkbox-1a">Cheetos</label>
-
- <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
- <label for="checkbox-2a">Doritos</label>
-
- <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
- <label for="checkbox-3a">Fritos</label>
-
- <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
- <label for="checkbox-4a">Sun Chips</label>
- </fieldset>
- </li>
-
- <li data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
- <label for="checkbox-6">b</label>
-
- <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
- <label for="checkbox-7"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
- <label for="checkbox-8">u</label>
- </fieldset>
- </li>
- <li data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
- <label for="radio-choice-1">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
- <label for="radio-choice-2">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
- <label for="radio-choice-3">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
- <label for="radio-choice-4">Lizard</label>
- </fieldset>
- </li>
-
-
- <li data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Layout view:</legend>
- <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
- <label for="radio-choice-c">List</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
- <label for="radio-choice-d">Grid</label>
- </fieldset>
- </li>
-
- <li data-role="fieldcontain">
- <label for="select-choice-1" class="select">Choose shipping method:</label>
- <select name="select-choice-1" id="select-choice-1">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </li>
-
- <li data-role="fieldcontain">
- <label for="select-choice-3" class="select">Your state:</label>
- <select name="select-choice-3" id="select-choice-3">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </li>
-
- <li data-role="fieldcontain">
- <label for="select-choice-a" class="select">Choose shipping method:</label>
- <select name="select-choice-a" id="select-choice-a" data-native-menu="false">
- <option>Custom menu example</option>
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </li>
-
- <li class="ui-body ui-body-b">
- <fieldset class="ui-grid-a">
- <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
- <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
- </fieldset>
- </li>
-
- </ul>
-
-
-
- </form>
-
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li data-theme="a"><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists with Forms</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Lists with Forms</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">
- <form>
- <ul data-role="listview">
- <li data-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" />
- </li>
- <li data-role="fieldcontain">
- <label for="textarea">Textarea:</label>
- <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
- </li>
- <li data-role="fieldcontain">
- <label for="search">Search Input:</label>
- <input type="search" name="password" id="search" value="" />
- </li>
- <li data-role="fieldcontain">
- <label for="slider2">Flip switch:</label>
- <select name="slider2" id="slider2" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </li>
- <li data-role="fieldcontain">
- <label for="slider">Slider:</label>
- <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
- </li>
- <li data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose as many snacks as you'd like:</legend>
- <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
- <label for="checkbox-1a">Cheetos</label>
-
- <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
- <label for="checkbox-2a">Doritos</label>
-
- <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
- <label for="checkbox-3a">Fritos</label>
-
- <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
- <label for="checkbox-4a">Sun Chips</label>
- </fieldset>
- </li>
-
- <li data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
- <label for="checkbox-6">b</label>
-
- <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
- <label for="checkbox-7"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
- <label for="checkbox-8">u</label>
- </fieldset>
- </li>
- <li data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
- <label for="radio-choice-1">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
- <label for="radio-choice-2">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
- <label for="radio-choice-3">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
- <label for="radio-choice-4">Lizard</label>
- </fieldset>
- </li>
-
-
- <li data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Layout view:</legend>
- <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
- <label for="radio-choice-c">List</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
- <label for="radio-choice-d">Grid</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
- <label for="radio-choice-e">Gallery</label>
- </fieldset>
- </li>
-
- <li data-role="fieldcontain">
- <label for="select-choice-1" class="select">Choose shipping method:</label>
- <select name="select-choice-1" id="select-choice-1">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </li>
-
- <li data-role="fieldcontain">
- <label for="select-choice-3" class="select">Your state:</label>
- <select name="select-choice-3" id="select-choice-3">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </li>
-
- <li data-role="fieldcontain">
- <label for="select-choice-a" class="select">Choose shipping method:</label>
- <select name="select-choice-a" id="select-choice-a" data-native-menu="false">
- <option>Custom menu example</option>
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </li>
-
- <li class="ui-body ui-body-b">
- <fieldset class="ui-grid-a">
- <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
- <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
- </fieldset>
- </li>
-
- </ul>
-
- </form>
-
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li data-theme="a"><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - List Icons</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Icons</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">
- <ul data-role="listview">
- <li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
-
-
-
- <li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
- </ul>
-
-
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li data-theme="a"><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists with Form Controls</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Inset list samples</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">
- <form>
- <h2>Simple list</h2>
-
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Ferrari</a></li>
- </ul>
-
- <h2>Count bubbles</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- <h2>Numbered list</h2>
- <ol data-role="listview" data-inset="true">
- <li><a href="index.html">The Godfather</a></li>
- <li><a href="index.html">Inception</a></li>
- <li><a href="index.html">The Good, the Bad and the Ugly </a></li>
- <li><a href="index.html">Pulp Fiction</a></li>
- <li><a href="index.html">Schindler's List</a></li>
- </ol>
-
- <h2>Divided, formatted content</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html">
- <h3>Stephen Weber</h3>
- <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
- <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
- <p class="ui-li-aside"><strong>6:24</strong>PM</p>
- </a></li>
- <li><a href="index.html">
- <h3>jQuery Team</h3>
- <p><strong>Boston Conference Planning</strong></p>
- <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
- <p class="ui-li-aside"><strong>9:18</strong>AM</p>
- </a></li>
- </ul>
-
-
-
-
- <h2>Icon list</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon ui-corner-none">France <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon ui-corner-none">United States <span class="ui-li-count">62</span></a></li>
- </ul>
-
- <h2>Thumbnail, split button list</h2>
-
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html">
- <img src="images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-p.jpg" />
- <h3>Wolfgang Amadeus Phoenix</h3>
- <p>Phoenix</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- </ul>
-
- <h2>Divided, filterable list</h2>
- <ul data-role="listview" data-filter="true" data-inset="true">
- <li data-role="list-divider">A</li>
- <li><a href="index.html">Adam Kinkaid</a></li>
- <li><a href="index.html">Alex Wickerham</a></li>
- <li><a href="index.html">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="index.html">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="index.html">Caleb Booth</a></li>
- <li><a href="index.html">Christopher Adams</a></li>
- </ul>
-
-
-
-
- </form>
-
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li data-theme="a"><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Nested Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Nested list</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">
- <ul data-role="listview">
- <li>
- <h3>Animals</h3>
- <p>All your favorites from aarkvarks to zebras.</p>
-
- <ul>
- <li>Pets
- <ul>
- <li><a href="index.html">Canary</a></li>
- <li><a href="index.html">Cat</a></li>
- <li><a href="index.html">Dog</a></li>
- <li><a href="index.html">Gerbil</a></li>
- <li><a href="index.html">Iguana</a></li>
- <li><a href="index.html">Mouse</a></li>
- </ul>
- </li>
- <li>Farm animals
- <ul>
- <li><a href="index.html">Chicken</a></li>
- <li><a href="index.html">Cow</a></li>
- <li><a href="index.html">Duck</a></li>
- <li><a href="index.html">Horse</a></li>
- <li><a href="index.html">Pig</a></li>
- <li><a href="index.html">Sheep</a></li>
- </ul>
- </li>
- <li>Wild animals
- <ul>
- <li><a href="index.html">Aardvark</a></li>
- <li><a href="index.html">Alligator</a></li>
- <li><a href="index.html">Ant</a></li>
- <li><a href="index.html">Bear</a></li>
- <li><a href="index.html">Beaver</a></li>
- <li><a href="index.html">Cougar</a></li>
- <li><a href="index.html">Dingo</a></li>
- <li><a href="index.html">Eagle</a></li>
- <li><a href="index.html">Elephant</a></li>
- <li><a href="index.html">Ferret</a></li>
- <li><a href="index.html">Frog</a></li>
- <li><a href="index.html">Giraffe</a></li>
- <li><a href="index.html">Lion</a></li>
- <li><a href="index.html">Monkey</a></li>
- <li><a href="index.html">Panda bear</a></li>
- <li><a href="index.html">Polar bear</a></li>
- <li><a href="index.html">Tiger</a></li>
- <li><a href="index.html">Zebra</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li>
-
- <h3>Colors</h3>
- <p>Fresh colors from the magic rainbow.</p>
-
- <ul>
- <li><a href="index.html">Blue</a></li>
- <li><a href="index.html">Green</a></li>
- <li><a href="index.html">Orange</a></li>
- <li><a href="index.html">Purple</a></li>
- <li><a href="index.html">Red</a></li>
- <li><a href="index.html">Yellow</a></li>
- <li><a href="index.html">Violet</a></li>
- </ul>
- </li>
- <li>
- <h3>Vehicles</h3>
- <p>Everything from cars to planes.</p>
-
- <ul>
- <li>Cars
- <ul>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Volkswagon</a></li>
- <li><a href="index.html">Volvo</a></li>
- </ul>
- </li>
- <li>Planes
- <ul>
- <li><a href="index.html">Boeing</a></li>
- <li><a href="index.html">Cessna</a></li>
- <li><a href="index.html">Derringer</a></li>
- <li><a href="index.html">Embraer</a></li>
- <li><a href="index.html">Gulfstream</a></li>
- <li><a href="index.html">Piper Aircraft</a></li>
- <li><a href="index.html">Raytheon</a></li>
- </ul>
- </li>
- <li>Construction
- <ul>
- <li><a href="index.html">Caterpillar</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">John Deere</a></li>
-
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li data-theme="a"><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Ordered Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Numbered list</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">
- <ol data-role="listview">
- <li><a href="index.html">The Godfather</a></li>
- <li><a href="index.html">Inception</a></li>
- <li><a href="index.html">The Good, the Bad and the Ugly </a></li>
- <li><a href="index.html">Pulp Fiction</a></li>
- <li><a href="index.html">Schindler's List</a></li>
- <li><a href="index.html">12 Angry Men</a></li>
- <li><a href="index.html">One Flew Over the Cuckoo's Nest</a></li>
- <li><a href="index.html">Star Wars: Episode V - The Empire Strikes Back</a></li>
- <li><a href="index.html">The Dark Knight</a></li>
- <li><a href="index.html">The Lord of the Rings: The Return of the King</a></li>
- <li><a href="index.html">Seven Samurai</a></li>
- <li><a href="index.html">Star Wars: Episode IV - A New Hope</a></li>
- <li><a href="index.html">Casablanca</a></li>
- <li><a href="index.html">Goodfellas </a></li>
- <li><a href="index.html">Toy Story 3</a></li>
- <li><a href="index.html">Fight Club</a></li>
- <li><a href="index.html">City of God</a></li>
- <li><a href="index.html">The Lord of the Rings: The Fellowship of the Ring</a></li>
- <li><a href="index.html">The Big Lebowski</a></li>
- <li><a href="index.html">Psycho</a></li>
- </ol>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li data-theme="a"><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - List Performance Test</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>500 item list</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">
- <ul data-role="listview" data-filter="true" data-theme="d">
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- </ul>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li data-theme="a"><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Readonly Inset Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Readonly Inset Lists</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>Simple list</h2>
-
- <ul data-role="listview" data-inset="true">
- <li>Acura</li>
- <li>Audi</li>
- <li>BMW</li>
- <li>Cadillac</li>
- <li>Ferrari</li>
- </ul>
-
- <h2>Count bubbles</h2>
- <ul data-role="listview" data-inset="true">
- <li>Inbox <span class="ui-li-count">12</span></li>
- <li>Outbox <span class="ui-li-count">0</span></li>
- <li>Drafts <span class="ui-li-count">4</span></li>
- <li>Sent <span class="ui-li-count">328</span></li>
- <li>Trash <span class="ui-li-count">62</span></li>
- </ul>
-
- <h2>Numbered list</h2>
- <ol data-role="listview" data-inset="true">
- <li>The Godfather</li>
- <li>Inception</li>
- <li>The Good, the Bad and the Ugly </li>
- <li>Pulp Fiction</li>
- <li>Schindler's List</li>
- </ol>
-
- <h2>Divided, formatted content</h2>
- <ul data-role="listview" data-inset="true">
- <li>
- <h3>Stephen Weber</h3>
- <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
- <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
- <p class="ui-li-aside"><strong>6:24</strong>PM</p>
- </li>
- <li>
- <h3>jQuery Team</h3>
- <p><strong>Boston Conference Planning</strong></p>
- <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
- <p class="ui-li-aside"><strong>9:18</strong>AM</p>
- </li>
- </ul>
-
-
-
-
- <h2>Icon list</h2>
- <ul data-role="listview" data-inset="true">
- <li><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></li>
- <li><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></li>
- <li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></li>
- <li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></li>
- <li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></li>
- <li><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></li>
- </ul>
-
- <h2>Thumbnail list</h2>
-
- <ul data-role="listview" data-inset="true">
- <li>
- <img src="images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p>
- </li>
- <li>
- <img src="images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p>
- </li>
- <li>
- <img src="images/album-p.jpg" />
- <h3>Wolfgang Amadeus Phoenix</h3>
- <p>Phoenix</p>
- </li>
- </ul>
-
- <h2>Divided, filterable list</h2>
- <ul data-role="listview" data-filter="true" data-inset="true">
- <li data-role="list-divider">A</li>
- <li>Adam Kinkaid</li>
- <li>Alex Wickerham</li>
- <li>Avery Johnson</li>
- <li data-role="list-divider">B</li>
- <li>Bob Cabot</li>
- <li data-role="list-divider">C</li>
- <li>Caleb Booth</li>
- <li>Christopher Adams</li>
- </ul>
-
-
-
-
-
-
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li data-theme="a"><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Inset Readonly Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <style type="text/css">
- h2 { margin:50px 0 30px 0; }
- </style>
-
- <div data-role="header" data-theme="f">
- <h1>Readonly lists</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>Here is a variety of full-width lists that are read-only. If a list has the <code>data-role="listview"</code> attribute, but the contents aren't linked, it will display as read-only. These look like normal lists, except they don't have a right arrow and the text is set to a smaller size to save space.</ap>
-
- <h2>Simple list</h2>
-
- <ul data-role="listview">
- <li>Acura</li>
- <li>Audi</li>
- <li>BMW</li>
- <li>Cadillac</li>
- <li>Ferrari</li>
- </ul>
-
- <h2>Count bubbles</h2>
- <ul data-role="listview">
- <li>Inbox <span class="ui-li-count">12</span></li>
- <li>Outbox <span class="ui-li-count">0</span></li>
- <li>Drafts <span class="ui-li-count">4</span></li>
- <li>Sent <span class="ui-li-count">328</span></li>
- <li>Trash <span class="ui-li-count">62</span></li>
- </ul>
-
- <h2>Numbered list</h2>
- <ol data-role="listview">
- <li>The Godfather</li>
- <li>Inception</li>
- <li>The Good, the Bad and the Ugly </li>
- <li>Pulp Fiction</li>
- <li>Schindler's List</li>
- </ol>
-
- <h2>Divided, formatted content</h2>
- <ul data-role="listview">
- <li>
- <h3>Stephen Weber</h3>
- <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
- <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
- <p class="ui-li-aside"><strong>6:24</strong>PM</p>
- </li>
- <li>
- <h3>jQuery Team</h3>
- <p><strong>Boston Conference Planning</strong></p>
- <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
- <p class="ui-li-aside"><strong>9:18</strong>AM</p>
- </li>
- </ul>
-
-
-
-
- <h2>Icon list</h2>
- <ul data-role="listview">
- <li><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></li>
- <li><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></li>
- <li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></li>
- <li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></li>
- <li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></li>
- <li><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></li>
- </ul>
-
- <h2>Thumbnail list</h2>
-
- <ul data-role="listview">
- <li>
- <img src="images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p>
- </li>
- <li>
- <img src="images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p>
- </li>
- <li>
- <img src="images/album-p.jpg" />
- <h3>Wolfgang Amadeus Phoenix</h3>
- <p>Phoenix</p>
- </li>
- </ul>
-
- <h2>Divided, filterable list</h2>
- <ul data-role="listview" data-filter="true">
- <li data-role="list-divider">A</li>
- <li>Adam Kinkaid</li>
- <li>Alex Wickerham</li>
- <li>Avery Johnson</li>
- <li data-role="list-divider">B</li>
- <li>Bob Cabot</li>
- <li data-role="list-divider">C</li>
- <li>Caleb Booth</li>
- <li>Christopher Adams</li>
- </ul>
-
-
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li data-theme="a"><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Filtered Inset Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Inset Search filter bar</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">
- <ul data-role="listview" data-filter="true" data-inset="true">
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Volkswagon</a></li>
- <li><a href="index.html">Volvo</a></li>
- </ul>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li data-theme="a"><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8" />
- <title>jQuery Mobile Docs - Filtered Lists with Dividers</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>List dividers</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">
- <ul data-role="listview" data-filter="true" data-filter-placeholder="Search people..." data-filter-theme="b">
- <li data-role="list-divider">A</li>
- <li><a href="index.html">Adam Kinkaid</a></li>
- <li><a href="index.html">Alex Wickerham</a></li>
- <li><a href="index.html">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="index.html">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="index.html">Caleb Booth</a></li>
- <li><a href="index.html">Christopher Adams</a></li>
- <li><a href="index.html">Culver James</a></li>
- <li data-role="list-divider">D</li>
- <li><a href="index.html">David Walsh</a></li>
- <li><a href="index.html">Drake Alfred</a></li>
- <li data-role="list-divider">E</li>
- <li><a href="index.html">Elizabeth Bacon</a></li>
- <li><a href="index.html">Emery Parker</a></li>
- <li><a href="index.html">Enid Voldon</a></li>
- <li data-role="list-divider">F</li>
- <li><a href="index.html">Francis Wall</a></li>
- <li data-role="list-divider">G</li>
- <li><a href="index.html">Graham Smith</a></li>
- <li><a href="index.html">Greta Peete</a></li>
- <li data-role="list-divider">H</li>
- <li><a href="index.html">Harvey Walls</a></li>
- <li data-role="list-divider">M</li>
- <li><a href="index.html">Mike Farnsworth</a></li>
- <li><a href="index.html">Murray Vanderbuilt</a></li>
- <li data-role="list-divider">N</li>
- <li><a href="index.html">Nathan Williams</a></li>
- <li data-role="list-divider">P</li>
- <li><a href="index.html">Paul Baker</a></li>
- <li><a href="index.html">Pete Mason</a></li>
- <li data-role="list-divider">R</li>
- <li><a href="index.html">Rod Tarker</a></li>
- <li data-role="list-divider">S</li>
- <li><a href="index.html">Sawyer Wakefield</a></li>
- </ul>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li data-theme="a"><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Filtered Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Search filter bar</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">
- <ul data-role="listview" data-filter="true">
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Volkswagon</a></li>
- <li><a href="index.html">Volvo</a></li>
- </ul>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li data-theme="a"><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Sample Dialog</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-
- <div data-role="page">
-
- <div data-role="header" data-theme="a">
- <h1>Purchase?</h1>
- </div><!-- /header -->
-
- <div data-role="content">
- <h4>This album costs $10.99 and includes 9 tracks.</h4>
- <p>Your download will begin immediately on your mobile device and all tracks will by added your your library next time you sync.</p>
- <a href="index.html" data-role="button" data-rel="back" data-theme="b">Purchase album</a>
- <a href="index.html" data-role="button" data-rel="back">No thanks</a>
-
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Split Button Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior" id="album-list">
-
- <div data-role="header" data-theme="f">
- <h1>List formatting</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">
- <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
- <li><a href="index.html">
- <img src="images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
-
- <img src="images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p>
-
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-p.jpg" />
- <h3>Wolfgang Amadeus Phoenix</h3>
- <p>Phoenix</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-ok.jpg" />
- <h3>Of The Blue Colour Of The Sky</h3>
- <p>Ok Go</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-ws.jpg" />
- <h3>Elephant</h3>
- <p>The White Stripes</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-rh.jpg" />
- <h3>Kid A</h3>
- <p>Radiohead</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-xx.jpg" />
- <h3>XX</h3>
- <p>XX</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-mg.jpg" />
- <h3>Congratulations</h3>
- <p>MGMT</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-ag.jpg" />
- <h3>Ashes Grammar</h3>
- <p>A Sunny Day in Glasgow</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
-
- <li><a href="index.html">
- <img src="images/album-k.jpg" />
- <h3>Hot Fuss</h3>
- <p>Killers</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="images/album-af.jpg" />
- <h3>The Suburbs</h3>
- <p>Arcade Fire</p>
- </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- </ul>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li data-theme="a"><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Theming Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Theming lists</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" class="ui-body">
- <div class="content-primary">
-
- <p>All the standard button swatches can be applied to lists. The framework assigns a default list theme swatch of "c" (silver in the default theme) and swatch "b" (blue in default theme) for dividers. Below is a default themed list.</p>
-
-<code>
-<ul data-role="listview" data-inset="true">
-</code>
- <ul data-role="listview" data-inset="true" data-icon="star">
- <li data-role="list-divider">Divider</li>
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- </ul>
-
- <h2>Theming list items</h2>
- <p>The list item color scheme can be changed to any button color theme swatch by adding the <code> data-theme</code> attribute to the list, and setting the letter theme swatch. Here is the same list above with the "a" swatch applied. </p>
-
-<code>
-<ul data-role="listview" data-inset="true" data-theme="d">
-</code>
-
- <ul data-role="listview" data-inset="true" data-theme="d">
- <li data-role="list-divider">Divider</li>
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- </ul>
-
- <p> data-theme attributes also work at the LI-level, for styling a single item.</p>
-
- <ul data-role="listview" data-inset="true" data-theme="d">
- <li data-role="list-divider">Divider</li>
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- <li data-theme="a"><a href="index.html">Trash <span class="ui-li-count">34</span></a></li>
- </ul>
-
- <h2>Theming dividers</h2>
-
- <p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-divider-theme</code> to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.</p>
-
-<code>
-<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
-</code>
-
- <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
- <li data-role="list-divider">Divider</li>
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- </ul>
-
- <h2>Theming count bubbles</h2>
-
- <p>The theme for <strong>count bubbles</strong> can be set by adding the <code>data-count-theme</code> to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.</p>
-
-<code>
-<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
-</code>
-
- <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
- <li data-role="list-divider">Divider</li>
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- </ul>
-
- <h2>Theming icons</h2>
-
- <p>The default icon for each list item is <code>arrow-r</code>. To override this, set the <code> data-icon</code> attribute on the desired list item to the <a href="../buttons/buttons-icons.html">name of a standard icon</a>. To prevent icons from appearing altogether, set the <code> data-icon</code> attribute to "false".</p>
-<pre>
-<code>
-<li data-icon="info"><a href="#">Notices</a></li>
-<li data-icon="alert"><a href="#">Alerts</a></li>
-<li data-icon="false"><a href="#">No icon</a></li>
-</code>
-</pre>
- <ul data-role="listview" data-inset="true">
- <li data-role="list-divider">Divider</li>
- <li data-icon="info"><a href="#">Notices</a></li>
- <li data-icon="alert"><a href="#">Alerts</a></li>
- <li data-icon="false"><a href="#">No icon</a></li>
- </ul>
-
-
- <h2>Theming split buttons</h2>
-
- <p>For split lists which a second button, the framework default to "b" for the theme swatch (blue in the default theme) Here is a default split list:</p>
-
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html">
- <img src="images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p></a>
- <a href="index.html">Purchase album</a>
- </li>
- <li><a href="index.html">
- <img src="images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p></a>
- <a href="index.html">Purchase album</a>
- </li>
- </ul>
-
-<code>
-<ul data-role="listview" data-inset="true" data-split-theme="a">
-</code>
- <p>To specify the color swatch for the icon button on the right, add the <code>data-split-theme</code> to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a <code> data-theme</code> attribute to specific links (see second list item).</p>
- <ul data-role="listview" data-inset="true" data-split-theme="a">
- <li><a href="index.html">
- <img src="images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p>
- </a>
- <a href="index.html">Purchase album</a>
- </li>
- <li><a href="index.html">
- <img src="images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p>
- </a>
- <a href="index.html" data-theme="e">Purchase album</a>
- </li>
- </ul>
-
- <p>The icon for the split theme can set at the list level by adding the <code>data-split-icon</code> to the list and specifying a <a href="../buttons/buttons-icons.html">standard icon</a>. This attribute can also be added to individual split inside list items by adding a <code> data-icon</code> attribute to specific links (see second list item).</p>
-
-<code>
-<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete">
-</code>
-
- <ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete" >
- <li><a href="index.html">
- <img src="images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p>
- </a>
- <a href="index.html">Purchase album</a>
- </li>
- <li><a href="index.html">
- <img src="images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p>
- </a>
- <a href="index.html">Purchase album</a>
- </li>
- </ul>
-
-
-
- <h2>Examples of all basic list swatches</h2>
-
- <p><strong>A</strong> swatch</p>
- <ul data-role="listview" data-inset="true" data-theme="a">
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- <p><strong>B</strong> swatch</p>
- <ul data-role="listview" data-inset="true" data-theme="b">
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- <p><strong>C</strong> swatch</p>
- <ul data-role="listview" data-inset="true" data-theme="c">
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- <p><strong>D</strong> swatch</p>
- <ul data-role="listview" data-inset="true" data-theme="d">
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- <p><strong>E</strong> swatch</p>
- <ul data-role="listview" data-inset="true" data-theme="e">
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
-
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li data-theme="a"><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists with Thumbnails</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Thumbnails</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">
- <ul data-role="listview">
- <li><a href="index.html">
- <img src="images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-p.jpg" />
- <h3>Wolfgang Amadeus Phoenix</h3>
- <p>Phoenix</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-ok.jpg" />
- <h3>Of The Blue Colour Of The Sky</h3>
- <p>Ok Go</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-ws.jpg" />
- <h3>Elephant</h3>
- <p>The White Stripes</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-rh.jpg" />
- <h3>Kid A</h3>
- <p>Radiohead</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-xx.jpg" />
- <h3>XX</h3>
- <p>XX</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-mg.jpg" />
- <h3>Congratulations</h3>
- <p>MGMT</p>
- </a></li>
-
- <li><a href="index.html">
- <img src="images/album-ag.jpg" />
- <h3>Ashes Grammar</h3>
- <p>A Sunny Day in Glasgow</p>
- </a></li>
-
- <li><a href="index.html">
- <img src="images/album-k.jpg" />
- <h3>Hot Fuss</h3>
- <p>Killers</p>
- </a></li>
- <li><a href="index.html">
- <img src="images/album-af.jpg" />
- <h3>The Suburbs</h3>
- <p>Arcade Fire</p>
- </a></li>
- </ul>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li data-theme="a"><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-
-<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a><!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Basic Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Basic list</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">
- <ul data-role="listview">
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Volkswagon</a></li>
- <li><a href="index.html">Volvo</a></li>
- </ul>
- </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">List views</li>
- <li><a href="docs-lists.html">List markup conventions</a></li>
- <li data-theme="a"><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-inset.html">Inset styled lists</a></li>
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Dialog Example</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page">
- <div data-role="header" data-theme="e">
- <h1>Dialog</h1>
-
- </div>
-
- <div data-role="content" data-theme="e">
- <h1>I'm colorful</h1>
- <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
- <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a">Good for you</a>
- <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Don't care, really</a>
- </div>
- </div>
-
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Dialog Example</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page">
-
-
- <div data-role="content" data-theme="a">
- <h3>Share Photos</h3>
- <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Email</a>
- <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Upload to flickr</a>
- <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Share on Facebook</a>
- <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Tweet photo</a>
-
- <a href="index.html" data-role="button" data-rel="back" data-theme="a">Cancel</a>
- </div>
-</div>
-
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Dialog Example</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" data-overlay-theme="e">
- <div data-role="header" data-theme="b">
- <h1>Dialog</h1>
- </div>
-
- <div data-role="content" data-theme="d">
- <h1>Custom overlay</h1>
- <p>This dialog adds <code>data-overlay-theme="e"</code> to the page container to set the overlay swatch color.</p>
- <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a" data-inline="true">I like it</a>
- </div>
-
- <div data-role="footer" data-theme="c">
- <form style="padding-top:4px;">
- <input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" />
- <label for="checkbox-0">Don't show this message again </label>
- </form>
- </div>
- </div>
-
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Dialog Example</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page">
-
-
- <div data-role="content" data-theme="b">
- <p>Flickr upload:</p>
- <h3>Photos posted successfully</h3>
-
- <a href="page-dialogs.html" data-role="button" data-theme="b">View photo page</a>
- <a href="page-dialogs.html" data-role="button" data-theme="c">Done</a>
- </div>
-</div>
-
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Dialog Example with Select</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Dialog select test</h1>
- </div>
- <div data-role="content" >
- <a href="#bar" data-role="button" data-rel="dialog">Open dialog</a>
- </div>
-
-</div>
-
-
-
-
-
-
-
-<div data-role="page" id="bar">
-
- <div data-role="header" data-theme="d" data-position="inline">
- <h1>Sample Dialogs</h1>
- </div>
-
- <div data-role="content" data-theme="c">
-
- <form action>
- <div data-role="fieldcontain">
- <label for="select-choice-1" class="select">Choose shipping method:</label>
- <select name="select-choice-1" id="select-choice-1" data-native-menu="false">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-3" class="select">Your state:</label>
- <select name="select-choice-3" id="select-choice-3" data-native-menu="false">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
- <a href="#foo" data-role="button" data-rel="back" data-theme="c">Real Submit Would go here</a>
- </form>
- <a href="#foo" data-role="button" data-rel="back" data-theme="c">Cancel</a>
- </div>
- </div>
-
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Dialog Example</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page">
-
- <div data-role="header" data-theme="d">
- <h1>Dialog</h1>
-
- </div>
-
- <div data-role="content" data-theme="c">
- <h1>Delete page?</h1>
- <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
- <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>
- <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>
- </div>
- </div>
-
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Test URL Example</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" data-url="docs/pages/docs-links-urltest/">
- <div data-role="header" data-theme="f">
- <h1>URL Test Page</h1>
- </div>
- <div data-role="content">
- <p>This is a regular page that updated the url with a different value than was requested.</p>
- </div>
- </div>
-
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE HTML>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>Animals</title>
-<link rel="stylesheet" href="../../../css/themes/default/">
-<script src="../../../js/jquery.js"></script>
-<script src="../../../js/"></script>
-</head>
-
-<body>
-<div data-role="page">
- <div data-role="header"><h1>Animals</h1></div>
- <div data-role="content">
- <p>All your favorites from aardvarks to zebras.</p>
- <ul data-role="listview" data-inset="true">
- <li>Pets</li>
- <li>Farm Animals</li>
- <li>Wild Animals</li>
- </ul>
- </div>
-</div>
-</body>
-</html>
+++ /dev/null
-<?php
-// This is a demo script that takes a single 'id' query param argument and
-// returns its associated data as HTML, or, if called via XmlHttpRequest,
-// returns its data as JSON.
-
-// In the real-world, this category data would be looked
-// up on the fly from some database. For this sample, we
-// are just using some static in-memory data.
-
-$category_data = array(
- animals => array(
- name => "Animals",
- description => "All your favorites from aardvarks to zebras.",
- items => array(
- array(
- name => "Pets",
- ),
- array(
- name => "Farm Animals",
- ),
- array(
- name => "Wild Animals",
- )
- )
- ),
- colors => array(
- name => "Colors",
- description => "Fresh colors from the magic rainbow.",
- items => array(
- array(
- name => "Blue",
- ),
- array(
- name => "Green",
- ),
- array(
- name => "Orange",
- ),
- array(
- name => "Purple",
- ),
- array(
- name => "Red",
- ),
- array(
- name => "Yellow",
- ),
- array(
- name => "Violet",
- )
- )
- ),
- vehicles => array(
- name => "Vehicles",
- description => "Everything from cars to planes.",
- items => array(
- array(
- name => "Cars",
- ),
- array(
- name => "Planes",
- ),
- array(
- name => "Construction",
- )
- )
- )
-);
-
-// Get the name of the category to display from
-// the query params for the script.
-
-$category_name = '';
-if ( $_GET[ 'id' ] ) {
- $category_name = $_GET[ 'id' ];
-}
-
-// Now get the category data, by name, from our in-memory
-// dictionary. This is the part where a script normally fetches
-// the data from a database.
-
-$category_obj = $category_data[ $category_name ];
-
-// Now figure out how the script is being called. If it's being
-// called via XmlHttpRequest, then send the data back as JSON.
-// If not, then send it back as a list in an HTML document.
-
-if( $_SERVER[ "HTTP_X_REQUESTED_WITH" ] && $_SERVER[ "HTTP_X_REQUESTED_WITH" ] ==="XMLHttpRequest" ) {
- // Data should be written out as JSON.
- header("Content-type: application/json");
- if ( !$category_obj ) {
- echo 'null';
- } else {
- echo '{"name":"' . $category_obj[ 'name' ]
- . '","description":"' . $category_obj[ 'description' ]
- . '","items":[';
-
- $arr = $category_obj[ 'items' ];
- $count = count($arr);
- for ( $i = 0; $i < $count; $i++ ) {
- if ( $i ) {
- echo ",";
- }
- echo '{"name":"' . $arr[ $i ][ 'name' ] . '"}';
- }
- echo "]}";
- }
-} else {
- // Data should be written out as HTML.
- header("Content-type: text/html");
-?>
-<!DOCTYPE HTML>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>Vehicles</title>
-<link rel="stylesheet" href="../../../css/themes/default/">
-<script src="../../../js/jquery.js"></script>
-<script src="../../../js/"></script>
-</head>
-<body>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header"><h1><?php if ( $category_obj ) { echo $category_obj['name']; } else { echo "No Match"; } ?></h1></div>
- <div data-role="content">
-<?php
- if ( !$category_obj ) {
-?>
- <p>No matches found.</p>
-<?php
- } else {
-?>
- <p><?php echo $catgory_object['description']; ?></p>
- <ul data-role="listview" data-inset="true">
-<?php
- $arr = $category_obj[ 'items' ];
- $count = count($arr);
- for ( $i = 0; $i < $count; $i++ ) {
- echo "\t\t\t<li>" . $arr[ $i ][ 'name' ] . "</li>\n";
- }
-?>
- </ul>
-<?php
- }
-?>
- </div>
-</div>
-</body>
-</html>
-<?php }
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE HTML>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>Colors</title>
-<link rel="stylesheet" href="../../../css/themes/default/">
-<script src="../../../js/jquery.js"></script>
-<script src="../../../js/"></script>
-</head>
-
-<body>
-<div data-role="page">
- <div data-role="header"><h1>Colors</h1></div>
- <div data-role="content">
- <p>Fresh colors from the magic rainbow.</p>
- <ul data-role="listview" data-inset="true">
- <li>Blue</li>
- <li>Green</li>
- <li>Orange</li>
- <li>Purple</li>
- <li>Red</li>
- <li>Yellow</li>
- <li>Violet</li>
- </ul>
- </div>
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE HTML>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>Dynamic Page Samples</title>
-<link rel="stylesheet" href="../../../css/themes/default/">
-<script src="../../../js/jquery.js"></script>
-<script src="../../../js/"></script>
-</head>
-
-<body>
-<div data-role="page">
- <div data-role="header"><h1>Categories</h1></div>
- <div data-role="content">
- <h2>Select a Category Below:</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="sample-reuse-page.html" rel="external">Re-using a Page with In-Memory Data</a></li>
- <li><a href="sample-reuse-page-external.html" rel="external">Re-using a Page With External Data</a></li>
- </ul>
- </div>
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE HTML>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>changePage JSON Sample</title>
-<link rel="stylesheet" href="../../../css/themes/default/">
-<script src="../../../js/jquery.js"></script>
-<script src="../../../js/"></script>
-<script type="text/javascript">
-
-// Load the JSON data for a specific category, based on
-// the URL passed in. Generate markup for the items in the
-// category, inject it into an embedded page, and then make
-// that page the current active page.
-function showCategory( url, options )
-{
- $.getJSON( url, function( category ) {
- if ( category ) {
- // Get the page we are going to dump our content into.
- var $page = $( "#category-items" ),
-
- // Get the header for the page.
- $header = $page.children( ":jqmData(role=header)" ),
-
- // Get the content area element for the page.
- $content = $page.children( ":jqmData(role=content)" ),
-
- // The markup we are going to inject into the content
- // area of the page.
- markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
-
- // The array of items for this category.
- cItems = category.items,
-
- // The number of items in the category.
- numItems = cItems.length;
-
- // Generate a list item for each item in the category
- // and add it to our markup.
- for ( var i = 0; i < numItems; i++ ) {
- markup += "<li>" + cItems[i].name + "</li>";
- }
- markup += "</ul>";
-
- // Find the h1 element in our header and inject the name of
- // the category into it.
- $header.find( "h1" ).html( category.name );
-
- // Inject the category items markup into the content element.
- $content.html( markup );
-
- // Pages are lazily enhanced. We call page() on the page
- // element to make sure it is always enhanced before we
- // attempt to enhance the listview markup we just injected.
- // Subsequent calls to page() are ignored since a page/widget
- // can only be enhanced once.
- $page.page();
-
- // Enhance the listview we just injected.
- $content.find( ":jqmData(role=listview)" ).listview();
-
- // We don't want the data-url of the page we just modified
- // to be the url that shows up in the browser's location field,
- // so set the dataUrl option to the URL for the category
- // we just loaded.
- options.dataUrl = url;
-
- // Now call changePage() and tell it to switch to
- // the page we just modified.
- $.mobile.changePage( $page, options );
- }
- });
-}
-
-
-// Listen for any attempts to call changePage().
-$(document).bind( "pagebeforechange", function( e, data ) {
- // We only want to handle changePage() calls where the caller is
- // asking us to load a page by URL.
- if ( typeof data.toPage === "string" ) {
- // We are being asked to load a page by URL, but we only
- // want to handle URLs that request the data for a specific
- // category.
- var u = $.mobile.path.parseUrl( data.toPage );
- if ( u.pathname.search("category.php") !== -1 ) {
- // We're being asked to display the items for a specific category.
- // Call our internal method that builds the content for the category
- // on the fly based on our in-memory category data structure.
- showCategory( u.href, data.options );
-
- // Make sure to tell changePage() we've handled this call so it doesn't
- // have to do anything.
- e.preventDefault();
- }
- }
-});
-
-</script>
-</head>
-
-<body>
-<div data-role="page">
- <div data-role="header"><h1>Categories</h1></div>
- <div data-role="content">
- <h2>Select a Category Below:</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="category.php?id=animals">Animals</a></li>
- <li><a href="category.php?id=colors">Colors</a></li>
- <li><a href="category.php?id=vehicles">Vehicles</a></li>
- </ul>
- </div>
-</div>
-<div id="category-items" data-role="page" data-add-back-btn="true">
- <div data-role="header"><h1></h1></div>
- <div data-role="content"></div>
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE HTML>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>changePage JSON Sample</title>
-<link rel="stylesheet" href="../../../css/themes/default/">
-<script src="../../../js/jquery.js"></script>
-<script src="../../../js/"></script>
-<script>
-
-// Some sample categorized data. This data is in-memory
-// for demonstration purposes, but could be loaded dynamically
-// via ajax.
-var categoryData = {
- animals: {
- name: "Animals",
- description: "All your favorites from aardvarks to zebras.",
- items: [
- {
- name: "Pets",
- },
- {
- name: "Farm Animals",
- },
- {
- name: "Wild Animals",
- }
- ]
- },
- colors: {
- name: "Colors",
- description: "Fresh colors from the magic rainbow.",
- items: [
- {
- name: "Blue",
- },
- {
- name: "Green",
- },
- {
- name: "Orange",
- },
- {
- name: "Purple",
- },
- {
- name: "Red",
- },
- {
- name: "Yellow",
- },
- {
- name: "Violet",
- }
- ]
- },
- vehicles: {
- name: "Vehicles",
- description: "Everything from cars to planes.",
- items: [
- {
- name: "Cars",
- },
- {
- name: "Planes",
- },
- {
- name: "Construction",
- }
- ]
- }
-};
-
-// Load the data for a specific category, based on
-// the URL passed in. Generate markup for the items in the
-// category, inject it into an embedded page, and then make
-// that page the current active page.
-function showCategory( urlObj, options )
-{
- var categoryName = urlObj.hash.replace( /.*category=/, "" ),
-
- // Get the object that represents the category we
- // are interested in. Note, that at this point we could
- // instead fire off an ajax request to fetch the data, but
- // for the purposes of this sample, it's already in memory.
- category = categoryData[ categoryName ],
-
- // The pages we use to display our content are already in
- // the DOM. The id of the page we are going to write our
- // content into is specified in the hash before the '?'.
- pageSelector = urlObj.hash.replace( /\?.*$/, "" );
-
- if ( category ) {
- // Get the page we are going to dump our content into.
- var $page = $( pageSelector ),
-
- // Get the header for the page.
- $header = $page.children( ":jqmData(role=header)" ),
-
- // Get the content area element for the page.
- $content = $page.children( ":jqmData(role=content)" ),
-
- // The markup we are going to inject into the content
- // area of the page.
- markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
-
- // The array of items for this category.
- cItems = category.items,
-
- // The number of items in the category.
- numItems = cItems.length;
-
- // Generate a list item for each item in the category
- // and add it to our markup.
- for ( var i = 0; i < numItems; i++ ) {
- markup += "<li>" + cItems[i].name + "</li>";
- }
- markup += "</ul>";
-
- // Find the h1 element in our header and inject the name of
- // the category into it.
- $header.find( "h1" ).html( category.name );
-
- // Inject the category items markup into the content element.
- $content.html( markup );
-
- // Pages are lazily enhanced. We call page() on the page
- // element to make sure it is always enhanced before we
- // attempt to enhance the listview markup we just injected.
- // Subsequent calls to page() are ignored since a page/widget
- // can only be enhanced once.
- $page.page();
-
- // Enhance the listview we just injected.
- $content.find( ":jqmData(role=listview)" ).listview();
-
- // We don't want the data-url of the page we just modified
- // to be the url that shows up in the browser's location field,
- // so set the dataUrl option to the URL for the category
- // we just loaded.
- options.dataUrl = urlObj.href;
-
- // Now call changePage() and tell it to switch to
- // the page we just modified.
- $.mobile.changePage( $page, options );
- }
-}
-
-
-// Listen for any attempts to call changePage().
-$(document).bind( "pagebeforechange", function( e, data ) {
- // We only want to handle changePage() calls where the caller is
- // asking us to load a page by URL.
- if ( typeof data.toPage === "string" ) {
- // We are being asked to load a page by URL, but we only
- // want to handle URLs that request the data for a specific
- // category.
- var u = $.mobile.path.parseUrl( data.toPage ),
- re = /^#category-item/;
- if ( u.hash.search(re) !== -1 ) {
- // We're being asked to display the items for a specific category.
- // Call our internal method that builds the content for the category
- // on the fly based on our in-memory category data structure.
- showCategory( u, data.options );
-
- // Make sure to tell changePage() we've handled this call so it doesn't
- // have to do anything.
- e.preventDefault();
- }
- }
-});
-
-
-</script>
-</head>
-
-<body>
-<div id="home" data-role="page">
- <div data-role="header"><h1>Categories</h1></div>
- <div data-role="content">
- <h2>Select a Category Below:</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="#category-items?category=animals">Animals</a></li>
- <li><a href="#category-items?category=colors">Colors</a></li>
- <li><a href="#category-items?category=vehicles">Vehicles</a></li>
- </ul>
- </div>
-
-</div>
-<div id="category-items" data-role="page">
- <div data-role="header"><h1></h1></div>
- <div data-role="content"></div>
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE HTML>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>Vehicles</title>
-<link rel="stylesheet" href="../../../css/themes/default/">
-<script src="../../../js/jquery.js"></script>
-<script src="../../../js/"></script>
-</head>
-
-<body>
-<div data-role="page">
- <div data-role="header"><h1>Vehicles</h1></div>
- <div data-role="content">
- <p>Everything from cars to planes.</p>
- <ul data-role="listview" data-inset="true">
- <li>Cars</li>
- <li>Planes</li>
- <li>Destruction</li>
- </ul>
- </div>
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Pages</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Pages</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">
-
- <p>jQuery Mobile includes automatic AJAX page loading of external pages with back button history support, a set of animated page transitions and simple tools for displaying pages as dialogs.</p>
-
-
- <ul data-role="listview" data-inset="true">
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
- </ul>
-
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
-
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Multi-page template</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
- <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
-</head>
-
-
-<body>
-
-<!-- Start of first page: #one -->
-<div data-role="page" id="one">
-
- <div data-role="header">
- <h1>Multi-page</h1>
- </div><!-- /header -->
-
- <div data-role="content" >
- <h2>One</h2>
-
- <p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
-
- <p>This is a multi-page boilerplate template that you can copy to build you first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a <a href="page-template.html"> single page template</a> that has just one page within it.</p>
- <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
- <p>You link to internal pages by referring to the ID of the page you want to show. For example, to <a href="#two" >link</a> to the page with an ID of "two", my link would have a <code>href="#two"</code> in the code.</p>
-
- <h3>Show internal pages:</h3>
- <p><a href="#two" data-role="button">Show page "two"</a></p>
- <p><a href="#popup"data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
- </div><!-- /content -->
-
- <div data-role="footer" data-theme="d">
- <h4>Page Footer</h4>
- </div><!-- /footer -->
-</div><!-- /page one -->
-
-
-<!-- Start of second page: #two -->
-<div data-role="page" id="two" data-theme="a">
-
- <div data-role="header">
- <h1>Two</h1>
- </div><!-- /header -->
-
- <div data-role="content" data-theme="a">
- <h2>Two</h2>
- <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
- <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
- <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>
-
- </div><!-- /content -->
-
- <div data-role="footer">
- <h4>Page Footer</h4>
- </div><!-- /footer -->
-</div><!-- /page two -->
-
-
-<!-- Start of third page: #popup -->
-<div data-role="page" id="popup">
-
- <div data-role="header" data-theme="e">
- <h1>Dialog</h1>
- </div><!-- /header -->
-
- <div data-role="content" data-theme="d">
- <h2>Popup</h2>
- <p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>
- <p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>
- </div><!-- /content -->
-
- <div data-role="footer">
- <h4>Page Footer</h4>
- </div><!-- /footer -->
-</div><!-- /page popup -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Anatomy of a Page</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Anatomy of a Page</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>The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.</p>
-
- <p>The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
-
- <h2>Mobile page structure</h2>
-
- <p>A jQuery Mobile site must start with an HTML5 'doctype' to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) In the 'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off. We recommend linking to the files hosted on the jQuery CDN for best performance:</p>
-
-<pre><code>
-<!DOCTYPE html>
-<html>
- <head>
- <title>Page Title</title>
-
- <meta name="viewport" content="width=device-width, initial-scale=1">
-
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
-</head>
-
-<body>
-...content goes here...
-</body>
-</html>
-</code></pre>
-
- <h2>Viewport meta tag</h2>
- <p>Note above that there is a meta <code>viewport</code> tag in the <code>head</code> to specify how the browser should display the page zoom level and dimensions. If this isn't set, many mobile browsers will use a "virtual" page width around 900 pixels to make it work well with exisitng desktop sites but the screens may look zoomed out and too wide. By setting the viewport attributes to <code>content="width=device-width, initial-scale=1"</code>, the width will be set to the pixel width of the device screen. </p>
-
- <pre><code><meta name="viewport" content="width=device-width, initial-scale=1"> </code></pre>
-
- <p>These settings do not disable the user's ability to zoom the pages, which is nice from an accessibility perspective. There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed a a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library. </p>
-
- <h2>Inside the body: Pages</h2>
- <p>Inside the <code><body></code> tag, each view or "page" on the mobile device is identified with an element (usually a <code>div</code>) with the <code> data-role="page"</code> attribute. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to pages.</p>
-
-<div class="highlight">
-<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">></span>
- ...
-<span class="nt"></div></span>
-</pre>
-</div>
-
- <p>Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>.</p>
-
-<div class="highlight">
-<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">></span>
- <span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">></span>...<span class="nt"></div></span>
- <span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">></span>...<span class="nt"></div></span>
- <span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">></span>...<span class="nt"></div></span>
-<span class="nt"></div></span>
-</pre>
-</div>
-
-
-<h2>Putting it together: Basic single page template</h2>
-
-<p>Putting it all together, this is the standard boilerplate page template you should start with on a project: </p>
-
-<pre><code>
-<!DOCTYPE html>
-<html>
- <head>
- <title>Page Title</title>
-
- <meta name="viewport" content="width=device-width, initial-scale=1">
-
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
-</head>
-<body>
-
-<div data-role="page">
-
- <div data-role="header">
- <h1>Page Title</h1>
- </div><!-- /header -->
-
- <div data-role="content">
- <p>Page content goes here.</p>
- </div><!-- /content -->
-
- <div data-role="footer">
- <h4>Page Footer</h4>
- </div><!-- /footer -->
-</div><!-- /page -->
-
-</body>
-</html>
-</code></pre>
-
- <a href="page-template.html" data-inline="true" data-theme="b" data-role="button">View boilerplate template</a>
-
-
- <h2>Multi-page template structure</h2>
-
- <p>A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. Each 'page' block needs a unique ID (<code>id="foo"</code>) that will be used to link internally between 'pages' (<code>href="#foo"</code>). When a link is clicked, the framework will look for an internal 'page' with the ID and transition it into view.</p>
-
- <p>Here is an example of a 2 "page" site built with two jQuery Mobile divs navigated by linking to an ID placed on each page wrapper. Note that the IDs on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document. Here is what two pages look inside the <code>body</code> element.</p>
-
-<pre><code>
-<body>
-
-<!-- Start of first page -->
-<div data-role="page" id="foo">
-
- <div data-role="header">
- <h1>Foo</h1>
- </div><!-- /header -->
-
- <div data-role="content">
- <p>I'm first in the source order so I'm shown as the page.</p>
- <p>View internal page called <a href="#bar">bar</a></p>
- </div><!-- /content -->
-
- <div data-role="footer">
- <h4>Page Footer</h4>
- </div><!-- /footer -->
-</div><!-- /page -->
-
-
-<!-- Start of second page -->
-<div data-role="page" id="bar">
-
- <div data-role="header">
- <h1>Bar</h1>
- </div><!-- /header -->
-
- <div data-role="content">
- <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>
- <p><a href="#foo">Back to foo</a></p>
- </div><!-- /content -->
-
- <div data-role="footer">
- <h4>Page Footer</h4>
- </div><!-- /footer -->
-</div><!-- /page -->
-</body>
-</code></pre>
-
- <a href="../../docs/pages/multipage-template.html" data-inline="true" data-theme="b" data-role="button" rel="external">View multi-page template</a>
-
- <p> </p>
-
- <p>PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor (<code>index.html#foo</code>) on a page in jQuery Mobile, because the framework will look for a 'page' with an <code>ID</code> of <code>#foo</code> instead of the native behavior of scrolling to the content with that <code>ID</code>.</p>
-
-
-<h2>Conventions, not requirements</h2>
-
-<p>Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the framework is very flexible with document structure. The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure. The page wrapper that used to be required for auto-initialization to work is now optional for single page documents, so there isn't any required markup at all. For a web page with a custom layout, all of these structural elements can be omitted and the Ajax navigation and all widgets will work just like they do in the boilerplate structure. Behind the scenes, the framework will inject the page wrapper if it's not included in the markup because it’s needed for managing pages, but the starting markup can now be extremely simple. </p>
-
-<p>Note that in a multi-page setup, you are required to have page wrappers in your markup in order to group the content into multiple pages.</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">Pages & Dialogs</li>
- <li data-theme="a"><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Prefetching & caching pages</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Prefetching & caching pages</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>Prefetching pages</h2>
-
- <p>Usually, it's a good idea to store your app's pages in several single-page templates instead of one large multi-page template. This minimizes the size of the page's DOM.</p>
-
- <p>When using single-page templates, you can prefetch pages into the DOM so that they're available instantly when the user visits them. To prefetch a page, add the <code>data-prefetch</code> attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the <code>pagecreate</code> event has triggered. For example:</p>
-
-<pre><code>
-<a href="prefetchThisPage.html" data-prefetch> ... </a>
-</code></pre>
-
- <p>You can prefetch as many linked pages as you like. Just add <code>data-prefetch</code> to all the links you want to prefetch.</p>
-
- <p>Alternatively, you can prefetch a page programmatically using <code>$.mobile.loadPage()</code>:</p>
-
-<pre><code>
-$.mobile.loadPage( <var>pageUrl</var>, { showLoadMsg: false } );
-</code></pre>
-
- <p>Another advantage of prefetching a page is that the user doesn't see the Ajax loading message when visiting the prefetched page. The Ajax loading message only appears if the framework hasn't finished prefetching the page by the time the link is followed.</p>
-
- <p>Prefetching pages naturally creates additional HTTP requests and uses bandwidth, so it's wise to use this feature only in situations where it's highly likely that the prefetched page will be visited. A common scenario is a photo gallery, where you can prefetch the "previous" and "next" photo pages so that the user can move quickly between photos.</p>
-
-
- <h2>DOM size management</h2>
-
- <p>For animated page transitions to work, the pages you're transitioning from and to both need to be in the DOM. However, keeping old pages in the DOM quickly fills the browser's memory, and can cause some mobile browsers to slow down or even crash.</p>
-
- <p>jQuery Mobile therefore has a simple mechanism to keep the DOM tidy. Whenever it loads a page via Ajax, jQuery Mobile flags the page to be removed from the DOM when you navigate away from it later (technically, on the <code>pagehide</code> event). If you revisit a removed page, the browser may be able to retrieve the page's HTML file from its cache. If not, it refetches the file from the server. (In the case of nested list views, jQuery Mobile removes all the pages that make up the nested list once you navigate to a page that's not part of the list.)</p>
-
- <p>Pages inside a multi-page template aren't affected by this feature at all - jQuery Mobile only removes pages loaded via Ajax.</p>
-
-
- <h2>Caching pages in the DOM</h2>
-
- <p>If you prefer, you can tell jQuery Mobile to keep previously-visited pages in the DOM instead of removing them. This lets you cache pages so that they're available instantly if the user returns to them.</p>
-
- <p>To keep all previously-visited pages in the DOM, set the <code>domCache</code> option on the page plugin to <code>true</code>, like this:</p>
-
-<pre><code>
-$.mobile.page.prototype.options.domCache = true;
-</code></pre>
-
- <p>Alternatively, to cache just a particular page, you can add the <code>data-dom-cache="true"</code> attribute to the page's container:</p>
-
-<pre><code>
-<div data-role="page" id="cacheMe" data-dom-cache="true">
-</code></pre>
-
- <p>You can also cache a page programmatically like this:</p>
-
-<pre><code>
-<var>pageContainerElement</var>.page({ domCache: true });
-</code></pre>
-
- <p>The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.</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">Pages & Dialogs</li>
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li data-theme="a"><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Dialogs</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Dialogs</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" class="ui-body">
- <div class="content-primary">
- <h2>Creating dialogs</h2>
- <p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.</p>
-
- <p>
- <code>
- <a href="foo.html" data-rel="dialog">Open dialog</a>
- </code>
- </p>
-
- <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
-
-
-
- <h2>Transitions</h2>
- <p>By default, the dialog will open with a 'pop' transition. Like all pages, you can specify any page transition you want on the dialog by adding the <code>data-transition</code> attribute to the link. To make it feel more dialog-like, we recommend specifying a transition of "pop", "slideup" or "flip".</p>
-
-<code>
-<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>
-</code>
-
- <div>
- <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">data-transition="pop"</a>
- <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">data-transition="slidedown"</a>
- <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="flip">data-transition="flip"</a>
- </div>
-
-
- <h2>Closing dialogs</h2>
- <p>When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the <code>data-rel="back"</code> attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.</p>
- <p>For JavaScript-generated links, you can simply set the href attribute to "#" and use the <code>data-rel="back"</code> attribute. You can also call the dialog's <code>close()</code> method to programmatically close dialogs, for example: <code>$('.ui-dialog').dialog('close')</code>. </p>
-
- <h3>Setting the close button text</h3>
- <p>Just like the page plugin, you can set a dialog's close button text through an option or data attribute. The option can be configured for all dialogs by binding to the <code>mobileinit</code> event and setting the <code>$.mobile.dialog.prototype.options.closeBtnText</code> property to a string of your choosing, or you can place the data attribute <code>data-close-btn-text</code> to configure the text from your markup.</p>
-
- <h2>History & Back button behavior</h2>
- <p>Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.</p>
-
- <h2>Styling & theming</h2>
- <p>Dialogs can be styled with different theme swatches, just like any page by adding <code>data-theme</code> attributes to the header, content, or footer containers. Here is an example of a different dialog design:</p>
- <a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>
-
- <p>Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch A content color by default, but the <code>data-overlay-theme</code> attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch e:</p>
- <a href="dialog-overlay.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Custom overlay swatch</a>
-
-
- <p>Dialogs can also be used more like a control sheet to offer multiple buttons by removing the header:</p>
- <a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a>
-
- <h2>Dialog width and margins</h2>
- <p>For the sake of readability, dialogs have a default <code>max-width</code> of 500 pixels (plus 15px padding on each side). There is also a 10% top <code>margin</code> to give dialogs larger top margin on larger screens, but collapse to a small margin on smartphones. To override these styles, add the following CSS override rule to your stylesheet and tweak as needed:</p>
-
-<code><pre>
-.ui-dialog .ui-header,
-.ui-dialog .ui-content,
-.ui-dialog .ui-footer {
-<strong> max-width: 500px;
- margin: 10% auto 15px auto; </strong>
-}
-</pre></code>
-
-
-
-
-
- </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">Pages & Dialogs</li>
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li data-theme="a"><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Dynamically Injecting Pages</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Dynamically Injecting Pages</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 and Dynamic Page Generation</h2>
- <p>jQuery Mobile allows pages to be pulled into the DOM dynamically via its default click hijacking behavior, or through manual calls to $.mobile.changePage(). This is great for applications that generate HTML pages/fragments on the server-side, but there are sometimes cases where an application needs to dynamically generate page content on the client-side from JSON or some other format. This may be necessary for bandwidth/performance reasons, or because it is the data format of choice for the server they are interacting with.</p>
- <p>For applications that need to generate page markup on the client-side, it's important to know about the notifications that are triggered during a $.mobile.changePage() call because they can be used as hooks into the navigation system that will allow you to generate your content at the appropriate time.</p>
- <p>A call to changePage() will usually trigger the following event notifications:</p>
- <ul>
- <li>pagebeforechange
- <ul>
- <li>Fired off before any page loading or transition.</li>
- <li>NOTE: This event was formerly known as "beforechangepage".</li>
- </ul>
- </li>
- <li>pagechange
- <ul>
- <li>Fired off after all page loading and transitions.</li>
- <li>NOTE: this event was formerly known as "changepage".</li>
- </ul>
- </li>
- <li>pagechangefailed
- <ul>
- <li>Fired off if an error has occurred while attempting to dynamically load a new page. </li>
- </ul>
- </li>
- </ul>
- <p>These notifications are triggered on the parent container element ($.mobile.pageContainer) of pages, and will bubble all the way up to the document element and window.</p>
-<p>For applications wishing to inject pages, or radically modify the content of an existing page, based on some non-HTML data, such as JSON or in-memory JS object, the pagebeforechange event is very useful since it gives you a hook for analyzing the URL or page element the application is being asked to load or switch to, and short-circuit the default changePage() behavior by simply calling preventDefault() on the pagebeforechange event.</p>
-<p>To illustrate this technique, take a look at this <a href="dynamic-samples/sample-reuse-page.html" rel="external">working sample</a>. In this sample, the main page starts off with a list of categories that the user can navigate into. The actual items in each category are stored in a JavaScript object in memory, for illustrative purposes, but the data can really come from anywhere.</p>
-<pre><code>
-var categoryData = {
- animals: {
- name: "Animals",
- description: "All your favorites from aardvarks to zebras.",
- items: [
- {
- name: "Pets",
- },
- {
- name: "Farm Animals",
- },
- {
- name: "Wild Animals",
- }
- ]
- },
- colors: {
- name: "Colors",
- description: "Fresh colors from the magic rainbow.",
- items: [
- {
- name: "Blue",
- },
- {
- name: "Green",
- },
- {
- name: "Orange",
- },
- {
- name: "Purple",
- },
- {
- name: "Red",
- },
- {
- name: "Yellow",
- },
- {
- name: "Violet",
- }
- ]
- },
- vehicles: {
- name: "Vehicles",
- description: "Everything from cars to planes.",
- items: [
- {
- name: "Cars",
- },
- {
- name: "Planes",
- },
- {
- name: "Construction",
- }
- ]
- }
-};
-</code></pre>
-<p>The application uses links with urls that contain a hash that tells the application what category items to display:</p>
-<pre>
-<code>
- <h2>Select a Category Below:</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="#category-items?category=animals">Animals</a></li>
- <li><a href="#category-items?category=colors">Colors</a></li>
- <li><a href="#category-items?category=vehicles">Vehicles</a></li>
- </ul>
-</code>
-</pre>
-<p>Internally, when the user clicks on one of these links, the application intercepts the internal $.mobile.changePage() call that is invoked by the frameworks' default link hijacking behavior. It then analyzes the URL for the page about to be loaded, and then decides whether or not it should handle the loading itself, or to let the normal changePage() code handle things.</p>
-<p>The application was able to insert itself into the changePage() flow by binding to the "pagebeforechange" event at the document level:</p>
-<pre>
-<code>
-// Listen for any attempts to call changePage().
-$(document).bind( "pagebeforechange", function( e, data ) {
-
- // We only want to handle changePage() calls where the caller is
- // asking us to load a page by URL.
- if ( typeof data.toPage === "string" ) {
-
- // We are being asked to load a page by URL, but we only
- // want to handle URLs that request the data for a specific
- // category.
- var u = $.mobile.path.parseUrl( data.toPage ),
- re = /^#category-item/;
-
- if ( u.hash.search(re) !== -1 ) {
-
- // We're being asked to display the items for a specific category.
- // Call our internal method that builds the content for the category
- // on the fly based on our in-memory category data structure.
- showCategory( u, data.options );
-
- // Make sure to tell changePage() we've handled this call so it doesn't
- // have to do anything.
- e.preventDefault();
- }
- }
-});
-</code>
-</pre>
-<p>So why listen at the document level? In short, because of deep-linking. We need our binding to be active before the jQuery Mobile framework initializes and decides how to process the initial URL that invoked the application.</p>
-<p>When the callback for the "pagebeforechange" binding is invoked, the 2nd argument to the callback will be a data object that contains the arguments that were passed to the initial $.mobile.changePage() call. The properties of this object are as follows:</p>
-<ul>
- <li>toPage
- <ul>
- <li>Can be either a jQuery collection object containing the page to be transitioned to, *OR* a URL reference for a page to be loaded/transitioned to.</li>
- </ul>
- </li>
- <li>options
- <ul>
- <li>Object containing the options that were passed in by the caller of the $.mobile.changePage() function.</li>
- <li>A list of the options can be found <a href="../api/methods.html">here</a>.</li>
- </ul>
- </li>
- </ul>
-<p>For our sample application, we are only interested in changePage() calls where URLs are initially passed in, so the first thing our callback does is check the type for the toPage. Next, with the help of some URL parsing utilities, it checks to make sure if the URL contains a hash that we are interested in handling ourselves. If so, it then calls an application function called showCategory() which will dynamically create the content for the category specified by the URL hash, and then it calls preventDefault() on the event.</p>
-<p>Calling preventDefault() on a pagebeforechange event causes the originating $.mobile.changePage() call to exit without performing any work. Calling the preventDefault() method on the event is the equivalent of telling jQuery Mobile that you have handled the changePage() request yourself.</p>
-<p>If preventDefault() is not called, changePage() will continue on processing as it normally does. One thing to point out about the data object that is passed into our callback, is that any changes you make to the toPage property, or options properties, will affect changePage() processing if preventDefault() is not called. So for example, if I wanted to redirect or map a specific URL to another internal/external page, my callback could simply set the data.toPage property in the callback to the URL or DOM element of the page to redirect to. Likewise, I could set, or un-set any option from within my callback, and changePage() would use the new settings.</p>
-<p>So now that we know how to intercept changePage() calls, let's take a closer look at how this sample actually generates the markup for a page. Our example actually uses, or I should say, re-uses the same page to display each of the categories. Each time one of our special links is clicked, the function showCategory() gets invoked:</p>
-<pre><code>
-// Load the data for a specific category, based on
-// the URL passed in. Generate markup for the items in the
-// category, inject it into an embedded page, and then make
-// that page the current active page.
-function showCategory( urlObj, options )
-{
- var categoryName = urlObj.hash.replace( /.*category=/, "" ),
-
- // Get the object that represents the category we
- // are interested in. Note, that at this point we could
- // instead fire off an ajax request to fetch the data, but
- // for the purposes of this sample, it's already in memory.
- category = categoryData[ categoryName ],
-
- // The pages we use to display our content are already in
- // the DOM. The id of the page we are going to write our
- // content into is specified in the hash before the '?'.
- pageSelector = urlObj.hash.replace( /\?.*$/, "" );
-
- if ( category ) {
- // Get the page we are going to dump our content into.
- var $page = $( pageSelector ),
-
- // Get the header for the page.
- $header = $page.children( ":jqmData(role=header)" ),
-
- // Get the content area element for the page.
- $content = $page.children( ":jqmData(role=content)" ),
-
- // The markup we are going to inject into the content
- // area of the page.
- markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
-
- // The array of items for this category.
- cItems = category.items,
-
- // The number of items in the category.
- numItems = cItems.length;
-
- // Generate a list item for each item in the category
- // and add it to our markup.
- for ( var i = 0; i < numItems; i++ ) {
- markup += "<li>" + cItems[i].name + "</li>";
- }
- markup += "</ul>";
-
- // Find the h1 element in our header and inject the name of
- // the category into it.
- $header.find( "h1" ).html( category.name );
-
- // Inject the category items markup into the content element.
- $content.html( markup );
-
- // Pages are lazily enhanced. We call page() on the page
- // element to make sure it is always enhanced before we
- // attempt to enhance the listview markup we just injected.
- // Subsequent calls to page() are ignored since a page/widget
- // can only be enhanced once.
- $page.page();
-
- // Enhance the listview we just injected.
- $content.find( ":jqmData(role=listview)" ).listview();
-
- // We don't want the data-url of the page we just modified
- // to be the url that shows up in the browser's location field,
- // so set the dataUrl option to the URL for the category
- // we just loaded.
- options.dataUrl = urlObj.href;
-
- // Now call changePage() and tell it to switch to
- // the page we just modified.
- $.mobile.changePage( $page, options );
- }
-}
-</code></pre>
-<p>In our sample app, the hash of the URL we handle contains 2 parts:</p>
-<pre><code>
-#category-items?category=vehicles
-</code></pre>
-<p>The first part, before the '?' is actually the id of the page to write content into, the part after the '?' is info the app uses to figure out what data it should use when generating the markup for the page. The first thing showCategory() does is deconstruct this hash to extract out the id of the page to write content into, and the name of the category it should use to get the correct set of data from our in-memory JavaScript category object. After it figures out what category data to use, it then generates the markup for the category, and then injects it into the header and content area of the page, wiping out any other markup that previously existed in those elements.</p>
-<p>After it injects the markup, it then calls the appropriate jQuery Mobile widget calls to enhance the list markup it just injected. This is what turns the normal list markup into a fully styled listview with all its behaviors.</p>
-<p>Once that's done, it then calls $.mobile.changePage(), passing it the DOM element of the page we just modified, to tell the framework that it wants to show that page.</p>
-<p>Now an interesting problem here is that jQuery Mobile typically updates the browser's location hash with the URL associated with the page it is showing. Because we are re-using the same page for each category, this wouldn't be ideal, because the URL for that page has no specific category info associated with it. To get around this problem, showCategory() simply sets the dataUrl property on the options object it passes into changePage() to tell it to display our original URL instead.</p>
-<p>That's the sample in a nutshell. It should be noted that this particular sample and its usage is not a very good example of an app that degrades gracefully when JavaScript is turned off. That means it probably won't work very well on C-Grade browsers. We will be posting other examples that demonstrate how to degrade gracefully in the future. Check this <a href="http://jquerymobile.com/test/docs/pages/dynamic-samples/">page</a> for updates.</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">Pages & Dialogs</li>
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li data-theme="a"><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Linking Pages</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Linking pages</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>Linking pages</h2>
-
- <p>jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible. When Ajax isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.</p>
-
- <p>The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
-
- <h2>Default link behavior: Ajax</h2>
-
- <p>To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's <code>href</code> to formulate an Ajax request (Hijax) and displays the loading spinner. All this happens automatically by jQuery Mobile.</p>
-
- <p>If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.</p>
-
- <p>If the Ajax request fails, the framework will display a small error message overlay (styled in the "e" swatch) that disappears after a brief time so this doesn't break the navigation flow. View an <a href="notapage.html">example of the error message</a>.</p>
-
- <p><strong>Note:</strong> that you cannot link <strong>to</strong> multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a <a href="https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget" rel="external">subpage plugin</a> that makes it possible to load in multi-page documents.</p>
-
-
-<h2>Linking without Ajax</h2>
-
- <p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (<code>rel="external"</code> and <code>data-ajax="false"</code>) have the same effect, but a different semantic meaning: <code>rel="external"</code> should be used when linking to another site or domain, while <code>data-ajax="false"</code> is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.</p>
-
- <p>Note: When building a jQuery Mobile application where the Ajax navigation system is disabled globally or frequently disabled on individual links, we recommend disabling the <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to avoid inconsistent navigation behavior in some browsers.</p>
-
-
-
- <h2>Linking within a multi-page document</h2>
-
- <p>A single HTML document can contain one or many 'page' containers simply by stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p>
-
- <p>If a link in a multi-page document points to an anchor (<code>#foo</code>), the framework will look for a page wrapper with that ID (<code>id="foo"</code>). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking. </p>
-
- <p>It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a <code>rel="external"</code> or <code>data-ajax="false"</code> to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (<code>#</code>) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.</p>
-
- <p>For example, a link to a page containing multiple internal pages would look like this:</p>
-
- <code><a href="multipage.html" rel="external">Multi-page link</a></code>
-
-
-
- <h2>"Back" button links</h2>
- <p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, although browsers that support this feature will not use the specified <code>href</code> attribute, <strong>be sure to still provide a meaningful value that actually points to the URL of the referring page to allow the feature to work for users in C-Grade browsers</strong>. If users can reach this page from more than one referring pages, specify a sensible <code>href</code> so that the navigation remains logical for all users. Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute instead.</p>
-
-
- <h2>Redirects and linking to directories</h2>
-
- <p>When linking to directory indexes (such as href="typesofcats/" instead of href="typesofcats/index.html"), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.</p>
-
- <p>However, you can work around this issue by returning your page div with a <code>data-url</code> attribute already specified. When you do this, jQuery Mobile will use that attribute's value for updating the URL, instead of the url used to request that page. This also allows you to return urls that change as the result of a redirect, for example, you might post a form to "/login.html" but return a page from the url "/account" after a successful submission. This tool allows you to take control of the jQuery Mobile history stack in these situations. Here's an example:</p>
-
- <p>The following link points to "docs-links-urltest/index.html": <a href="docs-links-urltest/index.html">Test Link</a> which is a directory with an index page. The return page will update the hash as "/docs/pages/docs-links-urltest/" with a trailing slash. This is done via the data-url attribute in that page's source. Keep in mind that the value will replace the entire hash, and it is up to you to replace it with a URL that actually resolves to the correct page when requested via refresh or deep link.</p>
-
- <p>Learn more about the technical details of the navigation model and <a href="page-navmodel.html">Ajax, hashes and history</a> in jQuery mobile.</p>
-
-
-
- <h2>Link examples</h2>
- <p>All standard HTML link types are supported in jQuery Mobile in addition to the types outlined above. Here is a sampler of many common link types:</p>
-
- <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
- <li data-role="list-divider">Links that will be Ajax-loaded with page transitions</li>
- <li><a href="../../index.html">Link in the same domain</a></li>
- <li><a href="../pages/dialog.html" data-rel="dialog">Dialog link: data-rel="dialog" (not tracked in history)</a></li>
- <li data-role="list-divider">Links that will refresh the page</li>
- <li><a href="http://www.jquery.com">External domain</a></li>
- <li><a href="../../index.html" rel="external">Link with rel="external"</a></li>
- <li><a href="index.html" data-ajax="false">link with [data-ajax="false"]</a></li>
- <li><a href="../../index.html" target="foo">Link with target="foo"</a></li>
- <li data-role="list-divider">Email links</li>
- <li><a href="mailto:jdoe@foo.com">Basic email: mailto:jdoe@foo.com</a></li>
- <li><a href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=Happy%20Birthday&body=Best%20wishes!">Mailto with a cc:, bcc:, subject and body pre-filled</a></li>
-
- <li data-role="list-divider">Phone links</li>
- <li><a href="tel:15555555555">Phone: tel:15555555555</a></li>
- <li data-role="list-divider">Other</li>
- <li><a href="#">A href="#" will return false</a></li>
- </ul>
-
-
- </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">Pages & Dialogs</li>
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li data-theme="a"><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Ajax, hashes & history</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Ajax, hashes & history</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's navigation model</h2>
-
- <p>A "page" in jQuery Mobile consists of an element (usually a <code>div</code>) with a <code> data-role</code> attribute set to <code>"page"</code>, which generally contains <code>div</code> elements with roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>, each containing common markup, forms, and custom jQuery Mobile widgets.</p>
-
- <p>The basic workflow with page loading is as follows: first, a page is requested with a normal HTTP request, and subsequent "pages" are then requested and injected into that page's DOM. Because of this, the DOM may have a number of "pages" in it at a time, each of which can be re-visited by linking to its <code>data-url</code> attribute.</p>
-
- <p>When a url is initially requested, there may be one or more "pages" in the response, and only the first one will be shown. The advantage of storing more than one "page" is that it allows you to pre-fetch static pages that are likely to be visited.</p>
-
- <h2>Hash and Ajax driven page navigation</h2>
-
- <p>By default all navigation within jQuery Mobile is based on changes and updates to <code>location.hash</code>. Whenever possible, page changes will use a smooth transition between the current "page" and the next, whether it is either already present in the DOM, or is automatically loaded via Ajax.</p>
-
- <p>Hash values created by jQuery Mobile are normalized as full paths relative to the URL of the first "real" page that was loaded. The hash is always maintained as a valid URL, so any "page" in jQuery mobile can be bookmarked or referenced in a link. To retrieve a non-hash-based URL, simply remove the # from the address and refresh the page.</p>
-
- <p>In general, hash changes are created whenever a link is clicked in jQuery mobile. When a link is clicked, jQuery mobile will make sure that the link is referencing a local URL, and if so, it'll prevent the link's default click behavior from occurring and request the referenced url via Ajax instead. When the page returns successfully, it will set the <code>location.hash</code> to the new page's relative url. </p>
-
- <p>Hash changes that occur independently of a click, such as when a user clicks the back button, are handled through the <code>hashchange</code> event, which is bound to the window object using Ben Alman's <code>hashchange</code> special event plugin (included in jQuery Mobile). When a hash change occurs (and also when the first page loads), the <code>hashchange</code> event handler will send the <code>location.hash</code> to the <code>$.mobile.changePage()</code> function, which in turn either loads or reveals the referenced page.</p>
-
-
- <p>Once the referenced page is present in the DOM, the <code>$.mobile.changePage()</code> function applies a transition between the current active page and the new page. Page transitions happen through adding and removing classes that apply CSS animations. For example, in a slide-left transition, the exiting page is given the classes <code>"slideleft"</code> and <code>"out"</code>, and the entering page is given the classes <code>"slideleft"</code> and <code>"in"</code>, as well as a class of <code>"ui-page-active"</code> to mark it as the new "active" page being viewed. When the animation is complete, the <code>"in"</code> and <code>"out"</code> classes are removed, and the exited page loses its <code>"ui-page-active"</code> class.</p>
-
- <h2>pushState plugin</h2>
-
- <p>There is an optional feature that converts the longer, hash-based URLs mentioned in the previous section into the full document path which is cleaner and makes the Ajax tracking transparent in the URL structure. This is built as an enhancement on top of the hash-based URL system for Ajax links. Note that despite the name, this feature technically converts hash-based urls by using <code>history.replaceState</code> (not <code>history.pushState</code>) in the current release because this works more reliably across our target platforms. For browsers that do not support <code>history.replaceState</code>, or if this feature is disabled, hash-based URLs will be used instead. </p>
-
- <p>Since the plugin initializes when the DOM is fully loaded you can enable and disable it manually by setting <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to <code>false</code> anytime before document ready.</p>
-
- <div class="ui-body ui-body-e">
- <h4 style="margin:.5em 0">Important: rel="external" and $.mobile.ajaxEnabled=false</h4>
- <p>Slightly different implementations of the replaceState API in various browsers can cause odd behavior in specific scenarios. For example, some browser implementations (including desktop browsers) implement the <code>popstate</code> event differently when linking externally and moving back to a page onto which state has already been pushed/replaced. When building a jQuery Mobile application where the ajax navigation is being explicitly disabled, either through the frequent use of <code>rel="external"</code> on links or by disabling Ajax navigation completely via the <code>$.mobile.ajaxEnabled=false</code>, we recommend disabling the pushState feature to fall back to the hash based navigation for more consistent behavior.</p>
- </div>
-
- <h2>changePage</h2>
-
- <p>Within the framework, page changes - both for pages already in the DOM and for pages that need to be loaded via Ajax - use the <code>$.mobile.changePage()</code> function. <code>$.mobile.changePage()</code> contains all of the logic for finding pages to transition to and from, and how to handle various response conditions such as a page not found. <code>$.mobile.changePage()</code> can be called externally and accepts the following arguments (to, transition, back, changeHash). The <code>to</code> argument can accept either a string (such as a file url or local element's ID), an array (in which the first array item is any local page you'd like to transition from, and the second array item is the <code>to</code> page), or an object (with expected properties: url, type ("get" or "post"), and data (for serialized parameters)), the latter of which is useful for loading pages that expect form data. The <code>transition</code> argument accepts a string representing a named transition, such as "slide". The <code>back</code> argument accepts a boolean representing whether the transition should go forward or in reverse. Lastly, the <code>changeHash</code> argument accepts a boolean for whether you'd like the url to be updated upon a successful page change.</p>
-
- <p>The <code>$.mobile.changePage()</code> function is used in a number of places in jQuery Mobile. For example, when a link is clicked, its <code>href</code> attribute is normalized and then <code>$.mobile.changePage()</code> handles the rest. When forms are submitted, jQuery Mobile simply gathers a few of the form's attributes, serializes its data, and once again, <code>$.mobile.changePage()</code> is used to handle the submission and response. Also, links that create dialogs use <code>$.mobile.changePage()</code>to open a referenced page without updating the hash, which is useful for keeping dialogs out of history tracking. </p>
-
- <h2>Base element</h2>
-
- <p>Another key ingredient to jQuery Mobile's page navigation model is the <code>base</code> element, which is injected into the <code>head</code> and modified on every page change to ensure that any assets (images, CSS, JS, etc.) referenced on that page will be requested from a proper path. In browsers that don't support dynamic updates to the <code>base</code> element (such as Firefox 3.6), jQuery Mobile loops through all of the referenced assets on the page and prefixes their <code>href</code> and <code>src</code> attributes with the base path.</p>
-
-
- <h2>Developer explanation of base url management:</h2>
-
- <p>jQuery Mobile manages http requests using a combination of generated absolute URL paths and manipulating a generated <code><base></code> element's href attribute. The combination of these two approaches allows us to create URLs that contain full path information for loading pages, and a base element to properly direct asset requests made by those loaded pages (such as images and stylesheets).</p>
-
-<p><strong>TODO: update description of internal base and urlHistory objects</strong></p>
-
- <h2>Data-url storage</h2>
-
- <p>The navigation model maintains a <code>data-url</code> attribute on all <code>data-role="page"</code> elements. This <code>data-url</code> attribute is used to track the origin of the page element. Pages embedded within the main application document all have their <code>data-url</code> parameter set to the ID of their element with <code>data-role="page"</code>. The only exception to this is the first-page in the document. The first-page is special because it can be addressed by its <code>id</code> if it has one, or by the document or base URL (with no hash fragment).</p>
-
- <p>Pages that are external to the application document get pulled in dynamically via ajax, and their data-url is set to the site relative path to the external page. If you are running in an environment where loading an external page from a different domain is allowed, then the data-url is set to the absolute URL.</p>
-
- <h2>Auto-generated pages and sub-hash urls</h2>
-
- <p>Some plugins may choose to dynamically break a page's content into separate navigable pages, which can then be reached via deep links. One example of this would be the Listview plugin, which will break a nested UL (or OL) into separate pages, which are each given a <code>data-url</code> attribute so they can be linked to like any normal "page" in jQuery Mobile. However, in order to link to these pages, the page that generates them must first be requested from the server. To make this work, pages that are auto-generated by plugins use the following special data-url structure:
- <code><div data-url="page.html&subpageidentifier"></code></p>
-
- <p>So, for example, a page generated by the listview plugin may have a <code>data-url</code> attribute like this: <code>data-url="artists.html&ui-page=listview-1"</code></p>
-
- <p>When a page is requested, jQuery Mobile knows to split the URL at "&ui-page" and make an HTTP request to the portion of the URL before that key. In the case of the listview example mentioned above, the URL would look like this: http://example.com/artists.html&ui-page=listview-1
- ...and jQuery Mobile would request artists.html, which would then generate its sub-pages, creating the <code>div</code> with <code>data-url="artists.html&ui-page=listview-1"</code>, which it will then display as the active page.</p>
-
- <p><em>Note that the <code>data-url</code> attribute of the element contains the full URL path, not just the portion after &ui-page=. This allows jQuery Mobile to use a single consistent mechanism that matches URLs to page <code>data-url</code> attributes.</em></p>
-
- <h2>Cases when Ajax navigation will not be used</h2>
-
- <p>Under certain conditions, normal http requests will be used instead of Ajax requests. One case where this is true is when linking to pages on external websites. You can also specify that a normal http request be made through the following link attributes:</p>
-
- <ul>
- <li><p><code>rel=external</code></p></li>
- <li><p><code>target</code> (with any value, such as <code>"_blank"</code>)</p></li>
-
- </ul><h2>Form submissions</h2>
-
- <p>Form submissions are handled automatically through the navigation model as well. Visit the <a href="../forms/forms-sample.html">forms section</a> for more information.</p>
-
- <h2>Using the Application Cache</h2>
-
- <p>When using the application cache with jQuery Mobile there is at least one important issue to consider. Some browsers, when making requests to the cache will report an http status of 0 on success. This causes jQuery Core's <code>$.ajax</code> to trigger error handlers. The suggested workaround for users leveraging the application cache is to use a jQuery ajax pre-filter. Something like the following (credit to <a href="https://github.com/jquery/jquery-mobile/issues/1579#issuecomment-1209338" rel="external">jammus</a> for the snippet):</p>
-
- <pre><code>
-
-$.ajaxPrefilter( function(options, originalOptions, jqXHR) {
- if ( applicationCache &&
- applicationCache.status != applicationCache.UNCACHED &&
- applicationCache.status != applicationCache.OBSOLETE ) {
- // the important bit
- options.isLocal = true;
- }
-});
-
- </code></pre>
-
- <p>Setting <code>isLocal</code> to true for your ajax requests will alert jQuery Core that it should handle the 0 return values differently. Local requests exhibit similar behavior (ie 0 statuses), and Core will then fall back to determining success based on the presence of content in the xhr <code>responseText</code> attribute.</p>
-
- <p>One important issue to note with the above is that it will set <code>isLocal</code> to <code>true</code> for all requests made via ajax regardless of whether they are in the manifest or not so long as the cache is valid. This works for now because Core only consults the <code>isLocal</code> value when the status is in fact 0 which doesn't affect uncached results. There is no long term guarantee that <code>isLocal</code> will remain isolated in its purpose for handling 0 status values. If that changes it may break your application.</p>
-
- <h2>Known limitations</h2>
-
- <p>The non-standard environment created by jQuery Mobile's page navigation model introduces some conditions of which you should be aware when building pages:</p>
-
- <ul>
- <li><p>When linking to directories, without a filename url, (such as <code>href="typesofcats/"</code> instead of <code>href="typesofcats/index.html"</code>), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.</p></li>
- <li><p>Documents loaded via Ajax will select the first page in the DOM of that document to be loaded as a JQM page element. As a result the developer must make sure to manage the ID attributes of the loaded page and child elements to prevent confusion when manipulating the DOM.</p></li>
- <li><p>If you link to multipage document, you must use a <code>data-ajax="false"</code> attribute on the link to cause a full page refresh due to the limitation above where we only load the first page node in an Ajax request due to potential hash collisions. There is currently a <a href="https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget" rel="external">subpage plugin</a> that makes it possible to load in multi-page documents. </p></li>
- <li><p>Any unique assets referenced by pages in a jQuery Mobile-driven site should be placed inside the "page" element (the element with a <code>data-role</code> attribute of <code>"page"</code>). For example, links to styles and scripts that are specific to a particular page can be referenced inside that <code>div</code>. However, a better approach is to use jQuery Mobile's page events to trigger specific scripting when certain pages load. <strong>Note: </strong> you can return a page from the server with a <code>data-url</code> already specified in the markup, and jQuery Mobile will use that for the hash update. This allows you to ensure directory paths resolve with a trailing slash and will therefore be used in the base url path for future requests.</p></li>
- <li><p>Conversely, any non-unique assets (those used site-wide) should be referenced in the <code><head></code> section of an HTML document, or at the very least, outside of the "page" element, to prevent running scripts more than once.</p></li>
- <li><p>The <code>"ui-page"</code> key name used in sub-hash url references can be set to any value you'd like, so as to blend into your URL structure. This value is stored in <code>jQuery.mobile.subPageUrlKey</code>.</p></li>
- <li><p>When traveling back to a previously loaded jQuery Mobile document from an external <b>or</b> internal document with the push state plugin enabled, some browsers load and trigger the <code>popstate</code> event on the wrong document or for the wrong reasons (two edge cases recorded so far). If you are regularly linking to external documents and find the application behaving erratically try disabling pushstate support.</p></li>
- <li><p>jQuery Mobile does not support query parameter passing to internal/embedded pages but there are two plugins that you can add to your project to support this feature. There is a lightweight <a href="https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params" rel="external">page params plugin</a> and a more fully featured <a href="https://github.com/azicchetti/jquerymobile-router" rel="external">jQuery Mobile router plugin</a> for use with backbone.js or spine.js.</p></li>
- <li><p>Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the <a href="../api/methods.html"><code>silentScroll</code></a> method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a <code>yPos</code> arguments to scroll to that Y location.</p></li>
- </ul>
-
-
- </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">Pages & Dialogs</li>
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li data-theme="a"><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Scripting pages</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Scripting pages</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>Since jQuery Mobile uses an Ajax-powered navigation system, there are a few helpful things to know when writing scripts that manipulate your content. You can explore the mobile API in more detail by reading up on <a href="../api/globalconfig.html">global configuration options</a>, <a href="../api/events.html">events</a>, and <a href="../api/methods.html">methods</a> or dig into the technical details of the <a href="page-navmodel.html">Ajax navigation model</a>.</p>
-
- <h2>Scripts & styles in the head</h2>
-
- <p>When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's <code>href</code> to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that <code>href</code> with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the <em>contents of the response's <code>body</code> element (or more specifically the <code>data-role="page"</code> element, if it's provided)</em>, meaning nothing in the <code>head</code> of the page will be used (with the exception of the page title, which is fetched specifically).</p>
-
- <p> This means that any scripts and styles referenced the <code>head</code> of a page won't have any effect <em>when a page is loaded via Ajax</em>, but they <strong>will execute if the page is requested normally via HTTP</strong>. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the <code>head</code> of a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it's common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume <code>head</code> scripts are only expected to execute once per browsing session.</p>
-
- <p>The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the <code>pagecreate</code> event (details below) to run necessary code when a specific page is created (which can be determined by its <code>id</code> attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.</p>
-
- <p>Another approach for page-specific scripting would be to include scripts at the end of the <code>body</code> element. If you include your custom scripting this way, be aware that these scripts will execute when that page is loaded via Ajax or regular HTTP, so if these scripts are the same on every page, you'll likely run into problems. If you're including scripts this way, we'd recommend enclosing your page content in a <code>data-role="page"</code> element, and placing scripts that are referenced on every page outside of that element. Scripts that are unique to that page can be placed in that element, to ensure that they execute when the page is fetched via Ajax.</p>
-
- <h2>pagecreate = DOM ready</h2>
-
- <p>One of the first things people learn in jQuery is to use the <code>$(document).ready()</code> function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the <code>onload</code> event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the <a href="../api/events.html"><code>pagecreate</code></a> event. </p>
-
- <p>The <code>pagecreate</code> event is triggered on a page when it is initialized, right after initialization occurs. Most of jQuery Mobile's official widgets auto-initialize themselves based on this event, and you can set up your code to do the same.</p>
-<pre><code>
-$( document ).delegate("#aboutPage", "pagecreate", function() {
- alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!');
-});
-</code></pre>
-
- <p>If you'd like to manipulate a page's contents <em>before</em> the pagecreate event fires and widgets are auto-initialized, you can instead bind to the <code>pagebeforecreate</code> event:</p>
-
-<pre><code>
-$( document ).delegate("#aboutPage", "pagebeforecreate", function() {
- alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
-});
-</code></pre>
-
- <h2>Changing pages</h2>
- <p>If you want to change the current active page with JavaScript, you can use the <a href="../api/methods.html"><code>changePage</code></a> method. There are a lot of methods and properties that you can set when changing pages, but here are two simple examples:</p>
- <pre><code>
-<strong>//transition to the "about us" page with a slideup transition</strong>
-$.mobile.changePage( "about/us.html", { transition: "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",
- data: $("form#search").serialize()
-});
-</code></pre>
-
- <h2>Loading pages</h2>
- <p>To load an external page, enhance its content, and insert it into the DOM, use the <a href="../api/methods.html"><code>loadPage</code> method</a>. There are a lot of methods and properties that you can set when loading pages, but here is a simple example:</p>
- <pre><code>
-//load the "about us" page into the DOM
-$.mobile.loadPage( "about/us.html" );
-</code></pre>
-
- <h2>Enhancing new markup</h2>
- <p>The page plugin dispatches a <code>pagecreate</code> event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.</p>
- <p>However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the <code>create</code> event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page <code>div</code> itself), saving you the task of manually initializing each plugin (listview button, select, etc.).</p>
- <p>For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the <code>create</code> event to automatically transform all the widgets it contains (<a href="http://jquerymobile.com/test/docs/forms/textinputs/index.html">inputs</a> and <a href="http://jquerymobile.com/test/docs/buttons/index.html">buttons</a> in this case) into the enhanced versions. The code for this scenario would be:</p>
-<pre style="margin: 25px 0;"><code style="font-size: 12px;">$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
-</code></pre>
-
- <h2>Create vs. refresh: An important distinction</h2>
- <p>Note that there is an important difference between the <code>create</code> event and <code>refresh</code> method that some widgets have. The <code>create</code> event is suited for enhancing <em>raw markup</em> that contains one or more widgets. The <code>refresh</code> method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.</p>
-
- <p>For example, if you had a page where you dynamically appended a new unordered list with <code>data-role=listview</code> attribute after page creation, triggering <code>create</code> on a parent element of that list would transform it into a <a href="http://jquerymobile.com/test/docs/lists/index.html">listview</a> styled widget. If more list items were then programmatically added, calling the listview’s <code>refresh</code> method would update just those new list items to the enhanced state and leave the existing list items untouched.</p>
-
-
- <h2>Scrolling to a position within a page</h2>
- <p>Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the <a href="../api/methods.html"><code>silentScroll</code></a> method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a <code>yPos</code> arguments to scroll to that Y location. For example:</p>
-<pre><code>
-//scroll to Y 300px
-$.mobile.silentScroll(300);
-</code></pre>
-
- <h2>Binding to mouse and touch events</h2>
- <p>One inportant consideration in mobile is handling mouse and touch events. These events differ significantly across mobile platforms, but the common denominator is that click events will work everywhere, but usually after a significant delay of 500-700ms. This delay is necessary for the browser to wait for double tap, scroll and extended hold tap events to potentially occur. To avoid this delay, it's possible to bind to touch events (ex. touchstart) but the issue with this approach is that some mobile platforms (WP7, Blackberry) don't support touch. To compound this issue, some platforms will emit <em>both</em> touch and mouse events so if you bind to both types, duplicate events will be fired for a single interaction.</p>
- <p>Our solution is to create a set of <a href="../api/events.html">virtual events</a> that normalize 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. This still retains the order of event firing in the traditional mouse environment, should multiple handlers be registered on the same element for different events. The virtual mouse system exposes the following virtual events to jQuery bind methods: <code>vmouseover</code>, <code>vmousedown</code>, <code>vmousemove</code>, <code>vmouseup</code>, <code>vclick</code>, and <code>vmousecancel</code></p>
-
-
- <h2>Passing parameters between pages</h2>
- <p>jQuery Mobile does not support query parameter passing to internal/embedded pages. For example, if the framework sees a link to "#somePage?someId=1" it interpret that as "#somePage" and navigate to the internal page div with an ID of <code>somePage</code> and apply a data-url of <code>#somePage?someId=1</code> to that page container. Subsequent calls to other params such as "#somePage?someId=2" will find the same div because jQuery Mobile refers to the data-url on the div which is only set once and will remain at <code>#somePage?someId=1</code>.</p>
-
- <p>There are two plugins that you can add to your project if query parameters are needed between pages. There is a lightweight <a href="https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params" rel="external">page params plugin</a> and a more fully featured <a href="https://github.com/azicchetti/jquerymobile-router" rel="external">jQuery Mobile router plugin</a> for use with backbone.js or spine.js.</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">Pages & Dialogs</li>
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li data-theme="a"><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
-
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Single page template</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
- <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
-</head>
-
-<body>
-
-<div data-role="page">
-
- <div data-role="header">
- <h1>Single page</h1>
- </div><!-- /header -->
-
- <div data-role="content">
- <p>This is a single page boilerplate template that you can copy to build you first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>
- <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
- <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p>
- </div><!-- /content -->
-
- <div data-role="footer">
- <h4>Footer content</h4>
- </div><!-- /footer -->
-
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Page titles</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Page titles</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>Titles in Ajax navigation</h2>
-
- <p>When you load the first page of a jQuery Mobile based site, then click a link or submit a form, Ajax is used to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you’re viewing.</p>
- <p>To remedy this, jQuery Mobile automatically parses the <code>title</code> of the page pulled via Ajax and changes the <code>title</code> attribute of the parent document to match.</p>
-
- <h2>Titles in multi-page templates</h2>
-
- <p>On multi-page documents, we follow a similiar convention, but since all the pages share a common <code>title</code>, we have a <code>data-title</code> attribute that can be added to each page container within a multi-page template to manually define a title. The title of the HTML document will be automatically updated to match the <code>data-title</code> of the page currently in view.</p>
-
-<pre><code>
-<div data-role="page" id="foo" <strong>data-title="Page Foo"</strong>>
-
-</div><!-- /page -->
-</code></pre>
-
-
- </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">Pages & Dialogs</li>
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li data-theme="a"><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Transitions</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Transitions</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>Page transitions</h2>
-
- <p>The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>
-
-
-<div class="ui-grid-a">
- <div class="ui-block-a">
- <a href="#dialog" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
- <a href="#dialog" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
- <a href="#dialog" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
- </div>
- <div class="ui-block-b">
- <a href="#dialog" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
- <a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade">fade</a>
- <a href="#dialog" data-role="button" data-rel="dialog" data-transition="flip">flip*</a>
- </div>
-</div><!-- /grid-a -->
-
-<p><strong>Transitions from <a href="http://www.jqtouch.com/">jQtouch</a></strong> (<em>with small modifications</em>): Built by David Kaneda and maintained by Jonathan Stark.</p>
-
-<p>NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.</p>
-
-
- <h2>Setting a transition on a link or form submit</h2>
- <p>By default, the framework applies the right to left <strong>slide</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p>
-
-<code><code>
-<a href="index.html" <strong>data-transition="pop"</strong>>I'll pop</a>
-</code></code>
-
- <p>When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the <code>data-direction="reverse"</code> attribute to a link. Note: (this was formerly <code>data-back="true"</code>, which will remain supported until 1.0)</p>
-
- <p>For smoother page transitions, consider enabling the <a href="touchoverflow.html">touchOverflow</a> feature.</p>
-
- <h2>Global configuration of transitions</h2>
-
- <p>Set the <code>defaultPageTransition</code> <a href="../api/globalconfig.html">global option</a> if you'd prefer a different default transition. Dialogs have a different option called <code>defaultDialogTransition</code> that can also set configured.</p>
-
-
-
-
- <h2>Creating custom CSS-based transitions</h2>
-
-
- <p>To create a custom CSS transition, select a class name that corresponds to the name of your transition, for example "slide", and then define your "in" and "out" CSS rules to take advantage of transitions or animation keyframes:</p>
-
- <pre><code>.slide.in {
- -webkit-transform: translateX(0);
- -webkit-animation-name: slideinfromright;
- }
-
- .slide.out {
- -webkit-transform: translateX(-100%);
- -webkit-animation-name: slideouttoleft;
- }
-
- @-webkit-keyframes slideinfromright {
- from { -webkit-transform: translateX(100%); }
- to { -webkit-transform: translateX(0); }
- }
- @-webkit-keyframes slideouttoleft {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(-100%); }
- }
- </code></pre>
-
- <p>During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above.</p>
-
- <p>If your transition supports a reverse direction, you need to create CSS rules that use the <code>reverse</code> class in addition to the transition class name and the "in" and "out" classes:</p>
-
- <pre><code>.slide.in.reverse {
- -webkit-transform: translateX(0);
- -webkit-animation-name: slideinfromleft;
- }
-
- .slide.out.reverse {
- -webkit-transform: translateX(100%);
- -webkit-animation-name: slideouttoright;
- }
-
- @-webkit-keyframes slideinfromleft {
- from { -webkit-transform: translateX(-100%); }
- to { -webkit-transform: translateX(0); }
- }
-
- @-webkit-keyframes slideouttoright {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(100%); }
- }
- </code></pre>
-
- <p>After the CSS rules are in place, you simply specify the name of your transition within the @data-transition attribute of a navigation link:</p>
-
- <pre><code><a href="#page2" data-transition="slide">Page 2</a>
- </code></pre>
-
- <p>When the user clicks on the navigation link, jQuery Mobile will invoke your transition when it navigates to the page mentioned within the link.</p>
-
- <p>In case you were wondering why none of the CSS rules above specified any easing or duration, it's because the CSS for jQuery Mobile defines the default easing and duration in the following rules:</p>
-
- <pre><code>
-.in, .out {
- -webkit-animation-timing-function: ease-in-out;
- -webkit-animation-duration: 350ms;
-}
- </code></pre>
-
- <p>If you need to specify a different easing or duration, simply add the appropriate CSS3 property to your custom page transition rules.</p>
-
- <h2>Creating custom JavaScript-based transitions</h2>
-
- <p>When a user clicks on a link within a page, jQuery Mobile checks if the link specifies a <code>@data-transition</code> attribute. The value of this attribute is the name of the transition to use when displaying the page referred to by the link. If there is no <code>@data-transition</code> attribute, the transition name specified by the configuration option <code>$.mobile.defaultPageTransition</code> is used for pages, and <code>$.mobile.defaultDialogTransition</code> is used for dialogs.</p>
-
- <p>After the new page is loaded, the <code>$.mobile.transitionHandlers</code> dictionary is used to see if any transition handler function is registered for the given transition name. If a handler is found, that handler is invoked to start and manage the transition. If no handler is found the handler specified by the configuration option <code>$.mobile.defaultTransitionHandler</code> is invoked.</p>
-
- <p>By default, the <code>$.mobile.transitionHandlers</code> dictionary is only populated with a single handler entry called "none". This handler simply removes the <code>"ui-page-active"</code> class from the page we are transitioning "from", and places it on the page we are transitioning "to". The transition is instantaneous; no animation, no fanfare.</p>
-
- <p>The <code>$.defaultTransitionHandler</code> points to a handler function that assumes the name is a CSS class name, and implements the "Pure CSS3 Based Transitions" section above.</p>
-
- <p>Both the "none" and "css3" transition handlers are available off of the $.mobile namespace:</p>
-
- <pre><code>
-$.mobile.noneTransitionHandler
-$.mobile.css3TransitionHandler
- </code></pre>
-
- <h3>Transition Handlers</h3>
-
- <p>A transition handler is a function with the following call signature:</p>
-
- <pre><code>function myTransitionHandler(name, reverse, $to, $from)
-{
- var deferred = new $.Deferred();
-
- // Perform any actions or set-up necessary to kick-off
- // your transition here. The only requirement is that
- // whenever the transition completes, your code calls
- // deferred.resolve(name, reverse, $to, $from).
-
- // Return a promise.
- return deferred.promise();
-}
- </code></pre>
-
- <p>Your handler must create a Deferred object and return a promise to the caller. The promise is used to communicate to the caller when your transition is actually complete. It is up to you to call <code>deferred.resolve()</code> at the correct time. If you are new to Deferred objects, you can find documentation <a href="http://api.jquery.com/category/deferred-object/" rel="nofollow">here</a>.</p>
-
- <h3>Registering and Invoking Your Transition Handler</h3>
-
- <p>Once you have created a transition handler function, you need to tell jQuery Mobile about it. To do this, simply add your handler to the <code>$.mobile.transitionHandlers</code> dictionary. Remember, the key used should be the name of your transition. This name is also the same name that will be used within the <code>@data-transition</code> attribute of any navigation links.</p>
-
- <pre><code>// Define your transition handler:
-
-function myTransitionHandler(name, reverse, $to, $from)
-{
- var deferred = new $.Deferred();
-
- // Perform any actions or set-up necessary to kick-off
- // your transition here. The only requirement is that
- // whenever the transition completes, your code calls
- // deferred.resolve(name, reverse, $to, $from).
-
- // Return a promise.
- return deferred.promise();
-}
-
-// Register it with jQuery Mobile:
-
-$.mobile.transitionHandlers["myTransition"] = myTransitionHandler;
- </code></pre>
-
- <p>Once you've registered your handler, you can invoke your transition by placing a <code>data-transition</code> attribute on a link:</p>
-
- <pre><code><a href="#page2" data-transition="myTransition">Page 2</a>
- </code></pre>
-
- <p>When the user clicks the link above, your transition handler will be invoked after the page is loaded and it is ready to be shown.</p>
-
- <h3>Overriding a CSS Transition With Your Own Handler</h3>
-
- <p>As previously mentioned the default transition handler assumes that any transition name other than "none" is a CSS class to be placed on the "from" and "to" elements to kick off a CSS3 animation. If you would like to override one of these built-in CSS transitions, you simply register your own handler with the same name as the CSS page transition you want to override. So for example, if I wanted to override the built-in "slide" CSS transition with my own JavaScript based transition, I would simply do the following:</p>
-
- <pre><code>// Define your transition handler:
-
-function myTransitionHandler(name, reverse, $to, $from)
-{
- var deferred = new $.Deferred();
-
- // Perform any actions or set-up necessary to kick-off
- // your transition here. The only requirement is that
- // whenever the transition completes, your code calls
- // deferred.resolve(name, reverse, $to, $from).
-
- // Return a promise.
- return deferred.promise();
-}
-
-// Register it with jQuery Mobile:
-
-$.mobile.transitionHandlers["slide"] = myTransitionHandler;
- </code></pre>
-
- <p>Once you do this, anytime the "slide" transition is invoked, your handler, instead of the default one, will be called to perform the transition.</p>
-
- <h3>Overriding the Default Transition Handler</h3>
-
- <p>The <code>$.mobile.css3TransitionHandler</code> function is the default transition handler that gets invoked when a transition name is used and not found in the <code>$.mobile.transitionHandlers</code> dictionary. If you want to install your own custom default handler, you simply set the <code>$.mobile.defaultTransitionHandler</code> to your handler:</p>
-
- <pre><code>// Define your default transition handler:
-
-function myTransitionHandler(name, reverse, $to, $from)
-{
- var deferred = new $.Deferred();
-
- // Perform any actions or set-up necessary to kick-off
- // your transition here. The only requirement is that
- // whenever the transition completes, your code calls
- // deferred.resolve(name, reverse, $to, $from).
-
- // Return a promise.
- return deferred.promise();
-}
-
-$.mobile.defaultTransitionHandler = myTransitionHandler;
- </code></pre>
-
- <p>Once you do this, your handler will be invoked any time a transition name is used but not found within the <code>$.mobile.transitionHandlers</code> dictionary.</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">Pages & Dialogs</li>
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li data-theme="a"><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
-
-
-
-
- <div data-role="page" id="dialog"><!-- dialog-->
-
- <div data-role="header" data-theme="e">
- <h1>Ta-da!</h1>
- </div><!-- /header -->
-
- <div data-role="content" data-theme="e">
- <p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p>
- <p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p>
- <p>What do you think?</p>
- <a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">I like it</a>
- </div>
- </div>
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Theming Pages</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Theming pages</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">
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="pages-themes.html" data-role="button" data-transition="fade" class="ui-btn-active">Theme Overview</a></li>
-
- <li><a href="pages-themes/theme-a.html" data-role="button" data-transition="fade">A </a></li>
- <li><a href="pages-themes/theme-b.html" data-role="button" data-transition="fade">B </a></li>
- <li><a href="pages-themes/theme-c.html" data-role="button" data-transition="fade">C </a></li>
- <li><a href="pages-themes/theme-d.html" data-role="button" data-transition="fade">D </a></li>
- <li><a href="pages-themes/theme-e.html" data-role="button" data-transition="fade">E </a></li>
- </ul>
-
- <h2>Page Theming</h2>
-
- <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.</p>
-
- <p>The <code> data-theme</code> attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the <code>data-theme</code> attribute could be added to the content container, we recommend adding it instead to <code>div</code> or container that has been assigned the <code> data-role="page"</code> attribute to ensure that the background color is applied to the full page. When this is done, all widgets on the page will also inherit the theme specified in the page container. However, headers and footers will default to theme "a". If you want to have a page with, for example, only theme "b" for all its elements, including its header and footer, you will need to specify <code>data-theme="b"</code> to the page <code>div</code> as well as the header and footer <code>divs</code>. </p>
-
- <p>The default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:</p>
-
- <div data-role="header">
- <h1>Default Theme</h1>
- </div>
-
- <div class="ui-body ui-body-c">
- <h3>Default Theme Content Header</h3>
- <p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
-
- <a href="#" data-role="button" data-inline="true">Button</a>
- </div>
-
- <p>And each of the five "swatches" applies its style consistently across all page elements, as shown below:</p>
-
- <h2>Swatch A</h2>
- <div data-role="header" data-position="inline">
- <h1>Header A</h1>
- </div>
-
-
- <div class="ui-body ui-body-a">
- <h3>Header</h3>
- <p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p>
- <a href="#" data-role="button" data-inline="true">Button</a>
- </div>
-
-
- <h2>Swatch B</h2>
- <div data-role="header" data-theme="b">
- <h1>Header B</h1>
- </div>
- <div class="ui-body ui-body-b">
- <h3>Header</h3>
- <p>This is content color swatch "B" and a preview of a <a href="#" class="ui-link">link</a>.</p>
- <a href="#" data-role="button" data-inline="true">Button</a>
- </div>
-
- <h2>Swatch C</h2>
- <div data-role="header" data-theme="c">
- <h1>Header C</h1>
- </div>
- <div class="ui-body ui-body-c">
- <h3>Header</h3>
- <p>This is content color swatch "C" and a preview of a <a href="#" class="ui-link">link</a>.</p>
- <a href="#" data-role="button" data-inline="true">Button</a>
- </div>
-
- <h2>Swatch D</h2>
- <div data-role="header" data-theme="d">
- <h1>Header D</h1>
- </div>
- <div class="ui-body ui-body-d">
- <h3>Header</h3>
- <p>This is content color swatch "D" and a preview of a <a href="#" class="ui-link">link</a>.</p>
- <a href="#" data-role="button" data-inline="true">Button</a>
- </div>
-
- <h2>Swatch E</h2>
- <div data-role="header" data-theme="e">
- <h1>Header E</h1>
- </div>
- <div class="ui-body ui-body-e">
- <h3>Header</h3>
- <p>This is content color swatch "E" and a preview of a <a href="#" class="ui-link">link</a>.</p>
- <a href="#" data-role="button" data-inline="true">Button</a>
- </div>
-
- </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">Pages & Dialogs</li>
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li data-theme="a"><a href="pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Theming Pages</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior" data-theme="a">
-
- <div data-role="header">
- <h1>Theming pages</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">
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
-
- <li><a href="theme-a.html" data-role="button" data-transition="fade" class="ui-btn-active">A </a></li>
- <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li>
- <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li>
- <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li>
- <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li>
- </ul>
-
- <h2>Theme A Sample Page</h2>
-
- <p>This is an example of <code>data-theme="a"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
-
- <div data-role="fieldcontain">
- <label for="name-a">Text Input:</label>
- <input type="text" name="name" id="name-a" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="switch-a">Flip switch:</label>
- <select name="switch-a" id="switch-a" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider-a">Slider:</label>
- <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
- <label for="checkbox-6a">b</label>
-
- <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
- <label for="checkbox-7a"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
- <label for="checkbox-8a">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
- <label for="radio-choice-1a">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
- <label for="radio-choice-2a">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
- <label for="radio-choice-3a">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
- <label for="radio-choice-4a">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-a" class="select">Choose shipping method:</label>
- <select name="select-choice-a" id="select-choice-a">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <h2>Collapsible Sets</h2>
- <div data-role="collapsible-set">
- <div data-role="collapsible" data-collapsed="false">
- <h3>Section 1</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
- </div>
- <div data-role="collapsible">
- <h3>Section 2</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- <div data-role="collapsible">
- <h3>Section 3</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- </div>
-
- <h2>Inset List</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- </div><!--/content-primary -->
-
- <div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
-
- <h3>More in this section</h3>
-
- <ul data-role="listview" data-theme="a" data-dividertheme="a">
- <li data-role="list-divider">Pages & Dialogs</li>
- <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="../page-titles.html">Page titles</a></li>
- <li><a href="../page-links.html">Linking pages</a></li>
- <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="../page-dialogs.html">Dialogs</a></li>
- <li><a href="../page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
- <li><a href="../page-scripting.html">Scripting pages</a></li>
- <li data-theme="b"><a href="../pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Theming Pages</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior" data-theme="b">
-
- <div data-role="header" data-theme="b">
- <h1>Theming pages</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">
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
-
- <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li>
- <li><a href="theme-b.html" data-role="button" data-transition="fade" class="ui-btn-active">B </a></li>
- <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li>
- <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li>
- <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li>
- </ul>
-
- <h2>Theme B Sample Page</h2>
-
- <p>This is an example of <code>data-theme="b"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
-
- <div data-role="fieldcontain">
- <label for="name-a">Text Input:</label>
- <input type="text" name="name" id="name-a" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="switch-a">Flip switch:</label>
- <select name="switch-a" id="switch-a" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider-a">Slider:</label>
- <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
- <label for="checkbox-6a">b</label>
-
- <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
- <label for="checkbox-7a"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
- <label for="checkbox-8a">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
- <label for="radio-choice-1a">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
- <label for="radio-choice-2a">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
- <label for="radio-choice-3a">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
- <label for="radio-choice-4a">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-a" class="select">Choose shipping method:</label>
- <select name="select-choice-a" id="select-choice-a">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <h2>Collapsible Sets</h2>
- <div data-role="collapsible-set">
- <div data-role="collapsible" data-collapsed="false">
- <h3>Section 1</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
- </div>
- <div data-role="collapsible">
- <h3>Section 2</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- <div data-role="collapsible">
- <h3>Section 3</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- </div>
-
- <h2>Inset List</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- </div><!--/content-primary -->
-
- <div class="content-secondary">
-
- <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="b">
-
- <h3>More in this section</h3>
-
- <ul data-role="listview" data-theme="b" data-dividertheme="b">
- <li data-role="list-divider">Pages & Dialogs</li>
- <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="../page-titles.html">Page titles</a></li>
- <li><a href="../page-links.html">Linking pages</a></li>
- <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="../page-dialogs.html">Dialogs</a></li>
- <li><a href="../page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
- <li><a href="../page-scripting.html">Scripting pages</a></li>
- <li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Theming Pages</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior" data-theme="c">
-
- <div data-role="header" data-theme="c">
- <h1>Theming pages</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">
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
-
- <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li>
- <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li>
- <li><a href="theme-c.html" data-role="button" data-transition="fade" class="ui-btn-active">C </a></li>
- <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li>
- <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li>
- </ul>
-
- <h2>Theme C Sample Page</h2>
-
- <p>This is an example of <code>data-theme="c"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
-
- <div data-role="fieldcontain">
- <label for="name-a">Text Input:</label>
- <input type="text" name="name" id="name-a" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="switch-a">Flip switch:</label>
- <select name="switch-a" id="switch-a" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider-a">Slider:</label>
- <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
- <label for="checkbox-6a">b</label>
-
- <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
- <label for="checkbox-7a"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
- <label for="checkbox-8a">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
- <label for="radio-choice-1a">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
- <label for="radio-choice-2a">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
- <label for="radio-choice-3a">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
- <label for="radio-choice-4a">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-a" class="select">Choose shipping method:</label>
- <select name="select-choice-a" id="select-choice-a">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <h2>Collapsible Sets</h2>
- <div data-role="collapsible-set">
- <div data-role="collapsible" data-collapsed="false">
- <h3>Section 1</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
- </div>
- <div data-role="collapsible">
- <h3>Section 2</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- <div data-role="collapsible">
- <h3>Section 3</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- </div>
-
- <h2>Inset List</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- </div><!--/content-primary -->
-
- <div class="content-secondary">
-
- <div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="c">
-
- <h3>More in this section</h3>
-
- <ul data-role="listview" data-theme="c" data-dividertheme="c">
- <li data-role="list-divider">Pages & Dialogs</li>
- <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="../page-titles.html">Page titles</a></li>
- <li><a href="../page-links.html">Linking pages</a></li>
- <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="../page-dialogs.html">Dialogs</a></li>
- <li><a href="../page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
- <li><a href="../page-scripting.html">Scripting pages</a></li>
- <li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Theming Pages</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior" data-theme="d">
-
- <div data-role="header" data-theme="d">
- <h1>Theming pages</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">
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
-
- <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li>
- <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li>
- <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li>
- <li><a href="theme-d.html" data-role="button" data-transition="fade" class="ui-btn-active">D </a></li>
- <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li>
- </ul>
-
- <h2>Theme D Sample Page</h2>
-
- <p>This is an example of <code>data-theme="d"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
-
- <div data-role="fieldcontain">
- <label for="name-a">Text Input:</label>
- <input type="text" name="name" id="name-a" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="switch-a">Flip switch:</label>
- <select name="switch-a" id="switch-a" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider-a">Slider:</label>
- <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
- <label for="checkbox-6a">b</label>
-
- <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
- <label for="checkbox-7a"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
- <label for="checkbox-8a">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
- <label for="radio-choice-1a">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
- <label for="radio-choice-2a">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
- <label for="radio-choice-3a">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
- <label for="radio-choice-4a">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-a" class="select">Choose shipping method:</label>
- <select name="select-choice-a" id="select-choice-a">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <h2>Collapsible Sets</h2>
- <div data-role="collapsible-set">
- <div data-role="collapsible" data-collapsed="false">
- <h3>Section 1</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
- </div>
- <div data-role="collapsible">
- <h3>Section 2</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- <div data-role="collapsible">
- <h3>Section 3</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- </div>
-
- <h2>Inset List</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- </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">Pages & Dialogs</li>
- <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="../page-titles.html">Page titles</a></li>
- <li><a href="../page-links.html">Linking pages</a></li>
- <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="../page-dialogs.html">Dialogs</a></li>
- <li><a href="../page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
- <li><a href="../page-scripting.html">Scripting pages</a></li>
- <li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="d">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Theming Pages</title>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
- <script src="../../../js/jquery.js"></script>
- <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../_assets/js/jqm-docs.js"></script>
- <script src="../../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior" data-theme="e">
-
- <div data-role="header" data-theme="e">
- <h1>Theming pages</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">
-
- <ul data-role="controlgroup" data-type="horizontal" class="localnav">
- <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
-
- <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li>
- <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li>
- <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li>
- <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li>
- <li><a href="theme-e.html" data-role="button" data-transition="fade" class="ui-btn-active">E </a></li>
- </ul>
-
- <h2>Theme E Sample Page</h2>
-
- <p>This is an example of <code>data-theme="e"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
-
- <div data-role="fieldcontain">
- <label for="name-a">Text Input:</label>
- <input type="text" name="name" id="name-a" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="switch-a">Flip switch:</label>
- <select name="switch-a" id="switch-a" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider-a">Slider:</label>
- <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
- <label for="checkbox-6a">b</label>
-
- <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
- <label for="checkbox-7a"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
- <label for="checkbox-8a">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
- <label for="radio-choice-1a">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
- <label for="radio-choice-2a">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
- <label for="radio-choice-3a">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
- <label for="radio-choice-4a">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-a" class="select">Choose shipping method:</label>
- <select name="select-choice-a" id="select-choice-a">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <h2>Collapsible Sets</h2>
- <div data-role="collapsible-set">
- <div data-role="collapsible" data-collapsed="false">
- <h3>Section 1</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
- </div>
- <div data-role="collapsible">
- <h3>Section 2</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- <div data-role="collapsible">
- <h3>Section 3</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- </div>
-
- <h2>Inset List</h2>
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- </div><!--/content-primary -->
-
- <div class="content-secondary">
-
- <div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="e">
-
- <h3>More in this section</h3>
-
- <ul data-role="listview" data-theme="e" data-dividertheme="e">
- <li data-role="list-divider">Pages & Dialogs</li>
- <li><a href="../../page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="../../page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="../../multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="../../page-titles.html">Page titles</a></li>
- <li><a href="../../page-links.html">Linking pages</a></li>
- <li><a href="../../page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="../../page-dialogs.html">Dialogs</a></li>
- <li><a href="../../page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="../../page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="../../page-dynamic.html">Dynamically Injecting Pages</a></li>
- <li><a href="../../page-scripting.html">Scripting pages</a></li>
- <li data-theme="a"><a href="../../pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="e">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Phonegap</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Dynamically Injecting Pages</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>Building PhoneGap apps with jQuery Mobile</h2>
-
- <p><a href="http://phonegap.com/" rel="external">PhoneGap</a> is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores. Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView (a chromeless browser, referred to hereafter as a webview). Since PhoneGap is frequently used in conjunction with jQuery Mobile, we wanted to offer a few tips and recommendations to help you get staretd. </p>
-
- <p>The initial application document is loaded by the PhoneGap application by a local file:// URL. This means that if you want to pull in pages from your company's remote server (phone home) you will have to refer to them with absolute URLs to your server. Because your document originates from a file:// URL, loading pages or assets from your remote server is considered a cross-domain request that can be blocked in certain scenarios. </p>
-
- <p>Your ability to access cross-domain pages from within a Phone Gap jQuery Mobile application is controlled by two key things: <code>$.support.cors</code> and <code>$.mobile.allowCrossDomainPages</code>, and can also be influenced by the white list feature in later builds of PhoneGap.</p>
-
- <h2>$.support.cors</h2>
-
- <p>In jQuery core, there is a <a href="http://api.jquery.com/jQuery.support/" rel="external">$.support.cors</a> boolean that indicates whether or not jQuery thinks the browser supports the W3C "<a hre="http://www.w3.org/TR/cors/" rel="external">Cross-Origin Resource Sharing</a>" feature to support cross-domain requests.</p>
-
- <p>Since jQuery Mobile relies on jQuery core's $.ajax() functionality, <code>$.support.cors</code> must be set to <code>true</code> to tell <code>$.ajax</code> to load cross-domain pages. We've heard reports that webviews on some platforms, like BlackBerry, support cross-domain loading, but that jQuery core incorrectly sets <code>$.support.cors</code> value to <code>false</code> which disables cross-domain $.ajax() requests and will cause the page or assets to fail to load. </p>
-
- <h2>$.mobile.allowCrossDomainPages</h2>
-
- <p>When jQuery Mobile attempts to load an external page, the request runs through <code>$.mobile.loadPage()</code>. This will only allow cross-domain requests if the <code>$.mobile.allowCrossDomainPages</code> configuration option is set to <code>true</code>. Because the jQuery Mobile framework tracks what page is being viewed within the browser's location hash, it is possible for a cross-site scripting (XSS) attack to occur if the XSS code in question can manipulate the hash and set it to a cross-domain URL of its choice. This is the main reason that the default setting for <code>$.mobile.allowCrossDomainPages</code> is set to <code>false</code>.</p>
-
- <p>So in PhoneGap apps that must "phone home" by loading assets off a remote server, both the <code>$.support.cors</code> AND <code>$.mobile.allowCrossDomainPages</code> must be set to <code>true</code>. The <code>$.mobile.allowCrossDomainPages</code> option must be set before any cross-domain request is made so we recommend wrapping this in a <code>mobileinit</code> handler:</p>
-
-<pre><code>$( document ).bind( "mobileinit", function() {
- // Make your jQuery Mobile framework configuration changes here!
-
- $.mobile.allowCrossDomainPages = true;
-});</code></pre>
-
- <h2>PhoneGap White Listing</h2>
-
- <p>PhoneGap 1.0 introduced the idea of white-listing servers that its internal webview is allowed to make cross-domain requests to. You can find info about it here on the <a href="http://wiki.phonegap.com/w/page/40796976/Install%20the%20latest%20%28trunk%29%20source%20of%20iOS%20PhoneGap">PhoneGap wiki</a>:</p>
-
- <p>However, not all platforms support this white-listing feature so check the PhoneGap documentation for details. Older versions of PhoneGap prior to 1.0 defaulted to allowing cross-domain requests to any server.</p>
-
- <h2>Still having issues?</h2>
-
- <p>Here are a few more tips that aren't specifically related to PhoneGap but are good to know:</p>
-
- <p><strong>We recommend disabling the <a href="../api/globalconfig.html">pushState feature</a> for installed apps </strong>because there are edge cases where this feature can cause unexpected navigation behavior and since URLs aren't visible in a webview, it's not worth keeping this active in these situations. </p>
-
- <p><strong>Android enforces a timeout when loading URLs in a webview</strong> which may be too short for your needs. You can change this timeout by editing a Java class generated by the Eclipse plugin for Android:</p>
-
- <code>super.setIntegerProperty("loadUrlTimeoutValue", 60000);</code>
-
-
-
- </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">Pages & Dialogs</li>
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li data-theme="a"><a href="phonegap.html">PhoneGap apps</a></li>
- <li><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - touchOverflow</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>touchOverflow</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="ios5">touchOverflow: Dramatically improved page transitions and true fixed toolbars</h2>
-
- <p>Currently, both the page you're viewing and the one you're navigating to are sitting next to each other in the viewport, which lets us leverage native scrolling for the broadest possible device support. The downside to this approach is that since both pages share the same viewport, when a page transition starts, we must first scroll to the top of the document, then start animating to ensure that the pages are lined up vertically. If you hit the Back button, we need to scroll up, transition, then restore the previous scroll position. Since mobile browsers are pretty slow, these scroll movements can detract from the flow of the experience.</p>
-
- <p>The way to really improve this situation is to have both pages in separate containers, each with its own internal scroll bar. The means no more scrolling the document or needing to restore scroll positions for a smoother experience. It also has the benefit of making fixed toolbars very easy to implement by simply placing them outside the containers with internal scrolling.<p>
-
- <h2>How it works</h2>
-
- <p>To leverage iOS5′s support for a touch-targeted version of <code>overflow:auto</code> which allows for internal scrolling regions with the native momentum scrolling, we've added a feature called touchOverflow that leverages these new CSS capabilities to enable us to bring both true “fixed” toolbars and super smooth transitions to iOS5, all by using web standards and very little additional code.</p>
-
- <p>A feature called <code>touchOverflowEnabled</code> is designed to leverage the upcoming wave of browsers that support overflow scrolling in CSS. Note that this feature is off by default to give us more time to test and debug this for best performance but we hope to turn it on by default at a later point. Here's how to enable this <a href="../api/globalconfig.html">global option</a>:</p>
-
-<pre><code><script>
-$(document).bind("mobileinit", function(){
-<strong> $.mobile.touchOverflowEnabled = true;
-</strong>});
-</script></code></pre>
-
- <p>When this feature is activated, the framework looks for browser support for both the <code>overflow:</code> and <code>-webkit-overflow-scrolling:touch</code> CSS properties. In browsers that support both, it switches to a dual page container model with native overflow: scrolling within each, which brings true fixed toolbars smooth transitions. Coupled with iOS’s already excellent hardware-accelerated transitions, it's now possible to build interfaces that are very close to native performance.</p>
-
- <p>To demo this feature, check out <a href="../config/touchOverflow.html">this page</a> in iOS5.</p>
-
- <h2>A few downsides</h2>
-
- <p>Nothing is perfect, especially a new feature, so there are a few downsides to keep in mind. When activating this feature:</p>
-
- <ul>
- <li>Sometimes child elements like lists and forms wouldn't render when embedded in a page with <code>overflow:</code> in iOS5. This was a pretty random phenomenon but is not acceptable so we've added a <code>translate-z</code> CSS property which forces iOS to render the contents. The downside with this fix is that when a transform is applied, all elements are set to position:relative which can cause issues in your layout.</li>
- <li>The <code>-webkit-overflow-scrolling:touch</code> property seems to disable the events to scroll you to the top of the page when the time is tapped in the status bar. We hope Apple fixes this because it's a very useful feature.</li>
- <li>When <code>overflow:</code> and <code>-webkit-overflow-scrolling:touch</code> properties are set, iOS appears to ignore any overflow:hidden properties on the parent, which is the page in our case. So if you have an image or code block that is wider than the viewport, horizontal scrolling will be seen. </li>
- <li>When this feature is active, we are disabling user zoom by manipulating the meta viewport tag because both the toolbars and page content can easily be zoomed to an odd size and it's very difficult to zoom back out. Even though we believe in allowing users to zoom the page, alleviating the usability concerns we have with fixed toolbars and overflow containers is more important.</li>
- <li>Scroll position can be lost when going back to a page that has been re-loaded. If DOM caching is on, this shouldn't be as much of an issue.</li>
- <li>This is still an experimental feature, so not all the kinks have been worked out yet. Use with caution and test thoroughly.</li>
- </ul>
-
-
-
- <h2>Don’t other mobile platforms already support overflow?</h2>
- <p>Yes, but there’s a catch. Both Android Honeycomb and the Blackberry PlayBook support <code>overflow:</code> properties, but we found in testing that their implementation of overflow wasn't smooth enough, so pages would stutter and hang during scrolling, leading to an unusable experience. We're working with device makers to ensure that they are included when performance improves.</p>
- <p>More importantly, targeting overflow correctly is a major issue. If we simply placed an <code>overflow: auto</code> CSS rule on the pages, other popular mobile platforms like older versions of Android and iOS would essentially just clip off the content and make it effectively inaccessible (yes, you can can do a two-finger scroll gesture in iOS but nobody knows that). The smart thing about Apple’s implementation for iOS5 is that they added an additional CSS property <code>-webkit-overflow-scrolling:touch</code> that allows us to test for this touch scrolling property and, if supported, add in the <code>overflow</code> rules for just those browsers. This is the only safe way to target overflow without resorting to complex and unmaintainable user agent detection.</p>
- <p>We will be working with device and browser makers to encourage support for <em>both</em> these CSS-based properties because we strongly believe that this a critical piece needed to build rich mobile web apps. The project will add any vendor-prefixed additions to touch scrolling property if, for example, Opera, Firefox or Microsoft added this support. Once people see how much better page transitions and fixed toolbars are on iOS5, we’re hoping this will be supported quickly by other browsers. JS-based scroller scripts may still have a place in this new world as a polyfill for browsers that don’t yet support these new CSS capabilities but we see this as a brief, interim tool in the evolution of the mobile web.</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">Pages & Dialogs</li>
- <li><a href="page-anatomy.html">Anatomy of a page</a></li>
- <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
- <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
- <li><a href="page-titles.html">Page titles</a></li>
- <li><a href="page-links.html">Linking pages</a></li>
- <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
- <li><a href="page-dialogs.html">Dialogs</a></li>
- <li><a href="page-cache.html">Prefetching & caching pages</a></li>
- <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
- <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
- <li><a href="page-scripting.html">Scripting pages</a></li>
- <li><a href="phonegap.html">PhoneGap apps</a></li>
- <li data-theme="a"><a href="touchoverflow.html">touchOverflow feature</a></li>
- <li><a href="pages-themes.html">Theming pages</a></li>
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Dialog Example</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page">
-
- <div data-role="header" data-theme="e">
- <h1>Ta-da!</h1>
- </div><!-- /header -->
-
- <div data-role="content" data-theme="e">
- <p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p>
- <p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p>
- <p>What do you think?</p>
- <a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">I like it</a>
- </div>
-</div>
-
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Fixed Toolbars</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" class="type-interior">
-
- <div data-role="header" data-position="fixed" data-theme="f">
-
- <h1>Fixed toolbars</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>Fixed toolbars</h2>
- <p>This is a demo of the "fixed" headers and footers used in the jQuery Mobile framework. The page content flows naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view the framework will dynamically re-position them into view if the browser supports this feature, otherwise they will simply stay inline.</p>
- <p>To enable this behavior on a header or footer, add the <code>data-position="fixed"</code> attribute to the toolbar container.</p>
-
-
- <h2>Tap to toggle visibility</h2>
- <p>To toggle the visibility of fixed toolbars, tap the screen. For example, if the fixed toolbars are visible, tap the screen to hide the toolbars and take full advantage of the screen real estate for content. Tapping again will bring the toolbars back into view. </p>
- <p>It's possible to turn off the the tap to toggle visibility behavior like this:</p>
-<pre><code>
-$.mobile.fixedToolbars
- .setTouchToggleEnabled(false);
-</code></pre>
-
- <h2>Updating toolbar positioning</h2>
- <p>If the height of the page changes, either through dynamic injection of markup, or by widgets that hide or collapse content, it can throw off the dynamic positioning of the toolbars. To manually tell the toolbars to re-position themselves then fade in, use <code>$.mobile.fixedToolbars.show();</code>. To have them appear immediately without the fade:</p>
-<pre><code>
-$.mobile.fixedToolbars
- .show(true);
-</code></pre>
-
- <p>There is also an <code>updatelayout</code> event that can be used to trigger the toolbars to re-position. Developers who are building dynamic applications that inject content into the current page can also manually trigger this <code><a href="../api/events.html">updatelayout</a></code> event to ensure components on the page update in response to the new content that was just added. This event is used internally in the collapsible and listview filter plugins and is powerful because it's not toolbar-specific -- any widget can be built to listen for the <code>updatelayout</code> event to update the widget in response.</p>
-
-
- <h2>Known limitations</h2>
-
- <p>jQuery Mobile uses dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers support the <code>position:fixed</code> CSS property. Although our fixed toolbar feature works fairly well, there are a number of technical limitations that can cause the toolbars to appear to scroll with the page. Most of these rendering issues are due to the fact many mobile platforms (iOS, Android, etc.) essentially take a static screenshot of the page and display this image during scrolling instead of the actual rendered HTML. This improves scrolling performance, but when scrolling happens quickly, the toolbars will be "burned" into the page screenshot before our script can hide them so they appear to scroll with the page. We have optimized this as much as we possibly can, but there are going to be situations where fixed toolbars won't work perfectly due to browser limitations, so this is important to note when considering whether to use this feature.</p>
-
- <h2>True fixed toolbars: touchOverflowEnabled</h2>
-
- <p>In order to achieve true fixed toolbars, a browser needs to either support <code>position:fixed</code> or <code>overflow:auto</code>. Fortunately, this support is coming to mobile platforms so we can achieve this with web standards. In jQuery Mobile, we have added a global feature called <code>touchOverflowEnabled</code> that leverages the <code>overflow:auto</code> CSS property on supported platforms like iOS5. When enabled, the framework wraps each page in a container with it's own internal scrolling. This allows us to position the toolbars outside the scrolling body so they truly stay fixed in place at all times. Learn more about this feature on the <a href="../api/globalconfig.html">global options</a> page or <a href="../config/touchOverflow.html">demo</a> this feature (currently iOS5 only, other browsers will fall back to dynamically re-positioned fixed toolbars).</p>
-
- <hr>
-
-
- <h2>The rest of the page is just sample content to make the page very long</h2>
-
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
-
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
-
-
- <h3>And an inset list</h3>
-
- <ul data-role="listview" data-inset="true">
- <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
- <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
- <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
- <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
- <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
- </ul>
-
- <br />
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
-
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
-
-
- <h3>Embedded form</h3>
-
- <form action="#" method="get">
-
- <div data-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="textarea">Textarea:</label>
- <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider2">Flip switch:</label>
- <select name="slider2" id="slider2" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider">Slider:</label>
- <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
- </div>
-
-
- <div data-role="fieldcontain">
- <label for="select-choice-1" class="select">Choose shipping method:</label>
- <select name="select-choice-1" id="select-choice-1">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
-
- <div class="ui-body ui-body-b">
- <fieldset class="ui-grid-a">
- <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
- <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
- </fieldset>
- </div>
- </form>
-
- <h3>A bit more text</h3>
-
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</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">Toolbars</li>
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
- <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
- <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
- <h1>Fixed Footer</h1>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Fullscreen Fixed toolbars</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" data-fullscreen="true" class="type-interior">
-
- <div data-role="header" data-position="fixed" data-theme="f">
- <h1>Fullscreen fixed header</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">
- <img src="images/photo-run.jpeg" alt="Photo Run">
-
- <p class="ui-body">This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively — a common scenario for photo, image or video viewers.</p>
-
- <p class="ui-body">To enable this toolbar feature type, you apply a <code>data-fullscreen="true"</code> attribute to the <code>div</code> container that has the attribute <code>data-role="page"</code>, and the <code>data-position="fixed"</code> attribute to both the header and footer <code>div</code> elements. </p>
-
- <p class="ui-body">Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content, so not all content will be accessible with the toolbars open, just as shown in this demo.</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">Toolbars</li>
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li data-theme="a"><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
- <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
- <h1>Fullscreen Fixed Footer</h1>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Theming Toolbars</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Bar theming </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">
- <p>Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. </p>
-
-
- <h2>Theming headers and footers</h2>
- <p>To set the header or footer bars to a different color in your theme, add the <code> data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
-
-<div class="highlight">
-<pre>
-<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span> <strong><span class="na">data-theme=</span><span class="s">"b"</span></strong><span class="nt">></span>
- <span class="nt"><h1></span>Page Title<span class="nt"></h1></span>
-<span class="nt"></div></span>
-</pre>
-</div>
-
-
- <h2>Theming buttons in toolbars</h2>
-
- <p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code> data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the <code> data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p>
-
-<div class="highlight">
-<pre>
-<span class="nt"><a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <strong><span class="na">data-theme=</span><span class="s">"b"</span></strong><span class="nt">></span>Save<span class="nt"></a></span>
-</pre>
-</div>
-
-
-
- <h2>Theme variations</h2>
- <p>This is a demo of the variation that can be achieved by tweaking the theme swatches and buttons inside the headers and footers.</p>
- <h3>Headers</h3>
-
-
- <div data-role="header" data-position="inline">
- <h1>Bar theme "a"</h1>
- <a href="index.html" data-icon="plus" data-theme="c">New</a>
- </div>
-
- <div data-role="header" data-position="inline">
- <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
- <h1>Bar theme "a"</h1>
- <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
- </div>
-
- <div data-role="header" data-position="inline" data-theme="b">
- <h1>Bar theme "b"</h1>
- <a href="index.html" data-icon="plus" data-theme="a">New</a>
- </div>
-
- <div data-role="header" data-position="inline" data-theme="b">
- <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
- <h1>Bar theme "b"</h1>
- <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="d">Save</a>
- </div>
-
- <div data-role="header" data-position="inline" data-theme="c">
- <h1>Bar theme "c"</h1>
- <a href="index.html" data-icon="plus" data-theme="a">New</a>
- </div>
-
- <div data-role="header" data-position="inline" data-theme="c">
- <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
- <h1>Bar theme "c"</h1>
- <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
- </div>
-
- <div data-role="header" data-position="inline" data-theme="d">
- <h1>Bar theme "d"</h1>
- <a href="index.html" data-icon="plus" data-theme="a">New</a>
- </div>
-
- <div data-role="header" data-position="inline" data-theme="d">
- <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
- <h1>Bar theme "d"</h1>
- <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
- </div>
-
- <h3>Footers</h3>
- <p>These are examples of a footer with link buttons inside. Note that footers do not have the same prescriptive markup contentions as headers with button slots so use <a href="../content/content-grids.html">layout grids</a> or custom styles to achieve the design you want.</p>
-
-
-
- <div data-role="footer" data-theme="a">
- <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
- <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
- <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
- <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
- </div>
-
- <div data-role="footer" data-theme="b">
- <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
- <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
- <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
- <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
- </div>
-
- <div data-role="footer" data-theme="c">
- <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
- <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
- <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
- <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
- </div>
-
- <div data-role="footer" data-theme="d">
- <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
- <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
- <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
- <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
- </div>
-
- <div data-role="footer" data-theme="e">
- <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
- <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
- <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
- <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
- </div>
-
-
- </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">Toolbars</li>
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
- <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
- <li data-theme="a"><a href="bars-themes.html">Theming toolbars</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Toolbar Basics</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Toolbar basics</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>Toolbar types</h2>
-
- <p>In jQuery Mobile, there are two standard types of toolbars: Headers and Footers. </p>
-
-<ul> <li>The <a href="docs-headers.html"><strong>Header bar </strong></a> serves as the page title, is usually the first element inside each <a href="../pages/page-anatomy.html">mobile page</a>, and typically contains a page title and up to two buttons.</li>
-
- <li>The <a href="docs-footers.html"><strong>Footer bar</strong></a> is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.</li>
-</ul>
-
- <p>It's very common to have a horizontal navigation or tab bar inside the header and/or footer; jQuery Mobile includes a <a href="docs-navbar.html"><strong>navbar widget </strong></a> that turns an unordered list of links into a horizontal button bar, which works well in these instances.</p>
-
- <p>View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to toolbars.</p>
-
-
- <h2>Toolbar positioning options</h2>
-
- <p>Header and footers can be positioned on the page in a few different ways. By default, the toolbars use the <strong>"inline" positioning</strong> mode. In this mode, the headers and footer sit in the natural document flow (the default HTML behavior), which ensures that they are visible on all devices, regardless of JavaScript and CSS positioning support.</p>
-
- <p>A <a href="bars-fixed.html"><strong>"fixed" positioning mode</strong></a> provides the convenience of static toolbars without the drawbacks of implementing faux-scrolling in JavaScript. The toolbars start in their natural positions on the page, like the "inline" mode, but when a bar scrolls out of the viewport, the framework animates the bar back into view by dynamically re-positioning the bar to the top or bottom of the viewport.</p>
- <p> At any time, tapping the screen will toggle the visibility of the fixed toolbars: tapping the page when the toolbars aren't visible brings them into view, tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate. </p>
- <p>To set this behavior on a header or footer, add the <code> data-position="fixed"</code> attribute to the toolbar container.</p>
-
- <p>A <a href="bars-fullscreen.html"><strong>"fullscreen" position mode</strong></a> works just like the fixed mode except that the toolbars aren't shown at the top and bottom of the page and only appear when the page is clicked. This is useful for immersive apps like photo or video viewers where you want the content to fill the whole screen and toolbars can be summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content so this is best used for specific situations.</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">Toolbars</li>
- <li data-theme="a"><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
- <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Footer Configuration</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Footer configuration</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>Footer bar structure</h2>
-
- <p>The <code>footer</code> bar has the same basic structure as the header except it uses the <code> data-role</code> attribute value of <code>footer</code>. </p>
-
-<div class="highlight">
-<pre>
-<span class="nt"><div</span> <strong><span class="na">data-role=</span><span class="s">"footer"</span></strong><span class="nt">></span>
- <span class="nt"><h4></span>Footer content<span class="nt"></h4></span>
-<span class="nt"></div></span>
-</pre>
-</div>
-
-
- <p>The <code>footer</code> toolbar will be be themed with the "a" swatch by default (black in the default theme) but you can easily <a href="bars-themes.html">set the theme swatch color</a>.</p>
-
- <div data-role="footer" data-position="inline">
- <h4>Footer content</h4>
- </div>
-
- <p>The page footer is very similar to the header in terms of options and configuration. The primary differences are that the footer is designed to be less structured than the header to allow for more flexibility, so the framework doesn't automatically place buttons to the left or right based on source order as it does in the header. Since footers do not have the same prescriptive markup contentions as headers, use layout <a href="../content/content-grids.html">grids</a> or custom styles to achieve the design you want in a footer.</p>
-
-
-
- <h2>Adding buttons</h2>
-
- <p>Any link or valid <a href="../buttons/buttons-types.html">button markup</a> added to the footer will automatically be turned into a button. To save space, buttons in toolbars are automatically set to <a href="../buttons/buttons-inline.html">inline styling</a> so the button is only as wide as the text and icons it contains. </p>
-
- <p>By default, toolbars don't have any padding to accommodate nav bars and other widgets. To include padding on the bar, add a <code>class="ui-bar"</code> to the footer.</p>
-
-
-<pre><code>
-<div data-role="footer" class="ui-bar">
- <a href="index.html" data-role="button" data-icon="delete">Remove</a>
- <a href="index.html" data-role="button" data-icon="plus">Add</a>
- <a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
- <a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
-</div>
-</code></pre>
-
- <p>This creates this toolbar with buttons sitting in a row</p>
-
-
- <div data-role="footer" class="ui-bar" data-position="inline">
- <a href="index.html" data-icon="delete">Remove</a>
- <a href="index.html" data-icon="plus">Add</a>
- <a href="index.html" data-icon="arrow-u">Up</a>
- <a href="index.html" data-icon="arrow-d">Down</a>
- </div>
-
- <p>To group buttons together into a button set, wrap the links in a wrapper with <code> data-role="controlgroup"</code> and <code>data-type="horizontal"</code> attributes.</p>
-
-<code><div data-role="controlgroup" data-type="horizontal"></code>
-
- <p>This creates a grouped set of buttons:</p>
-
- <div data-role="footer" class="ui-bar" data-position="inline">
- <div data-role="controlgroup" data-type="horizontal">
- <a href="index.html" data-icon="delete">Remove</a>
- <a href="index.html" data-icon="plus">Add</a>
- <a href="index.html" data-icon="arrow-u">Up</a>
- <a href="index.html" data-icon="arrow-d">Down</a>
- </div>
- </div>
-
-
-
- <h2>Adding form elements</h2>
-
- <p>Form elements and other content can also be added to toolbars. Here is an example of a select menu inside a footer bar:</p>
-
-
- <div data-role="footer" class="ui-bar" data-position="inline">
- <label for="select-choice-1">Shipping:</label>
- <select name="select-choice-1" id="select-choice-1" data-theme="a">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
-
-
-
-
-
- <h2>Persistent footers</h2>
- <p>In situations where the footer is a global navigation element, you may want it to appear fixed in place between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile.</p>
-
- <p>To make a footer stay in place between transitions, add the <code>data-id</code> attribute to the footer of all relevant pages and use the same <code>id</code> value for each. For example, by adding <code>data-id="myfooter"</code> to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. PLEASE NOTE: This effect will only work correctly if the header and footer toolbars are set to <code>data-position="fixed"</code> so they are in view during the transition.</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">Toolbars</li>
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li data-theme="a"><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
- <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Header Bars</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Header bars</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>Header structure</h2>
- <p>The <code>header</code> is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the the left and/or right of the title for navigation or actions.</p>
-
- <p>The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.</p>
-
-<div class="highlight">
-<pre>
-<span class="nt"><div</span> <strong><span class="na">data-role=</span><span class="s">"header"</span></strong><span class="nt">></span>
- <span class="nt"><h1></span>Page Title<span class="nt"></h1></span>
-<span class="nt"></div></span>
-</pre>
-</div>
-
- <h2>Default header features</h2>
- <p>The <code>header</code> toolbar is themed with the "a" swatch by default (black in the default theme) but you can easily <a href="bars-themes.html">set the theme swatch color</a>.</p>
-
-
-
- <div data-role="header" data-position="inline">
- <h1>Page title</h1>
- </div>
-
-
- <h2>Adding buttons</h2>
-
-
-
-
-
- <p>In the standard header configuration, there are slots for buttons on either side of the text heading. Each button is typically an <code>anchor</code> element, but any valid <a href="../buttons/buttons-types.html">button markup</a> will work. To save space, buttons in toolbars are set to <a href="../buttons/buttons-inline.html">inline styling</a> so the button is only as wide as the text and icons it contains. </p>
-
-
-
-
- <h3>Default button positioning</h3>
-
- <p>The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order. </p>
-
-
-<pre><code>
-<div data-role="header" data-position="inline">
- <a href="index.html" data-icon="delete">Cancel</a>
- <h1>Edit Contact</h1>
- <a href="index.html" data-icon="check">Save</a>
-</div>
-</code></pre>
-
-
- <div data-role="header" data-position="inline">
- <a href="index.html" data-icon="delete">Cancel</a>
- <h1>Edit Contact</h1>
- <a href="index.html" data-icon="check">Save</a>
- </div>
- <p>Buttons automatically adopt the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out — here, we add the <code> data-theme</code> attribute and set the color swatch for the button to "b" to make the "Save" button pop.</p>
-
- <pre><code>
-<div data-role="header" data-position="inline">
- <a href="index.html" data-icon="delete">Cancel</a>
- <h1>Edit Contact</h1>
- <a href="index.html" data-icon="check" data-theme="b">Save</a>
-</div>
-</code></pre>
-
-
- <div data-role="header" data-position="inline">
- <a href="index.html" data-icon="delete">Cancel</a>
- <h1>Edit Contact</h1>
- <a href="index.html" data-icon="check" data-theme="b">Save</a>
- </div>
-
- <h3>Controlling button position with classes</h3>
-
- <p>The button position can also be controlled by adding classes to the button anchors, rather than relying on source order. This is especially useful if you only want a button in the right slot. To specify the button position, add the class of <code>ui-btn-left</code> or <code>ui-btn-right</code> to the anchor.</p>
-
-
-
-
-<div class="highlight">
-<pre><code>
-<div data-role="header" data-position="inline"
- <h1>Page Title</h1>
- <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
-</div>
-</code></pre>
-</div>
-
- <div data-role="header" data-position="inline" >
- <h1>Page Title</h1>
- <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
- </div>
-
-
- <h2>Adding Back buttons</h2>
-
- <p>jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app web view. The framework automatically generates a "back" button on a header when the page plugin's <code>addBackBtn</code> option is true. This can also be set via markup if the page div has a <code>data-add-back-btn="true"</code> attribute. </p>
-
-
- <p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers</strong>. Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute instead.</p>
-
- <h2>Customizing the back button text</h2>
-
- <p>If you'd like to configure the back button text, you can either use the <code>data-back-btn-text="previous"</code> attribute on your page element, or set it programmatically via the page plugin's options: <br /><code>$.mobile.page.prototype.options.backBtnText = "previous";</code></p>
-
- <h3>Default back button style</h3>
- <p>If you'd like to configure the back button role-theme, you can use: <br /><code>$.mobile.page.prototype.options.backBtnTheme = "a";</code><br />
- If you're doing this programmatically, set this option inside the mobileinit event handler.</p>
-
- <h2>Custom header configurations</h2>
- <p>If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container <code>div</code> inside the header container and the plugin won't apply the automatic button logic so you can write custom styles for laying out the content in your header.</p>
-
- <p>It's also possible to create custom bars without using the header data-role at all. For example, start with any container and add the <code>ui-bar</code> class to apply standard bar padding and add the <code>ui-bar-b</code> class to assign the bar swatch styles from your theme (the "b" can be any swatch letter).</p>
-
- <pre><code>
-<div <strong>class="ui-bar ui-bar-b"</strong>>
- <h3>I'm just a div with bar classes and a <a href="#" data-role="button">Button</a></h3>
-</div>
- </code></pre>
-
- <p>This will produce this bar:</p>
- <div class="ui-bar ui-bar-b">
- <h3>I'm just a div with bar classes and a <a href="#" data-role="button">Button</a></h3>
- </div>
-
- <p>By writing some simple styles, it's easy to build little message bars like this:</p>
- <!-- Yes, the inline styles aren't recommended in a real system but they are used to simply illustrate how to tweak CSS -->
- <div class="ui-bar ui-bar-e">
- <h3 style="float:left; margin-top:8px;">This is an alert message with dismiss button. </h3>
- <div style="float:right; margin-top:4px;"><a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Button</a></div>
- <p style="clear:both; font-size:85%; margin-bottom:8px;">And here's some additional text in a paragraph.</p>
- </div>
- </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">Toolbars</li>
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li data-theme="a"><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
- <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Navbar</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f">
- <h1>Navbar</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>Simple navbar</h2>
-
- <p>jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar, typically within a header or footer. There is also a <a href="footer-persist-a.html">persistent navbar</a> variation that works more like a tab bar that stays fixed as you navigate across pages.</p>
- <p>A navbar is coded as an unordered list of links wrapped in a container element that has the <code> data-role="navbar"</code> attribute. To set one of links to the active (selected) state, add <code>class="ui-btn-active"</code> to the anchor. In this example, we have a two-button navbar in the footer with the "One" item set to active:</p>
-
-<pre><code>
-<strong><div data-role="navbar"></strong>
- <ul>
- <li><a href="a.html" class="ui-btn-active">One</a></li>
- <li><a href="b.html">Two</a></li>
- </ul>
-<strong></div><!-- /navbar --></strong>
-</code></pre>
-
- <p>The navbar items are set to divide the space evenly so in this case, each button is 1/2 the width of the browser window:</p>
-
-
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- </ul>
- </div><!-- /navbar -->
-
-
- <p>Adding a third item will automatically make each button 1/3 the width of the browser window:</p>
-
-
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div><!-- /navbar -->
-
-
- <p>Adding a fourth more item will automatically make each button 1/4 the width of the browser window:</p>
-
-
- <div data-role="navbar" data-grid="c">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
- </ul>
- </div><!-- /navbar -->
-
-
- <p>The navbar maxes out with 5 items, each 1/5 the width of the browser window:</p>
-
-
- <div data-role="navbar" data-grid="d">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
- <li><a href="#">Five</a></li>
- </ul>
- </div><!-- /navbar -->
-
-
- <p>If more than 5 items are added, the navbar will simply wrap to multiple lines:</p>
-
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
- <li><a href="#">Five</a></li>
- <li><a href="#">Six</a></li>
- <li><a href="#">Seven</a></li>
- <li><a href="#">Eight</a></li>
- <li><a href="#">Nine</a></li>
- <li><a href="#">Ten</a></li>
- </ul>
- </div><!-- /navbar -->
-
- <p>As a fallback, navbars with 1 item will simply render as 100%.</p>
-
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- </ul>
- </div><!-- /navbar -->
-
- <h2>Navbars in headers</h2>
-
- <p>If you want to add a navbar to the top of the page, you can still have a page title and buttons. Just add the navbar container inside the header block, right after the title and buttons in the source order.</p>
-
- <div data-role="header">
- <h1>I'm a header</h1>
- <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
-
- <div data-role="navbar">
- <ul>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /header -->
-
- <h2>Navbars in footers</h2>
-
- <p>If you want to add a navbar to the bottom of the page so it acts more like a tab bar, simply wrap the navbar in a container with a <code>data-role="footer"</code></p>
-<pre><code>
-<div data-role="footer">
- <div data-role="navbar">
- <ul>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div><!-- /navbar -->
-</div><!-- /footer -->
-</code></pre>
- <div data-role="footer">
- <div data-role="navbar">
- <ul>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
-
- <h2>Icons in navbars</h2>
-
- <p>Icons can be added to navbar items by adding the <code> data-icon</code> attribute specifying a <a href="../buttons/buttons-icons.html">standard mobile icon</a> to each anchor. By default, icons are added above the text (<code>data-iconpos="top"</code>). The following examples add icons to a navbar in a footer.</p>
-
- <div data-role="footer">
- <div data-role="navbar">
- <ul>
- <li><a href="#" data-icon="grid">Summary</a></li>
- <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
- <li><a href="#" data-icon="gear">Setup</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
-
- <p>The icon position is set <em>on the navbar container</em> instead of for individual links within for visual consistency. For example, to place the icons below the labels, add the <code> data-iconpos="bottom"</code> attribute to the navbar container.</p>
-<pre><code>
-<div data-role="navbar" <strong>data-iconpos="bottom"</strong>>
-</code></pre>
- <p>This will result in a bottom icon alignment:</p>
- <div data-role="footer">
- <div data-role="navbar" data-iconpos="bottom">
- <ul>
- <li><a href="#" data-icon="grid">Summary</a></li>
- <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
- <li><a href="#" data-icon="gear">Setup</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
-
- <p>The icon position can be set to <code>data-iconpos="left"</code>:</p>
-
- <div data-role="footer">
- <div data-role="navbar" data-iconpos="left">
- <ul>
- <li><a href="#" data-icon="grid">Summary</a></li>
- <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
- <li><a href="#" data-icon="gear">Setup</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
-
- <p>Or the icon position can be set to <code>data-iconpos="right"</code>:</p>
-
- <div data-role="footer">
- <div data-role="navbar" data-iconpos="right">
- <ul>
- <li><a href="#" data-icon="grid">Summary</a></li>
- <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
- <li><a href="#" data-icon="gear">Setup</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
-
- <h2>Using 3rd party icon sets</h2>
-
- <p>You can add any of the popular icon libraries like <a href="http://glyphish.com/">Glyphish</a> to achieve the iOS style tab that has large icons stacked on top of text labels. All that is required is a bit of custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons and custom styles (view page source for styles) in our navbar:</p>
-
-
- <style>
- .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
- .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
- #chat .ui-icon { background: url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
- #email .ui-icon { background: url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px; }
- #login .ui-icon { background: url(glyphish-icons/30-key.png) 50% 50% no-repeat; background-size: 12px 26px; }
- #beer .ui-icon { background: url(glyphish-icons/88-beermug.png) 50% 50% no-repeat; background-size: 22px 27px; }
- #coffee .ui-icon { background: url(glyphish-icons/100-coffee.png) 50% 50% no-repeat; background-size: 20px 24px; }
- #skull .ui-icon { background: url(glyphish-icons/21-skull.png) 50% 50% no-repeat; background-size: 22px 24px; }
- </style>
-
- <div data-role="footer" class="nav-glyphish-example">
- <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
- <ul>
- <li><a href="#" id="chat" data-icon="custom">Chat</a></li>
- <li><a href="#" id="email" data-icon="custom">Email</a></li>
- <li><a href="#" id="skull" data-icon="custom">Danger</a></li>
- <li><a href="#" id="beer" data-icon="custom">Beer</a></li>
- <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
- </ul>
- </div>
- </div>
-
- <p>Icons by Joseph Wain / <a href="http://glyphish.com/">glyphish.com</a>. Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons Attribution 3.0 United States License</a>.</p>
-
-
- <h2>Theming navbars</h2>
-
- <p>Navbars inherit the theme swatch from their parent container, just like buttons. If a navbar is placed in the header or footer toolbar, it will inherit the default toolbar swatch (A) for bars unless you set this in the markup. </p>
- <p>Here are a few examples of navbars in various container swatches that automatically inheriting their parent's swatch letter. Note that in these examples, instead of using a <code>data-theme</code> attribute, we're manually adding the swatch classes to apply the body swatch (<code>ui-body-a</code>) and the class to add the standard body padding (ui-body), but the inheritance works the same way:</p>
-
- <div class="ui-body-a ui-body">
- <h3>Swatch A</h3>
- <div data-role="navbar">
- <ul>
- <li><a href="#" data-icon="grid">A</a></li>
- <li><a href="#" data-icon="star">B</a></li>
- <li><a href="#" data-icon="gear">C</a></li>
- <li><a href="#" data-icon="arrow-l">D</a></li>
- <li><a href="#" data-icon="arrow-r">E</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /container -->
-
- <div class="ui-body-d ui-body">
- <h3>Swatch B</h3>
- <div data-role="navbar">
- <ul>
- <li><a href="#" data-icon="grid">A</a></li>
- <li><a href="#" data-icon="star">B</a></li>
- <li><a href="#" data-icon="gear">C</a></li>
- <li><a href="#" data-icon="arrow-l">D</a></li>
- <li><a href="#" data-icon="arrow-r">E</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /container -->
-
-<p>To set to the theme color for a navbar item, add the <code>data-theme</code> attribute to the individual links and specify a theme swatch. Note that applying a theme swatch to the navbar container is <em>not</em> supported.</p>
- <div data-role="footer">
- <div data-role="navbar">
- <ul>
- <li><a href="#" data-icon="grid"data-theme="a">A</a></li>
- <li><a href="#" data-icon="star" data-theme="b">B</a></li>
- <li><a href="#" data-icon="gear" data-theme="c">C</a></li>
- <li><a href="#" data-icon="arrow-l" data-theme="d">D</a></li>
- <li><a href="#" data-icon="arrow-r" data-theme="e">E</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
-
-
- </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">Toolbars</li>
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li data-theme="a"><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
- <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Persistent footer A</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f" data-position="fixed">
- <h1>Friends</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">
- <p>This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the footer remains fixed: The footer sticks persistently even when transitioning to a new HTML page, because the footer on all four HTML pages has the same <code>data-id</code> attribute. <strong>Note:</strong> If you'd like an active button in your navbar to remain active when you return to the page displaying this active button, add a class of <code>ui-state-persist</code> in addition to <code>ui-btn-active</code> to the corresponding anchor.</p>
-
-
-
- <ul data-role="listview" data-dividertheme="d" style="margin-top: 0;">
- <li data-role="list-divider">A</li>
- <li><a href="index.html">Adam Kinkaid</a></li>
- <li><a href="index.html">Alex Wickerham</a></li>
- <li><a href="index.html">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="index.html">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="index.html">Caleb Booth</a></li>
- <li><a href="index.html">Christopher Adams</a></li>
- <li><a href="index.html">Culver James</a></li>
- <li data-role="list-divider">D</li>
- <li><a href="index.html">David Walsh</a></li>
- <li><a href="index.html">Drake Alfred</a></li>
- <li data-role="list-divider">E</li>
- <li><a href="index.html">Elizabeth Bacon</a></li>
- <li><a href="index.html">Emery Parker</a></li>
- <li><a href="index.html">Enid Voldon</a></li>
- <li data-role="list-divider">F</li>
- <li><a href="index.html">Francis Wall</a></li>
- <li data-role="list-divider">G</li>
- <li><a href="index.html">Graham Smith</a></li>
- <li><a href="index.html">Greta Peete</a></li>
- <li data-role="list-divider">H</li>
- <li><a href="index.html">Harvey Walls</a></li>
- <li data-role="list-divider">M</li>
- <li><a href="index.html">Mike Farnsworth</a></li>
- <li><a href="index.html">Murray Vanderbuilt</a></li>
- <li data-role="list-divider">N</li>
- <li><a href="index.html">Nathan Williams</a></li>
- <li data-role="list-divider">P</li>
- <li><a href="index.html">Paul Baker</a></li>
- <li><a href="index.html">Pete Mason</a></li>
- <li data-role="list-divider">R</li>
- <li><a href="index.html">Rod Tarker</a></li>
- <li data-role="list-divider">S</li>
- <li><a href="index.html">Sawyer Wakefield</a></li>
- </ul>
-
-
-
-
-
-
-
-
- </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">Toolbars</li>
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
- <li data-theme="a"><a href="footer-persist-a.html">Persistent footer navbar</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" data-id="foo1" data-position="fixed">
- <div data-role="navbar">
- <ul>
- <li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li>
- <li><a href="footer-persist-b.html">Albums</a></li>
- <li><a href="footer-persist-c.html">Emails</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
-
- </div><!-- /page -->
-
- </body>
- </html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Persistent footer B</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f" data-position="fixed">
- <h1>Albums</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">
- <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
- <li><a href="index.html">
- <img src="../lists/images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
-
- <img src="../lists/images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p>
-
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="../lists/images/album-p.jpg" />
- <h3>Wolfgang Amadeus Phoenix</h3>
- <p>Phoenix</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="../lists/images/album-ok.jpg" />
- <h3>Of The Blue Colour Of The Sky</h3>
- <p>Ok Go</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="../lists/images/album-ws.jpg" />
- <h3>Elephant</h3>
- <p>The White Stripes</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="../lists/images/album-rh.jpg" />
- <h3>Kid A</h3>
- <p>Radiohead</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="../lists/images/album-xx.jpg" />
- <h3>XX</h3>
- <p>XX</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="../lists/images/album-mg.jpg" />
- <h3>Congratulations</h3>
- <p>MGMT</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="../lists/images/album-ag.jpg" />
- <h3>Ashes Grammar</h3>
- <p>A Sunny Day in Glasgow</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
-
- <li><a href="index.html">
- <img src="../lists/images/album-k.jpg" />
- <h3>Hot Fuss</h3>
- <p>Killers</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="../lists/images/album-af.jpg" />
- <h3>The Suburbs</h3>
- <p>Arcade Fire</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- </ul>
-
-
-
- </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">Toolbars</li>
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
- <li data-theme="a"><a href="footer-persist-a.html">Persistent footer navbar</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" data-id="foo1" data-position="fixed">
- <div data-role="navbar">
- <ul>
- <li><a href="footer-persist-a.html">Friends</a></li>
- <li><a href="footer-persist-b.html" class="ui-btn-active ui-state-persist">Albums</a></li>
- <li><a href="footer-persist-c.html">Emails</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
-
- </div><!-- /page -->
-
- </body>
- </html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Persistent footer C</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-theme="f" data-position="fixed">
- <h1>Inbox</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">
- <ul data-role="listview">
- <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
- <li><a href="index.html">
-
- <h3>Stephen Weber</h3>
- <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
- <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
- <p class="ui-li-aside"><strong>6:24</strong>PM</p>
-
- </a></li>
- <li><a href="index.html">
-
- <h3>jQuery Team</h3>
- <p><strong>Boston Conference Planning</strong></p>
- <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
- <p class="ui-li-aside"><strong>9:18</strong>AM</p>
-
- </a></li>
- <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
- <li><a href="index.html">
- <h3>Avery Walker</h3>
- <p><strong>Re: Dinner Tonight</strong></p>
- <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
- <p class="ui-li-aside"><strong>4:48</strong>PM</p>
- </a></li>
- <li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
- <li><a href="index.html">
- <h3>Amazon.com</h3>
- <p><strong>4-for-3 Books for Kids</strong></p>
- <p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
- <p class="ui-li-aside"><strong>12:47</strong>PM</p>
- </a></li>
- <li><a href="index.html">
- <h3>Mike Taylor</h3>
- <p><strong>Re: This weekend in Maine</strong></p>
- <p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
- <p class="ui-li-aside"><strong>6:24</strong>AM</p>
- </a></li>
- <li><a href="index.html">
- <h3>Redfin</h3>
- <p><strong>Redfin listing updates for today</strong></p>
- <p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
- <p class="ui-li-aside"><strong>5:52</strong>AM</p>
- </a></li>
- <li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
- <li><a href="index.html">
- <h3>Angela Smith</h3>
- <p><strong>Link Request</strong></p>
- <p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
- <p class="ui-li-aside"><strong>6:24</strong>AM</p>
- </a></li>
- <li><a href="index.html">
- <h3>Mike Taylor</h3>
- <p><strong>This weekend in Maine</strong></p>
- <p>Sounds good, let me check into our plans.</p>
- <p class="ui-li-aside"><strong>6:24</strong>AM</p>
- </a></li>
- </ul>
-
- </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">Toolbars</li>
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
- <li data-theme="a"><a href="footer-persist-a.html">Persistent footer navbar</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" data-id="foo1" data-position="fixed">
- <div data-role="navbar">
- <ul>
- <li><a href="footer-persist-a.html">Friends</a></li>
- <li><a href="footer-persist-b.html">Albums</a></li>
- <li><a href="footer-persist-c.html" class="ui-btn-active ui-state-persist">Emails</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
-
- </div><!-- /page -->
-
- </body>
- </html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Toolbars</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
- <script src="../../js/jquery.js"></script>
- <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../_assets/js/jqm-docs.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
- <div data-role="page" class="type-index">
-
- <div data-role="header" data-theme="f">
- <h1>Toolbars</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">
-
- <p>Toolbars are used for headers, footers and utility bars throughout a mobile sites and applications, so jQuery Mobile provides a standard set of bars and navigation tools to cover most standard scenarios.</p>
-
-
- <ul data-role="listview" data-inset="true">
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
- <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
- <!--<li><a href="api-bars.html">API documentation</a></li>-->
- </ul>
-
- </div><!-- /content -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-AddType text/cache-manifest .manifest
\ No newline at end of file
+++ /dev/null
-$(function() {
- var symbols = {
- "USD": "$",
- "EUR": "€",
- "GBP": "£",
- "Miles": "m",
- "Kilometer": "km",
- "inch": "\"",
- "centimeter": "cm"
- };
-
- function list() {
- var ul = $( "#conversions" ).empty(),
- ulEdit = $( "#edit-conversions" ).empty();
- $.each( all, function( index, conversion ) {
- // if last update was less then a minute ago, don't update
- if ( conversion.type === "currency" && !conversion.rate || conversion.updated && conversion.updated + 60000 < +new Date) {
- var self = conversion;
- var url = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D" + conversion.from + conversion.to + "%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json&diagnostics=true&callback=?";
- $.getJSON( url, function( result ) {
- self.rate = parseFloat( result.query.results.row.rate );
- $( "#term" ).keyup();
- self.updated = +new Date;
- conversions.store();
- });
- }
- $( "#conversion-field" ).tmpl( conversion, {
- symbols: symbols
- }).appendTo( ul );
- $( "#conversion-edit-field" ).tmpl( conversion, {
- symbols: symbols
- }).appendTo( ulEdit );
- });
- ul.add(ulEdit).listview("refresh");
- $( "#term" ).keyup();
- }
- var all = conversions.all();
- $( "#term" ).keyup(function() {
- var value = this.value;
- $.each( all, function( index, conversion ) {
- $( "#" + conversion.from + conversion.to ).text( conversion.rate
- ? Math.ceil( value * conversion.rate * 100 ) / 100
- : "Rate not available, yet."
- );
- });
- }).focus();
- list();
- $( "form" ).submit(function() {
- $( "#term" ).blur();
- return false;
- });
- $( "#add" ).click(function() {
- all.push({
- type: "currency",
- from: $( "#currency-options-from" ).val(),
- to: $( "#currency-options-to" ).val()
- });
- conversions.store();
- list();
- });
- $( "#clear" ).click(function() {
- conversions.clear();
- list();
- return false;
- });
- $( "#restore" ).click(function() {
- conversions.restore();
- list();
- return false;
- });
-
- $( "#edit-conversions" ).click(function( event ) {
- var target = $( event.target ).closest( ".deletebutton" );
- if ( target.length ) {
- conversions.remove( target.prev( "label" ).attr( "for" ) );
- list();
- }
- return false;
- });
-});
+++ /dev/null
-CACHE MANIFEST
-index.html
-../../css/themes/default
-../../js/
-jquery.tmpl.js
\ No newline at end of file
+++ /dev/null
-ul li { clear:both; }
-li p.currency-from { padding-top:23px; font-size: 180%; font-weight:bold; }
-li p.currency-from a:link, li p.units a:visited { padding-top:26px; font-size: 90%; }
-span.unit { opacity:0.5; }
-
-li p.subtext { margin-top:2px; }
-li p.ui-li-aside { font-size:190%; width:60%; }
-
-
-
-form#curr-form { border-width: 0; overflow: hidden; margin: 2px -15px 2px -15px }
-form#curr-form .ui-input-search { margin: 5px; width: auto; display: block; }
-
-.add-row { font-weight:bold; font-size:110%; }
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Converter Demo Application</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="converter.css" />
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
-
-</head>
-<body>
-
-<div data-role="page" id="start" data-theme="a">
-
- <script src="jquery.tmpl.js"></script>
- <script src="storage.js"></script>
- <script src="application.js"></script>
- <style>
- .field { padding: 15px; }
- </style>
- <script id="conversion-field" type="text/x-jquery-tmpl">
- <li>
- <p class="currency-from">${$item.symbols[from]} <span class="unit">${from}</span></p>
- <p class="currency-to ui-li-aside">${$item.symbols[to]} <span id="${from}${to}" class="rate">NaN</span> <span class="unit">${to}</span></p>
- </li>
- </script>
- <script id="conversion-edit-field" type="text/x-jquery-tmpl">
- <li>
- <label for="${from}${to}" class="ui-input-text conversion-${type}" title="From ${from} to ${to}">${$item.symbols[from]} to ${$item.symbols[to]}</label>
- <a href="#" class="deletebutton ui-aux">Delete</a>
- </li>
- </script>
-
- <div data-role="header" data-theme="e">
- <a href="#customize" data-rel="dialog" data-transition="pop" data-icon="gear" class="ui-btn-right">Edit</a>
- <h1>Currency converter</h1>
- </div>
- <div class="ui-bar ui-bar-a">
- <form method="get" action="" data-role="autoform" id="curr-form">
- <label for="term" data-role="nojs">Search:</label>
- <input type="search" name="term" id="term" placeholder="Type a value..." value="25" data-theme="a" />
- </form>
- </div>
- <div data-role="content">
- <ul id="conversions" data-role="listview" data-theme="a">
- </ul>
- </div>
-</div>
-
-<div data-role="page" id="customize" class="ui-body-b">
-
- <div data-role="header" data-theme="b">
- <h1>Edit conversions</h1>
- <a href="#start" data-transition="fade" data-theme="b" data-icon="check" class="ui-btn-right">Done</a>
- </div>
-
- <div data-role="content">
- <ul id="edit-conversions" data-role="listview" data-theme="c" data-inset="true">
- </ul>
- </div>
- <div class="ui-body">
- <a href="#add-currency-dialog" data-role="button">Add new...</a>
- <a id="restore" href="#" data-role="button" data-theme="c">Restore defaults</a>
- </div>
-</div>
-
-<div data-role="page" id="add-currency-dialog" class="ui-body-b">
- <div data-role="header" data-theme="a">
- <h1>Add new</h1>
- <a href="#customize" class="ui-back" data-icon="arrow-l">Cancel</a>
- </div>
-
- <div data-role="content">
- <h2>Select currencies to convert:</h2>
- <div data-role="fieldcontain">
- <label for="currency-options-from">From</label>
- <select name="currency-options" id="currency-options-from" data-theme="c">
- <option value="EUR">EUR to Euro</option>
- <option value="USD">USD to US Dollar</option>
- <option value="GBP">GBP to Great Britain Pound</option>
- </select>
- </div>
- <div data-role="fieldcontain">
- <label for="currency-options-to">To</label>
- <select name="currency-options" id="currency-options-to" data-theme="c">
- <option value="EUR">EUR to Euro</option>
- <option value="USD">USD to US Dollar</option>
- <option value="GBP">GBP to Great Britain Pound</option>
- </select>
- </div>
- <div data-role="fieldcontain">
- <a id="cancel" href="#customize" data-role="button" data-theme="c" data-inline="true">Cancel</a>
- <a id="add" href="#customize" data-role="button" data-theme="b" data-inline="true">Add conversion</a>
- </div>
- </div>
-</div>
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-/*
- * Copy of http://github.com/nje/jquery-tmpl/raw/master/jquery.tmpl.js at f827fb68417bc14ab9f6ae889421d5fea4cb2859
- * jQuery Templating Plugin
- * Copyright 2010, John Resig
- * Dual licensed under the MIT or GPL Version 2 licenses.
- */
-(function( jQuery, undefined ){
- var oldManip = jQuery.fn.domManip, tmplItmAtt = "_tmplitem", htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
- newTmplItems = {}, wrappedItems = {}, appendToTmplItems, topTmplItem = { key: 0, data: {} }, itemKey = 0, cloneIndex = 0, stack = [];
-
- function newTmplItem( options, parentItem, fn, data ) {
- // Returns a template item data structure for a new rendered instance of a template (a 'template item').
- // The content field is a hierarchical array of strings and nested items (to be
- // removed and replaced by nodes field of dom elements, once inserted in DOM).
- var newItem = {
- data: data || (parentItem ? parentItem.data : {}),
- _wrap: parentItem ? parentItem._wrap : null,
- tmpl: null,
- parent: parentItem || null,
- nodes: [],
- calls: tiCalls,
- nest: tiNest,
- wrap: tiWrap,
- html: tiHtml,
- update: tiUpdate
- };
- if ( options ) {
- jQuery.extend( newItem, options, { nodes: [], parent: parentItem } );
- }
- if ( fn ) {
- // Build the hierarchical content to be used during insertion into DOM
- newItem.tmpl = fn;
- newItem._ctnt = newItem._ctnt || newItem.tmpl( jQuery, newItem );
- newItem.key = ++itemKey;
- // Keep track of new template item, until it is stored as jQuery Data on DOM element
- (stack.length ? wrappedItems : newTmplItems)[itemKey] = newItem;
- }
- return newItem;
- }
-
- // Override appendTo etc., in order to provide support for targeting multiple elements. (This code would disappear if integrated in jquery core).
- jQuery.each({
- appendTo: "append",
- prependTo: "prepend",
- insertBefore: "before",
- insertAfter: "after",
- replaceAll: "replaceWith"
- }, function( name, original ) {
- jQuery.fn[ name ] = function( selector ) {
- var ret = [], insert = jQuery( selector ), elems, i, l, tmplItems,
- parent = this.length === 1 && this[0].parentNode;
-
- appendToTmplItems = newTmplItems || {};
- if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
- insert[ original ]( this[0] );
- ret = this;
- } else {
- for ( i = 0, l = insert.length; i < l; i++ ) {
- cloneIndex = i;
- elems = (i > 0 ? this.clone(true) : this).get();
- jQuery.fn[ original ].apply( jQuery(insert[i]), elems );
- ret = ret.concat( elems );
- }
- cloneIndex = 0;
- ret = this.pushStack( ret, name, insert.selector );
- }
- tmplItems = appendToTmplItems;
- appendToTmplItems = null;
- jQuery.tmpl.complete( tmplItems );
- return ret;
- };
- });
-
- jQuery.fn.extend({
- // Use first wrapped element as template markup.
- // Return wrapped set of template items, obtained by rendering template against data.
- tmpl: function( data, options, parentItem ) {
- return jQuery.tmpl( this[0], data, options, parentItem );
- },
-
- // Find which rendered template item the first wrapped DOM element belongs to
- tmplItem: function() {
- return jQuery.tmplItem( this[0] );
- },
-
- // Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
- template: function( name ) {
- return jQuery.template( name, this[0] );
- },
-
- domManip: function( args, table, callback, options ) {
- // This appears to be a bug in the appendTo, etc. implementation
- // it should be doing .call() instead of .apply(). See #6227
- if ( args[0] && args[0].nodeType ) {
- var dmArgs = jQuery.makeArray( arguments ), argsLength = args.length, i = 0, tmplItem;
- while ( i < argsLength && !(tmplItem = jQuery.data( args[i++], "tmplItem" ))) {}
- if ( argsLength > 1 ) {
- dmArgs[0] = [jQuery.makeArray( args )];
- }
- if ( tmplItem && cloneIndex ) {
- dmArgs[2] = function( fragClone ) {
- // Handler called by oldManip when rendered template has been inserted into DOM.
- jQuery.tmpl.afterManip( this, fragClone, callback );
- };
- }
- oldManip.apply( this, dmArgs );
- } else {
- oldManip.apply( this, arguments );
- }
- cloneIndex = 0;
- if ( !appendToTmplItems ) {
- jQuery.tmpl.complete( newTmplItems );
- }
- return this;
- }
- });
-
- jQuery.extend({
- // Return wrapped set of template items, obtained by rendering template against data.
- tmpl: function( tmpl, data, options, parentItem ) {
- var ret, topLevel = !parentItem;
- if ( topLevel ) {
- // This is a top-level tmpl call (not from a nested template using {{tmpl}})
- parentItem = topTmplItem;
- tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );
- wrappedItems = {}; // Any wrapped items will be rebuilt, since this is top level
- } else if ( !tmpl ) {
- // The template item is already associated with DOM - this is a refresh.
- // Re-evaluate rendered template for the parentItem
- tmpl = parentItem.tmpl;
- newTmplItems[parentItem.key] = parentItem;
- parentItem.nodes = [];
- if ( parentItem.wrapped ) {
- updateWrapped( parentItem, parentItem.wrapped );
- }
- // Rebuild, without creating a new template item
- return jQuery( build( parentItem, null, parentItem.tmpl( jQuery, parentItem ) ));
- }
- if ( !tmpl ) {
- return []; // Could throw...
- }
- if ( typeof data === "function" ) {
- data = data.call( parentItem || {} );
- }
- if ( options && options.wrapped ) {
- updateWrapped( options, options.wrapped );
- }
- ret = jQuery.isArray( data ) ?
- jQuery.map( data, function( dataItem ) {
- return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null;
- }) :
- [ newTmplItem( options, parentItem, tmpl, data ) ];
-
- return topLevel ? jQuery( build( parentItem, null, ret ) ) : ret;
- },
-
- // Return rendered template item for an element.
- tmplItem: function( elem ) {
- var tmplItem;
- if ( elem instanceof jQuery ) {
- elem = elem[0];
- }
- while ( elem && elem.nodeType === 1 && !(tmplItem = jQuery.data( elem, "tmplItem" )) && (elem = elem.parentNode) ) {}
- return tmplItem || topTmplItem;
- },
-
- // Set:
- // Use $.template( name, tmpl ) to cache a named template,
- // where tmpl is a template string, a script element or a jQuery instance wrapping a script element, etc.
- // Use $( "selector" ).template( name ) to provide access by name to a script block template declaration.
-
- // Get:
- // Use $.template( name ) to access a cached template.
- // Also $( selectorToScriptBlock ).template(), or $.template( null, templateString )
- // will return the compiled template, without adding a name reference.
- // If templateString includes at least one HTML tag, $.template( templateString ) is equivalent
- // to $.template( null, templateString )
- template: function( name, tmpl ) {
- if (tmpl) {
- // Compile template and associate with name
- if ( typeof tmpl === "string" ) {
- // This is an HTML string being passed directly in.
- tmpl = buildTmplFn( tmpl )
- } else if ( tmpl instanceof jQuery ) {
- tmpl = tmpl[0] || {};
- }
- if ( tmpl.nodeType ) {
- // If this is a template block, use cached copy, or generate tmpl function and cache.
- tmpl = jQuery.data( tmpl, "tmpl" ) || jQuery.data( tmpl, "tmpl", buildTmplFn( tmpl.innerHTML ));
- }
- return typeof name === "string" ? (jQuery.template[name] = tmpl) : tmpl;
- }
- // Return named compiled template
- return name ? (typeof name !== "string" ? jQuery.template( null, name ):
- (jQuery.template[name] ||
- // If not in map, treat as a selector. (If integrated with core, use quickExpr.exec)
- jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null;
- },
-
- encode: function( text ) {
- // Do HTML encoding replacing < > & and ' and " by corresponding entities.
- return ("" + text).split("<").join("<").split(">").join(">").split('"').join(""").split("'").join("'");
- }
- });
-
- jQuery.extend( jQuery.tmpl, {
- tag: {
- "tmpl": {
- _default: { $2: "null" },
- open: "if($notnull_1){_=_.concat($item.nest($1,$2));}"
- // tmpl target parameter can be of type function, so use $1, not $1a (so not auto detection of functions)
- // This means that {{tmpl foo}} treats foo as a template (which IS a function).
- // Explicit parens can be used if foo is a function that returns a template: {{tmpl foo()}}.
- },
- "wrap": {
- _default: { $2: "null" },
- open: "$item.calls(_,$1,$2);_=[];",
- close: "call=$item.calls();_=call._.concat($item.wrap(call,_));"
- },
- "each": {
- _default: { $2: "$index, $value" },
- open: "if($notnull_1){$.each($1a,function($2){with(this){",
- close: "}});}"
- },
- "if": {
- open: "if(($notnull_1) && $1a){",
- close: "}"
- },
- "else": {
- _default: { $1: "true" },
- open: "}else if(($notnull_1) && $1a){"
- },
- "html": {
- // Unecoded expression evaluation.
- open: "if($notnull_1){_.push($1a);}"
- },
- "=": {
- // Encoded expression evaluation. Abbreviated form is ${}.
- _default: { $1: "$data" },
- open: "if($notnull_1){_.push($.encode($1a));}"
- },
- "!": {
- // Comment tag. Skipped by parser
- open: ""
- }
- },
-
- // This stub can be overridden, e.g. in jquery.tmplPlus for providing rendered events
- complete: function( items ) {
- newTmplItems = {};
- },
-
- // Call this from code which overrides domManip, or equivalent
- // Manage cloning/storing template items etc.
- afterManip: function afterManip( elem, fragClone, callback ) {
- // Provides cloned fragment ready for fixup prior to and after insertion into DOM
- var content = fragClone.nodeType === 11 ?
- jQuery.makeArray(fragClone.childNodes) :
- fragClone.nodeType === 1 ? [fragClone] : [];
-
- // Return fragment to original caller (e.g. append) for DOM insertion
- callback.call( elem, fragClone );
-
- // Fragment has been inserted:- Add inserted nodes to tmplItem data structure. Replace inserted element annotations by jQuery.data.
- storeTmplItems( content );
- cloneIndex++;
- }
- });
-
- //========================== Private helper functions, used by code above ==========================
-
- function build( tmplItem, nested, content ) {
- // Convert hierarchical content into flat string array
- // and finally return array of fragments ready for DOM insertion
- var frag, ret = content ? jQuery.map( content, function( item ) {
- return (typeof item === "string") ?
- // Insert template item annotations, to be converted to jQuery.data( "tmplItem" ) when elems are inserted into DOM.
- (tmplItem.key ? item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) : item) :
- // This is a child template item. Build nested template.
- build( item, tmplItem, item._ctnt );
- }) :
- // If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}.
- tmplItem;
- if ( nested ) {
- return ret;
- }
-
- // top-level template
- ret = ret.join("");
-
- // Support templates which have initial or final text nodes, or consist only of text
- // Also support HTML entities within the HTML markup.
- ret.replace( /^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/, function( all, before, middle, after) {
- frag = jQuery( middle ).get();
-
- storeTmplItems( frag );
- if ( before ) {
- frag = unencode( before ).concat(frag);
- }
- if ( after ) {
- frag = frag.concat(unencode( after ));
- }
- });
- return frag ? frag : unencode( ret );
- }
-
- function unencode( text ) {
- // Use createElement, since createTextNode will not render HTML entities correctly
- var el = document.createElement( "div" );
- el.innerHTML = text;
- return jQuery.makeArray(el.childNodes);
- }
-
- // Generate a reusable function that will serve to render a template against data
- function buildTmplFn( markup ) {
- return new Function("jQuery","$item",
- "var $=jQuery,call,_=[],$data=$item.data;" +
-
- // Introduce the data as local variables using with(){}
- "with($data){_.push('" +
-
- // Convert the template into pure JavaScript
- jQuery.trim(markup)
- .replace( /([\\'])/g, "\\$1" )
- .replace( /[\r\t\n]/g, " " )
- .replace( /\$\{([^\}]*)\}/g, "{{= $1}}" )
- .replace( /\{\{(\/?)(\w+|.)(?:\(((?:.(?!\}\}))*?)?\))?(?:\s+(.*?)?)?(\((.*?)\))?\s*\}\}/g,
- function( all, slash, type, fnargs, target, parens, args ) {
- var tag = jQuery.tmpl.tag[ type ], def, expr, exprAutoFnDetect;
- if ( !tag ) {
- throw "Template command not found: " + type;
- }
- def = tag._default || [];
- if ( parens && !/\w$/.test(target)) {
- target += parens;
- parens = "";
- }
- if ( target ) {
- target = unescape( target );
- args = args ? ("," + unescape( args ) + ")") : (parens ? ")" : "");
- // Support for target being things like a.toLowerCase();
- // In that case don't call with template item as 'this' pointer. Just evaluate...
- expr = parens ? (target.indexOf(".") > -1 ? target + parens : ("(" + target + ").call($item" + args)) : target;
- exprAutoFnDetect = parens ? expr : "(typeof(" + target + ")==='function'?(" + target + ").call($item):(" + target + "))";
- } else {
- exprAutoFnDetect = expr = def.$1 || "null";
- }
- fnargs = unescape( fnargs );
- return "');" +
- tag[ slash ? "close" : "open" ]
- .split( "$notnull_1" ).join( target ? "typeof(" + target + ")!=='undefined' && (" + target + ")!=null" : "true" )
- .split( "$1a" ).join( exprAutoFnDetect )
- .split( "$1" ).join( expr )
- .split( "$2" ).join( fnargs ?
- fnargs.replace( /\s*([^\(]+)\s*(\((.*?)\))?/g, function( all, name, parens, params ) {
- params = params ? ("," + params + ")") : (parens ? ")" : "");
- return params ? ("(" + name + ").call($item" + params) : all;
- })
- : (def.$2||"")
- ) +
- "_.push('";
- }) +
- "');}return _;"
- );
- }
- function updateWrapped( options, wrapped ) {
- // Build the wrapped content.
- options._wrap = build( options, true,
- // Suport imperative scenario in which options.wrapped can be set to a selector or an HTML string.
- jQuery.isArray( wrapped ) ? wrapped : [htmlExpr.test( wrapped ) ? wrapped : jQuery( wrapped ).html()]
- ).join("");
- }
-
- function unescape( args ) {
- return args ? args.replace( /\\'/g, "'").replace(/\\\\/g, "\\" ) : null;
- }
- function outerHtml( elem ) {
- var div = document.createElement("div");
- div.appendChild( elem.cloneNode(true) );
- return div.innerHTML;
- }
-
- // Store template items in jQuery.data(), ensuring a unique tmplItem data data structure for each rendered template instance.
- function storeTmplItems( content ) {
- var keySuffix = "_" + cloneIndex, elem, elems, newClonedItems = {}, i, l, m;
- for ( i = 0, l = content.length; i < l; i++ ) {
- if ( (elem = content[i]).nodeType !== 1 ) {
- continue;
- }
- elems = elem.getElementsByTagName("*");
- for ( m = elems.length - 1; m >= 0; m-- ) {
- processItemKey( elems[m] );
- }
- processItemKey( elem );
- }
- function processItemKey( el ) {
- var pntKey, pntNode = el, pntItem, tmplItem, key;
- // Ensure that each rendered template inserted into the DOM has its own template item,
- if ( (key = el.getAttribute( tmplItmAtt ))) {
- while ((pntNode = pntNode.parentNode).nodeType === 1 && !(pntKey = pntNode.getAttribute( tmplItmAtt ))) { }
- if ( pntKey !== key ) {
- // The next ancestor with a _tmplitem expando is on a different key than this one.
- // So this is a top-level element within this template item
- pntNode = pntNode.nodeType === 11 ? 0 : (pntNode.getAttribute( tmplItmAtt ) || 0);
- if ( !(tmplItem = newTmplItems[key]) ) {
- // The item is for wrapped content, and was copied from the temporary parent wrappedItem.
- tmplItem = wrappedItems[key];
- tmplItem = newTmplItem( tmplItem, newTmplItems[pntNode]||wrappedItems[pntNode], null, true );
- tmplItem.key = ++itemKey;
- newTmplItems[itemKey] = tmplItem;
- }
- if ( cloneIndex ) {
- cloneTmplItem( key );
- }
- }
- el.removeAttribute( tmplItmAtt );
- } else if ( cloneIndex && (tmplItem = jQuery.data( el, "tmplItem" )) ) {
- // This was a rendered element, cloned during append or appendTo etc.
- // TmplItem stored in jQuery data has already been cloned in cloneCopyEvent. We must replace it with a fresh cloned tmplItem.
- cloneTmplItem( tmplItem.key );
- newTmplItems[tmplItem.key] = tmplItem;
- pntNode = jQuery.data( el.parentNode, "tmplItem" );
- pntNode = pntNode ? pntNode.key : 0;
- }
- if ( tmplItem ) {
- pntItem = tmplItem;
- // Find the template item of the parent element.
- // (Using !=, not !==, since pntItem.key is number, and pntNode may be a string)
- while ( pntItem && pntItem.key != pntNode ) {
- // Add this element as a top-level node for this rendered template item, as well as for any
- // ancestor items between this item and the item of its parent element
- pntItem.nodes.push( el );
- pntItem = pntItem.parent;
- }
- // Delete content built during rendering - reduce API surface area and memory use, and avoid exposing of stale data after rendering...
- delete tmplItem._ctnt;
- delete tmplItem._wrap;
- // Store template item as jQuery data on the element
- jQuery.data( el, "tmplItem", tmplItem );
- }
- function cloneTmplItem( key ) {
- key = key + keySuffix;
- tmplItem = newClonedItems[key] =
- (newClonedItems[key] || newTmplItem( tmplItem, newTmplItems[tmplItem.parent.key + keySuffix] || tmplItem.parent, null, true ));
- }
- }
- }
-
- //---- Helper functions for template item ----
-
- function tiCalls( content, tmpl, data, options ) {
- if ( !content ) {
- return stack.pop();
- }
- stack.push({ _: content, tmpl: tmpl, item:this, data: data, options: options });
- }
-
- function tiNest( tmpl, data, options ) {
- // nested template, using {{tmpl}} tag
- return jQuery.tmpl( jQuery.template( tmpl ), data, options, this );
- }
-
- function tiWrap( call, wrapped ) {
- // nested template, using {{wrap}} tag
- var options = call.options || {};
- options.wrapped = wrapped;
- // Apply the template, which may incorporate wrapped content,
- return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.item );
- }
-
- function tiHtml( filter, textOnly ) {
- var wrapped = this._wrap;
- return jQuery.map(
- jQuery( jQuery.isArray( wrapped ) ? wrapped.join("") : wrapped ).filter( filter || "*" ),
- function(e) {
- return textOnly ?
- e.innerText || e.textContent :
- e.outerHTML || outerHtml(e);
- });
- }
-
- function tiUpdate() {
- var coll = this.nodes;
- jQuery.tmpl( null, null, null, this).insertBefore( coll[0] );
- jQuery( coll ).remove();
- }
-})( jQuery );
+++ /dev/null
-(function() {
-
-var defaults = [
- {
- type: "currency",
- from: "USD",
- to: "EUR"
- },
- {
- type: "currency",
- from: "GBP",
- to: "EUR"
- }
- // TODO add back in as defaults once its possible to add other conversions, not just currencies
- /*,
- {
- type: "distance",
- from: "Miles",
- to: "Kilometer",
- rate: 1.609344
- },
- {
- type: "distance",
- from: "inch",
- to: "centimeter",
- rate: 2.54
- }*/
-];
-
-// TODO fallback to whatever else when localStorage isn't available
-function get() {
- return JSON.parse( localStorage.getItem( "conversions" ) );
-}
-function set( value ) {
- localStorage.setItem( "conversions", JSON.stringify( value ) );
-}
-
-var conversions = get( "conversions" );
-if ( !conversions ) {
- conversions = defaults.slice();
- set( conversions );
-}
-window.conversions = {
- store: function() {
- set( conversions );
- },
- all: function() {
- return conversions;
- },
- clear: function() {
- conversions.length = 0;
- this.store();
- },
- restore: function() {
- conversions.length = 0;
- $.extend( conversions, defaults );
- this.store();
- },
- remove: function( tofrom ) {
- $.each( conversions, function( index, conversion ) {
- if ( ( conversion.from + conversion.to ) === tofrom ) {
- conversions.splice( index, 1 );
- return false;
- }
- });
- this.store();
- }
-};
-
-})();
+++ /dev/null
-<!DOCTYPE HTML>
-<html lang="en-US">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Main Page</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
-
- <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
-
-
-</head>
-<body>
-
- <div data-role="page">
- <div data-role="header"><h1>Google maps view</h1></div>
- <div data-role="content">
- <p>If you're linking to a map page with jQuery Mobile's Ajax behavior, be sure to load google maps in the first real page's head, since it uses document.write and can not be included in the data-role=page div like normal scripts can. <a href="map.html?">View map</a></p>
- </div>
- </div>
-
-</body>
-</html>
+++ /dev/null
-.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; }
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE HTML>
-<html lang="en-US">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Main Page</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
-
- <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
-
-
-</head>
-<body>
-
- <div data-role="page" class="page-map">
- <script src="map.js"></script>
- <link rel="stylesheet" href="map.css" />
-
- <div data-role="header"><h1>Map View</h1></div>
- <div data-role="content">
- <div id="map-canvas">
- <!-- map loads here... -->
- </div>
- </div>
- </div>
-
-</body>
-</html>
+++ /dev/null
-
-//thx @elroyjetson for the code example
-
-// When map page opens get location and display map
-$('.page-map').live("pagecreate", function() {
-
- //boston :)
- var lat = 42.35843,
- lng = -71.059773;
-
- //try to get GPS coords
- if( navigator.geolocation ) {
-
- //redirect function for successful location
- function gpsSuccess(pos){
- if( pos.coords ){
- lat = pos.coords.latitude;
- lng = pos.coords.longitude;
- }
- else{
- lat = pos.latitude;
- lng = pos.longitude;
- }
- }
-
- function gpsFail(){
- //Geo-location is supported, but we failed to get your coordinates. Workaround here perhaps?
- }
-
- navigator.geolocation.getCurrentPosition(gpsSuccess, gpsFail, {enableHighAccuracy:true, maximumAge: 300000});
- }
-
- /*
- if not supported, you might attempt to use google loader for lat,long
- $.getScript('http://www.google.com/jsapi?key=YOURAPIKEY',function(){
- lat = google.loader.ClientLocation.latitude;
- lng = google.loader.ClientLocation.longitude;
- });
- */
-
- var latlng = new google.maps.LatLng(lat, lng);
- var myOptions = {
- zoom: 10,
- center: latlng,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- var map = new google.maps.Map(document.getElementById("map-canvas"),myOptions);
-});
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile: Scrollview Demos and Tests</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="jquery.mobile.scrollview.css" />
- <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
- <style>
- .ui-content.ui-scrollview-clip {
- padding: 0;
- }
- .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
- margin: 0;
- padding: 15px;
- }
- .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
- margin: 0;
- }
- </style>
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
- <script src="jquery.easing.1.3.js"></script>
- <script src="jquery.mobile.scrollview.js"></script>
- <script src="scrollview.js"></script>
- <script src="../themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="../../docs/_assets/js/jqm-docs.js"></script>
-</head>
-<body>
-<div data-role="page" data-theme="b" id="jqm-home">
- <div id="jqm-homeheader">
- <h1 id="jqm-logo"><img src="../../docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" width="235" height="61" /></h1>
- <p>A few examples tweaked to make use of the scrollview component.</p>
- <p id="jqm-version">Alpha Release</p>
- </div>
-
- <div data-role="content">
-
- <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
- <li data-role="list-divider">Toolbars</li>
- <li><a href="../../docs/toolbars/footer-persist-a.html">Persistent footer nav bar (a)</a></li>
- <li><a href="../../docs/toolbars/footer-persist-b.html">Persistent footer nav bar (b)</a></li>
- <li><a href="../../docs/toolbars/footer-persist-c.html">Persistent footer nav bar (c)</a></li>
- </ul>
-
- <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
- <li data-role="list-divider">List Views</li>
- <li><a href="lists-divider.html">Sticky list dividers</a></li>
- </ul>
-
- <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
- <li data-role="list-divider">Forms</li>
- <li><a href="../../docs/forms/forms-all.html">Form element gallery</a></li>
- </ul>
-
- <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
- <li data-role="list-divider">Tests</li>
- <li><a href="scrollview-direction.html" rel="external">Scroll Direction</a></li>
- <li><a href="scrollview-nested.html" rel="external">Nested Scroll Views</a></li>
- <li><a href="sv-test-01.html" rel="external">Form Elements Event Test</a></li>
- <li><a href="sv-test-02.html" rel="external">Form Elements in Scrollview Event Test</a></li>
- </ul>
- </div>
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="jquery.mobile.scrollview.css" />
- <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css"/>
- <style>
- .ui-content.ui-scrollview-clip {
- padding: 0;
- }
- .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
- margin: 0;
- padding: 15px;
- }
- .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
- margin: 0;
- }
- </style>
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
- <script src="jquery.easing.1.3.js"></script>
- <script src="jquery.mobile.scrollview.js"></script>
- <script src="scrollview.js"></script>
- <script src="../../docs/lists/docs/docs.js"></script>
-</head>
-<body>
-
-<div data-role="page">
-
- <div data-role="header">
- <h1>List dividers</h1>
- </div><!-- /header -->
-
- <div data-role="content" class="ui-scrolllistview">
- <ul data-role="listview">
- <li data-role="list-divider">A</li>
- <li><a href="../../docs/lists/index.html">Adam Kinkaid</a></li>
- <li><a href="../../docs/lists/index.html">Alex Wickerham</a></li>
- <li><a href="../../docs/lists/index.html">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="../../docs/lists/index.html">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="../../docs/lists/index.html">Caleb Booth</a></li>
- <li><a href="../../docs/lists/index.html">Christopher Adams</a></li>
- <li><a href="../../docs/lists/index.html">Culver James</a></li>
- <li data-role="list-divider">D</li>
- <li><a href="../../docs/lists/index.html">David Walsh</a></li>
- <li><a href="../../docs/lists/index.html">Drake Alfred</a></li>
- <li data-role="list-divider">E</li>
- <li><a href="../../docs/lists/index.html">Elizabeth Bacon</a></li>
- <li><a href="../../docs/lists/index.html">Emery Parker</a></li>
- <li><a href="../../docs/lists/index.html">Enid Voldon</a></li>
- <li data-role="list-divider">F</li>
- <li><a href="../../docs/lists/index.html">Francis Wall</a></li>
- <li data-role="list-divider">G</li>
- <li><a href="../../docs/lists/index.html">Graham Smith</a></li>
- <li><a href="../../docs/lists/index.html">Greta Peete</a></li>
- <li data-role="list-divider">H</li>
- <li><a href="../../docs/lists/index.html">Harvey Walls</a></li>
- <li data-role="list-divider">M</li>
- <li><a href="../../docs/lists/index.html">Mike Farnsworth</a></li>
- <li><a href="../../docs/lists/index.html">Murray Vanderbuilt</a></li>
- <li data-role="list-divider">N</li>
- <li><a href="../../docs/lists/index.html">Nathan Williams</a></li>
- <li data-role="list-divider">P</li>
- <li><a href="../../docs/lists/index.html">Paul Baker</a></li>
- <li><a href="../../docs/lists/index.html">Pete Mason</a></li>
- <li data-role="list-divider">R</li>
- <li><a href="../../docs/lists/index.html">Rod Tarker</a></li>
- <li data-role="list-divider">S</li>
- <li><a href="../../docs/lists/index.html">Sawyer Wakefield</a></li>
- <li data-role="list-divider">A</li>
- <li><a href="../../docs/lists/index.html">Adam Kinkaid</a></li>
- <li><a href="../../docs/lists/index.html">Alex Wickerham</a></li>
- <li><a href="../../docs/lists/index.html">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="../../docs/lists/index.html">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="../../docs/lists/index.html">Caleb Booth</a></li>
- <li><a href="../../docs/lists/index.html">Christopher Adams</a></li>
- <li><a href="../../docs/lists/index.html">Culver James</a></li>
- <li data-role="list-divider">D</li>
- <li><a href="../../docs/lists/index.html">David Walsh</a></li>
- <li><a href="../../docs/lists/index.html">Drake Alfred</a></li>
- <li data-role="list-divider">E</li>
- <li><a href="../../docs/lists/index.html">Elizabeth Bacon</a></li>
- <li><a href="../../docs/lists/index.html">Emery Parker</a></li>
- <li><a href="../../docs/lists/index.html">Enid Voldon</a></li>
- <li data-role="list-divider">F</li>
- <li><a href="../../docs/lists/index.html">Francis Wall</a></li>
- <li data-role="list-divider">G</li>
- <li><a href="../../docs/lists/index.html">Graham Smith</a></li>
- <li><a href="../../docs/lists/index.html">Greta Peete</a></li>
- <li data-role="list-divider">H</li>
- <li><a href="../../docs/lists/index.html">Harvey Walls</a></li>
- <li data-role="list-divider">M</li>
- <li><a href="../../docs/lists/index.html">Mike Farnsworth</a></li>
- <li><a href="../../docs/lists/index.html">Murray Vanderbuilt</a></li>
- <li data-role="list-divider">N</li>
- <li><a href="../../docs/lists/index.html">Nathan Williams</a></li>
- <li data-role="list-divider">P</li>
- <li><a href="../../docs/lists/index.html">Paul Baker</a></li>
- <li><a href="../../docs/lists/index.html">Pete Mason</a></li>
- <li data-role="list-divider">R</li>
- <li><a href="../../docs/lists/index.html">Rod Tarker</a></li>
- <li data-role="list-divider">S</li>
- <li><a href="../../docs/lists/index.html">Sawyer Wakefield</a></li>
- <li data-role="list-divider">A</li>
- <li><a href="../../docs/lists/index.html">Adam Kinkaid</a></li>
- <li><a href="../../docs/lists/index.html">Alex Wickerham</a></li>
- <li><a href="../../docs/lists/index.html">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="../../docs/lists/index.html">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="../../docs/lists/index.html">Caleb Booth</a></li>
- <li><a href="../../docs/lists/index.html">Christopher Adams</a></li>
- <li><a href="../../docs/lists/index.html">Culver James</a></li>
- <li data-role="list-divider">D</li>
- <li><a href="../../docs/lists/index.html">David Walsh</a></li>
- <li><a href="../../docs/lists/index.html">Drake Alfred</a></li>
- <li data-role="list-divider">E</li>
- <li><a href="../../docs/lists/index.html">Elizabeth Bacon</a></li>
- <li><a href="../../docs/lists/index.html">Emery Parker</a></li>
- <li><a href="../../docs/lists/index.html">Enid Voldon</a></li>
- <li data-role="list-divider">F</li>
- <li><a href="../../docs/lists/index.html">Francis Wall</a></li>
- <li data-role="list-divider">G</li>
- <li><a href="../../docs/lists/index.html">Graham Smith</a></li>
- <li><a href="../../docs/lists/index.html">Greta Peete</a></li>
- <li data-role="list-divider">H</li>
- <li><a href="../../docs/lists/index.html">Harvey Walls</a></li>
- <li data-role="list-divider">M</li>
- <li><a href="../../docs/lists/index.html">Mike Farnsworth</a></li>
- <li><a href="../../docs/lists/index.html">Murray Vanderbuilt</a></li>
- <li data-role="list-divider">N</li>
- <li><a href="../../docs/lists/index.html">Nathan Williams</a></li>
- <li data-role="list-divider">P</li>
- <li><a href="../../docs/lists/index.html">Paul Baker</a></li>
- <li><a href="../../docs/lists/index.html">Pete Mason</a></li>
- <li data-role="list-divider">R</li>
- <li><a href="../../docs/lists/index.html">Rod Tarker</a></li>
- <li data-role="list-divider">S</li>
- <li><a href="../../docs/lists/index.html">Sawyer Wakefield</a></li>
- </ul>
- </div><!-- /content -->
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="jquery.mobile.scrollview.css" />
- <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css"/>
- <style>
- .ui-content.ui-scrollview-clip {
- padding: 0;
- }
- .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
- margin: 0;
- padding: 15px;
- }
- .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
- margin: 0;
- }
- .square {
- width: 98px;
- height: 98px;
- border: solid 1px #333;
- text-align: center;
- line-height: 100px;
- font-size: 60px;
- }
-
- .ui-scrollview-clip .ui-scrollview-clip .square {
- background-color: #3CF;
- }
-
- .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
- background-color: #F39;
- }
-
- .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
- background-color: #0F6;
- }
-
- .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
- background-color: #FF6;
- }
-
- .threeByThree {
- border: solid 1px black;
- background-color: #999;
- overflow: hidden;
- width: 300px;
- height: 300px;
- }
- .threeByThree > .ui-scrollview-view {
- width: 1300px;
- background-color: white;
- }
- .threeByThree .square {
- float: left;
- }
- </style>
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
- <script src="jquery.easing.1.3.js"></script>
- <script src="jquery.mobile.scrollview.js"></script>
- <script src="scrollview.js"></script>
- <script src="../../docs/lists/docs/docs.js"></script>
-</head>
-<body>
-
-<div data-role="page">
-
- <div data-role="header">
- <h1>Scroll View Direction Locking</h1>
- </div><!-- /header -->
-
- <div data-role="content">
- <h4>Scrollview</h4>
- <p>To turn an element into a scrollview, simply add a data-scroll="true" to the element. By default, a scrollview can scroll in both the horizontal and vertical directions. If the user drags the view horizontally (left or right), or vertically (up or down), scrolling will be locked so that it only scrolls in that one dimension. If the user drags the view diagonally, he will be able to scroll in both directions at the same time.</p>
- <div data-scroll="true" class="threeByThree">
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- </div>
- <p>When there are nested scrollviews, if the user drags in a single dimension and hits either end of the view, the drag will be propagated up to the next outer scrollview that can handle a drag in that dimension. So for example, if you drag the scrollview above so that it reaches the top of its view, the entire page will start to scroll upward if you continue dragging. This is because the drag was propagated from the scrollview with the letters in it, out to the scrollview containing the entire content for the page.</p>
- <h4>Horizontal Scrollview</h4>
- <p>A scrollview can be set up so that it only scrolls in the horizontal direction. Simply place a data-scroll="x" on the element you want to scroll:</p>
- <div data-scroll="x" class="threeByThree">
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- </div>
- <h4>Vertical Scrollview</h4>
- <p>A scrollview can be set up so that it only scrolls in the vertical direction. Simply place a data-scroll="y" on the element you want to scroll:</p>
- <div data-scroll="y" class="threeByThree">
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- </div>
- <h4>Scrollview Paging</h4>
- <p>A scrollview can be set up so that it scrolls by pages. This feature is only enabled for horizontal or vertical scrollviews. Use data-scroll="xp" or data-scroll="yp" to turn on paging. The following scrollview pages horizontally.</p>
- <div id="ex4" data-scroll="xp" class="threeByThree">
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- <div class="square">z</div>
- <div class="square">0</div>
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div class="square">4</div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- <div class="square">8</div>
- <div class="square">9</div>
- <div class="square">a</div>
- <div class="square">b</div>
- <div class="square">c</div>
- <div class="square">d</div>
- <div class="square">e</div>
- <div class="square">f</div>
- <div class="square">g</div>
- <div class="square">h</div>
- <div class="square">i</div>
- <div class="square">j</div>
- <div class="square">k</div>
- <div class="square">l</div>
- <div class="square">m</div>
- <div class="square">n</div>
- <div class="square">o</div>
- <div class="square">p</div>
- <div class="square">q</div>
- <div class="square">r</div>
- <div class="square">s</div>
- <div class="square">t</div>
- <div class="square">u</div>
- <div class="square">v</div>
- <div class="square">w</div>
- <div class="square">x</div>
- <div class="square">y</div>
- </div>
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
- <p> </p>
- <p></p>
- </div><!-- /content -->
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="jquery.mobile.scrollview.css" />
- <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css"/>
- <style>
- .ui-content.ui-scrollview-clip {
- padding: 0;
- }
- .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
- margin: 0;
- padding: 15px;
- }
- .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
- margin: 0;
- }
-
- .ui-scrollview-clip {
- background-color: #999;
- }
-
- .ui-scrollview-view {
- background-color: white;
- }
-
- .square {
- width: 200px;
- height: 200px;
- text-align: center;
- line-height: 200px;
- font-size: 160px;
- }
-
- .ui-scrollview-clip .ui-scrollview-clip .square {
- background-color: #3CF;
- }
-
- .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
- background-color: #F39;
- }
-
- .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
- background-color: #0F6;
- }
-
- .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
- background-color: #FF6;
- }
-
- .single-block-view-h, .single-block-view-v {
- width: 200px;
- height: 200px;
- }
- .double-block-view-h {
- border: solid 1px black;
- width: 400px;
- height: 200px;
- }
-
- .double-block-view-v {
- border: solid 1px black;
- width: 200px;
- height: 400px;
- }
-
- .single-block-view-h > .view, .double-block-view-h > .view {
- width: 1400px;
- height: 200px;
- }
-
- .single-block-view-h > .view > .square, .double-block-view-h > .view > .square {
- float: left;
- }
-
- .single-block-view-v > .view, .double-block-view-v > .view {
- width: 200px;
- height: 1400px;
- }
-
- </style>
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
- <script src="jquery.easing.1.3.js"></script>
- <script src="jquery.mobile.scrollview.js"></script>
- <script src="scrollview.js"></script>
- <script src="../../docs/lists/docs/docs.js"></script>
-</head>
-<body>
-
-<div data-role="page">
-
- <div data-role="header">
- <h1>Nested Scrollviews</h1>
- </div><!-- /header -->
-
- <div data-role="content">
- <h4>Example 1</h4>
- <p>In the following example the #4 is actually a vertical scrollview embedded within a horizontal scrollview.</p>
- <div data-scroll="x" class="double-block-view-h">
- <div class="view">
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div data-scroll="y" class="square single-block-view-v">
- <div class="view">
- <div class="square">4</div>
- <div class="square">A</div>
- <div class="square">B</div>
- <div data-scroll="x" class="single-block-view-h">
- <div class="view">
- <div class="square">C</div>
- <div class="square">@</div>
- <div class="square">#</div>
- <div class="square">$</div>
- <div class="square">%</div>
- <div class="square">&</div>
- <div class="square">*</div>
- </div>
- </div>
- <div class="square">D</div>
- <div class="square">E</div>
- <div class="square">F</div>
- </div>
- </div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- </div>
- </div>
- <h4>Example 2</h4>
- <p>In the following example the #4 is actually a nested horizontal scrollview embedded within a horizontal scrollview. The idea here is that if you drag-scroll the nested scrollview, once it reaches either end of its view, it should start scrolling the outer view.</p>
- <div data-scroll="x" class="double-block-view-h">
- <div class="view">
- <div class="square">1</div>
- <div class="square">2</div>
- <div class="square">3</div>
- <div data-scroll="x" class="square single-block-view-h">
- <div class="view">
- <div class="square">4</div>
- <div class="square">A</div>
- <div class="square">B</div>
- <div class="square">C</div>
- <div class="square">D</div>
- <div class="square">E</div>
- <div class="square">F</div>
- </div>
- </div>
- <div class="square">5</div>
- <div class="square">6</div>
- <div class="square">7</div>
- </div>
- </div>
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
- <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
- <p> </p>
- <p></p>
- </div><!-- /content -->
-</div><!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Scrollview Test 1 - Form Element Event Test</title>
-<link rel="stylesheet" href="../../css/themes/default/" />
-<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css"/>
-<script src="../../js/jquery.js"></script>
-<script src="../../js/"></script>
-<style>
-
-#evtCatcher {
- border: solid 1px black;
- background-color: #FF9;
- padding: 10px;
-}
-
-</style>
-<script>
-
-function getEvtHandler(cb_pd, cb_sp)
-{
- return function(e) {
- if (cb_pd.checked)
- e.preventDefault();
- if (cb_sp.checked)
- e.stopPropagation();
- };
-}
-
-$(function(){
- $("#evtCatcher")
- .bind("touchstart", getEvtHandler($("#cb_hd_pd")[0], $("#cb_hd_sp")[0]))
- .bind("touchmove", getEvtHandler($("#cb_hm_pd")[0], $("#cb_hm_sp")[0]))
- .bind("touchstop", getEvtHandler($("#cb_hu_pd")[0], $("#cb_hu_sp")[0]));
-});
-</script>
-</head>
-<body>
-<div data-role="page" data-theme="c">
- <div data-role="header">
- <h1>Form Element Event Test</h1>
- </div>
- <!-- /header -->
-
- <div data-role="content" data-theme="c">
- <p>The form elements on this page are wrapped by a special div that has event handlers for touchstart, touchmove and touchstop. The checkboxes below control how the event within these handlers is treated when they fire. Use this page to figure out how the various event treatments impact the form elements on you mobile device, then add to the notes at the bottom of the page.</p>
- <p>All scrolling on this page is performed by the native viewport, there are no scrollviews on this page.</p>
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <input type="checkbox" name="cb_hd_pd" id="cb_hd_pd" />
- <label for="cb_hd_pd">touchstart - Prevent Default</label>
- <input type="checkbox" name="cb_hd_sp" id="cb_hd_sp" />
- <label for="cb_hd_sp">touchstart - Stop Propagation</label>
- <input type="checkbox" name="cb_hm_pd" id="cb_hm_pd" />
- <label for="cb_hm_pd">touchmove - Prevent Default</label>
- <input type="checkbox" name="cb_hm_sp" id="cb_hm_sp" />
- <label for="cb_hm_sp">touchmove - Stop Propagation</label>
- <input type="checkbox" name="cb_hu_pd" id="cb_hu_pd" />
- <label for="cb_hu_pd">touchstop - Prevent Default</label>
- <input type="checkbox" name="cb_hu_sp" id="cb_hu_sp" />
- <label for="cb_hu_sp">touchstop - Stop Propagation</label>
- </fieldset>
- </div>
- <div id="evtCatcher">
- <form action="#" method="get">
- <h2>Form elements</h2>
- <div data-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" />
- </div>
- <div data-role="fieldcontain">
- <label for="textarea">Textarea:</label>
- <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
- </div>
- <div data-role="fieldcontain">
- <label for="search">Search Input:</label>
- <input type="search" name="password" id="search" value="" />
- </div>
- <div data-role="fieldcontain">
- <label for="slider2">Flip switch:</label>
- <select name="slider2" id="slider2" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
- <div data-role="fieldcontain">
- <label for="slider">Slider:</label>
- <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
- </div>
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose as many snacks as you'd like:</legend>
- <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
- <label for="checkbox-1a">Cheetos</label>
- <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
- <label for="checkbox-2a">Doritos</label>
- <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
- <label for="checkbox-3a">Fritos</label>
- <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
- <label for="checkbox-4a">Sun Chips</label>
- </fieldset>
- </div>
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
- <label for="checkbox-6">b</label>
- <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
- <label for="checkbox-7"><em>i</em></label>
- <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
- <label for="checkbox-8">u</label>
- </fieldset>
- </div>
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
- <label for="radio-choice-1">Cat</label>
- <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
- <label for="radio-choice-2">Dog</label>
- <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
- <label for="radio-choice-3">Hamster</label>
- <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
- <label for="radio-choice-4">Lizard</label>
- </fieldset>
- </div>
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Layout view:</legend>
- <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
- <label for="radio-choice-c">List</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
- <label for="radio-choice-d">Grid</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
- <label for="radio-choice-e">Gallery</label>
- </fieldset>
- </div>
- <div data-role="fieldcontain">
- <label for="select-choice-1" class="select">Choose shipping method:</label>
- <select name="select-choice-1" id="select-choice-1">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
- <div data-role="fieldcontain">
- <label for="select-choice-3" class="select">Your state:</label>
- <select name="select-choice-3" id="select-choice-3">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
- <div class="ui-body ui-body-b">
- <fieldset class="ui-grid-a">
- <div class="ui-block-a">
- <button type="submit" data-theme="d">Cancel</button>
- </div>
- <div class="ui-block-b">
- <button type="submit" data-theme="a">Submit</button>
- </div>
- </fieldset>
- </div>
- </form>
- </div>
- <h3>Notes</h3>
- <ul>
- <li>iOS
- <ul>
- <li>None</li>
- </ul>
- </li>
- <li>Android
- <ul>
- <li>HTC Incredible - Android 2.1 (HTC Sense)
- <ul>
- <li>Calling preventDefault() on the touchstart event prevents te following elements from working properly:
- <ul>
- <li>Textfield</li>
- <li>Textarea</li>
- <li>Checkbox</li>
- <li>Radio</li>
- <li>Button</li>
- </ul>
- </li>
- </ul>
- </li>
- <li>Motorola Droid X - Android 2.2 ()</li>
- </ul>
- </li>
- <li>Black Berry OS 6
- <ul>
- <li>None</li>
- </ul>
- </li>
- </ul>
- </div>
- <!-- /content -->
-</div>
-<!-- /page -->
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-//quick & dirty theme switcher, written to potentially work as a bookmarklet
-(function($){
- $.themeswitcher = function(){
- if( $('[data-'+ $.mobile.ns +'-url=themeswitcher]').length ){ return; }
- var themesDir = 'http://jquerymobile.com/test/css/themes/',
- themes = ['default','valencia'],
- currentPage = $.mobile.activePage,
- menuPage = $( '<div data-'+ $.mobile.ns +'url="themeswitcher" data-'+ $.mobile.ns +'role=\'dialog\' data-'+ $.mobile.ns +'theme=\'a\'>' +
- '<div data-'+ $.mobile.ns +'role=\'header\' data-'+ $.mobile.ns +'theme=\'b\'>' +
- '<div class=\'ui-title\'>Switch Theme:</div>'+
- '</div>'+
- '<div data-'+ $.mobile.ns +'role=\'content\' data-'+ $.mobile.ns +'theme=\'c\'><ul data-'+ $.mobile.ns +'role=\'listview\' data-'+ $.mobile.ns +'inset=\'true\'></ul></div>'+
- '</div>' )
- .appendTo( $.mobile.pageContainer ),
- menu = menuPage.find('ul');
-
- //menu items
- $.each(themes, function( i ){
- $('<li><a href="#" data-'+ $.mobile.ns +'rel="back">' + themes[ i ].charAt(0).toUpperCase() + themes[ i ].substr(1) + '</a></li>')
- .bind("vclick", function(){
- addTheme( themes[i] );
- menuPage.dialog( "close" );
- return false;
- })
- .appendTo(menu);
- });
-
- //remover, adder
- function addTheme(theme){
- $('head').append( '<link rel=\'stylesheet\' href=\''+ themesDir + theme +'/\' />' );
- }
-
- //create page, listview
- menuPage.page();
-
- };
-})(jQuery);
+++ /dev/null
-<?php
-$location = isset($_GET['location']) ? $_GET['location'] : '02135';
-
-//get xml from google api
-$ch = curl_init();
-curl_setopt($ch, CURLOPT_URL, 'http://www.google.com/ig/api?weather='. $location);
-curl_setopt($ch, CURLOPT_HEADER, 0);
-curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
-curl_setopt($ch, CURLOPT_TIMEOUT, 10);
-$result = curl_exec($ch);
-curl_close($ch);
-
-//parse xml (thx KomunitasWeb.com for pointers)
-$xml = simplexml_load_string($result);
-$information = $xml->xpath("/xml_api_reply/weather/forecast_information");
-$current = $xml->xpath("/xml_api_reply/weather/current_conditions");
-$forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");
-?>
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Framework - Weather for <?php echo $information[0]->city['data']; ?></title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
- <style>
- .current { text-align: left; }
- h1 { font-size: 1.3em; text-align: center; }
- .ui-listview img { left: auto; margin: 10px; position: absolute; right: 10px; }
- .current { position: relative; }
- .current img { float: left; margin: 5px 10px 0 0; }
- .current p { font-weight: bold; font-size: 1.1em; margin-left: 20px; }
- .ui-mobile label { position: absolute; left: -9999px; }
- .ui-input-search, .min-width-480px .ui-input-search { margin: 5px auto; width: auto; float: none; display: block; }
- </style>
- <script>
- $('div').live('pagecreate',function(){
- $('.ui-listview img').removeClass('ui-corner-bl');
- });
- </script>
-</head>
-<body>
-
-<div data-role="page" data-theme="a">
-
- <form action="" method="get" class="ui-body ui-body-a ">
- <label for="location">Change zip code:</label>
- <input type="search" name="location" id="location" value="<?php echo$location; ?>" placeholder="zip code..." data-theme="a" />
- <input type="submit" data-role="nojs" value="submit" />
- </form>
-
-
- <div data-role="content">
- <h1>Currently in <?=$information[0]->city['data']; ?>:</h1>
- <div class="current ui-body ui-bar-a ui-corner-all">
-
- <img src="<?php echo 'http://www.google.com' . $current[0]->icon['data']?>" alt="weather">
- <p class="condition">
- <?php echo $current[0]->temp_f['data']; ?>° F,
- <?php echo $current[0]->condition['data']; ?>
-
- </p>
- </div>
-
-
- <ul data-role="listview" data-inset="true" data-theme="a">
- <li data-role="list-divider">This week's forecast</li>
- <?php foreach ($forecast_list as $forecast) : ?>
-
- <li>
- <img src="<?php echo 'http://www.google.com' . $forecast->icon['data']; ?>">
- <h3><?php echo $forecast->day_of_week['data']; ?></h3>
- <p>
- <?php echo $forecast->low['data']; ?>° F - <?php echo $forecast->high['data']; ?>° F,
- <?php echo $forecast->condition['data']; ?>
- </p>
- </li>
-
- <?php endforeach; ?>
- </ul>
- </div>
-
-
-</div>
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile: Demos and Documentation</title>
- <link rel="stylesheet" href="css/themes/default/" />
- <link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
- <script src="js/jquery.js"></script>
- <script src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
- <script src="docs/_assets/js/jqm-docs.js"></script>
- <script src="js/"></script>
-
-</head>
-<body>
-<div data-role="page" class="type-home">
- <div data-role="content">
- <p id="jqm-version">Beta Release</p>
-
-
- <div class="content-secondary">
-
- <div id="jqm-homeheader">
- <h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" /></h1>
- <p>A Touch-Optimized Web Framework for Smartphones & Tablets</p>
- </div>
-
-
- <p class="intro"><strong>Welcome.</strong> Browse the jQuery Mobile components and learn how to make rich, accessible, touch-friendly websites and apps.</p>
-
- <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
- <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><a href="docs/about/platforms.html">Supported platforms</a></li>
- </ul>
-
- </div><!--/content-primary-->
-
- <div class="content-primary">
- <nav>
-
-
- <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
- <li data-role="list-divider">Components</li>
- <li><a href="docs/pages/index.html">Pages & dialogs</a></li>
- <li><a href="docs/toolbars/index.html">Toolbars</a></li>
- <li><a href="docs/buttons/index.html">Buttons</a></li>
- <li><a href="docs/content/index.html">Content formatting</a></li>
- <li><a href="docs/forms/index.html">Form elements</a></li>
- <li><a href="docs/lists/index.html">List views</a></li>
-
- <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 & 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>
- </nav>
- </div>
-
-
-
- </div>
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
- </div>
-
-</div>
-</body>
-</html>
+++ /dev/null
-/*
-* jQuery Mobile Framework Git Build: SHA1: aa52a6bc2b9702b0f7f7f90af65e61fe9a9d26b6 <> Date: Thu Nov 17 09:30:35 2011 -0800
-* http://jquerymobile.com
-*
-* Copyright 2011 (c) jQuery Project
-* Dual licensed under the MIT or GPL Version 2 licenses.
-* http://jquery.org/license
-*
-*/
-/*!
- * jQuery UI Widget @VERSION
- *
- * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- *
- * http://docs.jquery.com/UI/Widget
- */
-
-(function( $, undefined ) {
-
-// jQuery 1.4+
-if ( $.cleanData ) {
- var _cleanData = $.cleanData;
- $.cleanData = function( elems ) {
- for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
- $( elem ).triggerHandler( "remove" );
- }
- _cleanData( elems );
- };
-} else {
- var _remove = $.fn.remove;
- $.fn.remove = function( selector, keepData ) {
- return this.each(function() {
- if ( !keepData ) {
- if ( !selector || $.filter( selector, [ this ] ).length ) {
- $( "*", this ).add( [ this ] ).each(function() {
- $( this ).triggerHandler( "remove" );
- });
- }
- }
- return _remove.call( $(this), selector, keepData );
- });
- };
-}
-
-$.widget = function( name, base, prototype ) {
- var namespace = name.split( "." )[ 0 ],
- fullName;
- name = name.split( "." )[ 1 ];
- fullName = namespace + "-" + name;
-
- if ( !prototype ) {
- prototype = base;
- base = $.Widget;
- }
-
- // create selector for plugin
- $.expr[ ":" ][ fullName ] = function( elem ) {
- return !!$.data( elem, name );
- };
-
- $[ namespace ] = $[ namespace ] || {};
- $[ namespace ][ name ] = function( options, element ) {
- // allow instantiation without initializing for simple inheritance
- if ( arguments.length ) {
- this._createWidget( options, element );
- }
- };
-
- var basePrototype = new base();
- // we need to make the options hash a property directly on the new instance
- // otherwise we'll modify the options hash on the prototype that we're
- // inheriting from
-// $.each( basePrototype, function( key, val ) {
-// if ( $.isPlainObject(val) ) {
-// basePrototype[ key ] = $.extend( {}, val );
-// }
-// });
- basePrototype.options = $.extend( true, {}, basePrototype.options );
- $[ namespace ][ name ].prototype = $.extend( true, basePrototype, {
- namespace: namespace,
- widgetName: name,
- widgetEventPrefix: $[ namespace ][ name ].prototype.widgetEventPrefix || name,
- widgetBaseClass: fullName
- }, prototype );
-
- $.widget.bridge( name, $[ namespace ][ name ] );
-};
-
-$.widget.bridge = function( name, object ) {
- $.fn[ name ] = function( options ) {
- var isMethodCall = typeof options === "string",
- args = Array.prototype.slice.call( arguments, 1 ),
- returnValue = this;
-
- // allow multiple hashes to be passed on init
- options = !isMethodCall && args.length ?
- $.extend.apply( null, [ true, options ].concat(args) ) :
- options;
-
- // prevent calls to internal methods
- if ( isMethodCall && options.charAt( 0 ) === "_" ) {
- return returnValue;
- }
-
- if ( isMethodCall ) {
- this.each(function() {
- var instance = $.data( this, name );
- if ( !instance ) {
- throw "cannot call methods on " + name + " prior to initialization; " +
- "attempted to call method '" + options + "'";
- }
- if ( !$.isFunction( instance[options] ) ) {
- throw "no such method '" + options + "' for " + name + " widget instance";
- }
- var methodValue = instance[ options ].apply( instance, args );
- if ( methodValue !== instance && methodValue !== undefined ) {
- returnValue = methodValue;
- return false;
- }
- });
- } else {
- this.each(function() {
- var instance = $.data( this, name );
- if ( instance ) {
- instance.option( options || {} )._init();
- } else {
- $.data( this, name, new object( options, this ) );
- }
- });
- }
-
- return returnValue;
- };
-};
-
-$.Widget = function( options, element ) {
- // allow instantiation without initializing for simple inheritance
- if ( arguments.length ) {
- this._createWidget( options, element );
- }
-};
-
-$.Widget.prototype = {
- widgetName: "widget",
- widgetEventPrefix: "",
- options: {
- disabled: false
- },
- _createWidget: function( options, element ) {
- // $.widget.bridge stores the plugin instance, but we do it anyway
- // so that it's stored even before the _create function runs
- $.data( element, this.widgetName, this );
- this.element = $( element );
- this.options = $.extend( true, {},
- this.options,
- this._getCreateOptions(),
- options );
-
- var self = this;
- this.element.bind( "remove." + this.widgetName, function() {
- self.destroy();
- });
-
- this._create();
- this._trigger( "create" );
- this._init();
- },
- _getCreateOptions: function() {
- var options = {};
- if ( $.metadata ) {
- options = $.metadata.get( element )[ this.widgetName ];
- }
- return options;
- },
- _create: function() {},
- _init: function() {},
-
- destroy: function() {
- this.element
- .unbind( "." + this.widgetName )
- .removeData( this.widgetName );
- this.widget()
- .unbind( "." + this.widgetName )
- .removeAttr( "aria-disabled" )
- .removeClass(
- this.widgetBaseClass + "-disabled " +
- "ui-state-disabled" );
- },
-
- widget: function() {
- return this.element;
- },
-
- option: function( key, value ) {
- var options = key;
-
- if ( arguments.length === 0 ) {
- // don't return a reference to the internal hash
- return $.extend( {}, this.options );
- }
-
- if (typeof key === "string" ) {
- if ( value === undefined ) {
- return this.options[ key ];
- }
- options = {};
- options[ key ] = value;
- }
-
- this._setOptions( options );
-
- return this;
- },
- _setOptions: function( options ) {
- var self = this;
- $.each( options, function( key, value ) {
- self._setOption( key, value );
- });
-
- return this;
- },
- _setOption: function( key, value ) {
- this.options[ key ] = value;
-
- if ( key === "disabled" ) {
- this.widget()
- [ value ? "addClass" : "removeClass"](
- this.widgetBaseClass + "-disabled" + " " +
- "ui-state-disabled" )
- .attr( "aria-disabled", value );
- }
-
- return this;
- },
-
- enable: function() {
- return this._setOption( "disabled", false );
- },
- disable: function() {
- return this._setOption( "disabled", true );
- },
-
- _trigger: function( type, event, data ) {
- var callback = this.options[ type ];
-
- event = $.Event( event );
- event.type = ( type === this.widgetEventPrefix ?
- type :
- this.widgetEventPrefix + type ).toLowerCase();
- data = data || {};
-
- // copy original event properties over to the new event
- // this would happen if we could call $.event.fix instead of $.Event
- // but we don't have a way to force an event to be fixed multiple times
- if ( event.originalEvent ) {
- for ( var i = $.event.props.length, prop; i; ) {
- prop = $.event.props[ --i ];
- event[ prop ] = event.originalEvent[ prop ];
- }
- }
-
- this.element.trigger( event, data );
-
- return !( $.isFunction(callback) &&
- callback.call( this.element[0], event, data ) === false ||
- event.isDefaultPrevented() );
- }
-};
-
-})( jQuery );
-/*
-* widget factory extentions for mobile
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.widget", {
- // decorate the parent _createWidget to trigger `widgetinit` for users
- // who wish to do post post `widgetcreate` alterations/additions
- //
- // TODO create a pull request for jquery ui to trigger this event
- // in the original _createWidget
- _createWidget: function() {
- $.Widget.prototype._createWidget.apply( this, arguments );
- this._trigger( 'init' );
- },
-
- _getCreateOptions: function() {
-
- var elem = this.element,
- options = {};
-
- $.each( this.options, function( option ) {
-
- var value = elem.jqmData( option.replace( /[A-Z]/g, function( c ) {
- return "-" + c.toLowerCase();
- })
- );
-
- if ( value !== undefined ) {
- options[ option ] = value;
- }
- });
-
- return options;
- },
-
- enhanceWithin: function( target ) {
- // TODO remove dependency on the page widget for the keepNative.
- // Currently the keepNative value is defined on the page prototype so
- // the method is as well
- var page = $(target).closest(":jqmData(role='page')").data( "page" ),
- keepNative = (page && page.keepNativeSelector()) || "";
-
- $( this.options.initSelector, target ).not( keepNative )[ this.widgetName ]();
- }
-});
-
-})( jQuery );
-/*
-* a workaround for window.matchMedia
-*/
-
-(function( $, undefined ) {
-
-var $window = $( window ),
- $html = $( "html" );
-
-/* $.mobile.media method: pass a CSS media type or query and get a bool return
- note: this feature relies on actual media query support for media queries, though types will work most anywhere
- examples:
- $.mobile.media('screen') //>> tests for screen media type
- $.mobile.media('screen and (min-width: 480px)') //>> tests for screen media type with window width > 480px
- $.mobile.media('@media screen and (-webkit-min-device-pixel-ratio: 2)') //>> tests for webkit 2x pixel ratio (iPhone 4)
-*/
-$.mobile.media = (function() {
- // TODO: use window.matchMedia once at least one UA implements it
- var cache = {},
- testDiv = $( "<div id='jquery-mediatest'>" ),
- fakeBody = $( "<body>" ).append( testDiv );
-
- return function( query ) {
- if ( !( query in cache ) ) {
- var styleBlock = document.createElement( "style" ),
- cssrule = "@media " + query + " { #jquery-mediatest { position:absolute; } }";
-
- //must set type for IE!
- styleBlock.type = "text/css";
-
- if ( styleBlock.styleSheet ){
- styleBlock.styleSheet.cssText = cssrule;
- } else {
- styleBlock.appendChild( document.createTextNode(cssrule) );
- }
-
- $html.prepend( fakeBody ).prepend( styleBlock );
- cache[ query ] = testDiv.css( "position" ) === "absolute";
- fakeBody.add( styleBlock ).remove();
- }
- return cache[ query ];
- };
-})();
-
-})(jQuery);
-/*
-* support tests
-*/
-
-(function( $, undefined ) {
-
-var fakeBody = $( "<body>" ).prependTo( "html" ),
- fbCSS = fakeBody[ 0 ].style,
- vendors = [ "Webkit", "Moz", "O" ],
- webos = "palmGetResource" in window, //only used to rule out scrollTop
- operamini = window.operamini && ({}).toString.call( window.operamini ) === "[object OperaMini]",
- bb = window.blackberry; //only used to rule out box shadow, as it's filled opaque on BB
-
-// thx Modernizr
-function propExists( prop ) {
- var uc_prop = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ),
- props = ( prop + " " + vendors.join( uc_prop + " " ) + uc_prop ).split( " " );
-
- for ( var v in props ){
- if ( fbCSS[ props[ v ] ] !== undefined ) {
- return true;
- }
- }
-}
-
-// Test for dynamic-updating base tag support ( allows us to avoid href,src attr rewriting )
-function baseTagTest() {
- var fauxBase = location.protocol + "//" + location.host + location.pathname + "ui-dir/",
- base = $( "head base" ),
- fauxEle = null,
- href = "",
- link, rebase;
-
- if ( !base.length ) {
- base = fauxEle = $( "<base>", { "href": fauxBase }).appendTo( "head" );
- } else {
- href = base.attr( "href" );
- }
-
- link = $( "<a href='testurl' />" ).prependTo( fakeBody );
- rebase = link[ 0 ].href;
- base[ 0 ].href = href || location.pathname;
-
- if ( fauxEle ) {
- fauxEle.remove();
- }
- return rebase.indexOf( fauxBase ) === 0;
-}
-
-
-// non-UA-based IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
-// allows for inclusion of IE 6+, including Windows Mobile 7
-$.mobile.browser = {};
-$.mobile.browser.ie = (function() {
- var v = 3,
- div = document.createElement( "div" ),
- a = div.all || [];
-
- while ( div.innerHTML = "<!--[if gt IE " + ( ++v ) + "]><br><![endif]-->", a[ 0 ] );
-
- return v > 4 ? v : !v;
-})();
-
-
-$.extend( $.support, {
- orientation: "orientation" in window && "onorientationchange" in window,
- touch: "ontouchend" in document,
- cssTransitions: "WebKitTransitionEvent" in window,
- pushState: "pushState" in history && "replaceState" in history,
- mediaquery: $.mobile.media( "only all" ),
- cssPseudoElement: !!propExists( "content" ),
- touchOverflow: !!propExists( "overflowScrolling" ),
- boxShadow: !!propExists( "boxShadow" ) && !bb,
- scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini,
- dynamicBaseTag: baseTagTest()
-});
-
-fakeBody.remove();
-
-
-// $.mobile.ajaxBlacklist is used to override ajaxEnabled on platforms that have known conflicts with hash history updates (BB5, Symbian)
-// or that generally work better browsing in regular http for full page refreshes (Opera Mini)
-// Note: This detection below is used as a last resort.
-// We recommend only using these detection methods when all other more reliable/forward-looking approaches are not possible
-var nokiaLTE7_3 = (function(){
-
- var ua = window.navigator.userAgent;
-
- //The following is an attempt to match Nokia browsers that are running Symbian/s60, with webkit, version 7.3 or older
- return ua.indexOf( "Nokia" ) > -1 &&
- ( ua.indexOf( "Symbian/3" ) > -1 || ua.indexOf( "Series60/5" ) > -1 ) &&
- ua.indexOf( "AppleWebKit" ) > -1 &&
- ua.match( /(BrowserNG|NokiaBrowser)\/7\.[0-3]/ );
-})();
-
-$.mobile.ajaxBlacklist =
- // BlackBerry browsers, pre-webkit
- window.blackberry && !window.WebKitPoint ||
- // Opera Mini
- operamini ||
- // Symbian webkits pre 7.3
- nokiaLTE7_3;
-
-// Lastly, this workaround is the only way we've found so far to get pre 7.3 Symbian webkit devices
-// to render the stylesheets when they're referenced before this script, as we'd recommend doing.
-// This simply reappends the CSS in place, which for some reason makes it apply
-if ( nokiaLTE7_3 ) {
- $(function() {
- $( "head link[rel='stylesheet']" ).attr( "rel", "alternate stylesheet" ).attr( "rel", "stylesheet" );
- });
-}
-
-// For ruling out shadows via css
-if ( !$.support.boxShadow ) {
- $( "html" ).addClass( "ui-mobile-nosupport-boxshadow" );
-}
-
-})( jQuery );
-/*
-* "mouse" plugin
-*/
-
-// This plugin is an experiment for abstracting away the touch and mouse
-// events so that developers don't have to worry about which method of input
-// the device their document is loaded on supports.
-//
-// The idea here is to allow 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, while still retaining the order of event firing in
-// the traditional mouse environment, should multiple handlers be registered
-// on the same element for different events.
-//
-// The current version exposes the following virtual events to jQuery bind methods:
-// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"
-
-(function( $, window, document, undefined ) {
-
-var dataPropertyName = "virtualMouseBindings",
- touchTargetPropertyName = "virtualTouchID",
- virtualEventNames = "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split( " " ),
- touchEventProps = "clientX clientY pageX pageY screenX screenY".split( " " ),
- activeDocHandlers = {},
- resetTimerID = 0,
- startX = 0,
- startY = 0,
- didScroll = false,
- clickBlockList = [],
- blockMouseTriggers = false,
- blockTouchTriggers = false,
- eventCaptureSupported = "addEventListener" in document,
- $document = $( document ),
- nextTouchID = 1,
- lastTouchID = 0;
-
-$.vmouse = {
- moveDistanceThreshold: 10,
- clickDistanceThreshold: 10,
- resetTimerDuration: 1500
-};
-
-function getNativeEvent( event ) {
-
- while ( event && typeof event.originalEvent !== "undefined" ) {
- event = event.originalEvent;
- }
- return event;
-}
-
-function createVirtualEvent( event, eventType ) {
-
- var t = event.type,
- oe, props, ne, prop, ct, touch, i, j;
-
- event = $.Event(event);
- event.type = eventType;
-
- oe = event.originalEvent;
- props = $.event.props;
-
- // copy original event properties over to the new event
- // this would happen if we could call $.event.fix instead of $.Event
- // but we don't have a way to force an event to be fixed multiple times
- if ( oe ) {
- for ( i = props.length, prop; i; ) {
- prop = props[ --i ];
- event[ prop ] = oe[ prop ];
- }
- }
-
- // make sure that if the mouse and click virtual events are generated
- // without a .which one is defined
- if ( t.search(/mouse(down|up)|click/) > -1 && !event.which ){
- event.which = 1;
- }
-
- if ( t.search(/^touch/) !== -1 ) {
- ne = getNativeEvent( oe );
- t = ne.touches;
- ct = ne.changedTouches;
- touch = ( t && t.length ) ? t[0] : ( (ct && ct.length) ? ct[ 0 ] : undefined );
-
- if ( touch ) {
- for ( j = 0, len = touchEventProps.length; j < len; j++){
- prop = touchEventProps[ j ];
- event[ prop ] = touch[ prop ];
- }
- }
- }
-
- return event;
-}
-
-function getVirtualBindingFlags( element ) {
-
- var flags = {},
- b, k;
-
- while ( element ) {
-
- b = $.data( element, dataPropertyName );
-
- for ( k in b ) {
- if ( b[ k ] ) {
- flags[ k ] = flags.hasVirtualBinding = true;
- }
- }
- element = element.parentNode;
- }
- return flags;
-}
-
-function getClosestElementWithVirtualBinding( element, eventType ) {
- var b;
- while ( element ) {
-
- b = $.data( element, dataPropertyName );
-
- if ( b && ( !eventType || b[ eventType ] ) ) {
- return element;
- }
- element = element.parentNode;
- }
- return null;
-}
-
-function enableTouchBindings() {
- blockTouchTriggers = false;
-}
-
-function disableTouchBindings() {
- blockTouchTriggers = true;
-}
-
-function enableMouseBindings() {
- lastTouchID = 0;
- clickBlockList.length = 0;
- blockMouseTriggers = false;
-
- // When mouse bindings are enabled, our
- // touch bindings are disabled.
- disableTouchBindings();
-}
-
-function disableMouseBindings() {
- // When mouse bindings are disabled, our
- // touch bindings are enabled.
- enableTouchBindings();
-}
-
-function startResetTimer() {
- clearResetTimer();
- resetTimerID = setTimeout(function(){
- resetTimerID = 0;
- enableMouseBindings();
- }, $.vmouse.resetTimerDuration );
-}
-
-function clearResetTimer() {
- if ( resetTimerID ){
- clearTimeout( resetTimerID );
- resetTimerID = 0;
- }
-}
-
-function triggerVirtualEvent( eventType, event, flags ) {
- var ve;
-
- if ( ( flags && flags[ eventType ] ) ||
- ( !flags && getClosestElementWithVirtualBinding( event.target, eventType ) ) ) {
-
- ve = createVirtualEvent( event, eventType );
-
- $( event.target).trigger( ve );
- }
-
- return ve;
-}
-
-function mouseEventCallback( event ) {
- var touchID = $.data(event.target, touchTargetPropertyName);
-
- if ( !blockMouseTriggers && ( !lastTouchID || lastTouchID !== touchID ) ){
- var ve = triggerVirtualEvent( "v" + event.type, event );
- if ( ve ) {
- if ( ve.isDefaultPrevented() ) {
- event.preventDefault();
- }
- if ( ve.isPropagationStopped() ) {
- event.stopPropagation();
- }
- if ( ve.isImmediatePropagationStopped() ) {
- event.stopImmediatePropagation();
- }
- }
- }
-}
-
-function handleTouchStart( event ) {
-
- var touches = getNativeEvent( event ).touches,
- target, flags;
-
- if ( touches && touches.length === 1 ) {
-
- target = event.target;
- flags = getVirtualBindingFlags( target );
-
- if ( flags.hasVirtualBinding ) {
-
- lastTouchID = nextTouchID++;
- $.data( target, touchTargetPropertyName, lastTouchID );
-
- clearResetTimer();
-
- disableMouseBindings();
- didScroll = false;
-
- var t = getNativeEvent( event ).touches[ 0 ];
- startX = t.pageX;
- startY = t.pageY;
-
- triggerVirtualEvent( "vmouseover", event, flags );
- triggerVirtualEvent( "vmousedown", event, flags );
- }
- }
-}
-
-function handleScroll( event ) {
- if ( blockTouchTriggers ) {
- return;
- }
-
- if ( !didScroll ) {
- triggerVirtualEvent( "vmousecancel", event, getVirtualBindingFlags( event.target ) );
- }
-
- didScroll = true;
- startResetTimer();
-}
-
-function handleTouchMove( event ) {
- if ( blockTouchTriggers ) {
- return;
- }
-
- var t = getNativeEvent( event ).touches[ 0 ],
- didCancel = didScroll,
- moveThreshold = $.vmouse.moveDistanceThreshold;
- didScroll = didScroll ||
- ( Math.abs(t.pageX - startX) > moveThreshold ||
- Math.abs(t.pageY - startY) > moveThreshold ),
- flags = getVirtualBindingFlags( event.target );
-
- if ( didScroll && !didCancel ) {
- triggerVirtualEvent( "vmousecancel", event, flags );
- }
-
- triggerVirtualEvent( "vmousemove", event, flags );
- startResetTimer();
-}
-
-function handleTouchEnd( event ) {
- if ( blockTouchTriggers ) {
- return;
- }
-
- disableTouchBindings();
-
- var flags = getVirtualBindingFlags( event.target ),
- t;
- triggerVirtualEvent( "vmouseup", event, flags );
-
- if ( !didScroll ) {
- var ve = triggerVirtualEvent( "vclick", event, flags );
- if ( ve && ve.isDefaultPrevented() ) {
- // The target of the mouse events that follow the touchend
- // event don't necessarily match the target used during the
- // touch. This means we need to rely on coordinates for blocking
- // any click that is generated.
- t = getNativeEvent( event ).changedTouches[ 0 ];
- clickBlockList.push({
- touchID: lastTouchID,
- x: t.clientX,
- y: t.clientY
- });
-
- // Prevent any mouse events that follow from triggering
- // virtual event notifications.
- blockMouseTriggers = true;
- }
- }
- triggerVirtualEvent( "vmouseout", event, flags);
- didScroll = false;
-
- startResetTimer();
-}
-
-function hasVirtualBindings( ele ) {
- var bindings = $.data( ele, dataPropertyName ),
- k;
-
- if ( bindings ) {
- for ( k in bindings ) {
- if ( bindings[ k ] ) {
- return true;
- }
- }
- }
- return false;
-}
-
-function dummyMouseHandler(){}
-
-function getSpecialEventObject( eventType ) {
- var realType = eventType.substr( 1 );
-
- return {
- setup: function( data, namespace ) {
- // If this is the first virtual mouse binding for this element,
- // add a bindings object to its data.
-
- if ( !hasVirtualBindings( this ) ) {
- $.data( this, dataPropertyName, {});
- }
-
- // If setup is called, we know it is the first binding for this
- // eventType, so initialize the count for the eventType to zero.
- var bindings = $.data( this, dataPropertyName );
- bindings[ eventType ] = true;
-
- // If this is the first virtual mouse event for this type,
- // register a global handler on the document.
-
- activeDocHandlers[ eventType ] = ( activeDocHandlers[ eventType ] || 0 ) + 1;
-
- if ( activeDocHandlers[ eventType ] === 1 ) {
- $document.bind( realType, mouseEventCallback );
- }
-
- // Some browsers, like Opera Mini, won't dispatch mouse/click events
- // for elements unless they actually have handlers registered on them.
- // To get around this, we register dummy handlers on the elements.
-
- $( this ).bind( realType, dummyMouseHandler );
-
- // For now, if event capture is not supported, we rely on mouse handlers.
- if ( eventCaptureSupported ) {
- // If this is the first virtual mouse binding for the document,
- // register our touchstart handler on the document.
-
- activeDocHandlers[ "touchstart" ] = ( activeDocHandlers[ "touchstart" ] || 0) + 1;
-
- if (activeDocHandlers[ "touchstart" ] === 1) {
- $document.bind( "touchstart", handleTouchStart )
- .bind( "touchend", handleTouchEnd )
-
- // On touch platforms, touching the screen and then dragging your finger
- // causes the window content to scroll after some distance threshold is
- // exceeded. On these platforms, a scroll prevents a click event from being
- // dispatched, and on some platforms, even the touchend is suppressed. To
- // mimic the suppression of the click event, we need to watch for a scroll
- // event. Unfortunately, some platforms like iOS don't dispatch scroll
- // events until *AFTER* the user lifts their finger (touchend). This means
- // we need to watch both scroll and touchmove events to figure out whether
- // or not a scroll happenens before the touchend event is fired.
-
- .bind( "touchmove", handleTouchMove )
- .bind( "scroll", handleScroll );
- }
- }
- },
-
- teardown: function( data, namespace ) {
- // If this is the last virtual binding for this eventType,
- // remove its global handler from the document.
-
- --activeDocHandlers[ eventType ];
-
- if ( !activeDocHandlers[ eventType ] ) {
- $document.unbind( realType, mouseEventCallback );
- }
-
- if ( eventCaptureSupported ) {
- // If this is the last virtual mouse binding in existence,
- // remove our document touchstart listener.
-
- --activeDocHandlers[ "touchstart" ];
-
- if ( !activeDocHandlers[ "touchstart" ] ) {
- $document.unbind( "touchstart", handleTouchStart )
- .unbind( "touchmove", handleTouchMove )
- .unbind( "touchend", handleTouchEnd )
- .unbind( "scroll", handleScroll );
- }
- }
-
- var $this = $( this ),
- bindings = $.data( this, dataPropertyName );
-
- // teardown may be called when an element was
- // removed from the DOM. If this is the case,
- // jQuery core may have already stripped the element
- // of any data bindings so we need to check it before
- // using it.
- if ( bindings ) {
- bindings[ eventType ] = false;
- }
-
- // Unregister the dummy event handler.
-
- $this.unbind( realType, dummyMouseHandler );
-
- // If this is the last virtual mouse binding on the
- // element, remove the binding data from the element.
-
- if ( !hasVirtualBindings( this ) ) {
- $this.removeData( dataPropertyName );
- }
- }
- };
-}
-
-// Expose our custom events to the jQuery bind/unbind mechanism.
-
-for ( var i = 0; i < virtualEventNames.length; i++ ){
- $.event.special[ virtualEventNames[ i ] ] = getSpecialEventObject( virtualEventNames[ i ] );
-}
-
-// Add a capture click handler to block clicks.
-// Note that we require event capture support for this so if the device
-// doesn't support it, we punt for now and rely solely on mouse events.
-if ( eventCaptureSupported ) {
- document.addEventListener( "click", function( e ){
- var cnt = clickBlockList.length,
- target = e.target,
- x, y, ele, i, o, touchID;
-
- if ( cnt ) {
- x = e.clientX;
- y = e.clientY;
- threshold = $.vmouse.clickDistanceThreshold;
-
- // The idea here is to run through the clickBlockList to see if
- // the current click event is in the proximity of one of our
- // vclick events that had preventDefault() called on it. If we find
- // one, then we block the click.
- //
- // Why do we have to rely on proximity?
- //
- // Because the target of the touch event that triggered the vclick
- // can be different from the target of the click event synthesized
- // by the browser. The target of a mouse/click event that is syntehsized
- // from a touch event seems to be implementation specific. For example,
- // some browsers will fire mouse/click events for a link that is near
- // a touch event, even though the target of the touchstart/touchend event
- // says the user touched outside the link. Also, it seems that with most
- // browsers, the target of the mouse/click event is not calculated until the
- // time it is dispatched, so if you replace an element that you touched
- // with another element, the target of the mouse/click will be the new
- // element underneath that point.
- //
- // Aside from proximity, we also check to see if the target and any
- // of its ancestors were the ones that blocked a click. This is necessary
- // because of the strange mouse/click target calculation done in the
- // Android 2.1 browser, where if you click on an element, and there is a
- // mouse/click handler on one of its ancestors, the target will be the
- // innermost child of the touched element, even if that child is no where
- // near the point of touch.
-
- ele = target;
-
- while ( ele ) {
- for ( i = 0; i < cnt; i++ ) {
- o = clickBlockList[ i ];
- touchID = 0;
-
- if ( ( ele === target && Math.abs( o.x - x ) < threshold && Math.abs( o.y - y ) < threshold ) ||
- $.data( ele, touchTargetPropertyName ) === o.touchID ) {
- // XXX: We may want to consider removing matches from the block list
- // instead of waiting for the reset timer to fire.
- e.preventDefault();
- e.stopPropagation();
- return;
- }
- }
- ele = ele.parentNode;
- }
- }
- }, true);
-}
-})( jQuery, window, document );
-/*
-* "events" plugin - Handles events
-*/
-
-(function( $, window, undefined ) {
-
-// add new event shortcuts
-$.each( ( "touchstart touchmove touchend orientationchange throttledresize " +
- "tap taphold swipe swipeleft swiperight scrollstart scrollstop" ).split( " " ), function( i, name ) {
-
- $.fn[ name ] = function( fn ) {
- return fn ? this.bind( name, fn ) : this.trigger( name );
- };
-
- $.attrFn[ name ] = true;
-});
-
-var supportTouch = $.support.touch,
- scrollEvent = "touchmove scroll",
- touchStartEvent = supportTouch ? "touchstart" : "mousedown",
- touchStopEvent = supportTouch ? "touchend" : "mouseup",
- touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
-
-function triggerCustomEvent( obj, eventType, event ) {
- var originalType = event.type;
- event.type = eventType;
- $.event.handle.call( obj, event );
- event.type = originalType;
-}
-
-// also handles scrollstop
-$.event.special.scrollstart = {
-
- enabled: true,
-
- setup: function() {
-
- var thisObject = this,
- $this = $( thisObject ),
- scrolling,
- timer;
-
- function trigger( event, state ) {
- scrolling = state;
- triggerCustomEvent( thisObject, scrolling ? "scrollstart" : "scrollstop", event );
- }
-
- // iPhone triggers scroll after a small delay; use touchmove instead
- $this.bind( scrollEvent, function( event ) {
-
- if ( !$.event.special.scrollstart.enabled ) {
- return;
- }
-
- if ( !scrolling ) {
- trigger( event, true );
- }
-
- clearTimeout( timer );
- timer = setTimeout(function() {
- trigger( event, false );
- }, 50 );
- });
- }
-};
-
-// also handles taphold
-$.event.special.tap = {
- setup: function() {
- var thisObject = this,
- $this = $( thisObject );
-
- $this.bind( "vmousedown", function( event ) {
-
- if ( event.which && event.which !== 1 ) {
- return false;
- }
-
- var origTarget = event.target,
- origEvent = event.originalEvent,
- timer;
-
- function clearTapTimer() {
- clearTimeout( timer );
- }
-
- function clearTapHandlers() {
- clearTapTimer();
-
- $this.unbind( "vclick", clickHandler )
- .unbind( "vmouseup", clearTapTimer )
- .unbind( "vmousecancel", clearTapHandlers );
- }
-
- function clickHandler(event) {
- clearTapHandlers();
-
- // ONLY trigger a 'tap' event if the start target is
- // the same as the stop target.
- if ( origTarget == event.target ) {
- triggerCustomEvent( thisObject, "tap", event );
- }
- }
-
- $this.bind( "vmousecancel", clearTapHandlers )
- .bind( "vmouseup", clearTapTimer )
- .bind( "vclick", clickHandler );
-
- timer = setTimeout(function() {
- triggerCustomEvent( thisObject, "taphold", $.Event( "taphold" ) );
- }, 750 );
- });
- }
-};
-
-// also handles swipeleft, swiperight
-$.event.special.swipe = {
- scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
-
- durationThreshold: 1000, // More time than this, and it isn't a swipe.
-
- horizontalDistanceThreshold: 30, // Swipe horizontal displacement must be more than this.
-
- verticalDistanceThreshold: 75, // Swipe vertical displacement must be less than this.
-
- setup: function() {
- var thisObject = this,
- $this = $( thisObject );
-
- $this.bind( touchStartEvent, function( event ) {
- var data = event.originalEvent.touches ?
- event.originalEvent.touches[ 0 ] : event,
- start = {
- time: ( new Date() ).getTime(),
- coords: [ data.pageX, data.pageY ],
- origin: $( event.target )
- },
- stop;
-
- function moveHandler( event ) {
-
- if ( !start ) {
- return;
- }
-
- var data = event.originalEvent.touches ?
- event.originalEvent.touches[ 0 ] : event;
-
- stop = {
- time: ( new Date() ).getTime(),
- coords: [ data.pageX, data.pageY ]
- };
-
- // prevent scrolling
- if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.scrollSupressionThreshold ) {
- event.preventDefault();
- }
- }
-
- $this.bind( touchMoveEvent, moveHandler )
- .one( touchStopEvent, function( event ) {
- $this.unbind( touchMoveEvent, moveHandler );
-
- if ( start && stop ) {
- if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
- Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
- Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
-
- start.origin.trigger( "swipe" )
- .trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
- }
- }
- start = stop = undefined;
- });
- });
- }
-};
-
-(function( $, window ) {
- // "Cowboy" Ben Alman
-
- var win = $( window ),
- special_event,
- get_orientation,
- last_orientation;
-
- $.event.special.orientationchange = special_event = {
- setup: function() {
- // If the event is supported natively, return false so that jQuery
- // will bind to the event using DOM methods.
- if ( $.support.orientation && $.mobile.orientationChangeEnabled ) {
- return false;
- }
-
- // Get the current orientation to avoid initial double-triggering.
- last_orientation = get_orientation();
-
- // Because the orientationchange event doesn't exist, simulate the
- // event by testing window dimensions on resize.
- win.bind( "throttledresize", handler );
- },
- teardown: function(){
- // If the event is not supported natively, return false so that
- // jQuery will unbind the event using DOM methods.
- if ( $.support.orientation && $.mobile.orientationChangeEnabled ) {
- return false;
- }
-
- // Because the orientationchange event doesn't exist, unbind the
- // resize event handler.
- win.unbind( "throttledresize", handler );
- },
- add: function( handleObj ) {
- // Save a reference to the bound event handler.
- var old_handler = handleObj.handler;
-
-
- handleObj.handler = function( event ) {
- // Modify event object, adding the .orientation property.
- event.orientation = get_orientation();
-
- // Call the originally-bound event handler and return its result.
- return old_handler.apply( this, arguments );
- };
- }
- };
-
- // If the event is not supported natively, this handler will be bound to
- // the window resize event to simulate the orientationchange event.
- function handler() {
- // Get the current orientation.
- var orientation = get_orientation();
-
- if ( orientation !== last_orientation ) {
- // The orientation has changed, so trigger the orientationchange event.
- last_orientation = orientation;
- win.trigger( "orientationchange" );
- }
- }
-
- // Get the current page orientation. This method is exposed publicly, should it
- // be needed, as jQuery.event.special.orientationchange.orientation()
- $.event.special.orientationchange.orientation = get_orientation = function() {
- var isPortrait = true, elem = document.documentElement;
-
- // prefer window orientation to the calculation based on screensize as
- // the actual screen resize takes place before or after the orientation change event
- // has been fired depending on implementation (eg android 2.3 is before, iphone after).
- // More testing is required to determine if a more reliable method of determining the new screensize
- // is possible when orientationchange is fired. (eg, use media queries + element + opacity)
- if ( $.support.orientation ) {
- // if the window orientation registers as 0 or 180 degrees report
- // portrait, otherwise landscape
- isPortrait = window.orientation % 180 == 0;
- } else {
- isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1;
- }
-
- return isPortrait ? "portrait" : "landscape";
- };
-
-})( jQuery, window );
-
-
-// throttled resize event
-(function() {
-
- $.event.special.throttledresize = {
- setup: function() {
- $( this ).bind( "resize", handler );
- },
- teardown: function(){
- $( this ).unbind( "resize", handler );
- }
- };
-
- var throttle = 250,
- handler = function() {
- curr = ( new Date() ).getTime();
- diff = curr - lastCall;
-
- if ( diff >= throttle ) {
-
- lastCall = curr;
- $( this ).trigger( "throttledresize" );
-
- } else {
-
- if ( heldCall ) {
- clearTimeout( heldCall );
- }
-
- // Promise a held call will still execute
- heldCall = setTimeout( handler, throttle - diff );
- }
- },
- lastCall = 0,
- heldCall,
- curr,
- diff;
-})();
-
-
-$.each({
- scrollstop: "scrollstart",
- taphold: "tap",
- swipeleft: "swipe",
- swiperight: "swipe"
-}, function( event, sourceEvent ) {
-
- $.event.special[ event ] = {
- setup: function() {
- $( this ).bind( sourceEvent, $.noop );
- }
- };
-});
-
-})( jQuery, this );
-// Script: jQuery hashchange event
-//
-// *Version: 1.3, Last updated: 7/21/2010*
-//
-// Project Home - http://benalman.com/projects/jquery-hashchange-plugin/
-// GitHub - http://github.com/cowboy/jquery-hashchange/
-// Source - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js
-// (Minified) - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.min.js (0.8kb gzipped)
-//
-// About: License
-//
-// Copyright (c) 2010 "Cowboy" Ben Alman,
-// Dual licensed under the MIT and GPL licenses.
-// http://benalman.com/about/license/
-//
-// About: Examples
-//
-// These working examples, complete with fully commented code, illustrate a few
-// ways in which this plugin can be used.
-//
-// hashchange event - http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
-// document.domain - http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/
-//
-// About: Support and Testing
-//
-// Information about what version or versions of jQuery this plugin has been
-// tested with, what browsers it has been tested in, and where the unit tests
-// reside (so you can test it yourself).
-//
-// jQuery Versions - 1.2.6, 1.3.2, 1.4.1, 1.4.2
-// Browsers Tested - Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5,
-// Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
-// Unit Tests - http://benalman.com/code/projects/jquery-hashchange/unit/
-//
-// About: Known issues
-//
-// While this jQuery hashchange event implementation is quite stable and
-// robust, there are a few unfortunate browser bugs surrounding expected
-// hashchange event-based behaviors, independent of any JavaScript
-// window.onhashchange abstraction. See the following examples for more
-// information:
-//
-// Chrome: Back Button - http://benalman.com/code/projects/jquery-hashchange/examples/bug-chrome-back-button/
-// Firefox: Remote XMLHttpRequest - http://benalman.com/code/projects/jquery-hashchange/examples/bug-firefox-remote-xhr/
-// WebKit: Back Button in an Iframe - http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/
-// Safari: Back Button from a different domain - http://benalman.com/code/projects/jquery-hashchange/examples/bug-safari-back-from-diff-domain/
-//
-// Also note that should a browser natively support the window.onhashchange
-// event, but not report that it does, the fallback polling loop will be used.
-//
-// About: Release History
-//
-// 1.3 - (7/21/2010) Reorganized IE6/7 Iframe code to make it more
-// "removable" for mobile-only development. Added IE6/7 document.title
-// support. Attempted to make Iframe as hidden as possible by using
-// techniques from http://www.paciellogroup.com/blog/?p=604. Added
-// support for the "shortcut" format $(window).hashchange( fn ) and
-// $(window).hashchange() like jQuery provides for built-in events.
-// Renamed jQuery.hashchangeDelay to <jQuery.fn.hashchange.delay> and
-// lowered its default value to 50. Added <jQuery.fn.hashchange.domain>
-// and <jQuery.fn.hashchange.src> properties plus document-domain.html
-// file to address access denied issues when setting document.domain in
-// IE6/7.
-// 1.2 - (2/11/2010) Fixed a bug where coming back to a page using this plugin
-// from a page on another domain would cause an error in Safari 4. Also,
-// IE6/7 Iframe is now inserted after the body (this actually works),
-// which prevents the page from scrolling when the event is first bound.
-// Event can also now be bound before DOM ready, but it won't be usable
-// before then in IE6/7.
-// 1.1 - (1/21/2010) Incorporated document.documentMode test to fix IE8 bug
-// where browser version is incorrectly reported as 8.0, despite
-// inclusion of the X-UA-Compatible IE=EmulateIE7 meta tag.
-// 1.0 - (1/9/2010) Initial Release. Broke out the jQuery BBQ event.special
-// window.onhashchange functionality into a separate plugin for users
-// who want just the basic event & back button support, without all the
-// extra awesomeness that BBQ provides. This plugin will be included as
-// part of jQuery BBQ, but also be available separately.
-
-(function($,window,undefined){
- '$:nomunge'; // Used by YUI compressor.
-
- // Reused string.
- var str_hashchange = 'hashchange',
-
- // Method / object references.
- doc = document,
- fake_onhashchange,
- special = $.event.special,
-
- // Does the browser support window.onhashchange? Note that IE8 running in
- // IE7 compatibility mode reports true for 'onhashchange' in window, even
- // though the event isn't supported, so also test document.documentMode.
- doc_mode = doc.documentMode,
- supports_onhashchange = 'on' + str_hashchange in window && ( doc_mode === undefined || doc_mode > 7 );
-
- // Get location.hash (or what you'd expect location.hash to be) sans any
- // leading #. Thanks for making this necessary, Firefox!
- function get_fragment( url ) {
- url = url || location.href;
- return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
- };
-
- // Method: jQuery.fn.hashchange
- //
- // Bind a handler to the window.onhashchange event or trigger all bound
- // window.onhashchange event handlers. This behavior is consistent with
- // jQuery's built-in event handlers.
- //
- // Usage:
- //
- // > jQuery(window).hashchange( [ handler ] );
- //
- // Arguments:
- //
- // handler - (Function) Optional handler to be bound to the hashchange
- // event. This is a "shortcut" for the more verbose form:
- // jQuery(window).bind( 'hashchange', handler ). If handler is omitted,
- // all bound window.onhashchange event handlers will be triggered. This
- // is a shortcut for the more verbose
- // jQuery(window).trigger( 'hashchange' ). These forms are described in
- // the <hashchange event> section.
- //
- // Returns:
- //
- // (jQuery) The initial jQuery collection of elements.
-
- // Allow the "shortcut" format $(elem).hashchange( fn ) for binding and
- // $(elem).hashchange() for triggering, like jQuery does for built-in events.
- $.fn[ str_hashchange ] = function( fn ) {
- return fn ? this.bind( str_hashchange, fn ) : this.trigger( str_hashchange );
- };
-
- // Property: jQuery.fn.hashchange.delay
- //
- // The numeric interval (in milliseconds) at which the <hashchange event>
- // polling loop executes. Defaults to 50.
-
- // Property: jQuery.fn.hashchange.domain
- //
- // If you're setting document.domain in your JavaScript, and you want hash
- // history to work in IE6/7, not only must this property be set, but you must
- // also set document.domain BEFORE jQuery is loaded into the page. This
- // property is only applicable if you are supporting IE6/7 (or IE8 operating
- // in "IE7 compatibility" mode).
- //
- // In addition, the <jQuery.fn.hashchange.src> property must be set to the
- // path of the included "document-domain.html" file, which can be renamed or
- // modified if necessary (note that the document.domain specified must be the
- // same in both your main JavaScript as well as in this file).
- //
- // Usage:
- //
- // jQuery.fn.hashchange.domain = document.domain;
-
- // Property: jQuery.fn.hashchange.src
- //
- // If, for some reason, you need to specify an Iframe src file (for example,
- // when setting document.domain as in <jQuery.fn.hashchange.domain>), you can
- // do so using this property. Note that when using this property, history
- // won't be recorded in IE6/7 until the Iframe src file loads. This property
- // is only applicable if you are supporting IE6/7 (or IE8 operating in "IE7
- // compatibility" mode).
- //
- // Usage:
- //
- // jQuery.fn.hashchange.src = 'path/to/file.html';
-
- $.fn[ str_hashchange ].delay = 50;
- /*
- $.fn[ str_hashchange ].domain = null;
- $.fn[ str_hashchange ].src = null;
- */
-
- // Event: hashchange event
- //
- // Fired when location.hash changes. In browsers that support it, the native
- // HTML5 window.onhashchange event is used, otherwise a polling loop is
- // initialized, running every <jQuery.fn.hashchange.delay> milliseconds to
- // see if the hash has changed. In IE6/7 (and IE8 operating in "IE7
- // compatibility" mode), a hidden Iframe is created to allow the back button
- // and hash-based history to work.
- //
- // Usage as described in <jQuery.fn.hashchange>:
- //
- // > // Bind an event handler.
- // > jQuery(window).hashchange( function(e) {
- // > var hash = location.hash;
- // > ...
- // > });
- // >
- // > // Manually trigger the event handler.
- // > jQuery(window).hashchange();
- //
- // A more verbose usage that allows for event namespacing:
- //
- // > // Bind an event handler.
- // > jQuery(window).bind( 'hashchange', function(e) {
- // > var hash = location.hash;
- // > ...
- // > });
- // >
- // > // Manually trigger the event handler.
- // > jQuery(window).trigger( 'hashchange' );
- //
- // Additional Notes:
- //
- // * The polling loop and Iframe are not created until at least one handler
- // is actually bound to the 'hashchange' event.
- // * If you need the bound handler(s) to execute immediately, in cases where
- // a location.hash exists on page load, via bookmark or page refresh for
- // example, use jQuery(window).hashchange() or the more verbose
- // jQuery(window).trigger( 'hashchange' ).
- // * The event can be bound before DOM ready, but since it won't be usable
- // before then in IE6/7 (due to the necessary Iframe), recommended usage is
- // to bind it inside a DOM ready handler.
-
- // Override existing $.event.special.hashchange methods (allowing this plugin
- // to be defined after jQuery BBQ in BBQ's source code).
- special[ str_hashchange ] = $.extend( special[ str_hashchange ], {
-
- // Called only when the first 'hashchange' event is bound to window.
- setup: function() {
- // If window.onhashchange is supported natively, there's nothing to do..
- if ( supports_onhashchange ) { return false; }
-
- // Otherwise, we need to create our own. And we don't want to call this
- // until the user binds to the event, just in case they never do, since it
- // will create a polling loop and possibly even a hidden Iframe.
- $( fake_onhashchange.start );
- },
-
- // Called only when the last 'hashchange' event is unbound from window.
- teardown: function() {
- // If window.onhashchange is supported natively, there's nothing to do..
- if ( supports_onhashchange ) { return false; }
-
- // Otherwise, we need to stop ours (if possible).
- $( fake_onhashchange.stop );
- }
-
- });
-
- // fake_onhashchange does all the work of triggering the window.onhashchange
- // event for browsers that don't natively support it, including creating a
- // polling loop to watch for hash changes and in IE 6/7 creating a hidden
- // Iframe to enable back and forward.
- fake_onhashchange = (function(){
- var self = {},
- timeout_id,
-
- // Remember the initial hash so it doesn't get triggered immediately.
- last_hash = get_fragment(),
-
- fn_retval = function(val){ return val; },
- history_set = fn_retval,
- history_get = fn_retval;
-
- // Start the polling loop.
- self.start = function() {
- timeout_id || poll();
- };
-
- // Stop the polling loop.
- self.stop = function() {
- timeout_id && clearTimeout( timeout_id );
- timeout_id = undefined;
- };
-
- // This polling loop checks every $.fn.hashchange.delay milliseconds to see
- // if location.hash has changed, and triggers the 'hashchange' event on
- // window when necessary.
- function poll() {
- var hash = get_fragment(),
- history_hash = history_get( last_hash );
-
- if ( hash !== last_hash ) {
- history_set( last_hash = hash, history_hash );
-
- $(window).trigger( str_hashchange );
-
- } else if ( history_hash !== last_hash ) {
- location.href = location.href.replace( /#.*/, '' ) + history_hash;
- }
-
- timeout_id = setTimeout( poll, $.fn[ str_hashchange ].delay );
- };
-
- // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
- // vvvvvvvvvvvvvvvvvvv REMOVE IF NOT SUPPORTING IE6/7/8 vvvvvvvvvvvvvvvvvvv
- // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
- $.browser.msie && !supports_onhashchange && (function(){
- // Not only do IE6/7 need the "magical" Iframe treatment, but so does IE8
- // when running in "IE7 compatibility" mode.
-
- var iframe,
- iframe_src;
-
- // When the event is bound and polling starts in IE 6/7, create a hidden
- // Iframe for history handling.
- self.start = function(){
- if ( !iframe ) {
- iframe_src = $.fn[ str_hashchange ].src;
- iframe_src = iframe_src && iframe_src + get_fragment();
-
- // Create hidden Iframe. Attempt to make Iframe as hidden as possible
- // by using techniques from http://www.paciellogroup.com/blog/?p=604.
- iframe = $('<iframe tabindex="-1" title="empty"/>').hide()
-
- // When Iframe has completely loaded, initialize the history and
- // start polling.
- .one( 'load', function(){
- iframe_src || history_set( get_fragment() );
- poll();
- })
-
- // Load Iframe src if specified, otherwise nothing.
- .attr( 'src', iframe_src || 'javascript:0' )
-
- // Append Iframe after the end of the body to prevent unnecessary
- // initial page scrolling (yes, this works).
- .insertAfter( 'body' )[0].contentWindow;
-
- // Whenever `document.title` changes, update the Iframe's title to
- // prettify the back/next history menu entries. Since IE sometimes
- // errors with "Unspecified error" the very first time this is set
- // (yes, very useful) wrap this with a try/catch block.
- doc.onpropertychange = function(){
- try {
- if ( event.propertyName === 'title' ) {
- iframe.document.title = doc.title;
- }
- } catch(e) {}
- };
-
- }
- };
-
- // Override the "stop" method since an IE6/7 Iframe was created. Even
- // if there are no longer any bound event handlers, the polling loop
- // is still necessary for back/next to work at all!
- self.stop = fn_retval;
-
- // Get history by looking at the hidden Iframe's location.hash.
- history_get = function() {
- return get_fragment( iframe.location.href );
- };
-
- // Set a new history item by opening and then closing the Iframe
- // document, *then* setting its location.hash. If document.domain has
- // been set, update that as well.
- history_set = function( hash, history_hash ) {
- var iframe_doc = iframe.document,
- domain = $.fn[ str_hashchange ].domain;
-
- if ( hash !== history_hash ) {
- // Update Iframe with any initial `document.title` that might be set.
- iframe_doc.title = doc.title;
-
- // Opening the Iframe's document after it has been closed is what
- // actually adds a history entry.
- iframe_doc.open();
-
- // Set document.domain for the Iframe document as well, if necessary.
- domain && iframe_doc.write( '<script>document.domain="' + domain + '"</script>' );
-
- iframe_doc.close();
-
- // Update the Iframe's hash, for great justice.
- iframe.location.hash = hash;
- }
- };
-
- })();
- // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- // ^^^^^^^^^^^^^^^^^^^ REMOVE IF NOT SUPPORTING IE6/7/8 ^^^^^^^^^^^^^^^^^^^
- // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
- return self;
- })();
-
-})(jQuery,this);
-/*
-* "page" plugin
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.page", $.mobile.widget, {
- options: {
- theme: "c",
- domCache: false,
- keepNativeDefault: ":jqmData(role='none'), :jqmData(role='nojs')"
- },
-
- _create: function() {
-
- this._trigger( "beforecreate" );
-
- this.element
- .attr( "tabindex", "0" )
- .addClass( "ui-page ui-body-" + this.options.theme );
- },
-
- keepNativeSelector: function() {
- var options = this.options,
- keepNativeDefined = options.keepNative && $.trim(options.keepNative);
-
- if( keepNativeDefined && options.keepNative !== options.keepNativeDefault ){
- return [options.keepNative, options.keepNativeDefault].join(", ");
- }
-
- return options.keepNativeDefault;
- }
-});
-})( jQuery );
-/*
-* "core" - The base file for jQm
-*/
-
-(function( $, window, undefined ) {
-
- var nsNormalizeDict = {};
-
- // jQuery.mobile configurable options
- $.extend( $.mobile, {
-
- // Namespace used framework-wide for data-attrs. Default is no namespace
- ns: "",
-
- // Define the url parameter used for referencing widget-generated sub-pages.
- // Translates to to example.html&ui-page=subpageIdentifier
- // hash segment before &ui-page= is used to make Ajax request
- subPageUrlKey: "ui-page",
-
- // Class assigned to page currently in view, and during transitions
- activePageClass: "ui-page-active",
-
- // Class used for "active" button state, from CSS framework
- activeBtnClass: "ui-btn-active",
-
- // Automatically handle clicks and form submissions through Ajax, when same-domain
- ajaxEnabled: true,
-
- // Automatically load and show pages based on location.hash
- hashListeningEnabled: true,
-
- // disable to prevent jquery from bothering with links
- linkBindingEnabled: true,
-
- // Set default page transition - 'none' for no transitions
- defaultPageTransition: "slide",
-
- // Minimum scroll distance that will be remembered when returning to a page
- minScrollBack: 250,
-
- // Set default dialog transition - 'none' for no transitions
- defaultDialogTransition: "pop",
-
- // Show loading message during Ajax requests
- // if false, message will not appear, but loading classes will still be toggled on html el
- loadingMessage: "loading",
-
- // Error response message - appears when an Ajax page request fails
- pageLoadErrorMessage: "Error Loading Page",
-
- //automatically initialize the DOM when it's ready
- autoInitializePage: true,
-
- pushStateEnabled: true,
-
- // turn of binding to the native orientationchange due to android orientation behavior
- orientationChangeEnabled: true,
-
- // Support conditions that must be met in order to proceed
- // default enhanced qualifications are media query support OR IE 7+
- gradeA: function(){
- return $.support.mediaquery || $.mobile.browser.ie && $.mobile.browser.ie >= 7;
- },
-
- // TODO might be useful upstream in jquery itself ?
- keyCode: {
- ALT: 18,
- BACKSPACE: 8,
- CAPS_LOCK: 20,
- COMMA: 188,
- COMMAND: 91,
- COMMAND_LEFT: 91, // COMMAND
- COMMAND_RIGHT: 93,
- CONTROL: 17,
- DELETE: 46,
- DOWN: 40,
- END: 35,
- ENTER: 13,
- ESCAPE: 27,
- HOME: 36,
- INSERT: 45,
- LEFT: 37,
- MENU: 93, // COMMAND_RIGHT
- NUMPAD_ADD: 107,
- NUMPAD_DECIMAL: 110,
- NUMPAD_DIVIDE: 111,
- NUMPAD_ENTER: 108,
- NUMPAD_MULTIPLY: 106,
- NUMPAD_SUBTRACT: 109,
- PAGE_DOWN: 34,
- PAGE_UP: 33,
- PERIOD: 190,
- RIGHT: 39,
- SHIFT: 16,
- SPACE: 32,
- TAB: 9,
- UP: 38,
- WINDOWS: 91 // COMMAND
- },
-
- // Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
- silentScroll: function( ypos ) {
- if ( $.type( ypos ) !== "number" ) {
- ypos = $.mobile.defaultHomeScroll;
- }
-
- // prevent scrollstart and scrollstop events
- $.event.special.scrollstart.enabled = false;
-
- setTimeout(function() {
- window.scrollTo( 0, ypos );
- $( document ).trigger( "silentscroll", { x: 0, y: ypos });
- }, 20 );
-
- setTimeout(function() {
- $.event.special.scrollstart.enabled = true;
- }, 150 );
- },
-
- // Expose our cache for testing purposes.
- nsNormalizeDict: nsNormalizeDict,
-
- // Take a data attribute property, prepend the namespace
- // and then camel case the attribute string. Add the result
- // to our nsNormalizeDict so we don't have to do this again.
- nsNormalize: function( prop ) {
- if ( !prop ) {
- return;
- }
-
- return nsNormalizeDict[ prop ] || ( nsNormalizeDict[ prop ] = $.camelCase( $.mobile.ns + prop ) );
- },
-
- getInheritedTheme: function( el, defaultTheme ) {
-
- // Find the closest parent with a theme class on it. Note that
- // we are not using $.fn.closest() on purpose here because this
- // method gets called quite a bit and we need it to be as fast
- // as possible.
-
- var e = el[ 0 ],
- ltr = "",
- re = /ui-(bar|body)-([a-z])\b/,
- c, m;
-
- while ( e ) {
- var c = e.className || "";
- if ( ( m = re.exec( c ) ) && ( ltr = m[ 2 ] ) ) {
- // We found a parent with a theme class
- // on it so bail from this loop.
- break;
- }
- e = e.parentNode;
- }
-
- // Return the theme letter we found, if none, return the
- // specified default.
-
- return ltr || defaultTheme || "a";
- }
- });
-
- // Mobile version of data and removeData and hasData methods
- // ensures all data is set and retrieved using jQuery Mobile's data namespace
- $.fn.jqmData = function( prop, value ) {
- var result;
- if ( typeof prop != "undefined" ) {
- result = this.data( prop ? $.mobile.nsNormalize( prop ) : prop, value );
- }
- return result;
- };
-
- $.jqmData = function( elem, prop, value ) {
- var result;
- if ( typeof prop != "undefined" ) {
- result = $.data( elem, prop ? $.mobile.nsNormalize( prop ) : prop, value );
- }
- return result;
- };
-
- $.fn.jqmRemoveData = function( prop ) {
- return this.removeData( $.mobile.nsNormalize( prop ) );
- };
-
- $.jqmRemoveData = function( elem, prop ) {
- return $.removeData( elem, $.mobile.nsNormalize( prop ) );
- };
-
- $.fn.removeWithDependents = function() {
- $.removeWithDependents( this );
- };
-
- $.removeWithDependents = function( elem ) {
- var $elem = $( elem );
-
- ( $elem.jqmData('dependents') || $() ).remove();
- $elem.remove();
- };
-
- $.fn.addDependents = function( newDependents ) {
- $.addDependents( $(this), newDependents );
- };
-
- $.addDependents = function( elem, newDependents ) {
- var dependents = $(elem).jqmData( 'dependents' ) || $();
-
- $(elem).jqmData( 'dependents', $.merge(dependents, newDependents) );
- };
-
- // note that this helper doesn't attempt to handle the callback
- // or setting of an html elements text, its only purpose is
- // to return the html encoded version of the text in all cases. (thus the name)
- $.fn.getEncodedText = function() {
- return $( "<div/>" ).text( $(this).text() ).html();
- };
-
- // Monkey-patching Sizzle to filter the :jqmData selector
- var oldFind = $.find,
- jqmDataRE = /:jqmData\(([^)]*)\)/g;
-
- $.find = function( selector, context, ret, extra ) {
- selector = selector.replace( jqmDataRE, "[data-" + ( $.mobile.ns || "" ) + "$1]" );
-
- return oldFind.call( this, selector, context, ret, extra );
- };
-
- $.extend( $.find, oldFind );
-
- $.find.matches = function( expr, set ) {
- return $.find( expr, null, null, set );
- };
-
- $.find.matchesSelector = function( node, expr ) {
- return $.find( expr, null, null, [ node ] ).length > 0;
- };
-})( jQuery, this );
-
-/*
-* core utilities for auto ajax navigation, base tag mgmt,
-*/
-
-( function( $, undefined ) {
-
- //define vars for interal use
- var $window = $( window ),
- $html = $( 'html' ),
- $head = $( 'head' ),
-
- //url path helpers for use in relative url management
- path = {
-
- // This scary looking regular expression parses an absolute URL or its relative
- // variants (protocol, site, document, query, and hash), into the various
- // components (protocol, host, path, query, fragment, etc that make up the
- // URL as well as some other commonly used sub-parts. When used with RegExp.exec()
- // or String.match, it parses the URL into a results array that looks like this:
- //
- // [0]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content
- // [1]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread
- // [2]: http://jblas:password@mycompany.com:8080/mail/inbox
- // [3]: http://jblas:password@mycompany.com:8080
- // [4]: http:
- // [5]: //
- // [6]: jblas:password@mycompany.com:8080
- // [7]: jblas:password
- // [8]: jblas
- // [9]: password
- // [10]: mycompany.com:8080
- // [11]: mycompany.com
- // [12]: 8080
- // [13]: /mail/inbox
- // [14]: /mail/
- // [15]: inbox
- // [16]: ?msg=1234&type=unread
- // [17]: #msg-content
- //
- urlParseRE: /^(((([^:\/#\?]+:)?(?:(\/\/)((?:(([^:@\/#\?]+)(?:\:([^:@\/#\?]+))?)@)?(([^:\/#\?\]\[]+|\[[^\/\]@#?]+\])(?:\:([0-9]+))?))?)?)?((\/?(?:[^\/\?#]+\/+)*)([^\?#]*)))?(\?[^#]+)?)(#.*)?/,
-
- //Parse a URL into a structure that allows easy access to
- //all of the URL components by name.
- parseUrl: function( url ) {
- // If we're passed an object, we'll assume that it is
- // a parsed url object and just return it back to the caller.
- if ( $.type( url ) === "object" ) {
- return url;
- }
-
- var matches = path.urlParseRE.exec( url || "" ) || [];
-
- // Create an object that allows the caller to access the sub-matches
- // by name. Note that IE returns an empty string instead of undefined,
- // like all other browsers do, so we normalize everything so its consistent
- // no matter what browser we're running on.
- return {
- href: matches[ 0 ] || "",
- hrefNoHash: matches[ 1 ] || "",
- hrefNoSearch: matches[ 2 ] || "",
- domain: matches[ 3 ] || "",
- protocol: matches[ 4 ] || "",
- doubleSlash: matches[ 5 ] || "",
- authority: matches[ 6 ] || "",
- username: matches[ 8 ] || "",
- password: matches[ 9 ] || "",
- host: matches[ 10 ] || "",
- hostname: matches[ 11 ] || "",
- port: matches[ 12 ] || "",
- pathname: matches[ 13 ] || "",
- directory: matches[ 14 ] || "",
- filename: matches[ 15 ] || "",
- search: matches[ 16 ] || "",
- hash: matches[ 17 ] || ""
- };
- },
-
- //Turn relPath into an asbolute path. absPath is
- //an optional absolute path which describes what
- //relPath is relative to.
- makePathAbsolute: function( relPath, absPath ) {
- if ( relPath && relPath.charAt( 0 ) === "/" ) {
- return relPath;
- }
-
- relPath = relPath || "";
- absPath = absPath ? absPath.replace( /^\/|(\/[^\/]*|[^\/]+)$/g, "" ) : "";
-
- var absStack = absPath ? absPath.split( "/" ) : [],
- relStack = relPath.split( "/" );
- for ( var i = 0; i < relStack.length; i++ ) {
- var d = relStack[ i ];
- switch ( d ) {
- case ".":
- break;
- case "..":
- if ( absStack.length ) {
- absStack.pop();
- }
- break;
- default:
- absStack.push( d );
- break;
- }
- }
- return "/" + absStack.join( "/" );
- },
-
- //Returns true if both urls have the same domain.
- isSameDomain: function( absUrl1, absUrl2 ) {
- return path.parseUrl( absUrl1 ).domain === path.parseUrl( absUrl2 ).domain;
- },
-
- //Returns true for any relative variant.
- isRelativeUrl: function( url ) {
- // All relative Url variants have one thing in common, no protocol.
- return path.parseUrl( url ).protocol === "";
- },
-
- //Returns true for an absolute url.
- isAbsoluteUrl: function( url ) {
- return path.parseUrl( url ).protocol !== "";
- },
-
- //Turn the specified realtive URL into an absolute one. This function
- //can handle all relative variants (protocol, site, document, query, fragment).
- makeUrlAbsolute: function( relUrl, absUrl ) {
- if ( !path.isRelativeUrl( relUrl ) ) {
- return relUrl;
- }
-
- var relObj = path.parseUrl( relUrl ),
- absObj = path.parseUrl( absUrl ),
- protocol = relObj.protocol || absObj.protocol,
- doubleSlash = relObj.protocol ? relObj.doubleSlash : ( relObj.doubleSlash || absObj.doubleSlash ),
- authority = relObj.authority || absObj.authority,
- hasPath = relObj.pathname !== "",
- pathname = path.makePathAbsolute( relObj.pathname || absObj.filename, absObj.pathname ),
- search = relObj.search || ( !hasPath && absObj.search ) || "",
- hash = relObj.hash;
-
- return protocol + doubleSlash + authority + pathname + search + hash;
- },
-
- //Add search (aka query) params to the specified url.
- addSearchParams: function( url, params ) {
- var u = path.parseUrl( url ),
- p = ( typeof params === "object" ) ? $.param( params ) : params,
- s = u.search || "?";
- return u.hrefNoSearch + s + ( s.charAt( s.length - 1 ) !== "?" ? "&" : "" ) + p + ( u.hash || "" );
- },
-
- convertUrlToDataUrl: function( absUrl ) {
- var u = path.parseUrl( absUrl );
- if ( path.isEmbeddedPage( u ) ) {
- // For embedded pages, remove the dialog hash key as in getFilePath(),
- // otherwise the Data Url won't match the id of the embedded Page.
- return u.hash.split( dialogHashKey )[0].replace( /^#/, "" );
- } else if ( path.isSameDomain( u, documentBase ) ) {
- return u.hrefNoHash.replace( documentBase.domain, "" );
- }
- return absUrl;
- },
-
- //get path from current hash, or from a file path
- get: function( newPath ) {
- if( newPath === undefined ) {
- newPath = location.hash;
- }
- return path.stripHash( newPath ).replace( /[^\/]*\.[^\/*]+$/, '' );
- },
-
- //return the substring of a filepath before the sub-page key, for making a server request
- getFilePath: function( path ) {
- var splitkey = '&' + $.mobile.subPageUrlKey;
- return path && path.split( splitkey )[0].split( dialogHashKey )[0];
- },
-
- //set location hash to path
- set: function( path ) {
- location.hash = path;
- },
-
- //test if a given url (string) is a path
- //NOTE might be exceptionally naive
- isPath: function( url ) {
- return ( /\// ).test( url );
- },
-
- //return a url path with the window's location protocol/hostname/pathname removed
- clean: function( url ) {
- return url.replace( documentBase.domain, "" );
- },
-
- //just return the url without an initial #
- stripHash: function( url ) {
- return url.replace( /^#/, "" );
- },
-
- //remove the preceding hash, any query params, and dialog notations
- cleanHash: function( hash ) {
- return path.stripHash( hash.replace( /\?.*$/, "" ).replace( dialogHashKey, "" ) );
- },
-
- //check whether a url is referencing the same domain, or an external domain or different protocol
- //could be mailto, etc
- isExternal: function( url ) {
- var u = path.parseUrl( url );
- return u.protocol && u.domain !== documentUrl.domain ? true : false;
- },
-
- hasProtocol: function( url ) {
- return ( /^(:?\w+:)/ ).test( url );
- },
-
- //check if the specified url refers to the first page in the main application document.
- isFirstPageUrl: function( url ) {
- // We only deal with absolute paths.
- var u = path.parseUrl( path.makeUrlAbsolute( url, documentBase ) ),
-
- // Does the url have the same path as the document?
- samePath = u.hrefNoHash === documentUrl.hrefNoHash || ( documentBaseDiffers && u.hrefNoHash === documentBase.hrefNoHash ),
-
- // Get the first page element.
- fp = $.mobile.firstPage,
-
- // Get the id of the first page element if it has one.
- fpId = fp && fp[0] ? fp[0].id : undefined;
-
- // The url refers to the first page if the path matches the document and
- // it either has no hash value, or the hash is exactly equal to the id of the
- // first page element.
- return samePath && ( !u.hash || u.hash === "#" || ( fpId && u.hash.replace( /^#/, "" ) === fpId ) );
- },
-
- isEmbeddedPage: function( url ) {
- var u = path.parseUrl( url );
-
- //if the path is absolute, then we need to compare the url against
- //both the documentUrl and the documentBase. The main reason for this
- //is that links embedded within external documents will refer to the
- //application document, whereas links embedded within the application
- //document will be resolved against the document base.
- if ( u.protocol !== "" ) {
- return ( u.hash && ( u.hrefNoHash === documentUrl.hrefNoHash || ( documentBaseDiffers && u.hrefNoHash === documentBase.hrefNoHash ) ) );
- }
- return (/^#/).test( u.href );
- }
- },
-
- //will be defined when a link is clicked and given an active class
- $activeClickedLink = null,
-
- //urlHistory is purely here to make guesses at whether the back or forward button was clicked
- //and provide an appropriate transition
- urlHistory = {
- // Array of pages that are visited during a single page load.
- // Each has a url and optional transition, title, and pageUrl (which represents the file path, in cases where URL is obscured, such as dialogs)
- stack: [],
-
- //maintain an index number for the active page in the stack
- activeIndex: 0,
-
- //get active
- getActive: function() {
- return urlHistory.stack[ urlHistory.activeIndex ];
- },
-
- getPrev: function() {
- return urlHistory.stack[ urlHistory.activeIndex - 1 ];
- },
-
- getNext: function() {
- return urlHistory.stack[ urlHistory.activeIndex + 1 ];
- },
-
- // addNew is used whenever a new page is added
- addNew: function( url, transition, title, pageUrl, role ) {
- //if there's forward history, wipe it
- if( urlHistory.getNext() ) {
- urlHistory.clearForward();
- }
-
- urlHistory.stack.push( {url : url, transition: transition, title: title, pageUrl: pageUrl, role: role } );
-
- urlHistory.activeIndex = urlHistory.stack.length - 1;
- },
-
- //wipe urls ahead of active index
- clearForward: function() {
- urlHistory.stack = urlHistory.stack.slice( 0, urlHistory.activeIndex + 1 );
- },
-
- directHashChange: function( opts ) {
- var back , forward, newActiveIndex, prev = this.getActive();
-
- // check if url isp in history and if it's ahead or behind current page
- $.each( urlHistory.stack, function( i, historyEntry ) {
-
- //if the url is in the stack, it's a forward or a back
- if( opts.currentUrl === historyEntry.url ) {
- //define back and forward by whether url is older or newer than current page
- back = i < urlHistory.activeIndex;
- forward = !back;
- newActiveIndex = i;
- }
- });
-
- // save new page index, null check to prevent falsey 0 result
- this.activeIndex = newActiveIndex !== undefined ? newActiveIndex : this.activeIndex;
-
- if( back ) {
- ( opts.either || opts.isBack )( true );
- } else if( forward ) {
- ( opts.either || opts.isForward )( false );
- }
- },
-
- //disable hashchange event listener internally to ignore one change
- //toggled internally when location.hash is updated to match the url of a successful page load
- ignoreNextHashChange: false
- },
-
- //define first selector to receive focus when a page is shown
- focusable = "[tabindex],a,button:visible,select:visible,input",
-
- //queue to hold simultanious page transitions
- pageTransitionQueue = [],
-
- //indicates whether or not page is in process of transitioning
- isPageTransitioning = false,
-
- //nonsense hash change key for dialogs, so they create a history entry
- dialogHashKey = "&ui-state=dialog",
-
- //existing base tag?
- $base = $head.children( "base" ),
-
- //tuck away the original document URL minus any fragment.
- documentUrl = path.parseUrl( location.href ),
-
- //if the document has an embedded base tag, documentBase is set to its
- //initial value. If a base tag does not exist, then we default to the documentUrl.
- documentBase = $base.length ? path.parseUrl( path.makeUrlAbsolute( $base.attr( "href" ), documentUrl.href ) ) : documentUrl,
-
- //cache the comparison once.
- documentBaseDiffers = ( documentUrl.hrefNoHash !== documentBase.hrefNoHash );
-
- //base element management, defined depending on dynamic base tag support
- var base = $.support.dynamicBaseTag ? {
-
- //define base element, for use in routing asset urls that are referenced in Ajax-requested markup
- element: ( $base.length ? $base : $( "<base>", { href: documentBase.hrefNoHash } ).prependTo( $head ) ),
-
- //set the generated BASE element's href attribute to a new page's base path
- set: function( href ) {
- base.element.attr( "href", path.makeUrlAbsolute( href, documentBase ) );
- },
-
- //set the generated BASE element's href attribute to a new page's base path
- reset: function() {
- base.element.attr( "href", documentBase.hrefNoHash );
- }
-
- } : undefined;
-
-/*
- internal utility functions
---------------------------------------*/
-
-
- //direct focus to the page title, or otherwise first focusable element
- function reFocus( page ) {
- var pageTitle = page.find( ".ui-title:eq(0)" );
-
- if( pageTitle.length ) {
- pageTitle.focus();
- }
- else{
- page.focus();
- }
- }
-
- //remove active classes after page transition or error
- function removeActiveLinkClass( forceRemoval ) {
- if( !!$activeClickedLink && ( !$activeClickedLink.closest( '.ui-page-active' ).length || forceRemoval ) ) {
- $activeClickedLink.removeClass( $.mobile.activeBtnClass );
- }
- $activeClickedLink = null;
- }
-
- function releasePageTransitionLock() {
- isPageTransitioning = false;
- if( pageTransitionQueue.length > 0 ) {
- $.mobile.changePage.apply( null, pageTransitionQueue.pop() );
- }
- }
-
- // Save the last scroll distance per page, before it is hidden
- var setLastScrollEnabled = true,
- firstScrollElem, getScrollElem, setLastScroll, delayedSetLastScroll;
-
- getScrollElem = function() {
- var scrollElem = $window, activePage,
- touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled;
-
- if( touchOverflow ){
- activePage = $( ".ui-page-active" );
- scrollElem = activePage.is( ".ui-native-fixed" ) ? activePage.find( ".ui-content" ) : activePage;
- }
-
- return scrollElem;
- };
-
- setLastScroll = function( scrollElem ) {
- // this barrier prevents setting the scroll value based on the browser
- // scrolling the window based on a hashchange
- if( !setLastScrollEnabled ) {
- return;
- }
-
- var active = $.mobile.urlHistory.getActive();
-
- if( active ) {
- var lastScroll = scrollElem && scrollElem.scrollTop();
-
- // Set active page's lastScroll prop.
- // If the location we're scrolling to is less than minScrollBack, let it go.
- active.lastScroll = lastScroll < $.mobile.minScrollBack ? $.mobile.defaultHomeScroll : lastScroll;
- }
- };
-
- // bind to scrollstop to gather scroll position. The delay allows for the hashchange
- // event to fire and disable scroll recording in the case where the browser scrolls
- // to the hash targets location (sometimes the top of the page). once pagechange fires
- // getLastScroll is again permitted to operate
- delayedSetLastScroll = function() {
- setTimeout( setLastScroll, 100, $(this) );
- };
-
- // disable an scroll setting when a hashchange has been fired, this only works
- // because the recording of the scroll position is delayed for 100ms after
- // the browser might have changed the position because of the hashchange
- $window.bind( $.support.pushState ? "popstate" : "hashchange", function() {
- setLastScrollEnabled = false;
- });
-
- // handle initial hashchange from chrome :(
- $window.one( $.support.pushState ? "popstate" : "hashchange", function() {
- setLastScrollEnabled = true;
- });
-
- // wait until the mobile page container has been determined to bind to pagechange
- $window.one( "pagecontainercreate", function(){
- // once the page has changed, re-enable the scroll recording
- $.mobile.pageContainer.bind( "pagechange", function() {
- var scrollElem = getScrollElem();
-
- setLastScrollEnabled = true;
-
- // remove any binding that previously existed on the get scroll
- // which may or may not be different than the scroll element determined for
- // this page previously
- scrollElem.unbind( "scrollstop", delayedSetLastScroll );
-
- // determine and bind to the current scoll element which may be the window
- // or in the case of touch overflow the element with touch overflow
- scrollElem.bind( "scrollstop", delayedSetLastScroll );
- });
- });
-
- // bind to scrollstop for the first page as "pagechange" won't be fired in that case
- getScrollElem().bind( "scrollstop", delayedSetLastScroll );
-
- // Make the iOS clock quick-scroll work again if we're using native overflow scrolling
- /*
- if( $.support.touchOverflow ){
- if( $.mobile.touchOverflowEnabled ){
- $( window ).bind( "scrollstop", function(){
- if( $( this ).scrollTop() === 0 ){
- $.mobile.activePage.scrollTop( 0 );
- }
- });
- }
- }
- */
-
- //function for transitioning between two existing pages
- function transitionPages( toPage, fromPage, transition, reverse ) {
-
- //get current scroll distance
- var active = $.mobile.urlHistory.getActive(),
- touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
- toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ),
- screenHeight = getScreenHeight();
-
- // Scroll to top, hide addr bar
- window.scrollTo( 0, $.mobile.defaultHomeScroll );
-
- if( fromPage ) {
- //trigger before show/hide events
- fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } );
- }
-
- if( !touchOverflow){
- toPage.height( screenHeight + toScroll );
- }
-
- toPage.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } );
-
- //clear page loader
- $.mobile.hidePageLoadingMsg();
-
- if( touchOverflow && toScroll ){
-
- toPage.addClass( "ui-mobile-pre-transition" );
- // Send focus to page as it is now display: block
- reFocus( toPage );
-
- //set page's scrollTop to remembered distance
- if( toPage.is( ".ui-native-fixed" ) ){
- toPage.find( ".ui-content" ).scrollTop( toScroll );
- }
- else{
- toPage.scrollTop( toScroll );
- }
- }
-
- //find the transition handler for the specified transition. If there
- //isn't one in our transitionHandlers dictionary, use the default one.
- //call the handler immediately to kick-off the transition.
- var th = $.mobile.transitionHandlers[transition || "none"] || $.mobile.defaultTransitionHandler,
- promise = th( transition, reverse, toPage, fromPage );
-
- promise.done(function() {
- //reset toPage height back
- if( !touchOverflow ){
- toPage.height( "" );
- // Send focus to the newly shown page
- reFocus( toPage );
- }
-
- // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
- if( !touchOverflow ){
- $.mobile.silentScroll( toScroll );
- }
-
- //trigger show/hide events
- if( fromPage ) {
- if( !touchOverflow ){
- fromPage.height( "" );
- }
-
- fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );
- }
-
- //trigger pageshow, define prevPage as either fromPage or empty jQuery obj
- toPage.data( "page" )._trigger( "show", null, { prevPage: fromPage || $( "" ) } );
- });
-
- return promise;
- }
-
- //simply set the active page's minimum height to screen height, depending on orientation
- function getScreenHeight(){
- var orientation = $.event.special.orientationchange.orientation(),
- port = orientation === "portrait",
- winMin = port ? 480 : 320,
- screenHeight = port ? screen.availHeight : screen.availWidth,
- winHeight = Math.max( winMin, $( window ).height() ),
- pageMin = Math.min( screenHeight, winHeight );
-
- return pageMin;
- }
-
- $.mobile.getScreenHeight = getScreenHeight;
-
- //simply set the active page's minimum height to screen height, depending on orientation
- function resetActivePageHeight(){
- // Don't apply this height in touch overflow enabled mode
- if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){
- return;
- }
- $( "." + $.mobile.activePageClass ).css( "min-height", getScreenHeight() );
- }
-
- //shared page enhancements
- function enhancePage( $page, role ) {
- // If a role was specified, make sure the data-role attribute
- // on the page element is in sync.
- if( role ) {
- $page.attr( "data-" + $.mobile.ns + "role", role );
- }
-
- //run page plugin
- $page.page();
- }
-
-/* exposed $.mobile methods */
-
- //animation complete callback
- $.fn.animationComplete = function( callback ) {
- if( $.support.cssTransitions ) {
- return $( this ).one( 'webkitAnimationEnd', callback );
- }
- else{
- // defer execution for consistency between webkit/non webkit
- setTimeout( callback, 0 );
- return $( this );
- }
- };
-
- //expose path object on $.mobile
- $.mobile.path = path;
-
- //expose base object on $.mobile
- $.mobile.base = base;
-
- //history stack
- $.mobile.urlHistory = urlHistory;
-
- $.mobile.dialogHashKey = dialogHashKey;
-
- //default non-animation transition handler
- $.mobile.noneTransitionHandler = function( name, reverse, $toPage, $fromPage ) {
- if ( $fromPage ) {
- $fromPage.removeClass( $.mobile.activePageClass );
- }
- $toPage.addClass( $.mobile.activePageClass );
-
- return $.Deferred().resolve( name, reverse, $toPage, $fromPage ).promise();
- };
-
- //default handler for unknown transitions
- $.mobile.defaultTransitionHandler = $.mobile.noneTransitionHandler;
-
- //transition handler dictionary for 3rd party transitions
- $.mobile.transitionHandlers = {
- none: $.mobile.defaultTransitionHandler
- };
-
- //enable cross-domain page support
- $.mobile.allowCrossDomainPages = false;
-
- //return the original document url
- $.mobile.getDocumentUrl = function(asParsedObject) {
- return asParsedObject ? $.extend( {}, documentUrl ) : documentUrl.href;
- };
-
- //return the original document base url
- $.mobile.getDocumentBase = function(asParsedObject) {
- return asParsedObject ? $.extend( {}, documentBase ) : documentBase.href;
- };
-
- $.mobile._bindPageRemove = function() {
- var page = $(this);
-
- // when dom caching is not enabled or the page is embedded bind to remove the page on hide
- if( !page.data("page").options.domCache
- && page.is(":jqmData(external-page='true')") ) {
-
- page.bind( 'pagehide.remove', function() {
- var $this = $( this ),
- prEvent = new $.Event( "pageremove" );
-
- $this.trigger( prEvent );
-
- if( !prEvent.isDefaultPrevented() ){
- $this.removeWithDependents();
- }
- });
- }
- };
-
- // Load a page into the DOM.
- $.mobile.loadPage = function( url, options ) {
- // This function uses deferred notifications to let callers
- // know when the page is done loading, or if an error has occurred.
- var deferred = $.Deferred(),
-
- // The default loadPage options with overrides specified by
- // the caller.
- settings = $.extend( {}, $.mobile.loadPage.defaults, options ),
-
- // The DOM element for the page after it has been loaded.
- page = null,
-
- // If the reloadPage option is true, and the page is already
- // in the DOM, dupCachedPage will be set to the page element
- // so that it can be removed after the new version of the
- // page is loaded off the network.
- dupCachedPage = null,
-
- // determine the current base url
- findBaseWithDefault = function(){
- var closestBase = ( $.mobile.activePage && getClosestBaseUrl( $.mobile.activePage ) );
- return closestBase || documentBase.hrefNoHash;
- },
-
- // The absolute version of the URL passed into the function. This
- // version of the URL may contain dialog/subpage params in it.
- absUrl = path.makeUrlAbsolute( url, findBaseWithDefault() );
-
-
- // If the caller provided data, and we're using "get" request,
- // append the data to the URL.
- if ( settings.data && settings.type === "get" ) {
- absUrl = path.addSearchParams( absUrl, settings.data );
- settings.data = undefined;
- }
-
- // If the caller is using a "post" request, reloadPage must be true
- if( settings.data && settings.type === "post" ){
- settings.reloadPage = true;
- }
-
- // The absolute version of the URL minus any dialog/subpage params.
- // In otherwords the real URL of the page to be loaded.
- var fileUrl = path.getFilePath( absUrl ),
-
- // The version of the Url actually stored in the data-url attribute of
- // the page. For embedded pages, it is just the id of the page. For pages
- // within the same domain as the document base, it is the site relative
- // path. For cross-domain pages (Phone Gap only) the entire absolute Url
- // used to load the page.
- dataUrl = path.convertUrlToDataUrl( absUrl );
-
- // Make sure we have a pageContainer to work with.
- settings.pageContainer = settings.pageContainer || $.mobile.pageContainer;
-
- // Check to see if the page already exists in the DOM.
- page = settings.pageContainer.children( ":jqmData(url='" + dataUrl + "')" );
-
- // If we failed to find the page, check to see if the url is a
- // reference to an embedded page. If so, it may have been dynamically
- // injected by a developer, in which case it would be lacking a data-url
- // attribute and in need of enhancement.
- if ( page.length === 0 && dataUrl && !path.isPath( dataUrl ) ) {
- page = settings.pageContainer.children( "#" + dataUrl )
- .attr( "data-" + $.mobile.ns + "url", dataUrl );
- }
-
- // If we failed to find a page in the DOM, check the URL to see if it
- // refers to the first page in the application. If it isn't a reference
- // to the first page and refers to non-existent embedded page, error out.
- if ( page.length === 0 ) {
- if ( $.mobile.firstPage && path.isFirstPageUrl( fileUrl ) ) {
- // Check to make sure our cached-first-page is actually
- // in the DOM. Some user deployed apps are pruning the first
- // page from the DOM for various reasons, we check for this
- // case here because we don't want a first-page with an id
- // falling through to the non-existent embedded page error
- // case. If the first-page is not in the DOM, then we let
- // things fall through to the ajax loading code below so
- // that it gets reloaded.
- if ( $.mobile.firstPage.parent().length ) {
- page = $( $.mobile.firstPage );
- }
- } else if ( path.isEmbeddedPage( fileUrl ) ) {
- deferred.reject( absUrl, options );
- return deferred.promise();
- }
- }
-
- // Reset base to the default document base.
- if ( base ) {
- base.reset();
- }
-
- // If the page we are interested in is already in the DOM,
- // and the caller did not indicate that we should force a
- // reload of the file, we are done. Otherwise, track the
- // existing page as a duplicated.
- if ( page.length ) {
- if ( !settings.reloadPage ) {
- enhancePage( page, settings.role );
- deferred.resolve( absUrl, options, page );
- return deferred.promise();
- }
- dupCachedPage = page;
- }
-
- var mpc = settings.pageContainer,
- pblEvent = new $.Event( "pagebeforeload" ),
- triggerData = { url: url, absUrl: absUrl, dataUrl: dataUrl, deferred: deferred, options: settings };
-
- // Let listeners know we're about to load a page.
- mpc.trigger( pblEvent, triggerData );
-
- // If the default behavior is prevented, stop here!
- if( pblEvent.isDefaultPrevented() ){
- return deferred.promise();
- }
-
- if ( settings.showLoadMsg ) {
-
- // This configurable timeout allows cached pages a brief delay to load without showing a message
- var loadMsgDelay = setTimeout(function(){
- $.mobile.showPageLoadingMsg();
- }, settings.loadMsgDelay ),
-
- // Shared logic for clearing timeout and removing message.
- hideMsg = function(){
-
- // Stop message show timer
- clearTimeout( loadMsgDelay );
-
- // Hide loading message
- $.mobile.hidePageLoadingMsg();
- };
- }
-
- if ( !( $.mobile.allowCrossDomainPages || path.isSameDomain( documentUrl, absUrl ) ) ) {
- deferred.reject( absUrl, options );
- } else {
- // Load the new page.
- $.ajax({
- url: fileUrl,
- type: settings.type,
- data: settings.data,
- dataType: "html",
- success: function( html, textStatus, xhr ) {
- //pre-parse html to check for a data-url,
- //use it as the new fileUrl, base path, etc
- var all = $( "<div></div>" ),
-
- //page title regexp
- newPageTitle = html.match( /<title[^>]*>([^<]*)/ ) && RegExp.$1,
-
- // TODO handle dialogs again
- pageElemRegex = new RegExp( "(<[^>]+\\bdata-" + $.mobile.ns + "role=[\"']?page[\"']?[^>]*>)" ),
- dataUrlRegex = new RegExp( "\\bdata-" + $.mobile.ns + "url=[\"']?([^\"'>]*)[\"']?" );
-
-
- // data-url must be provided for the base tag so resource requests can be directed to the
- // correct url. loading into a temprorary element makes these requests immediately
- if( pageElemRegex.test( html )
- && RegExp.$1
- && dataUrlRegex.test( RegExp.$1 )
- && RegExp.$1 ) {
- url = fileUrl = path.getFilePath( RegExp.$1 );
- }
-
- if ( base ) {
- base.set( fileUrl );
- }
-
- //workaround to allow scripts to execute when included in page divs
- all.get( 0 ).innerHTML = html;
- page = all.find( ":jqmData(role='page'), :jqmData(role='dialog')" ).first();
-
- //if page elem couldn't be found, create one and insert the body element's contents
- if( !page.length ){
- page = $( "<div data-" + $.mobile.ns + "role='page'>" + html.split( /<\/?body[^>]*>/gmi )[1] + "</div>" );
- }
-
- if ( newPageTitle && !page.jqmData( "title" ) ) {
- if ( ~newPageTitle.indexOf( "&" ) ) {
- newPageTitle = $( "<div>" + newPageTitle + "</div>" ).text();
- }
- page.jqmData( "title", newPageTitle );
- }
-
- //rewrite src and href attrs to use a base url
- if( !$.support.dynamicBaseTag ) {
- var newPath = path.get( fileUrl );
- page.find( "[src], link[href], a[rel='external'], :jqmData(ajax='false'), a[target]" ).each(function() {
- var thisAttr = $( this ).is( '[href]' ) ? 'href' :
- $(this).is('[src]') ? 'src' : 'action',
- thisUrl = $( this ).attr( thisAttr );
-
- // XXX_jblas: We need to fix this so that it removes the document
- // base URL, and then prepends with the new page URL.
- //if full path exists and is same, chop it - helps IE out
- thisUrl = thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );
-
- if( !/^(\w+:|#|\/)/.test( thisUrl ) ) {
- $( this ).attr( thisAttr, newPath + thisUrl );
- }
- });
- }
-
- //append to page and enhance
- // TODO taging a page with external to make sure that embedded pages aren't removed
- // by the various page handling code is bad. Having page handling code in many
- // places is bad. Solutions post 1.0
- page
- .attr( "data-" + $.mobile.ns + "url", path.convertUrlToDataUrl( fileUrl ) )
- .attr( "data-" + $.mobile.ns + "external-page", true )
- .appendTo( settings.pageContainer );
-
- // wait for page creation to leverage options defined on widget
- page.one( 'pagecreate', $.mobile._bindPageRemove );
-
- enhancePage( page, settings.role );
-
- // Enhancing the page may result in new dialogs/sub pages being inserted
- // into the DOM. If the original absUrl refers to a sub-page, that is the
- // real page we are interested in.
- if ( absUrl.indexOf( "&" + $.mobile.subPageUrlKey ) > -1 ) {
- page = settings.pageContainer.children( ":jqmData(url='" + dataUrl + "')" );
- }
-
- //bind pageHide to removePage after it's hidden, if the page options specify to do so
-
- // Remove loading message.
- if ( settings.showLoadMsg ) {
- hideMsg();
- }
-
- // Add the page reference and xhr to our triggerData.
- triggerData.xhr = xhr;
- triggerData.textStatus = textStatus;
- triggerData.page = page;
-
- // Let listeners know the page loaded successfully.
- settings.pageContainer.trigger( "pageload", triggerData );
-
- deferred.resolve( absUrl, options, page, dupCachedPage );
- },
- error: function( xhr, textStatus, errorThrown ) {
- //set base back to current path
- if( base ) {
- base.set( path.get() );
- }
-
- // Add error info to our triggerData.
- triggerData.xhr = xhr;
- triggerData.textStatus = textStatus;
- triggerData.errorThrown = errorThrown;
-
- var plfEvent = new $.Event( "pageloadfailed" );
-
- // Let listeners know the page load failed.
- settings.pageContainer.trigger( plfEvent, triggerData );
-
- // If the default behavior is prevented, stop here!
- // Note that it is the responsibility of the listener/handler
- // that called preventDefault(), to resolve/reject the
- // deferred object within the triggerData.
- if( plfEvent.isDefaultPrevented() ){
- return;
- }
-
- // Remove loading message.
- if ( settings.showLoadMsg ) {
-
- // Remove loading message.
- hideMsg();
-
- //show error message
- $( "<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>"+ $.mobile.pageLoadErrorMessage +"</h1></div>" )
- .css({ "display": "block", "opacity": 0.96, "top": $window.scrollTop() + 100 })
- .appendTo( settings.pageContainer )
- .delay( 800 )
- .fadeOut( 400, function() {
- $( this ).remove();
- });
- }
-
- deferred.reject( absUrl, options );
- }
- });
- }
-
- return deferred.promise();
- };
-
- $.mobile.loadPage.defaults = {
- type: "get",
- data: undefined,
- reloadPage: false,
- role: undefined, // By default we rely on the role defined by the @data-role attribute.
- showLoadMsg: false,
- pageContainer: undefined,
- loadMsgDelay: 50 // This delay allows loads that pull from browser cache to occur without showing the loading message.
- };
-
- // Show a specific page in the page container.
- $.mobile.changePage = function( toPage, options ) {
- // If we are in the midst of a transition, queue the current request.
- // We'll call changePage() once we're done with the current transition to
- // service the request.
- if( isPageTransitioning ) {
- pageTransitionQueue.unshift( arguments );
- return;
- }
-
- var settings = $.extend( {}, $.mobile.changePage.defaults, options );
-
- // Make sure we have a pageContainer to work with.
- settings.pageContainer = settings.pageContainer || $.mobile.pageContainer;
-
- // Make sure we have a fromPage.
- settings.fromPage = settings.fromPage || $.mobile.activePage;
-
- var mpc = settings.pageContainer,
- pbcEvent = new $.Event( "pagebeforechange" ),
- triggerData = { toPage: toPage, options: settings };
-
- // Let listeners know we're about to change the current page.
- mpc.trigger( pbcEvent, triggerData );
-
- // If the default behavior is prevented, stop here!
- if( pbcEvent.isDefaultPrevented() ){
- return;
- }
-
- // We allow "pagebeforechange" observers to modify the toPage in the trigger
- // data to allow for redirects. Make sure our toPage is updated.
-
- toPage = triggerData.toPage;
-
- // Set the isPageTransitioning flag to prevent any requests from
- // entering this method while we are in the midst of loading a page
- // or transitioning.
-
- isPageTransitioning = true;
-
- // If the caller passed us a url, call loadPage()
- // to make sure it is loaded into the DOM. We'll listen
- // to the promise object it returns so we know when
- // it is done loading or if an error ocurred.
- if ( typeof toPage == "string" ) {
- $.mobile.loadPage( toPage, settings )
- .done(function( url, options, newPage, dupCachedPage ) {
- isPageTransitioning = false;
- options.duplicateCachedPage = dupCachedPage;
- $.mobile.changePage( newPage, options );
- })
- .fail(function( url, options ) {
- isPageTransitioning = false;
-
- //clear out the active button state
- removeActiveLinkClass( true );
-
- //release transition lock so navigation is free again
- releasePageTransitionLock();
- settings.pageContainer.trigger( "pagechangefailed", triggerData );
- });
- return;
- }
-
- // If we are going to the first-page of the application, we need to make
- // sure settings.dataUrl is set to the application document url. This allows
- // us to avoid generating a document url with an id hash in the case where the
- // first-page of the document has an id attribute specified.
- if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl ) {
- settings.dataUrl = documentUrl.hrefNoHash;
- }
-
- // The caller passed us a real page DOM element. Update our
- // internal state and then trigger a transition to the page.
- var fromPage = settings.fromPage,
- url = ( settings.dataUrl && path.convertUrlToDataUrl( settings.dataUrl ) ) || toPage.jqmData( "url" ),
- // The pageUrl var is usually the same as url, except when url is obscured as a dialog url. pageUrl always contains the file path
- pageUrl = url,
- fileUrl = path.getFilePath( url ),
- active = urlHistory.getActive(),
- activeIsInitialPage = urlHistory.activeIndex === 0,
- historyDir = 0,
- pageTitle = document.title,
- isDialog = settings.role === "dialog" || toPage.jqmData( "role" ) === "dialog";
-
- // By default, we prevent changePage requests when the fromPage and toPage
- // are the same element, but folks that generate content manually/dynamically
- // and reuse pages want to be able to transition to the same page. To allow
- // this, they will need to change the default value of allowSamePageTransition
- // to true, *OR*, pass it in as an option when they manually call changePage().
- // It should be noted that our default transition animations assume that the
- // formPage and toPage are different elements, so they may behave unexpectedly.
- // It is up to the developer that turns on the allowSamePageTransitiona option
- // to either turn off transition animations, or make sure that an appropriate
- // animation transition is used.
- if( fromPage && fromPage[0] === toPage[0] && !settings.allowSamePageTransition ) {
- isPageTransitioning = false;
- mpc.trigger( "pagechange", triggerData );
- return;
- }
-
- // We need to make sure the page we are given has already been enhanced.
- enhancePage( toPage, settings.role );
-
- // If the changePage request was sent from a hashChange event, check to see if the
- // page is already within the urlHistory stack. If so, we'll assume the user hit
- // the forward/back button and will try to match the transition accordingly.
- if( settings.fromHashChange ) {
- urlHistory.directHashChange({
- currentUrl: url,
- isBack: function() { historyDir = -1; },
- isForward: function() { historyDir = 1; }
- });
- }
-
- // Kill the keyboard.
- // XXX_jblas: We need to stop crawling the entire document to kill focus. Instead,
- // we should be tracking focus with a live() handler so we already have
- // the element in hand at this point.
- // Wrap this in a try/catch block since IE9 throw "Unspecified error" if document.activeElement
- // is undefined when we are in an IFrame.
- try {
- if(document.activeElement && document.activeElement.nodeName.toLowerCase() != 'body') {
- $(document.activeElement).blur();
- } else {
- $( "input:focus, textarea:focus, select:focus" ).blur();
- }
- } catch(e) {}
-
- // If we're displaying the page as a dialog, we don't want the url
- // for the dialog content to be used in the hash. Instead, we want
- // to append the dialogHashKey to the url of the current page.
- if ( isDialog && active ) {
- // on the initial page load active.url is undefined and in that case should
- // be an empty string. Moving the undefined -> empty string back into
- // urlHistory.addNew seemed imprudent given undefined better represents
- // the url state
- url = ( active.url || "" ) + dialogHashKey;
- }
-
- // Set the location hash.
- if( settings.changeHash !== false && url ) {
- //disable hash listening temporarily
- urlHistory.ignoreNextHashChange = true;
- //update hash and history
- path.set( url );
- }
-
- // if title element wasn't found, try the page div data attr too
- // If this is a deep-link or a reload ( active === undefined ) then just use pageTitle
- var newPageTitle = ( !active )? pageTitle : toPage.jqmData( "title" ) || toPage.children(":jqmData(role='header')").find(".ui-title" ).getEncodedText();
- if( !!newPageTitle && pageTitle == document.title ) {
- pageTitle = newPageTitle;
- }
- if ( !toPage.jqmData( "title" ) ) {
- toPage.jqmData( "title", pageTitle );
- }
-
- // Make sure we have a transition defined.
- settings.transition = settings.transition
- || ( ( historyDir && !activeIsInitialPage ) ? active.transition : undefined )
- || ( isDialog ? $.mobile.defaultDialogTransition : $.mobile.defaultPageTransition );
-
- //add page to history stack if it's not back or forward
- if( !historyDir ) {
- urlHistory.addNew( url, settings.transition, pageTitle, pageUrl, settings.role );
- }
-
- //set page title
- document.title = urlHistory.getActive().title;
-
- //set "toPage" as activePage
- $.mobile.activePage = toPage;
-
- // If we're navigating back in the URL history, set reverse accordingly.
- settings.reverse = settings.reverse || historyDir < 0;
-
- transitionPages( toPage, fromPage, settings.transition, settings.reverse )
- .done(function() {
- removeActiveLinkClass();
-
- //if there's a duplicateCachedPage, remove it from the DOM now that it's hidden
- if ( settings.duplicateCachedPage ) {
- settings.duplicateCachedPage.remove();
- }
-
- //remove initial build class (only present on first pageshow)
- $html.removeClass( "ui-mobile-rendering" );
-
- releasePageTransitionLock();
-
- // Let listeners know we're all done changing the current page.
- mpc.trigger( "pagechange", triggerData );
- });
- };
-
- $.mobile.changePage.defaults = {
- transition: undefined,
- reverse: false,
- changeHash: true,
- fromHashChange: false,
- role: undefined, // By default we rely on the role defined by the @data-role attribute.
- duplicateCachedPage: undefined,
- pageContainer: undefined,
- showLoadMsg: true, //loading message shows by default when pages are being fetched during changePage
- dataUrl: undefined,
- fromPage: undefined,
- allowSamePageTransition: false
- };
-
-/* Event Bindings - hashchange, submit, and click */
- function findClosestLink( ele )
- {
- while ( ele ) {
- // Look for the closest element with a nodeName of "a".
- // Note that we are checking if we have a valid nodeName
- // before attempting to access it. This is because the
- // node we get called with could have originated from within
- // an embedded SVG document where some symbol instance elements
- // don't have nodeName defined on them, or strings are of type
- // SVGAnimatedString.
- if ( ( typeof ele.nodeName === "string" ) && ele.nodeName.toLowerCase() == "a" ) {
- break;
- }
- ele = ele.parentNode;
- }
- return ele;
- }
-
- // The base URL for any given element depends on the page it resides in.
- function getClosestBaseUrl( ele )
- {
- // Find the closest page and extract out its url.
- var url = $( ele ).closest( ".ui-page" ).jqmData( "url" ),
- base = documentBase.hrefNoHash;
-
- if ( !url || !path.isPath( url ) ) {
- url = base;
- }
-
- return path.makeUrlAbsolute( url, base);
- }
-
-
- //The following event bindings should be bound after mobileinit has been triggered
- //the following function is called in the init file
- $.mobile._registerInternalEvents = function(){
-
- //bind to form submit events, handle with Ajax
- $( "form" ).live('submit', function( event ) {
- var $this = $( this );
- if( !$.mobile.ajaxEnabled ||
- $this.is( ":jqmData(ajax='false')" ) ) {
- return;
- }
-
- var type = $this.attr( "method" ),
- target = $this.attr( "target" ),
- url = $this.attr( "action" );
-
- // If no action is specified, browsers default to using the
- // URL of the document containing the form. Since we dynamically
- // pull in pages from external documents, the form should submit
- // to the URL for the source document of the page containing
- // the form.
- if ( !url ) {
- // Get the @data-url for the page containing the form.
- url = getClosestBaseUrl( $this );
- if ( url === documentBase.hrefNoHash ) {
- // The url we got back matches the document base,
- // which means the page must be an internal/embedded page,
- // so default to using the actual document url as a browser
- // would.
- url = documentUrl.hrefNoSearch;
- }
- }
-
- url = path.makeUrlAbsolute( url, getClosestBaseUrl($this) );
-
- //external submits use regular HTTP
- if( path.isExternal( url ) || target ) {
- return;
- }
-
- $.mobile.changePage(
- url,
- {
- type: type && type.length && type.toLowerCase() || "get",
- data: $this.serialize(),
- transition: $this.jqmData( "transition" ),
- direction: $this.jqmData( "direction" ),
- reloadPage: true
- }
- );
- event.preventDefault();
- });
-
- //add active state on vclick
- $( document ).bind( "vclick", function( event ) {
- // if this isn't a left click we don't care. Its important to note
- // that when the virtual event is generated it will create
- if ( event.which > 1 || !$.mobile.linkBindingEnabled ){
- return;
- }
-
- var link = findClosestLink( event.target );
- if ( link ) {
- if ( path.parseUrl( link.getAttribute( "href" ) || "#" ).hash !== "#" ) {
- removeActiveLinkClass( true );
- $activeClickedLink = $( link ).closest( ".ui-btn" ).not( ".ui-disabled" );
- $activeClickedLink.addClass( $.mobile.activeBtnClass );
- $( "." + $.mobile.activePageClass + " .ui-btn" ).not( link ).blur();
- }
- }
- });
-
- // click routing - direct to HTTP or Ajax, accordingly
- $( document ).bind( "click", function( event ) {
- if( !$.mobile.linkBindingEnabled ){
- return;
- }
-
- var link = findClosestLink( event.target );
-
- // If there is no link associated with the click or its not a left
- // click we want to ignore the click
- if ( !link || event.which > 1) {
- return;
- }
-
- var $link = $( link ),
- //remove active link class if external (then it won't be there if you come back)
- httpCleanup = function(){
- window.setTimeout( function() { removeActiveLinkClass( true ); }, 200 );
- };
-
- //if there's a data-rel=back attr, go back in history
- if( $link.is( ":jqmData(rel='back')" ) ) {
- window.history.back();
- return false;
- }
-
- var baseUrl = getClosestBaseUrl( $link ),
-
- //get href, if defined, otherwise default to empty hash
- href = path.makeUrlAbsolute( $link.attr( "href" ) || "#", baseUrl );
-
- //if ajax is disabled, exit early
- if( !$.mobile.ajaxEnabled && !path.isEmbeddedPage( href ) ){
- httpCleanup();
- //use default click handling
- return;
- }
-
- // XXX_jblas: Ideally links to application pages should be specified as
- // an url to the application document with a hash that is either
- // the site relative path or id to the page. But some of the
- // internal code that dynamically generates sub-pages for nested
- // lists and select dialogs, just write a hash in the link they
- // create. This means the actual URL path is based on whatever
- // the current value of the base tag is at the time this code
- // is called. For now we are just assuming that any url with a
- // hash in it is an application page reference.
- if ( href.search( "#" ) != -1 ) {
- href = href.replace( /[^#]*#/, "" );
- if ( !href ) {
- //link was an empty hash meant purely
- //for interaction, so we ignore it.
- event.preventDefault();
- return;
- } else if ( path.isPath( href ) ) {
- //we have apath so make it the href we want to load.
- href = path.makeUrlAbsolute( href, baseUrl );
- } else {
- //we have a simple id so use the documentUrl as its base.
- href = path.makeUrlAbsolute( "#" + href, documentUrl.hrefNoHash );
- }
- }
-
- // Should we handle this link, or let the browser deal with it?
- var useDefaultUrlHandling = $link.is( "[rel='external']" ) || $link.is( ":jqmData(ajax='false')" ) || $link.is( "[target]" ),
-
- // Some embedded browsers, like the web view in Phone Gap, allow cross-domain XHR
- // requests if the document doing the request was loaded via the file:// protocol.
- // This is usually to allow the application to "phone home" and fetch app specific
- // data. We normally let the browser handle external/cross-domain urls, but if the
- // allowCrossDomainPages option is true, we will allow cross-domain http/https
- // requests to go through our page loading logic.
- isCrossDomainPageLoad = ( $.mobile.allowCrossDomainPages && documentUrl.protocol === "file:" && href.search( /^https?:/ ) != -1 ),
-
- //check for protocol or rel and its not an embedded page
- //TODO overlap in logic from isExternal, rel=external check should be
- // moved into more comprehensive isExternalLink
- isExternal = useDefaultUrlHandling || ( path.isExternal( href ) && !isCrossDomainPageLoad );
-
- if( isExternal ) {
- httpCleanup();
- //use default click handling
- return;
- }
-
- //use ajax
- var transition = $link.jqmData( "transition" ),
- direction = $link.jqmData( "direction" ),
- reverse = ( direction && direction === "reverse" ) ||
- // deprecated - remove by 1.0
- $link.jqmData( "back" ),
-
- //this may need to be more specific as we use data-rel more
- role = $link.attr( "data-" + $.mobile.ns + "rel" ) || undefined;
-
- $.mobile.changePage( href, { transition: transition, reverse: reverse, role: role } );
- event.preventDefault();
- });
-
- //prefetch pages when anchors with data-prefetch are encountered
- $( ".ui-page" ).live( "pageshow.prefetch", function() {
- var urls = [];
- $( this ).find( "a:jqmData(prefetch)" ).each(function(){
- var $link = $(this),
- url = $link.attr( "href" );
-
- if ( url && $.inArray( url, urls ) === -1 ) {
- urls.push( url );
-
- $.mobile.loadPage( url, {role: $link.attr("data-" + $.mobile.ns + "rel")} );
- }
- });
- });
-
- $.mobile._handleHashChange = function( hash ) {
- //find first page via hash
- var to = path.stripHash( hash ),
- //transition is false if it's the first page, undefined otherwise (and may be overridden by default)
- transition = $.mobile.urlHistory.stack.length === 0 ? "none" : undefined,
-
- // default options for the changPage calls made after examining the current state
- // of the page and the hash
- changePageOptions = {
- transition: transition,
- changeHash: false,
- fromHashChange: true
- };
-
- //if listening is disabled (either globally or temporarily), or it's a dialog hash
- if( !$.mobile.hashListeningEnabled || urlHistory.ignoreNextHashChange ) {
- urlHistory.ignoreNextHashChange = false;
- return;
- }
-
- // special case for dialogs
- if( urlHistory.stack.length > 1 && to.indexOf( dialogHashKey ) > -1 ) {
-
- // If current active page is not a dialog skip the dialog and continue
- // in the same direction
- if(!$.mobile.activePage.is( ".ui-dialog" )) {
- //determine if we're heading forward or backward and continue accordingly past
- //the current dialog
- urlHistory.directHashChange({
- currentUrl: to,
- isBack: function() { window.history.back(); },
- isForward: function() { window.history.forward(); }
- });
-
- // prevent changePage()
- return;
- } else {
- // if the current active page is a dialog and we're navigating
- // to a dialog use the dialog objected saved in the stack
- urlHistory.directHashChange({
- currentUrl: to,
-
- // regardless of the direction of the history change
- // do the following
- either: function( isBack ) {
- var active = $.mobile.urlHistory.getActive();
-
- to = active.pageUrl;
-
- // make sure to set the role, transition and reversal
- // as most of this is lost by the domCache cleaning
- $.extend( changePageOptions, {
- role: active.role,
- transition: active.transition,
- reverse: isBack
- });
- }
- });
- }
- }
-
- //if to is defined, load it
- if ( to ) {
- // At this point, 'to' can be one of 3 things, a cached page element from
- // a history stack entry, an id, or site-relative/absolute URL. If 'to' is
- // an id, we need to resolve it against the documentBase, not the location.href,
- // since the hashchange could've been the result of a forward/backward navigation
- // that crosses from an external page/dialog to an internal page/dialog.
- to = ( typeof to === "string" && !path.isPath( to ) ) ? ( path.makeUrlAbsolute( '#' + to, documentBase ) ) : to;
- $.mobile.changePage( to, changePageOptions );
- } else {
- //there's no hash, go to the first page in the dom
- $.mobile.changePage( $.mobile.firstPage, changePageOptions );
- }
- };
-
- //hashchange event handler
- $window.bind( "hashchange", function( e, triggered ) {
- $.mobile._handleHashChange( location.hash );
- });
-
- //set page min-heights to be device specific
- $( document ).bind( "pageshow", resetActivePageHeight );
- $( window ).bind( "throttledresize", resetActivePageHeight );
-
- };//_registerInternalEvents callback
-
-})( jQuery );
-/*
-* history.pushState support, layered on top of hashchange
-*/
-
-( function( $, window ) {
- // For now, let's Monkeypatch this onto the end of $.mobile._registerInternalEvents
- // Scope self to pushStateHandler so we can reference it sanely within the
- // methods handed off as event handlers
- var pushStateHandler = {},
- self = pushStateHandler,
- $win = $( window ),
- url = $.mobile.path.parseUrl( location.href );
-
- $.extend( pushStateHandler, {
- // TODO move to a path helper, this is rather common functionality
- initialFilePath: (function() {
- return url.pathname + url.search;
- })(),
-
- initialHref: url.hrefNoHash,
-
- // Flag for tracking if a Hashchange naturally occurs after each popstate + replace
- hashchangeFired: false,
-
- state: function() {
- return {
- hash: location.hash || "#" + self.initialFilePath,
- title: document.title,
-
- // persist across refresh
- initialHref: self.initialHref
- };
- },
-
- resetUIKeys: function( url ) {
- var dialog = $.mobile.dialogHashKey,
- subkey = "&" + $.mobile.subPageUrlKey,
- dialogIndex = url.indexOf( dialog );
-
- if( dialogIndex > -1 ) {
- url = url.slice( 0, dialogIndex ) + "#" + url.slice( dialogIndex );
- } else if( url.indexOf( subkey ) > -1 ) {
- url = url.split( subkey ).join( "#" + subkey );
- }
-
- return url;
- },
-
- // TODO sort out a single barrier to hashchange functionality
- nextHashChangePrevented: function( value ) {
- $.mobile.urlHistory.ignoreNextHashChange = value;
- self.onHashChangeDisabled = value;
- },
-
- // on hash change we want to clean up the url
- // NOTE this takes place *after* the vanilla navigation hash change
- // handling has taken place and set the state of the DOM
- onHashChange: function( e ) {
- // disable this hash change
- if( self.onHashChangeDisabled ){
- return;
- }
-
- var href, state,
- hash = location.hash,
- isPath = $.mobile.path.isPath( hash ),
- resolutionUrl = isPath ? location.href : $.mobile.getDocumentUrl();
- hash = isPath ? hash.replace( "#", "" ) : hash;
-
- // propulate the hash when its not available
- state = self.state();
-
- // make the hash abolute with the current href
- href = $.mobile.path.makeUrlAbsolute( hash, resolutionUrl );
-
- if ( isPath ) {
- href = self.resetUIKeys( href );
- }
-
- // replace the current url with the new href and store the state
- // Note that in some cases we might be replacing an url with the
- // same url. We do this anyways because we need to make sure that
- // all of our history entries have a state object associated with
- // them. This allows us to work around the case where window.history.back()
- // is called to transition from an external page to an embedded page.
- // In that particular case, a hashchange event is *NOT* generated by the browser.
- // Ensuring each history entry has a state object means that onPopState()
- // will always trigger our hashchange callback even when a hashchange event
- // is not fired.
- history.replaceState( state, document.title, href );
- },
-
- // on popstate (ie back or forward) we need to replace the hash that was there previously
- // cleaned up by the additional hash handling
- onPopState: function( e ) {
- var poppedState = e.originalEvent.state, holdnexthashchange = false;
-
- // if there's no state its not a popstate we care about, ie chrome's initial popstate
- // or forward popstate
- if( poppedState ) {
- // disable any hashchange triggered by the browser
- self.nextHashChangePrevented( true );
-
- // defer our manual hashchange until after the browser fired
- // version has come and gone
- setTimeout(function() {
- // make sure that the manual hash handling takes place
- self.nextHashChangePrevented( false );
-
- // change the page based on the hash
- $.mobile._handleHashChange( poppedState.hash );
- }, 100);
- }
- },
-
- init: function() {
- $win.bind( "hashchange", self.onHashChange );
-
- // Handle popstate events the occur through history changes
- $win.bind( "popstate", self.onPopState );
-
- // if there's no hash, we need to replacestate for returning to home
- if ( location.hash === "" ) {
- history.replaceState( self.state(), document.title, location.href );
- }
- }
- });
-
- $( function() {
- if( $.mobile.pushStateEnabled && $.support.pushState ){
- pushStateHandler.init();
- }
- });
-})( jQuery, this );
-/*
-* "transitions" plugin - Page change tranistions
-*/
-
-(function( $, window, undefined ) {
-
-function css3TransitionHandler( name, reverse, $to, $from ) {
-
- var deferred = new $.Deferred(),
- reverseClass = reverse ? " reverse" : "",
- viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
- doneFunc = function() {
-
- $to.add( $from ).removeClass( "out in reverse " + name );
-
- if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
- $from.removeClass( $.mobile.activePageClass );
- }
-
- $to.parent().removeClass( viewportClass );
-
- deferred.resolve( name, reverse, $to, $from );
- };
-
- $to.animationComplete( doneFunc );
-
- $to.parent().addClass( viewportClass );
-
- if ( $from ) {
- $from.addClass( name + " out" + reverseClass );
- }
- $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );
-
- return deferred.promise();
-}
-
-// Make our transition handler public.
-$.mobile.css3TransitionHandler = css3TransitionHandler;
-
-// If the default transition handler is the 'none' handler, replace it with our handler.
-if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) {
- $.mobile.defaultTransitionHandler = css3TransitionHandler;
-}
-
-})( jQuery, this );
-/*
-* "degradeInputs" plugin - degrades inputs to another type after custom enhancements are made.
-*/
-
-(function( $, undefined ) {
-
-$.mobile.page.prototype.options.degradeInputs = {
- color: false,
- date: false,
- datetime: false,
- "datetime-local": false,
- email: false,
- month: false,
- number: false,
- range: "number",
- search: "text",
- tel: false,
- time: false,
- url: false,
- week: false
-};
-
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
-
- var page = $(e.target).closest(':jqmData(role="page")').data("page"), options;
-
- if( !page ) {
- return;
- }
-
- options = page.options;
-
- // degrade inputs to avoid poorly implemented native functionality
- $( e.target ).find( "input" ).not( page.keepNativeSelector() ).each(function() {
- var $this = $( this ),
- type = this.getAttribute( "type" ),
- optType = options.degradeInputs[ type ] || "text";
-
- if ( options.degradeInputs[ type ] ) {
- var html = $( "<div>" ).html( $this.clone() ).html(),
- // In IE browsers, the type sometimes doesn't exist in the cloned markup, so we replace the closing tag instead
- hasType = html.indexOf( " type=" ) > -1,
- findstr = hasType ? /\s+type=["']?\w+['"]?/ : /\/?>/,
- repstr = " type=\"" + optType + "\" data-" + $.mobile.ns + "type=\"" + type + "\"" + ( hasType ? "" : ">" );
-
- $this.replaceWith( html.replace( findstr, repstr ) );
- }
- });
-
-});
-
-})( jQuery );/*
-* "dialog" plugin.
-*/
-
-(function( $, window, undefined ) {
-
-$.widget( "mobile.dialog", $.mobile.widget, {
- options: {
- closeBtnText : "Close",
- overlayTheme : "a",
- initSelector : ":jqmData(role='dialog')"
- },
- _create: function() {
- var self = this,
- $el = this.element,
- headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" );
-
- $el.addClass( "ui-overlay-" + this.options.overlayTheme );
-
- // Class the markup for dialog styling
- // Set aria role
- $el.attr( "role", "dialog" )
- .addClass( "ui-dialog" )
- .find( ":jqmData(role='header')" )
- .addClass( "ui-corner-top ui-overlay-shadow" )
- .prepend( headerCloseButton )
- .end()
- .find( ":jqmData(role='content'),:jqmData(role='footer')" )
- .addClass( "ui-overlay-shadow" )
- .last()
- .addClass( "ui-corner-bottom" );
-
- // this must be an anonymous function so that select menu dialogs can replace
- // the close method. This is a change from previously just defining data-rel=back
- // on the button and letting nav handle it
- headerCloseButton.bind( "vclick", function() {
- self.close();
- });
-
- /* bind events
- - clicks and submits should use the closing transition that the dialog opened with
- unless a data-transition is specified on the link/form
- - if the click was on the close button, or the link has a data-rel="back" it'll go back in history naturally
- */
- $el.bind( "vclick submit", function( event ) {
- var $target = $( event.target ).closest( event.type === "vclick" ? "a" : "form" ),
- active;
-
- if ( $target.length && !$target.jqmData( "transition" ) ) {
-
- active = $.mobile.urlHistory.getActive() || {};
-
- $target.attr( "data-" + $.mobile.ns + "transition", ( active.transition || $.mobile.defaultDialogTransition ) )
- .attr( "data-" + $.mobile.ns + "direction", "reverse" );
- }
- })
- .bind( "pagehide", function() {
- $( this ).find( "." + $.mobile.activeBtnClass ).removeClass( $.mobile.activeBtnClass );
- });
- },
-
- // Close method goes back in history
- close: function() {
- window.history.back();
- }
-});
-
-//auto self-init widgets
-$( $.mobile.dialog.prototype.options.initSelector ).live( "pagecreate", function(){
- $( this ).dialog();
-});
-
-})( jQuery, this );
-/*
-* This plugin handles theming and layout of headers, footers, and content areas
-*/
-
-(function( $, undefined ) {
-
-$.mobile.page.prototype.options.backBtnText = "Back";
-$.mobile.page.prototype.options.addBackBtn = false;
-$.mobile.page.prototype.options.backBtnTheme = null;
-$.mobile.page.prototype.options.headerTheme = "a";
-$.mobile.page.prototype.options.footerTheme = "a";
-$.mobile.page.prototype.options.contentTheme = null;
-
-$( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", function( e ) {
-
- var $page = $( this ),
- o = $page.data( "page" ).options,
- pageRole = $page.jqmData( "role" ),
- pageTheme = o.theme;
-
- $( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this ).each(function() {
- var $this = $( this ),
- role = $this.jqmData( "role" ),
- theme = $this.jqmData( "theme" ),
- contentTheme = theme || o.contentTheme || ( pageRole === "dialog" && pageTheme ),
- $headeranchors,
- leftbtn,
- rightbtn,
- backBtn;
-
- $this.addClass( "ui-" + role );
-
- //apply theming and markup modifications to page,header,content,footer
- if ( role === "header" || role === "footer" ) {
-
- var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;
-
- $this
- //add theme class
- .addClass( "ui-bar-" + thisTheme )
- // Add ARIA role
- .attr( "role", role === "header" ? "banner" : "contentinfo" );
-
- // Right,left buttons
- $headeranchors = $this.children( "a" );
- leftbtn = $headeranchors.hasClass( "ui-btn-left" );
- rightbtn = $headeranchors.hasClass( "ui-btn-right" );
-
- leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
-
- rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
-
- // Auto-add back btn on pages beyond first view
- if ( o.addBackBtn &&
- role === "header" &&
- $( ".ui-page" ).length > 1 &&
- $this.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
- !leftbtn ) {
-
- backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
- // If theme is provided, override default inheritance
- .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
- .prependTo( $this );
- }
-
- // Page title
- $this.children( "h1, h2, h3, h4, h5, h6" )
- .addClass( "ui-title" )
- // Regardless of h element number in src, it becomes h1 for the enhanced page
- .attr({
- "tabindex": "0",
- "role": "heading",
- "aria-level": "1"
- });
-
- } else if ( role === "content" ) {
- if ( contentTheme ) {
- $this.addClass( "ui-body-" + ( contentTheme ) );
- }
-
- // Add ARIA role
- $this.attr( "role", "main" );
- }
- });
-});
-
-})( jQuery );/*
-* "collapsible" plugin
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.collapsible", $.mobile.widget, {
- options: {
- expandCueText: " click to expand contents",
- collapseCueText: " click to collapse contents",
- collapsed: true,
- heading: "h1,h2,h3,h4,h5,h6,legend",
- theme: null,
- contentTheme: null,
- iconTheme: "d",
- initSelector: ":jqmData(role='collapsible')"
- },
- _create: function() {
-
- var $el = this.element,
- o = this.options,
- collapsible = $el.addClass( "ui-collapsible" ),
- collapsibleHeading = $el.children( o.heading ).first(),
- collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
- collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
- collapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
-
- // Replace collapsibleHeading if it's a legend
- if ( collapsibleHeading.is( "legend" ) ) {
- collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
- collapsibleHeading.next().remove();
- }
-
- // If we are in a collapsible set
- if ( collapsibleSet.length ) {
- // Inherit the theme from collapsible-set
- if ( !o.theme ) {
- o.theme = collapsibleSet.jqmData( "theme" );
- }
- // Inherit the content-theme from collapsible-set
- if ( !o.contentTheme ) {
- o.contentTheme = collapsibleSet.jqmData( "content-theme" );
- }
- }
-
- collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
-
- collapsibleHeading
- //drop heading in before content
- .insertBefore( collapsibleContent )
- //modify markup & attributes
- .addClass( "ui-collapsible-heading" )
- .append( "<span class='ui-collapsible-heading-status'></span>" )
- .wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
- .find( "a" )
- .first()
- .buttonMarkup({
- shadow: false,
- corners: false,
- iconPos: "left",
- icon: "plus",
- theme: o.theme
- });
-
- if ( !collapsibleSet.length ) {
- collapsibleHeading
- .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
- .addClass( "ui-corner-top ui-corner-bottom" );
- } else {
- // If we are in a collapsible set
-
- // Initialize the collapsible set if it's not already initialized
- if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) {
-
- collapsibleSet
- .jqmData( "collapsiblebound", true )
- .bind( "expand", function( event ) {
-
- $( event.target )
- .closest( ".ui-collapsible" )
- .siblings( ".ui-collapsible" )
- .trigger( "collapse" );
-
- });
- }
-
- collapsiblesInSet.first()
- .find( "a" )
- .first()
- .addClass( "ui-corner-top" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-top" );
-
- collapsiblesInSet.last()
- .jqmData( "collapsible-last", true )
- .find( "a" )
- .first()
- .addClass( "ui-corner-bottom" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-bottom" );
-
-
- if ( collapsible.jqmData( "collapsible-last" ) ) {
- collapsibleHeading
- .find( "a" ).first().add ( collapsibleHeading.find( ".ui-btn-inner" ) )
- .addClass( "ui-corner-bottom" );
- }
- }
-
- //events
- collapsible
- .bind( "expand collapse", function( event ) {
- if ( !event.isDefaultPrevented() ) {
-
- event.preventDefault();
-
- var $this = $( this ),
- isCollapse = ( event.type === "collapse" ),
- contentTheme = o.contentTheme;
-
- collapsibleHeading
- .toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
- .find( ".ui-collapsible-heading-status" )
- .text( isCollapse ? o.expandCueText : o.collapseCueText )
- .end()
- .find( ".ui-icon" )
- .toggleClass( "ui-icon-minus", !isCollapse )
- .toggleClass( "ui-icon-plus", isCollapse );
-
- $this.toggleClass( "ui-collapsible-collapsed", isCollapse );
- collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
-
- if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
- collapsibleHeading
- .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
- .toggleClass( "ui-corner-bottom", isCollapse );
- collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
- }
- collapsibleContent.trigger( "updatelayout" );
- }
- })
- .trigger( o.collapsed ? "collapse" : "expand" );
-
- collapsibleHeading
- .bind( "click", function( event ) {
-
- var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ?
- "expand" : "collapse";
-
- collapsible.trigger( type );
-
- event.preventDefault();
- });
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $( $.mobile.collapsible.prototype.options.initSelector, e.target ).collapsible();
-});
-
-})( jQuery );
-/*
-* "fieldcontain" plugin - simple class additions to make form row separators
-*/
-
-(function( $, undefined ) {
-
-$.fn.fieldcontain = function( options ) {
- return this.addClass( "ui-field-contain ui-body ui-br" );
-};
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $( ":jqmData(role='fieldcontain')", e.target ).fieldcontain();
-});
-
-})( jQuery );/*
-* plugin for creating CSS grids
-*/
-
-(function( $, undefined ) {
-
-$.fn.grid = function( options ) {
- return this.each(function() {
-
- var $this = $( this ),
- o = $.extend({
- grid: null
- },options),
- $kids = $this.children(),
- gridCols = {solo:1, a:2, b:3, c:4, d:5},
- grid = o.grid,
- iterator;
-
- if ( !grid ) {
- if ( $kids.length <= 5 ) {
- for ( var letter in gridCols ) {
- if ( gridCols[ letter ] === $kids.length ) {
- grid = letter;
- }
- }
- } else {
- grid = "a";
- }
- }
- iterator = gridCols[grid];
-
- $this.addClass( "ui-grid-" + grid );
-
- $kids.filter( ":nth-child(" + iterator + "n+1)" ).addClass( "ui-block-a" );
-
- if ( iterator > 1 ) {
- $kids.filter( ":nth-child(" + iterator + "n+2)" ).addClass( "ui-block-b" );
- }
- if ( iterator > 2 ) {
- $kids.filter( ":nth-child(3n+3)" ).addClass( "ui-block-c" );
- }
- if ( iterator > 3 ) {
- $kids.filter( ":nth-child(4n+4)" ).addClass( "ui-block-d" );
- }
- if ( iterator > 4 ) {
- $kids.filter( ":nth-child(5n+5)" ).addClass( "ui-block-e" );
- }
- });
-};
-})( jQuery );/*
-* "navbar" plugin
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.navbar", $.mobile.widget, {
- options: {
- iconpos: "top",
- grid: null,
- initSelector: ":jqmData(role='navbar')"
- },
-
- _create: function(){
-
- var $navbar = this.element,
- $navbtns = $navbar.find( "a" ),
- iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
- this.options.iconpos : undefined;
-
- $navbar.addClass( "ui-navbar" )
- .attr( "role","navigation" )
- .find( "ul" )
- .grid({ grid: this.options.grid });
-
- if ( !iconpos ) {
- $navbar.addClass( "ui-navbar-noicons" );
- }
-
- $navbtns.buttonMarkup({
- corners: false,
- shadow: false,
- iconpos: iconpos
- });
-
- $navbar.delegate( "a", "vclick", function( event ) {
- $navbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
- $( this ).addClass( $.mobile.activeBtnClass );
- });
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $( $.mobile.navbar.prototype.options.initSelector, e.target ).navbar();
-});
-
-})( jQuery );
-/*
-* "listview" plugin
-*/
-
-(function( $, undefined ) {
-
-//Keeps track of the number of lists per page UID
-//This allows support for multiple nested list in the same page
-//https://github.com/jquery/jquery-mobile/issues/1617
-var listCountPerPage = {};
-
-$.widget( "mobile.listview", $.mobile.widget, {
- options: {
- theme: null,
- countTheme: "c",
- headerTheme: "b",
- dividerTheme: "b",
- splitIcon: "arrow-r",
- splitTheme: "b",
- inset: false,
- initSelector: ":jqmData(role='listview')"
- },
-
- _create: function() {
- var t = this;
-
- // create listview markup
- t.element.addClass(function( i, orig ) {
- return orig + " ui-listview " + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" );
- });
-
- t.refresh( true );
- },
-
- _removeCorners: function( li, which ) {
- var top = "ui-corner-top ui-corner-tr ui-corner-tl",
- bot = "ui-corner-bottom ui-corner-br ui-corner-bl";
-
- li = li.add( li.find( ".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb" ) );
-
- if ( which === "top" ) {
- li.removeClass( top );
- } else if ( which === "bottom" ) {
- li.removeClass( bot );
- } else {
- li.removeClass( top + " " + bot );
- }
- },
-
- _refreshCorners: function( create ) {
- var $li,
- $visibleli,
- $topli,
- $bottomli;
-
- if ( this.options.inset ) {
- $li = this.element.children( "li" );
- // at create time the li are not visible yet so we need to rely on .ui-screen-hidden
- $visibleli = create?$li.not( ".ui-screen-hidden" ):$li.filter( ":visible" );
-
- this._removeCorners( $li );
-
- // Select the first visible li element
- $topli = $visibleli.first()
- .addClass( "ui-corner-top" );
-
- $topli.add( $topli.find( ".ui-btn-inner" )
- .not( ".ui-li-link-alt span:first-child" ) )
- .addClass( "ui-corner-top" )
- .end()
- .find( ".ui-li-link-alt, .ui-li-link-alt span:first-child" )
- .addClass( "ui-corner-tr" )
- .end()
- .find( ".ui-li-thumb" )
- .not(".ui-li-icon")
- .addClass( "ui-corner-tl" );
-
- // Select the last visible li element
- $bottomli = $visibleli.last()
- .addClass( "ui-corner-bottom" );
-
- $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )
- .find( ".ui-li-link-alt" )
- .addClass( "ui-corner-br" )
- .end()
- .find( ".ui-li-thumb" )
- .not(".ui-li-icon")
- .addClass( "ui-corner-bl" );
- }
- if ( !create ) {
- this.element.trigger( "updatelayout" );
- }
- },
-
- // This is a generic utility method for finding the first
- // node with a given nodeName. It uses basic DOM traversal
- // to be fast and is meant to be a substitute for simple
- // $.fn.closest() and $.fn.children() calls on a single
- // element. Note that callers must pass both the lowerCase
- // and upperCase version of the nodeName they are looking for.
- // The main reason for this is that this function will be
- // called many times and we want to avoid having to lowercase
- // the nodeName from the element every time to ensure we have
- // a match. Note that this function lives here for now, but may
- // be moved into $.mobile if other components need a similar method.
- _findFirstElementByTagName: function( ele, nextProp, lcName, ucName )
- {
- var dict = {};
- dict[ lcName ] = dict[ ucName ] = true;
- while ( ele ) {
- if ( dict[ ele.nodeName ] ) {
- return ele;
- }
- ele = ele[ nextProp ];
- }
- return null;
- },
- _getChildrenByTagName: function( ele, lcName, ucName )
- {
- var results = [],
- dict = {};
- dict[ lcName ] = dict[ ucName ] = true;
- ele = ele.firstChild;
- while ( ele ) {
- if ( dict[ ele.nodeName ] ) {
- results.push( ele );
- }
- ele = ele.nextSibling;
- }
- return $( results );
- },
-
- _addThumbClasses: function( containers )
- {
- var i, img, len = containers.length;
- for ( i = 0; i < len; i++ ) {
- img = $( this._findFirstElementByTagName( containers[ i ].firstChild, "nextSibling", "img", "IMG" ) );
- if ( img.length ) {
- img.addClass( "ui-li-thumb" );
- $( this._findFirstElementByTagName( img[ 0 ].parentNode, "parentNode", "li", "LI" ) ).addClass( img.is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
- }
- }
- },
-
- refresh: function( create ) {
- this.parentPage = this.element.closest( ".ui-page" );
- this._createSubPages();
-
- var o = this.options,
- $list = this.element,
- self = this,
- dividertheme = $list.jqmData( "dividertheme" ) || o.dividerTheme,
- listsplittheme = $list.jqmData( "splittheme" ),
- listspliticon = $list.jqmData( "spliticon" ),
- li = this._getChildrenByTagName( $list[ 0 ], "li", "LI" ),
- counter = $.support.cssPseudoElement || !$.nodeName( $list[ 0 ], "ol" ) ? 0 : 1,
- itemClassDict = {},
- item, itemClass, itemTheme,
- a, last, splittheme, countParent, icon, imgParents, img;
-
- if ( counter ) {
- $list.find( ".ui-li-dec" ).remove();
- }
-
- if ( !o.theme ) {
- o.theme = $.mobile.getInheritedTheme( this.element, "c" );
- }
-
- for ( var pos = 0, numli = li.length; pos < numli; pos++ ) {
- item = li.eq( pos );
- itemClass = "ui-li";
-
- // If we're creating the element, we update it regardless
- if ( create || !item.hasClass( "ui-li" ) ) {
- itemTheme = item.jqmData("theme") || o.theme;
- a = this._getChildrenByTagName( item[ 0 ], "a", "A" );
-
- if ( a.length ) {
- icon = item.jqmData("icon");
-
- item.buttonMarkup({
- wrapperEls: "div",
- shadow: false,
- corners: false,
- iconpos: "right",
- icon: a.length > 1 || icon === false ? false : icon || "arrow-r",
- theme: itemTheme
- });
-
- if ( ( icon != false ) && ( a.length == 1 ) ) {
- item.addClass( "ui-li-has-arrow" );
- }
-
- a.first().addClass( "ui-link-inherit" );
-
- if ( a.length > 1 ) {
- itemClass += " ui-li-has-alt";
-
- last = a.last();
- splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;
-
- last.appendTo(item)
- .attr( "title", last.getEncodedText() )
- .addClass( "ui-li-link-alt" )
- .empty()
- .buttonMarkup({
- shadow: false,
- corners: false,
- theme: itemTheme,
- icon: false,
- iconpos: false
- })
- .find( ".ui-btn-inner" )
- .append(
- $( document.createElement( "span" ) ).buttonMarkup({
- shadow: true,
- corners: true,
- theme: splittheme,
- iconpos: "notext",
- icon: listspliticon || last.jqmData( "icon" ) || o.splitIcon
- })
- );
- }
- } else if ( item.jqmData( "role" ) === "list-divider" ) {
-
- itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;
- item.attr( "role", "heading" );
-
- //reset counter when a divider heading is encountered
- if ( counter ) {
- counter = 1;
- }
-
- } else {
- itemClass += " ui-li-static ui-body-" + itemTheme;
- }
- }
-
- if ( counter && itemClass.indexOf( "ui-li-divider" ) < 0 ) {
- countParent = item.is( ".ui-li-static:first" ) ? item : item.find( ".ui-link-inherit" );
-
- countParent.addClass( "ui-li-jsnumbering" )
- .prepend( "<span class='ui-li-dec'>" + (counter++) + ". </span>" );
- }
-
- // Instead of setting item class directly on the list item and its
- // btn-inner at this point in time, push the item into a dictionary
- // that tells us what class to set on it so we can do this after this
- // processing loop is finished.
-
- if ( !itemClassDict[ itemClass ] ) {
- itemClassDict[ itemClass ] = [];
- }
-
- itemClassDict[ itemClass ].push( item[ 0 ] );
- }
-
- // Set the appropriate listview item classes on each list item
- // and their btn-inner elements. The main reason we didn't do this
- // in the for-loop above is because we can eliminate per-item function overhead
- // by calling addClass() and children() once or twice afterwards. This
- // can give us a significant boost on platforms like WP7.5.
-
- for ( itemClass in itemClassDict ) {
- $( itemClassDict[ itemClass ] ).addClass( itemClass ).children( ".ui-btn-inner" ).addClass( itemClass );
- }
-
- $list.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" )
- .end()
-
- .find( "p, dl" ).addClass( "ui-li-desc" )
- .end()
-
- .find( ".ui-li-aside" ).each(function() {
- var $this = $(this);
- $this.prependTo( $this.parent() ); //shift aside to front for css float
- })
- .end()
-
- .find( ".ui-li-count" ).each( function() {
- $( this ).closest( "li" ).addClass( "ui-li-has-count" );
- }).addClass( "ui-btn-up-" + ( $list.jqmData( "counttheme" ) || this.options.countTheme) + " ui-btn-corner-all" );
-
- // The idea here is to look at the first image in the list item
- // itself, and any .ui-link-inherit element it may contain, so we
- // can place the appropriate classes on the image and list item.
- // Note that we used to use something like:
- //
- // li.find(">img:eq(0), .ui-link-inherit>img:eq(0)").each( ... );
- //
- // But executing a find() like that on Windows Phone 7.5 took a
- // really long time. Walking things manually with the code below
- // allows the 400 listview item page to load in about 3 seconds as
- // opposed to 30 seconds.
-
- this._addThumbClasses( li );
- this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
-
- this._refreshCorners( create );
- },
-
- //create a string for ID/subpage url creation
- _idStringEscape: function( str ) {
- return str.replace(/[^a-zA-Z0-9]/g, '-');
- },
-
- _createSubPages: function() {
- var parentList = this.element,
- parentPage = parentList.closest( ".ui-page" ),
- parentUrl = parentPage.jqmData( "url" ),
- parentId = parentUrl || parentPage[ 0 ][ $.expando ],
- parentListId = parentList.attr( "id" ),
- o = this.options,
- dns = "data-" + $.mobile.ns,
- self = this,
- persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" ),
- hasSubPages;
-
- if ( typeof listCountPerPage[ parentId ] === "undefined" ) {
- listCountPerPage[ parentId ] = -1;
- }
-
- parentListId = parentListId || ++listCountPerPage[ parentId ];
-
- $( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function( i ) {
- var self = this,
- list = $( this ),
- listId = list.attr( "id" ) || parentListId + "-" + i,
- parent = list.parent(),
- nodeEls = $( list.prevAll().toArray().reverse() ),
- nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim(parent.contents()[ 0 ].nodeValue) + "</span>" ),
- title = nodeEls.first().getEncodedText(),//url limits to first 30 chars of text
- id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId,
- theme = list.jqmData( "theme" ) || o.theme,
- countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,
- newPage, anchor;
-
- //define hasSubPages for use in later removal
- hasSubPages = true;
-
- newPage = list.detach()
- .wrap( "<div " + dns + "role='page' " + dns + "url='" + id + "' " + dns + "theme='" + theme + "' " + dns + "count-theme='" + countTheme + "'><div " + dns + "role='content'></div></div>" )
- .parent()
- .before( "<div " + dns + "role='header' " + dns + "theme='" + o.headerTheme + "'><div class='ui-title'>" + title + "</div></div>" )
- .after( persistentFooterID ? $( "<div " + dns + "role='footer' " + dns + "id='"+ persistentFooterID +"'>") : "" )
- .parent()
- .appendTo( $.mobile.pageContainer );
-
- newPage.page();
-
- anchor = parent.find('a:first');
-
- if ( !anchor.length ) {
- anchor = $( "<a/>" ).html( nodeEls || title ).prependTo( parent.empty() );
- }
-
- anchor.attr( "href", "#" + id );
-
- }).listview();
-
- // on pagehide, remove any nested pages along with the parent page, as long as they aren't active
- // and aren't embedded
- if( hasSubPages &&
- parentPage.is( ":jqmData(external-page='true')" ) &&
- parentPage.data("page").options.domCache === false ) {
-
- var newRemove = function( e, ui ){
- var nextPage = ui.nextPage, npURL;
-
- if( ui.nextPage ){
- npURL = nextPage.jqmData( "url" );
- if( npURL.indexOf( parentUrl + "&" + $.mobile.subPageUrlKey ) !== 0 ){
- self.childPages().remove();
- parentPage.remove();
- }
- }
- };
-
- // unbind the original page remove and replace with our specialized version
- parentPage
- .unbind( "pagehide.remove" )
- .bind( "pagehide.remove", newRemove);
- }
- },
-
- // TODO sort out a better way to track sub pages of the listview this is brittle
- childPages: function(){
- var parentUrl = this.parentPage.jqmData( "url" );
-
- return $( ":jqmData(url^='"+ parentUrl + "&" + $.mobile.subPageUrlKey +"')");
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $( $.mobile.listview.prototype.options.initSelector, e.target ).listview();
-});
-
-})( jQuery );
-/*
-* "listview" filter extension
-*/
-
-(function( $, undefined ) {
-
-$.mobile.listview.prototype.options.filter = false;
-$.mobile.listview.prototype.options.filterPlaceholder = "Filter items...";
-$.mobile.listview.prototype.options.filterTheme = "c";
-$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){
- return text.toLowerCase().indexOf( searchValue ) === -1;
-};
-
-$( ":jqmData(role='listview')" ).live( "listviewcreate", function() {
-
- var list = $( this ),
- listview = list.data( "listview" );
-
- if ( !listview.options.filter ) {
- return;
- }
-
- var wrapper = $( "<form>", {
- "class": "ui-listview-filter ui-bar-" + listview.options.filterTheme,
- "role": "search"
- }),
- search = $( "<input>", {
- placeholder: listview.options.filterPlaceholder
- })
- .attr( "data-" + $.mobile.ns + "type", "search" )
- .jqmData( "lastval", "" )
- .bind( "keyup change", function() {
-
- var $this = $(this),
- val = this.value.toLowerCase(),
- listItems = null,
- lastval = $this.jqmData( "lastval" ) + "",
- childItems = false,
- itemtext = "",
- item, change;
-
- // Change val as lastval for next execution
- $this.jqmData( "lastval" , val );
- change = val.substr( 0 , lastval.length - 1 ).replace( lastval , "" );
-
- if ( val.length < lastval.length || change.length != ( val.length - lastval.length ) ) {
-
- // Removed chars or pasted something totally different, check all items
- listItems = list.children();
- } else {
-
- // Only chars added, not removed, only use visible subset
- listItems = list.children( ":not(.ui-screen-hidden)" );
- }
-
- if ( val ) {
-
- // This handles hiding regular rows without the text we search for
- // and any list dividers without regular rows shown under it
-
- for ( var i = listItems.length - 1; i >= 0; i-- ) {
- item = $( listItems[ i ] );
- itemtext = item.jqmData( "filtertext" ) || item.text();
-
- if ( item.is( "li:jqmData(role=list-divider)" ) ) {
-
- item.toggleClass( "ui-filter-hidequeue" , !childItems );
-
- // New bucket!
- childItems = false;
-
- } else if ( listview.options.filterCallback( itemtext, val ) ) {
-
- //mark to be hidden
- item.toggleClass( "ui-filter-hidequeue" , true );
- } else {
-
- // There's a shown item in the bucket
- childItems = true;
- }
- }
-
- // Show items, not marked to be hidden
- listItems
- .filter( ":not(.ui-filter-hidequeue)" )
- .toggleClass( "ui-screen-hidden", false );
-
- // Hide items, marked to be hidden
- listItems
- .filter( ".ui-filter-hidequeue" )
- .toggleClass( "ui-screen-hidden", true )
- .toggleClass( "ui-filter-hidequeue", false );
-
- } else {
-
- //filtervalue is empty => show all
- listItems.toggleClass( "ui-screen-hidden", false );
- }
- listview._refreshCorners();
- })
- .appendTo( wrapper )
- .textinput();
-
- if ( $( this ).jqmData( "inset" ) ) {
- wrapper.addClass( "ui-listview-filter-inset" );
- }
-
- wrapper.bind( "submit", function() {
- return false;
- })
- .insertBefore( list );
-});
-
-})( jQuery );/*
-* "nojs" plugin - class to make elements hidden to A grade browsers
-*/
-
-(function( $, undefined ) {
-
-$( document ).bind( "pagecreate create", function( e ){
- $( ":jqmData(role='nojs')", e.target ).addClass( "ui-nojs" );
-
-});
-
-})( jQuery );/*
-* "checkboxradio" plugin
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.checkboxradio", $.mobile.widget, {
- options: {
- theme: null,
- initSelector: "input[type='checkbox'],input[type='radio']"
- },
- _create: function() {
- var self = this,
- input = this.element,
- // NOTE: Windows Phone could not find the label through a selector
- // filter works though.
- label = input.closest( "form,fieldset,:jqmData(role='page')" ).find( "label[for='" + input[ 0 ].id + "']"),
- inputtype = input.attr( "type" ),
- checkedState = inputtype + "-on",
- uncheckedState = inputtype + "-off",
- icon = input.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedState,
- activeBtn = icon ? "" : " " + $.mobile.activeBtnClass,
- checkedClass = "ui-" + checkedState + activeBtn,
- uncheckedClass = "ui-" + uncheckedState,
- checkedicon = "ui-icon-" + checkedState,
- uncheckedicon = "ui-icon-" + uncheckedState;
-
- if ( inputtype !== "checkbox" && inputtype !== "radio" ) {
- return;
- }
-
- // Expose for other methods
- $.extend( this, {
- label: label,
- inputtype: inputtype,
- checkedClass: checkedClass,
- uncheckedClass: uncheckedClass,
- checkedicon: checkedicon,
- uncheckedicon: uncheckedicon
- });
-
- // If there's no selected theme...
- if( !this.options.theme ) {
- this.options.theme = this.element.jqmData( "theme" );
- }
-
- label.buttonMarkup({
- theme: this.options.theme,
- icon: icon,
- shadow: false
- });
-
- // Wrap the input + label in a div
- input.add( label )
- .wrapAll( "<div class='ui-" + inputtype + "'></div>" );
-
- label.bind({
- vmouseover: function( event ) {
- if ( $( this ).parent().is( ".ui-disabled" ) ) {
- event.stopPropagation();
- }
- },
-
- vclick: function( event ) {
- if ( input.is( ":disabled" ) ) {
- event.preventDefault();
- return;
- }
-
- self._cacheVals();
-
- input.prop( "checked", inputtype === "radio" && true || !input.prop( "checked" ) );
-
- // trigger click handler's bound directly to the input as a substitute for
- // how label clicks behave normally in the browsers
- // TODO: it would be nice to let the browser's handle the clicks and pass them
- // through to the associate input. we can swallow that click at the parent
- // wrapper element level
- input.triggerHandler( 'click' );
-
- // Input set for common radio buttons will contain all the radio
- // buttons, but will not for checkboxes. clearing the checked status
- // of other radios ensures the active button state is applied properly
- self._getInputSet().not( input ).prop( "checked", false );
-
- self._updateAll();
- return false;
- }
-
- });
-
- input
- .bind({
- vmousedown: function() {
- self._cacheVals();
- },
-
- vclick: function() {
- var $this = $(this);
-
- // Adds checked attribute to checked input when keyboard is used
- if ( $this.is( ":checked" ) ) {
-
- $this.prop( "checked", true);
- self._getInputSet().not($this).prop( "checked", false );
- } else {
-
- $this.prop( "checked", false );
- }
-
- self._updateAll();
- },
-
- focus: function() {
- label.addClass( "ui-focus" );
- },
-
- blur: function() {
- label.removeClass( "ui-focus" );
- }
- });
-
- this.refresh();
- },
-
- _cacheVals: function() {
- this._getInputSet().each(function() {
- var $this = $(this);
-
- $this.jqmData( "cacheVal", $this.is( ":checked" ) );
- });
- },
-
- //returns either a set of radios with the same name attribute, or a single checkbox
- _getInputSet: function(){
- if(this.inputtype == "checkbox") {
- return this.element;
- }
-
- return this.element.closest( "form,fieldset,:jqmData(role='page')" )
- .find( "input[name='"+ this.element.attr( "name" ) +"'][type='"+ this.inputtype +"']" );
- },
-
- _updateAll: function() {
- var self = this;
-
- this._getInputSet().each(function() {
- var $this = $(this);
-
- if ( $this.is( ":checked" ) || self.inputtype === "checkbox" ) {
- $this.trigger( "change" );
- }
- })
- .checkboxradio( "refresh" );
- },
-
- refresh: function() {
- var input = this.element,
- label = this.label,
- icon = label.find( ".ui-icon" );
-
- // input[0].checked expando doesn't always report the proper value
- // for checked='checked'
- if ( $( input[ 0 ] ).prop( "checked" ) ) {
-
- label.addClass( this.checkedClass ).removeClass( this.uncheckedClass );
- icon.addClass( this.checkedicon ).removeClass( this.uncheckedicon );
-
- } else {
-
- label.removeClass( this.checkedClass ).addClass( this.uncheckedClass );
- icon.removeClass( this.checkedicon ).addClass( this.uncheckedicon );
- }
-
- if ( input.is( ":disabled" ) ) {
- this.disable();
- } else {
- this.enable();
- }
- },
-
- disable: function() {
- this.element.prop( "disabled", true ).parent().addClass( "ui-disabled" );
- },
-
- enable: function() {
- this.element.prop( "disabled", false ).parent().removeClass( "ui-disabled" );
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $.mobile.checkboxradio.prototype.enhanceWithin( e.target );
-});
-
-})( jQuery );
-/*
-* "button" plugin - links that proxy to native input/buttons
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.button", $.mobile.widget, {
- options: {
- theme: null,
- icon: null,
- iconpos: null,
- inline: null,
- corners: true,
- shadow: true,
- iconshadow: true,
- initSelector: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"
- },
- _create: function() {
- var $el = this.element,
- o = this.options,
- type,
- name,
- $buttonPlaceholder;
-
- // Add ARIA role
- this.button = $( "<div></div>" )
- .text( $el.text() || $el.val() )
- .insertBefore( $el )
- .buttonMarkup({
- theme: o.theme,
- icon: o.icon,
- iconpos: o.iconpos,
- inline: o.inline,
- corners: o.corners,
- shadow: o.shadow,
- iconshadow: o.iconshadow
- })
- .append( $el.addClass( "ui-btn-hidden" ) );
-
- type = $el.attr( "type" );
- name = $el.attr( "name" );
-
- // Add hidden input during submit if input type="submit" has a name.
- if ( type !== "button" && type !== "reset" && name ) {
- $el.bind( "vclick", function() {
- // Add hidden input if it doesn’t already exist.
- if( $buttonPlaceholder === undefined ) {
- $buttonPlaceholder = $( "<input>", {
- type: "hidden",
- name: $el.attr( "name" ),
- value: $el.attr( "value" )
- }).insertBefore( $el );
-
- // Bind to doc to remove after submit handling
- $( document ).one("submit", function(){
- $buttonPlaceholder.remove();
-
- // reset the local var so that the hidden input
- // will be re-added on subsequent clicks
- $buttonPlaceholder = undefined;
- });
- }
- });
- }
-
- this.refresh();
- },
-
- enable: function() {
- this.element.attr( "disabled", false );
- this.button.removeClass( "ui-disabled" ).attr( "aria-disabled", false );
- return this._setOption( "disabled", false );
- },
-
- disable: function() {
- this.element.attr( "disabled", true );
- this.button.addClass( "ui-disabled" ).attr( "aria-disabled", true );
- return this._setOption( "disabled", true );
- },
-
- refresh: function() {
- var $el = this.element;
-
- if ( $el.prop("disabled") ) {
- this.disable();
- } else {
- this.enable();
- }
-
- // the textWrapper is stored as a data element on the button object
- // to prevent referencing by it's implementation details (eg 'class')
- this.button.data( 'textWrapper' ).text( $el.text() || $el.val() );
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $.mobile.button.prototype.enhanceWithin( e.target );
-});
-
-})( jQuery );/*
-* "slider" plugin
-*/
-
-( function( $, undefined ) {
-
-$.widget( "mobile.slider", $.mobile.widget, {
- options: {
- theme: null,
- trackTheme: null,
- disabled: false,
- initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"
- },
-
- _create: function() {
-
- // TODO: Each of these should have comments explain what they're for
- var self = this,
-
- control = this.element,
-
- parentTheme = $.mobile.getInheritedTheme( control, "c" ),
-
- theme = this.options.theme || parentTheme,
-
- trackTheme = this.options.trackTheme || parentTheme,
-
- cType = control[ 0 ].nodeName.toLowerCase(),
-
- selectClass = ( cType == "select" ) ? "ui-slider-switch" : "",
-
- controlID = control.attr( "id" ),
-
- labelID = controlID + "-label",
-
- label = $( "[for='"+ controlID +"']" ).attr( "id", labelID ),
-
- val = function() {
- return cType == "input" ? parseFloat( control.val() ) : control[0].selectedIndex;
- },
-
- min = cType == "input" ? parseFloat( control.attr( "min" ) ) : 0,
-
- max = cType == "input" ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length-1,
-
- step = window.parseFloat( control.attr( "step" ) || 1 ),
-
- slider = $( "<div class='ui-slider " + selectClass + " ui-btn-down-" + trackTheme +
- " ui-btn-corner-all' role='application'></div>" ),
-
- handle = $( "<a href='#' class='ui-slider-handle'></a>" )
- .appendTo( slider )
- .buttonMarkup({ corners: true, theme: theme, shadow: true })
- .attr({
- "role": "slider",
- "aria-valuemin": min,
- "aria-valuemax": max,
- "aria-valuenow": val(),
- "aria-valuetext": val(),
- "title": val(),
- "aria-labelledby": labelID
- }),
- options;
-
- $.extend( this, {
- slider: slider,
- handle: handle,
- dragging: false,
- beforeStart: null,
- userModified: false,
- mouseMoved: false
- });
-
- if ( cType == "select" ) {
-
- slider.wrapInner( "<div class='ui-slider-inneroffset'></div>" );
-
- // make the handle move with a smooth transition
- handle.addClass( "ui-slider-handle-snapping" );
-
- options = control.find( "option" );
-
- control.find( "option" ).each(function( i ) {
-
- var side = !i ? "b":"a",
- corners = !i ? "right" :"left",
- theme = !i ? " ui-btn-down-" + trackTheme :( " " + $.mobile.activeBtnClass );
-
- $( "<div class='ui-slider-labelbg ui-slider-labelbg-" + side + theme + " ui-btn-corner-" + corners + "'></div>" )
- .prependTo( slider );
-
- $( "<span class='ui-slider-label ui-slider-label-" + side + theme + " ui-btn-corner-" + corners + "' role='img'>" + $( this ).getEncodedText() + "</span>" )
- .prependTo( handle );
- });
-
- }
-
- label.addClass( "ui-slider" );
-
- // monitor the input for updated values
- control.addClass( cType === "input" ? "ui-slider-input" : "ui-slider-switch" )
- .change( function() {
- // if the user dragged the handle, the "change" event was triggered from inside refresh(); don't call refresh() again
- if (!self.mouseMoved) {
- self.refresh( val(), true );
- }
- })
- .keyup( function() { // necessary?
- self.refresh( val(), true, true );
- })
- .blur( function() {
- self.refresh( val(), true );
- });
-
- // prevent screen drag when slider activated
- $( document ).bind( "vmousemove", function( event ) {
- if ( self.dragging ) {
- // self.mouseMoved must be updated before refresh() because it will be used in the control "change" event
- self.mouseMoved = true;
-
- if ( cType === "select" ) {
- // make the handle move in sync with the mouse
- handle.removeClass( "ui-slider-handle-snapping" );
- }
-
- self.refresh( event );
-
- // only after refresh() you can calculate self.userModified
- self.userModified = self.beforeStart !== control[0].selectedIndex;
- return false;
- }
- });
-
- slider.bind( "vmousedown", function( event ) {
- self.dragging = true;
- self.userModified = false;
- self.mouseMoved = false;
-
- if ( cType === "select" ) {
- self.beforeStart = control[0].selectedIndex;
- }
-
- self.refresh( event );
- return false;
- });
-
- slider.add( document )
- .bind( "vmouseup", function() {
- if ( self.dragging ) {
-
- self.dragging = false;
-
- if ( cType === "select") {
-
- // make the handle move with a smooth transition
- handle.addClass( "ui-slider-handle-snapping" );
-
- if ( self.mouseMoved ) {
-
- // this is a drag, change the value only if user dragged enough
- if ( self.userModified ) {
- self.refresh( self.beforeStart == 0 ? 1 : 0 );
- }
- else {
- self.refresh( self.beforeStart );
- }
-
- }
- else {
- // this is just a click, change the value
- self.refresh( self.beforeStart == 0 ? 1 : 0 );
- }
-
- }
-
- self.mouseMoved = false;
-
- return false;
- }
- });
-
- slider.insertAfter( control );
-
- // NOTE force focus on handle
- this.handle
- .bind( "vmousedown", function() {
- $( this ).focus();
- })
- .bind( "vclick", false );
-
- this.handle
- .bind( "keydown", function( event ) {
- var index = val();
-
- if ( self.options.disabled ) {
- return;
- }
-
- // In all cases prevent the default and mark the handle as active
- switch ( event.keyCode ) {
- case $.mobile.keyCode.HOME:
- case $.mobile.keyCode.END:
- case $.mobile.keyCode.PAGE_UP:
- case $.mobile.keyCode.PAGE_DOWN:
- case $.mobile.keyCode.UP:
- case $.mobile.keyCode.RIGHT:
- case $.mobile.keyCode.DOWN:
- case $.mobile.keyCode.LEFT:
- event.preventDefault();
-
- if ( !self._keySliding ) {
- self._keySliding = true;
- $( this ).addClass( "ui-state-active" );
- }
- break;
- }
-
- // move the slider according to the keypress
- switch ( event.keyCode ) {
- case $.mobile.keyCode.HOME:
- self.refresh( min );
- break;
- case $.mobile.keyCode.END:
- self.refresh( max );
- break;
- case $.mobile.keyCode.PAGE_UP:
- case $.mobile.keyCode.UP:
- case $.mobile.keyCode.RIGHT:
- self.refresh( index + step );
- break;
- case $.mobile.keyCode.PAGE_DOWN:
- case $.mobile.keyCode.DOWN:
- case $.mobile.keyCode.LEFT:
- self.refresh( index - step );
- break;
- }
- }) // remove active mark
- .keyup( function( event ) {
- if ( self._keySliding ) {
- self._keySliding = false;
- $( this ).removeClass( "ui-state-active" );
- }
- });
-
- this.refresh(undefined, undefined, true);
- },
-
- refresh: function( val, isfromControl, preventInputUpdate ) {
-
- if ( this.options.disabled || this.element.attr('disabled')) {
- this.disable();
- }
-
- var control = this.element, percent,
- cType = control[0].nodeName.toLowerCase(),
- min = cType === "input" ? parseFloat( control.attr( "min" ) ) : 0,
- max = cType === "input" ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length - 1;
-
- if ( typeof val === "object" ) {
- var data = val,
- // a slight tolerance helped get to the ends of the slider
- tol = 8;
- if ( !this.dragging ||
- data.pageX < this.slider.offset().left - tol ||
- data.pageX > this.slider.offset().left + this.slider.width() + tol ) {
- return;
- }
- percent = Math.round( ( ( data.pageX - this.slider.offset().left ) / this.slider.width() ) * 100 );
- } else {
- if ( val == null ) {
- val = cType === "input" ? parseFloat( control.val() ) : control[0].selectedIndex;
- }
- percent = ( parseFloat( val ) - min ) / ( max - min ) * 100;
- }
-
- if ( isNaN( percent ) ) {
- return;
- }
-
- if ( percent < 0 ) {
- percent = 0;
- }
-
- if ( percent > 100 ) {
- percent = 100;
- }
-
- var newval = Math.round( ( percent / 100 ) * ( max - min ) ) + min;
-
- if ( newval < min ) {
- newval = min;
- }
-
- if ( newval > max ) {
- newval = max;
- }
-
- // Flip the stack of the bg colors
- if ( percent > 60 && cType === "select" ) {
- // TODO: Dead path?
- }
- this.handle.css( "left", percent + "%" );
- this.handle.attr( {
- "aria-valuenow": cType === "input" ? newval : control.find( "option" ).eq( newval ).attr( "value" ),
- "aria-valuetext": cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText(),
- title: newval
- });
-
- // add/remove classes for flip toggle switch
- if ( cType === "select" ) {
- if ( newval === 0 ) {
- this.slider.addClass( "ui-slider-switch-a" )
- .removeClass( "ui-slider-switch-b" );
- } else {
- this.slider.addClass( "ui-slider-switch-b" )
- .removeClass( "ui-slider-switch-a" );
- }
- }
-
- if ( !preventInputUpdate ) {
- var valueChanged = false;
-
- // update control"s value
- if ( cType === "input" ) {
- valueChanged = control.val() !== newval;
- control.val( newval );
- } else {
- valueChanged = control[ 0 ].selectedIndex !== newval;
- control[ 0 ].selectedIndex = newval;
- }
- if ( !isfromControl && valueChanged ) {
- control.trigger( "change" );
- }
- }
- },
-
- enable: function() {
- this.element.attr( "disabled", false );
- this.slider.removeClass( "ui-disabled" ).attr( "aria-disabled", false );
- return this._setOption( "disabled", false );
- },
-
- disable: function() {
- this.element.attr( "disabled", true );
- this.slider.addClass( "ui-disabled" ).attr( "aria-disabled", true );
- return this._setOption( "disabled", true );
- }
-
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $.mobile.slider.prototype.enhanceWithin( e.target );
-});
-
-})( jQuery );
-/*
-* "textinput" plugin for text inputs, textareas
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.textinput", $.mobile.widget, {
- options: {
- theme: null,
- initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type])"
- },
-
- _create: function() {
-
- var input = this.element,
- o = this.options,
- theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ),
- themeclass = " ui-body-" + theme,
- focusedEl, clearbtn;
-
- $( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
-
- focusedEl = input.addClass("ui-input-text ui-body-"+ theme );
-
- // XXX: Temporary workaround for issue 785 (Apple bug 8910589).
- // Turn off autocorrect and autocomplete on non-iOS 5 devices
- // since the popup they use can't be dismissed by the user. Note
- // that we test for the presence of the feature by looking for
- // the autocorrect property on the input element. We currently
- // have no test for iOS 5 or newer so we're temporarily using
- // the touchOverflow support flag for jQM 1.0. Yes, I feel dirty. - jblas
- if ( typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow ) {
- // Set the attribute instead of the property just in case there
- // is code that attempts to make modifications via HTML.
- input[0].setAttribute( "autocorrect", "off" );
- input[0].setAttribute( "autocomplete", "off" );
- }
-
-
- //"search" input widget
- if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
-
- focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + "'></div>" ).parent();
- clearbtn = $( "<a href='#' class='ui-input-clear' title='clear text'>clear text</a>" )
- .tap(function( event ) {
- input.val( "" ).focus();
- input.trigger( "change" );
- clearbtn.addClass( "ui-input-clear-hidden" );
- event.preventDefault();
- })
- .appendTo( focusedEl )
- .buttonMarkup({
- icon: "delete",
- iconpos: "notext",
- corners: true,
- shadow: true
- });
-
- function toggleClear() {
- setTimeout(function() {
- clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
- }, 0);
- }
-
- toggleClear();
-
- input.bind('paste cut keyup focus change blur', toggleClear);
-
- } else {
- input.addClass( "ui-corner-all ui-shadow-inset" + themeclass );
- }
-
- input.focus(function() {
- focusedEl.addClass( "ui-focus" );
- })
- .blur(function(){
- focusedEl.removeClass( "ui-focus" );
- });
-
- // Autogrow
- if ( input.is( "textarea" ) ) {
- var extraLineHeight = 15,
- keyupTimeoutBuffer = 100,
- keyup = function() {
- var scrollHeight = input[ 0 ].scrollHeight,
- clientHeight = input[ 0 ].clientHeight;
-
- if ( clientHeight < scrollHeight ) {
- input.height(scrollHeight + extraLineHeight);
- }
- },
- keyupTimeout;
-
- input.keyup(function() {
- clearTimeout( keyupTimeout );
- keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
- });
-
- // Issue 509: the browser is not providing scrollHeight properly until the styles load
- if ( $.trim( input.val() ) ) {
- // bind to the window load to make sure the height is calculated based on BOTH
- // the DOM and CSS
- $( window ).load( keyup );
-
- // binding to pagechange here ensures that for pages loaded via
- // ajax the height is recalculated without user input
- $( document ).one( "pagechange", keyup );
- }
- }
- },
-
- disable: function(){
- ( this.element.attr( "disabled", true ).is( "[type='search'],:jqmData(type='search')" ) ?
- this.element.parent() : this.element ).addClass( "ui-disabled" );
- },
-
- enable: function(){
- ( this.element.attr( "disabled", false).is( "[type='search'],:jqmData(type='search')" ) ?
- this.element.parent() : this.element ).removeClass( "ui-disabled" );
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $.mobile.textinput.prototype.enhanceWithin( e.target );
-});
-
-})( jQuery );
-/*
-* custom "selectmenu" plugin
-*/
-
-(function( $, undefined ) {
- var extendSelect = function( widget ){
-
- var select = widget.select,
- selectID = widget.selectID,
- label = widget.label,
- thisPage = widget.select.closest( ".ui-page" ),
- screen = $( "<div>", {"class": "ui-selectmenu-screen ui-screen-hidden"} ).appendTo( thisPage ),
- selectOptions = widget._selectOptions(),
- isMultiple = widget.isMultiple = widget.select[ 0 ].multiple,
- buttonId = selectID + "-button",
- menuId = selectID + "-menu",
- menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' data-" +$.mobile.ns + "theme='"+ widget.options.theme +"' data-" +$.mobile.ns + "overlay-theme='"+ widget.options.overlayTheme +"'>" +
- "<div data-" + $.mobile.ns + "role='header'>" +
- "<div class='ui-title'>" + label.getEncodedText() + "</div>"+
- "</div>"+
- "<div data-" + $.mobile.ns + "role='content'></div>"+
- "</div>" ).appendTo( $.mobile.pageContainer ).page(),
-
- listbox = $("<div>", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen),
-
- list = $( "<ul>", {
- "class": "ui-selectmenu-list",
- "id": menuId,
- "role": "listbox",
- "aria-labelledby": buttonId
- }).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).appendTo( listbox ),
-
- header = $( "<div>", {
- "class": "ui-header ui-bar-" + widget.options.theme
- }).prependTo( listbox ),
-
- headerTitle = $( "<h1>", {
- "class": "ui-title"
- }).appendTo( header ),
-
- headerClose = $( "<a>", {
- "text": widget.options.closeText,
- "href": "#",
- "class": "ui-btn-left"
- }).attr( "data-" + $.mobile.ns + "iconpos", "notext" ).attr( "data-" + $.mobile.ns + "icon", "delete" ).appendTo( header ).buttonMarkup(),
-
- menuPageContent = menuPage.find( ".ui-content" ),
-
- menuPageClose = menuPage.find( ".ui-header a" );
-
-
- $.extend( widget, {
- select: widget.select,
- selectID: selectID,
- buttonId: buttonId,
- menuId: menuId,
- thisPage: thisPage,
- menuPage: menuPage,
- label: label,
- screen: screen,
- selectOptions: selectOptions,
- isMultiple: isMultiple,
- theme: widget.options.theme,
- listbox: listbox,
- list: list,
- header: header,
- headerTitle: headerTitle,
- headerClose: headerClose,
- menuPageContent: menuPageContent,
- menuPageClose: menuPageClose,
- placeholder: "",
-
- build: function() {
- var self = this;
-
- // Create list from select, update state
- self.refresh();
-
- self.select.attr( "tabindex", "-1" ).focus(function() {
- $( this ).blur();
- self.button.focus();
- });
-
- // Button events
- self.button.bind( "vclick keydown" , function( event ) {
- if ( event.type == "vclick" ||
- event.keyCode && ( event.keyCode === $.mobile.keyCode.ENTER ||
- event.keyCode === $.mobile.keyCode.SPACE ) ) {
-
- self.open();
- event.preventDefault();
- }
- });
-
- // Events for list items
- self.list.attr( "role", "listbox" )
- .delegate( ".ui-li>a", "focusin", function() {
- $( this ).attr( "tabindex", "0" );
- })
- .delegate( ".ui-li>a", "focusout", function() {
- $( this ).attr( "tabindex", "-1" );
- })
- .delegate( "li:not(.ui-disabled, .ui-li-divider)", "click", function( event ) {
-
- // index of option tag to be selected
- var oldIndex = self.select[ 0 ].selectedIndex,
- newIndex = self.list.find( "li:not(.ui-li-divider)" ).index( this ),
- option = self._selectOptions().eq( newIndex )[ 0 ];
-
- // toggle selected status on the tag for multi selects
- option.selected = self.isMultiple ? !option.selected : true;
-
- // toggle checkbox class for multiple selects
- if ( self.isMultiple ) {
- $( this ).find( ".ui-icon" )
- .toggleClass( "ui-icon-checkbox-on", option.selected )
- .toggleClass( "ui-icon-checkbox-off", !option.selected );
- }
-
- // trigger change if value changed
- if ( self.isMultiple || oldIndex !== newIndex ) {
- self.select.trigger( "change" );
- }
-
- //hide custom select for single selects only
- if ( !self.isMultiple ) {
- self.close();
- }
-
- event.preventDefault();
- })
- .keydown(function( event ) { //keyboard events for menu items
- var target = $( event.target ),
- li = target.closest( "li" ),
- prev, next;
-
- // switch logic based on which key was pressed
- switch ( event.keyCode ) {
- // up or left arrow keys
- case 38:
- prev = li.prev();
-
- // if there's a previous option, focus it
- if ( prev.length ) {
- target
- .blur()
- .attr( "tabindex", "-1" );
-
- prev.find( "a" ).first().focus();
- }
-
- return false;
- break;
-
- // down or right arrow keys
- case 40:
- next = li.next();
-
- // if there's a next option, focus it
- if ( next.length ) {
- target
- .blur()
- .attr( "tabindex", "-1" );
-
- next.find( "a" ).first().focus();
- }
-
- return false;
- break;
-
- // If enter or space is pressed, trigger click
- case 13:
- case 32:
- target.trigger( "click" );
-
- return false;
- break;
- }
- });
-
- // button refocus ensures proper height calculation
- // by removing the inline style and ensuring page inclusion
- self.menuPage.bind( "pagehide", function() {
- self.list.appendTo( self.listbox );
- self._focusButton();
-
- // TODO centralize page removal binding / handling in the page plugin.
- // Suggestion from @jblas to do refcounting
- //
- // TODO extremely confusing dependency on the open method where the pagehide.remove
- // bindings are stripped to prevent the parent page from disappearing. The way
- // we're keeping pages in the DOM right now sucks
- //
- // rebind the page remove that was unbound in the open function
- // to allow for the parent page removal from actions other than the use
- // of a dialog sized custom select
- //
- // doing this here provides for the back button on the custom select dialog
- $.mobile._bindPageRemove.call( self.thisPage );
- });
-
- // Events on "screen" overlay
- self.screen.bind( "vclick", function( event ) {
- self.close();
- });
-
- // Close button on small overlays
- self.headerClose.click( function() {
- if ( self.menuType == "overlay" ) {
- self.close();
- return false;
- }
- });
-
- // track this dependency so that when the parent page
- // is removed on pagehide it will also remove the menupage
- self.thisPage.addDependents( this.menuPage );
- },
-
- _isRebuildRequired: function() {
- var list = this.list.find( "li" ),
- options = this._selectOptions();
-
- // TODO exceedingly naive method to determine difference
- // ignores value changes etc in favor of a forcedRebuild
- // from the user in the refresh method
- return options.text() !== list.text();
- },
-
- refresh: function( forceRebuild , foo ){
- var self = this,
- select = this.element,
- isMultiple = this.isMultiple,
- options = this._selectOptions(),
- selected = this.selected(),
- // return an array of all selected index's
- indicies = this.selectedIndices();
-
- if ( forceRebuild || this._isRebuildRequired() ) {
- self._buildList();
- }
-
- self.setButtonText();
- self.setButtonCount();
-
- self.list.find( "li:not(.ui-li-divider)" )
- .removeClass( $.mobile.activeBtnClass )
- .attr( "aria-selected", false )
- .each(function( i ) {
-
- if ( $.inArray( i, indicies ) > -1 ) {
- var item = $( this );
-
- // Aria selected attr
- item.attr( "aria-selected", true );
-
- // Multiple selects: add the "on" checkbox state to the icon
- if ( self.isMultiple ) {
- item.find( ".ui-icon" ).removeClass( "ui-icon-checkbox-off" ).addClass( "ui-icon-checkbox-on" );
- } else {
- item.addClass( $.mobile.activeBtnClass );
- }
- }
- });
- },
-
- close: function() {
- if ( this.options.disabled || !this.isOpen ) {
- return;
- }
-
- var self = this;
-
- if ( self.menuType == "page" ) {
- // doesn't solve the possible issue with calling change page
- // where the objects don't define data urls which prevents dialog key
- // stripping - changePage has incoming refactor
- window.history.back();
- } else {
- self.screen.addClass( "ui-screen-hidden" );
- self.listbox.addClass( "ui-selectmenu-hidden" ).removeAttr( "style" ).removeClass( "in" );
- self.list.appendTo( self.listbox );
- self._focusButton();
- }
-
- // allow the dialog to be closed again
- self.isOpen = false;
- },
-
- open: function() {
- if ( this.options.disabled ) {
- return;
- }
-
- var self = this,
- menuHeight = self.list.parent().outerHeight(),
- menuWidth = self.list.parent().outerWidth(),
- activePage = $( ".ui-page-active" ),
- tOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
- tScrollElem = activePage.is( ".ui-native-fixed" ) ? activePage.find( ".ui-content" ) : activePage;
- scrollTop = tOverflow ? tScrollElem.scrollTop() : $( window ).scrollTop(),
- btnOffset = self.button.offset().top,
- screenHeight = window.innerHeight,
- screenWidth = window.innerWidth;
-
- //add active class to button
- self.button.addClass( $.mobile.activeBtnClass );
-
- //remove after delay
- setTimeout( function() {
- self.button.removeClass( $.mobile.activeBtnClass );
- }, 300);
-
- function focusMenuItem() {
- self.list.find( $.mobile.activeBtnClass ).focus();
- }
-
- if ( menuHeight > screenHeight - 80 || !$.support.scrollTop ) {
- // prevent the parent page from being removed from the DOM,
- // otherwise the results of selecting a list item in the dialog
- // fall into a black hole
- self.thisPage.unbind( "pagehide.remove" );
-
- //for WebOS/Opera Mini (set lastscroll using button offset)
- if ( scrollTop == 0 && btnOffset > screenHeight ) {
- self.thisPage.one( "pagehide", function() {
- $( this ).jqmData( "lastScroll", btnOffset );
- });
- }
-
- self.menuPage.one( "pageshow", function() {
- // silentScroll() is called whenever a page is shown to restore
- // any previous scroll position the page may have had. We need to
- // wait for the "silentscroll" event before setting focus to avoid
- // the browser"s "feature" which offsets rendering to make sure
- // whatever has focus is in view.
- $( window ).one( "silentscroll", function() {
- focusMenuItem();
- });
-
- self.isOpen = true;
- });
-
- self.menuType = "page";
- self.menuPageContent.append( self.list );
- self.menuPage.find("div .ui-title").text(self.label.text());
- $.mobile.changePage( self.menuPage, {
- transition: $.mobile.defaultDialogTransition
- });
- } else {
- self.menuType = "overlay";
-
- self.screen.height( $(document).height() )
- .removeClass( "ui-screen-hidden" );
-
- // Try and center the overlay over the button
- var roomtop = btnOffset - scrollTop,
- roombot = scrollTop + screenHeight - btnOffset,
- halfheight = menuHeight / 2,
- maxwidth = parseFloat( self.list.parent().css( "max-width" ) ),
- newtop, newleft;
-
- if ( roomtop > menuHeight / 2 && roombot > menuHeight / 2 ) {
- newtop = btnOffset + ( self.button.outerHeight() / 2 ) - halfheight;
- } else {
- // 30px tolerance off the edges
- newtop = roomtop > roombot ? scrollTop + screenHeight - menuHeight - 30 : scrollTop + 30;
- }
-
- // If the menuwidth is smaller than the screen center is
- if ( menuWidth < maxwidth ) {
- newleft = ( screenWidth - menuWidth ) / 2;
- } else {
-
- //otherwise insure a >= 30px offset from the left
- newleft = self.button.offset().left + self.button.outerWidth() / 2 - menuWidth / 2;
-
- // 30px tolerance off the edges
- if ( newleft < 30 ) {
- newleft = 30;
- } else if ( (newleft + menuWidth) > screenWidth ) {
- newleft = screenWidth - menuWidth - 30;
- }
- }
-
- self.listbox.append( self.list )
- .removeClass( "ui-selectmenu-hidden" )
- .css({
- top: newtop,
- left: newleft
- })
- .addClass( "in" );
-
- focusMenuItem();
-
- // duplicate with value set in page show for dialog sized selects
- self.isOpen = true;
- }
- },
-
- _buildList: function() {
- var self = this,
- o = this.options,
- placeholder = this.placeholder,
- optgroups = [],
- lis = [],
- dataIcon = self.isMultiple ? "checkbox-off" : "false";
-
- self.list.empty().filter( ".ui-listview" ).listview( "destroy" );
-
- // Populate menu with options from select element
- self.select.find( "option" ).each( function( i ) {
- var $this = $( this ),
- $parent = $this.parent(),
- text = $this.getEncodedText(),
- anchor = "<a href='#'>"+ text +"</a>",
- classes = [],
- extraAttrs = [];
-
- // Are we inside an optgroup?
- if ( $parent.is( "optgroup" ) ) {
- var optLabel = $parent.attr( "label" );
-
- // has this optgroup already been built yet?
- if ( $.inArray( optLabel, optgroups ) === -1 ) {
- lis.push( "<li data-" + $.mobile.ns + "role='list-divider'>"+ optLabel +"</li>" );
- optgroups.push( optLabel );
- }
- }
-
- // Find placeholder text
- // TODO: Are you sure you want to use getAttribute? ^RW
- if ( !this.getAttribute( "value" ) || text.length == 0 || $this.jqmData( "placeholder" ) ) {
- if ( o.hidePlaceholderMenuItems ) {
- classes.push( "ui-selectmenu-placeholder" );
- }
- placeholder = self.placeholder = text;
- }
-
- // support disabled option tags
- if ( this.disabled ) {
- classes.push( "ui-disabled" );
- extraAttrs.push( "aria-disabled='true'" );
- }
-
- lis.push( "<li data-" + $.mobile.ns + "option-index='" + i + "' data-" + $.mobile.ns + "icon='"+ dataIcon +"' class='"+ classes.join(" ") + "' " + extraAttrs.join(" ") +">"+ anchor +"</li>" );
- });
-
- self.list.html( lis.join(" ") );
-
- self.list.find( "li" )
- .attr({ "role": "option", "tabindex": "-1" })
- .first().attr( "tabindex", "0" );
-
- // Hide header close link for single selects
- if ( !this.isMultiple ) {
- this.headerClose.hide();
- }
-
- // Hide header if it's not a multiselect and there's no placeholder
- if ( !this.isMultiple && !placeholder.length ) {
- this.header.hide();
- } else {
- this.headerTitle.text( this.placeholder );
- }
-
- // Now populated, create listview
- self.list.listview();
- },
-
- _button: function(){
- return $( "<a>", {
- "href": "#",
- "role": "button",
- // TODO value is undefined at creation
- "id": this.buttonId,
- "aria-haspopup": "true",
-
- // TODO value is undefined at creation
- "aria-owns": this.menuId
- });
- }
- });
- };
-
- $( "select" ).live( "selectmenubeforecreate", function(){
- var selectmenuWidget = $( this ).data( "selectmenu" );
-
- if( !selectmenuWidget.options.nativeMenu ){
- extendSelect( selectmenuWidget );
- }
- });
-})( jQuery );
-/*
-* "selectmenu" plugin
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.selectmenu", $.mobile.widget, {
- options: {
- theme: null,
- disabled: false,
- icon: "arrow-d",
- iconpos: "right",
- inline: null,
- corners: true,
- shadow: true,
- iconshadow: true,
- menuPageTheme: "b",
- overlayTheme: "a",
- hidePlaceholderMenuItems: true,
- closeText: "Close",
- nativeMenu: true,
- initSelector: "select:not(:jqmData(role='slider'))"
- },
-
- _button: function(){
- return $( "<div/>" );
- },
-
- _setDisabled: function( value ) {
- this.element.attr( "disabled", value );
- this.button.attr( "aria-disabled", value );
- return this._setOption( "disabled", value );
- },
-
- _focusButton : function() {
- var self = this;
-
- setTimeout( function() {
- self.button.focus();
- }, 40);
- },
-
- _selectOptions: function() {
- return this.select.find( "option" );
- },
-
- // setup items that are generally necessary for select menu extension
- _preExtension: function(){
- this.select = this.element.wrap( "<div class='ui-select'>" );
- this.selectID = this.select.attr( "id" );
- this.label = $( "label[for='"+ this.selectID +"']" ).addClass( "ui-select" );
- this.isMultiple = this.select[ 0 ].multiple;
- if ( !this.options.theme ) {
- this.options.theme = $.mobile.getInheritedTheme( this.select, "c" );
- }
- },
-
- _create: function() {
- this._preExtension();
-
- // Allows for extension of the native select for custom selects and other plugins
- // see select.custom for example extension
- // TODO explore plugin registration
- this._trigger( "beforeCreate" );
-
- this.button = this._button();
-
- var self = this,
-
- options = this.options,
-
- // IE throws an exception at options.item() function when
- // there is no selected item
- // select first in this case
- selectedIndex = this.select[ 0 ].selectedIndex == -1 ? 0 : this.select[ 0 ].selectedIndex,
-
- // TODO values buttonId and menuId are undefined here
- button = this.button
- .text( $( this.select[ 0 ].options.item( selectedIndex ) ).text() )
- .insertBefore( this.select )
- .buttonMarkup( {
- theme: options.theme,
- icon: options.icon,
- iconpos: options.iconpos,
- inline: options.inline,
- corners: options.corners,
- shadow: options.shadow,
- iconshadow: options.iconshadow
- });
-
- // Opera does not properly support opacity on select elements
- // In Mini, it hides the element, but not its text
- // On the desktop,it seems to do the opposite
- // for these reasons, using the nativeMenu option results in a full native select in Opera
- if ( options.nativeMenu && window.opera && window.opera.version ) {
- this.select.addClass( "ui-select-nativeonly" );
- }
-
- // Add counter for multi selects
- if ( this.isMultiple ) {
- this.buttonCount = $( "<span>" )
- .addClass( "ui-li-count ui-btn-up-c ui-btn-corner-all" )
- .hide()
- .appendTo( button.addClass('ui-li-has-count') );
- }
-
- // Disable if specified
- if ( options.disabled || this.element.attr('disabled')) {
- this.disable();
- }
-
- // Events on native select
- this.select.change( function() {
- self.refresh();
- });
-
- this.build();
- },
-
- build: function() {
- var self = this;
-
- this.select
- .appendTo( self.button )
- .bind( "vmousedown", function() {
- // Add active class to button
- self.button.addClass( $.mobile.activeBtnClass );
- })
- .bind( "focus vmouseover", function() {
- self.button.trigger( "vmouseover" );
- })
- .bind( "vmousemove", function() {
- // Remove active class on scroll/touchmove
- self.button.removeClass( $.mobile.activeBtnClass );
- })
- .bind( "change blur vmouseout", function() {
- self.button.trigger( "vmouseout" )
- .removeClass( $.mobile.activeBtnClass );
- })
- .bind( "change blur", function() {
- self.button.removeClass( "ui-btn-down-" + self.options.theme );
- });
- },
-
- selected: function() {
- return this._selectOptions().filter( ":selected" );
- },
-
- selectedIndices: function() {
- var self = this;
-
- return this.selected().map( function() {
- return self._selectOptions().index( this );
- }).get();
- },
-
- setButtonText: function() {
- var self = this, selected = this.selected();
-
- this.button.find( ".ui-btn-text" ).text( function() {
- if ( !self.isMultiple ) {
- return selected.text();
- }
-
- return selected.length ? selected.map( function() {
- return $( this ).text();
- }).get().join( ", " ) : self.placeholder;
- });
- },
-
- setButtonCount: function() {
- var selected = this.selected();
-
- // multiple count inside button
- if ( this.isMultiple ) {
- this.buttonCount[ selected.length > 1 ? "show" : "hide" ]().text( selected.length );
- }
- },
-
- refresh: function() {
- this.setButtonText();
- this.setButtonCount();
- },
-
- // open and close preserved in native selects
- // to simplify users code when looping over selects
- open: $.noop,
- close: $.noop,
-
- disable: function() {
- this._setDisabled( true );
- this.button.addClass( "ui-disabled" );
- },
-
- enable: function() {
- this._setDisabled( false );
- this.button.removeClass( "ui-disabled" );
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $.mobile.selectmenu.prototype.enhanceWithin( e.target );
-});
-})( jQuery );
-/*
-* "buttons" plugin - for making button-like links
-*/
-
-( function( $, undefined ) {
-
-$.fn.buttonMarkup = function( options ) {
- options = options || {};
-
- for ( var i = 0; i < this.length; i++ ) {
- var el = this.eq( i ),
- e = el[ 0 ],
- o = $.extend( {}, $.fn.buttonMarkup.defaults, {
- icon: options.icon !== undefined ? options.icon : el.jqmData( "icon" ),
- iconpos: options.iconpos !== undefined ? options.iconpos : el.jqmData( "iconpos" ),
- theme: options.theme !== undefined ? options.theme : el.jqmData( "theme" ),
- inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ),
- shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ),
- corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ),
- iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" )
- }, options ),
-
- // Classes Defined
- innerClass = "ui-btn-inner",
- textClass = "ui-btn-text",
- buttonClass, iconClass,
-
- // Button inner markup
- buttonInner = document.createElement( o.wrapperEls ),
- buttonText = document.createElement( o.wrapperEls ),
- buttonIcon = o.icon ? document.createElement( "span" ) : null;
-
- if ( attachEvents ) {
- attachEvents();
- }
-
- // if not, try to find closest theme container
- if ( !o.theme ) {
- o.theme = $.mobile.getInheritedTheme( el, "c" );
- }
-
- buttonClass = "ui-btn ui-btn-up-" + o.theme;
-
- if ( o.inline ) {
- buttonClass += " ui-btn-inline";
- }
-
- if ( o.icon ) {
- o.icon = "ui-icon-" + o.icon;
- o.iconpos = o.iconpos || "left";
-
- iconClass = "ui-icon " + o.icon;
-
- if ( o.iconshadow ) {
- iconClass += " ui-icon-shadow";
- }
- }
-
- if ( o.iconpos ) {
- buttonClass += " ui-btn-icon-" + o.iconpos;
-
- if ( o.iconpos == "notext" && !el.attr( "title" ) ) {
- el.attr( "title", el.getEncodedText() );
- }
- }
-
- if ( o.corners ) {
- buttonClass += " ui-btn-corner-all";
- innerClass += " ui-btn-corner-all";
- }
-
- if ( o.shadow ) {
- buttonClass += " ui-shadow";
- }
-
- e.setAttribute( "data-" + $.mobile.ns + "theme", o.theme );
- el.addClass( buttonClass );
-
- buttonInner.className = innerClass;
- buttonInner.setAttribute("aria-hidden", "true");
-
- buttonText.className = textClass;
- buttonInner.appendChild( buttonText );
-
- if ( buttonIcon ) {
- buttonIcon.className = iconClass;
- buttonInner.appendChild( buttonIcon );
- }
-
- while ( e.firstChild ) {
- buttonText.appendChild( e.firstChild );
- }
-
- e.appendChild( buttonInner );
-
- // TODO obviously it would be nice to pull this element out instead of
- // retrieving it from the DOM again, but this change is much less obtrusive
- // and 1.0 draws nigh
- $.data( e, 'textWrapper', $( buttonText ) );
- }
-
- return this;
-};
-
-$.fn.buttonMarkup.defaults = {
- corners: true,
- shadow: true,
- iconshadow: true,
- inline: false,
- wrapperEls: "span"
-};
-
-function closestEnabledButton( element ) {
- var cname;
-
- while ( element ) {
- // Note that we check for typeof className below because the element we
- // handed could be in an SVG DOM where className on SVG elements is defined to
- // be of a different type (SVGAnimatedString). We only operate on HTML DOM
- // elements, so we look for plain "string".
-
- cname = ( typeof element.className === 'string' ) && element.className.split(' ');
-
- if ( cname && $.inArray( "ui-btn", cname ) > -1 && $.inArray( "ui-disabled", cname ) < 0 ) {
- break;
- }
- element = element.parentNode;
- }
-
- return element;
-}
-
-var attachEvents = function() {
- $( document ).bind( {
- "vmousedown": function( event ) {
- var btn = closestEnabledButton( event.target ),
- $btn, theme;
-
- if ( btn ) {
- $btn = $( btn );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
- $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
- }
- },
- "vmousecancel vmouseup": function( event ) {
- var btn = closestEnabledButton( event.target ),
- $btn, theme;
-
- if ( btn ) {
- $btn = $( btn );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
- $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
- }
- },
- "vmouseover focus": function( event ) {
- var btn = closestEnabledButton( event.target ),
- $btn, theme;
-
- if ( btn ) {
- $btn = $( btn );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
- $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
- }
- },
- "vmouseout blur": function( event ) {
- var btn = closestEnabledButton( event.target ),
- $btn, theme;
-
- if ( btn ) {
- $btn = $( btn );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
- $btn.removeClass( "ui-btn-hover-" + theme + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
- }
- }
- });
-
- attachEvents = null;
-};
-
-//links in bars, or those with data-role become buttons
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
-
- $( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", e.target )
- .not( ".ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )
- .buttonMarkup();
-});
-
-})( jQuery );
-/*
-* "controlgroup" plugin - corner-rounding for groups of buttons, checks, radios, etc
-*/
-
-(function( $, undefined ) {
-
-$.fn.controlgroup = function( options ) {
-
- return this.each(function() {
-
- var $el = $( this ),
- o = $.extend({
- direction: $el.jqmData( "type" ) || "vertical",
- shadow: false,
- excludeInvisible: true
- }, options ),
- groupheading = $el.children( "legend" ),
- flCorners = o.direction == "horizontal" ? [ "ui-corner-left", "ui-corner-right" ] : [ "ui-corner-top", "ui-corner-bottom" ],
- type = $el.find( "input" ).first().attr( "type" );
-
- // Replace legend with more stylable replacement div
- if ( groupheading.length ) {
- $el.wrapInner( "<div class='ui-controlgroup-controls'></div>" );
- $( "<div role='heading' class='ui-controlgroup-label'>" + groupheading.html() + "</div>" ).insertBefore( $el.children(0) );
- groupheading.remove();
- }
-
- $el.addClass( "ui-corner-all ui-controlgroup ui-controlgroup-" + o.direction );
-
- // TODO: This should be moved out to the closure
- // otherwise it is redefined each time controlgroup() is called
- function flipClasses( els ) {
- els.removeClass( "ui-btn-corner-all ui-shadow" )
- .eq( 0 ).addClass( flCorners[ 0 ] )
- .end()
- .last().addClass( flCorners[ 1 ] ).addClass( "ui-controlgroup-last" );
- }
-
- flipClasses( $el.find( ".ui-btn" + ( o.excludeInvisible ? ":visible" : "" ) ) );
- flipClasses( $el.find( ".ui-btn-inner" ) );
-
- if ( o.shadow ) {
- $el.addClass( "ui-shadow" );
- }
- });
-};
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $( ":jqmData(role='controlgroup')", e.target ).controlgroup({ excludeInvisible: false });
-});
-
-})(jQuery);/*
-* "links" plugin - simple class additions for links
-*/
-
-(function( $, undefined ) {
-
-$( document ).bind( "pagecreate create", function( e ){
-
- //links within content areas
- $( e.target )
- .find( "a" )
- .not( ".ui-btn, .ui-link-inherit, :jqmData(role='none'), :jqmData(role='nojs')" )
- .addClass( "ui-link" );
-
-});
-
-})( jQuery );/*
-* "fixHeaderFooter" plugin - on-demand positioning for headers,footers
-*/
-
-(function( $, undefined ) {
-
-var slideDownClass = "ui-header-fixed ui-fixed-inline fade",
- slideUpClass = "ui-footer-fixed ui-fixed-inline fade",
-
- slideDownSelector = ".ui-header:jqmData(position='fixed')",
- slideUpSelector = ".ui-footer:jqmData(position='fixed')";
-
-$.fn.fixHeaderFooter = function( options ) {
-
- if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) {
- return this;
- }
-
- return this.each(function() {
- var $this = $( this );
-
- if ( $this.jqmData( "fullscreen" ) ) {
- $this.addClass( "ui-page-fullscreen" );
- }
-
- // Should be slidedown
- $this.find( slideDownSelector ).addClass( slideDownClass );
-
- // Should be slideup
- $this.find( slideUpSelector ).addClass( slideUpClass );
- });
-};
-
-// single controller for all showing,hiding,toggling
-$.mobile.fixedToolbars = (function() {
-
- if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) {
- return;
- }
-
- var stickyFooter, delayTimer,
- currentstate = "inline",
- autoHideMode = false,
- showDelay = 100,
- ignoreTargets = "a,input,textarea,select,button,label,.ui-header-fixed,.ui-footer-fixed",
- toolbarSelector = ".ui-header-fixed:first, .ui-footer-fixed:not(.ui-footer-duplicate):last",
- // for storing quick references to duplicate footers
- supportTouch = $.support.touch,
- touchStartEvent = supportTouch ? "touchstart" : "mousedown",
- touchStopEvent = supportTouch ? "touchend" : "mouseup",
- stateBefore = null,
- scrollTriggered = false,
- touchToggleEnabled = true;
-
- function showEventCallback( event ) {
- // An event that affects the dimensions of the visual viewport has
- // been triggered. If the header and/or footer for the current page are in overlay
- // mode, we want to hide them, and then fire off a timer to show them at a later
- // point. Events like a resize can be triggered continuously during a scroll, on
- // some platforms, so the timer is used to delay the actual positioning until the
- // flood of events have subsided.
- //
- // If we are in autoHideMode, we don't do anything because we know the scroll
- // callbacks for the plugin will fire off a show when the scrolling has stopped.
- if ( !autoHideMode && currentstate === "overlay" ) {
- if ( !delayTimer ) {
- $.mobile.fixedToolbars.hide( true );
- }
-
- $.mobile.fixedToolbars.startShowTimer();
- }
- }
-
- $(function() {
- var $document = $( document ),
- $window = $( window );
-
- $document
- .bind( "vmousedown", function( event ) {
- if ( touchToggleEnabled ) {
- stateBefore = currentstate;
- }
- })
- .bind( "vclick", function( event ) {
- if ( touchToggleEnabled ) {
-
- if ( $(event.target).closest( ignoreTargets ).length ) {
- return;
- }
-
- if ( !scrollTriggered ) {
- $.mobile.fixedToolbars.toggle( stateBefore );
- stateBefore = null;
- }
- }
- })
- .bind( "silentscroll", showEventCallback );
-
-
- // The below checks first for a $(document).scrollTop() value, and if zero, binds scroll events to $(window) instead.
- // If the scrollTop value is actually zero, both will return zero anyway.
- //
- // Works with $(document), not $(window) : Opera Mobile (WinMO phone; kinda broken anyway)
- // Works with $(window), not $(document) : IE 7/8
- // Works with either $(window) or $(document) : Chrome, FF 3.6/4, Android 1.6/2.1, iOS
- // Needs work either way : BB5, Opera Mobile (iOS)
-
- ( ( $document.scrollTop() === 0 ) ? $window : $document )
- .bind( "scrollstart", function( event ) {
-
- scrollTriggered = true;
-
- if ( stateBefore === null ) {
- stateBefore = currentstate;
- }
-
- // We only enter autoHideMode if the headers/footers are in
- // an overlay state or the show timer was started. If the
- // show timer is set, clear it so the headers/footers don't
- // show up until after we're done scrolling.
- var isOverlayState = stateBefore == "overlay";
-
- autoHideMode = isOverlayState || !!delayTimer;
-
- if ( autoHideMode ) {
- $.mobile.fixedToolbars.clearShowTimer();
-
- if ( isOverlayState ) {
- $.mobile.fixedToolbars.hide( true );
- }
- }
- })
- .bind( "scrollstop", function( event ) {
-
- if ( $( event.target ).closest( ignoreTargets ).length ) {
- return;
- }
-
- scrollTriggered = false;
-
- if ( autoHideMode ) {
- $.mobile.fixedToolbars.startShowTimer();
- autoHideMode = false;
- }
- stateBefore = null;
- });
-
- $window.bind( "resize updatelayout", showEventCallback );
- });
-
- // 1. Before page is shown, check for duplicate footer
- // 2. After page is shown, append footer to new page
- $( ".ui-page" )
- .live( "pagebeforeshow", function( event, ui ) {
-
- var page = $( event.target ),
- footer = page.find( ":jqmData(role='footer')" ),
- id = footer.data( "id" ),
- prevPage = ui.prevPage,
- prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" ),
- prevFooterMatches = prevFooter.length && prevFooter.jqmData( "id" ) === id;
-
- if ( id && prevFooterMatches ) {
- stickyFooter = footer;
- setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
- }
- })
- .live( "pageshow", function( event, ui ) {
-
- var $this = $( this );
-
- if ( stickyFooter && stickyFooter.length ) {
-
- setTimeout(function() {
- setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
- stickyFooter = null;
- }, 500);
- }
-
- $.mobile.fixedToolbars.show( true, this );
- });
-
- // When a collapsiable is hidden or shown we need to trigger the fixed toolbar to reposition itself (#1635)
- $( ".ui-collapsible-contain" ).live( "collapse expand", showEventCallback );
-
- // element.getBoundingClientRect() is broken in iOS 3.2.1 on the iPad. The
- // coordinates inside of the rect it returns don't have the page scroll position
- // factored out of it like the other platforms do. To get around this,
- // we'll just calculate the top offset the old fashioned way until core has
- // a chance to figure out how to handle this situation.
- //
- // TODO: We'll need to get rid of getOffsetTop() once a fix gets folded into core.
-
- function getOffsetTop( ele ) {
- var top = 0,
- op, body;
-
- if ( ele ) {
- body = document.body;
- op = ele.offsetParent;
- top = ele.offsetTop;
-
- while ( ele && ele != body ) {
- top += ele.scrollTop || 0;
-
- if ( ele == op ) {
- top += op.offsetTop;
- op = ele.offsetParent;
- }
-
- ele = ele.parentNode;
- }
- }
- return top;
- }
-
- function setTop( el ) {
- var fromTop = $(window).scrollTop(),
- thisTop = getOffsetTop( el[ 0 ] ), // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead.
- thisCSStop = el.css( "top" ) == "auto" ? 0 : parseFloat(el.css( "top" )),
- screenHeight = window.innerHeight,
- thisHeight = el.outerHeight(),
- useRelative = el.parents( ".ui-page:not(.ui-page-fullscreen)" ).length,
- relval;
-
- if ( el.is( ".ui-header-fixed" ) ) {
-
- relval = fromTop - thisTop + thisCSStop;
-
- if ( relval < thisTop ) {
- relval = 0;
- }
-
- return el.css( "top", useRelative ? relval : fromTop );
- } else {
- // relval = -1 * (thisTop - (fromTop + screenHeight) + thisCSStop + thisHeight);
- // if ( relval > thisTop ) { relval = 0; }
- relval = fromTop + screenHeight - thisHeight - (thisTop - thisCSStop );
-
- return el.css( "top", useRelative ? relval : fromTop + screenHeight - thisHeight );
- }
- }
-
- // Exposed methods
- return {
-
- show: function( immediately, page ) {
-
- $.mobile.fixedToolbars.clearShowTimer();
-
- currentstate = "overlay";
-
- var $ap = page ? $( page ) :
- ( $.mobile.activePage ? $.mobile.activePage :
- $( ".ui-page-active" ) );
-
- return $ap.children( toolbarSelector ).each(function() {
-
- var el = $( this ),
- fromTop = $( window ).scrollTop(),
- // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead.
- thisTop = getOffsetTop( el[ 0 ] ),
- screenHeight = window.innerHeight,
- thisHeight = el.outerHeight(),
- alreadyVisible = ( el.is( ".ui-header-fixed" ) && fromTop <= thisTop + thisHeight ) ||
- ( el.is( ".ui-footer-fixed" ) && thisTop <= fromTop + screenHeight );
-
- // Add state class
- el.addClass( "ui-fixed-overlay" ).removeClass( "ui-fixed-inline" );
-
- if ( !alreadyVisible && !immediately ) {
- el.animationComplete(function() {
- el.removeClass( "in" );
- }).addClass( "in" );
- }
- setTop(el);
- });
- },
-
- hide: function( immediately ) {
-
- currentstate = "inline";
-
- var $ap = $.mobile.activePage ? $.mobile.activePage :
- $( ".ui-page-active" );
-
- return $ap.children( toolbarSelector ).each(function() {
-
- var el = $(this),
- thisCSStop = el.css( "top" ),
- classes;
-
- thisCSStop = thisCSStop == "auto" ? 0 :
- parseFloat(thisCSStop);
-
- // Add state class
- el.addClass( "ui-fixed-inline" ).removeClass( "ui-fixed-overlay" );
-
- if ( thisCSStop < 0 || ( el.is( ".ui-header-fixed" ) && thisCSStop !== 0 ) ) {
-
- if ( immediately ) {
- el.css( "top", 0);
- } else {
-
- if ( el.css( "top" ) !== "auto" && parseFloat( el.css( "top" ) ) !== 0 ) {
-
- classes = "out reverse";
-
- el.animationComplete(function() {
- el.removeClass( classes ).css( "top", 0 );
- }).addClass( classes );
- }
- }
- }
- });
- },
-
- startShowTimer: function() {
-
- $.mobile.fixedToolbars.clearShowTimer();
-
- var args = [].slice.call( arguments );
-
- delayTimer = setTimeout(function() {
- delayTimer = undefined;
- $.mobile.fixedToolbars.show.apply( null, args );
- }, showDelay);
- },
-
- clearShowTimer: function() {
- if ( delayTimer ) {
- clearTimeout( delayTimer );
- }
- delayTimer = undefined;
- },
-
- toggle: function( from ) {
- if ( from ) {
- currentstate = from;
- }
- return ( currentstate === "overlay" ) ? $.mobile.fixedToolbars.hide() :
- $.mobile.fixedToolbars.show();
- },
-
- setTouchToggleEnabled: function( enabled ) {
- touchToggleEnabled = enabled;
- }
- };
-})();
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( event ) {
-
- if ( $( ":jqmData(position='fixed')", event.target ).length ) {
-
- $( event.target ).each(function() {
-
- if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) {
- return this;
- }
-
- var $this = $( this );
-
- if ( $this.jqmData( "fullscreen" ) ) {
- $this.addClass( "ui-page-fullscreen" );
- }
-
- // Should be slidedown
- $this.find( slideDownSelector ).addClass( slideDownClass );
-
- // Should be slideup
- $this.find( slideUpSelector ).addClass( slideUpClass );
-
- })
-
- }
-});
-
-})( jQuery );
-/*
-* "fixHeaderFooter" native plugin - Behavior for "fixed" headers,footers, and scrolling inner content
-*/
-
-(function( $, undefined ) {
-
-// Enable touch overflow scrolling when it's natively supported
-$.mobile.touchOverflowEnabled = false;
-
-// Enabled zoom when touch overflow is enabled. Can cause usability issues, unfortunately
-$.mobile.touchOverflowZoomEnabled = false;
-
-$( document ).bind( "pagecreate", function( event ) {
- if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){
-
- var $target = $( event.target ),
- scrollStartY = 0;
-
- if( $target.is( ":jqmData(role='page')" ) ){
-
- $target.each(function() {
- var $page = $( this ),
- $fixies = $page.find( ":jqmData(role='header'), :jqmData(role='footer')" ).filter( ":jqmData(position='fixed')" ),
- fullScreen = $page.jqmData( "fullscreen" ),
- $scrollElem = $fixies.length ? $page.find( ".ui-content" ) : $page;
-
- $page.addClass( "ui-mobile-touch-overflow" );
-
- $scrollElem.bind( "scrollstop", function(){
- if( $scrollElem.scrollTop() > 0 ){
- window.scrollTo( 0, $.mobile.defaultHomeScroll );
- }
- });
-
- if( $fixies.length ){
-
- $page.addClass( "ui-native-fixed" );
-
- if( fullScreen ){
-
- $page.addClass( "ui-native-fullscreen" );
-
- $fixies.addClass( "fade in" );
-
- $( document ).bind( "vclick", function(){
- $fixies
- .removeClass( "ui-native-bars-hidden" )
- .toggleClass( "in out" )
- .animationComplete(function(){
- $(this).not( ".in" ).addClass( "ui-native-bars-hidden" );
- });
- });
- }
- }
- });
- }
- }
-});
-
-})( jQuery );
-/*
-* "init" - Initialize the framework
-*/
-
-(function( $, window, undefined ) {
- var $html = $( "html" ),
- $head = $( "head" ),
- $window = $( window );
-
- // trigger mobileinit event - useful hook for configuring $.mobile settings before they're used
- $( window.document ).trigger( "mobileinit" );
-
- // support conditions
- // if device support condition(s) aren't met, leave things as they are -> a basic, usable experience,
- // otherwise, proceed with the enhancements
- if ( !$.mobile.gradeA() ) {
- return;
- }
-
- // override ajaxEnabled on platforms that have known conflicts with hash history updates
- // or generally work better browsing in regular http for full page refreshes (BB5, Opera Mini)
- if ( $.mobile.ajaxBlacklist ) {
- $.mobile.ajaxEnabled = false;
- }
-
- // add mobile, initial load "rendering" classes to docEl
- $html.addClass( "ui-mobile ui-mobile-rendering" );
-
- // loading div which appears during Ajax requests
- // will not appear if $.mobile.loadingMessage is false
- var $loader = $( "<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>" );
-
- $.extend($.mobile, {
- // turn on/off page loading message.
- showPageLoadingMsg: function() {
- if ( $.mobile.loadingMessage ) {
- var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
-
- $loader
- .find( "h1" )
- .text( $.mobile.loadingMessage )
- .end()
- .appendTo( $.mobile.pageContainer )
- // position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
- .css({
- top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
- activeBtn.length && activeBtn.offset().top || 100
- });
- }
-
- $html.addClass( "ui-loading" );
- },
-
- hidePageLoadingMsg: function() {
- $html.removeClass( "ui-loading" );
- },
-
- // find and enhance the pages in the dom and transition to the first page.
- initializePage: function() {
- // find present pages
- var $pages = $( ":jqmData(role='page')" );
-
- // if no pages are found, create one with body's inner html
- if ( !$pages.length ) {
- $pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 );
- }
-
- // add dialogs, set data-url attrs
- $pages.add( ":jqmData(role='dialog')" ).each(function() {
- var $this = $(this);
-
- // unless the data url is already set set it to the pathname
- if ( !$this.jqmData("url") ) {
- $this.attr( "data-" + $.mobile.ns + "url", $this.attr( "id" ) || location.pathname + location.search );
- }
- });
-
- // define first page in dom case one backs out to the directory root (not always the first page visited, but defined as fallback)
- $.mobile.firstPage = $pages.first();
-
- // define page container
- $.mobile.pageContainer = $pages.first().parent().addClass( "ui-mobile-viewport" );
-
- // alert listeners that the pagecontainer has been determined for binding
- // to events triggered on it
- $window.trigger( "pagecontainercreate" );
-
- // cue page loading message
- $.mobile.showPageLoadingMsg();
-
- // if hashchange listening is disabled or there's no hash deeplink, change to the first page in the DOM
- if ( !$.mobile.hashListeningEnabled || !$.mobile.path.stripHash( location.hash ) ) {
- $.mobile.changePage( $.mobile.firstPage, { transition: "none", reverse: true, changeHash: false, fromHashChange: true } );
- }
- // otherwise, trigger a hashchange to load a deeplink
- else {
- $window.trigger( "hashchange", [ true ] );
- }
- }
- });
-
- // This function injects a meta viewport tag to prevent scaling. Off by default, on by default when touchOverflow scrolling is enabled
- function disableZoom() {
- var cont = "user-scalable=no",
- meta = $( "meta[name='viewport']" );
-
- if( meta.length ){
- meta.attr( "content", meta.attr( "content" ) + ", " + cont );
- }
- else{
- $( "head" ).prepend( "<meta>", { "name": "viewport", "content": cont } );
- }
- }
-
- // if touch-overflow is enabled, disable user scaling, as it creates usability issues
- if( $.support.touchOverflow && $.mobile.touchOverflowEnabled && !$.mobile.touchOverflowZoomEnabled ){
- disableZoom();
- }
-
- // initialize events now, after mobileinit has occurred
- $.mobile._registerInternalEvents();
-
- // check which scrollTop value should be used by scrolling to 1 immediately at domready
- // then check what the scroll top is. Android will report 0... others 1
- // note that this initial scroll won't hide the address bar. It's just for the check.
- $(function() {
- window.scrollTo( 0, 1 );
-
- // if defaultHomeScroll hasn't been set yet, see if scrollTop is 1
- // it should be 1 in most browsers, but android treats 1 as 0 (for hiding addr bar)
- // so if it's 1, use 0 from now on
- $.mobile.defaultHomeScroll = ( !$.support.scrollTop || $(window).scrollTop() === 1 ) ? 0 : 1;
-
- //dom-ready inits
- if( $.mobile.autoInitializePage ){
- $.mobile.initializePage();
- }
-
- // window load event
- // hide iOS browser chrome on load
- $window.load( $.mobile.silentScroll );
- });
-})( jQuery, this );
+++ /dev/null
-<?php
-$type = 'text/javascript';
-$files = array(
- '../LICENSE-INFO.txt',
- '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.navigation.pushstate.js',
- 'jquery.mobile.transition.js',
- 'jquery.mobile.degradeInputs.js',
- 'jquery.mobile.dialog.js',
- 'jquery.mobile.page.sections.js',
- 'jquery.mobile.collapsible.js',
- 'jquery.mobile.fieldContain.js',
- 'jquery.mobile.grid.js',
- 'jquery.mobile.navbar.js',
- 'jquery.mobile.listview.js',
- 'jquery.mobile.listview.filter.js',
- 'jquery.mobile.nojs.js',
- 'jquery.mobile.forms.checkboxradio.js',
- 'jquery.mobile.forms.button.js',
- 'jquery.mobile.forms.slider.js',
- 'jquery.mobile.forms.textinput.js',
- 'jquery.mobile.forms.select.custom.js',
- 'jquery.mobile.forms.select.js',
- 'jquery.mobile.buttonMarkup.js',
- 'jquery.mobile.controlGroup.js',
- 'jquery.mobile.links.js',
- 'jquery.mobile.fixHeaderFooter.js',
- 'jquery.mobile.fixHeaderFooter.native.js',
- 'jquery.mobile.init.js'
-);
-
-require_once('../combine.php');
+++ /dev/null
-/*!
- * jQuery JavaScript Library v1.6.4
- * http://jquery.com/
- *
- * Copyright 2011, John Resig
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- *
- * Includes Sizzle.js
- * http://sizzlejs.com/
- * Copyright 2011, The Dojo Foundation
- * Released under the MIT, BSD, and GPL Licenses.
- *
- * Date: Mon Sep 12 18:54:48 2011 -0400
- */
-
-(function( window, undefined ) {
-
-// Use the correct document accordingly with window argument (sandbox)
-var document = window.document,
- navigator = window.navigator,
- location = window.location;
-var jQuery = (function() {
-
-// Define a local copy of jQuery
-var jQuery = function( selector, context ) {
- // The jQuery object is actually just the init constructor 'enhanced'
- return new jQuery.fn.init( selector, context, rootjQuery );
- },
-
- // Map over jQuery in case of overwrite
- _jQuery = window.jQuery,
-
- // Map over the $ in case of overwrite
- _$ = window.$,
-
- // A central reference to the root jQuery(document)
- rootjQuery,
-
- // A simple way to check for HTML strings or ID strings
- // Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
- quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,
-
- // Check if a string has a non-whitespace character in it
- rnotwhite = /\S/,
-
- // Used for trimming whitespace
- trimLeft = /^\s+/,
- trimRight = /\s+$/,
-
- // Check for digits
- rdigit = /\d/,
-
- // Match a standalone tag
- rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,
-
- // JSON RegExp
- rvalidchars = /^[\],:{}\s]*$/,
- rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,
- rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
- rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
-
- // Useragent RegExp
- rwebkit = /(webkit)[ \/]([\w.]+)/,
- ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
- rmsie = /(msie) ([\w.]+)/,
- rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
-
- // Matches dashed string for camelizing
- rdashAlpha = /-([a-z]|[0-9])/ig,
- rmsPrefix = /^-ms-/,
-
- // Used by jQuery.camelCase as callback to replace()
- fcamelCase = function( all, letter ) {
- return ( letter + "" ).toUpperCase();
- },
-
- // Keep a UserAgent string for use with jQuery.browser
- userAgent = navigator.userAgent,
-
- // For matching the engine and version of the browser
- browserMatch,
-
- // The deferred used on DOM ready
- readyList,
-
- // The ready event handler
- DOMContentLoaded,
-
- // Save a reference to some core methods
- toString = Object.prototype.toString,
- hasOwn = Object.prototype.hasOwnProperty,
- push = Array.prototype.push,
- slice = Array.prototype.slice,
- trim = String.prototype.trim,
- indexOf = Array.prototype.indexOf,
-
- // [[Class]] -> type pairs
- class2type = {};
-
-jQuery.fn = jQuery.prototype = {
- constructor: jQuery,
- init: function( selector, context, rootjQuery ) {
- var match, elem, ret, doc;
-
- // Handle $(""), $(null), or $(undefined)
- if ( !selector ) {
- return this;
- }
-
- // Handle $(DOMElement)
- if ( selector.nodeType ) {
- this.context = this[0] = selector;
- this.length = 1;
- return this;
- }
-
- // The body element only exists once, optimize finding it
- if ( selector === "body" && !context && document.body ) {
- this.context = document;
- this[0] = document.body;
- this.selector = selector;
- this.length = 1;
- return this;
- }
-
- // Handle HTML strings
- if ( typeof selector === "string" ) {
- // Are we dealing with HTML string or an ID?
- if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
- // Assume that strings that start and end with <> are HTML and skip the regex check
- match = [ null, selector, null ];
-
- } else {
- match = quickExpr.exec( selector );
- }
-
- // Verify a match, and that no context was specified for #id
- if ( match && (match[1] || !context) ) {
-
- // HANDLE: $(html) -> $(array)
- if ( match[1] ) {
- context = context instanceof jQuery ? context[0] : context;
- doc = (context ? context.ownerDocument || context : document);
-
- // If a single string is passed in and it's a single tag
- // just do a createElement and skip the rest
- ret = rsingleTag.exec( selector );
-
- if ( ret ) {
- if ( jQuery.isPlainObject( context ) ) {
- selector = [ document.createElement( ret[1] ) ];
- jQuery.fn.attr.call( selector, context, true );
-
- } else {
- selector = [ doc.createElement( ret[1] ) ];
- }
-
- } else {
- ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
- selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes;
- }
-
- return jQuery.merge( this, selector );
-
- // HANDLE: $("#id")
- } else {
- elem = document.getElementById( match[2] );
-
- // Check parentNode to catch when Blackberry 4.6 returns
- // nodes that are no longer in the document #6963
- if ( elem && elem.parentNode ) {
- // Handle the case where IE and Opera return items
- // by name instead of ID
- if ( elem.id !== match[2] ) {
- return rootjQuery.find( selector );
- }
-
- // Otherwise, we inject the element directly into the jQuery object
- this.length = 1;
- this[0] = elem;
- }
-
- this.context = document;
- this.selector = selector;
- return this;
- }
-
- // HANDLE: $(expr, $(...))
- } else if ( !context || context.jquery ) {
- return (context || rootjQuery).find( selector );
-
- // HANDLE: $(expr, context)
- // (which is just equivalent to: $(context).find(expr)
- } else {
- return this.constructor( context ).find( selector );
- }
-
- // HANDLE: $(function)
- // Shortcut for document ready
- } else if ( jQuery.isFunction( selector ) ) {
- return rootjQuery.ready( selector );
- }
-
- if (selector.selector !== undefined) {
- this.selector = selector.selector;
- this.context = selector.context;
- }
-
- return jQuery.makeArray( selector, this );
- },
-
- // Start with an empty selector
- selector: "",
-
- // The current version of jQuery being used
- jquery: "1.6.4",
-
- // The default length of a jQuery object is 0
- length: 0,
-
- // The number of elements contained in the matched element set
- size: function() {
- return this.length;
- },
-
- toArray: function() {
- return slice.call( this, 0 );
- },
-
- // Get the Nth element in the matched element set OR
- // Get the whole matched element set as a clean array
- get: function( num ) {
- return num == null ?
-
- // Return a 'clean' array
- this.toArray() :
-
- // Return just the object
- ( num < 0 ? this[ this.length + num ] : this[ num ] );
- },
-
- // Take an array of elements and push it onto the stack
- // (returning the new matched element set)
- pushStack: function( elems, name, selector ) {
- // Build a new jQuery matched element set
- var ret = this.constructor();
-
- if ( jQuery.isArray( elems ) ) {
- push.apply( ret, elems );
-
- } else {
- jQuery.merge( ret, elems );
- }
-
- // Add the old object onto the stack (as a reference)
- ret.prevObject = this;
-
- ret.context = this.context;
-
- if ( name === "find" ) {
- ret.selector = this.selector + (this.selector ? " " : "") + selector;
- } else if ( name ) {
- ret.selector = this.selector + "." + name + "(" + selector + ")";
- }
-
- // Return the newly-formed element set
- return ret;
- },
-
- // Execute a callback for every element in the matched set.
- // (You can seed the arguments with an array of args, but this is
- // only used internally.)
- each: function( callback, args ) {
- return jQuery.each( this, callback, args );
- },
-
- ready: function( fn ) {
- // Attach the listeners
- jQuery.bindReady();
-
- // Add the callback
- readyList.done( fn );
-
- return this;
- },
-
- eq: function( i ) {
- return i === -1 ?
- this.slice( i ) :
- this.slice( i, +i + 1 );
- },
-
- first: function() {
- return this.eq( 0 );
- },
-
- last: function() {
- return this.eq( -1 );
- },
-
- slice: function() {
- return this.pushStack( slice.apply( this, arguments ),
- "slice", slice.call(arguments).join(",") );
- },
-
- map: function( callback ) {
- return this.pushStack( jQuery.map(this, function( elem, i ) {
- return callback.call( elem, i, elem );
- }));
- },
-
- end: function() {
- return this.prevObject || this.constructor(null);
- },
-
- // For internal use only.
- // Behaves like an Array's method, not like a jQuery method.
- push: push,
- sort: [].sort,
- splice: [].splice
-};
-
-// Give the init function the jQuery prototype for later instantiation
-jQuery.fn.init.prototype = jQuery.fn;
-
-jQuery.extend = jQuery.fn.extend = function() {
- var options, name, src, copy, copyIsArray, clone,
- target = arguments[0] || {},
- i = 1,
- length = arguments.length,
- deep = false;
-
- // Handle a deep copy situation
- if ( typeof target === "boolean" ) {
- deep = target;
- target = arguments[1] || {};
- // skip the boolean and the target
- i = 2;
- }
-
- // Handle case when target is a string or something (possible in deep copy)
- if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
- target = {};
- }
-
- // extend jQuery itself if only one argument is passed
- if ( length === i ) {
- target = this;
- --i;
- }
-
- for ( ; i < length; i++ ) {
- // Only deal with non-null/undefined values
- if ( (options = arguments[ i ]) != null ) {
- // Extend the base object
- for ( name in options ) {
- src = target[ name ];
- copy = options[ name ];
-
- // Prevent never-ending loop
- if ( target === copy ) {
- continue;
- }
-
- // Recurse if we're merging plain objects or arrays
- if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
- if ( copyIsArray ) {
- copyIsArray = false;
- clone = src && jQuery.isArray(src) ? src : [];
-
- } else {
- clone = src && jQuery.isPlainObject(src) ? src : {};
- }
-
- // Never move original objects, clone them
- target[ name ] = jQuery.extend( deep, clone, copy );
-
- // Don't bring in undefined values
- } else if ( copy !== undefined ) {
- target[ name ] = copy;
- }
- }
- }
- }
-
- // Return the modified object
- return target;
-};
-
-jQuery.extend({
- noConflict: function( deep ) {
- if ( window.$ === jQuery ) {
- window.$ = _$;
- }
-
- if ( deep && window.jQuery === jQuery ) {
- window.jQuery = _jQuery;
- }
-
- return jQuery;
- },
-
- // Is the DOM ready to be used? Set to true once it occurs.
- isReady: false,
-
- // A counter to track how many items to wait for before
- // the ready event fires. See #6781
- readyWait: 1,
-
- // Hold (or release) the ready event
- holdReady: function( hold ) {
- if ( hold ) {
- jQuery.readyWait++;
- } else {
- jQuery.ready( true );
- }
- },
-
- // Handle when the DOM is ready
- ready: function( wait ) {
- // Either a released hold or an DOMready/load event and not yet ready
- if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {
- // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
- if ( !document.body ) {
- return setTimeout( jQuery.ready, 1 );
- }
-
- // Remember that the DOM is ready
- jQuery.isReady = true;
-
- // If a normal DOM Ready event fired, decrement, and wait if need be
- if ( wait !== true && --jQuery.readyWait > 0 ) {
- return;
- }
-
- // If there are functions bound, to execute
- readyList.resolveWith( document, [ jQuery ] );
-
- // Trigger any bound ready events
- if ( jQuery.fn.trigger ) {
- jQuery( document ).trigger( "ready" ).unbind( "ready" );
- }
- }
- },
-
- bindReady: function() {
- if ( readyList ) {
- return;
- }
-
- readyList = jQuery._Deferred();
-
- // Catch cases where $(document).ready() is called after the
- // browser event has already occurred.
- if ( document.readyState === "complete" ) {
- // Handle it asynchronously to allow scripts the opportunity to delay ready
- return setTimeout( jQuery.ready, 1 );
- }
-
- // Mozilla, Opera and webkit nightlies currently support this event
- if ( document.addEventListener ) {
- // Use the handy event callback
- document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
-
- // A fallback to window.onload, that will always work
- window.addEventListener( "load", jQuery.ready, false );
-
- // If IE event model is used
- } else if ( document.attachEvent ) {
- // ensure firing before onload,
- // maybe late but safe also for iframes
- document.attachEvent( "onreadystatechange", DOMContentLoaded );
-
- // A fallback to window.onload, that will always work
- window.attachEvent( "onload", jQuery.ready );
-
- // If IE and not a frame
- // continually check to see if the document is ready
- var toplevel = false;
-
- try {
- toplevel = window.frameElement == null;
- } catch(e) {}
-
- if ( document.documentElement.doScroll && toplevel ) {
- doScrollCheck();
- }
- }
- },
-
- // See test/unit/core.js for details concerning isFunction.
- // Since version 1.3, DOM methods and functions like alert
- // aren't supported. They return false on IE (#2968).
- isFunction: function( obj ) {
- return jQuery.type(obj) === "function";
- },
-
- isArray: Array.isArray || function( obj ) {
- return jQuery.type(obj) === "array";
- },
-
- // A crude way of determining if an object is a window
- isWindow: function( obj ) {
- return obj && typeof obj === "object" && "setInterval" in obj;
- },
-
- isNaN: function( obj ) {
- return obj == null || !rdigit.test( obj ) || isNaN( obj );
- },
-
- type: function( obj ) {
- return obj == null ?
- String( obj ) :
- class2type[ toString.call(obj) ] || "object";
- },
-
- isPlainObject: function( obj ) {
- // Must be an Object.
- // Because of IE, we also have to check the presence of the constructor property.
- // Make sure that DOM nodes and window objects don't pass through, as well
- if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
- return false;
- }
-
- try {
- // Not own constructor property must be Object
- if ( obj.constructor &&
- !hasOwn.call(obj, "constructor") &&
- !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
- return false;
- }
- } catch ( e ) {
- // IE8,9 Will throw exceptions on certain host objects #9897
- return false;
- }
-
- // Own properties are enumerated firstly, so to speed up,
- // if last one is own, then all properties are own.
-
- var key;
- for ( key in obj ) {}
-
- return key === undefined || hasOwn.call( obj, key );
- },
-
- isEmptyObject: function( obj ) {
- for ( var name in obj ) {
- return false;
- }
- return true;
- },
-
- error: function( msg ) {
- throw msg;
- },
-
- parseJSON: function( data ) {
- if ( typeof data !== "string" || !data ) {
- return null;
- }
-
- // Make sure leading/trailing whitespace is removed (IE can't handle it)
- data = jQuery.trim( data );
-
- // Attempt to parse using the native JSON parser first
- if ( window.JSON && window.JSON.parse ) {
- return window.JSON.parse( data );
- }
-
- // Make sure the incoming data is actual JSON
- // Logic borrowed from http://json.org/json2.js
- if ( rvalidchars.test( data.replace( rvalidescape, "@" )
- .replace( rvalidtokens, "]" )
- .replace( rvalidbraces, "")) ) {
-
- return (new Function( "return " + data ))();
-
- }
- jQuery.error( "Invalid JSON: " + data );
- },
-
- // Cross-browser xml parsing
- parseXML: function( data ) {
- var xml, tmp;
- try {
- if ( window.DOMParser ) { // Standard
- tmp = new DOMParser();
- xml = tmp.parseFromString( data , "text/xml" );
- } else { // IE
- xml = new ActiveXObject( "Microsoft.XMLDOM" );
- xml.async = "false";
- xml.loadXML( data );
- }
- } catch( e ) {
- xml = undefined;
- }
- if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
- jQuery.error( "Invalid XML: " + data );
- }
- return xml;
- },
-
- noop: function() {},
-
- // Evaluates a script in a global context
- // Workarounds based on findings by Jim Driscoll
- // http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
- globalEval: function( data ) {
- if ( data && rnotwhite.test( data ) ) {
- // We use execScript on Internet Explorer
- // We use an anonymous function so that context is window
- // rather than jQuery in Firefox
- ( window.execScript || function( data ) {
- window[ "eval" ].call( window, data );
- } )( data );
- }
- },
-
- // Convert dashed to camelCase; used by the css and data modules
- // Microsoft forgot to hump their vendor prefix (#9572)
- camelCase: function( string ) {
- return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
- },
-
- nodeName: function( elem, name ) {
- return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
- },
-
- // args is for internal usage only
- each: function( object, callback, args ) {
- var name, i = 0,
- length = object.length,
- isObj = length === undefined || jQuery.isFunction( object );
-
- if ( args ) {
- if ( isObj ) {
- for ( name in object ) {
- if ( callback.apply( object[ name ], args ) === false ) {
- break;
- }
- }
- } else {
- for ( ; i < length; ) {
- if ( callback.apply( object[ i++ ], args ) === false ) {
- break;
- }
- }
- }
-
- // A special, fast, case for the most common use of each
- } else {
- if ( isObj ) {
- for ( name in object ) {
- if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
- break;
- }
- }
- } else {
- for ( ; i < length; ) {
- if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
- break;
- }
- }
- }
- }
-
- return object;
- },
-
- // Use native String.trim function wherever possible
- trim: trim ?
- function( text ) {
- return text == null ?
- "" :
- trim.call( text );
- } :
-
- // Otherwise use our own trimming functionality
- function( text ) {
- return text == null ?
- "" :
- text.toString().replace( trimLeft, "" ).replace( trimRight, "" );
- },
-
- // results is for internal usage only
- makeArray: function( array, results ) {
- var ret = results || [];
-
- if ( array != null ) {
- // The window, strings (and functions) also have 'length'
- // The extra typeof function check is to prevent crashes
- // in Safari 2 (See: #3039)
- // Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930
- var type = jQuery.type( array );
-
- if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) {
- push.call( ret, array );
- } else {
- jQuery.merge( ret, array );
- }
- }
-
- return ret;
- },
-
- inArray: function( elem, array ) {
- if ( !array ) {
- return -1;
- }
-
- if ( indexOf ) {
- return indexOf.call( array, elem );
- }
-
- for ( var i = 0, length = array.length; i < length; i++ ) {
- if ( array[ i ] === elem ) {
- return i;
- }
- }
-
- return -1;
- },
-
- merge: function( first, second ) {
- var i = first.length,
- j = 0;
-
- if ( typeof second.length === "number" ) {
- for ( var l = second.length; j < l; j++ ) {
- first[ i++ ] = second[ j ];
- }
-
- } else {
- while ( second[j] !== undefined ) {
- first[ i++ ] = second[ j++ ];
- }
- }
-
- first.length = i;
-
- return first;
- },
-
- grep: function( elems, callback, inv ) {
- var ret = [], retVal;
- inv = !!inv;
-
- // Go through the array, only saving the items
- // that pass the validator function
- for ( var i = 0, length = elems.length; i < length; i++ ) {
- retVal = !!callback( elems[ i ], i );
- if ( inv !== retVal ) {
- ret.push( elems[ i ] );
- }
- }
-
- return ret;
- },
-
- // arg is for internal usage only
- map: function( elems, callback, arg ) {
- var value, key, ret = [],
- i = 0,
- length = elems.length,
- // jquery objects are treated as arrays
- isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ;
-
- // Go through the array, translating each of the items to their
- if ( isArray ) {
- for ( ; i < length; i++ ) {
- value = callback( elems[ i ], i, arg );
-
- if ( value != null ) {
- ret[ ret.length ] = value;
- }
- }
-
- // Go through every key on the object,
- } else {
- for ( key in elems ) {
- value = callback( elems[ key ], key, arg );
-
- if ( value != null ) {
- ret[ ret.length ] = value;
- }
- }
- }
-
- // Flatten any nested arrays
- return ret.concat.apply( [], ret );
- },
-
- // A global GUID counter for objects
- guid: 1,
-
- // Bind a function to a context, optionally partially applying any
- // arguments.
- proxy: function( fn, context ) {
- if ( typeof context === "string" ) {
- var tmp = fn[ context ];
- context = fn;
- fn = tmp;
- }
-
- // Quick check to determine if target is callable, in the spec
- // this throws a TypeError, but we will just return undefined.
- if ( !jQuery.isFunction( fn ) ) {
- return undefined;
- }
-
- // Simulated bind
- var args = slice.call( arguments, 2 ),
- proxy = function() {
- return fn.apply( context, args.concat( slice.call( arguments ) ) );
- };
-
- // Set the guid of unique handler to the same of original handler, so it can be removed
- proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++;
-
- return proxy;
- },
-
- // Mutifunctional method to get and set values to a collection
- // The value/s can optionally be executed if it's a function
- access: function( elems, key, value, exec, fn, pass ) {
- var length = elems.length;
-
- // Setting many attributes
- if ( typeof key === "object" ) {
- for ( var k in key ) {
- jQuery.access( elems, k, key[k], exec, fn, value );
- }
- return elems;
- }
-
- // Setting one attribute
- if ( value !== undefined ) {
- // Optionally, function values get executed if exec is true
- exec = !pass && exec && jQuery.isFunction(value);
-
- for ( var i = 0; i < length; i++ ) {
- fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
- }
-
- return elems;
- }
-
- // Getting an attribute
- return length ? fn( elems[0], key ) : undefined;
- },
-
- now: function() {
- return (new Date()).getTime();
- },
-
- // Use of jQuery.browser is frowned upon.
- // More details: http://docs.jquery.com/Utilities/jQuery.browser
- uaMatch: function( ua ) {
- ua = ua.toLowerCase();
-
- var match = rwebkit.exec( ua ) ||
- ropera.exec( ua ) ||
- rmsie.exec( ua ) ||
- ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) ||
- [];
-
- return { browser: match[1] || "", version: match[2] || "0" };
- },
-
- sub: function() {
- function jQuerySub( selector, context ) {
- return new jQuerySub.fn.init( selector, context );
- }
- jQuery.extend( true, jQuerySub, this );
- jQuerySub.superclass = this;
- jQuerySub.fn = jQuerySub.prototype = this();
- jQuerySub.fn.constructor = jQuerySub;
- jQuerySub.sub = this.sub;
- jQuerySub.fn.init = function init( selector, context ) {
- if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) {
- context = jQuerySub( context );
- }
-
- return jQuery.fn.init.call( this, selector, context, rootjQuerySub );
- };
- jQuerySub.fn.init.prototype = jQuerySub.fn;
- var rootjQuerySub = jQuerySub(document);
- return jQuerySub;
- },
-
- browser: {}
-});
-
-// Populate the class2type map
-jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) {
- class2type[ "[object " + name + "]" ] = name.toLowerCase();
-});
-
-browserMatch = jQuery.uaMatch( userAgent );
-if ( browserMatch.browser ) {
- jQuery.browser[ browserMatch.browser ] = true;
- jQuery.browser.version = browserMatch.version;
-}
-
-// Deprecated, use jQuery.browser.webkit instead
-if ( jQuery.browser.webkit ) {
- jQuery.browser.safari = true;
-}
-
-// IE doesn't match non-breaking spaces with \s
-if ( rnotwhite.test( "\xA0" ) ) {
- trimLeft = /^[\s\xA0]+/;
- trimRight = /[\s\xA0]+$/;
-}
-
-// All jQuery objects should point back to these
-rootjQuery = jQuery(document);
-
-// Cleanup functions for the document ready method
-if ( document.addEventListener ) {
- DOMContentLoaded = function() {
- document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
- jQuery.ready();
- };
-
-} else if ( document.attachEvent ) {
- DOMContentLoaded = function() {
- // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
- if ( document.readyState === "complete" ) {
- document.detachEvent( "onreadystatechange", DOMContentLoaded );
- jQuery.ready();
- }
- };
-}
-
-// The DOM ready check for Internet Explorer
-function doScrollCheck() {
- if ( jQuery.isReady ) {
- return;
- }
-
- try {
- // If IE is used, use the trick by Diego Perini
- // http://javascript.nwbox.com/IEContentLoaded/
- document.documentElement.doScroll("left");
- } catch(e) {
- setTimeout( doScrollCheck, 1 );
- return;
- }
-
- // and execute any waiting functions
- jQuery.ready();
-}
-
-return jQuery;
-
-})();
-
-
-var // Promise methods
- promiseMethods = "done fail isResolved isRejected promise then always pipe".split( " " ),
- // Static reference to slice
- sliceDeferred = [].slice;
-
-jQuery.extend({
- // Create a simple deferred (one callbacks list)
- _Deferred: function() {
- var // callbacks list
- callbacks = [],
- // stored [ context , args ]
- fired,
- // to avoid firing when already doing so
- firing,
- // flag to know if the deferred has been cancelled
- cancelled,
- // the deferred itself
- deferred = {
-
- // done( f1, f2, ...)
- done: function() {
- if ( !cancelled ) {
- var args = arguments,
- i,
- length,
- elem,
- type,
- _fired;
- if ( fired ) {
- _fired = fired;
- fired = 0;
- }
- for ( i = 0, length = args.length; i < length; i++ ) {
- elem = args[ i ];
- type = jQuery.type( elem );
- if ( type === "array" ) {
- deferred.done.apply( deferred, elem );
- } else if ( type === "function" ) {
- callbacks.push( elem );
- }
- }
- if ( _fired ) {
- deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] );
- }
- }
- return this;
- },
-
- // resolve with given context and args
- resolveWith: function( context, args ) {
- if ( !cancelled && !fired && !firing ) {
- // make sure args are available (#8421)
- args = args || [];
- firing = 1;
- try {
- while( callbacks[ 0 ] ) {
- callbacks.shift().apply( context, args );
- }
- }
- finally {
- fired = [ context, args ];
- firing = 0;
- }
- }
- return this;
- },
-
- // resolve with this as context and given arguments
- resolve: function() {
- deferred.resolveWith( this, arguments );
- return this;
- },
-
- // Has this deferred been resolved?
- isResolved: function() {
- return !!( firing || fired );
- },
-
- // Cancel
- cancel: function() {
- cancelled = 1;
- callbacks = [];
- return this;
- }
- };
-
- return deferred;
- },
-
- // Full fledged deferred (two callbacks list)
- Deferred: function( func ) {
- var deferred = jQuery._Deferred(),
- failDeferred = jQuery._Deferred(),
- promise;
- // Add errorDeferred methods, then and promise
- jQuery.extend( deferred, {
- then: function( doneCallbacks, failCallbacks ) {
- deferred.done( doneCallbacks ).fail( failCallbacks );
- return this;
- },
- always: function() {
- return deferred.done.apply( deferred, arguments ).fail.apply( this, arguments );
- },
- fail: failDeferred.done,
- rejectWith: failDeferred.resolveWith,
- reject: failDeferred.resolve,
- isRejected: failDeferred.isResolved,
- pipe: function( fnDone, fnFail ) {
- return jQuery.Deferred(function( newDefer ) {
- jQuery.each( {
- done: [ fnDone, "resolve" ],
- fail: [ fnFail, "reject" ]
- }, function( handler, data ) {
- var fn = data[ 0 ],
- action = data[ 1 ],
- returned;
- if ( jQuery.isFunction( fn ) ) {
- deferred[ handler ](function() {
- returned = fn.apply( this, arguments );
- if ( returned && jQuery.isFunction( returned.promise ) ) {
- returned.promise().then( newDefer.resolve, newDefer.reject );
- } else {
- newDefer[ action + "With" ]( this === deferred ? newDefer : this, [ returned ] );
- }
- });
- } else {
- deferred[ handler ]( newDefer[ action ] );
- }
- });
- }).promise();
- },
- // Get a promise for this deferred
- // If obj is provided, the promise aspect is added to the object
- promise: function( obj ) {
- if ( obj == null ) {
- if ( promise ) {
- return promise;
- }
- promise = obj = {};
- }
- var i = promiseMethods.length;
- while( i-- ) {
- obj[ promiseMethods[i] ] = deferred[ promiseMethods[i] ];
- }
- return obj;
- }
- });
- // Make sure only one callback list will be used
- deferred.done( failDeferred.cancel ).fail( deferred.cancel );
- // Unexpose cancel
- delete deferred.cancel;
- // Call given func if any
- if ( func ) {
- func.call( deferred, deferred );
- }
- return deferred;
- },
-
- // Deferred helper
- when: function( firstParam ) {
- var args = arguments,
- i = 0,
- length = args.length,
- count = length,
- deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ?
- firstParam :
- jQuery.Deferred();
- function resolveFunc( i ) {
- return function( value ) {
- args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value;
- if ( !( --count ) ) {
- // Strange bug in FF4:
- // Values changed onto the arguments object sometimes end up as undefined values
- // outside the $.when method. Cloning the object into a fresh array solves the issue
- deferred.resolveWith( deferred, sliceDeferred.call( args, 0 ) );
- }
- };
- }
- if ( length > 1 ) {
- for( ; i < length; i++ ) {
- if ( args[ i ] && jQuery.isFunction( args[ i ].promise ) ) {
- args[ i ].promise().then( resolveFunc(i), deferred.reject );
- } else {
- --count;
- }
- }
- if ( !count ) {
- deferred.resolveWith( deferred, args );
- }
- } else if ( deferred !== firstParam ) {
- deferred.resolveWith( deferred, length ? [ firstParam ] : [] );
- }
- return deferred.promise();
- }
-});
-
-
-
-jQuery.support = (function() {
-
- var div = document.createElement( "div" ),
- documentElement = document.documentElement,
- all,
- a,
- select,
- opt,
- input,
- marginDiv,
- support,
- fragment,
- body,
- testElementParent,
- testElement,
- testElementStyle,
- tds,
- events,
- eventName,
- i,
- isSupported;
-
- // Preliminary tests
- div.setAttribute("className", "t");
- div.innerHTML = " <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
-
-
- all = div.getElementsByTagName( "*" );
- a = div.getElementsByTagName( "a" )[ 0 ];
-
- // Can't get basic test support
- if ( !all || !all.length || !a ) {
- return {};
- }
-
- // First batch of supports tests
- select = document.createElement( "select" );
- opt = select.appendChild( document.createElement("option") );
- input = div.getElementsByTagName( "input" )[ 0 ];
-
- support = {
- // IE strips leading whitespace when .innerHTML is used
- leadingWhitespace: ( div.firstChild.nodeType === 3 ),
-
- // Make sure that tbody elements aren't automatically inserted
- // IE will insert them into empty tables
- tbody: !div.getElementsByTagName( "tbody" ).length,
-
- // Make sure that link elements get serialized correctly by innerHTML
- // This requires a wrapper element in IE
- htmlSerialize: !!div.getElementsByTagName( "link" ).length,
-
- // Get the style information from getAttribute
- // (IE uses .cssText instead)
- style: /top/.test( a.getAttribute("style") ),
-
- // Make sure that URLs aren't manipulated
- // (IE normalizes it by default)
- hrefNormalized: ( a.getAttribute( "href" ) === "/a" ),
-
- // Make sure that element opacity exists
- // (IE uses filter instead)
- // Use a regex to work around a WebKit issue. See #5145
- opacity: /^0.55$/.test( a.style.opacity ),
-
- // Verify style float existence
- // (IE uses styleFloat instead of cssFloat)
- cssFloat: !!a.style.cssFloat,
-
- // Make sure that if no value is specified for a checkbox
- // that it defaults to "on".
- // (WebKit defaults to "" instead)
- checkOn: ( input.value === "on" ),
-
- // Make sure that a selected-by-default option has a working selected property.
- // (WebKit defaults to false instead of true, IE too, if it's in an optgroup)
- optSelected: opt.selected,
-
- // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
- getSetAttribute: div.className !== "t",
-
- // Will be defined later
- submitBubbles: true,
- changeBubbles: true,
- focusinBubbles: false,
- deleteExpando: true,
- noCloneEvent: true,
- inlineBlockNeedsLayout: false,
- shrinkWrapBlocks: false,
- reliableMarginRight: true
- };
-
- // Make sure checked status is properly cloned
- input.checked = true;
- support.noCloneChecked = input.cloneNode( true ).checked;
-
- // Make sure that the options inside disabled selects aren't marked as disabled
- // (WebKit marks them as disabled)
- select.disabled = true;
- support.optDisabled = !opt.disabled;
-
- // Test to see if it's possible to delete an expando from an element
- // Fails in Internet Explorer
- try {
- delete div.test;
- } catch( e ) {
- support.deleteExpando = false;
- }
-
- if ( !div.addEventListener && div.attachEvent && div.fireEvent ) {
- div.attachEvent( "onclick", function() {
- // Cloning a node shouldn't copy over any
- // bound event handlers (IE does this)
- support.noCloneEvent = false;
- });
- div.cloneNode( true ).fireEvent( "onclick" );
- }
-
- // Check if a radio maintains it's value
- // after being appended to the DOM
- input = document.createElement("input");
- input.value = "t";
- input.setAttribute("type", "radio");
- support.radioValue = input.value === "t";
-
- input.setAttribute("checked", "checked");
- div.appendChild( input );
- fragment = document.createDocumentFragment();
- fragment.appendChild( div.firstChild );
-
- // WebKit doesn't clone checked state correctly in fragments
- support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;
-
- div.innerHTML = "";
-
- // Figure out if the W3C box model works as expected
- div.style.width = div.style.paddingLeft = "1px";
-
- body = document.getElementsByTagName( "body" )[ 0 ];
- // We use our own, invisible, body unless the body is already present
- // in which case we use a div (#9239)
- testElement = document.createElement( body ? "div" : "body" );
- testElementStyle = {
- visibility: "hidden",
- width: 0,
- height: 0,
- border: 0,
- margin: 0,
- background: "none"
- };
- if ( body ) {
- jQuery.extend( testElementStyle, {
- position: "absolute",
- left: "-1000px",
- top: "-1000px"
- });
- }
- for ( i in testElementStyle ) {
- testElement.style[ i ] = testElementStyle[ i ];
- }
- testElement.appendChild( div );
- testElementParent = body || documentElement;
- testElementParent.insertBefore( testElement, testElementParent.firstChild );
-
- // Check if a disconnected checkbox will retain its checked
- // value of true after appended to the DOM (IE6/7)
- support.appendChecked = input.checked;
-
- support.boxModel = div.offsetWidth === 2;
-
- if ( "zoom" in div.style ) {
- // Check if natively block-level elements act like inline-block
- // elements when setting their display to 'inline' and giving
- // them layout
- // (IE < 8 does this)
- div.style.display = "inline";
- div.style.zoom = 1;
- support.inlineBlockNeedsLayout = ( div.offsetWidth === 2 );
-
- // Check if elements with layout shrink-wrap their children
- // (IE 6 does this)
- div.style.display = "";
- div.innerHTML = "<div style='width:4px;'></div>";
- support.shrinkWrapBlocks = ( div.offsetWidth !== 2 );
- }
-
- div.innerHTML = "<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>";
- tds = div.getElementsByTagName( "td" );
-
- // Check if table cells still have offsetWidth/Height when they are set
- // to display:none and there are still other visible table cells in a
- // table row; if so, offsetWidth/Height are not reliable for use when
- // determining if an element has been hidden directly using
- // display:none (it is still safe to use offsets if a parent element is
- // hidden; don safety goggles and see bug #4512 for more information).
- // (only IE 8 fails this test)
- isSupported = ( tds[ 0 ].offsetHeight === 0 );
-
- tds[ 0 ].style.display = "";
- tds[ 1 ].style.display = "none";
-
- // Check if empty table cells still have offsetWidth/Height
- // (IE < 8 fail this test)
- support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );
- div.innerHTML = "";
-
- // Check if div with explicit width and no margin-right incorrectly
- // gets computed margin-right based on width of container. For more
- // info see bug #3333
- // Fails in WebKit before Feb 2011 nightlies
- // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
- if ( document.defaultView && document.defaultView.getComputedStyle ) {
- marginDiv = document.createElement( "div" );
- marginDiv.style.width = "0";
- marginDiv.style.marginRight = "0";
- div.appendChild( marginDiv );
- support.reliableMarginRight =
- ( parseInt( ( document.defaultView.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0;
- }
-
- // Remove the body element we added
- testElement.innerHTML = "";
- testElementParent.removeChild( testElement );
-
- // Technique from Juriy Zaytsev
- // http://thinkweb2.com/projects/prototype/detecting-event-support-without-browser-sniffing/
- // We only care about the case where non-standard event systems
- // are used, namely in IE. Short-circuiting here helps us to
- // avoid an eval call (in setAttribute) which can cause CSP
- // to go haywire. See: https://developer.mozilla.org/en/Security/CSP
- if ( div.attachEvent ) {
- for( i in {
- submit: 1,
- change: 1,
- focusin: 1
- } ) {
- eventName = "on" + i;
- isSupported = ( eventName in div );
- if ( !isSupported ) {
- div.setAttribute( eventName, "return;" );
- isSupported = ( typeof div[ eventName ] === "function" );
- }
- support[ i + "Bubbles" ] = isSupported;
- }
- }
-
- // Null connected elements to avoid leaks in IE
- testElement = fragment = select = opt = body = marginDiv = div = input = null;
-
- return support;
-})();
-
-// Keep track of boxModel
-jQuery.boxModel = jQuery.support.boxModel;
-
-
-
-
-var rbrace = /^(?:\{.*\}|\[.*\])$/,
- rmultiDash = /([A-Z])/g;
-
-jQuery.extend({
- cache: {},
-
- // Please use with caution
- uuid: 0,
-
- // Unique for each copy of jQuery on the page
- // Non-digits removed to match rinlinejQuery
- expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),
-
- // The following elements throw uncatchable exceptions if you
- // attempt to add expando properties to them.
- noData: {
- "embed": true,
- // Ban all objects except for Flash (which handle expandos)
- "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
- "applet": true
- },
-
- hasData: function( elem ) {
- elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ];
-
- return !!elem && !isEmptyDataObject( elem );
- },
-
- data: function( elem, name, data, pvt /* Internal Use Only */ ) {
- if ( !jQuery.acceptData( elem ) ) {
- return;
- }
-
- var thisCache, ret,
- internalKey = jQuery.expando,
- getByName = typeof name === "string",
-
- // We have to handle DOM nodes and JS objects differently because IE6-7
- // can't GC object references properly across the DOM-JS boundary
- isNode = elem.nodeType,
-
- // Only DOM nodes need the global jQuery cache; JS object data is
- // attached directly to the object so GC can occur automatically
- cache = isNode ? jQuery.cache : elem,
-
- // Only defining an ID for JS objects if its cache already exists allows
- // the code to shortcut on the same path as a DOM node with no cache
- id = isNode ? elem[ jQuery.expando ] : elem[ jQuery.expando ] && jQuery.expando;
-
- // Avoid doing any more work than we need to when trying to get data on an
- // object that has no data at all
- if ( (!id || (pvt && id && (cache[ id ] && !cache[ id ][ internalKey ]))) && getByName && data === undefined ) {
- return;
- }
-
- if ( !id ) {
- // Only DOM nodes need a new unique ID for each element since their data
- // ends up in the global cache
- if ( isNode ) {
- elem[ jQuery.expando ] = id = ++jQuery.uuid;
- } else {
- id = jQuery.expando;
- }
- }
-
- if ( !cache[ id ] ) {
- cache[ id ] = {};
-
- // TODO: This is a hack for 1.5 ONLY. Avoids exposing jQuery
- // metadata on plain JS objects when the object is serialized using
- // JSON.stringify
- if ( !isNode ) {
- cache[ id ].toJSON = jQuery.noop;
- }
- }
-
- // An object can be passed to jQuery.data instead of a key/value pair; this gets
- // shallow copied over onto the existing cache
- if ( typeof name === "object" || typeof name === "function" ) {
- if ( pvt ) {
- cache[ id ][ internalKey ] = jQuery.extend(cache[ id ][ internalKey ], name);
- } else {
- cache[ id ] = jQuery.extend(cache[ id ], name);
- }
- }
-
- thisCache = cache[ id ];
-
- // Internal jQuery data is stored in a separate object inside the object's data
- // cache in order to avoid key collisions between internal data and user-defined
- // data
- if ( pvt ) {
- if ( !thisCache[ internalKey ] ) {
- thisCache[ internalKey ] = {};
- }
-
- thisCache = thisCache[ internalKey ];
- }
-
- if ( data !== undefined ) {
- thisCache[ jQuery.camelCase( name ) ] = data;
- }
-
- // TODO: This is a hack for 1.5 ONLY. It will be removed in 1.6. Users should
- // not attempt to inspect the internal events object using jQuery.data, as this
- // internal data object is undocumented and subject to change.
- if ( name === "events" && !thisCache[name] ) {
- return thisCache[ internalKey ] && thisCache[ internalKey ].events;
- }
-
- // Check for both converted-to-camel and non-converted data property names
- // If a data property was specified
- if ( getByName ) {
-
- // First Try to find as-is property data
- ret = thisCache[ name ];
-
- // Test for null|undefined property data
- if ( ret == null ) {
-
- // Try to find the camelCased property
- ret = thisCache[ jQuery.camelCase( name ) ];
- }
- } else {
- ret = thisCache;
- }
-
- return ret;
- },
-
- removeData: function( elem, name, pvt /* Internal Use Only */ ) {
- if ( !jQuery.acceptData( elem ) ) {
- return;
- }
-
- var thisCache,
-
- // Reference to internal data cache key
- internalKey = jQuery.expando,
-
- isNode = elem.nodeType,
-
- // See jQuery.data for more information
- cache = isNode ? jQuery.cache : elem,
-
- // See jQuery.data for more information
- id = isNode ? elem[ jQuery.expando ] : jQuery.expando;
-
- // If there is already no cache entry for this object, there is no
- // purpose in continuing
- if ( !cache[ id ] ) {
- return;
- }
-
- if ( name ) {
-
- thisCache = pvt ? cache[ id ][ internalKey ] : cache[ id ];
-
- if ( thisCache ) {
-
- // Support interoperable removal of hyphenated or camelcased keys
- if ( !thisCache[ name ] ) {
- name = jQuery.camelCase( name );
- }
-
- delete thisCache[ name ];
-
- // If there is no data left in the cache, we want to continue
- // and let the cache object itself get destroyed
- if ( !isEmptyDataObject(thisCache) ) {
- return;
- }
- }
- }
-
- // See jQuery.data for more information
- if ( pvt ) {
- delete cache[ id ][ internalKey ];
-
- // Don't destroy the parent cache unless the internal data object
- // had been the only thing left in it
- if ( !isEmptyDataObject(cache[ id ]) ) {
- return;
- }
- }
-
- var internalCache = cache[ id ][ internalKey ];
-
- // Browsers that fail expando deletion also refuse to delete expandos on
- // the window, but it will allow it on all other JS objects; other browsers
- // don't care
- // Ensure that `cache` is not a window object #10080
- if ( jQuery.support.deleteExpando || !cache.setInterval ) {
- delete cache[ id ];
- } else {
- cache[ id ] = null;
- }
-
- // We destroyed the entire user cache at once because it's faster than
- // iterating through each key, but we need to continue to persist internal
- // data if it existed
- if ( internalCache ) {
- cache[ id ] = {};
- // TODO: This is a hack for 1.5 ONLY. Avoids exposing jQuery
- // metadata on plain JS objects when the object is serialized using
- // JSON.stringify
- if ( !isNode ) {
- cache[ id ].toJSON = jQuery.noop;
- }
-
- cache[ id ][ internalKey ] = internalCache;
-
- // Otherwise, we need to eliminate the expando on the node to avoid
- // false lookups in the cache for entries that no longer exist
- } else if ( isNode ) {
- // IE does not allow us to delete expando properties from nodes,
- // nor does it have a removeAttribute function on Document nodes;
- // we must handle all of these cases
- if ( jQuery.support.deleteExpando ) {
- delete elem[ jQuery.expando ];
- } else if ( elem.removeAttribute ) {
- elem.removeAttribute( jQuery.expando );
- } else {
- elem[ jQuery.expando ] = null;
- }
- }
- },
-
- // For internal use only.
- _data: function( elem, name, data ) {
- return jQuery.data( elem, name, data, true );
- },
-
- // A method for determining if a DOM node can handle the data expando
- acceptData: function( elem ) {
- if ( elem.nodeName ) {
- var match = jQuery.noData[ elem.nodeName.toLowerCase() ];
-
- if ( match ) {
- return !(match === true || elem.getAttribute("classid") !== match);
- }
- }
-
- return true;
- }
-});
-
-jQuery.fn.extend({
- data: function( key, value ) {
- var data = null;
-
- if ( typeof key === "undefined" ) {
- if ( this.length ) {
- data = jQuery.data( this[0] );
-
- if ( this[0].nodeType === 1 ) {
- var attr = this[0].attributes, name;
- for ( var i = 0, l = attr.length; i < l; i++ ) {
- name = attr[i].name;
-
- if ( name.indexOf( "data-" ) === 0 ) {
- name = jQuery.camelCase( name.substring(5) );
-
- dataAttr( this[0], name, data[ name ] );
- }
- }
- }
- }
-
- return data;
-
- } else if ( typeof key === "object" ) {
- return this.each(function() {
- jQuery.data( this, key );
- });
- }
-
- var parts = key.split(".");
- parts[1] = parts[1] ? "." + parts[1] : "";
-
- if ( value === undefined ) {
- data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]);
-
- // Try to fetch any internally stored data first
- if ( data === undefined && this.length ) {
- data = jQuery.data( this[0], key );
- data = dataAttr( this[0], key, data );
- }
-
- return data === undefined && parts[1] ?
- this.data( parts[0] ) :
- data;
-
- } else {
- return this.each(function() {
- var $this = jQuery( this ),
- args = [ parts[0], value ];
-
- $this.triggerHandler( "setData" + parts[1] + "!", args );
- jQuery.data( this, key, value );
- $this.triggerHandler( "changeData" + parts[1] + "!", args );
- });
- }
- },
-
- removeData: function( key ) {
- return this.each(function() {
- jQuery.removeData( this, key );
- });
- }
-});
-
-function dataAttr( elem, key, data ) {
- // If nothing was found internally, try to fetch any
- // data from the HTML5 data-* attribute
- if ( data === undefined && elem.nodeType === 1 ) {
-
- var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
-
- data = elem.getAttribute( name );
-
- if ( typeof data === "string" ) {
- try {
- data = data === "true" ? true :
- data === "false" ? false :
- data === "null" ? null :
- !jQuery.isNaN( data ) ? parseFloat( data ) :
- rbrace.test( data ) ? jQuery.parseJSON( data ) :
- data;
- } catch( e ) {}
-
- // Make sure we set the data so it isn't changed later
- jQuery.data( elem, key, data );
-
- } else {
- data = undefined;
- }
- }
-
- return data;
-}
-
-// TODO: This is a hack for 1.5 ONLY to allow objects with a single toJSON
-// property to be considered empty objects; this property always exists in
-// order to make sure JSON.stringify does not expose internal metadata
-function isEmptyDataObject( obj ) {
- for ( var name in obj ) {
- if ( name !== "toJSON" ) {
- return false;
- }
- }
-
- return true;
-}
-
-
-
-
-function handleQueueMarkDefer( elem, type, src ) {
- var deferDataKey = type + "defer",
- queueDataKey = type + "queue",
- markDataKey = type + "mark",
- defer = jQuery.data( elem, deferDataKey, undefined, true );
- if ( defer &&
- ( src === "queue" || !jQuery.data( elem, queueDataKey, undefined, true ) ) &&
- ( src === "mark" || !jQuery.data( elem, markDataKey, undefined, true ) ) ) {
- // Give room for hard-coded callbacks to fire first
- // and eventually mark/queue something else on the element
- setTimeout( function() {
- if ( !jQuery.data( elem, queueDataKey, undefined, true ) &&
- !jQuery.data( elem, markDataKey, undefined, true ) ) {
- jQuery.removeData( elem, deferDataKey, true );
- defer.resolve();
- }
- }, 0 );
- }
-}
-
-jQuery.extend({
-
- _mark: function( elem, type ) {
- if ( elem ) {
- type = (type || "fx") + "mark";
- jQuery.data( elem, type, (jQuery.data(elem,type,undefined,true) || 0) + 1, true );
- }
- },
-
- _unmark: function( force, elem, type ) {
- if ( force !== true ) {
- type = elem;
- elem = force;
- force = false;
- }
- if ( elem ) {
- type = type || "fx";
- var key = type + "mark",
- count = force ? 0 : ( (jQuery.data( elem, key, undefined, true) || 1 ) - 1 );
- if ( count ) {
- jQuery.data( elem, key, count, true );
- } else {
- jQuery.removeData( elem, key, true );
- handleQueueMarkDefer( elem, type, "mark" );
- }
- }
- },
-
- queue: function( elem, type, data ) {
- if ( elem ) {
- type = (type || "fx") + "queue";
- var q = jQuery.data( elem, type, undefined, true );
- // Speed up dequeue by getting out quickly if this is just a lookup
- if ( data ) {
- if ( !q || jQuery.isArray(data) ) {
- q = jQuery.data( elem, type, jQuery.makeArray(data), true );
- } else {
- q.push( data );
- }
- }
- return q || [];
- }
- },
-
- dequeue: function( elem, type ) {
- type = type || "fx";
-
- var queue = jQuery.queue( elem, type ),
- fn = queue.shift(),
- defer;
-
- // If the fx queue is dequeued, always remove the progress sentinel
- if ( fn === "inprogress" ) {
- fn = queue.shift();
- }
-
- if ( fn ) {
- // Add a progress sentinel to prevent the fx queue from being
- // automatically dequeued
- if ( type === "fx" ) {
- queue.unshift("inprogress");
- }
-
- fn.call(elem, function() {
- jQuery.dequeue(elem, type);
- });
- }
-
- if ( !queue.length ) {
- jQuery.removeData( elem, type + "queue", true );
- handleQueueMarkDefer( elem, type, "queue" );
- }
- }
-});
-
-jQuery.fn.extend({
- queue: function( type, data ) {
- if ( typeof type !== "string" ) {
- data = type;
- type = "fx";
- }
-
- if ( data === undefined ) {
- return jQuery.queue( this[0], type );
- }
- return this.each(function() {
- var queue = jQuery.queue( this, type, data );
-
- if ( type === "fx" && queue[0] !== "inprogress" ) {
- jQuery.dequeue( this, type );
- }
- });
- },
- dequeue: function( type ) {
- return this.each(function() {
- jQuery.dequeue( this, type );
- });
- },
- // Based off of the plugin by Clint Helfers, with permission.
- // http://blindsignals.com/index.php/2009/07/jquery-delay/
- delay: function( time, type ) {
- time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
- type = type || "fx";
-
- return this.queue( type, function() {
- var elem = this;
- setTimeout(function() {
- jQuery.dequeue( elem, type );
- }, time );
- });
- },
- clearQueue: function( type ) {
- return this.queue( type || "fx", [] );
- },
- // Get a promise resolved when queues of a certain type
- // are emptied (fx is the type by default)
- promise: function( type, object ) {
- if ( typeof type !== "string" ) {
- object = type;
- type = undefined;
- }
- type = type || "fx";
- var defer = jQuery.Deferred(),
- elements = this,
- i = elements.length,
- count = 1,
- deferDataKey = type + "defer",
- queueDataKey = type + "queue",
- markDataKey = type + "mark",
- tmp;
- function resolve() {
- if ( !( --count ) ) {
- defer.resolveWith( elements, [ elements ] );
- }
- }
- while( i-- ) {
- if (( tmp = jQuery.data( elements[ i ], deferDataKey, undefined, true ) ||
- ( jQuery.data( elements[ i ], queueDataKey, undefined, true ) ||
- jQuery.data( elements[ i ], markDataKey, undefined, true ) ) &&
- jQuery.data( elements[ i ], deferDataKey, jQuery._Deferred(), true ) )) {
- count++;
- tmp.done( resolve );
- }
- }
- resolve();
- return defer.promise();
- }
-});
-
-
-
-
-var rclass = /[\n\t\r]/g,
- rspace = /\s+/,
- rreturn = /\r/g,
- rtype = /^(?:button|input)$/i,
- rfocusable = /^(?:button|input|object|select|textarea)$/i,
- rclickable = /^a(?:rea)?$/i,
- rboolean = /^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,
- nodeHook, boolHook;
-
-jQuery.fn.extend({
- attr: function( name, value ) {
- return jQuery.access( this, name, value, true, jQuery.attr );
- },
-
- removeAttr: function( name ) {
- return this.each(function() {
- jQuery.removeAttr( this, name );
- });
- },
-
- prop: function( name, value ) {
- return jQuery.access( this, name, value, true, jQuery.prop );
- },
-
- removeProp: function( name ) {
- name = jQuery.propFix[ name ] || name;
- return this.each(function() {
- // try/catch handles cases where IE balks (such as removing a property on window)
- try {
- this[ name ] = undefined;
- delete this[ name ];
- } catch( e ) {}
- });
- },
-
- addClass: function( value ) {
- var classNames, i, l, elem,
- setClass, c, cl;
-
- if ( jQuery.isFunction( value ) ) {
- return this.each(function( j ) {
- jQuery( this ).addClass( value.call(this, j, this.className) );
- });
- }
-
- if ( value && typeof value === "string" ) {
- classNames = value.split( rspace );
-
- for ( i = 0, l = this.length; i < l; i++ ) {
- elem = this[ i ];
-
- if ( elem.nodeType === 1 ) {
- if ( !elem.className && classNames.length === 1 ) {
- elem.className = value;
-
- } else {
- setClass = " " + elem.className + " ";
-
- for ( c = 0, cl = classNames.length; c < cl; c++ ) {
- if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
- setClass += classNames[ c ] + " ";
- }
- }
- elem.className = jQuery.trim( setClass );
- }
- }
- }
- }
-
- return this;
- },
-
- removeClass: function( value ) {
- var classNames, i, l, elem, className, c, cl;
-
- if ( jQuery.isFunction( value ) ) {
- return this.each(function( j ) {
- jQuery( this ).removeClass( value.call(this, j, this.className) );
- });
- }
-
- if ( (value && typeof value === "string") || value === undefined ) {
- classNames = (value || "").split( rspace );
-
- for ( i = 0, l = this.length; i < l; i++ ) {
- elem = this[ i ];
-
- if ( elem.nodeType === 1 && elem.className ) {
- if ( value ) {
- className = (" " + elem.className + " ").replace( rclass, " " );
- for ( c = 0, cl = classNames.length; c < cl; c++ ) {
- className = className.replace(" " + classNames[ c ] + " ", " ");
- }
- elem.className = jQuery.trim( className );
-
- } else {
- elem.className = "";
- }
- }
- }
- }
-
- return this;
- },
-
- toggleClass: function( value, stateVal ) {
- var type = typeof value,
- isBool = typeof stateVal === "boolean";
-
- if ( jQuery.isFunction( value ) ) {
- return this.each(function( i ) {
- jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );
- });
- }
-
- return this.each(function() {
- if ( type === "string" ) {
- // toggle individual class names
- var className,
- i = 0,
- self = jQuery( this ),
- state = stateVal,
- classNames = value.split( rspace );
-
- while ( (className = classNames[ i++ ]) ) {
- // check each className given, space seperated list
- state = isBool ? state : !self.hasClass( className );
- self[ state ? "addClass" : "removeClass" ]( className );
- }
-
- } else if ( type === "undefined" || type === "boolean" ) {
- if ( this.className ) {
- // store className if set
- jQuery._data( this, "__className__", this.className );
- }
-
- // toggle whole className
- this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || "";
- }
- });
- },
-
- hasClass: function( selector ) {
- var className = " " + selector + " ";
- for ( var i = 0, l = this.length; i < l; i++ ) {
- if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) {
- return true;
- }
- }
-
- return false;
- },
-
- val: function( value ) {
- var hooks, ret,
- elem = this[0];
-
- if ( !arguments.length ) {
- if ( elem ) {
- hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ];
-
- if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
- return ret;
- }
-
- ret = elem.value;
-
- return typeof ret === "string" ?
- // handle most common string cases
- ret.replace(rreturn, "") :
- // handle cases where value is null/undef or number
- ret == null ? "" : ret;
- }
-
- return undefined;
- }
-
- var isFunction = jQuery.isFunction( value );
-
- return this.each(function( i ) {
- var self = jQuery(this), val;
-
- if ( this.nodeType !== 1 ) {
- return;
- }
-
- if ( isFunction ) {
- val = value.call( this, i, self.val() );
- } else {
- val = value;
- }
-
- // Treat null/undefined as ""; convert numbers to string
- if ( val == null ) {
- val = "";
- } else if ( typeof val === "number" ) {
- val += "";
- } else if ( jQuery.isArray( val ) ) {
- val = jQuery.map(val, function ( value ) {
- return value == null ? "" : value + "";
- });
- }
-
- hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ];
-
- // If set returns undefined, fall back to normal setting
- if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
- this.value = val;
- }
- });
- }
-});
-
-jQuery.extend({
- valHooks: {
- option: {
- get: function( elem ) {
- // attributes.value is undefined in Blackberry 4.7 but
- // uses .value. See #6932
- var val = elem.attributes.value;
- return !val || val.specified ? elem.value : elem.text;
- }
- },
- select: {
- get: function( elem ) {
- var value,
- index = elem.selectedIndex,
- values = [],
- options = elem.options,
- one = elem.type === "select-one";
-
- // Nothing was selected
- if ( index < 0 ) {
- return null;
- }
-
- // Loop through all the selected options
- for ( var i = one ? index : 0, max = one ? index + 1 : options.length; i < max; i++ ) {
- var option = options[ i ];
-
- // Don't return options that are disabled or in a disabled optgroup
- if ( option.selected && (jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) &&
- (!option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" )) ) {
-
- // Get the specific value for the option
- value = jQuery( option ).val();
-
- // We don't need an array for one selects
- if ( one ) {
- return value;
- }
-
- // Multi-Selects return an array
- values.push( value );
- }
- }
-
- // Fixes Bug #2551 -- select.val() broken in IE after form.reset()
- if ( one && !values.length && options.length ) {
- return jQuery( options[ index ] ).val();
- }
-
- return values;
- },
-
- set: function( elem, value ) {
- var values = jQuery.makeArray( value );
-
- jQuery(elem).find("option").each(function() {
- this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0;
- });
-
- if ( !values.length ) {
- elem.selectedIndex = -1;
- }
- return values;
- }
- }
- },
-
- attrFn: {
- val: true,
- css: true,
- html: true,
- text: true,
- data: true,
- width: true,
- height: true,
- offset: true
- },
-
- attrFix: {
- // Always normalize to ensure hook usage
- tabindex: "tabIndex"
- },
-
- attr: function( elem, name, value, pass ) {
- var nType = elem.nodeType;
-
- // don't get/set attributes on text, comment and attribute nodes
- if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
- return undefined;
- }
-
- if ( pass && name in jQuery.attrFn ) {
- return jQuery( elem )[ name ]( value );
- }
-
- // Fallback to prop when attributes are not supported
- if ( !("getAttribute" in elem) ) {
- return jQuery.prop( elem, name, value );
- }
-
- var ret, hooks,
- notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
-
- // Normalize the name if needed
- if ( notxml ) {
- name = jQuery.attrFix[ name ] || name;
-
- hooks = jQuery.attrHooks[ name ];
-
- if ( !hooks ) {
- // Use boolHook for boolean attributes
- if ( rboolean.test( name ) ) {
- hooks = boolHook;
-
- // Use nodeHook if available( IE6/7 )
- } else if ( nodeHook ) {
- hooks = nodeHook;
- }
- }
- }
-
- if ( value !== undefined ) {
-
- if ( value === null ) {
- jQuery.removeAttr( elem, name );
- return undefined;
-
- } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
- return ret;
-
- } else {
- elem.setAttribute( name, "" + value );
- return value;
- }
-
- } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
- return ret;
-
- } else {
-
- ret = elem.getAttribute( name );
-
- // Non-existent attributes return null, we normalize to undefined
- return ret === null ?
- undefined :
- ret;
- }
- },
-
- removeAttr: function( elem, name ) {
- var propName;
- if ( elem.nodeType === 1 ) {
- name = jQuery.attrFix[ name ] || name;
-
- jQuery.attr( elem, name, "" );
- elem.removeAttribute( name );
-
- // Set corresponding property to false for boolean attributes
- if ( rboolean.test( name ) && (propName = jQuery.propFix[ name ] || name) in elem ) {
- elem[ propName ] = false;
- }
- }
- },
-
- attrHooks: {
- type: {
- set: function( elem, value ) {
- // We can't allow the type property to be changed (since it causes problems in IE)
- if ( rtype.test( elem.nodeName ) && elem.parentNode ) {
- jQuery.error( "type property can't be changed" );
- } else if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {
- // Setting the type on a radio button after the value resets the value in IE6-9
- // Reset value to it's default in case type is set after value
- // This is for element creation
- var val = elem.value;
- elem.setAttribute( "type", value );
- if ( val ) {
- elem.value = val;
- }
- return value;
- }
- }
- },
- // Use the value property for back compat
- // Use the nodeHook for button elements in IE6/7 (#1954)
- value: {
- get: function( elem, name ) {
- if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {
- return nodeHook.get( elem, name );
- }
- return name in elem ?
- elem.value :
- null;
- },
- set: function( elem, value, name ) {
- if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {
- return nodeHook.set( elem, value, name );
- }
- // Does not return so that setAttribute is also used
- elem.value = value;
- }
- }
- },
-
- propFix: {
- tabindex: "tabIndex",
- readonly: "readOnly",
- "for": "htmlFor",
- "class": "className",
- maxlength: "maxLength",
- cellspacing: "cellSpacing",
- cellpadding: "cellPadding",
- rowspan: "rowSpan",
- colspan: "colSpan",
- usemap: "useMap",
- frameborder: "frameBorder",
- contenteditable: "contentEditable"
- },
-
- prop: function( elem, name, value ) {
- var nType = elem.nodeType;
-
- // don't get/set properties on text, comment and attribute nodes
- if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
- return undefined;
- }
-
- var ret, hooks,
- notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
-
- if ( notxml ) {
- // Fix name and attach hooks
- name = jQuery.propFix[ name ] || name;
- hooks = jQuery.propHooks[ name ];
- }
-
- if ( value !== undefined ) {
- if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
- return ret;
-
- } else {
- return (elem[ name ] = value);
- }
-
- } else {
- if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
- return ret;
-
- } else {
- return elem[ name ];
- }
- }
- },
-
- propHooks: {
- tabIndex: {
- get: function( elem ) {
- // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set
- // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
- var attributeNode = elem.getAttributeNode("tabindex");
-
- return attributeNode && attributeNode.specified ?
- parseInt( attributeNode.value, 10 ) :
- rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ?
- 0 :
- undefined;
- }
- }
- }
-});
-
-// Add the tabindex propHook to attrHooks for back-compat
-jQuery.attrHooks.tabIndex = jQuery.propHooks.tabIndex;
-
-// Hook for boolean attributes
-boolHook = {
- get: function( elem, name ) {
- // Align boolean attributes with corresponding properties
- // Fall back to attribute presence where some booleans are not supported
- var attrNode;
- return jQuery.prop( elem, name ) === true || ( attrNode = elem.getAttributeNode( name ) ) && attrNode.nodeValue !== false ?
- name.toLowerCase() :
- undefined;
- },
- set: function( elem, value, name ) {
- var propName;
- if ( value === false ) {
- // Remove boolean attributes when set to false
- jQuery.removeAttr( elem, name );
- } else {
- // value is true since we know at this point it's type boolean and not false
- // Set boolean attributes to the same name and set the DOM property
- propName = jQuery.propFix[ name ] || name;
- if ( propName in elem ) {
- // Only set the IDL specifically if it already exists on the element
- elem[ propName ] = true;
- }
-
- elem.setAttribute( name, name.toLowerCase() );
- }
- return name;
- }
-};
-
-// IE6/7 do not support getting/setting some attributes with get/setAttribute
-if ( !jQuery.support.getSetAttribute ) {
-
- // Use this for any attribute in IE6/7
- // This fixes almost every IE6/7 issue
- nodeHook = jQuery.valHooks.button = {
- get: function( elem, name ) {
- var ret;
- ret = elem.getAttributeNode( name );
- // Return undefined if nodeValue is empty string
- return ret && ret.nodeValue !== "" ?
- ret.nodeValue :
- undefined;
- },
- set: function( elem, value, name ) {
- // Set the existing or create a new attribute node
- var ret = elem.getAttributeNode( name );
- if ( !ret ) {
- ret = document.createAttribute( name );
- elem.setAttributeNode( ret );
- }
- return (ret.nodeValue = value + "");
- }
- };
-
- // Set width and height to auto instead of 0 on empty string( Bug #8150 )
- // This is for removals
- jQuery.each([ "width", "height" ], function( i, name ) {
- jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], {
- set: function( elem, value ) {
- if ( value === "" ) {
- elem.setAttribute( name, "auto" );
- return value;
- }
- }
- });
- });
-}
-
-
-// Some attributes require a special call on IE
-if ( !jQuery.support.hrefNormalized ) {
- jQuery.each([ "href", "src", "width", "height" ], function( i, name ) {
- jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], {
- get: function( elem ) {
- var ret = elem.getAttribute( name, 2 );
- return ret === null ? undefined : ret;
- }
- });
- });
-}
-
-if ( !jQuery.support.style ) {
- jQuery.attrHooks.style = {
- get: function( elem ) {
- // Return undefined in the case of empty string
- // Normalize to lowercase since IE uppercases css property names
- return elem.style.cssText.toLowerCase() || undefined;
- },
- set: function( elem, value ) {
- return (elem.style.cssText = "" + value);
- }
- };
-}
-
-// Safari mis-reports the default selected property of an option
-// Accessing the parent's selectedIndex property fixes it
-if ( !jQuery.support.optSelected ) {
- jQuery.propHooks.selected = jQuery.extend( jQuery.propHooks.selected, {
- get: function( elem ) {
- var parent = elem.parentNode;
-
- if ( parent ) {
- parent.selectedIndex;
-
- // Make sure that it also works with optgroups, see #5701
- if ( parent.parentNode ) {
- parent.parentNode.selectedIndex;
- }
- }
- return null;
- }
- });
-}
-
-// Radios and checkboxes getter/setter
-if ( !jQuery.support.checkOn ) {
- jQuery.each([ "radio", "checkbox" ], function() {
- jQuery.valHooks[ this ] = {
- get: function( elem ) {
- // Handle the case where in Webkit "" is returned instead of "on" if a value isn't specified
- return elem.getAttribute("value") === null ? "on" : elem.value;
- }
- };
- });
-}
-jQuery.each([ "radio", "checkbox" ], function() {
- jQuery.valHooks[ this ] = jQuery.extend( jQuery.valHooks[ this ], {
- set: function( elem, value ) {
- if ( jQuery.isArray( value ) ) {
- return (elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0);
- }
- }
- });
-});
-
-
-
-
-var rnamespaces = /\.(.*)$/,
- rformElems = /^(?:textarea|input|select)$/i,
- rperiod = /\./g,
- rspaces = / /g,
- rescape = /[^\w\s.|`]/g,
- fcleanup = function( nm ) {
- return nm.replace(rescape, "\\$&");
- };
-
-/*
- * A number of helper functions used for managing events.
- * Many of the ideas behind this code originated from
- * Dean Edwards' addEvent library.
- */
-jQuery.event = {
-
- // Bind an event to an element
- // Original by Dean Edwards
- add: function( elem, types, handler, data ) {
- if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
- return;
- }
-
- if ( handler === false ) {
- handler = returnFalse;
- } else if ( !handler ) {
- // Fixes bug #7229. Fix recommended by jdalton
- return;
- }
-
- var handleObjIn, handleObj;
-
- if ( handler.handler ) {
- handleObjIn = handler;
- handler = handleObjIn.handler;
- }
-
- // Make sure that the function being executed has a unique ID
- if ( !handler.guid ) {
- handler.guid = jQuery.guid++;
- }
-
- // Init the element's event structure
- var elemData = jQuery._data( elem );
-
- // If no elemData is found then we must be trying to bind to one of the
- // banned noData elements
- if ( !elemData ) {
- return;
- }
-
- var events = elemData.events,
- eventHandle = elemData.handle;
-
- if ( !events ) {
- elemData.events = events = {};
- }
-
- if ( !eventHandle ) {
- elemData.handle = eventHandle = function( e ) {
- // Discard the second event of a jQuery.event.trigger() and
- // when an event is called after a page has unloaded
- return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ?
- jQuery.event.handle.apply( eventHandle.elem, arguments ) :
- undefined;
- };
- }
-
- // Add elem as a property of the handle function
- // This is to prevent a memory leak with non-native events in IE.
- eventHandle.elem = elem;
-
- // Handle multiple events separated by a space
- // jQuery(...).bind("mouseover mouseout", fn);
- types = types.split(" ");
-
- var type, i = 0, namespaces;
-
- while ( (type = types[ i++ ]) ) {
- handleObj = handleObjIn ?
- jQuery.extend({}, handleObjIn) :
- { handler: handler, data: data };
-
- // Namespaced event handlers
- if ( type.indexOf(".") > -1 ) {
- namespaces = type.split(".");
- type = namespaces.shift();
- handleObj.namespace = namespaces.slice(0).sort().join(".");
-
- } else {
- namespaces = [];
- handleObj.namespace = "";
- }
-
- handleObj.type = type;
- if ( !handleObj.guid ) {
- handleObj.guid = handler.guid;
- }
-
- // Get the current list of functions bound to this event
- var handlers = events[ type ],
- special = jQuery.event.special[ type ] || {};
-
- // Init the event handler queue
- if ( !handlers ) {
- handlers = events[ type ] = [];
-
- // Check for a special event handler
- // Only use addEventListener/attachEvent if the special
- // events handler returns false
- if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
- // Bind the global event handler to the element
- if ( elem.addEventListener ) {
- elem.addEventListener( type, eventHandle, false );
-
- } else if ( elem.attachEvent ) {
- elem.attachEvent( "on" + type, eventHandle );
- }
- }
- }
-
- if ( special.add ) {
- special.add.call( elem, handleObj );
-
- if ( !handleObj.handler.guid ) {
- handleObj.handler.guid = handler.guid;
- }
- }
-
- // Add the function to the element's handler list
- handlers.push( handleObj );
-
- // Keep track of which events have been used, for event optimization
- jQuery.event.global[ type ] = true;
- }
-
- // Nullify elem to prevent memory leaks in IE
- elem = null;
- },
-
- global: {},
-
- // Detach an event or set of events from an element
- remove: function( elem, types, handler, pos ) {
- // don't do events on text and comment nodes
- if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
- return;
- }
-
- if ( handler === false ) {
- handler = returnFalse;
- }
-
- var ret, type, fn, j, i = 0, all, namespaces, namespace, special, eventType, handleObj, origType,
- elemData = jQuery.hasData( elem ) && jQuery._data( elem ),
- events = elemData && elemData.events;
-
- if ( !elemData || !events ) {
- return;
- }
-
- // types is actually an event object here
- if ( types && types.type ) {
- handler = types.handler;
- types = types.type;
- }
-
- // Unbind all events for the element
- if ( !types || typeof types === "string" && types.charAt(0) === "." ) {
- types = types || "";
-
- for ( type in events ) {
- jQuery.event.remove( elem, type + types );
- }
-
- return;
- }
-
- // Handle multiple events separated by a space
- // jQuery(...).unbind("mouseover mouseout", fn);
- types = types.split(" ");
-
- while ( (type = types[ i++ ]) ) {
- origType = type;
- handleObj = null;
- all = type.indexOf(".") < 0;
- namespaces = [];
-
- if ( !all ) {
- // Namespaced event handlers
- namespaces = type.split(".");
- type = namespaces.shift();
-
- namespace = new RegExp("(^|\\.)" +
- jQuery.map( namespaces.slice(0).sort(), fcleanup ).join("\\.(?:.*\\.)?") + "(\\.|$)");
- }
-
- eventType = events[ type ];
-
- if ( !eventType ) {
- continue;
- }
-
- if ( !handler ) {
- for ( j = 0; j < eventType.length; j++ ) {
- handleObj = eventType[ j ];
-
- if ( all || namespace.test( handleObj.namespace ) ) {
- jQuery.event.remove( elem, origType, handleObj.handler, j );
- eventType.splice( j--, 1 );
- }
- }
-
- continue;
- }
-
- special = jQuery.event.special[ type ] || {};
-
- for ( j = pos || 0; j < eventType.length; j++ ) {
- handleObj = eventType[ j ];
-
- if ( handler.guid === handleObj.guid ) {
- // remove the given handler for the given type
- if ( all || namespace.test( handleObj.namespace ) ) {
- if ( pos == null ) {
- eventType.splice( j--, 1 );
- }
-
- if ( special.remove ) {
- special.remove.call( elem, handleObj );
- }
- }
-
- if ( pos != null ) {
- break;
- }
- }
- }
-
- // remove generic event handler if no more handlers exist
- if ( eventType.length === 0 || pos != null && eventType.length === 1 ) {
- if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) {
- jQuery.removeEvent( elem, type, elemData.handle );
- }
-
- ret = null;
- delete events[ type ];
- }
- }
-
- // Remove the expando if it's no longer used
- if ( jQuery.isEmptyObject( events ) ) {
- var handle = elemData.handle;
- if ( handle ) {
- handle.elem = null;
- }
-
- delete elemData.events;
- delete elemData.handle;
-
- if ( jQuery.isEmptyObject( elemData ) ) {
- jQuery.removeData( elem, undefined, true );
- }
- }
- },
-
- // Events that are safe to short-circuit if no handlers are attached.
- // Native DOM events should not be added, they may have inline handlers.
- customEvent: {
- "getData": true,
- "setData": true,
- "changeData": true
- },
-
- trigger: function( event, data, elem, onlyHandlers ) {
- // Event object or event type
- var type = event.type || event,
- namespaces = [],
- exclusive;
-
- if ( type.indexOf("!") >= 0 ) {
- // Exclusive events trigger only for the exact event (no namespaces)
- type = type.slice(0, -1);
- exclusive = true;
- }
-
- if ( type.indexOf(".") >= 0 ) {
- // Namespaced trigger; create a regexp to match event type in handle()
- namespaces = type.split(".");
- type = namespaces.shift();
- namespaces.sort();
- }
-
- if ( (!elem || jQuery.event.customEvent[ type ]) && !jQuery.event.global[ type ] ) {
- // No jQuery handlers for this event type, and it can't have inline handlers
- return;
- }
-
- // Caller can pass in an Event, Object, or just an event type string
- event = typeof event === "object" ?
- // jQuery.Event object
- event[ jQuery.expando ] ? event :
- // Object literal
- new jQuery.Event( type, event ) :
- // Just the event type (string)
- new jQuery.Event( type );
-
- event.type = type;
- event.exclusive = exclusive;
- event.namespace = namespaces.join(".");
- event.namespace_re = new RegExp("(^|\\.)" + namespaces.join("\\.(?:.*\\.)?") + "(\\.|$)");
-
- // triggerHandler() and global events don't bubble or run the default action
- if ( onlyHandlers || !elem ) {
- event.preventDefault();
- event.stopPropagation();
- }
-
- // Handle a global trigger
- if ( !elem ) {
- // TODO: Stop taunting the data cache; remove global events and always attach to document
- jQuery.each( jQuery.cache, function() {
- // internalKey variable is just used to make it easier to find
- // and potentially change this stuff later; currently it just
- // points to jQuery.expando
- var internalKey = jQuery.expando,
- internalCache = this[ internalKey ];
- if ( internalCache && internalCache.events && internalCache.events[ type ] ) {
- jQuery.event.trigger( event, data, internalCache.handle.elem );
- }
- });
- return;
- }
-
- // Don't do events on text and comment nodes
- if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
- return;
- }
-
- // Clean up the event in case it is being reused
- event.result = undefined;
- event.target = elem;
-
- // Clone any incoming data and prepend the event, creating the handler arg list
- data = data != null ? jQuery.makeArray( data ) : [];
- data.unshift( event );
-
- var cur = elem,
- // IE doesn't like method names with a colon (#3533, #8272)
- ontype = type.indexOf(":") < 0 ? "on" + type : "";
-
- // Fire event on the current element, then bubble up the DOM tree
- do {
- var handle = jQuery._data( cur, "handle" );
-
- event.currentTarget = cur;
- if ( handle ) {
- handle.apply( cur, data );
- }
-
- // Trigger an inline bound script
- if ( ontype && jQuery.acceptData( cur ) && cur[ ontype ] && cur[ ontype ].apply( cur, data ) === false ) {
- event.result = false;
- event.preventDefault();
- }
-
- // Bubble up to document, then to window
- cur = cur.parentNode || cur.ownerDocument || cur === event.target.ownerDocument && window;
- } while ( cur && !event.isPropagationStopped() );
-
- // If nobody prevented the default action, do it now
- if ( !event.isDefaultPrevented() ) {
- var old,
- special = jQuery.event.special[ type ] || {};
-
- if ( (!special._default || special._default.call( elem.ownerDocument, event ) === false) &&
- !(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) {
-
- // Call a native DOM method on the target with the same name name as the event.
- // Can't use an .isFunction)() check here because IE6/7 fails that test.
- // IE<9 dies on focus to hidden element (#1486), may want to revisit a try/catch.
- try {
- if ( ontype && elem[ type ] ) {
- // Don't re-trigger an onFOO event when we call its FOO() method
- old = elem[ ontype ];
-
- if ( old ) {
- elem[ ontype ] = null;
- }
-
- jQuery.event.triggered = type;
- elem[ type ]();
- }
- } catch ( ieError ) {}
-
- if ( old ) {
- elem[ ontype ] = old;
- }
-
- jQuery.event.triggered = undefined;
- }
- }
-
- return event.result;
- },
-
- handle: function( event ) {
- event = jQuery.event.fix( event || window.event );
- // Snapshot the handlers list since a called handler may add/remove events.
- var handlers = ((jQuery._data( this, "events" ) || {})[ event.type ] || []).slice(0),
- run_all = !event.exclusive && !event.namespace,
- args = Array.prototype.slice.call( arguments, 0 );
-
- // Use the fix-ed Event rather than the (read-only) native event
- args[0] = event;
- event.currentTarget = this;
-
- for ( var j = 0, l = handlers.length; j < l; j++ ) {
- var handleObj = handlers[ j ];
-
- // Triggered event must 1) be non-exclusive and have no namespace, or
- // 2) have namespace(s) a subset or equal to those in the bound event.
- if ( run_all || event.namespace_re.test( handleObj.namespace ) ) {
- // Pass in a reference to the handler function itself
- // So that we can later remove it
- event.handler = handleObj.handler;
- event.data = handleObj.data;
- event.handleObj = handleObj;
-
- var ret = handleObj.handler.apply( this, args );
-
- if ( ret !== undefined ) {
- event.result = ret;
- if ( ret === false ) {
- event.preventDefault();
- event.stopPropagation();
- }
- }
-
- if ( event.isImmediatePropagationStopped() ) {
- break;
- }
- }
- }
- return event.result;
- },
-
- props: "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),
-
- fix: function( event ) {
- if ( event[ jQuery.expando ] ) {
- return event;
- }
-
- // store a copy of the original event object
- // and "clone" to set read-only properties
- var originalEvent = event;
- event = jQuery.Event( originalEvent );
-
- for ( var i = this.props.length, prop; i; ) {
- prop = this.props[ --i ];
- event[ prop ] = originalEvent[ prop ];
- }
-
- // Fix target property, if necessary
- if ( !event.target ) {
- // Fixes #1925 where srcElement might not be defined either
- event.target = event.srcElement || document;
- }
-
- // check if target is a textnode (safari)
- if ( event.target.nodeType === 3 ) {
- event.target = event.target.parentNode;
- }
-
- // Add relatedTarget, if necessary
- if ( !event.relatedTarget && event.fromElement ) {
- event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
- }
-
- // Calculate pageX/Y if missing and clientX/Y available
- if ( event.pageX == null && event.clientX != null ) {
- var eventDocument = event.target.ownerDocument || document,
- doc = eventDocument.documentElement,
- body = eventDocument.body;
-
- event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
- event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
- }
-
- // Add which for key events
- if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
- event.which = event.charCode != null ? event.charCode : event.keyCode;
- }
-
- // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
- if ( !event.metaKey && event.ctrlKey ) {
- event.metaKey = event.ctrlKey;
- }
-
- // Add which for click: 1 === left; 2 === middle; 3 === right
- // Note: button is not normalized, so don't use it
- if ( !event.which && event.button !== undefined ) {
- event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
- }
-
- return event;
- },
-
- // Deprecated, use jQuery.guid instead
- guid: 1E8,
-
- // Deprecated, use jQuery.proxy instead
- proxy: jQuery.proxy,
-
- special: {
- ready: {
- // Make sure the ready event is setup
- setup: jQuery.bindReady,
- teardown: jQuery.noop
- },
-
- live: {
- add: function( handleObj ) {
- jQuery.event.add( this,
- liveConvert( handleObj.origType, handleObj.selector ),
- jQuery.extend({}, handleObj, {handler: liveHandler, guid: handleObj.handler.guid}) );
- },
-
- remove: function( handleObj ) {
- jQuery.event.remove( this, liveConvert( handleObj.origType, handleObj.selector ), handleObj );
- }
- },
-
- beforeunload: {
- setup: function( data, namespaces, eventHandle ) {
- // We only want to do this special case on windows
- if ( jQuery.isWindow( this ) ) {
- this.onbeforeunload = eventHandle;
- }
- },
-
- teardown: function( namespaces, eventHandle ) {
- if ( this.onbeforeunload === eventHandle ) {
- this.onbeforeunload = null;
- }
- }
- }
- }
-};
-
-jQuery.removeEvent = document.removeEventListener ?
- function( elem, type, handle ) {
- if ( elem.removeEventListener ) {
- elem.removeEventListener( type, handle, false );
- }
- } :
- function( elem, type, handle ) {
- if ( elem.detachEvent ) {
- elem.detachEvent( "on" + type, handle );
- }
- };
-
-jQuery.Event = function( src, props ) {
- // Allow instantiation without the 'new' keyword
- if ( !this.preventDefault ) {
- return new jQuery.Event( src, props );
- }
-
- // Event object
- if ( src && src.type ) {
- this.originalEvent = src;
- this.type = src.type;
-
- // Events bubbling up the document may have been marked as prevented
- // by a handler lower down the tree; reflect the correct value.
- this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||
- src.getPreventDefault && src.getPreventDefault()) ? returnTrue : returnFalse;
-
- // Event type
- } else {
- this.type = src;
- }
-
- // Put explicitly provided properties onto the event object
- if ( props ) {
- jQuery.extend( this, props );
- }
-
- // timeStamp is buggy for some events on Firefox(#3843)
- // So we won't rely on the native value
- this.timeStamp = jQuery.now();
-
- // Mark it as fixed
- this[ jQuery.expando ] = true;
-};
-
-function returnFalse() {
- return false;
-}
-function returnTrue() {
- return true;
-}
-
-// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
-// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
-jQuery.Event.prototype = {
- preventDefault: function() {
- this.isDefaultPrevented = returnTrue;
-
- var e = this.originalEvent;
- if ( !e ) {
- return;
- }
-
- // if preventDefault exists run it on the original event
- if ( e.preventDefault ) {
- e.preventDefault();
-
- // otherwise set the returnValue property of the original event to false (IE)
- } else {
- e.returnValue = false;
- }
- },
- stopPropagation: function() {
- this.isPropagationStopped = returnTrue;
-
- var e = this.originalEvent;
- if ( !e ) {
- return;
- }
- // if stopPropagation exists run it on the original event
- if ( e.stopPropagation ) {
- e.stopPropagation();
- }
- // otherwise set the cancelBubble property of the original event to true (IE)
- e.cancelBubble = true;
- },
- stopImmediatePropagation: function() {
- this.isImmediatePropagationStopped = returnTrue;
- this.stopPropagation();
- },
- isDefaultPrevented: returnFalse,
- isPropagationStopped: returnFalse,
- isImmediatePropagationStopped: returnFalse
-};
-
-// Checks if an event happened on an element within another element
-// Used in jQuery.event.special.mouseenter and mouseleave handlers
-var withinElement = function( event ) {
-
- // Check if mouse(over|out) are still within the same parent element
- var related = event.relatedTarget,
- inside = false,
- eventType = event.type;
-
- event.type = event.data;
-
- if ( related !== this ) {
-
- if ( related ) {
- inside = jQuery.contains( this, related );
- }
-
- if ( !inside ) {
-
- jQuery.event.handle.apply( this, arguments );
-
- event.type = eventType;
- }
- }
-},
-
-// In case of event delegation, we only need to rename the event.type,
-// liveHandler will take care of the rest.
-delegate = function( event ) {
- event.type = event.data;
- jQuery.event.handle.apply( this, arguments );
-};
-
-// Create mouseenter and mouseleave events
-jQuery.each({
- mouseenter: "mouseover",
- mouseleave: "mouseout"
-}, function( orig, fix ) {
- jQuery.event.special[ orig ] = {
- setup: function( data ) {
- jQuery.event.add( this, fix, data && data.selector ? delegate : withinElement, orig );
- },
- teardown: function( data ) {
- jQuery.event.remove( this, fix, data && data.selector ? delegate : withinElement );
- }
- };
-});
-
-// submit delegation
-if ( !jQuery.support.submitBubbles ) {
-
- jQuery.event.special.submit = {
- setup: function( data, namespaces ) {
- if ( !jQuery.nodeName( this, "form" ) ) {
- jQuery.event.add(this, "click.specialSubmit", function( e ) {
- // Avoid triggering error on non-existent type attribute in IE VML (#7071)
- var elem = e.target,
- type = jQuery.nodeName( elem, "input" ) || jQuery.nodeName( elem, "button" ) ? elem.type : "";
-
- if ( (type === "submit" || type === "image") && jQuery( elem ).closest("form").length ) {
- trigger( "submit", this, arguments );
- }
- });
-
- jQuery.event.add(this, "keypress.specialSubmit", function( e ) {
- var elem = e.target,
- type = jQuery.nodeName( elem, "input" ) || jQuery.nodeName( elem, "button" ) ? elem.type : "";
-
- if ( (type === "text" || type === "password") && jQuery( elem ).closest("form").length && e.keyCode === 13 ) {
- trigger( "submit", this, arguments );
- }
- });
-
- } else {
- return false;
- }
- },
-
- teardown: function( namespaces ) {
- jQuery.event.remove( this, ".specialSubmit" );
- }
- };
-
-}
-
-// change delegation, happens here so we have bind.
-if ( !jQuery.support.changeBubbles ) {
-
- var changeFilters,
-
- getVal = function( elem ) {
- var type = jQuery.nodeName( elem, "input" ) ? elem.type : "",
- val = elem.value;
-
- if ( type === "radio" || type === "checkbox" ) {
- val = elem.checked;
-
- } else if ( type === "select-multiple" ) {
- val = elem.selectedIndex > -1 ?
- jQuery.map( elem.options, function( elem ) {
- return elem.selected;
- }).join("-") :
- "";
-
- } else if ( jQuery.nodeName( elem, "select" ) ) {
- val = elem.selectedIndex;
- }
-
- return val;
- },
-
- testChange = function testChange( e ) {
- var elem = e.target, data, val;
-
- if ( !rformElems.test( elem.nodeName ) || elem.readOnly ) {
- return;
- }
-
- data = jQuery._data( elem, "_change_data" );
- val = getVal(elem);
-
- // the current data will be also retrieved by beforeactivate
- if ( e.type !== "focusout" || elem.type !== "radio" ) {
- jQuery._data( elem, "_change_data", val );
- }
-
- if ( data === undefined || val === data ) {
- return;
- }
-
- if ( data != null || val ) {
- e.type = "change";
- e.liveFired = undefined;
- jQuery.event.trigger( e, arguments[1], elem );
- }
- };
-
- jQuery.event.special.change = {
- filters: {
- focusout: testChange,
-
- beforedeactivate: testChange,
-
- click: function( e ) {
- var elem = e.target, type = jQuery.nodeName( elem, "input" ) ? elem.type : "";
-
- if ( type === "radio" || type === "checkbox" || jQuery.nodeName( elem, "select" ) ) {
- testChange.call( this, e );
- }
- },
-
- // Change has to be called before submit
- // Keydown will be called before keypress, which is used in submit-event delegation
- keydown: function( e ) {
- var elem = e.target, type = jQuery.nodeName( elem, "input" ) ? elem.type : "";
-
- if ( (e.keyCode === 13 && !jQuery.nodeName( elem, "textarea" ) ) ||
- (e.keyCode === 32 && (type === "checkbox" || type === "radio")) ||
- type === "select-multiple" ) {
- testChange.call( this, e );
- }
- },
-
- // Beforeactivate happens also before the previous element is blurred
- // with this event you can't trigger a change event, but you can store
- // information
- beforeactivate: function( e ) {
- var elem = e.target;
- jQuery._data( elem, "_change_data", getVal(elem) );
- }
- },
-
- setup: function( data, namespaces ) {
- if ( this.type === "file" ) {
- return false;
- }
-
- for ( var type in changeFilters ) {
- jQuery.event.add( this, type + ".specialChange", changeFilters[type] );
- }
-
- return rformElems.test( this.nodeName );
- },
-
- teardown: function( namespaces ) {
- jQuery.event.remove( this, ".specialChange" );
-
- return rformElems.test( this.nodeName );
- }
- };
-
- changeFilters = jQuery.event.special.change.filters;
-
- // Handle when the input is .focus()'d
- changeFilters.focus = changeFilters.beforeactivate;
-}
-
-function trigger( type, elem, args ) {
- // Piggyback on a donor event to simulate a different one.
- // Fake originalEvent to avoid donor's stopPropagation, but if the
- // simulated event prevents default then we do the same on the donor.
- // Don't pass args or remember liveFired; they apply to the donor event.
- var event = jQuery.extend( {}, args[ 0 ] );
- event.type = type;
- event.originalEvent = {};
- event.liveFired = undefined;
- jQuery.event.handle.call( elem, event );
- if ( event.isDefaultPrevented() ) {
- args[ 0 ].preventDefault();
- }
-}
-
-// Create "bubbling" focus and blur events
-if ( !jQuery.support.focusinBubbles ) {
- jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {
-
- // Attach a single capturing handler while someone wants focusin/focusout
- var attaches = 0;
-
- jQuery.event.special[ fix ] = {
- setup: function() {
- if ( attaches++ === 0 ) {
- document.addEventListener( orig, handler, true );
- }
- },
- teardown: function() {
- if ( --attaches === 0 ) {
- document.removeEventListener( orig, handler, true );
- }
- }
- };
-
- function handler( donor ) {
- // Donor event is always a native one; fix it and switch its type.
- // Let focusin/out handler cancel the donor focus/blur event.
- var e = jQuery.event.fix( donor );
- e.type = fix;
- e.originalEvent = {};
- jQuery.event.trigger( e, null, e.target );
- if ( e.isDefaultPrevented() ) {
- donor.preventDefault();
- }
- }
- });
-}
-
-jQuery.each(["bind", "one"], function( i, name ) {
- jQuery.fn[ name ] = function( type, data, fn ) {
- var handler;
-
- // Handle object literals
- if ( typeof type === "object" ) {
- for ( var key in type ) {
- this[ name ](key, data, type[key], fn);
- }
- return this;
- }
-
- if ( arguments.length === 2 || data === false ) {
- fn = data;
- data = undefined;
- }
-
- if ( name === "one" ) {
- handler = function( event ) {
- jQuery( this ).unbind( event, handler );
- return fn.apply( this, arguments );
- };
- handler.guid = fn.guid || jQuery.guid++;
- } else {
- handler = fn;
- }
-
- if ( type === "unload" && name !== "one" ) {
- this.one( type, data, fn );
-
- } else {
- for ( var i = 0, l = this.length; i < l; i++ ) {
- jQuery.event.add( this[i], type, handler, data );
- }
- }
-
- return this;
- };
-});
-
-jQuery.fn.extend({
- unbind: function( type, fn ) {
- // Handle object literals
- if ( typeof type === "object" && !type.preventDefault ) {
- for ( var key in type ) {
- this.unbind(key, type[key]);
- }
-
- } else {
- for ( var i = 0, l = this.length; i < l; i++ ) {
- jQuery.event.remove( this[i], type, fn );
- }
- }
-
- return this;
- },
-
- delegate: function( selector, types, data, fn ) {
- return this.live( types, data, fn, selector );
- },
-
- undelegate: function( selector, types, fn ) {
- if ( arguments.length === 0 ) {
- return this.unbind( "live" );
-
- } else {
- return this.die( types, null, fn, selector );
- }
- },
-
- trigger: function( type, data ) {
- return this.each(function() {
- jQuery.event.trigger( type, data, this );
- });
- },
-
- triggerHandler: function( type, data ) {
- if ( this[0] ) {
- return jQuery.event.trigger( type, data, this[0], true );
- }
- },
-
- toggle: function( fn ) {
- // Save reference to arguments for access in closure
- var args = arguments,
- guid = fn.guid || jQuery.guid++,
- i = 0,
- toggler = function( event ) {
- // Figure out which function to execute
- var lastToggle = ( jQuery.data( this, "lastToggle" + fn.guid ) || 0 ) % i;
- jQuery.data( this, "lastToggle" + fn.guid, lastToggle + 1 );
-
- // Make sure that clicks stop
- event.preventDefault();
-
- // and execute the function
- return args[ lastToggle ].apply( this, arguments ) || false;
- };
-
- // link all the functions, so any of them can unbind this click handler
- toggler.guid = guid;
- while ( i < args.length ) {
- args[ i++ ].guid = guid;
- }
-
- return this.click( toggler );
- },
-
- hover: function( fnOver, fnOut ) {
- return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
- }
-});
-
-var liveMap = {
- focus: "focusin",
- blur: "focusout",
- mouseenter: "mouseover",
- mouseleave: "mouseout"
-};
-
-jQuery.each(["live", "die"], function( i, name ) {
- jQuery.fn[ name ] = function( types, data, fn, origSelector /* Internal Use Only */ ) {
- var type, i = 0, match, namespaces, preType,
- selector = origSelector || this.selector,
- context = origSelector ? this : jQuery( this.context );
-
- if ( typeof types === "object" && !types.preventDefault ) {
- for ( var key in types ) {
- context[ name ]( key, data, types[key], selector );
- }
-
- return this;
- }
-
- if ( name === "die" && !types &&
- origSelector && origSelector.charAt(0) === "." ) {
-
- context.unbind( origSelector );
-
- return this;
- }
-
- if ( data === false || jQuery.isFunction( data ) ) {
- fn = data || returnFalse;
- data = undefined;
- }
-
- types = (types || "").split(" ");
-
- while ( (type = types[ i++ ]) != null ) {
- match = rnamespaces.exec( type );
- namespaces = "";
-
- if ( match ) {
- namespaces = match[0];
- type = type.replace( rnamespaces, "" );
- }
-
- if ( type === "hover" ) {
- types.push( "mouseenter" + namespaces, "mouseleave" + namespaces );
- continue;
- }
-
- preType = type;
-
- if ( liveMap[ type ] ) {
- types.push( liveMap[ type ] + namespaces );
- type = type + namespaces;
-
- } else {
- type = (liveMap[ type ] || type) + namespaces;
- }
-
- if ( name === "live" ) {
- // bind live handler
- for ( var j = 0, l = context.length; j < l; j++ ) {
- jQuery.event.add( context[j], "live." + liveConvert( type, selector ),
- { data: data, selector: selector, handler: fn, origType: type, origHandler: fn, preType: preType } );
- }
-
- } else {
- // unbind live handler
- context.unbind( "live." + liveConvert( type, selector ), fn );
- }
- }
-
- return this;
- };
-});
-
-function liveHandler( event ) {
- var stop, maxLevel, related, match, handleObj, elem, j, i, l, data, close, namespace, ret,
- elems = [],
- selectors = [],
- events = jQuery._data( this, "events" );
-
- // Make sure we avoid non-left-click bubbling in Firefox (#3861) and disabled elements in IE (#6911)
- if ( event.liveFired === this || !events || !events.live || event.target.disabled || event.button && event.type === "click" ) {
- return;
- }
-
- if ( event.namespace ) {
- namespace = new RegExp("(^|\\.)" + event.namespace.split(".").join("\\.(?:.*\\.)?") + "(\\.|$)");
- }
-
- event.liveFired = this;
-
- var live = events.live.slice(0);
-
- for ( j = 0; j < live.length; j++ ) {
- handleObj = live[j];
-
- if ( handleObj.origType.replace( rnamespaces, "" ) === event.type ) {
- selectors.push( handleObj.selector );
-
- } else {
- live.splice( j--, 1 );
- }
- }
-
- match = jQuery( event.target ).closest( selectors, event.currentTarget );
-
- for ( i = 0, l = match.length; i < l; i++ ) {
- close = match[i];
-
- for ( j = 0; j < live.length; j++ ) {
- handleObj = live[j];
-
- if ( close.selector === handleObj.selector && (!namespace || namespace.test( handleObj.namespace )) && !close.elem.disabled ) {
- elem = close.elem;
- related = null;
-
- // Those two events require additional checking
- if ( handleObj.preType === "mouseenter" || handleObj.preType === "mouseleave" ) {
- event.type = handleObj.preType;
- related = jQuery( event.relatedTarget ).closest( handleObj.selector )[0];
-
- // Make sure not to accidentally match a child element with the same selector
- if ( related && jQuery.contains( elem, related ) ) {
- related = elem;
- }
- }
-
- if ( !related || related !== elem ) {
- elems.push({ elem: elem, handleObj: handleObj, level: close.level });
- }
- }
- }
- }
-
- for ( i = 0, l = elems.length; i < l; i++ ) {
- match = elems[i];
-
- if ( maxLevel && match.level > maxLevel ) {
- break;
- }
-
- event.currentTarget = match.elem;
- event.data = match.handleObj.data;
- event.handleObj = match.handleObj;
-
- ret = match.handleObj.origHandler.apply( match.elem, arguments );
-
- if ( ret === false || event.isPropagationStopped() ) {
- maxLevel = match.level;
-
- if ( ret === false ) {
- stop = false;
- }
- if ( event.isImmediatePropagationStopped() ) {
- break;
- }
- }
- }
-
- return stop;
-}
-
-function liveConvert( type, selector ) {
- return (type && type !== "*" ? type + "." : "") + selector.replace(rperiod, "`").replace(rspaces, "&");
-}
-
-jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
- "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
- "change select submit keydown keypress keyup error").split(" "), function( i, name ) {
-
- // Handle event binding
- jQuery.fn[ name ] = function( data, fn ) {
- if ( fn == null ) {
- fn = data;
- data = null;
- }
-
- return arguments.length > 0 ?
- this.bind( name, data, fn ) :
- this.trigger( name );
- };
-
- if ( jQuery.attrFn ) {
- jQuery.attrFn[ name ] = true;
- }
-});
-
-
-
-/*!
- * Sizzle CSS Selector Engine
- * Copyright 2011, The Dojo Foundation
- * Released under the MIT, BSD, and GPL Licenses.
- * More information: http://sizzlejs.com/
- */
-(function(){
-
-var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,
- done = 0,
- toString = Object.prototype.toString,
- hasDuplicate = false,
- baseHasDuplicate = true,
- rBackslash = /\\/g,
- rNonWord = /\W/;
-
-// Here we check if the JavaScript engine is using some sort of
-// optimization where it does not always call our comparision
-// function. If that is the case, discard the hasDuplicate value.
-// Thus far that includes Google Chrome.
-[0, 0].sort(function() {
- baseHasDuplicate = false;
- return 0;
-});
-
-var Sizzle = function( selector, context, results, seed ) {
- results = results || [];
- context = context || document;
-
- var origContext = context;
-
- if ( context.nodeType !== 1 && context.nodeType !== 9 ) {
- return [];
- }
-
- if ( !selector || typeof selector !== "string" ) {
- return results;
- }
-
- var m, set, checkSet, extra, ret, cur, pop, i,
- prune = true,
- contextXML = Sizzle.isXML( context ),
- parts = [],
- soFar = selector;
-
- // Reset the position of the chunker regexp (start from head)
- do {
- chunker.exec( "" );
- m = chunker.exec( soFar );
-
- if ( m ) {
- soFar = m[3];
-
- parts.push( m[1] );
-
- if ( m[2] ) {
- extra = m[3];
- break;
- }
- }
- } while ( m );
-
- if ( parts.length > 1 && origPOS.exec( selector ) ) {
-
- if ( parts.length === 2 && Expr.relative[ parts[0] ] ) {
- set = posProcess( parts[0] + parts[1], context );
-
- } else {
- set = Expr.relative[ parts[0] ] ?
- [ context ] :
- Sizzle( parts.shift(), context );
-
- while ( parts.length ) {
- selector = parts.shift();
-
- if ( Expr.relative[ selector ] ) {
- selector += parts.shift();
- }
-
- set = posProcess( selector, set );
- }
- }
-
- } else {
- // Take a shortcut and set the context if the root selector is an ID
- // (but not if it'll be faster if the inner selector is an ID)
- if ( !seed && parts.length > 1 && context.nodeType === 9 && !contextXML &&
- Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1]) ) {
-
- ret = Sizzle.find( parts.shift(), context, contextXML );
- context = ret.expr ?
- Sizzle.filter( ret.expr, ret.set )[0] :
- ret.set[0];
- }
-
- if ( context ) {
- ret = seed ?
- { expr: parts.pop(), set: makeArray(seed) } :
- Sizzle.find( parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML );
-
- set = ret.expr ?
- Sizzle.filter( ret.expr, ret.set ) :
- ret.set;
-
- if ( parts.length > 0 ) {
- checkSet = makeArray( set );
-
- } else {
- prune = false;
- }
-
- while ( parts.length ) {
- cur = parts.pop();
- pop = cur;
-
- if ( !Expr.relative[ cur ] ) {
- cur = "";
- } else {
- pop = parts.pop();
- }
-
- if ( pop == null ) {
- pop = context;
- }
-
- Expr.relative[ cur ]( checkSet, pop, contextXML );
- }
-
- } else {
- checkSet = parts = [];
- }
- }
-
- if ( !checkSet ) {
- checkSet = set;
- }
-
- if ( !checkSet ) {
- Sizzle.error( cur || selector );
- }
-
- if ( toString.call(checkSet) === "[object Array]" ) {
- if ( !prune ) {
- results.push.apply( results, checkSet );
-
- } else if ( context && context.nodeType === 1 ) {
- for ( i = 0; checkSet[i] != null; i++ ) {
- if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) {
- results.push( set[i] );
- }
- }
-
- } else {
- for ( i = 0; checkSet[i] != null; i++ ) {
- if ( checkSet[i] && checkSet[i].nodeType === 1 ) {
- results.push( set[i] );
- }
- }
- }
-
- } else {
- makeArray( checkSet, results );
- }
-
- if ( extra ) {
- Sizzle( extra, origContext, results, seed );
- Sizzle.uniqueSort( results );
- }
-
- return results;
-};
-
-Sizzle.uniqueSort = function( results ) {
- if ( sortOrder ) {
- hasDuplicate = baseHasDuplicate;
- results.sort( sortOrder );
-
- if ( hasDuplicate ) {
- for ( var i = 1; i < results.length; i++ ) {
- if ( results[i] === results[ i - 1 ] ) {
- results.splice( i--, 1 );
- }
- }
- }
- }
-
- return results;
-};
-
-Sizzle.matches = function( expr, set ) {
- return Sizzle( expr, null, null, set );
-};
-
-Sizzle.matchesSelector = function( node, expr ) {
- return Sizzle( expr, null, null, [node] ).length > 0;
-};
-
-Sizzle.find = function( expr, context, isXML ) {
- var set;
-
- if ( !expr ) {
- return [];
- }
-
- for ( var i = 0, l = Expr.order.length; i < l; i++ ) {
- var match,
- type = Expr.order[i];
-
- if ( (match = Expr.leftMatch[ type ].exec( expr )) ) {
- var left = match[1];
- match.splice( 1, 1 );
-
- if ( left.substr( left.length - 1 ) !== "\\" ) {
- match[1] = (match[1] || "").replace( rBackslash, "" );
- set = Expr.find[ type ]( match, context, isXML );
-
- if ( set != null ) {
- expr = expr.replace( Expr.match[ type ], "" );
- break;
- }
- }
- }
- }
-
- if ( !set ) {
- set = typeof context.getElementsByTagName !== "undefined" ?
- context.getElementsByTagName( "*" ) :
- [];
- }
-
- return { set: set, expr: expr };
-};
-
-Sizzle.filter = function( expr, set, inplace, not ) {
- var match, anyFound,
- old = expr,
- result = [],
- curLoop = set,
- isXMLFilter = set && set[0] && Sizzle.isXML( set[0] );
-
- while ( expr && set.length ) {
- for ( var type in Expr.filter ) {
- if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) {
- var found, item,
- filter = Expr.filter[ type ],
- left = match[1];
-
- anyFound = false;
-
- match.splice(1,1);
-
- if ( left.substr( left.length - 1 ) === "\\" ) {
- continue;
- }
-
- if ( curLoop === result ) {
- result = [];
- }
-
- if ( Expr.preFilter[ type ] ) {
- match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter );
-
- if ( !match ) {
- anyFound = found = true;
-
- } else if ( match === true ) {
- continue;
- }
- }
-
- if ( match ) {
- for ( var i = 0; (item = curLoop[i]) != null; i++ ) {
- if ( item ) {
- found = filter( item, match, i, curLoop );
- var pass = not ^ !!found;
-
- if ( inplace && found != null ) {
- if ( pass ) {
- anyFound = true;
-
- } else {
- curLoop[i] = false;
- }
-
- } else if ( pass ) {
- result.push( item );
- anyFound = true;
- }
- }
- }
- }
-
- if ( found !== undefined ) {
- if ( !inplace ) {
- curLoop = result;
- }
-
- expr = expr.replace( Expr.match[ type ], "" );
-
- if ( !anyFound ) {
- return [];
- }
-
- break;
- }
- }
- }
-
- // Improper expression
- if ( expr === old ) {
- if ( anyFound == null ) {
- Sizzle.error( expr );
-
- } else {
- break;
- }
- }
-
- old = expr;
- }
-
- return curLoop;
-};
-
-Sizzle.error = function( msg ) {
- throw "Syntax error, unrecognized expression: " + msg;
-};
-
-var Expr = Sizzle.selectors = {
- order: [ "ID", "NAME", "TAG" ],
-
- match: {
- ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,
- CLASS: /\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,
- NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,
- ATTR: /\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,
- TAG: /^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,
- CHILD: /:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,
- POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,
- PSEUDO: /:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/
- },
-
- leftMatch: {},
-
- attrMap: {
- "class": "className",
- "for": "htmlFor"
- },
-
- attrHandle: {
- href: function( elem ) {
- return elem.getAttribute( "href" );
- },
- type: function( elem ) {
- return elem.getAttribute( "type" );
- }
- },
-
- relative: {
- "+": function(checkSet, part){
- var isPartStr = typeof part === "string",
- isTag = isPartStr && !rNonWord.test( part ),
- isPartStrNotTag = isPartStr && !isTag;
-
- if ( isTag ) {
- part = part.toLowerCase();
- }
-
- for ( var i = 0, l = checkSet.length, elem; i < l; i++ ) {
- if ( (elem = checkSet[i]) ) {
- while ( (elem = elem.previousSibling) && elem.nodeType !== 1 ) {}
-
- checkSet[i] = isPartStrNotTag || elem && elem.nodeName.toLowerCase() === part ?
- elem || false :
- elem === part;
- }
- }
-
- if ( isPartStrNotTag ) {
- Sizzle.filter( part, checkSet, true );
- }
- },
-
- ">": function( checkSet, part ) {
- var elem,
- isPartStr = typeof part === "string",
- i = 0,
- l = checkSet.length;
-
- if ( isPartStr && !rNonWord.test( part ) ) {
- part = part.toLowerCase();
-
- for ( ; i < l; i++ ) {
- elem = checkSet[i];
-
- if ( elem ) {
- var parent = elem.parentNode;
- checkSet[i] = parent.nodeName.toLowerCase() === part ? parent : false;
- }
- }
-
- } else {
- for ( ; i < l; i++ ) {
- elem = checkSet[i];
-
- if ( elem ) {
- checkSet[i] = isPartStr ?
- elem.parentNode :
- elem.parentNode === part;
- }
- }
-
- if ( isPartStr ) {
- Sizzle.filter( part, checkSet, true );
- }
- }
- },
-
- "": function(checkSet, part, isXML){
- var nodeCheck,
- doneName = done++,
- checkFn = dirCheck;
-
- if ( typeof part === "string" && !rNonWord.test( part ) ) {
- part = part.toLowerCase();
- nodeCheck = part;
- checkFn = dirNodeCheck;
- }
-
- checkFn( "parentNode", part, doneName, checkSet, nodeCheck, isXML );
- },
-
- "~": function( checkSet, part, isXML ) {
- var nodeCheck,
- doneName = done++,
- checkFn = dirCheck;
-
- if ( typeof part === "string" && !rNonWord.test( part ) ) {
- part = part.toLowerCase();
- nodeCheck = part;
- checkFn = dirNodeCheck;
- }
-
- checkFn( "previousSibling", part, doneName, checkSet, nodeCheck, isXML );
- }
- },
-
- find: {
- ID: function( match, context, isXML ) {
- if ( typeof context.getElementById !== "undefined" && !isXML ) {
- var m = context.getElementById(match[1]);
- // Check parentNode to catch when Blackberry 4.6 returns
- // nodes that are no longer in the document #6963
- return m && m.parentNode ? [m] : [];
- }
- },
-
- NAME: function( match, context ) {
- if ( typeof context.getElementsByName !== "undefined" ) {
- var ret = [],
- results = context.getElementsByName( match[1] );
-
- for ( var i = 0, l = results.length; i < l; i++ ) {
- if ( results[i].getAttribute("name") === match[1] ) {
- ret.push( results[i] );
- }
- }
-
- return ret.length === 0 ? null : ret;
- }
- },
-
- TAG: function( match, context ) {
- if ( typeof context.getElementsByTagName !== "undefined" ) {
- return context.getElementsByTagName( match[1] );
- }
- }
- },
- preFilter: {
- CLASS: function( match, curLoop, inplace, result, not, isXML ) {
- match = " " + match[1].replace( rBackslash, "" ) + " ";
-
- if ( isXML ) {
- return match;
- }
-
- for ( var i = 0, elem; (elem = curLoop[i]) != null; i++ ) {
- if ( elem ) {
- if ( not ^ (elem.className && (" " + elem.className + " ").replace(/[\t\n\r]/g, " ").indexOf(match) >= 0) ) {
- if ( !inplace ) {
- result.push( elem );
- }
-
- } else if ( inplace ) {
- curLoop[i] = false;
- }
- }
- }
-
- return false;
- },
-
- ID: function( match ) {
- return match[1].replace( rBackslash, "" );
- },
-
- TAG: function( match, curLoop ) {
- return match[1].replace( rBackslash, "" ).toLowerCase();
- },
-
- CHILD: function( match ) {
- if ( match[1] === "nth" ) {
- if ( !match[2] ) {
- Sizzle.error( match[0] );
- }
-
- match[2] = match[2].replace(/^\+|\s*/g, '');
-
- // parse equations like 'even', 'odd', '5', '2n', '3n+2', '4n-1', '-n+6'
- var test = /(-?)(\d*)(?:n([+\-]?\d*))?/.exec(
- match[2] === "even" && "2n" || match[2] === "odd" && "2n+1" ||
- !/\D/.test( match[2] ) && "0n+" + match[2] || match[2]);
-
- // calculate the numbers (first)n+(last) including if they are negative
- match[2] = (test[1] + (test[2] || 1)) - 0;
- match[3] = test[3] - 0;
- }
- else if ( match[2] ) {
- Sizzle.error( match[0] );
- }
-
- // TODO: Move to normal caching system
- match[0] = done++;
-
- return match;
- },
-
- ATTR: function( match, curLoop, inplace, result, not, isXML ) {
- var name = match[1] = match[1].replace( rBackslash, "" );
-
- if ( !isXML && Expr.attrMap[name] ) {
- match[1] = Expr.attrMap[name];
- }
-
- // Handle if an un-quoted value was used
- match[4] = ( match[4] || match[5] || "" ).replace( rBackslash, "" );
-
- if ( match[2] === "~=" ) {
- match[4] = " " + match[4] + " ";
- }
-
- return match;
- },
-
- PSEUDO: function( match, curLoop, inplace, result, not ) {
- if ( match[1] === "not" ) {
- // If we're dealing with a complex expression, or a simple one
- if ( ( chunker.exec(match[3]) || "" ).length > 1 || /^\w/.test(match[3]) ) {
- match[3] = Sizzle(match[3], null, null, curLoop);
-
- } else {
- var ret = Sizzle.filter(match[3], curLoop, inplace, true ^ not);
-
- if ( !inplace ) {
- result.push.apply( result, ret );
- }
-
- return false;
- }
-
- } else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) {
- return true;
- }
-
- return match;
- },
-
- POS: function( match ) {
- match.unshift( true );
-
- return match;
- }
- },
-
- filters: {
- enabled: function( elem ) {
- return elem.disabled === false && elem.type !== "hidden";
- },
-
- disabled: function( elem ) {
- return elem.disabled === true;
- },
-
- checked: function( elem ) {
- return elem.checked === true;
- },
-
- selected: function( elem ) {
- // Accessing this property makes selected-by-default
- // options in Safari work properly
- if ( elem.parentNode ) {
- elem.parentNode.selectedIndex;
- }
-
- return elem.selected === true;
- },
-
- parent: function( elem ) {
- return !!elem.firstChild;
- },
-
- empty: function( elem ) {
- return !elem.firstChild;
- },
-
- has: function( elem, i, match ) {
- return !!Sizzle( match[3], elem ).length;
- },
-
- header: function( elem ) {
- return (/h\d/i).test( elem.nodeName );
- },
-
- text: function( elem ) {
- var attr = elem.getAttribute( "type" ), type = elem.type;
- // IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc)
- // use getAttribute instead to test this case
- return elem.nodeName.toLowerCase() === "input" && "text" === type && ( attr === type || attr === null );
- },
-
- radio: function( elem ) {
- return elem.nodeName.toLowerCase() === "input" && "radio" === elem.type;
- },
-
- checkbox: function( elem ) {
- return elem.nodeName.toLowerCase() === "input" && "checkbox" === elem.type;
- },
-
- file: function( elem ) {
- return elem.nodeName.toLowerCase() === "input" && "file" === elem.type;
- },
-
- password: function( elem ) {
- return elem.nodeName.toLowerCase() === "input" && "password" === elem.type;
- },
-
- submit: function( elem ) {
- var name = elem.nodeName.toLowerCase();
- return (name === "input" || name === "button") && "submit" === elem.type;
- },
-
- image: function( elem ) {
- return elem.nodeName.toLowerCase() === "input" && "image" === elem.type;
- },
-
- reset: function( elem ) {
- var name = elem.nodeName.toLowerCase();
- return (name === "input" || name === "button") && "reset" === elem.type;
- },
-
- button: function( elem ) {
- var name = elem.nodeName.toLowerCase();
- return name === "input" && "button" === elem.type || name === "button";
- },
-
- input: function( elem ) {
- return (/input|select|textarea|button/i).test( elem.nodeName );
- },
-
- focus: function( elem ) {
- return elem === elem.ownerDocument.activeElement;
- }
- },
- setFilters: {
- first: function( elem, i ) {
- return i === 0;
- },
-
- last: function( elem, i, match, array ) {
- return i === array.length - 1;
- },
-
- even: function( elem, i ) {
- return i % 2 === 0;
- },
-
- odd: function( elem, i ) {
- return i % 2 === 1;
- },
-
- lt: function( elem, i, match ) {
- return i < match[3] - 0;
- },
-
- gt: function( elem, i, match ) {
- return i > match[3] - 0;
- },
-
- nth: function( elem, i, match ) {
- return match[3] - 0 === i;
- },
-
- eq: function( elem, i, match ) {
- return match[3] - 0 === i;
- }
- },
- filter: {
- PSEUDO: function( elem, match, i, array ) {
- var name = match[1],
- filter = Expr.filters[ name ];
-
- if ( filter ) {
- return filter( elem, i, match, array );
-
- } else if ( name === "contains" ) {
- return (elem.textContent || elem.innerText || Sizzle.getText([ elem ]) || "").indexOf(match[3]) >= 0;
-
- } else if ( name === "not" ) {
- var not = match[3];
-
- for ( var j = 0, l = not.length; j < l; j++ ) {
- if ( not[j] === elem ) {
- return false;
- }
- }
-
- return true;
-
- } else {
- Sizzle.error( name );
- }
- },
-
- CHILD: function( elem, match ) {
- var type = match[1],
- node = elem;
-
- switch ( type ) {
- case "only":
- case "first":
- while ( (node = node.previousSibling) ) {
- if ( node.nodeType === 1 ) {
- return false;
- }
- }
-
- if ( type === "first" ) {
- return true;
- }
-
- node = elem;
-
- case "last":
- while ( (node = node.nextSibling) ) {
- if ( node.nodeType === 1 ) {
- return false;
- }
- }
-
- return true;
-
- case "nth":
- var first = match[2],
- last = match[3];
-
- if ( first === 1 && last === 0 ) {
- return true;
- }
-
- var doneName = match[0],
- parent = elem.parentNode;
-
- if ( parent && (parent.sizcache !== doneName || !elem.nodeIndex) ) {
- var count = 0;
-
- for ( node = parent.firstChild; node; node = node.nextSibling ) {
- if ( node.nodeType === 1 ) {
- node.nodeIndex = ++count;
- }
- }
-
- parent.sizcache = doneName;
- }
-
- var diff = elem.nodeIndex - last;
-
- if ( first === 0 ) {
- return diff === 0;
-
- } else {
- return ( diff % first === 0 && diff / first >= 0 );
- }
- }
- },
-
- ID: function( elem, match ) {
- return elem.nodeType === 1 && elem.getAttribute("id") === match;
- },
-
- TAG: function( elem, match ) {
- return (match === "*" && elem.nodeType === 1) || elem.nodeName.toLowerCase() === match;
- },
-
- CLASS: function( elem, match ) {
- return (" " + (elem.className || elem.getAttribute("class")) + " ")
- .indexOf( match ) > -1;
- },
-
- ATTR: function( elem, match ) {
- var name = match[1],
- result = Expr.attrHandle[ name ] ?
- Expr.attrHandle[ name ]( elem ) :
- elem[ name ] != null ?
- elem[ name ] :
- elem.getAttribute( name ),
- value = result + "",
- type = match[2],
- check = match[4];
-
- return result == null ?
- type === "!=" :
- type === "=" ?
- value === check :
- type === "*=" ?
- value.indexOf(check) >= 0 :
- type === "~=" ?
- (" " + value + " ").indexOf(check) >= 0 :
- !check ?
- value && result !== false :
- type === "!=" ?
- value !== check :
- type === "^=" ?
- value.indexOf(check) === 0 :
- type === "$=" ?
- value.substr(value.length - check.length) === check :
- type === "|=" ?
- value === check || value.substr(0, check.length + 1) === check + "-" :
- false;
- },
-
- POS: function( elem, match, i, array ) {
- var name = match[2],
- filter = Expr.setFilters[ name ];
-
- if ( filter ) {
- return filter( elem, i, match, array );
- }
- }
- }
-};
-
-var origPOS = Expr.match.POS,
- fescape = function(all, num){
- return "\\" + (num - 0 + 1);
- };
-
-for ( var type in Expr.match ) {
- Expr.match[ type ] = new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) );
- Expr.leftMatch[ type ] = new RegExp( /(^(?:.|\r|\n)*?)/.source + Expr.match[ type ].source.replace(/\\(\d+)/g, fescape) );
-}
-
-var makeArray = function( array, results ) {
- array = Array.prototype.slice.call( array, 0 );
-
- if ( results ) {
- results.push.apply( results, array );
- return results;
- }
-
- return array;
-};
-
-// Perform a simple check to determine if the browser is capable of
-// converting a NodeList to an array using builtin methods.
-// Also verifies that the returned array holds DOM nodes
-// (which is not the case in the Blackberry browser)
-try {
- Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;
-
-// Provide a fallback method if it does not work
-} catch( e ) {
- makeArray = function( array, results ) {
- var i = 0,
- ret = results || [];
-
- if ( toString.call(array) === "[object Array]" ) {
- Array.prototype.push.apply( ret, array );
-
- } else {
- if ( typeof array.length === "number" ) {
- for ( var l = array.length; i < l; i++ ) {
- ret.push( array[i] );
- }
-
- } else {
- for ( ; array[i]; i++ ) {
- ret.push( array[i] );
- }
- }
- }
-
- return ret;
- };
-}
-
-var sortOrder, siblingCheck;
-
-if ( document.documentElement.compareDocumentPosition ) {
- sortOrder = function( a, b ) {
- if ( a === b ) {
- hasDuplicate = true;
- return 0;
- }
-
- if ( !a.compareDocumentPosition || !b.compareDocumentPosition ) {
- return a.compareDocumentPosition ? -1 : 1;
- }
-
- return a.compareDocumentPosition(b) & 4 ? -1 : 1;
- };
-
-} else {
- sortOrder = function( a, b ) {
- // The nodes are identical, we can exit early
- if ( a === b ) {
- hasDuplicate = true;
- return 0;
-
- // Fallback to using sourceIndex (in IE) if it's available on both nodes
- } else if ( a.sourceIndex && b.sourceIndex ) {
- return a.sourceIndex - b.sourceIndex;
- }
-
- var al, bl,
- ap = [],
- bp = [],
- aup = a.parentNode,
- bup = b.parentNode,
- cur = aup;
-
- // If the nodes are siblings (or identical) we can do a quick check
- if ( aup === bup ) {
- return siblingCheck( a, b );
-
- // If no parents were found then the nodes are disconnected
- } else if ( !aup ) {
- return -1;
-
- } else if ( !bup ) {
- return 1;
- }
-
- // Otherwise they're somewhere else in the tree so we need
- // to build up a full list of the parentNodes for comparison
- while ( cur ) {
- ap.unshift( cur );
- cur = cur.parentNode;
- }
-
- cur = bup;
-
- while ( cur ) {
- bp.unshift( cur );
- cur = cur.parentNode;
- }
-
- al = ap.length;
- bl = bp.length;
-
- // Start walking down the tree looking for a discrepancy
- for ( var i = 0; i < al && i < bl; i++ ) {
- if ( ap[i] !== bp[i] ) {
- return siblingCheck( ap[i], bp[i] );
- }
- }
-
- // We ended someplace up the tree so do a sibling check
- return i === al ?
- siblingCheck( a, bp[i], -1 ) :
- siblingCheck( ap[i], b, 1 );
- };
-
- siblingCheck = function( a, b, ret ) {
- if ( a === b ) {
- return ret;
- }
-
- var cur = a.nextSibling;
-
- while ( cur ) {
- if ( cur === b ) {
- return -1;
- }
-
- cur = cur.nextSibling;
- }
-
- return 1;
- };
-}
-
-// Utility function for retreiving the text value of an array of DOM nodes
-Sizzle.getText = function( elems ) {
- var ret = "", elem;
-
- for ( var i = 0; elems[i]; i++ ) {
- elem = elems[i];
-
- // Get the text from text nodes and CDATA nodes
- if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
- ret += elem.nodeValue;
-
- // Traverse everything else, except comment nodes
- } else if ( elem.nodeType !== 8 ) {
- ret += Sizzle.getText( elem.childNodes );
- }
- }
-
- return ret;
-};
-
-// Check to see if the browser returns elements by name when
-// querying by getElementById (and provide a workaround)
-(function(){
- // We're going to inject a fake input element with a specified name
- var form = document.createElement("div"),
- id = "script" + (new Date()).getTime(),
- root = document.documentElement;
-
- form.innerHTML = "<a name='" + id + "'/>";
-
- // Inject it into the root element, check its status, and remove it quickly
- root.insertBefore( form, root.firstChild );
-
- // The workaround has to do additional checks after a getElementById
- // Which slows things down for other browsers (hence the branching)
- if ( document.getElementById( id ) ) {
- Expr.find.ID = function( match, context, isXML ) {
- if ( typeof context.getElementById !== "undefined" && !isXML ) {
- var m = context.getElementById(match[1]);
-
- return m ?
- m.id === match[1] || typeof m.getAttributeNode !== "undefined" && m.getAttributeNode("id").nodeValue === match[1] ?
- [m] :
- undefined :
- [];
- }
- };
-
- Expr.filter.ID = function( elem, match ) {
- var node = typeof elem.getAttributeNode !== "undefined" && elem.getAttributeNode("id");
-
- return elem.nodeType === 1 && node && node.nodeValue === match;
- };
- }
-
- root.removeChild( form );
-
- // release memory in IE
- root = form = null;
-})();
-
-(function(){
- // Check to see if the browser returns only elements
- // when doing getElementsByTagName("*")
-
- // Create a fake element
- var div = document.createElement("div");
- div.appendChild( document.createComment("") );
-
- // Make sure no comments are found
- if ( div.getElementsByTagName("*").length > 0 ) {
- Expr.find.TAG = function( match, context ) {
- var results = context.getElementsByTagName( match[1] );
-
- // Filter out possible comments
- if ( match[1] === "*" ) {
- var tmp = [];
-
- for ( var i = 0; results[i]; i++ ) {
- if ( results[i].nodeType === 1 ) {
- tmp.push( results[i] );
- }
- }
-
- results = tmp;
- }
-
- return results;
- };
- }
-
- // Check to see if an attribute returns normalized href attributes
- div.innerHTML = "<a href='#'></a>";
-
- if ( div.firstChild && typeof div.firstChild.getAttribute !== "undefined" &&
- div.firstChild.getAttribute("href") !== "#" ) {
-
- Expr.attrHandle.href = function( elem ) {
- return elem.getAttribute( "href", 2 );
- };
- }
-
- // release memory in IE
- div = null;
-})();
-
-if ( document.querySelectorAll ) {
- (function(){
- var oldSizzle = Sizzle,
- div = document.createElement("div"),
- id = "__sizzle__";
-
- div.innerHTML = "<p class='TEST'></p>";
-
- // Safari can't handle uppercase or unicode characters when
- // in quirks mode.
- if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
- return;
- }
-
- Sizzle = function( query, context, extra, seed ) {
- context = context || document;
-
- // Only use querySelectorAll on non-XML documents
- // (ID selectors don't work in non-HTML documents)
- if ( !seed && !Sizzle.isXML(context) ) {
- // See if we find a selector to speed up
- var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query );
-
- if ( match && (context.nodeType === 1 || context.nodeType === 9) ) {
- // Speed-up: Sizzle("TAG")
- if ( match[1] ) {
- return makeArray( context.getElementsByTagName( query ), extra );
-
- // Speed-up: Sizzle(".CLASS")
- } else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) {
- return makeArray( context.getElementsByClassName( match[2] ), extra );
- }
- }
-
- if ( context.nodeType === 9 ) {
- // Speed-up: Sizzle("body")
- // The body element only exists once, optimize finding it
- if ( query === "body" && context.body ) {
- return makeArray( [ context.body ], extra );
-
- // Speed-up: Sizzle("#ID")
- } else if ( match && match[3] ) {
- var elem = context.getElementById( match[3] );
-
- // Check parentNode to catch when Blackberry 4.6 returns
- // nodes that are no longer in the document #6963
- if ( elem && elem.parentNode ) {
- // Handle the case where IE and Opera return items
- // by name instead of ID
- if ( elem.id === match[3] ) {
- return makeArray( [ elem ], extra );
- }
-
- } else {
- return makeArray( [], extra );
- }
- }
-
- try {
- return makeArray( context.querySelectorAll(query), extra );
- } catch(qsaError) {}
-
- // qSA works strangely on Element-rooted queries
- // We can work around this by specifying an extra ID on the root
- // and working up from there (Thanks to Andrew Dupont for the technique)
- // IE 8 doesn't work on object elements
- } else if ( context.nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
- var oldContext = context,
- old = context.getAttribute( "id" ),
- nid = old || id,
- hasParent = context.parentNode,
- relativeHierarchySelector = /^\s*[+~]/.test( query );
-
- if ( !old ) {
- context.setAttribute( "id", nid );
- } else {
- nid = nid.replace( /'/g, "\\$&" );
- }
- if ( relativeHierarchySelector && hasParent ) {
- context = context.parentNode;
- }
-
- try {
- if ( !relativeHierarchySelector || hasParent ) {
- return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );
- }
-
- } catch(pseudoError) {
- } finally {
- if ( !old ) {
- oldContext.removeAttribute( "id" );
- }
- }
- }
- }
-
- return oldSizzle(query, context, extra, seed);
- };
-
- for ( var prop in oldSizzle ) {
- Sizzle[ prop ] = oldSizzle[ prop ];
- }
-
- // release memory in IE
- div = null;
- })();
-}
-
-(function(){
- var html = document.documentElement,
- matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector;
-
- if ( matches ) {
- // Check to see if it's possible to do matchesSelector
- // on a disconnected node (IE 9 fails this)
- var disconnectedMatch = !matches.call( document.createElement( "div" ), "div" ),
- pseudoWorks = false;
-
- try {
- // This should fail with an exception
- // Gecko does not error, returns false instead
- matches.call( document.documentElement, "[test!='']:sizzle" );
-
- } catch( pseudoError ) {
- pseudoWorks = true;
- }
-
- Sizzle.matchesSelector = function( node, expr ) {
- // Make sure that attribute selectors are quoted
- expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']");
-
- if ( !Sizzle.isXML( node ) ) {
- try {
- if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) {
- var ret = matches.call( node, expr );
-
- // IE 9's matchesSelector returns false on disconnected nodes
- if ( ret || !disconnectedMatch ||
- // As well, disconnected nodes are said to be in a document
- // fragment in IE 9, so check for that
- node.document && node.document.nodeType !== 11 ) {
- return ret;
- }
- }
- } catch(e) {}
- }
-
- return Sizzle(expr, null, null, [node]).length > 0;
- };
- }
-})();
-
-(function(){
- var div = document.createElement("div");
-
- div.innerHTML = "<div class='test e'></div><div class='test'></div>";
-
- // Opera can't find a second classname (in 9.6)
- // Also, make sure that getElementsByClassName actually exists
- if ( !div.getElementsByClassName || div.getElementsByClassName("e").length === 0 ) {
- return;
- }
-
- // Safari caches class attributes, doesn't catch changes (in 3.2)
- div.lastChild.className = "e";
-
- if ( div.getElementsByClassName("e").length === 1 ) {
- return;
- }
-
- Expr.order.splice(1, 0, "CLASS");
- Expr.find.CLASS = function( match, context, isXML ) {
- if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) {
- return context.getElementsByClassName(match[1]);
- }
- };
-
- // release memory in IE
- div = null;
-})();
-
-function dirNodeCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) {
- for ( var i = 0, l = checkSet.length; i < l; i++ ) {
- var elem = checkSet[i];
-
- if ( elem ) {
- var match = false;
-
- elem = elem[dir];
-
- while ( elem ) {
- if ( elem.sizcache === doneName ) {
- match = checkSet[elem.sizset];
- break;
- }
-
- if ( elem.nodeType === 1 && !isXML ){
- elem.sizcache = doneName;
- elem.sizset = i;
- }
-
- if ( elem.nodeName.toLowerCase() === cur ) {
- match = elem;
- break;
- }
-
- elem = elem[dir];
- }
-
- checkSet[i] = match;
- }
- }
-}
-
-function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) {
- for ( var i = 0, l = checkSet.length; i < l; i++ ) {
- var elem = checkSet[i];
-
- if ( elem ) {
- var match = false;
-
- elem = elem[dir];
-
- while ( elem ) {
- if ( elem.sizcache === doneName ) {
- match = checkSet[elem.sizset];
- break;
- }
-
- if ( elem.nodeType === 1 ) {
- if ( !isXML ) {
- elem.sizcache = doneName;
- elem.sizset = i;
- }
-
- if ( typeof cur !== "string" ) {
- if ( elem === cur ) {
- match = true;
- break;
- }
-
- } else if ( Sizzle.filter( cur, [elem] ).length > 0 ) {
- match = elem;
- break;
- }
- }
-
- elem = elem[dir];
- }
-
- checkSet[i] = match;
- }
- }
-}
-
-if ( document.documentElement.contains ) {
- Sizzle.contains = function( a, b ) {
- return a !== b && (a.contains ? a.contains(b) : true);
- };
-
-} else if ( document.documentElement.compareDocumentPosition ) {
- Sizzle.contains = function( a, b ) {
- return !!(a.compareDocumentPosition(b) & 16);
- };
-
-} else {
- Sizzle.contains = function() {
- return false;
- };
-}
-
-Sizzle.isXML = function( elem ) {
- // documentElement is verified for cases where it doesn't yet exist
- // (such as loading iframes in IE - #4833)
- var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement;
-
- return documentElement ? documentElement.nodeName !== "HTML" : false;
-};
-
-var posProcess = function( selector, context ) {
- var match,
- tmpSet = [],
- later = "",
- root = context.nodeType ? [context] : context;
-
- // Position selectors must be done after the filter
- // And so must :not(positional) so we move all PSEUDOs to the end
- while ( (match = Expr.match.PSEUDO.exec( selector )) ) {
- later += match[0];
- selector = selector.replace( Expr.match.PSEUDO, "" );
- }
-
- selector = Expr.relative[selector] ? selector + "*" : selector;
-
- for ( var i = 0, l = root.length; i < l; i++ ) {
- Sizzle( selector, root[i], tmpSet );
- }
-
- return Sizzle.filter( later, tmpSet );
-};
-
-// EXPOSE
-jQuery.find = Sizzle;
-jQuery.expr = Sizzle.selectors;
-jQuery.expr[":"] = jQuery.expr.filters;
-jQuery.unique = Sizzle.uniqueSort;
-jQuery.text = Sizzle.getText;
-jQuery.isXMLDoc = Sizzle.isXML;
-jQuery.contains = Sizzle.contains;
-
-
-})();
-
-
-var runtil = /Until$/,
- rparentsprev = /^(?:parents|prevUntil|prevAll)/,
- // Note: This RegExp should be improved, or likely pulled from Sizzle
- rmultiselector = /,/,
- isSimple = /^.[^:#\[\.,]*$/,
- slice = Array.prototype.slice,
- POS = jQuery.expr.match.POS,
- // methods guaranteed to produce a unique set when starting from a unique set
- guaranteedUnique = {
- children: true,
- contents: true,
- next: true,
- prev: true
- };
-
-jQuery.fn.extend({
- find: function( selector ) {
- var self = this,
- i, l;
-
- if ( typeof selector !== "string" ) {
- return jQuery( selector ).filter(function() {
- for ( i = 0, l = self.length; i < l; i++ ) {
- if ( jQuery.contains( self[ i ], this ) ) {
- return true;
- }
- }
- });
- }
-
- var ret = this.pushStack( "", "find", selector ),
- length, n, r;
-
- for ( i = 0, l = this.length; i < l; i++ ) {
- length = ret.length;
- jQuery.find( selector, this[i], ret );
-
- if ( i > 0 ) {
- // Make sure that the results are unique
- for ( n = length; n < ret.length; n++ ) {
- for ( r = 0; r < length; r++ ) {
- if ( ret[r] === ret[n] ) {
- ret.splice(n--, 1);
- break;
- }
- }
- }
- }
- }
-
- return ret;
- },
-
- has: function( target ) {
- var targets = jQuery( target );
- return this.filter(function() {
- for ( var i = 0, l = targets.length; i < l; i++ ) {
- if ( jQuery.contains( this, targets[i] ) ) {
- return true;
- }
- }
- });
- },
-
- not: function( selector ) {
- return this.pushStack( winnow(this, selector, false), "not", selector);
- },
-
- filter: function( selector ) {
- return this.pushStack( winnow(this, selector, true), "filter", selector );
- },
-
- is: function( selector ) {
- return !!selector && ( typeof selector === "string" ?
- jQuery.filter( selector, this ).length > 0 :
- this.filter( selector ).length > 0 );
- },
-
- closest: function( selectors, context ) {
- var ret = [], i, l, cur = this[0];
-
- // Array
- if ( jQuery.isArray( selectors ) ) {
- var match, selector,
- matches = {},
- level = 1;
-
- if ( cur && selectors.length ) {
- for ( i = 0, l = selectors.length; i < l; i++ ) {
- selector = selectors[i];
-
- if ( !matches[ selector ] ) {
- matches[ selector ] = POS.test( selector ) ?
- jQuery( selector, context || this.context ) :
- selector;
- }
- }
-
- while ( cur && cur.ownerDocument && cur !== context ) {
- for ( selector in matches ) {
- match = matches[ selector ];
-
- if ( match.jquery ? match.index( cur ) > -1 : jQuery( cur ).is( match ) ) {
- ret.push({ selector: selector, elem: cur, level: level });
- }
- }
-
- cur = cur.parentNode;
- level++;
- }
- }
-
- return ret;
- }
-
- // String
- var pos = POS.test( selectors ) || typeof selectors !== "string" ?
- jQuery( selectors, context || this.context ) :
- 0;
-
- for ( i = 0, l = this.length; i < l; i++ ) {
- cur = this[i];
-
- while ( cur ) {
- if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
- ret.push( cur );
- break;
-
- } else {
- cur = cur.parentNode;
- if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {
- break;
- }
- }
- }
- }
-
- ret = ret.length > 1 ? jQuery.unique( ret ) : ret;
-
- return this.pushStack( ret, "closest", selectors );
- },
-
- // Determine the position of an element within
- // the matched set of elements
- index: function( elem ) {
-
- // No argument, return index in parent
- if ( !elem ) {
- return ( this[0] && this[0].parentNode ) ? this.prevAll().length : -1;
- }
-
- // index in selector
- if ( typeof elem === "string" ) {
- return jQuery.inArray( this[0], jQuery( elem ) );
- }
-
- // Locate the position of the desired element
- return jQuery.inArray(
- // If it receives a jQuery object, the first element is used
- elem.jquery ? elem[0] : elem, this );
- },
-
- add: function( selector, context ) {
- var set = typeof selector === "string" ?
- jQuery( selector, context ) :
- jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ),
- all = jQuery.merge( this.get(), set );
-
- return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ?
- all :
- jQuery.unique( all ) );
- },
-
- andSelf: function() {
- return this.add( this.prevObject );
- }
-});
-
-// A painfully simple check to see if an element is disconnected
-// from a document (should be improved, where feasible).
-function isDisconnected( node ) {
- return !node || !node.parentNode || node.parentNode.nodeType === 11;
-}
-
-jQuery.each({
- parent: function( elem ) {
- var parent = elem.parentNode;
- return parent && parent.nodeType !== 11 ? parent : null;
- },
- parents: function( elem ) {
- return jQuery.dir( elem, "parentNode" );
- },
- parentsUntil: function( elem, i, until ) {
- return jQuery.dir( elem, "parentNode", until );
- },
- next: function( elem ) {
- return jQuery.nth( elem, 2, "nextSibling" );
- },
- prev: function( elem ) {
- return jQuery.nth( elem, 2, "previousSibling" );
- },
- nextAll: function( elem ) {
- return jQuery.dir( elem, "nextSibling" );
- },
- prevAll: function( elem ) {
- return jQuery.dir( elem, "previousSibling" );
- },
- nextUntil: function( elem, i, until ) {
- return jQuery.dir( elem, "nextSibling", until );
- },
- prevUntil: function( elem, i, until ) {
- return jQuery.dir( elem, "previousSibling", until );
- },
- siblings: function( elem ) {
- return jQuery.sibling( elem.parentNode.firstChild, elem );
- },
- children: function( elem ) {
- return jQuery.sibling( elem.firstChild );
- },
- contents: function( elem ) {
- return jQuery.nodeName( elem, "iframe" ) ?
- elem.contentDocument || elem.contentWindow.document :
- jQuery.makeArray( elem.childNodes );
- }
-}, function( name, fn ) {
- jQuery.fn[ name ] = function( until, selector ) {
- var ret = jQuery.map( this, fn, until ),
- // The variable 'args' was introduced in
- // https://github.com/jquery/jquery/commit/52a0238
- // to work around a bug in Chrome 10 (Dev) and should be removed when the bug is fixed.
- // http://code.google.com/p/v8/issues/detail?id=1050
- args = slice.call(arguments);
-
- if ( !runtil.test( name ) ) {
- selector = until;
- }
-
- if ( selector && typeof selector === "string" ) {
- ret = jQuery.filter( selector, ret );
- }
-
- ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret;
-
- if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) {
- ret = ret.reverse();
- }
-
- return this.pushStack( ret, name, args.join(",") );
- };
-});
-
-jQuery.extend({
- filter: function( expr, elems, not ) {
- if ( not ) {
- expr = ":not(" + expr + ")";
- }
-
- return elems.length === 1 ?
- jQuery.find.matchesSelector(elems[0], expr) ? [ elems[0] ] : [] :
- jQuery.find.matches(expr, elems);
- },
-
- dir: function( elem, dir, until ) {
- var matched = [],
- cur = elem[ dir ];
-
- while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
- if ( cur.nodeType === 1 ) {
- matched.push( cur );
- }
- cur = cur[dir];
- }
- return matched;
- },
-
- nth: function( cur, result, dir, elem ) {
- result = result || 1;
- var num = 0;
-
- for ( ; cur; cur = cur[dir] ) {
- if ( cur.nodeType === 1 && ++num === result ) {
- break;
- }
- }
-
- return cur;
- },
-
- sibling: function( n, elem ) {
- var r = [];
-
- for ( ; n; n = n.nextSibling ) {
- if ( n.nodeType === 1 && n !== elem ) {
- r.push( n );
- }
- }
-
- return r;
- }
-});
-
-// Implement the identical functionality for filter and not
-function winnow( elements, qualifier, keep ) {
-
- // Can't pass null or undefined to indexOf in Firefox 4
- // Set to 0 to skip string check
- qualifier = qualifier || 0;
-
- if ( jQuery.isFunction( qualifier ) ) {
- return jQuery.grep(elements, function( elem, i ) {
- var retVal = !!qualifier.call( elem, i, elem );
- return retVal === keep;
- });
-
- } else if ( qualifier.nodeType ) {
- return jQuery.grep(elements, function( elem, i ) {
- return (elem === qualifier) === keep;
- });
-
- } else if ( typeof qualifier === "string" ) {
- var filtered = jQuery.grep(elements, function( elem ) {
- return elem.nodeType === 1;
- });
-
- if ( isSimple.test( qualifier ) ) {
- return jQuery.filter(qualifier, filtered, !keep);
- } else {
- qualifier = jQuery.filter( qualifier, filtered );
- }
- }
-
- return jQuery.grep(elements, function( elem, i ) {
- return (jQuery.inArray( elem, qualifier ) >= 0) === keep;
- });
-}
-
-
-
-
-var rinlinejQuery = / jQuery\d+="(?:\d+|null)"/g,
- rleadingWhitespace = /^\s+/,
- rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,
- rtagName = /<([\w:]+)/,
- rtbody = /<tbody/i,
- rhtml = /<|&#?\w+;/,
- rnocache = /<(?:script|object|embed|option|style)/i,
- // checked="checked" or checked
- rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
- rscriptType = /\/(java|ecma)script/i,
- rcleanScript = /^\s*<!(?:\[CDATA\[|\-\-)/,
- wrapMap = {
- option: [ 1, "<select multiple='multiple'>", "</select>" ],
- legend: [ 1, "<fieldset>", "</fieldset>" ],
- thead: [ 1, "<table>", "</table>" ],
- tr: [ 2, "<table><tbody>", "</tbody></table>" ],
- td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
- col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
- area: [ 1, "<map>", "</map>" ],
- _default: [ 0, "", "" ]
- };
-
-wrapMap.optgroup = wrapMap.option;
-wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
-wrapMap.th = wrapMap.td;
-
-// IE can't serialize <link> and <script> tags normally
-if ( !jQuery.support.htmlSerialize ) {
- wrapMap._default = [ 1, "div<div>", "</div>" ];
-}
-
-jQuery.fn.extend({
- text: function( text ) {
- if ( jQuery.isFunction(text) ) {
- return this.each(function(i) {
- var self = jQuery( this );
-
- self.text( text.call(this, i, self.text()) );
- });
- }
-
- if ( typeof text !== "object" && text !== undefined ) {
- return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
- }
-
- return jQuery.text( this );
- },
-
- wrapAll: function( html ) {
- if ( jQuery.isFunction( html ) ) {
- return this.each(function(i) {
- jQuery(this).wrapAll( html.call(this, i) );
- });
- }
-
- if ( this[0] ) {
- // The elements to wrap the target around
- var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true);
-
- if ( this[0].parentNode ) {
- wrap.insertBefore( this[0] );
- }
-
- wrap.map(function() {
- var elem = this;
-
- while ( elem.firstChild && elem.firstChild.nodeType === 1 ) {
- elem = elem.firstChild;
- }
-
- return elem;
- }).append( this );
- }
-
- return this;
- },
-
- wrapInner: function( html ) {
- if ( jQuery.isFunction( html ) ) {
- return this.each(function(i) {
- jQuery(this).wrapInner( html.call(this, i) );
- });
- }
-
- return this.each(function() {
- var self = jQuery( this ),
- contents = self.contents();
-
- if ( contents.length ) {
- contents.wrapAll( html );
-
- } else {
- self.append( html );
- }
- });
- },
-
- wrap: function( html ) {
- return this.each(function() {
- jQuery( this ).wrapAll( html );
- });
- },
-
- unwrap: function() {
- return this.parent().each(function() {
- if ( !jQuery.nodeName( this, "body" ) ) {
- jQuery( this ).replaceWith( this.childNodes );
- }
- }).end();
- },
-
- append: function() {
- return this.domManip(arguments, true, function( elem ) {
- if ( this.nodeType === 1 ) {
- this.appendChild( elem );
- }
- });
- },
-
- prepend: function() {
- return this.domManip(arguments, true, function( elem ) {
- if ( this.nodeType === 1 ) {
- this.insertBefore( elem, this.firstChild );
- }
- });
- },
-
- before: function() {
- if ( this[0] && this[0].parentNode ) {
- return this.domManip(arguments, false, function( elem ) {
- this.parentNode.insertBefore( elem, this );
- });
- } else if ( arguments.length ) {
- var set = jQuery(arguments[0]);
- set.push.apply( set, this.toArray() );
- return this.pushStack( set, "before", arguments );
- }
- },
-
- after: function() {
- if ( this[0] && this[0].parentNode ) {
- return this.domManip(arguments, false, function( elem ) {
- this.parentNode.insertBefore( elem, this.nextSibling );
- });
- } else if ( arguments.length ) {
- var set = this.pushStack( this, "after", arguments );
- set.push.apply( set, jQuery(arguments[0]).toArray() );
- return set;
- }
- },
-
- // keepData is for internal use only--do not document
- remove: function( selector, keepData ) {
- for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
- if ( !selector || jQuery.filter( selector, [ elem ] ).length ) {
- if ( !keepData && elem.nodeType === 1 ) {
- jQuery.cleanData( elem.getElementsByTagName("*") );
- jQuery.cleanData( [ elem ] );
- }
-
- if ( elem.parentNode ) {
- elem.parentNode.removeChild( elem );
- }
- }
- }
-
- return this;
- },
-
- empty: function() {
- for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
- // Remove element nodes and prevent memory leaks
- if ( elem.nodeType === 1 ) {
- jQuery.cleanData( elem.getElementsByTagName("*") );
- }
-
- // Remove any remaining nodes
- while ( elem.firstChild ) {
- elem.removeChild( elem.firstChild );
- }
- }
-
- return this;
- },
-
- clone: function( dataAndEvents, deepDataAndEvents ) {
- dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
- deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;
-
- return this.map( function () {
- return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
- });
- },
-
- html: function( value ) {
- if ( value === undefined ) {
- return this[0] && this[0].nodeType === 1 ?
- this[0].innerHTML.replace(rinlinejQuery, "") :
- null;
-
- // See if we can take a shortcut and just use innerHTML
- } else if ( typeof value === "string" && !rnocache.test( value ) &&
- (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
- !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {
-
- value = value.replace(rxhtmlTag, "<$1></$2>");
-
- try {
- for ( var i = 0, l = this.length; i < l; i++ ) {
- // Remove element nodes and prevent memory leaks
- if ( this[i].nodeType === 1 ) {
- jQuery.cleanData( this[i].getElementsByTagName("*") );
- this[i].innerHTML = value;
- }
- }
-
- // If using innerHTML throws an exception, use the fallback method
- } catch(e) {
- this.empty().append( value );
- }
-
- } else if ( jQuery.isFunction( value ) ) {
- this.each(function(i){
- var self = jQuery( this );
-
- self.html( value.call(this, i, self.html()) );
- });
-
- } else {
- this.empty().append( value );
- }
-
- return this;
- },
-
- replaceWith: function( value ) {
- if ( this[0] && this[0].parentNode ) {
- // Make sure that the elements are removed from the DOM before they are inserted
- // this can help fix replacing a parent with child elements
- if ( jQuery.isFunction( value ) ) {
- return this.each(function(i) {
- var self = jQuery(this), old = self.html();
- self.replaceWith( value.call( this, i, old ) );
- });
- }
-
- if ( typeof value !== "string" ) {
- value = jQuery( value ).detach();
- }
-
- return this.each(function() {
- var next = this.nextSibling,
- parent = this.parentNode;
-
- jQuery( this ).remove();
-
- if ( next ) {
- jQuery(next).before( value );
- } else {
- jQuery(parent).append( value );
- }
- });
- } else {
- return this.length ?
- this.pushStack( jQuery(jQuery.isFunction(value) ? value() : value), "replaceWith", value ) :
- this;
- }
- },
-
- detach: function( selector ) {
- return this.remove( selector, true );
- },
-
- domManip: function( args, table, callback ) {
- var results, first, fragment, parent,
- value = args[0],
- scripts = [];
-
- // We can't cloneNode fragments that contain checked, in WebKit
- if ( !jQuery.support.checkClone && arguments.length === 3 && typeof value === "string" && rchecked.test( value ) ) {
- return this.each(function() {
- jQuery(this).domManip( args, table, callback, true );
- });
- }
-
- if ( jQuery.isFunction(value) ) {
- return this.each(function(i) {
- var self = jQuery(this);
- args[0] = value.call(this, i, table ? self.html() : undefined);
- self.domManip( args, table, callback );
- });
- }
-
- if ( this[0] ) {
- parent = value && value.parentNode;
-
- // If we're in a fragment, just use that instead of building a new one
- if ( jQuery.support.parentNode && parent && parent.nodeType === 11 && parent.childNodes.length === this.length ) {
- results = { fragment: parent };
-
- } else {
- results = jQuery.buildFragment( args, this, scripts );
- }
-
- fragment = results.fragment;
-
- if ( fragment.childNodes.length === 1 ) {
- first = fragment = fragment.firstChild;
- } else {
- first = fragment.firstChild;
- }
-
- if ( first ) {
- table = table && jQuery.nodeName( first, "tr" );
-
- for ( var i = 0, l = this.length, lastIndex = l - 1; i < l; i++ ) {
- callback.call(
- table ?
- root(this[i], first) :
- this[i],
- // Make sure that we do not leak memory by inadvertently discarding
- // the original fragment (which might have attached data) instead of
- // using it; in addition, use the original fragment object for the last
- // item instead of first because it can end up being emptied incorrectly
- // in certain situations (Bug #8070).
- // Fragments from the fragment cache must always be cloned and never used
- // in place.
- results.cacheable || (l > 1 && i < lastIndex) ?
- jQuery.clone( fragment, true, true ) :
- fragment
- );
- }
- }
-
- if ( scripts.length ) {
- jQuery.each( scripts, evalScript );
- }
- }
-
- return this;
- }
-});
-
-function root( elem, cur ) {
- return jQuery.nodeName(elem, "table") ?
- (elem.getElementsByTagName("tbody")[0] ||
- elem.appendChild(elem.ownerDocument.createElement("tbody"))) :
- elem;
-}
-
-function cloneCopyEvent( src, dest ) {
-
- if ( dest.nodeType !== 1 || !jQuery.hasData( src ) ) {
- return;
- }
-
- var internalKey = jQuery.expando,
- oldData = jQuery.data( src ),
- curData = jQuery.data( dest, oldData );
-
- // Switch to use the internal data object, if it exists, for the next
- // stage of data copying
- if ( (oldData = oldData[ internalKey ]) ) {
- var events = oldData.events;
- curData = curData[ internalKey ] = jQuery.extend({}, oldData);
-
- if ( events ) {
- delete curData.handle;
- curData.events = {};
-
- for ( var type in events ) {
- for ( var i = 0, l = events[ type ].length; i < l; i++ ) {
- jQuery.event.add( dest, type + ( events[ type ][ i ].namespace ? "." : "" ) + events[ type ][ i ].namespace, events[ type ][ i ], events[ type ][ i ].data );
- }
- }
- }
- }
-}
-
-function cloneFixAttributes( src, dest ) {
- var nodeName;
-
- // We do not need to do anything for non-Elements
- if ( dest.nodeType !== 1 ) {
- return;
- }
-
- // clearAttributes removes the attributes, which we don't want,
- // but also removes the attachEvent events, which we *do* want
- if ( dest.clearAttributes ) {
- dest.clearAttributes();
- }
-
- // mergeAttributes, in contrast, only merges back on the
- // original attributes, not the events
- if ( dest.mergeAttributes ) {
- dest.mergeAttributes( src );
- }
-
- nodeName = dest.nodeName.toLowerCase();
-
- // IE6-8 fail to clone children inside object elements that use
- // the proprietary classid attribute value (rather than the type
- // attribute) to identify the type of content to display
- if ( nodeName === "object" ) {
- dest.outerHTML = src.outerHTML;
-
- } else if ( nodeName === "input" && (src.type === "checkbox" || src.type === "radio") ) {
- // IE6-8 fails to persist the checked state of a cloned checkbox
- // or radio button. Worse, IE6-7 fail to give the cloned element
- // a checked appearance if the defaultChecked value isn't also set
- if ( src.checked ) {
- dest.defaultChecked = dest.checked = src.checked;
- }
-
- // IE6-7 get confused and end up setting the value of a cloned
- // checkbox/radio button to an empty string instead of "on"
- if ( dest.value !== src.value ) {
- dest.value = src.value;
- }
-
- // IE6-8 fails to return the selected option to the default selected
- // state when cloning options
- } else if ( nodeName === "option" ) {
- dest.selected = src.defaultSelected;
-
- // IE6-8 fails to set the defaultValue to the correct value when
- // cloning other types of input fields
- } else if ( nodeName === "input" || nodeName === "textarea" ) {
- dest.defaultValue = src.defaultValue;
- }
-
- // Event data gets referenced instead of copied if the expando
- // gets copied too
- dest.removeAttribute( jQuery.expando );
-}
-
-jQuery.buildFragment = function( args, nodes, scripts ) {
- var fragment, cacheable, cacheresults, doc;
-
- // nodes may contain either an explicit document object,
- // a jQuery collection or context object.
- // If nodes[0] contains a valid object to assign to doc
- if ( nodes && nodes[0] ) {
- doc = nodes[0].ownerDocument || nodes[0];
- }
-
- // Ensure that an attr object doesn't incorrectly stand in as a document object
- // Chrome and Firefox seem to allow this to occur and will throw exception
- // Fixes #8950
- if ( !doc.createDocumentFragment ) {
- doc = document;
- }
-
- // Only cache "small" (1/2 KB) HTML strings that are associated with the main document
- // Cloning options loses the selected state, so don't cache them
- // IE 6 doesn't like it when you put <object> or <embed> elements in a fragment
- // Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache
- if ( args.length === 1 && typeof args[0] === "string" && args[0].length < 512 && doc === document &&
- args[0].charAt(0) === "<" && !rnocache.test( args[0] ) && (jQuery.support.checkClone || !rchecked.test( args[0] )) ) {
-
- cacheable = true;
-
- cacheresults = jQuery.fragments[ args[0] ];
- if ( cacheresults && cacheresults !== 1 ) {
- fragment = cacheresults;
- }
- }
-
- if ( !fragment ) {
- fragment = doc.createDocumentFragment();
- jQuery.clean( args, doc, fragment, scripts );
- }
-
- if ( cacheable ) {
- jQuery.fragments[ args[0] ] = cacheresults ? fragment : 1;
- }
-
- return { fragment: fragment, cacheable: cacheable };
-};
-
-jQuery.fragments = {};
-
-jQuery.each({
- appendTo: "append",
- prependTo: "prepend",
- insertBefore: "before",
- insertAfter: "after",
- replaceAll: "replaceWith"
-}, function( name, original ) {
- jQuery.fn[ name ] = function( selector ) {
- var ret = [],
- insert = jQuery( selector ),
- parent = this.length === 1 && this[0].parentNode;
-
- if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
- insert[ original ]( this[0] );
- return this;
-
- } else {
- for ( var i = 0, l = insert.length; i < l; i++ ) {
- var elems = (i > 0 ? this.clone(true) : this).get();
- jQuery( insert[i] )[ original ]( elems );
- ret = ret.concat( elems );
- }
-
- return this.pushStack( ret, name, insert.selector );
- }
- };
-});
-
-function getAll( elem ) {
- if ( "getElementsByTagName" in elem ) {
- return elem.getElementsByTagName( "*" );
-
- } else if ( "querySelectorAll" in elem ) {
- return elem.querySelectorAll( "*" );
-
- } else {
- return [];
- }
-}
-
-// Used in clean, fixes the defaultChecked property
-function fixDefaultChecked( elem ) {
- if ( elem.type === "checkbox" || elem.type === "radio" ) {
- elem.defaultChecked = elem.checked;
- }
-}
-// Finds all inputs and passes them to fixDefaultChecked
-function findInputs( elem ) {
- if ( jQuery.nodeName( elem, "input" ) ) {
- fixDefaultChecked( elem );
- } else if ( "getElementsByTagName" in elem ) {
- jQuery.grep( elem.getElementsByTagName("input"), fixDefaultChecked );
- }
-}
-
-jQuery.extend({
- clone: function( elem, dataAndEvents, deepDataAndEvents ) {
- var clone = elem.cloneNode(true),
- srcElements,
- destElements,
- i;
-
- if ( (!jQuery.support.noCloneEvent || !jQuery.support.noCloneChecked) &&
- (elem.nodeType === 1 || elem.nodeType === 11) && !jQuery.isXMLDoc(elem) ) {
- // IE copies events bound via attachEvent when using cloneNode.
- // Calling detachEvent on the clone will also remove the events
- // from the original. In order to get around this, we use some
- // proprietary methods to clear the events. Thanks to MooTools
- // guys for this hotness.
-
- cloneFixAttributes( elem, clone );
-
- // Using Sizzle here is crazy slow, so we use getElementsByTagName
- // instead
- srcElements = getAll( elem );
- destElements = getAll( clone );
-
- // Weird iteration because IE will replace the length property
- // with an element if you are cloning the body and one of the
- // elements on the page has a name or id of "length"
- for ( i = 0; srcElements[i]; ++i ) {
- // Ensure that the destination node is not null; Fixes #9587
- if ( destElements[i] ) {
- cloneFixAttributes( srcElements[i], destElements[i] );
- }
- }
- }
-
- // Copy the events from the original to the clone
- if ( dataAndEvents ) {
- cloneCopyEvent( elem, clone );
-
- if ( deepDataAndEvents ) {
- srcElements = getAll( elem );
- destElements = getAll( clone );
-
- for ( i = 0; srcElements[i]; ++i ) {
- cloneCopyEvent( srcElements[i], destElements[i] );
- }
- }
- }
-
- srcElements = destElements = null;
-
- // Return the cloned set
- return clone;
- },
-
- clean: function( elems, context, fragment, scripts ) {
- var checkScriptType;
-
- context = context || document;
-
- // !context.createElement fails in IE with an error but returns typeof 'object'
- if ( typeof context.createElement === "undefined" ) {
- context = context.ownerDocument || context[0] && context[0].ownerDocument || document;
- }
-
- var ret = [], j;
-
- for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
- if ( typeof elem === "number" ) {
- elem += "";
- }
-
- if ( !elem ) {
- continue;
- }
-
- // Convert html string into DOM nodes
- if ( typeof elem === "string" ) {
- if ( !rhtml.test( elem ) ) {
- elem = context.createTextNode( elem );
- } else {
- // Fix "XHTML"-style tags in all browsers
- elem = elem.replace(rxhtmlTag, "<$1></$2>");
-
- // Trim whitespace, otherwise indexOf won't work as expected
- var tag = (rtagName.exec( elem ) || ["", ""])[1].toLowerCase(),
- wrap = wrapMap[ tag ] || wrapMap._default,
- depth = wrap[0],
- div = context.createElement("div");
-
- // Go to html and back, then peel off extra wrappers
- div.innerHTML = wrap[1] + elem + wrap[2];
-
- // Move to the right depth
- while ( depth-- ) {
- div = div.lastChild;
- }
-
- // Remove IE's autoinserted <tbody> from table fragments
- if ( !jQuery.support.tbody ) {
-
- // String was a <table>, *may* have spurious <tbody>
- var hasBody = rtbody.test(elem),
- tbody = tag === "table" && !hasBody ?
- div.firstChild && div.firstChild.childNodes :
-
- // String was a bare <thead> or <tfoot>
- wrap[1] === "<table>" && !hasBody ?
- div.childNodes :
- [];
-
- for ( j = tbody.length - 1; j >= 0 ; --j ) {
- if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
- tbody[ j ].parentNode.removeChild( tbody[ j ] );
- }
- }
- }
-
- // IE completely kills leading whitespace when innerHTML is used
- if ( !jQuery.support.leadingWhitespace && rleadingWhitespace.test( elem ) ) {
- div.insertBefore( context.createTextNode( rleadingWhitespace.exec(elem)[0] ), div.firstChild );
- }
-
- elem = div.childNodes;
- }
- }
-
- // Resets defaultChecked for any radios and checkboxes
- // about to be appended to the DOM in IE 6/7 (#8060)
- var len;
- if ( !jQuery.support.appendChecked ) {
- if ( elem[0] && typeof (len = elem.length) === "number" ) {
- for ( j = 0; j < len; j++ ) {
- findInputs( elem[j] );
- }
- } else {
- findInputs( elem );
- }
- }
-
- if ( elem.nodeType ) {
- ret.push( elem );
- } else {
- ret = jQuery.merge( ret, elem );
- }
- }
-
- if ( fragment ) {
- checkScriptType = function( elem ) {
- return !elem.type || rscriptType.test( elem.type );
- };
- for ( i = 0; ret[i]; i++ ) {
- if ( scripts && jQuery.nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
- scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
-
- } else {
- if ( ret[i].nodeType === 1 ) {
- var jsTags = jQuery.grep( ret[i].getElementsByTagName( "script" ), checkScriptType );
-
- ret.splice.apply( ret, [i + 1, 0].concat( jsTags ) );
- }
- fragment.appendChild( ret[i] );
- }
- }
- }
-
- return ret;
- },
-
- cleanData: function( elems ) {
- var data, id, cache = jQuery.cache, internalKey = jQuery.expando, special = jQuery.event.special,
- deleteExpando = jQuery.support.deleteExpando;
-
- for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
- if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {
- continue;
- }
-
- id = elem[ jQuery.expando ];
-
- if ( id ) {
- data = cache[ id ] && cache[ id ][ internalKey ];
-
- if ( data && data.events ) {
- for ( var type in data.events ) {
- if ( special[ type ] ) {
- jQuery.event.remove( elem, type );
-
- // This is a shortcut to avoid jQuery.event.remove's overhead
- } else {
- jQuery.removeEvent( elem, type, data.handle );
- }
- }
-
- // Null the DOM reference to avoid IE6/7/8 leak (#7054)
- if ( data.handle ) {
- data.handle.elem = null;
- }
- }
-
- if ( deleteExpando ) {
- delete elem[ jQuery.expando ];
-
- } else if ( elem.removeAttribute ) {
- elem.removeAttribute( jQuery.expando );
- }
-
- delete cache[ id ];
- }
- }
- }
-});
-
-function evalScript( i, elem ) {
- if ( elem.src ) {
- jQuery.ajax({
- url: elem.src,
- async: false,
- dataType: "script"
- });
- } else {
- jQuery.globalEval( ( elem.text || elem.textContent || elem.innerHTML || "" ).replace( rcleanScript, "/*$0*/" ) );
- }
-
- if ( elem.parentNode ) {
- elem.parentNode.removeChild( elem );
- }
-}
-
-
-
-
-var ralpha = /alpha\([^)]*\)/i,
- ropacity = /opacity=([^)]*)/,
- // fixed for IE9, see #8346
- rupper = /([A-Z]|^ms)/g,
- rnumpx = /^-?\d+(?:px)?$/i,
- rnum = /^-?\d/,
- rrelNum = /^([\-+])=([\-+.\de]+)/,
-
- cssShow = { position: "absolute", visibility: "hidden", display: "block" },
- cssWidth = [ "Left", "Right" ],
- cssHeight = [ "Top", "Bottom" ],
- curCSS,
-
- getComputedStyle,
- currentStyle;
-
-jQuery.fn.css = function( name, value ) {
- // Setting 'undefined' is a no-op
- if ( arguments.length === 2 && value === undefined ) {
- return this;
- }
-
- return jQuery.access( this, name, value, true, function( elem, name, value ) {
- return value !== undefined ?
- jQuery.style( elem, name, value ) :
- jQuery.css( elem, name );
- });
-};
-
-jQuery.extend({
- // Add in style property hooks for overriding the default
- // behavior of getting and setting a style property
- cssHooks: {
- opacity: {
- get: function( elem, computed ) {
- if ( computed ) {
- // We should always get a number back from opacity
- var ret = curCSS( elem, "opacity", "opacity" );
- return ret === "" ? "1" : ret;
-
- } else {
- return elem.style.opacity;
- }
- }
- }
- },
-
- // Exclude the following css properties to add px
- cssNumber: {
- "fillOpacity": true,
- "fontWeight": true,
- "lineHeight": true,
- "opacity": true,
- "orphans": true,
- "widows": true,
- "zIndex": true,
- "zoom": true
- },
-
- // Add in properties whose names you wish to fix before
- // setting or getting the value
- cssProps: {
- // normalize float css property
- "float": jQuery.support.cssFloat ? "cssFloat" : "styleFloat"
- },
-
- // Get and set the style property on a DOM Node
- style: function( elem, name, value, extra ) {
- // Don't set styles on text and comment nodes
- if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
- return;
- }
-
- // Make sure that we're working with the right name
- var ret, type, origName = jQuery.camelCase( name ),
- style = elem.style, hooks = jQuery.cssHooks[ origName ];
-
- name = jQuery.cssProps[ origName ] || origName;
-
- // Check if we're setting a value
- if ( value !== undefined ) {
- type = typeof value;
-
- // convert relative number strings (+= or -=) to relative numbers. #7345
- if ( type === "string" && (ret = rrelNum.exec( value )) ) {
- value = ( +( ret[1] + 1) * +ret[2] ) + parseFloat( jQuery.css( elem, name ) );
- // Fixes bug #9237
- type = "number";
- }
-
- // Make sure that NaN and null values aren't set. See: #7116
- if ( value == null || type === "number" && isNaN( value ) ) {
- return;
- }
-
- // If a number was passed in, add 'px' to the (except for certain CSS properties)
- if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
- value += "px";
- }
-
- // If a hook was provided, use that value, otherwise just set the specified value
- if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value )) !== undefined ) {
- // Wrapped to prevent IE from throwing errors when 'invalid' values are provided
- // Fixes bug #5509
- try {
- style[ name ] = value;
- } catch(e) {}
- }
-
- } else {
- // If a hook was provided get the non-computed value from there
- if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
- return ret;
- }
-
- // Otherwise just get the value from the style object
- return style[ name ];
- }
- },
-
- css: function( elem, name, extra ) {
- var ret, hooks;
-
- // Make sure that we're working with the right name
- name = jQuery.camelCase( name );
- hooks = jQuery.cssHooks[ name ];
- name = jQuery.cssProps[ name ] || name;
-
- // cssFloat needs a special treatment
- if ( name === "cssFloat" ) {
- name = "float";
- }
-
- // If a hook was provided get the computed value from there
- if ( hooks && "get" in hooks && (ret = hooks.get( elem, true, extra )) !== undefined ) {
- return ret;
-
- // Otherwise, if a way to get the computed value exists, use that
- } else if ( curCSS ) {
- return curCSS( elem, name );
- }
- },
-
- // A method for quickly swapping in/out CSS properties to get correct calculations
- swap: function( elem, options, callback ) {
- var old = {};
-
- // Remember the old values, and insert the new ones
- for ( var name in options ) {
- old[ name ] = elem.style[ name ];
- elem.style[ name ] = options[ name ];
- }
-
- callback.call( elem );
-
- // Revert the old values
- for ( name in options ) {
- elem.style[ name ] = old[ name ];
- }
- }
-});
-
-// DEPRECATED, Use jQuery.css() instead
-jQuery.curCSS = jQuery.css;
-
-jQuery.each(["height", "width"], function( i, name ) {
- jQuery.cssHooks[ name ] = {
- get: function( elem, computed, extra ) {
- var val;
-
- if ( computed ) {
- if ( elem.offsetWidth !== 0 ) {
- return getWH( elem, name, extra );
- } else {
- jQuery.swap( elem, cssShow, function() {
- val = getWH( elem, name, extra );
- });
- }
-
- return val;
- }
- },
-
- set: function( elem, value ) {
- if ( rnumpx.test( value ) ) {
- // ignore negative width and height values #1599
- value = parseFloat( value );
-
- if ( value >= 0 ) {
- return value + "px";
- }
-
- } else {
- return value;
- }
- }
- };
-});
-
-if ( !jQuery.support.opacity ) {
- jQuery.cssHooks.opacity = {
- get: function( elem, computed ) {
- // IE uses filters for opacity
- return ropacity.test( (computed && elem.currentStyle ? elem.currentStyle.filter : elem.style.filter) || "" ) ?
- ( parseFloat( RegExp.$1 ) / 100 ) + "" :
- computed ? "1" : "";
- },
-
- set: function( elem, value ) {
- var style = elem.style,
- currentStyle = elem.currentStyle,
- opacity = jQuery.isNaN( value ) ? "" : "alpha(opacity=" + value * 100 + ")",
- filter = currentStyle && currentStyle.filter || style.filter || "";
-
- // IE has trouble with opacity if it does not have layout
- // Force it by setting the zoom level
- style.zoom = 1;
-
- // if setting opacity to 1, and no other filters exist - attempt to remove filter attribute #6652
- if ( value >= 1 && jQuery.trim( filter.replace( ralpha, "" ) ) === "" ) {
-
- // Setting style.filter to null, "" & " " still leave "filter:" in the cssText
- // if "filter:" is present at all, clearType is disabled, we want to avoid this
- // style.removeAttribute is IE Only, but so apparently is this code path...
- style.removeAttribute( "filter" );
-
- // if there there is no filter style applied in a css rule, we are done
- if ( currentStyle && !currentStyle.filter ) {
- return;
- }
- }
-
- // otherwise, set new filter values
- style.filter = ralpha.test( filter ) ?
- filter.replace( ralpha, opacity ) :
- filter + " " + opacity;
- }
- };
-}
-
-jQuery(function() {
- // This hook cannot be added until DOM ready because the support test
- // for it is not run until after DOM ready
- if ( !jQuery.support.reliableMarginRight ) {
- jQuery.cssHooks.marginRight = {
- get: function( elem, computed ) {
- // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
- // Work around by temporarily setting element display to inline-block
- var ret;
- jQuery.swap( elem, { "display": "inline-block" }, function() {
- if ( computed ) {
- ret = curCSS( elem, "margin-right", "marginRight" );
- } else {
- ret = elem.style.marginRight;
- }
- });
- return ret;
- }
- };
- }
-});
-
-if ( document.defaultView && document.defaultView.getComputedStyle ) {
- getComputedStyle = function( elem, name ) {
- var ret, defaultView, computedStyle;
-
- name = name.replace( rupper, "-$1" ).toLowerCase();
-
- if ( !(defaultView = elem.ownerDocument.defaultView) ) {
- return undefined;
- }
-
- if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) {
- ret = computedStyle.getPropertyValue( name );
- if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) {
- ret = jQuery.style( elem, name );
- }
- }
-
- return ret;
- };
-}
-
-if ( document.documentElement.currentStyle ) {
- currentStyle = function( elem, name ) {
- var left,
- ret = elem.currentStyle && elem.currentStyle[ name ],
- rsLeft = elem.runtimeStyle && elem.runtimeStyle[ name ],
- style = elem.style;
-
- // From the awesome hack by Dean Edwards
- // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
-
- // If we're not dealing with a regular pixel number
- // but a number that has a weird ending, we need to convert it to pixels
- if ( !rnumpx.test( ret ) && rnum.test( ret ) ) {
- // Remember the original values
- left = style.left;
-
- // Put in the new values to get a computed value out
- if ( rsLeft ) {
- elem.runtimeStyle.left = elem.currentStyle.left;
- }
- style.left = name === "fontSize" ? "1em" : (ret || 0);
- ret = style.pixelLeft + "px";
-
- // Revert the changed values
- style.left = left;
- if ( rsLeft ) {
- elem.runtimeStyle.left = rsLeft;
- }
- }
-
- return ret === "" ? "auto" : ret;
- };
-}
-
-curCSS = getComputedStyle || currentStyle;
-
-function getWH( elem, name, extra ) {
-
- // Start with offset property
- var val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
- which = name === "width" ? cssWidth : cssHeight;
-
- if ( val > 0 ) {
- if ( extra !== "border" ) {
- jQuery.each( which, function() {
- if ( !extra ) {
- val -= parseFloat( jQuery.css( elem, "padding" + this ) ) || 0;
- }
- if ( extra === "margin" ) {
- val += parseFloat( jQuery.css( elem, extra + this ) ) || 0;
- } else {
- val -= parseFloat( jQuery.css( elem, "border" + this + "Width" ) ) || 0;
- }
- });
- }
-
- return val + "px";
- }
-
- // Fall back to computed then uncomputed css if necessary
- val = curCSS( elem, name, name );
- if ( val < 0 || val == null ) {
- val = elem.style[ name ] || 0;
- }
- // Normalize "", auto, and prepare for extra
- val = parseFloat( val ) || 0;
-
- // Add padding, border, margin
- if ( extra ) {
- jQuery.each( which, function() {
- val += parseFloat( jQuery.css( elem, "padding" + this ) ) || 0;
- if ( extra !== "padding" ) {
- val += parseFloat( jQuery.css( elem, "border" + this + "Width" ) ) || 0;
- }
- if ( extra === "margin" ) {
- val += parseFloat( jQuery.css( elem, extra + this ) ) || 0;
- }
- });
- }
-
- return val + "px";
-}
-
-if ( jQuery.expr && jQuery.expr.filters ) {
- jQuery.expr.filters.hidden = function( elem ) {
- var width = elem.offsetWidth,
- height = elem.offsetHeight;
-
- return (width === 0 && height === 0) || (!jQuery.support.reliableHiddenOffsets && (elem.style.display || jQuery.css( elem, "display" )) === "none");
- };
-
- jQuery.expr.filters.visible = function( elem ) {
- return !jQuery.expr.filters.hidden( elem );
- };
-}
-
-
-
-
-var r20 = /%20/g,
- rbracket = /\[\]$/,
- rCRLF = /\r?\n/g,
- rhash = /#.*$/,
- rheaders = /^(.*?):[ \t]*([^\r\n]*)\r?$/mg, // IE leaves an \r character at EOL
- rinput = /^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,
- // #7653, #8125, #8152: local protocol detection
- rlocalProtocol = /^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,
- rnoContent = /^(?:GET|HEAD)$/,
- rprotocol = /^\/\//,
- rquery = /\?/,
- rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
- rselectTextarea = /^(?:select|textarea)/i,
- rspacesAjax = /\s+/,
- rts = /([?&])_=[^&]*/,
- rurl = /^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,
-
- // Keep a copy of the old load method
- _load = jQuery.fn.load,
-
- /* Prefilters
- * 1) They are useful to introduce custom dataTypes (see ajax/jsonp.js for an example)
- * 2) These are called:
- * - BEFORE asking for a transport
- * - AFTER param serialization (s.data is a string if s.processData is true)
- * 3) key is the dataType
- * 4) the catchall symbol "*" can be used
- * 5) execution will start with transport dataType and THEN continue down to "*" if needed
- */
- prefilters = {},
-
- /* Transports bindings
- * 1) key is the dataType
- * 2) the catchall symbol "*" can be used
- * 3) selection will start with transport dataType and THEN go to "*" if needed
- */
- transports = {},
-
- // Document location
- ajaxLocation,
-
- // Document location segments
- ajaxLocParts,
-
- // Avoid comment-prolog char sequence (#10098); must appease lint and evade compression
- allTypes = ["*/"] + ["*"];
-
-// #8138, IE may throw an exception when accessing
-// a field from window.location if document.domain has been set
-try {
- ajaxLocation = location.href;
-} catch( e ) {
- // Use the href attribute of an A element
- // since IE will modify it given document.location
- ajaxLocation = document.createElement( "a" );
- ajaxLocation.href = "";
- ajaxLocation = ajaxLocation.href;
-}
-
-// Segment location into parts
-ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || [];
-
-// Base "constructor" for jQuery.ajaxPrefilter and jQuery.ajaxTransport
-function addToPrefiltersOrTransports( structure ) {
-
- // dataTypeExpression is optional and defaults to "*"
- return function( dataTypeExpression, func ) {
-
- if ( typeof dataTypeExpression !== "string" ) {
- func = dataTypeExpression;
- dataTypeExpression = "*";
- }
-
- if ( jQuery.isFunction( func ) ) {
- var dataTypes = dataTypeExpression.toLowerCase().split( rspacesAjax ),
- i = 0,
- length = dataTypes.length,
- dataType,
- list,
- placeBefore;
-
- // For each dataType in the dataTypeExpression
- for(; i < length; i++ ) {
- dataType = dataTypes[ i ];
- // We control if we're asked to add before
- // any existing element
- placeBefore = /^\+/.test( dataType );
- if ( placeBefore ) {
- dataType = dataType.substr( 1 ) || "*";
- }
- list = structure[ dataType ] = structure[ dataType ] || [];
- // then we add to the structure accordingly
- list[ placeBefore ? "unshift" : "push" ]( func );
- }
- }
- };
-}
-
-// Base inspection function for prefilters and transports
-function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR,
- dataType /* internal */, inspected /* internal */ ) {
-
- dataType = dataType || options.dataTypes[ 0 ];
- inspected = inspected || {};
-
- inspected[ dataType ] = true;
-
- var list = structure[ dataType ],
- i = 0,
- length = list ? list.length : 0,
- executeOnly = ( structure === prefilters ),
- selection;
-
- for(; i < length && ( executeOnly || !selection ); i++ ) {
- selection = list[ i ]( options, originalOptions, jqXHR );
- // If we got redirected to another dataType
- // we try there if executing only and not done already
- if ( typeof selection === "string" ) {
- if ( !executeOnly || inspected[ selection ] ) {
- selection = undefined;
- } else {
- options.dataTypes.unshift( selection );
- selection = inspectPrefiltersOrTransports(
- structure, options, originalOptions, jqXHR, selection, inspected );
- }
- }
- }
- // If we're only executing or nothing was selected
- // we try the catchall dataType if not done already
- if ( ( executeOnly || !selection ) && !inspected[ "*" ] ) {
- selection = inspectPrefiltersOrTransports(
- structure, options, originalOptions, jqXHR, "*", inspected );
- }
- // unnecessary when only executing (prefilters)
- // but it'll be ignored by the caller in that case
- return selection;
-}
-
-// A special extend for ajax options
-// that takes "flat" options (not to be deep extended)
-// Fixes #9887
-function ajaxExtend( target, src ) {
- var key, deep,
- flatOptions = jQuery.ajaxSettings.flatOptions || {};
- for( key in src ) {
- if ( src[ key ] !== undefined ) {
- ( flatOptions[ key ] ? target : ( deep || ( deep = {} ) ) )[ key ] = src[ key ];
- }
- }
- if ( deep ) {
- jQuery.extend( true, target, deep );
- }
-}
-
-jQuery.fn.extend({
- load: function( url, params, callback ) {
- if ( typeof url !== "string" && _load ) {
- return _load.apply( this, arguments );
-
- // Don't do a request if no elements are being requested
- } else if ( !this.length ) {
- return this;
- }
-
- var off = url.indexOf( " " );
- if ( off >= 0 ) {
- var selector = url.slice( off, url.length );
- url = url.slice( 0, off );
- }
-
- // Default to a GET request
- var type = "GET";
-
- // If the second parameter was provided
- if ( params ) {
- // If it's a function
- if ( jQuery.isFunction( params ) ) {
- // We assume that it's the callback
- callback = params;
- params = undefined;
-
- // Otherwise, build a param string
- } else if ( typeof params === "object" ) {
- params = jQuery.param( params, jQuery.ajaxSettings.traditional );
- type = "POST";
- }
- }
-
- var self = this;
-
- // Request the remote document
- jQuery.ajax({
- url: url,
- type: type,
- dataType: "html",
- data: params,
- // Complete callback (responseText is used internally)
- complete: function( jqXHR, status, responseText ) {
- // Store the response as specified by the jqXHR object
- responseText = jqXHR.responseText;
- // If successful, inject the HTML into all the matched elements
- if ( jqXHR.isResolved() ) {
- // #4825: Get the actual response in case
- // a dataFilter is present in ajaxSettings
- jqXHR.done(function( r ) {
- responseText = r;
- });
- // See if a selector was specified
- self.html( selector ?
- // Create a dummy div to hold the results
- jQuery("<div>")
- // inject the contents of the document in, removing the scripts
- // to avoid any 'Permission Denied' errors in IE
- .append(responseText.replace(rscript, ""))
-
- // Locate the specified elements
- .find(selector) :
-
- // If not, just inject the full result
- responseText );
- }
-
- if ( callback ) {
- self.each( callback, [ responseText, status, jqXHR ] );
- }
- }
- });
-
- return this;
- },
-
- serialize: function() {
- return jQuery.param( this.serializeArray() );
- },
-
- serializeArray: function() {
- return this.map(function(){
- return this.elements ? jQuery.makeArray( this.elements ) : this;
- })
- .filter(function(){
- return this.name && !this.disabled &&
- ( this.checked || rselectTextarea.test( this.nodeName ) ||
- rinput.test( this.type ) );
- })
- .map(function( i, elem ){
- var val = jQuery( this ).val();
-
- return val == null ?
- null :
- jQuery.isArray( val ) ?
- jQuery.map( val, function( val, i ){
- return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
- }) :
- { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
- }).get();
- }
-});
-
-// Attach a bunch of functions for handling common AJAX events
-jQuery.each( "ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split( " " ), function( i, o ){
- jQuery.fn[ o ] = function( f ){
- return this.bind( o, f );
- };
-});
-
-jQuery.each( [ "get", "post" ], function( i, method ) {
- jQuery[ method ] = function( url, data, callback, type ) {
- // shift arguments if data argument was omitted
- if ( jQuery.isFunction( data ) ) {
- type = type || callback;
- callback = data;
- data = undefined;
- }
-
- return jQuery.ajax({
- type: method,
- url: url,
- data: data,
- success: callback,
- dataType: type
- });
- };
-});
-
-jQuery.extend({
-
- getScript: function( url, callback ) {
- return jQuery.get( url, undefined, callback, "script" );
- },
-
- getJSON: function( url, data, callback ) {
- return jQuery.get( url, data, callback, "json" );
- },
-
- // Creates a full fledged settings object into target
- // with both ajaxSettings and settings fields.
- // If target is omitted, writes into ajaxSettings.
- ajaxSetup: function( target, settings ) {
- if ( settings ) {
- // Building a settings object
- ajaxExtend( target, jQuery.ajaxSettings );
- } else {
- // Extending ajaxSettings
- settings = target;
- target = jQuery.ajaxSettings;
- }
- ajaxExtend( target, settings );
- return target;
- },
-
- ajaxSettings: {
- url: ajaxLocation,
- isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),
- global: true,
- type: "GET",
- contentType: "application/x-www-form-urlencoded",
- processData: true,
- async: true,
- /*
- timeout: 0,
- data: null,
- dataType: null,
- username: null,
- password: null,
- cache: null,
- traditional: false,
- headers: {},
- */
-
- accepts: {
- xml: "application/xml, text/xml",
- html: "text/html",
- text: "text/plain",
- json: "application/json, text/javascript",
- "*": allTypes
- },
-
- contents: {
- xml: /xml/,
- html: /html/,
- json: /json/
- },
-
- responseFields: {
- xml: "responseXML",
- text: "responseText"
- },
-
- // List of data converters
- // 1) key format is "source_type destination_type" (a single space in-between)
- // 2) the catchall symbol "*" can be used for source_type
- converters: {
-
- // Convert anything to text
- "* text": window.String,
-
- // Text to html (true = no transformation)
- "text html": true,
-
- // Evaluate text as a json expression
- "text json": jQuery.parseJSON,
-
- // Parse text as xml
- "text xml": jQuery.parseXML
- },
-
- // For options that shouldn't be deep extended:
- // you can add your own custom options here if
- // and when you create one that shouldn't be
- // deep extended (see ajaxExtend)
- flatOptions: {
- context: true,
- url: true
- }
- },
-
- ajaxPrefilter: addToPrefiltersOrTransports( prefilters ),
- ajaxTransport: addToPrefiltersOrTransports( transports ),
-
- // Main method
- ajax: function( url, options ) {
-
- // If url is an object, simulate pre-1.5 signature
- if ( typeof url === "object" ) {
- options = url;
- url = undefined;
- }
-
- // Force options to be an object
- options = options || {};
-
- var // Create the final options object
- s = jQuery.ajaxSetup( {}, options ),
- // Callbacks context
- callbackContext = s.context || s,
- // Context for global events
- // It's the callbackContext if one was provided in the options
- // and if it's a DOM node or a jQuery collection
- globalEventContext = callbackContext !== s &&
- ( callbackContext.nodeType || callbackContext instanceof jQuery ) ?
- jQuery( callbackContext ) : jQuery.event,
- // Deferreds
- deferred = jQuery.Deferred(),
- completeDeferred = jQuery._Deferred(),
- // Status-dependent callbacks
- statusCode = s.statusCode || {},
- // ifModified key
- ifModifiedKey,
- // Headers (they are sent all at once)
- requestHeaders = {},
- requestHeadersNames = {},
- // Response headers
- responseHeadersString,
- responseHeaders,
- // transport
- transport,
- // timeout handle
- timeoutTimer,
- // Cross-domain detection vars
- parts,
- // The jqXHR state
- state = 0,
- // To know if global events are to be dispatched
- fireGlobals,
- // Loop variable
- i,
- // Fake xhr
- jqXHR = {
-
- readyState: 0,
-
- // Caches the header
- setRequestHeader: function( name, value ) {
- if ( !state ) {
- var lname = name.toLowerCase();
- name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name;
- requestHeaders[ name ] = value;
- }
- return this;
- },
-
- // Raw string
- getAllResponseHeaders: function() {
- return state === 2 ? responseHeadersString : null;
- },
-
- // Builds headers hashtable if needed
- getResponseHeader: function( key ) {
- var match;
- if ( state === 2 ) {
- if ( !responseHeaders ) {
- responseHeaders = {};
- while( ( match = rheaders.exec( responseHeadersString ) ) ) {
- responseHeaders[ match[1].toLowerCase() ] = match[ 2 ];
- }
- }
- match = responseHeaders[ key.toLowerCase() ];
- }
- return match === undefined ? null : match;
- },
-
- // Overrides response content-type header
- overrideMimeType: function( type ) {
- if ( !state ) {
- s.mimeType = type;
- }
- return this;
- },
-
- // Cancel the request
- abort: function( statusText ) {
- statusText = statusText || "abort";
- if ( transport ) {
- transport.abort( statusText );
- }
- done( 0, statusText );
- return this;
- }
- };
-
- // Callback for when everything is done
- // It is defined here because jslint complains if it is declared
- // at the end of the function (which would be more logical and readable)
- function done( status, nativeStatusText, responses, headers ) {
-
- // Called once
- if ( state === 2 ) {
- return;
- }
-
- // State is "done" now
- state = 2;
-
- // Clear timeout if it exists
- if ( timeoutTimer ) {
- clearTimeout( timeoutTimer );
- }
-
- // Dereference transport for early garbage collection
- // (no matter how long the jqXHR object will be used)
- transport = undefined;
-
- // Cache response headers
- responseHeadersString = headers || "";
-
- // Set readyState
- jqXHR.readyState = status > 0 ? 4 : 0;
-
- var isSuccess,
- success,
- error,
- statusText = nativeStatusText,
- response = responses ? ajaxHandleResponses( s, jqXHR, responses ) : undefined,
- lastModified,
- etag;
-
- // If successful, handle type chaining
- if ( status >= 200 && status < 300 || status === 304 ) {
-
- // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
- if ( s.ifModified ) {
-
- if ( ( lastModified = jqXHR.getResponseHeader( "Last-Modified" ) ) ) {
- jQuery.lastModified[ ifModifiedKey ] = lastModified;
- }
- if ( ( etag = jqXHR.getResponseHeader( "Etag" ) ) ) {
- jQuery.etag[ ifModifiedKey ] = etag;
- }
- }
-
- // If not modified
- if ( status === 304 ) {
-
- statusText = "notmodified";
- isSuccess = true;
-
- // If we have data
- } else {
-
- try {
- success = ajaxConvert( s, response );
- statusText = "success";
- isSuccess = true;
- } catch(e) {
- // We have a parsererror
- statusText = "parsererror";
- error = e;
- }
- }
- } else {
- // We extract error from statusText
- // then normalize statusText and status for non-aborts
- error = statusText;
- if( !statusText || status ) {
- statusText = "error";
- if ( status < 0 ) {
- status = 0;
- }
- }
- }
-
- // Set data for the fake xhr object
- jqXHR.status = status;
- jqXHR.statusText = "" + ( nativeStatusText || statusText );
-
- // Success/Error
- if ( isSuccess ) {
- deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
- } else {
- deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
- }
-
- // Status-dependent callbacks
- jqXHR.statusCode( statusCode );
- statusCode = undefined;
-
- if ( fireGlobals ) {
- globalEventContext.trigger( "ajax" + ( isSuccess ? "Success" : "Error" ),
- [ jqXHR, s, isSuccess ? success : error ] );
- }
-
- // Complete
- completeDeferred.resolveWith( callbackContext, [ jqXHR, statusText ] );
-
- if ( fireGlobals ) {
- globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
- // Handle the global AJAX counter
- if ( !( --jQuery.active ) ) {
- jQuery.event.trigger( "ajaxStop" );
- }
- }
- }
-
- // Attach deferreds
- deferred.promise( jqXHR );
- jqXHR.success = jqXHR.done;
- jqXHR.error = jqXHR.fail;
- jqXHR.complete = completeDeferred.done;
-
- // Status-dependent callbacks
- jqXHR.statusCode = function( map ) {
- if ( map ) {
- var tmp;
- if ( state < 2 ) {
- for( tmp in map ) {
- statusCode[ tmp ] = [ statusCode[tmp], map[tmp] ];
- }
- } else {
- tmp = map[ jqXHR.status ];
- jqXHR.then( tmp, tmp );
- }
- }
- return this;
- };
-
- // Remove hash character (#7531: and string promotion)
- // Add protocol if not provided (#5866: IE7 issue with protocol-less urls)
- // We also use the url parameter if available
- s.url = ( ( url || s.url ) + "" ).replace( rhash, "" ).replace( rprotocol, ajaxLocParts[ 1 ] + "//" );
-
- // Extract dataTypes list
- s.dataTypes = jQuery.trim( s.dataType || "*" ).toLowerCase().split( rspacesAjax );
-
- // Determine if a cross-domain request is in order
- if ( s.crossDomain == null ) {
- parts = rurl.exec( s.url.toLowerCase() );
- s.crossDomain = !!( parts &&
- ( parts[ 1 ] != ajaxLocParts[ 1 ] || parts[ 2 ] != ajaxLocParts[ 2 ] ||
- ( parts[ 3 ] || ( parts[ 1 ] === "http:" ? 80 : 443 ) ) !=
- ( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? 80 : 443 ) ) )
- );
- }
-
- // Convert data if not already a string
- if ( s.data && s.processData && typeof s.data !== "string" ) {
- s.data = jQuery.param( s.data, s.traditional );
- }
-
- // Apply prefilters
- inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );
-
- // If request was aborted inside a prefiler, stop there
- if ( state === 2 ) {
- return false;
- }
-
- // We can fire global events as of now if asked to
- fireGlobals = s.global;
-
- // Uppercase the type
- s.type = s.type.toUpperCase();
-
- // Determine if request has content
- s.hasContent = !rnoContent.test( s.type );
-
- // Watch for a new set of requests
- if ( fireGlobals && jQuery.active++ === 0 ) {
- jQuery.event.trigger( "ajaxStart" );
- }
-
- // More options handling for requests with no content
- if ( !s.hasContent ) {
-
- // If data is available, append data to url
- if ( s.data ) {
- s.url += ( rquery.test( s.url ) ? "&" : "?" ) + s.data;
- // #9682: remove data so that it's not used in an eventual retry
- delete s.data;
- }
-
- // Get ifModifiedKey before adding the anti-cache parameter
- ifModifiedKey = s.url;
-
- // Add anti-cache in url if needed
- if ( s.cache === false ) {
-
- var ts = jQuery.now(),
- // try replacing _= if it is there
- ret = s.url.replace( rts, "$1_=" + ts );
-
- // if nothing was replaced, add timestamp to the end
- s.url = ret + ( (ret === s.url ) ? ( rquery.test( s.url ) ? "&" : "?" ) + "_=" + ts : "" );
- }
- }
-
- // Set the correct header, if data is being sent
- if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
- jqXHR.setRequestHeader( "Content-Type", s.contentType );
- }
-
- // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
- if ( s.ifModified ) {
- ifModifiedKey = ifModifiedKey || s.url;
- if ( jQuery.lastModified[ ifModifiedKey ] ) {
- jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ ifModifiedKey ] );
- }
- if ( jQuery.etag[ ifModifiedKey ] ) {
- jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ ifModifiedKey ] );
- }
- }
-
- // Set the Accepts header for the server, depending on the dataType
- jqXHR.setRequestHeader(
- "Accept",
- s.dataTypes[ 0 ] && s.accepts[ s.dataTypes[0] ] ?
- s.accepts[ s.dataTypes[0] ] + ( s.dataTypes[ 0 ] !== "*" ? ", " + allTypes + "; q=0.01" : "" ) :
- s.accepts[ "*" ]
- );
-
- // Check for headers option
- for ( i in s.headers ) {
- jqXHR.setRequestHeader( i, s.headers[ i ] );
- }
-
- // Allow custom headers/mimetypes and early abort
- if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) {
- // Abort if not done already
- jqXHR.abort();
- return false;
-
- }
-
- // Install callbacks on deferreds
- for ( i in { success: 1, error: 1, complete: 1 } ) {
- jqXHR[ i ]( s[ i ] );
- }
-
- // Get transport
- transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );
-
- // If no transport, we auto-abort
- if ( !transport ) {
- done( -1, "No Transport" );
- } else {
- jqXHR.readyState = 1;
- // Send global event
- if ( fireGlobals ) {
- globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );
- }
- // Timeout
- if ( s.async && s.timeout > 0 ) {
- timeoutTimer = setTimeout( function(){
- jqXHR.abort( "timeout" );
- }, s.timeout );
- }
-
- try {
- state = 1;
- transport.send( requestHeaders, done );
- } catch (e) {
- // Propagate exception as error if not done
- if ( state < 2 ) {
- done( -1, e );
- // Simply rethrow otherwise
- } else {
- jQuery.error( e );
- }
- }
- }
-
- return jqXHR;
- },
-
- // Serialize an array of form elements or a set of
- // key/values into a query string
- param: function( a, traditional ) {
- var s = [],
- add = function( key, value ) {
- // If value is a function, invoke it and return its value
- value = jQuery.isFunction( value ) ? value() : value;
- s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
- };
-
- // Set traditional to true for jQuery <= 1.3.2 behavior.
- if ( traditional === undefined ) {
- traditional = jQuery.ajaxSettings.traditional;
- }
-
- // If an array was passed in, assume that it is an array of form elements.
- if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
- // Serialize the form elements
- jQuery.each( a, function() {
- add( this.name, this.value );
- });
-
- } else {
- // If traditional, encode the "old" way (the way 1.3.2 or older
- // did it), otherwise encode params recursively.
- for ( var prefix in a ) {
- buildParams( prefix, a[ prefix ], traditional, add );
- }
- }
-
- // Return the resulting serialization
- return s.join( "&" ).replace( r20, "+" );
- }
-});
-
-function buildParams( prefix, obj, traditional, add ) {
- if ( jQuery.isArray( obj ) ) {
- // Serialize array item.
- jQuery.each( obj, function( i, v ) {
- if ( traditional || rbracket.test( prefix ) ) {
- // Treat each array item as a scalar.
- add( prefix, v );
-
- } else {
- // If array item is non-scalar (array or object), encode its
- // numeric index to resolve deserialization ambiguity issues.
- // Note that rack (as of 1.0.0) can't currently deserialize
- // nested arrays properly, and attempting to do so may cause
- // a server error. Possible fixes are to modify rack's
- // deserialization algorithm or to provide an option or flag
- // to force array serialization to be shallow.
- buildParams( prefix + "[" + ( typeof v === "object" || jQuery.isArray(v) ? i : "" ) + "]", v, traditional, add );
- }
- });
-
- } else if ( !traditional && obj != null && typeof obj === "object" ) {
- // Serialize object item.
- for ( var name in obj ) {
- buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
- }
-
- } else {
- // Serialize scalar item.
- add( prefix, obj );
- }
-}
-
-// This is still on the jQuery object... for now
-// Want to move this to jQuery.ajax some day
-jQuery.extend({
-
- // Counter for holding the number of active queries
- active: 0,
-
- // Last-Modified header cache for next request
- lastModified: {},
- etag: {}
-
-});
-
-/* Handles responses to an ajax request:
- * - sets all responseXXX fields accordingly
- * - finds the right dataType (mediates between content-type and expected dataType)
- * - returns the corresponding response
- */
-function ajaxHandleResponses( s, jqXHR, responses ) {
-
- var contents = s.contents,
- dataTypes = s.dataTypes,
- responseFields = s.responseFields,
- ct,
- type,
- finalDataType,
- firstDataType;
-
- // Fill responseXXX fields
- for( type in responseFields ) {
- if ( type in responses ) {
- jqXHR[ responseFields[type] ] = responses[ type ];
- }
- }
-
- // Remove auto dataType and get content-type in the process
- while( dataTypes[ 0 ] === "*" ) {
- dataTypes.shift();
- if ( ct === undefined ) {
- ct = s.mimeType || jqXHR.getResponseHeader( "content-type" );
- }
- }
-
- // Check if we're dealing with a known content-type
- if ( ct ) {
- for ( type in contents ) {
- if ( contents[ type ] && contents[ type ].test( ct ) ) {
- dataTypes.unshift( type );
- break;
- }
- }
- }
-
- // Check to see if we have a response for the expected dataType
- if ( dataTypes[ 0 ] in responses ) {
- finalDataType = dataTypes[ 0 ];
- } else {
- // Try convertible dataTypes
- for ( type in responses ) {
- if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) {
- finalDataType = type;
- break;
- }
- if ( !firstDataType ) {
- firstDataType = type;
- }
- }
- // Or just use first one
- finalDataType = finalDataType || firstDataType;
- }
-
- // If we found a dataType
- // We add the dataType to the list if needed
- // and return the corresponding response
- if ( finalDataType ) {
- if ( finalDataType !== dataTypes[ 0 ] ) {
- dataTypes.unshift( finalDataType );
- }
- return responses[ finalDataType ];
- }
-}
-
-// Chain conversions given the request and the original response
-function ajaxConvert( s, response ) {
-
- // Apply the dataFilter if provided
- if ( s.dataFilter ) {
- response = s.dataFilter( response, s.dataType );
- }
-
- var dataTypes = s.dataTypes,
- converters = {},
- i,
- key,
- length = dataTypes.length,
- tmp,
- // Current and previous dataTypes
- current = dataTypes[ 0 ],
- prev,
- // Conversion expression
- conversion,
- // Conversion function
- conv,
- // Conversion functions (transitive conversion)
- conv1,
- conv2;
-
- // For each dataType in the chain
- for( i = 1; i < length; i++ ) {
-
- // Create converters map
- // with lowercased keys
- if ( i === 1 ) {
- for( key in s.converters ) {
- if( typeof key === "string" ) {
- converters[ key.toLowerCase() ] = s.converters[ key ];
- }
- }
- }
-
- // Get the dataTypes
- prev = current;
- current = dataTypes[ i ];
-
- // If current is auto dataType, update it to prev
- if( current === "*" ) {
- current = prev;
- // If no auto and dataTypes are actually different
- } else if ( prev !== "*" && prev !== current ) {
-
- // Get the converter
- conversion = prev + " " + current;
- conv = converters[ conversion ] || converters[ "* " + current ];
-
- // If there is no direct converter, search transitively
- if ( !conv ) {
- conv2 = undefined;
- for( conv1 in converters ) {
- tmp = conv1.split( " " );
- if ( tmp[ 0 ] === prev || tmp[ 0 ] === "*" ) {
- conv2 = converters[ tmp[1] + " " + current ];
- if ( conv2 ) {
- conv1 = converters[ conv1 ];
- if ( conv1 === true ) {
- conv = conv2;
- } else if ( conv2 === true ) {
- conv = conv1;
- }
- break;
- }
- }
- }
- }
- // If we found no converter, dispatch an error
- if ( !( conv || conv2 ) ) {
- jQuery.error( "No conversion from " + conversion.replace(" "," to ") );
- }
- // If found converter is not an equivalence
- if ( conv !== true ) {
- // Convert with 1 or 2 converters accordingly
- response = conv ? conv( response ) : conv2( conv1(response) );
- }
- }
- }
- return response;
-}
-
-
-
-
-var jsc = jQuery.now(),
- jsre = /(\=)\?(&|$)|\?\?/i;
-
-// Default jsonp settings
-jQuery.ajaxSetup({
- jsonp: "callback",
- jsonpCallback: function() {
- return jQuery.expando + "_" + ( jsc++ );
- }
-});
-
-// Detect, normalize options and install callbacks for jsonp requests
-jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) {
-
- var inspectData = s.contentType === "application/x-www-form-urlencoded" &&
- ( typeof s.data === "string" );
-
- if ( s.dataTypes[ 0 ] === "jsonp" ||
- s.jsonp !== false && ( jsre.test( s.url ) ||
- inspectData && jsre.test( s.data ) ) ) {
-
- var responseContainer,
- jsonpCallback = s.jsonpCallback =
- jQuery.isFunction( s.jsonpCallback ) ? s.jsonpCallback() : s.jsonpCallback,
- previous = window[ jsonpCallback ],
- url = s.url,
- data = s.data,
- replace = "$1" + jsonpCallback + "$2";
-
- if ( s.jsonp !== false ) {
- url = url.replace( jsre, replace );
- if ( s.url === url ) {
- if ( inspectData ) {
- data = data.replace( jsre, replace );
- }
- if ( s.data === data ) {
- // Add callback manually
- url += (/\?/.test( url ) ? "&" : "?") + s.jsonp + "=" + jsonpCallback;
- }
- }
- }
-
- s.url = url;
- s.data = data;
-
- // Install callback
- window[ jsonpCallback ] = function( response ) {
- responseContainer = [ response ];
- };
-
- // Clean-up function
- jqXHR.always(function() {
- // Set callback back to previous value
- window[ jsonpCallback ] = previous;
- // Call if it was a function and we have a response
- if ( responseContainer && jQuery.isFunction( previous ) ) {
- window[ jsonpCallback ]( responseContainer[ 0 ] );
- }
- });
-
- // Use data converter to retrieve json after script execution
- s.converters["script json"] = function() {
- if ( !responseContainer ) {
- jQuery.error( jsonpCallback + " was not called" );
- }
- return responseContainer[ 0 ];
- };
-
- // force json dataType
- s.dataTypes[ 0 ] = "json";
-
- // Delegate to script
- return "script";
- }
-});
-
-
-
-
-// Install script dataType
-jQuery.ajaxSetup({
- accepts: {
- script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
- },
- contents: {
- script: /javascript|ecmascript/
- },
- converters: {
- "text script": function( text ) {
- jQuery.globalEval( text );
- return text;
- }
- }
-});
-
-// Handle cache's special case and global
-jQuery.ajaxPrefilter( "script", function( s ) {
- if ( s.cache === undefined ) {
- s.cache = false;
- }
- if ( s.crossDomain ) {
- s.type = "GET";
- s.global = false;
- }
-});
-
-// Bind script tag hack transport
-jQuery.ajaxTransport( "script", function(s) {
-
- // This transport only deals with cross domain requests
- if ( s.crossDomain ) {
-
- var script,
- head = document.head || document.getElementsByTagName( "head" )[0] || document.documentElement;
-
- return {
-
- send: function( _, callback ) {
-
- script = document.createElement( "script" );
-
- script.async = "async";
-
- if ( s.scriptCharset ) {
- script.charset = s.scriptCharset;
- }
-
- script.src = s.url;
-
- // Attach handlers for all browsers
- script.onload = script.onreadystatechange = function( _, isAbort ) {
-
- if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) {
-
- // Handle memory leak in IE
- script.onload = script.onreadystatechange = null;
-
- // Remove the script
- if ( head && script.parentNode ) {
- head.removeChild( script );
- }
-
- // Dereference the script
- script = undefined;
-
- // Callback if not abort
- if ( !isAbort ) {
- callback( 200, "success" );
- }
- }
- };
- // Use insertBefore instead of appendChild to circumvent an IE6 bug.
- // This arises when a base node is used (#2709 and #4378).
- head.insertBefore( script, head.firstChild );
- },
-
- abort: function() {
- if ( script ) {
- script.onload( 0, 1 );
- }
- }
- };
- }
-});
-
-
-
-
-var // #5280: Internet Explorer will keep connections alive if we don't abort on unload
- xhrOnUnloadAbort = window.ActiveXObject ? function() {
- // Abort all pending requests
- for ( var key in xhrCallbacks ) {
- xhrCallbacks[ key ]( 0, 1 );
- }
- } : false,
- xhrId = 0,
- xhrCallbacks;
-
-// Functions to create xhrs
-function createStandardXHR() {
- try {
- return new window.XMLHttpRequest();
- } catch( e ) {}
-}
-
-function createActiveXHR() {
- try {
- return new window.ActiveXObject( "Microsoft.XMLHTTP" );
- } catch( e ) {}
-}
-
-// Create the request object
-// (This is still attached to ajaxSettings for backward compatibility)
-jQuery.ajaxSettings.xhr = window.ActiveXObject ?
- /* Microsoft failed to properly
- * implement the XMLHttpRequest in IE7 (can't request local files),
- * so we use the ActiveXObject when it is available
- * Additionally XMLHttpRequest can be disabled in IE7/IE8 so
- * we need a fallback.
- */
- function() {
- return !this.isLocal && createStandardXHR() || createActiveXHR();
- } :
- // For all other browsers, use the standard XMLHttpRequest object
- createStandardXHR;
-
-// Determine support properties
-(function( xhr ) {
- jQuery.extend( jQuery.support, {
- ajax: !!xhr,
- cors: !!xhr && ( "withCredentials" in xhr )
- });
-})( jQuery.ajaxSettings.xhr() );
-
-// Create transport if the browser can provide an xhr
-if ( jQuery.support.ajax ) {
-
- jQuery.ajaxTransport(function( s ) {
- // Cross domain only allowed if supported through XMLHttpRequest
- if ( !s.crossDomain || jQuery.support.cors ) {
-
- var callback;
-
- return {
- send: function( headers, complete ) {
-
- // Get a new xhr
- var xhr = s.xhr(),
- handle,
- i;
-
- // Open the socket
- // Passing null username, generates a login popup on Opera (#2865)
- if ( s.username ) {
- xhr.open( s.type, s.url, s.async, s.username, s.password );
- } else {
- xhr.open( s.type, s.url, s.async );
- }
-
- // Apply custom fields if provided
- if ( s.xhrFields ) {
- for ( i in s.xhrFields ) {
- xhr[ i ] = s.xhrFields[ i ];
- }
- }
-
- // Override mime type if needed
- if ( s.mimeType && xhr.overrideMimeType ) {
- xhr.overrideMimeType( s.mimeType );
- }
-
- // X-Requested-With header
- // For cross-domain requests, seeing as conditions for a preflight are
- // akin to a jigsaw puzzle, we simply never set it to be sure.
- // (it can always be set on a per-request basis or even using ajaxSetup)
- // For same-domain requests, won't change header if already provided.
- if ( !s.crossDomain && !headers["X-Requested-With"] ) {
- headers[ "X-Requested-With" ] = "XMLHttpRequest";
- }
-
- // Need an extra try/catch for cross domain requests in Firefox 3
- try {
- for ( i in headers ) {
- xhr.setRequestHeader( i, headers[ i ] );
- }
- } catch( _ ) {}
-
- // Do send the request
- // This may raise an exception which is actually
- // handled in jQuery.ajax (so no try/catch here)
- xhr.send( ( s.hasContent && s.data ) || null );
-
- // Listener
- callback = function( _, isAbort ) {
-
- var status,
- statusText,
- responseHeaders,
- responses,
- xml;
-
- // Firefox throws exceptions when accessing properties
- // of an xhr when a network error occured
- // http://helpful.knobs-dials.com/index.php/Component_returned_failure_code:_0x80040111_(NS_ERROR_NOT_AVAILABLE)
- try {
-
- // Was never called and is aborted or complete
- if ( callback && ( isAbort || xhr.readyState === 4 ) ) {
-
- // Only called once
- callback = undefined;
-
- // Do not keep as active anymore
- if ( handle ) {
- xhr.onreadystatechange = jQuery.noop;
- if ( xhrOnUnloadAbort ) {
- delete xhrCallbacks[ handle ];
- }
- }
-
- // If it's an abort
- if ( isAbort ) {
- // Abort it manually if needed
- if ( xhr.readyState !== 4 ) {
- xhr.abort();
- }
- } else {
- status = xhr.status;
- responseHeaders = xhr.getAllResponseHeaders();
- responses = {};
- xml = xhr.responseXML;
-
- // Construct response list
- if ( xml && xml.documentElement /* #4958 */ ) {
- responses.xml = xml;
- }
- responses.text = xhr.responseText;
-
- // Firefox throws an exception when accessing
- // statusText for faulty cross-domain requests
- try {
- statusText = xhr.statusText;
- } catch( e ) {
- // We normalize with Webkit giving an empty statusText
- statusText = "";
- }
-
- // Filter status for non standard behaviors
-
- // If the request is local and we have data: assume a success
- // (success with no data won't get notified, that's the best we
- // can do given current implementations)
- if ( !status && s.isLocal && !s.crossDomain ) {
- status = responses.text ? 200 : 404;
- // IE - #1450: sometimes returns 1223 when it should be 204
- } else if ( status === 1223 ) {
- status = 204;
- }
- }
- }
- } catch( firefoxAccessException ) {
- if ( !isAbort ) {
- complete( -1, firefoxAccessException );
- }
- }
-
- // Call complete if needed
- if ( responses ) {
- complete( status, statusText, responses, responseHeaders );
- }
- };
-
- // if we're in sync mode or it's in cache
- // and has been retrieved directly (IE6 & IE7)
- // we need to manually fire the callback
- if ( !s.async || xhr.readyState === 4 ) {
- callback();
- } else {
- handle = ++xhrId;
- if ( xhrOnUnloadAbort ) {
- // Create the active xhrs callbacks list if needed
- // and attach the unload handler
- if ( !xhrCallbacks ) {
- xhrCallbacks = {};
- jQuery( window ).unload( xhrOnUnloadAbort );
- }
- // Add to list of active xhrs callbacks
- xhrCallbacks[ handle ] = callback;
- }
- xhr.onreadystatechange = callback;
- }
- },
-
- abort: function() {
- if ( callback ) {
- callback(0,1);
- }
- }
- };
- }
- });
-}
-
-
-
-
-var elemdisplay = {},
- iframe, iframeDoc,
- rfxtypes = /^(?:toggle|show|hide)$/,
- rfxnum = /^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,
- timerId,
- fxAttrs = [
- // height animations
- [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
- // width animations
- [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
- // opacity animations
- [ "opacity" ]
- ],
- fxNow;
-
-jQuery.fn.extend({
- show: function( speed, easing, callback ) {
- var elem, display;
-
- if ( speed || speed === 0 ) {
- return this.animate( genFx("show", 3), speed, easing, callback);
-
- } else {
- for ( var i = 0, j = this.length; i < j; i++ ) {
- elem = this[i];
-
- if ( elem.style ) {
- display = elem.style.display;
-
- // Reset the inline display of this element to learn if it is
- // being hidden by cascaded rules or not
- if ( !jQuery._data(elem, "olddisplay") && display === "none" ) {
- display = elem.style.display = "";
- }
-
- // Set elements which have been overridden with display: none
- // in a stylesheet to whatever the default browser style is
- // for such an element
- if ( display === "" && jQuery.css( elem, "display" ) === "none" ) {
- jQuery._data(elem, "olddisplay", defaultDisplay(elem.nodeName));
- }
- }
- }
-
- // Set the display of most of the elements in a second loop
- // to avoid the constant reflow
- for ( i = 0; i < j; i++ ) {
- elem = this[i];
-
- if ( elem.style ) {
- display = elem.style.display;
-
- if ( display === "" || display === "none" ) {
- elem.style.display = jQuery._data(elem, "olddisplay") || "";
- }
- }
- }
-
- return this;
- }
- },
-
- hide: function( speed, easing, callback ) {
- if ( speed || speed === 0 ) {
- return this.animate( genFx("hide", 3), speed, easing, callback);
-
- } else {
- for ( var i = 0, j = this.length; i < j; i++ ) {
- if ( this[i].style ) {
- var display = jQuery.css( this[i], "display" );
-
- if ( display !== "none" && !jQuery._data( this[i], "olddisplay" ) ) {
- jQuery._data( this[i], "olddisplay", display );
- }
- }
- }
-
- // Set the display of the elements in a second loop
- // to avoid the constant reflow
- for ( i = 0; i < j; i++ ) {
- if ( this[i].style ) {
- this[i].style.display = "none";
- }
- }
-
- return this;
- }
- },
-
- // Save the old toggle function
- _toggle: jQuery.fn.toggle,
-
- toggle: function( fn, fn2, callback ) {
- var bool = typeof fn === "boolean";
-
- if ( jQuery.isFunction(fn) && jQuery.isFunction(fn2) ) {
- this._toggle.apply( this, arguments );
-
- } else if ( fn == null || bool ) {
- this.each(function() {
- var state = bool ? fn : jQuery(this).is(":hidden");
- jQuery(this)[ state ? "show" : "hide" ]();
- });
-
- } else {
- this.animate(genFx("toggle", 3), fn, fn2, callback);
- }
-
- return this;
- },
-
- fadeTo: function( speed, to, easing, callback ) {
- return this.filter(":hidden").css("opacity", 0).show().end()
- .animate({opacity: to}, speed, easing, callback);
- },
-
- animate: function( prop, speed, easing, callback ) {
- var optall = jQuery.speed(speed, easing, callback);
-
- if ( jQuery.isEmptyObject( prop ) ) {
- return this.each( optall.complete, [ false ] );
- }
-
- // Do not change referenced properties as per-property easing will be lost
- prop = jQuery.extend( {}, prop );
-
- return this[ optall.queue === false ? "each" : "queue" ](function() {
- // XXX 'this' does not always have a nodeName when running the
- // test suite
-
- if ( optall.queue === false ) {
- jQuery._mark( this );
- }
-
- var opt = jQuery.extend( {}, optall ),
- isElement = this.nodeType === 1,
- hidden = isElement && jQuery(this).is(":hidden"),
- name, val, p,
- display, e,
- parts, start, end, unit;
-
- // will store per property easing and be used to determine when an animation is complete
- opt.animatedProperties = {};
-
- for ( p in prop ) {
-
- // property name normalization
- name = jQuery.camelCase( p );
- if ( p !== name ) {
- prop[ name ] = prop[ p ];
- delete prop[ p ];
- }
-
- val = prop[ name ];
-
- // easing resolution: per property > opt.specialEasing > opt.easing > 'swing' (default)
- if ( jQuery.isArray( val ) ) {
- opt.animatedProperties[ name ] = val[ 1 ];
- val = prop[ name ] = val[ 0 ];
- } else {
- opt.animatedProperties[ name ] = opt.specialEasing && opt.specialEasing[ name ] || opt.easing || 'swing';
- }
-
- if ( val === "hide" && hidden || val === "show" && !hidden ) {
- return opt.complete.call( this );
- }
-
- if ( isElement && ( name === "height" || name === "width" ) ) {
- // Make sure that nothing sneaks out
- // Record all 3 overflow attributes because IE does not
- // change the overflow attribute when overflowX and
- // overflowY are set to the same value
- opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
-
- // Set display property to inline-block for height/width
- // animations on inline elements that are having width/height
- // animated
- if ( jQuery.css( this, "display" ) === "inline" &&
- jQuery.css( this, "float" ) === "none" ) {
- if ( !jQuery.support.inlineBlockNeedsLayout ) {
- this.style.display = "inline-block";
-
- } else {
- display = defaultDisplay( this.nodeName );
-
- // inline-level elements accept inline-block;
- // block-level elements need to be inline with layout
- if ( display === "inline" ) {
- this.style.display = "inline-block";
-
- } else {
- this.style.display = "inline";
- this.style.zoom = 1;
- }
- }
- }
- }
- }
-
- if ( opt.overflow != null ) {
- this.style.overflow = "hidden";
- }
-
- for ( p in prop ) {
- e = new jQuery.fx( this, opt, p );
- val = prop[ p ];
-
- if ( rfxtypes.test(val) ) {
- e[ val === "toggle" ? hidden ? "show" : "hide" : val ]();
-
- } else {
- parts = rfxnum.exec( val );
- start = e.cur();
-
- if ( parts ) {
- end = parseFloat( parts[2] );
- unit = parts[3] || ( jQuery.cssNumber[ p ] ? "" : "px" );
-
- // We need to compute starting value
- if ( unit !== "px" ) {
- jQuery.style( this, p, (end || 1) + unit);
- start = ((end || 1) / e.cur()) * start;
- jQuery.style( this, p, start + unit);
- }
-
- // If a +=/-= token was provided, we're doing a relative animation
- if ( parts[1] ) {
- end = ( (parts[ 1 ] === "-=" ? -1 : 1) * end ) + start;
- }
-
- e.custom( start, end, unit );
-
- } else {
- e.custom( start, val, "" );
- }
- }
- }
-
- // For JS strict compliance
- return true;
- });
- },
-
- stop: function( clearQueue, gotoEnd ) {
- if ( clearQueue ) {
- this.queue([]);
- }
-
- this.each(function() {
- var timers = jQuery.timers,
- i = timers.length;
- // clear marker counters if we know they won't be
- if ( !gotoEnd ) {
- jQuery._unmark( true, this );
- }
- while ( i-- ) {
- if ( timers[i].elem === this ) {
- if (gotoEnd) {
- // force the next step to be the last
- timers[i](true);
- }
-
- timers.splice(i, 1);
- }
- }
- });
-
- // start the next in the queue if the last step wasn't forced
- if ( !gotoEnd ) {
- this.dequeue();
- }
-
- return this;
- }
-
-});
-
-// Animations created synchronously will run synchronously
-function createFxNow() {
- setTimeout( clearFxNow, 0 );
- return ( fxNow = jQuery.now() );
-}
-
-function clearFxNow() {
- fxNow = undefined;
-}
-
-// Generate parameters to create a standard animation
-function genFx( type, num ) {
- var obj = {};
-
- jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice(0,num)), function() {
- obj[ this ] = type;
- });
-
- return obj;
-}
-
-// Generate shortcuts for custom animations
-jQuery.each({
- slideDown: genFx("show", 1),
- slideUp: genFx("hide", 1),
- slideToggle: genFx("toggle", 1),
- fadeIn: { opacity: "show" },
- fadeOut: { opacity: "hide" },
- fadeToggle: { opacity: "toggle" }
-}, function( name, props ) {
- jQuery.fn[ name ] = function( speed, easing, callback ) {
- return this.animate( props, speed, easing, callback );
- };
-});
-
-jQuery.extend({
- speed: function( speed, easing, fn ) {
- var opt = speed && typeof speed === "object" ? jQuery.extend({}, speed) : {
- complete: fn || !fn && easing ||
- jQuery.isFunction( speed ) && speed,
- duration: speed,
- easing: fn && easing || easing && !jQuery.isFunction(easing) && easing
- };
-
- opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
- opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[opt.duration] : jQuery.fx.speeds._default;
-
- // Queueing
- opt.old = opt.complete;
- opt.complete = function( noUnmark ) {
- if ( jQuery.isFunction( opt.old ) ) {
- opt.old.call( this );
- }
-
- if ( opt.queue !== false ) {
- jQuery.dequeue( this );
- } else if ( noUnmark !== false ) {
- jQuery._unmark( this );
- }
- };
-
- return opt;
- },
-
- easing: {
- linear: function( p, n, firstNum, diff ) {
- return firstNum + diff * p;
- },
- swing: function( p, n, firstNum, diff ) {
- return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
- }
- },
-
- timers: [],
-
- fx: function( elem, options, prop ) {
- this.options = options;
- this.elem = elem;
- this.prop = prop;
-
- options.orig = options.orig || {};
- }
-
-});
-
-jQuery.fx.prototype = {
- // Simple function for setting a style value
- update: function() {
- if ( this.options.step ) {
- this.options.step.call( this.elem, this.now, this );
- }
-
- (jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this );
- },
-
- // Get the current size
- cur: function() {
- if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
- return this.elem[ this.prop ];
- }
-
- var parsed,
- r = jQuery.css( this.elem, this.prop );
- // Empty strings, null, undefined and "auto" are converted to 0,
- // complex values such as "rotate(1rad)" are returned as is,
- // simple values such as "10px" are parsed to Float.
- return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;
- },
-
- // Start an animation from one number to another
- custom: function( from, to, unit ) {
- var self = this,
- fx = jQuery.fx;
-
- this.startTime = fxNow || createFxNow();
- this.start = from;
- this.end = to;
- this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
- this.now = this.start;
- this.pos = this.state = 0;
-
- function t( gotoEnd ) {
- return self.step(gotoEnd);
- }
-
- t.elem = this.elem;
-
- if ( t() && jQuery.timers.push(t) && !timerId ) {
- timerId = setInterval( fx.tick, fx.interval );
- }
- },
-
- // Simple 'show' function
- show: function() {
- // Remember where we started, so that we can go back to it later
- this.options.orig[this.prop] = jQuery.style( this.elem, this.prop );
- this.options.show = true;
-
- // Begin the animation
- // Make sure that we start at a small width/height to avoid any
- // flash of content
- this.custom(this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur());
-
- // Start by showing the element
- jQuery( this.elem ).show();
- },
-
- // Simple 'hide' function
- hide: function() {
- // Remember where we started, so that we can go back to it later
- this.options.orig[this.prop] = jQuery.style( this.elem, this.prop );
- this.options.hide = true;
-
- // Begin the animation
- this.custom(this.cur(), 0);
- },
-
- // Each step of an animation
- step: function( gotoEnd ) {
- var t = fxNow || createFxNow(),
- done = true,
- elem = this.elem,
- options = this.options,
- i, n;
-
- if ( gotoEnd || t >= options.duration + this.startTime ) {
- this.now = this.end;
- this.pos = this.state = 1;
- this.update();
-
- options.animatedProperties[ this.prop ] = true;
-
- for ( i in options.animatedProperties ) {
- if ( options.animatedProperties[i] !== true ) {
- done = false;
- }
- }
-
- if ( done ) {
- // Reset the overflow
- if ( options.overflow != null && !jQuery.support.shrinkWrapBlocks ) {
-
- jQuery.each( [ "", "X", "Y" ], function (index, value) {
- elem.style[ "overflow" + value ] = options.overflow[index];
- });
- }
-
- // Hide the element if the "hide" operation was done
- if ( options.hide ) {
- jQuery(elem).hide();
- }
-
- // Reset the properties, if the item has been hidden or shown
- if ( options.hide || options.show ) {
- for ( var p in options.animatedProperties ) {
- jQuery.style( elem, p, options.orig[p] );
- }
- }
-
- // Execute the complete function
- options.complete.call( elem );
- }
-
- return false;
-
- } else {
- // classical easing cannot be used with an Infinity duration
- if ( options.duration == Infinity ) {
- this.now = t;
- } else {
- n = t - this.startTime;
- this.state = n / options.duration;
-
- // Perform the easing function, defaults to swing
- this.pos = jQuery.easing[ options.animatedProperties[ this.prop ] ]( this.state, n, 0, 1, options.duration );
- this.now = this.start + ((this.end - this.start) * this.pos);
- }
- // Perform the next step of the animation
- this.update();
- }
-
- return true;
- }
-};
-
-jQuery.extend( jQuery.fx, {
- tick: function() {
- for ( var timers = jQuery.timers, i = 0 ; i < timers.length ; ++i ) {
- if ( !timers[i]() ) {
- timers.splice(i--, 1);
- }
- }
-
- if ( !timers.length ) {
- jQuery.fx.stop();
- }
- },
-
- interval: 13,
-
- stop: function() {
- clearInterval( timerId );
- timerId = null;
- },
-
- speeds: {
- slow: 600,
- fast: 200,
- // Default speed
- _default: 400
- },
-
- step: {
- opacity: function( fx ) {
- jQuery.style( fx.elem, "opacity", fx.now );
- },
-
- _default: function( fx ) {
- if ( fx.elem.style && fx.elem.style[ fx.prop ] != null ) {
- fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;
- } else {
- fx.elem[ fx.prop ] = fx.now;
- }
- }
- }
-});
-
-if ( jQuery.expr && jQuery.expr.filters ) {
- jQuery.expr.filters.animated = function( elem ) {
- return jQuery.grep(jQuery.timers, function( fn ) {
- return elem === fn.elem;
- }).length;
- };
-}
-
-// Try to restore the default display value of an element
-function defaultDisplay( nodeName ) {
-
- if ( !elemdisplay[ nodeName ] ) {
-
- var body = document.body,
- elem = jQuery( "<" + nodeName + ">" ).appendTo( body ),
- display = elem.css( "display" );
-
- elem.remove();
-
- // If the simple way fails,
- // get element's real default display by attaching it to a temp iframe
- if ( display === "none" || display === "" ) {
- // No iframe to use yet, so create it
- if ( !iframe ) {
- iframe = document.createElement( "iframe" );
- iframe.frameBorder = iframe.width = iframe.height = 0;
- }
-
- body.appendChild( iframe );
-
- // Create a cacheable copy of the iframe document on first call.
- // IE and Opera will allow us to reuse the iframeDoc without re-writing the fake HTML
- // document to it; WebKit & Firefox won't allow reusing the iframe document.
- if ( !iframeDoc || !iframe.createElement ) {
- iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document;
- iframeDoc.write( ( document.compatMode === "CSS1Compat" ? "<!doctype html>" : "" ) + "<html><body>" );
- iframeDoc.close();
- }
-
- elem = iframeDoc.createElement( nodeName );
-
- iframeDoc.body.appendChild( elem );
-
- display = jQuery.css( elem, "display" );
-
- body.removeChild( iframe );
- }
-
- // Store the correct default display
- elemdisplay[ nodeName ] = display;
- }
-
- return elemdisplay[ nodeName ];
-}
-
-
-
-
-var rtable = /^t(?:able|d|h)$/i,
- rroot = /^(?:body|html)$/i;
-
-if ( "getBoundingClientRect" in document.documentElement ) {
- jQuery.fn.offset = function( options ) {
- var elem = this[0], box;
-
- if ( options ) {
- return this.each(function( i ) {
- jQuery.offset.setOffset( this, options, i );
- });
- }
-
- if ( !elem || !elem.ownerDocument ) {
- return null;
- }
-
- if ( elem === elem.ownerDocument.body ) {
- return jQuery.offset.bodyOffset( elem );
- }
-
- try {
- box = elem.getBoundingClientRect();
- } catch(e) {}
-
- var doc = elem.ownerDocument,
- docElem = doc.documentElement;
-
- // Make sure we're not dealing with a disconnected DOM node
- if ( !box || !jQuery.contains( docElem, elem ) ) {
- return box ? { top: box.top, left: box.left } : { top: 0, left: 0 };
- }
-
- var body = doc.body,
- win = getWindow(doc),
- clientTop = docElem.clientTop || body.clientTop || 0,
- clientLeft = docElem.clientLeft || body.clientLeft || 0,
- scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop,
- scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
- top = box.top + scrollTop - clientTop,
- left = box.left + scrollLeft - clientLeft;
-
- return { top: top, left: left };
- };
-
-} else {
- jQuery.fn.offset = function( options ) {
- var elem = this[0];
-
- if ( options ) {
- return this.each(function( i ) {
- jQuery.offset.setOffset( this, options, i );
- });
- }
-
- if ( !elem || !elem.ownerDocument ) {
- return null;
- }
-
- if ( elem === elem.ownerDocument.body ) {
- return jQuery.offset.bodyOffset( elem );
- }
-
- jQuery.offset.initialize();
-
- var computedStyle,
- offsetParent = elem.offsetParent,
- prevOffsetParent = elem,
- doc = elem.ownerDocument,
- docElem = doc.documentElement,
- body = doc.body,
- defaultView = doc.defaultView,
- prevComputedStyle = defaultView ? defaultView.getComputedStyle( elem, null ) : elem.currentStyle,
- top = elem.offsetTop,
- left = elem.offsetLeft;
-
- while ( (elem = elem.parentNode) && elem !== body && elem !== docElem ) {
- if ( jQuery.offset.supportsFixedPosition && prevComputedStyle.position === "fixed" ) {
- break;
- }
-
- computedStyle = defaultView ? defaultView.getComputedStyle(elem, null) : elem.currentStyle;
- top -= elem.scrollTop;
- left -= elem.scrollLeft;
-
- if ( elem === offsetParent ) {
- top += elem.offsetTop;
- left += elem.offsetLeft;
-
- if ( jQuery.offset.doesNotAddBorder && !(jQuery.offset.doesAddBorderForTableAndCells && rtable.test(elem.nodeName)) ) {
- top += parseFloat( computedStyle.borderTopWidth ) || 0;
- left += parseFloat( computedStyle.borderLeftWidth ) || 0;
- }
-
- prevOffsetParent = offsetParent;
- offsetParent = elem.offsetParent;
- }
-
- if ( jQuery.offset.subtractsBorderForOverflowNotVisible && computedStyle.overflow !== "visible" ) {
- top += parseFloat( computedStyle.borderTopWidth ) || 0;
- left += parseFloat( computedStyle.borderLeftWidth ) || 0;
- }
-
- prevComputedStyle = computedStyle;
- }
-
- if ( prevComputedStyle.position === "relative" || prevComputedStyle.position === "static" ) {
- top += body.offsetTop;
- left += body.offsetLeft;
- }
-
- if ( jQuery.offset.supportsFixedPosition && prevComputedStyle.position === "fixed" ) {
- top += Math.max( docElem.scrollTop, body.scrollTop );
- left += Math.max( docElem.scrollLeft, body.scrollLeft );
- }
-
- return { top: top, left: left };
- };
-}
-
-jQuery.offset = {
- initialize: function() {
- var body = document.body, container = document.createElement("div"), innerDiv, checkDiv, table, td, bodyMarginTop = parseFloat( jQuery.css(body, "marginTop") ) || 0,
- html = "<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>";
-
- jQuery.extend( container.style, { position: "absolute", top: 0, left: 0, margin: 0, border: 0, width: "1px", height: "1px", visibility: "hidden" } );
-
- container.innerHTML = html;
- body.insertBefore( container, body.firstChild );
- innerDiv = container.firstChild;
- checkDiv = innerDiv.firstChild;
- td = innerDiv.nextSibling.firstChild.firstChild;
-
- this.doesNotAddBorder = (checkDiv.offsetTop !== 5);
- this.doesAddBorderForTableAndCells = (td.offsetTop === 5);
-
- checkDiv.style.position = "fixed";
- checkDiv.style.top = "20px";
-
- // safari subtracts parent border width here which is 5px
- this.supportsFixedPosition = (checkDiv.offsetTop === 20 || checkDiv.offsetTop === 15);
- checkDiv.style.position = checkDiv.style.top = "";
-
- innerDiv.style.overflow = "hidden";
- innerDiv.style.position = "relative";
-
- this.subtractsBorderForOverflowNotVisible = (checkDiv.offsetTop === -5);
-
- this.doesNotIncludeMarginInBodyOffset = (body.offsetTop !== bodyMarginTop);
-
- body.removeChild( container );
- jQuery.offset.initialize = jQuery.noop;
- },
-
- bodyOffset: function( body ) {
- var top = body.offsetTop,
- left = body.offsetLeft;
-
- jQuery.offset.initialize();
-
- if ( jQuery.offset.doesNotIncludeMarginInBodyOffset ) {
- top += parseFloat( jQuery.css(body, "marginTop") ) || 0;
- left += parseFloat( jQuery.css(body, "marginLeft") ) || 0;
- }
-
- return { top: top, left: left };
- },
-
- setOffset: function( elem, options, i ) {
- var position = jQuery.css( elem, "position" );
-
- // set position first, in-case top/left are set even on static elem
- if ( position === "static" ) {
- elem.style.position = "relative";
- }
-
- var curElem = jQuery( elem ),
- curOffset = curElem.offset(),
- curCSSTop = jQuery.css( elem, "top" ),
- curCSSLeft = jQuery.css( elem, "left" ),
- calculatePosition = (position === "absolute" || position === "fixed") && jQuery.inArray("auto", [curCSSTop, curCSSLeft]) > -1,
- props = {}, curPosition = {}, curTop, curLeft;
-
- // need to be able to calculate position if either top or left is auto and position is either absolute or fixed
- if ( calculatePosition ) {
- curPosition = curElem.position();
- curTop = curPosition.top;
- curLeft = curPosition.left;
- } else {
- curTop = parseFloat( curCSSTop ) || 0;
- curLeft = parseFloat( curCSSLeft ) || 0;
- }
-
- if ( jQuery.isFunction( options ) ) {
- options = options.call( elem, i, curOffset );
- }
-
- if (options.top != null) {
- props.top = (options.top - curOffset.top) + curTop;
- }
- if (options.left != null) {
- props.left = (options.left - curOffset.left) + curLeft;
- }
-
- if ( "using" in options ) {
- options.using.call( elem, props );
- } else {
- curElem.css( props );
- }
- }
-};
-
-
-jQuery.fn.extend({
- position: function() {
- if ( !this[0] ) {
- return null;
- }
-
- var elem = this[0],
-
- // Get *real* offsetParent
- offsetParent = this.offsetParent(),
-
- // Get correct offsets
- offset = this.offset(),
- parentOffset = rroot.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset();
-
- // Subtract element margins
- // note: when an element has margin: auto the offsetLeft and marginLeft
- // are the same in Safari causing offset.left to incorrectly be 0
- offset.top -= parseFloat( jQuery.css(elem, "marginTop") ) || 0;
- offset.left -= parseFloat( jQuery.css(elem, "marginLeft") ) || 0;
-
- // Add offsetParent borders
- parentOffset.top += parseFloat( jQuery.css(offsetParent[0], "borderTopWidth") ) || 0;
- parentOffset.left += parseFloat( jQuery.css(offsetParent[0], "borderLeftWidth") ) || 0;
-
- // Subtract the two offsets
- return {
- top: offset.top - parentOffset.top,
- left: offset.left - parentOffset.left
- };
- },
-
- offsetParent: function() {
- return this.map(function() {
- var offsetParent = this.offsetParent || document.body;
- while ( offsetParent && (!rroot.test(offsetParent.nodeName) && jQuery.css(offsetParent, "position") === "static") ) {
- offsetParent = offsetParent.offsetParent;
- }
- return offsetParent;
- });
- }
-});
-
-
-// Create scrollLeft and scrollTop methods
-jQuery.each( ["Left", "Top"], function( i, name ) {
- var method = "scroll" + name;
-
- jQuery.fn[ method ] = function( val ) {
- var elem, win;
-
- if ( val === undefined ) {
- elem = this[ 0 ];
-
- if ( !elem ) {
- return null;
- }
-
- win = getWindow( elem );
-
- // Return the scroll offset
- return win ? ("pageXOffset" in win) ? win[ i ? "pageYOffset" : "pageXOffset" ] :
- jQuery.support.boxModel && win.document.documentElement[ method ] ||
- win.document.body[ method ] :
- elem[ method ];
- }
-
- // Set the scroll offset
- return this.each(function() {
- win = getWindow( this );
-
- if ( win ) {
- win.scrollTo(
- !i ? val : jQuery( win ).scrollLeft(),
- i ? val : jQuery( win ).scrollTop()
- );
-
- } else {
- this[ method ] = val;
- }
- });
- };
-});
-
-function getWindow( elem ) {
- return jQuery.isWindow( elem ) ?
- elem :
- elem.nodeType === 9 ?
- elem.defaultView || elem.parentWindow :
- false;
-}
-
-
-
-
-// Create width, height, innerHeight, innerWidth, outerHeight and outerWidth methods
-jQuery.each([ "Height", "Width" ], function( i, name ) {
-
- var type = name.toLowerCase();
-
- // innerHeight and innerWidth
- jQuery.fn[ "inner" + name ] = function() {
- var elem = this[0];
- return elem && elem.style ?
- parseFloat( jQuery.css( elem, type, "padding" ) ) :
- null;
- };
-
- // outerHeight and outerWidth
- jQuery.fn[ "outer" + name ] = function( margin ) {
- var elem = this[0];
- return elem && elem.style ?
- parseFloat( jQuery.css( elem, type, margin ? "margin" : "border" ) ) :
- null;
- };
-
- jQuery.fn[ type ] = function( size ) {
- // Get window width or height
- var elem = this[0];
- if ( !elem ) {
- return size == null ? null : this;
- }
-
- if ( jQuery.isFunction( size ) ) {
- return this.each(function( i ) {
- var self = jQuery( this );
- self[ type ]( size.call( this, i, self[ type ]() ) );
- });
- }
-
- if ( jQuery.isWindow( elem ) ) {
- // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
- // 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat
- var docElemProp = elem.document.documentElement[ "client" + name ],
- body = elem.document.body;
- return elem.document.compatMode === "CSS1Compat" && docElemProp ||
- body && body[ "client" + name ] || docElemProp;
-
- // Get document width or height
- } else if ( elem.nodeType === 9 ) {
- // Either scroll[Width/Height] or offset[Width/Height], whichever is greater
- return Math.max(
- elem.documentElement["client" + name],
- elem.body["scroll" + name], elem.documentElement["scroll" + name],
- elem.body["offset" + name], elem.documentElement["offset" + name]
- );
-
- // Get or set width or height on the element
- } else if ( size === undefined ) {
- var orig = jQuery.css( elem, type ),
- ret = parseFloat( orig );
-
- return jQuery.isNaN( ret ) ? orig : ret;
-
- // Set the width or height on the element (default to pixels if value is unitless)
- } else {
- return this.css( type, typeof size === "string" ? size : size + "px" );
- }
- };
-
-});
-
-
-// Expose jQuery to the global object
-window.jQuery = window.$ = jQuery;
-})(window);
+++ /dev/null
-/*
-* "buttons" plugin - for making button-like links
-*/
-
-( function( $, undefined ) {
-
-$.fn.buttonMarkup = function( options ) {
- options = options || {};
-
- for ( var i = 0; i < this.length; i++ ) {
- var el = this.eq( i ),
- e = el[ 0 ],
- o = $.extend( {}, $.fn.buttonMarkup.defaults, {
- icon: options.icon !== undefined ? options.icon : el.jqmData( "icon" ),
- iconpos: options.iconpos !== undefined ? options.iconpos : el.jqmData( "iconpos" ),
- theme: options.theme !== undefined ? options.theme : el.jqmData( "theme" ),
- inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ),
- shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ),
- corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ),
- iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" )
- }, options ),
-
- // Classes Defined
- innerClass = "ui-btn-inner",
- textClass = "ui-btn-text",
- buttonClass, iconClass,
-
- // Button inner markup
- buttonInner = document.createElement( o.wrapperEls ),
- buttonText = document.createElement( o.wrapperEls ),
- buttonIcon = o.icon ? document.createElement( "span" ) : null;
-
- if ( attachEvents ) {
- attachEvents();
- }
-
- // if not, try to find closest theme container
- if ( !o.theme ) {
- o.theme = $.mobile.getInheritedTheme( el, "c" );
- }
-
- buttonClass = "ui-btn ui-btn-up-" + o.theme;
-
- if ( o.inline ) {
- buttonClass += " ui-btn-inline";
- }
-
- if ( o.icon ) {
- o.icon = "ui-icon-" + o.icon;
- o.iconpos = o.iconpos || "left";
-
- iconClass = "ui-icon " + o.icon;
-
- if ( o.iconshadow ) {
- iconClass += " ui-icon-shadow";
- }
- }
-
- if ( o.iconpos ) {
- buttonClass += " ui-btn-icon-" + o.iconpos;
-
- if ( o.iconpos == "notext" && !el.attr( "title" ) ) {
- el.attr( "title", el.getEncodedText() );
- }
- }
-
- if ( o.corners ) {
- buttonClass += " ui-btn-corner-all";
- innerClass += " ui-btn-corner-all";
- }
-
- if ( o.shadow ) {
- buttonClass += " ui-shadow";
- }
-
- e.setAttribute( "data-" + $.mobile.ns + "theme", o.theme );
- el.addClass( buttonClass );
-
- buttonInner.className = innerClass;
- buttonInner.setAttribute("aria-hidden", "true");
-
- buttonText.className = textClass;
- buttonInner.appendChild( buttonText );
-
- if ( buttonIcon ) {
- buttonIcon.className = iconClass;
- buttonInner.appendChild( buttonIcon );
- }
-
- while ( e.firstChild ) {
- buttonText.appendChild( e.firstChild );
- }
-
- e.appendChild( buttonInner );
-
- // TODO obviously it would be nice to pull this element out instead of
- // retrieving it from the DOM again, but this change is much less obtrusive
- // and 1.0 draws nigh
- $.data( e, 'textWrapper', $( buttonText ) );
- }
-
- return this;
-};
-
-$.fn.buttonMarkup.defaults = {
- corners: true,
- shadow: true,
- iconshadow: true,
- inline: false,
- wrapperEls: "span"
-};
-
-function closestEnabledButton( element ) {
- var cname;
-
- while ( element ) {
- // Note that we check for typeof className below because the element we
- // handed could be in an SVG DOM where className on SVG elements is defined to
- // be of a different type (SVGAnimatedString). We only operate on HTML DOM
- // elements, so we look for plain "string".
-
- cname = ( typeof element.className === 'string' ) && element.className.split(' ');
-
- if ( cname && $.inArray( "ui-btn", cname ) > -1 && $.inArray( "ui-disabled", cname ) < 0 ) {
- break;
- }
- element = element.parentNode;
- }
-
- return element;
-}
-
-var attachEvents = function() {
- $( document ).bind( {
- "vmousedown": function( event ) {
- var btn = closestEnabledButton( event.target ),
- $btn, theme;
-
- if ( btn ) {
- $btn = $( btn );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
- $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
- }
- },
- "vmousecancel vmouseup": function( event ) {
- var btn = closestEnabledButton( event.target ),
- $btn, theme;
-
- if ( btn ) {
- $btn = $( btn );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
- $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
- }
- },
- "vmouseover focus": function( event ) {
- var btn = closestEnabledButton( event.target ),
- $btn, theme;
-
- if ( btn ) {
- $btn = $( btn );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
- $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
- }
- },
- "vmouseout blur": function( event ) {
- var btn = closestEnabledButton( event.target ),
- $btn, theme;
-
- if ( btn ) {
- $btn = $( btn );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
- $btn.removeClass( "ui-btn-hover-" + theme + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
- }
- }
- });
-
- attachEvents = null;
-};
-
-//links in bars, or those with data-role become buttons
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
-
- $( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", e.target )
- .not( ".ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )
- .buttonMarkup();
-});
-
-})( jQuery );
+++ /dev/null
-/*
-* "collapsible" plugin
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.collapsible", $.mobile.widget, {
- options: {
- expandCueText: " click to expand contents",
- collapseCueText: " click to collapse contents",
- collapsed: true,
- heading: "h1,h2,h3,h4,h5,h6,legend",
- theme: null,
- contentTheme: null,
- iconTheme: "d",
- initSelector: ":jqmData(role='collapsible')"
- },
- _create: function() {
-
- var $el = this.element,
- o = this.options,
- collapsible = $el.addClass( "ui-collapsible" ),
- collapsibleHeading = $el.children( o.heading ).first(),
- collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
- collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
- collapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
-
- // Replace collapsibleHeading if it's a legend
- if ( collapsibleHeading.is( "legend" ) ) {
- collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
- collapsibleHeading.next().remove();
- }
-
- // If we are in a collapsible set
- if ( collapsibleSet.length ) {
- // Inherit the theme from collapsible-set
- if ( !o.theme ) {
- o.theme = collapsibleSet.jqmData( "theme" );
- }
- // Inherit the content-theme from collapsible-set
- if ( !o.contentTheme ) {
- o.contentTheme = collapsibleSet.jqmData( "content-theme" );
- }
- }
-
- collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
-
- collapsibleHeading
- //drop heading in before content
- .insertBefore( collapsibleContent )
- //modify markup & attributes
- .addClass( "ui-collapsible-heading" )
- .append( "<span class='ui-collapsible-heading-status'></span>" )
- .wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
- .find( "a" )
- .first()
- .buttonMarkup({
- shadow: false,
- corners: false,
- iconPos: "left",
- icon: "plus",
- theme: o.theme
- });
-
- if ( !collapsibleSet.length ) {
- collapsibleHeading
- .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
- .addClass( "ui-corner-top ui-corner-bottom" );
- } else {
- // If we are in a collapsible set
-
- // Initialize the collapsible set if it's not already initialized
- if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) {
-
- collapsibleSet
- .jqmData( "collapsiblebound", true )
- .bind( "expand", function( event ) {
-
- $( event.target )
- .closest( ".ui-collapsible" )
- .siblings( ".ui-collapsible" )
- .trigger( "collapse" );
-
- });
- }
-
- collapsiblesInSet.first()
- .find( "a" )
- .first()
- .addClass( "ui-corner-top" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-top" );
-
- collapsiblesInSet.last()
- .jqmData( "collapsible-last", true )
- .find( "a" )
- .first()
- .addClass( "ui-corner-bottom" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-bottom" );
-
-
- if ( collapsible.jqmData( "collapsible-last" ) ) {
- collapsibleHeading
- .find( "a" ).first().add ( collapsibleHeading.find( ".ui-btn-inner" ) )
- .addClass( "ui-corner-bottom" );
- }
- }
-
- //events
- collapsible
- .bind( "expand collapse", function( event ) {
- if ( !event.isDefaultPrevented() ) {
-
- event.preventDefault();
-
- var $this = $( this ),
- isCollapse = ( event.type === "collapse" ),
- contentTheme = o.contentTheme;
-
- collapsibleHeading
- .toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
- .find( ".ui-collapsible-heading-status" )
- .text( isCollapse ? o.expandCueText : o.collapseCueText )
- .end()
- .find( ".ui-icon" )
- .toggleClass( "ui-icon-minus", !isCollapse )
- .toggleClass( "ui-icon-plus", isCollapse );
-
- $this.toggleClass( "ui-collapsible-collapsed", isCollapse );
- collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
-
- if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
- collapsibleHeading
- .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
- .toggleClass( "ui-corner-bottom", isCollapse );
- collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
- }
- collapsibleContent.trigger( "updatelayout" );
- }
- })
- .trigger( o.collapsed ? "collapse" : "expand" );
-
- collapsibleHeading
- .bind( "click", function( event ) {
-
- var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ?
- "expand" : "collapse";
-
- collapsible.trigger( type );
-
- event.preventDefault();
- });
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $( $.mobile.collapsible.prototype.options.initSelector, e.target ).collapsible();
-});
-
-})( jQuery );
+++ /dev/null
-/*
-* "controlgroup" plugin - corner-rounding for groups of buttons, checks, radios, etc
-*/
-
-(function( $, undefined ) {
-
-$.fn.controlgroup = function( options ) {
-
- return this.each(function() {
-
- var $el = $( this ),
- o = $.extend({
- direction: $el.jqmData( "type" ) || "vertical",
- shadow: false,
- excludeInvisible: true
- }, options ),
- groupheading = $el.children( "legend" ),
- flCorners = o.direction == "horizontal" ? [ "ui-corner-left", "ui-corner-right" ] : [ "ui-corner-top", "ui-corner-bottom" ],
- type = $el.find( "input" ).first().attr( "type" );
-
- // Replace legend with more stylable replacement div
- if ( groupheading.length ) {
- $el.wrapInner( "<div class='ui-controlgroup-controls'></div>" );
- $( "<div role='heading' class='ui-controlgroup-label'>" + groupheading.html() + "</div>" ).insertBefore( $el.children(0) );
- groupheading.remove();
- }
-
- $el.addClass( "ui-corner-all ui-controlgroup ui-controlgroup-" + o.direction );
-
- // TODO: This should be moved out to the closure
- // otherwise it is redefined each time controlgroup() is called
- function flipClasses( els ) {
- els.removeClass( "ui-btn-corner-all ui-shadow" )
- .eq( 0 ).addClass( flCorners[ 0 ] )
- .end()
- .last().addClass( flCorners[ 1 ] ).addClass( "ui-controlgroup-last" );
- }
-
- flipClasses( $el.find( ".ui-btn" + ( o.excludeInvisible ? ":visible" : "" ) ) );
- flipClasses( $el.find( ".ui-btn-inner" ) );
-
- if ( o.shadow ) {
- $el.addClass( "ui-shadow" );
- }
- });
-};
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $( ":jqmData(role='controlgroup')", e.target ).controlgroup({ excludeInvisible: false });
-});
-
-})(jQuery);
\ No newline at end of file
+++ /dev/null
-/*
-* "core" - The base file for jQm
-*/
-
-(function( $, window, undefined ) {
-
- var nsNormalizeDict = {};
-
- // jQuery.mobile configurable options
- $.extend( $.mobile, {
-
- // Namespace used framework-wide for data-attrs. Default is no namespace
- ns: "",
-
- // Define the url parameter used for referencing widget-generated sub-pages.
- // Translates to to example.html&ui-page=subpageIdentifier
- // hash segment before &ui-page= is used to make Ajax request
- subPageUrlKey: "ui-page",
-
- // Class assigned to page currently in view, and during transitions
- activePageClass: "ui-page-active",
-
- // Class used for "active" button state, from CSS framework
- activeBtnClass: "ui-btn-active",
-
- // Automatically handle clicks and form submissions through Ajax, when same-domain
- ajaxEnabled: true,
-
- // Automatically load and show pages based on location.hash
- hashListeningEnabled: true,
-
- // disable to prevent jquery from bothering with links
- linkBindingEnabled: true,
-
- // Set default page transition - 'none' for no transitions
- defaultPageTransition: "slide",
-
- // Minimum scroll distance that will be remembered when returning to a page
- minScrollBack: 250,
-
- // Set default dialog transition - 'none' for no transitions
- defaultDialogTransition: "pop",
-
- // Show loading message during Ajax requests
- // if false, message will not appear, but loading classes will still be toggled on html el
- loadingMessage: "loading",
-
- // Error response message - appears when an Ajax page request fails
- pageLoadErrorMessage: "Error Loading Page",
-
- //automatically initialize the DOM when it's ready
- autoInitializePage: true,
-
- pushStateEnabled: true,
-
- // turn of binding to the native orientationchange due to android orientation behavior
- orientationChangeEnabled: true,
-
- // Support conditions that must be met in order to proceed
- // default enhanced qualifications are media query support OR IE 7+
- gradeA: function(){
- return $.support.mediaquery || $.mobile.browser.ie && $.mobile.browser.ie >= 7;
- },
-
- // TODO might be useful upstream in jquery itself ?
- keyCode: {
- ALT: 18,
- BACKSPACE: 8,
- CAPS_LOCK: 20,
- COMMA: 188,
- COMMAND: 91,
- COMMAND_LEFT: 91, // COMMAND
- COMMAND_RIGHT: 93,
- CONTROL: 17,
- DELETE: 46,
- DOWN: 40,
- END: 35,
- ENTER: 13,
- ESCAPE: 27,
- HOME: 36,
- INSERT: 45,
- LEFT: 37,
- MENU: 93, // COMMAND_RIGHT
- NUMPAD_ADD: 107,
- NUMPAD_DECIMAL: 110,
- NUMPAD_DIVIDE: 111,
- NUMPAD_ENTER: 108,
- NUMPAD_MULTIPLY: 106,
- NUMPAD_SUBTRACT: 109,
- PAGE_DOWN: 34,
- PAGE_UP: 33,
- PERIOD: 190,
- RIGHT: 39,
- SHIFT: 16,
- SPACE: 32,
- TAB: 9,
- UP: 38,
- WINDOWS: 91 // COMMAND
- },
-
- // Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
- silentScroll: function( ypos ) {
- if ( $.type( ypos ) !== "number" ) {
- ypos = $.mobile.defaultHomeScroll;
- }
-
- // prevent scrollstart and scrollstop events
- $.event.special.scrollstart.enabled = false;
-
- setTimeout(function() {
- window.scrollTo( 0, ypos );
- $( document ).trigger( "silentscroll", { x: 0, y: ypos });
- }, 20 );
-
- setTimeout(function() {
- $.event.special.scrollstart.enabled = true;
- }, 150 );
- },
-
- // Expose our cache for testing purposes.
- nsNormalizeDict: nsNormalizeDict,
-
- // Take a data attribute property, prepend the namespace
- // and then camel case the attribute string. Add the result
- // to our nsNormalizeDict so we don't have to do this again.
- nsNormalize: function( prop ) {
- if ( !prop ) {
- return;
- }
-
- return nsNormalizeDict[ prop ] || ( nsNormalizeDict[ prop ] = $.camelCase( $.mobile.ns + prop ) );
- },
-
- getInheritedTheme: function( el, defaultTheme ) {
-
- // Find the closest parent with a theme class on it. Note that
- // we are not using $.fn.closest() on purpose here because this
- // method gets called quite a bit and we need it to be as fast
- // as possible.
-
- var e = el[ 0 ],
- ltr = "",
- re = /ui-(bar|body)-([a-z])\b/,
- c, m;
-
- while ( e ) {
- var c = e.className || "";
- if ( ( m = re.exec( c ) ) && ( ltr = m[ 2 ] ) ) {
- // We found a parent with a theme class
- // on it so bail from this loop.
- break;
- }
- e = e.parentNode;
- }
-
- // Return the theme letter we found, if none, return the
- // specified default.
-
- return ltr || defaultTheme || "a";
- }
- });
-
- // Mobile version of data and removeData and hasData methods
- // ensures all data is set and retrieved using jQuery Mobile's data namespace
- $.fn.jqmData = function( prop, value ) {
- var result;
- if ( typeof prop != "undefined" ) {
- result = this.data( prop ? $.mobile.nsNormalize( prop ) : prop, value );
- }
- return result;
- };
-
- $.jqmData = function( elem, prop, value ) {
- var result;
- if ( typeof prop != "undefined" ) {
- result = $.data( elem, prop ? $.mobile.nsNormalize( prop ) : prop, value );
- }
- return result;
- };
-
- $.fn.jqmRemoveData = function( prop ) {
- return this.removeData( $.mobile.nsNormalize( prop ) );
- };
-
- $.jqmRemoveData = function( elem, prop ) {
- return $.removeData( elem, $.mobile.nsNormalize( prop ) );
- };
-
- $.fn.removeWithDependents = function() {
- $.removeWithDependents( this );
- };
-
- $.removeWithDependents = function( elem ) {
- var $elem = $( elem );
-
- ( $elem.jqmData('dependents') || $() ).remove();
- $elem.remove();
- };
-
- $.fn.addDependents = function( newDependents ) {
- $.addDependents( $(this), newDependents );
- };
-
- $.addDependents = function( elem, newDependents ) {
- var dependents = $(elem).jqmData( 'dependents' ) || $();
-
- $(elem).jqmData( 'dependents', $.merge(dependents, newDependents) );
- };
-
- // note that this helper doesn't attempt to handle the callback
- // or setting of an html elements text, its only purpose is
- // to return the html encoded version of the text in all cases. (thus the name)
- $.fn.getEncodedText = function() {
- return $( "<div/>" ).text( $(this).text() ).html();
- };
-
- // Monkey-patching Sizzle to filter the :jqmData selector
- var oldFind = $.find,
- jqmDataRE = /:jqmData\(([^)]*)\)/g;
-
- $.find = function( selector, context, ret, extra ) {
- selector = selector.replace( jqmDataRE, "[data-" + ( $.mobile.ns || "" ) + "$1]" );
-
- return oldFind.call( this, selector, context, ret, extra );
- };
-
- $.extend( $.find, oldFind );
-
- $.find.matches = function( expr, set ) {
- return $.find( expr, null, null, set );
- };
-
- $.find.matchesSelector = function( node, expr ) {
- return $.find( expr, null, null, [ node ] ).length > 0;
- };
-})( jQuery, this );
-
+++ /dev/null
-/*
-* "degradeInputs" plugin - degrades inputs to another type after custom enhancements are made.
-*/
-
-(function( $, undefined ) {
-
-$.mobile.page.prototype.options.degradeInputs = {
- color: false,
- date: false,
- datetime: false,
- "datetime-local": false,
- email: false,
- month: false,
- number: false,
- range: "number",
- search: "text",
- tel: false,
- time: false,
- url: false,
- week: false
-};
-
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
-
- var page = $(e.target).closest(':jqmData(role="page")').data("page"), options;
-
- if( !page ) {
- return;
- }
-
- options = page.options;
-
- // degrade inputs to avoid poorly implemented native functionality
- $( e.target ).find( "input" ).not( page.keepNativeSelector() ).each(function() {
- var $this = $( this ),
- type = this.getAttribute( "type" ),
- optType = options.degradeInputs[ type ] || "text";
-
- if ( options.degradeInputs[ type ] ) {
- var html = $( "<div>" ).html( $this.clone() ).html(),
- // In IE browsers, the type sometimes doesn't exist in the cloned markup, so we replace the closing tag instead
- hasType = html.indexOf( " type=" ) > -1,
- findstr = hasType ? /\s+type=["']?\w+['"]?/ : /\/?>/,
- repstr = " type=\"" + optType + "\" data-" + $.mobile.ns + "type=\"" + type + "\"" + ( hasType ? "" : ">" );
-
- $this.replaceWith( html.replace( findstr, repstr ) );
- }
- });
-
-});
-
-})( jQuery );
\ No newline at end of file
+++ /dev/null
-/*
-* "dialog" plugin.
-*/
-
-(function( $, window, undefined ) {
-
-$.widget( "mobile.dialog", $.mobile.widget, {
- options: {
- closeBtnText : "Close",
- overlayTheme : "a",
- initSelector : ":jqmData(role='dialog')"
- },
- _create: function() {
- var self = this,
- $el = this.element,
- headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" );
-
- $el.addClass( "ui-overlay-" + this.options.overlayTheme );
-
- // Class the markup for dialog styling
- // Set aria role
- $el.attr( "role", "dialog" )
- .addClass( "ui-dialog" )
- .find( ":jqmData(role='header')" )
- .addClass( "ui-corner-top ui-overlay-shadow" )
- .prepend( headerCloseButton )
- .end()
- .find( ":jqmData(role='content'),:jqmData(role='footer')" )
- .addClass( "ui-overlay-shadow" )
- .last()
- .addClass( "ui-corner-bottom" );
-
- // this must be an anonymous function so that select menu dialogs can replace
- // the close method. This is a change from previously just defining data-rel=back
- // on the button and letting nav handle it
- headerCloseButton.bind( "vclick", function() {
- self.close();
- });
-
- /* bind events
- - clicks and submits should use the closing transition that the dialog opened with
- unless a data-transition is specified on the link/form
- - if the click was on the close button, or the link has a data-rel="back" it'll go back in history naturally
- */
- $el.bind( "vclick submit", function( event ) {
- var $target = $( event.target ).closest( event.type === "vclick" ? "a" : "form" ),
- active;
-
- if ( $target.length && !$target.jqmData( "transition" ) ) {
-
- active = $.mobile.urlHistory.getActive() || {};
-
- $target.attr( "data-" + $.mobile.ns + "transition", ( active.transition || $.mobile.defaultDialogTransition ) )
- .attr( "data-" + $.mobile.ns + "direction", "reverse" );
- }
- })
- .bind( "pagehide", function() {
- $( this ).find( "." + $.mobile.activeBtnClass ).removeClass( $.mobile.activeBtnClass );
- });
- },
-
- // Close method goes back in history
- close: function() {
- window.history.back();
- }
-});
-
-//auto self-init widgets
-$( $.mobile.dialog.prototype.options.initSelector ).live( "pagecreate", function(){
- $( this ).dialog();
-});
-
-})( jQuery, this );
+++ /dev/null
-/*
-* "events" plugin - Handles events
-*/
-
-(function( $, window, undefined ) {
-
-// add new event shortcuts
-$.each( ( "touchstart touchmove touchend orientationchange throttledresize " +
- "tap taphold swipe swipeleft swiperight scrollstart scrollstop" ).split( " " ), function( i, name ) {
-
- $.fn[ name ] = function( fn ) {
- return fn ? this.bind( name, fn ) : this.trigger( name );
- };
-
- $.attrFn[ name ] = true;
-});
-
-var supportTouch = $.support.touch,
- scrollEvent = "touchmove scroll",
- touchStartEvent = supportTouch ? "touchstart" : "mousedown",
- touchStopEvent = supportTouch ? "touchend" : "mouseup",
- touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
-
-function triggerCustomEvent( obj, eventType, event ) {
- var originalType = event.type;
- event.type = eventType;
- $.event.handle.call( obj, event );
- event.type = originalType;
-}
-
-// also handles scrollstop
-$.event.special.scrollstart = {
-
- enabled: true,
-
- setup: function() {
-
- var thisObject = this,
- $this = $( thisObject ),
- scrolling,
- timer;
-
- function trigger( event, state ) {
- scrolling = state;
- triggerCustomEvent( thisObject, scrolling ? "scrollstart" : "scrollstop", event );
- }
-
- // iPhone triggers scroll after a small delay; use touchmove instead
- $this.bind( scrollEvent, function( event ) {
-
- if ( !$.event.special.scrollstart.enabled ) {
- return;
- }
-
- if ( !scrolling ) {
- trigger( event, true );
- }
-
- clearTimeout( timer );
- timer = setTimeout(function() {
- trigger( event, false );
- }, 50 );
- });
- }
-};
-
-// also handles taphold
-$.event.special.tap = {
- setup: function() {
- var thisObject = this,
- $this = $( thisObject );
-
- $this.bind( "vmousedown", function( event ) {
-
- if ( event.which && event.which !== 1 ) {
- return false;
- }
-
- var origTarget = event.target,
- origEvent = event.originalEvent,
- timer;
-
- function clearTapTimer() {
- clearTimeout( timer );
- }
-
- function clearTapHandlers() {
- clearTapTimer();
-
- $this.unbind( "vclick", clickHandler )
- .unbind( "vmouseup", clearTapTimer )
- .unbind( "vmousecancel", clearTapHandlers );
- }
-
- function clickHandler(event) {
- clearTapHandlers();
-
- // ONLY trigger a 'tap' event if the start target is
- // the same as the stop target.
- if ( origTarget == event.target ) {
- triggerCustomEvent( thisObject, "tap", event );
- }
- }
-
- $this.bind( "vmousecancel", clearTapHandlers )
- .bind( "vmouseup", clearTapTimer )
- .bind( "vclick", clickHandler );
-
- timer = setTimeout(function() {
- triggerCustomEvent( thisObject, "taphold", $.Event( "taphold" ) );
- }, 750 );
- });
- }
-};
-
-// also handles swipeleft, swiperight
-$.event.special.swipe = {
- scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
-
- durationThreshold: 1000, // More time than this, and it isn't a swipe.
-
- horizontalDistanceThreshold: 30, // Swipe horizontal displacement must be more than this.
-
- verticalDistanceThreshold: 75, // Swipe vertical displacement must be less than this.
-
- setup: function() {
- var thisObject = this,
- $this = $( thisObject );
-
- $this.bind( touchStartEvent, function( event ) {
- var data = event.originalEvent.touches ?
- event.originalEvent.touches[ 0 ] : event,
- start = {
- time: ( new Date() ).getTime(),
- coords: [ data.pageX, data.pageY ],
- origin: $( event.target )
- },
- stop;
-
- function moveHandler( event ) {
-
- if ( !start ) {
- return;
- }
-
- var data = event.originalEvent.touches ?
- event.originalEvent.touches[ 0 ] : event;
-
- stop = {
- time: ( new Date() ).getTime(),
- coords: [ data.pageX, data.pageY ]
- };
-
- // prevent scrolling
- if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.scrollSupressionThreshold ) {
- event.preventDefault();
- }
- }
-
- $this.bind( touchMoveEvent, moveHandler )
- .one( touchStopEvent, function( event ) {
- $this.unbind( touchMoveEvent, moveHandler );
-
- if ( start && stop ) {
- if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
- Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
- Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
-
- start.origin.trigger( "swipe" )
- .trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
- }
- }
- start = stop = undefined;
- });
- });
- }
-};
-
-(function( $, window ) {
- // "Cowboy" Ben Alman
-
- var win = $( window ),
- special_event,
- get_orientation,
- last_orientation;
-
- $.event.special.orientationchange = special_event = {
- setup: function() {
- // If the event is supported natively, return false so that jQuery
- // will bind to the event using DOM methods.
- if ( $.support.orientation && $.mobile.orientationChangeEnabled ) {
- return false;
- }
-
- // Get the current orientation to avoid initial double-triggering.
- last_orientation = get_orientation();
-
- // Because the orientationchange event doesn't exist, simulate the
- // event by testing window dimensions on resize.
- win.bind( "throttledresize", handler );
- },
- teardown: function(){
- // If the event is not supported natively, return false so that
- // jQuery will unbind the event using DOM methods.
- if ( $.support.orientation && $.mobile.orientationChangeEnabled ) {
- return false;
- }
-
- // Because the orientationchange event doesn't exist, unbind the
- // resize event handler.
- win.unbind( "throttledresize", handler );
- },
- add: function( handleObj ) {
- // Save a reference to the bound event handler.
- var old_handler = handleObj.handler;
-
-
- handleObj.handler = function( event ) {
- // Modify event object, adding the .orientation property.
- event.orientation = get_orientation();
-
- // Call the originally-bound event handler and return its result.
- return old_handler.apply( this, arguments );
- };
- }
- };
-
- // If the event is not supported natively, this handler will be bound to
- // the window resize event to simulate the orientationchange event.
- function handler() {
- // Get the current orientation.
- var orientation = get_orientation();
-
- if ( orientation !== last_orientation ) {
- // The orientation has changed, so trigger the orientationchange event.
- last_orientation = orientation;
- win.trigger( "orientationchange" );
- }
- }
-
- // Get the current page orientation. This method is exposed publicly, should it
- // be needed, as jQuery.event.special.orientationchange.orientation()
- $.event.special.orientationchange.orientation = get_orientation = function() {
- var isPortrait = true, elem = document.documentElement;
-
- // prefer window orientation to the calculation based on screensize as
- // the actual screen resize takes place before or after the orientation change event
- // has been fired depending on implementation (eg android 2.3 is before, iphone after).
- // More testing is required to determine if a more reliable method of determining the new screensize
- // is possible when orientationchange is fired. (eg, use media queries + element + opacity)
- if ( $.support.orientation ) {
- // if the window orientation registers as 0 or 180 degrees report
- // portrait, otherwise landscape
- isPortrait = window.orientation % 180 == 0;
- } else {
- isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1;
- }
-
- return isPortrait ? "portrait" : "landscape";
- };
-
-})( jQuery, window );
-
-
-// throttled resize event
-(function() {
-
- $.event.special.throttledresize = {
- setup: function() {
- $( this ).bind( "resize", handler );
- },
- teardown: function(){
- $( this ).unbind( "resize", handler );
- }
- };
-
- var throttle = 250,
- handler = function() {
- curr = ( new Date() ).getTime();
- diff = curr - lastCall;
-
- if ( diff >= throttle ) {
-
- lastCall = curr;
- $( this ).trigger( "throttledresize" );
-
- } else {
-
- if ( heldCall ) {
- clearTimeout( heldCall );
- }
-
- // Promise a held call will still execute
- heldCall = setTimeout( handler, throttle - diff );
- }
- },
- lastCall = 0,
- heldCall,
- curr,
- diff;
-})();
-
-
-$.each({
- scrollstop: "scrollstart",
- taphold: "tap",
- swipeleft: "swipe",
- swiperight: "swipe"
-}, function( event, sourceEvent ) {
-
- $.event.special[ event ] = {
- setup: function() {
- $( this ).bind( sourceEvent, $.noop );
- }
- };
-});
-
-})( jQuery, this );
+++ /dev/null
-/*
-* "fieldcontain" plugin - simple class additions to make form row separators
-*/
-
-(function( $, undefined ) {
-
-$.fn.fieldcontain = function( options ) {
- return this.addClass( "ui-field-contain ui-body ui-br" );
-};
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $( ":jqmData(role='fieldcontain')", e.target ).fieldcontain();
-});
-
-})( jQuery );
\ No newline at end of file
+++ /dev/null
-/*
-* "fixHeaderFooter" plugin - on-demand positioning for headers,footers
-*/
-
-(function( $, undefined ) {
-
-var slideDownClass = "ui-header-fixed ui-fixed-inline fade",
- slideUpClass = "ui-footer-fixed ui-fixed-inline fade",
-
- slideDownSelector = ".ui-header:jqmData(position='fixed')",
- slideUpSelector = ".ui-footer:jqmData(position='fixed')";
-
-$.fn.fixHeaderFooter = function( options ) {
-
- if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) {
- return this;
- }
-
- return this.each(function() {
- var $this = $( this );
-
- if ( $this.jqmData( "fullscreen" ) ) {
- $this.addClass( "ui-page-fullscreen" );
- }
-
- // Should be slidedown
- $this.find( slideDownSelector ).addClass( slideDownClass );
-
- // Should be slideup
- $this.find( slideUpSelector ).addClass( slideUpClass );
- });
-};
-
-// single controller for all showing,hiding,toggling
-$.mobile.fixedToolbars = (function() {
-
- if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) {
- return;
- }
-
- var stickyFooter, delayTimer,
- currentstate = "inline",
- autoHideMode = false,
- showDelay = 100,
- ignoreTargets = "a,input,textarea,select,button,label,.ui-header-fixed,.ui-footer-fixed",
- toolbarSelector = ".ui-header-fixed:first, .ui-footer-fixed:not(.ui-footer-duplicate):last",
- // for storing quick references to duplicate footers
- supportTouch = $.support.touch,
- touchStartEvent = supportTouch ? "touchstart" : "mousedown",
- touchStopEvent = supportTouch ? "touchend" : "mouseup",
- stateBefore = null,
- scrollTriggered = false,
- touchToggleEnabled = true;
-
- function showEventCallback( event ) {
- // An event that affects the dimensions of the visual viewport has
- // been triggered. If the header and/or footer for the current page are in overlay
- // mode, we want to hide them, and then fire off a timer to show them at a later
- // point. Events like a resize can be triggered continuously during a scroll, on
- // some platforms, so the timer is used to delay the actual positioning until the
- // flood of events have subsided.
- //
- // If we are in autoHideMode, we don't do anything because we know the scroll
- // callbacks for the plugin will fire off a show when the scrolling has stopped.
- if ( !autoHideMode && currentstate === "overlay" ) {
- if ( !delayTimer ) {
- $.mobile.fixedToolbars.hide( true );
- }
-
- $.mobile.fixedToolbars.startShowTimer();
- }
- }
-
- $(function() {
- var $document = $( document ),
- $window = $( window );
-
- $document
- .bind( "vmousedown", function( event ) {
- if ( touchToggleEnabled ) {
- stateBefore = currentstate;
- }
- })
- .bind( "vclick", function( event ) {
- if ( touchToggleEnabled ) {
-
- if ( $(event.target).closest( ignoreTargets ).length ) {
- return;
- }
-
- if ( !scrollTriggered ) {
- $.mobile.fixedToolbars.toggle( stateBefore );
- stateBefore = null;
- }
- }
- })
- .bind( "silentscroll", showEventCallback );
-
-
- // The below checks first for a $(document).scrollTop() value, and if zero, binds scroll events to $(window) instead.
- // If the scrollTop value is actually zero, both will return zero anyway.
- //
- // Works with $(document), not $(window) : Opera Mobile (WinMO phone; kinda broken anyway)
- // Works with $(window), not $(document) : IE 7/8
- // Works with either $(window) or $(document) : Chrome, FF 3.6/4, Android 1.6/2.1, iOS
- // Needs work either way : BB5, Opera Mobile (iOS)
-
- ( ( $document.scrollTop() === 0 ) ? $window : $document )
- .bind( "scrollstart", function( event ) {
-
- scrollTriggered = true;
-
- if ( stateBefore === null ) {
- stateBefore = currentstate;
- }
-
- // We only enter autoHideMode if the headers/footers are in
- // an overlay state or the show timer was started. If the
- // show timer is set, clear it so the headers/footers don't
- // show up until after we're done scrolling.
- var isOverlayState = stateBefore == "overlay";
-
- autoHideMode = isOverlayState || !!delayTimer;
-
- if ( autoHideMode ) {
- $.mobile.fixedToolbars.clearShowTimer();
-
- if ( isOverlayState ) {
- $.mobile.fixedToolbars.hide( true );
- }
- }
- })
- .bind( "scrollstop", function( event ) {
-
- if ( $( event.target ).closest( ignoreTargets ).length ) {
- return;
- }
-
- scrollTriggered = false;
-
- if ( autoHideMode ) {
- $.mobile.fixedToolbars.startShowTimer();
- autoHideMode = false;
- }
- stateBefore = null;
- });
-
- $window.bind( "resize updatelayout", showEventCallback );
- });
-
- // 1. Before page is shown, check for duplicate footer
- // 2. After page is shown, append footer to new page
- $( ".ui-page" )
- .live( "pagebeforeshow", function( event, ui ) {
-
- var page = $( event.target ),
- footer = page.find( ":jqmData(role='footer')" ),
- id = footer.data( "id" ),
- prevPage = ui.prevPage,
- prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" ),
- prevFooterMatches = prevFooter.length && prevFooter.jqmData( "id" ) === id;
-
- if ( id && prevFooterMatches ) {
- stickyFooter = footer;
- setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
- }
- })
- .live( "pageshow", function( event, ui ) {
-
- var $this = $( this );
-
- if ( stickyFooter && stickyFooter.length ) {
-
- setTimeout(function() {
- setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
- stickyFooter = null;
- }, 500);
- }
-
- $.mobile.fixedToolbars.show( true, this );
- });
-
- // When a collapsiable is hidden or shown we need to trigger the fixed toolbar to reposition itself (#1635)
- $( ".ui-collapsible-contain" ).live( "collapse expand", showEventCallback );
-
- // element.getBoundingClientRect() is broken in iOS 3.2.1 on the iPad. The
- // coordinates inside of the rect it returns don't have the page scroll position
- // factored out of it like the other platforms do. To get around this,
- // we'll just calculate the top offset the old fashioned way until core has
- // a chance to figure out how to handle this situation.
- //
- // TODO: We'll need to get rid of getOffsetTop() once a fix gets folded into core.
-
- function getOffsetTop( ele ) {
- var top = 0,
- op, body;
-
- if ( ele ) {
- body = document.body;
- op = ele.offsetParent;
- top = ele.offsetTop;
-
- while ( ele && ele != body ) {
- top += ele.scrollTop || 0;
-
- if ( ele == op ) {
- top += op.offsetTop;
- op = ele.offsetParent;
- }
-
- ele = ele.parentNode;
- }
- }
- return top;
- }
-
- function setTop( el ) {
- var fromTop = $(window).scrollTop(),
- thisTop = getOffsetTop( el[ 0 ] ), // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead.
- thisCSStop = el.css( "top" ) == "auto" ? 0 : parseFloat(el.css( "top" )),
- screenHeight = window.innerHeight,
- thisHeight = el.outerHeight(),
- useRelative = el.parents( ".ui-page:not(.ui-page-fullscreen)" ).length,
- relval;
-
- if ( el.is( ".ui-header-fixed" ) ) {
-
- relval = fromTop - thisTop + thisCSStop;
-
- if ( relval < thisTop ) {
- relval = 0;
- }
-
- return el.css( "top", useRelative ? relval : fromTop );
- } else {
- // relval = -1 * (thisTop - (fromTop + screenHeight) + thisCSStop + thisHeight);
- // if ( relval > thisTop ) { relval = 0; }
- relval = fromTop + screenHeight - thisHeight - (thisTop - thisCSStop );
-
- return el.css( "top", useRelative ? relval : fromTop + screenHeight - thisHeight );
- }
- }
-
- // Exposed methods
- return {
-
- show: function( immediately, page ) {
-
- $.mobile.fixedToolbars.clearShowTimer();
-
- currentstate = "overlay";
-
- var $ap = page ? $( page ) :
- ( $.mobile.activePage ? $.mobile.activePage :
- $( ".ui-page-active" ) );
-
- return $ap.children( toolbarSelector ).each(function() {
-
- var el = $( this ),
- fromTop = $( window ).scrollTop(),
- // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead.
- thisTop = getOffsetTop( el[ 0 ] ),
- screenHeight = window.innerHeight,
- thisHeight = el.outerHeight(),
- alreadyVisible = ( el.is( ".ui-header-fixed" ) && fromTop <= thisTop + thisHeight ) ||
- ( el.is( ".ui-footer-fixed" ) && thisTop <= fromTop + screenHeight );
-
- // Add state class
- el.addClass( "ui-fixed-overlay" ).removeClass( "ui-fixed-inline" );
-
- if ( !alreadyVisible && !immediately ) {
- el.animationComplete(function() {
- el.removeClass( "in" );
- }).addClass( "in" );
- }
- setTop(el);
- });
- },
-
- hide: function( immediately ) {
-
- currentstate = "inline";
-
- var $ap = $.mobile.activePage ? $.mobile.activePage :
- $( ".ui-page-active" );
-
- return $ap.children( toolbarSelector ).each(function() {
-
- var el = $(this),
- thisCSStop = el.css( "top" ),
- classes;
-
- thisCSStop = thisCSStop == "auto" ? 0 :
- parseFloat(thisCSStop);
-
- // Add state class
- el.addClass( "ui-fixed-inline" ).removeClass( "ui-fixed-overlay" );
-
- if ( thisCSStop < 0 || ( el.is( ".ui-header-fixed" ) && thisCSStop !== 0 ) ) {
-
- if ( immediately ) {
- el.css( "top", 0);
- } else {
-
- if ( el.css( "top" ) !== "auto" && parseFloat( el.css( "top" ) ) !== 0 ) {
-
- classes = "out reverse";
-
- el.animationComplete(function() {
- el.removeClass( classes ).css( "top", 0 );
- }).addClass( classes );
- }
- }
- }
- });
- },
-
- startShowTimer: function() {
-
- $.mobile.fixedToolbars.clearShowTimer();
-
- var args = [].slice.call( arguments );
-
- delayTimer = setTimeout(function() {
- delayTimer = undefined;
- $.mobile.fixedToolbars.show.apply( null, args );
- }, showDelay);
- },
-
- clearShowTimer: function() {
- if ( delayTimer ) {
- clearTimeout( delayTimer );
- }
- delayTimer = undefined;
- },
-
- toggle: function( from ) {
- if ( from ) {
- currentstate = from;
- }
- return ( currentstate === "overlay" ) ? $.mobile.fixedToolbars.hide() :
- $.mobile.fixedToolbars.show();
- },
-
- setTouchToggleEnabled: function( enabled ) {
- touchToggleEnabled = enabled;
- }
- };
-})();
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( event ) {
-
- if ( $( ":jqmData(position='fixed')", event.target ).length ) {
-
- $( event.target ).each(function() {
-
- if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) {
- return this;
- }
-
- var $this = $( this );
-
- if ( $this.jqmData( "fullscreen" ) ) {
- $this.addClass( "ui-page-fullscreen" );
- }
-
- // Should be slidedown
- $this.find( slideDownSelector ).addClass( slideDownClass );
-
- // Should be slideup
- $this.find( slideUpSelector ).addClass( slideUpClass );
-
- })
-
- }
-});
-
-})( jQuery );
+++ /dev/null
-/*
-* "fixHeaderFooter" native plugin - Behavior for "fixed" headers,footers, and scrolling inner content
-*/
-
-(function( $, undefined ) {
-
-// Enable touch overflow scrolling when it's natively supported
-$.mobile.touchOverflowEnabled = false;
-
-// Enabled zoom when touch overflow is enabled. Can cause usability issues, unfortunately
-$.mobile.touchOverflowZoomEnabled = false;
-
-$( document ).bind( "pagecreate", function( event ) {
- if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){
-
- var $target = $( event.target ),
- scrollStartY = 0;
-
- if( $target.is( ":jqmData(role='page')" ) ){
-
- $target.each(function() {
- var $page = $( this ),
- $fixies = $page.find( ":jqmData(role='header'), :jqmData(role='footer')" ).filter( ":jqmData(position='fixed')" ),
- fullScreen = $page.jqmData( "fullscreen" ),
- $scrollElem = $fixies.length ? $page.find( ".ui-content" ) : $page;
-
- $page.addClass( "ui-mobile-touch-overflow" );
-
- $scrollElem.bind( "scrollstop", function(){
- if( $scrollElem.scrollTop() > 0 ){
- window.scrollTo( 0, $.mobile.defaultHomeScroll );
- }
- });
-
- if( $fixies.length ){
-
- $page.addClass( "ui-native-fixed" );
-
- if( fullScreen ){
-
- $page.addClass( "ui-native-fullscreen" );
-
- $fixies.addClass( "fade in" );
-
- $( document ).bind( "vclick", function(){
- $fixies
- .removeClass( "ui-native-bars-hidden" )
- .toggleClass( "in out" )
- .animationComplete(function(){
- $(this).not( ".in" ).addClass( "ui-native-bars-hidden" );
- });
- });
- }
- }
- });
- }
- }
-});
-
-})( jQuery );
+++ /dev/null
-/*
-* "button" plugin - links that proxy to native input/buttons
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.button", $.mobile.widget, {
- options: {
- theme: null,
- icon: null,
- iconpos: null,
- inline: null,
- corners: true,
- shadow: true,
- iconshadow: true,
- initSelector: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"
- },
- _create: function() {
- var $el = this.element,
- o = this.options,
- type,
- name,
- $buttonPlaceholder;
-
- // Add ARIA role
- this.button = $( "<div></div>" )
- .text( $el.text() || $el.val() )
- .insertBefore( $el )
- .buttonMarkup({
- theme: o.theme,
- icon: o.icon,
- iconpos: o.iconpos,
- inline: o.inline,
- corners: o.corners,
- shadow: o.shadow,
- iconshadow: o.iconshadow
- })
- .append( $el.addClass( "ui-btn-hidden" ) );
-
- type = $el.attr( "type" );
- name = $el.attr( "name" );
-
- // Add hidden input during submit if input type="submit" has a name.
- if ( type !== "button" && type !== "reset" && name ) {
- $el.bind( "vclick", function() {
- // Add hidden input if it doesn’t already exist.
- if( $buttonPlaceholder === undefined ) {
- $buttonPlaceholder = $( "<input>", {
- type: "hidden",
- name: $el.attr( "name" ),
- value: $el.attr( "value" )
- }).insertBefore( $el );
-
- // Bind to doc to remove after submit handling
- $( document ).one("submit", function(){
- $buttonPlaceholder.remove();
-
- // reset the local var so that the hidden input
- // will be re-added on subsequent clicks
- $buttonPlaceholder = undefined;
- });
- }
- });
- }
-
- this.refresh();
- },
-
- enable: function() {
- this.element.attr( "disabled", false );
- this.button.removeClass( "ui-disabled" ).attr( "aria-disabled", false );
- return this._setOption( "disabled", false );
- },
-
- disable: function() {
- this.element.attr( "disabled", true );
- this.button.addClass( "ui-disabled" ).attr( "aria-disabled", true );
- return this._setOption( "disabled", true );
- },
-
- refresh: function() {
- var $el = this.element;
-
- if ( $el.prop("disabled") ) {
- this.disable();
- } else {
- this.enable();
- }
-
- // the textWrapper is stored as a data element on the button object
- // to prevent referencing by it's implementation details (eg 'class')
- this.button.data( 'textWrapper' ).text( $el.text() || $el.val() );
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $.mobile.button.prototype.enhanceWithin( e.target );
-});
-
-})( jQuery );
\ No newline at end of file
+++ /dev/null
-/*
-* "checkboxradio" plugin
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.checkboxradio", $.mobile.widget, {
- options: {
- theme: null,
- initSelector: "input[type='checkbox'],input[type='radio']"
- },
- _create: function() {
- var self = this,
- input = this.element,
- // NOTE: Windows Phone could not find the label through a selector
- // filter works though.
- label = input.closest( "form,fieldset,:jqmData(role='page')" ).find( "label[for='" + input[ 0 ].id + "']"),
- inputtype = input.attr( "type" ),
- checkedState = inputtype + "-on",
- uncheckedState = inputtype + "-off",
- icon = input.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedState,
- activeBtn = icon ? "" : " " + $.mobile.activeBtnClass,
- checkedClass = "ui-" + checkedState + activeBtn,
- uncheckedClass = "ui-" + uncheckedState,
- checkedicon = "ui-icon-" + checkedState,
- uncheckedicon = "ui-icon-" + uncheckedState;
-
- if ( inputtype !== "checkbox" && inputtype !== "radio" ) {
- return;
- }
-
- // Expose for other methods
- $.extend( this, {
- label: label,
- inputtype: inputtype,
- checkedClass: checkedClass,
- uncheckedClass: uncheckedClass,
- checkedicon: checkedicon,
- uncheckedicon: uncheckedicon
- });
-
- // If there's no selected theme...
- if( !this.options.theme ) {
- this.options.theme = this.element.jqmData( "theme" );
- }
-
- label.buttonMarkup({
- theme: this.options.theme,
- icon: icon,
- shadow: false
- });
-
- // Wrap the input + label in a div
- input.add( label )
- .wrapAll( "<div class='ui-" + inputtype + "'></div>" );
-
- label.bind({
- vmouseover: function( event ) {
- if ( $( this ).parent().is( ".ui-disabled" ) ) {
- event.stopPropagation();
- }
- },
-
- vclick: function( event ) {
- if ( input.is( ":disabled" ) ) {
- event.preventDefault();
- return;
- }
-
- self._cacheVals();
-
- input.prop( "checked", inputtype === "radio" && true || !input.prop( "checked" ) );
-
- // trigger click handler's bound directly to the input as a substitute for
- // how label clicks behave normally in the browsers
- // TODO: it would be nice to let the browser's handle the clicks and pass them
- // through to the associate input. we can swallow that click at the parent
- // wrapper element level
- input.triggerHandler( 'click' );
-
- // Input set for common radio buttons will contain all the radio
- // buttons, but will not for checkboxes. clearing the checked status
- // of other radios ensures the active button state is applied properly
- self._getInputSet().not( input ).prop( "checked", false );
-
- self._updateAll();
- return false;
- }
-
- });
-
- input
- .bind({
- vmousedown: function() {
- self._cacheVals();
- },
-
- vclick: function() {
- var $this = $(this);
-
- // Adds checked attribute to checked input when keyboard is used
- if ( $this.is( ":checked" ) ) {
-
- $this.prop( "checked", true);
- self._getInputSet().not($this).prop( "checked", false );
- } else {
-
- $this.prop( "checked", false );
- }
-
- self._updateAll();
- },
-
- focus: function() {
- label.addClass( "ui-focus" );
- },
-
- blur: function() {
- label.removeClass( "ui-focus" );
- }
- });
-
- this.refresh();
- },
-
- _cacheVals: function() {
- this._getInputSet().each(function() {
- var $this = $(this);
-
- $this.jqmData( "cacheVal", $this.is( ":checked" ) );
- });
- },
-
- //returns either a set of radios with the same name attribute, or a single checkbox
- _getInputSet: function(){
- if(this.inputtype == "checkbox") {
- return this.element;
- }
-
- return this.element.closest( "form,fieldset,:jqmData(role='page')" )
- .find( "input[name='"+ this.element.attr( "name" ) +"'][type='"+ this.inputtype +"']" );
- },
-
- _updateAll: function() {
- var self = this;
-
- this._getInputSet().each(function() {
- var $this = $(this);
-
- if ( $this.is( ":checked" ) || self.inputtype === "checkbox" ) {
- $this.trigger( "change" );
- }
- })
- .checkboxradio( "refresh" );
- },
-
- refresh: function() {
- var input = this.element,
- label = this.label,
- icon = label.find( ".ui-icon" );
-
- // input[0].checked expando doesn't always report the proper value
- // for checked='checked'
- if ( $( input[ 0 ] ).prop( "checked" ) ) {
-
- label.addClass( this.checkedClass ).removeClass( this.uncheckedClass );
- icon.addClass( this.checkedicon ).removeClass( this.uncheckedicon );
-
- } else {
-
- label.removeClass( this.checkedClass ).addClass( this.uncheckedClass );
- icon.removeClass( this.checkedicon ).addClass( this.uncheckedicon );
- }
-
- if ( input.is( ":disabled" ) ) {
- this.disable();
- } else {
- this.enable();
- }
- },
-
- disable: function() {
- this.element.prop( "disabled", true ).parent().addClass( "ui-disabled" );
- },
-
- enable: function() {
- this.element.prop( "disabled", false ).parent().removeClass( "ui-disabled" );
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $.mobile.checkboxradio.prototype.enhanceWithin( e.target );
-});
-
-})( jQuery );
+++ /dev/null
-/*
-* custom "selectmenu" plugin
-*/
-
-(function( $, undefined ) {
- var extendSelect = function( widget ){
-
- var select = widget.select,
- selectID = widget.selectID,
- label = widget.label,
- thisPage = widget.select.closest( ".ui-page" ),
- screen = $( "<div>", {"class": "ui-selectmenu-screen ui-screen-hidden"} ).appendTo( thisPage ),
- selectOptions = widget._selectOptions(),
- isMultiple = widget.isMultiple = widget.select[ 0 ].multiple,
- buttonId = selectID + "-button",
- menuId = selectID + "-menu",
- menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' data-" +$.mobile.ns + "theme='"+ widget.options.theme +"' data-" +$.mobile.ns + "overlay-theme='"+ widget.options.overlayTheme +"'>" +
- "<div data-" + $.mobile.ns + "role='header'>" +
- "<div class='ui-title'>" + label.getEncodedText() + "</div>"+
- "</div>"+
- "<div data-" + $.mobile.ns + "role='content'></div>"+
- "</div>" ).appendTo( $.mobile.pageContainer ).page(),
-
- listbox = $("<div>", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen),
-
- list = $( "<ul>", {
- "class": "ui-selectmenu-list",
- "id": menuId,
- "role": "listbox",
- "aria-labelledby": buttonId
- }).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).appendTo( listbox ),
-
- header = $( "<div>", {
- "class": "ui-header ui-bar-" + widget.options.theme
- }).prependTo( listbox ),
-
- headerTitle = $( "<h1>", {
- "class": "ui-title"
- }).appendTo( header ),
-
- headerClose = $( "<a>", {
- "text": widget.options.closeText,
- "href": "#",
- "class": "ui-btn-left"
- }).attr( "data-" + $.mobile.ns + "iconpos", "notext" ).attr( "data-" + $.mobile.ns + "icon", "delete" ).appendTo( header ).buttonMarkup(),
-
- menuPageContent = menuPage.find( ".ui-content" ),
-
- menuPageClose = menuPage.find( ".ui-header a" );
-
-
- $.extend( widget, {
- select: widget.select,
- selectID: selectID,
- buttonId: buttonId,
- menuId: menuId,
- thisPage: thisPage,
- menuPage: menuPage,
- label: label,
- screen: screen,
- selectOptions: selectOptions,
- isMultiple: isMultiple,
- theme: widget.options.theme,
- listbox: listbox,
- list: list,
- header: header,
- headerTitle: headerTitle,
- headerClose: headerClose,
- menuPageContent: menuPageContent,
- menuPageClose: menuPageClose,
- placeholder: "",
-
- build: function() {
- var self = this;
-
- // Create list from select, update state
- self.refresh();
-
- self.select.attr( "tabindex", "-1" ).focus(function() {
- $( this ).blur();
- self.button.focus();
- });
-
- // Button events
- self.button.bind( "vclick keydown" , function( event ) {
- if ( event.type == "vclick" ||
- event.keyCode && ( event.keyCode === $.mobile.keyCode.ENTER ||
- event.keyCode === $.mobile.keyCode.SPACE ) ) {
-
- self.open();
- event.preventDefault();
- }
- });
-
- // Events for list items
- self.list.attr( "role", "listbox" )
- .delegate( ".ui-li>a", "focusin", function() {
- $( this ).attr( "tabindex", "0" );
- })
- .delegate( ".ui-li>a", "focusout", function() {
- $( this ).attr( "tabindex", "-1" );
- })
- .delegate( "li:not(.ui-disabled, .ui-li-divider)", "click", function( event ) {
-
- // index of option tag to be selected
- var oldIndex = self.select[ 0 ].selectedIndex,
- newIndex = self.list.find( "li:not(.ui-li-divider)" ).index( this ),
- option = self._selectOptions().eq( newIndex )[ 0 ];
-
- // toggle selected status on the tag for multi selects
- option.selected = self.isMultiple ? !option.selected : true;
-
- // toggle checkbox class for multiple selects
- if ( self.isMultiple ) {
- $( this ).find( ".ui-icon" )
- .toggleClass( "ui-icon-checkbox-on", option.selected )
- .toggleClass( "ui-icon-checkbox-off", !option.selected );
- }
-
- // trigger change if value changed
- if ( self.isMultiple || oldIndex !== newIndex ) {
- self.select.trigger( "change" );
- }
-
- //hide custom select for single selects only
- if ( !self.isMultiple ) {
- self.close();
- }
-
- event.preventDefault();
- })
- .keydown(function( event ) { //keyboard events for menu items
- var target = $( event.target ),
- li = target.closest( "li" ),
- prev, next;
-
- // switch logic based on which key was pressed
- switch ( event.keyCode ) {
- // up or left arrow keys
- case 38:
- prev = li.prev();
-
- // if there's a previous option, focus it
- if ( prev.length ) {
- target
- .blur()
- .attr( "tabindex", "-1" );
-
- prev.find( "a" ).first().focus();
- }
-
- return false;
- break;
-
- // down or right arrow keys
- case 40:
- next = li.next();
-
- // if there's a next option, focus it
- if ( next.length ) {
- target
- .blur()
- .attr( "tabindex", "-1" );
-
- next.find( "a" ).first().focus();
- }
-
- return false;
- break;
-
- // If enter or space is pressed, trigger click
- case 13:
- case 32:
- target.trigger( "click" );
-
- return false;
- break;
- }
- });
-
- // button refocus ensures proper height calculation
- // by removing the inline style and ensuring page inclusion
- self.menuPage.bind( "pagehide", function() {
- self.list.appendTo( self.listbox );
- self._focusButton();
-
- // TODO centralize page removal binding / handling in the page plugin.
- // Suggestion from @jblas to do refcounting
- //
- // TODO extremely confusing dependency on the open method where the pagehide.remove
- // bindings are stripped to prevent the parent page from disappearing. The way
- // we're keeping pages in the DOM right now sucks
- //
- // rebind the page remove that was unbound in the open function
- // to allow for the parent page removal from actions other than the use
- // of a dialog sized custom select
- //
- // doing this here provides for the back button on the custom select dialog
- $.mobile._bindPageRemove.call( self.thisPage );
- });
-
- // Events on "screen" overlay
- self.screen.bind( "vclick", function( event ) {
- self.close();
- });
-
- // Close button on small overlays
- self.headerClose.click( function() {
- if ( self.menuType == "overlay" ) {
- self.close();
- return false;
- }
- });
-
- // track this dependency so that when the parent page
- // is removed on pagehide it will also remove the menupage
- self.thisPage.addDependents( this.menuPage );
- },
-
- _isRebuildRequired: function() {
- var list = this.list.find( "li" ),
- options = this._selectOptions();
-
- // TODO exceedingly naive method to determine difference
- // ignores value changes etc in favor of a forcedRebuild
- // from the user in the refresh method
- return options.text() !== list.text();
- },
-
- refresh: function( forceRebuild , foo ){
- var self = this,
- select = this.element,
- isMultiple = this.isMultiple,
- options = this._selectOptions(),
- selected = this.selected(),
- // return an array of all selected index's
- indicies = this.selectedIndices();
-
- if ( forceRebuild || this._isRebuildRequired() ) {
- self._buildList();
- }
-
- self.setButtonText();
- self.setButtonCount();
-
- self.list.find( "li:not(.ui-li-divider)" )
- .removeClass( $.mobile.activeBtnClass )
- .attr( "aria-selected", false )
- .each(function( i ) {
-
- if ( $.inArray( i, indicies ) > -1 ) {
- var item = $( this );
-
- // Aria selected attr
- item.attr( "aria-selected", true );
-
- // Multiple selects: add the "on" checkbox state to the icon
- if ( self.isMultiple ) {
- item.find( ".ui-icon" ).removeClass( "ui-icon-checkbox-off" ).addClass( "ui-icon-checkbox-on" );
- } else {
- item.addClass( $.mobile.activeBtnClass );
- }
- }
- });
- },
-
- close: function() {
- if ( this.options.disabled || !this.isOpen ) {
- return;
- }
-
- var self = this;
-
- if ( self.menuType == "page" ) {
- // doesn't solve the possible issue with calling change page
- // where the objects don't define data urls which prevents dialog key
- // stripping - changePage has incoming refactor
- window.history.back();
- } else {
- self.screen.addClass( "ui-screen-hidden" );
- self.listbox.addClass( "ui-selectmenu-hidden" ).removeAttr( "style" ).removeClass( "in" );
- self.list.appendTo( self.listbox );
- self._focusButton();
- }
-
- // allow the dialog to be closed again
- self.isOpen = false;
- },
-
- open: function() {
- if ( this.options.disabled ) {
- return;
- }
-
- var self = this,
- menuHeight = self.list.parent().outerHeight(),
- menuWidth = self.list.parent().outerWidth(),
- activePage = $( ".ui-page-active" ),
- tOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
- tScrollElem = activePage.is( ".ui-native-fixed" ) ? activePage.find( ".ui-content" ) : activePage;
- scrollTop = tOverflow ? tScrollElem.scrollTop() : $( window ).scrollTop(),
- btnOffset = self.button.offset().top,
- screenHeight = window.innerHeight,
- screenWidth = window.innerWidth;
-
- //add active class to button
- self.button.addClass( $.mobile.activeBtnClass );
-
- //remove after delay
- setTimeout( function() {
- self.button.removeClass( $.mobile.activeBtnClass );
- }, 300);
-
- function focusMenuItem() {
- self.list.find( $.mobile.activeBtnClass ).focus();
- }
-
- if ( menuHeight > screenHeight - 80 || !$.support.scrollTop ) {
- // prevent the parent page from being removed from the DOM,
- // otherwise the results of selecting a list item in the dialog
- // fall into a black hole
- self.thisPage.unbind( "pagehide.remove" );
-
- //for WebOS/Opera Mini (set lastscroll using button offset)
- if ( scrollTop == 0 && btnOffset > screenHeight ) {
- self.thisPage.one( "pagehide", function() {
- $( this ).jqmData( "lastScroll", btnOffset );
- });
- }
-
- self.menuPage.one( "pageshow", function() {
- // silentScroll() is called whenever a page is shown to restore
- // any previous scroll position the page may have had. We need to
- // wait for the "silentscroll" event before setting focus to avoid
- // the browser"s "feature" which offsets rendering to make sure
- // whatever has focus is in view.
- $( window ).one( "silentscroll", function() {
- focusMenuItem();
- });
-
- self.isOpen = true;
- });
-
- self.menuType = "page";
- self.menuPageContent.append( self.list );
- self.menuPage.find("div .ui-title").text(self.label.text());
- $.mobile.changePage( self.menuPage, {
- transition: $.mobile.defaultDialogTransition
- });
- } else {
- self.menuType = "overlay";
-
- self.screen.height( $(document).height() )
- .removeClass( "ui-screen-hidden" );
-
- // Try and center the overlay over the button
- var roomtop = btnOffset - scrollTop,
- roombot = scrollTop + screenHeight - btnOffset,
- halfheight = menuHeight / 2,
- maxwidth = parseFloat( self.list.parent().css( "max-width" ) ),
- newtop, newleft;
-
- if ( roomtop > menuHeight / 2 && roombot > menuHeight / 2 ) {
- newtop = btnOffset + ( self.button.outerHeight() / 2 ) - halfheight;
- } else {
- // 30px tolerance off the edges
- newtop = roomtop > roombot ? scrollTop + screenHeight - menuHeight - 30 : scrollTop + 30;
- }
-
- // If the menuwidth is smaller than the screen center is
- if ( menuWidth < maxwidth ) {
- newleft = ( screenWidth - menuWidth ) / 2;
- } else {
-
- //otherwise insure a >= 30px offset from the left
- newleft = self.button.offset().left + self.button.outerWidth() / 2 - menuWidth / 2;
-
- // 30px tolerance off the edges
- if ( newleft < 30 ) {
- newleft = 30;
- } else if ( (newleft + menuWidth) > screenWidth ) {
- newleft = screenWidth - menuWidth - 30;
- }
- }
-
- self.listbox.append( self.list )
- .removeClass( "ui-selectmenu-hidden" )
- .css({
- top: newtop,
- left: newleft
- })
- .addClass( "in" );
-
- focusMenuItem();
-
- // duplicate with value set in page show for dialog sized selects
- self.isOpen = true;
- }
- },
-
- _buildList: function() {
- var self = this,
- o = this.options,
- placeholder = this.placeholder,
- optgroups = [],
- lis = [],
- dataIcon = self.isMultiple ? "checkbox-off" : "false";
-
- self.list.empty().filter( ".ui-listview" ).listview( "destroy" );
-
- // Populate menu with options from select element
- self.select.find( "option" ).each( function( i ) {
- var $this = $( this ),
- $parent = $this.parent(),
- text = $this.getEncodedText(),
- anchor = "<a href='#'>"+ text +"</a>",
- classes = [],
- extraAttrs = [];
-
- // Are we inside an optgroup?
- if ( $parent.is( "optgroup" ) ) {
- var optLabel = $parent.attr( "label" );
-
- // has this optgroup already been built yet?
- if ( $.inArray( optLabel, optgroups ) === -1 ) {
- lis.push( "<li data-" + $.mobile.ns + "role='list-divider'>"+ optLabel +"</li>" );
- optgroups.push( optLabel );
- }
- }
-
- // Find placeholder text
- // TODO: Are you sure you want to use getAttribute? ^RW
- if ( !this.getAttribute( "value" ) || text.length == 0 || $this.jqmData( "placeholder" ) ) {
- if ( o.hidePlaceholderMenuItems ) {
- classes.push( "ui-selectmenu-placeholder" );
- }
- placeholder = self.placeholder = text;
- }
-
- // support disabled option tags
- if ( this.disabled ) {
- classes.push( "ui-disabled" );
- extraAttrs.push( "aria-disabled='true'" );
- }
-
- lis.push( "<li data-" + $.mobile.ns + "option-index='" + i + "' data-" + $.mobile.ns + "icon='"+ dataIcon +"' class='"+ classes.join(" ") + "' " + extraAttrs.join(" ") +">"+ anchor +"</li>" );
- });
-
- self.list.html( lis.join(" ") );
-
- self.list.find( "li" )
- .attr({ "role": "option", "tabindex": "-1" })
- .first().attr( "tabindex", "0" );
-
- // Hide header close link for single selects
- if ( !this.isMultiple ) {
- this.headerClose.hide();
- }
-
- // Hide header if it's not a multiselect and there's no placeholder
- if ( !this.isMultiple && !placeholder.length ) {
- this.header.hide();
- } else {
- this.headerTitle.text( this.placeholder );
- }
-
- // Now populated, create listview
- self.list.listview();
- },
-
- _button: function(){
- return $( "<a>", {
- "href": "#",
- "role": "button",
- // TODO value is undefined at creation
- "id": this.buttonId,
- "aria-haspopup": "true",
-
- // TODO value is undefined at creation
- "aria-owns": this.menuId
- });
- }
- });
- };
-
- $( "select" ).live( "selectmenubeforecreate", function(){
- var selectmenuWidget = $( this ).data( "selectmenu" );
-
- if( !selectmenuWidget.options.nativeMenu ){
- extendSelect( selectmenuWidget );
- }
- });
-})( jQuery );
+++ /dev/null
-/*
-* "selectmenu" plugin
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.selectmenu", $.mobile.widget, {
- options: {
- theme: null,
- disabled: false,
- icon: "arrow-d",
- iconpos: "right",
- inline: null,
- corners: true,
- shadow: true,
- iconshadow: true,
- menuPageTheme: "b",
- overlayTheme: "a",
- hidePlaceholderMenuItems: true,
- closeText: "Close",
- nativeMenu: true,
- initSelector: "select:not(:jqmData(role='slider'))"
- },
-
- _button: function(){
- return $( "<div/>" );
- },
-
- _setDisabled: function( value ) {
- this.element.attr( "disabled", value );
- this.button.attr( "aria-disabled", value );
- return this._setOption( "disabled", value );
- },
-
- _focusButton : function() {
- var self = this;
-
- setTimeout( function() {
- self.button.focus();
- }, 40);
- },
-
- _selectOptions: function() {
- return this.select.find( "option" );
- },
-
- // setup items that are generally necessary for select menu extension
- _preExtension: function(){
- this.select = this.element.wrap( "<div class='ui-select'>" );
- this.selectID = this.select.attr( "id" );
- this.label = $( "label[for='"+ this.selectID +"']" ).addClass( "ui-select" );
- this.isMultiple = this.select[ 0 ].multiple;
- if ( !this.options.theme ) {
- this.options.theme = $.mobile.getInheritedTheme( this.select, "c" );
- }
- },
-
- _create: function() {
- this._preExtension();
-
- // Allows for extension of the native select for custom selects and other plugins
- // see select.custom for example extension
- // TODO explore plugin registration
- this._trigger( "beforeCreate" );
-
- this.button = this._button();
-
- var self = this,
-
- options = this.options,
-
- // IE throws an exception at options.item() function when
- // there is no selected item
- // select first in this case
- selectedIndex = this.select[ 0 ].selectedIndex == -1 ? 0 : this.select[ 0 ].selectedIndex,
-
- // TODO values buttonId and menuId are undefined here
- button = this.button
- .text( $( this.select[ 0 ].options.item( selectedIndex ) ).text() )
- .insertBefore( this.select )
- .buttonMarkup( {
- theme: options.theme,
- icon: options.icon,
- iconpos: options.iconpos,
- inline: options.inline,
- corners: options.corners,
- shadow: options.shadow,
- iconshadow: options.iconshadow
- });
-
- // Opera does not properly support opacity on select elements
- // In Mini, it hides the element, but not its text
- // On the desktop,it seems to do the opposite
- // for these reasons, using the nativeMenu option results in a full native select in Opera
- if ( options.nativeMenu && window.opera && window.opera.version ) {
- this.select.addClass( "ui-select-nativeonly" );
- }
-
- // Add counter for multi selects
- if ( this.isMultiple ) {
- this.buttonCount = $( "<span>" )
- .addClass( "ui-li-count ui-btn-up-c ui-btn-corner-all" )
- .hide()
- .appendTo( button.addClass('ui-li-has-count') );
- }
-
- // Disable if specified
- if ( options.disabled || this.element.attr('disabled')) {
- this.disable();
- }
-
- // Events on native select
- this.select.change( function() {
- self.refresh();
- });
-
- this.build();
- },
-
- build: function() {
- var self = this;
-
- this.select
- .appendTo( self.button )
- .bind( "vmousedown", function() {
- // Add active class to button
- self.button.addClass( $.mobile.activeBtnClass );
- })
- .bind( "focus vmouseover", function() {
- self.button.trigger( "vmouseover" );
- })
- .bind( "vmousemove", function() {
- // Remove active class on scroll/touchmove
- self.button.removeClass( $.mobile.activeBtnClass );
- })
- .bind( "change blur vmouseout", function() {
- self.button.trigger( "vmouseout" )
- .removeClass( $.mobile.activeBtnClass );
- })
- .bind( "change blur", function() {
- self.button.removeClass( "ui-btn-down-" + self.options.theme );
- });
- },
-
- selected: function() {
- return this._selectOptions().filter( ":selected" );
- },
-
- selectedIndices: function() {
- var self = this;
-
- return this.selected().map( function() {
- return self._selectOptions().index( this );
- }).get();
- },
-
- setButtonText: function() {
- var self = this, selected = this.selected();
-
- this.button.find( ".ui-btn-text" ).text( function() {
- if ( !self.isMultiple ) {
- return selected.text();
- }
-
- return selected.length ? selected.map( function() {
- return $( this ).text();
- }).get().join( ", " ) : self.placeholder;
- });
- },
-
- setButtonCount: function() {
- var selected = this.selected();
-
- // multiple count inside button
- if ( this.isMultiple ) {
- this.buttonCount[ selected.length > 1 ? "show" : "hide" ]().text( selected.length );
- }
- },
-
- refresh: function() {
- this.setButtonText();
- this.setButtonCount();
- },
-
- // open and close preserved in native selects
- // to simplify users code when looping over selects
- open: $.noop,
- close: $.noop,
-
- disable: function() {
- this._setDisabled( true );
- this.button.addClass( "ui-disabled" );
- },
-
- enable: function() {
- this._setDisabled( false );
- this.button.removeClass( "ui-disabled" );
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $.mobile.selectmenu.prototype.enhanceWithin( e.target );
-});
-})( jQuery );
+++ /dev/null
-/*
-* "slider" plugin
-*/
-
-( function( $, undefined ) {
-
-$.widget( "mobile.slider", $.mobile.widget, {
- options: {
- theme: null,
- trackTheme: null,
- disabled: false,
- initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"
- },
-
- _create: function() {
-
- // TODO: Each of these should have comments explain what they're for
- var self = this,
-
- control = this.element,
-
- parentTheme = $.mobile.getInheritedTheme( control, "c" ),
-
- theme = this.options.theme || parentTheme,
-
- trackTheme = this.options.trackTheme || parentTheme,
-
- cType = control[ 0 ].nodeName.toLowerCase(),
-
- selectClass = ( cType == "select" ) ? "ui-slider-switch" : "",
-
- controlID = control.attr( "id" ),
-
- labelID = controlID + "-label",
-
- label = $( "[for='"+ controlID +"']" ).attr( "id", labelID ),
-
- val = function() {
- return cType == "input" ? parseFloat( control.val() ) : control[0].selectedIndex;
- },
-
- min = cType == "input" ? parseFloat( control.attr( "min" ) ) : 0,
-
- max = cType == "input" ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length-1,
-
- step = window.parseFloat( control.attr( "step" ) || 1 ),
-
- slider = $( "<div class='ui-slider " + selectClass + " ui-btn-down-" + trackTheme +
- " ui-btn-corner-all' role='application'></div>" ),
-
- handle = $( "<a href='#' class='ui-slider-handle'></a>" )
- .appendTo( slider )
- .buttonMarkup({ corners: true, theme: theme, shadow: true })
- .attr({
- "role": "slider",
- "aria-valuemin": min,
- "aria-valuemax": max,
- "aria-valuenow": val(),
- "aria-valuetext": val(),
- "title": val(),
- "aria-labelledby": labelID
- }),
- options;
-
- $.extend( this, {
- slider: slider,
- handle: handle,
- dragging: false,
- beforeStart: null,
- userModified: false,
- mouseMoved: false
- });
-
- if ( cType == "select" ) {
-
- slider.wrapInner( "<div class='ui-slider-inneroffset'></div>" );
-
- // make the handle move with a smooth transition
- handle.addClass( "ui-slider-handle-snapping" );
-
- options = control.find( "option" );
-
- control.find( "option" ).each(function( i ) {
-
- var side = !i ? "b":"a",
- corners = !i ? "right" :"left",
- theme = !i ? " ui-btn-down-" + trackTheme :( " " + $.mobile.activeBtnClass );
-
- $( "<div class='ui-slider-labelbg ui-slider-labelbg-" + side + theme + " ui-btn-corner-" + corners + "'></div>" )
- .prependTo( slider );
-
- $( "<span class='ui-slider-label ui-slider-label-" + side + theme + " ui-btn-corner-" + corners + "' role='img'>" + $( this ).getEncodedText() + "</span>" )
- .prependTo( handle );
- });
-
- }
-
- label.addClass( "ui-slider" );
-
- // monitor the input for updated values
- control.addClass( cType === "input" ? "ui-slider-input" : "ui-slider-switch" )
- .change( function() {
- // if the user dragged the handle, the "change" event was triggered from inside refresh(); don't call refresh() again
- if (!self.mouseMoved) {
- self.refresh( val(), true );
- }
- })
- .keyup( function() { // necessary?
- self.refresh( val(), true, true );
- })
- .blur( function() {
- self.refresh( val(), true );
- });
-
- // prevent screen drag when slider activated
- $( document ).bind( "vmousemove", function( event ) {
- if ( self.dragging ) {
- // self.mouseMoved must be updated before refresh() because it will be used in the control "change" event
- self.mouseMoved = true;
-
- if ( cType === "select" ) {
- // make the handle move in sync with the mouse
- handle.removeClass( "ui-slider-handle-snapping" );
- }
-
- self.refresh( event );
-
- // only after refresh() you can calculate self.userModified
- self.userModified = self.beforeStart !== control[0].selectedIndex;
- return false;
- }
- });
-
- slider.bind( "vmousedown", function( event ) {
- self.dragging = true;
- self.userModified = false;
- self.mouseMoved = false;
-
- if ( cType === "select" ) {
- self.beforeStart = control[0].selectedIndex;
- }
-
- self.refresh( event );
- return false;
- });
-
- slider.add( document )
- .bind( "vmouseup", function() {
- if ( self.dragging ) {
-
- self.dragging = false;
-
- if ( cType === "select") {
-
- // make the handle move with a smooth transition
- handle.addClass( "ui-slider-handle-snapping" );
-
- if ( self.mouseMoved ) {
-
- // this is a drag, change the value only if user dragged enough
- if ( self.userModified ) {
- self.refresh( self.beforeStart == 0 ? 1 : 0 );
- }
- else {
- self.refresh( self.beforeStart );
- }
-
- }
- else {
- // this is just a click, change the value
- self.refresh( self.beforeStart == 0 ? 1 : 0 );
- }
-
- }
-
- self.mouseMoved = false;
-
- return false;
- }
- });
-
- slider.insertAfter( control );
-
- // NOTE force focus on handle
- this.handle
- .bind( "vmousedown", function() {
- $( this ).focus();
- })
- .bind( "vclick", false );
-
- this.handle
- .bind( "keydown", function( event ) {
- var index = val();
-
- if ( self.options.disabled ) {
- return;
- }
-
- // In all cases prevent the default and mark the handle as active
- switch ( event.keyCode ) {
- case $.mobile.keyCode.HOME:
- case $.mobile.keyCode.END:
- case $.mobile.keyCode.PAGE_UP:
- case $.mobile.keyCode.PAGE_DOWN:
- case $.mobile.keyCode.UP:
- case $.mobile.keyCode.RIGHT:
- case $.mobile.keyCode.DOWN:
- case $.mobile.keyCode.LEFT:
- event.preventDefault();
-
- if ( !self._keySliding ) {
- self._keySliding = true;
- $( this ).addClass( "ui-state-active" );
- }
- break;
- }
-
- // move the slider according to the keypress
- switch ( event.keyCode ) {
- case $.mobile.keyCode.HOME:
- self.refresh( min );
- break;
- case $.mobile.keyCode.END:
- self.refresh( max );
- break;
- case $.mobile.keyCode.PAGE_UP:
- case $.mobile.keyCode.UP:
- case $.mobile.keyCode.RIGHT:
- self.refresh( index + step );
- break;
- case $.mobile.keyCode.PAGE_DOWN:
- case $.mobile.keyCode.DOWN:
- case $.mobile.keyCode.LEFT:
- self.refresh( index - step );
- break;
- }
- }) // remove active mark
- .keyup( function( event ) {
- if ( self._keySliding ) {
- self._keySliding = false;
- $( this ).removeClass( "ui-state-active" );
- }
- });
-
- this.refresh(undefined, undefined, true);
- },
-
- refresh: function( val, isfromControl, preventInputUpdate ) {
-
- if ( this.options.disabled || this.element.attr('disabled')) {
- this.disable();
- }
-
- var control = this.element, percent,
- cType = control[0].nodeName.toLowerCase(),
- min = cType === "input" ? parseFloat( control.attr( "min" ) ) : 0,
- max = cType === "input" ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length - 1;
-
- if ( typeof val === "object" ) {
- var data = val,
- // a slight tolerance helped get to the ends of the slider
- tol = 8;
- if ( !this.dragging ||
- data.pageX < this.slider.offset().left - tol ||
- data.pageX > this.slider.offset().left + this.slider.width() + tol ) {
- return;
- }
- percent = Math.round( ( ( data.pageX - this.slider.offset().left ) / this.slider.width() ) * 100 );
- } else {
- if ( val == null ) {
- val = cType === "input" ? parseFloat( control.val() ) : control[0].selectedIndex;
- }
- percent = ( parseFloat( val ) - min ) / ( max - min ) * 100;
- }
-
- if ( isNaN( percent ) ) {
- return;
- }
-
- if ( percent < 0 ) {
- percent = 0;
- }
-
- if ( percent > 100 ) {
- percent = 100;
- }
-
- var newval = Math.round( ( percent / 100 ) * ( max - min ) ) + min;
-
- if ( newval < min ) {
- newval = min;
- }
-
- if ( newval > max ) {
- newval = max;
- }
-
- // Flip the stack of the bg colors
- if ( percent > 60 && cType === "select" ) {
- // TODO: Dead path?
- }
- this.handle.css( "left", percent + "%" );
- this.handle.attr( {
- "aria-valuenow": cType === "input" ? newval : control.find( "option" ).eq( newval ).attr( "value" ),
- "aria-valuetext": cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText(),
- title: newval
- });
-
- // add/remove classes for flip toggle switch
- if ( cType === "select" ) {
- if ( newval === 0 ) {
- this.slider.addClass( "ui-slider-switch-a" )
- .removeClass( "ui-slider-switch-b" );
- } else {
- this.slider.addClass( "ui-slider-switch-b" )
- .removeClass( "ui-slider-switch-a" );
- }
- }
-
- if ( !preventInputUpdate ) {
- var valueChanged = false;
-
- // update control"s value
- if ( cType === "input" ) {
- valueChanged = control.val() !== newval;
- control.val( newval );
- } else {
- valueChanged = control[ 0 ].selectedIndex !== newval;
- control[ 0 ].selectedIndex = newval;
- }
- if ( !isfromControl && valueChanged ) {
- control.trigger( "change" );
- }
- }
- },
-
- enable: function() {
- this.element.attr( "disabled", false );
- this.slider.removeClass( "ui-disabled" ).attr( "aria-disabled", false );
- return this._setOption( "disabled", false );
- },
-
- disable: function() {
- this.element.attr( "disabled", true );
- this.slider.addClass( "ui-disabled" ).attr( "aria-disabled", true );
- return this._setOption( "disabled", true );
- }
-
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $.mobile.slider.prototype.enhanceWithin( e.target );
-});
-
-})( jQuery );
+++ /dev/null
-/*
-* "textinput" plugin for text inputs, textareas
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.textinput", $.mobile.widget, {
- options: {
- theme: null,
- initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type])"
- },
-
- _create: function() {
-
- var input = this.element,
- o = this.options,
- theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ),
- themeclass = " ui-body-" + theme,
- focusedEl, clearbtn;
-
- $( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
-
- focusedEl = input.addClass("ui-input-text ui-body-"+ theme );
-
- // XXX: Temporary workaround for issue 785 (Apple bug 8910589).
- // Turn off autocorrect and autocomplete on non-iOS 5 devices
- // since the popup they use can't be dismissed by the user. Note
- // that we test for the presence of the feature by looking for
- // the autocorrect property on the input element. We currently
- // have no test for iOS 5 or newer so we're temporarily using
- // the touchOverflow support flag for jQM 1.0. Yes, I feel dirty. - jblas
- if ( typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow ) {
- // Set the attribute instead of the property just in case there
- // is code that attempts to make modifications via HTML.
- input[0].setAttribute( "autocorrect", "off" );
- input[0].setAttribute( "autocomplete", "off" );
- }
-
-
- //"search" input widget
- if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
-
- focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + "'></div>" ).parent();
- clearbtn = $( "<a href='#' class='ui-input-clear' title='clear text'>clear text</a>" )
- .tap(function( event ) {
- input.val( "" ).focus();
- input.trigger( "change" );
- clearbtn.addClass( "ui-input-clear-hidden" );
- event.preventDefault();
- })
- .appendTo( focusedEl )
- .buttonMarkup({
- icon: "delete",
- iconpos: "notext",
- corners: true,
- shadow: true
- });
-
- function toggleClear() {
- setTimeout(function() {
- clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
- }, 0);
- }
-
- toggleClear();
-
- input.bind('paste cut keyup focus change blur', toggleClear);
-
- } else {
- input.addClass( "ui-corner-all ui-shadow-inset" + themeclass );
- }
-
- input.focus(function() {
- focusedEl.addClass( "ui-focus" );
- })
- .blur(function(){
- focusedEl.removeClass( "ui-focus" );
- });
-
- // Autogrow
- if ( input.is( "textarea" ) ) {
- var extraLineHeight = 15,
- keyupTimeoutBuffer = 100,
- keyup = function() {
- var scrollHeight = input[ 0 ].scrollHeight,
- clientHeight = input[ 0 ].clientHeight;
-
- if ( clientHeight < scrollHeight ) {
- input.height(scrollHeight + extraLineHeight);
- }
- },
- keyupTimeout;
-
- input.keyup(function() {
- clearTimeout( keyupTimeout );
- keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
- });
-
- // Issue 509: the browser is not providing scrollHeight properly until the styles load
- if ( $.trim( input.val() ) ) {
- // bind to the window load to make sure the height is calculated based on BOTH
- // the DOM and CSS
- $( window ).load( keyup );
-
- // binding to pagechange here ensures that for pages loaded via
- // ajax the height is recalculated without user input
- $( document ).one( "pagechange", keyup );
- }
- }
- },
-
- disable: function(){
- ( this.element.attr( "disabled", true ).is( "[type='search'],:jqmData(type='search')" ) ?
- this.element.parent() : this.element ).addClass( "ui-disabled" );
- },
-
- enable: function(){
- ( this.element.attr( "disabled", false).is( "[type='search'],:jqmData(type='search')" ) ?
- this.element.parent() : this.element ).removeClass( "ui-disabled" );
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $.mobile.textinput.prototype.enhanceWithin( e.target );
-});
-
-})( jQuery );
+++ /dev/null
-/*
-* plugin for creating CSS grids
-*/
-
-(function( $, undefined ) {
-
-$.fn.grid = function( options ) {
- return this.each(function() {
-
- var $this = $( this ),
- o = $.extend({
- grid: null
- },options),
- $kids = $this.children(),
- gridCols = {solo:1, a:2, b:3, c:4, d:5},
- grid = o.grid,
- iterator;
-
- if ( !grid ) {
- if ( $kids.length <= 5 ) {
- for ( var letter in gridCols ) {
- if ( gridCols[ letter ] === $kids.length ) {
- grid = letter;
- }
- }
- } else {
- grid = "a";
- }
- }
- iterator = gridCols[grid];
-
- $this.addClass( "ui-grid-" + grid );
-
- $kids.filter( ":nth-child(" + iterator + "n+1)" ).addClass( "ui-block-a" );
-
- if ( iterator > 1 ) {
- $kids.filter( ":nth-child(" + iterator + "n+2)" ).addClass( "ui-block-b" );
- }
- if ( iterator > 2 ) {
- $kids.filter( ":nth-child(3n+3)" ).addClass( "ui-block-c" );
- }
- if ( iterator > 3 ) {
- $kids.filter( ":nth-child(4n+4)" ).addClass( "ui-block-d" );
- }
- if ( iterator > 4 ) {
- $kids.filter( ":nth-child(5n+5)" ).addClass( "ui-block-e" );
- }
- });
-};
-})( jQuery );
\ No newline at end of file
+++ /dev/null
-// Script: jQuery hashchange event
-//
-// *Version: 1.3, Last updated: 7/21/2010*
-//
-// Project Home - http://benalman.com/projects/jquery-hashchange-plugin/
-// GitHub - http://github.com/cowboy/jquery-hashchange/
-// Source - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js
-// (Minified) - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.min.js (0.8kb gzipped)
-//
-// About: License
-//
-// Copyright (c) 2010 "Cowboy" Ben Alman,
-// Dual licensed under the MIT and GPL licenses.
-// http://benalman.com/about/license/
-//
-// About: Examples
-//
-// These working examples, complete with fully commented code, illustrate a few
-// ways in which this plugin can be used.
-//
-// hashchange event - http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
-// document.domain - http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/
-//
-// About: Support and Testing
-//
-// Information about what version or versions of jQuery this plugin has been
-// tested with, what browsers it has been tested in, and where the unit tests
-// reside (so you can test it yourself).
-//
-// jQuery Versions - 1.2.6, 1.3.2, 1.4.1, 1.4.2
-// Browsers Tested - Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5,
-// Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
-// Unit Tests - http://benalman.com/code/projects/jquery-hashchange/unit/
-//
-// About: Known issues
-//
-// While this jQuery hashchange event implementation is quite stable and
-// robust, there are a few unfortunate browser bugs surrounding expected
-// hashchange event-based behaviors, independent of any JavaScript
-// window.onhashchange abstraction. See the following examples for more
-// information:
-//
-// Chrome: Back Button - http://benalman.com/code/projects/jquery-hashchange/examples/bug-chrome-back-button/
-// Firefox: Remote XMLHttpRequest - http://benalman.com/code/projects/jquery-hashchange/examples/bug-firefox-remote-xhr/
-// WebKit: Back Button in an Iframe - http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/
-// Safari: Back Button from a different domain - http://benalman.com/code/projects/jquery-hashchange/examples/bug-safari-back-from-diff-domain/
-//
-// Also note that should a browser natively support the window.onhashchange
-// event, but not report that it does, the fallback polling loop will be used.
-//
-// About: Release History
-//
-// 1.3 - (7/21/2010) Reorganized IE6/7 Iframe code to make it more
-// "removable" for mobile-only development. Added IE6/7 document.title
-// support. Attempted to make Iframe as hidden as possible by using
-// techniques from http://www.paciellogroup.com/blog/?p=604. Added
-// support for the "shortcut" format $(window).hashchange( fn ) and
-// $(window).hashchange() like jQuery provides for built-in events.
-// Renamed jQuery.hashchangeDelay to <jQuery.fn.hashchange.delay> and
-// lowered its default value to 50. Added <jQuery.fn.hashchange.domain>
-// and <jQuery.fn.hashchange.src> properties plus document-domain.html
-// file to address access denied issues when setting document.domain in
-// IE6/7.
-// 1.2 - (2/11/2010) Fixed a bug where coming back to a page using this plugin
-// from a page on another domain would cause an error in Safari 4. Also,
-// IE6/7 Iframe is now inserted after the body (this actually works),
-// which prevents the page from scrolling when the event is first bound.
-// Event can also now be bound before DOM ready, but it won't be usable
-// before then in IE6/7.
-// 1.1 - (1/21/2010) Incorporated document.documentMode test to fix IE8 bug
-// where browser version is incorrectly reported as 8.0, despite
-// inclusion of the X-UA-Compatible IE=EmulateIE7 meta tag.
-// 1.0 - (1/9/2010) Initial Release. Broke out the jQuery BBQ event.special
-// window.onhashchange functionality into a separate plugin for users
-// who want just the basic event & back button support, without all the
-// extra awesomeness that BBQ provides. This plugin will be included as
-// part of jQuery BBQ, but also be available separately.
-
-(function($,window,undefined){
- '$:nomunge'; // Used by YUI compressor.
-
- // Reused string.
- var str_hashchange = 'hashchange',
-
- // Method / object references.
- doc = document,
- fake_onhashchange,
- special = $.event.special,
-
- // Does the browser support window.onhashchange? Note that IE8 running in
- // IE7 compatibility mode reports true for 'onhashchange' in window, even
- // though the event isn't supported, so also test document.documentMode.
- doc_mode = doc.documentMode,
- supports_onhashchange = 'on' + str_hashchange in window && ( doc_mode === undefined || doc_mode > 7 );
-
- // Get location.hash (or what you'd expect location.hash to be) sans any
- // leading #. Thanks for making this necessary, Firefox!
- function get_fragment( url ) {
- url = url || location.href;
- return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
- };
-
- // Method: jQuery.fn.hashchange
- //
- // Bind a handler to the window.onhashchange event or trigger all bound
- // window.onhashchange event handlers. This behavior is consistent with
- // jQuery's built-in event handlers.
- //
- // Usage:
- //
- // > jQuery(window).hashchange( [ handler ] );
- //
- // Arguments:
- //
- // handler - (Function) Optional handler to be bound to the hashchange
- // event. This is a "shortcut" for the more verbose form:
- // jQuery(window).bind( 'hashchange', handler ). If handler is omitted,
- // all bound window.onhashchange event handlers will be triggered. This
- // is a shortcut for the more verbose
- // jQuery(window).trigger( 'hashchange' ). These forms are described in
- // the <hashchange event> section.
- //
- // Returns:
- //
- // (jQuery) The initial jQuery collection of elements.
-
- // Allow the "shortcut" format $(elem).hashchange( fn ) for binding and
- // $(elem).hashchange() for triggering, like jQuery does for built-in events.
- $.fn[ str_hashchange ] = function( fn ) {
- return fn ? this.bind( str_hashchange, fn ) : this.trigger( str_hashchange );
- };
-
- // Property: jQuery.fn.hashchange.delay
- //
- // The numeric interval (in milliseconds) at which the <hashchange event>
- // polling loop executes. Defaults to 50.
-
- // Property: jQuery.fn.hashchange.domain
- //
- // If you're setting document.domain in your JavaScript, and you want hash
- // history to work in IE6/7, not only must this property be set, but you must
- // also set document.domain BEFORE jQuery is loaded into the page. This
- // property is only applicable if you are supporting IE6/7 (or IE8 operating
- // in "IE7 compatibility" mode).
- //
- // In addition, the <jQuery.fn.hashchange.src> property must be set to the
- // path of the included "document-domain.html" file, which can be renamed or
- // modified if necessary (note that the document.domain specified must be the
- // same in both your main JavaScript as well as in this file).
- //
- // Usage:
- //
- // jQuery.fn.hashchange.domain = document.domain;
-
- // Property: jQuery.fn.hashchange.src
- //
- // If, for some reason, you need to specify an Iframe src file (for example,
- // when setting document.domain as in <jQuery.fn.hashchange.domain>), you can
- // do so using this property. Note that when using this property, history
- // won't be recorded in IE6/7 until the Iframe src file loads. This property
- // is only applicable if you are supporting IE6/7 (or IE8 operating in "IE7
- // compatibility" mode).
- //
- // Usage:
- //
- // jQuery.fn.hashchange.src = 'path/to/file.html';
-
- $.fn[ str_hashchange ].delay = 50;
- /*
- $.fn[ str_hashchange ].domain = null;
- $.fn[ str_hashchange ].src = null;
- */
-
- // Event: hashchange event
- //
- // Fired when location.hash changes. In browsers that support it, the native
- // HTML5 window.onhashchange event is used, otherwise a polling loop is
- // initialized, running every <jQuery.fn.hashchange.delay> milliseconds to
- // see if the hash has changed. In IE6/7 (and IE8 operating in "IE7
- // compatibility" mode), a hidden Iframe is created to allow the back button
- // and hash-based history to work.
- //
- // Usage as described in <jQuery.fn.hashchange>:
- //
- // > // Bind an event handler.
- // > jQuery(window).hashchange( function(e) {
- // > var hash = location.hash;
- // > ...
- // > });
- // >
- // > // Manually trigger the event handler.
- // > jQuery(window).hashchange();
- //
- // A more verbose usage that allows for event namespacing:
- //
- // > // Bind an event handler.
- // > jQuery(window).bind( 'hashchange', function(e) {
- // > var hash = location.hash;
- // > ...
- // > });
- // >
- // > // Manually trigger the event handler.
- // > jQuery(window).trigger( 'hashchange' );
- //
- // Additional Notes:
- //
- // * The polling loop and Iframe are not created until at least one handler
- // is actually bound to the 'hashchange' event.
- // * If you need the bound handler(s) to execute immediately, in cases where
- // a location.hash exists on page load, via bookmark or page refresh for
- // example, use jQuery(window).hashchange() or the more verbose
- // jQuery(window).trigger( 'hashchange' ).
- // * The event can be bound before DOM ready, but since it won't be usable
- // before then in IE6/7 (due to the necessary Iframe), recommended usage is
- // to bind it inside a DOM ready handler.
-
- // Override existing $.event.special.hashchange methods (allowing this plugin
- // to be defined after jQuery BBQ in BBQ's source code).
- special[ str_hashchange ] = $.extend( special[ str_hashchange ], {
-
- // Called only when the first 'hashchange' event is bound to window.
- setup: function() {
- // If window.onhashchange is supported natively, there's nothing to do..
- if ( supports_onhashchange ) { return false; }
-
- // Otherwise, we need to create our own. And we don't want to call this
- // until the user binds to the event, just in case they never do, since it
- // will create a polling loop and possibly even a hidden Iframe.
- $( fake_onhashchange.start );
- },
-
- // Called only when the last 'hashchange' event is unbound from window.
- teardown: function() {
- // If window.onhashchange is supported natively, there's nothing to do..
- if ( supports_onhashchange ) { return false; }
-
- // Otherwise, we need to stop ours (if possible).
- $( fake_onhashchange.stop );
- }
-
- });
-
- // fake_onhashchange does all the work of triggering the window.onhashchange
- // event for browsers that don't natively support it, including creating a
- // polling loop to watch for hash changes and in IE 6/7 creating a hidden
- // Iframe to enable back and forward.
- fake_onhashchange = (function(){
- var self = {},
- timeout_id,
-
- // Remember the initial hash so it doesn't get triggered immediately.
- last_hash = get_fragment(),
-
- fn_retval = function(val){ return val; },
- history_set = fn_retval,
- history_get = fn_retval;
-
- // Start the polling loop.
- self.start = function() {
- timeout_id || poll();
- };
-
- // Stop the polling loop.
- self.stop = function() {
- timeout_id && clearTimeout( timeout_id );
- timeout_id = undefined;
- };
-
- // This polling loop checks every $.fn.hashchange.delay milliseconds to see
- // if location.hash has changed, and triggers the 'hashchange' event on
- // window when necessary.
- function poll() {
- var hash = get_fragment(),
- history_hash = history_get( last_hash );
-
- if ( hash !== last_hash ) {
- history_set( last_hash = hash, history_hash );
-
- $(window).trigger( str_hashchange );
-
- } else if ( history_hash !== last_hash ) {
- location.href = location.href.replace( /#.*/, '' ) + history_hash;
- }
-
- timeout_id = setTimeout( poll, $.fn[ str_hashchange ].delay );
- };
-
- // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
- // vvvvvvvvvvvvvvvvvvv REMOVE IF NOT SUPPORTING IE6/7/8 vvvvvvvvvvvvvvvvvvv
- // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
- $.browser.msie && !supports_onhashchange && (function(){
- // Not only do IE6/7 need the "magical" Iframe treatment, but so does IE8
- // when running in "IE7 compatibility" mode.
-
- var iframe,
- iframe_src;
-
- // When the event is bound and polling starts in IE 6/7, create a hidden
- // Iframe for history handling.
- self.start = function(){
- if ( !iframe ) {
- iframe_src = $.fn[ str_hashchange ].src;
- iframe_src = iframe_src && iframe_src + get_fragment();
-
- // Create hidden Iframe. Attempt to make Iframe as hidden as possible
- // by using techniques from http://www.paciellogroup.com/blog/?p=604.
- iframe = $('<iframe tabindex="-1" title="empty"/>').hide()
-
- // When Iframe has completely loaded, initialize the history and
- // start polling.
- .one( 'load', function(){
- iframe_src || history_set( get_fragment() );
- poll();
- })
-
- // Load Iframe src if specified, otherwise nothing.
- .attr( 'src', iframe_src || 'javascript:0' )
-
- // Append Iframe after the end of the body to prevent unnecessary
- // initial page scrolling (yes, this works).
- .insertAfter( 'body' )[0].contentWindow;
-
- // Whenever `document.title` changes, update the Iframe's title to
- // prettify the back/next history menu entries. Since IE sometimes
- // errors with "Unspecified error" the very first time this is set
- // (yes, very useful) wrap this with a try/catch block.
- doc.onpropertychange = function(){
- try {
- if ( event.propertyName === 'title' ) {
- iframe.document.title = doc.title;
- }
- } catch(e) {}
- };
-
- }
- };
-
- // Override the "stop" method since an IE6/7 Iframe was created. Even
- // if there are no longer any bound event handlers, the polling loop
- // is still necessary for back/next to work at all!
- self.stop = fn_retval;
-
- // Get history by looking at the hidden Iframe's location.hash.
- history_get = function() {
- return get_fragment( iframe.location.href );
- };
-
- // Set a new history item by opening and then closing the Iframe
- // document, *then* setting its location.hash. If document.domain has
- // been set, update that as well.
- history_set = function( hash, history_hash ) {
- var iframe_doc = iframe.document,
- domain = $.fn[ str_hashchange ].domain;
-
- if ( hash !== history_hash ) {
- // Update Iframe with any initial `document.title` that might be set.
- iframe_doc.title = doc.title;
-
- // Opening the Iframe's document after it has been closed is what
- // actually adds a history entry.
- iframe_doc.open();
-
- // Set document.domain for the Iframe document as well, if necessary.
- domain && iframe_doc.write( '<script>document.domain="' + domain + '"</script>' );
-
- iframe_doc.close();
-
- // Update the Iframe's hash, for great justice.
- iframe.location.hash = hash;
- }
- };
-
- })();
- // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- // ^^^^^^^^^^^^^^^^^^^ REMOVE IF NOT SUPPORTING IE6/7/8 ^^^^^^^^^^^^^^^^^^^
- // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
- return self;
- })();
-
-})(jQuery,this);
+++ /dev/null
-/*
-* "init" - Initialize the framework
-*/
-
-(function( $, window, undefined ) {
- var $html = $( "html" ),
- $head = $( "head" ),
- $window = $( window );
-
- // trigger mobileinit event - useful hook for configuring $.mobile settings before they're used
- $( window.document ).trigger( "mobileinit" );
-
- // support conditions
- // if device support condition(s) aren't met, leave things as they are -> a basic, usable experience,
- // otherwise, proceed with the enhancements
- if ( !$.mobile.gradeA() ) {
- return;
- }
-
- // override ajaxEnabled on platforms that have known conflicts with hash history updates
- // or generally work better browsing in regular http for full page refreshes (BB5, Opera Mini)
- if ( $.mobile.ajaxBlacklist ) {
- $.mobile.ajaxEnabled = false;
- }
-
- // add mobile, initial load "rendering" classes to docEl
- $html.addClass( "ui-mobile ui-mobile-rendering" );
-
- // loading div which appears during Ajax requests
- // will not appear if $.mobile.loadingMessage is false
- var $loader = $( "<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>" );
-
- $.extend($.mobile, {
- // turn on/off page loading message.
- showPageLoadingMsg: function() {
- if ( $.mobile.loadingMessage ) {
- var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
-
- $loader
- .find( "h1" )
- .text( $.mobile.loadingMessage )
- .end()
- .appendTo( $.mobile.pageContainer )
- // position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
- .css({
- top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
- activeBtn.length && activeBtn.offset().top || 100
- });
- }
-
- $html.addClass( "ui-loading" );
- },
-
- hidePageLoadingMsg: function() {
- $html.removeClass( "ui-loading" );
- },
-
- // find and enhance the pages in the dom and transition to the first page.
- initializePage: function() {
- // find present pages
- var $pages = $( ":jqmData(role='page')" );
-
- // if no pages are found, create one with body's inner html
- if ( !$pages.length ) {
- $pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 );
- }
-
- // add dialogs, set data-url attrs
- $pages.add( ":jqmData(role='dialog')" ).each(function() {
- var $this = $(this);
-
- // unless the data url is already set set it to the pathname
- if ( !$this.jqmData("url") ) {
- $this.attr( "data-" + $.mobile.ns + "url", $this.attr( "id" ) || location.pathname + location.search );
- }
- });
-
- // define first page in dom case one backs out to the directory root (not always the first page visited, but defined as fallback)
- $.mobile.firstPage = $pages.first();
-
- // define page container
- $.mobile.pageContainer = $pages.first().parent().addClass( "ui-mobile-viewport" );
-
- // alert listeners that the pagecontainer has been determined for binding
- // to events triggered on it
- $window.trigger( "pagecontainercreate" );
-
- // cue page loading message
- $.mobile.showPageLoadingMsg();
-
- // if hashchange listening is disabled or there's no hash deeplink, change to the first page in the DOM
- if ( !$.mobile.hashListeningEnabled || !$.mobile.path.stripHash( location.hash ) ) {
- $.mobile.changePage( $.mobile.firstPage, { transition: "none", reverse: true, changeHash: false, fromHashChange: true } );
- }
- // otherwise, trigger a hashchange to load a deeplink
- else {
- $window.trigger( "hashchange", [ true ] );
- }
- }
- });
-
- // This function injects a meta viewport tag to prevent scaling. Off by default, on by default when touchOverflow scrolling is enabled
- function disableZoom() {
- var cont = "user-scalable=no",
- meta = $( "meta[name='viewport']" );
-
- if( meta.length ){
- meta.attr( "content", meta.attr( "content" ) + ", " + cont );
- }
- else{
- $( "head" ).prepend( "<meta>", { "name": "viewport", "content": cont } );
- }
- }
-
- // if touch-overflow is enabled, disable user scaling, as it creates usability issues
- if( $.support.touchOverflow && $.mobile.touchOverflowEnabled && !$.mobile.touchOverflowZoomEnabled ){
- disableZoom();
- }
-
- // initialize events now, after mobileinit has occurred
- $.mobile._registerInternalEvents();
-
- // check which scrollTop value should be used by scrolling to 1 immediately at domready
- // then check what the scroll top is. Android will report 0... others 1
- // note that this initial scroll won't hide the address bar. It's just for the check.
- $(function() {
- window.scrollTo( 0, 1 );
-
- // if defaultHomeScroll hasn't been set yet, see if scrollTop is 1
- // it should be 1 in most browsers, but android treats 1 as 0 (for hiding addr bar)
- // so if it's 1, use 0 from now on
- $.mobile.defaultHomeScroll = ( !$.support.scrollTop || $(window).scrollTop() === 1 ) ? 0 : 1;
-
- //dom-ready inits
- if( $.mobile.autoInitializePage ){
- $.mobile.initializePage();
- }
-
- // window load event
- // hide iOS browser chrome on load
- $window.load( $.mobile.silentScroll );
- });
-})( jQuery, this );
+++ /dev/null
-/*
-* 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
-*
-*/
+++ /dev/null
-/*
-* "links" plugin - simple class additions for links
-*/
-
-(function( $, undefined ) {
-
-$( document ).bind( "pagecreate create", function( e ){
-
- //links within content areas
- $( e.target )
- .find( "a" )
- .not( ".ui-btn, .ui-link-inherit, :jqmData(role='none'), :jqmData(role='nojs')" )
- .addClass( "ui-link" );
-
-});
-
-})( jQuery );
\ No newline at end of file
+++ /dev/null
-/*
-* "listview" filter extension
-*/
-
-(function( $, undefined ) {
-
-$.mobile.listview.prototype.options.filter = false;
-$.mobile.listview.prototype.options.filterPlaceholder = "Filter items...";
-$.mobile.listview.prototype.options.filterTheme = "c";
-$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){
- return text.toLowerCase().indexOf( searchValue ) === -1;
-};
-
-$( ":jqmData(role='listview')" ).live( "listviewcreate", function() {
-
- var list = $( this ),
- listview = list.data( "listview" );
-
- if ( !listview.options.filter ) {
- return;
- }
-
- var wrapper = $( "<form>", {
- "class": "ui-listview-filter ui-bar-" + listview.options.filterTheme,
- "role": "search"
- }),
- search = $( "<input>", {
- placeholder: listview.options.filterPlaceholder
- })
- .attr( "data-" + $.mobile.ns + "type", "search" )
- .jqmData( "lastval", "" )
- .bind( "keyup change", function() {
-
- var $this = $(this),
- val = this.value.toLowerCase(),
- listItems = null,
- lastval = $this.jqmData( "lastval" ) + "",
- childItems = false,
- itemtext = "",
- item, change;
-
- // Change val as lastval for next execution
- $this.jqmData( "lastval" , val );
- change = val.substr( 0 , lastval.length - 1 ).replace( lastval , "" );
-
- if ( val.length < lastval.length || change.length != ( val.length - lastval.length ) ) {
-
- // Removed chars or pasted something totally different, check all items
- listItems = list.children();
- } else {
-
- // Only chars added, not removed, only use visible subset
- listItems = list.children( ":not(.ui-screen-hidden)" );
- }
-
- if ( val ) {
-
- // This handles hiding regular rows without the text we search for
- // and any list dividers without regular rows shown under it
-
- for ( var i = listItems.length - 1; i >= 0; i-- ) {
- item = $( listItems[ i ] );
- itemtext = item.jqmData( "filtertext" ) || item.text();
-
- if ( item.is( "li:jqmData(role=list-divider)" ) ) {
-
- item.toggleClass( "ui-filter-hidequeue" , !childItems );
-
- // New bucket!
- childItems = false;
-
- } else if ( listview.options.filterCallback( itemtext, val ) ) {
-
- //mark to be hidden
- item.toggleClass( "ui-filter-hidequeue" , true );
- } else {
-
- // There's a shown item in the bucket
- childItems = true;
- }
- }
-
- // Show items, not marked to be hidden
- listItems
- .filter( ":not(.ui-filter-hidequeue)" )
- .toggleClass( "ui-screen-hidden", false );
-
- // Hide items, marked to be hidden
- listItems
- .filter( ".ui-filter-hidequeue" )
- .toggleClass( "ui-screen-hidden", true )
- .toggleClass( "ui-filter-hidequeue", false );
-
- } else {
-
- //filtervalue is empty => show all
- listItems.toggleClass( "ui-screen-hidden", false );
- }
- listview._refreshCorners();
- })
- .appendTo( wrapper )
- .textinput();
-
- if ( $( this ).jqmData( "inset" ) ) {
- wrapper.addClass( "ui-listview-filter-inset" );
- }
-
- wrapper.bind( "submit", function() {
- return false;
- })
- .insertBefore( list );
-});
-
-})( jQuery );
\ No newline at end of file
+++ /dev/null
-/*
-* "listview" plugin
-*/
-
-(function( $, undefined ) {
-
-//Keeps track of the number of lists per page UID
-//This allows support for multiple nested list in the same page
-//https://github.com/jquery/jquery-mobile/issues/1617
-var listCountPerPage = {};
-
-$.widget( "mobile.listview", $.mobile.widget, {
- options: {
- theme: null,
- countTheme: "c",
- headerTheme: "b",
- dividerTheme: "b",
- splitIcon: "arrow-r",
- splitTheme: "b",
- inset: false,
- initSelector: ":jqmData(role='listview')"
- },
-
- _create: function() {
- var t = this;
-
- // create listview markup
- t.element.addClass(function( i, orig ) {
- return orig + " ui-listview " + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" );
- });
-
- t.refresh( true );
- },
-
- _removeCorners: function( li, which ) {
- var top = "ui-corner-top ui-corner-tr ui-corner-tl",
- bot = "ui-corner-bottom ui-corner-br ui-corner-bl";
-
- li = li.add( li.find( ".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb" ) );
-
- if ( which === "top" ) {
- li.removeClass( top );
- } else if ( which === "bottom" ) {
- li.removeClass( bot );
- } else {
- li.removeClass( top + " " + bot );
- }
- },
-
- _refreshCorners: function( create ) {
- var $li,
- $visibleli,
- $topli,
- $bottomli;
-
- if ( this.options.inset ) {
- $li = this.element.children( "li" );
- // at create time the li are not visible yet so we need to rely on .ui-screen-hidden
- $visibleli = create?$li.not( ".ui-screen-hidden" ):$li.filter( ":visible" );
-
- this._removeCorners( $li );
-
- // Select the first visible li element
- $topli = $visibleli.first()
- .addClass( "ui-corner-top" );
-
- $topli.add( $topli.find( ".ui-btn-inner" )
- .not( ".ui-li-link-alt span:first-child" ) )
- .addClass( "ui-corner-top" )
- .end()
- .find( ".ui-li-link-alt, .ui-li-link-alt span:first-child" )
- .addClass( "ui-corner-tr" )
- .end()
- .find( ".ui-li-thumb" )
- .not(".ui-li-icon")
- .addClass( "ui-corner-tl" );
-
- // Select the last visible li element
- $bottomli = $visibleli.last()
- .addClass( "ui-corner-bottom" );
-
- $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )
- .find( ".ui-li-link-alt" )
- .addClass( "ui-corner-br" )
- .end()
- .find( ".ui-li-thumb" )
- .not(".ui-li-icon")
- .addClass( "ui-corner-bl" );
- }
- if ( !create ) {
- this.element.trigger( "updatelayout" );
- }
- },
-
- // This is a generic utility method for finding the first
- // node with a given nodeName. It uses basic DOM traversal
- // to be fast and is meant to be a substitute for simple
- // $.fn.closest() and $.fn.children() calls on a single
- // element. Note that callers must pass both the lowerCase
- // and upperCase version of the nodeName they are looking for.
- // The main reason for this is that this function will be
- // called many times and we want to avoid having to lowercase
- // the nodeName from the element every time to ensure we have
- // a match. Note that this function lives here for now, but may
- // be moved into $.mobile if other components need a similar method.
- _findFirstElementByTagName: function( ele, nextProp, lcName, ucName )
- {
- var dict = {};
- dict[ lcName ] = dict[ ucName ] = true;
- while ( ele ) {
- if ( dict[ ele.nodeName ] ) {
- return ele;
- }
- ele = ele[ nextProp ];
- }
- return null;
- },
- _getChildrenByTagName: function( ele, lcName, ucName )
- {
- var results = [],
- dict = {};
- dict[ lcName ] = dict[ ucName ] = true;
- ele = ele.firstChild;
- while ( ele ) {
- if ( dict[ ele.nodeName ] ) {
- results.push( ele );
- }
- ele = ele.nextSibling;
- }
- return $( results );
- },
-
- _addThumbClasses: function( containers )
- {
- var i, img, len = containers.length;
- for ( i = 0; i < len; i++ ) {
- img = $( this._findFirstElementByTagName( containers[ i ].firstChild, "nextSibling", "img", "IMG" ) );
- if ( img.length ) {
- img.addClass( "ui-li-thumb" );
- $( this._findFirstElementByTagName( img[ 0 ].parentNode, "parentNode", "li", "LI" ) ).addClass( img.is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
- }
- }
- },
-
- refresh: function( create ) {
- this.parentPage = this.element.closest( ".ui-page" );
- this._createSubPages();
-
- var o = this.options,
- $list = this.element,
- self = this,
- dividertheme = $list.jqmData( "dividertheme" ) || o.dividerTheme,
- listsplittheme = $list.jqmData( "splittheme" ),
- listspliticon = $list.jqmData( "spliticon" ),
- li = this._getChildrenByTagName( $list[ 0 ], "li", "LI" ),
- counter = $.support.cssPseudoElement || !$.nodeName( $list[ 0 ], "ol" ) ? 0 : 1,
- itemClassDict = {},
- item, itemClass, itemTheme,
- a, last, splittheme, countParent, icon, imgParents, img;
-
- if ( counter ) {
- $list.find( ".ui-li-dec" ).remove();
- }
-
- if ( !o.theme ) {
- o.theme = $.mobile.getInheritedTheme( this.element, "c" );
- }
-
- for ( var pos = 0, numli = li.length; pos < numli; pos++ ) {
- item = li.eq( pos );
- itemClass = "ui-li";
-
- // If we're creating the element, we update it regardless
- if ( create || !item.hasClass( "ui-li" ) ) {
- itemTheme = item.jqmData("theme") || o.theme;
- a = this._getChildrenByTagName( item[ 0 ], "a", "A" );
-
- if ( a.length ) {
- icon = item.jqmData("icon");
-
- item.buttonMarkup({
- wrapperEls: "div",
- shadow: false,
- corners: false,
- iconpos: "right",
- icon: a.length > 1 || icon === false ? false : icon || "arrow-r",
- theme: itemTheme
- });
-
- if ( ( icon != false ) && ( a.length == 1 ) ) {
- item.addClass( "ui-li-has-arrow" );
- }
-
- a.first().addClass( "ui-link-inherit" );
-
- if ( a.length > 1 ) {
- itemClass += " ui-li-has-alt";
-
- last = a.last();
- splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;
-
- last.appendTo(item)
- .attr( "title", last.getEncodedText() )
- .addClass( "ui-li-link-alt" )
- .empty()
- .buttonMarkup({
- shadow: false,
- corners: false,
- theme: itemTheme,
- icon: false,
- iconpos: false
- })
- .find( ".ui-btn-inner" )
- .append(
- $( document.createElement( "span" ) ).buttonMarkup({
- shadow: true,
- corners: true,
- theme: splittheme,
- iconpos: "notext",
- icon: listspliticon || last.jqmData( "icon" ) || o.splitIcon
- })
- );
- }
- } else if ( item.jqmData( "role" ) === "list-divider" ) {
-
- itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;
- item.attr( "role", "heading" );
-
- //reset counter when a divider heading is encountered
- if ( counter ) {
- counter = 1;
- }
-
- } else {
- itemClass += " ui-li-static ui-body-" + itemTheme;
- }
- }
-
- if ( counter && itemClass.indexOf( "ui-li-divider" ) < 0 ) {
- countParent = item.is( ".ui-li-static:first" ) ? item : item.find( ".ui-link-inherit" );
-
- countParent.addClass( "ui-li-jsnumbering" )
- .prepend( "<span class='ui-li-dec'>" + (counter++) + ". </span>" );
- }
-
- // Instead of setting item class directly on the list item and its
- // btn-inner at this point in time, push the item into a dictionary
- // that tells us what class to set on it so we can do this after this
- // processing loop is finished.
-
- if ( !itemClassDict[ itemClass ] ) {
- itemClassDict[ itemClass ] = [];
- }
-
- itemClassDict[ itemClass ].push( item[ 0 ] );
- }
-
- // Set the appropriate listview item classes on each list item
- // and their btn-inner elements. The main reason we didn't do this
- // in the for-loop above is because we can eliminate per-item function overhead
- // by calling addClass() and children() once or twice afterwards. This
- // can give us a significant boost on platforms like WP7.5.
-
- for ( itemClass in itemClassDict ) {
- $( itemClassDict[ itemClass ] ).addClass( itemClass ).children( ".ui-btn-inner" ).addClass( itemClass );
- }
-
- $list.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" )
- .end()
-
- .find( "p, dl" ).addClass( "ui-li-desc" )
- .end()
-
- .find( ".ui-li-aside" ).each(function() {
- var $this = $(this);
- $this.prependTo( $this.parent() ); //shift aside to front for css float
- })
- .end()
-
- .find( ".ui-li-count" ).each( function() {
- $( this ).closest( "li" ).addClass( "ui-li-has-count" );
- }).addClass( "ui-btn-up-" + ( $list.jqmData( "counttheme" ) || this.options.countTheme) + " ui-btn-corner-all" );
-
- // The idea here is to look at the first image in the list item
- // itself, and any .ui-link-inherit element it may contain, so we
- // can place the appropriate classes on the image and list item.
- // Note that we used to use something like:
- //
- // li.find(">img:eq(0), .ui-link-inherit>img:eq(0)").each( ... );
- //
- // But executing a find() like that on Windows Phone 7.5 took a
- // really long time. Walking things manually with the code below
- // allows the 400 listview item page to load in about 3 seconds as
- // opposed to 30 seconds.
-
- this._addThumbClasses( li );
- this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
-
- this._refreshCorners( create );
- },
-
- //create a string for ID/subpage url creation
- _idStringEscape: function( str ) {
- return str.replace(/[^a-zA-Z0-9]/g, '-');
- },
-
- _createSubPages: function() {
- var parentList = this.element,
- parentPage = parentList.closest( ".ui-page" ),
- parentUrl = parentPage.jqmData( "url" ),
- parentId = parentUrl || parentPage[ 0 ][ $.expando ],
- parentListId = parentList.attr( "id" ),
- o = this.options,
- dns = "data-" + $.mobile.ns,
- self = this,
- persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" ),
- hasSubPages;
-
- if ( typeof listCountPerPage[ parentId ] === "undefined" ) {
- listCountPerPage[ parentId ] = -1;
- }
-
- parentListId = parentListId || ++listCountPerPage[ parentId ];
-
- $( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function( i ) {
- var self = this,
- list = $( this ),
- listId = list.attr( "id" ) || parentListId + "-" + i,
- parent = list.parent(),
- nodeEls = $( list.prevAll().toArray().reverse() ),
- nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim(parent.contents()[ 0 ].nodeValue) + "</span>" ),
- title = nodeEls.first().getEncodedText(),//url limits to first 30 chars of text
- id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId,
- theme = list.jqmData( "theme" ) || o.theme,
- countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,
- newPage, anchor;
-
- //define hasSubPages for use in later removal
- hasSubPages = true;
-
- newPage = list.detach()
- .wrap( "<div " + dns + "role='page' " + dns + "url='" + id + "' " + dns + "theme='" + theme + "' " + dns + "count-theme='" + countTheme + "'><div " + dns + "role='content'></div></div>" )
- .parent()
- .before( "<div " + dns + "role='header' " + dns + "theme='" + o.headerTheme + "'><div class='ui-title'>" + title + "</div></div>" )
- .after( persistentFooterID ? $( "<div " + dns + "role='footer' " + dns + "id='"+ persistentFooterID +"'>") : "" )
- .parent()
- .appendTo( $.mobile.pageContainer );
-
- newPage.page();
-
- anchor = parent.find('a:first');
-
- if ( !anchor.length ) {
- anchor = $( "<a/>" ).html( nodeEls || title ).prependTo( parent.empty() );
- }
-
- anchor.attr( "href", "#" + id );
-
- }).listview();
-
- // on pagehide, remove any nested pages along with the parent page, as long as they aren't active
- // and aren't embedded
- if( hasSubPages &&
- parentPage.is( ":jqmData(external-page='true')" ) &&
- parentPage.data("page").options.domCache === false ) {
-
- var newRemove = function( e, ui ){
- var nextPage = ui.nextPage, npURL;
-
- if( ui.nextPage ){
- npURL = nextPage.jqmData( "url" );
- if( npURL.indexOf( parentUrl + "&" + $.mobile.subPageUrlKey ) !== 0 ){
- self.childPages().remove();
- parentPage.remove();
- }
- }
- };
-
- // unbind the original page remove and replace with our specialized version
- parentPage
- .unbind( "pagehide.remove" )
- .bind( "pagehide.remove", newRemove);
- }
- },
-
- // TODO sort out a better way to track sub pages of the listview this is brittle
- childPages: function(){
- var parentUrl = this.parentPage.jqmData( "url" );
-
- return $( ":jqmData(url^='"+ parentUrl + "&" + $.mobile.subPageUrlKey +"')");
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $( $.mobile.listview.prototype.options.initSelector, e.target ).listview();
-});
-
-})( jQuery );
+++ /dev/null
-/*
-* a workaround for window.matchMedia
-*/
-
-(function( $, undefined ) {
-
-var $window = $( window ),
- $html = $( "html" );
-
-/* $.mobile.media method: pass a CSS media type or query and get a bool return
- note: this feature relies on actual media query support for media queries, though types will work most anywhere
- examples:
- $.mobile.media('screen') //>> tests for screen media type
- $.mobile.media('screen and (min-width: 480px)') //>> tests for screen media type with window width > 480px
- $.mobile.media('@media screen and (-webkit-min-device-pixel-ratio: 2)') //>> tests for webkit 2x pixel ratio (iPhone 4)
-*/
-$.mobile.media = (function() {
- // TODO: use window.matchMedia once at least one UA implements it
- var cache = {},
- testDiv = $( "<div id='jquery-mediatest'>" ),
- fakeBody = $( "<body>" ).append( testDiv );
-
- return function( query ) {
- if ( !( query in cache ) ) {
- var styleBlock = document.createElement( "style" ),
- cssrule = "@media " + query + " { #jquery-mediatest { position:absolute; } }";
-
- //must set type for IE!
- styleBlock.type = "text/css";
-
- if ( styleBlock.styleSheet ){
- styleBlock.styleSheet.cssText = cssrule;
- } else {
- styleBlock.appendChild( document.createTextNode(cssrule) );
- }
-
- $html.prepend( fakeBody ).prepend( styleBlock );
- cache[ query ] = testDiv.css( "position" ) === "absolute";
- fakeBody.add( styleBlock ).remove();
- }
- return cache[ query ];
- };
-})();
-
-})(jQuery);
+++ /dev/null
-/*
-* "navbar" plugin
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.navbar", $.mobile.widget, {
- options: {
- iconpos: "top",
- grid: null,
- initSelector: ":jqmData(role='navbar')"
- },
-
- _create: function(){
-
- var $navbar = this.element,
- $navbtns = $navbar.find( "a" ),
- iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
- this.options.iconpos : undefined;
-
- $navbar.addClass( "ui-navbar" )
- .attr( "role","navigation" )
- .find( "ul" )
- .grid({ grid: this.options.grid });
-
- if ( !iconpos ) {
- $navbar.addClass( "ui-navbar-noicons" );
- }
-
- $navbtns.buttonMarkup({
- corners: false,
- shadow: false,
- iconpos: iconpos
- });
-
- $navbar.delegate( "a", "vclick", function( event ) {
- $navbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
- $( this ).addClass( $.mobile.activeBtnClass );
- });
- }
-});
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- $( $.mobile.navbar.prototype.options.initSelector, e.target ).navbar();
-});
-
-})( jQuery );
+++ /dev/null
-/*
-* core utilities for auto ajax navigation, base tag mgmt,
-*/
-
-( function( $, undefined ) {
-
- //define vars for interal use
- var $window = $( window ),
- $html = $( 'html' ),
- $head = $( 'head' ),
-
- //url path helpers for use in relative url management
- path = {
-
- // This scary looking regular expression parses an absolute URL or its relative
- // variants (protocol, site, document, query, and hash), into the various
- // components (protocol, host, path, query, fragment, etc that make up the
- // URL as well as some other commonly used sub-parts. When used with RegExp.exec()
- // or String.match, it parses the URL into a results array that looks like this:
- //
- // [0]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content
- // [1]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread
- // [2]: http://jblas:password@mycompany.com:8080/mail/inbox
- // [3]: http://jblas:password@mycompany.com:8080
- // [4]: http:
- // [5]: //
- // [6]: jblas:password@mycompany.com:8080
- // [7]: jblas:password
- // [8]: jblas
- // [9]: password
- // [10]: mycompany.com:8080
- // [11]: mycompany.com
- // [12]: 8080
- // [13]: /mail/inbox
- // [14]: /mail/
- // [15]: inbox
- // [16]: ?msg=1234&type=unread
- // [17]: #msg-content
- //
- urlParseRE: /^(((([^:\/#\?]+:)?(?:(\/\/)((?:(([^:@\/#\?]+)(?:\:([^:@\/#\?]+))?)@)?(([^:\/#\?\]\[]+|\[[^\/\]@#?]+\])(?:\:([0-9]+))?))?)?)?((\/?(?:[^\/\?#]+\/+)*)([^\?#]*)))?(\?[^#]+)?)(#.*)?/,
-
- //Parse a URL into a structure that allows easy access to
- //all of the URL components by name.
- parseUrl: function( url ) {
- // If we're passed an object, we'll assume that it is
- // a parsed url object and just return it back to the caller.
- if ( $.type( url ) === "object" ) {
- return url;
- }
-
- var matches = path.urlParseRE.exec( url || "" ) || [];
-
- // Create an object that allows the caller to access the sub-matches
- // by name. Note that IE returns an empty string instead of undefined,
- // like all other browsers do, so we normalize everything so its consistent
- // no matter what browser we're running on.
- return {
- href: matches[ 0 ] || "",
- hrefNoHash: matches[ 1 ] || "",
- hrefNoSearch: matches[ 2 ] || "",
- domain: matches[ 3 ] || "",
- protocol: matches[ 4 ] || "",
- doubleSlash: matches[ 5 ] || "",
- authority: matches[ 6 ] || "",
- username: matches[ 8 ] || "",
- password: matches[ 9 ] || "",
- host: matches[ 10 ] || "",
- hostname: matches[ 11 ] || "",
- port: matches[ 12 ] || "",
- pathname: matches[ 13 ] || "",
- directory: matches[ 14 ] || "",
- filename: matches[ 15 ] || "",
- search: matches[ 16 ] || "",
- hash: matches[ 17 ] || ""
- };
- },
-
- //Turn relPath into an asbolute path. absPath is
- //an optional absolute path which describes what
- //relPath is relative to.
- makePathAbsolute: function( relPath, absPath ) {
- if ( relPath && relPath.charAt( 0 ) === "/" ) {
- return relPath;
- }
-
- relPath = relPath || "";
- absPath = absPath ? absPath.replace( /^\/|(\/[^\/]*|[^\/]+)$/g, "" ) : "";
-
- var absStack = absPath ? absPath.split( "/" ) : [],
- relStack = relPath.split( "/" );
- for ( var i = 0; i < relStack.length; i++ ) {
- var d = relStack[ i ];
- switch ( d ) {
- case ".":
- break;
- case "..":
- if ( absStack.length ) {
- absStack.pop();
- }
- break;
- default:
- absStack.push( d );
- break;
- }
- }
- return "/" + absStack.join( "/" );
- },
-
- //Returns true if both urls have the same domain.
- isSameDomain: function( absUrl1, absUrl2 ) {
- return path.parseUrl( absUrl1 ).domain === path.parseUrl( absUrl2 ).domain;
- },
-
- //Returns true for any relative variant.
- isRelativeUrl: function( url ) {
- // All relative Url variants have one thing in common, no protocol.
- return path.parseUrl( url ).protocol === "";
- },
-
- //Returns true for an absolute url.
- isAbsoluteUrl: function( url ) {
- return path.parseUrl( url ).protocol !== "";
- },
-
- //Turn the specified realtive URL into an absolute one. This function
- //can handle all relative variants (protocol, site, document, query, fragment).
- makeUrlAbsolute: function( relUrl, absUrl ) {
- if ( !path.isRelativeUrl( relUrl ) ) {
- return relUrl;
- }
-
- var relObj = path.parseUrl( relUrl ),
- absObj = path.parseUrl( absUrl ),
- protocol = relObj.protocol || absObj.protocol,
- doubleSlash = relObj.protocol ? relObj.doubleSlash : ( relObj.doubleSlash || absObj.doubleSlash ),
- authority = relObj.authority || absObj.authority,
- hasPath = relObj.pathname !== "",
- pathname = path.makePathAbsolute( relObj.pathname || absObj.filename, absObj.pathname ),
- search = relObj.search || ( !hasPath && absObj.search ) || "",
- hash = relObj.hash;
-
- return protocol + doubleSlash + authority + pathname + search + hash;
- },
-
- //Add search (aka query) params to the specified url.
- addSearchParams: function( url, params ) {
- var u = path.parseUrl( url ),
- p = ( typeof params === "object" ) ? $.param( params ) : params,
- s = u.search || "?";
- return u.hrefNoSearch + s + ( s.charAt( s.length - 1 ) !== "?" ? "&" : "" ) + p + ( u.hash || "" );
- },
-
- convertUrlToDataUrl: function( absUrl ) {
- var u = path.parseUrl( absUrl );
- if ( path.isEmbeddedPage( u ) ) {
- // For embedded pages, remove the dialog hash key as in getFilePath(),
- // otherwise the Data Url won't match the id of the embedded Page.
- return u.hash.split( dialogHashKey )[0].replace( /^#/, "" );
- } else if ( path.isSameDomain( u, documentBase ) ) {
- return u.hrefNoHash.replace( documentBase.domain, "" );
- }
- return absUrl;
- },
-
- //get path from current hash, or from a file path
- get: function( newPath ) {
- if( newPath === undefined ) {
- newPath = location.hash;
- }
- return path.stripHash( newPath ).replace( /[^\/]*\.[^\/*]+$/, '' );
- },
-
- //return the substring of a filepath before the sub-page key, for making a server request
- getFilePath: function( path ) {
- var splitkey = '&' + $.mobile.subPageUrlKey;
- return path && path.split( splitkey )[0].split( dialogHashKey )[0];
- },
-
- //set location hash to path
- set: function( path ) {
- location.hash = path;
- },
-
- //test if a given url (string) is a path
- //NOTE might be exceptionally naive
- isPath: function( url ) {
- return ( /\// ).test( url );
- },
-
- //return a url path with the window's location protocol/hostname/pathname removed
- clean: function( url ) {
- return url.replace( documentBase.domain, "" );
- },
-
- //just return the url without an initial #
- stripHash: function( url ) {
- return url.replace( /^#/, "" );
- },
-
- //remove the preceding hash, any query params, and dialog notations
- cleanHash: function( hash ) {
- return path.stripHash( hash.replace( /\?.*$/, "" ).replace( dialogHashKey, "" ) );
- },
-
- //check whether a url is referencing the same domain, or an external domain or different protocol
- //could be mailto, etc
- isExternal: function( url ) {
- var u = path.parseUrl( url );
- return u.protocol && u.domain !== documentUrl.domain ? true : false;
- },
-
- hasProtocol: function( url ) {
- return ( /^(:?\w+:)/ ).test( url );
- },
-
- //check if the specified url refers to the first page in the main application document.
- isFirstPageUrl: function( url ) {
- // We only deal with absolute paths.
- var u = path.parseUrl( path.makeUrlAbsolute( url, documentBase ) ),
-
- // Does the url have the same path as the document?
- samePath = u.hrefNoHash === documentUrl.hrefNoHash || ( documentBaseDiffers && u.hrefNoHash === documentBase.hrefNoHash ),
-
- // Get the first page element.
- fp = $.mobile.firstPage,
-
- // Get the id of the first page element if it has one.
- fpId = fp && fp[0] ? fp[0].id : undefined;
-
- // The url refers to the first page if the path matches the document and
- // it either has no hash value, or the hash is exactly equal to the id of the
- // first page element.
- return samePath && ( !u.hash || u.hash === "#" || ( fpId && u.hash.replace( /^#/, "" ) === fpId ) );
- },
-
- isEmbeddedPage: function( url ) {
- var u = path.parseUrl( url );
-
- //if the path is absolute, then we need to compare the url against
- //both the documentUrl and the documentBase. The main reason for this
- //is that links embedded within external documents will refer to the
- //application document, whereas links embedded within the application
- //document will be resolved against the document base.
- if ( u.protocol !== "" ) {
- return ( u.hash && ( u.hrefNoHash === documentUrl.hrefNoHash || ( documentBaseDiffers && u.hrefNoHash === documentBase.hrefNoHash ) ) );
- }
- return (/^#/).test( u.href );
- }
- },
-
- //will be defined when a link is clicked and given an active class
- $activeClickedLink = null,
-
- //urlHistory is purely here to make guesses at whether the back or forward button was clicked
- //and provide an appropriate transition
- urlHistory = {
- // Array of pages that are visited during a single page load.
- // Each has a url and optional transition, title, and pageUrl (which represents the file path, in cases where URL is obscured, such as dialogs)
- stack: [],
-
- //maintain an index number for the active page in the stack
- activeIndex: 0,
-
- //get active
- getActive: function() {
- return urlHistory.stack[ urlHistory.activeIndex ];
- },
-
- getPrev: function() {
- return urlHistory.stack[ urlHistory.activeIndex - 1 ];
- },
-
- getNext: function() {
- return urlHistory.stack[ urlHistory.activeIndex + 1 ];
- },
-
- // addNew is used whenever a new page is added
- addNew: function( url, transition, title, pageUrl, role ) {
- //if there's forward history, wipe it
- if( urlHistory.getNext() ) {
- urlHistory.clearForward();
- }
-
- urlHistory.stack.push( {url : url, transition: transition, title: title, pageUrl: pageUrl, role: role } );
-
- urlHistory.activeIndex = urlHistory.stack.length - 1;
- },
-
- //wipe urls ahead of active index
- clearForward: function() {
- urlHistory.stack = urlHistory.stack.slice( 0, urlHistory.activeIndex + 1 );
- },
-
- directHashChange: function( opts ) {
- var back , forward, newActiveIndex, prev = this.getActive();
-
- // check if url isp in history and if it's ahead or behind current page
- $.each( urlHistory.stack, function( i, historyEntry ) {
-
- //if the url is in the stack, it's a forward or a back
- if( opts.currentUrl === historyEntry.url ) {
- //define back and forward by whether url is older or newer than current page
- back = i < urlHistory.activeIndex;
- forward = !back;
- newActiveIndex = i;
- }
- });
-
- // save new page index, null check to prevent falsey 0 result
- this.activeIndex = newActiveIndex !== undefined ? newActiveIndex : this.activeIndex;
-
- if( back ) {
- ( opts.either || opts.isBack )( true );
- } else if( forward ) {
- ( opts.either || opts.isForward )( false );
- }
- },
-
- //disable hashchange event listener internally to ignore one change
- //toggled internally when location.hash is updated to match the url of a successful page load
- ignoreNextHashChange: false
- },
-
- //define first selector to receive focus when a page is shown
- focusable = "[tabindex],a,button:visible,select:visible,input",
-
- //queue to hold simultanious page transitions
- pageTransitionQueue = [],
-
- //indicates whether or not page is in process of transitioning
- isPageTransitioning = false,
-
- //nonsense hash change key for dialogs, so they create a history entry
- dialogHashKey = "&ui-state=dialog",
-
- //existing base tag?
- $base = $head.children( "base" ),
-
- //tuck away the original document URL minus any fragment.
- documentUrl = path.parseUrl( location.href ),
-
- //if the document has an embedded base tag, documentBase is set to its
- //initial value. If a base tag does not exist, then we default to the documentUrl.
- documentBase = $base.length ? path.parseUrl( path.makeUrlAbsolute( $base.attr( "href" ), documentUrl.href ) ) : documentUrl,
-
- //cache the comparison once.
- documentBaseDiffers = ( documentUrl.hrefNoHash !== documentBase.hrefNoHash );
-
- //base element management, defined depending on dynamic base tag support
- var base = $.support.dynamicBaseTag ? {
-
- //define base element, for use in routing asset urls that are referenced in Ajax-requested markup
- element: ( $base.length ? $base : $( "<base>", { href: documentBase.hrefNoHash } ).prependTo( $head ) ),
-
- //set the generated BASE element's href attribute to a new page's base path
- set: function( href ) {
- base.element.attr( "href", path.makeUrlAbsolute( href, documentBase ) );
- },
-
- //set the generated BASE element's href attribute to a new page's base path
- reset: function() {
- base.element.attr( "href", documentBase.hrefNoHash );
- }
-
- } : undefined;
-
-/*
- internal utility functions
---------------------------------------*/
-
-
- //direct focus to the page title, or otherwise first focusable element
- function reFocus( page ) {
- var pageTitle = page.find( ".ui-title:eq(0)" );
-
- if( pageTitle.length ) {
- pageTitle.focus();
- }
- else{
- page.focus();
- }
- }
-
- //remove active classes after page transition or error
- function removeActiveLinkClass( forceRemoval ) {
- if( !!$activeClickedLink && ( !$activeClickedLink.closest( '.ui-page-active' ).length || forceRemoval ) ) {
- $activeClickedLink.removeClass( $.mobile.activeBtnClass );
- }
- $activeClickedLink = null;
- }
-
- function releasePageTransitionLock() {
- isPageTransitioning = false;
- if( pageTransitionQueue.length > 0 ) {
- $.mobile.changePage.apply( null, pageTransitionQueue.pop() );
- }
- }
-
- // Save the last scroll distance per page, before it is hidden
- var setLastScrollEnabled = true,
- firstScrollElem, getScrollElem, setLastScroll, delayedSetLastScroll;
-
- getScrollElem = function() {
- var scrollElem = $window, activePage,
- touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled;
-
- if( touchOverflow ){
- activePage = $( ".ui-page-active" );
- scrollElem = activePage.is( ".ui-native-fixed" ) ? activePage.find( ".ui-content" ) : activePage;
- }
-
- return scrollElem;
- };
-
- setLastScroll = function( scrollElem ) {
- // this barrier prevents setting the scroll value based on the browser
- // scrolling the window based on a hashchange
- if( !setLastScrollEnabled ) {
- return;
- }
-
- var active = $.mobile.urlHistory.getActive();
-
- if( active ) {
- var lastScroll = scrollElem && scrollElem.scrollTop();
-
- // Set active page's lastScroll prop.
- // If the location we're scrolling to is less than minScrollBack, let it go.
- active.lastScroll = lastScroll < $.mobile.minScrollBack ? $.mobile.defaultHomeScroll : lastScroll;
- }
- };
-
- // bind to scrollstop to gather scroll position. The delay allows for the hashchange
- // event to fire and disable scroll recording in the case where the browser scrolls
- // to the hash targets location (sometimes the top of the page). once pagechange fires
- // getLastScroll is again permitted to operate
- delayedSetLastScroll = function() {
- setTimeout( setLastScroll, 100, $(this) );
- };
-
- // disable an scroll setting when a hashchange has been fired, this only works
- // because the recording of the scroll position is delayed for 100ms after
- // the browser might have changed the position because of the hashchange
- $window.bind( $.support.pushState ? "popstate" : "hashchange", function() {
- setLastScrollEnabled = false;
- });
-
- // handle initial hashchange from chrome :(
- $window.one( $.support.pushState ? "popstate" : "hashchange", function() {
- setLastScrollEnabled = true;
- });
-
- // wait until the mobile page container has been determined to bind to pagechange
- $window.one( "pagecontainercreate", function(){
- // once the page has changed, re-enable the scroll recording
- $.mobile.pageContainer.bind( "pagechange", function() {
- var scrollElem = getScrollElem();
-
- setLastScrollEnabled = true;
-
- // remove any binding that previously existed on the get scroll
- // which may or may not be different than the scroll element determined for
- // this page previously
- scrollElem.unbind( "scrollstop", delayedSetLastScroll );
-
- // determine and bind to the current scoll element which may be the window
- // or in the case of touch overflow the element with touch overflow
- scrollElem.bind( "scrollstop", delayedSetLastScroll );
- });
- });
-
- // bind to scrollstop for the first page as "pagechange" won't be fired in that case
- getScrollElem().bind( "scrollstop", delayedSetLastScroll );
-
- // Make the iOS clock quick-scroll work again if we're using native overflow scrolling
- /*
- if( $.support.touchOverflow ){
- if( $.mobile.touchOverflowEnabled ){
- $( window ).bind( "scrollstop", function(){
- if( $( this ).scrollTop() === 0 ){
- $.mobile.activePage.scrollTop( 0 );
- }
- });
- }
- }
- */
-
- //function for transitioning between two existing pages
- function transitionPages( toPage, fromPage, transition, reverse ) {
-
- //get current scroll distance
- var active = $.mobile.urlHistory.getActive(),
- touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
- toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ),
- screenHeight = getScreenHeight();
-
- // Scroll to top, hide addr bar
- window.scrollTo( 0, $.mobile.defaultHomeScroll );
-
- if( fromPage ) {
- //trigger before show/hide events
- fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } );
- }
-
- if( !touchOverflow){
- toPage.height( screenHeight + toScroll );
- }
-
- toPage.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } );
-
- //clear page loader
- $.mobile.hidePageLoadingMsg();
-
- if( touchOverflow && toScroll ){
-
- toPage.addClass( "ui-mobile-pre-transition" );
- // Send focus to page as it is now display: block
- reFocus( toPage );
-
- //set page's scrollTop to remembered distance
- if( toPage.is( ".ui-native-fixed" ) ){
- toPage.find( ".ui-content" ).scrollTop( toScroll );
- }
- else{
- toPage.scrollTop( toScroll );
- }
- }
-
- //find the transition handler for the specified transition. If there
- //isn't one in our transitionHandlers dictionary, use the default one.
- //call the handler immediately to kick-off the transition.
- var th = $.mobile.transitionHandlers[transition || "none"] || $.mobile.defaultTransitionHandler,
- promise = th( transition, reverse, toPage, fromPage );
-
- promise.done(function() {
- //reset toPage height back
- if( !touchOverflow ){
- toPage.height( "" );
- // Send focus to the newly shown page
- reFocus( toPage );
- }
-
- // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
- if( !touchOverflow ){
- $.mobile.silentScroll( toScroll );
- }
-
- //trigger show/hide events
- if( fromPage ) {
- if( !touchOverflow ){
- fromPage.height( "" );
- }
-
- fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );
- }
-
- //trigger pageshow, define prevPage as either fromPage or empty jQuery obj
- toPage.data( "page" )._trigger( "show", null, { prevPage: fromPage || $( "" ) } );
- });
-
- return promise;
- }
-
- //simply set the active page's minimum height to screen height, depending on orientation
- function getScreenHeight(){
- var orientation = $.event.special.orientationchange.orientation(),
- port = orientation === "portrait",
- winMin = port ? 480 : 320,
- screenHeight = port ? screen.availHeight : screen.availWidth,
- winHeight = Math.max( winMin, $( window ).height() ),
- pageMin = Math.min( screenHeight, winHeight );
-
- return pageMin;
- }
-
- $.mobile.getScreenHeight = getScreenHeight;
-
- //simply set the active page's minimum height to screen height, depending on orientation
- function resetActivePageHeight(){
- // Don't apply this height in touch overflow enabled mode
- if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){
- return;
- }
- $( "." + $.mobile.activePageClass ).css( "min-height", getScreenHeight() );
- }
-
- //shared page enhancements
- function enhancePage( $page, role ) {
- // If a role was specified, make sure the data-role attribute
- // on the page element is in sync.
- if( role ) {
- $page.attr( "data-" + $.mobile.ns + "role", role );
- }
-
- //run page plugin
- $page.page();
- }
-
-/* exposed $.mobile methods */
-
- //animation complete callback
- $.fn.animationComplete = function( callback ) {
- if( $.support.cssTransitions ) {
- return $( this ).one( 'webkitAnimationEnd', callback );
- }
- else{
- // defer execution for consistency between webkit/non webkit
- setTimeout( callback, 0 );
- return $( this );
- }
- };
-
- //expose path object on $.mobile
- $.mobile.path = path;
-
- //expose base object on $.mobile
- $.mobile.base = base;
-
- //history stack
- $.mobile.urlHistory = urlHistory;
-
- $.mobile.dialogHashKey = dialogHashKey;
-
- //default non-animation transition handler
- $.mobile.noneTransitionHandler = function( name, reverse, $toPage, $fromPage ) {
- if ( $fromPage ) {
- $fromPage.removeClass( $.mobile.activePageClass );
- }
- $toPage.addClass( $.mobile.activePageClass );
-
- return $.Deferred().resolve( name, reverse, $toPage, $fromPage ).promise();
- };
-
- //default handler for unknown transitions
- $.mobile.defaultTransitionHandler = $.mobile.noneTransitionHandler;
-
- //transition handler dictionary for 3rd party transitions
- $.mobile.transitionHandlers = {
- none: $.mobile.defaultTransitionHandler
- };
-
- //enable cross-domain page support
- $.mobile.allowCrossDomainPages = false;
-
- //return the original document url
- $.mobile.getDocumentUrl = function(asParsedObject) {
- return asParsedObject ? $.extend( {}, documentUrl ) : documentUrl.href;
- };
-
- //return the original document base url
- $.mobile.getDocumentBase = function(asParsedObject) {
- return asParsedObject ? $.extend( {}, documentBase ) : documentBase.href;
- };
-
- $.mobile._bindPageRemove = function() {
- var page = $(this);
-
- // when dom caching is not enabled or the page is embedded bind to remove the page on hide
- if( !page.data("page").options.domCache
- && page.is(":jqmData(external-page='true')") ) {
-
- page.bind( 'pagehide.remove', function() {
- var $this = $( this ),
- prEvent = new $.Event( "pageremove" );
-
- $this.trigger( prEvent );
-
- if( !prEvent.isDefaultPrevented() ){
- $this.removeWithDependents();
- }
- });
- }
- };
-
- // Load a page into the DOM.
- $.mobile.loadPage = function( url, options ) {
- // This function uses deferred notifications to let callers
- // know when the page is done loading, or if an error has occurred.
- var deferred = $.Deferred(),
-
- // The default loadPage options with overrides specified by
- // the caller.
- settings = $.extend( {}, $.mobile.loadPage.defaults, options ),
-
- // The DOM element for the page after it has been loaded.
- page = null,
-
- // If the reloadPage option is true, and the page is already
- // in the DOM, dupCachedPage will be set to the page element
- // so that it can be removed after the new version of the
- // page is loaded off the network.
- dupCachedPage = null,
-
- // determine the current base url
- findBaseWithDefault = function(){
- var closestBase = ( $.mobile.activePage && getClosestBaseUrl( $.mobile.activePage ) );
- return closestBase || documentBase.hrefNoHash;
- },
-
- // The absolute version of the URL passed into the function. This
- // version of the URL may contain dialog/subpage params in it.
- absUrl = path.makeUrlAbsolute( url, findBaseWithDefault() );
-
-
- // If the caller provided data, and we're using "get" request,
- // append the data to the URL.
- if ( settings.data && settings.type === "get" ) {
- absUrl = path.addSearchParams( absUrl, settings.data );
- settings.data = undefined;
- }
-
- // If the caller is using a "post" request, reloadPage must be true
- if( settings.data && settings.type === "post" ){
- settings.reloadPage = true;
- }
-
- // The absolute version of the URL minus any dialog/subpage params.
- // In otherwords the real URL of the page to be loaded.
- var fileUrl = path.getFilePath( absUrl ),
-
- // The version of the Url actually stored in the data-url attribute of
- // the page. For embedded pages, it is just the id of the page. For pages
- // within the same domain as the document base, it is the site relative
- // path. For cross-domain pages (Phone Gap only) the entire absolute Url
- // used to load the page.
- dataUrl = path.convertUrlToDataUrl( absUrl );
-
- // Make sure we have a pageContainer to work with.
- settings.pageContainer = settings.pageContainer || $.mobile.pageContainer;
-
- // Check to see if the page already exists in the DOM.
- page = settings.pageContainer.children( ":jqmData(url='" + dataUrl + "')" );
-
- // If we failed to find the page, check to see if the url is a
- // reference to an embedded page. If so, it may have been dynamically
- // injected by a developer, in which case it would be lacking a data-url
- // attribute and in need of enhancement.
- if ( page.length === 0 && dataUrl && !path.isPath( dataUrl ) ) {
- page = settings.pageContainer.children( "#" + dataUrl )
- .attr( "data-" + $.mobile.ns + "url", dataUrl );
- }
-
- // If we failed to find a page in the DOM, check the URL to see if it
- // refers to the first page in the application. If it isn't a reference
- // to the first page and refers to non-existent embedded page, error out.
- if ( page.length === 0 ) {
- if ( $.mobile.firstPage && path.isFirstPageUrl( fileUrl ) ) {
- // Check to make sure our cached-first-page is actually
- // in the DOM. Some user deployed apps are pruning the first
- // page from the DOM for various reasons, we check for this
- // case here because we don't want a first-page with an id
- // falling through to the non-existent embedded page error
- // case. If the first-page is not in the DOM, then we let
- // things fall through to the ajax loading code below so
- // that it gets reloaded.
- if ( $.mobile.firstPage.parent().length ) {
- page = $( $.mobile.firstPage );
- }
- } else if ( path.isEmbeddedPage( fileUrl ) ) {
- deferred.reject( absUrl, options );
- return deferred.promise();
- }
- }
-
- // Reset base to the default document base.
- if ( base ) {
- base.reset();
- }
-
- // If the page we are interested in is already in the DOM,
- // and the caller did not indicate that we should force a
- // reload of the file, we are done. Otherwise, track the
- // existing page as a duplicated.
- if ( page.length ) {
- if ( !settings.reloadPage ) {
- enhancePage( page, settings.role );
- deferred.resolve( absUrl, options, page );
- return deferred.promise();
- }
- dupCachedPage = page;
- }
-
- var mpc = settings.pageContainer,
- pblEvent = new $.Event( "pagebeforeload" ),
- triggerData = { url: url, absUrl: absUrl, dataUrl: dataUrl, deferred: deferred, options: settings };
-
- // Let listeners know we're about to load a page.
- mpc.trigger( pblEvent, triggerData );
-
- // If the default behavior is prevented, stop here!
- if( pblEvent.isDefaultPrevented() ){
- return deferred.promise();
- }
-
- if ( settings.showLoadMsg ) {
-
- // This configurable timeout allows cached pages a brief delay to load without showing a message
- var loadMsgDelay = setTimeout(function(){
- $.mobile.showPageLoadingMsg();
- }, settings.loadMsgDelay ),
-
- // Shared logic for clearing timeout and removing message.
- hideMsg = function(){
-
- // Stop message show timer
- clearTimeout( loadMsgDelay );
-
- // Hide loading message
- $.mobile.hidePageLoadingMsg();
- };
- }
-
- if ( !( $.mobile.allowCrossDomainPages || path.isSameDomain( documentUrl, absUrl ) ) ) {
- deferred.reject( absUrl, options );
- } else {
- // Load the new page.
- $.ajax({
- url: fileUrl,
- type: settings.type,
- data: settings.data,
- dataType: "html",
- success: function( html, textStatus, xhr ) {
- //pre-parse html to check for a data-url,
- //use it as the new fileUrl, base path, etc
- var all = $( "<div></div>" ),
-
- //page title regexp
- newPageTitle = html.match( /<title[^>]*>([^<]*)/ ) && RegExp.$1,
-
- // TODO handle dialogs again
- pageElemRegex = new RegExp( "(<[^>]+\\bdata-" + $.mobile.ns + "role=[\"']?page[\"']?[^>]*>)" ),
- dataUrlRegex = new RegExp( "\\bdata-" + $.mobile.ns + "url=[\"']?([^\"'>]*)[\"']?" );
-
-
- // data-url must be provided for the base tag so resource requests can be directed to the
- // correct url. loading into a temprorary element makes these requests immediately
- if( pageElemRegex.test( html )
- && RegExp.$1
- && dataUrlRegex.test( RegExp.$1 )
- && RegExp.$1 ) {
- url = fileUrl = path.getFilePath( RegExp.$1 );
- }
-
- if ( base ) {
- base.set( fileUrl );
- }
-
- //workaround to allow scripts to execute when included in page divs
- all.get( 0 ).innerHTML = html;
- page = all.find( ":jqmData(role='page'), :jqmData(role='dialog')" ).first();
-
- //if page elem couldn't be found, create one and insert the body element's contents
- if( !page.length ){
- page = $( "<div data-" + $.mobile.ns + "role='page'>" + html.split( /<\/?body[^>]*>/gmi )[1] + "</div>" );
- }
-
- if ( newPageTitle && !page.jqmData( "title" ) ) {
- if ( ~newPageTitle.indexOf( "&" ) ) {
- newPageTitle = $( "<div>" + newPageTitle + "</div>" ).text();
- }
- page.jqmData( "title", newPageTitle );
- }
-
- //rewrite src and href attrs to use a base url
- if( !$.support.dynamicBaseTag ) {
- var newPath = path.get( fileUrl );
- page.find( "[src], link[href], a[rel='external'], :jqmData(ajax='false'), a[target]" ).each(function() {
- var thisAttr = $( this ).is( '[href]' ) ? 'href' :
- $(this).is('[src]') ? 'src' : 'action',
- thisUrl = $( this ).attr( thisAttr );
-
- // XXX_jblas: We need to fix this so that it removes the document
- // base URL, and then prepends with the new page URL.
- //if full path exists and is same, chop it - helps IE out
- thisUrl = thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );
-
- if( !/^(\w+:|#|\/)/.test( thisUrl ) ) {
- $( this ).attr( thisAttr, newPath + thisUrl );
- }
- });
- }
-
- //append to page and enhance
- // TODO taging a page with external to make sure that embedded pages aren't removed
- // by the various page handling code is bad. Having page handling code in many
- // places is bad. Solutions post 1.0
- page
- .attr( "data-" + $.mobile.ns + "url", path.convertUrlToDataUrl( fileUrl ) )
- .attr( "data-" + $.mobile.ns + "external-page", true )
- .appendTo( settings.pageContainer );
-
- // wait for page creation to leverage options defined on widget
- page.one( 'pagecreate', $.mobile._bindPageRemove );
-
- enhancePage( page, settings.role );
-
- // Enhancing the page may result in new dialogs/sub pages being inserted
- // into the DOM. If the original absUrl refers to a sub-page, that is the
- // real page we are interested in.
- if ( absUrl.indexOf( "&" + $.mobile.subPageUrlKey ) > -1 ) {
- page = settings.pageContainer.children( ":jqmData(url='" + dataUrl + "')" );
- }
-
- //bind pageHide to removePage after it's hidden, if the page options specify to do so
-
- // Remove loading message.
- if ( settings.showLoadMsg ) {
- hideMsg();
- }
-
- // Add the page reference and xhr to our triggerData.
- triggerData.xhr = xhr;
- triggerData.textStatus = textStatus;
- triggerData.page = page;
-
- // Let listeners know the page loaded successfully.
- settings.pageContainer.trigger( "pageload", triggerData );
-
- deferred.resolve( absUrl, options, page, dupCachedPage );
- },
- error: function( xhr, textStatus, errorThrown ) {
- //set base back to current path
- if( base ) {
- base.set( path.get() );
- }
-
- // Add error info to our triggerData.
- triggerData.xhr = xhr;
- triggerData.textStatus = textStatus;
- triggerData.errorThrown = errorThrown;
-
- var plfEvent = new $.Event( "pageloadfailed" );
-
- // Let listeners know the page load failed.
- settings.pageContainer.trigger( plfEvent, triggerData );
-
- // If the default behavior is prevented, stop here!
- // Note that it is the responsibility of the listener/handler
- // that called preventDefault(), to resolve/reject the
- // deferred object within the triggerData.
- if( plfEvent.isDefaultPrevented() ){
- return;
- }
-
- // Remove loading message.
- if ( settings.showLoadMsg ) {
-
- // Remove loading message.
- hideMsg();
-
- //show error message
- $( "<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>"+ $.mobile.pageLoadErrorMessage +"</h1></div>" )
- .css({ "display": "block", "opacity": 0.96, "top": $window.scrollTop() + 100 })
- .appendTo( settings.pageContainer )
- .delay( 800 )
- .fadeOut( 400, function() {
- $( this ).remove();
- });
- }
-
- deferred.reject( absUrl, options );
- }
- });
- }
-
- return deferred.promise();
- };
-
- $.mobile.loadPage.defaults = {
- type: "get",
- data: undefined,
- reloadPage: false,
- role: undefined, // By default we rely on the role defined by the @data-role attribute.
- showLoadMsg: false,
- pageContainer: undefined,
- loadMsgDelay: 50 // This delay allows loads that pull from browser cache to occur without showing the loading message.
- };
-
- // Show a specific page in the page container.
- $.mobile.changePage = function( toPage, options ) {
- // If we are in the midst of a transition, queue the current request.
- // We'll call changePage() once we're done with the current transition to
- // service the request.
- if( isPageTransitioning ) {
- pageTransitionQueue.unshift( arguments );
- return;
- }
-
- var settings = $.extend( {}, $.mobile.changePage.defaults, options );
-
- // Make sure we have a pageContainer to work with.
- settings.pageContainer = settings.pageContainer || $.mobile.pageContainer;
-
- // Make sure we have a fromPage.
- settings.fromPage = settings.fromPage || $.mobile.activePage;
-
- var mpc = settings.pageContainer,
- pbcEvent = new $.Event( "pagebeforechange" ),
- triggerData = { toPage: toPage, options: settings };
-
- // Let listeners know we're about to change the current page.
- mpc.trigger( pbcEvent, triggerData );
-
- // If the default behavior is prevented, stop here!
- if( pbcEvent.isDefaultPrevented() ){
- return;
- }
-
- // We allow "pagebeforechange" observers to modify the toPage in the trigger
- // data to allow for redirects. Make sure our toPage is updated.
-
- toPage = triggerData.toPage;
-
- // Set the isPageTransitioning flag to prevent any requests from
- // entering this method while we are in the midst of loading a page
- // or transitioning.
-
- isPageTransitioning = true;
-
- // If the caller passed us a url, call loadPage()
- // to make sure it is loaded into the DOM. We'll listen
- // to the promise object it returns so we know when
- // it is done loading or if an error ocurred.
- if ( typeof toPage == "string" ) {
- $.mobile.loadPage( toPage, settings )
- .done(function( url, options, newPage, dupCachedPage ) {
- isPageTransitioning = false;
- options.duplicateCachedPage = dupCachedPage;
- $.mobile.changePage( newPage, options );
- })
- .fail(function( url, options ) {
- isPageTransitioning = false;
-
- //clear out the active button state
- removeActiveLinkClass( true );
-
- //release transition lock so navigation is free again
- releasePageTransitionLock();
- settings.pageContainer.trigger( "pagechangefailed", triggerData );
- });
- return;
- }
-
- // If we are going to the first-page of the application, we need to make
- // sure settings.dataUrl is set to the application document url. This allows
- // us to avoid generating a document url with an id hash in the case where the
- // first-page of the document has an id attribute specified.
- if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl ) {
- settings.dataUrl = documentUrl.hrefNoHash;
- }
-
- // The caller passed us a real page DOM element. Update our
- // internal state and then trigger a transition to the page.
- var fromPage = settings.fromPage,
- url = ( settings.dataUrl && path.convertUrlToDataUrl( settings.dataUrl ) ) || toPage.jqmData( "url" ),
- // The pageUrl var is usually the same as url, except when url is obscured as a dialog url. pageUrl always contains the file path
- pageUrl = url,
- fileUrl = path.getFilePath( url ),
- active = urlHistory.getActive(),
- activeIsInitialPage = urlHistory.activeIndex === 0,
- historyDir = 0,
- pageTitle = document.title,
- isDialog = settings.role === "dialog" || toPage.jqmData( "role" ) === "dialog";
-
- // By default, we prevent changePage requests when the fromPage and toPage
- // are the same element, but folks that generate content manually/dynamically
- // and reuse pages want to be able to transition to the same page. To allow
- // this, they will need to change the default value of allowSamePageTransition
- // to true, *OR*, pass it in as an option when they manually call changePage().
- // It should be noted that our default transition animations assume that the
- // formPage and toPage are different elements, so they may behave unexpectedly.
- // It is up to the developer that turns on the allowSamePageTransitiona option
- // to either turn off transition animations, or make sure that an appropriate
- // animation transition is used.
- if( fromPage && fromPage[0] === toPage[0] && !settings.allowSamePageTransition ) {
- isPageTransitioning = false;
- mpc.trigger( "pagechange", triggerData );
- return;
- }
-
- // We need to make sure the page we are given has already been enhanced.
- enhancePage( toPage, settings.role );
-
- // If the changePage request was sent from a hashChange event, check to see if the
- // page is already within the urlHistory stack. If so, we'll assume the user hit
- // the forward/back button and will try to match the transition accordingly.
- if( settings.fromHashChange ) {
- urlHistory.directHashChange({
- currentUrl: url,
- isBack: function() { historyDir = -1; },
- isForward: function() { historyDir = 1; }
- });
- }
-
- // Kill the keyboard.
- // XXX_jblas: We need to stop crawling the entire document to kill focus. Instead,
- // we should be tracking focus with a live() handler so we already have
- // the element in hand at this point.
- // Wrap this in a try/catch block since IE9 throw "Unspecified error" if document.activeElement
- // is undefined when we are in an IFrame.
- try {
- if(document.activeElement && document.activeElement.nodeName.toLowerCase() != 'body') {
- $(document.activeElement).blur();
- } else {
- $( "input:focus, textarea:focus, select:focus" ).blur();
- }
- } catch(e) {}
-
- // If we're displaying the page as a dialog, we don't want the url
- // for the dialog content to be used in the hash. Instead, we want
- // to append the dialogHashKey to the url of the current page.
- if ( isDialog && active ) {
- // on the initial page load active.url is undefined and in that case should
- // be an empty string. Moving the undefined -> empty string back into
- // urlHistory.addNew seemed imprudent given undefined better represents
- // the url state
- url = ( active.url || "" ) + dialogHashKey;
- }
-
- // Set the location hash.
- if( settings.changeHash !== false && url ) {
- //disable hash listening temporarily
- urlHistory.ignoreNextHashChange = true;
- //update hash and history
- path.set( url );
- }
-
- // if title element wasn't found, try the page div data attr too
- // If this is a deep-link or a reload ( active === undefined ) then just use pageTitle
- var newPageTitle = ( !active )? pageTitle : toPage.jqmData( "title" ) || toPage.children(":jqmData(role='header')").find(".ui-title" ).getEncodedText();
- if( !!newPageTitle && pageTitle == document.title ) {
- pageTitle = newPageTitle;
- }
- if ( !toPage.jqmData( "title" ) ) {
- toPage.jqmData( "title", pageTitle );
- }
-
- // Make sure we have a transition defined.
- settings.transition = settings.transition
- || ( ( historyDir && !activeIsInitialPage ) ? active.transition : undefined )
- || ( isDialog ? $.mobile.defaultDialogTransition : $.mobile.defaultPageTransition );
-
- //add page to history stack if it's not back or forward
- if( !historyDir ) {
- urlHistory.addNew( url, settings.transition, pageTitle, pageUrl, settings.role );
- }
-
- //set page title
- document.title = urlHistory.getActive().title;
-
- //set "toPage" as activePage
- $.mobile.activePage = toPage;
-
- // If we're navigating back in the URL history, set reverse accordingly.
- settings.reverse = settings.reverse || historyDir < 0;
-
- transitionPages( toPage, fromPage, settings.transition, settings.reverse )
- .done(function() {
- removeActiveLinkClass();
-
- //if there's a duplicateCachedPage, remove it from the DOM now that it's hidden
- if ( settings.duplicateCachedPage ) {
- settings.duplicateCachedPage.remove();
- }
-
- //remove initial build class (only present on first pageshow)
- $html.removeClass( "ui-mobile-rendering" );
-
- releasePageTransitionLock();
-
- // Let listeners know we're all done changing the current page.
- mpc.trigger( "pagechange", triggerData );
- });
- };
-
- $.mobile.changePage.defaults = {
- transition: undefined,
- reverse: false,
- changeHash: true,
- fromHashChange: false,
- role: undefined, // By default we rely on the role defined by the @data-role attribute.
- duplicateCachedPage: undefined,
- pageContainer: undefined,
- showLoadMsg: true, //loading message shows by default when pages are being fetched during changePage
- dataUrl: undefined,
- fromPage: undefined,
- allowSamePageTransition: false
- };
-
-/* Event Bindings - hashchange, submit, and click */
- function findClosestLink( ele )
- {
- while ( ele ) {
- // Look for the closest element with a nodeName of "a".
- // Note that we are checking if we have a valid nodeName
- // before attempting to access it. This is because the
- // node we get called with could have originated from within
- // an embedded SVG document where some symbol instance elements
- // don't have nodeName defined on them, or strings are of type
- // SVGAnimatedString.
- if ( ( typeof ele.nodeName === "string" ) && ele.nodeName.toLowerCase() == "a" ) {
- break;
- }
- ele = ele.parentNode;
- }
- return ele;
- }
-
- // The base URL for any given element depends on the page it resides in.
- function getClosestBaseUrl( ele )
- {
- // Find the closest page and extract out its url.
- var url = $( ele ).closest( ".ui-page" ).jqmData( "url" ),
- base = documentBase.hrefNoHash;
-
- if ( !url || !path.isPath( url ) ) {
- url = base;
- }
-
- return path.makeUrlAbsolute( url, base);
- }
-
-
- //The following event bindings should be bound after mobileinit has been triggered
- //the following function is called in the init file
- $.mobile._registerInternalEvents = function(){
-
- //bind to form submit events, handle with Ajax
- $( "form" ).live('submit', function( event ) {
- var $this = $( this );
- if( !$.mobile.ajaxEnabled ||
- $this.is( ":jqmData(ajax='false')" ) ) {
- return;
- }
-
- var type = $this.attr( "method" ),
- target = $this.attr( "target" ),
- url = $this.attr( "action" );
-
- // If no action is specified, browsers default to using the
- // URL of the document containing the form. Since we dynamically
- // pull in pages from external documents, the form should submit
- // to the URL for the source document of the page containing
- // the form.
- if ( !url ) {
- // Get the @data-url for the page containing the form.
- url = getClosestBaseUrl( $this );
- if ( url === documentBase.hrefNoHash ) {
- // The url we got back matches the document base,
- // which means the page must be an internal/embedded page,
- // so default to using the actual document url as a browser
- // would.
- url = documentUrl.hrefNoSearch;
- }
- }
-
- url = path.makeUrlAbsolute( url, getClosestBaseUrl($this) );
-
- //external submits use regular HTTP
- if( path.isExternal( url ) || target ) {
- return;
- }
-
- $.mobile.changePage(
- url,
- {
- type: type && type.length && type.toLowerCase() || "get",
- data: $this.serialize(),
- transition: $this.jqmData( "transition" ),
- direction: $this.jqmData( "direction" ),
- reloadPage: true
- }
- );
- event.preventDefault();
- });
-
- //add active state on vclick
- $( document ).bind( "vclick", function( event ) {
- // if this isn't a left click we don't care. Its important to note
- // that when the virtual event is generated it will create
- if ( event.which > 1 || !$.mobile.linkBindingEnabled ){
- return;
- }
-
- var link = findClosestLink( event.target );
- if ( link ) {
- if ( path.parseUrl( link.getAttribute( "href" ) || "#" ).hash !== "#" ) {
- removeActiveLinkClass( true );
- $activeClickedLink = $( link ).closest( ".ui-btn" ).not( ".ui-disabled" );
- $activeClickedLink.addClass( $.mobile.activeBtnClass );
- $( "." + $.mobile.activePageClass + " .ui-btn" ).not( link ).blur();
- }
- }
- });
-
- // click routing - direct to HTTP or Ajax, accordingly
- $( document ).bind( "click", function( event ) {
- if( !$.mobile.linkBindingEnabled ){
- return;
- }
-
- var link = findClosestLink( event.target );
-
- // If there is no link associated with the click or its not a left
- // click we want to ignore the click
- if ( !link || event.which > 1) {
- return;
- }
-
- var $link = $( link ),
- //remove active link class if external (then it won't be there if you come back)
- httpCleanup = function(){
- window.setTimeout( function() { removeActiveLinkClass( true ); }, 200 );
- };
-
- //if there's a data-rel=back attr, go back in history
- if( $link.is( ":jqmData(rel='back')" ) ) {
- window.history.back();
- return false;
- }
-
- var baseUrl = getClosestBaseUrl( $link ),
-
- //get href, if defined, otherwise default to empty hash
- href = path.makeUrlAbsolute( $link.attr( "href" ) || "#", baseUrl );
-
- //if ajax is disabled, exit early
- if( !$.mobile.ajaxEnabled && !path.isEmbeddedPage( href ) ){
- httpCleanup();
- //use default click handling
- return;
- }
-
- // XXX_jblas: Ideally links to application pages should be specified as
- // an url to the application document with a hash that is either
- // the site relative path or id to the page. But some of the
- // internal code that dynamically generates sub-pages for nested
- // lists and select dialogs, just write a hash in the link they
- // create. This means the actual URL path is based on whatever
- // the current value of the base tag is at the time this code
- // is called. For now we are just assuming that any url with a
- // hash in it is an application page reference.
- if ( href.search( "#" ) != -1 ) {
- href = href.replace( /[^#]*#/, "" );
- if ( !href ) {
- //link was an empty hash meant purely
- //for interaction, so we ignore it.
- event.preventDefault();
- return;
- } else if ( path.isPath( href ) ) {
- //we have apath so make it the href we want to load.
- href = path.makeUrlAbsolute( href, baseUrl );
- } else {
- //we have a simple id so use the documentUrl as its base.
- href = path.makeUrlAbsolute( "#" + href, documentUrl.hrefNoHash );
- }
- }
-
- // Should we handle this link, or let the browser deal with it?
- var useDefaultUrlHandling = $link.is( "[rel='external']" ) || $link.is( ":jqmData(ajax='false')" ) || $link.is( "[target]" ),
-
- // Some embedded browsers, like the web view in Phone Gap, allow cross-domain XHR
- // requests if the document doing the request was loaded via the file:// protocol.
- // This is usually to allow the application to "phone home" and fetch app specific
- // data. We normally let the browser handle external/cross-domain urls, but if the
- // allowCrossDomainPages option is true, we will allow cross-domain http/https
- // requests to go through our page loading logic.
- isCrossDomainPageLoad = ( $.mobile.allowCrossDomainPages && documentUrl.protocol === "file:" && href.search( /^https?:/ ) != -1 ),
-
- //check for protocol or rel and its not an embedded page
- //TODO overlap in logic from isExternal, rel=external check should be
- // moved into more comprehensive isExternalLink
- isExternal = useDefaultUrlHandling || ( path.isExternal( href ) && !isCrossDomainPageLoad );
-
- if( isExternal ) {
- httpCleanup();
- //use default click handling
- return;
- }
-
- //use ajax
- var transition = $link.jqmData( "transition" ),
- direction = $link.jqmData( "direction" ),
- reverse = ( direction && direction === "reverse" ) ||
- // deprecated - remove by 1.0
- $link.jqmData( "back" ),
-
- //this may need to be more specific as we use data-rel more
- role = $link.attr( "data-" + $.mobile.ns + "rel" ) || undefined;
-
- $.mobile.changePage( href, { transition: transition, reverse: reverse, role: role } );
- event.preventDefault();
- });
-
- //prefetch pages when anchors with data-prefetch are encountered
- $( ".ui-page" ).live( "pageshow.prefetch", function() {
- var urls = [];
- $( this ).find( "a:jqmData(prefetch)" ).each(function(){
- var $link = $(this),
- url = $link.attr( "href" );
-
- if ( url && $.inArray( url, urls ) === -1 ) {
- urls.push( url );
-
- $.mobile.loadPage( url, {role: $link.attr("data-" + $.mobile.ns + "rel")} );
- }
- });
- });
-
- $.mobile._handleHashChange = function( hash ) {
- //find first page via hash
- var to = path.stripHash( hash ),
- //transition is false if it's the first page, undefined otherwise (and may be overridden by default)
- transition = $.mobile.urlHistory.stack.length === 0 ? "none" : undefined,
-
- // default options for the changPage calls made after examining the current state
- // of the page and the hash
- changePageOptions = {
- transition: transition,
- changeHash: false,
- fromHashChange: true
- };
-
- //if listening is disabled (either globally or temporarily), or it's a dialog hash
- if( !$.mobile.hashListeningEnabled || urlHistory.ignoreNextHashChange ) {
- urlHistory.ignoreNextHashChange = false;
- return;
- }
-
- // special case for dialogs
- if( urlHistory.stack.length > 1 && to.indexOf( dialogHashKey ) > -1 ) {
-
- // If current active page is not a dialog skip the dialog and continue
- // in the same direction
- if(!$.mobile.activePage.is( ".ui-dialog" )) {
- //determine if we're heading forward or backward and continue accordingly past
- //the current dialog
- urlHistory.directHashChange({
- currentUrl: to,
- isBack: function() { window.history.back(); },
- isForward: function() { window.history.forward(); }
- });
-
- // prevent changePage()
- return;
- } else {
- // if the current active page is a dialog and we're navigating
- // to a dialog use the dialog objected saved in the stack
- urlHistory.directHashChange({
- currentUrl: to,
-
- // regardless of the direction of the history change
- // do the following
- either: function( isBack ) {
- var active = $.mobile.urlHistory.getActive();
-
- to = active.pageUrl;
-
- // make sure to set the role, transition and reversal
- // as most of this is lost by the domCache cleaning
- $.extend( changePageOptions, {
- role: active.role,
- transition: active.transition,
- reverse: isBack
- });
- }
- });
- }
- }
-
- //if to is defined, load it
- if ( to ) {
- // At this point, 'to' can be one of 3 things, a cached page element from
- // a history stack entry, an id, or site-relative/absolute URL. If 'to' is
- // an id, we need to resolve it against the documentBase, not the location.href,
- // since the hashchange could've been the result of a forward/backward navigation
- // that crosses from an external page/dialog to an internal page/dialog.
- to = ( typeof to === "string" && !path.isPath( to ) ) ? ( path.makeUrlAbsolute( '#' + to, documentBase ) ) : to;
- $.mobile.changePage( to, changePageOptions );
- } else {
- //there's no hash, go to the first page in the dom
- $.mobile.changePage( $.mobile.firstPage, changePageOptions );
- }
- };
-
- //hashchange event handler
- $window.bind( "hashchange", function( e, triggered ) {
- $.mobile._handleHashChange( location.hash );
- });
-
- //set page min-heights to be device specific
- $( document ).bind( "pageshow", resetActivePageHeight );
- $( window ).bind( "throttledresize", resetActivePageHeight );
-
- };//_registerInternalEvents callback
-
-})( jQuery );
+++ /dev/null
-/*
-* history.pushState support, layered on top of hashchange
-*/
-
-( function( $, window ) {
- // For now, let's Monkeypatch this onto the end of $.mobile._registerInternalEvents
- // Scope self to pushStateHandler so we can reference it sanely within the
- // methods handed off as event handlers
- var pushStateHandler = {},
- self = pushStateHandler,
- $win = $( window ),
- url = $.mobile.path.parseUrl( location.href );
-
- $.extend( pushStateHandler, {
- // TODO move to a path helper, this is rather common functionality
- initialFilePath: (function() {
- return url.pathname + url.search;
- })(),
-
- initialHref: url.hrefNoHash,
-
- // Flag for tracking if a Hashchange naturally occurs after each popstate + replace
- hashchangeFired: false,
-
- state: function() {
- return {
- hash: location.hash || "#" + self.initialFilePath,
- title: document.title,
-
- // persist across refresh
- initialHref: self.initialHref
- };
- },
-
- resetUIKeys: function( url ) {
- var dialog = $.mobile.dialogHashKey,
- subkey = "&" + $.mobile.subPageUrlKey,
- dialogIndex = url.indexOf( dialog );
-
- if( dialogIndex > -1 ) {
- url = url.slice( 0, dialogIndex ) + "#" + url.slice( dialogIndex );
- } else if( url.indexOf( subkey ) > -1 ) {
- url = url.split( subkey ).join( "#" + subkey );
- }
-
- return url;
- },
-
- // TODO sort out a single barrier to hashchange functionality
- nextHashChangePrevented: function( value ) {
- $.mobile.urlHistory.ignoreNextHashChange = value;
- self.onHashChangeDisabled = value;
- },
-
- // on hash change we want to clean up the url
- // NOTE this takes place *after* the vanilla navigation hash change
- // handling has taken place and set the state of the DOM
- onHashChange: function( e ) {
- // disable this hash change
- if( self.onHashChangeDisabled ){
- return;
- }
-
- var href, state,
- hash = location.hash,
- isPath = $.mobile.path.isPath( hash ),
- resolutionUrl = isPath ? location.href : $.mobile.getDocumentUrl();
- hash = isPath ? hash.replace( "#", "" ) : hash;
-
- // propulate the hash when its not available
- state = self.state();
-
- // make the hash abolute with the current href
- href = $.mobile.path.makeUrlAbsolute( hash, resolutionUrl );
-
- if ( isPath ) {
- href = self.resetUIKeys( href );
- }
-
- // replace the current url with the new href and store the state
- // Note that in some cases we might be replacing an url with the
- // same url. We do this anyways because we need to make sure that
- // all of our history entries have a state object associated with
- // them. This allows us to work around the case where window.history.back()
- // is called to transition from an external page to an embedded page.
- // In that particular case, a hashchange event is *NOT* generated by the browser.
- // Ensuring each history entry has a state object means that onPopState()
- // will always trigger our hashchange callback even when a hashchange event
- // is not fired.
- history.replaceState( state, document.title, href );
- },
-
- // on popstate (ie back or forward) we need to replace the hash that was there previously
- // cleaned up by the additional hash handling
- onPopState: function( e ) {
- var poppedState = e.originalEvent.state, holdnexthashchange = false;
-
- // if there's no state its not a popstate we care about, ie chrome's initial popstate
- // or forward popstate
- if( poppedState ) {
- // disable any hashchange triggered by the browser
- self.nextHashChangePrevented( true );
-
- // defer our manual hashchange until after the browser fired
- // version has come and gone
- setTimeout(function() {
- // make sure that the manual hash handling takes place
- self.nextHashChangePrevented( false );
-
- // change the page based on the hash
- $.mobile._handleHashChange( poppedState.hash );
- }, 100);
- }
- },
-
- init: function() {
- $win.bind( "hashchange", self.onHashChange );
-
- // Handle popstate events the occur through history changes
- $win.bind( "popstate", self.onPopState );
-
- // if there's no hash, we need to replacestate for returning to home
- if ( location.hash === "" ) {
- history.replaceState( self.state(), document.title, location.href );
- }
- }
- });
-
- $( function() {
- if( $.mobile.pushStateEnabled && $.support.pushState ){
- pushStateHandler.init();
- }
- });
-})( jQuery, this );
+++ /dev/null
-/*
-* "nojs" plugin - class to make elements hidden to A grade browsers
-*/
-
-(function( $, undefined ) {
-
-$( document ).bind( "pagecreate create", function( e ){
- $( ":jqmData(role='nojs')", e.target ).addClass( "ui-nojs" );
-
-});
-
-})( jQuery );
\ No newline at end of file
+++ /dev/null
-/*
-* "page" plugin
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.page", $.mobile.widget, {
- options: {
- theme: "c",
- domCache: false,
- keepNativeDefault: ":jqmData(role='none'), :jqmData(role='nojs')"
- },
-
- _create: function() {
-
- this._trigger( "beforecreate" );
-
- this.element
- .attr( "tabindex", "0" )
- .addClass( "ui-page ui-body-" + this.options.theme );
- },
-
- keepNativeSelector: function() {
- var options = this.options,
- keepNativeDefined = options.keepNative && $.trim(options.keepNative);
-
- if( keepNativeDefined && options.keepNative !== options.keepNativeDefault ){
- return [options.keepNative, options.keepNativeDefault].join(", ");
- }
-
- return options.keepNativeDefault;
- }
-});
-})( jQuery );
+++ /dev/null
-/*
-* This plugin handles theming and layout of headers, footers, and content areas
-*/
-
-(function( $, undefined ) {
-
-$.mobile.page.prototype.options.backBtnText = "Back";
-$.mobile.page.prototype.options.addBackBtn = false;
-$.mobile.page.prototype.options.backBtnTheme = null;
-$.mobile.page.prototype.options.headerTheme = "a";
-$.mobile.page.prototype.options.footerTheme = "a";
-$.mobile.page.prototype.options.contentTheme = null;
-
-$( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", function( e ) {
-
- var $page = $( this ),
- o = $page.data( "page" ).options,
- pageRole = $page.jqmData( "role" ),
- pageTheme = o.theme;
-
- $( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this ).each(function() {
- var $this = $( this ),
- role = $this.jqmData( "role" ),
- theme = $this.jqmData( "theme" ),
- contentTheme = theme || o.contentTheme || ( pageRole === "dialog" && pageTheme ),
- $headeranchors,
- leftbtn,
- rightbtn,
- backBtn;
-
- $this.addClass( "ui-" + role );
-
- //apply theming and markup modifications to page,header,content,footer
- if ( role === "header" || role === "footer" ) {
-
- var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;
-
- $this
- //add theme class
- .addClass( "ui-bar-" + thisTheme )
- // Add ARIA role
- .attr( "role", role === "header" ? "banner" : "contentinfo" );
-
- // Right,left buttons
- $headeranchors = $this.children( "a" );
- leftbtn = $headeranchors.hasClass( "ui-btn-left" );
- rightbtn = $headeranchors.hasClass( "ui-btn-right" );
-
- leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
-
- rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
-
- // Auto-add back btn on pages beyond first view
- if ( o.addBackBtn &&
- role === "header" &&
- $( ".ui-page" ).length > 1 &&
- $this.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
- !leftbtn ) {
-
- backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
- // If theme is provided, override default inheritance
- .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
- .prependTo( $this );
- }
-
- // Page title
- $this.children( "h1, h2, h3, h4, h5, h6" )
- .addClass( "ui-title" )
- // Regardless of h element number in src, it becomes h1 for the enhanced page
- .attr({
- "tabindex": "0",
- "role": "heading",
- "aria-level": "1"
- });
-
- } else if ( role === "content" ) {
- if ( contentTheme ) {
- $this.addClass( "ui-body-" + ( contentTheme ) );
- }
-
- // Add ARIA role
- $this.attr( "role", "main" );
- }
- });
-});
-
-})( jQuery );
\ No newline at end of file
+++ /dev/null
-/*
-* support tests
-*/
-
-(function( $, undefined ) {
-
-var fakeBody = $( "<body>" ).prependTo( "html" ),
- fbCSS = fakeBody[ 0 ].style,
- vendors = [ "Webkit", "Moz", "O" ],
- webos = "palmGetResource" in window, //only used to rule out scrollTop
- operamini = window.operamini && ({}).toString.call( window.operamini ) === "[object OperaMini]",
- bb = window.blackberry; //only used to rule out box shadow, as it's filled opaque on BB
-
-// thx Modernizr
-function propExists( prop ) {
- var uc_prop = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ),
- props = ( prop + " " + vendors.join( uc_prop + " " ) + uc_prop ).split( " " );
-
- for ( var v in props ){
- if ( fbCSS[ props[ v ] ] !== undefined ) {
- return true;
- }
- }
-}
-
-// Test for dynamic-updating base tag support ( allows us to avoid href,src attr rewriting )
-function baseTagTest() {
- var fauxBase = location.protocol + "//" + location.host + location.pathname + "ui-dir/",
- base = $( "head base" ),
- fauxEle = null,
- href = "",
- link, rebase;
-
- if ( !base.length ) {
- base = fauxEle = $( "<base>", { "href": fauxBase }).appendTo( "head" );
- } else {
- href = base.attr( "href" );
- }
-
- link = $( "<a href='testurl' />" ).prependTo( fakeBody );
- rebase = link[ 0 ].href;
- base[ 0 ].href = href || location.pathname;
-
- if ( fauxEle ) {
- fauxEle.remove();
- }
- return rebase.indexOf( fauxBase ) === 0;
-}
-
-
-// non-UA-based IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
-// allows for inclusion of IE 6+, including Windows Mobile 7
-$.mobile.browser = {};
-$.mobile.browser.ie = (function() {
- var v = 3,
- div = document.createElement( "div" ),
- a = div.all || [];
-
- while ( div.innerHTML = "<!--[if gt IE " + ( ++v ) + "]><br><![endif]-->", a[ 0 ] );
-
- return v > 4 ? v : !v;
-})();
-
-
-$.extend( $.support, {
- orientation: "orientation" in window && "onorientationchange" in window,
- touch: "ontouchend" in document,
- cssTransitions: "WebKitTransitionEvent" in window,
- pushState: "pushState" in history && "replaceState" in history,
- mediaquery: $.mobile.media( "only all" ),
- cssPseudoElement: !!propExists( "content" ),
- touchOverflow: !!propExists( "overflowScrolling" ),
- boxShadow: !!propExists( "boxShadow" ) && !bb,
- scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini,
- dynamicBaseTag: baseTagTest()
-});
-
-fakeBody.remove();
-
-
-// $.mobile.ajaxBlacklist is used to override ajaxEnabled on platforms that have known conflicts with hash history updates (BB5, Symbian)
-// or that generally work better browsing in regular http for full page refreshes (Opera Mini)
-// Note: This detection below is used as a last resort.
-// We recommend only using these detection methods when all other more reliable/forward-looking approaches are not possible
-var nokiaLTE7_3 = (function(){
-
- var ua = window.navigator.userAgent;
-
- //The following is an attempt to match Nokia browsers that are running Symbian/s60, with webkit, version 7.3 or older
- return ua.indexOf( "Nokia" ) > -1 &&
- ( ua.indexOf( "Symbian/3" ) > -1 || ua.indexOf( "Series60/5" ) > -1 ) &&
- ua.indexOf( "AppleWebKit" ) > -1 &&
- ua.match( /(BrowserNG|NokiaBrowser)\/7\.[0-3]/ );
-})();
-
-$.mobile.ajaxBlacklist =
- // BlackBerry browsers, pre-webkit
- window.blackberry && !window.WebKitPoint ||
- // Opera Mini
- operamini ||
- // Symbian webkits pre 7.3
- nokiaLTE7_3;
-
-// Lastly, this workaround is the only way we've found so far to get pre 7.3 Symbian webkit devices
-// to render the stylesheets when they're referenced before this script, as we'd recommend doing.
-// This simply reappends the CSS in place, which for some reason makes it apply
-if ( nokiaLTE7_3 ) {
- $(function() {
- $( "head link[rel='stylesheet']" ).attr( "rel", "alternate stylesheet" ).attr( "rel", "stylesheet" );
- });
-}
-
-// For ruling out shadows via css
-if ( !$.support.boxShadow ) {
- $( "html" ).addClass( "ui-mobile-nosupport-boxshadow" );
-}
-
-})( jQuery );
+++ /dev/null
-/*
-* "transitions" plugin - Page change tranistions
-*/
-
-(function( $, window, undefined ) {
-
-function css3TransitionHandler( name, reverse, $to, $from ) {
-
- var deferred = new $.Deferred(),
- reverseClass = reverse ? " reverse" : "",
- viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
- doneFunc = function() {
-
- $to.add( $from ).removeClass( "out in reverse " + name );
-
- if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
- $from.removeClass( $.mobile.activePageClass );
- }
-
- $to.parent().removeClass( viewportClass );
-
- deferred.resolve( name, reverse, $to, $from );
- };
-
- $to.animationComplete( doneFunc );
-
- $to.parent().addClass( viewportClass );
-
- if ( $from ) {
- $from.addClass( name + " out" + reverseClass );
- }
- $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );
-
- return deferred.promise();
-}
-
-// Make our transition handler public.
-$.mobile.css3TransitionHandler = css3TransitionHandler;
-
-// If the default transition handler is the 'none' handler, replace it with our handler.
-if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) {
- $.mobile.defaultTransitionHandler = css3TransitionHandler;
-}
-
-})( jQuery, this );
+++ /dev/null
-/*
-* "mouse" plugin
-*/
-
-// This plugin is an experiment for abstracting away the touch and mouse
-// events so that developers don't have to worry about which method of input
-// the device their document is loaded on supports.
-//
-// The idea here is to allow 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, while still retaining the order of event firing in
-// the traditional mouse environment, should multiple handlers be registered
-// on the same element for different events.
-//
-// The current version exposes the following virtual events to jQuery bind methods:
-// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"
-
-(function( $, window, document, undefined ) {
-
-var dataPropertyName = "virtualMouseBindings",
- touchTargetPropertyName = "virtualTouchID",
- virtualEventNames = "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split( " " ),
- touchEventProps = "clientX clientY pageX pageY screenX screenY".split( " " ),
- activeDocHandlers = {},
- resetTimerID = 0,
- startX = 0,
- startY = 0,
- didScroll = false,
- clickBlockList = [],
- blockMouseTriggers = false,
- blockTouchTriggers = false,
- eventCaptureSupported = "addEventListener" in document,
- $document = $( document ),
- nextTouchID = 1,
- lastTouchID = 0;
-
-$.vmouse = {
- moveDistanceThreshold: 10,
- clickDistanceThreshold: 10,
- resetTimerDuration: 1500
-};
-
-function getNativeEvent( event ) {
-
- while ( event && typeof event.originalEvent !== "undefined" ) {
- event = event.originalEvent;
- }
- return event;
-}
-
-function createVirtualEvent( event, eventType ) {
-
- var t = event.type,
- oe, props, ne, prop, ct, touch, i, j;
-
- event = $.Event(event);
- event.type = eventType;
-
- oe = event.originalEvent;
- props = $.event.props;
-
- // copy original event properties over to the new event
- // this would happen if we could call $.event.fix instead of $.Event
- // but we don't have a way to force an event to be fixed multiple times
- if ( oe ) {
- for ( i = props.length, prop; i; ) {
- prop = props[ --i ];
- event[ prop ] = oe[ prop ];
- }
- }
-
- // make sure that if the mouse and click virtual events are generated
- // without a .which one is defined
- if ( t.search(/mouse(down|up)|click/) > -1 && !event.which ){
- event.which = 1;
- }
-
- if ( t.search(/^touch/) !== -1 ) {
- ne = getNativeEvent( oe );
- t = ne.touches;
- ct = ne.changedTouches;
- touch = ( t && t.length ) ? t[0] : ( (ct && ct.length) ? ct[ 0 ] : undefined );
-
- if ( touch ) {
- for ( j = 0, len = touchEventProps.length; j < len; j++){
- prop = touchEventProps[ j ];
- event[ prop ] = touch[ prop ];
- }
- }
- }
-
- return event;
-}
-
-function getVirtualBindingFlags( element ) {
-
- var flags = {},
- b, k;
-
- while ( element ) {
-
- b = $.data( element, dataPropertyName );
-
- for ( k in b ) {
- if ( b[ k ] ) {
- flags[ k ] = flags.hasVirtualBinding = true;
- }
- }
- element = element.parentNode;
- }
- return flags;
-}
-
-function getClosestElementWithVirtualBinding( element, eventType ) {
- var b;
- while ( element ) {
-
- b = $.data( element, dataPropertyName );
-
- if ( b && ( !eventType || b[ eventType ] ) ) {
- return element;
- }
- element = element.parentNode;
- }
- return null;
-}
-
-function enableTouchBindings() {
- blockTouchTriggers = false;
-}
-
-function disableTouchBindings() {
- blockTouchTriggers = true;
-}
-
-function enableMouseBindings() {
- lastTouchID = 0;
- clickBlockList.length = 0;
- blockMouseTriggers = false;
-
- // When mouse bindings are enabled, our
- // touch bindings are disabled.
- disableTouchBindings();
-}
-
-function disableMouseBindings() {
- // When mouse bindings are disabled, our
- // touch bindings are enabled.
- enableTouchBindings();
-}
-
-function startResetTimer() {
- clearResetTimer();
- resetTimerID = setTimeout(function(){
- resetTimerID = 0;
- enableMouseBindings();
- }, $.vmouse.resetTimerDuration );
-}
-
-function clearResetTimer() {
- if ( resetTimerID ){
- clearTimeout( resetTimerID );
- resetTimerID = 0;
- }
-}
-
-function triggerVirtualEvent( eventType, event, flags ) {
- var ve;
-
- if ( ( flags && flags[ eventType ] ) ||
- ( !flags && getClosestElementWithVirtualBinding( event.target, eventType ) ) ) {
-
- ve = createVirtualEvent( event, eventType );
-
- $( event.target).trigger( ve );
- }
-
- return ve;
-}
-
-function mouseEventCallback( event ) {
- var touchID = $.data(event.target, touchTargetPropertyName);
-
- if ( !blockMouseTriggers && ( !lastTouchID || lastTouchID !== touchID ) ){
- var ve = triggerVirtualEvent( "v" + event.type, event );
- if ( ve ) {
- if ( ve.isDefaultPrevented() ) {
- event.preventDefault();
- }
- if ( ve.isPropagationStopped() ) {
- event.stopPropagation();
- }
- if ( ve.isImmediatePropagationStopped() ) {
- event.stopImmediatePropagation();
- }
- }
- }
-}
-
-function handleTouchStart( event ) {
-
- var touches = getNativeEvent( event ).touches,
- target, flags;
-
- if ( touches && touches.length === 1 ) {
-
- target = event.target;
- flags = getVirtualBindingFlags( target );
-
- if ( flags.hasVirtualBinding ) {
-
- lastTouchID = nextTouchID++;
- $.data( target, touchTargetPropertyName, lastTouchID );
-
- clearResetTimer();
-
- disableMouseBindings();
- didScroll = false;
-
- var t = getNativeEvent( event ).touches[ 0 ];
- startX = t.pageX;
- startY = t.pageY;
-
- triggerVirtualEvent( "vmouseover", event, flags );
- triggerVirtualEvent( "vmousedown", event, flags );
- }
- }
-}
-
-function handleScroll( event ) {
- if ( blockTouchTriggers ) {
- return;
- }
-
- if ( !didScroll ) {
- triggerVirtualEvent( "vmousecancel", event, getVirtualBindingFlags( event.target ) );
- }
-
- didScroll = true;
- startResetTimer();
-}
-
-function handleTouchMove( event ) {
- if ( blockTouchTriggers ) {
- return;
- }
-
- var t = getNativeEvent( event ).touches[ 0 ],
- didCancel = didScroll,
- moveThreshold = $.vmouse.moveDistanceThreshold;
- didScroll = didScroll ||
- ( Math.abs(t.pageX - startX) > moveThreshold ||
- Math.abs(t.pageY - startY) > moveThreshold ),
- flags = getVirtualBindingFlags( event.target );
-
- if ( didScroll && !didCancel ) {
- triggerVirtualEvent( "vmousecancel", event, flags );
- }
-
- triggerVirtualEvent( "vmousemove", event, flags );
- startResetTimer();
-}
-
-function handleTouchEnd( event ) {
- if ( blockTouchTriggers ) {
- return;
- }
-
- disableTouchBindings();
-
- var flags = getVirtualBindingFlags( event.target ),
- t;
- triggerVirtualEvent( "vmouseup", event, flags );
-
- if ( !didScroll ) {
- var ve = triggerVirtualEvent( "vclick", event, flags );
- if ( ve && ve.isDefaultPrevented() ) {
- // The target of the mouse events that follow the touchend
- // event don't necessarily match the target used during the
- // touch. This means we need to rely on coordinates for blocking
- // any click that is generated.
- t = getNativeEvent( event ).changedTouches[ 0 ];
- clickBlockList.push({
- touchID: lastTouchID,
- x: t.clientX,
- y: t.clientY
- });
-
- // Prevent any mouse events that follow from triggering
- // virtual event notifications.
- blockMouseTriggers = true;
- }
- }
- triggerVirtualEvent( "vmouseout", event, flags);
- didScroll = false;
-
- startResetTimer();
-}
-
-function hasVirtualBindings( ele ) {
- var bindings = $.data( ele, dataPropertyName ),
- k;
-
- if ( bindings ) {
- for ( k in bindings ) {
- if ( bindings[ k ] ) {
- return true;
- }
- }
- }
- return false;
-}
-
-function dummyMouseHandler(){}
-
-function getSpecialEventObject( eventType ) {
- var realType = eventType.substr( 1 );
-
- return {
- setup: function( data, namespace ) {
- // If this is the first virtual mouse binding for this element,
- // add a bindings object to its data.
-
- if ( !hasVirtualBindings( this ) ) {
- $.data( this, dataPropertyName, {});
- }
-
- // If setup is called, we know it is the first binding for this
- // eventType, so initialize the count for the eventType to zero.
- var bindings = $.data( this, dataPropertyName );
- bindings[ eventType ] = true;
-
- // If this is the first virtual mouse event for this type,
- // register a global handler on the document.
-
- activeDocHandlers[ eventType ] = ( activeDocHandlers[ eventType ] || 0 ) + 1;
-
- if ( activeDocHandlers[ eventType ] === 1 ) {
- $document.bind( realType, mouseEventCallback );
- }
-
- // Some browsers, like Opera Mini, won't dispatch mouse/click events
- // for elements unless they actually have handlers registered on them.
- // To get around this, we register dummy handlers on the elements.
-
- $( this ).bind( realType, dummyMouseHandler );
-
- // For now, if event capture is not supported, we rely on mouse handlers.
- if ( eventCaptureSupported ) {
- // If this is the first virtual mouse binding for the document,
- // register our touchstart handler on the document.
-
- activeDocHandlers[ "touchstart" ] = ( activeDocHandlers[ "touchstart" ] || 0) + 1;
-
- if (activeDocHandlers[ "touchstart" ] === 1) {
- $document.bind( "touchstart", handleTouchStart )
- .bind( "touchend", handleTouchEnd )
-
- // On touch platforms, touching the screen and then dragging your finger
- // causes the window content to scroll after some distance threshold is
- // exceeded. On these platforms, a scroll prevents a click event from being
- // dispatched, and on some platforms, even the touchend is suppressed. To
- // mimic the suppression of the click event, we need to watch for a scroll
- // event. Unfortunately, some platforms like iOS don't dispatch scroll
- // events until *AFTER* the user lifts their finger (touchend). This means
- // we need to watch both scroll and touchmove events to figure out whether
- // or not a scroll happenens before the touchend event is fired.
-
- .bind( "touchmove", handleTouchMove )
- .bind( "scroll", handleScroll );
- }
- }
- },
-
- teardown: function( data, namespace ) {
- // If this is the last virtual binding for this eventType,
- // remove its global handler from the document.
-
- --activeDocHandlers[ eventType ];
-
- if ( !activeDocHandlers[ eventType ] ) {
- $document.unbind( realType, mouseEventCallback );
- }
-
- if ( eventCaptureSupported ) {
- // If this is the last virtual mouse binding in existence,
- // remove our document touchstart listener.
-
- --activeDocHandlers[ "touchstart" ];
-
- if ( !activeDocHandlers[ "touchstart" ] ) {
- $document.unbind( "touchstart", handleTouchStart )
- .unbind( "touchmove", handleTouchMove )
- .unbind( "touchend", handleTouchEnd )
- .unbind( "scroll", handleScroll );
- }
- }
-
- var $this = $( this ),
- bindings = $.data( this, dataPropertyName );
-
- // teardown may be called when an element was
- // removed from the DOM. If this is the case,
- // jQuery core may have already stripped the element
- // of any data bindings so we need to check it before
- // using it.
- if ( bindings ) {
- bindings[ eventType ] = false;
- }
-
- // Unregister the dummy event handler.
-
- $this.unbind( realType, dummyMouseHandler );
-
- // If this is the last virtual mouse binding on the
- // element, remove the binding data from the element.
-
- if ( !hasVirtualBindings( this ) ) {
- $this.removeData( dataPropertyName );
- }
- }
- };
-}
-
-// Expose our custom events to the jQuery bind/unbind mechanism.
-
-for ( var i = 0; i < virtualEventNames.length; i++ ){
- $.event.special[ virtualEventNames[ i ] ] = getSpecialEventObject( virtualEventNames[ i ] );
-}
-
-// Add a capture click handler to block clicks.
-// Note that we require event capture support for this so if the device
-// doesn't support it, we punt for now and rely solely on mouse events.
-if ( eventCaptureSupported ) {
- document.addEventListener( "click", function( e ){
- var cnt = clickBlockList.length,
- target = e.target,
- x, y, ele, i, o, touchID;
-
- if ( cnt ) {
- x = e.clientX;
- y = e.clientY;
- threshold = $.vmouse.clickDistanceThreshold;
-
- // The idea here is to run through the clickBlockList to see if
- // the current click event is in the proximity of one of our
- // vclick events that had preventDefault() called on it. If we find
- // one, then we block the click.
- //
- // Why do we have to rely on proximity?
- //
- // Because the target of the touch event that triggered the vclick
- // can be different from the target of the click event synthesized
- // by the browser. The target of a mouse/click event that is syntehsized
- // from a touch event seems to be implementation specific. For example,
- // some browsers will fire mouse/click events for a link that is near
- // a touch event, even though the target of the touchstart/touchend event
- // says the user touched outside the link. Also, it seems that with most
- // browsers, the target of the mouse/click event is not calculated until the
- // time it is dispatched, so if you replace an element that you touched
- // with another element, the target of the mouse/click will be the new
- // element underneath that point.
- //
- // Aside from proximity, we also check to see if the target and any
- // of its ancestors were the ones that blocked a click. This is necessary
- // because of the strange mouse/click target calculation done in the
- // Android 2.1 browser, where if you click on an element, and there is a
- // mouse/click handler on one of its ancestors, the target will be the
- // innermost child of the touched element, even if that child is no where
- // near the point of touch.
-
- ele = target;
-
- while ( ele ) {
- for ( i = 0; i < cnt; i++ ) {
- o = clickBlockList[ i ];
- touchID = 0;
-
- if ( ( ele === target && Math.abs( o.x - x ) < threshold && Math.abs( o.y - y ) < threshold ) ||
- $.data( ele, touchTargetPropertyName ) === o.touchID ) {
- // XXX: We may want to consider removing matches from the block list
- // instead of waiting for the reset timer to fire.
- e.preventDefault();
- e.stopPropagation();
- return;
- }
- }
- ele = ele.parentNode;
- }
- }
- }, true);
-}
-})( jQuery, window, document );
+++ /dev/null
-/*
-* widget factory extentions for mobile
-*/
-
-(function( $, undefined ) {
-
-$.widget( "mobile.widget", {
- // decorate the parent _createWidget to trigger `widgetinit` for users
- // who wish to do post post `widgetcreate` alterations/additions
- //
- // TODO create a pull request for jquery ui to trigger this event
- // in the original _createWidget
- _createWidget: function() {
- $.Widget.prototype._createWidget.apply( this, arguments );
- this._trigger( 'init' );
- },
-
- _getCreateOptions: function() {
-
- var elem = this.element,
- options = {};
-
- $.each( this.options, function( option ) {
-
- var value = elem.jqmData( option.replace( /[A-Z]/g, function( c ) {
- return "-" + c.toLowerCase();
- })
- );
-
- if ( value !== undefined ) {
- options[ option ] = value;
- }
- });
-
- return options;
- },
-
- enhanceWithin: function( target ) {
- // TODO remove dependency on the page widget for the keepNative.
- // Currently the keepNative value is defined on the page prototype so
- // the method is as well
- var page = $(target).closest(":jqmData(role='page')").data( "page" ),
- keepNative = (page && page.keepNativeSelector()) || "";
-
- $( this.options.initSelector, target ).not( keepNative )[ this.widgetName ]();
- }
-});
-
-})( jQuery );
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile: Event Logger</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
-
- <script>
- $(function(){
- $( "a" ).bind("tap click",function( e ){
- $("#log")
- .prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"</li>")
- .listview("refresh");
- return false;
- })
- .bind("tap click", false);
- });
- </script>
-
- <style>
- #jqm-home {
- height: 500px;
- }
- </style>
-</head>
-<body>
-<div data-role="page" data-theme="b" id="jqm-home">
- <div data-role="header">
- <h1>Event Logger</h1>
- </div>
-
- <div data-role="content">
- <p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
-
- <a href="foo.html" data-role="button">Click me</a>
-
- <ul data-role="listview" id="log">
-
- </ul>
-
- </div>
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile: Event Logger</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
-
- <script>
- $( document )
- .bind("tap taphold swipe swipeleft swiperight scrollstart scrollstop orientationchange",function( e ){
- $("#log")
- .prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"</li>")
- .listview("refresh");
-
- });
- </script>
-</head>
-<body>
-<div data-role="page" data-theme="b" id="jqm-home">
- <div data-role="header">
- <h1>Event Logger</h1>
- </div>
-
- <div data-role="content">
- <p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
-
- <ul data-role="listview" id="log">
-
- </ul>
-
- </div>
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8" />
- <title>jQuery Mobile: Grid Layout</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
-
- <script>
- $(function(){
- $(".ui-grid-d a").bind("tap click", function(e){
- $(this).hide();
- $("#log")
- .prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"; message: grid '"+$(this).text()+"' hidden</li>")
- .listview("refresh");
- return false;
- }).bind("tap click", false);
- $("#showbtn").bind("tap click", function(e){
- $(".ui-grid-d a").show();
- $("#log")
- .prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"; message: show all buttons</li>")
- .listview("refresh");
- }).bind("tap click", false);
- });
- </script>
-</head>
-<body>
-<div data-role="page" data-theme="b" id="jqm-home">
- <div data-role="header">
- <h1>Grid Layout</h1>
- </div>
-
- <div data-role="content">
- <p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
-
- <div class="ui-grid-d">
- <div class="ui-block-a">
- <a data-role="button" id="btn1" data-theme="b">Button 1</a>
- </div>
- <div class="ui-block-b">
- <a data-role="button" id="btn2" data-theme="b">Button 2</a>
- </div>
- <div class="ui-block-c">
- <a data-role="button" id="btn3" data-theme="b">Button 3</a>
- </div>
- <div class="ui-block-d">
- <a data-role="button" id="btn4" data-theme="b">Button 4</a>
- </div>
- <div class="ui-block-e">
- <a data-role="button" id="btn5" data-theme="b">Button 5</a>
- </div>
- </div>
-
- <a data-role="button" id="showbtn">Show all button</a>
-
- <ul data-role="listview" id="log">
-
- </ul>
-
- </div>
-</div>
-</body>
-</html>
+++ /dev/null
-/*
- * mobile support unit tests
- */
-
-(function( $ ) {
- $.testHelper = {
- excludeFileProtocol: function(callback){
- var message = "Tests require script reload and cannot be run via file: protocol";
-
- if (location.protocol == "file:") {
- test(message, function(){
- ok(false, message);
- });
- } else {
- callback();
- }
- },
-
- // TODO prevent test suite loads when the browser doesn't support push state
- // and push-state false is defined.
- setPushStateFor: function( libs ) {
- if( $.support.pushState && location.search.indexOf( "push-state" ) >= 0 ) {
- $.support.pushState = false;
- }
-
- $.each(libs, function(i, l) {
- $( "<script>", { src: l }).appendTo("head");
- });
- },
-
- reloads: {},
-
- reloadLib: function(libName){
- if(this.reloads[libName] === undefined) {
- this.reloads[libName] = {
- lib: $("script[src$='" + libName + "']"),
- count: 0
- };
- }
-
- var lib = this.reloads[libName].lib.clone(),
- src = lib.attr('src');
-
- //NOTE append "cache breaker" to force reload
- lib.attr('src', src + "?" + this.reloads[libName].count++);
- $("body").append(lib);
- },
-
- rerunQunit: function(){
- var self = this;
- QUnit.init();
- $("script:not([src*='.\/'])").each(function(i, elem){
- var src = elem.src.split("/");
- self.reloadLib(src[src.length - 1]);
- });
- QUnit.start();
- },
-
- alterExtend: function(extraExtension){
- var extendFn = $.extend;
-
- $.extend = function(object, extension){
- // NOTE extend the object as normal
- var result = extendFn.apply(this, arguments);
-
- // NOTE add custom extensions
- result = extendFn(result, extraExtension);
- return result;
- };
- },
-
- hideActivePageWhenComplete: function() {
- if( $('#qunit-testresult').length > 0 ) {
- $('.ui-page-active').css('display', 'none');
- } else {
- setTimeout($.testHelper.hideActivePageWhenComplete, 500);
- }
- },
-
- openPage: function(hash){
- location.href = location.href.split('#')[0] + hash;
- },
-
- sequence: function(fns, interval){
- $.each(fns, function(i, fn){
- setTimeout(fn, i * interval);
- });
- },
-
- pageSequence: function(fns){
- this.eventSequence("pagechange", fns);
- },
-
- eventSequence: function(event, fns, timedOut){
- var fn = fns.shift(),
- self = this;
-
- if( fn === undefined ) return;
-
- // if a pagechange or defined event is never triggered
- // continue in the sequence to alert possible failures
- var warnTimer = setTimeout(function(){
- self.eventSequence(event, fns, true);
- }, 2000);
-
- // bind the recursive call to the event
- $.mobile.pageContainer.one(event, function(){
- clearTimeout(warnTimer);
-
- // Let the current stack unwind before we fire off the next item in the sequence.
- // TODO setTimeout(self.pageSequence, 0, [fns, event]);
- setTimeout(function(){ self.eventSequence(event, fns); }, 0);
- });
-
- // invoke the function which should, in some fashion,
- // trigger the defined event
- fn(timedOut);
- },
-
- decorate: function(opts){
- var thisVal = opts.self || window;
-
- return function(){
- var returnVal;
- opts.before && opts.before.apply(thisVal, arguments);
- returnVal = opts.fn.apply(thisVal, arguments);
- opts.after && opts.after.apply(thisVal, arguments);
-
- return returnVal;
- };
- },
-
- assertUrlLocation: function( args ) {
- var parts = $.mobile.path.parseUrl( location.href ),
- pathnameOnward = location.href.replace( parts.domain, "" );
-
- if( $.support.pushState ) {
- same( pathnameOnward, args.hashOrPush || args.push, args.report );
- } else {
- same( parts.hash, "#" + (args.hashOrPush || args.hash), args.report );
- }
- }
- };
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Basic Page</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
- <script>
- $(function() {
- $( "p" )
- .tap(function() {
- var elem = this;
- $( elem ).css( "color", "#f00" );
- setTimeout(function() {
- $( elem ).css( "color", "#000" );
- }, 500 );
- })
- .taphold(function() {
- $( this ).css( "color", "#0f0" );
- })
- .click(function() {
- var elem = this;
- $( elem ).css( "background-color", "#00f" );
- setTimeout(function() {
- $( elem ).css( "background-color", "transparent" );
- }, 500 );
- });
- });</script>
-</head>
-<body>
-
-<div data-role="page">
- <div data-role="header">
- <h1>Basic Page</h1>
- </div>
- <div data-role="content">
- <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
-
-<p>Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
-
-<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>
-
-<p>Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
-
-<p>Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. </p>
-
-<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
-
-<p>Maecenas faucibus mollis interdum. Donec sed odio dui. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
-
-<p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
-
-<p>Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
-
-<p>Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
-
-<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. </p>
-
-<p>Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. </p>
- </div>
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <script src="../../js/jquery.js"></script>
- <script type="text/javascript" src="stats/perf.js"></script>
- <script type="text/javascript" src="stats/startup.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page" id="list-page">
-
- <div data-role="header">
- <h1>400 item list</h1>
- </div><!-- /header -->
-
- <div data-role="content" data-filter="true">
-
- <ul data-role="listview" data-theme="d">
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- </ul>
- </div><!-- /content -->
-</div><!-- /page -->
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists</title>
- <link rel="stylesheet" href="../../css/themes/default/" />
- <script src="../../js/jquery.js"></script>
- <script src="../../js/"></script>
-</head>
-<body>
-
-<div data-role="page">
-
- <div data-role="header">
- <h1>400 item list</h1>
- </div><!-- /header -->
-
- <div data-role="content" data-filter="true">
-
- <ul data-role="listview" data-theme="d">
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>
- <li><a href="index.html">Chrysler</a></li>
- <li><a href="index.html">Dodge</a></li>
- <li><a href="index.html">Ferrari</a></li>
- <li><a href="index.html">Ford</a></li>
- <li><a href="index.html">GMC</a></li>
- <li><a href="index.html">Honda</a></li>
- <li><a href="index.html">Hyundai</a></li>
- <li><a href="index.html">Infiniti</a></li>
- <li><a href="index.html">Jeep</a></li>
- <li><a href="index.html">Kia</a></li>
- <li><a href="index.html">Lexus</a></li>
- <li><a href="index.html">Mini</a></li>
- <li><a href="index.html">Nissan</a></li>
- <li><a href="index.html">Porsche</a></li>
- <li><a href="index.html">Subaru</a></li>
- <li><a href="index.html">Toyota</a></li>
- </ul>
- </div><!-- /content -->
-</div><!-- /page -->
-
-</body>
-</html>
-
+++ /dev/null
-<?php
- $db = new PDO('sqlite:./stats.db');
- $db->query('CREATE TABLE IF NOT EXISTS stats (id INTEGER, agent TEXT, agent_version Text, agent_full TEXT, point TEXT, value REAL, time TIMESTAMP, pathname TEXT, PRIMARY KEY (id))');
-
- // making a sad attempt here to provide a clean REST-respecting url scheme.
- // stats with a GET returns - wait for it - the stats, and a post with the
- // the right params will create a new entry
- if ( $_SERVER['REQUEST_METHOD'] == "GET" ) {
- $agent = (empty($_GET['agent'])) ? '' : urldecode($_GET['agent']);
- $data_point = (empty($_GET['data_point'])) ? '' : urldecode($_GET['data_point']);
-
- $st = $db->prepare( '
- SELECT agent, agent_version, point, avg(value) as avg_value,
- pathname, strftime(\'%Y-%m-%d\', time) as day
- FROM (
- SELECT agent, agent_version, agent_full, pathname, point, value, time FROM stats WHERE agent <> \'Android\'
- UNION
- SELECT agent, substr(agent_version, 1, 3) as agent_version, agent_full, pathname, point, value, time
- FROM stats
- WHERE agent LIKE \'Android\'
- )
- WHERE (agent_full like \'%Mobile%\' or agent_full like \'%mobile%\' or agent_full like \'%Android%\')
- and agent like :agent and point like :data_point
- GROUP BY agent, agent_version, pathname, point, time
- ORDER BY agent, agent_version, time;
- ');
-
- $st->execute(array(
- ':agent' => '%' . $agent . '%',
- ':data_point' => '%' . $data_point . '%'
- ));
-
- $result = $st->fetchAll(PDO::FETCH_ASSOC);
- header("Content-Type: application/json");
- echo json_encode($result);
-
- } elseif ( $_POST['datapoint'] &&
- $_POST['value'] &&
- $_POST['agent'] &&
- $_POST['pathname'] &&
- $_POST['agentVersion'] ) {
-
- $st = $db->prepare('
- INSERT INTO stats (agent, agent_full, agent_version, point, value, pathname, time)
- VALUES (:agent, :agent_full, :agent_version, :data_point, :value, :pathname, DATETIME(\'now\'))
- ');
-
- $st->execute(array(
- ':agent' => $_POST['agent'],
- ':agent_full' => $_POST['agentFull'],
- ':agent_version' => $_POST['agentVersion'],
- ':data_point' => $_POST['datapoint'],
- ':value' => $_POST['value'],
- ':pathname' => $_POST['pathname']
- ));
-
- echo "success";
- }
-?>
\ No newline at end of file
+++ /dev/null
-window.Perf = (function($, Perf) {
- $.extend(Perf, {
- reportUrl: 'stats/',
- revUrl: 'stats/rev.php',
-
- // should be defined before report or poll are run
- currentRev: undefined,
-
- report: function( data, after ) {
- $.extend(data, {
- pathname: location.pathname,
- agent: this.agent(),
- agentFull: window.navigator.userAgent,
- agentVersion: this.agentVersion()
- });
-
- $.post( this.reportUrl, data, after );
- },
-
- poll: function() {
- var self = this;
-
- setInterval(function() {
- $.get( self.revUrl, function( data ) {
-
- // if there's a new revision refresh or currentRev isn't being set
- if( self.currentRev && self.currentRev !== data ){
- location.href = location.href;
- }
- });
- }, 60000);
- },
-
- setCurrentRev: function() {
- var self = this;
-
- $.get( self.revUrl, function( data ) {
- self.currentRev = data;
- });
- },
-
- agent: function() {
- var agent = window.navigator.userAgent;
-
- for( name in this.agents ) {
- if( agent.indexOf( this.agents[name] ) > -1 ) {
- return this.agents[name];
- }
- }
-
- return agent;
- },
-
- agentVersion: function() {
- var agent = window.navigator.userAgent;
-
- agent.search(this.vRegexs[this.agent()] || "");
-
- return RegExp.$1 ? RegExp.$1 : "0.0";
- },
-
- agents: {
- ANDROID: "Android",
- WP: "Windows Phone OS",
- IPHONE: "iPhone OS",
- IPAD: "iPad; U; CPU OS",
- BLACKBERRY: "BlackBerry"
- },
-
- vRegexs: {}
- });
-
- Perf.vRegexs[Perf.agents.ANDROID] = /([0-9].[0-9])(.[0-9])?/;
- Perf.vRegexs[Perf.agents.WP] = /Windows Phone OS ([0-9].[0-9]);/;
- Perf.vRegexs[Perf.agents.IPHONE] = /iPhone OS ([0-9]_[0-9])/;
- Perf.vRegexs[Perf.agents.IPAD] = /iPad; U; CPU OS ([0-9]_[0-9])/;
- Perf.vRegexs[Perf.agents.BLACKBERRY] = /BlackBerry ([0-9]{4})/;
-
- return Perf;
-})(jQuery, window.Perf || {});
+++ /dev/null
-<?php echo exec('git rev-parse HEAD') ?>
\ No newline at end of file
+++ /dev/null
-(function(Perf) {
- var $listPage = $( "#list-page" ), firstCounter = 0;
-
- Perf.setCurrentRev();
- Perf.pageLoadStart = Date.now();
-
- $listPage.live( "pagebeforecreate", function() {
- if( firstCounter == 0 ) {
- Perf.pageCreateStart = Date.now();
- firstCounter++;
- }
- });
-
- $listPage.live( "pageinit", function( event ) {
- // if a child page init is fired ignore it, we only
- // want the top level page init event
- if( event.target !== $("#list-page")[0] ){
- return;
- }
-
- Perf.pageLoadEnd = Date.now();
-
- // report the time taken for a full app boot
- Perf.report({
- datapoint: "fullboot",
- value: Perf.pageLoadEnd - Perf.pageLoadStart
- });
-
- // record the time taken to load and enhance the page
- // start polling for a new revision
- Perf.report({
- datapoint: "pageload",
- value: Perf.pageCreateStart - Perf.pageLoadStart,
- after: function() {
- Perf.poll();
- }
- });
- });
-})(window.Perf);
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <script type="text/javascript" src="../../../../js/jquery.js"></script>
- <script type="text/javascript" src="http://www.filamentgroup.com/examples/charting_v2/visualize.jQuery.js"></script>
- <script type="text/javascript" src="visualize.js"></script>
- <link rel="stylesheet" href="visualize.css" type="text/css" media="screen" />
-</head>
-<body>
- <div id="tables">
- </div>
-
- <div id="graphs">
-
- </div>
-</body>
-</html>
+++ /dev/null
-/*plugin styles*/
-.visualize { border: 1px solid #888; position: relative; background: #fafafa; }
-.visualize canvas { position: absolute; }
-.visualize ul,.visualize li { margin: 0; padding: 0;}
-
-/*table title, key elements*/
-.visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; position: absolute; top: -20px; right: 10px; opacity: .8; }
-.visualize .visualize-title { display: block; color: #333; margin-bottom: 3px; font-size: 1.1em; }
-.visualize ul.visualize-key { list-style: none; }
-.visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;}
-.visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px; }
-.visualize ul.visualize-key .visualize-key-label { color: #000; }
-
-/*pie labels*/
-.visualize-pie .visualize-labels { list-style: none; }
-.visualize-pie .visualize-label-pos, .visualize-pie .visualize-label { position: absolute; margin: 0; padding:0; }
-.visualize-pie .visualize-label { display: block; color: #fff; font-weight: bold; font-size: 1em; }
-.visualize-pie-outside .visualize-label { color: #000; font-weight: normal; }
-
-/*line,bar, area labels*/
-.visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; }
-.visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; }
-.visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555; }
-.visualize-labels-x li span.line, .visualize-labels-y li span.line { position: absolute; border: 0 solid #ccc; }
-.visualize-labels-x li { height: 100%; }
-.visualize-labels-x li span.label { top: 100%; margin-top: 5px; }
-.visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
-.visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
-.visualize-labels-y li { width: 100%; }
-.visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
-.visualize-labels-y li span.line { border-top-width: 1px; width: 100%; }
-.visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }
-
-body {
- margin-top: 50px;
-}
-
-table {
- display: none;
-}
-
-div.visualize {
- float: left;
- margin: 0 50px 70px 100px;
-}
\ No newline at end of file
+++ /dev/null
-(function($) {
- // TODO this is entire thing sucks
- $(function() {
- var searchMap = (function() {
- var searchSplit, searchMap = {};
-
- if ( !location.search ){
- return searchMap;
- }
-
- searchSplit = location.search.replace(/^\?/, "").split( /&|;/ );
-
- for( var i = 0; i < searchSplit.length; i++ ) {
- var kv = searchSplit[i].split(/=/);
- searchMap[ kv[0] ] = kv[1];
- }
-
- return searchMap;
- })();
-
- $.get("../", searchMap, function(data) {
- $.each(data, function( i, avg ) {
- var tablename = avg.point + " " + avg.agent + " " + avg.agent_version + " " + avg.pathname,
- $table = $( "table > caption:contains(" + tablename + ")").parent();
-
- if( !$table.length ) {
- $table = $( "<table></table>", {
- "data-pathname": avg.pathname,
- "data-point": avg.point,
- "data-agent": avg.agent,
- "data-agent-version": avg.agent_version
- });
-
- $table.append( "<caption>" + tablename + "</caption>");
- $table.append( "<thead><tr></tr></thead>" );
- $table.append( "<tbody><tr></tr></tbody>" );
- }
-
- // TODO assume time ordering in the data set
- var $heading = $table.find("thead > tr > th:contains(" + avg.day + ")");
-
- if( !$heading.length ) {
- $heading = $("<th></th>", {
- text: avg.day,
- scope: "column"
- });
-
- $table.find("thead > tr").append($heading);
- }
-
- var $rowHeading = $table.find("tbody > tr > th:contains(" + avg.point + ")" ),
- $row = $table.find( "tbody > tr" );
-
- if( !$rowHeading.length ) {
- $rowHeading = $("<th></th>", {
- text: avg.point,
- scope: "row"
- });
-
- $row.append( $rowHeading );
- }
-
- $row.append( "<td>" + avg.avg_value + "</td>" );
-
- $("#tables").append($table);
- });
-
- $("#tables table").visualize({ type: "bar", width: 400, height: 400 }).appendTo("#graphs");
- });
- });
-})(jQuery);
\ No newline at end of file
+++ /dev/null
-/*
- * mobile button unit tests
- */
-(function($){
- $.mobile.page.prototype.options.keepNative = "button.should-be-native";
-
- test( "button elements in the keepNative set shouldn't be enhanced", function() {
- same( $("button.should-be-native").siblings("div.ui-slider").length, 0 );
- });
-
- test( "button elements should be enhanced", function() {
- ok( $("#enhanced").hasClass( "ui-btn-hidden" ) );
- });
-
- test( "button markup text value should be changed on refresh", function() {
- var textValueButton = $("#text"), valueButton = $("#value");
-
- // the value shouldn't change unless it's been altered
- textValueButton.button( 'refresh' );
- same( textValueButton.siblings().text(), "foo" );
-
- // use the text where it's provided
- same( textValueButton.siblings().text(), "foo" );
- textValueButton.text( "bar" ).button( 'refresh' );
- same( textValueButton.siblings().text(), "bar" );
-
- // use the val if it's provided where the text isn't
- same( valueButton.siblings().text(), "foo" );
- valueButton.val( "bar" ).button( 'refresh' );
- same( valueButton.siblings().text(), "bar" );
-
- // prefer the text to the value
- textValueButton.text( "bar" ).val( "baz" ).button( 'refresh' );
- same( textValueButton.siblings().text(), "bar" );
- });
-
- // Issue 2877
- test( "verify the button placeholder is added many times", function() {
- var $form = $( "#hidden-element-addition-form" ), count = 3;
- expect( count * 2 );
-
- for( var x = 0; x < count; x++ ) {
- $( "#hidden-element-addition" ).trigger( "vclick" );
- same( $form.find( "input[type='hidden']" ).length, 1, "hidden form input should be added" );
-
- $form.trigger( "submit" );
- same( $form.find( "[type='hidden']" ).length, 0, "hidden form input is removed" );
- }
- });
-})( jQuery );
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Button Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
-
-
- <link rel="stylesheet" href="../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="button_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
- <h1 id="qunit-header">jQuery Mobile Button Test Suite</h1>
- <h2 id="qunit-banner"></h2>
- <h2 id="qunit-userAgent"></h2>
- <ol id="qunit-tests">
- </ol>
-
- <div data-nstest-role="page" data-nstest-theme="a">
- <div data-nstest-role="content" data-nstest-theme="p">
- <button class="should-be-native">foo</button>
- <button id="enhanced">bar</button>
- <button id="text">foo</button>
- <button id="value" value="foo"></button>
- <form id="hidden-element-addition-form" method="get" action="this will fail!">
- <input type="submit" id="hidden-element-addition" name="foo">foo</input>
- </form>
- </div>
- </div>
-</body>
-</html>
+++ /dev/null
-/*
- * mobile buttonMarkup tests
- */
-(function($){
- module("jquery.mobile.buttonMarkup.js");
-
- test( "control group buttons should be enhanced inside a footer", function(){
- var group, linkCount;
-
- group = $("#control-group-footer");
- linkCount = group.find( "a" ).length;
-
- same( group.find("a.ui-btn").length, linkCount, "all 4 links should be buttons");
- same( group.find("a > span.ui-corner-left").length, 1, "only 1 left cornered button");
- same( group.find("a > span.ui-corner-right").length, 1, "only 1 right cornered button");
- same( group.find("a > span:not(.ui-corner-left):not(.ui-corner-right)").length, linkCount - 2, "only 2 buttons are cornered");
- });
-
- test( "control group buttons should respect theme-related data attributes", function(){
- var group = $("#control-group-content");
-
- ok(!group.find('[data-shadow=false]').hasClass("ui-shadow"),
- "buttons with data-shadow=false should not have the ui-shadow class");
- ok(!group.find('[data-corners=false]').hasClass("ui-btn-corner-all"),
- "buttons with data-corners=false should not have the ui-btn-corner-all class");
- ok(!group.find('[data-iconshadow=false] .ui-icon').hasClass("ui-icon-shadow"),
- "buttons with data-iconshadow=false should not have the ui-icon-shadow class on their icons");
- });
-
- // Test for issue #3046 and #3054:
- test( "mousedown on SVG elements should not throw an exception", function(){
- var svg = $("#embedded-svg"),
- success = true,
- rect;
- ok(svg.length > 0, "found embedded svg document" );
- if ( svg.length > 0 ) {
- rect = $( "rect", svg );
- ok(rect.length > 0, "found rect" );
- try {
- rect.trigger("mousedown");
- } catch ( ex ) {
- success = false;
- }
- ok( success, "mousedown executed without exception");
- }
- });
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8" />
- <title>jQuery Mobile Button Markup Test Suite</title>
- <!-- meta viewport left out on purpose for test append -->
- <script src="../../../js/jquery.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../external/qunit.js"></script>
- <script src="../../jquery.testHelper.js"></script>
- <script src="buttonMarkup_core.js"></script>
-
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../../external/qunit.css"/>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Button Markup Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div data-nstest-role="page" id="default">
- <div data-role="content" id="control-group-content">
- <a href="index.html" data-role="button" data-shadow="false">No shadow</a>
- <a href="index.html" data-role="button" data-corners="false">No corners</a>
- <a href="index.html" data-role="button" data-shadow="false" data-corners="false">No shadow or corners</a>
- <a href="index.html" data-role="button" data-icon="delete" data-iconshadow="false">No iconshadow</a>
- <button data-shadow="false" data-corners="false" data-icon="delete" data-iconshadow="false">None of the above</button>
- <svg id="embedded-svg" width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
- <rect x="10" y="10" width="100" height="100"/>
- </svg>
- </div>
- <div data-role="footer" id="control-group-footer" class="ui-bar" data-position="inline">
- <div data-role="controlgroup" data-type="horizontal">
- <a href="index.html" data-icon="delete">Remove</a>
- <a href="index.html" data-icon="plus">Add</a>
- <a href="index.html" data-icon="arrow-u">Up</a>
- <a href="index.html" data-icon="arrow-d">Down</a>
- </div>
- </div>
-</div>
-</body>
-</html>
+++ /dev/null
-/*
- * mobile checkboxradio unit tests
- */
-(function($){
- module( 'jquery.mobile.forms.checkboxradio.js' );
-
- test( "widget can be disabled and enabled", function(){
- var input = $( "#checkbox-1" ),
- button = input.parent().find( ".ui-btn" );
-
- input.checkboxradio( "disable" );
- input.checkboxradio( "enable" );
- ok( !input.attr( "disabled" ), "start input as enabled" );
- ok( !input.parent().hasClass( "ui-disabled" ), "no disabled styles" );
- ok( !input.attr( "checked" ), "not checked before click" );
- button.trigger( "click" );
- ok( input.attr( "checked" ), "checked after click" );
- ok( button.hasClass( "ui-checkbox-on" ), "active styles after click" );
- button.trigger( "click" );
-
- input.checkboxradio( "disable" );
- ok( input.attr( "disabled" ), "input disabled" );
- ok( input.parent().hasClass( "ui-disabled" ), "disabled styles" );
- ok( !input.attr( "checked" ), "not checked before click" );
- button.trigger( "click" );
- ok( !input.attr( "checked" ), "not checked after click" );
- ok( !button.hasClass( "ui-checkbox-on" ), "no active styles after click" );
- });
-
- test( "clicking a checkbox within a controlgroup does not affect checkboxes with the same name in the same controlgroup", function(){
- var input1 = $("#checkbox-31");
- var button1 = input1.parent().find(".ui-btn");
- var input2 = $("#checkbox-32");
- var button2 = input2.parent().find(".ui-btn");
-
- ok(!input1.attr("checked"), "input1 not checked before click");
- ok(!input2.attr("checked"), "input2 not checked before click");
-
- button1.trigger("click");
- ok(input1.attr("checked"), "input1 checked after click on input1");
- ok(!input2.attr("checked"), "input2 not checked after click on input1");
-
- button2.trigger("click");
- ok(input1.attr("checked"), "input1 not changed after click on input2");
- ok(input2.attr("checked"), "input2 checked after click on input2");
- });
-
- asyncTest( "change events fired on checkbox for both check and uncheck", function(){
- var $checkbox = $( "#checkbox-2" ),
- $checkboxLabel = $checkbox.parent().find( ".ui-btn" );
-
- $checkbox.unbind( "change" );
-
- expect( 1 );
-
- $checkbox.one('change', function(){
- ok( true, "change fired on click to check the box" );
- });
-
- $checkboxLabel.trigger( "click" );
-
- //test above will be triggered twice, and the start here once
- $checkbox.one('change', function(){
- start();
- });
-
- $checkboxLabel.trigger( "click" );
- });
-
- asyncTest( "radio button labels should update the active button class to last clicked and clear checked", function(){
- var $radioBtns = $( '#radio-active-btn-test input' ),
- singleActiveAndChecked = function(){
- same( $( "#radio-active-btn-test .ui-radio-on" ).length, 1, "there should be only one active button" );
- same( $( "#radio-active-btn-test :checked" ).length, 1, "there should be only one checked" );
- };
-
- $.testHelper.sequence([
- function(){
- $radioBtns.last().siblings( 'label' ).click();
- },
-
- function(){
- ok( $radioBtns.last().prop( 'checked' ) );
- ok( $radioBtns.last().siblings( 'label' ).hasClass( 'ui-radio-on' ),
- "last input label is an active button" );
-
- ok( !$radioBtns.first().prop( 'checked' ) );
- ok( !$radioBtns.first().siblings( 'label' ).hasClass( 'ui-radio-on' ),
- "first input label is not active" );
-
- singleActiveAndChecked();
-
- $radioBtns.first().siblings( 'label' ).click();
- },
-
- function(){
- ok( $radioBtns.first().prop( 'checked' ));
- ok( $radioBtns.first().siblings( 'label' ).hasClass( 'ui-radio-on' ),
- "first input label is an active button" );
-
- ok( !$radioBtns.last().prop( 'checked' ));
- ok( !$radioBtns.last().siblings( 'label' ).hasClass( 'ui-radio-on' ),
- "last input label is not active" );
-
- singleActiveAndChecked();
-
- start();
- }
- ], 500);
-
- });
-
- test( "checkboxradio controls will create when inside a container that receives a 'create' event", function(){
- ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-checkbox").length, "did not have enhancements applied" );
- ok( $("#enhancetest").trigger("create").find(".ui-checkbox").length, "enhancements applied" );
- });
-
- $.mobile.page.prototype.options.keepNative = "input.should-be-native";
-
- // not testing the positive case here since's it's obviously tested elsewhere
- test( "checkboxradio elements in the keepNative set shouldn't be enhanced", function() {
- ok( !$("input.should-be-native").parent().is("div.ui-checkbox") );
- });
-
- asyncTest( "clicking the label triggers a click on the element", function() {
- var clicked = false;
-
- expect( 1 );
-
- $( "#checkbox-click-triggered" ).one('click', function() {
- clicked = true;
- });
-
- $.testHelper.sequence([
- function() {
- $( "[for='checkbox-click-triggered']" ).click();
- },
-
- function() {
- ok(clicked, "click was fired on input");
- start();
- }
- ], 2000);
- });
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
- <meta charset="UTF-8" />
- <title>jQuery Mobile Checkboxradio Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
-
- <link rel="stylesheet" href="../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="checkboxradio_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Checkbockradio Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div data-nstest-role="page">
- <div data-nstest-role="content">
- <div data-nstest-role="fieldcontain">
- <fieldset data-nstest-role="controlgroup">
- <legend>Agree to the terms:</legend>
- <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom"/>
- <label for="checkbox-1">I agree</label>
- </fieldset>
- </div>
-
- <div data-nstest-role="fieldcontain">
- <fieldset data-nstest-role="controlgroup">
- <legend>Agree to the terms:</legend>
- <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom"/>
- <label for="checkbox-2">I agree</label>
- </fieldset>
- </div>
-
- <div data-nstest-role="fieldcontain" data-nstest-role="controlgroup">
- <div>
- <legend>Agree to the terms 3.1:</legend>
- <input type="checkbox" name="checkbox-3" id="checkbox-31" class="custom"/>
- <label for="checkbox-31">I agree 3.1</label>
- </div>
- <div>
- <legend>Agree to the terms 3.2:</legend>
- <input type="checkbox" name="checkbox-3" id="checkbox-32" class="custom"/>
- <label for="checkbox-32">I agree 3.2</label>
- </div>
- </div>
- </div>
-
-<div data-role="fieldcontain" id="radio-active-btn-test">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-pet-active-btn" id="radio-pet-1" value="choice-1" checked="checked" />
- <label for="radio-pet-1">Cat</label>
-
- <input type="radio" name="radio-pet-active-btn" id="radio-pet-2" value="choice-2" />
- <label for="radio-pet-2">Dog</label>
-
- <input type="radio" name="radio-pet-active-btn" id="radio-pet-3" value="choice-3" />
- <label for="radio-pet-3">Hamster</label>
-
- <input type="radio" name="radio-pet-active-btn" id="radio-pet-4" value="choice-4" />
- <label for="radio-pet-4">Lizard</label>
- </fieldset>
-</div>
-
-<div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Agree to the terms:</legend>
- <input type="checkbox" name="checkbox-1" id="checkbox-1" class="should-be-native" />
- <label for="checkbox-1">I agree</label>
- </fieldset>
-</div>
-
-<div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Agree to the terms:</legend>
- <input type="checkbox" name="checkbox-click-triggered" id="checkbox-click-triggered"/>
- <label for="checkbox-click-triggered">click triggered</label>
- </fieldset>
-</div>
-</div>
-
-<div id="enhancetest">
- <input type="checkbox" name="checkbox-332" id="checkbox-332" class="custom"/>
- <label for="checkbox-332">I agree 3.2</label>
-</div>
-
-</body>
-</html>
+++ /dev/null
-/*
- * mobile listview unit tests
- */
-
-// TODO split out into seperate test files
-(function( $ ){
- module( "Collapsible section", {});
-
- asyncTest( "The page should enhanced correctly", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage( "#basic-collapsible-test" );
- },
-
- function() {
- var $page = $( "#basic-collapsible-test" );
- ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible" ), ".ui-collapsible class added to collapsible elements" );
- ok($page.find( ".ui-content >:eq(0) >:header" ).hasClass( "ui-collapsible-heading" ), ".ui-collapsible-heading class added to collapsible heading" );
- ok($page.find( ".ui-content >:eq(0) > div" ).hasClass( "ui-collapsible-content" ), ".ui-collapsible-content class added to collapsible content" );
- ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible-collapsed" ), ".ui-collapsible-collapsed added to collapsed elements" );
- ok(!$page.find( ".ui-content >:eq(1)" ).hasClass( "ui-collapsible-collapsed" ), ".ui-collapsible-collapsed not added to expanded elements" );
- ok($page.find( ".ui-collapsible.ui-collapsible-collapsed" ).find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top ui-corner-bottom" ), "Collapsible header button should have class ui-corner-all" );
- start();
- }
- ]);
- });
-
- asyncTest( "Expand/Collapse", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage( "#basic-collapsible-test" );
- },
-
- function() {
- ok($( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed");
- $( "#basic-collapsible-test .ui-collapsible-heading-toggle" ).eq(0).click();
- ok(!$( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be expanded after click");
- $( "#basic-collapsible-test .ui-collapsible-heading-toggle" ).eq(0).click();
- ok($( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed");
- start();
- }
- ]);
- });
-
- module( "Collapsible set", {});
-
- asyncTest( "The page should enhanced correctly", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage( "#basic-collapsible-set-test" );
- },
-
- function() {
- var $page = $( "#basic-collapsible-set-test" );
-
- ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible-set" ), ".ui-collapsible-set class added to collapsible set" );
- ok($page.find( ".ui-content >:eq(0) > div" ).hasClass( "ui-collapsible" ), ".ui-collapsible class added to collapsible elements" );
- $page.find( ".ui-collapsible-set" ).each(function() {
- var $this = $( this );
- ok($this.find( ".ui-collapsible" ).first().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top" ), "First collapsible header button should have class ui-corner-top" );
- ok($this.find( ".ui-collapsible" ).last().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-bottom" ), "Last collapsible header button should have class ui-corner-bottom" );
- });
-
- start();
- }
- ]);
- });
-
- asyncTest( "Collapsible set with only one collapsible", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage( "#collapsible-set-with-lonely-collapsible-test" );
- },
-
- function() {
- var $page = $( "#collapsible-set-with-lonely-collapsible-test" );
- $page.find( ".ui-collapsible-set" ).each(function() {
- var $this = $( this );
- ok($this.find( ".ui-collapsible" ).first().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top" ), "First collapsible header button should have class ui-corner-top" );
- ok($this.find( ".ui-collapsible" ).last().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-bottom" ), "Last collapsible header button should have class ui-corner-bottom" );
- });
-
- start();
- }
- ]);
- });
-
- asyncTest( "Section expanded by default", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage( "#basic-collapsible-set-test" );
- },
-
- function() {
- equals($( "#basic-collapsible-set-test .ui-content >:eq(0) .ui-collapsible-collapsed" ).length, 2, "There should be 2 section collapsed" );
- ok(!$( "#basic-collapsible-set-test .ui-content >:eq(0) >:eq(1)" ).hasClass( "ui-collapsible-collapsed" ), "Section B should be expanded" );
- start();
- }
- ]);
- });
-
- asyncTest( "Expand/Collapse", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage( "#basic-collapsible-set-test" );
- },
-
- function() {
- ok($( "#basic-collapsible-set-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed");
- $( "#basic-collapsible-set-test .ui-collapsible-heading-toggle" ).eq(0).click();
- ok(!$( "#basic-collapsible-set-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be expanded after click");
- $( "#basic-collapsible-set-test .ui-collapsible-heading-toggle" ).eq(0).click();
- ok($( "#basic-collapsible-set-test .ui-collapsible" ).hasClass( "ui-collapsible-collapsed" ), "All collapsible should be collapsed");
- start();
- }
- ]);
- });
-
- module( "Theming", {});
-
- asyncTest( "Collapsible", 6, function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage( "#collapsible-with-theming" );
- },
-
- function() {
- var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
- ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
- ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
- ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
- ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-body-b" ), "Content of second collapsible should have class ui-btn-up-b");
- ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-c" ), "Heading of third collapsible should have class ui-btn-up-c");
- ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-body-c" ), "Content of third collapsible should have class ui-btn-up-c");
- start();
- }
- ]);
- });
-
-
- asyncTest( "Collapsible Set", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage( "#collapsible-set-with-theming" );
- },
-
- function() {
- var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
- ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
- ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of first collapsible should NOT have class ui-btn-up-[a,b,c]");
- ok( collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of first collapsible should NOT have class ui-btn-up-d");
- ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
- ok( !collapsibles.eq(1).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-c,.ui-body-d" ), "Content of second collapsible should NOT have class ui-btn-up-[a,c,d]");
- ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-body-b" ), "Content of second collapsible should have class ui-btn-up-b");
- ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of third collapsible should have class ui-btn-up-d");
- ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of third collapsible should NOT have class ui-btn-up-[a,b,c]");
- ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of third collapsible should have class ui-btn-up-d");
- ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-collapsible-content-collapsed" ), "Content of third collapsible should NOT have class ui-collapsible-content-collapsed");
- ok( collapsibles.eq(3).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of fourth collapsible should have class ui-btn-up-d");
- ok( !collapsibles.eq(3).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of fourth collapsible should NOT have class ui-btn-up-[a,b,c]");
- ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of fourth collapsible should have class ui-btn-up-d");
- start();
- }
- ]);
- });
-
-
-})( jQuery );
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Collapsible Integration Test</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../jquery.testHelper.js"></script>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="collapsible_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Collapsible Integration Test</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div data-nstest-role="page" id='basic-collapsible-test'>
- <div data-nstest-role="header">
- <h1>Basic collapsible</h1>
- </div>
- <div data-nstest-role="content">
- <div data-nstest-role="collapsible">
- <h3>Section A</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- <div data-nstest-role="collapsible" data-nstest-collapsed="false">
- <h3>Section B</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- </div>
-</div>
-
-<div data-nstest-role="page" id='basic-collapsible-set-test'>
- <div data-nstest-role="header">
- <h1>Basic collapsible</h1>
- </div>
- <div data-nstest-role="content">
- <div data-nstest-role="collapsible-set">
- <div data-nstest-role="collapsible">
- <h3>Section A</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- <div data-nstest-role="collapsible" data-nstest-collapsed="false">
- <h3>Section B</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- <div data-nstest-role="collapsible">
- <h3>Section C</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
-
- </div>
- </div>
- </div>
-</div>
-
-<div data-nstest-role="page" id='collapsible-set-with-lonely-collapsible-test'>
- <div data-nstest-role="header">
- <h1>Basic collapsible</h1>
- </div>
- <div data-nstest-role="content">
- <div data-nstest-role="collapsible-set">
- <div data-nstest-role="collapsible" >
- <h3>Section D</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
- </div>
- </div>
-
- <div data-nstest-role="collapsible" >
- <h3>Section E</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
- </div>
- </div>
-</div>
-
-<div data-nstest-role="page" id='collapsible-with-theming'>
- <div data-nstest-role="header">
- <h1>Themed collapsibles</h1>
- </div>
- <div data-nstest-role="content">
- <div data-nstest-role="collapsible" data-nstest-theme="a">
- <h3>Section A</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
- </div>
- <div data-nstest-role="collapsible" data-nstest-theme="b" data-nstest-content-theme="b">
- <h3>Section B</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
- </div>
- <div data-nstest-role="collapsible" data-nstest-theme="c" data-nstest-content-theme="c" data-nstest-collapsed="false">
- <h3>Section B</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
- </div>
-
- </div>
-</div>
-
-<div data-nstest-role="page" id='collapsible-set-with-theming'>
- <div data-nstest-role="header">
- <h1>Themed collapsibles</h1>
- </div>
- <div data-nstest-role="content">
- <div data-nstest-role="collapsible-set" data-nstest-theme="d" data-nstest-content-theme="d">
- <div data-nstest-role="collapsible" data-nstest-theme="a">
- <h3>Section A</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
- </div>
- <div data-nstest-role="collapsible" data-nstest-theme="b" data-nstest-content-theme="b">
- <h3>Section B</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
- </div>
- <div data-nstest-role="collapsible" data-nstest-collapsed="false">
- <h3>Section C</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
- </div>
- <div data-nstest-role="collapsible">
- <h3>Section D</h3>
-
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
- have the "collapsed" state; you need to expand the header to see me.</p>
- </div>
- </div>
-
- </div>
-</div>
-
-</body>
-</html>
+++ /dev/null
-/*
- * mobile checkboxradio unit tests
- */
-(function($){
- module( 'vertical controlgroup, no refresh' , {
- setup: function() {
- this.vcontrolgroup = $( "#vertical-controlgroup" );
- }
- });
-
- test( "vertical controlgroup classes", function() {
- var buttons = this.vcontrolgroup.find( ".ui-btn" ),
- middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
- length = buttons.length;
-
- ok( !buttons.hasClass( "ui-btn-corner-all" ), "no button should have class 'ui-btn-corner-all'");
- ok( buttons.first().hasClass( "ui-corner-top" ), "first button should have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
- ok( buttons.last().hasClass( "ui-corner-bottom"), "last button should have class 'ui-corner-bottom'" );
- });
-
- module( 'vertical controlgroup, refresh', {
- setup: function() {
- this.vcontrolgroup = $( "#vertical-controlgroup" );
- this.vcontrolgroup.find( ".ui-btn" ).show();
- this.vcontrolgroup.controlgroup();
- }
- });
-
- test( "vertical controlgroup after first button was hidden", function() {
- //https://github.com/jquery/jquery-mobile/issues/1929
-
- //We hide the first button and refresh
- this.vcontrolgroup.find( ".ui-btn" ).first().hide();
- this.vcontrolgroup.controlgroup();
-
- var buttons = this.vcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
- middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
- length = buttons.length;
-
- ok( buttons.first().hasClass( "ui-corner-top" ), "first visible button should have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
- ok( buttons.last().hasClass( "ui-corner-bottom"), "last visible button should have class 'ui-corner-bottom'" );
- });
-
- test( "vertical controlgroup after last button was hidden", function() {
- //https://github.com/jquery/jquery-mobile/issues/1929
-
- //We hide the last button and refresh
- this.vcontrolgroup.find( ".ui-btn" ).last().hide();
- this.vcontrolgroup.controlgroup();
-
- var buttons = this.vcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
- middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
- length = buttons.length;
-
- ok( buttons.first().hasClass( "ui-corner-top" ), "first visible button should have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
- ok( buttons.last().hasClass( "ui-corner-bottom"), "last visible button should have class 'ui-corner-bottom'" );
- });
-
- module( 'horizontal controlgroup, no refresh', {
- setup: function() {
- this.hcontrolgroup = $( "#horizontal-controlgroup" );
- }
- });
-
- test( "horizontal controlgroup classes", function() {
- var buttons = this.hcontrolgroup.find( ".ui-btn" ),
- middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
- length = buttons.length;
-
- ok( !buttons.hasClass( "ui-btn-corner-all" ), "no button should have class 'ui-btn-corner-all'");
- ok( buttons.first().hasClass( "ui-corner-left" ), "first button should have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
- ok( buttons.last().hasClass( "ui-corner-right"), "last button should have class 'ui-corner-right'" );
- });
-
- module( 'horizontal controlgroup, refresh', {
- setup: function() {
- this.hcontrolgroup = $( "#horizontal-controlgroup" );
- this.hcontrolgroup.find( ".ui-btn" ).show();
- this.hcontrolgroup.controlgroup();
- }
- });
-
- test( "horizontal controlgroup after first button was hidden", function() {
- //We hide the first button and refresh
- this.hcontrolgroup.find( ".ui-btn" ).first().hide();
- this.hcontrolgroup.controlgroup();
-
- var buttons = this.hcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
- middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
- length = buttons.length;
-
- ok( buttons.first().hasClass( "ui-corner-left" ), "first visible button should have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
- ok( buttons.last().hasClass( "ui-corner-right"), "last visible button should have class 'ui-corner-right'" );
- });
-
- test( "horizontal controlgroup after last button was hidden", function() {
- //We hide the last button and refresh
- this.hcontrolgroup.find( ".ui-btn" ).last().hide();
- this.hcontrolgroup.controlgroup();
-
- var buttons = this.hcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
- middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
- length = buttons.length;
-
- ok( buttons.first().hasClass( "ui-corner-left" ), "first visible button should have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
- ok( buttons.last().hasClass( "ui-corner-right"), "last visible button should have class 'ui-corner-right'" );
- });
-
-
- test( "controlgroups will create when inside a container that receives a 'create' event", function(){
- ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-controlgroup").length, "did not have enhancements applied" );
- ok( $("#enhancetest").trigger("create").find(".ui-controlgroup").length, "enhancements applied" );
- });
-
-
-
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
- <meta charset="UTF-8" />
- <title>jQuery Mobile Checkboxradio Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
-
- <link rel="stylesheet" href="../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="controlgroup_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Controlgroup Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div data-nstest-role="page">
- <div data-nstest-role="content">
-
- <div data-nstest-role="fieldcontain" id="radio-active-btn-test">
- <fieldset data-nstest-role="controlgroup" id="vertical-controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-pet-active-btn" id="radio-pet-1" value="choice-1" checked="checked" />
- <label for="radio-pet-1">Cat</label>
-
- <input type="radio" name="radio-pet-active-btn" id="radio-pet-2" value="choice-2" />
- <label for="radio-pet-2">Dog</label>
-
- <input type="radio" name="radio-pet-active-btn" id="radio-pet-3" value="choice-3" />
- <label for="radio-pet-3">Hamster</label>
-
- <input type="radio" name="radio-pet-active-btn" id="radio-pet-4" value="choice-4" />
- <label for="radio-pet-4">Lizard</label>
- </fieldset>
- </div>
-
- <div data-nstest-role="fieldcontain">
- <fieldset data-nstest-role="controlgroup" data-nstest-type="horizontal" id="horizontal-controlgroup">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
- <label for="checkbox-6">b</label>
-
- <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
- <label for="checkbox-7"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
- <label for="checkbox-8"><em>s</em></label>
-
- <input type="checkbox" name="checkbox-9" id="checkbox-9" class="custom" />
- <label for="checkbox-9">u</label>
- </fieldset>
- </div>
- </div>
-
-</div>
-
-
-
-
-
-
-<div data-nstest-role="fieldcontain" id="enhancetest">
- <fieldset data-nstest-role="controlgroup">
-
-
- </fieldset>
-</div>
-
-</body>
-</html>
+++ /dev/null
-/*
- * mobile core unit tests
- */
-
-(function($){
- var libName = "jquery.mobile.core.js",
- setGradeA = function(value, version) {
- $.support.mediaquery = value;
- $.mobile.browser.ie = version;
- },
- extendFn = $.extend;
-
- module(libName, {
- setup: function(){
- // NOTE reset for gradeA tests
- $('html').removeClass('ui-mobile');
-
- // NOTE reset for pageLoading tests
- $('.ui-loader').remove();
- },
- teardown: function(){
- $.extend = extendFn;
- }
- });
-
- $.testHelper.excludeFileProtocol(function(){
- test( "grade A browser either supports media queries or is IE 7+", function(){
- setGradeA(false, 6);
- $.testHelper.reloadLib(libName);
- ok(!$.mobile.gradeA());
-
- setGradeA(true, 8);
- $.testHelper.reloadLib(libName);
- ok($.mobile.gradeA());
- });
- });
-
- function clearNSNormalizeDictionary()
- {
- var dict = $.mobile.nsNormalizeDict;
- for ( var prop in dict ) {
- delete dict[ prop ];
- }
- }
-
- test( "$.mobile.nsNormalize works properly with namespace defined (test default)", function(){
- // Start with a fresh namespace property cache, just in case
- // the previous test mucked with namespaces.
- clearNSNormalizeDictionary();
-
- equal($.mobile.nsNormalize("foo"), "nstestFoo", "appends ns and initcaps");
- equal($.mobile.nsNormalize("fooBar"), "nstestFooBar", "leaves capped strings intact");
- equal($.mobile.nsNormalize("foo-bar"), "nstestFooBar", "changes dashed strings");
- equal($.mobile.nsNormalize("foo-bar-bak"), "nstestFooBarBak", "changes multiple dashed strings");
-
- // Reset the namespace property cache for the next test.
- clearNSNormalizeDictionary();
- });
-
- test( "$.mobile.nsNormalize works properly with an empty namespace", function(){
- var realNs = $.mobile.ns;
-
- $.mobile.ns = "";
-
- // Start with a fresh namespace property cache, just in case
- // the previous test mucked with namespaces.
- clearNSNormalizeDictionary();
-
- equal($.mobile.nsNormalize("foo"), "foo", "leaves uncapped and undashed");
- equal($.mobile.nsNormalize("fooBar"), "fooBar", "leaves capped strings intact");
- equal($.mobile.nsNormalize("foo-bar"), "fooBar", "changes dashed strings");
- equal($.mobile.nsNormalize("foo-bar-bak"), "fooBarBak", "changes multiple dashed strings");
-
- $.mobile.ns = realNs;
-
- // Reset the namespace property cache for the next test.
- clearNSNormalizeDictionary();
- });
-
- //data tests
- test( "$.fn.jqmData and $.fn.jqmRemoveData methods are working properly", function(){
- var data;
-
- same( $("body").jqmData("foo", true), $("body"), "setting data returns the element" );
-
- same( $("body").jqmData("foo"), true, "getting data returns the right value" );
-
- same( $("body").data($.mobile.nsNormalize("foo")), true, "data was set using namespace" );
-
- same( $("body").jqmData("foo", undefined), true, "getting data still returns the value if there's an undefined second arg" );
-
- data = $.extend( {}, $("body").data() );
- delete data[ $.expando ]; //discard the expando for that test
- same( data , { "nstestFoo": true }, "passing .data() no arguments returns a hash with all set properties" );
-
- same( $("body").jqmData(), undefined, "passing no arguments returns undefined" );
-
- same( $("body").jqmData(undefined), undefined, "passing a single undefined argument returns undefined" );
-
- same( $("body").jqmData(undefined, undefined), undefined, "passing 2 undefined arguments returns undefined" );
-
- same( $("body").jqmRemoveData("foo"), $("body"), "jqmRemoveData returns the element" );
-
- same( $("body").jqmData("foo"), undefined, "jqmRemoveData properly removes namespaced data" );
-
- });
-
-
- test( "$.jqmData and $.jqmRemoveData methods are working properly", function(){
- same( $.jqmData(document.body, "foo", true), true, "setting data returns the value" );
-
- same( $.jqmData(document.body, "foo"), true, "getting data returns the right value" );
-
- same( $.data(document.body, $.mobile.nsNormalize("foo")), true, "data was set using namespace" );
-
- same( $.jqmData(document.body, "foo", undefined), true, "getting data still returns the value if there's an undefined second arg" );
-
- same( $.jqmData(document.body), undefined, "passing no arguments returns undefined" );
-
- same( $.jqmData(document.body, undefined), undefined, "passing a single undefined argument returns undefined" );
-
- same( $.jqmData(document.body, undefined, undefined), undefined, "passing 2 undefined arguments returns undefined" );
-
- same( $.jqmRemoveData(document.body, "foo"), undefined, "jqmRemoveData returns the undefined value" );
-
- same( $("body").jqmData("foo"), undefined, "jqmRemoveData properly removes namespaced data" );
-
- });
-
- test( "addDependents works properly", function() {
- same( $("#parent").jqmData('dependents'), undefined );
- $( "#parent" ).addDependents( $("#dependent") );
- same( $("#parent").jqmData('dependents').length, 1 );
- });
-
- test( "removeWithDependents removes the parent element and ", function(){
- $( "#parent" ).addDependents( $("#dependent") );
- same($( "#parent, #dependent" ).length, 2);
- $( "#parent" ).removeWithDependents();
- same($( "#parent, #dependent" ).length, 0);
- });
-
- test( "$.fn.getEncodedText should return the encoded value where $.fn.text doesn't", function() {
- same( $("#encoded").text(), "foo>");
- same( $("#encoded").getEncodedText(), "foo>");
- same( $("#unencoded").getEncodedText(), "foo");
- });
-})(jQuery);
\ No newline at end of file
+++ /dev/null
-/*
- * mobile core unit tests
- */
-
-(function($){
- var libName = "jquery.mobile.core.js",
- scrollTimeout = 20, // TODO expose timing as an attribute
- scrollStartEnabledTimeout = 150;
-
- module(libName, {
- setup: function(){
- $("<div id='scroll-testing' style='height: 1000px'></div>").appendTo("body");
- },
-
- teardown: function(){
- $("#scroll-testing").remove();
- }
- });
-
- var scrollUp = function( pos ){
- $(window).scrollTop(1000);
- ok($(window).scrollTop() > 0, $(window).scrollTop());
- $.mobile.silentScroll(pos);
- };
-
- asyncTest( "silent scroll scrolls the page to the top by default", function(){
- scrollUp();
-
- setTimeout(function(){
- same($(window).scrollTop(), 0);
- start();
- }, scrollTimeout);
- });
-
- asyncTest( "silent scroll scrolls the page to the passed y position", function(){
- var pos = 10;
- scrollUp(pos);
-
- setTimeout(function(){
- same($(window).scrollTop(), pos);
- start();
- }, scrollTimeout);
- });
-
- test( "silent scroll is async", function(){
- scrollUp();
- ok($(window).scrollTop() != 0, "scrolltop position should not be zero");
- start();
- });
-
- asyncTest( "scrolling marks scrollstart as disabled for 150 ms", function(){
- $.event.special.scrollstart.enabled = true;
- scrollUp();
- ok(!$.event.special.scrollstart.enabled);
-
- setTimeout(function(){
- ok($.event.special.scrollstart.enabled);
- start();
- }, scrollStartEnabledTimeout);
- });
-
- //TODO test that silentScroll is called on window load
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Core Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../external/qunit.js"></script>
- <script src="../../../js/"></script>
- <!-- added explicitly for library reloading (see testHelper ) -->
- <script src="../../jquery.testHelper.js"></script>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../../external/qunit.css"/>
-
- <script src="core.js"></script>
- <script src="core_scroll.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Core Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div data-nstest-role="page">
-</div>
-
-<div id="qunit-fixtures">
- <div id="parent"></div>
- <div id="dependent"></div>
- <div id="encoded">foo></div>
- <div id="unencoded"><script>foo</script></div>
-</div>
-</body>
-</html>
+++ /dev/null
-/*
- * degradeInputs unit tests
- */
-
-(function($){
-
- module('jquery.mobile.slider.js');
-
- test('keepNative elements should not be degraded', function() {
- same($('input#not-to-be-degraded').attr("type"), "range");
- });
-
- test('should degrade input type to a different type, as specified in page options', function(){
- var degradeInputs = $.mobile.page.prototype.options.degradeInputs;
-
- expect( degradeInputs.length );
-
- $.each(degradeInputs, function( oldType, newType ) {
- if (newType === false) {
- newType = oldType;
- }
-
- $('#test-container').html('<input type="' + oldType + '" />').trigger("create");
-
- same($('#test-container input').attr("type"), newType);
- });
- });
-
-})(jQuery);
\ No newline at end of file
+++ /dev/null
- <!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Degrade Inputs Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
-
-
- <link rel="stylesheet" href="../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="degradeInputs.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Degrade Inputs Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="foo" data-nstest-role="page">
-
- <input id="not-to-be-degraded" type="range" data-nstest-role="nojs" />
-
- <div id="test-container">
- </div>
-
-</div>
-
-</html>
+++ /dev/null
-/*
- * mobile dialog unit tests
- */
-(function($) {
- module( "jquery.mobile.dialog.js", {
- setup: function() {
- $.mobile.page.prototype.options.contentTheme = "d";
- }
- });
-
- asyncTest( "dialog hash is added when the dialog is opened and removed when closed", function() {
- expect( 2 );
-
- $.testHelper.pageSequence([
- function() {
- $.mobile.changePage( $( "#mypage" ) );
- },
-
- function() {
- //bring up the dialog
- $( "#foo-dialog-link" ).click();
- },
-
- function() {
- var fooDialog = $( "#foo-dialog" );
-
- // make sure the dialog came up
- ok( /&ui-state=dialog/.test(location.hash), "ui-state=dialog =~ location.hash", "dialog open" );
-
- // close the dialog
- $( ".ui-dialog" ).dialog( "close" );
- },
-
- function() {
- ok( !/&ui-state=dialog/.test(location.hash), "ui-state=dialog !~ location.hash" );
- start();
- }
- ]);
- });
-
- asyncTest( "dialog element with no theming", function() {
- expect(4);
-
- $.testHelper.pageSequence([
- function() {
- $.mobile.changePage( $( "#mypage" ) );
- },
-
- function() {
- //bring up the dialog
- $( "#link-a" ).click();
- },
-
- function() {
- var dialog = $( "#dialog-a" );
-
- // Assert dialog theme inheritance (issue 1375):
- ok( dialog.hasClass( "ui-body-c" ), "Expected explicit theme ui-body-c" );
- ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
- ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
- ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
-
- start();
- }
- ]);
- });
-
- asyncTest( "dialog element with data-theme", function() {
- // Reset fallback theme for content
- $.mobile.page.prototype.options.contentTheme = null;
-
- expect(5);
-
- $.testHelper.pageSequence([
- function() {
- $.mobile.changePage( $( "#mypage" ) );
- },
-
- function() {
- //bring up the dialog
- $( "#link-b" ).click();
- },
-
- function() {
- var dialog = $( "#dialog-b" );
-
- // Assert dialog theme inheritance (issue 1375):
- ok( dialog.hasClass( "ui-body-e" ), "Expected explicit theme ui-body-e" );
- ok( !dialog.hasClass( "ui-overlay-b" ), "Expected no theme ui-overlay-b" );
- ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
- ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-e" ), "Expect content to inherit from data-theme" );
- ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
-
- start();
- }
- ]);
- });
-
- asyncTest( "dialog element with data-theme & data-overlay-theme", function() {
- expect(5);
-
- $.testHelper.pageSequence([
- function() {
- $.mobile.changePage( $( "#mypage" ) );
- },
-
- function() {
- //bring up the dialog
- $( "#link-c" ).click();
- },
-
- function() {
- var dialog = $( "#dialog-c" );
-
- // Assert dialog theme inheritance (issue 1375):
- ok( dialog.hasClass( "ui-body-e" ), "Expected explicit theme ui-body-e" );
- ok( dialog.hasClass( "ui-overlay-b" ), "Expected explicit theme ui-overlay-b" );
- ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
- ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
- ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
-
- start();
- }
- ]);
- });
-})( jQuery );
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Dialog Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script>
- $(document).bind('mobileinit',function(){
- // Expect content to inherit this theme when not explicitly set
- $.mobile.page.prototype.options.contentTheme = "d";
- });
- </script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
-
-
- <link rel="stylesheet" href="../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="dialog_events.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Dialog Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="mypage" data-nstest-role="page" data-nstest-theme="a">
- <a href="#foo-dialog" id="foo-dialog-link" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog"></a>
- <a href="#dialog-a" id="link-a" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">no theme set</a>
- <a href="#dialog-b" id="link-b" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">data-theme set</a>
- <a href="#dialog-c" id="link-c" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">data-theme & data-nstest-overlay-theme set</a>
-</div>
-
-<div id="foo-dialog" data-nstest-role="dialog" data-nstest-theme="b">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Dialog</h1>
- </div>
- <div data-nstest-role="content" >
- <a href="#" id="internal-link">foo</a>
- </div>
- <div data-nstest-role="footer">
- footer
- </div>
-</div>
-
-<div data-nstest-role="page" id="dialog-a">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1> No theme set </h1>
- </div>
- <div data-nstest-role="content">
- Some text here....
- </div>
- <div data-nstest-role="footer">
- footer
- </div>
-</div>
-
-<div data-nstest-role="page" data-nstest-theme="e" id="dialog-b">
- <div data-nstest-role="header">
- <h1> data-nstest-theme set </h1>
- </div>
- <div data-nstest-role="content">
- Some text here....
- </div>
- <div data-nstest-role="footer">
- footer
- </div>
-</div>
-
-<div data-nstest-role="page" id="dialog-c" data-nstest-overlay-theme="b" data-nstest-theme="e">
- <div data-nstest-role="header">
- <h1> data-nstest-theme & data-nstest-overlay-theme set </h1>
- </div>
- <div data-nstest-role="content">
- Some text here....
- </div>
- <div data-nstest-role="footer">
- footer
- </div>
-</div>
-
-</body>
-</html>
+++ /dev/null
-/*
- * mobile event unit tests
- */
-
-(function($){
- var libName = "jquery.mobile.event.js",
- absFn = Math.abs,
- originalEventFn = $.Event.prototype.originalEvent,
- preventDefaultFn = $.Event.prototype.preventDefault,
- events = ("touchstart touchmove touchend orientationchange tap taphold " +
- "swipe swipeleft swiperight scrollstart scrollstop").split( " " );
-
- module(libName, {
- setup: function(){
-
- // ensure bindings are removed
- $.each(events + "vmouseup vmousedown".split(" "), function(i, name){
- $("#qunit-fixture").unbind();
- });
-
- //NOTE unmock
- Math.abs = absFn;
- $.Event.prototype.originalEvent = originalEventFn;
- $.Event.prototype.preventDefault = preventDefaultFn;
-
- // make sure the event objects respond to touches to simulate
- // the collections existence in non touch enabled test browsers
- $.Event.prototype.touches = [{pageX: 1, pageY: 1 }];
-
- $($.mobile.pageContainer).unbind( "throttledresize" );
- }
- });
-
- $.testHelper.excludeFileProtocol(function(){
- test( "new events defined on the jquery object", function(){
- $.each(events, function( i, name ) {
- delete $.fn[name];
- same($.fn[name], undefined);
- });
-
- $.testHelper.reloadLib(libName);
-
- $.each(events, function( i, name ) {
- ok($.fn[name] !== undefined, name + " is not undefined");
- });
- });
- });
-
- asyncTest( "defined event functions bind a closure when passed", function(){
- expect( 1 );
-
- $('#qunit-fixture').bind(events[0], function(){
- ok(true, "event fired");
- start();
- });
-
- $('#qunit-fixture').trigger(events[0]);
- });
-
- asyncTest( "defined event functions trigger the event with no arguments", function(){
- expect( 1 );
-
- $('#qunit-fixture').bind('touchstart', function(){
- ok(true, "event fired");
- start();
- });
-
- $('#qunit-fixture').touchstart();
- });
-
- test( "defining event functions sets the attrFn to true", function(){
- $.each(events, function(i, name){
- ok($.attrFn[name], "attribute function is true");
- });
- });
-
- test( "scrollstart enabled defaults to true", function(){
- $.event.special.scrollstart.enabled = false;
- $.testHelper.reloadLib(libName);
- ok($.event.special.scrollstart.enabled, "scrollstart enabled");
- });
-
- asyncTest( "scrollstart setup binds a function that returns when its disabled", function(){
- expect( 1 );
- $.event.special.scrollstart.enabled = false;
-
- $( "#qunit-fixture" ).bind("scrollstart", function(){
- ok(false, "scrollstart fired");
- });
-
- $( "#qunit-fixture" ).bind("touchmove", function(){
- ok(true, "touchmove fired");
- start();
- });
-
- $( "#qunit-fixture" ).trigger("touchmove");
- });
-
- asyncTest( "scrollstart setup binds a function that triggers scroll start when enabled", function(){
- $.event.special.scrollstart.enabled = true;
-
- $( "#qunit-fixture" ).bind("scrollstart", function(){
- ok(true, "scrollstart fired");
- start();
- });
-
- $( "#qunit-fixture" ).trigger("touchmove");
- });
-
- asyncTest( "scrollstart setup binds a function that triggers scroll stop after 50 ms", function(){
- var triggered = false;
- $.event.special.scrollstart.enabled = true;
-
- $( "#qunit-fixture" ).bind("scrollstop", function(){
- triggered = true;
- });
-
- ok(!triggered, "not triggered");
-
- $( "#qunit-fixture" ).trigger("touchmove");
-
- setTimeout(function(){
- ok(triggered, "triggered");
- start();
- }, 50);
- });
-
- var forceTouchSupport = function(){
- $.support.touch = true;
- $.testHelper.reloadLib(libName);
-
- //mock originalEvent information
- $.Event.prototype.originalEvent = {
- touches: [{ 'pageX' : 0 }, { 'pageY' : 0 }]
- };
- };
-
- asyncTest( "long press fires tap hold after 750 ms", function(){
- var taphold = false;
-
- forceTouchSupport();
-
- $( "#qunit-fixture" ).bind("taphold", function(){
- taphold = true;
- });
-
- $( "#qunit-fixture" ).trigger("vmousedown");
-
- setTimeout(function(){
- ok(taphold);
- start();
- }, 751);
- });
-
- //NOTE used to simulate movement when checked
- //TODO find a better way ...
- var mockAbs = function(value){
- Math.abs = function(){
- return value;
- };
- };
-
- asyncTest( "move prevents taphold", function(){
- expect( 1 );
- var taphold = false;
-
- forceTouchSupport();
- mockAbs(100);
-
- //NOTE record taphold event
- $( "#qunit-fixture" ).bind("taphold", function(){
- ok(false, "taphold fired");
- taphold = true;
- });
-
- //NOTE start the touch events
- $( "#qunit-fixture" ).trigger("vmousedown");
-
- //NOTE fire touchmove to push back taphold
- setTimeout(function(){
- $( "#qunit-fixture" ).trigger("vmousecancel");
- }, 100);
-
- //NOTE verify that the taphold hasn't been fired
- // with the normal timing
- setTimeout(function(){
- ok(!taphold, "taphold not fired");
- start();
- }, 751);
- });
-
- asyncTest( "tap event fired without movement", function(){
- expect( 1 );
- var tap = false,
- checkTap = function(){
- ok(true, "tap fired");
- };
-
- forceTouchSupport();
-
- //NOTE record the tap event
- $( "#qunit-fixture" ).bind("tap", checkTap);
-
- $( "#qunit-fixture" ).trigger("vmousedown");
- $( "#qunit-fixture" ).trigger("vmouseup");
- $( "#qunit-fixture" ).trigger("vclick");
-
- setTimeout(function(){
- start();
- }, 400);
- });
-
- asyncTest( "tap event not fired when there is movement", function(){
- expect( 1 );
- var tap = false;
- forceTouchSupport();
-
- //NOTE record tap event
- $( "#qunit-fixture" ).bind("tap", function(){
- ok(false, "tap fired");
- tap = true;
- });
-
- //NOTE make sure movement is recorded
- mockAbs(100);
-
- //NOTE start and move right away
- $( "#qunit-fixture" ).trigger("touchstart");
- $( "#qunit-fixture" ).trigger("touchmove");
-
- //NOTE end touch sequence after 20 ms
- setTimeout(function(){
- $( "#qunit-fixture" ).trigger("touchend");
- }, 20);
-
- setTimeout(function(){
- ok(!tap, "not tapped");
- start();
- }, 40);
- });
-
- asyncTest( "tap event propagates up DOM tree", function(){
- var tap = 0,
- $qf = $( "#qunit-fixture" ),
- $doc = $( document ),
- docTapCB = function(){
- same(++tap, 2, "document tap callback called once after #qunit-fixture callback");
- };
-
- $qf.bind( "tap", function() {
- same(++tap, 1, "#qunit-fixture tap callback called once");
- });
-
- $doc.bind( "tap", docTapCB );
-
- $qf.trigger( "vmousedown" )
- .trigger( "vmouseup" )
- .trigger( "vclick" );
-
- // tap binding should be triggered twice, once for
- // #qunit-fixture, and a second time for document.
- same( tap, 2, "final tap callback count is 2" );
-
- $doc.unbind( "tap", docTapCB );
-
- start();
- });
-
- asyncTest( "stopPropagation() prevents tap from propagating up DOM tree", function(){
- var tap = 0,
- $qf = $( "#qunit-fixture" ),
- $doc = $( document ),
- docTapCB = function(){
- ok(false, "tap should NOT be triggered on document");
- };
-
- $qf.bind( "tap", function(e) {
- same(++tap, 1, "tap callback 1 triggered once on #qunit-fixture");
- e.stopPropagation();
- })
- .bind( "tap", function(e) {
- same(++tap, 2, "tap callback 2 triggered once on #qunit-fixture");
- });
-
- $doc.bind( "tap", docTapCB);
-
- $qf.trigger( "vmousedown" )
- .trigger( "vmouseup" )
- .trigger( "vclick" );
-
- // tap binding should be triggered twice.
- same( tap, 2, "final tap count is 2" );
-
- $doc.unbind( "tap", docTapCB );
-
- start();
- });
-
- asyncTest( "stopImmediatePropagation() prevents tap propagation and execution of 2nd handler", function(){
- var tap = 0,
- $cf = $( "#qunit-fixture" );
- $doc = $( document ),
- docTapCB = function(){
- ok(false, "tap should NOT be triggered on document");
- };
-
- // Bind 2 tap callbacks on qunit-fixture. Only the first
- // one should ever be called.
- $cf.bind( "tap", function(e) {
- same(++tap, 1, "tap callback 1 triggered once on #qunit-fixture");
- e.stopImmediatePropagation();
- })
- .bind( "tap", function(e) {
- ok(false, "tap callback 2 should NOT be triggered on #qunit-fixture");
- });
-
- $doc.bind( "tap", docTapCB);
-
- $cf.trigger( "vmousedown" )
- .trigger( "vmouseup" )
- .trigger( "vclick" );
-
- // tap binding should be triggered once.
- same( tap, 1, "final tap count is 1" );
-
- $doc.unbind( "tap", docTapCB );
-
- start();
- });
-
- var swipeTimedTest = function(opts){
- var swipe = false;
-
- forceTouchSupport();
-
- $( "#qunit-fixture" ).bind('swipe', function(){
- swipe = true;
- });
-
- //NOTE bypass the trigger source check
- $.Event.prototype.originalEvent = {
- touches: false
- };
-
- $( "#qunit-fixture" ).trigger("touchstart");
-
- //NOTE make sure the coordinates are calculated within range
- // to be registered as a swipe
- mockAbs(opts.coordChange);
-
- setTimeout(function(){
- $( "#qunit-fixture" ).trigger("touchmove");
- $( "#qunit-fixture" ).trigger("touchend");
- }, opts.timeout + 100);
-
- setTimeout(function(){
- same(swipe, opts.expected, "swipe expected");
- start();
- }, opts.timeout + 200);
-
- stop();
- };
-
- test( "swipe fired when coordinate change in less than a second", function(){
- swipeTimedTest({ timeout: 10, coordChange: 35, expected: true });
- });
-
- test( "swipe not fired when coordinate change takes more than a second", function(){
- swipeTimedTest({ timeout: 1000, coordChange: 35, expected: false });
- });
-
- test( "swipe not fired when coordinate change <= 30", function(){
- swipeTimedTest({ timeout: 1000, coordChange: 30, expected: false });
- });
-
- test( "swipe not fired when coordinate change >= 75", function(){
- swipeTimedTest({ timeout: 1000, coordChange: 75, expected: false });
- });
-
- asyncTest( "scrolling prevented when coordinate change > 10", function(){
- expect( 1 );
-
- forceTouchSupport();
-
- // ensure the swipe custome event is setup
- $( "#qunit-fixture" ).bind('swipe', function(){});
-
- //NOTE bypass the trigger source check
- $.Event.prototype.originalEvent = {
- touches: false
- };
-
- $.Event.prototype.preventDefault = function(){
- ok(true, "prevent default called");
- start();
- };
-
- mockAbs(11);
-
- $( "#qunit-fixture" ).trigger("touchstart");
- $( "#qunit-fixture" ).trigger("touchmove");
- });
-
- asyncTest( "move handler returns when touchstart has been fired since touchstop", function(){
- expect( 1 );
-
- // bypass triggered event check
- $.Event.prototype.originalEvent = {
- touches: false
- };
-
- forceTouchSupport();
-
- // ensure the swipe custome event is setup
- $( "#qunit-fixture" ).bind('swipe', function(){});
-
- $( "#qunit-fixture" ).trigger("touchstart");
- $( "#qunit-fixture" ).trigger("touchend");
-
- $( "#qunit-fixture" ).bind("touchmove", function(){
- ok(true, "touchmove bound functions are fired");
- start();
- });
-
- Math.abs = function(){
- ok(false, "shouldn't compare coordinates");
- };
-
- $( "#qunit-fixture" ).trigger("touchmove");
- });
-
- var nativeSupportTest = function(opts){
- $.support.orientation = opts.orientationSupport;
- same($.event.special.orientationchange[opts.method](), opts.returnValue);
- };
-
- test( "orientation change setup should do nothing when natively supported", function(){
- nativeSupportTest({
- method: 'setup',
- orientationSupport: true,
- returnValue: false
- });
- });
-
- test( "orientation change setup should bind resize when not supported natively", function(){
- nativeSupportTest({
- method: 'setup',
- orientationSupport: false,
- returnValue: undefined //NOTE result of bind function call
- });
- });
-
- test( "orientation change teardown should do nothing when natively supported", function(){
- nativeSupportTest({
- method: 'teardown',
- orientationSupport: true,
- returnValue: false
- });
- });
-
- test( "orientation change teardown should unbind resize when not supported natively", function(){
- nativeSupportTest({
- method: 'teardown',
- orientationSupport: false,
- returnValue: undefined //NOTE result of unbind function call
- });
- });
-
- /* The following 4 tests are async so that the throttled event triggers don't interfere with subsequent tests */
-
- asyncTest( "throttledresize event proxies resize events", function(){
- $( window ).one( "throttledresize", function(){
- ok( true, "throttledresize called");
- start();
- });
-
- $( window ).trigger( "resize" );
- });
-
- asyncTest( "throttledresize event prevents resize events from firing more frequently than 250ms", function(){
- var called = 0;
-
- $(window).bind( "throttledresize", function(){
- called++;
- });
-
- // NOTE 250 ms * 3 = 750ms which is plenty of time
- // for the events to trigger before the next test, but
- // not so much time that the second resize will be triggered
- // before the call to same() is made
- $.testHelper.sequence([
- function(){
- $(window).trigger( "resize" ).trigger( "resize" );
- },
-
- // verify that only one throttled resize was called after 250ms
- function(){ same( called, 1 ); },
-
- function(){
- start();
- }
- ], 250);
- });
-
- asyncTest( "throttledresize event promises that a held call will execute only once after throttled timeout", function(){
- var called = 0;
-
- expect( 2 );
-
- $.testHelper.eventSequence( "throttledresize", [
- // ignore the first call
- $.noop,
-
- function(){
- ok( true, "second throttled resize should run" );
- },
-
- function(timedOut){
- ok( timedOut, "third throttled resize should not run");
- start();
- }
- ]);
-
- $.mobile.pageContainer
- .trigger( "resize" )
- .trigger( "resize" )
- .trigger( "resize" );
- });
-
- asyncTest( "mousedown mouseup and click events should add a which when its not defined", function() {
- var whichDefined = function( event ){
- same(event.which, 1);
- };
-
- $( document ).bind( "vclick", whichDefined);
- $( document ).trigger( "click" );
-
- $( document ).bind( "vmousedown", whichDefined);
- $( document ).trigger( "mousedown" );
-
- $( document ).bind( "vmouseup", function( event ){
- same(event.which, 1);
- start();
- });
-
- $( document ).trigger( "mouseup" );
- });
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Event Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
- <script src="../../../js/jquery.mobile.event.js"></script>
- <script src="../../../js/"></script>
-
-
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="event_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Event Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="qunit-fixture"></div>
-
-<div id="foo" data-nstest-role="page">
- <a href="#bar" data-nstest-transition="flip"></a>
-</div>
-
-</body>
-</html>
+++ /dev/null
-/*
- * mobile dialog unit tests
- */
-(function($){
- module('jquery.mobile.fieldContain.js');
-
- test( "Field container contains appropriate css styles", function(){
- ok($('#test-fieldcontain').hasClass('ui-field-contain ui-body ui-br'), 'A fieldcontain element must contain styles "ui-field-contain ui-body ui-br"');
- });
-
- test( "Field container will create when inside a container that receives a 'create' event", function(){
- ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-field-contain").length, "did not have enhancements applied" );
- ok( $("#enhancetest").trigger("create").find(".ui-field-contain").length, "enhancements applied" );
- });
-
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8" />
- <title>jQuery Mobile FieldContain Integration Test</title>
-
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
-
-
- <link rel="stylesheet" href="../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="fieldContain_events.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile FieldContainer Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div data-nstest-role="page">
-
- <!-- Basic fieldcontain test -->
- <div id="test-fieldcontain" data-nstest-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" />
- </div>
-
-</div>
-
-<div id="enhancetest">
-<div data-nstest-role="fieldcontain">
-</div>
-</div>
-
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <link rel="stylesheet" href="../../external/qunit.css" />
- <script src="../../js/jquery.js"></script>
- <script src="../../external/qunit.js"></script>
- <script src="runner.js"></script>
- <style type="text/css">
- html, body {
- width:100%;
- height:100%;
- margin:0px;
- padding:0px;
- }
-
- #testFrame {
- float: left;
- border: 0px;
- height: 100%;
- width: 60%;
- }
-
- #results {
- float: left;
- width: 30%;
- }
- </style>
-</head>
-<body>
- <div id="results">
- <h1 id="qunit-header"><a href="#">jQuery Mobile Test Suite</a></h1>
- <h2 id="qunit-banner"></h2>
- <ol id="qunit-tests">
- </ol>
- </div>
- <iframe data-src="../../tests/unit/{{testdir}}" name="testFrame" id="testFrame" scrolling="no">
- </iframe>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8" />
- <title>jQuery Mobile Init Test Suite</title>
- <!-- meta viewport left out on purpose for test append -->
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../external/qunit.js"></script>
- <script src="../../jquery.testHelper.js"></script>
- <script src="init_core.js"></script>
- <!-- added explicitly for library reloading (see testHelper ) -->
- <script src="../../../js/jquery.mobile.core.js"></script>
- <script src="../../../js/jquery.mobile.init.js"></script>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../../external/qunit.css"/>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Init Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div data-nstest-role="page" id="foo">
-</div>
-
-<div data-nstest-role="page" id="bar" data-nstest-url="bak">
-</div>
-
-</body>
-</html>
+++ /dev/null
-/*
- * mobile init tests
- */
-(function($){
- var mobilePage = undefined,
- libName = 'jquery.mobile.init.js',
- coreLib = 'jquery.mobile.core.js',
- extendFn = $.extend,
- setGradeA = function(value) { $.mobile.gradeA = function(){ return value; }; },
- reloadCoreNSandInit = function(){
- $.testHelper.reloadLib(coreLib);
- $.testHelper.reloadLib("jquery.setNamespace.js");
- $.testHelper.reloadLib(libName);
- };
-
-
- module(libName, {
- setup: function(){
- // NOTE reset for gradeA tests
- $('html').removeClass('ui-mobile');
-
- // TODO add post reload callback
- $('.ui-loader').remove();
- },
- teardown: function(){
- $.extend = extendFn;
-
- // NOTE reset for showPageLoadingMsg/hidePageLoadingMsg tests
- $('.ui-loader').remove();
-
- // clear the classes added by reloading the init
- $("html").attr('class', '');
- }
- });
-
- // NOTE important to use $.fn.one here to make sure library reloads don't fire
- // the event before the test check below
- $(document).one("mobileinit", function(){
- mobilePage = $.mobile.page;
- });
-
- // NOTE for the following two tests see index html for the binding
- test( "mobile.page is available when mobile init is fired", function(){
- ok( mobilePage !== undefined, "$.mobile.page is defined" );
- });
-
- $.testHelper.excludeFileProtocol(function(){
- asyncTest( "loading the init library triggers mobilinit on the document", function(){
- var initFired = false;
- expect( 1 );
-
- $(window.document).one('mobileinit', function(event){
- initFired = true;
- });
-
- $.testHelper.reloadLib(libName);
-
- setTimeout(function(){
- ok(initFired, "init fired");
- start();
- }, 1000);
- });
-
- test( "enhancments are skipped when the browser is not grade A", function(){
- setGradeA(false);
- $.testHelper.reloadLib(libName);
-
- //NOTE easiest way to check for enhancements, not the most obvious
- ok(!$("html").hasClass("ui-mobile"), "html elem doesn't have class ui-mobile");
- });
-
- test( "enhancments are added when the browser is grade A", function(){
- setGradeA(true);
- $.testHelper.reloadLib(libName);
-
- ok($("html").hasClass("ui-mobile"), "html elem has class mobile");
- });
-
- asyncTest( "useFastClick is configurable via mobileinit", function(){
- $(document).one( "mobileinit", function(){
- $.mobile.useFastClick = false;
- start();
- });
-
- $.testHelper.reloadLib(libName);
-
- same( $.mobile.useFastClick, false , "fast click is set to false after init" );
- $.mobile.useFastClick = true;
- });
-
-
-
- var findFirstPage = function() {
- return $(":jqmData(role='page')").first();
- };
-
- test( "active page and start page should be set to the fist page in the selected set", function(){
- expect( 2 );
- $.testHelper.reloadLib(libName);
- var firstPage = findFirstPage();
-
- same($.mobile.firstPage[0], firstPage[0]);
- same($.mobile.activePage[0], firstPage[0]);
- });
-
- test( "mobile viewport class is defined on the first page's parent", function(){
- expect( 1 );
- $.testHelper.reloadLib(libName);
- var firstPage = findFirstPage();
-
- ok(firstPage.parent().hasClass("ui-mobile-viewport"), "first page has viewport");
- });
-
- test( "mobile page container is the first page's parent", function(){
- expect( 1 );
- $.testHelper.reloadLib(libName);
- var firstPage = findFirstPage();
-
- same($.mobile.pageContainer[0], firstPage.parent()[0]);
- });
-
- asyncTest( "hashchange triggered on document ready with single argument: true", function(){
- $.testHelper.sequence([
- function(){
- location.hash = "#foo";
- },
-
- // delay the bind until the first hashchange
- function(){
- $(window).one("hashchange", function(ev, arg){
- same(arg, true);
- start();
- });
- },
-
- function(){
- $.testHelper.reloadLib(libName);
- }
- ], 1000);
- });
-
- test( "pages without a data-url attribute have it set to their id", function(){
- same($("#foo").jqmData('url'), "foo");
- });
-
- test( "pages with a data-url attribute are left with the original value", function(){
- same($("#bar").jqmData('url'), "bak");
- });
-
- asyncTest( "showPageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
- expect( 1 );
- $.mobile.loadingMessage = false;
- $.mobile.showPageLoadingMsg();
-
- setTimeout(function(){
- ok(!$(".ui-loader").length, "no ui-loader element");
- start();
- }, 500);
- });
-
- asyncTest( "hidePageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
- expect( 1 );
- $.mobile.loadingMessage = true;
- $.mobile.hidePageLoadingMsg();
-
- setTimeout(function(){
- same($(".ui-loading").length, 0, "page should not be in the loading state");
- start();
- }, 500);
- });
-
- asyncTest( "showPageLoadingMsg adds the dialog to the page when loadingMessage is true", function(){
- expect( 1 );
- $.mobile.loadingMessage = true;
- $.mobile.showPageLoadingMsg();
-
- setTimeout(function(){
- same($(".ui-loading").length, 1, "page should be in the loading state");
- start();
- }, 500);
- });
-
- asyncTest( "page loading should contain default loading message", function(){
- expect( 1 );
- reloadCoreNSandInit();
- $.mobile.showPageLoadingMsg();
-
- setTimeout(function(){
- same($(".ui-loader h1").text(), "loading");
- start();
- }, 500);
- });
-
- asyncTest( "page loading should contain custom loading message", function(){
- $.mobile.loadingMessage = "foo";
- $.testHelper.reloadLib(libName);
- $.mobile.showPageLoadingMsg();
-
- setTimeout(function(){
- same($(".ui-loader h1").text(), "foo");
- start();
- }, 500);
- });
-
- asyncTest( "page loading should contain custom loading message when set during runtime", function(){
- $.mobile.loadingMessage = "bar";
- $.mobile.showPageLoadingMsg();
-
- setTimeout(function(){
- same($(".ui-loader h1").text(), "bar");
- start();
- }, 500);
- });
-
-
-
- // NOTE: the next two tests work on timeouts that assume a page will be created within 2 seconds
- // it'd be great to get these using a more reliable callback or event
-
- asyncTest( "page does auto-initialize at domready when autoinitialize option is true (default) ", function(){
-
- $( "<div />", { "data-nstest-role": "page", "id": "autoinit-on" } ).prependTo( "body" )
-
- $(document).one("mobileinit", function(){
- $.mobile.autoInitializePage = true;
- });
-
- location.hash = "";
-
- reloadCoreNSandInit();
-
- setTimeout(function(){
- same( $( "#autoinit-on.ui-page" ).length, 1 );
-
- start();
- }, 2000);
- });
-
-
- asyncTest( "page does not initialize at domready when autoinitialize option is false ", function(){
- $(document).one("mobileinit", function(){
- $.mobile.autoInitializePage = false;
- });
-
- $( "<div />", { "data-nstest-role": "page", "id": "autoinit-off" } ).prependTo( "body" )
-
- location.hash = "";
-
-
- reloadCoreNSandInit();
-
- setTimeout(function(){
- same( $( "#autoinit-off.ui-page" ).length, 0 );
-
- $(document).bind("mobileinit", function(){
- $.mobile.autoInitializePage = true;
- });
-
- reloadCoreNSandInit();
-
- start();
- }, 2000);
- });
-
-
-
- });
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8" />
- <title>jQuery Mobile Init Test Suite</title>
- <!-- meta viewport left out on purpose for test append -->
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../external/qunit.js"></script>
- <script src="../../jquery.testHelper.js"></script>
- <script src="init_core_nopage.js"></script>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../swarminject.js"></script>
-
- <style>
- [data-nstest-role="page"], [data-nstest-role="dialog"] {
- position: static !important;
- }
- </style>
-</head>
-
-<h1 id="qunit-header">jQuery Mobile Init Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Listview Integration Test</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../jquery.testHelper.js"></script>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="listview_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Listview Integration Test</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<!-- Basic Linked view test -->
-<div data-nstest-role="page" id='basic-linked-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Basic List View</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview">
- <li><a href="#basic-link-results">Home</a></li>
- <li><a href="#basic-link-results">Back</a></li>
- <li><a href="#basic-link-results">Return</a></li>
- <li><a href="#nested-list-test" id="nested-list-test-anchor">Nested List Test</a></li>
- </ul>
- </div>
- <a href="cache-tests/nested.html" id="cached-tests"></a>
-</div>
-
-<div data-nstest-role='page' id='basic-link-results'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Results</h1>
- </div>
-</div>
-
-<!-- Nested List -->
-<div data-nstest-role="page" id='nested-list-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Basic List View</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview">
- <li>Groups of animals
- <ul>
- <li>pod of whales</li>
- <li>quiver of cobras</li>
- <li>troop of baboons</li>
- </ul>
- </li>
- <li class="linebreaknode">
-
- More animals
-
-
- <ul>
- <li>Shoal of Bass</li>
- <li>Rhumba of rattlesnakes</li>
- </ul>
- </li>
- </ul>
- </div>
-</div>
-
-
-<div data-nstest-role="page" id='nested-lists-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Basic multiple lists view</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview" data-nstest-inset="true">
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3
- <ul data-nstest-role="listview">
- <li>Item A-3-0</li>
- <li>Item A-3-1</li>
- <li>Item A-3-2</li>
- </ul>
- </li>
- </ul>
- <ul data-nstest-role="listview" data-nstest-inset="true">
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3
- <ul data-nstest-role="listview">
- <li>Item B-3-0
- <ul data-nstest-role="listview">
- <li>Item B-3-0-0</li>
- <li>Item B-3-0-1
- <ul data-nstest-role="listview">
- <li>Item B-3-0-1-0</li>
- <li>Item B-3-0-1-1</li>
- <li>Item B-3-0-1-2</li>
- </ul>
- </li>
- <li>Item B-3-0-2</li>
- </ul>
- </li>
- <li>Item B-3-1
- <ul data-nstest-role="listview">
- <li>Item B-3-1-0</li>
- <li>Item B-3-1-1</li>
- <li>Item B-3-1-2</li>
- </ul>
- </li>
- <li>Item B-3-2</li>
- </ul>
- </li>
- </ul>
- </div>
-</div>
-
-<!-- Numbered List -->
-<div data-nstest-role="page" id='numbered-list-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Basic List View</h1>
- </div>
- <div data-nstest-role="content">
- <ol data-nstest-role="listview">
- <li><a href="#numbered-list-results">Number 1</a></li>
- <li><a href="#numbered-list-results">Number 2</a></li>
- <li><a href="#numbered-list-results">Number 3</a></li>
- </ol>
- </div>
-</div>
-
-<div data-nstest-role='page' id='numbered-list-results'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Numbered List</h1>
- </div>
-</div>
-
-<!-- Read only List -->
-<div data-nstest-role="page" id='read-only-list-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Basic List View</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview">
- <li>Read</li>
- <li>Only</li>
- <li>List</li>
- <li>View</li>
- </ul>
- </div>
-</div>
-
-<!-- Split listview -->
-<div data-nstest-role="page" id='split-list-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Split List View</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview">
- <li>
- <a href="#split-list-link1">link one</a>
- <a href="#split-list-link2">link second</a>
- </li>
- <li>
- <a href="#split-list-link1">link one</a>
- <a href="#split-list-link2">link second</a>
- </li>
- <li>
- <a href="#split-list-link1">link one</a>
- <a href="#split-list-link2">link second</a>
- </li>
- </ul>
- </div>
-</div>
-
-<div data-nstest-role="page" id='split-list-link1'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Split List view 1</h1>
- </div>
-</div>
-
-<div data-nstest-role="page" id='split-list-link2'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Split List view 2</h1>
- </div>
-</div>
-
-<!-- List divider -->
-<div data-nstest-role="page" id='list-divider-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>List Divider Test</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview">
- <li>a is for aquaman</li>
- <li>b is for batman</li>
- <li data-nstest-role="list-divider">This is a list divider</li>
- <li>c is for catwoman</li>
- <li data-nstest-role="list-divider">This is another list divider</li>
- <li>d is for darkwing</li>
- </ul>
- </div>
-</div>
-
-<!-- Search bar filter -->
-<div data-nstest-role="page" id='search-filter-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Split List View</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview" data-nstest-filter="true">
- <li>a is for aquaman</li>
- <li>b is for batman</li>
- <li>c is for catwoman</li>
- <li>d is for darkwing</li>
- </ul>
- </div>
-</div>
-
-<!-- Search bar filter with list-dividers -->
-<div data-nstest-role="page" id='search-filter-with-dividers-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Split List View</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview" data-nstest-filter="true">
- <li data-nstest-role="list-divider">a</li>
- <li>a is for aquaman</li>
- <li data-nstest-role="list-divider">b</li>
- <li>b is for batman</li>
- <li data-nstest-role="list-divider">c</li>
- <li>c is for catwoman</li>
- <li data-nstest-role="list-divider">d</li>
- <li>d is for darkwing</li>
- </ul>
- </div>
-</div>
-
-<!-- Search bar filter inset -->
-<div data-nstest-role="page" id='search-filter-inset-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Inset Filter List View</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview" data-nstest-filter="true" data-nstest-inset="true">
- <li>a is for aquaman</li>
- <li>b is for batman</li>
- <li>c is for catwoman</li>
- <li>d is for darkwing</li>
- </ul>
- </div>
-</div>
-
-<!-- Programmatically generated list items !-->
-<div data-nstest-role="page" id="programmatically-generated-list">
- <ul data-nstest-role="listview" data-nstest-inset="true" id="programmatically-generated-list-items"></ul>
-</div>
-
-<!-- Removing items from list -->
-<div data-nstest-role="page" id='removing-items-from-list-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Basic List View</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview" data-nstest-inset="true">
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3</li>
- <li>Item 4</li>
- </ul>
- </div>
-</div>
-
-<!-- Rounded corners inset list with variable items -->
-<div data-nstest-role="page" id='corner-rounded-test'>
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Basic List View</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview" data-nstest-inset="true">
- </ul>
- </div>
-</div>
-
-<div data-nstest-role="page" id="enhancetest">
- <ul data-nstest-role="listview">
- <li><a href="#basic-link-results">Home</a></li>
- <li><a href="#basic-link-results">Back</a></li>
- <li><a href="#basic-link-results">Return</a></li>
- </ul>
-</div>
-
-<div id="list-theme-inherit" data-nstest-theme="b">
- <ul data-nstest-role="listview">
- <li>foo</li>
- </ul>
-</div>
-
-<div data-nstest-role="page" id="ui-li-has-test">
- <div data-nstest-role="content">
- <p>Right padding on item 1 is OK (75px).</p>
- <p>Right padding on items 2 & 3 should probably be around 30 or 35 (not 25).</p>
- <p>Right padding on item 4 should be 15px to match the left side.</p>
- <ol data-nstest-role="listview" data-nstest-inset="true">
- <li><a href="#">Link LI with counter --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></a></li>
- <li><a href="#">Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a></li>
- <li><a href="#page1">Page1 Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a><a href="#page2"></a></li>
- <li>Static LI with counter ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></li>
- <li>Static LI without counter ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</li>
- </ol>
- </div>
-</div>
-
-</body>
-</html>
+++ /dev/null
-/*
- * mobile listview unit tests
- */
-
-// TODO split out into seperate test files
-(function($){
- var home = $.mobile.path.parseUrl( location.href ).pathname;
-
- $.mobile.defaultTransition = "none";
-
- module( "Basic Linked list", {
- setup: function(){
- $.testHelper.openPage( "#basic-linked-test" );
- }
- });
-
- asyncTest( "The page should enhanced correctly", function(){
- setTimeout(function() {
- ok($('#basic-linked-test .ui-li').length, ".ui-li classes added to li elements");
- start();
- }, 800);
- });
-
- asyncTest( "Slides to the listview page when the li a is clicked", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#basic-linked-test");
- },
-
- function(){
- $('#basic-linked-test li a').first().click();
- },
-
- function(){
- ok($('#basic-link-results').hasClass('ui-page-active'));
- start();
- }
- ]);
- });
-
- asyncTest( "Slides back to main page when back button is clicked", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#basic-link-results");
- },
-
- function(){
- window.history.back();
- },
-
- function(){
- ok($('#basic-linked-test').hasClass('ui-page-active'));
- start();
- }
- ]);
- });
-
- asyncTest( "Presence of ui-li-has- classes", function(){
- $.testHelper.pageSequence( [
- function() {
- $.testHelper.openPage( "#ui-li-has-test" );
- },
-
- function() {
- var page = $( ".ui-page-active" ),
- items = page.find( "li" );
-
- ok( items.eq( 0 ).hasClass( "ui-li-has-count"), "First LI should have ui-li-has-count class" );
- ok( items.eq( 0 ).hasClass( "ui-li-has-arrow"), "First LI should have ui-li-has-arrow class" );
- ok( !items.eq( 1 ).hasClass( "ui-li-has-count"), "Second LI should NOT have ui-li-has-count class" );
- ok( items.eq( 1 ).hasClass( "ui-li-has-arrow"), "Second LI should have ui-li-has-arrow class" );
- ok( !items.eq( 2 ).hasClass( "ui-li-has-count"), "Third LI should NOT have ui-li-has-count class" );
- ok( !items.eq( 2 ).hasClass( "ui-li-has-arrow"), "Third LI should NOT have ui-li-has-arrow class" );
- ok( items.eq( 3 ).hasClass( "ui-li-has-count"), "Fourth LI should have ui-li-has-count class" );
- ok( !items.eq( 3 ).hasClass( "ui-li-has-arrow"), "Fourth LI should NOT have ui-li-has-arrow class" );
- ok( !items.eq( 4 ).hasClass( "ui-li-has-count"), "Fifth LI should NOT have ui-li-has-count class" );
- ok( !items.eq( 4 ).hasClass( "ui-li-has-arrow"), "Fifth LI should NOT have ui-li-has-arrow class" );
- start();
- }
- ]);
- });
-
- module('Nested List Test');
-
- asyncTest( "Changes page to nested list test and enhances", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#nested-list-test");
- },
-
- function(){
- ok($('#nested-list-test').hasClass('ui-page-active'), "makes nested list test page active");
- ok($(':jqmData(url="nested-list-test&ui-page=0-0")').length == 1, "Adds first UL to the page");
- ok($(':jqmData(url="nested-list-test&ui-page=0-1")').length == 1, "Adds second nested UL to the page");
- start();
- }
- ]);
- });
-
- asyncTest( "change to nested page when the li a is clicked", function() {
-
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#nested-list-test");
- },
-
- function(){
- $('.ui-page-active li:eq(1) a:eq(0)').click();
- },
-
- function(){
- var $new_page = $(':jqmData(url="nested-list-test&ui-page=0-0")');
-
- ok($new_page.hasClass('ui-page-active'), 'Makes the nested page the active page.');
- ok($('.ui-listview', $new_page).find(":contains('Rhumba of rattlesnakes')").length == 1, "The current page should have the proper text in the list.");
- ok($('.ui-listview', $new_page).find(":contains('Shoal of Bass')").length == 1, "The current page should have the proper text in the list.");
- start();
- }
- ]);
- });
-
- asyncTest( "should go back to top level when the back button is clicked", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#nested-list-test&ui-page=0-0");
- },
-
- function(){
- window.history.back();
- },
-
- function(){
- ok($('#nested-list-test').hasClass('ui-page-active'), 'Transitions back to the parent nested page');
- start();
- }
- ]);
- });
-
- test( "nested list title should use first text node, regardless of line breaks", function(){
- ok($('#nested-list-test .linebreaknode').text() === "More animals", 'Text should be "More animals"');
- });
-
- asyncTest( "Multiple nested lists on a page with same labels", function() {
- $.testHelper.pageSequence([
- function(){
- // https://github.com/jquery/jquery-mobile/issues/1617
- $.testHelper.openPage("#nested-lists-test");
- },
-
- function(){
- // Click on the link of the third li element
- $('.ui-page-active li:eq(2) a:eq(0)').click();
- },
-
- function(){
- equal($('.ui-page-active .ui-content .ui-listview li').text(), "Item A-3-0Item A-3-1Item A-3-2", 'Text should be "Item A-3-0Item A-3-1Item A-3-2"');
- start();
- }
- ]);
- });
-
- module('Ordered Lists');
-
- asyncTest( "changes to the numbered list page and enhances it", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#numbered-list-test");
- },
-
- function(){
- var $new_page = $('#numbered-list-test');
- ok($new_page.hasClass('ui-page-active'), "Makes the new page active when the hash is changed.");
- ok($('.ui-link-inherit', $new_page).first().text() == "Number 1", "The text of the first LI should be Number 1");
- start();
- }
- ]);
- });
-
- asyncTest( "changes to number 1 page when the li a is clicked", function() {
- $.testHelper.pageSequence([
- function(){
- $('#numbered-list-test li a').first().click();
- },
-
- function(){
- ok($('#numbered-list-results').hasClass('ui-page-active'), "The new numbered page was transitioned correctly.");
- start();
- }
- ]);
- });
-
- asyncTest( "takes us back to the numbered list when the back button is clicked", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage('#numbered-list-test');
- },
-
- function(){
- $.testHelper.openPage('#numbered-list-results');
- },
-
- function(){
- window.history.back();
- },
-
- function(){
- ok($('#numbered-list-test').hasClass('ui-page-active'));
- start();
- }
- ]);
- });
-
- module('Read only list');
-
- asyncTest( "changes to the read only page when hash is changed", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#read-only-list-test");
- },
-
- function(){
- var $new_page = $('#read-only-list-test');
- ok($new_page.hasClass('ui-page-active'), "makes the read only page the active page");
- ok($('li', $new_page).first().text() === "Read", "The first LI has the proper text.");
- start();
- }
- ]);
- });
-
- module('Split view list');
-
- asyncTest( "changes the page to the split view list and enhances it correctly.", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#split-list-test");
- },
-
- function(){
- var $new_page = $('#split-list-test');
- ok($('.ui-li-link-alt', $new_page).length == 3);
- ok($('.ui-link-inherit', $new_page).length == 3);
- start();
- }
- ]);
- });
-
- asyncTest( "change the page to the split view page 1 when the first link is clicked", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#split-list-test");
- },
-
- function(){
- $('.ui-page-active .ui-li a:eq(0)').click();
- },
-
- function(){
- ok($('#split-list-link1').hasClass('ui-page-active'));
- start();
- }
- ]);
- });
-
- asyncTest( "Slide back to the parent list view when the back button is clicked", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#split-list-test");
- },
-
- function(){
- $('.ui-page-active .ui-listview a:eq(0)').click();
- },
-
- function(){
- history.back();
- },
-
- function(){
- ok($('#split-list-test').hasClass('ui-page-active'));
- start();
- }
- ]);
- });
-
- asyncTest( "Clicking on the icon (the second link) should take the user to other a href of this LI", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#split-list-test");
- },
-
- function(){
- $('.ui-page-active .ui-li-link-alt:eq(0)').click();
- },
-
- function(){
- ok($('#split-list-link2').hasClass('ui-page-active'));
- start();
- }
- ]);
- });
-
- module( "List Dividers" );
-
- asyncTest( "Makes the list divider page the active page and enhances it correctly.", function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#list-divider-test");
- },
-
- function(){
- var $new_page = $('#list-divider-test');
- ok($new_page.find('.ui-li-divider').length == 2);
- ok($new_page.hasClass('ui-page-active'));
- start();
- }
- ]);
- });
-
- module( "Search Filter");
-
- var searchFilterId = "#search-filter-test";
-
-
- asyncTest( "Filter downs results when the user enters information", function() {
- var $searchPage = $(searchFilterId);
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage(searchFilterId);
- },
-
- function() {
- $searchPage.find('input').val('at');
- $searchPage.find('input').trigger('change');
-
- same($searchPage.find('li.ui-screen-hidden').length, 2);
- start();
- }
- ]);
- });
-
- asyncTest( "Redisplay results when user removes values", function() {
- var $searchPage = $(searchFilterId);
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage(searchFilterId);
- },
-
- function() {
- $searchPage.find('input').val('a');
- $searchPage.find('input').trigger('change');
-
- same($searchPage.find("li[style^='display: none;']").length, 0);
- start();
- }
- ]);
- });
-
- asyncTest( "Filter works fine with \\W- or regexp-special-characters", function() {
- var $searchPage = $(searchFilterId);
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage(searchFilterId);
- },
-
- function() {
- $searchPage.find('input').val('*');
- $searchPage.find('input').trigger('change');
-
- same($searchPage.find('li.ui-screen-hidden').length, 4);
- start();
- }
- ]);
- });
-
- test( "Refresh applies thumb styling", function(){
- var ul = $('.ui-page-active ul');
-
- ul.append("<li id='fiz'><img/></li>");
- ok(!ul.find("#fiz img").hasClass("ui-li-thumb"));
- ul.listview('refresh');
- ok(ul.find("#fiz img").hasClass("ui-li-thumb"));
- });
-
- asyncTest( "Filter downs results and dividers when the user enters information", function() {
- var $searchPage = $("#search-filter-with-dividers-test");
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage("#search-filter-with-dividers-test");
- },
-
- // wait for the page to become active/enhanced
- function(){
- $searchPage.find('input').val('at');
- $searchPage.find('input').trigger('change');
- setTimeout(function() {
- //there should be four hidden list entries
- same($searchPage.find('li.ui-screen-hidden').length, 4);
-
- //there should be two list entries that are list dividers and hidden
- same($searchPage.find('li.ui-screen-hidden:jqmData(role=list-divider)').length, 2);
-
- //there should be two list entries that are not list dividers and hidden
- same($searchPage.find('li.ui-screen-hidden:not(:jqmData(role=list-divider))').length, 2);
- start();
- }, 1000);
- }
- ]);
- });
-
- asyncTest( "Redisplay results when user removes values", function() {
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage("#search-filter-with-dividers-test");
- },
-
- function() {
- $('.ui-page-active input').val('a');
- $('.ui-page-active input').trigger('change');
-
- setTimeout(function() {
- same($('.ui-page-active input').val(), 'a');
- same($('.ui-page-active li[style^="display: none;"]').length, 0);
- start();
- }, 1000);
- }
- ]);
- });
-
- asyncTest( "Dividers are hidden when preceding hidden rows and shown when preceding shown rows", function () {
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage("#search-filter-with-dividers-test");
- },
-
- function() {
- var $page = $('.ui-page-active');
-
- $page.find('input').val('at');
- $page.find('input').trigger('change');
-
- setTimeout(function() {
- same($page.find('li:jqmData(role=list-divider):hidden').length, 2);
- same($page.find('li:jqmData(role=list-divider):hidden + li:not(:jqmData(role=list-divider)):hidden').length, 2);
- same($page.find('li:jqmData(role=list-divider):not(:hidden) + li:not(:jqmData(role=list-divider)):not([:hidden)').length, 2);
- start();
- }, 1000);
- }
- ]);
- });
-
- asyncTest( "Inset List View should refresh corner classes after filtering", 4 * 2, function () {
- var checkClasses = function() {
- var $page = $( ".ui-page-active" ),
- $li = $page.find( "li:visible" );
- ok($li.first().hasClass( "ui-corner-top" ), $li.length+" li elements: First visible element should have class ui-corner-top");
- ok($li.last().hasClass( "ui-corner-bottom" ), $li.length+" li elements: Last visible element should have class ui-corner-bottom");
- };
-
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage("#search-filter-inset-test");
- },
-
- function() {
- var $page = $('.ui-page-active');
- $.testHelper.sequence([
- function() {
- checkClasses();
-
- $page.find('input').val('man');
- $page.find('input').trigger('change');
- },
-
- function() {
- checkClasses();
-
- $page.find('input').val('at');
- $page.find('input').trigger('change');
- },
-
- function() {
- checkClasses();
-
- $page.find('input').val('catwoman');
- $page.find('input').trigger('change');
- },
-
- function() {
- checkClasses();
- start();
- }
- ], 50);
- }
- ]);
- });
-
- module( "Programmatically generated list items", {
- setup: function(){
- var item,
- data = [
- {
- id: 1,
- label: "Item 1"
- },
- {
- id: 2,
- label: "Item 2"
- },
- {
- id: 3,
- label: "Item 3"
- },
- {
- id: 4,
- label: "Item 4"
- }
- ];
-
- $( "#programmatically-generated-list-items" ).html("");
-
- for ( var i = 0, len = data.length; i < len; i++ ) {
- item = $( '<li id="myItem' + data[i].id + '">' );
- label = $( "<strong>" + data[i].label + "</strong>").appendTo( item );
- $( "#programmatically-generated-list-items" ).append( item );
- }
- }
- });
-
- asyncTest( "Corner styling on programmatically created list items", function() {
- // https://github.com/jquery/jquery-mobile/issues/1470
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage( "#programmatically-generated-list" );
- },
- function() {
- ok(!$( "#programmatically-generated-list-items li:first-child" ).hasClass( "ui-corner-bottom" ), "First list item should not have class ui-corner-bottom" );
- start();
- }
- ]);
- });
-
- module("Programmatic list items manipulation");
-
- asyncTest("Removing list items", 4, function() {
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage("#removing-items-from-list-test");
- },
-
- function() {
- var ul = $('#removing-items-from-list-test ul');
- ul.find("li").first().remove();
- equal(ul.find("li").length, 3, "There should be only 3 list items left");
-
- ul.listview('refresh');
- ok(ul.find("li").first().hasClass("ui-corner-top"), "First list item should have class ui-corner-top");
-
- ul.find("li").last().remove();
- equal(ul.find("li").length, 2, "There should be only 2 list items left");
-
- ul.listview('refresh');
- ok(ul.find("li").last().hasClass("ui-corner-bottom"), "Last list item should have class ui-corner-bottom");
- start();
- }
- ]);
- });
-
- module("Rounded corners");
-
- asyncTest("Top and bottom corners rounded in inset list", 14, function() {
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage("#corner-rounded-test");
- },
-
- function() {
- var ul = $('#corner-rounded-test ul');
-
- for( var t = 0; t<3; t++){
- ul.append("<li>Item " + t + "</li>");
- ul.listview('refresh');
- equals(ul.find(".ui-corner-top").length, 1, "There should be only one element with class ui-corner-top");
- equals(ul.find("li:visible").first()[0], ul.find(".ui-corner-top")[0], "First list item should have class ui-corner-top in list with " + ul.find("li").length + " item(s)");
- equals(ul.find(".ui-corner-bottom").length, 1, "There should be only one element with class ui-corner-bottom");
- equals(ul.find("li:visible").last()[0], ul.find(".ui-corner-bottom")[0], "Last list item should have class ui-corner-bottom in list with " + ul.find("li").length + " item(s)");
- }
-
- ul.find( "li" ).first().hide();
- ul.listview( "refresh" );
- equals(ul.find("li:visible").first()[0], ul.find(".ui-corner-top")[0], "First visible list item should have class ui-corner-top");
-
- ul.find( "li" ).last().hide();
- ul.listview( "refresh" );
- equals(ul.find("li:visible").last()[0], ul.find(".ui-corner-bottom")[0], "Last visible list item should have class ui-corner-bottom");
-
- start();
- }
- ]);
- });
-
- test( "Listview will create when inside a container that receives a 'create' event", function(){
- ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-listview").length, "did not have enhancements applied" );
- ok( $("#enhancetest").trigger("create").find(".ui-listview").length, "enhancements applied" );
- });
-
- module( "Cached Linked List" );
-
- var findNestedPages = function(selector){
- return $( selector + " #topmost" ).listview( 'childPages' );
- };
-
- asyncTest( "nested pages are removed from the dom by default", function(){
- $.testHelper.pageSequence([
- function(){
- //reset for relative url refs
- $.testHelper.openPage( "#" + home );
- },
-
- function(){
- $.testHelper.openPage( "#cache-tests/uncached-nested.html" );
- },
-
- function(){
- ok( findNestedPages( "#uncached-nested-list" ).length > 0, "verify that there are nested pages" );
- $.testHelper.openPage( "#" + home );
- },
-
- function() {
- $.testHelper.openPage( "#cache-tests/clear.html" );
- },
-
- function(){
- same( findNestedPages( "#uncached-nested-list" ).length, 0 );
- start();
- }
- ]);
- });
-
- asyncTest( "nested pages preserved when parent page is cached", function(){
-
- $.testHelper.pageSequence([
- function(){
- //reset for relative url refs
- $.testHelper.openPage( "#" + home );
- },
-
- function(){
- $.testHelper.openPage( "#cache-tests/cached-nested.html" );
- },
-
- function(){
- ok( findNestedPages( "#cached-nested-list" ).length > 0, "verify that there are nested pages" );
- $.testHelper.openPage( "#" + home );
- },
-
- function() {
- $.testHelper.openPage( "#cache-tests/clear.html" );
- },
-
- function(){
- ok( findNestedPages( "#cached-nested-list" ).length > 0, "nested pages remain" );
- start();
- }
- ]);
- });
-
- asyncTest( "parent page is not removed when visiting a sub page", function(){
- $.testHelper.pageSequence([
- function(){
- //reset for relative url refs
- $.testHelper.openPage( "#" + home );
- },
-
- function(){
- $.testHelper.openPage( "#cache-tests/cached-nested.html" );
- },
-
- function(){
- same( $("#cached-nested-list").length, 1 );
- $.testHelper.openPage( "#" + home );
- },
-
- function() {
- $.testHelper.openPage( "#cache-tests/clear.html" );
- },
-
- function(){
- same( $("#cached-nested-list").length, 1 );
- start();
- }
- ]);
- });
-
- asyncTest( "filterCallback can be altered after widget creation", function(){
- var listPage = $( "#search-filter-test" );
- expect( listPage.find("li").length );
-
- $.testHelper.pageSequence( [
- function(){
- //reset for relative url refs
- $.testHelper.openPage( "#" + home );
- },
-
- function() {
- $.testHelper.openPage( "#search-filter-test" );
- },
-
- function() {
- // set the listview instance callback
- listPage.find( "ul" ).listview( "option", "filterCallback", function() {
- ok(true, "custom callback invoked");
- });
-
- // trigger a change in the search filter
- listPage.find( "input" ).val( "foo" ).trigger( "change" );
-
- //NOTE beware a poossible issue with timing here
- start();
- }
- ]);
- });
-
- asyncTest( "nested pages hash key is always in the hash (replaceState)", function(){
- $.testHelper.pageSequence([
- function(){
- //reset for relative url refs
- $.testHelper.openPage( "#" + home );
- },
-
- function(){
- // https://github.com/jquery/jquery-mobile/issues/1617
- $.testHelper.openPage("#nested-lists-test");
- },
-
- function(){
- // Click on the link of the third li element
- $('.ui-page-active li:eq(2) a:eq(0)').click();
- },
-
- function(){
- ok( location.hash.search($.mobile.subPageUrlKey) >= 0 );
- start();
- }
- ]);
- });
-
- asyncTest( "embedded listview page with nested pages is not removed from the dom", function() {
- $.testHelper.pageSequence([
- function() {
- // open the nested list page
- same( $("div#nested-list-test").length, 1 );
- $( "a#nested-list-test-anchor" ).click();
- },
-
- function() {
- // go back to the origin page
- window.history.back();
- },
-
- function() {
- // make sure the page is still in place
- same( $("div#nested-list-test").length, 1 );
- start();
- }
- ]);
- });
-
-
- asyncTest( "list inherits theme from parent", function() {
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage("#list-theme-inherit");
- },
-
- function() {
- var theme = $.mobile.activePage.jqmData('theme');
- ok( $.mobile.activePage.find("ul > li").hasClass("ui-body-b"), "theme matches the parent");
- window.history.back();
- },
-
- start
- ]);
- });
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Listview Integration Test</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../jquery.testHelper.js"></script>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="listview_pushstate.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Listview Integration Test</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div data-nstest-role="page">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Basic multiple lists view</h1>
- </div>
- <div data-nstest-role="content">
- <ul data-nstest-role="listview" data-nstest-inset="true">
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3
- <ul data-nstest-role="listview">
- <li>Item A-3-0</li>
- <li>Item A-3-1</li>
- <li>Item A-3-2</li>
- </ul>
- </li>
- </ul>
- <ul data-nstest-role="listview" data-nstest-inset="true">
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3
- <ul data-nstest-role="listview">
- <li>Item B-3-0
- <ul data-nstest-role="listview">
- <li>Item B-3-0-0</li>
- <li>Item B-3-0-1
- <ul data-nstest-role="listview">
- <li>Item B-3-0-1-0</li>
- <li>Item B-3-0-1-1</li>
- <li>Item B-3-0-1-2</li>
- </ul>
- </li>
- <li>Item B-3-0-2</li>
- </ul>
- </li>
- <li>Item B-3-1
- <ul data-nstest-role="listview">
- <li>Item B-3-1-0</li>
- <li>Item B-3-1-1</li>
- <li>Item B-3-1-2</li>
- </ul>
- </li>
- <li>Item B-3-2</li>
- </ul>
- </li>
- </ul>
- </div>
-</div>
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Media Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../../../js/jquery.ui.widget.js"></script>
- <script src="../../../js/jquery.mobile.widget.js"></script>
- <script src="../../../js/jquery.mobile.media.js"></script>
- <script src="../../../js/jquery.mobile.media.classes.js"></script>
-
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="media_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Media Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="qunit-fixture"></div>
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Navigation Test Suite</title>
-
- <script>
-
- // This unit test requires a base tag to be set within the file.
- // Most browsers require a base tag with an @href URL that is absolute.
- // We need to dynamically inject the base tag so we can prefix it with
- // the location of this test on the server without any server-side language
- // requirements.
-
- var baseUrl = location.href.replace(/[^\?\#\/]*(\?[^#]*)?(#.*)?$/, "");
- document.write("<base href=\"" + baseUrl + "base-tests/app-base/\"/>\n");
-
- </script>
- <script src="../../../../../js/jquery.js"></script>
- <script src="../../../jquery.setNameSpace.js"></script>
- <script src="../../../../../js/"></script>
- <script src="../../../../../tests/jquery.testHelper.js"></script>
-
-
- <link rel="stylesheet" href="../../../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../../../external/qunit.css"/>
- <script src="../../../../../external/qunit.js"></script>
- <script type="text/javascript">
- $.testHelper.setPushStateFor([
- "../../navigation_base.js"
- ]);
- </script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Navigation Base Tag Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="internal-page-1" data-nstest-role="page">
- <a href="base-page-1.html" class="bp1"></a>
- <a href="base-page-2.html" class="bp2"></a>
- <a href="../content/content-page-1.html" class="cp1"></a>
- <a href="../content/content-page-2.html" class="cp2"></a>
- <a href="#internal-page-2" class="ip2"></a>
- <img src="images/internal-page-1.png">
-</div>
-
-<div id="internal-page-2" data-nstest-role="page">
- <a href="base-page-1.html" class="bp1"></a>
- <a href="base-page-2.html" class="bp2"></a>
- <a href="../content/content-page-1.html" class="cp1"></a>
- <a href="../content/content-page-2.html" class="cp2"></a>
- <a href="#internal-page-1" class="ip1"></a>
- <img src="images/internal-page-2.png">
-</div>
-
-<div data-nstest-role="page" id="internal-no-action-form-page">
- <div data-nstest-role="content">
- <form>
- <input type="hidden" name="foo" value="1">
- <input type="hidden" name="bar" value="2">
- </form>
- </div>
-</div>
-
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Navigation Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
-
-
- <link rel="stylesheet" href="../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script type="text/javascript">
- $.testHelper.setPushStateFor([
- "navigation_transitions.js",
- "navigation_helpers.js",
- "navigation_core.js",
- "navigation_paths.js"
- ]);
- </script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Navigation Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="harmless-default-page" data-nstest-role="page" class="first-page">
-</div>
-
-<div id="foo" data-nstest-role="page" class="foo-class">
- <a href="#bar" data-nstest-transition="flip"></a>
- <a id="bad-internal-page-link" href="#non-existent-page"></a>
-</div>
-
-<div id="prefetch" data-nstest-role="page">
- <a href="prefetched.html" data-nstest-prefetch>Prefetch test</a>
-</div>
-
-<div id="foozball" data-nstest-role="page">
-</div>
-
-<div id="bar" data-nstest-role="page">
- <a href="#baz"></a>
-</div>
-
-<div id="baz" data-nstest-role="page">
- <a href="#foo"></a>
-</div>
-
-<div id="fade-trans" data-nstest-role="page">
- <a href="#flip-trans" data-nstest-transition="fade"></a>
-</div>
-
-<div id="flip-trans" data-nstest-role="page">
- <a href="#fade-trans" data-nstest-transition="flip"></a>
-</div>
-
-<div id="no-trans" data-nstest-role="page">
- <a href="#pop-trans"></a>
-</div>
-
-<div id="pop-trans" data-nstest-role="page">
- <a href="#no-trans" data-nstest-transition="pop"></a>
-</div>
-
-<div id="default-trans" data-nstest-role="page">
- <a href="#no-trans"></a>
-</div>
-
-<div id="data-url" data-nstest-role="page">
- <a href="data-url-tests/data-url.html"></a>
-</div>
-
-<div id="non-data-url" data-nstest-role="page">
- <a href="data-url-tests/non-data-url.html"></a>
-</div>
-
-<div id="nested-data-url" data-nstest-role="page">
- <a href="data-url-tests/nested.html"></a>
-</div>
-
-<div id="single-quotes-data-url" data-nstest-role="page">
- <a href="data-url-tests/single-quotes.html"></a>
-</div>
-
-<div id="reverse-attr-data-url" data-nstest-role="page">
- <a href="data-url-tests/reverse-attr.html"></a>
-</div>
-
-<div id="ajax-disabled-form" data-nstest-role="page">
- <form method="POST" id="non-ajax-form" action="/ajax-disabled-form" data-nstest-ajax="false">
- </form>
-
- <form method="POST" id="ajax-form" action="/ajax-disabled-form">
- </form>
-
- <form method="POST" id="rand-ajax-form" action="/ajax-disabled-form" data-nstest-ajax="foo">
- </form>
-</div>
-
-<div id="default-trans-dialog" data-nstest-role="page">
- <a href="#no-trans-dialog" data-nstest-rel="dialog"></a>
-</div>
-
-<div id="no-trans-dialog" data-nstest-role="page">
-</div>
-
-<div id="dup-history-first" data-nstest-role="page">
- <a href="#dup-history-second" data-nstest-transition="slideup" data-nstest-role="button" >
- Page 2
- </a>
-</div>
-
-<div id="dup-history-second" data-nstest-role="page">
- <a href="#dup-history-first" data-nstest-transition="slideup" data-nstest-role="button">
- Page 1
- </a>
- <a href="#dup-history-dialog" data-nstest-role="button" data-nstest-transition="pop" data-nstest-rel="dialog">Dialog</a>
-</div>
-
-<div id="dup-history-dialog" data-nstest-role="dialog">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Dialog</h1>
- </div>
-</div>
-
-<div id="skip-dialog-first" data-nstest-role="page">
- <div data-nstest-role="content">
- <a href="#skip-dialog" data-nstest-role="button" data-nstest-transition="pop" data-nstest-rel="dialog">Dialog</a>
- </div>
-</div>
-
-<div id="skip-dialog" data-nstest-role="dialog">
- <div data-nstest-role="content">
- <a href="#skip-dialog-second">Page 2</a>
- </div>
-</div>
-
-<div id="skip-dialog-second" data-nstest-role="page">
- <a href="#" data-nstest-rel="back">Go Back</a>
-</div>
-
-
-<div id="nested-dialog-page" data-nstest-role="page">
- <div data-nstest-role="content">
- <a href="#nested-dialog-first">Dialog</a>
- </div>
-</div>
-
-<div id="nested-dialog-first" data-nstest-role="dialog">
- <div data-nstest-role="content">
- <a href="#nested-dialog-second">Dialog 2</a>
- </div>
-</div>
-
-<div id="nested-dialog-second" data-nstest-role="dialog">
-</div>
-
-<div id="relative-after-embeded-page-first" data-nstest-role="page">
- <div data-nstest-role="content">
- <a href="#relative-after-embeded-page-second">second page</a>
- </div>
-</div>
-
-<div id="relative-after-embeded-page-second" data-nstest-role="page">
- <div data-nstest-role="content">
- <a href="data-url-tests/data-url.html">file path page</a>
- </div>
-</div>
-
-<div id="ajax-title-page" data-nstest-title="Title Attr 1" data-nstest-role="page">
- <a href="title1.html" id="titletest1" data-nstest-transition="none">test</a>
- <a href="title2.html" id="titletest2" data-nstest-transition="none">test</a>
- <a href="title3.html" id="titletest3" data-nstest-transition="none">test</a>
-</div>
-
-<div data-nstest-role="page" id="titletest4" data-nstest-title="Title Attr 2">
- <div data-nstest-role="header"><h1>Title Heading</h1></div>
-</div>
-
-<div data-nstest-role="page" id="titletest5" data-nstest-title="Title Attr">
- <div data-nstest-role="header"><h1>Title Heading</h1></div>
-</div>
-
-<div data-nstest-role="page" id="self-link">
- <a href="#self-link">self!</a>
-</div>
-
-<div data-nstest-role="page" id="dialog-param-link">
- <a href="dialog-param-test/dialog-param.html">go</a>
-</div>
-
-<div data-nstest-role="page" id="pathing-tests">
- <!-- doc rel links -->
- <a href="file.html" id="doc-rel-test-one">go</a>
- <a href="path-tests/file.html" id="doc-rel-test-two">go</a>
- <a href="path-tests/sub-dir/file.html" id="doc-rel-test-three">go</a>
- <a href="path-tests/sub-dir/" id="doc-rel-test-four">go</a>
- <a href="../../unit/navigation/path-tests/parent-ref.html" id="doc-rel-test-five">go</a>
- <a href="../../unit/navigation/path-tests/parent/" id="doc-rel-test-six">go</a>
-
- <!-- site rel links -->
- <!-- these will be altered before the test suite runs to use the current path -->
- <a href="file.html" id="site-rel-test-one" class="site-rel">go</a>
- <a href="path-tests/file.html" id="site-rel-test-two" class="site-rel">go</a>
- <a href="path-tests/sub-dir/file.html" id="site-rel-test-three" class="site-rel">go</a>
- <a href="path-tests/sub-dir/" id="site-rel-test-four" class="site-rel">go</a>
- <a href="../../unit/navigation/path-tests/parent-ref.html" id="site-rel-test-five" class="site-rel">go</a>
- <a href="../../unit/navigation/path-tests/parent/" id="site-rel-test-six" class="site-rel">go</a>
-
- <!-- protocol rel links -->
- <!-- these will be altered before the test suite runs to use the
- current domain and path -->
- <a href="file.html" id="protocol-rel-test-one" class="protocol-rel">go</a>
- <a href="path-tests/file.html" id="protocol-rel-test-two" class="protocol-rel">go</a>
- <a href="path-tests/sub-dir/file.html" id="protocol-rel-test-three" class="protocol-rel">go</a>
- <a href="path-tests/sub-dir/" id="protocol-rel-test-four" class="protocol-rel">go</a>
- <a href="../../unit/navigation/path-tests/parent-ref.html" id="protocol-rel-test-five" class="protocol-rel">go</a>
- <a href="../../unit/navigation/path-tests/parent/" id="protocol-rel-test-six" class="protocol-rel">go</a>
-
- <!-- absolute links -->
- <!-- these will be altered before the test suite runs to use the
- current protocol, domain and path -->
- <a href="file.html" id="absolute-test-one" class="absolute">go</a>
- <a href="path-tests/file.html" id="absolute-test-two" class="absolute">go</a>
- <a href="path-tests/sub-dir/file.html" id="absolute-test-three" class="absolute">go</a>
- <a href="path-tests/sub-dir/" id="absolute-test-four" class="absolute">go</a>
- <a href="../../unit/navigation/path-tests/parent-ref.html" id="absolute-test-five" class="absolute">go</a>
- <a href="../../unit/navigation/path-tests/parent/" id="absolute-test-six" class="absolute">go</a>
-
-</div>
-
-<div data-nstest-role="page" id="pathing-tests-reset">
- <div class="reset-value">page didn't change!</div>
-</div>
-
-<div data-nstest-role="page" id="internal-no-action-form-page">
- <div data-nstest-role="content">
- <form>
- <input type="hidden" name="foo" value="1">
- <input type="hidden" name="bar" value="2">
- </form>
- <a href="form-tests/form-no-action.html">External page containing form with no action.</a>
- </div>
-</div>
-
-<div id="active-state-page1" data-nstest-role="page">
- <div data-nstest-role="content">
- <a href="#active-state-page2" data-nstest-role="button">page2</a>
- </div>
-</div>
-
-<div id="active-state-page2" data-nstest-role="page">
- <div data-nstest-role="content">
- <a href="#active-state-page1" data-nstest-role="button">href button</a>
- <a href="#active-state-page1" data-nstest-rel="back" data-nstest-role="button">back button</a>
- </div>
-</div>
-
-
-
-<div id="odd-clicks-page" data-nstest-role="page">
- <a href="#odd-clicks-page-dest" id="right-or-middle-click">foo</a>
-</div>
-
-<div id="odd-clicks-page-dest" data-nstest-role="page"></div>
-
-<div id="inject-links-page" data-nstest-role="page">
- <a href="#injected-test-page" id="static-injected-test-page-link">static link</a>
-</div>
-
-<div id="prefetched-dialog-page" data-nstest-role="page">
- <a href="prefetched-dialog.html"
- id="prefetched-dialog-link"
- data-nstest-role="prefetch"
- data-nstest-rel="dialog">
- static link
- </a>
-</div>
-</body>
-</html>
+++ /dev/null
-/*
- * mobile navigation base tag unit tests
- */
-(function($){
- var baseDir = $.mobile.path.parseUrl($("base").attr("href")).directory,
- contentDir = $.mobile.path.makePathAbsolute("../content/", baseDir);
-
- module('jquery.mobile.navigation.js - base tag', {
- setup: function(){
- if ( location.hash ) {
- stop();
- $(document).one("pagechange", function() {
- start();
- } );
- location.hash = "";
- }
- }
- });
-
- asyncTest( "can navigate between internal and external pages", function(){
- $.testHelper.pageSequence([
- function(){
- // Navigate from default internal page to another internal page.
- $.testHelper.openPage( "#internal-page-2" );
- },
-
- function(){
- // Verify that we are on the 2nd internal page.
- $.testHelper.assertUrlLocation({
- push: location.pathname + "#internal-page-2",
- hash: "internal-page-2",
- report: "navigate to internal page"
- });
-
- // Navigate to a page that is in the base directory. Note that the application
- // document and this new page are *NOT* in the same directory.
- $("#internal-page-2 .bp1").click();
- },
-
- function(){
- // Verify that we are on the expected page.
- $.testHelper.assertUrlLocation({
- hashOrPush: baseDir + "base-page-1.html",
- report: "navigate from internal page to page in base directory"
- });
-
- // Navigate to another page in the same directory as the current page.
- $("#base-page-1 .bp2").click();
- },
-
- function(){
- // Verify that we are on the expected page.
- $.testHelper.assertUrlLocation({
- hashOrPush: baseDir + "base-page-2.html",
- report: "navigate from base directory page to another base directory page"
- });
-
- // Navigate to another page in a directory that is the sibling of the base.
- $("#base-page-2 .cp1").click();
- },
-
- function(){
- // Verify that we are on the expected page.
- $.testHelper.assertUrlLocation({
- hashOrPush: contentDir + "content-page-1.html",
- report: "navigate from base directory page to a page in a different directory hierarchy"
- });
-
- // Navigate to another page in a directory that is the sibling of the base.
- $("#content-page-1 .cp2").click();
- },
-
- function(){
- // Verify that we are on the expected page.
- $.testHelper.assertUrlLocation({
- hashOrPush: contentDir + "content-page-2.html",
- report: "navigate to another page within the same non-base directory hierarchy"
- });
-
- // Navigate to an internal page.
- $("#content-page-2 .ip1").click();
- },
-
- function(){
- // Verify that we are on the expected page.
- // the hash based nav result (hash:) is dictate by the fact that #internal-page-1
- // is the original root page element
- $.testHelper.assertUrlLocation({
- hashOrPush: location.pathname + location.search,
- report: "navigate from a page in a non-base directory to an internal page"
- });
-
- // Try calling changePage() directly with a relative path.
- $.mobile.changePage("base-page-1.html");
- },
-
- function(){
- // Verify that we are on the expected page.
- $.testHelper.assertUrlLocation({
- hashOrPush: baseDir + "base-page-1.html",
- report: "call changePage() with a filename (no path)"
- });
-
- // Try calling changePage() directly with a relative path.
- $.mobile.changePage("../content/content-page-1.html");
- },
-
- function(){
- // Verify that we are on the expected page.
- $.testHelper.assertUrlLocation({
- hashOrPush: contentDir + "content-page-1.html",
- report: "call changePage() with a relative path containing up-level references"
- });
-
- // Try calling changePage() with an id
- $.mobile.changePage("content-page-2.html");
- },
-
- function(){
- // Verify that we are on the expected page.
- $.testHelper.assertUrlLocation({
- hashOrPush: contentDir + "content-page-2.html",
- report: "call changePage() with a relative path should resolve relative to current page"
- });
-
- // test that an internal page works
- $("a.ip2").click();
- },
-
- function(){
- // Verify that we are on the expected page.
- $.testHelper.assertUrlLocation({
- hash: "internal-page-2",
- push: location.pathname + "#internal-page-2",
- report: "call changePage() with a page id"
- });
-
- // Try calling changePage() with an id
- $.mobile.changePage("internal-page-1");
- },
-
- function(){
- // Verify that we are on the expected page.
- $.testHelper.assertUrlLocation({
- hash: "internal-page-2",
- push: location.pathname + "#internal-page-2",
- report: "calling changePage() with a page id that is not prefixed with '#' should not change page"
- });
-
- // Previous load should have failed and left us on internal-page-2.
- start();
- }
- ]);
- });
-
- asyncTest( "internal form with no action submits to document URL", function(){
- $.testHelper.pageSequence([
- // open our test page
- function(){
- $.testHelper.openPage( "#internal-no-action-form-page" );
- },
-
- function(){
- $( "#internal-no-action-form-page form" ).eq( 0 ).submit();
- },
-
- function(){
- $.testHelper.assertUrlLocation({
- hashOrPush: location.pathname + "?foo=1&bar=2",
- report: "hash should match document url and not base url"
- });
-
- start();
- }
- ]);
- });
-
- asyncTest( "external page form with no action submits to external page URL", function(){
- $.testHelper.pageSequence([
- function(){
- // Go to an external page that has a form.
- $("#internal-page-1 .cp1").click();
- },
-
- function(){
- // Make sure we actually navigated to the external page.
- $.testHelper.assertUrlLocation({
- hashOrPush: contentDir + "content-page-1.html",
- report: "should be on content-page-1.html"
- });
-
- // Now submit the form in the external page.
- $("#content-page-1 form").eq(0).submit();
- },
-
- function(){
- $.testHelper.assertUrlLocation({
- hashOrPush: contentDir + "content-page-1.html?foo=1&bar=2",
- report: "hash should match page url and not document url"
- });
-
- start();
- }]);
- });
-})(jQuery);
+++ /dev/null
-/*
- * mobile navigation unit tests
- */
-(function($){
- // TODO move siteDirectory over to the nav path helper
- var changePageFn = $.mobile.changePage,
- originalTitle = document.title,
- originalLinkBinding = $.mobile.linkBindingEnabled,
- siteDirectory = location.pathname.replace( /[^/]+$/, "" ),
- home = $.mobile.path.parseUrl(location.pathname).directory,
- navigateTestRoot = function(){
- $.testHelper.openPage( "#" + location.pathname + location.search );
- };
-
- module('jquery.mobile.navigation.js', {
- setup: function(){
- $.mobile.changePage = changePageFn;
- document.title = originalTitle;
-
- var pageReset = function( hash ) {
- hash = hash || "";
-
- stop();
-
- $(document).one( "pagechange", function() {
- start();
- });
-
- location.hash = "#" + hash;
- };
-
- // force the page reset for hash based tests
- if ( location.hash && !$.support.pushState ) {
- pageReset();
- }
-
- // force the page reset for all pushstate tests
- if ( $.support.pushState ) {
- pageReset( home );
- }
-
- $.mobile.urlHistory.stack = [];
- $.mobile.urlHistory.activeIndex = 0;
- $.Event.prototype.which = undefined;
- $.mobile.linkBindingEnabled = originalLinkBinding;
- }
- });
-
- asyncTest( "window.history.back() from external to internal page", function(){
-
- $.testHelper.pageSequence([
-
- // open our test page
- function(){
- $.testHelper.openPage("#active-state-page1");
- },
-
- function(){
- ok( $.mobile.activePage[0] === $( "#active-state-page1" )[ 0 ], "successful navigation to internal page." );
-
- //location.hash = siteDirectory + "external.html";
- $.mobile.changePage("external.html");
- },
-
- function(){
- ok( $.mobile.activePage[0] !== $( "#active-state-page1" )[ 0 ], "successful navigation to external page." );
-
- window.history.back();
- },
-
- function(){
- ok( $.mobile.activePage[0] === $( "#active-state-page1" )[ 0 ], "successful navigation back to internal page." );
-
- start();
- }
- ]);
- });
-
- asyncTest( "external page is removed from the DOM after pagehide", function(){
- $.testHelper.pageSequence([
- navigateTestRoot,
-
- function(){
- $.mobile.changePage( "external.html" );
- },
-
- // page is pulled and displayed in the dom
- function(){
- same( $( "#external-test" ).length, 1 );
- window.history.back();
- },
-
- // external-test is *NOT* cached in the dom after transitioning away
- function(){
- same( $( "#external-test" ).length, 0 );
- start();
- }
- ]);
- });
-
- asyncTest( "preventDefault on pageremove event can prevent external page from being removed from the DOM", function(){
- var preventRemoval = true,
- removeCallback = function( e ) {
- if ( preventRemoval ) {
- e.preventDefault();
- }
- };
-
- $( document ).bind( "pageremove", removeCallback );
-
- $.testHelper.pageSequence([
- navigateTestRoot,
-
- function(){
- $.mobile.changePage( "external.html" );
- },
-
- // page is pulled and displayed in the dom
- function(){
- same( $( "#external-test" ).length, 1 );
- window.history.back();
- },
-
- // external-test *IS* cached in the dom after transitioning away
- function(){
- same( $( "#external-test" ).length, 1 );
-
- // Switch back to the page again!
- $.mobile.changePage( "external.html" );
- },
-
- // page is still present and displayed in the dom
- function(){
- same( $( "#external-test" ).length, 1 );
-
- // Now turn off our removal prevention.
- preventRemoval = false;
-
- window.history.back();
- },
-
- // external-test is *NOT* cached in the dom after transitioning away
- function(){
- same( $( "#external-test" ).length, 0 );
- $( document ).unbind( "pageremove", removeCallback );
- start();
- }
- ]);
- });
-
- asyncTest( "external page is cached in the DOM after pagehide", function(){
- $.testHelper.pageSequence([
- navigateTestRoot,
-
- function(){
- $.mobile.changePage( "cached-external.html" );
- },
-
- // page is pulled and displayed in the dom
- function(){
- same( $( "#external-test-cached" ).length, 1 );
- window.history.back();
- },
-
- // external test page is cached in the dom after transitioning away
- function(){
- same( $( "#external-test-cached" ).length, 1 );
- start();
- }
- ]);
- });
-
- asyncTest( "external page is cached in the DOM after pagehide when option is set globally", function(){
- $.testHelper.pageSequence([
- navigateTestRoot,
-
- function(){
- $.mobile.page.prototype.options.domCache = true;
- $.mobile.changePage( "external.html" );
- },
-
- // page is pulled and displayed in the dom
- function(){
- same( $( "#external-test" ).length, 1 );
- window.history.back();
- },
-
- // external test page is cached in the dom after transitioning away
- function(){
- same( $( "#external-test" ).length, 1 );
- $.mobile.page.prototype.options.domCache = false;
- $( "#external-test" ).remove();
- start();
- }]);
- });
-
- asyncTest( "page last scroll distance is remembered while navigating to and from pages", function(){
- $.testHelper.pageSequence([
- function(){
- $( "body" ).height( $( window ).height() + 500 );
- $.mobile.changePage( "external.html" );
- },
-
- function(){
- // wait for the initial scroll to 0
- setTimeout( function() {
- window.scrollTo( 0, 300 );
- same( $(window).scrollTop(), 300, "scrollTop is 300 after setting it" );
- }, 300);
-
- // wait for the scrollstop to fire and for the scroll to be
- // recorded 100 ms afterward (see changes made to handle hash
- // scrolling in some browsers)
- setTimeout( navigateTestRoot, 500 );
- },
-
- function(){
- history.back();
- },
-
- function(){
- // Give the silentScroll function some time to kick in.
- setTimeout(function() {
- same( $(window).scrollTop(), 300, "scrollTop is 300 after returning to the page" );
- $( "body" ).height( "" );
- start();
- }, 300 );
- }
- ]);
- });
-
- asyncTest( "forms with data attribute ajax set to false will not call changePage", function(){
- var called = false;
- var newChangePage = function(){
- called = true;
- };
-
- $.testHelper.sequence([
- // avoid initial page load triggering changePage early
- function(){
- $.mobile.changePage = newChangePage;
-
- $('#non-ajax-form').one('submit', function(event){
- ok(true, 'submit callbacks are fired');
- event.preventDefault();
- }).submit();
- },
-
- function(){
- ok(!called, "change page should not be called");
- start();
- }], 1000);
- });
-
- asyncTest( "forms with data attribute ajax not set or set to anything but false will call changePage", function(){
- var called = 0,
- newChangePage = function(){
- called++;
- };
-
- $.testHelper.sequence([
- // avoid initial page load triggering changePage early
- function(){
- $.mobile.changePage = newChangePage;
- $('#ajax-form, #rand-ajax-form').submit();
- },
-
- function(){
- ok(called >= 2, "change page should be called at least twice");
- start();
- }], 300);
- });
-
-
- asyncTest( "anchors with no href attribute will do nothing when clicked", function(){
- var fired = false;
-
- $(window).bind("hashchange.temp", function(){
- fired = true;
- });
-
- $( "<a>test</a>" ).appendTo( $.mobile.firstPage ).click();
-
- setTimeout(function(){
- same(fired, false, "hash shouldn't change after click");
- $(window).unbind("hashchange.temp");
- start();
- }, 500);
- });
-
- test( "urlHistory is working properly", function(){
-
- //urlHistory
- same( $.type( $.mobile.urlHistory.stack ), "array", "urlHistory.stack is an array" );
-
- //preload the stack
- $.mobile.urlHistory.stack[0] = { url: "foo", transition: "bar" };
- $.mobile.urlHistory.stack[1] = { url: "baz", transition: "shizam" };
- $.mobile.urlHistory.stack[2] = { url: "shizoo", transition: "shizaah" };
-
- //active index
- same( $.mobile.urlHistory.activeIndex , 0, "urlHistory.activeIndex is 0" );
-
- //getActive
- same( $.type( $.mobile.urlHistory.getActive() ) , "object", "active item is an object" );
- same( $.mobile.urlHistory.getActive().url , "foo", "active item has url foo" );
- same( $.mobile.urlHistory.getActive().transition , "bar", "active item has transition bar" );
-
- //get prev / next
- same( $.mobile.urlHistory.getPrev(), undefined, "urlHistory.getPrev() is undefined when active index is 0" );
- $.mobile.urlHistory.activeIndex = 1;
- same( $.mobile.urlHistory.getPrev().url, "foo", "urlHistory.getPrev() has url foo when active index is 1" );
- $.mobile.urlHistory.activeIndex = 0;
- same( $.mobile.urlHistory.getNext().url, "baz", "urlHistory.getNext() has url baz when active index is 0" );
-
- //add new
- $.mobile.urlHistory.activeIndex = 2;
- $.mobile.urlHistory.addNew("test");
- same( $.mobile.urlHistory.stack.length, 4, "urlHistory.addNew() adds an item after the active index" );
- same( $.mobile.urlHistory.activeIndex, 3, "urlHistory.addNew() moves the activeIndex to the newly added item" );
-
- //clearForward
- $.mobile.urlHistory.activeIndex = 0;
- $.mobile.urlHistory.clearForward();
- same( $.mobile.urlHistory.stack.length, 1, "urlHistory.clearForward() clears the url stack after the active index" );
- });
-
- //url listening
- function testListening( prop ){
- var stillListening = false;
- $(document).bind("pagebeforehide", function(){
- stillListening = true;
- });
- location.hash = "foozball";
- setTimeout(function(){
- ok( prop == stillListening, prop + " = false disables default hashchange event handler");
- location.hash = "";
- prop = true;
- start();
- }, 1000);
- }
-
- asyncTest( "ability to disable our hash change event listening internally", function(){
- testListening( ! $.mobile.urlHistory.ignoreNextHashChange );
- });
-
- asyncTest( "ability to disable our hash change event listening globally", function(){
- testListening( $.mobile.hashListeningEnabled );
- });
-
- var testDataUrlHash = function( linkSelector, matches ) {
- $.testHelper.pageSequence([
- function(){ window.location.hash = ""; },
- function(){ $(linkSelector).click(); },
- function(){
- $.testHelper.assertUrlLocation(
- $.extend(matches, {
- report: "url or hash should match"
- })
- );
-
- start();
- }
- ]);
-
- stop();
- };
-
- test( "when loading a page where data-url is not defined on a sub element hash defaults to the url", function(){
- testDataUrlHash( "#non-data-url a", {hashOrPush: siteDirectory + "data-url-tests/non-data-url.html"} );
- });
-
- test( "data url works for nested paths", function(){
- var url = "foo/bar.html";
- testDataUrlHash( "#nested-data-url a", {hash: url, push: home + url} );
- });
-
- test( "data url works for single quoted paths and roles", function(){
- var url = "foo/bar/single.html";
- testDataUrlHash( "#single-quotes-data-url a", {hash: url, push: home + url} );
- });
-
- test( "data url works when role and url are reversed on the page element", function(){
- var url = "foo/bar/reverse.html";
- testDataUrlHash( "#reverse-attr-data-url a", {hash: url, push: home + url} );
- });
-
- asyncTest( "last entry choosen amongst multiple identical url history stack entries on hash change", function(){
- // make sure the stack is clear after initial page load an any other delayed page loads
- // TODO better browser state management
- $.mobile.urlHistory.stack = [];
- $.mobile.urlHistory.activeIndex = 0;
-
- $.testHelper.pageSequence([
- function(){ $.testHelper.openPage("#dup-history-first"); },
- function(){ $("#dup-history-first a").click(); },
- function(){ $("#dup-history-second a:first").click(); },
- function(){ $("#dup-history-first a").click(); },
- function(){ $("#dup-history-second a:last").click(); },
- function(){ $("#dup-history-dialog a:contains('Close')").click(); },
- function(){
-
- // fourth page (third index) in the stack to account for first page being hash manipulation,
- // the third page is dup-history-second which has two entries in history
- // the test is to make sure the index isn't 1 in this case, or the first entry for dup-history-second
- same($.mobile.urlHistory.activeIndex, 3, "should be the fourth page in the stack");
- start();
- }]);
- });
-
- asyncTest( "going back from a page entered from a dialog skips the dialog and goes to the previous page", function(){
- $.testHelper.pageSequence([
- // setup
- function(){ $.testHelper.openPage("#skip-dialog-first"); },
-
- // transition to the dialog
- function(){ $("#skip-dialog-first a").click(); },
-
- // transition to the second page
- function(){ $("#skip-dialog a").click(); },
-
- // transition past the dialog via data-rel=back link on the second page
- function(){ $("#skip-dialog-second a").click(); },
-
- // make sure we're at the first page and not the dialog
- function(){
- $.testHelper.assertUrlLocation({
- hash: "skip-dialog-first",
- push: home + "#skip-dialog-first",
- report: "should be the first page in the sequence"
- });
-
- start();
- }]);
- });
-
- asyncTest( "going forward from a page entered from a dialog skips the dialog and goes to the next page", function(){
- $.testHelper.pageSequence([
- // setup
- function(){ $.testHelper.openPage("#skip-dialog-first"); },
-
- // transition to the dialog
- function(){ $("#skip-dialog-first a").click(); },
-
- // transition to the second page
- function(){ $("#skip-dialog a").click(); },
-
- // transition to back past the dialog
- function(){ window.history.back(); },
-
- // transition to the second page past the dialog through history
- function(){ window.history.forward(); },
-
- // make sure we're on the second page and not the dialog
- function(){
- $.testHelper.assertUrlLocation({
- hash: "skip-dialog-second",
- push: home + "#skip-dialog-second",
- report: "should be the second page after the dialog"
- });
-
- start();
- }]);
- });
-
- asyncTest( "going back from a dialog triggered from a dialog should result in the first dialog ", function(){
- $.testHelper.pageSequence([
- // setup
- function(){ $.testHelper.openPage("#nested-dialog-page"); },
-
- // transition to the dialog
- function(){ $("#nested-dialog-page a").click(); },
-
- // transition to the second dialog
- function(){ $("#nested-dialog-first a").click(); },
-
- // transition to back to the first dialog
- function(){ window.history.back(); },
-
- // make sure we're on first dialog
- function(){
- same($(".ui-page-active")[0], $("#nested-dialog-first")[0], "should be the first dialog");
- start();
- }]);
- });
-
- asyncTest( "loading a relative file path after an embeded page works", function(){
- $.testHelper.pageSequence([
- // transition second page
- function(){ $.testHelper.openPage("#relative-after-embeded-page-first"); },
-
- // transition second page
- function(){ $("#relative-after-embeded-page-first a").click(); },
-
- // transition to the relative ajax loaded page
- function(){ $("#relative-after-embeded-page-second a").click(); },
-
- // make sure the page was loaded properly via ajax
- function(){
- // data attribute intentionally left without namespace
- same($(".ui-page-active").data("other"), "for testing", "should be relative ajax loaded page");
- start();
- }]);
- });
-
- asyncTest( "Page title updates properly when clicking back to previous page", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#relative-after-embeded-page-first");
- },
-
- function(){
- window.history.back();
- },
-
- function(){
- same(document.title, "jQuery Mobile Navigation Test Suite");
- start();
- }
- ]);
- });
-
- asyncTest( "Page title updates properly when clicking a link back to first page", function(){
- var title = document.title;
-
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#ajax-title-page");
- },
-
- function(){
- $("#titletest1").click();
- },
-
- function(){
- same(document.title, "Title Tag");
- $.mobile.activePage.find("#title-check-link").click();
- },
-
- function(){
- same(document.title, title);
- start();
- }
- ]);
- });
-
- asyncTest( "Page title updates properly from title tag when loading an external page", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#ajax-title-page");
- },
-
- function(){
- $("#titletest1").click();
- },
-
- function(){
- same(document.title, "Title Tag");
- start();
- }
- ]);
- });
-
- asyncTest( "Page title updates properly from data-title attr when loading an external page", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#ajax-title-page");
- },
-
- function(){
- $("#titletest2").click();
- },
-
- function(){
- same(document.title, "Title Attr");
- start();
- }
- ]);
- });
-
- asyncTest( "Page title updates properly from heading text in header when loading an external page", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#ajax-title-page");
- },
-
- function(){
- $("#titletest3").click();
- },
-
- function(){
- same(document.title, "Title Heading");
- start();
- }
- ]);
- });
-
- asyncTest( "Page links to the current active page result in the same active page", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#self-link");
- },
-
- function(){
- $("a[href='#self-link']").click();
- },
-
- function(){
- same($.mobile.activePage[0], $("#self-link")[0], "self-link page is still the active page" );
- start();
- }
- ]);
- });
-
- asyncTest( "links on subdirectory pages with query params append the params and load the page", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#data-url-tests/non-data-url.html");
- },
-
- function(){
- $("#query-param-anchor").click();
- },
-
- function(){
- $.testHelper.assertUrlLocation({
- hashOrPush: home + "data-url-tests/non-data-url.html?foo=bar",
- report: "the hash or url has query params"
- });
-
- ok($(".ui-page-active").jqmData("url").indexOf("?foo=bar") > -1, "the query params are in the data url");
- start();
- }
- ]);
- });
-
- asyncTest( "identical query param link doesn't add additional set of query params", function(){
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#data-url-tests/non-data-url.html");
- },
-
- function(){
- $("#query-param-anchor").click();
- },
-
- function(){
- $.testHelper.assertUrlLocation({
- hashOrPush: home + "data-url-tests/non-data-url.html?foo=bar",
- report: "the hash or url has query params"
- });
-
- $("#query-param-anchor").click();
- },
-
- function(){
- $.testHelper.assertUrlLocation({
- hashOrPush: home + "data-url-tests/non-data-url.html?foo=bar",
- report: "the hash or url still has query params"
- });
-
- start();
- }
- ]);
- });
-
- // Special handling inside navigation because query params must be applied to the hash
- // or absolute reference and dialogs apply extra information int the hash that must be removed
- asyncTest( "query param link from a dialog to itself should be a not add another dialog", function(){
- var firstDialogLoc;
-
- $.testHelper.pageSequence([
- // open our test page
- function(){
- $.testHelper.openPage("#dialog-param-link");
- },
-
- // navigate to the subdirectory page with the query link
- function(){
- $("#dialog-param-link a").click();
- },
-
- // navigate to the query param self reference link
- function(){
- $("#dialog-param-link-page a").click();
- },
-
- // attempt to navigate to the same link
- function(){
- // store the current hash for comparison (with one dialog hash key)
- firstDialogLoc = location.hash || location.href;
- $("#dialog-param-link-page a").click();
- },
-
- function(){
- same(location.hash || location.href, firstDialogLoc, "additional dialog hash key not added");
- start();
- }
- ]);
- });
-
- asyncTest( "query data passed as string to changePage is appended to URL", function(){
- $.testHelper.pageSequence([
- // open our test page
- function(){
- $.mobile.changePage( "form-tests/changepage-data.html", {
- data: "foo=1&bar=2"
- } );
- },
-
- function(){
- $.testHelper.assertUrlLocation({
- hashOrPush: home + "form-tests/changepage-data.html?foo=1&bar=2",
- report: "the hash or url still has query params"
- });
-
- start();
- }
- ]);
- });
-
- asyncTest( "query data passed as object to changePage is appended to URL", function(){
- $.testHelper.pageSequence([
- // open our test page
- function(){
- $.mobile.changePage( "form-tests/changepage-data.html", {
- data: {
- foo: 3,
- bar: 4
- }
- } );
- },
-
- function(){
- $.testHelper.assertUrlLocation({
- hashOrPush: home + "form-tests/changepage-data.html?foo=3&bar=4",
- report: "the hash or url still has query params"
- });
-
- start();
- }
- ]);
- });
-
- asyncTest( "refresh of a dialog url should not duplicate page", function(){
- $.testHelper.pageSequence([
- // open our test page
- function(){
- same($(".foo-class").length, 1, "should only have one instance of foo-class in the document");
- location.hash = "#foo&ui-state=dialog";
- },
-
- function(){
- $.testHelper.assertUrlLocation({
- hash: "foo&ui-state=dialog",
- push: home + "#foo&ui-state=dialog",
- report: "hash should match what was loaded"
- });
-
- same( $(".foo-class").length, 1, "should only have one instance of foo-class in the document" );
- start();
- }
- ]);
- });
-
- asyncTest( "internal form with no action submits to document URL", function(){
- $.testHelper.pageSequence([
- // open our test page
- function(){
- $.testHelper.openPage("#internal-no-action-form-page");
- },
-
- function(){
- $("#internal-no-action-form-page form").eq(0).submit();
- },
-
- function(){
- $.testHelper.assertUrlLocation({
- hashOrPush: home + "?foo=1&bar=2",
- report: "hash should match what was loaded"
- });
-
- start();
- }
- ]);
- });
-
- asyncTest( "external page containing form with no action submits to page URL", function(){
- $.testHelper.pageSequence([
- // open our test page
- function(){
- $.testHelper.openPage("#internal-no-action-form-page");
- },
-
- function(){
- $("#internal-no-action-form-page a").eq(0).click();
- },
-
- function(){
- $("#external-form-no-action-page form").eq(0).submit();
- },
-
- function(){
- $.testHelper.assertUrlLocation({
- hashOrPush: home + "form-tests/form-no-action.html?foo=1&bar=2",
- report: "hash should match page url and not document url"
- });
-
- start();
- }
- ]);
- });
-
- asyncTest( "handling of active button state when navigating", 1, function(){
-
- $.testHelper.pageSequence([
- // open our test page
- function(){
- $.testHelper.openPage("#active-state-page1");
- },
-
- function(){
- $("#active-state-page1 a").eq(0).click();
- },
-
- function(){
- $("#active-state-page2 a").eq(0).click();
- },
-
- function(){
- ok(!$("#active-state-page1 a").hasClass( $.mobile.activeBtnClass ), "No button should not have class " + $.mobile.activeBtnClass );
- start();
- }
- ]);
- });
-
- // issue 2444 https://github.com/jquery/jquery-mobile/issues/2444
- // results from preventing spurious hash changes
- asyncTest( "dialog should return to its parent page when open and closed multiple times", function() {
- $.testHelper.pageSequence([
- // open our test page
- function(){
- $.testHelper.openPage("#default-trans-dialog");
- },
-
- function(){
- $.mobile.activePage.find( "a" ).click();
- },
-
- function(){
- window.history.back();
- },
-
- function(){
- same( $.mobile.activePage[0], $( "#default-trans-dialog" )[0] );
- $.mobile.activePage.find( "a" ).click();
- },
-
- function(){
- window.history.back();
- },
-
- function(){
- same( $.mobile.activePage[0], $( "#default-trans-dialog" )[0] );
- start();
- }
- ]);
- });
-
- asyncTest( "clicks with middle mouse button are ignored", function() {
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage( "#odd-clicks-page" );
- },
-
- function() {
- $( "#right-or-middle-click" ).click();
- },
-
- // make sure the page is opening first without the mocked button click value
- // only necessary to prevent issues with test specific fixtures
- function() {
- same($.mobile.activePage[0], $("#odd-clicks-page-dest")[0]);
- $.testHelper.openPage( "#odd-clicks-page" );
-
- // mock the which value to simulate a middle click
- $.Event.prototype.which = 2;
- },
-
- function() {
- $( "#right-or-middle-click" ).click();
- },
-
- function( timeout ) {
- ok( timeout, "page event handler timed out due to ignored click" );
- ok($.mobile.activePage[0] !== $("#odd-clicks-page-dest")[0], "pages are not the same");
- start();
- }
- ]);
- });
-
- asyncTest( "disabling link binding disables navigation via links and highlighting", function() {
- $.mobile.linkBindingEnabled = false;
-
- $.testHelper.pageSequence([
- function() {
- $.testHelper.openPage("#bar");
- },
-
- function() {
- $.mobile.activePage.find( "a" ).click();
- },
-
- function( timeout ) {
- ok( !$.mobile.activePage.find( "a" ).hasClass( $.mobile.activeBtnClass ), "vlick handler doesn't add the activebtn class" );
- ok( timeout, "no page change was fired" );
- start();
- }
- ]);
- });
-
- asyncTest( "handling of button active state when navigating by clicking back button", 1, function(){
- $.testHelper.pageSequence([
- // open our test page
- function(){
- $.testHelper.openPage("#active-state-page1");
- },
-
- function(){
- $("#active-state-page1 a").eq(0).click();
- },
-
- function(){
- $("#active-state-page2 a").eq(1).click();
- },
-
- function(){
- $("#active-state-page1 a").eq(0).click();
- },
-
- function(){
- ok(!$("#active-state-page2 a").hasClass( $.mobile.activeBtnClass ), "No button should not have class " + $.mobile.activeBtnClass );
- start();
- }
- ]);
- });
-
- asyncTest( "can navigate to dynamically injected page with dynamically injected link", function(){
- $.testHelper.pageSequence([
- // open our test page
- function(){
- $.testHelper.openPage("#inject-links-page");
- },
-
- function(){
- var $ilpage = $( "#inject-links-page" ),
- $link = $( "<a href='#injected-test-page'>injected-test-page link</a>" );
-
- // Make sure we actually navigated to the expected page.
- ok( $.mobile.activePage[ 0 ] == $ilpage[ 0 ], "navigated successfully to #inject-links-page" );
-
- // Now dynamically insert a page.
- $ilpage.parent().append( "<div data-role='page' id='injected-test-page'>testing...</div>" );
-
- // Now inject a link to this page dynamically and attempt to navigate
- // to the page we just inserted.
- $link.appendTo( $ilpage ).click();
- },
-
- function(){
- // Make sure we actually navigated to the expected page.
- ok( $.mobile.activePage[ 0 ] == $( "#injected-test-page" )[ 0 ], "navigated successfully to #injected-test-page" );
-
- start();
- }
- ]);
- });
-
- asyncTest( "application url with dialogHashKey loads application's first page", function(){
- $.testHelper.pageSequence([
- // open our test page
- function(){
- // Navigate to any page except the first page of the application.
- $.testHelper.openPage("#foo");
- },
-
- function(){
- ok( $.mobile.activePage[ 0 ] === $( "#foo" )[ 0 ], "navigated successfully to #foo" );
-
- // Now navigate to an hash that contains just a dialogHashKey.
- $.mobile.changePage("#" + $.mobile.dialogHashKey);
- },
-
- function(){
- // Make sure we actually navigated to the first page.
- ok( $.mobile.activePage[ 0 ] === $.mobile.firstPage[ 0 ], "navigated successfully to first-page" );
-
- // Now make sure opening the page didn't result in page duplication.
- ok( $.mobile.firstPage.hasClass( "first-page" ), "first page has expected class" );
- same( $( ".first-page" ).length, 1, "first page was not duplicated" );
-
- start();
- }
- ]);
- });
-
- asyncTest( "navigate to non-existent internal page throws pagechangefailed", function(){
- var pagechangefailed = false,
- pageChangeFailedCB = function( e ) {
- pagechangefailed = true;
- }
-
- $( document ).bind( "pagechangefailed", pageChangeFailedCB );
-
- $.testHelper.pageSequence([
- // open our test page
- function(){
- // Make sure there's only one copy of the first-page in the DOM to begin with.
- ok( $.mobile.firstPage.hasClass( "first-page" ), "first page has expected class" );
- same( $( ".first-page" ).length, 1, "first page was not duplicated" );
-
- // Navigate to any page except the first page of the application.
- $.testHelper.openPage("#foo");
- },
-
- function(){
- var $foo = $( "#foo" );
- ok( $.mobile.activePage[ 0 ] === $foo[ 0 ], "navigated successfully to #foo" );
- same( pagechangefailed, false, "no page change failures" );
-
- // Now navigate to a non-existent page.
- $foo.find( "#bad-internal-page-link" ).click();
- },
-
- function(){
- // Make sure a pagechangefailed event was triggered.
- same( pagechangefailed, true, "pagechangefailed dispatched" );
-
- // Make sure we didn't navigate away from #foo.
- ok( $.mobile.activePage[ 0 ] === $( "#foo" )[ 0 ], "did not navigate away from #foo" );
-
- // Now make sure opening the page didn't result in page duplication.
- same( $( ".first-page" ).length, 1, "first page was not duplicated" );
-
- $( document ).unbind( "pagechangefailed", pageChangeFailedCB );
-
- start();
- }
- ]);
- });
-
- asyncTest( "prefetched links with data rel dialog result in a dialog", function() {
- $.testHelper.pageSequence([
- // open our test page
- function(){
- // Navigate to any page except the first page of the application.
- $.testHelper.openPage("#prefetched-dialog-page");
- },
-
- function() {
- $("#prefetched-dialog-link").click();
- },
-
- function() {
- ok( $.mobile.activePage.is(".ui-dialog"), "prefetched page is rendered as a dialog" );
- start();
- }
- ]);
- });
-
- asyncTest( "first page gets reloaded if pruned from the DOM", function(){
- var hideCallbackTriggered = false;
-
- function hideCallback( e, data )
- {
- var page = e.target;
- ok( ( page === $.mobile.firstPage[ 0 ] ), "hide called with prevPage set to firstPage");
- if ( page === $.mobile.firstPage[ 0 ] ) {
- $( page ).remove();
- }
- hideCallbackTriggered = true;
- }
-
- $(document).bind('pagehide', hideCallback);
-
- $.testHelper.pageSequence([
- function(){
- // Make sure the first page is actually in the DOM.
- ok( $.mobile.firstPage.parent().length !== 0, "first page is currently in the DOM" );
-
- // Make sure the first page is the active page.
- ok( $.mobile.activePage[ 0 ] === $.mobile.firstPage[ 0 ], "first page is the active page" );
-
- // Now make sure the first page has an id that we can use to reload it.
- ok( $.mobile.firstPage[ 0 ].id, "first page has an id" );
-
- // Make sure there is only one first page in the DOM.
- same( $( ".first-page" ).length, 1, "only one instance of the first page in the DOM" );
-
- // Navigate to any page except the first page of the application.
- $.testHelper.openPage("#foo");
- },
-
- function(){
- // Make sure the active page is #foo.
- ok( $.mobile.activePage[ 0 ] === $( "#foo" )[ 0 ], "navigated successfully to #foo" );
-
- // Make sure our hide callback was triggered.
- ok( hideCallbackTriggered, "hide callback was triggered" );
-
- // Make sure the first page was actually pruned from the document.
- ok( $.mobile.firstPage.parent().length === 0, "first page was pruned from the DOM" );
- same( $( ".first-page" ).length, 0, "no instance of the first page in the DOM" );
-
- // Remove our hideCallback.
- $(document).unbind('pagehide', hideCallback);
-
- // Navigate back to the first page!
- $.testHelper.openPage( "#" + $.mobile.firstPage[0].id );
- },
-
- function(){
- var firstPage = $( ".first-page" );
-
- // We should only have one first page in the document at any time!
- same( firstPage.length, 1, "single instance of first page recreated in the DOM" );
-
- // Make sure the first page in the DOM is actually a different DOM element than the original
- // one we started with.
- ok( $.mobile.firstPage[ 0 ] !== firstPage[ 0 ], "first page is a new DOM element");
-
- // Make sure we actually navigated to the new first page.
- ok( $.mobile.activePage[ 0 ] === firstPage[ 0 ], "navigated successfully to new first-page");
-
- // Reset the $.mobile.firstPage for subsequent tests.
- // XXX: Should we just get rid of the new one and restore the old?
- $.mobile.firstPage = $.mobile.activePage;
-
- start();
- }
- ]);
- });
-})(jQuery);
+++ /dev/null
-/*
- * mobile navigation unit tests
- */
-(function($){
- var perspective = "viewport-flip",
- transitioning = "ui-mobile-viewport-transitioning",
- animationCompleteFn = $.fn.animationComplete,
-
- //TODO centralize class names?
- transitionTypes = "in out fade slide flip reverse pop",
-
- isTransitioning = function(page){
- return $.grep(transitionTypes.split(" "), function(className, i){
- return page.hasClass(className);
- }).length > 0;
- },
-
- isTransitioningIn = function(page){
- return page.hasClass("in") && isTransitioning(page);
- },
-
- //animationComplete callback queue
- callbackQueue = [],
-
- finishPageTransition = function(){
- callbackQueue.pop()();
- },
-
- clearPageTransitionStack = function(){
- stop();
- var checkTransitionStack = function(){
- if(callbackQueue.length>0) {
- setTimeout(function(){
- finishPageTransition();
- checkTransitionStack();
- },0);
- }
- else {
- start();
- }
- };
- checkTransitionStack();
- },
-
- //wipe all urls
- clearUrlHistory = function(){
- $.mobile.urlHistory.stack = [];
- $.mobile.urlHistory.activeIndex = 0;
- };
-
-
- module('jquery.mobile.navigation.js', {
- setup: function(){
- //stub to prevent class removal
- $.fn.animationComplete = function(callback){
- callbackQueue.unshift(callback);
- };
-
- clearPageTransitionStack();
- clearUrlHistory();
- },
-
- teardown: function(){
- // unmock animation complete
- $.fn.animationComplete = animationCompleteFn;
- }
- });
-
- test( "changePage applys perspective class to mobile viewport for flip", function(){
- $("#foo > a").click();
-
- ok($("body").hasClass(perspective), "has perspective class");
- });
-
- test( "changePage does not apply perspective class to mobile viewport for transitions other than flip", function(){
- $("#bar > a").click();
-
- ok(!$("body").hasClass(perspective), "doesn't have perspective class");
- });
-
- test( "changePage applys transition class to mobile viewport for default transition", function(){
- $("#baz > a").click();
-
- ok($("body").hasClass(transitioning), "has transitioning class");
- });
-
- test( "explicit transition preferred for page navigation reversal (ie back)", function(){
- $("#fade-trans > a").click();
- stop();
- setTimeout(function(){
- finishPageTransition();
- $("#flip-trans > a").click();
- setTimeout(function(){
- finishPageTransition();
- $("#fade-trans > a").click();
- setTimeout(function(){
- ok($("#flip-trans").hasClass("fade"), "has fade class");
- start();
- },0);
- },0);
- },0);
- });
-
- test( "default transition is slide", function(){
- $("#default-trans > a").click();
- stop();
- setTimeout(function(){
- ok($("#no-trans").hasClass("slide"), "has slide class");
- start();
- },0);
- });
-
- test( "changePage queues requests", function(){
- var firstPage = $("#foo"),
- secondPage = $("#bar");
-
- $.mobile.changePage(firstPage);
- $.mobile.changePage(secondPage);
-
- stop();
- setTimeout(function(){
- ok(isTransitioningIn(firstPage), "first page begins transition");
- ok(!isTransitioningIn(secondPage), "second page doesn't transition yet");
-
- finishPageTransition();
-
- setTimeout(function(){
- ok(!isTransitioningIn(firstPage), "first page transition should be complete");
- ok(isTransitioningIn(secondPage), "second page should begin transitioning");
- start();
- },0);
- },0);
- });
-
- test( "default transition is pop for a dialog", function(){
- expect( 1 );
- stop();
- setTimeout(function(){
- $("#default-trans-dialog > a").click();
-
- ok($("#no-trans-dialog").hasClass("pop"), "expected the pop class to be present but instead was " + $("#no-trans-dialog").attr('class'));
-
- start();
- }, 900);
- });
-
- test( "animationComplete return value", function(){
- $.fn.animationComplete = animationCompleteFn;
- equals($("#foo").animationComplete(function(){})[0], $("#foo")[0]);
- });
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Navigation Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
-
-
- <link rel="stylesheet" href="../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script type="text/javascript" src="navigation_dialog_pushstate.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Navigation Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div data-nstest-role="page">
- <a href="#dialog">open the dialog</a>
-</div>
-
-<div id="dialog" data-nstest-role="dialog">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Dialog</h1>
- </div>
-</div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Page Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
-
-
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="page_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Page Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="qunit-fixture">
- <div data-nstest-role="page">
- <div data-nstest-role="header">
- <div>
- <a href="foo">foo</a>
- </div>
- <a href="foo">foo</a>
- </div><!-- /header -->
-
- <div data-nstest-role="footer">
- <div>
- <a href="foo">foo</a>
- </div>
-
- <a href="foo">foo</a>
- </div><!-- /header -->
-
- <div class="ui-bar">
- <div>
- <a href="foo">foo</a>
- </div>
-
- <a href="foo">foo</a>
- </div>
- </div>
-</body>
-</html>
+++ /dev/null
-/*
- * mobile page unit tests
- */
-(function($){
- var libName = 'jquery.mobile.page.js';
-
- module(libName);
-
- test( "nested header anchors aren't altered", function(){
- ok(!$('.ui-header > div > a').hasClass('ui-btn'));
- });
-
- test( "nested footer anchors aren't altered", function(){
- ok(!$('.ui-footer > div > a').hasClass('ui-btn'));
- });
-
- test( "nested bar anchors aren't styled", function(){
- ok(!$('.ui-bar > div > a').hasClass('ui-btn'));
- });
-
- test( "unnested footer anchors are styled", function(){
- ok($('.ui-footer > a').hasClass('ui-btn'));
- });
-
- test( "unnested footer anchors are styled", function(){
- ok($('.ui-footer > a').hasClass('ui-btn'));
- });
-
- test( "unnested bar anchors are styled", function(){
- ok($('.ui-bar > a').hasClass('ui-btn'));
- });
-
- test( "no auto-generated back button exists on first page", function(){
- ok( !$(".ui-header > :jqmData(rel='back')").length );
- });
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Page Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
-
-
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="page_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Page Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="qunit-fixture">
- <div id="a" data-nstest-role="page"></div>
-
-
- <div id="b" data-nstest-role="page" data-nstest-theme="e"></div>
-
- <div id="c" data-nstest-role="page"></div>
-</div>
-</body>
-</html>
+++ /dev/null
-/*
- * mobile page unit tests
- */
-(function($){
- var libName = 'jquery.mobile.page.sections.js',
- themedefault = $.mobile.page.prototype.options.theme,
- keepNative = $.mobile.page.prototype.options.keepNative;
-
- module(libName, {
- setup: function() {
- $.mobile.page.prototype.options.keepNative = keepNative;
- }
- });
-
-
- var eventStack = [],
- etargets = [],
- cEvents=[],
- cTargets=[];
-
-
- $( document ).bind( "pagebeforecreate pagecreate", function( e ){
- eventStack.push( e.type );
- etargets.push( e.target );
- });
-
- $("#c").live( "pagebeforecreate", function( e ){
-
- cEvents.push( e.type );
- cTargets.push( e.target );
- return false;
- });
-
- test( "pagecreate event fires when page is created", function(){
- ok( eventStack[0] === "pagecreate" || eventStack[1] === "pagecreate" );
- });
-
- test( "pagebeforecreate event fires when page is created", function(){
- ok( eventStack[0] === "pagebeforecreate" || eventStack[1] === "pagebeforecreate" );
- });
-
- test( "pagebeforecreate fires before pagecreate", function(){
- ok( eventStack[0] === "pagebeforecreate" );
- });
-
- test( "target of pagebeforecreate event was div #a", function(){
- ok( $( etargets[0] ).is("#a") );
- });
-
- test( "target of pagecreate event was div #a" , function(){
- ok( $( etargets[0] ).is("#a") );
- });
-
- test( "page element has ui-page class" , function(){
- ok( $( "#a" ).hasClass( "ui-page" ) );
- });
-
- test( "page element has default body theme when not overidden" , function(){
- ok( $( "#a" ).hasClass( "ui-body-" + themedefault ) );
- });
-
- test( "B page has non-default theme matching its data-theme attr" , function(){
- $( "#b" ).page();
- var btheme = $( "#b" ).jqmData( "theme" );
- ok( $( "#b" ).hasClass( "ui-body-" + btheme ) );
- });
-
- test( "Binding to pagebeforecreate and returning false prevents pagecreate event from firing" , function(){
- $("#c").page();
-
- ok( cEvents[0] === "pagebeforecreate" );
- ok( !cTargets[1] );
- });
-
- test( "Binding to pagebeforecreate and returning false prevents classes from being applied to page" , function(){
- ok( !$( "#b" ).hasClass( "ui-body-" + themedefault ) );
- ok( !$( "#b" ).hasClass( "ui-page" ) );
- });
-
- test( "keepNativeSelector returns the default where keepNative is not different", function() {
- var pageProto = $.mobile.page.prototype;
- pageProto.options.keepNative = pageProto.options.keepNativeDefault;
-
- same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
- });
-
- test( "keepNativeSelector returns the default where keepNative is empty, undefined, whitespace", function() {
- var pageProto = $.mobile.page.prototype;
-
- pageProto.options.keepNative = "";
- same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
-
- pageProto.options.keepNative = undefined;
- same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
-
- pageProto.options.keepNative = " ";
- same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
- });
-
- test( "keepNativeSelector returns a selector joined with the default", function() {
- var pageProto = $.mobile.page.prototype;
-
- pageProto.options.keepNative = "foo, bar";
- same(pageProto.keepNativeSelector(), "foo, bar, " + pageProto.options.keepNativeDefault);
- });
-})(jQuery);
+++ /dev/null
-$(function() {
- var Runner = function( ) {
- var self = this;
-
- $.extend( self, {
- frame: window.frames[ "testFrame" ],
-
- testTimeout: 3 * 60 * 1000,
-
- $frameElem: $( "#testFrame" ),
-
- assertionResultPrefix: "assertion result for test:",
-
- onTimeout: QUnit.start,
-
- onFrameLoad: function() {
- // establish a timeout for a given suite in case of async tests hanging
- self.testTimer = setTimeout( self.onTimeout, self.testTimeout );
-
- // it might be a redirect with query params for push state
- // tests skip this call and expect another
- if( !self.frame.QUnit ) {
- self.$frameElem.one( "load", self.onFrameLoad );
- return;
- }
-
- // when the QUnit object reports done in the iframe
- // run the onFrameDone method
- self.frame.QUnit.done = self.onFrameDone;
- self.frame.QUnit.testDone = self.onTestDone;
- },
-
- onTestDone: function( result ) {
- QUnit.ok( !(result.failed > 0), result.name );
- self.recordAssertions( result.total - result.failed, result.name );
- },
-
- onFrameDone: function( failed, passed, total, runtime ){
- // make sure we don't time out the tests
- clearTimeout( self.testTimer );
-
- // TODO decipher actual cause of multiple test results firing twice
- // clear the done call to prevent early completion of other test cases
- self.frame.QUnit.done = $.noop;
- self.frame.QUnit.testDone = $.noop;
-
- // hide the extra assertions made to propogate the count
- // to the suite level test
- self.hideAssertionResults();
-
- // continue on to the next suite
- QUnit.start();
- },
-
- recordAssertions: function( count, parentTest ) {
- for( var i = 0; i < count; i++ ) {
- ok( true, self.assertionResultPrefix + parentTest );
- }
- },
-
- hideAssertionResults: function() {
- $( "li:not([id]):contains('" + self.assertionResultPrefix + "')" ).hide();
- },
-
- exec: function( data ) {
- var template = self.$frameElem.attr( "data-src" );
-
- $.each( data.testPages, function(i, dir) {
- QUnit.asyncTest( dir, function() {
- self.dir = dir;
- self.$frameElem.one( "load", self.onFrameLoad );
- self.$frameElem.attr( "src", template.replace("{{testdir}}", dir) );
- });
- });
-
- // having defined all suite level tests let QUnit run
- QUnit.start();
- }
- });
- };
-
- // prevent qunit from starting the test suite until all tests are defined
- QUnit.begin = function( ) {
- this.config.autostart = false;
- };
-
- // get the test directories
- $.get( "ls.php", (new Runner()).exec );
-});
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Select Events Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../external/qunit.js"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
- <script src="../../../js/"></script>
- <script src="select_cached.js"></script>
-
- <link rel="stylesheet" href="../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../external/qunit.css"/>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Select Event Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-<div id="default" data-nstest-role="page"></div>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Select Events Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../external/qunit.js"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
- <script src="../../../js/"></script>
- <script src="select_events.js"></script>
- <script src="select_native.js"></script>
- <script src="select_cached.js"></script>
- <script src="select_core.js"></script>
-
- <link rel="stylesheet" href="../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../external/qunit.css"/>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Select Event Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="default" data-nstest-role="page" data-nstest-theme="c">
- <div data-nstest-role="fieldcontain" id="select-choice-few-container">
- <select name="select-choice-few" id="select-choice-few" data-nstest-native-menu="false">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div data-nstest-role="fieldcontain" id="native-select-choice-few-container">
- <label for="native-select-choice-few" class="select">Choose shipping method:</label>
- <select name="native-select-choice-few" id="native-select-choice-few" data-nstest-native-menu="true">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div data-nstest-role="fieldcontain" id="select-choice-native-container">
- <select name="select-choice-native" id="select-choice-native" data-nstest-native-menu="true">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div data-nstest-role="fieldcontain" id="select-choice-global-native-container">
- <select name="select-choice-global-native" id="select-choice-global-native" data-nstest-native-menu="false">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div data-nstest-role="fieldcontain" id="select-choice-focus-test">
- <select name="select-choice-focus-test" id="select-choice-focus-test" data-nstest-native-menu="false">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div data-nstest-role="fieldcontain" id="select-choice-many-container-1">
- <label for="select-choice-many-1" class="select">Your state:</label>
- <select name="select-choice-many-1" id="select-choice-many-1" data-nstest-native-menu="false">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
- <div data-nstest-role="fieldcontain" id="select-choice-many-container">
- <label for="select-choice-many" class="select">Your state:</label>
- <select name="select-choice-many" id="select-choice-many" data-nstest-native-menu="false">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
- <div data-nstest-role="fieldcontain" id="select-choice-many-container-hash-check">
- <label for="select-choice-many-hash-check" class="select">Your state:</label>
- <select name="select-choice-many-hash-check" id="select-choice-many-hash-check" data-nstest-native-menu="false">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
- <div data-nstest-role="fieldcontain" id="select-choice-many-container-many-clicks">
- <label for="select-choice-many-many-clicks" class="select">Your state:</label>
- <select name="select-choice-many-many-clicks" id="select-choice-many-many-clicks" data-nstest-native-menu="false">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
- <div data-nstest-role="fieldcontain" id="select-offscreen-container">
- <style>
- /* keep the select small and close to the screen border to test rendering */
- #select-offscreen-container {
- width: 100px;
- position: absolute;
- left: 0px;
- top: 0px;
- }
- </style>
-
- <select name="select-choice-few" id="select-offscreen" data-nstest-native-menu="false">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div data-nstest-role="fieldcontain" id="select-long-option-label-container">
- <select name="select-long-option-label" id="select-long-option-label" data-nstest-native-menu="false">
- <option value="short">Choice 1</option>
- <option value="long">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</option>
- </select>
- </div>
-
- <select name="native-refresh" id="native-refresh">
- <option value="-1">default</option>
- <option value="-1">other</option>
- </select>
-
- <select name="custom-refresh" id="custom-refresh" data-nstest-native-menu="false">
- <option value="-1">default</option>
- </select>
-
- <select name="custom-refresh-opts-list" id="custom-refresh-opts-list" data-nstest-native-menu="false">
- <option value="-1">default</option>
- </select>
-
- <select name="non-parent-themed" id="non-parent-themed" data-nstest-native-menu="false" data-nstest-theme="a">
- <option value="-1">default</option>
- </select>
-
- <select name="parent-themed" id="parent-themed" data-nstest-native-menu="false">
- <option value="-1">default</option>
- </select>
-
- <select name="encoded-option" id="encoded-option" data-nstest-native-menu="false">
- <option><script>window.encodedValueIsDefined = true;</script></option>
- </select>
-
- <select name="keep-native" id="keep-native" class="should-be-native">
- <option></option>
- </select>
-</div>
-
-
-<div id="enhancetest">
- <select name="select-enhancetest" id="select-enhancetest">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
-</div>
-
-</body>
-</html>
+++ /dev/null
-/*
- * mobile select unit tests
- */
-
-(function($){
- var resetHash;
-
- resetHash = function(timeout){
- $.testHelper.openPage( location.hash.indexOf("#default") >= 0 ? "#" : "#default" );
- };
-
- // https://github.com/jquery/jquery-mobile/issues/2181
- asyncTest( "dialog sized select should alter the value of its parent select", function(){
- var selectButton, value;
-
- $.testHelper.pageSequence([
- resetHash,
-
- function(){
- $.mobile.changePage( "cached.html" );
- },
-
- function(){
- selectButton = $( "#cached-page-select" ).siblings( 'a' );
- selectButton.click();
- },
-
- function(){
- ok( $.mobile.activePage.hasClass('ui-dialog'), "the dialog came up" );
- var option = $.mobile.activePage.find( "li a" ).not(":contains('" + selectButton.text() + "')").last();
- value = option.text();
- option.click();
- },
-
- function(){
- same( value, selectButton.text(), "the selected value is propogated back to the button text" );
- start();
- }
- ]);
- });
-
- // https://github.com/jquery/jquery-mobile/issues/2181
- asyncTest( "dialog sized select should prevent the removal of its parent page from the dom", function(){
- var selectButton, parentPageId;
-
- expect( 2 );
-
- $.testHelper.pageSequence([
- resetHash,
-
- function(){
- $.mobile.changePage( "cached.html" );
- },
-
- function(){
- selectButton = $.mobile.activePage.find( "#cached-page-select" ).siblings( 'a' );
- parentPageId = $.mobile.activePage.attr( 'id' );
- same( $("#" + parentPageId).length, 1, "establish the parent page exists" );
- selectButton.click();
- },
-
- function(){
- same( $( "#" + parentPageId).length, 1, "make sure parent page is still there after opening the dialog" );
- $.mobile.activePage.find( "li a" ).last().click();
- },
-
- start
- ]);
- });
-
- asyncTest( "dialog sized select shouldn't rebind its parent page remove handler when closing, if the parent page domCache option is true", function(){
- expect( 3 );
-
- $.testHelper.pageSequence([
- resetHash,
-
- function(){
- $.mobile.changePage( "cached-dom-cache-true.html" );
- },
-
- function(){
- $.mobile.activePage.find( "#domcache-page-select" ).siblings( 'a' ).click();
- },
-
- function(){
- ok( $.mobile.activePage.hasClass('ui-dialog'), "the dialog came up" );
- $.mobile.activePage.find( "li a" ).last().click();
- },
-
- function(){
- ok( $.mobile.activePage.is( "#dialog-select-parent-domcache-test" ), "the dialog closed" );
- $.mobile.changePage( $( "#default" ) );
- },
-
- function(){
- same( $("#dialog-select-parent-domcache-test").length, 1, "make sure the select parent page is still cached in the dom after changing page" );
- start();
- }
- ]);
- });
-
- asyncTest( "menupage is removed when the parent page is removed", function(){
- var dialogCount = $(":jqmData(role='dialog')").length;
-
- $.testHelper.pageSequence([
- resetHash,
-
- function(){
-
- $.mobile.changePage( "uncached-dom-cached-false.html" );
- },
-
- function(){
- same( $(":jqmData(role='dialog')").length, dialogCount + 1 );
- window.history.back();
- },
-
- function() {
- same( $(":jqmData(role='dialog')").length, dialogCount );
- start();
- }
- ]);
- });
-})(jQuery);
\ No newline at end of file
+++ /dev/null
-/*
- * mobile select unit tests
- */
-
-(function($){
- var libName = "jquery.mobile.forms.select.js",
- originalDefaultDialogTrans = $.mobile.defaultDialogTransition,
- originalDefTransitionHandler = $.mobile.defaultTransitionHandler,
- originalGetEncodedText = $.fn.getEncodedText,
- resetHash, closeDialog;
-
- resetHash = function(timeout){
- $.testHelper.openPage( location.hash.indexOf("#default") >= 0 ? "#" : "#default" );
- };
-
- closeDialog = function(timeout){
- $.mobile.activePage.find("li a").first().click();
- };
-
- module(libName, {
- teardown: function(){
- $.mobile.defaultDialogTransition = originalDefaultDialogTrans;
- $.mobile.defaultTransitionHandler = originalDefTransitionHandler;
-
- $.fn.getEncodedText = originalGetEncodedText;
- window.encodedValueIsDefined = undefined;
- }
- });
-
- asyncTest( "firing a click at least 400 ms later on the select screen overlay does close it", function(){
- $.testHelper.sequence([
- function(){
- // bring up the smaller choice menu
- ok($("#select-choice-few-container a").length > 0, "there is in fact a button in the page");
- $("#select-choice-few-container a").trigger("click");
- },
-
- function(){
- //select the first menu item
- $("#select-choice-few-menu a:first").click();
- },
-
- function(){
- same($("#select-choice-few-menu").parent(".ui-selectmenu-hidden").length, 1);
- start();
- }
- ], 1000);
- });
-
- asyncTest( "a large select menu should use the default dialog transition", function(){
- var select;
-
- $.testHelper.pageSequence([
- resetHash,
-
- function(timeout){
- select = $("#select-choice-many-container-1 a");
-
- //set to something else
- $.mobile.defaultTransitionHandler = $.testHelper.decorate({
- fn: $.mobile.defaultTransitionHandler,
-
- before: function(name){
- same(name, $.mobile.defaultDialogTransition);
- }
- });
-
- // bring up the dialog
- select.trigger("click");
- },
-
- closeDialog,
-
- start
- ]);
- });
-
- asyncTest( "custom select menu always renders screen from the left", function(){
- var select;
-
- expect( 1 );
-
- $.testHelper.sequence([
- resetHash,
-
- function(){
- select = $("ul#select-offscreen-menu");
- $("#select-offscreen-container a").trigger("click");
- },
-
- function(){
- ok(select.offset().left >= 30, "offset from the left is greater than or equal to 30px" );
- start();
- }
- ], 1000);
- });
-
- asyncTest( "selecting an item from a dialog sized custom select menu leaves no dialog hash key", function(){
- var dialogHashKey = "ui-state=dialog";
-
- $.testHelper.pageSequence([
- resetHash,
-
- function(timeout){
- $("#select-choice-many-container-hash-check a").click();
- },
-
- function(){
- ok(location.hash.indexOf(dialogHashKey) > -1);
- closeDialog();
- },
-
- function(){
- same(location.hash.indexOf(dialogHashKey), -1);
- start();
- }
- ]);
- });
-
- asyncTest( "dialog sized select menu opened many times remains a dialog", function(){
- var dialogHashKey = "ui-state=dialog",
-
- openDialogSequence = [
- resetHash,
-
- function(){
- $("#select-choice-many-container-many-clicks a").click();
- },
-
- function(){
- ok(location.hash.indexOf(dialogHashKey) > -1, "hash should have the dialog hash key");
- closeDialog();
- }
- ],
-
- sequence = openDialogSequence.concat(openDialogSequence).concat([start]);
-
- $.testHelper.sequence(sequence, 1000);
- });
-
- test( "make sure the label for the select gets the ui-select class", function(){
- ok( $( "#native-select-choice-few-container label" ).hasClass( "ui-select" ), "created label has ui-select class" );
- });
-
- module("Non native menus", {
- setup: function() {
- $.mobile.selectmenu.prototype.options.nativeMenu = false;
- },
- teardown: function() {
- $.mobile.selectmenu.prototype.options.nativeMenu = true;
- }
- });
-
- asyncTest( "a large select option should not overflow", function(){
- // https://github.com/jquery/jquery-mobile/issues/1338
- var menu, select;
-
- $.testHelper.sequence([
- resetHash,
-
- function(){
- select = $("#select-long-option-label");
- // bring up the dialog
- select.trigger("click");
- },
-
- function() {
- menu = $(".ui-selectmenu-list");
-
- equal(menu.width(), menu.find("li:nth-child(2) .ui-btn-text").width(), "ui-btn-text element should not overflow");
- start();
- }
- ], 500);
- });
-
- asyncTest( "using custom refocuses the button after close", function() {
- var select, button, triggered = false;
-
- expect( 1 );
-
- $.testHelper.sequence([
- resetHash,
-
- function() {
- select = $("#select-choice-focus-test");
- button = select.find( "a" );
- button.trigger( "click" );
- },
-
- function() {
- // NOTE this is called twice per triggered click
- button.focus(function() {
- triggered = true;
- });
-
- $(".ui-selectmenu-screen:not(.ui-screen-hidden)").trigger("click");
- },
-
- function(){
- ok(triggered, "focus is triggered");
- start();
- }
- ], 5000);
- });
-
- asyncTest( "selected items are highlighted", function(){
- $.testHelper.sequence([
- resetHash,
-
- function(){
- // bring up the smaller choice menu
- ok($("#select-choice-few-container a").length > 0, "there is in fact a button in the page");
- $("#select-choice-few-container a").trigger("click");
- },
-
- function(){
- var firstMenuChoice = $("#select-choice-few-menu li:first");
- ok( firstMenuChoice.hasClass( $.mobile.activeBtnClass ),
- "default menu choice has the active button class" );
-
- $("#select-choice-few-menu a:last").click();
- },
-
- function(){
- // bring up the menu again
- $("#select-choice-few-container a").trigger("click");
- },
-
- function(){
- var lastMenuChoice = $("#select-choice-few-menu li:last");
- ok( lastMenuChoice.hasClass( $.mobile.activeBtnClass ),
- "previously slected item has the active button class" );
-
- // close the dialog
- lastMenuChoice.find( "a" ).click();
- },
-
- start
- ], 1000);
- });
-
- test( "enabling and disabling", function(){
- var select = $( "select" ).first(), button;
-
- button = select.siblings( "a" ).first();
-
- select.selectmenu( 'disable' );
- same( select.attr('disabled'), "disabled", "select is disabled" );
- ok( button.hasClass("ui-disabled"), "disabled class added" );
- same( button.attr('aria-disabled'), "true", "select is disabled" );
- same( select.selectmenu( 'option', 'disabled' ), true, "disbaled option set" );
-
- select.selectmenu( 'enable' );
- same( select.attr('disabled'), undefined, "select is disabled" );
- ok( !button.hasClass("ui-disabled"), "disabled class added" );
- same( button.attr('aria-disabled'), "false", "select is disabled" );
- same( select.selectmenu( 'option', 'disabled' ), false, "disbaled option set" );
- });
-
- test( "adding options and refreshing a custom select defaults the text", function() {
- var select = $( "#custom-refresh" ),
- button = select.siblings( "a" ).find( ".ui-btn-inner" ),
- text = "foo";
-
- same(button.text(), "default");
- select.find( "option" ).remove(); //remove the loading message
- select.append('<option value="1">' + text + '</option>');
- select.selectmenu( 'refresh' );
- same(button.text(), text);
- });
-
- asyncTest( "adding options and refreshing a custom select changes the options list", function(){
- var select = $( "#custom-refresh-opts-list" ),
- button = select.siblings( "a" ).find( ".ui-btn-inner" ),
- text = "foo";
-
- $.testHelper.sequence([
- // bring up the dialog
- function() {
- button.click();
- },
-
- function() {
- same( $( ".ui-selectmenu.in ul" ).text(), "default" );
- $( ".ui-selectmenu-screen" ).click();
- },
-
- function() {
- select.find( "option" ).remove(); //remove the loading message
- select.append('<option value="1">' + text + '</option>');
- select.selectmenu( 'refresh' );
- },
-
- function() {
- button.click();
- },
-
- function() {
- same( $( ".ui-selectmenu.in ul" ).text(), text );
- $( ".ui-selectmenu-screen" ).click();
- },
-
- start
- ], 500);
- });
-
- test( "theme defined on select is used", function(){
- var select = $("select#non-parent-themed");
-
- ok( select.siblings( "a" ).hasClass("ui-btn-up-" + select.jqmData('theme')));
- });
-
- test( "select without theme defined inherits theme from parent", function() {
- var select = $("select#parent-themed");
-
- ok( select
- .siblings( "a" )
- .hasClass("ui-btn-up-" + select.parents(":jqmData(role='page')").jqmData('theme')));
- });
-
- // issue #2547
- test( "custom select list item links have encoded option text values", function() {
- $( "#encoded-option" ).data( 'selectmenu' )._buildList();
- same(window.encodedValueIsDefined, undefined);
- });
-
- // issue #2547
- test( "custom select list item links have unencoded option text values when using vanilla $.fn.text", function() {
- // undo our changes, undone in teardown
- $.fn.getEncodedText = $.fn.text;
-
- $( "#encoded-option" ).data( 'selectmenu' )._buildList();
-
- same(window.encodedValueIsDefined, true);
- });
-
- $.mobile.page.prototype.options.keepNative = "select.should-be-native";
-
- // not testing the positive case here since's it's obviously tested elsewhere
- test( "select elements in the keepNative set shouldn't be enhanced", function() {
- ok( !$("#keep-native").parent().is("div.ui-btn") );
- });
-
- asyncTest( "dialog size select title should match the label", function() {
- var $select = $( "#select-choice-many-1" ),
- $label = $select.parent().siblings( "label" ),
- $button = $select.siblings( "a" );
-
- $.testHelper.pageSequence([
- function() {
- $button.click();
- },
-
- function() {
- same($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
- window.history.back();
- },
-
- start
- ]);
- });
-
- asyncTest( "dialog size select title should match the label when changed after the dialog markup is added to the DOM", function() {
- var $select = $( "#select-choice-many-1" ),
- $label = $select.parent().siblings( "label" ),
- $button = $select.siblings( "a" );
-
- $label.text( "foo" );
-
- $.testHelper.pageSequence([
- function() {
- $label.text( "foo" );
- $button.click();
- },
-
- function() {
- same($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
- window.history.back();
- },
-
- start
- ]);
- });
-})(jQuery);
+++ /dev/null
-/*
- * mobile select unit tests
- */
-
-(function($){
- var libName = "jquery.mobile.forms.select.js";
-
- $(document).bind('mobileinit', function(){
- $.mobile.selectmenu.prototype.options.nativeMenu = false;
- });
-
- module(libName,{
- setup: function(){
- $.testHelper.openPage( location.hash.indexOf("#default") >= 0 ? "#" : "#default" );
- }
- });
-
- test( "selects marked with data-native-menu=true should use a div as their button", function(){
- same($("#select-choice-native-container div.ui-btn").length, 1);
- });
-
- test( "selects marked with data-native-menu=true should not have a custom menu", function(){
- same($("#select-choice-native-container ul").length, 0);
- });
-
- test( "selects marked with data-native-menu=true should sit inside the button", function(){
- same($("#select-choice-native-container div.ui-btn select").length, 1);
- });
-
- test( "select controls will create when inside a container that receives a 'create' event", function(){
- ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-select").length, "did not have enhancements applied" );
- ok( $("#enhancetest").trigger("create").find(".ui-select").length, "enhancements applied" );
- });
-})(jQuery);
+++ /dev/null
-/*
- * mobile select unit tests
- */
-
-(function($){
- module("jquery.mobile.forms.select native");
-
- test( "native menu selections alter the button text", function(){
- var select = $( "#native-select-choice-few" ), setAndCheck;
-
- setAndCheck = function(key){
- var text;
-
- select.val( key ).selectmenu( 'refresh' );
- text = select.find( "option[value='" + key + "']" ).text();
- same( select.parent().find(".ui-btn-text").text(), text );
- };
-
- setAndCheck( 'rush' );
- setAndCheck( 'standard' );
- });
-
- asyncTest( "selecting a value removes the related buttons down state", function(){
- var select = $( "#native-select-choice-few" );
-
- $.testHelper.sequence([
- function() {
- // click the native menu parent button
- select.parent().trigger( 'vmousedown' );
- },
-
- function() {
- ok( select.parent().hasClass("ui-btn-down-c"), "button down class added" );
- },
-
- function() {
- // trigger a change on the select
- select.trigger( "change" );
- },
-
- function() {
- ok( !select.parent().hasClass("ui-btn-down-c"), "button down class removed" );
- start();
- }
- ], 300);
- });
-
- // issue https://github.com/jquery/jquery-mobile/issues/2410
- test( "adding options and refreshing a native select defaults the text", function() {
- var select = $( "#native-refresh" ),
- button = select.siblings( '.ui-btn-inner' ),
- text = "foo";
-
- same(button.text(), "default");
- select.find( "option" ).remove(); //remove the loading message
- select.append('<option value="1">' + text + '</option>');
- select.selectmenu('refresh');
- same(button.text(), text);
- });
-
- // issue 2424
- test( "native selects should provide open and close as a no-op", function() {
- // exception will prevent test success if undef
- $( "#native-refresh" ).selectmenu( 'open' );
- $( "#native-refresh" ).selectmenu( 'close' );
- ok( true );
- });
-})(jQuery);
\ No newline at end of file
+++ /dev/null
- <!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Slider Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../../js/"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
-
-
- <link rel="stylesheet" href="../../../css/themes/default/"/>
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="slider_events.js"></script>
- <script src="slider_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Slider Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="foo" data-nstest-role="page">
- <div data-nstest-role="fieldcontain">
- <input type="range" name="slider-1" id="range-slider-up" value="0" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
- </div>
-
- <div data-nstest-role="fieldcontain">
- <input type="range" name="slider-1" id="range-slider-down" value="10" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
- </div>
-
- <div data-nstest-role="fieldcontain">
- <input type="range" name="slider-1" id="range-slider-home" value="75" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
- </div>
-
- <div data-nstest-role="fieldcontain">
- <label for="slider-1">Input slider:</label>
- <input type="range" name="slider-1" id="range-slider-end" value="15" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
- </div>
-
- <div data-nstest-role="fieldcontain">
- <input type="range" name="stepped" id="stepped" value="15" min="0" max="100" step="10" data-nstest-theme="b" data-nstest-track-theme="a" />
- </div>
-
- <div data-nstest-role="fieldcontain">
- <select name="slider" id="slider-switch" data-nstest-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-nstest-role="fieldcontain">
- <input type="range" name="onchange" id="onchange" value="25" min="0" max="100" step="10" onchange="onChangeCounter()" data-nstest-theme="b" data-nstest-track-theme="a" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider">Input slider:</label>
- <input type="range" name="slider" id="slider" value="25" min="0" max="100" class="should-be-native"/>
- </div>
-</div>
-
-<div id="enhancetest">
- <input type="range" name="slider-enhancetest" id="range-slider-enhancetest" value="75" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
-</div>
-</html>
+++ /dev/null
-/*
- * mobile slider unit tests
- */
-(function($){
- $.mobile.page.prototype.options.keepNative = "input.should-be-native";
-
- // not testing the positive case here since's it's obviously tested elsewhere
- test( "slider elements in the keepNative set shouldn't be enhanced", function() {
- same( $("input.should-be-native").siblings("div.ui-slider").length, 0 );
- });
-})( jQuery );
\ No newline at end of file
+++ /dev/null
-/*
- * mobile slider unit tests
- */
-
-(function($){
- var onChangeCnt = 0;
- window.onChangeCounter = function() {
- onChangeCnt++;
- }
- module('jquery.mobile.slider.js');
-
- var keypressTest = function(opts){
- var slider = $(opts.selector),
- val = window.parseFloat(slider.val()),
- handle = slider.siblings('.ui-slider').find('.ui-slider-handle');
-
- expect( opts.keyCodes.length );
-
- $.each(opts.keyCodes, function(i, elem){
-
- // stub the keycode value and trigger the keypress
- $.Event.prototype.keyCode = $.mobile.keyCode[elem];
- handle.trigger('keydown');
-
- val += opts.increment;
- same(val, window.parseFloat(slider.val(), 10), "new value is " + opts.increment + " different");
- });
- };
-
- test( "slider should move right with up, right, and page up keypress", function(){
- keypressTest({
- selector: '#range-slider-up',
- keyCodes: ['UP', 'RIGHT', 'PAGE_UP'],
- increment: 1
- });
- });
-
- test( "slider should move left with down, left, and page down keypress", function(){
- keypressTest({
- selector: '#range-slider-down',
- keyCodes: ['DOWN', 'LEFT', 'PAGE_DOWN'],
- increment: -1
- });
- });
-
- test( "slider should move to range minimum on end keypress", function(){
- var selector = "#range-slider-end",
- initialVal = window.parseFloat($(selector).val(), 10),
- max = window.parseFloat($(selector).attr('max'), 10);
-
- keypressTest({
- selector: selector,
- keyCodes: ['END'],
- increment: max - initialVal
- });
- });
-
- test( "slider should move to range minimum on end keypress", function(){
- var selector = "#range-slider-home",
- initialVal = window.parseFloat($(selector).val(), 10);
-
- keypressTest({
- selector: selector,
- keyCodes: ['HOME'],
- increment: 0 - initialVal
- });
- });
-
- test( "slider should move positive by steps on keypress", function(){
- keypressTest({
- selector: "#stepped",
- keyCodes: ['RIGHT'],
- increment: 10
- });
- });
-
- test( "slider should move negative by steps on keypress", function(){
- keypressTest({
- selector: "#stepped",
- keyCodes: ['LEFT'],
- increment: -10
- });
- });
-
- test( "slider should validate input value on blur", function(){
- var slider = $("#range-slider-up");
- slider.focus();
- slider.val(200);
- same(slider.val(), "200");
- slider.blur();
- same(slider.val(), slider.attr('max'));
- });
-
- test( "slider should not validate input on keyup", function(){
- var slider = $("#range-slider-up");
- slider.focus();
- slider.val(200);
- same(slider.val(), "200");
- slider.keyup();
- same(slider.val(), "200");
- });
-
- test( "input type should degrade to number when slider is created", function(){
- same($("#range-slider-up").attr( "type" ), "number");
- });
-
- // generic switch test function
- var sliderSwitchTest = function(opts){
- var slider = $("#slider-switch"),
- handle = slider.siblings('.ui-slider').find('a'),
- switchValues = {
- 'off' : 0,
- 'on' : 1
- };
-
- // One for the select and one for the aria-valuenow
- expect( opts.keyCodes.length * 2 );
-
- $.each(opts.keyCodes, function(i, elem){
- // reset the values
- slider[0].selectedIndex = switchValues[opts.start];
- handle.attr({'aria-valuenow' : opts.start });
-
- // stub the keycode and trigger the event
- $.Event.prototype.keyCode = $.mobile.keyCode[elem];
- handle.trigger('keydown');
-
- same(handle.attr('aria-valuenow'), opts.finish, "handle value is " + opts.finish);
- same(slider[0].selectedIndex, switchValues[opts.finish], "select input has correct index");
- });
- };
-
- test( "switch should select on with up, right, page up and end", function(){
- sliderSwitchTest({
- start: 'off',
- finish: 'on',
- keyCodes: ['UP', 'RIGHT', 'PAGE_UP', 'END']
- });
- });
-
- test( "switch should select off with down, left, page down and home", function(){
- sliderSwitchTest({
- start: 'on',
- finish: 'off',
- keyCodes: ['DOWN', 'LEFT', 'PAGE_DOWN', 'HOME']
- });
- });
-
- test( "onchange should not be called on create", function(){
- equals(onChangeCnt, 0, "onChange should not have been called");
- });
-
- test( "onchange should be called onchange", function(){
- onChangeCnt = 0;
- $( "#onchange" ).slider( "refresh", 50 );
- equals(onChangeCnt, 1, "onChange should have been called once");
- });
-
- test( "slider controls will create when inside a container that receives a 'create' event", function(){
- ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-slider").length, "did not have enhancements applied" );
- ok( $("#enhancetest").trigger("create").find(".ui-slider").length, "enhancements applied" );
- });
-
- var createEvent = function( name, target, x, y ) {
- var event = $.Event( name );
- event.target = target;
- event.pageX = x;
- event.pageY = y;
- return event;
- };
-
- test( "toggle switch should fire one change event when clicked", function(){
- var control = $( "#slider-switch" ),
- widget = control.data( "slider" ),
- slider = widget.slider,
- handle = widget.handle,
- changeCount = 0,
- changeFunc = function( e ) {
- ok( control[0].selectedIndex !== currentValue, "change event should only be triggered if the value changes");
- ++changeCount;
- },
- event = null,
- offset = handle.offset(),
- currentValue = control[0].selectedIndex;
-
- control.bind( "change", changeFunc );
-
- // The toggle switch actually updates on mousedown and mouseup events, so we go through
- // the motions of generating all the events that happen during a click to make sure that
- // during all of those events, the value only changes once.
-
- slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
- slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
- slider.trigger( createEvent( "click", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
-
- control.unbind( "change", changeFunc );
-
- ok( control[0].selectedIndex !== currentValue, "value did change");
- same( changeCount, 1, "change event should be fired once during a click" );
- });
-
- var assertLeftCSS = function( obj, opts ) {
- var integerLeft, compare, css, threshold;
-
- css = obj.css('left');
- threshold = opts.pxThreshold || 0;
-
- if( css.indexOf( "px" ) > -1 ) {
- // parse the actual pixel value returned by the left css value
- // and the pixels passed in for comparison
- integerLeft = Math.round( parseFloat( css.replace("px", "") ) ),
- compare = parseInt( opts.pixels.replace( "px", "" ), 10 );
-
- // check that the pixel value provided is within a given threshold; default is 0px
- ok( compare >= integerLeft - threshold && compare <= integerLeft + threshold, opts.message );
- } else {
- equal( css, opts.percent, opts.message );
- }
- };
-
- asyncTest( "toggle switch handle should snap in the old position if dragged less than half of the slider width, in the new position if dragged more than half of the slider width", function() {
- var control = $( "#slider-switch" ),
- widget = control.data( "slider" ),
- slider = widget.slider,
- handle = widget.handle,
- width = handle.width(),
- offset = null;
-
- $.testHelper.sequence([
- function() {
- // initialize the switch
- control.val('on').slider('refresh');
- },
-
- function() {
- assertLeftCSS(handle, {
- percent: '100%',
- pixels: handle.parent().css('width'),
- message: 'handle starts on the right side'
- });
-
- // simulate dragging less than a half
- offset = handle.offset();
- slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + width - 10, offset.top + 10 ) );
- slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left + width - 20, offset.top + 10 ) );
- slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left + width - 20, offset.top + 10 ) );
- },
-
- function() {
- assertLeftCSS(handle, {
- percent: '100%',
- pixels: handle.parent().css('width'),
- message: 'handle ends on the right side'
- });
-
- // initialize the switch
- control.val('on').slider('refresh');
- },
-
- function() {
- assertLeftCSS(handle, {
- percent: '100%',
- pixels: handle.parent().css('width'),
- message: 'handle starts on the right side'
- });
-
- // simulate dragging more than a half
- offset = handle.offset();
- slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
- slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) );
- slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) );
- },
-
- function() {
- assertLeftCSS(handle, {
- percent: '0%',
- pixels: '0px',
- message: 'handle ends on the left side'
- });
-
- start();
- }
- ], 500);
- });
-
- asyncTest( "toggle switch handle should not move if user is dragging and value is changed", function() {
- var control = $( "#slider-switch" ),
- widget = control.data( "slider" ),
- slider = widget.slider,
- handle = widget.handle,
- width = handle.width(),
- offset = null;
-
- $.testHelper.sequence([
- function() {
- // initialize the switch
- control.val('on').slider('refresh');
- },
-
- function() {
- assertLeftCSS(handle, {
- percent: '100%',
- pixels: handle.parent().css('width'),
- message: 'handle starts on the right side'
- });
-
- // simulate dragging more than a half
- offset = handle.offset();
- slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
- slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) );
- },
-
- function() {
- var min, max;
- if( handle.css('left').indexOf("%") > -1 ){
- min = "0%";
- max = "100%";
- } else {
- min = "0px";
- max = handle.parent().css( 'width' );
- }
-
- notEqual(handle.css('left'), min, 'handle is not on the left side');
- notEqual(handle.css('left'), max, 'handle is not on the right side');
-
- // reset slider state so it is ready for other tests
- slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) );
-
- start();
- }
- ], 500);
- });
-
- asyncTest( "toggle switch should refresh when disabled", function() {
- var control = $( "#slider-switch" ),
- handle = control.data( "slider" ).handle;
-
- $.testHelper.sequence([
- function() {
- // set the initial value
- control.val('off').slider('refresh');
- },
-
- function() {
- assertLeftCSS(handle, {
- percent: '0%',
- pixels: '0px',
- message: 'handle starts on the left side'
- });
-
- // disable and change value
- control.slider('disable');
- control.val('on').slider('refresh');
- },
-
- function() {
- assertLeftCSS(handle, {
- percent: '100%',
- pixels: handle.parent().css( 'width' ),
- message: 'handle ends on the right side'
- });
-
- // reset slider state so it is ready for other tests
- control.slider('enable');
-
- start();
- }
- ], 500);
- });
-})(jQuery);
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Support Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../../../tests/jquery.testHelper.js"></script>
- <script src="../../../js/jquery.ui.widget.js"></script>
- <script src="../../../js/jquery.mobile.widget.js"></script>
- <script src="../../../js/jquery.mobile.media.js"></script>
- <script src="../../../js/jquery.mobile.support.js"></script>
-
- <link rel="stylesheet" href="../../../external/qunit.css"/>
- <script src="../../../external/qunit.js"></script>
-
- <script src="support_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Support Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="qunit-fixture"></div>
-
-</body>
-</html>
+++ /dev/null
-/*
- * mobile support unit tests
- */
-
-$.testHelper.excludeFileProtocol(function(){
- var prependToFn = $.fn.prependTo,
- libName = "jquery.mobile.support.js";
-
- module(libName, {
- teardown: function(){
- //NOTE undo any mocking
- $.fn.prependTo = prependToFn;
- }
- });
-
- // NOTE following two tests have debatable value as they only
- // prevent property name changes and improper attribute checks
- test( "detects functionality from basic affirmative properties and attributes", function(){
- // TODO expose properties for less brittle tests
- $.extend(window, {
- WebKitTransitionEvent: true,
- orientation: true,
- onorientationchange: true
- });
-
- document.ontouchend = true;
-
- window.history.pushState = function(){};
- window.history.replaceState = function(){};
-
- $.mobile.media = function(){ return true; };
-
- $.testHelper.reloadLib(libName);
-
- ok($.support.orientation);
- ok($.support.touch);
- ok($.support.cssTransitions);
- ok($.support.pushState);
- ok($.support.mediaquery);
- });
-
- test( "detects functionality from basic negative properties and attributes (where possible)", function(){
- delete window["orientation"];
- delete document["ontouchend"];
-
- $.testHelper.reloadLib(libName);
-
- ok(!$.support.orientation);
- ok(!$.support.touch);
- });
-
- // NOTE mocks prependTo to simulate base href updates or lack thereof
- var mockBaseCheck = function( url ){
- var prependToFn = $.fn.prependTo;
-
- $.fn.prependTo = function( selector ){
- var result = prependToFn.call(this, selector);
- if(this[0].href && this[0].href.indexOf("testurl") != -1)
- result = [{href: url}];
- return result;
- };
- };
-
- test( "detects dynamic base tag when new base element added and base href updates", function(){
- mockBaseCheck(location.protocol + '//' + location.host + location.pathname + "ui-dir/");
- $.testHelper.reloadLib(libName);
- ok($.support.dynamicBaseTag);
- });
-
- test( "detects no dynamic base tag when new base element added and base href unchanged", function(){
- mockBaseCheck('testurl');
- $.testHelper.reloadLib(libName);
- ok(!$.support.dynamicBaseTag);
- });
-
- test( "jQM's IE browser check properly detects IE versions", function(){
- $.testHelper.reloadLib(libName);
-
- //here we're just comparing our version to what the conditional compilation finds
- var ie = !!$.browser.msie, //get a boolean
- version = parseInt( $.browser.version, 10),
- jqmdetectedver = $.mobile.browser.ie;
-
- if( ie ){
- same(version, jqmdetectedver, "It's IE and the version is correct");
- }
- else{
- same(ie, jqmdetectedver, "It's not IE");
- }
- });
-
-
- //TODO propExists testing, refactor propExists into mockable method
- //TODO scrollTop testing, refactor scrollTop logic into mockable method
-});
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Textinput Test Suite</title>
-
- <script src="../../../js/jquery.js"></script>
- <script src="../jquery.setNameSpace.js"></script>
- <script src="../../jquery.testHelper.js"></script>
- <script src="../../../external/qunit.js"></script>
- <script src="../../../js/"></script>
- <link rel="stylesheet" href="../../../css/themes/default/" />
- <link rel="stylesheet" href="../../../external/qunit.css"/>
-
- <script src="textinput_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Textinput Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div data-nstest-role="page">
- <input name="" id="typeless-input" />
- <textarea class="should-be-native"></textarea>
-
- <textarea id="reference-autogrow">
- </textarea>
-
- <textarea id="init-autogrow">
- Place holder text
- Place holder text
- Place holder text
- Place holder text
- Place holder text
- Place holder text
- Place holder text
- Place holder text
- Place holder text
- </textarea>
-
- <textarea id="keyup-autogrow">
- </textarea>
- <a href="external.html" id="external">external</a>
-</div>
-</body>
-</html>
+++ /dev/null
-/*
- * mobile textinput unit tests
- */
-(function($){
- module( "jquery.mobile.forms.textinput.js" );
-
- test( "inputs without type specified are enhanced", function(){
- ok( $( "#typeless-input" ).hasClass( "ui-input-text" ) );
- });
-
- $.mobile.page.prototype.options.keepNative = "textarea.should-be-native";
-
- // not testing the positive case here since's it's obviously tested elsewhere
- test( "textarea in the keepNative set shouldn't be enhanced", function() {
- ok( !$("textarea.should-be-native").is("ui-input-text") );
- });
-
- asyncTest( "textarea should autogrow on document ready", function() {
- var test = $( "#init-autogrow" );
-
- setTimeout(function() {
- ok( $( "#reference-autogrow" )[0].clientHeight < test[0].clientHeight, "the height is greater than the reference text area with no content" );
- ok( test[0].clientHeight > 100, "autogrow text area's height is greater than any style padding");
- start();
- }, 400);
- });
-
- asyncTest( "textarea should autogrow when text is added via the keyboard", function() {
- var test = $( "#keyup-autogrow" ),
- originalHeight = test[0].clientHeight;
-
- test.keyup(function() {
- setTimeout(function() {
- ok( test[0].clientHeight > originalHeight, "the height is greater than original with no content" );
- ok( test[0].clientHeight > 100, "autogrow text area's height is greater any style/padding");
- start();
- }, 400);
- });
-
- test.val("foo\n\n\n\n\n\n\n\n\n\n\n\n\n\n").trigger("keyup");
- });
-
- asyncTest( "text area should auto grow when the parent page is loaded via ajax", function() {
- $.testHelper.pageSequence([
- function() {
- $("#external").click();
- },
-
- function() {
- setTimeout(function() {
- ok($.mobile.activePage.find( "textarea" )[0].clientHeight > 100, "text area's height has grown");
- window.history.back();
- }, 1000);
- },
-
- function() {
- start();
- }
- ]);
- });
-})(jQuery);
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Widget Test Suite</title>
-
- <script src="../../../external/qunit.js"></script>
- <script src="../../../js/jquery.js"></script>
- <script src="widget_init.js"></script>
- <script src="../../../js/"></script>
-
- <link rel="stylesheet" href="../../../external/qunit.css"/>
-
- <script src="widget_core.js"></script>
-
- <script src="../swarminject.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Widget Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div id="qunit-fixture">
-
-<div id="widget-wrapper">
- <div id="widget">
- <div>...</div>
- </div>
-</div>
-
-</div>
-
-<div id="foo" data-role="page">
- <input type="range" id="foo-slider" name="foo-slider" value="" />
- <div id="enhance-prevented">
- </div>
- <div id="enhance-allowed">
- </div>
-</div>
-
-
-
-</body>
-</html>
+++ /dev/null
-/*
- * mobile widget unit tests
- */
-(function($){
- module('jquery.mobile.widget.js');
-
- test( "getting data from creation options", function(){
- var expected = "bizzle";
-
- $.mobile.widget.prototype.options = { "fooBar" : true };
- $.mobile.widget.prototype.element = $("<div data-foo-bar=" + expected + ">");
- same($.mobile.widget.prototype._getCreateOptions()["fooBar"],
- expected);
- });
-
- test( "getting no data when the options are empty", function(){
- var expected = {};
-
- $.mobile.widget.prototype.options = {};
- $.mobile.widget.prototype.element = $("<div data-foo-bar=" + expected + ">");
- same($.mobile.widget.prototype._getCreateOptions(),
- expected);
- });
-
- test( "getting no data when the element has none", function(){
- var expected = {};
-
- $.mobile.widget.prototype.options = { "fooBar" : true };
- $.mobile.widget.prototype.element = $("<div>");
- same($.mobile.widget.prototype._getCreateOptions(),
- expected);
- });
-
- test( "elements embedded in sub page elements are excluded on create when they match the keep native selector", function() {
- // uses default keep native of data-role=none
- $("#enhance-prevented")
- .append('<label for="unenhanced">Text Input:</label><input type="text" name="name" id="unenhanced" value="" data-role="none" />')
- .trigger("create");
-
- ok( !$("#unenhanced").hasClass( "ui-input-text" ), "doesn't have the ui input text class (unenhanced)");
- });
-
- test( "elements embedded in sub page elements are included on create when they don't match the keep native selector", function() {
-
- // uses default keep native of data-role=none
- $("#enhance-allowed")
- .append('<label for="enhanced">Text Input:</label><input type="text" name="name" id="enhanced" value=""/>')
- .trigger("create");
-
- ok( $("#enhanced").hasClass( "ui-input-text" ), "has the ui input text class (unenhanced)");
- });
-})(jQuery);
\ No newline at end of file
+++ /dev/null
-/*
- * mobile widget unit tests
- */
-(function($){
- var widgetInitialized = false;
-
- module( 'jquery.mobile.widget.js' );
-
- $( "#foo" ).live( 'pageinit', function(){
- // ordering sensitive here, the value has to be set after the call
- // so that if the widget factory says that its not yet initialized,
- // which is an exception, the value won't be set
- $( "#foo-slider" ).slider( 'refresh' );
- widgetInitialized = true;
- });
-
- test( "page is enhanced before init is fired", function() {
- ok( widgetInitialized );
- });
-})( jQuery );
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE HTML>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>Page Event Logger Bookmarklet</title>
-</head>
-
-<body>
-<h1>Page Event Logger Bookmarklet</h1>
-<p>A simple bookmarklet for logging jQuery Mobile page events. To use, bookmark the following link:</p>
-<script>
-document.write('<p><a id="bookmarklet-link" href="javascript:function loadScript(u){var s=document.createElement(\'script\');s.setAttribute(\'language\',\'javascript\');s.setAttribute(\'src\',u);document.body.appendChild(s);} loadScript(\'' + ( location.href.replace( /\.html/, ".js" ) ) + '\');">Page EventLogger Bookmark</a></p>');
-</script>
-<p>For platforms that don't allow bookmarking of <code>javascript:</code> urls, you can copy/paste the following source for the bookmarklet directly into the browser's location bar then hit enter or hit the "go" button on your keypad:</p>
-<p>
- <textarea id="ta" rows="10" cols="50"></textarea>
-</p>
-<p>NOTE: Some browsers like Chrome will strip off the javascript: prefix from the string above when you paste it into the location bar. Make sure what you pasted is prefixed by javascript: before attempting to load the bookmarklet.</p>
-<script>
-document.getElementById("ta").value = document.getElementById("bookmarklet-link").href;
- </script>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE HTML>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>Page Change Timer Bookmarklet</title>
-</head>
-
-<body>
-<h1>Page Event Logger Bookmarklet</h1>
-<p>A simple bookmarklet for timing the load, enhanement, and transition of a jQuery Mobile changePage() request. To use, bookmark the following link:</p>
-<script>
-document.write('<p><a id="bookmarklet-link" href="javascript:function loadScript(u){var s=document.createElement(\'script\');s.setAttribute(\'language\',\'javascript\');s.setAttribute(\'src\',u);document.body.appendChild(s);} loadScript(\'' + ( location.href.replace( /\.html/, ".js" ) ) + '\');">Page Change Timing Bookmark</a></p>');
-</script>
-<p>For platforms that don't allow bookmarking of <code>javascript:</code> urls, you can copy/paste the following source for the bookmarklet directly into the browser's location bar then hit enter or hit the "go" button on your keypad:</p>
-<p>
- <textarea id="ta" rows="10" cols="50"></textarea>
-</p>
-<p>NOTE: Some browsers like Chrome will strip off the javascript: prefix from the string above when you paste it into the location bar. Make sure what you pasted is prefixed by javascript: before attempting to load the bookmarklet.</p>
-<script>
-document.getElementById("ta").value = document.getElementById("bookmarklet-link").href;
- </script>
-</body>
-</html>
--- /dev/null
+/*! jQuery Mobile v@VERSION jquerymobile.com | jquery.org/license */
\ No newline at end of file
--- /dev/null
+# Helper Variables
+# The command to replace the @VERSION in the files with the actual version
+HEAD_SHA = $(shell git log -1 --format=format:"%H")
+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_REPLACE = 's/__version__/"${VER_OFFICIAL}"/g'
+SED_VER_API = sed ${SED_VER_REPLACE}
+SED_INPLACE_EXT = "whyunowork"
+deploy: VER = sed "s/v@VERSION/${VER_OFFICIAL} ${HEAD_SHA}/"
+deploy: VER_MIN = "/*! jQuery Mobile v${VER_OFFICIAL} ${HEAD_SHA} jquerymobile.com | jquery.org/license */"
+
+# The output folder for the finished files
+OUTPUT = compiled
+
+# The name of the files
+NAME = jquery.mobile
+BASE_NAME = jquery.mobile
+THEME_FILENAME = jquery.mobile.theme
+STRUCTURE = jquery.mobile.structure
+deploy: NAME = jquery.mobile-${VER_OFFICIAL}
+deploy: THEME_FILENAME = jquery.mobile.theme-${VER_OFFICIAL}
+deploy: STRUCTURE = jquery.mobile.structure-${VER_OFFICIAL}
+
+# The CSS theme being used
+THEME = default
+
+# If node is available then use node to run r.js
+# otherwise use good old rhino/java
+NODE ?= /usr/local/bin/node
+HAS_NODE = $(shell if test -x ${NODE} ;then echo true; fi)
+
+ifeq ($(HAS_NODE), true)
+ RUN_JS = @@${NODE}
+else
+ RUN_JS = @@java -XX:ReservedCodeCacheSize=64m -classpath build/js.jar:build/google-compiler-20111003.jar org.mozilla.javascript.tools.shell.Main
+endif
+
+# Build Targets
+
+# When no build target is specified, all gets ran
+all: css js zip notify
+
+clean:
+ # -------------------------------------------------
+ # Cleaning build output
+ @@rm -rf ${OUTPUT}
+ @@rm -rf tmp
+
+# Create the output directory.
+init:
+ @@mkdir -p ${OUTPUT}
+
+# 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 \
+ optimizeCss=standard.keepComments.keepLines \
+ 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
+ # Build the theme only file
+ @@cat LICENSE-INFO.txt | ${VER} > ${OUTPUT}/${THEME_FILENAME}.css
+ @@cat css/themes/default/jquery.mobile.theme.css >> ${OUTPUT}/${THEME_FILENAME}.css
+ # ..... and then minify it
+ @@echo ${VER_MIN} > ${OUTPUT}/${THEME_FILENAME}.min.css
+ @@java -XX:ReservedCodeCacheSize=64m \
+ -jar build/yuicompressor-2.4.6.jar \
+ --type css ${OUTPUT}/${THEME_FILENAME}.css >> ${OUTPUT}/${THEME_FILENAME}.min.css
+ # Copy in the images
+ @@cp -R css/themes/${THEME}/images ${OUTPUT}/
+ # Css portion is complete.
+ # -------------------------------------------------
+
+
+docs: init js css
+ # Create the Demos/Docs/Tests/Tools
+ # ... Create staging directories
+ @@mkdir -p tmp/demos/js
+ @@mkdir -p tmp/demos/css/themes/${THEME}
+ # ... Copy script files
+ @@cp compiled/*.js tmp/demos/js
+ @@cp js/jquery.js tmp/demos/js
+ # ... Copy html files
+ @@cp index.html tmp/demos
+ @@cp -r docs tmp/demos
+ # ... Copy css and images
+ @@cp compiled/*.css tmp/demos/css/themes/${THEME}
+ @@cp -r compiled/images tmp/demos/css/themes/${THEME}
+ # ... replace "js/" with "js/jquery.mobile.js"
+ @@ # NOTE the deletion here is required by gnu/bsd sed differences
+ @@find tmp/demos -name "*.html" -exec sed -i${SED_INPLACE_EXT} -e 's@js/"@js/jquery.mobile.js"@' {} \;
+ @@find tmp/demos -name "*${SED_INPLACE_EXT}" -exec rm {} \;
+ # ... Move and zip up the the whole folder
+ @@rm -f ${OUTPUT}/${BASE_NAME}.docs.zip
+ @@cd tmp/demos && zip -rq ../../${OUTPUT}/${NAME}.docs.zip *
+ @@rm -rf ${OUTPUT}/demos && mv -f tmp/demos ${OUTPUT}
+ # Finish by removing the temporary files
+ @@rm -rf tmp
+ # -------------------------------------------------
+
+# Build and minify the JS files
+js: init
+ # Build the JavaScript file
+ ${RUN_JS} \
+ external/r.js/dist/r.js \
+ -o baseUrl="js" \
+ name=jquery.mobile \
+ exclude=jquery,../external/requirejs/order,../external/requirejs/depend,../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}/*.zip
+ @@cd tmp; zip -rq ../${OUTPUT}/${NAME}.zip ${NAME}
+ @@rm -rf tmp
+ # -------------------------------------------------
+
+# -------------------------------------------------
+# -------------------------------------------------
+# -------------------------------------------------
+#
+# For jQuery Team Use Only
+#
+# -------------------------------------------------
+# NOTE the clean (which removes previous build output) has been removed to prevent a gap in service
+build_latest: css docs js zip
+ # ... Copy over the lib js, avoid the compiled stuff, to get the defines for tests/unit/*
+ @@ # TODO centralize list of built files
+ @@find js -name "*.js" -not -name "*.docs.js" -not -name "*.mobile.js" | xargs -L1 -I FILENAME cp FILENAME ${OUTPUT}/demos/js/
+
+# Push the latest git version to the CDN. This is done on a post commit hook
+deploy_latest:
+ # Time to put these on the CDN
+ @@scp -qr ${OUTPUT}/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/latest/
+ # -------------------------------------------------
+
+# TODO target name preserved to avoid issues during refactor, latest -> deploy_latest
+latest: build_latest deploy_latest
+
+# Push the nightly backups. This is done on a server cronjob
+deploy_nightlies:
+ # Time to put these on the CDN
+ @@scp -qr ${OUTPUT} jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/nightlies/$$(date "+%Y%m%d")
+ # -------------------------------------------------
+
+# 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="(.*)${BASE_NAME}.js"|src="//code.jquery.com/mobile/${VER_OFFICIAL}/${NAME}.min.js"|g;s|href="(.*)${BASE_NAME}.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}
+ # -------------------------------------------------
+
+
--- /dev/null
+jQuery Mobile Framework
+=======================
+[Official Site: http://jquerymobile.com](http://jquerymobile.com)
+
+[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.
+
+
+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.
+
+Recommended: [JS Bin issue template with instructions](http://jsbin.com/omacox/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.
+
+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.
+
+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 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)
+
+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/tests/unit/core/). NOTE: The docs will not load as they are dependent on the "/js/" includes which require php. For other development work such as unit tests and custom test pages using
+
+ <script data-main="js/jquery.mobile.docs" src="external/requirejs/require.js"></script>
+
+will allow you to load modules asynchronously without php. Please note that the example above assumes it's inclusion in a page at the root of the directory in which the simple http server was run.
+
+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.
--- /dev/null
+#!/bin/bash
+# determine the project root
+output="branches"
+index_page="$output/index.html"
+
+function log {
+ echo "[branches preview] $1"
+}
+
+# Make the output directory if it doesnt exist
+mkdir -p "$output"
+
+branches=$(git ls-remote --heads origin | cut -f2 -s | sed 's@refs/heads/@@')
+
+log "fetching to get new branches"
+git fetch origin
+
+echo "<html><head><title>jQm Branches Preview</title></head><body>" > "$index_page"
+echo "<h1>jQuery Mobile Branches Live Previews</h1><hr />" >> "$index_page"
+echo "<span class='date'>Updated: $(date)</span>" >> "$index_page"
+echo "<ul>" >> "$index_page"
+# Loop through the array to export each branch
+for branch in $branches; do
+ # skip master
+ if [ $branch = "master" ]; then
+ continue
+ fi
+
+ # TODO shell escape the $branch value it safe for executing
+ log "archiving ref $branch"
+ git archive -o "$output/$branch.tar" "origin/$branch"
+ mkdir -p "$output/$branch"
+
+ log "untarring $branch.tar into $output/$branch/"
+ tar -C "$output/$branch" -xf "$output/$branch.tar"
+
+ # Manipulate the commit message
+ # TODO add commit and description
+ echo "<li>Branch: <a href='$branch/index.html'>$branch</a></li>" >> "$index_page"
+done
+
+# close out the list
+echo "</ul>" >> "$index_page"
+
+# close out the index file
+echo "</body></html>" >> "$index_page"
--- /dev/null
+({
+ 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/depend",
+ "../external/requirejs/order",
+ "../external/requirejs/text",
+ "../external/requirejs/text!../version.txt"
+ ]
+ },
+ {
+ name: "jquery.mobile",
+ exclude: [
+ "jquery",
+ "../external/requirejs/depend",
+ "../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|^tmp/
+})
\ No newline at end of file
--- /dev/null
+// This file is used by the AMD web builder service.
+// When the micro modules are used the version is pulled as a text module.
+// When building with r.js we need to replace the version token by its value since we strip the AMD layer with the pragma.
+
+var fs = require( 'fs' ),
+ path = require( 'path' ),
+ buildDir = __dirname,
+ copyrightVersionRegExp = /@VERSION/g,
+ apiVersionRegExp = /__version__/g,
+ copyrightBaseName = "../LICENSE-INFO",
+ copyrightRegFile = copyrightBaseName + ".txt",
+ copyrightMinFile = copyrightBaseName + ".min.txt";
+
+module.exports = function ( contents, ext, callback ) {
+ fs.readFile( path.join( buildDir, "../version.txt" ), "utf8",
+ function( err, version ) {
+ var copyrightFile;
+ if ( err ) {
+ callback( err );
+ } else {
+ version = version.trim();
+
+ if ( /^\.min/.test( ext ) ) {
+ copyrightFile = copyrightMinFile;
+ } else {
+ copyrightFile = copyrightRegFile;
+ }
+ fs.readFile( path.join( buildDir, copyrightFile ), "utf8",
+ function( err, copyright ) {
+ if ( err ) {
+ callback( err );
+ } else {
+ contents = copyright.replace( copyrightVersionRegExp, version ) + "\n" + contents;
+ contents = contents.replace( apiVersionRegExp, '"' + version + '"' );
+
+ callback( null, contents );
+ }
+ }
+ )
+ }
+ }
+ )
+};
\ No newline at end of file
--- /dev/null
+(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 ) {
\ No newline at end of file
--- /dev/null
+.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; }
+.ui-mini { margin: .25em 5px; }
+.ui-btn-inner { padding: .6em 20px; min-width: .75em; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
+.ui-btn input, .ui-btn button { z-index: 2; }
+.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; }
+.ui-btn-block { display: block; }
+
+.ui-header .ui-btn,
+.ui-footer .ui-btn { display: inline-block; margin: 0; }
+
+.ui-header .ui-btn-inner,
+.ui-footer .ui-btn-inner,
+.ui-mini .ui-btn-inner { font-size: 12.5px; padding: .55em 11px .5em; }
+
+.ui-header .ui-fullsize .ui-btn-inner,
+.ui-footer .ui-fullsize .ui-btn-inner { font-size: 16px; padding: .6em 25px; }
+
+.ui-btn-icon-notext { width: 24px; height: 24px; }
+.ui-btn-icon-notext .ui-btn-inner { padding: 0; height: 100%; }
+.ui-btn-icon-notext .ui-btn-inner .ui-icon { margin: 2px 1px 2px 3px; }
+
+.ui-btn-text { position: relative; z-index: 1; width: 100%; }
+.ui-btn-icon-notext .ui-btn-text { position: absolute; left: -9999px; }
+
+.ui-btn-icon-left .ui-btn-inner { padding-left: 40px; }
+.ui-btn-icon-right .ui-btn-inner { padding-right: 40px; }
+.ui-btn-icon-top .ui-btn-inner { padding-top: 40px; }
+.ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 40px; }
+
+.ui-header .ui-btn-icon-left .ui-btn-inner,
+.ui-footer .ui-btn-icon-left .ui-btn-inner,
+.ui-mini .ui-btn-icon-left .ui-btn-inner { padding-left: 30px; }
+.ui-header .ui-btn-icon-right .ui-btn-inner,
+.ui-footer .ui-btn-icon-right .ui-btn-inner,
+.ui-mini .ui-btn-icon-right .ui-btn-inner { padding-right: 30px; }
+.ui-header .ui-btn-icon-top .ui-btn-inner,
+.ui-footer .ui-btn-icon-top .ui-btn-inner,
+.ui-mini .ui-btn-icon-top .ui-btn-inner { padding: 30px 3px .5em 3px; }
+.ui-header .ui-btn-icon-bottom .ui-btn-inner,
+.ui-footer .ui-btn-icon-bottom .ui-btn-inner,
+.ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding: .55em 3px 30px 3px; }
+
+/*btn icon positioning*/
+.ui-btn-icon-notext .ui-icon { display: block; z-index: 0;}
+.ui-btn-icon-left .ui-btn-inner .ui-icon, .ui-btn-icon-right .ui-btn-inner .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
+.ui-btn-icon-top .ui-btn-inner .ui-icon, .ui-btn-icon-bottom .ui-btn-inner .ui-icon { position: absolute; left: 50%; margin-left: -9px; }
+.ui-btn-icon-left .ui-icon { left: 10px; }
+.ui-btn-icon-right .ui-icon { right: 10px; }
+.ui-btn-icon-top .ui-icon { top: 10px; }
+.ui-btn-icon-bottom .ui-icon { top: auto; bottom: 10px; }
+
+.ui-header .ui-btn-icon-left .ui-icon,
+.ui-footer .ui-btn-icon-left .ui-icon,
+.ui-mini.ui-btn-icon-left .ui-icon,
+.ui-mini .ui-btn-icon-left .ui-icon { left: 5px; }
+.ui-header .ui-btn-icon-right .ui-icon,
+.ui-footer .ui-btn-icon-right .ui-icon,
+.ui-mini.ui-btn-icon-right .ui-icon,
+.ui-mini .ui-btn-icon-right .ui-icon { right: 5px; }
+.ui-header .ui-btn-icon-top .ui-icon,
+.ui-footer .ui-btn-icon-top .ui-icon,
+.ui-mini.ui-btn-icon-top .ui-icon,
+.ui-mini .ui-btn-icon-top .ui-icon { top: 5px; }
+.ui-header .ui-btn-icon-bottom .ui-icon,
+.ui-footer .ui-btn-icon-bottom .ui-icon,
+.ui-mini.ui-btn-icon-bottom .ui-icon,
+.ui-mini .ui-btn-icon-bottom .ui-icon { bottom: 5px; }
+
+/*hiding native button,inputs */
+.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: .1; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=.0001); font-size: 1px; border: none; text-indent: -9999px; }
--- /dev/null
+.ui-collapsible { margin: .5em 0; }
+.ui-collapsible-heading { font-size: 16px; display: block; margin: 0 -8px; padding: 0; border-width: 0 0 1px 0; position: relative; }
+.ui-collapsible-heading a { text-align: left; margin: 0; }
+.ui-collapsible-heading .ui-btn-inner,
+.ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner { padding-left: 40px; }
+.ui-collapsible-heading .ui-btn-icon-right .ui-btn-inner { padding-left: 12px; padding-right: 40px; }
+.ui-collapsible-heading .ui-btn-icon-top .ui-btn-inner,
+.ui-collapsible-heading .ui-btn-icon-bottom .ui-btn-inner { padding-right: 40px; text-align: center; }
+
+.ui-collapsible-heading a span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
+.ui-collapsible-heading a span.ui-btn .ui-btn-inner { padding: 10px 0; }
+.ui-collapsible-heading a span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
+.ui-collapsible-heading-status { position: absolute; top: -9999px; left:0px; }
+.ui-collapsible-content {
+ display: block;
+ margin: 0 -8px;
+ padding: 10px 16px;
+ border-top: none; /* Overrides ui-btn-up-* */
+ background-image: none; /* Overrides ui-btn-up-* */
+ font-weight: normal; /* Overrides ui-btn-up-* */
+}
+.ui-collapsible-content-collapsed { display: none; }
+
+.ui-collapsible-set { margin: .5em 0; }
+.ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
--- /dev/null
+.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: 0em 0 .5em; zoom: 1; }
+
+.ui-bar .ui-controlgroup { margin: 0 .3em; }
+.ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .4em; }
+.ui-controlgroup-controls { display: block; width: 100%;}
+.ui-controlgroup li { list-style: none; }
+.ui-controlgroup-vertical .ui-btn,
+.ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; }
+.ui-controlgroup-controls label.ui-select { position: absolute; left: -9999px; }
+
+.ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; }
+.ui-controlgroup-horizontal { padding: 0; }
+.ui-controlgroup-horizontal .ui-btn-inner { text-align:center; }
+.ui-controlgroup-horizontal .ui-btn, .ui-controlgroup-horizontal .ui-select { display: inline-block; margin: 0 -6px 0 0; }
+.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { float: left; clear: none; margin: 0 -1px 0 0; }
+.ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn,
+.ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child { margin-right: 0; }
+.ui-controlgroup-horizontal .ui-controlgroup-last { margin-right: 0; }
+.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }
+/* conflicts with listview..
+.ui-controlgroup .ui-btn-icon-notext { width: 30px; height: 30px; text-indent: -9999px; }
+.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { padding: 5px 6px 5px 5px; }
+*/
+
+@media all and (min-width: 450px){
+ .ui-field-contain .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
+ .ui-field-contain .ui-controlgroup-controls { width: 60%; display: inline-block; }
+ .ui-field-contain .ui-controlgroup .ui-select { width: 100%; }
+ .ui-field-contain .ui-controlgroup-horizontal .ui-select { width: auto; }
+}
\ No newline at end of file
--- /dev/null
+/* 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: -23px; margin-top: -23px; }
+.ui-loader-verbose { width: 200px; opacity: .88; height: auto; margin-left: -110px; margin-top: -43px; 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 { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
+.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
+.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; border-left-width: 0; border-right-width: 0; }
+.ui-header .ui-btn-left,
+.ui-header .ui-btn-right,
+.ui-footer .ui-btn-left,
+.ui-footer .ui-btn-right { position: absolute; top: 3px; }
+.ui-header .ui-btn-left,
+.ui-footer .ui-btn-left { left: 5px; }
+.ui-header .ui-btn-right,
+.ui-footer .ui-btn-right { right: 5px; }
+.ui-footer .ui-btn-icon-notext,
+.ui-header .ui-btn-icon-notext { top: 6px; }
+.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; }
+
+/* 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); }
--- /dev/null
+.ui-dialog {
+ background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */
+}
+.ui-dialog-contain { width: 92.5%; max-width: 500px; margin: 10% auto 15px auto; padding: 0; }
+.ui-dialog .ui-header {
+ margin-top: 15%;
+ border: none;
+ overflow: hidden;
+}
+.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;
+}
--- /dev/null
+/* fixed page header & footer configuration */
+.ui-header-fixed,
+.ui-footer-fixed {
+ left: 0;
+ right: 0;
+ width: 100%;
+ position: fixed;
+ z-index: 1000;
+}
+.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-header-fixed .ui-btn,
+.ui-footer-fixed .ui-btn {
+ z-index: 10;
+}
--- /dev/null
+.ui-checkbox, .ui-radio { position: relative; clear: both; margin: .2em 0 .5em; z-index: 1; }
+.ui-checkbox .ui-btn, .ui-radio .ui-btn { margin: 0; text-align: left; z-index: 2; }
+.ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }
+.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 45px; }
+.ui-checkbox .ui-mini.ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-mini.ui-btn-icon-left .ui-btn-inner { padding-left: 36px; }
+
+.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
+.ui-checkbox .ui-mini.ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-mini.ui-btn-icon-right .ui-btn-inner { padding-right: 36px; }
+
+.ui-checkbox .ui-btn-icon-top .ui-btn-inner,.ui-radio .ui-btn-icon-top .ui-btn-inner { padding-right: 0; padding-left: 0; text-align: center; }
+.ui-checkbox .ui-btn-icon-bottom .ui-btn-inner, .ui-radio .ui-btn-icon-bottom .ui-btn-inner { padding-right: 0; padding-left: 0; text-align: center; }
+
+.ui-checkbox .ui-icon, .ui-radio .ui-icon { top: 1.1em; }
+.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon { left: 15px; }
+.ui-checkbox .ui-mini.ui-btn-icon-left .ui-icon, .ui-radio .ui-mini.ui-btn-icon-left .ui-icon { left: 9px; }
+.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon { right: 15px; }
+.ui-checkbox .ui-mini.ui-btn-icon-right .ui-icon, .ui-radio .ui-mini.ui-btn-icon-right .ui-icon { right: 9px; }
+.ui-checkbox .ui-btn-icon-top .ui-icon, .ui-radio .ui-btn-icon-top .ui-icon { top: 10px; }
+.ui-checkbox .ui-btn-icon-bottom .ui-icon, .ui-radio .ui-btn-icon-bottom .ui-icon { top: auto; bottom: 10px; }
+.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon { right: 15px; }
+.ui-checkbox .ui-mini.ui-btn-icon-right .ui-icon, .ui-radio .ui-mini.ui-btn-icon-right .ui-icon { right: 9px; }
+
+/* input, label positioning */
+.ui-checkbox input,.ui-radio input { position:absolute; left:20px; top:50%; width: 10px; height: 10px; margin:-5px 0 0 0; outline: 0 !important; z-index: 1; }
\ No newline at end of file
--- /dev/null
+.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; }
+.ui-header .ui-field-contain-left,
+.ui-header .ui-field-contain-right {
+ position: absolute;
+ top: 0;
+ width: 25%;
+}
+.ui-header .ui-field-contain-left {
+ left: 1em;
+}
+.ui-header .ui-field-contain-right {
+ right: 1em;
+}
+
+@media all and (min-width: 450px){
+ .ui-field-contain, .ui-mobile fieldset.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
+}
\ No newline at end of file
--- /dev/null
+.ui-select { display: block; position: relative; }
+.ui-select select { position: absolute; left: -9999px; top: -9999px; }
+.ui-select .ui-btn { overflow: hidden; opacity: 1; margin: 0; }
+/* Fixes #2588 — When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select—including “inherit”—without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
+.ui-select .ui-btn select { cursor: pointer; -webkit-appearance: button; left: 0; top:0; width: 100%; min-height: 1.5em; min-height: 100%; height: 3em; max-height: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); z-index: 2; }
+
+.ui-select .ui-disabled { opacity: .3; }
+
+@-moz-document url-prefix() {.ui-select .ui-btn select { opacity: 0.0001; }}
+.ui-select .ui-btn select.ui-select-nativeonly { opacity: 1; text-indent: 0; }
+
+.ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
+.ui-select .ui-btn-icon-right .ui-icon { right: 15px; }
+.ui-select .ui-mini.ui-btn-icon-right .ui-icon { right: 7px; }
+
+
+/* labels */
+label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
+
+/*listbox*/
+.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: block; min-height: 1em; overflow: hidden !important;
+/* This !important is required for iPad Safari specifically. See https://github.com/jquery/jquery-mobile/issues/2647 */ }
+.ui-select .ui-btn-text { text-overflow: ellipsis; }
+
+.ui-selectmenu { position: absolute; padding: 0; z-index: 1100 !important; width: 80%; max-width: 350px; padding: 6px; }
+.ui-selectmenu .ui-listview { margin: 0; }
+.ui-selectmenu .ui-btn.ui-li-divider { cursor: default; }
+.ui-selectmenu-hidden { top: -9999px; left: -9999px; }
+.ui-selectmenu-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; }
+.ui-screen-hidden, .ui-selectmenu-list .ui-li .ui-icon { display: none; }
+.ui-selectmenu-list .ui-li .ui-icon { display: block; }
+.ui-li.ui-selectmenu-placeholder { display: none; }
+.ui-selectmenu .ui-header .ui-title { margin: 0.6em 46px 0.8em; }
+
+@media all and (min-width: 450px){
+ .ui-field-contain label.ui-select { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
+ .ui-field-contain .ui-select { width: 60%; display: inline-block; }
+}
+
+/* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button. this shim's content in there */
+.ui-selectmenu .ui-header h1:after { content: '.'; visibility: hidden; }
\ No newline at end of file
--- /dev/null
+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-mini { height: 12px; margin-left: 10px; }
+div.ui-slider-bg { border: none; height: 100%; padding-right: 8px; }
+.ui-controlgroup a.ui-slider-handle, 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: 0; height: 100%; }
+div.ui-slider-mini a.ui-slider-handle { height: 14px; width: 14px; margin: -8px 0 0 -7px; }
+div.ui-slider-mini a.ui-slider-handle .ui-btn-inner { height: 30px; width: 30px; padding: 0; margin: -9px 0 0 -9px; }
+
+@media all and (min-width: 450px){
+ .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: 5.5em; }
+}
+
+div.ui-slider-switch { height: 32px; margin-left: 0; width: 5.8em; }
+a.ui-slider-handle-snapping { -webkit-transition: left 70ms linear; -moz-transition: left 70ms linear; }
+div.ui-slider-switch .ui-slider-handle { margin-top: 1px; }
+.ui-slider-inneroffset { margin: 0 16px; position: relative; z-index: 1; }
+
+div.ui-slider-switch.ui-slider-mini { width: 5em; height: 29px; }
+div.ui-slider-switch.ui-slider-mini .ui-slider-inneroffset { margin: 0 15px 0 14px; }
+div.ui-slider-switch.ui-slider-mini .ui-slider-handle { width: 25px; height: 25px; margin: 1px 0 0 -13px; }
+div.ui-slider-switch.ui-slider-mini a.ui-slider-handle .ui-btn-inner { height: 30px; width: 30px; padding: 0; margin: 0; }
+
+span.ui-slider-label { position: absolute; text-align: center; width: 100%; overflow: hidden; font-size: 16px; top: 0; line-height: 2; min-height: 100%; border-width: 0; white-space: nowrap; }
+.ui-slider-mini span.ui-slider-label { font-size: 14px; }
+
+span.ui-slider-label-a { z-index: 1; left: 0; text-indent: -1.5em; }
+span.ui-slider-label-b { z-index: 0; right: 0; text-indent: 1.5em;}
+
+.ui-slider-inline { width: 120px; display: inline-block; }
--- /dev/null
+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; }
+.ui-header input.ui-input-text,
+.ui-footer input.ui-input-text { margin-left: 1.25%; padding: .4em 1%; width: 95.5% } /* Note that padding left/right on text inputs is factored into how the element is displayed in Firefox, but does not actually pad the text inside it. */
+ 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-mini .ui-input-clear { right: -3px; }
+
+.ui-input-search .ui-input-clear-hidden { display: none; }
+input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
+textarea.ui-mini { height: 45px; }
+
+/* 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*/ }
+}
\ No newline at end of file
--- /dev/null
+.ui-listview { margin: 0; counter-reset: listnumbering; }
+.ui-content .ui-listview { margin: -15px; }
+.ui-content .ui-listview-inset { margin: 1em 0; }
+.ui-listview, .ui-li { list-style:none; padding:0; }
+.ui-li, .ui-li.ui-field-contain { display: block; margin:0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
+.ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
+.ui-li-divider, .ui-li-static { padding: .5em 15px; font-size: 14px; font-weight: bold; }
+.ui-li-divider { counter-reset: listnumbering; }
+ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal;counter-increment: listnumbering; content: counter(listnumbering) ". "; }
+ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
+.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
+.ui-li:last-child, .ui-li.ui-field-contain:last-child { border-bottom-width: 1px; }
+.ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
+.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px .7em 15px; display: block; }
+.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 60px; padding-left: 100px; }
+.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; }
+.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count { padding-right: 45px; }
+.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 30px; }
+.ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 75px; }
+.ui-li-has-count .ui-btn-text { padding-right: 15px; }
+.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
+.ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
+.ui-li-thumb, .ui-listview .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }
+.ui-listview .ui-li-icon { max-height: 40px; max-width: 40px; left: 10px; top: .9em; }
+.ui-li-thumb, .ui-listview .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }
+
+.ui-li-aside { float: right; width: 50%; text-align: right; margin: .3em 0; }
+@media all and (min-width: 480px){
+ .ui-li-aside { width: 45%; }
+}
+.ui-li-divider { cursor: default; }
+.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt { padding-right: 95px; }
+.ui-li-has-count .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 48px; }
+.ui-li-divider .ui-li-count, .ui-li-static .ui-li-count { right: 10px; }
+.ui-li-has-alt .ui-li-count { right: 55px; }
+.ui-li-link-alt { position: absolute; width: 40px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; margin: 0; padding: 0; z-index: 2; }
+.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -11px 0 0 0; border-bottom-width: 1px; z-index: -1;}
+.ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;}
+.ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; }
+
+.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0px; }
+
+.ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px }
+.ui-listview-filter .ui-input-search { margin: 5px; width: auto; display: block; }
+
+.ui-listview-filter-inset { margin: -15px -5px -15px -5px; background: transparent; }
+.ui-li.ui-screen-hidden{display:none;}
+/* Odd iPad positioning issue. */
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+ .ui-li .ui-btn-text { overflow: visible; }
+}
\ No newline at end of file
--- /dev/null
+.ui-navbar { overflow: hidden; }
+.ui-navbar ul, .ui-navbar-expanded ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0;}
+.ui-navbar-collapsed ul { float: left; width: 75%; margin-right: -2px; }
+.ui-navbar-collapsed .ui-navbar-toggle { float: left; width: 25%; }
+.ui-navbar li.ui-navbar-truncate { position: absolute; left: -9999px; top: -9999px; }
+.ui-navbar li .ui-btn, .ui-navbar .ui-navbar-toggle .ui-btn { display: block; font-size: 12px; text-align: center; margin: 0; border-right-width: 0; max-width: 100%; }
+.ui-navbar li .ui-btn { margin-right: -1px; }
+.ui-navbar li .ui-btn:last-child { margin-right: 0; }
+.ui-header .ui-navbar li .ui-btn, .ui-header .ui-navbar .ui-navbar-toggle .ui-btn,
+.ui-footer .ui-navbar li .ui-btn, .ui-footer .ui-navbar .ui-navbar-toggle .ui-btn { border-top-width: 0; border-bottom-width: 0; }
+.ui-navbar .ui-btn-inner { padding-left: 2px; padding-right: 2px; }
+.ui-navbar-noicons li .ui-btn .ui-btn-inner, .ui-navbar-noicons .ui-navbar-toggle .ui-btn-inner { padding-top: .8em; padding-bottom: .9em; }
+/*expanded page styles*/
+.ui-navbar-expanded .ui-btn { margin: 0; font-size: 14px; }
+.ui-navbar-expanded .ui-btn-inner { padding-left: 5px; padding-right: 5px; }
+.ui-navbar-expanded .ui-btn-icon-top .ui-btn-inner { padding: 45px 5px 15px; text-align: center; }
+.ui-navbar-expanded .ui-btn-icon-top .ui-icon { top: 15px; }
+.ui-navbar-expanded .ui-btn-icon-bottom .ui-btn-inner { padding: 15px 5px 45px; text-align: center; }
+.ui-navbar-expanded .ui-btn-icon-bottom .ui-icon { bottom: 15px; }
+.ui-navbar-expanded li .ui-btn .ui-btn-inner { min-height: 2.5em; }
+.ui-navbar-expanded .ui-navbar-noicons .ui-btn .ui-btn-inner { padding-top: 1.8em; padding-bottom: 1.9em; }
--- /dev/null
+@import url( "jquery.mobile.core.css" );
+@import url( "jquery.mobile.transition.css" );
+@import url( "jquery.mobile.transition.fade.css" );
+@import url( "jquery.mobile.transition.pop.css" );
+@import url( "jquery.mobile.transition.slide.css" );
+@import url( "jquery.mobile.transition.slidefade.css" );
+@import url( "jquery.mobile.transition.slidedown.css" );
+@import url( "jquery.mobile.transition.slideup.css" );
+@import url( "jquery.mobile.transition.flip.css" );
+@import url( "jquery.mobile.transition.turn.css" );
+@import url( "jquery.mobile.transition.flow.css" );
+@import url( "jquery.mobile.grid.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" );
\ No newline at end of file
--- /dev/null
+/* 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;
+}
\ No newline at end of file
--- /dev/null
+@-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;
+}
\ No newline at end of file
--- /dev/null
+/* 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); }
+}
\ No newline at end of file
--- /dev/null
+/* 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.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); }
+}
\ No newline at end of file
--- /dev/null
+.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;
+ }
+}
\ No newline at end of file
--- /dev/null
+@import url("jquery.mobile.transition.slidein.keyframes.css");
+@import url("jquery.mobile.transition.slideout.keyframes.css");
+
+.slide.out, .slide.in {
+ -webkit-animation-timing-function: ease-out;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-timing-function: ease-out;
+ -moz-animation-duration: 350ms;
+}
+.slide.out {
+ -webkit-transform: translateX(-100%);
+ -webkit-animation-name: slideouttoleft;
+ -moz-transform: translateX(-100%);
+ -moz-animation-name: slideouttoleft;
+}
+
+.slide.in {
+ -webkit-transform: translateX(0);
+ -webkit-animation-name: slideinfromright;
+ -moz-transform: translateX(0);
+ -moz-animation-name: slideinfromright;
+}
+
+.slide.out.reverse {
+ -webkit-transform: translateX(100%);
+ -webkit-animation-name: slideouttoright;
+ -moz-transform: translateX(100%);
+ -moz-animation-name: slideouttoright;
+}
+
+.slide.in.reverse {
+ -webkit-transform: translateX(0);
+ -webkit-animation-name: slideinfromleft;
+ -moz-transform: translateX(0);
+ -moz-animation-name: slideinfromleft;
+}
\ No newline at end of file
--- /dev/null
+/* 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%); }
+}
\ No newline at end of file
--- /dev/null
+@import url("jquery.mobile.transition.fade.css");
+@import url("jquery.mobile.transition.slideout.keyframes.css");
+
+.slidefade.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;
+}
+
+.slidefade.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;
+}
+
+.slidefade.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;
+}
+
+.slidefade.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;
+}
\ No newline at end of file
--- /dev/null
+/* keyframes for slidein from sides */
+@-webkit-keyframes slideinfromright {
+ from { -webkit-transform: translateX(100%); }
+ to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromright {
+ from { -moz-transform: translateX(100%); }
+ to { -moz-transform: translateX(0); }
+}
+
+@-webkit-keyframes slideinfromleft {
+ from { -webkit-transform: translateX(-100%); }
+ to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromleft {
+ from { -moz-transform: translateX(-100%); }
+ to { -moz-transform: translateX(0); }
+}
\ No newline at end of file
--- /dev/null
+/* keyframes for slideout to sides */
+@-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%); }
+}
--- /dev/null
+/* 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%); }
+}
\ No newline at end of file
--- /dev/null
+/* 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); }
+}
--- /dev/null
+<?php
+$type = 'text/css';
+$files = array(
+ '../../../LICENSE-INFO.txt',
+ 'jquery.mobile.css'
+);
+$base = dirname(__FILE__);
--- /dev/null
+@import url( "jquery.mobile.theme.css" );
+@import url( "../../structure/jquery.mobile.structure.css" );
--- /dev/null
+/* Swatches */
+
+/* A
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-bar-a {
+ border: 1px solid #333 /*{a-bar-border}*/;
+ background: #111111 /*{a-bar-background-color}*/;
+ color: #ffffff /*{a-bar-color}*/;
+ font-weight: bold;
+ text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 1px /*{a-bar-shadow-radius}*/ #000000 /*{a-bar-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c /*{a-bar-background-start}*/), to( #111 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/);
+}
+.ui-bar-a,
+.ui-bar-a input,
+.ui-bar-a select,
+.ui-bar-a textarea,
+.ui-bar-a button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+.ui-bar-a .ui-link-inherit {
+ color: #fff /*{a-bar-color}*/;
+}
+
+.ui-bar-a .ui-link {
+ color: #7cc4e7 /*{a-bar-link-color}*/;
+ font-weight: bold;
+}
+
+.ui-bar-a .ui-link:hover {
+ color: #2489CE /*{a-bar-link-hover}*/;
+}
+
+.ui-bar-a .ui-link:active {
+ color: #2489CE /*{a-bar-link-active}*/;
+}
+
+.ui-bar-a .ui-link:visited {
+ color: #2489CE /*{a-bar-link-visited}*/;
+}
+.ui-body-a,
+.ui-overlay-a {
+ border: 1px solid #444 /*{a-body-border}*/;
+ background: #222 /*{a-body-background-color}*/;
+ color: #fff /*{a-body-color}*/;
+ text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 1px /*{a-body-shadow-radius}*/ #111 /*{a-body-shadow-color}*/;
+ font-weight: normal;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #444 /*{a-body-background-start}*/), to( #222 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/);
+}
+.ui-overlay-a {
+ background-image: none;
+ border-width: 0;
+}
+.ui-body-a,
+.ui-body-a input,
+.ui-body-a select,
+.ui-body-a textarea,
+.ui-body-a button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+.ui-body-a .ui-link-inherit {
+ color: #fff /*{a-body-color}*/;
+}
+
+.ui-body-a .ui-link {
+ color: #2489CE /*{a-body-link-color}*/;
+ font-weight: bold;
+}
+
+.ui-body-a .ui-link:hover {
+ color: #2489CE /*{a-body-link-hover}*/;
+}
+
+.ui-body-a .ui-link:active {
+ color: #2489CE /*{a-body-link-active}*/;
+}
+
+.ui-body-a .ui-link:visited {
+ color: #2489CE /*{a-body-link-visited}*/;
+}
+
+.ui-btn-up-a {
+ border: 1px solid #111 /*{a-bup-border}*/;
+ background: #333 /*{a-bup-background-color}*/;
+ font-weight: bold;
+ color: #fff /*{a-bup-color}*/;
+ text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #111 /*{a-bup-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #444444 /*{a-bup-background-start}*/), to( #2d2d2d /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #444444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/);
+}
+.ui-btn-up-a a.ui-link-inherit {
+ color: #fff /*{a-bup-color}*/;
+}
+.ui-btn-hover-a {
+ border: 1px solid #000 /*{a-bhover-border}*/;
+ background: #444444 /*{a-bhover-background-color}*/;
+ font-weight: bold;
+ color: #fff /*{a-bhover-color}*/;
+ text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 1px /*{a-bhover-shadow-radius}*/ #111 /*{a-bhover-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #555555 /*{a-bhover-background-start}*/), to( #383838 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #555555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #555555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #555555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #555555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #555555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/);
+}
+.ui-btn-hover-a a.ui-link-inherit {
+ color: #fff /*{a-bhover-color}*/;
+}
+.ui-btn-down-a {
+ border: 1px solid #000 /*{a-bdown-border}*/;
+ background: #222 /*{a-bdown-background-color}*/;
+ font-weight: bold;
+ color: #fff /*{a-bdown-color}*/;
+ text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/ 1px /*{a-bdown-shadow-radius}*/ #111 /*{a-bdown-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #202020 /*{a-bdown-background-start}*/), to( #2c2c2c /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/);
+}
+.ui-btn-down-a a.ui-link-inherit {
+ color: #fff /*{a-bdown-color}*/;
+}
+.ui-btn-up-a,
+.ui-btn-hover-a,
+.ui-btn-down-a {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+ text-decoration: none;
+}
+
+
+/* B
+-----------------------------------------------------------------------------------------------------------*/
+.ui-bar-b {
+ border: 1px solid #456f9a /*{b-bar-border}*/;
+ background: #5e87b0 /*{b-bar-background-color}*/;
+ color: #fff /*{b-bar-color}*/;
+ font-weight: bold;
+ text-shadow: 0 /*{b-bar-shadow-x}*/ 1px /*{b-bar-shadow-y}*/ 1px /*{b-bar-shadow-radius}*/ #3e6790 /*{b-bar-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #6facd5 /*{b-bar-background-start}*/), to( #497bae /*{b-bar-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #6facd5 /*{b-bar-background-start}*/, #497bae /*{b-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #6facd5 /*{b-bar-background-start}*/, #497bae /*{b-bar-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #6facd5 /*{b-bar-background-start}*/, #497bae /*{b-bar-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #6facd5 /*{b-bar-background-start}*/, #497bae /*{b-bar-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #6facd5 /*{b-bar-background-start}*/, #497bae /*{b-bar-background-end}*/);
+}
+.ui-bar-b,
+.ui-bar-b input,
+.ui-bar-b select,
+.ui-bar-b textarea,
+.ui-bar-b button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+.ui-bar-b .ui-link-inherit {
+ color: #fff /*{b-bar-color}*/;
+}
+.ui-bar-b .ui-link {
+ color: #ddf0f8 /*{b-bar-link-color}*/;
+ font-weight: bold;
+}
+
+.ui-bar-b .ui-link:hover {
+ color: #ddf0f8 /*{b-bar-link-hover}*/;
+}
+
+.ui-bar-b .ui-link:active {
+ color: #ddf0f8 /*{b-bar-link-active}*/;
+}
+
+.ui-bar-b .ui-link:visited {
+ color: #ddf0f8 /*{b-bar-link-visited}*/;
+}
+.ui-body-b,
+.ui-overlay-b {
+ border: 1px solid #999 /*{b-body-border}*/;
+ background: #f3f3f3 /*{b-body-background-color}*/;
+ color: #222222 /*{b-body-color}*/;
+ text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #fff /*{b-body-shadow-color}*/;
+ font-weight: normal;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #ddd /*{b-body-background-start}*/), to( #ccc /*{b-body-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/);
+}
+.ui-overlay-b {
+ background-image: none;
+ border-width: 0;
+}
+.ui-body-b,
+.ui-body-b input,
+.ui-body-b select,
+.ui-body-b textarea,
+.ui-body-b button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+.ui-body-b .ui-link-inherit {
+ color: #333333 /*{b-body-color}*/;
+}
+
+.ui-body-b .ui-link {
+ color: #2489CE /*{b-body-link-color}*/;
+ font-weight: bold;
+}
+
+.ui-body-b .ui-link:hover {
+ color: #2489CE /*{b-body-link-hover}*/;
+}
+
+.ui-body-b .ui-link:active {
+ color: #2489CE /*{b-body-link-active}*/;
+}
+
+.ui-body-b .ui-link:visited {
+ color: #2489CE /*{b-body-link-visited}*/;
+}
+
+.ui-btn-up-b {
+ border: 1px solid #044062 /*{b-bup-border}*/;
+ background: #396b9e /*{b-bup-background-color}*/;
+ font-weight: bold;
+ color: #fff /*{b-bup-color}*/;
+ text-shadow: 0 /*{b-bup-shadow-x}*/ 1px /*{b-bup-shadow-y}*/ 1px /*{b-bup-shadow-radius}*/ #194b7e /*{b-bup-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #5f9cc5 /*{b-bup-background-start}*/), to( #396b9e /*{b-bup-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/);
+}
+.ui-btn-up-b a.ui-link-inherit {
+ color: #fff /*{b-bup-color}*/;
+}
+.ui-btn-hover-b {
+ border: 1px solid #00415e /*{b-bhover-border}*/;
+ background: #4b88b6 /*{b-bhover-background-color}*/;
+ font-weight: bold;
+ color: #fff /*{b-bhover-color}*/;
+ text-shadow: 0 /*{b-bhover-shadow-x}*/ 1px /*{b-bhover-shadow-y}*/ 1px /*{b-bhover-shadow-radius}*/ #194b7e /*{b-bhover-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #6facd5 /*{b-bhover-background-start}*/), to( #4272a4 /*{b-bhover-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/);
+}
+.ui-btn-hover-b a.ui-link-inherit {
+ color: #fff /*{b-bhover-color}*/;
+}
+.ui-btn-down-b {
+ border: 1px solid #225377 /*{b-bdown-border}*/;
+ background: #4e89c5 /*{b-bdown-background-color}*/;
+ font-weight: bold;
+ color: #fff /*{b-bdown-color}*/;
+ text-shadow: 0 /*{b-bdown-shadow-x}*/ 1px /*{b-bdown-shadow-y}*/ 1px /*{b-bdown-shadow-radius}*/ #194b7e /*{b-bdown-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #295b8e /*{b-bdown-background-start}*/), to( #3e79b5 /*{b-bdown-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/);
+}
+.ui-btn-down-b a.ui-link-inherit {
+ color: #fff /*{b-bdown-color}*/;
+}
+.ui-btn-up-b,
+.ui-btn-hover-b,
+.ui-btn-down-b {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+ text-decoration: none;
+}
+
+
+/* C
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-bar-c {
+ border: 1px solid #B3B3B3 /*{c-bar-border}*/;
+ background: #eeeeee /*{c-bar-background-color}*/;
+ color: #3E3E3E /*{c-bar-color}*/;
+ font-weight: bold;
+ text-shadow: 0 /*{c-bar-shadow-x}*/ 1px /*{c-bar-shadow-y}*/ 1px /*{c-bar-shadow-radius}*/ #fff /*{c-bar-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #f0f0f0 /*{c-bar-background-start}*/), to( #ddd /*{c-bar-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/);
+}
+
+.ui-bar-c .ui-link-inherit {
+ color: #3E3E3E /*{c-bar-color}*/;
+}
+.ui-bar-c .ui-link {
+ color: #7cc4e7 /*{c-bar-link-color}*/;
+ font-weight: bold;
+}
+
+.ui-bar-c .ui-link:hover {
+ color: #2489CE /*{c-bar-link-hover}*/;
+}
+
+.ui-bar-c .ui-link:active {
+ color: #2489CE /*{c-bar-link-active}*/;
+}
+
+.ui-bar-c .ui-link:visited {
+ color: #2489CE /*{c-bar-link-visited}*/;
+}
+
+.ui-bar-c,
+.ui-bar-c input,
+.ui-bar-c select,
+.ui-bar-c textarea,
+.ui-bar-c button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+.ui-body-c,
+.ui-overlay-c {
+ border: 1px solid #aaa /*{c-body-border}*/;
+ color: #333333 /*{c-body-color}*/;
+ text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #fff /*{c-body-shadow-color}*/;
+ background: #f9f9f9 /*{c-body-background-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #f9f9f9 /*{c-body-background-start}*/), to( #eeeeee /*{c-body-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eeeeee /*{c-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eeeeee /*{c-body-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eeeeee /*{c-body-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eeeeee /*{c-body-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eeeeee /*{c-body-background-end}*/);
+}
+.ui-overlay-c {
+ background-image: none;
+ border-width: 0;
+}
+.ui-body-c,
+.ui-body-c input,
+.ui-body-c select,
+.ui-body-c textarea,
+.ui-body-c button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+
+.ui-body-c .ui-link-inherit {
+ color: #333333 /*{c-body-color}*/;
+}
+
+.ui-body-c .ui-link {
+ color: #2489CE /*{c-body-link-color}*/;
+ font-weight: bold;
+}
+
+.ui-body-c .ui-link:hover {
+ color: #2489CE /*{c-body-link-hover}*/;
+}
+
+.ui-body-c .ui-link:active {
+ color: #2489CE /*{c-body-link-active}*/;
+}
+
+.ui-body-c .ui-link:visited {
+ color: #2489CE /*{c-body-link-visited}*/;
+}
+
+.ui-btn-up-c {
+ border: 1px solid #ccc /*{c-bup-border}*/;
+ background: #eee /*{c-bup-background-color}*/;
+ font-weight: bold;
+ color: #222 /*{c-bup-color}*/;
+ text-shadow: 0 /*{c-bup-shadow-x}*/ 1px /*{c-bup-shadow-y}*/ 0 /*{c-bup-shadow-radius}*/ #ffffff /*{c-bup-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #ffffff /*{c-bup-background-start}*/), to( #f1f1f1 /*{c-bup-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/);
+}
+.ui-btn-up-c a.ui-link-inherit {
+ color: #2F3E46 /*{c-bup-color}*/;
+}
+
+.ui-btn-hover-c {
+ border: 1px solid #bbb /*{c-bhover-border}*/;
+ background: #dfdfdf /*{c-bhover-background-color}*/;
+ font-weight: bold;
+ color: #222 /*{c-bhover-color}*/;
+ text-shadow: 0 /*{c-bhover-shadow-x}*/ 1px /*{c-bhover-shadow-y}*/ 0 /*{c-bhover-shadow-radius}*/ #ffffff /*{c-bhover-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #f6f6f6 /*{c-bhover-background-start}*/), to( #e0e0e0 /*{c-bhover-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #f9f9f9 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/);
+}
+.ui-btn-hover-c a.ui-link-inherit {
+ color: #2F3E46 /*{c-bhover-color}*/;
+}
+.ui-btn-down-c {
+ border: 1px solid #bbb /*{c-bdown-border}*/;
+ background: #d6d6d6 /*{c-bdown-background-color}*/;
+ font-weight: bold;
+ color: #222 /*{c-bdown-color}*/;
+ text-shadow: 0 /*{c-bdown-shadow-x}*/ 1px /*{c-bdown-shadow-y}*/ 0 /*{c-bdown-shadow-radius}*/ #ffffff /*{c-bdown-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #d0d0d0 /*{c-bdown-background-start}*/), to( #dfdfdf /*{c-bdown-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/);
+}
+.ui-btn-down-c a.ui-link-inherit {
+ color: #2F3E46 /*{c-bdown-color}*/;
+}
+.ui-btn-up-c,
+.ui-btn-hover-c,
+.ui-btn-down-c {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+ text-decoration: none;
+}
+
+
+/* D
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-bar-d {
+ border: 1px solid #bbb /*{d-bar-border}*/;
+ background: #bbb /*{d-bar-background-color}*/;
+ color: #333 /*{d-bar-color}*/;
+ text-shadow: 0 /*{d-bar-shadow-x}*/ 1px /*{d-bar-shadow-y}*/ 0 /*{d-bar-shadow-radius}*/ #eee /*{d-bar-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #ddd /*{d-bar-background-start}*/), to( #bbb /*{d-bar-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/);
+}
+.ui-bar-d,
+.ui-bar-d input,
+.ui-bar-d select,
+.ui-bar-d textarea,
+.ui-bar-d button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+
+.ui-bar-d .ui-link-inherit {
+ color: #333333 /*{d-bar-color}*/;
+}
+.ui-bar-d .ui-link {
+ color: #2489CE /*{d-bar-link-color}*/;
+ font-weight: bold;
+}
+
+.ui-bar-d .ui-link:hover {
+ color: #2489CE /*{d-bar-link-hover}*/;
+}
+
+.ui-bar-d .ui-link:active {
+ color: #2489CE /*{d-bar-link-active}*/;
+}
+
+.ui-bar-d .ui-link:visited {
+ color: #2489CE /*{d-bar-link-visited}*/;
+}
+
+.ui-body-d,
+.ui-overlay-d {
+ border: 1px solid #bbb /*{d-body-border}*/;
+ color: #333333 /*{d-body-color}*/;
+ text-shadow: 0 /*{d-body-shadow-x}*/ 1px /*{d-body-shadow-y}*/ 0 /*{d-body-shadow-radius}*/ #fff /*{d-body-shadow-color}*/;
+ background: #ffffff /*{d-body-background-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #fff), to( #fff /*{d-body-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/);
+}
+.ui-overlay-d {
+ background-image: none;
+ border-width: 0;
+}
+.ui-body-d,
+.ui-body-d input,
+.ui-body-d select,
+.ui-body-d textarea,
+.ui-body-d button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+
+.ui-body-d .ui-link-inherit {
+ color: #333333 /*{d-body-color}*/;
+}
+
+.ui-body-d .ui-link {
+ color: #2489CE /*{d-body-link-color}*/;
+ font-weight: bold;
+}
+
+.ui-body-d .ui-link:hover {
+ color: #2489CE /*{d-body-link-hover}*/;
+}
+
+.ui-body-d .ui-link:active {
+ color: #2489CE /*{d-body-link-active}*/;
+}
+
+.ui-body-d .ui-link:visited {
+ color: #2489CE /*{d-body-link-visited}*/;
+}
+
+.ui-btn-up-d {
+ border: 1px solid #bbb /*{d-bup-border}*/;
+ background: #fff /*{d-bup-background-color}*/;
+ font-weight: bold;
+ color: #333 /*{d-bup-color}*/;
+ text-shadow: 0 /*{d-bup-shadow-x}*/ 1px /*{d-bup-shadow-y}*/ 0 /*{d-bup-shadow-radius}*/ #fff /*{d-bup-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #fafafa), to( #f6f6f6 /*{d-bup-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/);
+}
+.ui-btn-up-d a.ui-link-inherit {
+ color: #333 /*{d-bup-color}*/;
+}
+.ui-btn-hover-d {
+ border: 1px solid #aaa /*{d-bhover-border}*/;
+ background: #eeeeee /*{d-bhover-background-color}*/;
+ font-weight: bold;
+ color: #333 /*{d-bhover-color}*/;
+ cursor: pointer;
+ text-shadow: 0 /*{d-bhover-shadow-x}*/ 1px /*{d-bhover-shadow-y}*/ 0 /*{d-bhover-shadow-radius}*/ #fff /*{d-bhover-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #eee), to( #fff /*{d-bhover-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/);
+}
+.ui-btn-hover-d a.ui-link-inherit {
+ color: #333 /*{d-bhover-color}*/;
+}
+.ui-btn-down-d {
+ border: 1px solid #aaa /*{d-bdown-border}*/;
+ background: #eee /*{d-bdown-background-color}*/;
+ font-weight: bold;
+ color: #333 /*{d-bdown-color}*/;
+ text-shadow: 0 /*{d-bdown-shadow-x}*/ 1px /*{d-bdown-shadow-y}*/ 0 /*{d-bdown-shadow-radius}*/ #ffffff /*{d-bdown-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #e5e5e5 /*{d-bdown-background-start}*/), to( #f2f2f2 /*{d-bdown-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/);
+}
+.ui-btn-down-d a.ui-link-inherit {
+ color: #333 /*{d-bdown-color}*/;
+}
+.ui-btn-up-d,
+.ui-btn-hover-d,
+.ui-btn-down-d {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+ text-decoration: none;
+}
+
+
+/* E
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-bar-e {
+ border: 1px solid #F7C942 /*{e-bar-border}*/;
+ background: #fadb4e /*{e-bar-background-color}*/;
+ color: #333 /*{e-bar-color}*/;
+ text-shadow: 0 /*{e-bar-shadow-x}*/ 1px /*{e-bar-shadow-y}*/ 0 /*{e-bar-shadow-radius}*/ #fff /*{e-bar-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #fceda7 /*{e-bar-background-start}*/), to( #fbef7e /*{e-bar-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/);
+}
+.ui-bar-e,
+.ui-bar-e input,
+.ui-bar-e select,
+.ui-bar-e textarea,
+.ui-bar-e button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+.ui-bar-e .ui-link-inherit {
+ color: #333333 /*{e-bar-color}*/;
+}
+.ui-bar-e .ui-link {
+ color: #2489CE /*{e-bar-link-color}*/;
+ font-weight: bold;
+}
+
+.ui-bar-e .ui-link:hover {
+ color: #2489CE /*{e-bar-link-hover}*/;
+}
+
+.ui-bar-e .ui-link:active {
+ color: #2489CE /*{e-bar-link-active}*/;
+}
+
+.ui-bar-e .ui-link:visited {
+ color: #2489CE /*{e-bar-link-visited}*/;
+}
+
+.ui-body-e,
+.ui-overlay-e {
+ border: 1px solid #F7C942 /*{e-body-border}*/;
+ color: #222222 /*{e-body-color}*/;
+ text-shadow: 0 /*{e-body-shadow-x}*/ 1px /*{e-body-shadow-y}*/ 0 /*{e-body-shadow-radius}*/ #fff /*{e-body-shadow-color}*/;
+ background: #fff9df /*{e-body-background-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #fffadf /*{e-body-background-start}*/), to( #fff3a5 /*{e-body-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/);
+}
+.ui-overlay-e {
+ background-image: none;
+ border-width: 0;
+}
+.ui-body-e,
+.ui-body-e input,
+.ui-body-e select,
+.ui-body-e textarea,
+.ui-body-e button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+.ui-body-e .ui-link-inherit {
+ color: #333333 /*{e-body-color}*/;
+}
+
+.ui-body-e .ui-link {
+ color: #2489CE /*{e-body-link-color}*/;
+ font-weight: bold;
+}
+
+.ui-body-e .ui-link:hover {
+ color: #2489CE /*{e-body-link-hover}*/;
+}
+
+.ui-body-e .ui-link:active {
+ color: #2489CE /*{e-body-link-active}*/;
+}
+
+.ui-body-e .ui-link:visited {
+ color: #2489CE /*{e-body-link-visited}*/;
+}
+
+.ui-btn-up-e {
+ border: 1px solid #F4C63f /*{e-bup-border}*/;
+ background: #fadb4e /*{e-bup-background-color}*/;
+ font-weight: bold;
+ color: #222 /*{e-bup-color}*/;
+ text-shadow: 0 /*{e-bup-shadow-x}*/ 1px /*{e-bup-shadow-y}*/ 0 /*{e-bup-shadow-radius}*/ #fff /*{e-bup-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #ffefaa /*{e-bup-background-start}*/), to( #ffe155 /*{e-bup-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/);
+}
+.ui-btn-up-e a.ui-link-inherit {
+ color: #222 /*{e-bup-color}*/;
+}
+.ui-btn-hover-e {
+ border: 1px solid #F2C43d /*{e-bhover-border}*/;
+ background: #fbe26f /*{e-bhover-background-color}*/;
+ font-weight: bold;
+ color: #111 /*{e-bhover-color}*/;
+ text-shadow: 0 /*{e-bhover-shadow-x}*/ 1px /*{e-bhover-shadow-y}*/ 0 /*{e-bhover-shadow-radius}*/ #fff /*{e-bhover-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #fff5ba /*{e-bhover-background-start}*/), to( #fbdd52 /*{e-bhover-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/);
+}
+
+.ui-btn-hover-e a.ui-link-inherit {
+ color: #333 /*{e-bhover-color}*/;
+}
+.ui-btn-down-e {
+ border: 1px solid #F2C43d /*{e-bdown-border}*/;
+ background: #fceda7 /*{e-bdown-background-color}*/;
+ font-weight: bold;
+ color: #111 /*{e-bdown-color}*/;
+ text-shadow: 0 /*{e-bdown-shadow-x}*/ 1px /*{e-bdown-shadow-y}*/ 0 /*{e-bdown-shadow-radius}*/ #ffffff /*{e-bdown-shadow-color}*/;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #f8d94c /*{e-bdown-background-start}*/), to( #fadb4e /*{e-bdown-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/);
+}
+.ui-btn-down-e a.ui-link-inherit {
+ color: #333 /*{e-bdown-color}*/;
+}
+.ui-btn-up-e,
+.ui-btn-hover-e,
+.ui-btn-down-e {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+ text-decoration: none;
+}
+
+/* Structure */
+
+/* links within "buttons"
+-----------------------------------------------------------------------------------------------------------*/
+
+a.ui-link-inherit {
+ text-decoration: none !important;
+}
+
+
+/* Active class used as the "on" state across all themes
+-----------------------------------------------------------------------------------------------------------*/
+.ui-btn-active {
+ border: 1px solid #2373a5 /*{global-active-border}*/;
+ background: #5393c5 /*{global-active-background-color}*/;
+ font-weight: bold;
+ color: #fff /*{global-active-color}*/;
+ cursor: pointer;
+ text-shadow: 0 /*{global-active-shadow-x}*/ 1px /*{global-active-shadow-y}*/ 1px /*{global-active-shadow-radius}*/ #3373a5 /*{global-active-shadow-color}*/;
+ text-decoration: none;
+ background-image: -webkit-gradient(linear, left top, left bottom, from( #5393c5 /*{global-active-background-start}*/), to( #6facd5 /*{global-active-background-end}*/)); /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* Chrome 10+, Saf5.1+ */
+ background-image: -moz-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* FF3.6 */
+ background-image: -ms-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* IE10 */
+ background-image: -o-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* Opera 11.10+ */
+ background-image: linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/);
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+.ui-btn-active a.ui-link-inherit {
+ color: #fff /*{global-active-color}*/;
+}
+
+
+/* button inner top highlight
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-btn-inner {
+ border-top: 1px solid #fff;
+ border-color: rgba(255,255,255,.3);
+}
+
+
+/* corner rounding classes
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-corner-tl {
+ -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
+ -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
+ border-top-left-radius: .6em /*{global-radii-blocks}*/;
+}
+.ui-corner-tr {
+ -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
+ -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
+ border-top-right-radius: .6em /*{global-radii-blocks}*/;
+}
+.ui-corner-bl {
+ -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
+ -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
+ border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
+}
+.ui-corner-br {
+ -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
+ -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
+ border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
+}
+.ui-corner-top {
+ -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
+ -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
+ border-top-left-radius: .6em /*{global-radii-blocks}*/;
+ -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
+ -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
+ border-top-right-radius: .6em /*{global-radii-blocks}*/;
+}
+.ui-corner-bottom {
+ -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
+ -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
+ border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
+ -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
+ -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
+ border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
+ }
+.ui-corner-right {
+ -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
+ -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
+ border-top-right-radius: .6em /*{global-radii-blocks}*/;
+ -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
+ -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
+ border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
+}
+.ui-corner-left {
+ -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
+ -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
+ border-top-left-radius: .6em /*{global-radii-blocks}*/;
+ -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
+ -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
+ border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
+}
+.ui-corner-all {
+ -moz-border-radius: .6em /*{global-radii-blocks}*/;
+ -webkit-border-radius: .6em /*{global-radii-blocks}*/;
+ border-radius: .6em /*{global-radii-blocks}*/;
+}
+.ui-corner-none {
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ border-radius: 0;
+}
+
+/* Form field separator
+-----------------------------------------------------------------------------------------------------------*/
+.ui-br {
+ border-bottom: rgb(130,130,130);
+ border-bottom: rgba(130,130,130,.3);
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+/* Interaction cues
+-----------------------------------------------------------------------------------------------------------*/
+.ui-disabled {
+ opacity: .3;
+}
+.ui-disabled,
+.ui-disabled a {
+ cursor: default !important;
+ pointer-events: none;
+}
+.ui-disabled .ui-btn-text {
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
+ filter: alpha(opacity=30);
+ zoom: 1;
+}
+
+/* Icons
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-icon,
+.ui-icon-searchfield:after {
+ background: #666 /*{global-icon-color}*/;
+ background: rgba(0,0,0,.4) /*{global-icon-disc}*/;
+ background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
+ background-repeat: no-repeat;
+ -moz-border-radius: 9px;
+ -webkit-border-radius: 9px;
+ border-radius: 9px;
+}
+
+
+/* Alt icon color
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-icon-alt {
+ background: #fff;
+ background: rgba(255,255,255,.3);
+ background-image: url(images/icons-18-black.png);
+ background-repeat: no-repeat;
+}
+
+/* HD/"retina" sprite
+-----------------------------------------------------------------------------------------------------------*/
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min--moz-device-pixel-ratio: 1.5),
+ only screen and (min-resolution: 240dpi) {
+
+ .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
+ .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
+ .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
+ .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
+ .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
+ background-image: url(images/icons-36-white.png);
+ -moz-background-size: 776px 18px;
+ -o-background-size: 776px 18px;
+ -webkit-background-size: 776px 18px;
+ background-size: 776px 18px;
+ }
+ .ui-icon-alt {
+ background-image: url(images/icons-36-black.png);
+ }
+}
+
+/* plus minus */
+.ui-icon-plus {
+ background-position: -0 50%;
+}
+.ui-icon-minus {
+ background-position: -36px 50%;
+}
+
+/* delete/close */
+.ui-icon-delete {
+ background-position: -72px 50%;
+}
+
+/* arrows */
+.ui-icon-arrow-r {
+ background-position: -108px 50%;
+}
+.ui-icon-arrow-l {
+ background-position: -144px 50%;
+}
+.ui-icon-arrow-u {
+ background-position: -180px 50%;
+}
+.ui-icon-arrow-d {
+ background-position: -216px 50%;
+}
+
+/* misc */
+.ui-icon-check {
+ background-position: -252px 50%;
+}
+.ui-icon-gear {
+ background-position: -288px 50%;
+}
+.ui-icon-refresh {
+ background-position: -324px 50%;
+}
+.ui-icon-forward {
+ background-position: -360px 50%;
+}
+.ui-icon-back {
+ background-position: -396px 50%;
+}
+.ui-icon-grid {
+ background-position: -432px 50%;
+}
+.ui-icon-star {
+ background-position: -468px 50%;
+}
+.ui-icon-alert {
+ background-position: -504px 50%;
+}
+.ui-icon-info {
+ background-position: -540px 50%;
+}
+.ui-icon-home {
+ background-position: -576px 50%;
+}
+.ui-icon-search,
+.ui-icon-searchfield:after {
+ background-position: -612px 50%;
+}
+.ui-icon-checkbox-off {
+ background-position: -684px 50%;
+}
+.ui-icon-checkbox-on {
+ background-position: -648px 50%;
+}
+.ui-icon-radio-off {
+ background-position: -756px 50%;
+}
+.ui-icon-radio-on {
+ background-position: -720px 50%;
+}
+
+
+/* checks,radios */
+.ui-checkbox .ui-icon {
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+}
+.ui-icon-checkbox-off,
+.ui-icon-radio-off {
+ background-color: transparent;
+}
+.ui-checkbox-on .ui-icon,
+.ui-radio-on .ui-icon {
+ background-color: #4596ce /*{global-active-background-color}*/; /* NOTE: this hex should match the active state color. It's repeated here for cascade */
+}
+
+/* loading icon */
+.ui-icon-loading {
+ background: url(images/ajax-loader.gif);
+ background-size: 46px 46px;
+}
+
+
+/* Button corner classes
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-btn-corner-tl {
+ -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
+ -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
+ border-top-left-radius: 1em /*{global-radii-buttons}*/;
+}
+.ui-btn-corner-tr {
+ -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
+ -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
+ border-top-right-radius: 1em /*{global-radii-buttons}*/;
+}
+.ui-btn-corner-bl {
+ -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
+ -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
+ border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
+}
+.ui-btn-corner-br {
+ -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
+ -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
+ border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
+}
+.ui-btn-corner-top {
+ -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
+ -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
+ border-top-left-radius: 1em /*{global-radii-buttons}*/;
+ -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
+ -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
+ border-top-right-radius: 1em /*{global-radii-buttons}*/;
+}
+.ui-btn-corner-bottom {
+ -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
+ -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
+ border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
+ -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
+ -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
+ border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
+}
+.ui-btn-corner-right {
+ -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
+ -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
+ border-top-right-radius: 1em /*{global-radii-buttons}*/;
+ -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
+ -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
+ border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
+}
+.ui-btn-corner-left {
+ -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
+ -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
+ border-top-left-radius: 1em /*{global-radii-buttons}*/;
+ -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
+ -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
+ border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
+}
+.ui-btn-corner-all {
+ -moz-border-radius: 1em /*{global-radii-buttons}*/;
+ -webkit-border-radius: 1em /*{global-radii-buttons}*/;
+ border-radius: 1em /*{global-radii-buttons}*/;
+}
+
+/* radius clip workaround for cleaning up corner trapping */
+.ui-corner-tl,
+.ui-corner-tr,
+.ui-corner-bl,
+.ui-corner-br,
+.ui-corner-top,
+.ui-corner-bottom,
+.ui-corner-right,
+.ui-corner-left,
+.ui-corner-all,
+.ui-btn-corner-tl,
+.ui-btn-corner-tr,
+.ui-btn-corner-bl,
+.ui-btn-corner-br,
+.ui-btn-corner-top,
+.ui-btn-corner-bottom,
+.ui-btn-corner-right,
+.ui-btn-corner-left,
+.ui-btn-corner-all {
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+}
+
+/* Overlay / modal
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-overlay {
+ background: #666;
+ opacity: .5;
+ filter: Alpha(Opacity=50);
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+.ui-overlay-shadow {
+ -moz-box-shadow: 0px 0px 12px rgba(0,0,0,.6);
+ -webkit-box-shadow: 0px 0px 12px rgba(0,0,0,.6);
+ box-shadow: 0px 0px 12px rgba(0,0,0,.6);
+}
+.ui-shadow {
+ -moz-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/;
+ -webkit-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/;
+ box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/;
+}
+.ui-bar-a .ui-shadow,
+.ui-bar-b .ui-shadow ,
+.ui-bar-c .ui-shadow {
+ -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.3);
+ -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.3);
+ box-shadow: 0px 1px 0 rgba(255,255,255,.3);
+}
+.ui-shadow-inset {
+ -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
+ -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
+ box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
+}
+.ui-icon-shadow {
+ -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
+ -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
+ box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
+}
+
+/* Focus state - set here for specificity (note: these classes are added by JavaScript)
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-btn:focus {
+ outline: 0;
+}
+
+.ui-focus,
+.ui-btn:focus {
+ -moz-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
+ -webkit-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
+ box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
+}
+
+/* unset box shadow in browsers that don't do it right
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-mobile-nosupport-boxshadow * {
+ -moz-box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+}
+
+/* ...and bring back focus */
+.ui-mobile-nosupport-boxshadow .ui-focus,
+.ui-mobile-nosupport-boxshadow .ui-btn:focus {
+ outline-width: 1px;
+ outline-style: dotted;
+}
--- /dev/null
+<?php
+$type = 'text/css';
+$files = array(
+ '../../../LICENSE-INFO.txt',
+ 'jquery.mobile.css'
+);
+$base = dirname(__FILE__);
--- /dev/null
+@import url( "jquery.mobile.theme.css" );
+@import url( "../../structure/jquery.mobile.structure.css" );
\ No newline at end of file
--- /dev/null
+/* jqm docs css
+
+Beware: lots of last-minute CSS going on in here
+cobblers, shoes,
+*/
+
+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; }
+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%; }
+
+/* fluid images moved from jquery.mobile.core.css*/
+.ui-mobile img {
+ max-width: 100%;
+}
+
+.ui-header .jqm-home { top: 0; }
+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 {
+ 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%;
+}
+
+/* custom dialog for the photos sharing */
+.ui-dialog.dialog-actionsheet .ui-dialog-contain {
+ margin-top: 0;
+}
+
+
+
+/* F bar theme - just for the docs overview headers */
+.ui-bar-f {
+ border: 1px solid #56A00E;
+ background: #74b042;
+ color: #fff;
+ font-weight: bold;
+ text-shadow: 0 1px 1px #335413;
+ 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 input,
+.ui-bar-f select,
+.ui-bar-f textarea,
+.ui-bar-f button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+
+.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){
+
+
+ .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%;
+ }
+}
\ No newline at end of file
--- /dev/null
+//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 );
+ });
+ });
+ });
+}
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Accessibility</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Accessibility</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</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>
+
+ <p>By utilizing these techniques, we do our best to ensure an accessible experience to users with disabilities such as blindness, who may use screen readers (like <em>VoiceOver</em>, on Apple's iPhone device) or other assistive technology to access the web.</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>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+
+
+ </div><!-- /content -->
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Features</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Features</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</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>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>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>
+
+ </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>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <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 src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../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">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</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. jQuery Mobile 1.1 works with both 1.6.4 and 1.7.1 versions of jQuery core. </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>
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>My Page</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+</head>
+<body>
+
+<div <strong>data-role="page"</strong>>
+
+ <div <strong>data-role="header"</strong>>
+ <h1>My Title</h1>
+ </div><!-- /header -->
+
+ <div <strong>data-role="content"</strong>>
+ <p>Hello world</p>
+ </div><!-- /content -->
+
+</div><!-- /page -->
+
+</body>
+</html>
+</code></pre>
+
+
+ <h2>Add your content</h2>
+ <p>Inside your content container, you can add 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>
+<ul <strong>data-role="listview" data-inset="true" data-filter="true"</strong>>
+ <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>
+
+</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>
+<form>
+ <label for="slider-0">Input slider:</label>
+ <input <strong>type="range"</strong> name="slider" id="slider-0" value="25" min="0" max="100" />
+</form>
+</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>
+<a href="#" <strong>data-role="button" data-icon="star"</strong>>Star button</a>
+</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><a href="#" data-role="button" data-icon="star" <strong>data-theme="a"</strong>>Button</a></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>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery UI Mobile Framework - About</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-index">
+
+<div data-role="header" data-theme="f">
+ <h1>About jQuery Mobile</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+</div>
+
+<div data-role="content">
+
+ <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
+ <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>
+ </ul>
+
+</div>
+
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Intro</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Introduction</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <div class="content-primary">
+
+ <h2>jQuery Mobile Overview</h2>
+
+ <p>jQuery’s 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 <a href="features.html">feature-rich</a> but lightweight codebase built on progressive enhancement with a flexible, <a href="../api/themes.html">theming system</a> and <a href="http://www.jquerymobile.com/themeroller" target="_new">ThemeRoller tool</a>. </p>
+ <p>The framework includes an <a href="../pages/page-navmodel.html">Ajax navigation</a> system that brings animated page <a href="../pages/page-transitions.html">transitions</a> and a core set of UI widgets: <a href="../pages/page-anatomy.html">pages</a>, <a href="../pages/page-dialogs.html">dialogs</a>, <a href="../toolbars/docs-bars.html">toolbars</a>, <a href="../lists/docs-lists.html">listviews</a>, <a href="../buttons/buttons-types.html">buttons</a> with <a href="../buttons/buttons-icons.html">icons</a>, <a href="../forms/forms-all.html">form elements</a>, <a href="../content/content-collapsible-set.html">accordions</a>, <a href="../content/content-collapsible.html">collapsibles</a>, and more.</p>
+
+ <p>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms we’re targeting</a> with jQuery Mobile so no browser or device is left behind. We've also focused on making jQuery Mobile <a href="getting-started.html">easy to learn</a> with a simple, <a href="../api/data-attributes.html">markup-based system</a> to applying behavior and theming. For more advanced developers, there is a rich API of <a href="../api/globalconfig.html">global configuration options</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a> to <a href="../pages/page-scripting.html" id="" title="page-scripting">apply scripting</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generate dynamic pages</a>, and even <a href="../pages/phonegap.html" id="" title="phonegap">build native apps</a> with tools like PhoneGap.</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. <a href="accessibility.html">Accessibility features</a> 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>
+
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Supported platforms</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Supported platforms</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <style>
+ li { margin:9px 0; }
+ </style>
+
+ <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: <strong>A</strong> (full), <strong>B</strong> (full minus Ajax), <strong>C</strong> (basic HTML). The visual fidelity of the experience and smoothness of page transitions are 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: 16px !important; font-weight: normal; background: #e6e6e6; border-left: 7px solid #74B64A; padding: 5px 0 5px 8px;"><strong> A-grade</strong> - Full enhanced experience with Ajax-based animated page transitions.</h3>
+ <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), 4 (4.3 / 5.0), and 4S (5.0)</li>
+ <li><strong>Android 2.1-2.3</strong> - Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)</li>
+ <li><strong>Android 3.1 (Honeycomb) </strong> - Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM</li>
+ <li><strong>Android 4.0 (ICS) </strong> - Tested on a Galaxy Nexus. Note: transition performance can be poor on <em>upgraded</em> devices</li>
+ <li><strong>Windows Phone 7-7.5</strong> - Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800</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 (1.0-2.0)</strong> - Tested on PlayBook</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 (10 Beta)</strong> - Tested on Android 2.3 device</li>
+ <li><strong>Chrome for Android (Beta)</strong> - Tested on Android 4.0 device</li>
+ <li><strong>Skyfire 4.1</strong> - Tested on Android 2.3 device</li>
+ <li><strong>Opera Mobile 11.5</strong>: Tested on Android 2.3</li>
+ <li><strong>Meego 1.2</strong> - Tested on Nokia 950 and N9</li>
+ <li><strong>Samsung bada 2.0</strong> - Tested on a Samsung Wave 3, Dolphin browser</li>
+ <li><strong>UC Browser</strong> - Tested on Android 2.3 device</li>
+ <li><strong>Kindle 3 and Fire </strong> - Tested on the built-in WebKit browser for each</li>
+ <li><strong>Nook Color 1.4.1</strong> - Tested on original Nook Color, not Nook Tablet</li>
+ <li><strong>Chrome <strong>Desktop </strong>11-17</strong> - Tested on OS X 10.7 and Windows 7</li>
+ <li><strong>Safari <strong>Desktop </strong>4-5</strong> - Tested on OS X 10.7 and Windows 7</li>
+ <li><strong>Firefox Desktop 4-9</strong> - Tested on OS X 10.7 and Windows 7</li>
+ <li><strong>Internet Explorer 7-9</strong> - Tested on Windows XP, Vista and 7</li>
+ <li><strong>Opera Desktop 10-11</strong> - Tested on OS X 10.7 and Windows 7</li>
+ </ul>
+ <h3 style="display: block; font-size: 16px !important; font-weight: normal; background: #e6e6e6; 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.5)</strong> - Tested on iOS 3.2/4.3 and Android 2.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: 16px !important; font-weight: normal; background: #e6e6e6; 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>
+ </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><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>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <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 src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../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">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</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-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</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-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</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>
+
+ <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-iconpos</th>
+ <td><strong>left</strong> | right | top | bottom | notext</td>
+ </tr>
+ <tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</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-iconpos</th>
+ <td><strong>left</strong> | right | top | bottom | notext</td>
+ </tr>
+ <tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</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-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="../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-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="globalconfig.html">Enhancement</a></h2>
+ <p>Container with <code>data-enhance="false"</code> or <code>data-ajax="false"</code></p>
+ <table>
+ <tr>
+ <th>data-enhance</th>
+ <td><strong>true</strong> | false</td>
+ </tr>
+ <tr>
+ <th>data-ajax</th>
+ <td><strong>true</strong> | false</td>
+ </tr>
+ </table>
+ <p>Any DOM elements inside a <code>data-enhance="false"</code> container, save for <code>data-role="page|dialog"</code> elements, will be ignored during initial enhancement and subsequent <code>create</code> events provided that the <code>$.mobile.ignoreContentEnabled</code> flag is set prior to the enhancement (eg in a <code>mobileinit</code> binding).</p>
+
+ <p>Any link or form elements inside <code>data-enhance="false"</code> containers will be ignored by the framework's navigation functionality when <code>$.mobile.ignoreContentEnabled</code> is set to true.</p>
+
+ <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-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</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>
+ <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-fullscreen</th>
+ <td>true (used in conjunction with fixed toolbars)</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-fullscreen</th>
+ <td>true (used in conjunction with fixed toolbars)</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-divider-theme</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 (used in conjunction with fixed toolbars) <p class="ui-bar-e">Deprecated in 1.1 - use on header and footer instead.</p></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-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</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>
+
+ <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-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</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-highlight</th>
+ <td>true | <strong>false</strong> - Adds an active state fill on track to handle</td>
+ </tr>
+ <tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</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>
+ <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 & 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-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</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>
+
+ </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 & 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>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!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" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Events</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <h2>Framework, Page, and Navigation Events</h2>
+ <p>jQuery Mobile's widget and navigation system has a full set of events at each stage of the page load and page change process that can be tapped into to take full control. This page will highlight the most commonly used events and what they do, and also provide chronologies of when these events are triggered during load and transitions.</p>
+
+
+ <h3>Framework events</h3>
+
+ <p>When jQuery Mobile initializes, it triggers an event on the <code>document</code> that is specifically designed for overriding framework and plugin defaults. That event is called <code>mobileinit</code>, and by binding to it, you can ensure that any global or plugin configuration options are overridden to any value you'd like before they are used by the framework's initial execution. </p>
+
+
+ <pre>
+ <code>
+$(document).bind("mobileinit", function(){
+ //apply overrides here
+});
+ </code>
+ </pre>
+
+ <p>The tricky aspect of mobileinit is that you need to bind to it before jQuery Mobile executes, so a typical mobileinit workflow would occur in a script that is referenced after jQuery itself, but before jQuery Mobile.</p>
+
+ <p>It should be noted that while you can bind to other events from within a <code>mobileinit</code> callback, it is likely that you'll get undesirable results in doing so. This is because many events, such as the page events below, are intended for external developers to use <em>after</em> jQuery Mobile's plugins have loaded.</p>
+
+ <h3>Page creation events</h3>
+
+ <p>In a jQuery Mobile application, each view is known as a page. Pages generally begin as a regular HTML element with a <code>data-role="page"</code> attribute, and the framework's page widget enhances that element into a jQuery Mobile page control. In the process of enhancing that page, the widget dispatches several events that allow you to access that page and its child elements at different stages of creation.</p>
+
+ <p>These events are:</p>
+
+ <dl>
+ <dt>pagecreate</dt>
+
+ <dd>This event is triggered on a page when it is first initialized by the page plugin. <code>pagecreate</code> is the most useful event for progressively enhancing a page's markup when it first loads, and because of this, many of jQuery Mobile's standard widgets bind to <code>pagecreate</code> to enhance markup within pages as well! If you bind to <code>pagecreate</code> in any script that is referenced after the jQuery Mobile framework, any native jQuery Mobile widgets in that page will be enhanced before your event callback executes. In other words, you'll be dealing with enhanced jQuery Mobile components.</dd>
+
+ <dt>pagebeforecreate</dt>
+
+ <dd>This event is triggered on a page element just before it is created by the page plugin. While the <code>pagecreate</code> event generally allows you to work with a page <strong>after</strong> its markup has been enhanced by jQuery Mobile, <code>pagebeforecreate</code> gives you access when the markup has not yet been enhanced. <code>pagebeforecreate</code> is useful for modifying markup before jQuery Mobile's widgets </dd>
+
+ <dt>pageinit</dt>
+
+ <dd><code>pageinit</code> is very similar to <code>pagecreate</code>, except that none of jQuery Mobile's standard widgets bind to it, and it is guaranteed to execute after all bound <code>pagecreate</code> callbacks have finished. If you need to bind to a page creation-time event via a script that is referenced before jQuery Mobile, binding to <code>pageinit</code> will ensure that you deal with enhanced page controls (whereas <code>pagecreate</code> will not, in that specific case.)</dd>
+
+
+ </dl>
+
+
+ <h3>Page navigation events</h3>
+ <p>After pages are created, they are often shown and hidden one or many times throughout the use of a jQuery Mobile app. For A-grade browsers with Ajax navigation support, the jQM navigation model manages these page behaviors and dispatches useful events at different steps in the process of showing, hiding, and changing.</p>
+
+ <h4>Page showing events</h4>
+ <p>The page showing events (<code>pagebeforeshow</code> and <code>pageshow</code>) are guaranteed to fire every time a page is shown, whether you're opening a single page, or transitioning between two pages. The target of the event is the page that is being shown.</p>
+
+ <dl>
+
+ <dt>pagebeforeshow</dt>
+ <dd>An event triggered on a page before it is shown.</dd>
+
+
+ <dt>pageshow</dt>
+ <dd>An event triggered on the page after it is shown.</dd>
+ </dl>
+
+ <h4>Page hiding events</h4>
+ <p>The page hiding events (<code>pagebeforehide</code> and <code>pagehide</code>) only fire when transitioning between two pages, when an outgoing page is being hidden in favor of a new one. The target of the event is the page that is being shown.</p>
+ <dl>
+ <dt>pagebeforehide</dt>
+ <dd>An event triggered on a page before it is hidden.</dd>
+
+
+ <dt>pagehide</dt>
+ <dd>An event triggered on a page after it is hidden.</dd>
+
+ <dl>
+
+
+ <p>When a single page is being shown, and no page is hidden, only the <code>pagebeforeshow</code> and <code>pageshow</code> events will fire, and in that order.</p>
+
+ <p>During a transition between two pages, all 4 of the events above will fire, in this order:</p>
+ <style>
+ .nav-flow ol, .nav-flow li { margin:0; list-style-type: none; text-align:center; line-height:150%; }
+ .nav-flow h3 { margin:0; }
+ .nav-flow em { color:#999; }
+ </style>
+
+ <ol class="nav-flow">
+ <li><h3>pagebeforehide</h3></li>
+ <li>↓</li>
+ <li><h3>pagebeforeshow</h3></li>
+ <li>↓</li>
+ <li><h3>pagehide</h3></li>
+ <li>↓</li>
+ <li><h3>pageshow</h3></li>
+ </ol>
+
+
+
+
+
+ <h3>Chronology</h3>
+
+
+
+
+ <p>Here is an overview of the event chronology for a page change</p>
+
+
+
+
+ <ol class="nav-flow">
+ <li><h3>mobileinit</h3> <em>Set global options here</em></li>
+ <li>↓</li>
+ <li><h3>pagebeforechange</h3></li>
+ <li><h3>pagebeforeload</h3></li>
+ <li>↓</li>
+ <li><em>Page loads via AJAX</em></li>
+ <li>↓</li>
+ <li><h3>pagebeforecreate</h3></li>
+ <li><h3>pagecreate</h3></li>
+ <li>↓</li>
+ <li><em>Page enhancements run</em></li>
+ <li>↓</li>
+ <li><h3>pageinit</h3><em> Our document.ready</em></li>
+ <li>↓</li>
+ <li><h3>pageload</h3></li>
+ <li><h3>pagebeforechange</h3></li>
+ <li><h3>pagebeforehide</h3></li>
+ <li><h3>pagebeforeshow</h3></li>
+ <li>↓</li>
+ <li><em>Page transition</em></li>
+ <li>↓</li>
+ <li><h3>pagehide</h3></li>
+ <li><h3>pageshow</h3></li>
+ <li><h3>pagechange</h3></li>
+ <li>↓</li>
+ <li><em>Complete</em></li>
+ </ol>
+
+ <p>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> </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> from within <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.</p>
+</div>
+
+
+
+ <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( "pagebeforeload", 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( "pagebeforeload", 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( "pageloadfailed", 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( "pageloadfailed", 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 "timeout", "error", "abort", and "parsererror". 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>
+ <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>
+
+ <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>
+
+ <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>
+
+ <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>
+
+ </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);
+});
+
+$( 'div' ).live( 'pagehide',function(event, ui){
+ alert( 'This page was just shown: '+ ui.nextPage);
+});
+</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>
+
+ <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>
+
+ <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();
+});
+</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!' );
+});
+</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>
+
+
+ </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 & 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>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!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" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Events</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</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>$(document).bind('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> </p>
+ <div class="ui-body ui-body-e">
+ <h4 style="margin:.5em 0">Important: <code>$(document).bind('pagecreate')</code> vs <code>$(document).bind('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 isn’t 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>
+
+ <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> </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>
+ </dl>
+
+ <h2>Scroll events</h2>
+ <dl>
+ <dt><code>scrollstart</code></dt>
+ <dd>Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts.</dd>
+ </dl>
+ <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( "pagebeforeload", 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( "pagebeforeload", 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( "pageloadfailed", 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( "pageloadfailed", 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 "timeout", "error", "abort", and "parsererror". 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>
+ <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>
+
+ <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>
+
+ <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>
+
+ <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>
+
+ </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);
+});
+
+$( 'div' ).live( 'pagehide',function(event, ui){
+ alert( 'This page was just shown: '+ ui.nextPage);
+});
+</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>
+
+ <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>
+
+ <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();
+});
+</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!' );
+});
+</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>
+
+ <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 & 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>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!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" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Configuring Defaults</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</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 the <code>document.ready</code> event fires). These enhancements are applied based on jQuery Mobile's default settings, which are designed to work with common scenarios. If changes to the settings are needed, they are easy to configure.</p>
+
+ <h3>The mobileinit event</h3>
+ <p>When jQuery Mobile starts, it triggers a <code>mobileinit</code> event on the <code>document</code> object. To override default settings, bind to <code>mobileinit</code>.</p>
+
+ <pre>
+ <code>
+$(document).bind("mobileinit", function(){
+ //apply overrides here
+});
+ </code>
+ </pre>
+
+ <p>Because the <code>mobileinit</code> event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:</p>
+
+ <pre>
+ <code>
+<script src="jquery.js"></script>
+<strong><script src="custom-scripting.js"></script></strong>
+<script src="jquery-mobile.js"></script>
+ </code>
+ </pre>
+
+ <p>You can override default settings by extending the <code>$.mobile</code> object using jQuery's <code>$.extend</code> method.</p>
+
+ <pre>
+ <code>
+$(document).bind("mobileinit", function(){
+ $.extend( $.mobile , {
+ <strong>foo: bar</strong>
+ });
+});
+ </code>
+ </pre>
+
+ <p>Alternatively, you can set them using object property notation.</p>
+ <pre>
+ <code>
+$(document).bind("mobileinit", function(){
+ <strong>$.mobile.foo = bar;</strong>
+});
+ </code>
+ </pre>
+
+ <p>To explore the effects of global configuration options, see 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>activeBtnClass</code> <em>string</em>, default: "ui-btn-active"</dt>
+ <dd>The CSS class used for "active" button state.</dd>
+
+ <dt><code>activePageClass</code> <em>string</em>, default: "ui-page-active"</dt>
+ <dd>The CSS class used for the page currently in view or in a transition.</dd>
+
+ <dt><code>ajaxEnabled</code> <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 ordinary HTTP requests.</dd>
+
+ <dt><code>allowCrossDomainPages</code> <em>boolean</em>, default: false</dt>
+ <dd>When jQuery Mobile attempts to load an external page, the request runs through <code>$.mobile.loadPage()</code>. This will only allow cross-domain requests if <code>$.mobile.allowCrossDomainPages</code> is set to true. Because the jQuery Mobile framework tracks what page is being viewed within the browser's location hash, it is possible for a cross-site scripting (XSS) attack to occur if the XSS code in question can manipulate the hash and set it to a cross-domain URL of its choice. This is the main reason that the default setting for $.mobile.allowCrossDomainPages is set to false. In PhoneGap apps that must "phone home" by loading assets off a remote server, both the <code>$.support.cors</code> AND <code>$.mobile.allowCrossDomainPages</code> must be set to true.</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, the page will not initialize and will be visually hidden until <code>$.mobile.initializePage</code> is manually called.</dd>
+
+ <dt><code>buttonMarkup.hoverDelay</code> <em>integer</em>, default: 200</dt>
+ <dd>Set the delay for touch devices to add the hover and down classes on touch interactions for buttons throughout the framework. Reducing the delay here results in a more responsive feeling ui, but will often result in the downstate being applied during page scrolling.</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.</dd>
+
+ <dt><code>defaultPageTransition</code> <em>string</em>, default: 'fade'</dt>
+ <dd>Set the default transition for page changes that use Ajax. Note: default changed from 'slide' to 'fade' in 1.1. Set to 'none' for no transitions.</dd>
+
+ <dt><code>gradeA</code> <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>
+
+ <dt><code>hashListeningEnabled</code> <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 use simple deep-links within a document that scroll to a particular ID.</dd>
+
+ <dt><code>ignoreContentEnabled</code> <em>boolean</em>, default: false</dt>
+ <dd><em>Warning:</em> Setting this property to true will cause performance degradation on enhancement. Once set, all automatic enhancements made by the framework to each enhanceable element of the user's markup will first check for a <code>data-enhance=false</code> parent node. If one is found the markup will be ignored. This setting and the accompanying data attribute provide a mechanism through which users can prevent enhancement over large sections of markup.</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><code>loadingMessage</code> <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>loadingMessageTextVisible</code> <em>boolean</em>, default: false</dt>
+ <dd>Whether the text should be visible when a loading message is shown. The text is always visible for loading errors.</dd>
+
+ <dt><code>loadingMessageTheme</code> <em>string</em>, default: "a"</dt>
+ <dd>The theme that the loading message box uses when text is visible.</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>ns</code> <em>string</em>, default: ""</dt>
+ <dd>The namespace used in data- attributes (e.g., data-role). Can be set to any string, 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>If you use data- namespacing, you will need to 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>pageLoadErrorMessage</code> <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>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>subPageUrlKey</code> <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 <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>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. <strong>Note: Deprecated for 1.1.0.</strong></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 & 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>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery UI Mobile Framework - API</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+<div data-role="page" class="type-index">
+
+<div data-role="header" data-theme="f">
+ <h1>API</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+</div>
+
+<div data-role="content">
+
+
+ <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
+ <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 & Utilities</a></li>
+ <li><a href="data-attributes.html">Data attribute reference</a></li>
+ <li><a href="themes.html">Theme framework</a></li>
+ </ul>
+
+</div>
+
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Responsive Layout Helpers</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Responsive Layout Helpers</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</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 & 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>
+
+ <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>
+ <pre>
+ <code>
+.portrait {
+ /* portrait orientation changes go here! */
+}
+.landscape {
+ /* landscape orientation changes go here! */
+}
+ </code>
+ </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>
+<pre>
+ <code>
+.myelement {
+ float: none;
+}
+.min-width-480px .myelement {
+ float: left;
+}
+ </code>
+</pre>
+
+ <p>Many plugins in jQuery Mobile leverage these width breakpoints. For example, form elements float beside their labels when the browser is wider than 480 pixels. The CSS to support this behavior for form text inputs looks like this:</p>
+
+<pre>
+ <code>
+label.ui-input-text {
+ display: block;
+}
+.min-width-480px label.ui-input-text {
+ display: inline-block;
+}
+ </code>
+</pre>
+
+ <h3>Adding Width Breakpoints</h3>
+ <p>To utilize width breakpoints of your own, jQuery Mobile exposes the <code>$.mobile.addResolutionBreakpoints </code> function, which accepts either a single number or array of numbers that will be added to the min/max breakpoints whenever they apply.</p>
+<pre>
+ <code>
+//add a min/max class for 1200 pixel widths
+$.mobile.addResolutionBreakpoints(1200);
+
+//add min/max classes for 1200, and 1440 pixel widths
+$.mobile.addResolutionBreakpoints([1200, 1440]);
+ </code>
+</pre>
+
+<h3>Running Media Queries</h3>
+<p>jQuery Mobile provides a function that allows you to test whether a particular CSS Media Query applies. Simple call <code>$.mobile.media()</code> and pass a media type or query. If the browser supports that type or query, and it currently applies, the function will return true. If not, it'll return false.</p>
+
+<pre>
+ <code>
+//test for screen media type
+$.mobile.media("screen");
+
+//test a min-width media query
+$.mobile.media("screen and (min-width: 480px)");
+
+//test for iOS retina display
+$.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 & 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>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Methods</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Methods</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</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>
+
+
+ <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>
+
+ <dl>
+ <dt><code>·</code> Arguments</dt>
+ <dd><code>to</code> (<em>string or object</em>, required)
+<ul>
+ <li>String: Absolute or relative URL. ("about/us.html")</li>
+ <li>Object: jQuery collection object. (<code>$("#about")</code>)</li>
+ </ul>
+ </dd>
+
+ <dd><code>options</code> (<em>object</em>, optional)
+ <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: "get") 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>
+
+ </dl>
+ </dd>
+
+ <dd>Examples:
+ <pre>
+ <code>
+<strong>//transition to the "about us" page with a slideup transition</strong>
+$.mobile.changePage( "about/us.html", { transition: "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",
+ 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
+});
+
+ </code>
+ </pre>
+
+ </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>·</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: "get") 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>$.fn.jqmData(), $.fn.jqmRemoveData()</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>·</code> 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>·</code> 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>
+
+
+ <dt><code>$.fn.jqmEnhanceable()</code> (<em>method</em>)</dt>
+ <dd>For users that wish to respect <code>data-enhance=false</code> parent elements during manual enhancement or custom plugin authoring jQuery Mobile provides the <code>$.fn.jqmEnhanceable</code> filter method.</dd>
+ <dd>
+ <dl>
+ <dt><code>·</code> Settings:</dt>
+ <dd>If, and only if, <code>$.mobile.ignoreContentEnabled</code> is set to true, this method will traverse the parent nodes for each DOM element in the jQuery object and where it finds a <code>data-enhance=false</code> parent the child will be removed from the set.</dd>
+ <dt><code>·</code> Warning:</dt>
+ <dd>The operation of traversing all parent elements can be expensive for even small jQuery object sets.</dd>
+ </dl>
+ </dd>
+
+ <dt><code>$.fn.jqmHijackable()</code> (<em>method</em>)</dt>
+ <dd>For users that wish to respect <code>data-ajax=false</code> parent elements during custom form and link binding jQuery Mobile provides the <code>$.fn.jqmHijackable</code> filter method.</dd>
+ <dd>
+ <dl>
+ <dt><code>·</code> Settings:</dt>
+ <dd>If, and only if, <code>$.mobile.ignoreContentEnabled</code> is set to true, this method will traverse the parent nodes for each DOM element in the jQuery object and where it finds a <code>data-ajax=false</code> parent the child form or link will be removed from the set.</dd>
+ <dt><code>·</code> Warning:</dt>
+ <dd>The operation of traversing all parent elements can be expensive for even small jQuery object sets.</dd>
+ </dl>
+ </dd>
+
+ <dt><code>$.mobile.showPageLoadingMsg</code> (<em>method</em>)</dt>
+ <dd>Show the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
+ <dd>
+ <dl>
+ <dt><code>·</code> Arguments</dt>
+ <dd><code>theme</code> (<em>string</em>, default: "a") The theme swatch for the message.</dd>
+ <dd><code>msgText</code> (<em>string</em>, default: "loading") The text of the message.</dd>
+ <dd><code>textonly</code> (<em>boolean</em>, default: false) If true, the "spinner" image will be hidden when the message is shown.</dd>
+ </dl>
+ </dd>
+ <dd>Examples:
+ <pre>
+ <code>
+<strong>//cue the page loader</strong>
+$.mobile.showPageLoadingMsg();
+
+<strong>//use theme swatch "b", a custom message, and no spinner</strong>
+$.mobile.showPageLoadingMsg("b", "This is only a test", true);
+ </code>
+ </pre>
+
+ </dd>
+
+
+
+
+ <dt><code>$.mobile.hidePageLoadingMsg</code> (<em>method</em>)</dt>
+ <dd>Hide the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
+
+ <dd>Example:
+ <pre>
+ <code>
+<strong>//hide the page loader</strong>
+$.mobile.hidePageLoadingMsg();
+ </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>·</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>·</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>
+
+ </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>·</code> Arguments</dt>
+ <dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>
+
+ <dt><code>·</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&type=unread#msg-content
+// obj.hrefNoHash: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&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&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>·</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>·</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&b=2</strong>
+var absUrl = $.mobile.path.makeUrlAbsolute("?a=1&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>·</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>·</code> Arguments</dt>
+ <dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>
+
+ <dt><code>·</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&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>·</code> Arguments</dt>
+ <dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>
+
+ <dt><code>·</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&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>
+
+
+
+ <dt><code>$.mobile.silentScroll</code> (<em>method</em>)</dt>
+ <dd>Scroll to a particular Y position without triggering scroll event listeners.</dd>
+ <dd>
+ <dl>
+ <dt><code>·</code> Arguments:</dt>
+ <dd><code>yPos</code> (<em>number</em>, defaults to 0). Pass any number to scroll to that Y location.</dd>
+ </dl>
+ </dd>
+
+ <dd>Examples:
+ <pre>
+ <code>
+<strong>//scroll to Y 100px</strong>
+$.mobile.silentScroll(100);
+ </code>
+ </pre>
+
+ </dd>
+
+
+
+
+
+ <dt><code>$.mobile.activePage</code> (<em>property</em>)</dt>
+ <dd>Reference to the page currently in view.</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><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 & 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>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Static Containers, States</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Themes</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+ <div data-role="content">
+
+ <div class="content-primary">
+ <h2>Theming overview</h2>
+
+ <p>The theming system used in jQuery Mobile is similar to the ThemeRoller system in jQuery UI with a few important improvements:</p>
+
+ <ul>
+ <li>It takes advantage of <strong>CSS3 properties</strong> to add rounded corners, box and text shadow and gradients instead of images, allowing the theme file to be very lightweight and reducing server requests.</li>
+ <li>Themes include multiple <strong>color "swatches"</strong> — each consisting of a header bar, content body, and button states that can be freely mixed and matched to create visual texture — to make richer designs possible.</li>
+ <li><strong>Open-ended theming</strong> allows for up to 26 unique swatches per theme, to add almost unlimited variety to designs.</li>
+ <li>All backgrounds now use <strong>CSS3 gradients</strong> to dramatically reduce file size and number of server requests.</li>
+ <li>There is a <strong>simplified icon set</strong> 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 & swatches</h2>
+
+ <p>The theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects. </p>
+
+ <p>Each theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the theme can include multiple color swatches, each with color values for bars, content blocks, buttons and list items, and font <code>text-shadow</code>. </p>
+
+ <p>The default theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline level (gray) that we use by default in many situations, "d" for an alternate secondary level and "e" as an accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch "f" that has a red bar and button for use in error situations. </p>
+
+ <p>Most theme changes can be done using ThemeRoller, but it's also simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme CSS file. Just copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors as you see fit.</p>
+
+
+ <h3>Bars</h3>
+ <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><!-- 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>
+
+
+
+ <h3>Content Blocks</h3>
+ <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><!-- 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">
+ <a href="#" data-icon="arrow-l">Back</a>
+ <h1>Default Header</h1>
+ </div>
+ <div class="ui-body ui-body-c">
+ <h3>Default Theme Content Header</h3>
+ <p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
+ <label for="slider1">Input slider:</label>
+ <input type="range" name="slider1" id="slider1" value="50" min="0" max="100" />
+ <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
+ <legend>Cache settings:</legend>
+ <input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
+ <label for="radio-choice-a1">On</label>
+ <input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off" />
+ <label for="radio-choice-b1">Off</label>
+ </fieldset>
+ <a href="#" data-role="button" data-inline="true">Button</a>
+ </div>
+ <div class="ui-bar ui-bar-a">
+ <div data-role="controlgroup" data-type="horizontal" >
+ <a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a>
+ </div><!-- /controlgroup -->
+ </div>
+
+
+ <p>Learn more about <a href="../content/content-themes.html">content theming</a>.</p>
+
+
+ <h2>Lists & Buttons</h2>
+ <p>Each swatch also includes default styles for interactive elements like list items and buttons.</p>
+ <ul data-role="listview" data-inset="true" data-theme="a">
+ <li><a href="index.html">List item</a></li>
+ <li><a href="index.html">List item</a></li>
+ </ul>
+
+ <ul data-role="listview" data-inset="true" data-theme="b">
+ <li><a href="index.html">List item</a></li>
+ <li><a href="index.html">List item</a></li>
+ </ul>
+
+ <ul data-role="listview" data-inset="true" data-theme="c">
+ <li><a href="index.html">List item</a></li>
+ <li><a href="index.html">List item</a></li>
+ </ul>
+
+ <ul data-role="listview" data-inset="true" data-theme="d">
+ <li><a href="index.html">List item</a></li>
+ <li><a href="index.html">List item</a></li>
+ </ul>
+
+ <ul data-role="listview" data-inset="true" data-theme="e">
+ <li><a href="index.html">List item</a></li>
+ <li><a href="index.html">List item</a></li>
+ </ul>
+
+
+ <p>A button is included for each swatch in the theme. Each button has styles for normal, hover/focus and pressed states.</p>
+
+ <div class="swatch-preview">
+ <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Button A</a>
+ <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Button B</a>
+ <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Button C</a>
+ <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Button D</a>
+ <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l">Button E</a>
+ </div><!-- end swatch-bars -->
+
+
+ <p>By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent bar or content box. Thus, the button is visually integrated into the parent theme as shown here:</p>
+
+ <div class="swatch-preview">
+ <div data-role="header" data-theme="a"><h1>Bar A</h1><a href="index.html" data-icon="arrow-l">Button A</a></div>
+ <div data-role="header" data-theme="b"><h1>Bar B</h1><a href="index.html" data-icon="arrow-l">Button B</a></div>
+ <div data-role="header" data-theme="c"><h1>Bar C</h1><a href="index.html" data-icon="arrow-l">Button C</a></div>
+ <div data-role="header" data-theme="d"><h1>Bar D</h1><a href="index.html" data-icon="arrow-l">Button D</a></div>
+ <div data-role="header" data-theme="e"><h1>Bar E</h1><a href="index.html" data-icon="arrow-l">Button E</a></div>
+ </div><!-- end swatch-bars -->
+
+ <p>This default behavior makes it easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container.</p>
+
+ <p>If you want to add visual emphasis to a button, 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><!-- 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>
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+ <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><!-- 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>
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+ <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><!-- 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>
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+ <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><!-- 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>
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+ <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><!-- 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>
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
+ </div>
+ </div>
+
+ </div><!-- end swatch-bars -->
+
+<p>Learn more about <a href="../lists/lists-themes.html">list theming</a> and <a href="../buttons/buttons-themes.html">button theming</a>.</p>
+
+ <h3>Global "Active" state</h3>
+ <p>The jQuery Mobile framework uses a swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the <code>ui-btn-active</code> style rules.</p>
+
+ <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
+ <legend>Active is used for the on state of these toggles:</legend>
+ <input type="radio" name=" radio-choice-a" id="radio-choice-a" value="on" checked="checked" />
+ <label for="radio-choice-a">On</label>
+ <input type="radio" name=" radio-choice-a" id="radio-choice-b" value="off" />
+ <label for="radio-choice-b">Off</label>
+ </fieldset>
+
+
+ <h3>Icons</h3>
+ <p>There is 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. 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>
+ <li><a href="../toolbars/bars-themes.html">Toolbar theming</a></li>
+ <li><a href="../content/content-themes.html">Content theming</a></li>
+ <li><a href="../buttons/buttons-themes.html">Button theming</a></li>
+ <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 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 & 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>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Buttons</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Button API</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="c">
+
+ <h2>Dependencies</h2>
+ <p>To be documented</p>
+
+ <h2>Options</h2>
+ <p>To be documented</p>
+
+ <h2>Methods</h2>
+ <p>To be documented</p>
+
+ <h2>Known Issues</h2>
+ <p>To be documented</p>
+
+
+
+ </div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Button events</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Button basics</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Button basics</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="buttons-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+ <p>Bind events directly to the <code>a</code>, <code>input</code>, or <code>button</code> element. Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$( ".myButton" ).bind( "click", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The <strong>form button</strong> plugin has the following custom events:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a form button is created</dt>
+ <dd>
+
+ <pre><code>
+$('[type='submit']').button({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Buttons</li>
+ <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Grouped Buttons</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Grouped</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <h2>Grouped buttons</h2>
+ <p>Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code> data-role="controlgroup"</code> attribute — the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
+<pre><code>
+<div data-role="controlgroup">
+<a href="index.html" data-role="button">Yes</a>
+<a href="index.html" data-role="button">No</a>
+<a href="index.html" data-role="button">Maybe</a>
+</div>
+</code></pre>
+
+ <p>By default, grouped buttons are presented as a vertical list:</p>
+
+ <div data-role="controlgroup">
+ <a href="index.html" data-role="button">Yes</a>
+ <a href="index.html" data-role="button">No</a>
+ <a href="index.html" data-role="button">Maybe</a>
+ </div>
+
+ <p>By adding the <code>data-type="horizontal"</code> attribute to the <code>controlgroup</code> container, you can swap to a horizontal-style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. (Be aware that these will wrap to multiple lines if the number of buttons or the overall text length is too wide for the screen.)
+
+ <p>Horizontal grouped buttons:</p>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="index.html" data-role="button">Yes</a>
+ <a href="index.html" data-role="button">No</a>
+ <a href="index.html" data-role="button">Maybe</a>
+ </div>
+
+ <p>Mini horizontal grouped buttons by adding <code>data-mini="true</code> to the controlgroup:</p>
+ <div data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <a href="index.html" data-role="button">Yes</a>
+ <a href="index.html" data-role="button">No</a>
+ <a href="index.html" data-role="button">Maybe</a>
+ </div>
+
+ <p>Horizontal grouped buttons with icons:</p>
+ <div data-role="controlgroup" data-type="horizontal" >
+ <a href="index.html" data-role="button" data-icon="plus">Add</a>
+ <a href="index.html" data-role="button" data-icon="delete">Delete</a>
+ </div>
+
+ <p>Mini horizontal grouped buttons with icons by adding <code>data-mini="true</code> to the controlgroup::</p>
+ <div data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <a href="index.html" data-role="button" data-icon="plus">Add</a>
+ <a href="index.html" data-role="button" data-icon="delete">Delete</a>
+ </div>
+
+ <p>Horizontal grouped buttons, icon only:</p>
+ <div data-role="controlgroup" data-type="horizontal" >
+ <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
+ <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
+ </div>
+
+
+ </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">Buttons</li>
+ <li><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li data-theme="a"><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Button icons</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Button icons</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <h2>Adding Icons to Buttons</h2>
+ <p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.</p>
+
+
+ <p>An icon can be added to a button by adding a <code> data-icon</code> attribute on the anchor specifying the icon to display. For example, the following markup:</p>
+
+ <code>
+ <a href="index.html" data-role="button" <strong> data-icon="delete"</strong>>Delete</a>
+ </code>
+
+ <p>Creates this button with an icon:</p>
+ <a href="index.html" data-role="button" data-icon="delete">Delete</a>
+
+ <p>A more compact button with the <code> data-inline="true"</code> attribute added to the button:</p>
+ <a href="index.html" data-role="button" data-icon="delete" data-mini="true">Delete</a>
+
+ <h2>Icon set</h2>
+
+ <p>The following <code> data-icon</code> attributes can be referenced to create the icons shown below:</p>
+
+ <p><strong>Left arrow</strong> - data-icon="arrow-l"</p>
+ <a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
+ <p><strong>Right arrow</strong> - data-icon="arrow-r"</p>
+ <a href="index.html" data-role="button" data-icon="arrow-r">My button</a>
+ <p><strong>Up arrow</strong> - data-icon="arrow-u"</p>
+ <a href="index.html" data-role="button" data-icon="arrow-u">My button</a>
+ <p><strong>Down arrow</strong> - data-icon="arrow-d"</p>
+ <a href="index.html" data-role="button" data-icon="arrow-d">My button</a>
+ <p><strong>Delete</strong> - data-icon="delete"</p>
+ <a href="index.html" data-role="button" data-icon="delete">My button</a>
+ <p><strong>Plus</strong> - data-icon="plus"</p>
+ <a href="index.html" data-role="button" data-icon="plus">My button</a>
+ <p><strong>Minus</strong> - data-icon="minus"</p>
+ <a href="index.html" data-role="button" data-icon="minus">My button</a>
+ <p><strong>Check</strong> - data-icon="check"</p>
+ <a href="index.html" data-role="button" data-icon="check">My button</a>
+ <p><strong>Gear</strong> - data-icon="gear"</p>
+ <a href="index.html" data-role="button" data-icon="gear">My button</a>
+ <p><strong>Refresh</strong> - data-icon="refresh"</p>
+ <a href="index.html" data-role="button" data-icon="refresh">My button</a>
+ <p><strong>Forward</strong> - data-icon="forward"</p>
+ <a href="index.html" data-role="button" data-icon="forward">My button</a>
+ <p><strong>Back</strong> - data-icon="back"</p>
+ <a href="index.html" data-role="button" data-icon="back">My button</a>
+ <p><strong>Grid</strong> - data-icon="grid"</p>
+ <a href="index.html" data-role="button" data-icon="grid">My button</a>
+ <p><strong>Star</strong> - data-icon="star"</p>
+ <a href="index.html" data-role="button" data-icon="star">My button</a>
+ <p><strong>Alert</strong> - data-icon="alert"</p>
+ <a href="index.html" data-role="button" data-icon="alert">My button</a>
+ <p><strong>Info</strong> - data-icon="info"</p>
+ <a href="index.html" data-role="button" data-icon="info">My button</a>
+ <p><strong>Home</strong> - data-icon="home"</p>
+ <a href="index.html" data-role="button" data-icon="home">My button</a>
+ <p><strong>Search</strong> - data-icon="search"</p>
+ <a href="index.html" data-role="button" data-icon="search">My button</a>
+
+
+ <h2>Icon positioning</h2>
+ <p>By default, all icons in buttons are placed to the left of the button text. </p>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="left">Delete</a>
+
+ <p>This default may be overridden using the <code> data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p>
+
+<code>
+<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="right"</strong>>Delete</a>
+</code>
+
+ <p>Creates this button with right-aligned icon:</p>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
+
+ <p>Icons can also be positioned above the text by specifying <code> data-iconpos="top"</code></p>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">Delete</a>
+
+ <p>Or icons can also be positioned below the text by specifying <code> data-iconpos="bottom"</code></p>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">Delete</a>
+
+ <p>You can also create an icon-only button, by setting the <code> data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code> data-iconpos="right"</code> on the previous example with <code> data-iconpos="notext"</code>:</p>
+
+<code>
+<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="notext"</strong>>Delete</a>
+</code>
+
+ <p>Creates this icon-only button:</p>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
+
+
+
+ <h2>Mini & Inline</h2>
+ <p>The <a href="../forms/forms-all-mini.html">mini</a> and <a href="buttons-inline.html">inline</a> attributes can be added to produce more compact buttons:<p>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="left" data-mini="true" data-inline="true">Delete</a>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="right" data-mini="true" data-inline="true">Delete</a>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="top" data-mini="true" data-inline="true">Delete</a>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom" data-mini="true" data-inline="true">Delete</a>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-mini="true" data-inline="true">Delete</a>
+
+
+ <h2>Custom Icons</h2>
+ <p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code> data-icon</code> value and apply it to the button: <code>ui-icon-myapp-email</code>. </p>
+ <p>You can then write a CSS rule in your stylesheet that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
+ <p> In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.</p>
+
+<pre><code>.ui-icon-myapp-email {
+ background-image: url("app-icon-email.png");
+}</code></pre>
+
+ <p>This will create the standard resolution icon, but many devices now have very high resolution displays, like the retina display on the iPhone 4. To add a HD icon, create an icon that is 36x36 pixels (exactly double the 18 pixel size), and add second rule that uses the <code>-webkit-min-device-pixel-ratio: 2</code> media query to target a rule only to high resolution displays. Specify the background image for the HD icon file and set the background size to 18x18 pixels which will fit the 36 pixel icon into the same 18 pixel space. The media query block can wrap multiple icon rules:</p>
+<pre><code>
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+ .ui-icon-myapp-email {
+ background-image: url("app-icon-email-highres.png");
+ background-size: 18px 18px;
+ }
+ ...more HD icon rules go here...
+}
+</code></pre>
+
+ <h2>Icons and themes</h2>
+ <p>The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches with <a href="buttons-themes.html">themed buttons</a>.</p>
+
+ <!-- A themed -->
+ <p><strong>Swatch "A"</strong> themed buttons</p>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+ </div>
+
+ <!-- B themed -->
+ <p><strong>Swatch "B"</strong> themed buttons</p>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+ </div>
+
+ <!-- C themed -->
+ <p><strong>Swatch "C"</strong> themed buttons</p>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+ </div>
+
+ </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">Buttons</li>
+ <li><a href="buttons-types.html">Button basics</a></li>
+ <li data-theme="a"><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Inline buttons</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Inline buttons</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Inline buttons</h2>
+ <p>By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:</p>
+
+ <a href="index.html" data-role="button">Button</a>
+
+
+ <p>However, if you want a more compact button that is only as wide as the text and icons inside, add the <code> data-inline="true"</code> attribute to the button:</p>
+
+
+ <a href="index.html" data-role="button" data-inline="true">Button</a>
+
+ <p>If you have multiple buttons that should sit side-by-side on the same line, add the <code> data-inline="true"</code> attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
+
+<pre><code>
+<a href="index.html" data-role="button" data-inline="true">Cancel</a>
+<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>
+</code></pre>
+
+ <p>The result is this:</p>
+
+ <a href="index.html" data-role="button" data-inline="true">Cancel</a>
+ <a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a>
+
+ <p>Adding the <code>data-mini="true"</code> to the inline buttons creates a more compact version:</p>
+
+ <a href="index.html" data-role="button" data-inline="true" data-mini="true">Cancel</a>
+ <a href="index.html" data-role="button" data-theme="b" data-inline="true" data-mini="true">Save</a>
+
+
+ <p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the <a href="../content/content-grids.html">content column grids</a> to put normal full-width buttons into 2- or 3-columns.</p>
+
+ <h2>Icon example</h2>
+ <p>When an <a href="buttons-icons.html">icon</a> is added to an inline button, the button will grow wider to accommodate the icon:<p>
+
+ <a href="index.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a>
+ <a href="index.html" data-role="button" data-icon="check" data-theme="b" data-inline="true">Save</a>
+
+ <p>A mini version of the same:<p>
+
+ <a href="index.html" data-role="button" data-icon="delete" data-inline="true" data-mini="true">Cancel</a>
+ <a href="index.html" data-role="button" data-icon="check" data-theme="b" data-inline="true" data-mini="true">Save</a>
+
+ </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">Buttons</li>
+ <li><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li data-theme="a"><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Button methods</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Button basics</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Button basics</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="buttons-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The following methods apply only to <strong>form buttons</strong>. Link-based buttons do not have any associated methods.</p>
+
+ <dl>
+
+ <dt><code>enable</code> enable a disabled form button</dt>
+ <dd>
+ <pre><code>
+$('[type='submit']').button('enable');
+ </code></pre>
+ </dd>
+
+ <dt><code>disable</code> disable a form button</dt>
+ <dd>
+ <pre><code>
+$('[type='submit']').button('disable');
+ </code></pre>
+ </dd>
+
+ <dt><code>refresh</code> update the form button</dt>
+ <dd>
+ <p>If you manipulate a form button via JavaScript, you must call the refresh method on it to update the visual styling.</p>
+
+ <pre><code>
+$('[type='submit']').button('refresh');
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Buttons</li>
+ <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Button options</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Button basics</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Button basics</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="buttons-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The following options apply to <strong>all buttons</strong>:</p>
+
+ <dl>
+ <dt><code>corners</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Applies the theme button border-radius if set to true. This option is also exposed as a data attribute: <code>data-corners="false"</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ corners: "false" }</strong>);</code></pre>
+ <a href="#" data-role="button" data-corners="false">No rounded corners</a>
+ </dd>
+ <dt><code>icon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null</p>
+ <p>Applies an icon from the <a href="../buttons/buttons-icons.html">icon set</a>. This option is also exposed as a data attribute: <code>data-icon="star"</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ icon: "star" }</strong>);</code></pre>
+ <a href="#" data-role="button" data-icon="star">Star icon</a>
+ </dd>
+
+ <dt><code>iconpos</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "left"</p>
+ <p>Positions the icon in the button. Possible values: left, right, top, bottom, none, notext. The notext value will display an icon-only button with no text feedback. This option is also exposed as a data attribute: <code>data-iconpos="left"</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ iconpos: "right" }</strong>);</code></pre>
+ <a href="#" data-role="button" data-icon="star" data-iconpos="right">Star icon</a>
+ </dd>
+
+ <dt><code>iconshadow</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Applies the theme shadow to the button's icon if set to true. This option is also exposed as a data attribute: <code>data-iconshadow="false"</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ iconshadow: "false" }</strong>);</code></pre>
+ <a href="#" data-role="button" data-icon="star" data-iconshadow="false">No icon shadow</a>
+ </dd>
+
+ <dt><code>inline</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: null (false)</p>
+ <p>If set to true, this will make the button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the button is full width, regardless of the feedback content. Possible values: true, false. This option is also exposed as a data attribute: <code>data-inline="true"</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ inline: "true" }</strong>);</code></pre>
+ <a href="#" data-role="button" data-inline="true">Inline</a>
+ </dd>
+
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: null (false)</p>
+ <p>If set to true, this will display a more compact version of the button that uses less vertical height. Possible values: true, false. This option is also exposed as a data attribute: <code>data-mini="true"</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ mini: "true" }</strong>);</code></pre>
+ <a href="#" data-role="button" data-mini="true">Inline</a>
+ </dd>
+
+ <dt><code>shadow</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Applies the drop shadow style to the button if set to true. This option is also exposed as a data attribute: <code>data-shadow="false"</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ shadow: "false" }</strong>);</code></pre>
+ <a href="#" data-role="button" data-shadow="false">No button shadow</a>
+ </dd>
+
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ theme: "a" }</strong>);</code></pre>
+ <a href="#" data-role="button" data-theme="a">Theme A</a>
+ </dd>
+ </dl>
+
+ <div class="ui-body ui-body-e">
+ <p>The following option applies only to <strong>form buttons</strong>, which are automatically initialized by the framework:</p>
+ </div>
+
+ <dl>
+ <dt><code>initSelector</code> <em>CSS selector string</em></dt>
+ <dd>
+ <p class="default">default: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as form buttons. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.button.prototype.options.initSelector = ".myButtons";</strong>
+});
+</code></pre>
+ </dd>
+ </dl>
+
+
+ </form>
+ </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">Buttons</li>
+ <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Theming buttons</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Theming buttons</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <h2>Theming buttons</h2>
+
+ <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
+
+ <div class="ui-body ui-body-a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div>
+ <div class="ui-body ui-body-b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div>
+ <div class="ui-body ui-body-c"><h4>C swatch</h4><a href="index.html" data-role="button">Button</a></div>
+ <div class="ui-body ui-body-d"><h4>D swatch</h4><a href="index.html" data-role="button">Button</a></div>
+ <div class="ui-body ui-body-e"><h4>E swatch</h4><a href="index.html" data-role="button">Button</a></div>
+
+ <h2>Assigning theme swatches</h2>
+ <p>Buttons can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code> data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
+
+<pre><code>
+<a href="index.html" data-role="button" data-theme="a">Theme a</a>
+</code></pre>
+
+ <p>Here are 5 buttons with icons that have a different swatch letter assigned via the <code> data-theme</code> attribute.</p>
+
+ <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
+ <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
+ <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
+ <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
+ <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
+
+ <h2>Theme variations</h2>
+
+ <p><strong>"a" theme</strong> on container with themed buttons inside</p>
+ <div class="ui-body ui-body-a">
+ <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
+ <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
+ <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
+ <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
+ <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
+ </div>
+
+ <p><strong>"b" theme</strong> on container with themed buttons inside</p>
+ <div class="ui-body ui-body-b">
+ <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
+ <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
+ <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
+ <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
+ <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
+ </div>
+
+ <p><strong>"c" theme</strong> on container with themed buttons inside</p>
+ <div class="ui-body ui-body-c">
+ <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
+ <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
+ <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
+ <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
+ <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
+ </div>
+
+ <p><strong>"d" theme</strong> on container with themed buttons inside</p>
+ <div class="ui-body ui-body-d">
+ <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
+ <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
+ <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
+ <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
+ <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
+ </div>
+
+ <p><strong>"e" theme</strong> on container with themed buttons inside</p>
+ <div class="ui-body ui-body-e">
+ <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
+ <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
+ <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
+ <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
+ <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
+ </div>
+
+ </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">Buttons</li>
+ <li><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li data-theme="a"><a href="buttons-themes.html">Theming buttons</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Button types</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Button basics</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <h2>Button basics</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="buttons-types.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+
+ <p>Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (<code>a</code> elements) to mark up navigation buttons, and <code>input</code> or <code>button</code> elements for form submission.</p>
+ <p>View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes for buttons including adding <a href="buttons-icons.html">icons</a> or displaying them <a href="buttons-inline.html">inline</a> or <a href="buttons-grouped.html">grouped</a>.</p>
+
+ <h2>Styling links as buttons</h2>
+
+ <p>In the main content block of a page, you can style any anchor link as a button by adding the <code>data-role="button"</code> attribute. The framework will enhance the link with markup and classes to style the link as a button. For example, this markup: </p>
+
+<code>
+<a href="index.html" data-role="button">Link button</a>
+</code>
+
+ <p>Produces this <strong>link-based</strong> button:</p>
+ <a href="index.html" data-role="button">Link button</a>
+
+ <p><strong>Note:</strong> Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the <code>button</code> plugin and only just use the underlying <code>buttonMarkup</code> plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.</p>
+
+ <h2>Mini size</h2>
+
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the button to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>
+<a href="index.html" data-role="button" <strong>data-mini="true"</strong>>Link button</a>
+</code></pre>
+
+ <p>This will produce a search input that a not as tall as the standard version and has a smaller text size.</p>
+ <a href="index.html" data-role="button" data-mini="true">Link button</a>
+
+
+
+ <h2>Form buttons</h2>
+ <p>For ease of styling, the framework automatically converts any <code>button</code> or <code>input</code> element with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> into a custom styled button — there is no need to add the <code> data-role="button"</code> attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:</p>
+
+<code>
+$('[type='submit']').button();
+</code>
+
+ <p>To preserve events bound to the original <code>button</code> or <code>input</code>, the framework hides the original element by making it transparent and positioning it over the new button markup. When a user clicks on the the custom-styled button, they're actually clicking on the original element. To prevent a form button from being converted into an enhanced button, add the <code>data-role="none"</code> attribute and hte native control will be rendered.</p>
+
+ <p><strong>Button</strong> based button:</p>
+ <button>Button element</button>
+
+ <p><strong>Input type="button"</strong> based button:</p>
+ <input type="button" value="buttonBtn" />
+
+ <p><strong>Input type="submit"</strong> based button:</p>
+ <input type="submit" value="submitBtn" />
+
+ <p><strong>Input type="reset"</strong> based button:</p>
+ <input type="reset" value="resetBtn" />
+
+ <p><strong>Input type="image"</strong> based button:</p>
+ <input type="image" value="imageBtn" />
+
+ </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">Buttons</li>
+ <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Buttons</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-index">
+
+ <div data-role="header" data-theme="f">
+ <h1>Buttons</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <p>Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins.</p>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+ </ul>
+ </div>
+ </div><!-- /content -->
+
+
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+
+ <script>
+ $(document).bind("mobileinit", function(){
+ $.mobile.defaultDialogTransition = 'flip';
+ });
+ </script>
+
+ <script src="../../js/"></script>
+
+
+</head>
+<body>
+
+ <div data-role="page">
+
+ <div data-role="header" data-theme="f">
+ <h1>Config applied</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <h2>defaultDialogTransition is now "flip"</h2>
+ <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+ <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+ <a href="../pages/dialog.html" data-role="button" data-rel="dialog">Or open a basic dialog</a>
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
+ <link rel="apple-touch-icon" href="../_assets/images/ios_icon.png"/>
+ <link rel="apple-touch-startup-image" href="../_assets/images/ios_startup.png" />
+ <title>jQuery Mobile Docs - Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+
+ <script>
+ $(document).bind("mobileinit", function() {
+ if (!!window.navigator.standalone) {
+ $.mobile.page.prototype.options.addBackBtn = true;
+ }
+ });
+ </script>
+
+ <script src="../../js/"></script>
+
+
+</head>
+<body>
+
+ <div data-role="page">
+
+ <div data-role="header" data-theme="f">
+ <h1>jQuery Mobile</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+ <div data-role="content">
+
+ <h2>Fullscreen docs in iOS</h2>
+ <p>First, hit Add to Home Screen to create a new shortcut icon on the home screen. Next, open the new shortcut and hit the button below to browse the docs as a fullscreen web app.</p>
+ <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+ </div>
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-index">
+
+ <div data-role="header" data-theme="f">
+ <h1>Pages</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <h2>Global config tests</h2>
+ <p>The following links will cause a full page refresh so that the global options configuration can take effect. Each link below will tweak a different option for quick testing.</p>
+
+
+ <ul data-role="listview" data-inset="true">
+ <li>
+ <a href="pushState.html" data-ajax="false">
+ <h3>pushStateEnabled - False</h3>
+ <p>Enhancement to use history.replaceState in supported browsers, to convert the hash-based Ajax URL into the full document path. </p>
+ </a>
+ </li>
+ <li>
+ <a href="pageTransition.html" data-ajax="false">
+ <h3>defaultPageTransition - Flow</h3>
+ <p>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</p>
+ </a>
+ </li>
+ <li>
+ <a href="dialogTransition.html" data-ajax="false">
+ <h3>defaultDialogTransition - Flip</h3>
+ <p>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.</p>
+ </a>
+ </li>
+ <li>
+ <a href="minScrollBack.html" data-ajax="false">
+ <h3>minScrollBack - 999</h3>
+ <p>Minimum scroll distance that will be remembered when returning to a page.</p>
+ </a>
+ </li>
+ <li>
+ <a href="loadingMessage.html" data-ajax="false">
+ <h3>loadingMessage - false</h3>
+ <p>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</p>
+ </a>
+ </li>
+ <li>
+ <a href="loadingMessageTextVisible.html" data-ajax="false">
+ <h3>loadingMessageTextVisible - true</h3>
+ <p>Show text in the page loader. This page also demonstrates options for ad hoc message generation.</p>
+ </a>
+ </li>
+ <li>
+ <a href="pageLoadErrorMessage.html" data-ajax="false">
+ <h3>pageLoadErrorMessage - "Yikes, we broke the internet!"</h3>
+ <p>Set the text that appears when a page fails to load through Ajax.</p>
+ </a>
+ </li>
+ <li>
+ <a href="iOSFullscreen.html" data-ajax="false">
+ <h3>apple-mobile-web-app-capable meta tag</h3>
+ <p>View the docs without browser chrome in iOS.</p>
+ </a>
+ </li>
+ </ul>
+
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+ <script src="http://code.jquery.com/jquery-1.7b1.js"></script>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page">
+
+ <div data-role="header" data-theme="f">
+ <h1>jQuery version</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <h2>jQuery core version 1.7 Beta 1</h2>
+ <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+ <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+
+ <script>
+ $(document).bind("mobileinit", function(){
+ $.mobile.loadingMessage = false;
+ });
+ </script>
+
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page">
+
+ <div data-role="header" data-theme="f">
+ <h1>Config applied</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <h2>loadingMessage is now disabled</h2>
+ <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+ <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script>
+ $(document).bind("mobileinit", function(){
+ $.mobile.loadingMessageTextVisible = true;
+ });
+ </script>
+
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page">
+ <script>
+ $(document).on("click", ".show-page-loading-msg", function() {
+ var $this = $( this ),
+ theme = $this.jqmData("theme") || $.mobile.loadingMessageTheme,
+ msgText = $this.jqmData("msgtext") || $.mobile.loadingMessage,
+ textonly = !!$this.jqmData("textonly");
+ $.mobile.showPageLoadingMsg(theme, msgText, textonly);
+ })
+ .on("click", ".hide-page-loading-msg", function() {
+ $.mobile.hidePageLoadingMsg();
+ });
+ </script>
+
+ <div data-role="header" data-theme="f">
+ <h1>Config applied</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <h2>loadingMessage text is now visible</h2>
+ <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+ <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+ <p>To display the loading message on demand:</p>
+ <pre><code>$.mobile.showPageLoadingMsg();</code></pre>
+ <p>Click the buttons below to show and hide the loading message with the default options.</p>
+ <div data-role="controlgroup">
+ <button class="show-page-loading-msg" data-inline="false" data-icon="arrow-r" data-iconpos="right">Show</button>
+ <button class="hide-page-loading-msg" data-inline="false" data-icon="delete" data-iconpos="right">Hide</button>
+ </div>
+
+ <h2>Theming the loading message</h2>
+ <p>To display the loading message with a different theme and message:</p>
+ <pre><code>$.mobile.showPageLoadingMsg(<strong>"a", "Loading theme a..."</strong>);</code></pre>
+ <p>The theme and message can be changed on the fly by calling the method again. Click the buttons below to see the loading message with the indicated theme.</p>
+ <div data-role="controlgroup">
+ <button class="show-page-loading-msg" data-theme="a" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme a...">Theme a</button>
+ <button class="show-page-loading-msg" data-theme="b" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme b...">Theme b</button>
+ <button class="show-page-loading-msg" data-theme="c" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme c...">Theme c</button>
+ <button class="show-page-loading-msg" data-theme="d" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme d...">Theme d</button>
+ <button class="show-page-loading-msg" data-theme="e" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme e...">Theme e</button>
+ <button class="hide-page-loading-msg" data-icon="delete" data-iconpos="right">Hide</button>
+ </div>
+
+ <h2>Text only messages</h2>
+ <p>To display the loading message with no spinner:</p>
+ <pre><code>$.mobile.showPageLoadingMsg("a", "No spinner", <strong>true</strong>);</code></pre>
+ <p>Click the button below to see the loading message with no spinner.</p>
+ <div data-role="controlgroup">
+ <button class="show-page-loading-msg" data-textonly="true" data-msgtext="Look Ma, no spinner!" data-icon="arrow-r" data-iconpos="right">Show</button>
+ <button class="hide-page-loading-msg" data-inline="false" data-icon="delete" data-iconpos="right">Hide</button>
+ </div>
+
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+
+ <script>
+ $(document).bind("mobileinit", function(){
+ $.mobile.minScrollBack = 999;
+ });
+ </script>
+
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page">
+
+ <div data-role="header" data-theme="f">
+ <h1>Config applied</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <h2>minScrollBack is now set to 999 (disabled)</h2>
+ <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+ <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+
+ <script>
+ $(document).bind("mobileinit", function(){
+ $.mobile.pageLoadErrorMessage = 'Yikes, we broke the internet!';
+ });
+ </script>
+
+ <script src="../../js/"></script>
+
+
+</head>
+<body>
+
+ <div data-role="page">
+
+ <div data-role="header" data-theme="f">
+ <h1>Config applied</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <h2>pageLoadErrorMessage is now "Yikes, we broke the internet!"</h2>
+ <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+ <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+ <a href="broken.html" data-role="button" data-rel="dialog">Or try this broken link</a>
+
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+
+ <script>
+ $(document).bind("mobileinit", function(){
+ $.mobile.defaultPageTransition = 'flow';
+ });
+ </script>
+
+ <script src="../../js/"></script>
+
+
+</head>
+<body>
+
+ <div data-role="page">
+
+ <div data-role="header" data-theme="f">
+ <h1>Config applied</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <h2>defaultPageTransition is now "flow"</h2>
+ <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+ <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+
+ <script>
+ $(document).bind("mobileinit", function(){
+ $.mobile.pushStateEnabled = false;
+ });
+ </script>
+
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page">
+
+ <div data-role="header" data-theme="f">
+ <h1>Config applied</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <h2>pushStateEnabled is now disabled</h2>
+ <p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+ <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+
+ <script>
+ $(document).bind("mobileinit", function(){
+ $.mobile.touchOverflowEnabled = true;
+ });
+ </script>
+
+ <script src="../../js/"></script>
+
+
+</head>
+<body>
+
+ <div data-role="page">
+
+ <div data-role="header" data-theme="f" data-position="fixed">
+ <h1>Config applied</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <h2>touchOverflowEnabled is now active</h2>
+ <p>The toolbar on this page should now be fixed, like a native toolbar. To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
+ <a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
+ <a href="../pages/touchoverflow.html" data-role="button" data-icon="arrow-r" data-iconpos="right">touchOverflow docs</a>
+
+ <h3>Some good pages to test out:</h3>
+ <a href="../toolbars/bars-fixed.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed toolbars</a>
+ <a href="../toolbars/bars-fullscreen.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fullscreen toolbars</a>
+ <a href="../toolbars/footer-persist-a.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed persistent footer</a>
+ <a href="../pages/page-dialogs.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Dialogs & transitions</a>
+
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Content formatting</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Content formatting API</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="c">
+
+ <h2>Dependencies</h2>
+ <p>To be documented</p>
+
+ <h2>Options</h2>
+ <p>To be documented</p>
+
+ <h2>Methods</h2>
+ <p>To be documented</p>
+
+ <h2>Known Issues</h2>
+ <p>To be documented</p>
+
+
+
+ </div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Collapsible Content</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Collapsible</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Collapsible content</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="content-collapsible.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="content-collapsible-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+ <p>Bind events directly to the container, typically a <code>div</code> element. Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$( ".selector" ).bind( "collapse", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The collapsible plugin has the following custom events:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a collapsible is created</dt>
+ <dd>
+
+ <pre><code>
+$( ".selector" ).collapsible({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+ <dt><code>collapse</code> triggered when a collapsible is collapsed</dt>
+ <dd>
+
+ <pre><code>
+$( ".selector" ).collapsible({
+ collapse: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+ <dt><code>expand</code> triggered when a collapsible is expanded</dt>
+ <dd>
+
+ <pre><code>
+$( ".selector" ).collapsible({
+ expand: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </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">Content Formatting</li>
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Collapsible Content</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Collapsible</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Collapsible content</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="content-collapsible.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The collapsible plugin has no public methods.</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">Content Formatting</li>
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Collapsible Content</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Collapsible</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Collapsible content</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="content-collapsible.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="content-collapsible-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The collapsible plugin has the following options:</p>
+
+ <dl>
+ <dt><code>collapsed</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>When false, the container is initially expanded with a minus icon in the header. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.collapsed = false;</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-collapsed="false"</code>.</p>
+ </dd>
+
+ <dt><code>collapseCueText</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: " click to collapse contents"</p>
+ <p>This text is used to provide audible feedback for users with screen reader software. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.collapseCueText = " collapse with a click";</strong>
+});
+</code></pre>
+ </dd>
+
+ <dt><code>contentTheme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for the collapsible content block. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.contentTheme = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-content-theme="a"</code>.</p>
+ </dd>
+
+ <dt><code>expandCueText</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: " click to expand contents"</p>
+ <p>This text is used to provide audible feedback for users with screen reader software. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.expandCueText = " expand with a click";</strong>
+});
+</code></pre>
+ </dd>
+
+ <dt><code>heading</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "h1,h2,h3,h4,h5,h6,legend"</p>
+ <p>Within the collapsible container, the first immediate child element that matches this selector will be used as the header for the collapsible. To change the selector, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.heading = ".mycollapsibleheading";</strong>
+});
+</code></pre>
+ </dd>
+
+ <dt><code>iconpos</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "left"</p>
+ <p>Positions the icon in the collapsible header. Possible values: left, right, top, bottom, none, notext.</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.iconpos = "right";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-iconpos="right"</code>.</p>
+ </dd>
+
+<!--
+ <dt><code>iconTheme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "d"</p>
+ <p>Sets the color scheme (swatch) for the collapsible header icon. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.iconTheme = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-icon-theme="a"</code>.</p>
+ </dd>
+-->
+
+ <dt><code>initSelector</code> <em>CSS selector string</em></dt>
+ <dd>
+ <p class="default">default: ":jqmData(role='collapsible')"</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as collapsibles. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.initSelector = ".mycollapsible";</strong>
+});
+</code></pre>
+ </dd>
+
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the size of the element to a more compact, <a href="../forms/forms-all-mini.html">mini version</a>. If the value is false for an individual collapsible container, but that container is part of a collapsible set, then the value is inherited from the parent collapsible set. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.mini = true;</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-mini="true"</code>.</p>
+ </dd>
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for the collapsible. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.theme = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-theme="a"</code>.</p>
+ </dd>
+
+
+ </dl>
+ </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">Content Formatting</li>
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Collapsible Content</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Collapsible set</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Collapsible sets</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="content-collapsible-set.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="content-collapsible-set-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="content-collapsible-set-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="content-collapsible-set-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+ <p>Bind events directly to the set container, typically a <code>div</code> element. Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$( ".selector" ).bind( "create", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The collapsible set plugin has the following custom event:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a collapsible set is created</dt>
+ <dd>
+
+ <pre><code>
+$( ".selector" ).collapsibleset({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </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">Content Formatting</li>
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Collapsible Sets</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Collapsible set</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Collapsible sets</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="content-collapsible-set.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="content-collapsible-set-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="content-collapsible-set-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="content-collapsible-set-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The collapsible set plugin has the following method:</p>
+
+ <dl>
+ <dt><code>refresh</code> update the collapsible set</dt>
+ <dd>
+ <p>If you manipulate a collapsible set via JavaScript (e.g. add new collapsible containers), you must call the refresh method on it to update the visual styling.</p>
+
+ <pre><code>
+$('.selector').collapsibleset('refresh');
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </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">Content Formatting</li>
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Collapsible Sets</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Collapsible set</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Collapsible sets</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="content-collapsible-set.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="content-collapsible-set-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="content-collapsible-set-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="content-collapsible-set-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The collapsible plugin has the following options:</p>
+
+ <dl>
+ <dt><code>iconpos</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "left"</p>
+ <p>Positions the icons in the collapsible headers. Possible values: left, right, top, bottom, none, notext.</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsibleset.prototype.options.iconpos = "right";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-iconpos="right"</code>.</p>
+ </dd>
+
+ <dt><code>initSelector</code> <em>CSS selector string</em></dt>
+ <dd>
+ <p class="default">default: ":jqmData(role='collapsible-set')"</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as collapsible sets. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsibleset.prototype.options.initSelector = ".mycollapsibleset";</strong>
+});
+</code></pre>
+ </dd>
+
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the size of the element to a more compact, <a href="../forms/forms-all-mini.html">mini version</a>. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsibleset.prototype.options.mini = true;</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-mini="true"</code>.</p>
+ </dd>
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for the collapsible set. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsibleset.prototype.options.theme = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-theme="a"</code>.</p>
+ </dd>
+
+ </dl>
+ </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">Content Formatting</li>
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Collapsible Content</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Collapsible set</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Collapsible set (accordion)</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="content-collapsible-set.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="content-collapsible-set-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="content-collapsible-set-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="content-collapsible-set-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>Collapsible sets start with the exact same markup as <a href="content-collapsible.html">individual collapsibles</a>. By adding a parent wrapper with a <code> data-role="collapsible-set"</code> attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsible sets.</p>
+ <p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
+
+ <pre><code>
+<strong><div data-role="collapsible-set"></strong>
+
+ <div data-role="collapsible" <strong>data-collapsed="false"</strong>>
+ <h3>Section 1</h3>
+ <p>I'm the collapsible set content for section B.</p>
+ </div>
+
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>I'm the collapsible set content for section B.</p>
+ </div>
+
+<strong></div></strong>
+ </code></pre>
+
+
+ <p>Here is an example of a collapsible set with 5 sections.</p>
+
+ <div data-role="collapsible-set">
+ <div data-role="collapsible" data-collapsed="false">
+ <h3>Section 1</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 3</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 4</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 5</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ </div>
+
+ <h2>Mini collapsible sets</h2>
+
+ <p>For a more compact version that is useful in tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
+
+ <div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
+ <div data-role="collapsible">
+ <h3>Section 1</h3>
+ <p>Collapsible content</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>Collapsible content</p>
+
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 3</h3>
+ <p>Collapsible content</p>
+ </div>
+ </div>
+
+ <h2>Icon positioning</h2>
+ <p>Collapsible headings’ default icon positioing can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
+
+ <div data-role="collapsible-set" data-theme="c" data-iconpos="right">
+ <div data-role="collapsible">
+ <h3>Section 1</h3>
+ <p>Inherits icon positioning from <code>data-iconpos="right"</code> attribute on parent.</p>
+ </div>
+ <div data-role="collapsible" data-iconpos="left">
+ <h3>Section 2</h3>
+ <p>data-iconpos="left"</p>
+ </div>
+ <div data-role="collapsible" data-iconpos="bottom">
+ <h3>Section 3</h3>
+ <p>data-iconpos="bottom"</p>
+ </div>
+ <div data-role="collapsible" data-iconpos="top">
+ <h3>Section 4</h3>
+ <p>data-iconpos="top"</p>
+ </div>
+ </div>
+
+
+
+ <h2>Theming collapsible content</h2>
+ <p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>
+
+
+<pre><code>
+<div data-role="collapsible-set" <strong>data-theme="c" data-content-theme="d"</strong>>
+</code></pre>
+
+
+ <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
+ <div data-role="collapsible">
+ <h3>Section 1</h3>
+ <p>Collapsible content</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>Collapsible content</p>
+
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 3</h3>
+ <p>Collapsible content</p>
+ </div>
+ </div>
+
+ <h2>Theming individual sections</h2>
+ <p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>
+
+ <div data-role="collapsible-set" data-content-theme="c">
+ <div data-role="collapsible" data-theme="b" data-content-theme="b">
+ <h3>Section header, swatch B</h3>
+ <p>Collapsible content, swatch B</p>
+ </div>
+ <div data-role="collapsible" data-theme="a" data-content-theme="a">
+ <h3>Section header, swatch A</h3>
+ <p>Collapsible content, swatch A</p>
+ </div>
+ <div data-role="collapsible" data-theme="e" data-content-theme="d">
+ <h3>Section header, swatch E</h3>
+ <p>Collapsible content, swatch D</p>
+ </div>
+ </div>
+
+ </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">Content Formatting</li>
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Collapsible Content</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Collapsible</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Collapsible content</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="content-collapsible.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>To create a collapsible block of content, create a container and add the <code> data-role="collapsible"</code> attribute. Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsibles.</p>
+
+ <p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
+
+ <p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>
+
+ <p>By default, the content will be collapsed.</p>
+<pre><code>
+<div <strong>data-role="collapsible"</strong>>
+ <h3>I'm a header</h3>
+ <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
+</div>
+</code></pre>
+
+
+ <div data-role="collapsible">
+ <h3>I'm a header</h3>
+ <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
+ </div>
+
+ <h2>Expanding collapsibles on load</h2>
+
+ <p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
+
+<code>
+<div data-role="collapsible" <strong>data-collapsed="false"></strong>
+</code>
+
+ <p>This code will create a collapsible widget like this:</p>
+
+
+ <div data-role="collapsible" data-collapsed="false">
+ <h3>I'm a header</h3>
+ <p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
+ </div>
+
+ <h2>Mini collapsibles</h2>
+
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
+
+ <code>
+ <div data-role="collapsible" <strong>data-mini="true"></strong>
+ </code>
+
+ <p>This code will create a mini collapsible widget:</p>
+
+ <div data-role="collapsible" data-mini="true">
+ <h3>I'm a mini header</h3>
+ <p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
+ </div>
+
+ <h2>Icon positioning</h2>
+ <p>Collapsible headings’ default icon positioing can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
+
+ <div data-role="collapsible" data-iconpos="right">
+ <h3>I'm a header</h3>
+ <p><code>data-iconpos="right"</code></p>
+ </div>
+
+
+ <h2>Theming collapsible content</h2>
+
+
+ <p>Collapsible content is minimally styled — we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
+
+ <p>To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This will apply the swatch's border and <em>flat</em> background color (not the gradient) to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.</p>
+
+<pre><code>
+<div data-role="collapsible" <strong>data-content-theme="c"</strong>>
+ <h3>Header swatch A</h3>
+ <p>I'm the collapsible content with a themed content block set to "C".</p>
+</div>
+</code></pre>
+
+ <div data-role="collapsible" data-content-theme="c">
+ <h3>Header swatch</h3>
+ <p>I'm the collapsible content with a themed content block set to "C".</p>
+ </div>
+
+ <h2>Theming collapsible headers</h2>
+ <p>To set the theme on a collapsible header button, add the <code>data-theme</code> attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.</p>
+
+<pre><code>
+<div data-role="collapsible" <strong>data-theme="a" data-content-theme="a"</strong>>
+ <h3>Header swatch A</h3>
+ <p>I'm the collapsible content with a themed content block set to "A".</p>
+</div>
+</code></pre>
+
+ <div data-role="collapsible" data-theme="a" data-content-theme="a">
+ <h3>Header swatch A</h3>
+ <p>I'm the collapsible content with a themed content block set to "A".</p>
+ </div>
+
+
+
+ <div data-role="collapsible" data-theme="b" data-content-theme="d">
+ <h3>Header swatch B</h3>
+ <p>I'm the collapsible content with a themed content block set to "D".</p>
+ </div>
+
+
+
+ <h2>Nested Collapsibles</h2>
+
+ <p>Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide clearer visual connection between the levels.</p>
+ <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
+ <h3>I'm a header</h3>
+ <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
+
+ <div data-role="collapsible" data-theme="c" data-content-theme="c">
+ <h3>I'm a nested collapsible with a child collapsible</h3>
+ <p>I'm a child collapsible.</p>
+ <div data-role="collapsible" data-theme="d" data-content-theme="d">
+ <h3>Nested inside again.</h3>
+ <p>Three levels deep now.</p>
+ </div><!-- /section 1A -->
+ </div><!-- /section 1 -->
+
+
+ <div data-role="collapsible" data-content-theme="c">
+ <h3>Section 3: Form elements</h3>
+ <form action="#" method="get">
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+ <div data-role="fieldcontain">
+ <label for="slider">Input slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </div>
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+ </fieldset>
+ </form>
+ </div><!-- /section 2 -->
+
+ <div data-role="collapsible" data-content-theme="c">
+ <h3>Section 4: Collapsed list</h3>
+ <p>Here is an inset list:</p>
+ <ul data-role="listview" data-inset="true" data-theme="d">
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ </ul>
+ </div><!-- /section 3 -->
+ </div>
+
+
+
+ <h2>Collapsible sets (accordions)</h2>
+ <p>It's possible to combine multiple collapsibles into a grouped sets that acts like an <a href="content-collapsible-set.html">accordion widget</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">Content Formatting</li>
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Content Grids</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Layout grids</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <p>Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). </p>
+
+ <p>The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called <code>ui-grid</code>. </p>
+
+ <p>There are four preset configurations layouts that can be used in any situation that requires columns:</p>
+ <ul>
+ <li><strong>two</strong>-column (using the <code>ui-grid-a</code> class)</li>
+ <li><strong>three</strong>-column (using the <code>ui-grid-b</code> class)</li>
+ <li><strong>four</strong>-column (using the <code>ui-grid-c</code> class)</li>
+ <li><strong>five</strong>-column (using the <code>ui-grid-d</code> class)</li>
+ </ul>
+
+ <p>Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them. </p>
+ <p>Within the grid container, child elements are assigned <code>ui-block-a/b/c/d</code> in a sequential manner which makes each "block" element float side-by-side, forming the grid. The <code>ui-block-a</code> class essentially clears the floats which will start a new line (see multiple row grids, below).</p>
+
+ <h2>Two column grids</h2>
+ <p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code>, and add two child containers inside it classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second:</p>
+
+<pre><code>
+<div class="ui-grid-a">
+ <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
+ <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
+</div><!-- /grid-a -->
+</code></pre>
+
+
+
+ <p>The above markup produces the following content layout:</p>
+
+ <div class="ui-grid-a">
+ <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
+ <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
+ </div><!-- /grid-a -->
+
+ <p>As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.</p>
+
+ <p>Grid classes can be applied to any container. In this next example, we add <code>ui-grid-a</code> to a <code>fieldset</code>, and apply the <code>ui-block</code> classes to the two buttons inside to stretch them each to 50% of the screen width:</p>
+
+<pre><code>
+<fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+</fieldset>
+</code></pre>
+
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+ </fieldset>
+
+
+ <p>Theme classes (not data-theme attributes) from the <a href="../api/themes.html">theming system</a> can be added to an element, including grids. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-e</code> to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline <code>style="height:120px"</code> attribute is also added to each grid to set each to a standard height. </p>
+
+ <div class="ui-grid-a">
+ <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
+ <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
+ </div><!-- /grid-a -->
+
+ <h2>Three-column grids</h2>
+ <p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%). Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
+
+<pre><code>
+<div class="ui-grid-b">
+ <div class="ui-block-a">Block A</div>
+ <div class="ui-block-b">Block B</div>
+ <div class="ui-block-c">Block C</div>
+</div><!-- /grid-b -->
+</code></pre>
+
+ <p>This will produce a 33/33/33% grid for our content.</p>
+
+ <div class="ui-grid-b">
+ <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
+ <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
+ <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
+ </div><!-- /grid-b -->
+
+ <p>And an example of a 3 column grid with buttons inside:</p>
+
+ <fieldset class="ui-grid-b">
+ <div class="ui-block-a"><button type="submit" data-theme="c">Hmm</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="a">No</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Yes</button></div>
+ </fieldset>
+
+ <h2>Four-column grids</h2>
+
+ <p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
+
+ <div class="ui-grid-c">
+ <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
+ <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
+ <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
+ <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
+ </div><!-- /grid-c -->
+
+ <h2>Five-column grids</h2>
+ <p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
+
+ <div class="ui-grid-d">
+ <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
+ <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
+ <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
+ <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
+ <div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
+ </div><!-- /grid-c -->
+
+ <h2>Multiple row grids</h2>
+
+ <p>Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the <code>class=ui-block-a</code> is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:</p>
+
+ <div class="ui-grid-b">
+ <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
+ <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
+ <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
+ <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
+ <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
+ <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
+ <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
+ <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
+ <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
+ </div><!-- /grid-c -->
+
+
+ <h2>Grids in toolbars</h2>
+ <p>Grids are helpful for creating layouts within a toolbar. Here's a footer with a 3 column grid.</p>
+ <!-- NOTE: Inline styles are for demo purposes only, please use external styles -->
+ <div data-role="footer" data-theme="a" class="ui-bar ui-grid-c">
+ <div class="ui-block-a"><h3 style="margin-top:10px;">Settings</h3></div>
+ <div class="ui-block-b"><label for="value" style="margin:8px 10px 0 0; text-align:right;">Price</label> </div>
+ <div class="ui-block-c"><input id="value" value="5,000"></div>
+ <div class="ui-block-d"><div style="margin:6px 0 0 10px;"><button type="submit" data-theme="b">Update</button></div></div>
+ </div><!-- /footer -->
+
+
+ </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">Content Formatting</li>
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li data-theme="a"><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - HTML formatting</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>HTML Formatting</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <style>
+ table { width:100%; }
+ table caption { text-align:left; }
+ table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
+ table th, td { text-align:left; padding:6px;}
+ </style>
+
+
+
+
+ <p>The default approach to styling content in jQuery Mobile is simple: Use a light hand. Our goal is to let the browser's native rendering take precedence; we add a bit of padding for more comfortable readability, and use the <a href="../api/themes.html">theming system</a> to apply the font family and colors. </p>
+ <p>Taking a light hand with content styling gives designers and developers a clean slate to work with, instead of fighting against a lot of complex style overhead.</p>
+
+ <h2>Default HTML markup styling</h2>
+ <p>By default, jQuery Mobile themes use standard HTML styles and sizes for standard markup elements like headers, paragraph content, block quotes, anchor links, standard ordered, unordered and definition lists, and tables — as shown in the examples below:</p>
+ <hr>
+
+ <h1>H1 Heading</h1>
+ <h2>H2 Heading</h2>
+ <h3>H3 Heading</h3>
+ <h4>H4 Heading</h4>
+ <h5>H5 Heading</h5>
+ <h6>H6 Heading</h6>
+
+ <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+
+ <blockquote>How about some blockquote action with a <cite>cite</cite></blockquote>
+
+ <p>This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.</p>
+
+ <p>We add a few styles to <code>tables</code> and <code>fieldsets</code> to make them more legible, which are easily overridden with customs styles.</p>
+
+ <ul>
+ <li>Unordered list item 1</li>
+ <li>Unordered list item 1</li>
+ <li>Unordered list item 1</li>
+ </ul>
+
+ <ol>
+ <li>Ordered list item 1</li>
+ <li>Ordered list item 1</li>
+ <li>Ordered list item 1</li>
+ </ol>
+
+ <dl title="Definition list">
+ <dt>Definition term</dt>
+ <dd>I'm the definition text</dd>
+ <dt>Definition term</dt>
+ <dd>I'm the definition text</dd>
+ </dl>
+
+
+
+ <table summary="This table lists all the JetBlue flights.">
+ <caption>Travel Itinerary</caption>
+ <thead>
+ <tr>
+ <th scope="col">Flight:</th>
+ <th scope="col">From:</th>
+ <th scope="col">To:</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <td colspan="5">Total: 3 flights</td>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <th scope="row">JetBlue 983</th>
+ <td>Boston (BOS)</td>
+ <td>New York (JFK)</td>
+ </tr>
+ <tr>
+ <th scope="row">JetBlue 354</th>
+ <td>San Francisco (SFO)</td>
+ <td>Los Angeles (LAX)</td>
+ </tr>
+ <tr>
+ <th scope="row">JetBlue 465</th>
+ <td>New York (JFK)</td>
+ <td>Portland (PDX)</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ </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">Content Formatting</li>
+ <li data-theme="a"><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Content Themes</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Theming content</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Theming the content area</h2>
+ <p>The main content area of a page (container with the <code> data-role="content"</code> attribute) should be themed by adding the <code> data-theme</code> attribute to the <code> data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add the <code> data-theme</code> attribute to the content container, the background color will stop after the content. So there may be a gap in color between the content and fixed footer.)</p>
+ <p>Additionally, the content area of a collapsible can be themed to match the theme of the collapsible header using the <code>data-content-theme</code> attribute.</p>
+
+<code>
+<div data-role="page" <strong> data-theme="a"</strong> <strong>data-content-theme="a"</strong>>
+</code>
+
+ <h2>Theming collapsible blocks</h2>
+ <p>To set the color of the collapsible header, add the <code> data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>
+
+<code>
+<div data-role="collapsible" data-collapsed="true" <strong> data-theme="a"></strong>
+</code>
+ <h2>Themed examples</h2>
+
+ <p><strong>A</strong> theme swatch on content & collapsible</p>
+ <div class="ui-body ui-body-a">
+ <h1>H1 Heading</h1>
+ <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+ <div data-role="collapsible" data-collapsed="true" data-theme="a">
+ <h3>I'm a themed collapsible</h3>
+ <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+ </div><!-- /collapsible -->
+ <div data-role="collapsible" data-theme="a" data-content-theme="a">
+ <h3>I'm a themed collapsible with a themed content</h3>
+ <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+ </div>
+ </div><!-- /themed container -->
+
+ <p><strong>B</strong> theme swatch on content & collapsible</p>
+ <div class="ui-body ui-body-b">
+ <h1>H1 Heading</h1>
+ <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+ <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <h3>I'm a themed collapsible</h3>
+ <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+ </div><!-- /collapsible -->
+ <div data-role="collapsible" data-theme="b" data-content-theme="b">
+ <h3>I'm a themed collapsible with a themed content</h3>
+ <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+ </div>
+ </div><!-- /themed container -->
+
+ <p><strong>C</strong> theme swatch on content & collapsible</p>
+ <div class="ui-body ui-body-c">
+ <h1>H1 Heading</h1>
+ <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+ <div data-role="collapsible" data-collapsed="true" data-theme="c">
+ <h3>I'm a themed collapsible</h3>
+ <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+ </div><!-- /collapsible -->
+ <div data-role="collapsible" data-theme="c" data-content-theme="c">
+ <h3>I'm a themed collapsible with a themed content</h3>
+ <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+ </div>
+ </div><!-- /themed container -->
+
+ <p><strong>D</strong> theme swatch on content & collapsible</p>
+ <div class="ui-body ui-body-d">
+ <h1>H1 Heading</h1>
+ <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+ <div data-role="collapsible" data-collapsed="true" data-theme="d">
+ <h3>I'm a themed collapsible</h3>
+ <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+ </div><!-- /collapsible -->
+ <div data-role="collapsible" data-theme="d" data-content-theme="d">
+ <h3>I'm a themed collapsible with a themed content</h3>
+ <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+ </div>
+ </div><!-- /themed container -->
+
+ <p><strong>E</strong> theme swatch on content & collapsible</p>
+ <div class="ui-body ui-body-e">
+ <h1>H1 Heading</h1>
+ <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
+ <div data-role="collapsible" data-collapsed="true" data-theme="e">
+ <h3>I'm a themed collapsible</h3>
+ <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+ </div><!-- /collapsible -->
+ <div data-role="collapsible" data-theme="e" data-content-theme="e">
+ <h3>I'm a themed collapsible with a themed content</h3>
+ <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
+ </div>
+ </div><!-- /themed container -->
+
+
+ </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">Content Formatting</li>
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li data-theme="a"><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Content formatting</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-index">
+
+ <div data-role="header" data-theme="f">
+ <h1>Content formatting</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <p>The content of pages in jQuery Mobile is completely open-ended, but the jQuery Mobile framework provides a number of helpful tools and widgets — such as collapsible panels and multiple-column grid layouts — to make it easy to format your content for mobile devices.</p>
+
+
+
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+ <!--<li><a href="api-content.html">API documentation</a></li>-->
+ </ul>
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Checkboxes</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Checkboxes</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Checkboxes</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+ <p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$("input[type='checkbox']").bind( "change", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The checkbox plugin has the following custom events:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a checkbox is created</dt>
+ <dd>
+
+ <pre><code>
+$("input[type='checkbox']").checkboxradio({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li data-theme="a"><a href="index.html">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Checkboxes</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Checkboxes</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Checkboxes</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
+
+ <p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to checkboxes.</p>
+
+ <p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. If the <code>input</code> isn’t wrapped in its corresponding <code>label</code>, be sure to set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated.</p>
+
+ <pre><code>
+<label><input type="checkbox" name="checkbox-1" /> I agree </label>
+
+<input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" />
+<label for="checkbox-0">I agree</label>
+ </code></pre>
+
+ <p>The above snippets will produce two basic checkboxes. The default styles will set the width of the element to 100% of the parent container.</p>
+
+ <label> <input type="checkbox" name="checkbox-1 "/> I agree</label>
+
+ <input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" />
+ <label for="checkbox-0">I agree</label>
+
+
+ <h2>Mini version</h2>
+
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>
+<input type="checkbox" name="checkbox-0" id="checkbox-mini-0" class="custom" <strong>data-mini="true"</strong> />
+<label for="checkbox-mini-0">I agree</label>
+</code></pre>
+
+ <p>This will produce a select that is not as tall as the standard version and has a smaller text size.</p>
+ <input type="checkbox" name="checkbox-0" id="checkbox-mini-0" class="custom" data-mini="true" />
+ <label for="checkbox-mini-0">I agree</label>
+
+
+ <h2>Field containers & Legends</h2>
+ <p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
+
+ <p>Wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="fieldcontain"</code> attribute so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
+
+
+<pre><code>
+<div data-role="fieldcontain">
+ <strong><fieldset data-role="controlgroup">
+ <legend>Agree to the terms:</legend></strong>
+ <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
+ <label for="checkbox-1">I agree</label>
+ <strong></fieldset></strong>
+</div>
+</code></pre>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Agree to the terms:</legend>
+ <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
+ <label for="checkbox-1">I agree</label>
+ </fieldset>
+ </div>
+
+
+
+ <h2>Vertically grouped checkboxes</h2>
+
+ <p>Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the fie.</p>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
+ <label for="checkbox-1a">Cheetos</label>
+
+ <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
+ <label for="checkbox-2a">Doritos</label>
+
+ <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
+ <label for="checkbox-3a">Fritos</label>
+
+ <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
+ <label for="checkbox-4a">Sun Chips</label>
+ </fieldset>
+ </div>
+
+ <h2>Horizontal toggle sets</h2>
+
+ <p>Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
+
+<code>
+<fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong>>
+</code>
+
+ <p>The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.</p>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
+ <label for="checkbox-6">b</label>
+
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
+ <label for="checkbox-7"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
+ <label for="checkbox-8">u</label>
+ </fieldset>
+ </div>
+
+
+
+
+ </form>
+
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li data-theme="a"><a href="index.html">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Checkboxes</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Checkboxes</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Checkboxes</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The checkbox has the following methods:</p>
+
+ <dl>
+
+ <dt><code>enable</code> enable a disabled checkbox</dt>
+ <dd>
+ <pre><code>
+ $("input[type='checkbox']").checkboxradio('enable');
+ </code></pre>
+ </dd>
+
+ <dt><code>disable</code> disable a select.</dt>
+ <dd>
+ <pre><code>
+$("input[type='checkbox']").checkboxradio('disable');
+ </code></pre>
+ </dd>
+
+ <dt><code>refresh</code> update the custom select</dt>
+ <dd>
+ If you manipulate a checkbox via JavaScript, you must call the refresh method on it to update the visual styling.
+ <pre><code>
+$("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li data-theme="a"><a href="index.html">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Checkboxes</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Checkboxes</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Checkboxes</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The checkbox has the following options:</p>
+
+ <dl>
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini="true"</code></p>
+ <pre><code>$("input[type='checkbox']").checkboxradio(<strong>{ mini: "true" }</strong>);</code></pre>
+ </dd>
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
+ <pre><code>$("input[type='checkbox']").checkboxradio(<strong>{ theme: "a" }</strong>);</code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li data-theme="a"><a href="index.html">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Forms</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Forms</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <p>jQuery Mobile provides a complete set of finger-friendly form elements that are based on native HTML form elements.</p>
+
+ <h2>Form structure</h2>
+
+ <p>All forms should be wrapped in a <code>form</code> tag that has an <code>action</code> and <code>method</code> that will handle the form data processing on the server.</p>
+
+<code>
+<form action="form.php" method="post">
+...
+</form>
+</code>
+
+
+<h2>Markup conventions</h2>
+<p>When constructing forms to be used in jQuery Mobile, most of the standard guidelines used to create forms that submit via ordinary HTTP POST or GET still apply. Additionally, the <code>id</code> attributes of form controls need to be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. You must be careful to use unique <code>id</code> attributes so there will be only one of each in the DOM. Be sure to pair them properly with <code>label</code> elements via the <code>for</code> attribute.</p>
+
+ <h2>Mini sized elements</h2>
+
+ <p>For a more compact version of all form elements and buttons, add the <code>data-mini="true"</code> attribute to the element to create a <a href="forms-all-mini.html">mini version</a>. This is useful in toolbars and tight spaces but is still finger-friendly. It's possible to add this attribute to a fieldcontainer to set this on a number of elements at once.</p>
+
+<pre><code>
+<label for="basic">Text Input:</label>
+<input type="text" name="name" id="basic" <strong>data-mini="true"</strong> />
+ </code></pre>
+
+ <p>This will produce an input that is not as tall as the standard version and has a smaller text size.</p>
+ <label for="mini">Text Input:</label>
+ <input type="text" name="name" id="mini" value="" data-mini="true" />
+
+ <h2>Hiding labels accessibly</h2>
+ <p>For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful <code>label</code>. To hide labels in a way that leaves them visible to assistive technologies—for example, when letting an element’s <code>placeholder</code> attribute serve as a label—apply the helper class <code>ui-hidden-accessible</code> to the label itself:</p>
+<code>
+<pre>
+<label for="username" <strong>class="ui-hidden-accessible"</strong>>Username:</label>
+<input type="text" name="username" id="username" value="" placeholder="Username"/>
+</pre>
+</code>
+
+ <p>To hide labels within a field container and adjust the layout accordingly, add the class <code>ui-hide-label</code> to the field container as in the following:</p>
+
+<code>
+<pre>
+<div data-role="fieldcontain" <strong>class="ui-hide-label"</strong>>
+ <label for="username">Username:</label>
+ <input type="text" name="username" id="username" value="" placeholder="Username"/>
+</div>
+</pre>
+</code>
+
+ <p>Both of the above examples will render as:</p>
+ <div data-role="fieldcontain" class="ui-hide-label">
+ <label for="username">Username:</label>
+ <input type="text" name="username" id="username" value="" placeholder="Username" />
+ </div>
+
+ <p>While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.</p>
+
+
+ <h2>Disabling form elements</h2>
+ <p>All jQuery Mobile widgets can be disabled in the markup by adding the standard <code>disabled</code> attribute to the element, just like you would with native controls. Each form widget also has standard <code>disable</code> and <code>enable</code> methods that are documented with each form widget. Here are a few examples of disabled widgets: </p>
+
+ <div data-role="fieldcontain">
+ <label for="foo">Text Input:</label>
+ <input type="text" name="name" id="foo" value="" disabled />
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Gender:</legend>
+ <input type="radio" name="gender" id="radio-female" value="f" disabled />
+ <label for="radio-female">Female</label>
+
+ <input type="radio" name="gender" id="radio-male" value="m" disabled />
+ <label for="radio-male">Male</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="flip-s">Server status:</label>
+ <select name="flip-s" id="flip-s" data-role="slider" disabled >
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Max bandwidth:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" disabled />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-x" class="select">Shipping:</label>
+ <select name="select-shipper" id="select-choice-x" disabled>
+ <option></option>
+ <option value="standard">Standard</option>
+ <option value="rush">Rush</option>
+ <option value="express">Express</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <p>Note that you can disable buttons created from <code>button</code> or <code>input</code>-based markup, but not links with a role of button. Links don't have a parallel disabled feature in HTML, but if you need to disable a link-based button (or any element), it's possible to apply the disabled class <code>ui-disabled</code> yourself with JavaScript to achieve the same effect. </p>
+
+ <h2>Field containers</h2>
+ <p>To improve the styling of labels and form elements on wider screens, wrap a <code>div</code> or <code>fieldset </code>with the <code> data-role="fieldcontain"</code> attribute around each label/form element. This framework aligns the input and associated label side-by-side, and breaks to stacked block-level elements below ~480px. The framework will also add a thin bottom border to act as a field separator.</p>
+
+ <h2>Forms in toolbars</h2>
+ <p>While all form elements are now tested to work correctly within <em>static</em> toolbars as of jQuery Mobile 1.1, we recommend extensive testing when using form elements within <em>fixed</em> toolbars or within any <code>position: fixed</code> elements. This can potentially trigger a number of unpredictable issues in various mobile browsers, Android 2.2/2.3 in particular (detailed in <a href="http://jqm.dev/docs/toolbars/bars-fixed.html">Known issues in Android 2.2/2.3</a>).</p>
+
+ <p>For example:</p>
+<pre><code>
+<div data-role="fieldcontain">
+<label for="name">Text Input:</label>
+<input type="text" name="name" id="name" value="" />
+</div>
+</code></pre>
+
+ <p>Will render as:</p>
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <p>For additional examples, see the <a href="forms-all.html">form elements gallery</a></p>
+
+
+ <h2>Auto-initialization of form elements</h2>
+ <p>By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them. For instance, a <code>select</code> element will be found and initialized with the "selectmenu" plugin, while an <code>input</code> element with a <code>type="checkbox"</code> will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods. See options, methods, and events listed on each form plugin's documentation page for details. </p>
+
+ <h2>Initializing groups of dynamically-injected form elements</h2>
+ <p>If you should generate new markup client-side or load in content via AJAX and inject it into a page, you can trigger the <code>create</code> event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (see below).</p>
+
+ <p>For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:</p>
+
+ <code>
+ $( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
+ </code>
+
+ <h2>Refreshing form elements</h2>
+
+ <p>In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom controls (selects, sliders) built from, and kept in sync with, the native control. To programmatically update a form control with JavaScript, first manipulate the native control, then use the <code>refresh</code> method to tell the enhanced control to update itself to match the new state. Here are some examples of how to update common form controls, then call the <code>refresh</code> method:</p>
+ <h4>Checkboxes:</h4>
+
+<code>
+$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
+</code>
+
+<h4>Radios:</h4>
+<code>
+$("input[type='radio']").prop("checked",true).checkboxradio("refresh");
+</code>
+
+<h4>Selects:</h4>
+<code><pre>
+var myselect = $("#selectfoo");
+myselect[0].selectedIndex = 3;
+myselect.selectmenu("refresh");
+</pre></code>
+
+<h4>Sliders:</h4>
+<code>
+$("input[type='range']").val(60).slider("refresh");
+</code>
+
+<h4>Flip switches (they use slider):</h4>
+
+<code><pre>
+var myswitch = $("#selectbar");
+myswitch[0].selectedIndex = 1;
+myswitch.slider("refresh");
+</pre></code>
+
+ <h2>Preventing auto-initialization of form elements</h2>
+ <p>If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute <code> data-role="none"</code>. For example:</p>
+ <pre><code>
+<label for="foo">
+<select name="foo" id="foo" <strong> data-role="none"</strong>>
+ <option value="a" >A</option>
+ <option value="b" >B</option>
+ <option value="c" >C</option>
+</select>
+</code></pre>
+
+
+ <p>If you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>[data-role="none"]</code>). Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
+ <pre><code>
+$(document).bind('mobileinit',function(){
+ <strong>$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";</strong>
+});
+ </code></pre>
+
+ <p>Alternately you can use the <code>data-enhance="false"</code> data attribute on a parent element with <code>$.mobile.ignoreContentEnabled</code> set to true. Beware though, this will incur a performance penalty for each and every element in the page that would otherwise be enhanced as jQuery Mobile must traverse the set of parents to look for those elements.</p>
+
+<p>One special case is that of selects. The above sample will prevent any and all augmentation from taking place on select elements in the page if <code>select</code> is included. If you wish to retain the native performance and appearance of the menu itself and benefit from the visual augmentation of the select button by jQuery Mobile, you can set <code>$.mobile.selectmenu.prototype.options.nativeMenu</code> to true in a <code>mobileinit</code> callback as a global setting or use <code>data-native-menu="true"</code> on a case by case basis.</p>
+
+
+ <h2>File Inputs</h2>
+ <p>Using a multipart form with a file input is not supported by ajax. In this case you should decorate the parent form with <code>data-ajax="false"</code> to ensure the form is submitted properly to the server.</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">Form elements</li>
+ <li data-theme="a"><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li><a href="forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Form element size comparison</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Form sizes</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Form size comparison</h2>
+
+ <p>All form controls accept a <code>data-mini="true"</code> attribute that renders a smaller version of the enhanced element. In the case of grouped buttons, the <code>data-mini="true"</code> attribute can be added to the containing controlgroup.</p>
+
+ <style>
+ table { width:100%; border-bottom:1px solid #ccc; border-collapse: collapse; }
+ th { text-align:left; margin-right:50px; display:none; }
+ th h3 { margin:.6em 0; }
+ th, td { vertical-align:top; border-top:1px solid #ccc; padding: 4px 10px; }
+ </style>
+
+ <table margin="0">
+ <tr>
+ <th><h3><a href="search/index.html">Search</a></h3></th>
+ <td>
+ <label for="search-full" class="ui-hidden-accessible">Search Input:</label>
+ <input type="search" name="name" id="search-full" value="" />
+ </td>
+ <td>
+ <label for="text-mini" class="ui-hidden-accessible">Search Input:</label>
+ <input type="search" name="name" id="search-mini" value="" data-mini="true" />
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="textinputs/index.html">Text</a></h3></th>
+ <td>
+ <label for="text-full" class="ui-hidden-accessible">Text Input:</label>
+ <input type="text" name="name" id="text-full" value="" />
+ </td>
+ <td>
+ <label for="text-mini" class="ui-hidden-accessible">Text Input:</label>
+ <input type="text" name="name" id="text-mini" value="" data-mini="true" />
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="textinputs/index.html">Textarea</a></h3></th>
+ <td>
+ <label for="textarea-full" class="ui-hidden-accessible">Textarea:</label>
+ <textarea name="textarea" id="textarea-full"></textarea>
+ </td>
+ <td>
+ <label for="textarea-mini" class="ui-hidden-accessible">Textarea:</label>
+ <textarea name="textarea" id="textarea-mini" data-mini="true"></textarea>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="switch/index.html">Switch</a></h3></th>
+ <td>
+ <label for="flip-full" class="ui-hidden-accessible">Flip switch:</label>
+ <select name="slider" id="flip-full" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </td>
+ <td>
+ <label for="flip-mini" class="ui-hidden-accessible">Flip switch:</label>
+ <select name="slider" id="flip-mini" data-role="slider" data-mini="true">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="slider/index.html">Slider</a></h3></th>
+ <td style="padding-top:14px;">
+ <label for="slider-full" class="ui-hidden-accessible">Input slider:</label>
+ <input type="range" name="slider-1" id="slider-full" value="25" min="0" max="100" data-highlight="true" class="ui-hidden-accessible" />
+ </td>
+ <td style="padding-top:16px;">
+ <label for="slider-mini" class="ui-hidden-accessible">Input slider:</label>
+ <input type="range" name="slider-1" id="slider-mini" value="25" min="0" max="100" data-highlight="true" data-mini="true" class="ui-hidden-accessible" />
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="select/index.html">Select</a></h3></th>
+ <td>
+ <label for="select-full" class="ui-hidden-accessible">Shipping method:</label>
+ <select name="select-choice-0" id="select-full">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </td>
+ <td>
+ <label for="select-mini" class="ui-hidden-accessible">Shipping method:</label>
+ <select name="select-choice-0" id="select-mini" data-mini="true">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="checkboxes/index.html">Checkbox</a></h3></th>
+ <td>
+ <fieldset data-role="controlgroup">
+ <input type="checkbox" name="checkbox-1a" id="c-full-1" />
+ <label for="c-full-1">Apples</label>
+ <input type="checkbox" name="checkbox-2a" id="c-full-2" />
+ <label for="c-full-2">Oranges</label>
+ <input type="checkbox" name="checkbox-3a" id="c-full-3" />
+ <label for="c-full-3">Bananas</label>
+ </fieldset>
+ </td>
+ <td>
+ <fieldset data-role="controlgroup" data-mini="true">
+ <input type="checkbox" name="checkbox-1a" id="c-mini-1" />
+ <label for="c-mini-1">Apples</label>
+ <input type="checkbox" name="checkbox-2a" id="c-mini-2" />
+ <label for="c-mini-2">Oranges</label>
+ <input type="checkbox" name="checkbox-3a" id="c-mini-3" />
+ <label for="c-mini-3">Bananas</label>
+ </fieldset>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="checkboxes/index.html">Checkbox</a></h3></th>
+ <td>
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="checkbox" name="checkbox-1a" id="c-full-4" />
+ <label for="c-full-4">B</label>
+ <input type="checkbox" name="checkbox-2a" id="c-full-5" />
+ <label for="c-full-5">I</label>
+ <input type="checkbox" name="checkbox-3a" id="c-full-6" />
+ <label for="c-full-6">U</label>
+ </fieldset>
+ </td>
+ <td>
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <input type="checkbox" name="checkbox-1a" id="c-mini-4" />
+ <label for="c-mini-4">B</label>
+ <input type="checkbox" name="checkbox-2a" id="c-mini-5" />
+ <label for="c-mini-5">I</label>
+ <input type="checkbox" name="checkbox-3a" id="c-mini-6" />
+ <label for="c-mini-6">U</label>
+ </fieldset>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="radiobuttons/index.html">Radio buttons</a></h3></th>
+ <td>
+ <fieldset data-role="controlgroup">
+ <input type="radio" name="radio-choice-1" id="radio-full-1" value="choice-1" checked="checked" />
+ <label for="radio-full-1">Credit</label>
+ <input type="radio" name="radio-choice-1" id="radio-full-2" value="choice-2" />
+ <label for="radio-full-2">Debit</label>
+ <input type="radio" name="radio-choice-1" id="radio-full-3" value="choice-3" />
+ <label for="radio-full-3">Cash</label>
+ </fieldset>
+ </td>
+ <td>
+ <fieldset data-role="controlgroup" data-mini="true">
+ <input type="radio" name="radio-choice-1" id="radio-mini-1" value="choice-1" checked="checked" />
+ <label for="radio-mini-1">Credit</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-2" value="choice-2" />
+ <label for="radio-mini-2">Debit</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-3" value="choice-3" />
+ <label for="radio-mini-3">Cash</label>
+ </fieldset>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="radiobuttons/index.html">Radio toggle</a></h3></th>
+ <td>
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-choice-1" id="radio-full-4" value="choice-1" checked="checked" />
+ <label for="radio-full-4">Design</label>
+ <input type="radio" name="radio-choice-1" id="radio-full-5" value="choice-2" />
+ <label for="radio-full-5">Code</label>
+ </fieldset>
+ </td>
+ <td>
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <input type="radio" name="radio-choice-1" id="radio-mini-4" value="choice-1" checked="checked" />
+ <label for="radio-mini-4">Design</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-5" value="choice-2" />
+ <label for="radio-mini-5">Code</label>
+ </fieldset>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="radiobuttons/index.html">Radio toggle</a></h3></th>
+ <td>
+ <button type="submit">Button</button>
+ </td>
+ <td>
+ <button type="submit" data-mini="true">Button</button>
+ </td>
+ </tr>
+ </table>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li data-theme="a"><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li><a href="forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Gallery of Form Controls</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Mini forms</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Mini form elements</h2>
+
+ <p>All form controls accept a <code>data-mini="true"</code> attribute that renders a smaller version of the <a href="forms-all.html">standard-sized</a> form elements. In the case of grouped buttons, the <code>data-mini="true"</code> attribute can be added to the containing controlgroup. <a href="forms-all-compare.html">Compare mini and normal</a> form elements side-by-side.</p>
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" data-mini="true" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea" data-mini="true"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="search">Search Input:</label>
+ <input type="search" name="password" id="search" value="" data-mini="true" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider" data-mini="true">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" data-mini="true" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-mini="true">
+ <legend>Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
+ <label for="checkbox-1a">Cheetos</label>
+
+ <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
+ <label for="checkbox-2a">Doritos</label>
+
+ <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
+ <label for="checkbox-3a">Fritos</label>
+
+ <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
+ <label for="checkbox-4a">Sun Chips</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
+ <label for="checkbox-6">b</label>
+
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
+ <label for="checkbox-7"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
+ <label for="checkbox-8">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-mini="true">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <legend>Layout view:</legend>
+ <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
+ <label for="radio-choice-c">List</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
+ <label for="radio-choice-d">Grid</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
+ <label for="radio-choice-e">Gallery</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1" data-mini="true">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3" data-mini="true">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a" data-native-menu="false" data-mini="true">
+ <option>Custom menu example</option>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d" data-mini="true">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="a" data-mini="true">Submit</button></div>
+ </fieldset>
+ </div>
+ </form>
+ </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">Form elements</li>
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li data-theme="a"><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li><a href="forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Native Form Controls</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Forms</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Native form elements & buttons</h2>
+
+ <p>Although the framework automatically enhances form elements and buttons into <a href="forms-all.html">touch input optimized controls</a> to streamline development, it's easy to tell jQuery Mobile to leave these elements alone so the standard, native control can be used instead.</p>
+ <p>Adding the <code>data-role="none"</code> attribute to any form or button element tells the framework to not apply any enhanced styles or scripting. The examples below all have this attribute in place to demonstrate the effect. You may need to write custom styles to lay out your form controls because we try to leave all the default styling intact.</p>
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" data-role="none" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea" data-role="none"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="search">Search Input:</label>
+ <input type="search" name="password" id="search" value="" data-role="none" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="none">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" data-role="none" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" data-role="none" />
+ <label for="checkbox-1a">Cheetos</label>
+
+ <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" data-role="none" />
+ <label for="checkbox-2a">Doritos</label>
+
+ <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" data-role="none" />
+ <label for="checkbox-3a">Fritos</label>
+
+ <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" data-role="none" />
+ <label for="checkbox-4a">Sun Chips</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" data-role="none" />
+ <label for="checkbox-6">b</label>
+
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" data-role="none" />
+ <label for="checkbox-7"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" data-role="none" />
+ <label for="checkbox-8">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" data-role="none" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" data-role="none" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" data-role="none" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" data-role="none" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Layout view:</legend>
+ <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" data-role="none" />
+ <label for="radio-choice-c">List</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" data-role="none" />
+ <label for="radio-choice-d">Grid</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" data-role="none" />
+ <label for="radio-choice-e">Gallery</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1" data-role="none">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3" data-role="none">
+ <option>Choose...</option>
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+
+
+
+ <p><strong>Button</strong> based button:</p>
+ <button data-role="none">Button element</button>
+
+ <p><strong>Input type="button"</strong> based button:</p>
+ <input type="button" value="Input type=button" data-role="none" />
+
+ <p><strong>Input type="submit"</strong> based button:</p>
+ <input type="submit" value="Input type=submit" data-role="none" />
+
+ <p><strong>Input type="reset"</strong> based button:</p>
+ <input type="reset" value="Input type=reset" data-role="none" />
+
+ <p><strong>Input type="image"</strong> based button:</p>
+ <input type="image" src="../_assets/images/jquery-logo.png" style="width:120px; padding:5px; background:#fff; border:1px solid #999;" value="Input type=image" data-role="none" />
+
+ </form>
+
+ </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">Form elements</li>
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li data-theme="a"><a href="forms-all-native.html">Native form elements</a></li>
+ <li><a href="forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Gallery of Form Controls</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Forms</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Form elements</h2>
+
+ <p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. Browsers that don't support the custom controls will still deliver a usable experience because all are based on native form elements.</p>
+
+ <p>There is a complete set of <a href="forms-all-mini.html">mini-sized</a> form elements which are useful for toolbars or tighter spaces. <a href="forms-all-compare.html">Compare mini and normal</a> form elements side-by-side.</p>
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="search">Search Input:</label>
+ <input type="search" name="password" id="search" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
+ <label for="checkbox-1a">Cheetos</label>
+
+ <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
+ <label for="checkbox-2a">Doritos</label>
+
+ <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
+ <label for="checkbox-3a">Fritos</label>
+
+ <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
+ <label for="checkbox-4a">Sun Chips</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
+ <label for="checkbox-6">b</label>
+
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
+ <label for="checkbox-7"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
+ <label for="checkbox-8">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Layout view:</legend>
+ <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
+ <label for="radio-choice-c">List</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
+ <label for="radio-choice-d">Grid</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
+ <label for="radio-choice-e">Gallery</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a" data-native-menu="false">
+ <option>Custom menu example</option>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
+ </fieldset>
+ </div>
+ </form>
+ </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">Form elements</li>
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li data-theme="a"><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li><a href="forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Sample form response</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+ <script src="../../js/jquery.js"></script>
+
+ <script src="../_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="e">
+ <h1>Sample form response</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="c">
+ <div class="content-primary">
+
+ <form action="index.html" method="get">
+
+ <h2>You Chose:</h2>
+
+ <div class="ui-body ui-body-d ui-corner-all">
+
+ <?php
+ echo "<p> " . $_REQUEST['shipping'] . "</p>";
+ ?>
+
+ </div>
+
+ <a href="forms-sample.html" data-role="button" data-theme="b" data-icon="arrow-l">Change shipping method</a>
+
+ </form>
+
+ </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">Form elements</li>
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="forms-selects.html">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li data-theme="a"><a href="forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Sample Form Submit to Self</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+ <script src="../../js/jquery.js"></script>
+
+ <script src="../_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Sample form submit to self</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="c">
+ <div class="content-primary">
+
+ <form action="forms-sample-selfsubmit.php" method="post">
+
+ <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
+ <legend>Testing</legend>
+ <div>
+ <?php $g = $_REQUEST['gender']; ?>
+ <input type="radio" name="gender" value="m" id="gender-1" <?=$g=="m"? "checked": ""; ?> /><label for="gender-1">Male</label>
+ <input type="radio" name="gender" value="f" id="gender-2" <?=$g=="f"? "checked": ""; ?> /><label for="gender-2">Female</label>
+ </div>
+ </fieldset>
+
+ <button type="submit">Submit</submit>
+ </form>
+
+ </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">Form elements</li>
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="forms-selects.html">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li data-theme="a"><a href="forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Sample Form Submit</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Forms</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <h2>Ajax form submission</h2>
+
+ <p>In jQuery Mobile, form submissions are automatically handled using Ajax whenever possible, creating a smooth transition between the form and the result page. To ensure your form submits as intended, be sure to specify <code>action</code> and <code>method</code> properties on your form element. When unspecified, the method will default to <code>get</code>, and the <code>action</code> will default to the current page's relative path (found via <code>$.mobile.path.get()</code>)</p>
+ <p>Forms also accept attributes for transitions just like anchors, such as <code>data-transition="pop"</code> and <code>data-direction="reverse"</code>. To submit a form without Ajax, you can either disable Ajax form handling globally, or per form via the <code>data-ajax="false"</code> attribute. The <code>target</code> attribute (as in <code>target="_blank"</code>) is respected on forms as well, and will default to the browser's handling of that target when the form submits. Note that unlike anchors, the <code>rel</code> attribute is not allowed on forms.</p>
+
+
+ <h2>Default Ajax form example</h2>
+ <p>This demonstrates automated ajax handling of form submissions. The form below is configured to send a <code>GET</code> request to <code>forms-sample-response.php</code>. On submit, jQuery Mobile will make sure that the Url specified is able to be retrieved via Ajax, and handle it appropriately. Keep in mind that just like ordinary HTTP form submissions, jQuery Mobile allows <code>GET</code> result pages to be bookmarked by updating the URL hash when the response returns successfully. Also like ordinary form submissions, <code>POST</code> requests do not contain query parameters in the hash, so they are not bookmarkable.</p>
+ <form action="forms-sample-response.php" method="get" class="ui-body ui-body-a ui-corner-all">
+ <fieldset>
+ <div data-role="fieldcontain">
+ <label for="shipping" class="select">Shipping method:</label>
+ <select name="shipping" id="shipping">
+ <option value="Standard shipping">Standard: 7 day</option>
+ <option value="Rush shipping">Rush: 3 days</option>
+ <option value="Express shipping">Express: next day</option>
+ <option value="Overnight shipping">Overnight</option>
+ </select>
+ </div>
+ <button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
+ </fieldset>
+ </form>
+
+ <h2>Non-Ajax form example</h2>
+
+ <p>To prevent form submissions from being automatically handled with Ajax, add the <code>data-ajax="false"</code> attribute to the form element. You can also turn off Ajax form handling completely via the <code>ajaxEnabled</code> <a href="../api/globalconfig.html">global config option</a>.</p>
+
+ <p>The form below is identical to the one above except for the addition of the <code>data-ajax="false"</code> attribute. When the submit button is pressed, it will result in a full page refresh.</p>
+ <form action="forms-sample-response.php" method="get" data-ajax="false" class="ui-body ui-body-a ui-corner-all">
+ <fieldset>
+ <div data-role="fieldcontain">
+ <label for="shipping" class="select">Shipping method:</label>
+ <select name="shipping" id="shipping">
+ <option value="Standard shipping">Standard: 7 day</option>
+ <option value="Rush shipping">Rush: 3 days</option>
+ <option value="Express shipping">Express: next day</option>
+ <option value="Overnight shipping">Overnight</option>
+ </select>
+ </div>
+ <button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
+ </fieldset>
+ </form>
+
+ <h2>Self-submitting Forms</h2>
+ <p>You can submit forms to the same URL you're currently viewing by setting the form's <code>action</code> attribute to that URL. <A href="forms-sample-selfsubmit.php">This page demonstrates.</a></p>
+ <p>When a <code>POST</code> request is submitted to a page that's already in the DOM (which would commonly happen when submitting a form to the same URL currently in view), the response URL will be identical to that existing page, as <code>POST</code> requests do not append query string parameters to the URL. In this situation, jQuery Mobile will replace the page that submitted the form with the page returned in the response body.</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">Form elements</li>
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li data-theme="a"><a href="forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Theming Forms</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Theming forms</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <h2>Form themes</h2>
+ <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages and forms are styled. By default all form elements inside a container will automatically adopt the same theme color swatch as their parent. This allows form elements to blend into their layouts with minimal work. The <code> data-theme</code> attribute can be applied to any individual form element to apply any of the lettered theme color swatches to create contrast and emphasis in your designs.</p>
+
+ <p>All the form elements in the examples below use the same HTML code with no theme swatch specified on the individual form elements. The only difference between each example block code is a <code> data-theme</code> swatch color assigned to each parent container. This illustrates the way form elements automatically adopt the theme swatch of their parent.</p>
+
+
+ <h2>Body swatch A</h2>
+ <div class="ui-body ui-body-a">
+
+ <div data-role="fieldcontain">
+ <label for="name-a">Text Input:</label>
+ <input type="text" name="name" id="name-a" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="switch-a">Flip switch:</label>
+ <select name="switch-a" id="switch-a" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider-a">Slider:</label>
+ <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
+ <label for="checkbox-6a">b</label>
+
+ <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
+ <label for="checkbox-7a"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
+ <label for="checkbox-8a">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
+ <label for="radio-choice-1a">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
+ <label for="radio-choice-2a">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
+ <label for="radio-choice-3a">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
+ <label for="radio-choice-4a">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ </div><!-- /body-a -->
+
+ <h2>Body swatch B</h2>
+ <div class="ui-body ui-body-b">
+
+ <div data-role="fieldcontain">
+ <label for="name-b">Text Input:</label>
+ <input type="text" name="name" id="name-b" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="switch-b">Flip switch:</label>
+ <select name="switch-b" id="switch-b" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider-b">Slider:</label>
+ <input type="range" name="slider" id="slider-b" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6b" id="checkbox-6b" class="custom" />
+ <label for="checkbox-6b">b</label>
+
+ <input type="checkbox" name="checkbox-7b" id="checkbox-7b" class="custom" />
+ <label for="checkbox-7b"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8b" id="checkbox-8b" class="custom" />
+ <label for="checkbox-8b">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1b" value="choice-1" />
+ <label for="radio-choice-1b">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2b" value="choice-2" />
+ <label for="radio-choice-2b">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3b" value="choice-3" />
+ <label for="radio-choice-3b">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4b" value="choice-4" />
+ <label for="radio-choice-4b">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-b" class="select">Choose shipping method:</label>
+ <select name="select-choice-b" id="select-choice-b">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ </div><!-- /body-b -->
+
+
+ <h2>Body swatch C</h2>
+ <div class="ui-body ui-body-c">
+
+ <div data-role="fieldcontain">
+ <label for="name-c">Text Input:</label>
+ <input type="text" name="name" id="name-c" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="switch-c">Flip switch:</label>
+ <select name="switch-c" id="switch-c" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider-c">Slider:</label>
+ <input type="range" name="slider" id="slider-c" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6c" id="checkbox-6c" class="custom" />
+ <label for="checkbox-6c">b</label>
+
+ <input type="checkbox" name="checkbox-7c" id="checkbox-7c" class="custom" />
+ <label for="checkbox-7c"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8c" id="checkbox-8c" class="custom" />
+ <label for="checkbox-8c">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1c" value="choice-1" />
+ <label for="radio-choice-1c">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2c" value="choice-2" />
+ <label for="radio-choice-2c">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3c" value="choice-3" />
+ <label for="radio-choice-3c">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4c" value="choice-4" />
+ <label for="radio-choice-4c">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-c" class="select">Choose shipping method:</label>
+ <select name="select-choice-c" id="select-choice-c">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ </div><!-- /body-c -->
+
+
+
+ <h2>Body swatch D</h2>
+ <div class="ui-body ui-body-d">
+
+ <div data-role="fieldcontain">
+ <label for="name-d">Text Input:</label>
+ <input type="text" name="name" id="name-d" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="switch-d">Flip switch:</label>
+ <select name="switch-d" id="switch-d" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider-d">Slider:</label>
+ <input type="range" name="slider" id="slider-d" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6d" id="checkbox-6d" class="custom" />
+ <label for="checkbox-6d">b</label>
+
+ <input type="checkbox" name="checkbox-7d" id="checkbox-7d" class="custom" />
+ <label for="checkbox-7d"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8d" id="checkbox-8d" class="custom" />
+ <label for="checkbox-8d">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1d" value="choice-1" />
+ <label for="radio-choice-1d">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2d" value="choice-2" />
+ <label for="radio-choice-2d">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3d" value="choice-3" />
+ <label for="radio-choice-3d">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4d" value="choice-4" />
+ <label for="radio-choice-4d">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-d" class="select">Choose shipping method:</label>
+ <select name="select-choice-d" id="select-choice-d">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ </div><!-- /body-d -->
+
+
+ <h2>Body swatch E</h2>
+ <div class="ui-body ui-body-e">
+
+ <div data-role="fieldcontain">
+ <label for="name-e">Text Input:</label>
+ <input type="text" name="name" id="name-e" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="switch-e">Flip switch:</label>
+ <select name="switch-e" id="switch-e" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider-e">Slider:</label>
+ <input type="range" name="slider" id="slider-e" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6e" id="checkbox-6e" class="custom" />
+ <label for="checkbox-6e">b</label>
+
+ <input type="checkbox" name="checkbox-7e" id="checkbox-7e" class="custom" />
+ <label for="checkbox-7e"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8e" id="checkbox-8e" class="custom" />
+ <label for="checkbox-8e">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1e" value="choice-1" />
+ <label for="radio-choice-1e">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2e" value="choice-2" />
+ <label for="radio-choice-2e">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3e" value="choice-3" />
+ <label for="radio-choice-3e">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4e" value="choice-4" />
+ <label for="radio-choice-4e">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-e" class="select">Choose shipping method:</label>
+ <select name="select-choice-e" id="select-choice-e">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ </div><!-- /body-e -->
+
+ </form>
+
+ </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">Form elements</li>
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li data-theme="a"><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li><a href="forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Forms</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-index">
+
+ <div data-role="header" data-theme="f">
+ <h1>Form elements</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <p>All form elements begin with standard HTML controls that are enhanced to make them more attractive and easy to use. In browsers that don't support the custom controls, they will still have a usable experience because these are all based on native form elements.</p>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li><a href="forms-sample.html">Submitting forms</a></li>
+
+ </ul>
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Form Plugin Methods</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Form Plugin Methods</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <div class="ui-body ui-body-e">
+ <h4>We've retired this page.</h4>
+
+ <p>Plugin events and methods are now documented separately for each component (see links on the left).</p>
+ </div>
+
+
+
+ </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">Form elements</li>
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li><a href="forms-sample.html">Submitting forms</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Radio buttons</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Radio buttons</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Radio buttons</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+
+ <p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$("input[type='radio']").bind( "change", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The radio button plugin has the following custom events:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a radio button is created</dt>
+ <dd>
+
+
+ <pre><code>
+$("input[type='radio']").checkboxradio({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li data-theme="a"><a href="index.html">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Radio Buttons</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Radio buttons</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Radio buttons</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>Radio buttons are used to provide a list of options where only a single item can be selected. Traditional desktop radio buttons are not optimized for touch input so jQuery Mobile styles the <code>label</code> for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
+
+ <p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to radio buttons.</p>
+
+ <h2>Vertically grouped radio buttons</h2>
+
+ <p>To create a set of radio buttons, add an <code>input</code> with a <code>type="radio"</code> attribute and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated.</p>
+
+ <p>The <code>label</code> element is displayed next to the radio form element. Wrap the radio buttons in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question.</p>
+
+ <p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the container.</p>
+
+<pre><code>
+<strong><fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend></strong>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+<strong></fieldset></strong>
+</code></pre>
+
+
+ <p>This will produce a vertically grouped radio button set. The default styles set the width of the button group to 100% of the parent container and stacks the label on a separate line.</p>
+
+
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-pet-1a" id="radio-pet-1a" value="choice-1" checked="checked" />
+ <label for="radio-pet-1a">Cat</label>
+
+ <input type="radio" name="radio-pet-1a" id="radio-pet-2a" value="choice-2" />
+ <label for="radio-pet-2a">Dog</label>
+
+ <input type="radio" name="radio-pet-1a" id="radio-pet-3a" value="choice-3" />
+ <label for="radio-pet-3a">Hamster</label>
+
+ <input type="radio" name="radio-pet-1a" id="radio-pet-4a" value="choice-4" />
+ <label for="radio-pet-4a">Lizard</label>
+ </fieldset>
+
+ <h2>Mini version</h2>
+
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>
+<fieldset data-role="controlgroup" <strong>data-mini="true"</strong>>
+
+ <input type="radio" name="radio-choice-1" id="radio-mini-1" value="choice-1" checked="checked" />
+
+ <label for="radio-mini-1">Credit</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-2" value="choice-2" />
+
+ <label for="radio-mini-2">Debit</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-3" value="choice-3" />
+
+ <label for="radio-mini-3">Cash</label>
+</fieldset>
+</code></pre>
+
+ <p>This will produce a radio button that is not as tall as the standard version and has a smaller text size.</p>
+
+ <fieldset data-role="controlgroup" data-mini="true">
+ <input type="radio" name="radio-choice-1" id="radio-mini-1" value="choice-1" checked="checked" />
+ <label for="radio-mini-1">Credit</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-2" value="choice-2" />
+ <label for="radio-mini-2">Debit</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-3" value="choice-3" />
+ <label for="radio-mini-3">Cash</label>
+ </fieldset>
+
+ <h2>Field containers</h2>
+
+ <p>Optionally wrap the radiobuttons in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
+ <pre><code>
+<strong><div data-role="fieldcontain">
+</strong> <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+<strong></div>
+</strong> </code></pre>
+
+
+ <p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the container.</p>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-pet-1" id="radio-pet-1" value="choice-1" checked="checked" />
+ <label for="radio-pet-1">Cat</label>
+
+ <input type="radio" name="radio-pet-1" id="radio-pet-2" value="choice-2" />
+ <label for="radio-pet-2">Dog</label>
+
+ <input type="radio" name="radio-pet-1" id="radio-pet-3" value="choice-3" />
+ <label for="radio-pet-3">Hamster</label>
+
+ <input type="radio" name="radio-pet-1" id="radio-pet-4" value="choice-4" />
+ <label for="radio-pet-4">Lizard</label>
+ </fieldset>
+ </div>
+ <h2>Horizontal radio button sets</h2>
+
+ <p>Radio buttons can also be used for grouped button sets where only a single button can be selected at once, such as a view switcher control. To make a horizontal radio button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
+
+ <code>
+ <fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong> >
+ </code>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Layout view:</legend>
+ <input type="radio" name="radio-view" id="radio-view-a" value="list" />
+ <label for="radio-view-a">List</label>
+ <input type="radio" name="radio-view" id="radio-view-b" value="grid" />
+ <label for="radio-view-b">Grid</label>
+ <input type="radio" name="radio-view" id="radio-view-c" value="gallery" />
+ <label for="radio-view-c">Gallery</label>
+ </fieldset>
+ </div>
+
+ <p>The labels float so they sit side-by-side on a line. The radio button icons are hidden and only the left and right edges of the group are rounded.</p>
+
+
+
+
+
+
+ </form>
+
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li data-theme="a"><a href="index.html">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Radio buttons</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Radio buttons</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Radio buttons</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The radio button has the following methods:</p>
+
+ <dl>
+
+ <dt><code>enable</code> enable a disabled radio button</dt>
+ <dd>
+ <pre><code>
+ $("input[type='radio']").checkboxradio('enable');
+ </code></pre>
+ </dd>
+
+ <dt><code>disable</code> disable a select.</dt>
+ <dd>
+ <pre><code>
+$("input[type='radio']").checkboxradio('disable');
+ </code></pre>
+ </dd>
+
+ <dt><code>refresh</code> update the custom select</dt>
+ <dd>
+ If you manipulate a radio button via JavaScript, you must call the refresh method on it to update the visual styling.
+ <pre><code>
+$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li data-theme="a"><a href="index.html">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Radio buttons</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Radio buttons</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Radio buttons</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The radio button has the following options:</p>
+
+ <dl>
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini="true"</code></p>
+ <pre><code>$("input[type='radio']").checkboxradio(<strong>{ mini: "true" }</strong>);</code></pre>
+ </dd>
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
+ <pre><code>$("input[type='radio']").checkboxradio(<strong>{ theme: "a" }</strong>);</code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li data-theme="a"><a href="index.html">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Search Input events</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Search input</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Search input</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+<p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$(".mySearchInput").bind( "change", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The text input plugin has the following custom events:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a text input is created</dt>
+ <dd>
+
+ <pre><code>
+$( ".selector" ).textinput({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li data-theme="a"><a href="index.html">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Search input</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Search input</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Search input</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an <code>input</code> with a <code>type="search"</code> attribute in your markup. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to search inputs.</p>
+
+ <p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
+
+<pre><code>
+<label for="search-basic">Search Input:</label>
+<input type="search" name="search" id="searc-basic" value="" />
+</code></pre>
+
+ <p>This will produce a basic search input. The default styles set the width of the input to 100% of the parent container and stack the label on a separate line.</p>
+ <label for="search-basic">Search Input:</label>
+ <input type="search" name="search" id="search-basic" value="" />
+
+ <h2>Mini version</h2>
+
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>
+<label for="search-basic">Search Input:</label>
+<input type="search" name="search" id="searc-basic" value="" <strong>data-mini="true"</strong> />
+</code></pre>
+
+ <p>This will produce a search input that is not as tall as the standard version and has a smaller text size.</p>
+ <label for="search-mini">Search Input:</label>
+ <input type="search" name="search" id="search-mini" value="" />
+
+ <h2>Field containers</h2>
+
+ <p>Optionally wrap the search input in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
+
+<pre><code>
+<strong><div data-role="fieldcontain">
+</strong> <label for="search">Search Input:</label>
+ <input type="search" name="password" id="search" value="" />
+<strong></div>
+</strong></code></pre>
+
+ <p>The search input is now displayed like this:</p>
+ <div data-role="fieldcontain">
+ <label for="search">Search Input:</label>
+ <input type="search" name="search2" id="search" value="" />
+ </div>
+
+ <h2>Theming</h2>
+ <p>The <code>data-theme</code> attribute can be added to the search input to set the theme to any swatch letter.</p>
+ <div data-role="fieldcontain">
+ <label for="searchA">Search Input:</label>
+ <input type="search" name="search3" id="searchA" value="" data-theme="a" />
+ </div>
+
+ <h2>Setting the clear button text</h2>
+ <p>The text for the button used to clear the search input of text can be configured for all search inputs by binding to the <code>mobileinit</code> event and setting the <code>$.mobile.textinput.prototype.options.clearSearchButtonText</code> property to a string of your choosing.</p>
+
+ <h2>Calling the textinput plugin</h2>
+
+<p>This plugin will auto-initialize on any page that contains a text input with the <code>type="search"</code> attribute without any need for a <code>data-role</code> attribute in the markup. However, if needed, you can directly call the <code>textinput</code> plugin on a selector, just like any jQuery plugin:</p>
+<pre><code>
+$('.mySearchInput').textinput();
+</code></pre>
+
+
+ </form>
+
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li data-theme="a"><a href="index.html">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Search Input methods</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Search input</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Search input</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The text input plugin has the following methods:</p>
+
+ <dl>
+
+ <dt><code>enable</code> enable a disabled text input</dt>
+ <dd>
+ <pre><code>
+$('.selector').textinput('enable');
+ </code></pre>
+ </dd>
+
+ <dt><code>disable</code> disable a text input</dt>
+ <dd>
+ <pre><code>
+$('.selector').textinput('disable');
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li data-theme="a"><a href="index.html">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Text Search options</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Search input</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Search input</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The text input plugin has the following options:</p>
+
+ <dl>
+ <dt><code>initSelector</code> <em>CSS selector string</em></dt>
+ <dd>
+ <p class="default">default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as textinputs. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.textinput.prototype.options.initSelector = ".myInputs";</strong>
+});
+</code></pre>
+ </dd>
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini="true"</code></p>
+ <pre><code>$('.selector').textinput(<strong>{ mini: "true" }</strong>);</code></pre>
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
+ <pre><code>$('.selector').textinput(<strong>{ theme: "a" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>clearSearchButtonText</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "clear text"</p>
+ <p>Sets the text used for the button that clears the search input of text.</p>
+ <pre><code>$('.selector').textinput(<strong>{ clearSearchButtonText: "custom value" }</strong>);</code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li data-theme="a"><a href="index.html">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Select</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Select Menus</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+<h2>Select menus</h2>
+
+<ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+</ul>
+
+<h2>Custom select menus</h2>
+<p>The framework is capable of building a custom menu based on the <code>select</code> element's list of options. We recommend using a custom menu when multiple selections are required, or when the menu itself must be styled with CSS.</p>
+
+<p>You can optionally use custom-styled select menus instead of the native OS menu. The custom menu supports disabled options and multiple selection (whereas native mobile OS support for both is inconsistent), adds an elegant way to handle placeholder values, and restores missing functionality on certain platforms such as <code>optgroup</code> support on Android (all explained below). In addition, the framework applies the custom button's theme to the menu to better match the look and feel and provide visual consistency across platforms. Lastly, custom menus often look better on desktop browsers because native desktop menus are smaller than their mobile counterparts and tend to look disproportionate.</p>
+
+ <p>Keep in mind that there is overhead involved in parsing the native select to build a custom menu. If there are a lot of selects on a page, or a select has a long list of options, this can impact the performance of the page, so we recommend using custom menus sparingly. </p>
+
+ <p>To use custom menus on a specific <code>select</code>, just add the <code>data-native-menu="false"</code> attribute. Alternately, this can also programmatically set the select menu's <code>nativeMenu</code> configuration option to <code>false</code> in a callback bound to the <code>mobileinit</code> event to achieve the same effect. This will globally make all selects use the custom menu by default. The following must be included in the page after jQuery is loaded but before jQuery Mobile is loaded.</p>
+
+
+<code>
+<pre>
+$(document).bind('mobileinit',function(){
+ $.mobile.selectmenu.prototype.options.nativeMenu = false;
+});
+</pre>
+</code>
+
+ <p>When the <code>select</code> has a small number of options that will fit on the device's screen, the menu will appear as a small overlay with a pop transition:</p>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-custom" class="select">Shipping method:</label>
+ <select name="select-choice-1" id="select-choice-custom" data-native-menu="false">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <p>When it has too many options to show on the device's screen, the framework will automatically create a new "page" populated with a standard <a href="../../lists/docs-lists.html">list view</a> for the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the <code>label</code> is used as the title for this page.</p>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3" data-native-menu="false">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+ <h3>Disabled options</h3>
+ <p>jQuery Mobile will automatically disable and style option tags with the <code>disabled</code> attribute. In the demo below, the second option "Rush: 3 days" has been set to disabled.</p>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-7" class="select">Shipping method:</label>
+ <select name="select-choice-7" id="select-choice-7">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush" disabled="disabled">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <h3>Placeholder options</h3>
+ <p>It's common for developers to include a "null" option in their select element to force a user to choose an option. If a placeholder option is present in your markup, jQuery Mobile will hide them in the overlay menu, showing only valid choices to the user, and display the placeholder text inside the menu as a header. A placeholder option is added when the framework finds:</p>
+ <ul>
+ <li>An option with no value attribute (or an empty value attribute)</li>
+ <li>An option with no text node</li>
+ <li>An option with a <code>data-placeholder="true"</code> attribute. (This allows you to use an option that has a value and a textnode as a placeholder option).</li>
+ </ul>
+
+ <p>You can disable this feature through the selectmenu plugin's <code>hidePlaceholderMenuItems</code> option, like this:</p>
+ <pre>
+ <code>
+$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
+ </code>
+ </pre>
+
+ <p>Examples of various placeholder options:</p>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-4" class="select">Shipping method:</label>
+ <select name="select-choice-4" id="select-choice-4" data-native-menu="false">
+ <option></option>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-5" class="select">Shipping method:</label>
+ <select name="select-choice-5" id="select-choice-5" data-native-menu="false">
+ <option>Choose one...</option>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-6" class="select">Shipping method:</label>
+ <select name="select-choice-6" id="select-choice-6" data-native-menu="false">
+ <option value="choose-one" data-placeholder="true">Choose one...</option>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ <h3>Multiple selects</h3>
+ <p>If the <code>multiple</code> attribute is present in your markup, jQuery Mobile will enhance the element with a few extra considerations:</p>
+
+ <ul>
+ <li>A header element will be created inside the menu and display the placeholder text and a close button.</li>
+ <li>Clicking on an item inside the overlay menu will not close the widget.</li>
+ <li>A ghosted, unchecked icon will appear adjacent to each unselected item. When the item is selected the icon will change to a checkbox. Neither icon will appear inside a single select box.</li>
+ <li>Once 2+ items are selected, a counter element with the total number of selected items will appear inside the button.</li>
+ <li>The text of each selected item will appear inside the button as a list. If the button is not wide enough to display the entire list, it is truncated with an ellipses.</li>
+ <li>If no items are selected, the button's text will default to the placeholder text.</li>
+ <li>If no placeholder element exists, the default button text will be blank and the header will appear with just a close button. Because this isn't a friendly user experience, we recommended that you always specify a placeholder element when using multiple select boxes.</li>
+ </ul>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-9" class="select">Shipping method(s):</label>
+ <select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
+ <option>Choose options</option>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <p>When a select is large enough to where the menu will open in a new page, the placeholder text is displayed in the button when no items are selected, and the <code>label</code> text is displayed in the menu's header. This differs from smaller overlay menus where the placeholder text is displayed in both the button and the header, and from full-page single selects where the placeholder text is not used at all.</p>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-10" class="select">Choose state(s):</label>
+ <select name="select-choice-10" id="select-choice-10" multiple="multiple" data-native-menu="false">
+ <option>Choose options</option>
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+
+
+
+
+ <h3>Optgroup support</h3>
+ <p>If a select menu contains <code>optgroup</code> elements, jQuery Mobile will create a divider & group items based on the <code>label</code> attribute's text:</p>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-8" class="select">Shipping method:</label>
+ <select name="select-choice-8" id="select-choice-8" data-native-menu="false">
+ <option>Choose shipping method</option>
+ <optgroup label="USPS">
+ <option value="standard" selected>Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </optgroup>
+ <optgroup label="FedEx">
+ <option value="firstOvernight">First Overnight</option>
+ <option value="expressSaver">Express Saver</option>
+ <option value="ground">Ground</option>
+ </optgroup>
+ </select>
+ </div>
+
+
+ <h2>Theming selects</h2>
+ <p>You can specify any jQuery Mobile button <code>data-</code> attribute on a select element, too. In this example, we're setting the theme, icon and inline properties:</p>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-22" class="select">Actions</label>
+ <select name="select-choice-22" id="select-choice-22" data-theme="e" data-icon="gear" data-inline="true" data-native-menu="false">
+ <option value="view">User details</option>
+ <option value="edit">Edit user</option>
+ <option value="deactivate">De-activate</option>
+ <option value="delete">Delete user</option>
+ </select>
+ </div>
+
+ <p>The <code>data-overlay-theme</code> attribute can be added to a select element to set the color of the overlay layer for the dialog-based custom select menus and the outer border of the smaller custom menus. By default, the content block colors for swatch A will be used for the overlays.</p>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-15" class="select">Size</label>
+ <select name="select-choice-15" id="select-choice-15" data-theme="b" data-overlay-theme="d" data-native-menu="false">
+ <option value="t">Tall</option>
+ <option value="g">Grande</option>
+ <option value="v">Vente</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-13" class="select">Choose state(s):</label>
+ <select name="select-choice-13" id="select-choice-13" data-native-menu="false" data-theme="a" data-overlay-theme="e">
+ <option>Choose options</option>
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li data-theme="a"><a href="index.html">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Select events</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Select Menus</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Select menus</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="custom.html" data-role="button" data-transition="fade">Custom</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+
+<p>Bind events directly to the <code>select</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$(".mySelect").bind( "change", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The select menu plugin has the following custom events:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a select menu is created</dt>
+ <dd>
+
+ <pre><code>
+$( ".selector" ).selectmenu({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li data-theme="a"><a href="index.html">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Select</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Select Menus</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Select menus</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The select menu is based on a native <code>select</code> element, which is hidden from view and replaced with a custom-styled select button that matches the look and feel of the jQuery Mobile framework. The select menu is ARIA-enabled and keyboard accessible on the desktop as well. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to selects.</p>
+
+ <p>By default, the framework leverages the native OS options menu to use with the custom button. When the button is clicked, the native OS menu will open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value. Please note that the framework also offers the possibility of having custom (non-native) select menus; see details at the bottom of this page and on the <a href="custom.html"> custom select menu</a> page.</p>
+
+ <p>To add a select menu to your page, start with a standard <code>select</code> element populated with a set of <code>option</code> elements. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>select</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons. </p>
+
+ <p>The framework will find all <code>select</code> elements and automatically enhance them into select menus, no need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of a select, add <code>data-role="none"</code> attribute to the <code>select</code>.</p>
+
+<pre><code>
+<label for="select-choice-0" class="select">Shipping method:</label>
+<select name="select-choice-0" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+</select>
+</code></pre>
+
+ <p>This will produce a basic select menu. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.</p>
+
+ <label for="select-choice-0" class="select">Shipping method:</label>
+ <select name="select-choice-0" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+
+ <h2>Mini version</h2>
+
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>
+<label for="select-choice-min" class="select">Shipping method:</label>
+<select name="select-choice-min" id="select-choice-1" <strong>data-mini="true"</strong>>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+</select>
+</code></pre>
+
+ <p>This will produce a select that a not as tall as the standard version and has a smaller text size.</p>
+ <label for="select-choice-min" class="select">Shipping method:</label>
+ <select name="select-choice-0" id="select-choice-min" data-mini="true">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+
+ <h2>Field containers</h2>
+ <p>Optionally wrap the selects in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
+<pre><code>
+<strong><div data-role="fieldcontain">
+</strong> <label for="select-choice-1" class="select">Shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+<strong></div>
+</strong></code></pre>
+
+ <p>The select input is now displayed like this:</p>
+
+
+<div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+</div>
+
+<p>An example of a select with a long list of options:</p>
+
+<div data-role="fieldcontain">
+ <label for="select-choice-2" class="select">Your state:</label>
+ <select name="select-choice-2" id="select-choice-2">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+</div>
+
+<h2>Optgroups</h2>
+<p>The following example organizes the options into <code>optgroup</code> elements. Support for this feature in mobile selects is a bit spotty, but is improving.</p>
+
+<div data-role="fieldcontain">
+ <label for="select-choice-nc" class="select">Preferred delivery:</label>
+ <select name="select-choice-8" id="select-choice-nc">
+ <optgroup label="FedEx">
+ <option value="firstOvernight">First Overnight</option>
+ <option value="expressSaver">Express Saver</option>
+ <option value="ground">Ground</option>
+ </optgroup>
+ <optgroup label="UPS">
+ <option value="firstOvernight">First Overnight</option>
+ <option value="expressSaver">Express Saver</option>
+ <option value="ground">Ground</option>
+ </optgroup>
+ <optgroup label="US Mail">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day (disabled)</option>
+ <option value="overnight">Overnight</option>
+ </optgroup>
+ </select>
+</div>
+
+
+
+<h2>Vertically grouped select inputs</h2>
+
+<p>To create a grouped set of select inputs, first add <code>select</code> and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>select</code> so they are semantically associated.</p>
+
+<p>Because the <code>label</code> element will be associated with each individual select input, we recommend wrapping the selects in a <code>fieldset</code> element that has a <code>legend</code> which acts as the combined label for the grouped inputs.</p>
+
+<p>Lastly, one needs to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute, so it can be styled as a group.</p>
+
+<pre><code>
+<div data-role="fieldcontain">
+<fieldset data-role="controlgroup">
+ <legend>Date of Birth:</legend>
+
+ <label for="select-choice-month">Month</label>
+<select name="select-choice-month" id="select-choice-month">
+ <option>Month</option>
+ <option value="jan">January</option>
+ <!-- etc. -->
+</select>
+
+ <label for="select-choice-day">Day</label>
+<select name="select-choice-day" id="select-choice-day">
+ <option>Day</option>
+ <option value="1">1</option>
+ <!-- etc. -->
+</select>
+
+<label for="select-choice-year">Year</label>
+<select name="select-choice-year" id="select-choice-year">
+ <option>Year</option>
+ <option value="2011">2011</option>
+ <!-- etc. -->
+</select>
+</fieldset>
+</div>
+</code></pre>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Date of Birth:</legend>
+
+ <label for="select-choice-month">Month</label>
+ <select name="select-choice-month" id="select-choice-month">
+ <option>Month</option>
+ <option value="jan">January</option>
+ <option value="dec">December</option>
+ <option value="feb">February</option>
+ <option value="mar">March</option>
+ <option value="apr">April</option>
+ <option value="may">May</option>
+ <option value="jun">June</option>
+ <option value="jul">July</option>
+ <option value="aug">August</option>
+ <option value="sep">September</option>
+ <option value="oct">October</option>
+ <option value="nov">November</option>
+ <option value="dec">December</option>
+ </select>
+
+ <label for="select-choice-day">Day</label>
+ <select name="select-choice-day" id="select-choice-day">
+ <option>Day</option>
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ </select>
+
+ <label for="select-choice-year">Year</label>
+ <select name="select-choice-year" id="select-choice-year">
+ <option>Year</option>
+ <option value="2011">2011</option>
+ <option value="2010">2010</option>
+ <option value="2009">2009</option>
+ <option value="2008">2008</option>
+ <option value="2007">2007</option>
+ <option value="2006">2006</option>
+ <option value="2005">2005</option>
+ <option value="2004">2004</option>
+ </select>
+ </fieldset>
+
+</div>
+
+<h2>Horizontally grouped select inputs</h2>
+<p>Select inputs can also be used for grouped sets with more than one related selections. To make a horizontal button set, add the <code>data-type="horizontal"</code> to the fieldset. Note that the buttons which trigger the select will resize depending on the currently selected option’s value. Note that browsers without support for <code>display: inline-block;</code> will group the selects vertically, as above.</p>
+
+<code>
+<fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong>>
+</code>
+
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Date of Birth:</legend>
+
+ <label for="select-choice-month">Month</label>
+ <select name="select-choice-month" id="select-choice-month">
+ <option value="jan">Jan</option>
+ <option value="dec">Dec</option>
+ <option value="feb">Feb</option>
+ <option value="mar">Mar</option>
+ <option value="apr">Apr</option>
+ <option value="may">May</option>
+ <option value="jun">Jun</option>
+ <option value="jul">Jul</option>
+ <option value="aug">Aug</option>
+ <option value="sep">Sep</option>
+ <option value="oct">Oct</option>
+ <option value="nov">Nov</option>
+ <option value="dec">Dec</option>
+ </select>
+
+ <label for="select-choice-day">Day</label>
+ <select name="select-choice-day" id="select-choice-day">
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value="8">8</option>
+ <option value="9">9</option>
+ <option value="10">10</option>
+ <option value="11">11</option>
+ <option value="12">13</option>
+ <option value="13">14</option>
+ <option value="15">15</option>
+ </select>
+
+ <label for="select-choice-year">Year</label>
+ <select name="select-choice-year" id="select-choice-year">
+ <option value="2011">2012</option>
+ <option value="2011">2011</option>
+ <option value="2010">2010</option>
+ <option value="2009">2009</option>
+ <option value="2008">2008</option>
+ <option value="2007">2007</option>
+ <option value="2006">2006</option>
+ <option value="2005">2005</option>
+ <option value="2004">2004</option>
+ </select>
+ </fieldset>
+
+<h2>Calling the select menu plugin</h2>
+<p>The select menu plugin will auto initialize on any page that contains a select menu, without any need for a <code>data-role</code> attribute in the markup. However, you can directly call the select menu plugin on any selector, just like any normal jQuery plugin:</p>
+<pre><code>
+$('select').selectmenu();
+</code></pre>
+
+ </form>
+
+
+ <h2>Theming selects</h2>
+ <p>You can specify any jQuery Mobile button <code>data-</code> attribute on a select element, too. In this example, we're setting the theme, icon and inline properties:</p>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-11" class="select">Actions</label>
+ <select name="select-choice-11" id="select-choice-11" data-theme="e" data-icon="gear" data-inline="true">
+ <option value="view">User details</option>
+ <option value="edit">Edit user</option>
+ <option value="deactivate">De-activate</option>
+ <option value="delete">Delete user</option>
+ </select>
+ </div>
+
+
+ <h2>Custom select menus</h2>
+ <p>For the sake of advanced styling, the framework also offers a method of generating <a href="custom.html">custom menus</a> from existing select menu markup instead of the native OS menu. The custom menu supports disabled options and multiple selection (whereas native mobile OS support for both is inconsistent), adds an elegant way to handle placeholder values, and restores missing functionality on certain platforms such as <code>optgroup</code> support on Android.
+
+ <div align="right"><a href="custom.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="true" align="right">Custom select menu docs</a>
+</div>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li data-theme="a"><a href="index.html">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Select methods</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Select Menus</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Select menus</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The select menu plugin has the following methods:</p>
+
+ <dl>
+
+ <dt><code>close</code> close an open select menu</dt>
+ <dd>
+ <pre><code>
+$('select').selectmenu('close');
+ </code></pre>
+ </dd>
+
+ <dt><code>enable</code> enable a disabled select</dt>
+ <dd>
+ <pre><code>
+$('select').selectmenu('enable');
+ </code></pre>
+ </dd>
+
+ <dt><code>disable</code> disable a select.</dt>
+ <dd>
+ <pre><code>
+$('select').selectmenu('disable');
+ </code></pre>
+ </dd>
+
+ <dt><code>open</code> open a closed select menu (<a href="custom.html">custom menus</a> only)</dt>
+ <dd>
+ <pre><code>
+$('select').selectmenu('open');
+ </code></pre>
+ </dd>
+
+ <dt><code>refresh</code> update the custom select</dt>
+ <dd>
+ This is used to update the custom select to reflect the native select element's value.If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu. Also, if you pass a true argument you can force the rebuild to happen.
+ <pre><code>
+//refresh value
+$('select').selectmenu('refresh');
+
+//refresh and force rebuild
+$('select').selectmenu('refresh', true);
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li data-theme="a"><a href="index.html">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Select options</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Select Menus</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Select menus</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The select menu plugin has the following options:</p>
+
+
+ <dl>
+
+ <dt><code>corners</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Applies the theme button border-radius to the select button if set to true. This option is also exposed as a data attribute: <code>data-corners="false"</code></p>
+ <pre><code>$('select').selectmenu(<strong>{ corners: "false" }</strong>);</code></pre>
+ </dd>
+ <dt><code>icon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "arrow-down"</p>
+ <p>Applies an icon from the <a href="../../buttons/buttons-icons.html">icon set</a> to the custom button. This option is also exposed as a data attribute: <code>data-icon="star"</code></p>
+ <pre><code>$('select').selectmenu(<strong>{ icon: "star" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>iconpos</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "right"</p>
+ <p>Position of the icon in the select button. Possible values: left, right, none, notext. The notext value will display the select as an icon-only button with no text feedback. This option is also exposed as a data attribute: <code>data-iconpos="left"</code></p>
+ <pre><code>$('select').selectmenu(<strong>{ iconpos: "left" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>iconshadow</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Applies the theme shadow to the select button if set to true. This option is also exposed as a data attribute: <code>data-iconshadow="false"</code></p>
+ <pre><code>$('select').selectmenu(<strong>{ iconshadow: "false" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>initSelector</code> <em>CSS selector string</em></dt>
+ <dd>
+ <p class="default">default: "select:not(:jqmData(role='slider'))"</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as select menus. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.selectmenu.prototype.options.initSelector = ".myselect";</strong>
+});
+</code></pre>
+ </dd>
+
+ <dt><code>inline</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: null (false)</p>
+ <p>If set to true, this will make the select button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the select button is full width, regardless of the feedback content. Possible values: true, false. This option is also exposed as a data attribute: <code>data-inline="true"</code></p>
+ <pre><code>$('select').selectmenu(<strong>{ inline: "true" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini="true"</code></p>
+ <pre><code>$('select').selectmenu(<strong>{ mini: "true" }</strong>);</code></pre>
+
+ <dt><code>nativeMenu</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>When set to true, clicking the custom-styled select menu will open the native select menu which is best for performance. If set to false, the custom select menu style will be used instead of the native menu. This option is also exposed as a data attribute: <code>data-native-menu="false"</code></p>
+ <pre><code>$('select').selectmenu(<strong>{ nativeMenu: "false" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>overlayTheme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: a</p>
+ <p>Sets the color of the overlay layer for the dialog-based custom select menus and the outer border of the smaller custom menus. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, the content block colors for swatch A will be used for the overlays. This option is also exposed as a data attribute: <code>ui-body-d</code></p>
+ <pre><code>$('select').selectmenu(<strong>{ overlayTheme: "d" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>preventFocusZoom</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true on iOS platforms</p>
+ <p>This option disables page zoom temporarily when a custom select is focused, which prevents iOS devices from zooming the page into the select. By default, iOS often zooms into form controls, and the behavior is often unnecessary and intrusive in mobile-optimized layouts. This option is also exposed as a data attribute: <code>data-prevent-focus-zoom="true"</code></p>
+ <pre><code>$('select').selectmenu(<strong>{ preventFocusZoom: true }</strong>);</code></pre>
+ </dd>
+
+
+ <dt><code>shadow</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Applies the drop shadow style to the select button if set to true. This option is also exposed as a data attribute: <code>data-shadow="false"</code></p>
+ <pre><code>$('select').selectmenu(<strong>{ shadow: "false" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
+ <pre><code>$('select').selectmenu(<strong>{ theme: "a" }</strong>);</code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li data-theme="a"><a href="index.html">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Slider events</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Slider</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Slider</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+ <p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$( ".selector" ).bind( "change", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The slider plugin has the following custom event:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a slider is created</dt>
+ <dd>
+
+ <pre><code>
+$( ".selector" ).slider({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li data-theme="a"><a href="index.html">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Slider</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Slider</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+ <h2>Slider</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>To add a slider widget to your page, use a standard <code>input</code> with the <code>type="range"</code> attribute. The input's <code>value</code> is used to configure the starting position of the handle and the value is populated in the text input. Specify <code>min</code> and <code>max</code> attribute values to set the slider's range. If you want to constrain input to specific increments, add the <code>step</code> attribute. Set the <code>value</code> attribute to define the initial value. The framework will parse these attributes to configure the slider widget. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to sliders.</p>
+
+ <p>As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.</p>
+ <p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
+
+ <p>The framework will find all <code>input</code> elements with a <code>type="range"</code> and automatically enhance them into a slider with an accompanying input without any need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of this input into a slider, add <code>data-role="none"</code> attribute to the <code>input</code> and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them. In this example, the acceptable range is 0-100. </p>
+
+<pre><code>
+<label for="slider-0">Input slider:</label>
+<input type="range" name="slider" id="slider-0" value="60" min="0" max="100" />
+</code></pre>
+
+ <p>The default slider with these settings is displayed like this:</p>
+ <label for="slider-0">Input slider:</label>
+ <input type="range" name="slider-1" id="slider-0" value="60" min="0" max="100" />
+
+ <h2>Step increment</h2>
+
+ <p>To force the slider to snap to a specific increment, add the <code>step</code> attribute to the input. By default, the step is 1, but in this example, the step is 50 and the maximum value is 500.</p>
+
+<pre><code>
+<label for="slider-step">Input slider:</label>
+<input type="range" name="slider" id="slider-step" value="150" min="0" max="500" <strong>step="50"</strong> />
+</code></pre>
+
+ <p>This will produce an input that snaps to increments of 50. If a value is added to the input that isn't valid with the step increment, the value will be reset on blur to the closest step.</p>
+ <label for="slider-step">Input slider:</label>
+ <input type="range" name="slider-1" id="slider-step" value="150" min="0" max="500" step="50" />
+
+
+ <h2>Fill highlight</h2>
+
+ <p>To have a highlight fill on the track up to the slider handle position, add the <code>data-highlight="true"</code> attribute to the input. The fill uses active state swatch. </p>
+
+<pre><code>
+<label for="slider-fill">Input slider:</label>
+<input type="range" name="slider" id="slider-fill" value="60" min="0" max="100" <strong>data-highlight="true"</strong> />
+</code></pre>
+
+ <label for="slider-min">Input slider:</label>
+ <input type="range" name="slider-1" id="slider-min" value="60" min="0" max="100" data-highlight="true" />
+
+
+ <h2>Mini version</h2>
+
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>
+<label for="slider-0">Input slider:</label>
+<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" data-highlight="true" <strong>data-mini="true"</strong> />
+</code></pre>
+
+ <p>This will produce an input that is not as tall as the standard version and has a smaller text size.</p>
+ <label for="slider-min">Input slider:</label>
+ <input type="range" name="slider-1" id="slider-min" value="25" min="0" max="100" data-highlight="true" data-mini="true" />
+
+ <h2>Field containers</h2>
+
+ <p>Optionally wrap the slider markup in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form. In this example, the <code>step</code> attribute is omitted to allow any whole number value to be selected.</p>
+
+
+<pre><code>
+<strong><div data-role="fieldcontain">
+</strong> <label for="slider">Input slider:</label>
+ <input type="range" name="slider" id="slider" value="25" min="0" max="100" />
+<strong></div>
+</strong></code></pre>
+
+ <p>The slider is now displayed like this:</p>
+ <div data-role="fieldcontain">
+ <label for="slider-1">Input slider:</label>
+ <input type="range" name="slider-1" id="slider-1" value="25" min="0" max="100" />
+ </div>
+
+ <p>Sliders also respond to key commands. Right Arrow, Up Arrow and Page Up keys increase the value; Left Arrow, Down Arrow and Page Down keys decrease it. To move the slider to its minimum or maximum value, use the Home or End key, respectively.</p>
+
+
+ <h2>Calling the slider plugin</h2>
+
+<p>This plugin will auto initialize on any page that contains a text <code>input</code> with the <code>type="range"</code> attribute. However, if needed you can directly call the <code>slider</code> plugin on any selector, just like any jQuery plugin:</p>
+<pre><code>
+$('input').slider();
+</code></pre>
+
+
+ <h2>Theming the slider</h2>
+ <p>To set the theme swatch for the slider, add a <code>data-theme</code> attribute to the <code>input</code> which will apply the theme to both the input, handle and track. The track swatch can be set separately by adding the <code>data-track-theme</code> attribute to apply the down state version of the selected button swatch.</p>
+
+ <pre><code>
+<div data-role="fieldcontain">
+ <label for="slider-2">Input slider:</label>
+ <input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" <strong>data-theme="a" data-track-theme="b"</strong> />
+</div>
+ </code></pre>
+
+ <p>This will produce a themed slider:</p>
+ <div data-role="fieldcontain">
+ <label for="slider-2">Input slider:</label>
+ <input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" data-theme="a" data-track-theme="b" />
+ </div>
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li data-theme="a"><a href="index.html">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Slider methods</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Slider</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Slider</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The slider plugin has the following methods:</p>
+
+ <dl>
+ <dt><code>enable</code> enable a disabled slider</dt>
+ <dd>
+ <pre><code>
+$('.selector').slider('enable');
+ </code></pre>
+ </dd>
+
+ <dt><code>disable</code> disable a slider</dt>
+ <dd>
+ <pre><code>
+$('.selector').slider('disable');
+ </code></pre>
+ </dd>
+
+ <dt><code>refresh</code> update the slider</dt>
+ <dd>
+ <p>If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling.</p>
+
+ <pre><code>
+$('.selector').slider('refresh');
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li data-theme="a"><a href="index.html">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Slider options</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Slider</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Slider</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The slider plugin has the following options:</p>
+
+ <dl>
+ <dt><code>disabled</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the default state of the slider to disabled when "true".</p>
+ <pre><code>$('.selector').slider(<strong>{ disabled: "true" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>highlight</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets an active state fill on the track from the left edge to the slider handle when set to "true".</p>
+ <pre><code>$('.selector').slider(<strong>{ highlight: "true" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>initSelector</code> <em>CSS selector string</em></dt>
+ <dd>
+ <p class="default">default: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as sliders. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.slider.prototype.options.initSelector = ".myslider";</strong>
+});
+</code></pre>
+ </dd>
+
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini="true"</code></p>
+ <pre><code>$('.selector').slider(<strong>{ mini: "true" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
+ <pre><code>$('.selector').slider(<strong>{ theme: "a" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>trackTheme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for the slider's track, specifically. It accepts a single letter from a-z that maps to the swatches included in your theme.</p>
+ <pre><code>$('.selector').slider(<strong>{ trackTheme: "a" }</strong>);</code></pre>
+ <p>This option can be overridden in the markup by assigning a data attribute to the input, e.g. <code>data-track-theme="a"</code>.</p>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li data-theme="a"><a href="index.html">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Slider events</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Flip Toggle Switch</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Flip toggle switch</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+ <p>Bind events directly to the <code>select</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$( ".selector" ).bind( "change", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The slider plugin has the following custom event:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a slider is created</dt>
+ <dd>
+
+ <pre><code>
+$( ".selector" ).slider({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Switch</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Flip Toggle Switch</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+ <h2>Flip toggle switch</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>A binary "flip" switch is a common UI element on mobile devices that is used for binary on/off or true/false data input. You can either drag the flip handle like a slider or tap one side of the switch.</p>
+
+ <p>To create a flip toggle, start with a <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options accordingly. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to flip switches.</p>
+
+ <p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
+
+<pre><code>
+<label for="flip-a">Select slider:</label>
+<select name="slider" id="flip-a" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+</select>
+</code></pre>
+
+ <p>This will produce a basic flip toggle switch input. The default styles set the width of the switch to 100% of the parent container and stack the label on a separate line.</p>
+
+ <label for="flip-a">Flip switch:</label>
+ <select name="slider" id="flip-a" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+
+
+ <h2>Longer Labels</h2>
+ <p>The control is proportionally scaled, so to use longer labels one can just add a line of CSS setting the switch to the desired width. For example, given the following markup:</p>
+<pre><code>
+<div class="containing-element">
+ <label for="flip-min">Flip switch:</label>
+ <select name="slider" id="flip-min" data-role="slider">
+ <option value="off">Switch Off</option>
+ <option value="on">Switch On</option>
+ </select>
+</div>
+</code></pre>
+
+ <p><code>.containing-element .ui-slider-switch { width: 9em }</code> will produce:</p>
+
+ <style type="text/css" media="screen">
+ .containing-element .ui-slider-switch { width: 9em; }
+ </style>
+
+ <div class="containing-element">
+ <label for="flip-min">Flip switch:</label>
+ <select name="slider" id="flip-min" data-role="slider">
+ <option value="off">Switch Off</option>
+ <option value="on">Switch On</option>
+ </select>
+ </div>
+
+ <p>As some default styles hinge on fieldcontains, note that you may have to ensure that custom styles apply to switches within fieldcontains by using <code>.ui-field-contain div.ui-slider-switch { width: […]; }</code>.</p>
+
+ <h2>Mini version</h2>
+
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>
+<label for="flip-a">Select slider:</label>
+<select name="slider" id="flip-a" data-role="slider" <strong>data-mini="true"</strong>>
+ <option value="off">Off</option>
+ <option value="on">On</option>
+</select>
+</code></pre>
+
+ <p>This will produce a flip switch that is not as tall as the standard version and has a smaller text size.</p>
+ <label for="flip-min">Flip switch:</label>
+ <select name="slider" id="flip-min" data-role="slider" data-mini="true">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+
+
+ <h2>Field containers</h2>
+ <p>Optionally wrap the switch markup in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
+
+<pre><code>
+<strong><div data-role="fieldcontain">
+</strong><label for="flip-b">Flip switch:</label>
+ <select name="slider" id="flip-b" data-role="slider">
+ <option value="no">No</option>
+ <option value="yes">Yes</option>
+ </select>
+<strong></div>
+</strong></code></pre>
+ <p>The flip toggle switch is now displayed like this:</p>
+ <div data-role="fieldcontain">
+ <label for="flip-b">Flip switch:</label>
+ <select name="slider" id="flip-b" data-role="slider">
+ <option value="nope">Nope</option>
+ <option value="yep">Yep</option>
+ </select>
+ </div>
+
+
+ <h2>Theming the flip switch</h2>
+
+ <p>Like all form elements, this widget will automatically inherit the theme from its parent container. To choose a specific theme color swatch, specify the <code>data-theme</code> attribute on the select and specify a swatch letter.</p>
+
+<pre><code>
+<div data-role="fieldcontain">
+ <label for="flip-c">Flip switch:</label>
+ <select name="slider" id="flip-c" data-role="slider" data-theme="a">
+ <option value="no">No</option>
+ <option value="yes">Yes</option>
+ </select>
+</div>
+</code></pre>
+ <p>This results in a switch with the A swatch colors for the handle. Note that the lefthand "on" state gets the active state color.</p>
+ <div data-role="fieldcontain">
+ <label for="flip-c">Flip switch:</label>
+ <select name="slider" id="flip-c" data-role="slider" data-theme="a">
+ <option value="hate">Hate</option>
+ <option value="love">Love</option>
+ </select>
+ </div>
+
+ <p>Here is a E swatch variation:</p>
+ <div data-role="fieldcontain">
+ <label for="flip-d">Flip switch:</label>
+ <select name="slider" id="flip-d" data-role="slider" data-theme="e">
+ <option value="no">No</option>
+ <option value="yes">Yes</option>
+ </select>
+ </div>
+
+ <h2>Calling the switch plugin</h2>
+
+<p>This plugin will auto-initialize on any page that contains a <code>select</code> with the <code>data-role="slider"</code> attribute. However, if needed you can directly call the <code>slider</code> plugin on any selector, just like any jQuery plugin:</p>
+<pre><code>
+$('select').slider();
+</code></pre>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Slider methods</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Flip Toggle Switch</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Flip toggle switch</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The slider plugin has the following methods:</p>
+
+ <dl>
+ <dt><code>enable</code> enable a disabled slider</dt>
+ <dd>
+ <pre><code>
+$('.selector').slider('enable');
+ </code></pre>
+ </dd>
+
+ <dt><code>disable</code> disable a slider</dt>
+ <dd>
+ <pre><code>
+$('.selector').slider('disable');
+ </code></pre>
+ </dd>
+
+ <dt><code>refresh</code> update the slider</dt>
+ <dd>
+ <p>If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling.</p>
+
+ <pre><code>
+$('.selector').slider('refresh');
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Slider options</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Flip Toggle Switch</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Flip toggle switch</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The slider plugin has the following options:</p>
+
+ <dl>
+ <dt><code>disabled</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the default state of the slider to disabled when "true".</p>
+ <pre><code>$('.selector').slider(<strong>{ disabled: "true" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>initSelector</code> <em>CSS selector string</em></dt>
+ <dd>
+ <p class="default">default: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as sliders. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.slider.prototype.options.initSelector = ".myslider";</strong>
+});
+</code></pre>
+
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini="true"</code></p>
+ <pre><code>$('.selector').slider(<strong>{ mini: "true" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
+ <pre><code>$('.selector').slider(<strong>{ theme: "a" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>trackTheme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for the slider's track, specifically. It accepts a single letter from a-z that maps to the swatches included in your theme.</p>
+ <pre><code>$('.selector').slider(<strong>{ trackTheme: "a" }</strong>);</code></pre>
+ <p>This option can be overridden in the markup by assigning a data attribute to the input, e.g. <code>data-track-theme="a"</code>.</p>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="../textinputs/index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Text Input events</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Text inputs</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Text inputs</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+ <p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$( ".selector" ).bind( "change", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The text input plugin has the following custom events:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a text input is created</dt>
+ <dd>
+
+ <pre><code>
+$( ".selector" ).textinput({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li data-theme="a"><a href="index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Text inputs</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Text inputs</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Text inputs & Textareas</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to text inputs.</p>
+
+ <h2>Text inputs</h2>
+ <p>To collect standard alphanumeric text, use an <code>input</code> with a <code>type="text"</code> attribute. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
+
+<pre><code>
+ <label for="basic">Text Input:</label>
+ <input type="text" name="name" id="basic" value="" />
+</code></pre>
+
+ <p>This will produce a basic text input. The default styles set the width of the input to 100% of the parent container and stack the label on a separate line.</p>
+
+ <label for="basic">Text Input:</label>
+ <input type="text" name="name" id="basic" value="" />
+
+ <h2>Mini version</h2>
+
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>
+<label for="basic">Text Input:</label>
+<input type="text" name="name" id="basic" value="" <strong>data-mini="true"</strong> />
+</code></pre>
+
+ <p>This will produce an input that is not as tall as the standard version and has a smaller text size.</p>
+ <label for="mini">Text Input:</label>
+ <input type="text" name="name" id="mini" value="" data-mini="true" />
+
+ <h2>Field containers</h2>
+
+ <p>Optionally wrap the text input in a container with the <code> data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
+
+<pre><code>
+<strong><div data-role="fieldcontain">
+</strong> <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+<strong></div>
+</strong></code></pre>
+
+ <p>The text input is now displayed like this:</p>
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+
+ <h2>More text input types</h2>
+ <p>In jQuery Mobile, you can use existing and new HTML5 input types such as <code>password</code>, <code>email</code>, <code>tel</code>, <code>number</code>, and more. Some type values are rendered differently across browsers. For example, Chrome renders the <code>range</code> input as a slider. jQuery Mobile standardizes the appearance of <code>range</code> and <code>search</code> by dynamically changing their type to <code>text</code>. You can configure which input types are degraded to <code>text</code> with the <code>page</code> plugin's options.</p>
+
+ <p>One major advantage of using these more specific input types if that on mobile devices, specialized keyboards that speed data entry are offered in place of the standard text keyboard. Try the following inputs on a mobile device to see which display custom keyboards on various platforms.</p>
+
+ <div data-role="fieldcontain">
+ <label for="password">Password:</label>
+ <input type="password" name="password" id="password" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="number">Number:</label>
+ <input type="number" name="number" id="number" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="number-pattern">Number + pattern:</label>
+ <input type="number" name="number" pattern="[0-9]*" id="number-pattern" value="" placeholder="Pattern attribute [0-9]* for a numeric keypad" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="email">Email:</label>
+ <input type="email" name="email" id="email" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="url">Url:</label>
+ <input type="url" name="url" id="url" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="tel">Tel:</label>
+ <input type="tel" name="tel" id="tel" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="time">Time:</label>
+ <input type="time" name="time" id="time" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="date">Date:</label>
+ <input type="date" name="date" id="date" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="month">Month:</label>
+ <input type="month" name="month" id="month" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="week">Week:</label>
+ <input type="week" name="week" id="week" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="datetime">Datetime:</label>
+ <input type="datetime" name="datetime" id="datetime" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="datetime-l">Datetime local:</label>
+ <input type="datetime-local" name="datetime-l" id="datetime-l" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="color">Color:</label>
+ <input type="color" name="color" id="color" value="" />
+ </div>
+
+
+
+ <h2>Textareas</h2>
+ <p>For multi-line text inputs, use a <code>textarea</code> element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar. </p>
+ <p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>textarea</code> so they are semantically associated, and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
+
+<pre><code>
+<strong><label for="textarea-a">Textarea:</label>
+<textarea name="textarea" id="textarea-a"></strong>
+I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
+<strong></textarea></strong>
+</code></pre>
+
+ <p>This will produce a basic textarea with the width set to 100% of the parent container and the label stacked on a separate line. The textarea will grow to fit new lines as you type:</p>
+ <label for="textarea-a">Textarea:</label>
+ <textarea name="textarea" id="textarea-a">
+I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
+ </textarea>
+
+<pre><code>
+<strong><div data-role="fieldcontain">
+</strong><label for="textarea">Textarea:</label>
+ <textarea name="textarea" id="textarea"></textarea>
+<strong></div></strong>
+</code></pre>
+
+ <p>The textarea is displayed like this and will grow to fit new lines as you type:</p>
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea name="textarea" id="textarea"></textarea>
+ </div>
+
+
+ <h2>Calling the textinput plugin</h2>
+
+ <p>This plugin will auto initialize on any page that contains a textarea or any of the text input types listed above without any need for a <code>data-role</code> attribute in the markup. However, if needed, you can directly call the <code>textinput</code> plugin on any selector, just like any jQuery plugin:</p>
+ <pre><code>
+$('input').textinput();
+ </code></pre>
+
+
+ <h2>Degraded input types</h2>
+ <p>jQuery Mobile degrades several HTML5 input types back to type=text or type=number after adding enhanced controls. For example, inputs with a type of range are enhanced with a custom slider control, and their type is set to number to offer a usable form input alongside that slider. Inputs with a type of search are degraded back to type=text after we add our own themable search input styling.</p>
+ <p>The page plugin contains a list of input types that are set to either true which means they'll degrade to type=text, false which means they'll be left alone, or a string such as "number", which means they'll be converted to that type (such as the case of type=range).</p>
+
+ <p>You can configure which types are changed via the page plugin's <code>degradeInputs</code> option, which can be manipulated externally via <code>$.mobile.page.prototype.options.degradeInputs</code>, which has properties: color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, and week. Be sure to configure this inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
+
+
+ </form>
+
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li data-theme="a"><a href="index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Text Input methods</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Text inputs</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Text inputs</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The text input plugin has the following methods:</p>
+
+ <dl>
+
+ <dt><code>enable</code> enable a disabled text input</dt>
+ <dd>
+ <pre><code>
+$('.selector').textinput('enable');
+ </code></pre>
+ </dd>
+
+ <dt><code>disable</code> disable a text input</dt>
+ <dd>
+ <pre><code>
+$('.selector').textinput('disable');
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li data-theme="a"><a href="index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Text Input options</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Text inputs</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Text inputs</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The text input plugin has the following options:</p>
+
+ <dl>
+ <dt><code>initSelector</code> <em>CSS selector string</em></dt>
+ <dd>
+ <p class="default">default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as textinputs. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.textinput.prototype.options.initSelector = ".myInputs";</strong>
+});
+</code></pre>
+ </dd>
+
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini="true"</code></p>
+ <pre><code>$('.selector').textinput(<strong>{ mini: "true" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>preventFocusZoom</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true on iOS platforms</p>
+ <p>This option disables page zoom temporarily when a custom input is focused, which prevents iOS devices from zooming the page into the input. By default, iOS often zooms into form controls, and the behavior is often unnecessary and intrusive in mobile-optimized layouts. This option is also exposed as a data attribute: <code>data-prevent-focus-zoom="true"</code></p>
+ <pre><code>$('input').textinput(<strong>{ preventFocusZoom: true }</strong>);</code></pre>
+ </dd>
+
+
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
+ <pre><code>$('.selector').textinput(<strong>{ theme: "a" }</strong>);</code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </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">Form elements</li>
+ <li><a href="../docs-forms.html">Form basics</a></li>
+ <li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+ <li data-theme="a"><a href="index.html">Text inputs</a></li>
+ <li><a href="../search/">Search input</a></li>
+ <li><a href="../slider/">Slider</a></li>
+ <li><a href="../switch/">Flip toggle switch</a></li>
+ <li><a href="../radiobuttons/">Radio buttons</a></li>
+ <li><a href="../checkboxes/">Checkboxes</a></li>
+ <li><a href="../selects/">Select menus</a></li>
+ <li><a href="../forms-themes.html">Theming forms</a></li>
+ <li><a href="../forms-all-native.html">Native form elements</a></li>
+ <li><a href="../forms-sample.html">Submitting forms</a></li>
+
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery UI Mobile Framework - Documentation</title>
+ <link rel="stylesheet" href="../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="_assets/css/jqm-docs.css"/>
+
+ <script src="../js/jquery.js"></script>
+ <script src="../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../js/"></script>
+ <!-- Need to get a proper redirect hooked up. Blech. -->
+ <meta http-equiv="refresh" content="0;url=../index.html">
+</head>
+<body>
+ <div data-role="page" class="type-index">
+
+<div data-role="header" data-theme="f">
+ <h1>jQuery Mobile Docs</h1>
+ <a href="../index.html" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>
+</div>
+
+<div data-role="content">
+
+<p>Nothing to see here folks.</p>
+<a href="../index.html" data-role="button">View the documentation home page</a>
+
+</div>
+
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists Overview</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Lists</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>List views</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="docs-lists.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="lists-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="lists-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="lists-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <h2>Basic linked lists</h2>
+ <p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to listviews.</p>
+ <p>Here is the HTML markup for a basic linked list.</p>
+
+<pre><code>
+<ul data-role="listview" data-theme="g">
+ <li><a href="acura.html">Acura</a></li>
+ <li><a href="audi.html">Audi</a></li>
+ <li><a href="bmw.html">BMW</a></li>
+</ul>
+</code></pre>
+
+ <a href="lists-ul.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Basic list example</a>
+
+ <p><strong>Style note on non-inset lists</strong>: all standard, non-inset lists have a -15px margin to negate the 15px of padding on the content area to make lists fill to the edges of the screen. If you add other widgets above or below a list, the negative margin may make these elements overlap so you'll need to add additional spacing in your custom CSS.</p>
+ <h2>Nested lists</h2>
+ <p>By nesting child <code>ul</code> or <code>ol</code> inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework.</p>
+ <p>To <a href="../lists/lists-themes.html">set the swatch color</a> of the child list views, set the <code>data-theme</code> attribute on each list inside.</p>
+ <a href="lists-nested.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nested list example</a>
+
+ <h2>Numbered lists</h2>
+ <p>Lists can also be created from ordered lists (<code>ol</code>) which is useful when presenting items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the list view, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript.</p>
+
+ <a href="lists-ol.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Numbered list example</a>
+
+ <h2>Read-only lists</h2>
+ <p>List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework defaults to styling these list with the "c" theme swatch and sets the text size to a smaller size than the clickable lists to save a bit of space.</p>
+
+ <a href="lists-readonly-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Read-only list example</a>
+
+ <h2>Split button lists</h2>
+ <p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and set the <code>title</code> attribute of the link to the text the link for accessibility. </p>
+ <p>You can set the icon for the right split icon by specifying a <code>data-split-icon</code> attribute with the <a href="../buttons/buttons-themes.html">icon name</a> you want. The theme swatch color of the split button can be set by specifying a swatch letter in the <code>data-split-theme</code> attribute</p>
+
+ <a href="lists-split.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Split list example</a>
+
+
+ <h2>List dividers</h2>
+ <p>List items can be turned into dividers to organize and group the list items. This is done by adding the <code> data-role="list-divider"</code> to any list item. These items are styled with the bar swatch "b" by default (blue in the default theme) but you can specify a theme for dividers by adding the <code>data-dividertheme</code> attribute to the list element (<code>ul</code> or <code>ol</code>) and specifying a theme swatch letter.</p>
+
+ <a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>
+
+
+ <h2>Search filter</h2>
+ <p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either <a href="../api/globalconfig.html">bind to the <code>mobileinit</code> event</a> and set the <code>$.mobile.listview.prototype.options.filterPlaceholder</code> option to a string of your choosing, or use the data-attribute <code>data-filter-placeholder</code> on your listview. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data-attribute <code>data-filter-theme</code> on your listview.</p>
+
+ <a href="lists-search.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Search filter example</a>
+
+ <p>If you want to change the way in which list items are filtered, ie fuzzy search or matching from the beginning of the string, you can configure the callback used internally by defining <code>$.mobile.listview.prototype.options.filterCallback</code> during <code>mobileinit</code> or after the widget has been created with <code>$("#mylist").listview('option', 'filterCallback', yourFilterFunction)</code>. Any function defined for the callback will be provided two arguments. First, the text of the current list item and second, the value being searched for. A truthy value will result in a hidden list item. The default callback which filters entries without the <code>searchValue</code> as a substring is described below:
+ </p>
+
+<pre><code>function( text, searchValue ){
+ return text.toLowerCase().indexOf( searchValue ) === -1;
+};</code></pre>
+
+ <p>To filter list items by values other than the text, add a <code>data-filtertext</code> attribute to the list item. The value of this attribute will be passed as the first argument to the <code>filterCallback</code> function instead of the text.</p>
+
+ <a href="lists-search-filtertext.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Hidden data filter example</a>
+
+ <h2>Text formatting & counts</h2>
+ <p>The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information and counts through semantic HTML markup.</p>
+
+ <ul>
+ <li>To add a count indicator to the right of the list item, wrap the number in an element with a class of <code>ui-li-count</code></li>
+ <li>To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis. </li>
+ <li>Supplemental information can be added to the right of each list item by wrapping content in an element with a class of <code>ui-li-aside</code></li>
+ </ul>
+ <a href="lists-count.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with count bubbles</a>
+ <a href="lists-formatting.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with text formatting</a>
+
+ <h2>Thumbnails & icons</h2>
+ <p>To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square. To use standard 16x16 pixel icons in list items, add the class of <code>ui-li-icon</code> to the image element.</p>
+ <a href="lists-thumbnails.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with thumbnail images</a>
+ <a href="lists-icons.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with icon images</a>
+
+ <h2>Inset lists</h2>
+ <p>If lists are embedded in a page with other types of content, an inset list packages the list into a block that sits inside the content area with a bit of margin and rounded corners (theme controlled). By adding the <code> data-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance.</p>
+
+ <a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inset list example</a>
+
+ <h2>Calling the listview plugin</h2>
+ <p>You can directly call the listview plugin on any selector, just like any jQuery plugin:</p>
+ <code>$('#mylist').listview();</code>
+
+ <h2>Updating lists</h2>
+ <p>If you add items to a listview, you'll need to call the <code>refresh()</code> method on it to update the styles and create any nested lists that are added. For example:</p>
+ <code>$('#mylist').listview('refresh');</code>
+
+ <p>Note that the <code>refresh()</code> method only affects <strong>new nodes</strong> appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh. </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">List views</li>
+ <li data-theme="a"><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-index">
+
+ <div data-role="header" data-theme="f">
+ <h1>Lists</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <p>Lists are used for data display, navigation, result lists, and data entry so jQuery Mobile includes a wide range of list types and formatting examples to cover most common design patterns.</p>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+ <!--<li><a href="api-lists.html">API documentation</a></li>-->
+ </ul>
+
+
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Linked list samples</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <form>
+ <h2>Simple list</h2>
+
+ <ul data-role="listview">
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ </ul>
+
+ <h2>Count bubbles</h2>
+ <ul data-role="listview">
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ <h2>Numbered list</h2>
+ <ol data-role="listview">
+ <li><a href="index.html">The Godfather</a></li>
+ <li><a href="index.html">Inception</a></li>
+ <li><a href="index.html">The Good, the Bad and the Ugly </a></li>
+ <li><a href="index.html">Pulp Fiction</a></li>
+ <li><a href="index.html">Schindler's List</a></li>
+ </ol>
+
+ <h2>Divided, formatted content</h2>
+ <ul data-role="listview">
+ <li><a href="index.html">
+ <h3>Stephen Weber</h3>
+ <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+ <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+ <p class="ui-li-aside"><strong>6:24</strong>PM</p>
+ </a></li>
+ <li><a href="index.html">
+ <h3>jQuery Team</h3>
+ <p><strong>Boston Conference Planning</strong></p>
+ <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
+ <p class="ui-li-aside"><strong>9:18</strong>AM</p>
+ </a></li>
+ </ul>
+
+
+
+
+ <h2>Icon list</h2>
+ <ul data-role="listview">
+ <li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ <h2>Thumbnail, split button list</h2>
+
+ <ul data-role="listview">
+ <li><a href="index.html">
+ <img src="images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ </ul>
+
+ <h2>Divided, filterable list</h2>
+ <ul data-role="listview" data-filter="true">
+ <li data-role="list-divider">A</li>
+ <li><a href="index.html">Adam Kinkaid</a></li>
+ <li><a href="index.html">Alex Wickerham</a></li>
+ <li><a href="index.html">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="index.html">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="index.html">Caleb Booth</a></li>
+ <li><a href="index.html">Christopher Adams</a></li>
+ </ul>
+
+
+
+
+ </form>
+ </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">List views</li>
+ <li data-theme="a"><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists Count Bubbles</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Count bubble</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li data-theme="a"><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - List Dividers</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>List dividers</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li data-role="list-divider">A</li>
+ <li><a href="index.html">Adam Kinkaid</a></li>
+ <li><a href="index.html">Alex Wickerham</a></li>
+ <li><a href="index.html">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="index.html">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="index.html">Caleb Booth</a></li>
+ <li><a href="index.html">Christopher Adams</a></li>
+ <li><a href="index.html">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="index.html">David Walsh</a></li>
+ <li><a href="index.html">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="index.html">Elizabeth Bacon</a></li>
+ <li><a href="index.html">Emery Parker</a></li>
+ <li><a href="index.html">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="index.html">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="index.html">Graham Smith</a></li>
+ <li><a href="index.html">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="index.html">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="index.html">Mike Farnsworth</a></li>
+ <li><a href="index.html">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="index.html">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="index.html">Paul Baker</a></li>
+ <li><a href="index.html">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="index.html">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="index.html">Sawyer Wakefield</a></li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li data-theme="a"><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists Overview</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Lists</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>List views</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="docs-lists.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="lists-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="lists-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="lists-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+ <p>Bind events directly to the <code>ol</code> or <code>ul</code> element. Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$( ".selector" ).bind( "change", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The listview plugin has the following custom event:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a listview is created</dt>
+ <dd>
+
+ <pre><code>
+$( ".selector" ).listview({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </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">List views</li>
+ <li data-theme="a"><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - List Formatting</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>List formatting</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <ul data-role="listview" data-theme="d" data-divider-theme="d">
+ <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
+ <li><a href="index.html">
+
+ <h3>Stephen Weber</h3>
+ <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+ <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+ <p class="ui-li-aside"><strong>6:24</strong>PM</p>
+
+ </a></li>
+ <li><a href="index.html">
+
+ <h3>jQuery Team</h3>
+ <p><strong>Boston Conference Planning</strong></p>
+ <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
+ <p class="ui-li-aside"><strong>9:18</strong>AM</p>
+
+ </a></li>
+ <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
+ <li><a href="index.html">
+ <h3>Avery Walker</h3>
+ <p><strong>Re: Dinner Tonight</strong></p>
+ <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
+ <p class="ui-li-aside"><strong>4:48</strong>PM</p>
+ </a></li>
+ <li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
+ <li><a href="index.html">
+ <h3>Amazon.com</h3>
+ <p><strong>4-for-3 Books for Kids</strong></p>
+ <p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
+ <p class="ui-li-aside"><strong>12:47</strong>PM</p>
+ </a></li>
+ <li><a href="index.html">
+ <h3>Mike Taylor</h3>
+ <p><strong>Re: This weekend in Maine</strong></p>
+ <p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
+ <p class="ui-li-aside"><strong>6:24</strong>AM</p>
+ </a></li>
+ <li><a href="index.html">
+ <h3>Redfin</h3>
+ <p><strong>Redfin listing updates for today</strong></p>
+ <p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
+ <p class="ui-li-aside"><strong>5:52</strong>AM</p>
+ </a></li>
+ <li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
+ <li><a href="index.html">
+ <h3>Angela Smith</h3>
+ <p><strong>Link Request</strong></p>
+ <p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
+ <p class="ui-li-aside"><strong>6:24</strong>AM</p>
+ </a></li>
+ <li><a href="index.html">
+ <h3>Mike Taylor</h3>
+ <p><strong>This weekend in Maine</strong></p>
+ <p>Sounds good, let me check into our plans.</p>
+ <p class="ui-li-aside"><strong>6:24</strong>AM</p>
+ </a></li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li data-theme="a"><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Inset Lists with Forms</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Inset with Forms</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <form>
+ <ul data-role="listview" data-inset="true">
+ <li data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </li>
+ <li data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </li>
+ <li data-role="fieldcontain">
+ <label for="search">Search Input:</label>
+ <input type="search" name="password" id="search" value="" />
+ </li>
+ <li data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </li>
+ <li data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </li>
+ <li data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
+ <label for="checkbox-1a">Cheetos</label>
+
+ <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
+ <label for="checkbox-2a">Doritos</label>
+
+ <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
+ <label for="checkbox-3a">Fritos</label>
+
+ <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
+ <label for="checkbox-4a">Sun Chips</label>
+ </fieldset>
+ </li>
+
+ <li data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
+ <label for="checkbox-6">b</label>
+
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
+ <label for="checkbox-7"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
+ <label for="checkbox-8">u</label>
+ </fieldset>
+ </li>
+ <li data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ </li>
+
+
+ <li data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Layout view:</legend>
+ <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
+ <label for="radio-choice-c">List</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
+ <label for="radio-choice-d">Grid</label>
+ </fieldset>
+ </li>
+
+ <li data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </li>
+
+ <li data-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </li>
+
+ <li data-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a" data-native-menu="false">
+ <option>Custom menu example</option>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </li>
+
+ <li class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
+ </fieldset>
+ </li>
+
+ </ul>
+
+
+
+ </form>
+
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li data-theme="a"><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists with Forms</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Lists with Forms</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <form>
+ <ul data-role="listview">
+ <li data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </li>
+ <li data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </li>
+ <li data-role="fieldcontain">
+ <label for="search">Search Input:</label>
+ <input type="search" name="password" id="search" value="" />
+ </li>
+ <li data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </li>
+ <li data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </li>
+ <li data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
+ <label for="checkbox-1a">Cheetos</label>
+
+ <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
+ <label for="checkbox-2a">Doritos</label>
+
+ <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
+ <label for="checkbox-3a">Fritos</label>
+
+ <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
+ <label for="checkbox-4a">Sun Chips</label>
+ </fieldset>
+ </li>
+
+ <li data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
+ <label for="checkbox-6">b</label>
+
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
+ <label for="checkbox-7"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
+ <label for="checkbox-8">u</label>
+ </fieldset>
+ </li>
+ <li data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ </li>
+
+
+ <li data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Layout view:</legend>
+ <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
+ <label for="radio-choice-c">List</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
+ <label for="radio-choice-d">Grid</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
+ <label for="radio-choice-e">Gallery</label>
+ </fieldset>
+ </li>
+
+ <li data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </li>
+
+ <li data-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </li>
+
+ <li data-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a" data-native-menu="false">
+ <option>Custom menu example</option>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </li>
+
+ <li class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
+ </fieldset>
+ </li>
+
+ </ul>
+
+ </form>
+
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li data-theme="a"><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - List Icons</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Icons</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
+
+
+
+ <li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li data-theme="a"><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists with Form Controls</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Inset list samples</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <form>
+ <h2>Simple list</h2>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ </ul>
+
+ <h2>Count bubbles</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ <h2>Numbered list</h2>
+ <ol data-role="listview" data-inset="true">
+ <li><a href="index.html">The Godfather</a></li>
+ <li><a href="index.html">Inception</a></li>
+ <li><a href="index.html">The Good, the Bad and the Ugly </a></li>
+ <li><a href="index.html">Pulp Fiction</a></li>
+ <li><a href="index.html">Schindler's List</a></li>
+ </ol>
+
+ <h2>Divided, formatted content</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html">
+ <h3>Stephen Weber</h3>
+ <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+ <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+ <p class="ui-li-aside"><strong>6:24</strong>PM</p>
+ </a></li>
+ <li><a href="index.html">
+ <h3>jQuery Team</h3>
+ <p><strong>Boston Conference Planning</strong></p>
+ <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
+ <p class="ui-li-aside"><strong>9:18</strong>AM</p>
+ </a></li>
+ </ul>
+
+
+
+
+ <h2>Icon list</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon ui-corner-none">France <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon ui-corner-none">United States <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ <h2>Thumbnail, split button list</h2>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html">
+ <img src="images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ </ul>
+
+ <h2>Divided, filterable list</h2>
+ <ul data-role="listview" data-filter="true" data-inset="true">
+ <li data-role="list-divider">A</li>
+ <li><a href="index.html">Adam Kinkaid</a></li>
+ <li><a href="index.html">Alex Wickerham</a></li>
+ <li><a href="index.html">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="index.html">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="index.html">Caleb Booth</a></li>
+ <li><a href="index.html">Christopher Adams</a></li>
+ </ul>
+
+
+
+
+ </form>
+
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li data-theme="a"><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists Overview</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Lists</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>List views</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="docs-lists.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="lists-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="lists-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="lists-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The listview plugin has the following methods:</p>
+
+ <dl>
+ <dt><code>childPages</code> retrieve the sub-pages</dt>
+ <dd>
+ <p>This method returns a jQuery object containing all the immediate child pages of a nested list.</p>
+
+ <pre><code>
+$('.selector').listview('childPages');
+ </code></pre>
+ </dd>
+
+ <dt><code>refresh</code> update the listview</dt>
+ <dd>
+ <p>If you manipulate a listview via JavaScript (e.g. add new LI elements), you must call the refresh method on it to update the visual styling.</p>
+
+ <pre><code>
+$('.selector').listview('refresh');
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </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">List views</li>
+ <li data-theme="a"><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Nested Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Nested list</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li>
+ <h3>Animals</h3>
+ <p>All your favorites from aarkvarks to zebras.</p>
+
+ <ul>
+ <li>Pets
+ <ul>
+ <li><a href="index.html">Canary</a></li>
+ <li><a href="index.html">Cat</a></li>
+ <li><a href="index.html">Dog</a></li>
+ <li><a href="index.html">Gerbil</a></li>
+ <li><a href="index.html">Iguana</a></li>
+ <li><a href="index.html">Mouse</a></li>
+ </ul>
+ </li>
+ <li>Farm animals
+ <ul>
+ <li><a href="index.html">Chicken</a></li>
+ <li><a href="index.html">Cow</a></li>
+ <li><a href="index.html">Duck</a></li>
+ <li><a href="index.html">Horse</a></li>
+ <li><a href="index.html">Pig</a></li>
+ <li><a href="index.html">Sheep</a></li>
+ </ul>
+ </li>
+ <li>Wild animals
+ <ul>
+ <li><a href="index.html">Aardvark</a></li>
+ <li><a href="index.html">Alligator</a></li>
+ <li><a href="index.html">Ant</a></li>
+ <li><a href="index.html">Bear</a></li>
+ <li><a href="index.html">Beaver</a></li>
+ <li><a href="index.html">Cougar</a></li>
+ <li><a href="index.html">Dingo</a></li>
+ <li><a href="index.html">Eagle</a></li>
+ <li><a href="index.html">Elephant</a></li>
+ <li><a href="index.html">Ferret</a></li>
+ <li><a href="index.html">Frog</a></li>
+ <li><a href="index.html">Giraffe</a></li>
+ <li><a href="index.html">Lion</a></li>
+ <li><a href="index.html">Monkey</a></li>
+ <li><a href="index.html">Panda bear</a></li>
+ <li><a href="index.html">Polar bear</a></li>
+ <li><a href="index.html">Tiger</a></li>
+ <li><a href="index.html">Zebra</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>
+
+ <h3>Colors</h3>
+ <p>Fresh colors from the magic rainbow.</p>
+
+ <ul>
+ <li><a href="index.html">Blue</a></li>
+ <li><a href="index.html">Green</a></li>
+ <li><a href="index.html">Orange</a></li>
+ <li><a href="index.html">Purple</a></li>
+ <li><a href="index.html">Red</a></li>
+ <li><a href="index.html">Yellow</a></li>
+ <li><a href="index.html">Violet</a></li>
+ </ul>
+ </li>
+ <li>
+ <h3>Vehicles</h3>
+ <p>Everything from cars to planes.</p>
+
+ <ul>
+ <li>Cars
+ <ul>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Volkswagon</a></li>
+ <li><a href="index.html">Volvo</a></li>
+ </ul>
+ </li>
+ <li>Planes
+ <ul>
+ <li><a href="index.html">Boeing</a></li>
+ <li><a href="index.html">Cessna</a></li>
+ <li><a href="index.html">Derringer</a></li>
+ <li><a href="index.html">Embraer</a></li>
+ <li><a href="index.html">Gulfstream</a></li>
+ <li><a href="index.html">Piper Aircraft</a></li>
+ <li><a href="index.html">Raytheon</a></li>
+ </ul>
+ </li>
+ <li>Construction
+ <ul>
+ <li><a href="index.html">Caterpillar</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">John Deere</a></li>
+
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li data-theme="a"><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Ordered Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Numbered list</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ol data-role="listview">
+ <li><a href="index.html">The Godfather</a></li>
+ <li><a href="index.html">Inception</a></li>
+ <li><a href="index.html">The Good, the Bad and the Ugly </a></li>
+ <li><a href="index.html">Pulp Fiction</a></li>
+ <li><a href="index.html">Schindler's List</a></li>
+ <li><a href="index.html">12 Angry Men</a></li>
+ <li><a href="index.html">One Flew Over the Cuckoo's Nest</a></li>
+ <li><a href="index.html">Star Wars: Episode V - The Empire Strikes Back</a></li>
+ <li><a href="index.html">The Dark Knight</a></li>
+ <li><a href="index.html">The Lord of the Rings: The Return of the King</a></li>
+ <li><a href="index.html">Seven Samurai</a></li>
+ <li><a href="index.html">Star Wars: Episode IV - A New Hope</a></li>
+ <li><a href="index.html">Casablanca</a></li>
+ <li><a href="index.html">Goodfellas </a></li>
+ <li><a href="index.html">Toy Story 3</a></li>
+ <li><a href="index.html">Fight Club</a></li>
+ <li><a href="index.html">City of God</a></li>
+ <li><a href="index.html">The Lord of the Rings: The Fellowship of the Ring</a></li>
+ <li><a href="index.html">The Big Lebowski</a></li>
+ <li><a href="index.html">Psycho</a></li>
+ </ol>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li data-theme="a"><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists Overview</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Lists</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>List views</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="docs-lists.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="lists-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="lists-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="lists-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The listview plugin has the following options:</p>
+
+ <dl>
+ <dt><code>countTheme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "c"</p>
+ <p>Sets the color scheme (swatch) for list item <a href="lists-count.html">count bubbles</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.countTheme = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-count-theme="a"</code>.</p>
+ </dd>
+
+ <dt><code>dividerTheme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "b"</p>
+ <p>Sets the color scheme (swatch) for list <a href="lists-divider.html">dividers</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.dividerTheme = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-dividertheme="a"</code>.</p>
+ </dd>
+
+ <dt><code>filter</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Adds a <a href="lists-search.html">search filter bar</a> to listviews. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.filter = true;</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-filter="true"</code>.</p>
+ </dd>
+
+ <dt><code>filterCallback</code> <em>function</em></dt>
+ <dd>
+ <p>The function to determine which rows to hide when the <a href="lists-search.html">search filter</a> textbox changes. The function accepts two arguments -- the text of the list item (or <code>data-filtertext</code> value if present), and the search string. Return <code>true</code> to hide the item, <code>false</code> to leave it visible. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ) {
+ // only show items that *begin* with the search string
+ return text.toLowerCase().substring( 0, searchValue.length ) !== searchValue;
+ };</strong>
+});
+</code></pre>
+ </dd>
+
+ <dt><code>filterPlaceholder</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "Filter items..."</p>
+ <p>The placeholder text used in <a href="lists-search.html">search filter bars</a>. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.filterPlaceholder = "Search...";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-filter-placeholder="Search..."</code>.</p>
+ </dd>
+
+ <dt><code>filterTheme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "c"</p>
+ <p>Sets the color scheme (swatch) for the <a href="lists-search.html">search filter bar</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.filterTheme = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-filter-theme="a"</code>.</p>
+ </dd>
+
+ <dt><code>headerTheme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "b"</p>
+ <p>Sets the color scheme (swatch) for headers of <a href="lists-nested.html">nested list</a> sub pages. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.headerTheme = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-header-theme="a"</code>.</p>
+ </dd>
+
+ <dt><code>initSelector</code> <em>CSS selector string</em></dt>
+ <dd>
+ <p class="default">default: ":jqmData(role='listview')"</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as list views. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.initSelector = ".mylistview";</strong>
+});
+</code></pre>
+ </dd>
+
+ <dt><code>inset</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Adds <a href="lists-inset.html">inset list</a> styles. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.inset = true;</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-inset="true"</code>.</p>
+ </dd>
+
+ <dt><code>splitIcon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "arrow-r"</p>
+ <p>Applies an icon from the <a href="../buttons/buttons-icons.html">icon set</a> to all <a href="lists-split.html">split list buttons</a>. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.splitIcon = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-split-icon="a"</code>.</p>
+ </dd>
+
+ <dt><code>splitTheme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "b"</p>
+ <p>Sets the color scheme (swatch) for <a href="lists-split.html">split list buttons</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.splitTheme = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-split-theme="a"</code>.</p>
+ </dd>
+
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.theme = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-theme="a"</code>.</p>
+ </dd>
+
+ </dl>
+
+ </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">List views</li>
+ <li data-theme="a"><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - List Performance Test</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>500 item list</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview" data-filter="true" data-theme="d">
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li data-theme="a"><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Readonly Inset Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Readonly Inset Lists</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Simple list</h2>
+
+ <ul data-role="listview" data-inset="true">
+ <li>Acura</li>
+ <li>Audi</li>
+ <li>BMW</li>
+ <li>Cadillac</li>
+ <li>Ferrari</li>
+ </ul>
+
+ <h2>Count bubbles</h2>
+ <ul data-role="listview" data-inset="true">
+ <li>Inbox <span class="ui-li-count">12</span></li>
+ <li>Outbox <span class="ui-li-count">0</span></li>
+ <li>Drafts <span class="ui-li-count">4</span></li>
+ <li>Sent <span class="ui-li-count">328</span></li>
+ <li>Trash <span class="ui-li-count">62</span></li>
+ </ul>
+
+ <h2>Numbered list</h2>
+ <ol data-role="listview" data-inset="true">
+ <li>The Godfather</li>
+ <li>Inception</li>
+ <li>The Good, the Bad and the Ugly </li>
+ <li>Pulp Fiction</li>
+ <li>Schindler's List</li>
+ </ol>
+
+ <h2>Divided, formatted content</h2>
+ <ul data-role="listview" data-inset="true">
+ <li>
+ <h3>Stephen Weber</h3>
+ <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+ <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+ <p class="ui-li-aside"><strong>6:24</strong>PM</p>
+ </li>
+ <li>
+ <h3>jQuery Team</h3>
+ <p><strong>Boston Conference Planning</strong></p>
+ <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
+ <p class="ui-li-aside"><strong>9:18</strong>AM</p>
+ </li>
+ </ul>
+
+
+
+
+ <h2>Icon list</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></li>
+ <li><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></li>
+ <li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></li>
+ <li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></li>
+ <li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></li>
+ <li><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></li>
+ </ul>
+
+ <h2>Thumbnail list</h2>
+
+ <ul data-role="listview" data-inset="true">
+ <li>
+ <img src="images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </li>
+ <li>
+ <img src="images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+ </li>
+ <li>
+ <img src="images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ </li>
+ </ul>
+
+ <h2>Divided, filterable list</h2>
+ <ul data-role="listview" data-filter="true" data-inset="true">
+ <li data-role="list-divider">A</li>
+ <li>Adam Kinkaid</li>
+ <li>Alex Wickerham</li>
+ <li>Avery Johnson</li>
+ <li data-role="list-divider">B</li>
+ <li>Bob Cabot</li>
+ <li data-role="list-divider">C</li>
+ <li>Caleb Booth</li>
+ <li>Christopher Adams</li>
+ </ul>
+
+
+
+
+
+
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li data-theme="a"><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Inset Readonly Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <style type="text/css">
+ h2 { margin:50px 0 30px 0; }
+ </style>
+
+ <div data-role="header" data-theme="f">
+ <h1>Readonly lists</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <p>Here is a variety of full-width lists that are read-only. If a list has the <code>data-role="listview"</code> attribute, but the contents aren't linked, it will display as read-only. These look like normal lists, except they don't have a right arrow and the text is set to a smaller size to save space.</p>
+
+ <h2>Simple list</h2>
+
+ <ul data-role="listview">
+ <li>Acura</li>
+ <li>Audi</li>
+ <li>BMW</li>
+ <li>Cadillac</li>
+ <li>Ferrari</li>
+ </ul>
+
+ <h2>Count bubbles</h2>
+ <ul data-role="listview">
+ <li>Inbox <span class="ui-li-count">12</span></li>
+ <li>Outbox <span class="ui-li-count">0</span></li>
+ <li>Drafts <span class="ui-li-count">4</span></li>
+ <li>Sent <span class="ui-li-count">328</span></li>
+ <li>Trash <span class="ui-li-count">62</span></li>
+ </ul>
+
+ <h2>Numbered list</h2>
+ <ol data-role="listview">
+ <li>The Godfather</li>
+ <li>Inception</li>
+ <li>The Good, the Bad and the Ugly </li>
+ <li>Pulp Fiction</li>
+ <li>Schindler's List</li>
+ </ol>
+
+ <h2>Divided, formatted content</h2>
+ <ul data-role="listview">
+ <li>
+ <h3>Stephen Weber</h3>
+ <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+ <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+ <p class="ui-li-aside"><strong>6:24</strong>PM</p>
+ </li>
+ <li>
+ <h3>jQuery Team</h3>
+ <p><strong>Boston Conference Planning</strong></p>
+ <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
+ <p class="ui-li-aside"><strong>9:18</strong>AM</p>
+ </li>
+ </ul>
+
+
+
+
+ <h2>Icon list</h2>
+ <ul data-role="listview">
+ <li><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></li>
+ <li><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></li>
+ <li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></li>
+ <li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></li>
+ <li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></li>
+ <li><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></li>
+ </ul>
+
+ <h2>Thumbnail list</h2>
+
+ <ul data-role="listview">
+ <li>
+ <img src="images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </li>
+ <li>
+ <img src="images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+ </li>
+ <li>
+ <img src="images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ </li>
+ </ul>
+
+ <h2>Divided, filterable list</h2>
+ <ul data-role="listview" data-filter="true">
+ <li data-role="list-divider">A</li>
+ <li>Adam Kinkaid</li>
+ <li>Alex Wickerham</li>
+ <li>Avery Johnson</li>
+ <li data-role="list-divider">B</li>
+ <li>Bob Cabot</li>
+ <li data-role="list-divider">C</li>
+ <li>Caleb Booth</li>
+ <li>Christopher Adams</li>
+ </ul>
+
+
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li data-theme="a"><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Filtered Lists Using Hidden Data</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Search hidden data</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <p>By default, the listview filter simply searches against the content in each list item. If you want the filter to search against different content, add the <code>data-filtertext</code> attribute to the item and populate it with one or many keywords and phrases that should be used to match against. Note that if this attribute is added, the contents of the list item are ignored.</p>
+ <p>This attribute is useful for dealing with allowing for ticker symbols and full company names to be searched, or for covering common spellings and abbreviations for countries.</p>
+
+<pre><code>
+<li <strong>data-filtertext="NASDAQ:AAPL Apple Inc.</strong>"><a href="#">Apple</a></li>
+<li <strong>data-filtertext="USA U.S.A. United States of America"</strong>><a href="#">United States</a></li>
+</code></pre>
+
+ <ul data-role="listview" data-filter="true" data-filter-placeholder="Search ticker or firm name..." data-inset="true">
+ <li data-filtertext="NASDAQ:ADBE Adobe Systems Incorporated"><a href="#">Adobe</a></li>
+ <li data-filtertext="NASDAQ:AMZNL Amazon.com, Inc."><a href="#">Amazon</a></li>
+ <li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li>
+ <li data-filtertext="NASDAQ:GOOG Google Inc."><a href="#">Google</a></li>
+ <li data-filtertext="NYSE:IBM Intl. International Business Machines Corp."><a href="index.html">IBM</a></li>
+ <li data-filtertext="NASDAQ:MSFT Microsoft Corporation"><a href="#">Microsoft</a></li>
+ <li data-filtertext="NASDAQ:YHOO Yahoo! Inc."><a href="#">Yahoo</a></li>
+ <li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li data-theme="a"><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Filtered Inset Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Inset Search filter bar</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview" data-filter="true" data-inset="true">
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Volkswagon</a></li>
+ <li><a href="index.html">Volvo</a></li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li data-theme="a"><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <title>jQuery Mobile Docs - Filtered Lists with Dividers</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>List dividers</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview" data-filter="true" data-filter-placeholder="Search people..." data-filter-theme="d"data-theme="d" data-divider-theme="d">
+ <li data-role="list-divider">A</li>
+ <li><a href="index.html">Adam Kinkaid</a></li>
+ <li><a href="index.html">Alex Wickerham</a></li>
+ <li><a href="index.html">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="index.html">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="index.html">Caleb Booth</a></li>
+ <li><a href="index.html">Christopher Adams</a></li>
+ <li><a href="index.html">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="index.html">David Walsh</a></li>
+ <li><a href="index.html">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="index.html">Elizabeth Bacon</a></li>
+ <li><a href="index.html">Emery Parker</a></li>
+ <li><a href="index.html">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="index.html">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="index.html">Graham Smith</a></li>
+ <li><a href="index.html">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="index.html">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="index.html">Mike Farnsworth</a></li>
+ <li><a href="index.html">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="index.html">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="index.html">Paul Baker</a></li>
+ <li><a href="index.html">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="index.html">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="index.html">Sawyer Wakefield</a></li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li data-theme="a"><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Filtered Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Search filter bar</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview" data-filter="true">
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Volkswagon</a></li>
+ <li><a href="index.html">Volvo</a></li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li data-theme="a"><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Sample Dialog</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+
+ <div data-role="page">
+
+ <div data-role="header" data-theme="e">
+ <h1>Purchase?</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="d">
+ <h4>This album costs $10.99 and includes 9 tracks.</h4>
+ <p>Your download will begin immediately on your mobile device and all tracks will by added your your library next time you sync.</p>
+ <a href="index.html" data-role="button" data-rel="back" data-theme="b">Purchase album</a>
+ <a href="index.html" data-role="button" data-rel="back">No thanks</a>
+
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Split Button Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior" id="album-list">
+
+ <div data-role="header" data-theme="f">
+ <h1>Split button list</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
+ <li><a href="index.html">
+ <img src="images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+
+ <img src="images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-ok.jpg" />
+ <h3>Of The Blue Colour Of The Sky</h3>
+ <p>Ok Go</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-ws.jpg" />
+ <h3>Elephant</h3>
+ <p>The White Stripes</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-rh.jpg" />
+ <h3>Kid A</h3>
+ <p>Radiohead</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-xx.jpg" />
+ <h3>XX</h3>
+ <p>XX</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-mg.jpg" />
+ <h3>Congratulations</h3>
+ <p>MGMT</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-ag.jpg" />
+ <h3>Ashes Grammar</h3>
+ <p>A Sunny Day in Glasgow</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+
+ <li><a href="index.html">
+ <img src="images/album-k.jpg" />
+ <h3>Hot Fuss</h3>
+ <p>Killers</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-af.jpg" />
+ <h3>The Suburbs</h3>
+ <p>Arcade Fire</p>
+ </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li data-theme="a"><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Theming Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Theming lists</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content" class="ui-body">
+ <div class="content-primary">
+
+ <p>All the standard button swatches can be applied to lists. The framework assigns a default list theme swatch of "c" (silver in the default theme) and swatch "b" (blue in default theme) for dividers. Below is a default themed list.</p>
+
+<code>
+<ul data-role="listview" data-inset="true">
+</code>
+ <ul data-role="listview" data-inset="true" data-icon="star">
+ <li data-role="list-divider">Divider</li>
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ </ul>
+
+ <h2>Theming list items</h2>
+ <p>The list item color scheme can be changed to any button color theme swatch by adding the <code> data-theme</code> attribute to the list, and setting the letter theme swatch. Here is the same list above with the "a" swatch applied. </p>
+
+<code>
+<ul data-role="listview" data-inset="true" data-theme="d">
+</code>
+
+ <ul data-role="listview" data-inset="true" data-theme="d">
+ <li data-role="list-divider">Divider</li>
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ </ul>
+
+ <p> data-theme attributes also work at the LI-level, for styling a single item.</p>
+
+ <ul data-role="listview" data-inset="true" data-theme="d">
+ <li data-role="list-divider">Divider</li>
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ <li data-theme="a"><a href="index.html">Trash <span class="ui-li-count">34</span></a></li>
+ </ul>
+
+ <h2>Theming dividers</h2>
+
+ <p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-divider-theme</code> to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.</p>
+
+<code>
+<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
+</code>
+
+ <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
+ <li data-role="list-divider">Divider</li>
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ </ul>
+
+ <h2>Theming count bubbles</h2>
+
+ <p>The theme for <strong>count bubbles</strong> can be set by adding the <code>data-count-theme</code> to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.</p>
+
+<code>
+<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
+</code>
+
+ <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
+ <li data-role="list-divider">Divider</li>
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ </ul>
+
+ <h2>Theming icons</h2>
+
+ <p>The default icon for each list item is <code>arrow-r</code>. To override this, set the <code> data-icon</code> attribute on the desired list item to the <a href="../buttons/buttons-icons.html">name of a standard icon</a>. To prevent icons from appearing altogether, set the <code> data-icon</code> attribute to "false".</p>
+<pre>
+<code>
+<li data-icon="info"><a href="#">Notices</a></li>
+<li data-icon="alert"><a href="#">Alerts</a></li>
+<li data-icon="false"><a href="#">No icon</a></li>
+</code>
+</pre>
+ <ul data-role="listview" data-inset="true">
+ <li data-role="list-divider">Divider</li>
+ <li data-icon="info"><a href="#">Notices</a></li>
+ <li data-icon="alert"><a href="#">Alerts</a></li>
+ <li data-icon="false"><a href="#">No icon</a></li>
+ </ul>
+
+
+ <h2>Theming split buttons</h2>
+
+ <p>For split lists which a second button, the framework default to "b" for the theme swatch (blue in the default theme) Here is a default split list:</p>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html">
+ <img src="images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p></a>
+ <a href="index.html">Purchase album</a>
+ </li>
+ <li><a href="index.html">
+ <img src="images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p></a>
+ <a href="index.html">Purchase album</a>
+ </li>
+ </ul>
+
+<code>
+<ul data-role="listview" data-inset="true" data-split-theme="a">
+</code>
+ <p>To specify the color swatch for the icon button on the right, add the <code>data-split-theme</code> to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a <code> data-theme</code> attribute to specific links (see second list item).</p>
+ <ul data-role="listview" data-inset="true" data-split-theme="a">
+ <li><a href="index.html">
+ <img src="images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </a>
+ <a href="index.html">Purchase album</a>
+ </li>
+ <li><a href="index.html">
+ <img src="images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+ </a>
+ <a href="index.html" data-theme="e">Purchase album</a>
+ </li>
+ </ul>
+
+ <p>The icon for the split theme can set at the list level by adding the <code>data-split-icon</code> to the list and specifying a <a href="../buttons/buttons-icons.html">standard icon</a>. This attribute can also be added to individual split inside list items by adding a <code> data-icon</code> attribute to specific links (see second list item).</p>
+
+<code>
+<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete">
+</code>
+
+ <ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete" >
+ <li><a href="index.html">
+ <img src="images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </a>
+ <a href="index.html">Purchase album</a>
+ </li>
+ <li><a href="index.html">
+ <img src="images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+ </a>
+ <a href="index.html">Purchase album</a>
+ </li>
+ </ul>
+
+
+
+ <h2>Examples of all basic list swatches</h2>
+
+ <p><strong>A</strong> swatch</p>
+ <ul data-role="listview" data-inset="true" data-theme="a">
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ <p><strong>B</strong> swatch</p>
+ <ul data-role="listview" data-inset="true" data-theme="b">
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ <p><strong>C</strong> swatch</p>
+ <ul data-role="listview" data-inset="true" data-theme="c">
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ <p><strong>D</strong> swatch</p>
+ <ul data-role="listview" data-inset="true" data-theme="d">
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ <p><strong>E</strong> swatch</p>
+ <ul data-role="listview" data-inset="true" data-theme="e">
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li data-theme="a"><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists with Thumbnails</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Thumbnails</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="index.html">
+ <img src="images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-ok.jpg" />
+ <h3>Of The Blue Colour Of The Sky</h3>
+ <p>Ok Go</p>
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-ws.jpg" />
+ <h3>Elephant</h3>
+ <p>The White Stripes</p>
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-rh.jpg" />
+ <h3>Kid A</h3>
+ <p>Radiohead</p>
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-xx.jpg" />
+ <h3>XX</h3>
+ <p>XX</p>
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-mg.jpg" />
+ <h3>Congratulations</h3>
+ <p>MGMT</p>
+ </a></li>
+
+ <li><a href="index.html">
+ <img src="images/album-ag.jpg" />
+ <h3>Ashes Grammar</h3>
+ <p>A Sunny Day in Glasgow</p>
+ </a></li>
+
+ <li><a href="index.html">
+ <img src="images/album-k.jpg" />
+ <h3>Hot Fuss</h3>
+ <p>Killers</p>
+ </a></li>
+ <li><a href="index.html">
+ <img src="images/album-af.jpg" />
+ <h3>The Suburbs</h3>
+ <p>Arcade Fire</p>
+ </a></li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li data-theme="a"><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Basic Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Basic list</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ <li><a href="index.html">Cadillac</a></li>
+ <li><a href="index.html">Chrysler</a></li>
+ <li><a href="index.html">Dodge</a></li>
+ <li><a href="index.html">Ferrari</a></li>
+ <li><a href="index.html">Ford</a></li>
+ <li><a href="index.html">GMC</a></li>
+ <li><a href="index.html">Honda</a></li>
+ <li><a href="index.html">Hyundai</a></li>
+ <li><a href="index.html">Infiniti</a></li>
+ <li><a href="index.html">Jeep</a></li>
+ <li><a href="index.html">Kia</a></li>
+ <li><a href="index.html">Lexus</a></li>
+ <li><a href="index.html">Mini</a></li>
+ <li><a href="index.html">Nissan</a></li>
+ <li><a href="index.html">Porsche</a></li>
+ <li><a href="index.html">Subaru</a></li>
+ <li><a href="index.html">Toyota</a></li>
+ <li><a href="index.html">Volkswagon</a></li>
+ <li><a href="index.html">Volvo</a></li>
+ </ul>
+ </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">List views</li>
+ <li><a href="docs-lists.html">List basics & API</a></li>
+ <li data-theme="a"><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery UI Mobile Framework - Documentation</title>
+ <link rel="stylesheet" href="../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="_assets/css/jqm-docs.css"/>
+
+ <script src="../js/jquery.js"></script>
+ <script src="../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../js/"></script>
+
+</head>
+<body>
+ <div data-role="page" data-theme="a" class="nav-search">
+
+ <div data-role="content">
+
+ <style>
+
+ .nav-search .ui-content {
+ margin-top:16px;
+ }
+ .nav-search .ui-corner-top {
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ border-radius: 0;
+ }
+ .nav-search .ui-bar-a {
+ background-image:none;
+ background-color:#555;
+ }
+ .nav-search .ui-btn-up-a {
+ background-image:none;
+ background-color:#333333;
+ }
+ .nav-search .ui-btn-inner {
+ border-top: 1px solid #888;
+ border-color: rgba(255, 255, 255, .1);
+ }
+ </style>
+
+ <script>
+ $('body').delegate('.nav-search', 'pageshow', function( e ) {
+ $('.ui-input-text').attr("autofocus", true)
+ });
+ </script>
+
+ <ul data-role="listview" data-theme="a" data-divider-theme="a" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search documentation...">
+ <li data-filtertext="wai-aria voiceover accessibility screen reader">
+ <a href="about/accessibility.html">Accessibility</a>
+ </li>
+ <li data-filtertext="accordions collapsible set collapsible-set collapsed">
+ <a href="content/content-collapsible-set.html">Accordions</a>
+ </li>
+ <li data-filtertext="ajax navigation model hashchange changePage pushstate replacestate history popstate rel=external ajaxEnabled changepage basetag data-url sub-hash subpageidentifier target Application Cache ajaxPrefilter responseText isLocal subPageUrlKey silentscroll page parameters router backbone">
+ <a href="pages/page-navmodel.html">Ajax navigation model</a>
+ </li>
+ <li data-filtertext="anatomy of page viewport meta tag disable enable zoom width=device-width, initial-scale=1 header content footer single multipage template boilerplate">
+ <a href="pages/page-anatomy.html">Anatomy of a page</a>
+ </li>
+ <li data-filtertext="events api animationComplete transition css">
+ <a href="api/events.html">Animation events</a>
+ </li>
+ <li data-filtertext="button link submit cancel image reset mini buttonmarkup enable disable">
+ <a href="buttons/buttons-types.html">Buttons</a>
+ </li>
+ <li data-filtertext="button icon sprite png arrow delete plus minus check gear refresh forward back grid star alert info home search positioning iconpos top bottom left right notext custom disc white black">
+ <a href="buttons/buttons-icons.html">Button icons</a>
+ </li>
+ <li data-filtertext="data-prefetch loadpage domCache data-dom-cache size clear cleanup pagehide lazyload spinner loader">
+ <a href="pages/page-cache.html">Caching pages</a>
+ </li>
+ <li data-filtertext="input forms multi select checkbox checks grouped horizontal toggle legend">
+ <a href="forms/checkboxes/">Checkbox</a>
+ </li>
+ <li data-filtertext="collapsible expandable content block spindown disclosure triangle tree nested">
+ <a href="content/content-collapsible.html">Collapsible content</a>
+ </li>
+ <li data-filtertext="data attribute guide api list help reference">
+ <a href="api/data-attributes.html">Data attribute reference</a>
+ </li>
+ <li data-filtertext="page dialog modal overlay theme data-rel=dialog transition rel=back closeBtnText button history">
+ <a href="pages/page-dialogs.html">Dialogs</a>
+ </li>
+ <li data-filtertext="forms constrain css disable disabling enable ui-disabled class style">
+ <a href="forms/docs-forms.html">Disabling form elements</a>
+ </li>
+ <li data-filtertext="dynamically injecting pages changePage pagebeforechange preventDefault json query params scripting generate markup manual backbone api hash templating mvc">
+ <a href="pages/page-dynamic.html">Dynamically injecting pages</a>
+ </li>
+ <li data-filtertext="events api document.ready pageinit touch tap taphold swipe swipeleft swiperight virtual mouse vmouseover vmousedown vmousemove vmouseup vclick vmousecancel orientationchange scrollstart scrollstop pageload pagebeforeload pageloadfailed pagebeforechange pagechange pagechangefailed pagebeforeshow change load transition pagebeforehide pageshow pagehide initialization pagebeforecreate pagecreate pageinit pageremove updatelayout animationcomplete transitions">
+ <a href="api/events.html">Events API</a>
+ </li>
+ <li data-filtertext="input forms flip toggle switch on off select slider">
+ <a href="forms/switch/">Flip switch</a>
+ </li>
+ <li data-filtertext="introduction help features overview">
+ <a href="about/features.html">Features overview</a>
+ </li>
+ <li data-filtertext="toolbars fixed headers footers scroll tap to hide show toggle">
+ <a href="toolbars/bars-fixed.html">Fixed toolbars</a>
+ </li>
+ <li data-filtertext="forms markup conventions introduction action label hide accessibly mini disabling fieldcontainer fieldset legend auto-initialization">
+ <a href="forms/docs-forms.html">Forms intro</a>
+ </li>
+ <li data-filtertext="all forms elements gallery preview sample preview">
+ <a href="forms/forms-all.html">Form element gallery</a>
+ </li>
+ <li data-filtertext="toolbars fixed headers footers scroll tap to hide show toggle">
+ <a href="toolbars/bars-fullscreen.html">Fullscreen toolbars</a>
+ </li>
+ <li data-filtertext="toolbars fixed footers scroll tap to hide show toggle">
+ <a href="toolbars/docs-footers.html">Footer toolbars</a>
+ </li>
+ <li data-filtertext="global optionss settings document.ready mobileinit ns namespace autoInitializePage subPageUrlKey activePageClass activeBtnClass ajaxEnabled linkBindingEnabled hashListeningEnabled pushStateEnabled defaultPageTransition touchOverflowEnabled defaultDialogTransition minScrollBack loadingMessage loadingMessageTheme pageLoadErrorMessage pageLoadErrorMessageTheme loadingMessageTextVisible gradeA ignoreContentEnabled">
+ <a href="api/globalconfig.html">Global options (mobileinit)</a>
+ </li>
+ <li data-filtertext="grouped buttons toggle side">
+ <a href="buttons/buttons-grouped.html">Grouped buttons</a>
+ </li>
+ <li data-filtertext="toolbars fixed headers scroll tap to hide show toggle heading">
+ <a href="toolbars/docs-headers.html">Header toolbars</a>
+ </li>
+ <li data-filtertext="accessibility accessibly forms labels hide hiding">
+ <a href="forms/docs-forms.html">Hiding elements accessibly</a>
+ </li>
+ <li data-filtertext="html default styles formatting semantics markup">
+ <a href="content/content-html.html">HTML formatting</a>
+ </li>
+ <li data-filtertext="button inline smaller less wide narrow">
+ <a href="buttons/buttons-inline.html">Inline buttons</a>
+ </li>
+ <li data-filtertext="listview link inset styled padding rounded">
+ <a href="lists/lists-inset.html">Inset styled listviews</a>
+ </li>
+ <li data-filtertext="introduction jquery mobile help getting started">
+ <a href="about/intro.html">Intro to jQuery Mobile</a>
+ </li>
+ <li data-filtertext="events api updatelayout hide show height scroll remove inject">
+ <a href="api/events.html">Layout events</a>
+ </li>
+ <li data-filtertext="layout grid columns side-by-side flow positioning block float left right center">
+ <a href="content/content-grids.html">Layout grids (columns)</a>
+ </li>
+ <li data-filtertext="link tel mailto target external rel ajax">
+ <a href="pages/page-links.html">Links</a>
+ </li>
+ <li data-filtertext="listview link">
+ <a href="lists/lists-ul.html">Linked list</a>
+ </li>
+ <li data-filtertext="listview link count bubble">
+ <a href="lists/lists-count.html">Listview count bubble</a>
+ </li>
+ <li data-filtertext="listview link divider grouping read only header">
+ <a href="lists/lists-divider.html">Listview dividers</a>
+ </li>
+ <li data-filtertext="listview link icon 16 pixel">
+ <a href="lists/lists-icons.html">Listview icons</a>
+ </li>
+ <li data-filtertext="listview link markup overview conventions types">
+ <a href="lists/index.html">Listview overview</a>
+ </li>
+ <li data-filtertext="methods api mobile changePage loadPage jqmData jqmRemoveData showPageLoadingMsg hidePageLoadingMsg fixedToolbars.show fixedToolbars.hide path.parseUrl path.makePathAbsolute path.makeUrlAbsolute path.isSameDomain path.isRelativeUrl path.isAbsoluteUrl base silentScroll activePage jqmEnhanceable">
+ <a href="api/methods.html">Methods API</a>
+ </li>
+ <li data-filtertext="listview link thumbnail images large square">
+ <a href="lists/lists-thumbnails.html">Listview thumbnails</a>
+ </li>
+ <li data-filtertext="forms smaller compact mini toolbars">
+ <a href="forms/forms-all-mini.html">Mini form elements</a>
+ </li>
+ <li data-filtertext="forms native not styled role none">
+ <a href="forms/forms-all-native.html">Native form elements</a>
+ </li>
+ <li data-filtertext="link navbar navigation tabs">
+ <a href="toolbars/docs-navbar.html">Navbars</a>
+ </li>
+ <li data-filtertext="listview link nested ul ol drilldown">
+ <a href="lists/lists-nested.html">Nested lists</a>
+ </li>
+ <li data-filtertext="numbered list link ol ordered numbered">
+ <a href="lists/lists-ol.html">Numbered lists</a>
+ </li>
+ <li data-filtertext="events api orientationchange orientationChangeEnabled portrait landscape window.orientation">
+ <a href="api/events.html">Orientation events</a>
+ </li>
+ <li data-filtertext="events api pagebeforechange pagechange pagechangefailed ajax nav">
+ <a href="api/events.html">Page change events</a>
+ </li>
+ <li data-filtertext="events api pagebeforecreate pagecreate pageinit $(document).ready() ajax nav">
+ <a href="api/events.html">Page initialization events</a>
+ </li>
+ <li data-filtertext="events api pagebeforeload pageload pageloadfailed ajax nav">
+ <a href="api/events.html">Page load events</a>
+ </li>
+ <li data-filtertext="pages overview boilerplate getting started setup">
+ <a href="pages/index.html">Pages overview</a>
+ </li>
+ <li data-filtertext="events api pageremove ajax nav">
+ <a href="api/events.html">Page remove events</a>
+ </li>
+ <li data-filtertext="pages multipage template boilerplate anchor link">
+ <a href="pages/multipage-template.html">Page template, multipage</a>
+ </li>
+ <li data-filtertext="pages single ajax nav template boilerplate anchor link">
+ <a href="pages/page-template.html">Page template, single page</a>
+ </li>
+ <li data-filtertext="page title head">
+ <a href="pages/page-titles.html">Page titles</a>
+ </li>
+ <li data-filtertext="events api pagebeforeshow pagebeforehide pageshow pagehide ajax nav">
+ <a href="api/events.html">Page transition events</a>
+ </li>
+ <li data-filtertext="toolbars fixed persistent tab bar footer header">
+ <a href="toolbars/footer-persist-a.html">Persistent toolbars</a>
+ </li>
+ <li data-filtertext="phonegap compile appstore export device api XSS mobileinit pushstate loadUrlTimeoutValue allowCrossDomainPages local file:// URL support.cors UIWebView">
+ <a href="pages/phonegap.html">PhoneGap</a>
+ </li>
+ <li data-filtertext="navigation model ajax prefetch preload lazyload loader loadPage">
+ <a href="pages/page-cache.html">Prefetching pages</a>
+ </li>
+ <li data-filtertext="pushstate ajax navigation model hashchange popstate">
+ <a href="pages/page-navmodel.html">PushState</a>
+ </li>
+ <li data-filtertext="introduction help quick start guide ">
+ <a href="about/getting-started.html">Quick start guide</a>
+ </li>
+ <li data-filtertext="input forms single select radio button grouped horizontal toggle legend">
+ <a href="forms/radiobuttons/">Radio buttons</a>
+ </li>
+ <li data-filtertext="read only display not linked listviews">
+ <a href="lists/lists-readonly.html">Read only listviews</a>
+ </li>
+ <li data-filtertext="refresh forms elements property change update programatically checked selectedindex value update widget input text slider switch select button checkbox radiobutton">
+ <a href="forms/docs-forms.html">Refreshing form elements</a>
+ </li>
+ <li data-filtertext="scripting pages loading scripts executing scripts document.ready() api developer firing fire pagecreate pageinit changing pages loading enhancing create refresh scolling silentscroll binding to mouse touch events passing url parameters backbone router">
+ <a href="pages/page-scripting.html">Scripting pages</a>
+ </li>
+ <li data-filtertext="events api scrollstart scrollstop flick">
+ <a href="api/events.html">Scroll events</a>
+ </li>
+ <li data-filtertext="listview search filter autocomplete refine">
+ <a href="lists/lists-search.html">Search filter</a>
+ </li>
+ <li data-filtertext="listview search filter hidden extra meta data">
+ <a href="lists/lists-search-filtertext.html">Search filter hidden data</a>
+ </li>
+ <li data-filtertext="input forms single select option selected index placeholder fullscreen optgroup grouped horizontal custom menu">
+ <a href="forms/selects/">Select menu</a>
+ </li>
+ <li data-filtertext="input forms range slider highlight step min max value">
+ <a href="forms/slider/">Slider</a>
+ </li>
+ <li data-filtertext="link listview multiple button splitbutton secondary action">
+ <a href="lists/lists-split.html">Split button list</a>
+ </li>
+ <li data-filtertext="forms submit method action post get ajax navigation">
+ <a href="forms/forms-sample.html">Submitting forms</a>
+ </li>
+ <li data-filtertext="supported platforms device matrix compatibility ios android blackberry playbook wp7 bada webod palm symbian meego firefox chrome internet explorer ie chrome safari graded support">
+ <a href="about/platforms.html">Supported Platforms</a>
+ </li>
+ <li data-filtertext="input forms text textarea password number email url tel time date month week datetime color">
+ <a href="forms/textinputs/">Text inputs & Textareas</a>
+ </li>
+ <li data-filtertext="theme themeroller swatch css styles bars blocks buttons forms">
+ <a href="api/themes.html">Theming system overview</a>
+ </li>
+ <li data-filtertext="theme themeroller import export download css styles">
+ <a href="api/themes.html">ThemeRoller</a>
+ </li>
+ <li data-filtertext="toolbars header footer bar fixed">
+ <a href="toolbars/index.html">Toolbars</a>
+ </li>
+ <li data-filtertext="events api touch mouse vmouseover vmousedown vmousemove vmouseup vclick vmousecancel touchend target">
+ <a href="api/events.html">Touch events</a>
+ </li>
+ <li data-filtertext="">
+ <a href="pages/touchoverflow.html">TouchOverflow (deprecated)</a>
+ </li>
+ <li data-filtertext="animations page css keyframe transitions flip fade pop turn flow slide slideup slidedown none data-transition data-direction reverse defaultDialogTransition webkit moz o fallback 3d fallbackTransition max width custom transitionHandlers scroll position">
+ <a href="pages/page-transitions.html">Transitions</a>
+ </li>
+ <li data-filtertext="events api touch tap taphold swipe swipeleft swipe left swiperight swipe right">
+ <a href="api/events.html">Virtual mouse event API</a>
+ </li>
+ </ul>
+ </div><!-- /content -->
+
+</div><!-- /page -->
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Dialog Example</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-theme="e">
+ <h1>Dialog</h1>
+
+ </div>
+
+ <div data-role="content" data-theme="e">
+ <h1>I'm colorful</h1>
+ <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
+ <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a">Good for you</a>
+ <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Don't care, really</a>
+ </div>
+ </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Dialog Example</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="dialog-actionsheet">
+
+
+ <div data-role="content" data-theme="a">
+ <h3>Share Photos</h3>
+ <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Email</a>
+ <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Upload to flickr</a>
+ <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Share on Facebook</a>
+ <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Tweet photo</a>
+
+ <a href="index.html" data-role="button" data-rel="back" data-theme="a">Cancel</a>
+ </div>
+</div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Dialog Example</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" data-overlay-theme="e">
+ <div data-role="header" data-theme="b">
+ <h1>Dialog</h1>
+ </div>
+
+ <div data-role="content" data-theme="d">
+ <h1>Custom overlay</h1>
+ <p>This dialog adds <code>data-overlay-theme="e"</code> to the page container to set the overlay swatch color.</p>
+ <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a" data-inline="true">I like it</a>
+ </div>
+
+ </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Dialog Example</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="dialog-actionsheet">
+
+
+ <div data-role="content" data-theme="b">
+ <p>Flickr upload:</p>
+ <h3>Photos posted successfully</h3>
+
+ <a href="page-dialogs.html" data-role="button" data-theme="b">View photo page</a>
+ <a href="page-dialogs.html" data-role="button" data-theme="c">Done</a>
+ </div>
+</div>
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Dialog Example with Select</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Dialog select test</h1>
+ </div>
+ <div data-role="content" >
+ <a href="#bar" data-role="button" data-rel="dialog">Open dialog</a>
+ </div>
+
+</div>
+
+
+
+
+
+
+
+<div data-role="page" id="bar">
+
+ <div data-role="header" data-theme="d">
+ <h1>Sample Dialogs</h1>
+ </div>
+
+ <div data-role="content" data-theme="c">
+
+ <form action>
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1" data-native-menu="false">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3" data-native-menu="false">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+ <a href="#foo" data-role="button" data-rel="back" data-theme="c">Real Submit Would go here</a>
+ </form>
+ <a href="#foo" data-role="button" data-rel="back" data-theme="c">Cancel</a>
+ </div>
+ </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Dialog Example</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="dialog">
+
+ <div data-role="header" data-theme="d">
+ <h1>Dialog</h1>
+
+ </div>
+
+ <div data-role="content" data-theme="c">
+ <h1>Delete page?</h1>
+ <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
+ <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>
+ <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>
+ </div>
+ </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Test URL Example</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" data-url="docs/pages/docs-links-urltest/">
+ <div data-role="header" data-theme="f">
+ <h1>URL Test Page</h1>
+ </div>
+ <div data-role="content">
+ <p>This is a regular page that updated the url with a different value than was requested.</p>
+ </div>
+ </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Animals</title>
+<link rel="stylesheet" href="../../../css/themes/default/">
+<script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+
+<body>
+<div data-role="page">
+ <div data-role="header"><h1>Animals</h1></div>
+ <div data-role="content">
+ <p>All your favorites from aardvarks to zebras.</p>
+ <ul data-role="listview" data-inset="true">
+ <li>Pets</li>
+ <li>Farm Animals</li>
+ <li>Wild Animals</li>
+ </ul>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<?php
+// This is a demo script that takes a single 'id' query param argument and
+// returns its associated data as HTML, or, if called via XmlHttpRequest,
+// returns its data as JSON.
+
+// In the real-world, this category data would be looked
+// up on the fly from some database. For this sample, we
+// are just using some static in-memory data.
+
+$category_data = array(
+ animals => array(
+ name => "Animals",
+ description => "All your favorites from aardvarks to zebras.",
+ items => array(
+ array(
+ name => "Pets",
+ ),
+ array(
+ name => "Farm Animals",
+ ),
+ array(
+ name => "Wild Animals",
+ )
+ )
+ ),
+ colors => array(
+ name => "Colors",
+ description => "Fresh colors from the magic rainbow.",
+ items => array(
+ array(
+ name => "Blue",
+ ),
+ array(
+ name => "Green",
+ ),
+ array(
+ name => "Orange",
+ ),
+ array(
+ name => "Purple",
+ ),
+ array(
+ name => "Red",
+ ),
+ array(
+ name => "Yellow",
+ ),
+ array(
+ name => "Violet",
+ )
+ )
+ ),
+ vehicles => array(
+ name => "Vehicles",
+ description => "Everything from cars to planes.",
+ items => array(
+ array(
+ name => "Cars",
+ ),
+ array(
+ name => "Planes",
+ ),
+ array(
+ name => "Construction",
+ )
+ )
+ )
+);
+
+// Get the name of the category to display from
+// the query params for the script.
+
+$category_name = '';
+if ( $_GET[ 'id' ] ) {
+ $category_name = $_GET[ 'id' ];
+}
+
+// Now get the category data, by name, from our in-memory
+// dictionary. This is the part where a script normally fetches
+// the data from a database.
+
+$category_obj = $category_data[ $category_name ];
+
+// Now figure out how the script is being called. If it's being
+// called via XmlHttpRequest, then send the data back as JSON.
+// If not, then send it back as a list in an HTML document.
+
+if( $_SERVER[ "HTTP_X_REQUESTED_WITH" ] && $_SERVER[ "HTTP_X_REQUESTED_WITH" ] ==="XMLHttpRequest" ) {
+ // Data should be written out as JSON.
+ header("Content-type: application/json");
+ if ( !$category_obj ) {
+ echo 'null';
+ } else {
+ echo '{"name":"' . $category_obj[ 'name' ]
+ . '","description":"' . $category_obj[ 'description' ]
+ . '","items":[';
+
+ $arr = $category_obj[ 'items' ];
+ $count = count($arr);
+ for ( $i = 0; $i < $count; $i++ ) {
+ if ( $i ) {
+ echo ",";
+ }
+ echo '{"name":"' . $arr[ $i ][ 'name' ] . '"}';
+ }
+ echo "]}";
+ }
+} else {
+ // Data should be written out as HTML.
+ header("Content-type: text/html");
+?>
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Vehicles</title>
+<link rel="stylesheet" href="../../../css/themes/default/">
+<script src="../../../js/jquery.js"></script>
+<script src="../../../js/"></script>
+</head>
+<body>
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="header"><h1><?php if ( $category_obj ) { echo $category_obj['name']; } else { echo "No Match"; } ?></h1></div>
+ <div data-role="content">
+<?php
+ if ( !$category_obj ) {
+?>
+ <p>No matches found.</p>
+<?php
+ } else {
+?>
+ <p><?php echo $catgory_object['description']; ?></p>
+ <ul data-role="listview" data-inset="true">
+<?php
+ $arr = $category_obj[ 'items' ];
+ $count = count($arr);
+ for ( $i = 0; $i < $count; $i++ ) {
+ echo "\t\t\t<li>" . $arr[ $i ][ 'name' ] . "</li>\n";
+ }
+?>
+ </ul>
+<?php
+ }
+?>
+ </div>
+</div>
+</body>
+</html>
+<?php }
\ No newline at end of file
--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Colors</title>
+<link rel="stylesheet" href="../../../css/themes/default/">
+<script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+
+<body>
+<div data-role="page">
+ <div data-role="header"><h1>Colors</h1></div>
+ <div data-role="content">
+ <p>Fresh colors from the magic rainbow.</p>
+ <ul data-role="listview" data-inset="true">
+ <li>Blue</li>
+ <li>Green</li>
+ <li>Orange</li>
+ <li>Purple</li>
+ <li>Red</li>
+ <li>Yellow</li>
+ <li>Violet</li>
+ </ul>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Dynamic Page Samples</title>
+<link rel="stylesheet" href="../../../css/themes/default/">
+<script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+
+<body>
+<div data-role="page">
+ <div data-role="header"><h1>Categories</h1></div>
+ <div data-role="content">
+ <h2>Select a Category Below:</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="sample-reuse-page.html" rel="external">Re-using a Page with In-Memory Data</a></li>
+ <li><a href="sample-reuse-page-external.html" rel="external">Re-using a Page With External Data</a></li>
+ </ul>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>changePage JSON Sample</title>
+<link rel="stylesheet" href="../../../css/themes/default/">
+<script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+<script type="text/javascript">
+
+// Load the JSON data for a specific category, based on
+// the URL passed in. Generate markup for the items in the
+// category, inject it into an embedded page, and then make
+// that page the current active page.
+function showCategory( url, options )
+{
+ $.getJSON( url, function( category ) {
+ if ( category ) {
+ // Get the page we are going to dump our content into.
+ var $page = $( "#category-items" ),
+
+ // Get the header for the page.
+ $header = $page.children( ":jqmData(role=header)" ),
+
+ // Get the content area element for the page.
+ $content = $page.children( ":jqmData(role=content)" ),
+
+ // The markup we are going to inject into the content
+ // area of the page.
+ markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
+
+ // The array of items for this category.
+ cItems = category.items,
+
+ // The number of items in the category.
+ numItems = cItems.length;
+
+ // Generate a list item for each item in the category
+ // and add it to our markup.
+ for ( var i = 0; i < numItems; i++ ) {
+ markup += "<li>" + cItems[i].name + "</li>";
+ }
+ markup += "</ul>";
+
+ // Find the h1 element in our header and inject the name of
+ // the category into it.
+ $header.find( "h1" ).html( category.name );
+
+ // Inject the category items markup into the content element.
+ $content.html( markup );
+
+ // Pages are lazily enhanced. We call page() on the page
+ // element to make sure it is always enhanced before we
+ // attempt to enhance the listview markup we just injected.
+ // Subsequent calls to page() are ignored since a page/widget
+ // can only be enhanced once.
+ $page.page();
+
+ // Enhance the listview we just injected.
+ $content.find( ":jqmData(role=listview)" ).listview();
+
+ // We don't want the data-url of the page we just modified
+ // to be the url that shows up in the browser's location field,
+ // so set the dataUrl option to the URL for the category
+ // we just loaded.
+ options.dataUrl = url;
+
+ // Now call changePage() and tell it to switch to
+ // the page we just modified.
+ $.mobile.changePage( $page, options );
+ }
+ });
+}
+
+
+// Listen for any attempts to call changePage().
+$(document).bind( "pagebeforechange", function( e, data ) {
+ // We only want to handle changePage() calls where the caller is
+ // asking us to load a page by URL.
+ if ( typeof data.toPage === "string" ) {
+ // We are being asked to load a page by URL, but we only
+ // want to handle URLs that request the data for a specific
+ // category.
+ var u = $.mobile.path.parseUrl( data.toPage );
+ if ( u.pathname.search("category.php") !== -1 ) {
+ // We're being asked to display the items for a specific category.
+ // Call our internal method that builds the content for the category
+ // on the fly based on our in-memory category data structure.
+ showCategory( u.href, data.options );
+
+ // Make sure to tell changePage() we've handled this call so it doesn't
+ // have to do anything.
+ e.preventDefault();
+ }
+ }
+});
+
+</script>
+</head>
+
+<body>
+<div data-role="page">
+ <div data-role="header"><h1>Categories</h1></div>
+ <div data-role="content">
+ <h2>Select a Category Below:</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="category.php?id=animals">Animals</a></li>
+ <li><a href="category.php?id=colors">Colors</a></li>
+ <li><a href="category.php?id=vehicles">Vehicles</a></li>
+ </ul>
+ </div>
+</div>
+<div id="category-items" data-role="page" data-add-back-btn="true">
+ <div data-role="header"><h1></h1></div>
+ <div data-role="content"></div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>changePage JSON Sample</title>
+<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+<script src="../../../js/jquery.js"></script>
+<script src="../../../docs/_assets/js/jqm-docs.js"></script>
+<script src="../../../js/"></script>
+<script>
+
+// Some sample categorized data. This data is in-memory
+// for demonstration purposes, but could be loaded dynamically
+// via ajax.
+var categoryData = {
+ animals: {
+ name: "Animals",
+ description: "All your favorites from aardvarks to zebras.",
+ items: [
+ {
+ name: "Pets"
+ },
+ {
+ name: "Farm Animals"
+ },
+ {
+ name: "Wild Animals"
+ }
+ ]
+ },
+ colors: {
+ name: "Colors",
+ description: "Fresh colors from the magic rainbow.",
+ items: [
+ {
+ name: "Blue"
+ },
+ {
+ name: "Green"
+ },
+ {
+ name: "Orange"
+ },
+ {
+ name: "Purple"
+ },
+ {
+ name: "Red"
+ },
+ {
+ name: "Yellow"
+ },
+ {
+ name: "Violet"
+ }
+ ]
+ },
+ vehicles: {
+ name: "Vehicles",
+ description: "Everything from cars to planes.",
+ items: [
+ {
+ name: "Cars"
+ },
+ {
+ name: "Planes"
+ },
+ {
+ name: "Construction"
+ }
+ ]
+ }
+};
+
+// Load the data for a specific category, based on
+// the URL passed in. Generate markup for the items in the
+// category, inject it into an embedded page, and then make
+// that page the current active page.
+function showCategory( urlObj, options )
+{
+ var categoryName = urlObj.hash.replace( /.*category=/, "" ),
+
+ // Get the object that represents the category we
+ // are interested in. Note, that at this point we could
+ // instead fire off an ajax request to fetch the data, but
+ // for the purposes of this sample, it's already in memory.
+ category = categoryData[ categoryName ],
+
+ // The pages we use to display our content are already in
+ // the DOM. The id of the page we are going to write our
+ // content into is specified in the hash before the '?'.
+ pageSelector = urlObj.hash.replace( /\?.*$/, "" );
+
+ if ( category ) {
+ // Get the page we are going to dump our content into.
+ var $page = $( pageSelector ),
+
+ // Get the header for the page.
+ $header = $page.children( ":jqmData(role=header)" ),
+
+ // Get the content area element for the page.
+ $content = $page.children( ":jqmData(role=content)" ),
+
+ // The markup we are going to inject into the content
+ // area of the page.
+ markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
+
+ // The array of items for this category.
+ cItems = category.items,
+
+ // The number of items in the category.
+ numItems = cItems.length;
+
+ // Generate a list item for each item in the category
+ // and add it to our markup.
+ for ( var i = 0; i < numItems; i++ ) {
+ markup += "<li>" + cItems[i].name + "</li>";
+ }
+ markup += "</ul>";
+
+ // Find the h1 element in our header and inject the name of
+ // the category into it.
+ $header.find( "h1" ).html( category.name );
+
+ // Inject the category items markup into the content element.
+ $content.html( markup );
+
+ // Pages are lazily enhanced. We call page() on the page
+ // element to make sure it is always enhanced before we
+ // attempt to enhance the listview markup we just injected.
+ // Subsequent calls to page() are ignored since a page/widget
+ // can only be enhanced once.
+ $page.page();
+
+ // Enhance the listview we just injected.
+ $content.find( ":jqmData(role=listview)" ).listview();
+
+ // We don't want the data-url of the page we just modified
+ // to be the url that shows up in the browser's location field,
+ // so set the dataUrl option to the URL for the category
+ // we just loaded.
+ options.dataUrl = urlObj.href;
+
+ // Now call changePage() and tell it to switch to
+ // the page we just modified.
+ $.mobile.changePage( $page, options );
+ }
+}
+
+
+// Listen for any attempts to call changePage().
+$(document).bind( "pagebeforechange", function( e, data ) {
+ // We only want to handle changePage() calls where the caller is
+ // asking us to load a page by URL.
+ if ( typeof data.toPage === "string" ) {
+ // We are being asked to load a page by URL, but we only
+ // want to handle URLs that request the data for a specific
+ // category.
+ var u = $.mobile.path.parseUrl( data.toPage ),
+ re = /^#category-item/;
+ if ( u.hash.search(re) !== -1 ) {
+ // We're being asked to display the items for a specific category.
+ // Call our internal method that builds the content for the category
+ // on the fly based on our in-memory category data structure.
+ showCategory( u, data.options );
+
+ // Make sure to tell changePage() we've handled this call so it doesn't
+ // have to do anything.
+ e.preventDefault();
+ }
+ }
+});
+
+
+</script>
+</head>
+
+<body>
+<div id="home" data-role="page">
+ <div data-role="header"><h1>Categories</h1></div>
+ <div data-role="content">
+ <h2>Select a Category Below:</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="#category-items?category=animals">Animals</a></li>
+ <li><a href="#category-items?category=colors">Colors</a></li>
+ <li><a href="#category-items?category=vehicles">Vehicles</a></li>
+ </ul>
+ </div>
+
+</div>
+<div id="category-items" data-role="page">
+ <div data-role="header"><h1></h1></div>
+ <div data-role="content"></div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Vehicles</title>
+<link rel="stylesheet" href="../../../css/themes/default/">
+<script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+
+<body>
+<div data-role="page">
+ <div data-role="header"><h1>Vehicles</h1></div>
+ <div data-role="content">
+ <p>Everything from cars to planes.</p>
+ <ul data-role="listview" data-inset="true">
+ <li>Cars</li>
+ <li>Planes</li>
+ <li>Destruction</li>
+ </ul>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Pages</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-index">
+
+ <div data-role="header" data-theme="f">
+ <h1>Pages</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <p>jQuery Mobile includes automatic AJAX page loading of external pages with back button history support, a set of animated page transitions and simple tools for displaying pages as dialogs.</p>
+
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+
+
+ </div><!-- /ui-body wrapper -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Multi-page template</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+</head>
+
+
+<body>
+
+<!-- Start of first page: #one -->
+<div data-role="page" id="one">
+
+ <div data-role="header">
+ <h1>Multi-page</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" >
+ <h2>One</h2>
+
+ <p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
+
+ <p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a <a href="page-template.html"> single page template</a> that has just one page within it.</p>
+ <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
+ <p>You link to internal pages by referring to the ID of the page you want to show. For example, to <a href="#two" >link</a> to the page with an ID of "two", my link would have a <code>href="#two"</code> in the code.</p>
+
+ <h3>Show internal pages:</h3>
+ <p><a href="#two" data-role="button">Show page "two"</a></p>
+ <p><a href="#popup"data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
+ </div><!-- /content -->
+
+ <div data-role="footer" data-theme="d">
+ <h4>Page Footer</h4>
+ </div><!-- /footer -->
+</div><!-- /page one -->
+
+
+<!-- Start of second page: #two -->
+<div data-role="page" id="two" data-theme="a">
+
+ <div data-role="header">
+ <h1>Two</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="a">
+ <h2>Two</h2>
+ <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
+ <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
+ <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>
+
+ </div><!-- /content -->
+
+ <div data-role="footer">
+ <h4>Page Footer</h4>
+ </div><!-- /footer -->
+</div><!-- /page two -->
+
+
+<!-- Start of third page: #popup -->
+<div data-role="page" id="popup">
+
+ <div data-role="header" data-theme="e">
+ <h1>Dialog</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="d">
+ <h2>Popup</h2>
+ <p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>
+ <p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>
+ </div><!-- /content -->
+
+ <div data-role="footer">
+ <h4>Page Footer</h4>
+ </div><!-- /footer -->
+</div><!-- /page popup -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Anatomy of a Page</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Anatomy of a Page</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <p>The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.</p>
+
+ <p>The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
+
+ <h2>Mobile page structure</h2>
+
+ <p>A jQuery Mobile site must start with an HTML5 'doctype' to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) </p>
+ <p>In the 'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off. jQuery Mobile 1.1 works with both 1.6.4 and 1.7.1 versions of jQuery core. We recommend linking to the files hosted on the jQuery CDN for best performance: </p>
+
+<pre><code>
+<strong><!DOCTYPE html> </strong>
+<html>
+ <head>
+ <title>Page Title</title>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+</head>
+
+<body>
+...content goes here...
+</body>
+</html>
+</code></pre>
+
+ <h2>Viewport meta tag</h2>
+ <p>Note above that there is a meta <code>viewport</code> tag in the <code>head</code> to specify how the browser should display the page zoom level and dimensions. If this isn't set, many mobile browsers will use a "virtual" page width around 900 pixels to make it work well with existing desktop sites but the screens may look zoomed out and too wide. By setting the viewport attributes to <code>content="width=device-width, initial-scale=1"</code>, the width will be set to the pixel width of the device screen. </p>
+
+ <pre><code><meta name="viewport" content="width=device-width, initial-scale=1"> </code></pre>
+
+ <p>These settings do not disable the user's ability to zoom the pages, which is nice from an accessibility perspective. There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed in a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library. </p>
+
+ <h2>Inside the body: Pages</h2>
+ <p>Inside the <code><body></code> tag, each view or "page" on the mobile device is identified with an element (usually a <code>div</code>) with the <code> data-role="page"</code> attribute. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to pages.</p>
+
+<div class="highlight">
+<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">></span>
+ ...
+<span class="nt"></div></span>
+</pre>
+</div>
+
+ <p>Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>.</p>
+
+<div class="highlight">
+<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">></span>
+ <span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">></span>...<span class="nt"></div></span>
+ <span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">></span>...<span class="nt"></div></span>
+ <span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">></span>...<span class="nt"></div></span>
+<span class="nt"></div></span>
+</pre>
+</div>
+
+
+<h2>Putting it together: Basic single page template</h2>
+
+<p>Putting it all together, this is the standard boilerplate page template you should start with on a project: </p>
+
+<pre><code>
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Page Title</title>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+</head>
+<body>
+
+<div data-role="page">
+
+ <div data-role="header">
+ <h1>Page Title</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <p>Page content goes here.</p>
+ </div><!-- /content -->
+
+ <div data-role="footer">
+ <h4>Page Footer</h4>
+ </div><!-- /footer -->
+</div><!-- /page -->
+
+</body>
+</html>
+</code></pre>
+
+ <a href="page-template.html" data-inline="true" data-theme="b" data-role="button">View boilerplate template</a>
+
+
+ <h2>Multi-page template structure</h2>
+
+ <p>A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. Each 'page' block needs a unique ID (<code>id="foo"</code>) that will be used to link internally between 'pages' (<code>href="#foo"</code>). When a link is clicked, the framework will look for an internal 'page' with the ID and transition it into view.</p>
+
+ <p>Here is an example of a 2 "page" site built with two jQuery Mobile divs navigated by linking to an ID placed on each page wrapper. Note that the IDs on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document. Here is what two pages look inside the <code>body</code> element.</p>
+
+<pre><code>
+<body>
+
+<!-- Start of first page -->
+<div data-role="page" id="foo">
+
+ <div data-role="header">
+ <h1>Foo</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <p>I'm first in the source order so I'm shown as the page.</p>
+ <p>View internal page called <a href="#bar">bar</a></p>
+ </div><!-- /content -->
+
+ <div data-role="footer">
+ <h4>Page Footer</h4>
+ </div><!-- /footer -->
+</div><!-- /page -->
+
+
+<!-- Start of second page -->
+<div data-role="page" id="bar">
+
+ <div data-role="header">
+ <h1>Bar</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>
+ <p><a href="#foo">Back to foo</a></p>
+ </div><!-- /content -->
+
+ <div data-role="footer">
+ <h4>Page Footer</h4>
+ </div><!-- /footer -->
+</div><!-- /page -->
+</body>
+</code></pre>
+
+ <a href="../../docs/pages/multipage-template.html" data-inline="true" data-theme="b" data-role="button" rel="external">View multi-page template</a>
+
+ <p> </p>
+
+ <p>PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor (<code>index.html#foo</code>) on a page in jQuery Mobile, because the framework will look for a 'page' with an <code>ID</code> of <code>#foo</code> instead of the native behavior of scrolling to the content with that <code>ID</code>.</p>
+
+
+<h2>Conventions, not requirements</h2>
+
+<p>Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the framework is very flexible with document structure. The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure. The page wrapper that used to be required for auto-initialization to work is now optional for single page documents, so there isn't any required markup at all. For a web page with a custom layout, all of these structural elements can be omitted and the Ajax navigation and all widgets will work just like they do in the boilerplate structure. Behind the scenes, the framework will inject the page wrapper if it's not included in the markup because it’s needed for managing pages, but the starting markup can now be extremely simple. </p>
+
+<p>Note that in a multi-page setup, you are required to have page wrappers in your markup in order to group the content into multiple pages.</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">Pages & Dialogs</li>
+ <li data-theme="a"><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Prefetching & caching pages</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Prefetching & caching pages</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+
+ <h2>Prefetching pages</h2>
+
+ <p>Usually, it's a good idea to store your app's pages in several single-page templates instead of one large multi-page template. This minimizes the size of the page's DOM.</p>
+
+ <p>When using single-page templates, you can prefetch pages into the DOM so that they're available instantly when the user visits them. To prefetch a page, add the <code>data-prefetch</code> attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the <code>pagecreate</code> event has triggered. For example:</p>
+
+<pre><code>
+<a href="prefetchThisPage.html" data-prefetch> ... </a>
+</code></pre>
+
+ <p>You can prefetch as many linked pages as you like. Just add <code>data-prefetch</code> to all the links you want to prefetch.</p>
+
+ <p>Alternatively, you can prefetch a page programmatically using <code>$.mobile.loadPage()</code>:</p>
+
+<pre><code>
+$.mobile.loadPage( <var>pageUrl</var>, { showLoadMsg: false } );
+</code></pre>
+
+ <p>Another advantage of prefetching a page is that the user doesn't see the Ajax loading message when visiting the prefetched page. The Ajax loading message only appears if the framework hasn't finished prefetching the page by the time the link is followed.</p>
+
+ <p>Prefetching pages naturally creates additional HTTP requests and uses bandwidth, so it's wise to use this feature only in situations where it's highly likely that the prefetched page will be visited. A common scenario is a photo gallery, where you can prefetch the "previous" and "next" photo pages so that the user can move quickly between photos.</p>
+
+
+ <h2>DOM size management</h2>
+
+ <p>For animated page transitions to work, the pages you're transitioning from and to both need to be in the DOM. However, keeping old pages in the DOM quickly fills the browser's memory, and can cause some mobile browsers to slow down or even crash.</p>
+
+ <p>jQuery Mobile therefore has a simple mechanism to keep the DOM tidy. Whenever it loads a page via Ajax, jQuery Mobile flags the page to be removed from the DOM when you navigate away from it later (technically, on the <code>pagehide</code> event). If you revisit a removed page, the browser may be able to retrieve the page's HTML file from its cache. If not, it refetches the file from the server. (In the case of nested list views, jQuery Mobile removes all the pages that make up the nested list once you navigate to a page that's not part of the list.)</p>
+
+ <p>Pages inside a multi-page template aren't affected by this feature at all - jQuery Mobile only removes pages loaded via Ajax.</p>
+
+
+ <h2>Caching pages in the DOM</h2>
+
+ <p>If you prefer, you can tell jQuery Mobile to keep previously-visited pages in the DOM instead of removing them. This lets you cache pages so that they're available instantly if the user returns to them.</p>
+
+ <p>To keep all previously-visited pages in the DOM, set the <code>domCache</code> option on the page plugin to <code>true</code>, like this:</p>
+
+<pre><code>
+$.mobile.page.prototype.options.domCache = true;
+</code></pre>
+
+ <p>Alternatively, to cache just a particular page, you can add the <code>data-dom-cache="true"</code> attribute to the page's container:</p>
+
+<pre><code>
+<div data-role="page" id="cacheMe" data-dom-cache="true">
+</code></pre>
+
+ <p>You can also cache a page programmatically like this:</p>
+
+<pre><code>
+<var>pageContainerElement</var>.page({ domCache: true });
+</code></pre>
+
+ <p>The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.</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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li data-theme="a"><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Transitions</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Transitions</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <h2>Creating custom CSS-based transitions</h2>
+
+
+ <p>To create a custom CSS transition, select a class name that corresponds to the name of your transition, for example "slide", and then define your "in" and "out" CSS rules to take advantage of transitions or animation keyframes:</p>
+
+ <pre><code>
+ .slide.in {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -webkit-animation-name: slideinfromright;
+ -moz-animation-name: slideinfromright;
+ }
+
+ .slide.out {
+ -webkit-transform: translateX(-100%);
+ -moz-transform: translateX(-100%);
+ -webkit-animation-name: slideouttoleft;
+ -moz-animation-name: slideouttoleft;
+ }
+
+ @-webkit-keyframes slideinfromright {
+ from { -webkit-transform: translateX(100%); }
+ to { -webkit-transform: translateX(0); }
+ }
+
+ @-webkit-keyframes slideouttoleft {
+ from { -webkit-transform: translateX(0); }
+ to { -webkit-transform: translateX(-100%); }
+ }
+
+ @-moz-keyframes slideinfromright {
+ from { -moz-transform: translateX(100%); }
+ to { -moz-transform: translateX(0); }
+ }
+
+ @-moz-keyframes slideouttoleft {
+ from { -moz-transform: translateX(0); }
+ to { -moz-transform: translateX(-100%); }
+ }
+
+ </code></pre>
+
+ <p>During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above. As of jQuery Mobile version 1.1, animation class additions are queued, rather than simultaneous, producing an out-then-in sequence, which is friendlier for mobile rendering than our previous simultaneous transition sequence.</p>
+
+ <p>If your transition supports a reverse direction, you need to create CSS rules that use the <code>reverse</code> class in addition to the transition class name and the "in" and "out" classes:</p>
+
+ <pre><code>
+ .slide.in.reverse {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -webkit-animation-name: slideinfromleft;
+ -moz-animation-name: slideinfromleft;
+ }
+
+ .slide.out.reverse {
+ -webkit-transform: translateX(100%);
+ -moz-transform: translateX(100%);
+ -webkit-animation-name: slideouttoright;
+ -moz-animation-name: slideouttoright;
+ }
+
+ @-webkit-keyframes slideinfromleft {
+ from { -webkit-transform: translateX(-100%); }
+ to { -webkit-transform: translateX(0); }
+ }
+
+ @-webkit-keyframes slideouttoright {
+ from { -webkit-transform: translateX(0); }
+ to { -webkit-transform: translateX(100%); }
+ }
+
+ @-moz-keyframes slideinfromleft {
+ from { -moz-transform: translateX(-100%); }
+ to { -moz-transform: translateX(0); }
+ }
+
+ @-moz-keyframes slideouttoright {
+ from { -moz-transform: translateX(0); }
+ to { -moz-transform: translateX(100%); }
+ }
+
+ </code></pre>
+
+ <p>After the CSS rules are in place, you simply specify the name of your transition within the @data-transition attribute of a navigation link:</p>
+
+ <pre><code><a href="#page2" data-transition="slide">Page 2</a>
+ </code></pre>
+
+ <p>When the user clicks on the navigation link, jQuery Mobile will invoke your transition when it navigates to the page mentioned within the link.</p>
+
+ <p>In case you were wondering why none of the CSS rules above specified any easing or duration, it's because the CSS for jQuery Mobile defines the default easing and duration in the following rules:</p>
+
+ <pre><code>
+ .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;
+ }
+ </code></pre>
+
+ <p>If you need to specify a different easing or duration, simply add the appropriate CSS3 property to your custom page transition rules.</p>
+
+
+ <h2>Creating custom JavaScript-based transitions</h2>
+
+ <p>When a user clicks on a link within a page, jQuery Mobile checks if the link specifies a <code>@data-transition</code> attribute. The value of this attribute is the name of the transition to use when displaying the page referred to by the link. If there is no <code>@data-transition</code> attribute, the transition name specified by the configuration option <code>$.mobile.defaultPageTransition</code> is used for pages, and <code>$.mobile.defaultDialogTransition</code> is used for dialogs.</p>
+
+ <p>After the new page is loaded, the <code>$.mobile.transitionHandlers</code> dictionary is used to see if any transition handler function is registered for the given transition name. If a handler is found, that handler is invoked to start and manage the transition. If no handler is found the handler specified by the configuration option <code>$.mobile.defaultTransitionHandler</code> is invoked.</p>
+
+ <p>By default, the <code>$.mobile.transitionHandlers</code> dictionary is only populated with a single handler entry called "default". This handler plays a dual purpose of either executing a "none" transition, which removes the <code>"ui-page-active"</code> class from the page we are transitioning "from", and places it on the page we are transitioning "to", or a Queued CSS3 Animated Transition, such as the one explained above. If the transition is "none", it will be instantaneous; no animation, no fanfare.</p>
+
+ <p>The <code>$.mobile.defaultTransitionHandler</code> points to a handler function that assumes the name is a CSS class name, and implements the "Pure CSS3 Based Transitions" section above.</p>
+
+ <p>The default transition handler is available on the $.mobile namespace:</p>
+
+ <pre><code>
+$.mobile.transitionHandlers[ "default" ];
+ </code></pre>
+
+ <h3>Transition Handlers</h3>
+
+ <p>A transition handler is a function with the following call signature:</p>
+
+ <pre><code>
+function myTransitionHandler(name, reverse, $to, $from)
+{
+ var deferred = new $.Deferred();
+
+ // Perform any actions or set-up necessary to kick-off
+ // your transition here. The only requirement is that
+ // whenever the transition completes, your code calls
+ // deferred.resolve(name, reverse, $to, $from).
+
+ // Return a promise.
+ return deferred.promise();
+}
+ </code></pre>
+
+ <p>Your handler must create a Deferred object and return a promise to the caller. The promise is used to communicate to the caller when your transition is actually complete. It is up to you to call <code>deferred.resolve()</code> at the correct time. If you are new to Deferred objects, you can find documentation <a href="http://api.jquery.com/category/deferred-object/" rel="nofollow">here</a>.</p>
+
+ <h3>Registering and Invoking Your Transition Handler</h3>
+
+ <p>Once you have created a transition handler function, you need to tell jQuery Mobile about it. To do this, simply add your handler to the <code>$.mobile.transitionHandlers</code> dictionary. Remember, the key used should be the name of your transition. This name is also the same name that will be used within the <code>@data-transition</code> attribute of any navigation links.</p>
+
+ <pre><code>
+// Define your transition handler:
+
+function myTransitionHandler(name, reverse, $to, $from)
+{
+ var deferred = new $.Deferred();
+
+ // Perform any actions or set-up necessary to kick-off
+ // your transition here. The only requirement is that
+ // whenever the transition completes, your code calls
+ // deferred.resolve(name, reverse, $to, $from).
+
+ // Return a promise.
+ return deferred.promise();
+}
+
+// Register it with jQuery Mobile:
+
+$.mobile.transitionHandlers["myTransition"] = myTransitionHandler;
+ </code></pre>
+
+ <p>Once you've registered your handler, you can invoke your transition by placing a <code>data-transition</code> attribute on a link:</p>
+
+ <pre><code><a href="#page2" data-transition="myTransition">Page 2</a>
+ </code></pre>
+
+ <p>When the user clicks the link above, your transition handler will be invoked after the page is loaded and it is ready to be shown.</p>
+
+ <h3>Overriding a CSS Transition With Your Own Handler</h3>
+
+ <p>As previously mentioned the default transition handler assumes that any transition name other than "none" is a CSS class to be placed on the "from" and "to" elements to kick off a CSS3 animation. If you would like to override one of these built-in CSS transitions, you simply register your own handler with the same name as the CSS page transition you want to override. So for example, if I wanted to override the built-in "slide" CSS transition with my own JavaScript based transition, I would simply do the following:</p>
+
+ <pre><code>// Define your transition handler:
+
+function myTransitionHandler(name, reverse, $to, $from)
+{
+ var deferred = new $.Deferred();
+
+ // Perform any actions or set-up necessary to kick-off
+ // your transition here. The only requirement is that
+ // whenever the transition completes, your code calls
+ // deferred.resolve(name, reverse, $to, $from).
+
+ // Return a promise.
+ return deferred.promise();
+}
+
+// Register it with jQuery Mobile:
+
+$.mobile.transitionHandlers["slide"] = myTransitionHandler;
+ </code></pre>
+
+ <p>Once you do this, anytime the "slide" transition is invoked, your handler, instead of the default one, will be called to perform the transition.</p>
+
+ <h3>Overriding the Default Transition Handler</h3>
+
+ <p>The <code>$.mobile.css3TransitionHandler</code> function is the default transition handler that gets invoked when a transition name is used and not found in the <code>$.mobile.transitionHandlers</code> dictionary. If you want to install your own custom default handler, you simply set the <code>$.mobile.defaultTransitionHandler</code> to your handler:</p>
+
+ <pre><code>// Define your default transition handler:
+
+function myTransitionHandler(name, reverse, $to, $from)
+{
+ var deferred = new $.Deferred();
+
+ // Perform any actions or set-up necessary to kick-off
+ // your transition here. The only requirement is that
+ // whenever the transition completes, your code calls
+ // deferred.resolve(name, reverse, $to, $from).
+
+ // Return a promise.
+ return deferred.promise();
+}
+
+$.mobile.defaultTransitionHandler = myTransitionHandler;
+ </code></pre>
+
+ <p>Once you do this, your handler will be invoked any time a transition name is used but not found within the <code>$.mobile.transitionHandlers</code> dictionary.</p>
+
+ <h2>A model for Custom transition handler development</h2>
+ <p>Transition handlers involve a number of critical operations, such as hiding any existing page, showing the new page, scrolling either to the top or a remembered scroll position on that new page, setting focus on the new page, and any animation and timing sequences you'd like to add. During development, we would recommend using <code>jquery.mobile.transitions.js</code> as a coding reference.</p>
+
+ <h2>Transitions and scroll position</h2>
+ <p>One of the key things jQuery Mobile does is store your scroll position before starting a transition so it can restore you to the same place once you return to the page when hitting the Back button or closing a dialog. Here are the same buttons from the top to test the scrolling logic.</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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Dialogs</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Dialogs</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content" class="ui-body">
+ <div class="content-primary">
+ <h2>Creating dialogs</h2>
+ <p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.</p>
+
+ <p>
+ <code>
+ <a href="foo.html" data-rel="dialog">Open dialog</a>
+ </code>
+ </p>
+
+ <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
+
+
+
+ <h2>Transitions</h2>
+ <p>By default, the dialog will open with a 'pop' transition. Like all pages, you can specify any page transition you want on the dialog by adding the <code>data-transition</code> attribute to the link. To make it feel more dialog-like, we recommend specifying a transition of "pop", "slideup" or "flip".</p>
+
+<code>
+<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>
+</code>
+
+ <div>
+ <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">data-transition="pop"</a>
+ <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">data-transition="slidedown"</a>
+ <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="flip">data-transition="flip"</a>
+ </div>
+
+
+ <h2>Closing dialogs</h2>
+ <p>When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the <code>data-rel="back"</code> attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.</p>
+ <p>For JavaScript-generated links, you can simply set the href attribute to "#" and use the <code>data-rel="back"</code> attribute. You can also call the dialog's <code>close()</code> method to programmatically close dialogs, for example: <code>$('.ui-dialog').dialog('close')</code>. </p>
+
+ <h3>Setting the close button text</h3>
+ <p>Just like the page plugin, you can set a dialog's close button text through an option or data attribute. The option can be configured for all dialogs by binding to the <code>mobileinit</code> event and setting the <code>$.mobile.dialog.prototype.options.closeBtnText</code> property to a string of your choosing, or you can place the data attribute <code>data-close-btn-text</code> to configure the text from your markup.</p>
+
+ <h2>History & Back button behavior</h2>
+ <p>Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.</p>
+
+ <h2>Styling & theming</h2>
+ <p>Dialogs can be styled with different theme swatches, just like any page by adding <code>data-theme</code> attributes to the header, content, or footer containers. Here is an example of a different dialog design:</p>
+ <a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>
+
+ <p>Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch A content color by default, but the <code>data-overlay-theme</code> attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch e:</p>
+ <a href="dialog-overlay.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Custom overlay swatch</a>
+
+
+ <p>Dialogs can also be used more like a control sheet to offer multiple buttons if you simply remove the top margin from the dialog's inner container element. For example, if your dialog page had a class of <code>my-dialog</code>, you could add this CSS to pin that dialog to the top: <code>.ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }</code>, or you could just apply that style to all dialogs with <code>.ui-dialog .ui-dialog-contain { margin-top: 0 }</code>.</p>
+ <a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a>
+
+ <h2>Dialog width and margins</h2>
+ <p>For the sake of readability, dialogs have a default <code>max-width</code> of 500 pixels (plus 15px padding on each side). There is also a 10% top <code>margin</code> to give dialogs larger top margin on larger screens, but collapse to a small margin on smartphones. To override these styles, add the following CSS override rule to your stylesheet and tweak as needed:</p>
+
+<code><pre>
+.ui-dialog .ui-header,
+.ui-dialog .ui-content,
+.ui-dialog .ui-footer {
+<strong> max-width: 500px;
+ margin: 10% auto 15px auto; </strong>
+}
+</pre></code>
+
+
+
+
+
+ </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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li data-theme="a"><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Dynamically Injecting Pages</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Dynamically Injecting Pages</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>jQuery Mobile and Dynamic Page Generation</h2>
+ <p>jQuery Mobile allows pages to be pulled into the DOM dynamically via its default click hijacking behavior, or through manual calls to <code>$.mobile.changePage()</code>. This is great for applications that generate HTML pages/fragments on the server-side, but there are sometimes cases where an application needs to dynamically generate page content on the client-side from JSON or some other format. This may be necessary for bandwidth/performance reasons, or because it is the data format of choice for the server they are interacting with.</p>
+ <p>For applications that need to generate page markup on the client-side, it's important to know about the notifications that are triggered during a <code>$.mobile.changePage()</code> call because they can be used as hooks into the navigation system that will allow you to generate your content at the appropriate time.</p>
+ <p>A call to <code>changePage()</code> will usually trigger the following event notifications:</p>
+ <ul>
+ <li><code>pagebeforechange</code>
+ <ul>
+ <li>Fired off before any page loading or transition.</li>
+ <li>NOTE: This event was formerly known as "beforechangepage".</li>
+ </ul>
+ </li>
+ <li><code>pagechange</code>
+ <ul>
+ <li>Fired off after all page loading and transitions.</li>
+ <li>NOTE: this event was formerly known as "changepage".</li>
+ </ul>
+ </li>
+ <li><code>pagechangefailed</code>
+ <ul>
+ <li>Fired off if an error has occurred while attempting to dynamically load a new page. </li>
+ </ul>
+ </li>
+ </ul>
+ <p>These notifications are triggered on the parent container element (<code>$.mobile.pageContainer</code>) of pages, and will bubble all the way up to the document element and window.</p>
+<p>For applications wishing to inject pages, or radically modify the content of an existing page, based on some non-HTML data, such as JSON or in-memory JS object, the <code>pagebeforechange</code> event is very useful since it gives you a hook for analyzing the URL or page element the application is being asked to load or switch to, and short-circuit the default <code>changePage()</code> behavior by simply calling <code>preventDefault()</code> on the <code>pagebeforechange</code> event.</p>
+<p>To illustrate this technique, take a look at this <a href="dynamic-samples/sample-reuse-page.html" rel="external">working sample</a>. In this sample, the main page starts off with a list of categories that the user can navigate into. The actual items in each category are stored in a JavaScript object in memory, for illustrative purposes, but the data can really come from anywhere.</p>
+<pre><code>
+var categoryData = {
+ animals: {
+ name: "Animals",
+ description: "All your favorites from aardvarks to zebras.",
+ items: [
+ {
+ name: "Pets"
+ },
+ {
+ name: "Farm Animals"
+ },
+ {
+ name: "Wild Animals"
+ }
+ ]
+ },
+ colors: {
+ name: "Colors",
+ description: "Fresh colors from the magic rainbow.",
+ items: [
+ {
+ name: "Blue"
+ },
+ {
+ name: "Green"
+ },
+ {
+ name: "Orange"
+ },
+ {
+ name: "Purple"
+ },
+ {
+ name: "Red"
+ },
+ {
+ name: "Yellow"
+ },
+ {
+ name: "Violet"
+ }
+ ]
+ },
+ vehicles: {
+ name: "Vehicles",
+ description: "Everything from cars to planes.",
+ items: [
+ {
+ name: "Cars"
+ },
+ {
+ name: "Planes"
+ },
+ {
+ name: "Construction"
+ }
+ ]
+ }
+};
+</code></pre>
+<p>The application uses links with urls that contain a hash that tells the application what category items to display:</p>
+<pre>
+<code>
+ <h2>Select a Category Below:</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="#category-items?category=animals">Animals</a></li>
+ <li><a href="#category-items?category=colors">Colors</a></li>
+ <li><a href="#category-items?category=vehicles">Vehicles</a></li>
+ </ul>
+</code>
+</pre>
+<p>Internally, when the user clicks on one of these links, the application intercepts the internal <code>$.mobile.changePage()</code> call that is invoked by the frameworks' default link hijacking behavior. It then analyzes the URL for the page about to be loaded, and then decides whether or not it should handle the loading itself, or to let the normal <code>changePage()</code> code handle things.</p>
+<p>The application was able to insert itself into the <code>changePage()</code> flow by binding to the <code>pagebeforechange</code> event at the document level:</p>
+<pre>
+<code>
+// Listen for any attempts to call changePage().
+$(document).bind( "pagebeforechange", function( e, data ) {
+
+ // We only want to handle changePage() calls where the caller is
+ // asking us to load a page by URL.
+ if ( typeof data.toPage === "string" ) {
+
+ // We are being asked to load a page by URL, but we only
+ // want to handle URLs that request the data for a specific
+ // category.
+ var u = $.mobile.path.parseUrl( data.toPage ),
+ re = /^#category-item/;
+
+ if ( u.hash.search(re) !== -1 ) {
+
+ // We're being asked to display the items for a specific category.
+ // Call our internal method that builds the content for the category
+ // on the fly based on our in-memory category data structure.
+ showCategory( u, data.options );
+
+ // Make sure to tell changePage() we've handled this call so it doesn't
+ // have to do anything.
+ e.preventDefault();
+ }
+ }
+});
+</code>
+</pre>
+<p>So why listen at the document level? In short, because of deep-linking. We need our binding to be active before the jQuery Mobile framework initializes and decides how to process the initial URL that invoked the application.</p>
+<p>When the callback for the <code>pagebeforechange</code> binding is invoked, the 2nd argument to the callback will be a data object that contains the arguments that were passed to the initial <code>$.mobile.changePage()</code> call. The properties of this object are as follows:</p>
+<ul>
+ <li><code>toPage</code>
+ <ul>
+ <li>Can be either a jQuery collection object containing the page to be transitioned to, <b>OR</b> a URL reference for a page to be loaded/transitioned to.</li>
+ </ul>
+ </li>
+ <li>options
+ <ul>
+ <li>Object containing the options that were passed in by the caller of the <code>$.mobile.changePage()</code> function.</li>
+ <li>A list of the options can be found <a href="../api/methods.html">here</a>.</li>
+ </ul>
+ </li>
+ </ul>
+<p>For our sample application, we are only interested in <code>changePage()</code> calls where URLs are initially passed in, so the first thing our callback does is check the type for the <code>toPage</code>. Next, with the help of some URL parsing utilities, it checks to make sure if the URL contains a hash that we are interested in handling ourselves. If so, it then calls an application function called <code>showCategory()</code> which will dynamically create the content for the category specified by the URL hash, and then it calls <code>preventDefault()</code> on the event.</p>
+<p>Calling <code>preventDefault()</code> on a <code>pagebeforechange</code> event causes the originating <code>$.mobile.changePage()</code> call to exit without performing any work. Calling the <code>preventDefault()</code> method on the event is the equivalent of telling jQuery Mobile that you have handled the <code>changePage()</code> request yourself.</p>
+<p>If <code>preventDefault()</code> is not called, <code>changePage()</code> will continue on processing as it normally does. One thing to point out about the data object that is passed into our callback, is that any changes you make to the <code>toPage</code> property, or options properties, will affect <code>changePage()</code> processing if <code>preventDefault()</code> is not called. So for example, if we wanted to redirect or map a specific URL to another internal/external page, our callback could simply set the <code>data.toPage</code> property in the callback to the URL or DOM element of the page to redirect to. Likewise, we could set, or un-set any option from within our callback, and <code>changePage()</code> would use the new settings.</p>
+<p>So now that we know how to intercept <code>changePage()</code> calls, let's take a closer look at how this sample actually generates the markup for a page. Our example actually uses, or we should say, re-uses the same page to display each of the categories. Each time one of our special links is clicked, the function <code>showCategory()</code> gets invoked:</p>
+<pre><code>
+// Load the data for a specific category, based on
+// the URL passed in. Generate markup for the items in the
+// category, inject it into an embedded page, and then make
+// that page the current active page.
+function showCategory( urlObj, options )
+{
+ var categoryName = urlObj.hash.replace( /.*category=/, "" ),
+
+ // Get the object that represents the category we
+ // are interested in. Note, that at this point we could
+ // instead fire off an ajax request to fetch the data, but
+ // for the purposes of this sample, it's already in memory.
+ category = categoryData[ categoryName ],
+
+ // The pages we use to display our content are already in
+ // the DOM. The id of the page we are going to write our
+ // content into is specified in the hash before the '?'.
+ pageSelector = urlObj.hash.replace( /\?.*$/, "" );
+
+ if ( category ) {
+ // Get the page we are going to dump our content into.
+ var $page = $( pageSelector ),
+
+ // Get the header for the page.
+ $header = $page.children( ":jqmData(role=header)" ),
+
+ // Get the content area element for the page.
+ $content = $page.children( ":jqmData(role=content)" ),
+
+ // The markup we are going to inject into the content
+ // area of the page.
+ markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
+
+ // The array of items for this category.
+ cItems = category.items,
+
+ // The number of items in the category.
+ numItems = cItems.length;
+
+ // Generate a list item for each item in the category
+ // and add it to our markup.
+ for ( var i = 0; i < numItems; i++ ) {
+ markup += "<li>" + cItems[i].name + "</li>";
+ }
+ markup += "</ul>";
+
+ // Find the h1 element in our header and inject the name of
+ // the category into it.
+ $header.find( "h1" ).html( category.name );
+
+ // Inject the category items markup into the content element.
+ $content.html( markup );
+
+ // Pages are lazily enhanced. We call page() on the page
+ // element to make sure it is always enhanced before we
+ // attempt to enhance the listview markup we just injected.
+ // Subsequent calls to page() are ignored since a page/widget
+ // can only be enhanced once.
+ $page.page();
+
+ // Enhance the listview we just injected.
+ $content.find( ":jqmData(role=listview)" ).listview();
+
+ // We don't want the data-url of the page we just modified
+ // to be the url that shows up in the browser's location field,
+ // so set the dataUrl option to the URL for the category
+ // we just loaded.
+ options.dataUrl = urlObj.href;
+
+ // Now call changePage() and tell it to switch to
+ // the page we just modified.
+ $.mobile.changePage( $page, options );
+ }
+}
+</code></pre>
+<p>In our sample app, the hash of the URL we handle contains 2 parts:</p>
+<pre><code>
+#category-items?category=vehicles
+</code></pre>
+<p>The first part, before the '?' is actually the id of the page to write content into, the part after the '?' is info the app uses to figure out what data it should use when generating the markup for the page. The first thing <code>showCategory()</code> does is deconstruct this hash to extract out the id of the page to write content into, and the name of the category it should use to get the correct set of data from our in-memory JavaScript category object. After it figures out what category data to use, it then generates the markup for the category, and then injects it into the header and content area of the page, wiping out any other markup that previously existed in those elements.</p>
+<p>After it injects the markup, it then calls the appropriate jQuery Mobile widget calls to enhance the list markup it just injected. This is what turns the normal list markup into a fully styled listview with all its behaviors.</p>
+<p>Once that's done, it then calls <code>$.mobile.changePage()</code>, passing it the DOM element of the page we just modified, to tell the framework that it wants to show that page.</p>
+<p>Now an interesting problem here is that jQuery Mobile typically updates the browser's location hash with the URL associated with the page it is showing. Because we are re-using the same page for each category, this wouldn't be ideal, because the URL for that page has no specific category info associated with it. To get around this problem, <code>showCategory()</code> simply sets the <code>dataUrl</code> property on the options object it passes into <code>changePage()</code> to tell it to display our original URL instead.</p>
+<p>That's the sample in a nutshell. It should be noted that this particular sample and its usage is not a very good example of an app that degrades gracefully when JavaScript is turned off. That means it probably won't work very well on C-Grade browsers. We will be posting other examples that demonstrate how to degrade gracefully in the future. Check this <a href="http://jquerymobile.com/test/docs/pages/dynamic-samples/">page</a> for updates.</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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li data-theme="a"><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Linking Pages</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Linking pages</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Linking pages</h2>
+
+ <p>jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible. When Ajax isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.</p>
+
+ <p>The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
+
+ <h2>Default link behavior: Ajax</h2>
+
+ <p>To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's <code>href</code> to formulate an Ajax request (Hijax) and displays the loading spinner. All this happens automatically by jQuery Mobile.</p>
+
+ <p>If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.</p>
+
+ <p>If the Ajax request fails, the framework will display a small error message overlay (styled in the "e" swatch) that disappears after a brief time so this doesn't break the navigation flow. View an <a href="notapage.html">example of the error message</a>.</p>
+
+ <p><strong>Note:</strong> You cannot link <strong>to</strong> a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a <a href="https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget" rel="external">subpage plugin</a> that makes it possible to load in multi-page documents.</p>
+
+
+<h2>Linking without Ajax</h2>
+
+ <p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (<code>rel="external"</code> and <code>data-ajax="false"</code>) have the same effect, but a different semantic meaning: <code>rel="external"</code> should be used when linking to another site or domain, while <code>data-ajax="false"</code> is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.</p>
+ <p>In version 1.1, we've added support for using <code>data-ajax="false"</code> on a parent container which allows you to excluded a large number of links from the Ajax navigation system. This avoids the need to add this attribute to every link in a container.</p>
+ <p>Note: When building a jQuery Mobile application where the Ajax navigation system is disabled globally or frequently disabled on individual links, we recommend disabling the <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to avoid inconsistent navigation behavior in some browsers.</p>
+
+
+
+ <h2>Linking within a multi-page document</h2>
+
+ <p>A single HTML document can contain one or many 'page' containers simply by stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p>
+
+ <p>If a link in a multi-page document points to an anchor (<code>#foo</code>), the framework will look for a page wrapper with that ID (<code>id="foo"</code>). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking. </p>
+
+ <p>It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a <code>rel="external"</code> or <code>data-ajax="false"</code> to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (<code>#</code>) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.</p>
+
+ <p>For example, a link to a page containing multiple internal pages would look like this:</p>
+
+ <code><a href="multipage.html" rel="external">Multi-page link</a></code>
+
+
+
+ <h2>"Back" button links</h2>
+ <p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default <code>href</code>. This is particularly useful when generating "back" buttons with JavaScript, such as a button to close a dialog.
+ When using this feature in your source markup, although browsers that support this feature will not use the specified <code>href</code> attribute, <strong>be sure to still provide a meaningful value that actually points to the URL of the referring page to allow the feature to work for users in C-Grade browsers</strong>. If users can reach this page from more than one referring pages, specify a sensible <code>href</code> so that the navigation remains logical for all users.
+ Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute instead.
+ Note: <code>data-direction="reverse"</code> is meant to simply run the backwards version of the transition that will run on that page change, while <code>data-rel="back"</code> makes the link functionally equivalent to the browser's back button and all the standard back button logic applies. Adding <code>data-direction="reverse"</code> to a link with <code>data-rel="back"</code> <b>will not</b> reverse the reversed page transition and produce the "normal" version of the transition.
+ </p>
+
+
+ <h2>Redirects and linking to directories</h2>
+
+ <p>When linking to directory indexes (such as href="typesofcats/" instead of href="typesofcats/index.html"), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.</p>
+
+ <p>However, you can work around this issue by returning your page div with a <code>data-url</code> attribute already specified. When you do this, jQuery Mobile will use that attribute's value for updating the URL, instead of the url used to request that page. This also allows you to return urls that change as the result of a redirect, for example, you might post a form to "/login.html" but return a page from the url "/account" after a successful submission. This tool allows you to take control of the jQuery Mobile history stack in these situations. Here's an example:</p>
+
+ <p>The following link points to "docs-links-urltest/index.html": <a href="docs-links-urltest/index.html">Test Link</a> which is a directory with an index page. The return page will update the hash as "/docs/pages/docs-links-urltest/" with a trailing slash. This is done via the data-url attribute in that page's source. Keep in mind that the value will replace the entire hash, and it is up to you to replace it with a URL that actually resolves to the correct page when requested via refresh or deep link.</p>
+
+ <p>Learn more about the technical details of the navigation model and <a href="page-navmodel.html">Ajax, hashes and history</a> in jQuery mobile.</p>
+
+
+
+ <h2>Link examples</h2>
+ <p>All standard HTML link types are supported in jQuery Mobile in addition to the types outlined above. Here is a sampler of many common link types:</p>
+
+ <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
+ <li data-role="list-divider">Links that will be Ajax-loaded with page transitions</li>
+ <li><a href="../../index.html">Link in the same domain</a></li>
+ <li><a href="../pages/dialog.html" data-rel="dialog">Dialog link: data-rel="dialog" (not tracked in history)</a></li>
+ <li data-role="list-divider">Links that will refresh the page</li>
+ <li><a href="http://www.jquery.com">External domain</a></li>
+ <li><a href="../../index.html" rel="external">Link with rel="external"</a></li>
+ <li><a href="index.html" data-ajax="false">link with [data-ajax="false"]</a></li>
+ <li><a href="../../index.html" target="foo">Link with target="foo"</a></li>
+ <li data-role="list-divider">Email links</li>
+ <li><a href="mailto:jdoe@foo.com">Basic email: mailto:jdoe@foo.com</a></li>
+ <li><a href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=Happy%20Birthday&body=Best%20wishes!">Mailto with a cc:, bcc:, subject and body pre-filled</a></li>
+
+ <li data-role="list-divider">Phone links</li>
+ <li><a href="tel:15555555555">Phone: tel:15555555555</a></li>
+ <li data-role="list-divider">Other</li>
+ <li><a href="#">A href="#" will return false</a></li>
+ </ul>
+
+
+ </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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li data-theme="a"><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Ajax, hashes & history</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Ajax, hashes & history</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>jQuery Mobile's navigation model</h2>
+
+ <p>A "page" in jQuery Mobile consists of an element (usually a <code>div</code>) with a <code> data-role</code> attribute set to <code>"page"</code>, which generally contains <code>div</code> elements with roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>, each containing common markup, forms, and custom jQuery Mobile widgets.</p>
+
+ <p>The basic workflow with page loading is as follows: first, a page is requested with a normal HTTP request, and subsequent "pages" are then requested and injected into that page's DOM. Because of this, the DOM may have a number of "pages" in it at a time, each of which can be re-visited by linking to its <code>data-url</code> attribute.</p>
+
+ <p>When a url is initially requested, there may be one or more "pages" in the response, and only the first one will be shown. The advantage of storing more than one "page" is that it allows you to pre-fetch static pages that are likely to be visited.</p>
+
+ <h2>Hash and Ajax driven page navigation</h2>
+
+ <p>By default all navigation within jQuery Mobile is based on changes and updates to <code>location.hash</code>. Whenever possible, page changes will use a smooth transition between the current "page" and the next, whether it is either already present in the DOM, or is automatically loaded via Ajax.</p>
+
+ <p>Hash values created by jQuery Mobile are normalized as full paths relative to the URL of the first "real" page that was loaded. The hash is always maintained as a valid URL, so any "page" in jQuery mobile can be bookmarked or referenced in a link. To retrieve a non-hash-based URL, simply remove the # from the address and refresh the page.</p>
+
+ <p>In general, hash changes are created whenever a link is clicked in jQuery mobile. When a link is clicked, jQuery mobile will make sure that the link is referencing a local URL, and if so, it'll prevent the link's default click behavior from occurring and request the referenced url via Ajax instead. When the page returns successfully, it will set the <code>location.hash</code> to the new page's relative url. </p>
+
+ <p>Hash changes that occur independently of a click, such as when a user clicks the back button, are handled through the <code>hashchange</code> event, which is bound to the window object using Ben Alman's <code>hashchange</code> special event plugin (included in jQuery Mobile). When a hash change occurs (and also when the first page loads), the <code>hashchange</code> event handler will send the <code>location.hash</code> to the <code>$.mobile.changePage()</code> function, which in turn either loads or reveals the referenced page.</p>
+
+
+ <p>Once the referenced page is present in the DOM, the <code>$.mobile.changePage()</code> function applies a transition between the current active page and the new page. Page transitions happen through adding and removing classes that apply CSS animations. For example, in a slide-left transition, the exiting page is given the classes <code>"slideleft"</code> and <code>"out"</code>, and the entering page is given the classes <code>"slideleft"</code> and <code>"in"</code>, as well as a class of <code>"ui-page-active"</code> to mark it as the new "active" page being viewed. When the animation is complete, the <code>"in"</code> and <code>"out"</code> classes are removed, and the exited page loses its <code>"ui-page-active"</code> class.</p>
+
+ <h2>pushState plugin</h2>
+
+ <p>There is an optional feature that converts the longer, hash-based URLs mentioned in the previous section into the full document path which is cleaner and makes the Ajax tracking transparent in the URL structure. This is built as an enhancement on top of the hash-based URL system for Ajax links. Note that despite the name, this feature technically converts hash-based urls by using <code>history.replaceState</code> (not <code>history.pushState</code>) in the current release because this works more reliably across our target platforms. For browsers that do not support <code>history.replaceState</code>, or if this feature is disabled, hash-based URLs will be used instead. </p>
+
+ <p>Since the plugin initializes when the DOM is fully loaded you can enable and disable it manually by setting <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to <code>false</code> anytime before document ready.</p>
+
+ <div class="ui-body ui-body-e">
+ <h4 style="margin:.5em 0">Important: rel="external" and $.mobile.ajaxEnabled=false</h4>
+ <p>Slightly different implementations of the replaceState API in various browsers can cause odd behavior in specific scenarios. For example, some browser implementations (including desktop browsers) implement the <code>popstate</code> event differently when linking externally and moving back to a page onto which state has already been pushed/replaced. When building a jQuery Mobile application where the ajax navigation is being explicitly disabled, either through the frequent use of <code>rel="external"</code> on links or by disabling Ajax navigation completely via the <code>$.mobile.ajaxEnabled=false</code>, we recommend disabling the pushState feature to fall back to the hash based navigation for more consistent behavior.</p>
+ </div>
+
+ <h2>changePage</h2>
+
+ <p>Within the framework, page changes - both for pages already in the DOM and for pages that need to be loaded via Ajax - use the <code>$.mobile.changePage()</code> function. <code>$.mobile.changePage()</code> contains all of the logic for finding pages to transition to and from, and how to handle various response conditions such as a page not found. <code>$.mobile.changePage()</code> can be called externally and accepts the following arguments (to, transition, back, changeHash). The <code>to</code> argument can accept either a string (such as a file url or local element's ID), an array (in which the first array item is any local page you'd like to transition from, and the second array item is the <code>to</code> page), or an object (with expected properties: url, type ("get" or "post"), and data (for serialized parameters)), the latter of which is useful for loading pages that expect form data. The <code>transition</code> argument accepts a string representing a named transition, such as "slide". The <code>back</code> argument accepts a boolean representing whether the transition should go forward or in reverse. Lastly, the <code>changeHash</code> argument accepts a boolean for whether you'd like the url to be updated upon a successful page change.</p>
+
+ <p>The <code>$.mobile.changePage()</code> function is used in a number of places in jQuery Mobile. For example, when a link is clicked, its <code>href</code> attribute is normalized and then <code>$.mobile.changePage()</code> handles the rest. When forms are submitted, jQuery Mobile simply gathers a few of the form's attributes, serializes its data, and once again, <code>$.mobile.changePage()</code> is used to handle the submission and response. Also, links that create dialogs use <code>$.mobile.changePage()</code>to open a referenced page without updating the hash, which is useful for keeping dialogs out of history tracking. </p>
+
+ <h2>Base element</h2>
+
+ <p>Another key ingredient to jQuery Mobile's page navigation model is the <code>base</code> element, which is injected into the <code>head</code> and modified on every page change to ensure that any assets (images, CSS, JS, etc.) referenced on that page will be requested from a proper path. In browsers that don't support dynamic updates to the <code>base</code> element (such as Firefox 3.6), jQuery Mobile loops through all of the referenced assets on the page and prefixes their <code>href</code> and <code>src</code> attributes with the base path.</p>
+
+
+ <h2>Developer explanation of base url management:</h2>
+
+ <p>jQuery Mobile manages http requests using a combination of generated absolute URL paths and manipulating a generated <code><base></code> element's href attribute. The combination of these two approaches allows us to create URLs that contain full path information for loading pages, and a base element to properly direct asset requests made by those loaded pages (such as images and stylesheets).</p>
+
+<p><strong>TODO: update description of internal base and urlHistory objects</strong></p>
+
+ <h2>Data-url storage</h2>
+
+ <p>The navigation model maintains a <code>data-url</code> attribute on all <code>data-role="page"</code> elements. This <code>data-url</code> attribute is used to track the origin of the page element. Pages embedded within the main application document all have their <code>data-url</code> parameter set to the ID of their element with <code>data-role="page"</code>. The only exception to this is the first-page in the document. The first-page is special because it can be addressed by its <code>id</code> if it has one, or by the document or base URL (with no hash fragment).</p>
+
+ <p>Pages that are external to the application document get pulled in dynamically via ajax, and their data-url is set to the site relative path to the external page. If you are running in an environment where loading an external page from a different domain is allowed, then the data-url is set to the absolute URL.</p>
+
+ <h2>Auto-generated pages and sub-hash urls</h2>
+
+ <p>Some plugins may choose to dynamically break a page's content into separate navigable pages, which can then be reached via deep links. One example of this would be the Listview plugin, which will break a nested UL (or OL) into separate pages, which are each given a <code>data-url</code> attribute so they can be linked to like any normal "page" in jQuery Mobile. However, in order to link to these pages, the page that generates them must first be requested from the server. To make this work, pages that are auto-generated by plugins use the following special data-url structure:
+ <code><div data-url="page.html&subpageidentifier"></code></p>
+
+ <p>So, for example, a page generated by the listview plugin may have a <code>data-url</code> attribute like this: <code>data-url="artists.html&ui-page=listview-1"</code></p>
+
+ <p>When a page is requested, jQuery Mobile knows to split the URL at "&ui-page" and make an HTTP request to the portion of the URL before that key. In the case of the listview example mentioned above, the URL would look like this: http://example.com/artists.html&ui-page=listview-1
+ ...and jQuery Mobile would request artists.html, which would then generate its sub-pages, creating the <code>div</code> with <code>data-url="artists.html&ui-page=listview-1"</code>, which it will then display as the active page.</p>
+
+ <p><em>Note that the <code>data-url</code> attribute of the element contains the full URL path, not just the portion after &ui-page=. This allows jQuery Mobile to use a single consistent mechanism that matches URLs to page <code>data-url</code> attributes.</em></p>
+
+ <h2>Cases when Ajax navigation will not be used</h2>
+
+ <p>Under certain conditions, normal http requests will be used instead of Ajax requests. One case where this is true is when linking to pages on external websites. You can also specify that a normal http request be made through the following link attributes:</p>
+
+ <ul>
+ <li><p><code>rel=external</code></p></li>
+ <li><p><code>target</code> (with any value, such as <code>"_blank"</code>)</p></li>
+
+ </ul><h2>Form submissions</h2>
+
+ <p>Form submissions are handled automatically through the navigation model as well. Visit the <a href="../forms/forms-sample.html">forms section</a> for more information.</p>
+
+ <h2>Using the Application Cache</h2>
+
+ <p>When using the application cache with jQuery Mobile there is at least one important issue to consider. Some browsers, when making requests to the cache will report an http status of 0 on success. This causes jQuery Core's <code>$.ajax</code> to trigger error handlers. The suggested workaround for users leveraging the application cache is to use a jQuery ajax pre-filter. Something like the following (credit to <a href="https://github.com/jquery/jquery-mobile/issues/1579#issuecomment-1209338" rel="external">jammus</a> for the snippet):</p>
+
+ <pre><code>
+
+$.ajaxPrefilter( function(options, originalOptions, jqXHR) {
+ if ( applicationCache &&
+ applicationCache.status != applicationCache.UNCACHED &&
+ applicationCache.status != applicationCache.OBSOLETE ) {
+ // the important bit
+ options.isLocal = true;
+ }
+});
+
+ </code></pre>
+
+ <p>Setting <code>isLocal</code> to true for your ajax requests will alert jQuery Core that it should handle the 0 return values differently. Local requests exhibit similar behavior (ie 0 statuses), and Core will then fall back to determining success based on the presence of content in the xhr <code>responseText</code> attribute.</p>
+
+ <p>One important issue to note with the above is that it will set <code>isLocal</code> to <code>true</code> for all requests made via ajax regardless of whether they are in the manifest or not so long as the cache is valid. This works for now because Core only consults the <code>isLocal</code> value when the status is in fact 0 which doesn't affect uncached results. There is no long term guarantee that <code>isLocal</code> will remain isolated in its purpose for handling 0 status values. If that changes it may break your application.</p>
+
+ <h2>Known limitations</h2>
+
+ <p>The non-standard environment created by jQuery Mobile's page navigation model introduces some conditions of which you should be aware when building pages:</p>
+
+ <ul>
+ <li><p>When linking to directories, without a filename url, (such as <code>href="typesofcats/"</code> instead of <code>href="typesofcats/index.html"</code>), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.</p></li>
+ <li><p>Documents loaded via Ajax will select the first page in the DOM of that document to be loaded as a JQM page element. As a result the developer must make sure to manage the ID attributes of the loaded page and child elements to prevent confusion when manipulating the DOM.</p></li>
+ <li><p>If you link to multipage document, you must use a <code>data-ajax="false"</code> attribute on the link to cause a full page refresh due to the limitation above where we only load the first page node in an Ajax request due to potential hash collisions. There is currently a <a href="https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget" rel="external">subpage plugin</a> that makes it possible to load in multi-page documents. </p></li>
+ <li><p>Any unique assets referenced by pages in a jQuery Mobile-driven site should be placed inside the "page" element (the element with a <code>data-role</code> attribute of <code>"page"</code>). For example, links to styles and scripts that are specific to a particular page can be referenced inside that <code>div</code>. However, a better approach is to use jQuery Mobile's page events to trigger specific scripting when certain pages load. <strong>Note: </strong> you can return a page from the server with a <code>data-url</code> already specified in the markup, and jQuery Mobile will use that for the hash update. This allows you to ensure directory paths resolve with a trailing slash and will therefore be used in the base url path for future requests.</p></li>
+ <li><p>Conversely, any non-unique assets (those used site-wide) should be referenced in the <code><head></code> section of an HTML document, or at the very least, outside of the "page" element, to prevent running scripts more than once.</p></li>
+ <li><p>The <code>"ui-page"</code> key name used in sub-hash url references can be set to any value you'd like, so as to blend into your URL structure. This value is stored in <code>jQuery.mobile.subPageUrlKey</code>.</p></li>
+ <li><p>When traveling back to a previously loaded jQuery Mobile document from an external <b>or</b> internal document with the push state plugin enabled, some browsers load and trigger the <code>popstate</code> event on the wrong document or for the wrong reasons (two edge cases recorded so far). If you are regularly linking to external documents and find the application behaving erratically try disabling pushstate support.</p></li>
+ <li><p>jQuery Mobile does not support query parameter passing to internal/embedded pages but there are two plugins that you can add to your project to support this feature. There is a lightweight <a href="https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params" rel="external">page params plugin</a> and a more fully featured <a href="https://github.com/azicchetti/jquerymobile-router" rel="external">jQuery Mobile router plugin</a> for use with backbone.js or spine.js.</p></li>
+ <li><p>Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the <a href="../api/methods.html"><code>silentScroll</code></a> method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a <code>yPos</code> arguments to scroll to that Y location.</p></li>
+ </ul>
+
+
+ </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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li data-theme="a"><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Scripting pages</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Scripting pages</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Scripting pages in jQuery Mobile</h2>
+ <p>Since jQuery Mobile uses an Ajax-powered navigation system, there are a few helpful things to know when writing scripts that manipulate your content. You can explore the mobile API in more detail by reading up on <a href="../api/globalconfig.html">global configuration options</a>, <a href="../api/events.html">events</a>, and <a href="../api/methods.html">methods</a> or dig into the technical details of the <a href="page-navmodel.html">Ajax navigation model</a>.</p>
+
+ <h2>Scripts & styles in the head</h2>
+
+ <p>When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's <code>href</code> to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that <code>href</code> with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the <em>contents of the response's <code>body</code> element (or more specifically the <code>data-role="page"</code> element, if it's provided)</em>, meaning nothing in the <code>head</code> of the page will be used (with the exception of the page title, which is fetched specifically). Please note that script's loaded dynamically in this fashion do not guarantee a load order in the same way they would if the page was loaded via a normal http request.</p>
+
+ <p> This means that any scripts and styles referenced the <code>head</code> of a page won't have any effect <em>when a page is loaded via Ajax</em>, but they <strong>will execute if the page is requested normally via HTTP</strong>. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the <code>head</code> of a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it's common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume <code>head</code> scripts are only expected to execute once per browsing session.</p>
+
+ <p>The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the <code>pageInit</code> event (details below) to run necessary code when a specific page is created (which can be determined by its <code>id</code> attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.</p>
+
+ <p>Another approach for page-specific scripting would be to include scripts at the end of the <code>body</code> element when no <code>data-role=page</code> element is defined, or inside the first <code>data-role=page</code> element. If you include your custom scripting this way, be aware that these scripts will execute when that page is loaded via Ajax or regular HTTP, so if these scripts are the same on every page, you'll likely run into problems. If you're including scripts this way, we'd recommend enclosing your page content in a <code>data-role="page"</code> element, and placing scripts that are referenced on every page outside of that element. Scripts that are unique to that page can be placed in that element, to ensure that they execute when the page is fetched via Ajax.</p>
+
+ <h2>pageinit = DOM ready</h2>
+
+ <p>One of the first things people learn in jQuery is to use the <code>$(document).ready()</code> function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the <code>onload</code> event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the <a href="../api/events.html"><code>pageinit</code></a> event. </p>
+
+ <p>The <code>pageinit</code> event is triggered on a page when it is initialized, right after initialization occurs. Most of jQuery Mobile's official widgets auto-initialize themselves based on this event, and you can set up your code to do the same.</p>
+<pre><code>
+$( document ).delegate("#aboutPage", "pageinit", function() {
+ alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!');
+});
+</code></pre>
+
+ <p>If you'd like to manipulate a page's contents <em>before</em> the pageinit event fires and widgets are auto-initialized, you can instead bind to the <code>pagebeforecreate</code> event:</p>
+
+<pre><code>
+$( document ).delegate("#aboutPage", "pagebeforecreate", function() {
+ alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
+});
+</code></pre>
+
+ <h4 style="margin:.5em 0">Important note: <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>
+
+
+ <h2>Changing pages</h2>
+ <p>If you want to change the current active page with JavaScript, you can use the <a href="../api/methods.html"><code>changePage</code></a> method. There are a lot of methods and properties that you can set when changing pages, but here are two simple examples:</p>
+ <pre><code>
+<strong>//transition to the "about us" page with a slideup transition</strong>
+$.mobile.changePage( "about/us.html", { transition: "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",
+ data: $("form#search").serialize()
+});
+</code></pre>
+
+ <h2>Loading pages</h2>
+ <p>To load an external page, enhance its content, and insert it into the DOM, use the <a href="../api/methods.html"><code>loadPage</code> method</a>. There are a lot of methods and properties that you can set when loading pages, but here is a simple example:</p>
+ <pre><code>
+//load the "about us" page into the DOM
+$.mobile.loadPage( "about/us.html" );
+</code></pre>
+
+ <h2>Enhancing new markup</h2>
+ <p>The page plugin dispatches a <code>pageInit</code> event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.</p>
+ <p>However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the <code>create</code> event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page <code>div</code> itself), saving you the task of manually initializing each plugin (listview button, select, etc.).</p>
+ <p>For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the <code>create</code> event to automatically transform all the widgets it contains (<a href="http://jquerymobile.com/test/docs/forms/textinputs/index.html">inputs</a> and <a href="http://jquerymobile.com/test/docs/buttons/index.html">buttons</a> in this case) into the enhanced versions. The code for this scenario would be:</p>
+<pre style="margin: 25px 0;"><code style="font-size: 12px;">$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
+</code></pre>
+
+ <h2>Create vs. refresh: An important distinction</h2>
+ <p>Note that there is an important difference between the <code>create</code> event and <code>refresh</code> method that some widgets have. The <code>create</code> event is suited for enhancing <em>raw markup</em> that contains one or more widgets. The <code>refresh</code> method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.</p>
+
+ <p>For example, if you had a page where you dynamically appended a new unordered list with <code>data-role=listview</code> attribute after page creation, triggering <code>create</code> on a parent element of that list would transform it into a <a href="http://jquerymobile.com/test/docs/lists/index.html">listview</a> styled widget. If more list items were then programmatically added, calling the listview’s <code>refresh</code> method would update just those new list items to the enhanced state and leave the existing list items untouched.</p>
+
+
+ <h2>Scrolling to a position within a page</h2>
+ <p>Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the <a href="../api/methods.html"><code>silentScroll</code></a> method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a <code>yPos</code> arguments to scroll to that Y location. For example:</p>
+<pre><code>
+//scroll to Y 300px
+$.mobile.silentScroll(300);
+</code></pre>
+
+ <h2>Binding to mouse and touch events</h2>
+ <p>One inportant consideration in mobile is handling mouse and touch events. These events differ significantly across mobile platforms, but the common denominator is that click events will work everywhere, but usually after a significant delay of 500-700ms. This delay is necessary for the browser to wait for double tap, scroll and extended hold tap events to potentially occur. To avoid this delay, it's possible to bind to touch events (ex. touchstart) but the issue with this approach is that some mobile platforms (WP7, Blackberry) don't support touch. To compound this issue, some platforms will emit <em>both</em> touch and mouse events so if you bind to both types, duplicate events will be fired for a single interaction.</p>
+ <p>Our solution is to create a set of <a href="../api/events.html">virtual events</a> that normalize 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. This still retains the order of event firing in the traditional mouse environment, should multiple handlers be registered on the same element for different events. The virtual mouse system exposes the following virtual events to jQuery bind methods: <code>vmouseover</code>, <code>vmousedown</code>, <code>vmousemove</code>, <code>vmouseup</code>, <code>vclick</code>, and <code>vmousecancel</code></p>
+
+
+ <h2>Passing parameters between pages</h2>
+ <p>jQuery Mobile does not support query parameter passing to internal/embedded pages. For example, if the framework sees a link to "#somePage?someId=1" it interpret that as "#somePage" and navigate to the internal page div with an ID of <code>somePage</code> and apply a data-url of <code>#somePage?someId=1</code> to that page container. Subsequent calls to other params such as "#somePage?someId=2" will find the same div because jQuery Mobile refers to the data-url on the div which is only set once and will remain at <code>#somePage?someId=1</code>.</p>
+
+ <p>There are two plugins that you can add to your project if query parameters are needed between pages. There is a lightweight <a href="https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params" rel="external">page params plugin</a> and a more fully featured <a href="https://github.com/azicchetti/jquerymobile-router" rel="external">jQuery Mobile router plugin</a> for use with backbone.js or spine.js.</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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li data-theme="a"><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Single page template</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+</head>
+
+<body>
+
+<div data-role="page">
+
+ <div data-role="header">
+ <h1>Single page</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>
+ <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
+ <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p>
+ </div><!-- /content -->
+
+ <div data-role="footer">
+ <h4>Footer content</h4>
+ </div><!-- /footer -->
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Page titles</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Page titles</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <h2>Titles in Ajax navigation</h2>
+
+ <p>When you load the first page of a jQuery Mobile based site, then click a link or submit a form, Ajax is used to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you’re viewing.</p>
+ <p>To remedy this, jQuery Mobile automatically parses the <code>title</code> of the page pulled via Ajax and changes the <code>title</code> attribute of the parent document to match.</p>
+
+ <h2>Titles in multi-page templates</h2>
+
+ <p>On multi-page documents, we follow a similiar convention, but since all the pages share a common <code>title</code>, we have a <code>data-title</code> attribute that can be added to each page container within a multi-page template to manually define a title. The title of the HTML document will be automatically updated to match the <code>data-title</code> of the page currently in view.</p>
+
+<pre><code>
+<div data-role="page" id="foo" <strong>data-title="Page Foo"</strong>>
+
+</div><!-- /page -->
+</code></pre>
+
+
+ </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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li data-theme="a"><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Dialog</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" id="dialog-success" data-dom-cache="true"><!-- dialog-->
+
+ <div data-role="header" data-theme="e">
+ <h1>Dialog</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="e">
+ <p>That was an animated page transition effect to a dialog that we added with a <code>data-transition</code> attribute on the link.</p>
+ <p>Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.</p>
+
+ <a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">Take me back</a>
+ </div>
+ </div>
+
+ <div data-role="page" id="page-success"><!-- dialog-->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Page</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+
+
+ <div data-role="page" id="page-success" data-dom-cache="true"><!-- page-->
+ <div data-role="header" data-theme="a">
+ <h1>Page</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="d">
+ <p>That was an animated page transition effect to a page that we added with a <code>data-transition</code> attribute on the link. This uses a different background theme swatch to see how that looks with the transitions.</p>
+ <p>Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.</p>
+
+ <form action="#" method="get">
+ <h2>Here's a few form elements</h2>
+
+ <p>These are here to see if this slows down rendering.</p>
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" data-highlight="true" />
+ </div>
+
+ </form>
+
+ <a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back" data-inline="true">Take me back</a>
+ </div>
+
+ <div data-role="footer" data-theme="d">
+ <div style="margin:5px 10px;"><!-- To add a bit of spacing -->
+ <label for="search" class="ui-hidden-accessible">Search:</label>
+ <input type="search" name="password" id="search" placeholder="Search..." value="" />
+ </div>
+ </div><!-- /footer -->
+ </div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Transitions</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Transitions</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Page transitions</h2>
+
+ <p>The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>
+
+ <style>
+ table { width:100%; border-bottom:1px solid #ccc; border-collapse: collapse; }
+ th { text-align:left; }
+ th h3 { margin:.6em 0; }
+ th, td { vertical-align:top; border-top:1px solid #ccc; padding: 1px 3px; }
+ td .ui-btn { margin:.4em 0 .5em 0; }
+ td .ui-btn-inner { padding: .4em 15px; }
+ </style>
+
+ <table margin="0">
+ <tr>
+ <th><h3>fade</h3></th>
+ <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
+ <td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
+ </tr>
+ <tr>
+ <th><h3>pop</h3></th>
+ <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
+ <td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
+ </tr>
+ <tr>
+ <th><h3>flip</h3></th>
+ <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
+ <td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
+ </tr>
+ <tr>
+ <th><h3>turn</h3></th>
+ <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
+ <td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
+ </tr>
+ <tr>
+ <th><h3>flow</h3></th>
+ <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
+ <td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
+ </tr>
+ <tr>
+ <th><h3>slidefade</h3></th>
+ <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
+ <td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
+ </tr>
+ <tr>
+ <th><h3>slide</h3></th>
+ <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
+ <td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
+ </tr>
+ <tr>
+ <th><h3>slideup</h3></th>
+ <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
+ <td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
+ </tr>
+ <tr>
+ <th><h3>slidedown</h3></th>
+ <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
+ <td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
+ </tr>
+ <tr>
+ <th><h3>none</h3></th>
+ <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
+ <td><a href="page-transitions-page.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">page</a></td>
+ </tr>
+ </table>
+
+
+<p><strong>Only seeing fade transitions?</strong> To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).</p>
+
+<p><strong>Transitions were originally inspired by <a href="http://www.jqtouch.com/">jQtouch</a></strong> They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.</p>
+
+ <h2>Setting a transition on a link or form submit</h2>
+ <p>By default, the framework applies a <strong>fade</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p>
+
+<code><code>
+<a href="index.html" <strong>data-transition="pop"</strong>>I'll pop</a>
+</code></code>
+
+ <p>When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the <code>data-direction="reverse"</code> attribute to a link.</p>
+
+ <h2>Global configuration of transitions</h2>
+
+ <p>Set the <code>defaultPageTransition</code> <a href="../api/globalconfig.html">global option</a> if you'd prefer a different default transition. Dialogs have a different option called <code>defaultDialogTransition</code> that can also set configured.</p>
+
+
+ <h2>Browser support and performance</h2>
+ <p>All transitions are built with CSS keyframe animations and include both <code>-webkit</code> vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers and <code>-moz</code> rules for Firefox browsers. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.</p>
+
+ <h2>Defining fallback transitions for non-3D support</h2>
+ <p>By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.</p>
+
+ <p>The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":</p>
+ <code>$.mobile.transitionFallbacks.slideout = "none"</code>
+
+ <h2>Setting a max width for transitions</h2>
+ <p>By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option <code>$.mobile.maxTransitionWidth</code>, which defaults to <code>false</code>. The option accepts any number representing a pixel width or <code>false</code> value. If it's not <code>false</code>, the handler will use a "none" transition when the window width is wider than the specified value.</p>
+
+
+
+
+
+ <h2>Creating custom transitions</h2>
+
+ <p>jQuery Mobile allows for the addition of <a href="page-customtransitions.html">custom transitions</a> to the <code>$.mobile.transitionHandlers</code> dictionary so you can expand the selection of transitions on your site or app.
+
+
+
+
+
+ </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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li data-theme="a"><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Theming Pages</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Theming pages</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="pages-themes.html" data-role="button" data-transition="fade" class="ui-btn-active">Theme Overview</a></li>
+
+ <li><a href="pages-themes/theme-a.html" data-role="button" data-transition="fade">A </a></li>
+ <li><a href="pages-themes/theme-b.html" data-role="button" data-transition="fade">B </a></li>
+ <li><a href="pages-themes/theme-c.html" data-role="button" data-transition="fade">C </a></li>
+ <li><a href="pages-themes/theme-d.html" data-role="button" data-transition="fade">D </a></li>
+ <li><a href="pages-themes/theme-e.html" data-role="button" data-transition="fade">E </a></li>
+ </ul>
+
+ <h2>Page Theming</h2>
+
+ <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.</p>
+
+ <p>The <code> data-theme</code> attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the <code>data-theme</code> attribute could be added to the content container, we recommend adding it instead to <code>div</code> or container that has been assigned the <code> data-role="page"</code> attribute to ensure that the background color is applied to the full page. When this is done, all widgets on the page will also inherit the theme specified in the page container. However, headers and footers will default to theme "a". If you want to have a page with, for example, only theme "b" for all its elements, including its header and footer, you will need to specify <code>data-theme="b"</code> to the page <code>div</code> as well as the header and footer <code>divs</code>. </p>
+
+ <p>The default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:</p>
+
+ <div data-role="header">
+ <h1>Default Theme</h1>
+ </div>
+
+ <div class="ui-body ui-body-c">
+ <h3>Default Theme Content Header</h3>
+ <p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
+
+ <a href="#" data-role="button" data-inline="true">Button</a>
+ </div>
+
+ <p>And each of the five "swatches" applies its style consistently across all page elements, as shown below:</p>
+
+ <h2>Swatch A</h2>
+ <div data-role="header">
+ <h1>Header A</h1>
+ </div>
+
+
+ <div class="ui-body ui-body-a">
+ <h3>Header</h3>
+ <p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p>
+ <a href="#" data-role="button" data-inline="true">Button</a>
+ </div>
+
+
+ <h2>Swatch B</h2>
+ <div data-role="header" data-theme="b">
+ <h1>Header B</h1>
+ </div>
+ <div class="ui-body ui-body-b">
+ <h3>Header</h3>
+ <p>This is content color swatch "B" and a preview of a <a href="#" class="ui-link">link</a>.</p>
+ <a href="#" data-role="button" data-inline="true">Button</a>
+ </div>
+
+ <h2>Swatch C</h2>
+ <div data-role="header" data-theme="c">
+ <h1>Header C</h1>
+ </div>
+ <div class="ui-body ui-body-c">
+ <h3>Header</h3>
+ <p>This is content color swatch "C" and a preview of a <a href="#" class="ui-link">link</a>.</p>
+ <a href="#" data-role="button" data-inline="true">Button</a>
+ </div>
+
+ <h2>Swatch D</h2>
+ <div data-role="header" data-theme="d">
+ <h1>Header D</h1>
+ </div>
+ <div class="ui-body ui-body-d">
+ <h3>Header</h3>
+ <p>This is content color swatch "D" and a preview of a <a href="#" class="ui-link">link</a>.</p>
+ <a href="#" data-role="button" data-inline="true">Button</a>
+ </div>
+
+ <h2>Swatch E</h2>
+ <div data-role="header" data-theme="e">
+ <h1>Header E</h1>
+ </div>
+ <div class="ui-body ui-body-e">
+ <h3>Header</h3>
+ <p>This is content color swatch "E" and a preview of a <a href="#" class="ui-link">link</a>.</p>
+ <a href="#" data-role="button" data-inline="true">Button</a>
+ </div>
+
+ </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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li data-theme="a"><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Theming Pages</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior" data-theme="a">
+
+ <div data-role="header">
+ <h1>Theming pages</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
+
+ <li><a href="theme-a.html" data-role="button" data-transition="fade" class="ui-btn-active">A </a></li>
+ <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li>
+ <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li>
+ <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li>
+ <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li>
+ </ul>
+
+ <h2>Theme A Sample Page</h2>
+
+ <p>This is an example of <code>data-theme="a"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
+
+ <div data-role="fieldcontain">
+ <label for="name-a">Text Input:</label>
+ <input type="text" name="name" id="name-a" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="switch-a">Flip switch:</label>
+ <select name="switch-a" id="switch-a" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider-a">Slider:</label>
+ <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
+ <label for="checkbox-6a">b</label>
+
+ <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
+ <label for="checkbox-7a"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
+ <label for="checkbox-8a">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
+ <label for="radio-choice-1a">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
+ <label for="radio-choice-2a">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
+ <label for="radio-choice-3a">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
+ <label for="radio-choice-4a">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <h2>Collapsible Sets</h2>
+ <div data-role="collapsible-set">
+ <div data-role="collapsible" data-collapsed="false">
+ <h3>Section 1</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 3</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ </div>
+
+ <h2>Inset List</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ </div><!--/content-primary -->
+
+ <div class="content-secondary">
+ <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
+
+ <h3>More in this section</h3>
+
+ <ul data-role="listview" data-theme="a" data-dividertheme="a">
+ <li data-role="list-divider">Pages & Dialogs</li>
+ <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="../page-titles.html">Page titles</a></li>
+ <li><a href="../page-links.html">Linking pages</a></li>
+ <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
+ <li><a href="../page-dialogs.html">Dialogs</a></li>
+ <li><a href="../page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
+ <li><a href="../page-scripting.html">Scripting pages</a></li>
+ <li data-theme="b"><a href="../pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Theming Pages</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior" data-theme="b">
+
+ <div data-role="header" data-theme="b">
+ <h1>Theming pages</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
+
+ <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li>
+ <li><a href="theme-b.html" data-role="button" data-transition="fade" class="ui-btn-active">B </a></li>
+ <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li>
+ <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li>
+ <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li>
+ </ul>
+
+ <h2>Theme B Sample Page</h2>
+
+ <p>This is an example of <code>data-theme="b"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
+
+ <div data-role="fieldcontain">
+ <label for="name-a">Text Input:</label>
+ <input type="text" name="name" id="name-a" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="switch-a">Flip switch:</label>
+ <select name="switch-a" id="switch-a" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider-a">Slider:</label>
+ <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
+ <label for="checkbox-6a">b</label>
+
+ <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
+ <label for="checkbox-7a"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
+ <label for="checkbox-8a">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
+ <label for="radio-choice-1a">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
+ <label for="radio-choice-2a">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
+ <label for="radio-choice-3a">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
+ <label for="radio-choice-4a">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <h2>Collapsible Sets</h2>
+ <div data-role="collapsible-set">
+ <div data-role="collapsible" data-collapsed="false">
+ <h3>Section 1</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 3</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ </div>
+
+ <h2>Inset List</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ </div><!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="b">
+
+ <h3>More in this section</h3>
+
+ <ul data-role="listview" data-theme="b" data-dividertheme="b">
+ <li data-role="list-divider">Pages & Dialogs</li>
+ <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="../page-titles.html">Page titles</a></li>
+ <li><a href="../page-links.html">Linking pages</a></li>
+ <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
+ <li><a href="../page-dialogs.html">Dialogs</a></li>
+ <li><a href="../page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
+ <li><a href="../page-scripting.html">Scripting pages</a></li>
+ <li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="b">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Theming Pages</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior" data-theme="c">
+
+ <div data-role="header" data-theme="c">
+ <h1>Theming pages</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
+
+ <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li>
+ <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li>
+ <li><a href="theme-c.html" data-role="button" data-transition="fade" class="ui-btn-active">C </a></li>
+ <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li>
+ <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li>
+ </ul>
+
+ <h2>Theme C Sample Page</h2>
+
+ <p>This is an example of <code>data-theme="c"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
+
+ <div data-role="fieldcontain">
+ <label for="name-a">Text Input:</label>
+ <input type="text" name="name" id="name-a" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="switch-a">Flip switch:</label>
+ <select name="switch-a" id="switch-a" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider-a">Slider:</label>
+ <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
+ <label for="checkbox-6a">b</label>
+
+ <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
+ <label for="checkbox-7a"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
+ <label for="checkbox-8a">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
+ <label for="radio-choice-1a">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
+ <label for="radio-choice-2a">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
+ <label for="radio-choice-3a">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
+ <label for="radio-choice-4a">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <h2>Collapsible Sets</h2>
+ <div data-role="collapsible-set">
+ <div data-role="collapsible" data-collapsed="false">
+ <h3>Section 1</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 3</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ </div>
+
+ <h2>Inset List</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ </div><!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="c">
+
+ <h3>More in this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="c">
+ <li data-role="list-divider">Pages & Dialogs</li>
+ <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="../page-titles.html">Page titles</a></li>
+ <li><a href="../page-links.html">Linking pages</a></li>
+ <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
+ <li><a href="../page-dialogs.html">Dialogs</a></li>
+ <li><a href="../page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
+ <li><a href="../page-scripting.html">Scripting pages</a></li>
+ <li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Theming Pages</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior" data-theme="d">
+
+ <div data-role="header" data-theme="d">
+ <h1>Theming pages</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
+
+ <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li>
+ <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li>
+ <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li>
+ <li><a href="theme-d.html" data-role="button" data-transition="fade" class="ui-btn-active">D </a></li>
+ <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li>
+ </ul>
+
+ <h2>Theme D Sample Page</h2>
+
+ <p>This is an example of <code>data-theme="d"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
+
+ <div data-role="fieldcontain">
+ <label for="name-a">Text Input:</label>
+ <input type="text" name="name" id="name-a" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="switch-a">Flip switch:</label>
+ <select name="switch-a" id="switch-a" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider-a">Slider:</label>
+ <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
+ <label for="checkbox-6a">b</label>
+
+ <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
+ <label for="checkbox-7a"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
+ <label for="checkbox-8a">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
+ <label for="radio-choice-1a">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
+ <label for="radio-choice-2a">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
+ <label for="radio-choice-3a">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
+ <label for="radio-choice-4a">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <h2>Collapsible Sets</h2>
+ <div data-role="collapsible-set">
+ <div data-role="collapsible" data-collapsed="false">
+ <h3>Section 1</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 3</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ </div>
+
+ <h2>Inset List</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ </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">Pages & Dialogs</li>
+ <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="../page-titles.html">Page titles</a></li>
+ <li><a href="../page-links.html">Linking pages</a></li>
+ <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
+ <li><a href="../page-dialogs.html">Dialogs</a></li>
+ <li><a href="../page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
+ <li><a href="../page-scripting.html">Scripting pages</a></li>
+ <li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="d">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Theming Pages</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
+ <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior" data-theme="e">
+
+ <div data-role="header" data-theme="e">
+ <h1>Theming pages</h1>
+ <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
+
+ <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li>
+ <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li>
+ <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li>
+ <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li>
+ <li><a href="theme-e.html" data-role="button" data-transition="fade" class="ui-btn-active">E </a></li>
+ </ul>
+
+ <h2>Theme E Sample Page</h2>
+
+ <p>This is an example of <code>data-theme="e"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
+
+ <div data-role="fieldcontain">
+ <label for="name-a">Text Input:</label>
+ <input type="text" name="name" id="name-a" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="switch-a">Flip switch:</label>
+ <select name="switch-a" id="switch-a" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider-a">Slider:</label>
+ <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
+ <label for="checkbox-6a">b</label>
+
+ <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
+ <label for="checkbox-7a"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
+ <label for="checkbox-8a">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
+ <label for="radio-choice-1a">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
+ <label for="radio-choice-2a">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
+ <label for="radio-choice-3a">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
+ <label for="radio-choice-4a">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <h2>Collapsible Sets</h2>
+ <div data-role="collapsible-set">
+ <div data-role="collapsible" data-collapsed="false">
+ <h3>Section 1</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 3</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ </div>
+
+ <h2>Inset List</h2>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ </div><!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="e">
+
+ <h3>More in this section</h3>
+
+ <ul data-role="listview" data-theme="e" data-dividertheme="e">
+ <li data-role="list-divider">Pages & Dialogs</li>
+ <li><a href="../../page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="../../page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="../../multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="../../page-titles.html">Page titles</a></li>
+ <li><a href="../../page-links.html">Linking pages</a></li>
+ <li><a href="../../page-transitions.html" data-ajax="false">Page transitions</a></li>
+ <li><a href="../../page-dialogs.html">Dialogs</a></li>
+ <li><a href="../../page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="../../page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="../../page-dynamic.html">Dynamically Injecting Pages</a></li>
+ <li><a href="../../page-scripting.html">Scripting pages</a></li>
+ <li data-theme="a"><a href="../../pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="e">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Phonegap</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>PhoneGap apps</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+
+ <h2>Building PhoneGap apps with jQuery Mobile</h2>
+
+ <p><a href="http://phonegap.com/" rel="external">PhoneGap</a> is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores. Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView (a chromeless browser, referred to hereafter as a webview). Since PhoneGap is frequently used in conjunction with jQuery Mobile, we wanted to offer a few tips and recommendations to help you get staretd. </p>
+
+ <p>The initial application document is loaded by the PhoneGap application by a local file:// URL. This means that if you want to pull in pages from your company's remote server (phone home) you will have to refer to them with absolute URLs to your server. Because your document originates from a file:// URL, loading pages or assets from your remote server is considered a cross-domain request that can be blocked in certain scenarios. </p>
+
+ <p>Your ability to access cross-domain pages from within a Phone Gap jQuery Mobile application is controlled by two key things: <code>$.support.cors</code> and <code>$.mobile.allowCrossDomainPages</code>, and can also be influenced by the white list feature in later builds of PhoneGap.</p>
+
+ <h2>$.support.cors</h2>
+
+ <p>In jQuery core, there is a <a href="http://api.jquery.com/jQuery.support/" rel="external">$.support.cors</a> boolean that indicates whether or not jQuery thinks the browser supports the W3C "<a hre="http://www.w3.org/TR/cors/" rel="external">Cross-Origin Resource Sharing</a>" feature to support cross-domain requests.</p>
+
+ <p>Since jQuery Mobile relies on jQuery core's $.ajax() functionality, <code>$.support.cors</code> must be set to <code>true</code> to tell <code>$.ajax</code> to load cross-domain pages. We've heard reports that webviews on some platforms, like BlackBerry, support cross-domain loading, but that jQuery core incorrectly sets <code>$.support.cors</code> value to <code>false</code> which disables cross-domain $.ajax() requests and will cause the page or assets to fail to load. </p>
+
+ <h2>$.mobile.buttonMarkup.hoverDelay</h2>
+
+ <p>If you find that the button down/hover state (lists, buttons, links etc) feels sluggish the <code>$.mobile.buttonMarkup.hoverDelay</code> setting might be of use. It will decrease the time between the touch event and the application of the relevant class but will also result in a higher chance that the same class will be applied even when the user is scrolling (eg, over a long list of links).</p>
+
+ <h2>$.mobile.allowCrossDomainPages</h2>
+
+ <p>When jQuery Mobile attempts to load an external page, the request runs through <code>$.mobile.loadPage()</code>. This will only allow cross-domain requests if the <code>$.mobile.allowCrossDomainPages</code> configuration option is set to <code>true</code>. Because the jQuery Mobile framework tracks what page is being viewed within the browser's location hash, it is possible for a cross-site scripting (XSS) attack to occur if the XSS code in question can manipulate the hash and set it to a cross-domain URL of its choice. This is the main reason that the default setting for <code>$.mobile.allowCrossDomainPages</code> is set to <code>false</code>.</p>
+
+ <p>So in PhoneGap apps that must "phone home" by loading assets off a remote server, both the <code>$.support.cors</code> AND <code>$.mobile.allowCrossDomainPages</code> must be set to <code>true</code>. The <code>$.mobile.allowCrossDomainPages</code> option must be set before any cross-domain request is made so we recommend wrapping this in a <code>mobileinit</code> handler:</p>
+
+<pre><code>$( document ).bind( "mobileinit", function() {
+ // Make your jQuery Mobile framework configuration changes here!
+
+ $.mobile.allowCrossDomainPages = true;
+});</code></pre>
+
+ <h2>PhoneGap White Listing</h2>
+
+ <p>PhoneGap 1.0 introduced the idea of white-listing servers that its internal webview is allowed to make cross-domain requests to. You can find info about it here on the <a href="http://wiki.phonegap.com/w/page/40796976/Install%20the%20latest%20%28trunk%29%20source%20of%20iOS%20PhoneGap">PhoneGap wiki</a>:</p>
+
+ <p>However, not all platforms support this white-listing feature so check the PhoneGap documentation for details. Older versions of PhoneGap prior to 1.0 defaulted to allowing cross-domain requests to any server.</p>
+
+ <h2>Still having issues?</h2>
+
+ <p>Here are a few more tips that aren't specifically related to PhoneGap but are good to know:</p>
+
+ <p><strong>We recommend disabling the <a href="../api/globalconfig.html">pushState feature</a> for installed apps </strong>because there are edge cases where this feature can cause unexpected navigation behavior and since URLs aren't visible in a webview, it's not worth keeping this active in these situations. </p>
+
+ <p><strong>Android enforces a timeout when loading URLs in a webview</strong> which may be too short for your needs. You can change this timeout by editing a Java class generated by the Eclipse plugin for Android:</p>
+
+ <code>super.setIntegerProperty("loadUrlTimeoutValue", 60000);</code>
+
+
+
+ </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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li data-theme="a"><a href="phonegap.html">PhoneGap apps</a></li>
+ <li><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - touchOverflow</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>touchOverflow</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <div class="ui-body ui-body-e">
+ <h2>touchOverflowEnabled: Deprecated in 1.1.0</h2>
+
+ <p>Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property <code>overflow-scrolling: touch</code>, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under <code>$.support</code> and we have no plans to remove that test at this time. </p>
+ </div>
+
+ <h2 id="ios5">touchOverflow: Improved page transitions and true fixed toolbars</h2>
+
+ <p>Currently, both the page you're viewing and the one you're navigating to are sitting next to each other in the viewport, which lets us leverage native scrolling for the broadest possible device support. The downside to this approach is that since both pages share the same viewport, when a page transition starts, we must first scroll to the top of the document, then start animating to ensure that the pages are lined up vertically. If you hit the Back button, we need to scroll up, transition, then restore the previous scroll position. Since mobile browsers are pretty slow, these scroll movements can detract from the flow of the experience.</p>
+
+ <p>The way to really improve this situation is to have both pages in separate containers, each with its own internal scroll bar. The means no more scrolling the document or needing to restore scroll positions for a smoother experience. It also has the benefit of making fixed toolbars very easy to implement by simply placing them outside the containers with internal scrolling.<p>
+
+ <h2>How it works</h2>
+
+ <p>To leverage iOS5′s support for a touch-targeted version of <code>overflow:auto</code> which allows for internal scrolling regions with the native momentum scrolling, we've added a feature called touchOverflow that leverages these new CSS capabilities to enable us to bring both true “fixed” toolbars and super smooth transitions to iOS5, all by using web standards and very little additional code.</p>
+
+ <p>A feature called <code>touchOverflowEnabled</code> is designed to leverage the upcoming wave of browsers that support overflow scrolling in CSS. Note that this feature is off by default to give us more time to test and debug this for best performance but we hope to turn it on by default at a later point. Here's how to enable this <a href="../api/globalconfig.html">global option</a>:</p>
+
+<pre><code><script>
+$(document).bind("mobileinit", function(){
+<strong> $.mobile.touchOverflowEnabled = true;
+</strong>});
+</script></code></pre>
+
+ <p>When this feature is activated, the framework looks for browser support for both the <code>overflow:</code> and <code>-webkit-overflow-scrolling:touch</code> CSS properties. In browsers that support both, it switches to a dual page container model with native overflow: scrolling within each, which brings true fixed toolbars smooth transitions. Coupled with iOS’s already excellent hardware-accelerated transitions, it's now possible to build interfaces that are very close to native performance.</p>
+
+ <p>To demo this feature, check out <a href="../config/touchOverflow.html">this page</a> in iOS5.</p>
+
+ <h2>A few downsides</h2>
+
+ <p>Nothing is perfect, especially a new feature, so there are a few downsides to keep in mind. When activating this feature:</p>
+
+ <ul>
+ <li>Sometimes child elements like lists and forms wouldn't render when embedded in a page with <code>overflow:</code> in iOS5. This was a pretty random phenomenon but is not acceptable so we've added a <code>translate-z</code> CSS property which forces iOS to render the contents. The downside with this fix is that when a transform is applied, all elements are set to position:relative which can cause issues in your layout.</li>
+ <li>The <code>-webkit-overflow-scrolling:touch</code> property seems to disable the events to scroll you to the top of the page when the time is tapped in the status bar. We hope Apple fixes this because it's a very useful feature.</li>
+ <li>When <code>overflow:</code> and <code>-webkit-overflow-scrolling:touch</code> properties are set, iOS appears to ignore any overflow:hidden properties on the parent, which is the page in our case. So if you have an image or code block that is wider than the viewport, horizontal scrolling will be seen. </li>
+ <li>When this feature is active, we are disabling user zoom by manipulating the meta viewport tag because both the toolbars and page content can easily be zoomed to an odd size and it's very difficult to zoom back out. Even though we believe in allowing users to zoom the page, alleviating the usability concerns we have with fixed toolbars and overflow containers is more important.</li>
+ <li>Scroll position can be lost when going back to a page that has been re-loaded. If DOM caching is on, this shouldn't be as much of an issue.</li>
+ <li>This is still an experimental feature, so not all the kinks have been worked out yet. Use with caution and test thoroughly.</li>
+ </ul>
+
+
+
+ <h2>Don’t other mobile platforms already support overflow?</h2>
+ <p>Yes, but there’s a catch. Both Android Honeycomb and the Blackberry PlayBook support <code>overflow:</code> properties, but we found in testing that their implementation of overflow wasn't smooth enough, so pages would stutter and hang during scrolling, leading to an unusable experience. We're working with device makers to ensure that they are included when performance improves.</p>
+ <p>More importantly, targeting overflow correctly is a major issue. If we simply placed an <code>overflow: auto</code> CSS rule on the pages, other popular mobile platforms like older versions of Android and iOS would essentially just clip off the content and make it effectively inaccessible (yes, you can do a two-finger scroll gesture in iOS but nobody knows that). The smart thing about Apple’s implementation for iOS5 is that they added an additional CSS property <code>-webkit-overflow-scrolling:touch</code> that allows us to test for this touch scrolling property and, if supported, add in the <code>overflow</code> rules for just those browsers. This is the only safe way to target overflow without resorting to complex and unmaintainable user agent detection.</p>
+ <p>We will be working with device and browser makers to encourage support for <em>both</em> these CSS-based properties because we strongly believe that this a critical piece needed to build rich mobile web apps. The project will add any vendor-prefixed additions to touch scrolling property if, for example, Opera, Firefox or Microsoft added this support. Once people see how much better page transitions and fixed toolbars are on iOS5, we’re hoping this will be supported quickly by other browsers. JS-based scroller scripts may still have a place in this new world as a polyfill for browsers that don’t yet support these new CSS capabilities but we see this as a brief, interim tool in the evolution of the mobile web.</p>
+
+
+
+ <h2>Debugging touchOverflow</h2>
+ <p>Generally touchOverflow is only enabled on devices that support touch-scrolling of overflow areas, not desktop browsers. This can make it difficult to debug problems with the touchOverflow feature. To enable touchOverflow on all browsers, use the following code:
+
+<pre><code><script>
+$(document).bind("mobileinit", function() {
+ <strong>$.support.touchOverflow = true;</strong>
+ $.mobile.touchOverflowEnabled = true;
+});
+</script></code></pre>
+
+
+ </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">Pages & Dialogs</li>
+ <li><a href="page-anatomy.html">Anatomy of a page</a></li>
+ <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
+ <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
+ <li><a href="page-titles.html">Page titles</a></li>
+ <li><a href="page-links.html">Linking pages</a></li>
+ <li><a href="page-transitions.html">Page transitions</a></li>
+ <li><a href="page-dialogs.html">Dialogs</a></li>
+ <li><a href="page-cache.html">Prefetching & caching pages</a></li>
+ <li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
+ <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
+ <li><a href="page-scripting.html">Scripting pages</a></li>
+ <li><a href="phonegap.html">PhoneGap apps</a></li>
+ <li data-theme="a"><a href="touchoverflow.html">touchOverflow feature</a></li>
+ <li><a href="pages-themes.html">Theming pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Dialog Example</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page">
+
+ <div data-role="header" data-theme="e">
+ <h1>Ta-da!</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" data-theme="e">
+ <p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p>
+ <p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p>
+ <p>What do you think?</p>
+ <a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">I like it</a>
+ </div>
+</div>
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="f">
+
+ <h1>Fixed toolbars</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Fixed toolbars</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="bars-fixed.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="bars-fixed-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="bars-fixed-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+ <p>The fixedtoolbar plugin has the following custom events:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a fixed toolbar is created</dt>
+ <dd>
+
+ <pre><code>
+$( ".selector" ).fixedtoolbar({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+
+ </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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
+ <h1>Fixed Footer</h1>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="f">
+
+ <div class="ui-grid-a">
+ <form>
+ <div class="ui-block-a" style="width:60%">
+ <h1 style="font-size:19px; margin-left:12px;">2,146 Songs</h1>
+ </div>
+ <div class="ui-block-b" style="width:38%; padding:6px 5px 0 0;">
+ <select name="select-mini" id="select-mini" data-mini="true">
+ <option value="">Sort...</option>
+ <option value="date" selected>Newest</option>
+ <option value="name">Name</option>
+ <option value="rating">Top Rated</option>
+ <option value="track">Track #</option>
+ </select>
+ </div>
+ </div><!-- /grid-b -->
+
+ <div class="ui-bar-d">
+ <div class="ui-grid-a">
+ <div class="ui-block-a" style="width:78%">
+ <label for="text-mini" class="ui-hidden-accessible">Search Input:</label>
+ <input type="search" name="name" id="search-mini" value="" data-mini="true" placeholder="Search songs..." />
+ </div>
+ <div class="ui-block-b" style="width:22%">
+ <button type="submit" data-mini="true" style="float:right" data-theme="d">Go</button>
+ </div>
+ </div><!-- /grid-a -->
+ </div><!-- /search bar -->
+ </form>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
+ <li><a href="index.html">
+ <img src="../lists/images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-ok.jpg" />
+ <h3>Of The Blue Colour Of The Sky</h3>
+ <p>Ok Go</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-ws.jpg" />
+ <h3>Elephant</h3>
+ <p>The White Stripes</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-rh.jpg" />
+ <h3>Kid A</h3>
+ <p>Radiohead</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-xx.jpg" />
+ <h3>XX</h3>
+ <p>XX</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-mg.jpg" />
+ <h3>Congratulations</h3>
+ <p>MGMT</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-ag.jpg" />
+ <h3>Ashes Grammar</h3>
+ <p>A Sunny Day in Glasgow</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+
+ <li><a href="index.html">
+ <img src="../lists/images/album-k.jpg" />
+ <h3>Hot Fuss</h3>
+ <p>Killers</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-af.jpg" />
+ <h3>The Suburbs</h3>
+ <p>Arcade Fire</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-ok.jpg" />
+ <h3>Of The Blue Colour Of The Sky</h3>
+ <p>Ok Go</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-ws.jpg" />
+ <h3>Elephant</h3>
+ <p>The White Stripes</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-rh.jpg" />
+ <h3>Kid A</h3>
+ <p>Radiohead</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-xx.jpg" />
+ <h3>XX</h3>
+ <p>XX</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-mg.jpg" />
+ <h3>Congratulations</h3>
+ <p>MGMT</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-ag.jpg" />
+ <h3>Ashes Grammar</h3>
+ <p>A Sunny Day in Glasgow</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+
+ <li><a href="index.html">
+ <img src="../lists/images/album-k.jpg" />
+ <h3>Hot Fuss</h3>
+ <p>Killers</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-af.jpg" />
+ <h3>The Suburbs</h3>
+ <p>Arcade Fire</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-ok.jpg" />
+ <h3>Of The Blue Colour Of The Sky</h3>
+ <p>Ok Go</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-ws.jpg" />
+ <h3>Elephant</h3>
+ <p>The White Stripes</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-rh.jpg" />
+ <h3>Kid A</h3>
+ <p>Radiohead</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-xx.jpg" />
+ <h3>XX</h3>
+ <p>XX</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-mg.jpg" />
+ <h3>Congratulations</h3>
+ <p>MGMT</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-ag.jpg" />
+ <h3>Ashes Grammar</h3>
+ <p>A Sunny Day in Glasgow</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+
+ <li><a href="index.html">
+ <img src="../lists/images/album-k.jpg" />
+ <h3>Hot Fuss</h3>
+ <p>Killers</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../lists/images/album-af.jpg" />
+ <h3>The Suburbs</h3>
+ <p>Arcade Fire</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ </ul>
+
+ </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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
+ <form action="#" method="get">
+ <div data-role="fieldcontain">
+ <label for="slider-2" style="margin-left:15px;">Volume:</label>
+ <input type="range" name="slider" id="slider-2" value="50" min="0" max="100" data-highlight="true" data-mini="true" class="ui-hidden-accessible" />
+ </div>
+ </form>
+
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="b">
+ <form action="#" method="get">
+ <label for="text-1" class="ui-hidden-accessible">Text Input:</label>
+ <input type="text" name="text-1" id="text-1" value="" data-mini="true" data-theme="d" />
+ </form>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Forms in fixed toolbar demos</h2>
+ <p>These pages are designed to test fixed toolbars and form elements:
+ <a href="bars-fixed-forms-a.html">demo app</a>,
+ <a href="bars-fixed-forms-b.html">text inputs</a>,
+ <a href="bars-fixed-forms-c.html">search inputs</a>,
+ <a href="bars-fixed-forms-d.html">radio toggles</a>,
+ <a href="bars-fixed-forms-e.html">checkbox toggles</a>,
+ <a href="bars-fixed-forms-f.html">slider</a>,
+ <a href="bars-fixed-forms-g.html">select</a>, and
+ <a href="bars-fixed-forms-h.html">buttons</a>.
+ </p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+
+
+ <h3>Embedded form</h3>
+
+ <form action="#" method="get">
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+ </fieldset>
+ </div>
+ </form>
+
+ <h3>A bit more text</h3>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
+ <form action="#" method="get">
+ <label for="text-2" class="ui-hidden-accessible">Text Input:</label>
+ <input type="text" name="text-2" id="text-2" value="" data-mini="true" />
+ </form>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="b">
+ <form action="#" method="get">
+ <label for="search-1" class="ui-hidden-accessible">Search Input:</label>
+ <input type="search" name="search-1" id="search-1" value="" data-mini="true" data-theme="d" />
+ </form>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Forms in fixed toolbar demos</h2>
+ <p>These pages are designed to test fixed toolbars and form elements:
+ <a href="bars-fixed-forms-a.html">demo app</a>,
+ <a href="bars-fixed-forms-b.html">text inputs</a>,
+ <a href="bars-fixed-forms-c.html">search inputs</a>,
+ <a href="bars-fixed-forms-d.html">radio toggles</a>,
+ <a href="bars-fixed-forms-e.html">checkbox toggles</a>,
+ <a href="bars-fixed-forms-f.html">slider</a>,
+ <a href="bars-fixed-forms-g.html">select</a>, and
+ <a href="bars-fixed-forms-h.html">buttons</a>.
+ </p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+
+
+ <h3>Embedded form</h3>
+
+ <form action="#" method="get">
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+ </fieldset>
+ </div>
+ </form>
+
+ <h3>A bit more text</h3>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
+ <form action="#" method="get">
+ <label for="search-2" class="ui-hidden-accessible">Search Input:</label>
+ <input type="search" name="search-2" id="search-2" value="" data-mini="true" />
+ </form>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="b">
+ <form action="#" method="get">
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <legend class="ui-hidden-accessible">Choose a pet:</legend>
+ <input type="radio" name="radio-choice-a" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-a" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-a" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-a" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ </form>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Forms in fixed toolbar demos</h2>
+ <p>These pages are designed to test fixed toolbars and form elements:
+ <a href="bars-fixed-forms-a.html">demo app</a>,
+ <a href="bars-fixed-forms-b.html">text inputs</a>,
+ <a href="bars-fixed-forms-c.html">search inputs</a>,
+ <a href="bars-fixed-forms-d.html">radio toggles</a>,
+ <a href="bars-fixed-forms-e.html">checkbox toggles</a>,
+ <a href="bars-fixed-forms-f.html">slider</a>,
+ <a href="bars-fixed-forms-g.html">select</a>, and
+ <a href="bars-fixed-forms-h.html">buttons</a>.
+ </p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+
+
+ <h3>Embedded form</h3>
+
+ <form action="#" method="get">
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+ </fieldset>
+ </div>
+ </form>
+
+ <h3>A bit more text</h3>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
+ <form action="#" method="get">
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <legend class="ui-hidden-accessible">Choose a pet:</legend>
+ <input type="radio" name="radio-choice-b" id="radio-choice-5" value="choice-5" checked="checked" />
+ <label for="radio-choice-5">Cat</label>
+
+ <input type="radio" name="radio-choice-b" id="radio-choice-6" value="choice-6" />
+ <label for="radio-choice-6">Dog</label>
+
+ <input type="radio" name="radio-choice-b" id="radio-choice-7" value="choice-7" />
+ <label for="radio-choice-7">Hamster</label>
+
+ <input type="radio" name="radio-choice-b" id="radio-choice-8" value="choice-8" />
+ <label for="radio-choice-8">Lizard</label>
+ </fieldset>
+ </form>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="b">
+ <form action="#" method="get">
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <legend class="ui-hidden-accessible">Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1a" id="checkbox-1a" />
+ <label for="checkbox-1a">Cheetos</label>
+
+ <input type="checkbox" name="checkbox-2a" id="checkbox-2a" />
+ <label for="checkbox-2a">Doritos</label>
+
+ <input type="checkbox" name="checkbox-3a" id="checkbox-3a" />
+ <label for="checkbox-3a">Fritos</label>
+
+ <input type="checkbox" name="checkbox-4a" id="checkbox-4a" />
+ <label for="checkbox-4a">Sun Chips</label>
+ </fieldset>
+ </form>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Forms in fixed toolbar demos</h2>
+ <p>These pages are designed to test fixed toolbars and form elements:
+ <a href="bars-fixed-forms-a.html">demo app</a>,
+ <a href="bars-fixed-forms-b.html">text inputs</a>,
+ <a href="bars-fixed-forms-c.html">search inputs</a>,
+ <a href="bars-fixed-forms-d.html">radio toggles</a>,
+ <a href="bars-fixed-forms-e.html">checkbox toggles</a>,
+ <a href="bars-fixed-forms-f.html">slider</a>,
+ <a href="bars-fixed-forms-g.html">select</a>, and
+ <a href="bars-fixed-forms-h.html">buttons</a>.
+ </p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+
+
+ <h3>Embedded form</h3>
+
+ <form action="#" method="get">
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+ </fieldset>
+ </div>
+ </form>
+
+ <h3>A bit more text</h3>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
+ <form action="#" method="get">
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <legend class="ui-hidden-accessible">Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1ba" id="checkbox-1b" />
+ <label for="checkbox-1b">Cheetos</label>
+
+ <input type="checkbox" name="checkbox-2b" id="checkbox-2b" />
+ <label for="checkbox-2b">Doritos</label>
+
+ <input type="checkbox" name="checkbox-3b" id="checkbox-3b" />
+ <label for="checkbox-3b">Fritos</label>
+
+ <input type="checkbox" name="checkbox-4b" id="checkbox-4b" />
+ <label for="checkbox-4b">Sun Chips</label>
+ </fieldset>
+ </form>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="b">
+ <form action="#" method="get">
+ <label for="slider-1" class="ui-hidden-accessible">Slider:</label>
+ <input type="range" name="slider" id="slider-1" value="50" min="0" max="100" data-highlight="true" data-mini="true" />
+ </form>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Forms in fixed toolbar demos</h2>
+ <p>These pages are designed to test fixed toolbars and form elements:
+ <a href="bars-fixed-forms-a.html">demo app</a>,
+ <a href="bars-fixed-forms-b.html">text inputs</a>,
+ <a href="bars-fixed-forms-c.html">search inputs</a>,
+ <a href="bars-fixed-forms-d.html">radio toggles</a>,
+ <a href="bars-fixed-forms-e.html">checkbox toggles</a>,
+ <a href="bars-fixed-forms-f.html">slider</a>,
+ <a href="bars-fixed-forms-g.html">select</a>, and
+ <a href="bars-fixed-forms-h.html">buttons</a>.
+ </p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+
+
+ <h3>Embedded form</h3>
+
+ <form action="#" method="get">
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+ </fieldset>
+ </div>
+ </form>
+
+ <h3>A bit more text</h3>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
+ <form action="#" method="get">
+ <label for="slider-2" class="ui-hidden-accessible">Slider:</label>
+ <input type="range" name="slider" id="slider-2" value="50" min="0" max="100" data-highlight="true" data-mini="true" />
+ </form>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="b">
+ <form action="#" method="get">
+ <label for="select-1" class="select" class="ui-hidden-accessible">Your state:</label>
+ <select name="select-1" id="select-1" data-mini="true">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </form>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Forms in fixed toolbar demos</h2>
+ <p>These pages are designed to test fixed toolbars and form elements:
+ <a href="bars-fixed-forms-a.html">demo app</a>,
+ <a href="bars-fixed-forms-b.html">text inputs</a>,
+ <a href="bars-fixed-forms-c.html">search inputs</a>,
+ <a href="bars-fixed-forms-d.html">radio toggles</a>,
+ <a href="bars-fixed-forms-e.html">checkbox toggles</a>,
+ <a href="bars-fixed-forms-f.html">slider</a>,
+ <a href="bars-fixed-forms-g.html">select</a>, and
+ <a href="bars-fixed-forms-h.html">buttons</a>.
+ </p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+
+
+ <h3>Embedded form</h3>
+
+ <form action="#" method="get">
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+ </fieldset>
+ </div>
+ </form>
+
+ <h3>A bit more text</h3>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
+ <form action="#" method="get">
+ <label for="select-2" class="select" class="ui-hidden-accessible">Your state:</label>
+ <select name="select-2" id="select-2" data-mini="true">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </form>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="b">
+ <form action="#" method="get">
+ <a href="index.html" data-role="button" data-inline="true">Link</a>
+ <button type="submit" data-inline="true">Button</button>
+ <input type="submit" value="Submit" data-inline="true" />
+ <input type="reset" value="Reset" data-inline="true"/>
+ <input type="image" value="Image" data-inline="true" />
+ </form>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Forms in fixed toolbar demos</h2>
+ <p>These pages are designed to test fixed toolbars and form elements:
+ <a href="bars-fixed-forms-a.html">demo app</a>,
+ <a href="bars-fixed-forms-b.html">text inputs</a>,
+ <a href="bars-fixed-forms-c.html">search inputs</a>,
+ <a href="bars-fixed-forms-d.html">radio toggles</a>,
+ <a href="bars-fixed-forms-e.html">checkbox toggles</a>,
+ <a href="bars-fixed-forms-f.html">slider</a>,
+ <a href="bars-fixed-forms-g.html">select</a>, and
+ <a href="bars-fixed-forms-h.html">buttons</a>.
+ </p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+
+
+ <h3>Embedded form</h3>
+
+ <form action="#" method="get">
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+ </fieldset>
+ </div>
+ </form>
+
+ <h3>A bit more text</h3>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
+ <form action="#" method="get">
+ <a href="index.html" data-role="button" data-inline="true">Link</a>
+ <button type="submit" data-inline="true">Button</button>
+ <input type="submit" value="Submit" data-inline="true" />
+ <input type="reset" value="Reset" data-inline="true"/>
+ <input type="image" value="Image" data-inline="true" />
+ </form>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="a">
+ <!-- <input type="submit" value="submitBtn" class="ui-btn-left" /> -->
+
+ <select name="slider2" id="slider2" class="ui-btn-left">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+
+ <button type="submit" class="ui-btn-right">Cancel</button>
+
+ <h1>Fixed + Forms</h1>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <a href="#" data-role="button">Default</a>
+ <a href="#" data-role="button" data-mini="true">Mini True</a>
+ <a href="#" data-role="button" data-mini="false">Mini False</a>
+ </div>
+ </div><!-- /content -->
+
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="f">
+
+ <h1>Fixed toolbars</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Fixed toolbars</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="bars-fixed.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="bars-fixed-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="bars-fixed-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+
+
+
+
+
+ <p>The fixedtoolbar plugin has the following methods:</p>
+
+ <dl>
+
+ <dt><code>show</code> show the toolbar</dt>
+ <dd>
+ <pre><code>
+ $("[data-position='fixed']").fixedtoolbar('show');
+ </code></pre>
+
+<div class="ui-body ui-body-e">
+ <p><strong>Note:</strong>Prior to version 1.1, the following syntax was used to show the toolbars, but it is no longer supported:</p>
+<pre><code>
+$.mobile.fixedToolbars
+ .show(true);
+</code></pre>
+
+
+</div>
+
+ </dd>
+
+ <dt><code>hide</code> hide the toolbar (if it's not a fullscreen toolbar, it'll toggle back to static positioning, which may or may not be hidden from view depending on scroll)</dt>
+ <dd>
+ <pre><code>
+$("[data-position='fixed']").fixedtoolbar('hide');
+ </code></pre>
+ </dd>
+
+ <dt><code>toggle</code> calls either the show or the hide method, depending on whether the toolbar is visible.</dt>
+ <dd>
+ <pre><code>
+$("[data-position='fixed']").fixedtoolbar('toggle');
+ </code></pre>
+ </dd>
+
+ <dt><code>updatePagePadding</code> update the padding (either top or bottom, depending on if the toolbar is a header or a footer) of the page element parent of the toolbar to match the height of the toolbar.</dt>
+ <dd>
+ <pre><code>
+$("[data-position='fixed']").fixedtoolbar('updatePagePadding');
+ </code></pre>
+
+<p>There is also an <code>updatelayout</code> event that can be used to trigger the toolbars to re-position. Developers who are building dynamic applications that inject content into the current page can also manually trigger this <code><a href="../api/events.html">updatelayout</a></code> event to ensure components on the page update in response to the new content that was just added. This event is used internally in the collapsible and listview filter plugins and is powerful because it's not toolbar-specific -- any widget can be built to listen for the <code>updatelayout</code> event to update the widget in response.</p>
+ </dd>
+
+ <dt><code>destroy</code> destroy at fixedtoolbar (restore the element to its initial state)</dt>
+ <dd>
+ <pre><code>
+$("[data-position='fixed']").fixedtoolbar('destroy');
+ </code></pre>
+ </dd>
+
+
+ </dl>
+
+
+
+
+
+
+ </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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
+ <h1>Fixed Footer</h1>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="f">
+
+ <h1>Fixed toolbars</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Fixed toolbars</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="bars-fixed.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="bars-fixed-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="bars-fixed-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The fixedtoolbar plugin has the following options:</p>
+
+
+ <dl>
+
+ <dt><code>visibleOnPageShow</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>This determines whether the toolbar is visible or not when its parent page is shown. This option is also exposed as a data attribute: <code>data-visible-on-page-show="false"</code></p>
+ <pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ visibleOnPageShow: false }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>disablePageZoom</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>This determines whether user-scaling should be disabled on pages that contain fixed toolbars. This option is also exposed as a data attribute: <code>data-disable-page-zoom="false"</code></p>
+ <pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ disablePageZoom: false }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>transition</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "slide" (which ends up using slideup and slidedown)</p>
+ <p>The transition that should be used for showing and hiding a fixed toolbar. Possible values are "none", "fade", and "slide" (or you can write a CSS transition of your own and use that too). This option is also exposed as a data attribute: <code>data-transition="fade"</code></p>
+ <pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ transition: "fade" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>fullscreen</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled, instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions. <a href="bars-fullscreen.html">This page</a> demonstrates toolbars that use the fullscreen option. This option is also exposed as a data attribute: <code>data-fullscreen="true"</code></p>
+ <pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ fullscreen: true }</strong>);</code></pre>
+
+ <p class="ui-body ui-body-e"><strong>Note:</strong>While the data-attribute syntax for this option has not changed, it is now only supported on the toolbar element itself, and not the page element. </p>
+
+ </dd>
+
+ <dt><code>tapToggle</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Enable or disable the user's ability to toggle toolbar visibility with a tap on the screen (or a click, for mouse users). This option is also exposed as a data attribute: <code>data-tap-toggle="true"</code></p>
+ <pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ tapToggle: true }</strong>);</code></pre>
+
+ <div class="ui-body ui-body-e">
+ <p><strong>Note:</strong> This behavior was formerly configurable as follows, but as of version 1.1 this syntax is no longer supported:
+<pre><code>
+$.mobile.fixedToolbars
+ .setTouchToggleEnabled(false);
+</code></pre>
+
+ </div>
+
+ </dd>
+
+
+
+ <dt><code>tapToggleBlacklist</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "a, .ui-header-fixed, .ui-footer-fixed"</p>
+ <p>A list of jQuery selectors that, when tapped, will not cause the toolbars to be toggled.</p>
+ <pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>hideDuringFocus</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "input, select, textarea"</p>
+ <p>A list of jQuery selectors that should cause the toolbars to hide while focused, except if they are in a fixed toolbar.</p>
+ <pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ hideDuringFocus: "input, select, textarea" }</strong>);</code></pre>
+ </dd>
+
+
+ <dt><code>updatePagePadding</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Since toolbars can vary in height depending on the content they contain, this option automatically updates the padding on the page element to ensure that fixed toolbars have adequate space in the document when they are statically positioned, and when scrolled to the top or bottom of the page. When enabled, the padding updates during many operations, such as pageshow, during page transitions, and on resize and orientationchange. As an optimization, we would recommend that you consider disabling this option and adding a rule to your CSS to set the padding of the page div to match the EM height of your toolbars, such as <code>.ui-page-header-fixed { padding-top: 4.5em; }</code>. This option is also exposed as a data attribute: <code>data-update-page-paddinge="false"</code></p>
+ <pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ updatePagePadding: false }</strong>);</code></pre>
+ </dd>
+
+
+ <dt><code>supportBlacklist</code> <em>function</em></dt>
+ <dd>
+ <p class="default">default: function that returns a boolean value</p>
+ <p>CSS <code>position: fixed</code> support is very difficult to test; in fact, at the time of version 1.1 release, there was no known way to reasonably test for fixed support without turning up false positives or negatives in certain popular browsers. This option is a function that attempts to opt-out some popular platforms that are known to be troublesome with <code>position: fixed</code> . Often, these platforms support <code>position: fixed</code> partially, which can be worse than not supporting it at all. If overriding this option with your own blacklist logic, you simply need to provide a function that returns a true or false result when called upon initialization. You must set it on mobileinit, so that it applies when the plugin is initially created.</p>
+ <pre><code>
+$( document ).bind("mobileinit", function(){
+ $.mobile.fixedtoolbar.prototype.options.supportBlacklist = function(){
+ var result;
+ // logic to determine whether result should be true or false
+ return result;
+ };
+})</code></pre>
+ </dd>
+
+
+ <dt><code>initSelector</code> <em>CSS selector string</em></dt>
+ <dd>
+ <p class="default">default: ":jqmData(position='fixed')"</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as fixed toolbars. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+ <pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.fixedtoolbar.prototype.options.initSelector = ".myselector";</strong>
+});
+</code></pre>
+ </dd>
+
+
+
+ </dl>
+
+
+ </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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
+ <h1>Fixed Footer</h1>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fixed Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="f">
+ <h1>Fixed toolbars</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Fixed toolbars</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="bars-fixed.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="bars-fixed-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="bars-fixed-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+
+ <p>In browsers that support CSS <code>position: fixed</code> (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page. </p>
+
+ <p>To enable this behavior on a header or footer, add the <code>data-position="fixed"</code> attribute to a jQuery Mobile header or footer element.</p>
+
+ <p>Fixed header markup example:</p>
+ <pre><code>
+<div data-role="header" <strong>data-position="fixed"</strong>>
+ <h1>Fixed Header!</h1>
+</div>
+ </code></pre>
+
+ <p>Fixed footer markup example:</p>
+ <pre><code>
+<div data-role="footer" <strong>data-position="fixed"</strong>>
+ <h1>Fixed Footer!</h1>
+</div>
+ </code></pre>
+
+ <h2>Fullscreen Toolbars</h2>
+ <p><a href="bars-fullscreen.html">Fullscreen</a> fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. Instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.</p>
+
+ <p>To enable this option on a fixed header or footer, add the <code>data-fullscreen</code> attribute to the element.</p>
+
+ <pre><code>
+<div data-role="header" data-position="fixed" data-fullscreen="true">
+ <h1>Fixed Header!</h1>
+</div>
+ </code></pre>
+
+
+ <h2>Forms in toolbars</h2>
+
+ <p>While all form elements are now tested to work correctly within <em>static</em> toolbars as of jQuery Mobile 1.1, we recommend extensive testing when using form elements within <em>fixed</em> toolbars or within any <code>position: fixed</code> elements. This can potentially trigger a number of unpredictable issues in various mobile browsers, Android 2.2/2.3 in particular (detailed in <b>Known issues in Android 2.2/2.3</b>, below).</p>
+
+ <h2>Changes in jQuery Mobile 1.1</h2>
+
+ <p>Prior to version 1.1, jQuery Mobile used dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers supported the <code>position:fixed</code> CSS property, and simulating fixed support through the use of "fake" JavaScript overflow-scrolling behavior would have reduced our browser support reach, in addition to feeling unnatural on certain platforms. This behavior was not ideal, and jQuery Mobile 1.1 took a new approach to fixed toolbars that allows much broader support. The framework now offers true fixed toolbars on many popular platforms, while gracefully degrading non-supporting platforms to static positioning.</p>
+
+ <h3>Polyfilling older platforms</h3>
+ <p>The fixed toolbar plugin degrades gracefully in platforms that do not support CSS <code>position:fixed</code> properly, such as iOS4.3. If you still need to support fixed toolbars on that platform (with the show/hide behavior) included in previous releases, Filament Group has developed a polyfill that you can use.</p>
+
+ <ul>
+ <li><a href="https://github.com/filamentgroup/jQuery-Mobile-FixedToolbar-Legacy-Polyfill">Github code repository with CSS, and JavaScript required for the fixed toolbars polyfill</a></li>
+ <li><a href="http://filamentgroup.github.com/jQuery-Mobile-FixedToolbar-Legacy-Polyfill/">Preview URL using the code in the repo above</a></li>
+ </ul>
+
+ <p>Just include the CSS and JS files after your references to jQuery Mobile and Fixed toolbars will work similar to jQuery Mobile 1.0 in iOS4.3, with the inclusion of the new API for the 1.1 fixedtoolbar plugin.</p>
+
+ <p>If you have any improvements to suggest, fork the <a href="https://github.com/filamentgroup/jQuery-Mobile-FixedToolbar-Legacy-Polyfill">gist</a> on github and let us know!</p>
+
+ <h2>Known issue with form controls inside fixed toolbars, and programatic scroll</h2>
+ <p>An obscure issue exists in iOS5 and some Android platforms where form controls placed inside fixed-positioned containers can lose their hit area when the window is programatically scrolled (using <code>window.scrollTo</code> for example). This is not an issue specific to jQuery Mobile, but because of it, we recommend not programatically scrolling a document when using form controls inside jQuery Mobile fixed toolbars. <a href="https://github.com/scottjehl/Device-Bugs/issues/1">This ticket</a> from the <a href="https://github.com/scottjehl/Device-Bugs/">Device Bugs project</a> tracker explains this problem in more detail.</p>
+
+
+ <h2>Known issues in Android 2.2/2.3</h2>
+ <p>Android 2.2/2.3’s implementation of <code>position: fixed;</code> can, in conjunction with seemingly unrelated styles and markup patterns, cause a number of strange issues, particularly in the case of <code>position: absolute</code> elements inside of <code>position: fixed</code> elements. While we’ve done our best to work around a number of these unique bugs within the scope of the library, custom styles may cause a number of issues.</p>
+ <ul>
+ <li>Form elements elsewhere on the page—select menus in particular—can fail to respond to user interaction when an <em>empty</em> absolute positioned element is placed within a fixed position element. In rare cases—and specific to Android 2.2—this can cause <em>entire pages</em> to fail to respond to user interaction. This can seemingly be solved by adding any character to the absolute positioned element, including a non-breaking space, and in some cases even whitespace.</li>
+ <li>The above-described issue can also be triggered by an absolute positioned image inside of a fixed position element, but <em>only</em> when that image is using something <em>other than its inherent dimensions</em>. If a height or width is specified on the image using CSS, or the image src is invalid (thus having no inherent height and width), this issue can occur. If an image that is inherently, say, 50x50 pixels is placed in a fixed element and left at its inherent dimensions, this issue does not seem to occur.</li>
+ <li>When a <code>position: fixed</code> element appears anywhere on a page, most 2D CSS transforms will fail. Oddly, only <code>translate</code> transforms seem unaffected by this. Even more oddly, this issue is solved by setting a CSS <code>opacity</code> of .9 or below on the parent of the fixed element.</li>
+ <li>Combinations of <code>position: fixed</code> and overflow properties are best avoided, as both have been known to cause unpredictable issues in older versions of Android OS.</li>
+ <li>Any element that triggers the on-screen keyboard, when placed inside a <code>position: fixed</code> element, will fail to respond to user input when using anything other than the default keyboard. This includes Swype, XT9 or, it seems, any input method apart from the standard non-predictive keyboard.</li>
+ </ul>
+
+ <p>While we will continue to try to find ways to mitigate these bugs as best we can, we currently advise against implementing fixed toolbars containing complicated user styles and form elements without extensive testing in all versions of Android’s native browser.</p>
+
+ <p>The following pages are designed to test fixed toolbars and form elements:
+ <a href="bars-fixed-forms-a.html">demo app</a>,
+ <a href="bars-fixed-forms-b.html">text inputs</a>,
+ <a href="bars-fixed-forms-c.html">search inputs</a>,
+ <a href="bars-fixed-forms-d.html">radio toggles</a>,
+ <a href="bars-fixed-forms-e.html">checkbox toggles</a>,
+ <a href="bars-fixed-forms-f.html">slider</a>,
+ <a href="bars-fixed-forms-g.html">select</a>, and
+ <a href="bars-fixed-forms-h.html">buttons</a>.</p>
+
+
+<div class="ui-body ui-body-e">
+ <h2>No longer supported: touchOverflowEnabled</h2>
+
+ <p>Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property <code>overflow-scrolling: touch</code>, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under <code>$.support</code> and we have no plans to remove that test at this time. </p>
+</div>
+ <hr>
+
+
+ <h2>The rest of the page is just sample content to make the page very long</h2>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+
+
+ <h3>And an inset list</h3>
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ <br />
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+
+
+ <h3>Embedded form</h3>
+
+ <form action="#" method="get">
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </div>
+
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+ </fieldset>
+ </div>
+ </form>
+
+ <h3>A bit more text</h3>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" data-theme="a" data-position="fixed">
+ <h1>Fixed Footer</h1>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Fullscreen Fixed toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" class="type-interior">
+
+ <div data-role="header" data-position="fixed" data-theme="f" data-fullscreen="true">
+ <h1>Fullscreen fixed header</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <img src="images/photo-run.jpeg" alt="Photo Run">
+
+ <p class="ui-body">This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively — a common scenario for photo, image or video viewers.</p>
+
+ <p class="ui-body">To enable this toolbar feature type, you apply the <code>data-fullscreen="true"</code> attribute and the <code>data-position="fixed"</code> attribute to both the header and footer <code>div</code> elements, or whichever you want to be full-screen. </p>
+
+ <p class="ui-body">Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content, so not all content will be accessible with the toolbars open, just as shown in this demo.</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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed" data-fullscreen="true">
+ <h1>Fullscreen Fixed Footer</h1>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Theming Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Bar theming </h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+
+ <div data-role="content">
+ <div class="content-primary">
+ <p>Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. </p>
+
+
+ <h2>Theming headers and footers</h2>
+ <p>To set the header or footer bars to a different color in your theme, add the <code> data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
+
+<div class="highlight">
+<pre>
+<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span> <strong><span class="na">data-theme=</span><span class="s">"b"</span></strong><span class="nt">></span>
+ <span class="nt"><h1></span>Page Title<span class="nt"></h1></span>
+<span class="nt"></div></span>
+</pre>
+</div>
+
+
+ <h2>Theming buttons in toolbars</h2>
+
+ <p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code> data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the <code> data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p>
+
+<div class="highlight">
+<pre>
+<span class="nt"><a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <strong><span class="na">data-theme=</span><span class="s">"b"</span></strong><span class="nt">></span>Save<span class="nt"></a></span>
+</pre>
+</div>
+
+
+
+ <h2>Theme variations</h2>
+ <p>This is a demo of the variation that can be achieved by tweaking the theme swatches and buttons inside the headers and footers.</p>
+ <h3>Headers</h3>
+
+
+ <div data-role="header">
+ <h1>Bar theme "a"</h1>
+ <a href="index.html" data-icon="plus" data-theme="c">New</a>
+ </div>
+
+ <div data-role="header">
+ <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
+ <h1>Bar theme "a"</h1>
+ <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
+ </div>
+
+ <div data-role="header" data-theme="b">
+ <h1>Bar theme "b"</h1>
+ <a href="index.html" data-icon="plus" data-theme="a">New</a>
+ </div>
+
+ <div data-role="header" data-theme="b">
+ <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
+ <h1>Bar theme "b"</h1>
+ <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="d">Save</a>
+ </div>
+
+ <div data-role="header" data-theme="c">
+ <h1>Bar theme "c"</h1>
+ <a href="index.html" data-icon="plus" data-theme="a">New</a>
+ </div>
+
+ <div data-role="header" data-theme="c">
+ <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
+ <h1>Bar theme "c"</h1>
+ <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
+ </div>
+
+ <div data-role="header" data-theme="d">
+ <h1>Bar theme "d"</h1>
+ <a href="index.html" data-icon="plus" data-theme="a">New</a>
+ </div>
+
+ <div data-role="header" data-theme="d">
+ <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
+ <h1>Bar theme "d"</h1>
+ <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
+ </div>
+
+ <h3>Footers</h3>
+ <p>These are examples of a footer with link buttons inside. Note that footers do not have the same prescriptive markup conventions as headers with button slots so use <a href="../content/content-grids.html">layout grids</a> or custom styles to achieve the design you want.</p>
+
+
+
+ <div data-role="footer" data-theme="a">
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
+ <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
+ <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
+ <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
+ </div>
+
+ <div data-role="footer" data-theme="b">
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
+ <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
+ <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
+ <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
+ </div>
+
+ <div data-role="footer" data-theme="c">
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
+ <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
+ <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
+ <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
+ </div>
+
+ <div data-role="footer" data-theme="d">
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
+ <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
+ <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
+ <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
+ </div>
+
+ <div data-role="footer" data-theme="e">
+ <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
+ <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
+ <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
+ <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
+ </div>
+
+
+ </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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li data-theme="a"><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Toolbar Basics</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Toolbar basics</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Toolbar types</h2>
+
+ <p>In jQuery Mobile, there are two standard types of toolbars: Headers and Footers. </p>
+
+<ul> <li>The <a href="docs-headers.html"><strong>Header bar </strong></a> serves as the page title, is usually the first element inside each <a href="../pages/page-anatomy.html">mobile page</a>, and typically contains a page title and up to two buttons.</li>
+
+ <li>The <a href="docs-footers.html"><strong>Footer bar</strong></a> is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.</li>
+</ul>
+
+ <p>It's very common to have a horizontal navigation or tab bar inside the header or footer; jQuery Mobile includes a <a href="docs-navbar.html"><strong>navbar widget </strong></a> that turns an unordered list of links into a horizontal button bar, which works well in these instances.</p>
+
+ <p>View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to toolbars.</p>
+
+
+ <h2>Toolbar positioning options</h2>
+
+ <p>Header and footers can be positioned on the page in a few different ways. By default, the toolbars use the <strong>"inline" positioning</strong> mode. In this mode, the headers and footer sit in the natural document flow (the default HTML behavior), which ensures that they are visible on all devices, regardless of JavaScript and CSS positioning support.</p>
+
+ <p>A <a href="bars-fixed.html"><strong>"fixed" positioning mode</strong></a> fixes the toolbars to either the top or bottom of the viewport on browsers that support CSS fixed positioning (which includes most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others). In browsers that don't support fixed positioning, the toolbars will fall back to static, inline position in the page.</p>
+ <p> When tap-toggling is enabled, tapping the screen will toggle the visibility of the fixed toolbars. Tapping the page when the toolbars aren't visible brings them into view. Tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate. One caveat is that fixed toolbars never truly hide, but toggle between fixed and static positioning. This means that if you're at the top of a page, you can't tap-toggle a header toolbar out of view, as it instead toggles into its spot in the document flow at the top of the page. The same goes for fixed footers when scrolled to the very bottom of a document.</p>
+ <p>To set this behavior on a header or footer, add the <code> data-position="fixed"</code> attribute to the header or footer element.</p>
+
+ <p>A <a href="bars-fullscreen.html"><strong>"fullscreen" position mode</strong></a> works just like the fixed mode except that the toolbars overlay the page content, rather than reserving a place in the document when not in fixed mode. This is useful for immersive apps like photo or video viewers where you want the content to fill the whole screen and toolbars can be hidden or summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content so this is best used for specific situations.</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">Toolbars</li>
+ <li data-theme="a"><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Footer Configuration</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Footers</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Footer bar structure</h2>
+
+ <p>The <code>footer</code> bar has the same basic structure as the <a href="docs-headers.html">header</a> except it uses the <code> data-role</code> attribute value of <code>footer</code>. </p>
+
+<div class="highlight">
+<pre>
+<span class="nt"><div</span> <strong><span class="na">data-role=</span><span class="s">"footer"</span></strong><span class="nt">></span>
+ <span class="nt"><h4></span>Footer content<span class="nt"></h4></span>
+<span class="nt"></div></span>
+</pre>
+</div>
+
+
+ <p>The <code>footer</code> toolbar will be be themed with the "a" swatch by default (black in the default theme) but you can easily <a href="bars-themes.html">set the theme swatch color</a>.</p>
+
+ <div data-role="footer">
+ <h4>Footer content</h4>
+ </div>
+
+ <p>The page footer is very similar to the header in terms of options and configuration. The primary difference is that the footer is designed to be less structured than the header to allow for more flexibility, so the framework doesn't automatically place buttons to the left or right based on source order as it does in the header. </p>
+ <p>Since footers do not have the same prescriptive markup conventions as headers, we recommend using layout <a href="../content/content-grids.html">grids</a> or writing custom styles to achieve the design you want.</p>
+
+
+
+ <h2>Adding buttons</h2>
+
+ <p>Any link or valid <a href="../buttons/buttons-types.html">button markup</a> added to the footer will automatically be turned into a button. To save space, buttons in toolbars are automatically set to <a href="../buttons/buttons-inline.html">inline styling</a> so the button is only as wide as the text and icons it contains. </p>
+
+ <p>By default, toolbars don't have any padding to accommodate nav bars and other widgets. To include padding on the bar, add a <code>class="ui-bar"</code> to the footer.</p>
+
+
+<pre><code>
+<div data-role="footer" class="ui-bar">
+ <a href="index.html" data-role="button" data-icon="plus">Add</a>
+ <a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
+ <a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
+</div>
+</code></pre>
+
+ <p>This creates this toolbar with buttons sitting in a row</p>
+
+ <div data-role="footer" class="ui-bar">
+ <a href="index.html" data-icon="plus">Add</a>
+ <a href="index.html" data-icon="arrow-u">Up</a>
+ <a href="index.html" data-icon="arrow-d">Down</a>
+ </div>
+
+ </p>Note that <code>.ui-bar</code> should not be added to header or footer bars that span the full width of the page, as the additional padding will cause a full-width element to break out of its parent container. To add padding inside of a full-width toolbar, wrap the toolbar's contents in an element and apply the padding to that element.</p>
+
+ <p>To group buttons together into a button set, wrap the links in a wrapper with <code> data-role="controlgroup"</code> and <code>data-type="horizontal"</code> attributes.</p>
+
+<code><div data-role="controlgroup" data-type="horizontal"></code>
+
+ <p>This creates a grouped set of buttons:</p>
+
+ <div data-role="footer" class="ui-bar">
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="index.html" data-icon="plus">Add</a>
+ <a href="index.html" data-icon="arrow-u">Up</a>
+ <a href="index.html" data-icon="arrow-d">Down</a>
+ </div>
+ </div>
+
+
+
+ <h2>Adding form elements</h2>
+
+ <p><a href="../forms/forms-all.html">Forms</a> elements and other content can also be added to toolbars. Here is an example of a <a href="../forms/selects/index.html">select</a> menu inside a footer bar. We recommend using <a href="../forms/forms-all-mini.html" >mini-sized</a> form elements in toolbars by adding the <code>data-mini="true"</code> attribute:</p>
+
+
+ <div data-role="footer" class="ui-bar">
+ <label for="select-choice-1">Shipping:</label>
+ <select name="select-choice-1" id="select-choice-1" data-theme="a" data-mini="true">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+
+
+
+
+
+ <h2>Fixed & Persistent footers</h2>
+ <p>In situations where the footer is a global navigation element, you may want it to appear <a href="bars-fixed.html">fixed</a> so it doesn't scroll out of view. It's also possible to make a fixed toolbar <a href="footer-persist-d.html">persistent</a> so it appears to not move between <a href="../pages/page-transitions.html">page transitions</a>. This can be accomplished by using the persistent footer feature included in jQuery Mobile.</p>
+
+ <p>To make a footer persistent between transitions, add the <code>data-id</code> attribute to the footer of all relevant pages and use the same <code>id</code> value for each. For example, by adding <code>data-id="myfooter"</code> to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. <strong>This effect will only work correctly if the header and footer toolbars are set to <code>data-position="fixed"</code> so they are in view during the transition.</strong></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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li data-theme="a"><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Header Bars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Headers</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Header structure</h2>
+ <p>The <code>header</code> is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the the left and/or right of the title for navigation or actions. Headers can optionally be positioned as <a href="bars-fixed.html">fixed</a> so they remain at the top of the screen at all times instead of scrolling with the page.</p>
+
+ <p>The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.</p>
+
+<div class="highlight">
+<pre>
+<span class="nt"><div</span> <strong><span class="na">data-role=</span><span class="s">"header"</span></strong><span class="nt">></span>
+ <span class="nt"><h1></span>Page Title<span class="nt"></h1></span>
+<span class="nt"></div></span>
+</pre>
+</div>
+
+ <h2>Default header features</h2>
+ <p>The <code>header</code> toolbar is themed with the "a" swatch by default (black in the default theme) but you can easily <a href="bars-themes.html">set the theme swatch color</a>.</p>
+
+
+
+ <div data-role="header">
+ <h1>Page title</h1>
+ </div>
+
+
+ <h2>Adding buttons</h2>
+
+
+
+
+
+ <p>In the standard header configuration, there are slots for buttons on either side of the text heading. Each button is typically an <code>anchor</code> element, but any valid <a href="../buttons/buttons-types.html">button markup</a> will work. To save space, buttons in toolbars are set to <a href="../buttons/buttons-inline.html">inline styling</a> so the button is only as wide as the text and icons it contains. </p>
+
+
+
+
+ <h3>Default button positioning</h3>
+
+ <p>The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order. </p>
+
+
+<pre><code>
+<div data-role="header" data-position="inline">
+ <a href="index.html" data-icon="delete">Cancel</a>
+ <h1>Edit Contact</h1>
+ <a href="index.html" data-icon="check">Save</a>
+</div>
+</code></pre>
+
+
+ <div data-role="header">
+ <a href="index.html" data-icon="delete">Cancel</a>
+ <h1>Edit Contact</h1>
+ <a href="index.html" data-icon="check">Save</a>
+ </div>
+
+ <h3>Making buttons visually stand out</h3>
+
+ <p>Buttons automatically adopt the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out. Here, we add the <code> data-theme</code> attribute and set the color swatch for the button to "b" to make the "Save" button pop.</p>
+
+ <pre><code>
+<div data-role="header" data-position="inline">
+ <a href="index.html" data-icon="delete">Cancel</a>
+ <h1>Edit Contact</h1>
+ <a href="index.html" data-icon="check" data-theme="b">Save</a>
+</div>
+</code></pre>
+
+
+ <div data-role="header">
+ <a href="index.html" data-icon="delete">Cancel</a>
+ <h1>Edit Contact</h1>
+ <a href="index.html" data-icon="check" data-theme="b">Save</a>
+ </div>
+
+ <h3>Controlling button position with classes</h3>
+
+ <p>The button position can also be controlled by adding classes to the button anchors, rather than relying on source order. This is especially useful if you only want a button in the right slot. To specify the button position, add the class of <code>ui-btn-left</code> or <code>ui-btn-right</code> to the anchor.</p>
+
+
+
+
+<div class="highlight">
+<pre><code>
+<div data-role="header" data-position="inline">
+ <h1>Page Title</h1>
+ <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
+</div>
+</code></pre>
+</div>
+
+ <div data-role="header" >
+ <h1>Page Title</h1>
+ <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
+ </div>
+
+
+ <h3>Adding buttons to toolbars without heading</h3>
+
+ <p>The heading in the header bar has some margin that will give the bar its height. If you choose not to use a heading, you will need to add an element with <code>class="ui-title"</code> so that the bar can get the height and display correctly.</p>
+
+
+<div class="highlight">
+<pre><code>
+<div data-role="header" data-position="inline">
+ <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
+ <span class="ui-title" />
+</div>
+
+</code></pre>
+</div>
+
+ <div data-role="header" >
+ <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
+ <span class="ui-title" />
+ </div>
+
+
+
+ <h2>Adding Back buttons</h2>
+
+ <p>jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app webview. The framework automatically generates a "back" button on a header when the page plugin's <code>addBackBtn</code> option is true. This can also be set via markup if the page div has a <code>data-add-back-btn="true"</code> attribute. </p>
+
+
+ <p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page. This will allow the feature to work for users in C-Grade browsers.</strong></p>
+ <p>If you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute.</p>
+
+ <h2>Customizing the back button text</h2>
+
+ <p>If you'd like to configure the back button text, you can either use the <code>data-back-btn-text="previous"</code> attribute on your page element, or set it programmatically via the page plugin's options: <br /><code>$.mobile.page.prototype.options.backBtnText = "previous";</code></p>
+
+ <h3>Default back button style</h3>
+ <p>If you'd like to configure the back button role-theme, you can use: <br /><code>$.mobile.page.prototype.options.backBtnTheme = "a";</code><br />
+ If you're doing this programmatically, set this option inside the mobileinit event handler.</p>
+
+ <h2>Custom header configurations</h2>
+ <p>If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in any container, such as <code>div</code>. The plugin won't apply the automatic button logic to the wrapped content inside the header container so you can write custom styles for laying out the content in your header.</p>
+
+ <p>It's also possible to create custom bars without using the header data-role at all. For example, start with any container and add the <code>ui-bar</code> class to apply standard bar padding and add the <code>ui-bar-b</code> class to assign the bar swatch styles from your theme. (The "b" can be any swatch letter.)</p>
+
+ <pre><code>
+<div <strong>class="ui-bar ui-bar-b"</strong>>
+ <h3>I'm just a div with bar classes and a <a href="#" data-role="button">Button</a></h3>
+</div>
+ </code></pre>
+
+ <p>This will produce this bar:</p>
+ <div class="ui-bar ui-bar-b">
+ <h3>I'm just a div with bar classes and a mini inline <a href="#" data-role="button" data-inline="true" data-mini="true">Button</a></h3>
+ </div>
+
+ <p>Note that <code>.ui-bar</code> should not be added to header or footer bars that span the full width of the page, as the additional padding will cause a full-width element to break out of its parent container. To add padding inside of a full-width toolbar, wrap the toolbar's contents in an element and apply the padding to that element instead.</p>
+
+ <p>By writing some simple styles, it's easy to build message bars like this:</p>
+ <!-- Yes, the inline styles aren't recommended in a real system but they are used to simply illustrate how to tweak CSS -->
+ <div class="ui-bar ui-bar-e">
+
+ <h3 style="display:inline-block; width:92%; margin-top:5px;">This is an alert message. </h3><div style="display:inline-block; width:8%; margin-top:0px;"><a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Dismiss</a></div><p style="font-size:85%; margin:-.3em 0 1em;">And here's some additional text in a paragraph.</p>
+ </div>
+ </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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li data-theme="a"><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Navbar</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Navbar</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>Simple navbar</h2>
+
+ <p>jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar, typically within a header or footer. There is also a <a href="footer-persist-a.html">persistent navbar</a> variation that works more like a tab bar that stays fixed as you navigate across pages.</p>
+ <p>A navbar is coded as an unordered list of links wrapped in a container element that has the <code> data-role="navbar"</code> attribute. To set one of the links to the active (selected) state, add <code>class="ui-btn-active"</code> to the anchor. In this example, we have a two-button navbar in the footer with the "One" item set to active:</p>
+
+<pre><code>
+<strong><div data-role="navbar"></strong>
+ <ul>
+ <li><a href="a.html" class="ui-btn-active">One</a></li>
+ <li><a href="b.html">Two</a></li>
+ </ul>
+<strong></div><!-- /navbar --></strong>
+</code></pre>
+
+ <p>The navbar items are set to divide the space evenly so in this case, each button is 1/2 the width of the browser window:</p>
+
+
+ <div data-role="navbar">
+ <ul>
+ <li><a href="#" class="ui-btn-active">One</a></li>
+ <li><a href="#">Two</a></li>
+ </ul>
+ </div><!-- /navbar -->
+
+
+ <p>Adding a third item will automatically make each button 1/3 the width of the browser window:</p>
+
+
+ <div data-role="navbar">
+ <ul>
+ <li><a href="#" class="ui-btn-active">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </div><!-- /navbar -->
+
+
+ <p>Adding a fourth more item will automatically make each button 1/4 the width of the browser window:</p>
+
+
+ <div data-role="navbar" data-grid="c">
+ <ul>
+ <li><a href="#" class="ui-btn-active">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ <li><a href="#">Four</a></li>
+ </ul>
+ </div><!-- /navbar -->
+
+
+ <p>The navbar maxes out with 5 items, each 1/5 the width of the browser window:</p>
+
+
+ <div data-role="navbar" data-grid="d">
+ <ul>
+ <li><a href="#" class="ui-btn-active">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ <li><a href="#">Four</a></li>
+ <li><a href="#">Five</a></li>
+ </ul>
+ </div><!-- /navbar -->
+
+
+ <p>If more than 5 items are added, the navbar will simply wrap to multiple lines:</p>
+
+ <div data-role="navbar">
+ <ul>
+ <li><a href="#" class="ui-btn-active">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ <li><a href="#">Four</a></li>
+ <li><a href="#">Five</a></li>
+ <li><a href="#">Six</a></li>
+ <li><a href="#">Seven</a></li>
+ <li><a href="#">Eight</a></li>
+ <li><a href="#">Nine</a></li>
+ <li><a href="#">Ten</a></li>
+ </ul>
+ </div><!-- /navbar -->
+
+ <p>Navbars with 1 item will simply render as 100%.</p>
+
+ <div data-role="navbar">
+ <ul>
+ <li><a href="#" class="ui-btn-active">One</a></li>
+ </ul>
+ </div><!-- /navbar -->
+
+ <h2>Navbars in headers</h2>
+
+ <p>If you want to add a navbar to the top of the page, you can still have a page title and buttons. Just add the navbar container inside the header block, right after the title and buttons in the source order.</p>
+
+ <div data-role="header">
+ <h1>I'm a header</h1>
+ <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
+
+ <div data-role="navbar">
+ <ul>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /header -->
+
+ <h2>Navbars in footers</h2>
+
+ <p>If you want to add a navbar to the bottom of the page so it acts more like a tab bar, simply wrap the navbar in a container with a <code>data-role="footer"</code></p>
+<pre><code>
+<div data-role="footer">
+ <div data-role="navbar">
+ <ul>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </div><!-- /navbar -->
+</div><!-- /footer -->
+</code></pre>
+ <div data-role="footer">
+ <div data-role="navbar">
+ <ul>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
+
+ <h2>Icons in navbars</h2>
+
+ <p>Icons can be added to navbar items by adding the <code> data-icon</code> attribute specifying a <a href="../buttons/buttons-icons.html">standard mobile icon</a> to each anchor. By default, icons are added above the text (<code>data-iconpos="top"</code>). The following examples add icons to a navbar in a footer.</p>
+
+ <div data-role="footer">
+ <div data-role="navbar">
+ <ul>
+ <li><a href="#" data-icon="grid">Summary</a></li>
+ <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
+ <li><a href="#" data-icon="gear">Setup</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
+
+ <p>The icon position is set <em>on the navbar container</em> instead of for individual links within for visual consistency. For example, to place the icons below the labels, add the <code> data-iconpos="bottom"</code> attribute to the navbar container.</p>
+<pre><code>
+<div data-role="navbar" <strong>data-iconpos="bottom"</strong>>
+</code></pre>
+ <p>This will result in a bottom icon alignment:</p>
+ <div data-role="footer">
+ <div data-role="navbar" data-iconpos="bottom">
+ <ul>
+ <li><a href="#" data-icon="grid">Summary</a></li>
+ <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
+ <li><a href="#" data-icon="gear">Setup</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
+
+ <p>The icon position can be set to <code>data-iconpos="left"</code>:</p>
+
+ <div data-role="footer">
+ <div data-role="navbar" data-iconpos="left">
+ <ul>
+ <li><a href="#" data-icon="grid">Summary</a></li>
+ <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
+ <li><a href="#" data-icon="gear">Setup</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
+
+ <p>Or the icon position can be set to <code>data-iconpos="right"</code>:</p>
+
+ <div data-role="footer">
+ <div data-role="navbar" data-iconpos="right">
+ <ul>
+ <li><a href="#" data-icon="grid">Summary</a></li>
+ <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
+ <li><a href="#" data-icon="gear">Setup</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
+
+ <h2>Using 3rd party icon sets</h2>
+
+ <p>You can add any of the popular icon libraries like <a href="http://glyphish.com/">Glyphish</a> to achieve the iOS style tab that has large icons stacked on top of text labels. All that is required is a bit of custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons and custom styles (view page source for styles) in our navbar:</p>
+
+
+ <style>
+ .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
+ .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
+ #chat .ui-icon { background: url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
+ #email .ui-icon { background: url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px; }
+ #login .ui-icon { background: url(glyphish-icons/30-key.png) 50% 50% no-repeat; background-size: 12px 26px; }
+ #beer .ui-icon { background: url(glyphish-icons/88-beermug.png) 50% 50% no-repeat; background-size: 22px 27px; }
+ #coffee .ui-icon { background: url(glyphish-icons/100-coffee.png) 50% 50% no-repeat; background-size: 20px 24px; }
+ #skull .ui-icon { background: url(glyphish-icons/21-skull.png) 50% 50% no-repeat; background-size: 22px 24px; }
+ </style>
+
+ <div data-role="footer" class="nav-glyphish-example">
+ <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
+ <ul>
+ <li><a href="#" id="chat" data-icon="custom">Chat</a></li>
+ <li><a href="#" id="email" data-icon="custom">Email</a></li>
+ <li><a href="#" id="skull" data-icon="custom">Danger</a></li>
+ <li><a href="#" id="beer" data-icon="custom">Beer</a></li>
+ <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <p>Icons by Joseph Wain / <a href="http://glyphish.com/">glyphish.com</a>. Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons Attribution 3.0 United States License</a>.</p>
+
+
+ <h2>Theming navbars</h2>
+
+ <p>Navbars inherit the theme swatch from their parent container, just like buttons. If a navbar is placed in the header or footer toolbar, it will inherit the default toolbar swatch (A) for bars unless you set this in the markup. </p>
+ <p>Here are a few examples of navbars in various container swatches that automatically inherit their parent's swatch letter. Note that in these examples, instead of using a <code>data-theme</code> attribute, we're manually adding the swatch classes to apply the body swatch (<code>ui-body-a</code>) and the class to add the standard body padding (ui-body), but the inheritance works the same way:</p>
+
+ <div class="ui-body-a ui-body">
+ <h3>Swatch A</h3>
+ <div data-role="navbar">
+ <ul>
+ <li><a href="#" data-icon="grid">A</a></li>
+ <li><a href="#" data-icon="star">B</a></li>
+ <li><a href="#" data-icon="gear">C</a></li>
+ <li><a href="#" data-icon="arrow-l">D</a></li>
+ <li><a href="#" data-icon="arrow-r">E</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /container -->
+
+ <div class="ui-body-d ui-body">
+ <h3>Swatch B</h3>
+ <div data-role="navbar">
+ <ul>
+ <li><a href="#" data-icon="grid">A</a></li>
+ <li><a href="#" data-icon="star">B</a></li>
+ <li><a href="#" data-icon="gear">C</a></li>
+ <li><a href="#" data-icon="arrow-l">D</a></li>
+ <li><a href="#" data-icon="arrow-r">E</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /container -->
+
+<p>To set the theme color for a navbar item, add the <code>data-theme</code> attribute to the individual links and specify a theme swatch. Note that applying a theme swatch to the navbar container is <em>not</em> supported.</p>
+ <div data-role="footer">
+ <div data-role="navbar">
+ <ul>
+ <li><a href="#" data-icon="grid"data-theme="a">A</a></li>
+ <li><a href="#" data-icon="star" data-theme="b">B</a></li>
+ <li><a href="#" data-icon="gear" data-theme="c">C</a></li>
+ <li><a href="#" data-icon="arrow-l" data-theme="d">D</a></li>
+ <li><a href="#" data-icon="arrow-r" data-theme="e">E</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
+
+
+ </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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li data-theme="a"><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Persistent footer A</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
+ <h1>Friends</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+
+
+ <ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d"data-filter-placeholder="Search friends...">
+ <li data-role="list-divider">A</li>
+ <li><a href="#">Adam Kinkaid</a></li>
+ <li><a href="#">Alex Wickerham</a></li>
+ <li><a href="#">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="#">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="#">Caleb Booth</a></li>
+ <li><a href="#">Christopher Adams</a></li>
+ <li><a href="#">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="#">David Walsh</a></li>
+ <li><a href="#">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="#">Elizabeth Bacon</a></li>
+ <li><a href="#">Emery Parker</a></li>
+ <li><a href="#">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="#">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="#">Graham Smith</a></li>
+ <li><a href="#">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="#">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="#">Mike Farnsworth</a></li>
+ <li><a href="#">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="#">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="#">Paul Baker</a></li>
+ <li><a href="#">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="#">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="#">Sawyer Wakefield</a></li>
+ </ul>
+
+
+
+
+
+
+
+
+ </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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" data-id="foo1" data-position="fixed">
+ <div data-role="navbar">
+ <ul>
+ <li><a href="footer-persist-a.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Friends</a></li>
+ <li><a href="footer-persist-b.html" data-prefetch="true">Albums</a></li>
+ <li><a href="footer-persist-c.html" data-prefetch="true">Emails</a></li>
+ <li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup">Info</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Persistent footer B</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
+ <h1>Albums</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d" data-filter-placeholder="Search albums..." data-split-icon="gear" data-split-theme="c">
+ <li><a href="#">
+ <img src="../lists/images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="#">
+
+ <img src="../lists/images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="#">
+ <img src="../lists/images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="#">
+ <img src="../lists/images/album-ok.jpg" />
+ <h3>Of The Blue Colour Of The Sky</h3>
+ <p>Ok Go</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="#">
+ <img src="../lists/images/album-ws.jpg" />
+ <h3>Elephant</h3>
+ <p>The White Stripes</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="#">
+ <img src="../lists/images/album-rh.jpg" />
+ <h3>Kid A</h3>
+ <p>Radiohead</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="#">
+ <img src="../lists/images/album-xx.jpg" />
+ <h3>XX</h3>
+ <p>XX</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="#">
+ <img src="../lists/images/album-mg.jpg" />
+ <h3>Congratulations</h3>
+ <p>MGMT</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="#">
+ <img src="../lists/images/album-ag.jpg" />
+ <h3>Ashes Grammar</h3>
+ <p>A Sunny Day in Glasgow</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+
+ <li><a href="index.html">
+ <img src="../lists/images/album-k.jpg" />
+ <h3>Hot Fuss</h3>
+ <p>Killers</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="#">
+ <img src="../lists/images/album-af.jpg" />
+ <h3>The Suburbs</h3>
+ <p>Arcade Fire</p>
+ </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
+ </a></li>
+ </ul>
+
+
+
+ </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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" data-id="foo1" data-position="fixed">
+ <div data-role="navbar">
+ <ul>
+ <li><a href="footer-persist-a.html" data-prefetch="true">Friends</a></li>
+ <li><a href="footer-persist-b.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Albums</a></li>
+ <li><a href="footer-persist-c.html" data-prefetch="true">Emails</a></li>
+ <li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup">Info</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Persistent footer C</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
+ <h1>Inbox</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d" data-filter-placeholder="Search messages...">
+ <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
+ <li><a href="#">
+ <h3>Stephen Weber</h3>
+ <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+ <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+ <p class="ui-li-aside"><strong>6:24</strong>PM</p>
+ </a></li>
+ <li><a href="#">
+ <h3>jQuery Team</h3>
+ <p><strong>Boston Conference Planning</strong></p>
+ <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
+ <p class="ui-li-aside"><strong>9:18</strong>AM</p>
+ </a></li>
+ <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
+ <li><a href="#">
+ <h3>Avery Walker</h3>
+ <p><strong>Re: Dinner Tonight</strong></p>
+ <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
+ <p class="ui-li-aside"><strong>4:48</strong>PM</p>
+ </a></li>
+ <li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
+ <li><a href="#">
+ <h3>Amazon.com</h3>
+ <p><strong>4-for-3 Books for Kids</strong></p>
+ <p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
+ <p class="ui-li-aside"><strong>12:47</strong>PM</p>
+ </a></li>
+ <li><a href="#">
+ <h3>Mike Taylor</h3>
+ <p><strong>Re: This weekend in Maine</strong></p>
+ <p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
+ <p class="ui-li-aside"><strong>6:24</strong>AM</p>
+ </a></li>
+ <li><a href="#">
+ <h3>Redfin</h3>
+ <p><strong>Redfin listing updates for today</strong></p>
+ <p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
+ <p class="ui-li-aside"><strong>5:52</strong>AM</p>
+ </a></li>
+ <li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
+ <li><a href="index.html">
+ <h3>Angela Smith</h3>
+ <p><strong>Link Request</strong></p>
+ <p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
+ <p class="ui-li-aside"><strong>6:24</strong>AM</p>
+ </a></li>
+ <li><a href="index.html">
+ <h3>Mike Taylor</h3>
+ <p><strong>This weekend in Maine</strong></p>
+ <p>Sounds good, let me check into our plans.</p>
+ <p class="ui-li-aside"><strong>6:24</strong>AM</p>
+ </a></li>
+ </ul>
+
+ </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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" data-id="foo1" data-position="fixed">
+ <div data-role="navbar">
+ <ul>
+ <li><a href="footer-persist-a.html" data-prefetch="true">Friends</a></li>
+ <li><a href="footer-persist-b.html" data-prefetch="true">Albums</a></li>
+ <li><a href="footer-persist-c.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Emails</a></li>
+ <li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup">Info</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Persistent footer C</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
+ <h1>Info</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h2>About persistent toolbars</h2>
+ <p>These pages are a demo of persistent toolbars. Click on any of the links in the footer, and you'll see the page content transition, but both the persistent header and footer on these pages remains in place durning the animation to a new HTML page.</p>
+ <p>To tell the framework to apply the persistent behavior, add a <code>data-id</code> attribute to the footer of all HTML pages in the navigation set to the same ID. It's that simple: if the page you're navigating to has a header or footer with the same <code>data-id</code>, the toolbars will appear fixed outside of the transition. Each of these pages has a different transition to test out how this works.</p>
+
+ <p>Typically, the persistent toolbar technique will be combined with fixed positioning. In this example, the footer also has a navbar, like this:</p>
+
+<pre><code>
+<div data-role="footer"<strong> data-id="foo1" data-position="fixed"</strong>>
+ <div data-role="navbar">
+ <ul>
+ <li><a href="a.html">Friends</a></li>
+ <li><a href="b.html">Albums</a></li>
+ <li><a href="c.html">Emails</a></li>
+ <li><a href="d.html" >Info</a></li>
+ </ul>
+ </div><!-- /navbar -->
+</div><!-- /footer -->
+</code></pre>
+ <p>To set the active state of an item in a persistent toolbar, add a class of <code>ui-state-persist</code> in addition to <code>ui-btn-active</code> to the corresponding anchor.</p>
+
+<pre><code>
+<li><a href="d.html" <strong>class="ui-btn-active ui-state-persist"</strong>>Info</a></li>
+</code></pre>
+
+ <h3>A note about transitions</h3>
+ <p>The slide, slideup, slidedown, fade or none <a href="../pages/page-transitions.html">page transitions</a> all work great with persistent fixed toolbars. However, intensive 3D transitions like flip, turn, and flow can cause positioning and animation performance issues with this technique so we don't recommend using them.</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">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" data-id="foo1" data-position="fixed">
+ <div data-role="navbar">
+ <ul>
+ <li><a href="footer-persist-a.html" data-prefetch="true">Friends</a></li>
+ <li><a href="footer-persist-b.html" data-prefetch="true">Albums</a></li>
+ <li><a href="footer-persist-c.html" data-prefetch="true">Emails</a></li>
+ <li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup" class="ui-btn-active ui-state-persist">Info</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
+
+ </div><!-- /page -->
+
+ </body>
+ </html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Toolbars</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-index">
+
+ <div data-role="header" data-theme="f">
+ <h1>Toolbars</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <p>Toolbars are used for headers, footers, and utility bars throughout mobile sites and applications. jQuery Mobile provides a standard set of bars and navigation tools to cover most standard scenarios.</p>
+
+
+ <ul data-role="listview" data-inset="true">
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+ <!--<li><a href="api-bars.html">API documentation</a></li>-->
+ </ul>
+
+ </div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile: Scrollview Demos and Tests</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="jquery.mobile.scrollview.css" />
+ <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
+ <style>
+ .ui-content.ui-scrollview-clip {
+ padding: 0;
+ }
+ .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
+ margin: 0;
+ padding: 15px;
+ }
+ .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
+ margin: 0;
+ }
+ </style>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../js/"></script>
+ <script src="jquery.easing.1.3.js"></script>
+ <script src="jquery.mobile.scrollview.js"></script>
+ <script src="scrollview.js"></script>
+ <script src="../themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+</head>
+<body>
+<div data-role="page" data-theme="b" id="jqm-home">
+ <div id="jqm-homeheader">
+ <h1 id="jqm-logo"><img src="../../docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" width="235" height="61" /></h1>
+ <p>A few examples tweaked to make use of the scrollview component.</p>
+ <p id="jqm-version">Alpha Release</p>
+ </div>
+
+ <div data-role="content">
+
+ <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
+ <li data-role="list-divider">Toolbars</li>
+ <li><a href="../../docs/toolbars/footer-persist-a.html">Persistent footer nav bar (a)</a></li>
+ <li><a href="../../docs/toolbars/footer-persist-b.html">Persistent footer nav bar (b)</a></li>
+ <li><a href="../../docs/toolbars/footer-persist-c.html">Persistent footer nav bar (c)</a></li>
+ </ul>
+
+ <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
+ <li data-role="list-divider">List Views</li>
+ <li><a href="lists-divider.html">Sticky list dividers</a></li>
+ </ul>
+
+ <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
+ <li data-role="list-divider">Forms</li>
+ <li><a href="../../docs/forms/forms-all.html">Form element gallery</a></li>
+ </ul>
+
+ <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
+ <li data-role="list-divider">Tests</li>
+ <li><a href="scrollview-direction.html" rel="external">Scroll Direction</a></li>
+ <li><a href="scrollview-nested.html" rel="external">Nested Scroll Views</a></li>
+ <li><a href="sv-test-01.html" rel="external">Form Elements Event Test</a></li>
+ <li><a href="sv-test-02.html" rel="external">Form Elements in Scrollview Event Test</a></li>
+ </ul>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="jquery.mobile.scrollview.css" />
+ <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css"/>
+ <style>
+ .ui-content.ui-scrollview-clip {
+ padding: 0;
+ }
+ .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
+ margin: 0;
+ padding: 15px;
+ }
+ .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
+ margin: 0;
+ }
+ </style>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../js/"></script>
+ <script src="jquery.easing.1.3.js"></script>
+ <script src="jquery.mobile.scrollview.js"></script>
+ <script src="scrollview.js"></script>
+ <script src="../../docs/lists/docs/docs.js"></script>
+</head>
+<body>
+
+<div data-role="page">
+
+ <div data-role="header">
+ <h1>List dividers</h1>
+ </div><!-- /header -->
+
+ <div data-role="content" class="ui-scrolllistview">
+ <ul data-role="listview">
+ <li data-role="list-divider">A</li>
+ <li><a href="../../docs/lists/index.html">Adam Kinkaid</a></li>
+ <li><a href="../../docs/lists/index.html">Alex Wickerham</a></li>
+ <li><a href="../../docs/lists/index.html">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="../../docs/lists/index.html">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="../../docs/lists/index.html">Caleb Booth</a></li>
+ <li><a href="../../docs/lists/index.html">Christopher Adams</a></li>
+ <li><a href="../../docs/lists/index.html">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="../../docs/lists/index.html">David Walsh</a></li>
+ <li><a href="../../docs/lists/index.html">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="../../docs/lists/index.html">Elizabeth Bacon</a></li>
+ <li><a href="../../docs/lists/index.html">Emery Parker</a></li>
+ <li><a href="../../docs/lists/index.html">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="../../docs/lists/index.html">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="../../docs/lists/index.html">Graham Smith</a></li>
+ <li><a href="../../docs/lists/index.html">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="../../docs/lists/index.html">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="../../docs/lists/index.html">Mike Farnsworth</a></li>
+ <li><a href="../../docs/lists/index.html">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="../../docs/lists/index.html">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="../../docs/lists/index.html">Paul Baker</a></li>
+ <li><a href="../../docs/lists/index.html">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="../../docs/lists/index.html">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="../../docs/lists/index.html">Sawyer Wakefield</a></li>
+ <li data-role="list-divider">A</li>
+ <li><a href="../../docs/lists/index.html">Adam Kinkaid</a></li>
+ <li><a href="../../docs/lists/index.html">Alex Wickerham</a></li>
+ <li><a href="../../docs/lists/index.html">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="../../docs/lists/index.html">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="../../docs/lists/index.html">Caleb Booth</a></li>
+ <li><a href="../../docs/lists/index.html">Christopher Adams</a></li>
+ <li><a href="../../docs/lists/index.html">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="../../docs/lists/index.html">David Walsh</a></li>
+ <li><a href="../../docs/lists/index.html">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="../../docs/lists/index.html">Elizabeth Bacon</a></li>
+ <li><a href="../../docs/lists/index.html">Emery Parker</a></li>
+ <li><a href="../../docs/lists/index.html">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="../../docs/lists/index.html">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="../../docs/lists/index.html">Graham Smith</a></li>
+ <li><a href="../../docs/lists/index.html">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="../../docs/lists/index.html">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="../../docs/lists/index.html">Mike Farnsworth</a></li>
+ <li><a href="../../docs/lists/index.html">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="../../docs/lists/index.html">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="../../docs/lists/index.html">Paul Baker</a></li>
+ <li><a href="../../docs/lists/index.html">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="../../docs/lists/index.html">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="../../docs/lists/index.html">Sawyer Wakefield</a></li>
+ <li data-role="list-divider">A</li>
+ <li><a href="../../docs/lists/index.html">Adam Kinkaid</a></li>
+ <li><a href="../../docs/lists/index.html">Alex Wickerham</a></li>
+ <li><a href="../../docs/lists/index.html">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="../../docs/lists/index.html">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="../../docs/lists/index.html">Caleb Booth</a></li>
+ <li><a href="../../docs/lists/index.html">Christopher Adams</a></li>
+ <li><a href="../../docs/lists/index.html">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="../../docs/lists/index.html">David Walsh</a></li>
+ <li><a href="../../docs/lists/index.html">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="../../docs/lists/index.html">Elizabeth Bacon</a></li>
+ <li><a href="../../docs/lists/index.html">Emery Parker</a></li>
+ <li><a href="../../docs/lists/index.html">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="../../docs/lists/index.html">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="../../docs/lists/index.html">Graham Smith</a></li>
+ <li><a href="../../docs/lists/index.html">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="../../docs/lists/index.html">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="../../docs/lists/index.html">Mike Farnsworth</a></li>
+ <li><a href="../../docs/lists/index.html">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="../../docs/lists/index.html">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="../../docs/lists/index.html">Paul Baker</a></li>
+ <li><a href="../../docs/lists/index.html">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="../../docs/lists/index.html">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="../../docs/lists/index.html">Sawyer Wakefield</a></li>
+ </ul>
+ </div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="jquery.mobile.scrollview.css" />
+ <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css"/>
+ <style>
+ .ui-content.ui-scrollview-clip {
+ padding: 0;
+ }
+ .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
+ margin: 0;
+ padding: 15px;
+ }
+ .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
+ margin: 0;
+ }
+ .square {
+ width: 98px;
+ height: 98px;
+ border: solid 1px #333;
+ text-align: center;
+ line-height: 100px;
+ font-size: 60px;
+ }
+
+ .ui-scrollview-clip .ui-scrollview-clip .square {
+ background-color: #3CF;
+ }
+
+ .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
+ background-color: #F39;
+ }
+
+ .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
+ background-color: #0F6;
+ }
+
+ .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
+ background-color: #FF6;
+ }
+
+ .threeByThree {
+ border: solid 1px black;
+ background-color: #999;
+ overflow: hidden;
+ width: 300px;
+ height: 300px;
+ }
+ .threeByThree > .ui-scrollview-view {
+ width: 1300px;
+ background-color: white;
+ }
+ .threeByThree .square {
+ float: left;
+ }
+ </style>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../js/"></script>
+ <script src="jquery.easing.1.3.js"></script>
+ <script src="jquery.mobile.scrollview.js"></script>
+ <script src="scrollview.js"></script>
+ <script src="../../docs/lists/docs/docs.js"></script>
+</head>
+<body>
+
+<div data-role="page">
+
+ <div data-role="header">
+ <h1>Scroll View Direction Locking</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <h4>Scrollview</h4>
+ <p>To turn an element into a scrollview, simply add a data-scroll="true" to the element. By default, a scrollview can scroll in both the horizontal and vertical directions. If the user drags the view horizontally (left or right), or vertically (up or down), scrolling will be locked so that it only scrolls in that one dimension. If the user drags the view diagonally, he will be able to scroll in both directions at the same time.</p>
+ <div data-scroll="true" class="threeByThree">
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ </div>
+ <p>When there are nested scrollviews, if the user drags in a single dimension and hits either end of the view, the drag will be propagated up to the next outer scrollview that can handle a drag in that dimension. So for example, if you drag the scrollview above so that it reaches the top of its view, the entire page will start to scroll upward if you continue dragging. This is because the drag was propagated from the scrollview with the letters in it, out to the scrollview containing the entire content for the page.</p>
+ <h4>Horizontal Scrollview</h4>
+ <p>A scrollview can be set up so that it only scrolls in the horizontal direction. Simply place a data-scroll="x" on the element you want to scroll:</p>
+ <div data-scroll="x" class="threeByThree">
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ </div>
+ <h4>Vertical Scrollview</h4>
+ <p>A scrollview can be set up so that it only scrolls in the vertical direction. Simply place a data-scroll="y" on the element you want to scroll:</p>
+ <div data-scroll="y" class="threeByThree">
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ </div>
+ <h4>Scrollview Paging</h4>
+ <p>A scrollview can be set up so that it scrolls by pages. This feature is only enabled for horizontal or vertical scrollviews. Use data-scroll="xp" or data-scroll="yp" to turn on paging. The following scrollview pages horizontally.</p>
+ <div id="ex4" data-scroll="xp" class="threeByThree">
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ <div class="square">z</div>
+ <div class="square">0</div>
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div class="square">4</div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ <div class="square">8</div>
+ <div class="square">9</div>
+ <div class="square">a</div>
+ <div class="square">b</div>
+ <div class="square">c</div>
+ <div class="square">d</div>
+ <div class="square">e</div>
+ <div class="square">f</div>
+ <div class="square">g</div>
+ <div class="square">h</div>
+ <div class="square">i</div>
+ <div class="square">j</div>
+ <div class="square">k</div>
+ <div class="square">l</div>
+ <div class="square">m</div>
+ <div class="square">n</div>
+ <div class="square">o</div>
+ <div class="square">p</div>
+ <div class="square">q</div>
+ <div class="square">r</div>
+ <div class="square">s</div>
+ <div class="square">t</div>
+ <div class="square">u</div>
+ <div class="square">v</div>
+ <div class="square">w</div>
+ <div class="square">x</div>
+ <div class="square">y</div>
+ </div>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+ <p> </p>
+ <p></p>
+ </div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Lists</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="jquery.mobile.scrollview.css" />
+ <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css"/>
+ <style>
+ .ui-content.ui-scrollview-clip {
+ padding: 0;
+ }
+ .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
+ margin: 0;
+ padding: 15px;
+ }
+ .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
+ margin: 0;
+ }
+
+ .ui-scrollview-clip {
+ background-color: #999;
+ }
+
+ .ui-scrollview-view {
+ background-color: white;
+ }
+
+ .square {
+ width: 200px;
+ height: 200px;
+ text-align: center;
+ line-height: 200px;
+ font-size: 160px;
+ }
+
+ .ui-scrollview-clip .ui-scrollview-clip .square {
+ background-color: #3CF;
+ }
+
+ .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
+ background-color: #F39;
+ }
+
+ .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
+ background-color: #0F6;
+ }
+
+ .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
+ background-color: #FF6;
+ }
+
+ .single-block-view-h, .single-block-view-v {
+ width: 200px;
+ height: 200px;
+ }
+ .double-block-view-h {
+ border: solid 1px black;
+ width: 400px;
+ height: 200px;
+ }
+
+ .double-block-view-v {
+ border: solid 1px black;
+ width: 200px;
+ height: 400px;
+ }
+
+ .single-block-view-h > .view, .double-block-view-h > .view {
+ width: 1400px;
+ height: 200px;
+ }
+
+ .single-block-view-h > .view > .square, .double-block-view-h > .view > .square {
+ float: left;
+ }
+
+ .single-block-view-v > .view, .double-block-view-v > .view {
+ width: 200px;
+ height: 1400px;
+ }
+
+ </style>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../js/"></script>
+ <script src="jquery.easing.1.3.js"></script>
+ <script src="jquery.mobile.scrollview.js"></script>
+ <script src="scrollview.js"></script>
+ <script src="../../docs/lists/docs/docs.js"></script>
+</head>
+<body>
+
+<div data-role="page">
+
+ <div data-role="header">
+ <h1>Nested Scrollviews</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <h4>Example 1</h4>
+ <p>In the following example the #4 is actually a vertical scrollview embedded within a horizontal scrollview.</p>
+ <div data-scroll="x" class="double-block-view-h">
+ <div class="view">
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div data-scroll="y" class="square single-block-view-v">
+ <div class="view">
+ <div class="square">4</div>
+ <div class="square">A</div>
+ <div class="square">B</div>
+ <div data-scroll="x" class="single-block-view-h">
+ <div class="view">
+ <div class="square">C</div>
+ <div class="square">@</div>
+ <div class="square">#</div>
+ <div class="square">$</div>
+ <div class="square">%</div>
+ <div class="square">&</div>
+ <div class="square">*</div>
+ </div>
+ </div>
+ <div class="square">D</div>
+ <div class="square">E</div>
+ <div class="square">F</div>
+ </div>
+ </div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ </div>
+ </div>
+ <h4>Example 2</h4>
+ <p>In the following example the #4 is actually a nested horizontal scrollview embedded within a horizontal scrollview. The idea here is that if you drag-scroll the nested scrollview, once it reaches either end of its view, it should start scrolling the outer view.</p>
+ <div data-scroll="x" class="double-block-view-h">
+ <div class="view">
+ <div class="square">1</div>
+ <div class="square">2</div>
+ <div class="square">3</div>
+ <div data-scroll="x" class="square single-block-view-h">
+ <div class="view">
+ <div class="square">4</div>
+ <div class="square">A</div>
+ <div class="square">B</div>
+ <div class="square">C</div>
+ <div class="square">D</div>
+ <div class="square">E</div>
+ <div class="square">F</div>
+ </div>
+ </div>
+ <div class="square">5</div>
+ <div class="square">6</div>
+ <div class="square">7</div>
+ </div>
+ </div>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
+ <p> </p>
+ <p></p>
+ </div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Scrollview Test 1 - Form Element Event Test</title>
+<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css"/>
+<script src="../../js/jquery.js"></script>
+<script src="../../js/"></script>
+<style>
+
+#evtCatcher {
+ border: solid 1px black;
+ background-color: #FF9;
+ padding: 10px;
+}
+
+</style>
+<script>
+
+function getEvtHandler(cb_pd, cb_sp)
+{
+ return function(e) {
+ if (cb_pd.checked)
+ e.preventDefault();
+ if (cb_sp.checked)
+ e.stopPropagation();
+ };
+}
+
+$(function(){
+ $("#evtCatcher")
+ .bind("touchstart", getEvtHandler($("#cb_hd_pd")[0], $("#cb_hd_sp")[0]))
+ .bind("touchmove", getEvtHandler($("#cb_hm_pd")[0], $("#cb_hm_sp")[0]))
+ .bind("touchstop", getEvtHandler($("#cb_hu_pd")[0], $("#cb_hu_sp")[0]));
+});
+</script>
+</head>
+<body>
+<div data-role="page" data-theme="c">
+ <div data-role="header">
+ <h1>Form Element Event Test</h1>
+ </div>
+ <!-- /header -->
+
+ <div data-role="content" data-theme="c">
+ <p>The form elements on this page are wrapped by a special div that has event handlers for touchstart, touchmove and touchstop. The checkboxes below control how the event within these handlers is treated when they fire. Use this page to figure out how the various event treatments impact the form elements on you mobile device, then add to the notes at the bottom of the page.</p>
+ <p>All scrolling on this page is performed by the native viewport, there are no scrollviews on this page.</p>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <input type="checkbox" name="cb_hd_pd" id="cb_hd_pd" />
+ <label for="cb_hd_pd">touchstart - Prevent Default</label>
+ <input type="checkbox" name="cb_hd_sp" id="cb_hd_sp" />
+ <label for="cb_hd_sp">touchstart - Stop Propagation</label>
+ <input type="checkbox" name="cb_hm_pd" id="cb_hm_pd" />
+ <label for="cb_hm_pd">touchmove - Prevent Default</label>
+ <input type="checkbox" name="cb_hm_sp" id="cb_hm_sp" />
+ <label for="cb_hm_sp">touchmove - Stop Propagation</label>
+ <input type="checkbox" name="cb_hu_pd" id="cb_hu_pd" />
+ <label for="cb_hu_pd">touchstop - Prevent Default</label>
+ <input type="checkbox" name="cb_hu_sp" id="cb_hu_sp" />
+ <label for="cb_hu_sp">touchstop - Stop Propagation</label>
+ </fieldset>
+ </div>
+ <div id="evtCatcher">
+ <form action="#" method="get">
+ <h2>Form elements</h2>
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+ <div data-role="fieldcontain">
+ <label for="search">Search Input:</label>
+ <input type="search" name="password" id="search" value="" />
+ </div>
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
+ </div>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
+ <label for="checkbox-1a">Cheetos</label>
+ <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
+ <label for="checkbox-2a">Doritos</label>
+ <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
+ <label for="checkbox-3a">Fritos</label>
+ <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
+ <label for="checkbox-4a">Sun Chips</label>
+ </fieldset>
+ </div>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
+ <label for="checkbox-6">b</label>
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
+ <label for="checkbox-7"><em>i</em></label>
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
+ <label for="checkbox-8">u</label>
+ </fieldset>
+ </div>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ </div>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Layout view:</legend>
+ <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
+ <label for="radio-choice-c">List</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
+ <label for="radio-choice-d">Grid</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
+ <label for="radio-choice-e">Gallery</label>
+ </fieldset>
+ </div>
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+ <div data-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a">
+ <button type="submit" data-theme="d">Cancel</button>
+ </div>
+ <div class="ui-block-b">
+ <button type="submit" data-theme="a">Submit</button>
+ </div>
+ </fieldset>
+ </div>
+ </form>
+ </div>
+ <h3>Notes</h3>
+ <ul>
+ <li>iOS
+ <ul>
+ <li>None</li>
+ </ul>
+ </li>
+ <li>Android
+ <ul>
+ <li>HTC Incredible - Android 2.1 (HTC Sense)
+ <ul>
+ <li>Calling preventDefault() on the touchstart event prevents te following elements from working properly:
+ <ul>
+ <li>Textfield</li>
+ <li>Textarea</li>
+ <li>Checkbox</li>
+ <li>Radio</li>
+ <li>Button</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>Motorola Droid X - Android 2.2 ()</li>
+ </ul>
+ </li>
+ <li>Black Berry OS 6
+ <ul>
+ <li>None</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ <!-- /content -->
+</div>
+<!-- /page -->
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+/**
+ * @license r.js 1.0.7+ Fri, 30 Mar 2012 00:24:35 GMT Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*
+ * This is a bootstrap script to allow running RequireJS in the command line
+ * in either a Java/Rhino or Node environment. It is modified by the top-level
+ * dist.js file to inject other files to completely enable this file. It is
+ * the shell of the r.js file.
+ */
+
+/*jslint evil: true, nomen: true */
+/*global readFile: true, process: false, Packages: false, print: false,
+console: false, java: false, module: false, requirejsVars */
+
+var requirejs, require, define;
+(function (console, args, readFileFunc) {
+
+ var fileName, env, fs, vm, path, exec, rhinoContext, dir, nodeRequire,
+ nodeDefine, exists, reqMain, loadedOptimizedLib,
+ version = '1.0.7+ Fri, 30 Mar 2012 00:24:35 GMT',
+ jsSuffixRegExp = /\.js$/,
+ commandOption = '',
+ useLibLoaded = {},
+ //Used by jslib/rhino/args.js
+ rhinoArgs = args,
+ readFile = typeof readFileFunc !== 'undefined' ? readFileFunc : null;
+
+ function showHelp() {
+ console.log('See https://github.com/jrburke/r.js for usage.');
+ }
+
+ if (typeof Packages !== 'undefined') {
+ env = 'rhino';
+
+ fileName = args[0];
+
+ if (fileName && fileName.indexOf('-') === 0) {
+ commandOption = fileName.substring(1);
+ fileName = args[1];
+ }
+
+ //Set up execution context.
+ rhinoContext = Packages.org.mozilla.javascript.ContextFactory.getGlobal().enterContext();
+
+ exec = function (string, name) {
+ return rhinoContext.evaluateString(this, string, name, 0, null);
+ };
+
+ exists = function (fileName) {
+ return (new java.io.File(fileName)).exists();
+ };
+
+ //Define a console.log for easier logging. Don't
+ //get fancy though.
+ if (typeof console === 'undefined') {
+ console = {
+ log: function () {
+ print.apply(undefined, arguments);
+ }
+ };
+ }
+ } else if (typeof process !== 'undefined') {
+ env = 'node';
+
+ //Get the fs module via Node's require before it
+ //gets replaced. Used in require/node.js
+ fs = require('fs');
+ vm = require('vm');
+ path = require('path');
+ nodeRequire = require;
+ nodeDefine = define;
+ reqMain = require.main;
+
+ //Temporarily hide require and define to allow require.js to define
+ //them.
+ require = undefined;
+ define = undefined;
+
+ readFile = function (path) {
+ return fs.readFileSync(path, 'utf8');
+ };
+
+ exec = function (string, name) {
+ return vm.runInThisContext(this.requirejsVars.require.makeNodeWrapper(string),
+ name ? fs.realpathSync(name) : '');
+ };
+
+ exists = function (fileName) {
+ return path.existsSync(fileName);
+ };
+
+
+ fileName = process.argv[2];
+
+ if (fileName && fileName.indexOf('-') === 0) {
+ commandOption = fileName.substring(1);
+ fileName = process.argv[3];
+ }
+ }
+
+ /** vim: et:ts=4:sw=4:sts=4
+ * @license RequireJS 1.0.7 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+/*jslint strict: false, plusplus: false, sub: true */
+/*global window, navigator, document, importScripts, jQuery, setTimeout, opera */
+
+
+(function () {
+ //Change this version number for each release.
+ var version = "1.0.7",
+ commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,
+ cjsRequireRegExp = /require\(\s*["']([^'"\s]+)["']\s*\)/g,
+ currDirRegExp = /^\.\//,
+ jsSuffixRegExp = /\.js$/,
+ ostring = Object.prototype.toString,
+ ap = Array.prototype,
+ aps = ap.slice,
+ apsp = ap.splice,
+ isBrowser = !!(typeof window !== "undefined" && navigator && document),
+ isWebWorker = !isBrowser && typeof importScripts !== "undefined",
+ //PS3 indicates loaded and complete, but need to wait for complete
+ //specifically. Sequence is "loading", "loaded", execution,
+ // then "complete". The UA check is unfortunate, but not sure how
+ //to feature test w/o causing perf issues.
+ readyRegExp = isBrowser && navigator.platform === 'PLAYSTATION 3' ?
+ /^complete$/ : /^(complete|loaded)$/,
+ defContextName = "_",
+ //Oh the tragedy, detecting opera. See the usage of isOpera for reason.
+ isOpera = typeof opera !== "undefined" && opera.toString() === "[object Opera]",
+ empty = {},
+ contexts = {},
+ globalDefQueue = [],
+ interactiveScript = null,
+ checkLoadedDepth = 0,
+ useInteractive = false,
+ reservedDependencies = {
+ require: true,
+ module: true,
+ exports: true
+ },
+ req, cfg = {}, currentlyAddingScript, s, head, baseElement, scripts, script,
+ src, subPath, mainScript, dataMain, globalI, ctx, jQueryCheck, checkLoadedTimeoutId;
+
+ function isFunction(it) {
+ return ostring.call(it) === "[object Function]";
+ }
+
+ function isArray(it) {
+ return ostring.call(it) === "[object Array]";
+ }
+
+ /**
+ * Simple function to mix in properties from source into target,
+ * but only if target does not already have a property of the same name.
+ * This is not robust in IE for transferring methods that match
+ * Object.prototype names, but the uses of mixin here seem unlikely to
+ * trigger a problem related to that.
+ */
+ function mixin(target, source, force) {
+ for (var prop in source) {
+ if (!(prop in empty) && (!(prop in target) || force)) {
+ target[prop] = source[prop];
+ }
+ }
+ return req;
+ }
+
+ /**
+ * Constructs an error with a pointer to an URL with more information.
+ * @param {String} id the error ID that maps to an ID on a web page.
+ * @param {String} message human readable error.
+ * @param {Error} [err] the original error, if there is one.
+ *
+ * @returns {Error}
+ */
+ function makeError(id, msg, err) {
+ var e = new Error(msg + '\nhttp://requirejs.org/docs/errors.html#' + id);
+ if (err) {
+ e.originalError = err;
+ }
+ return e;
+ }
+
+ /**
+ * Used to set up package paths from a packagePaths or packages config object.
+ * @param {Object} pkgs the object to store the new package config
+ * @param {Array} currentPackages an array of packages to configure
+ * @param {String} [dir] a prefix dir to use.
+ */
+ function configurePackageDir(pkgs, currentPackages, dir) {
+ var i, location, pkgObj;
+
+ for (i = 0; (pkgObj = currentPackages[i]); i++) {
+ pkgObj = typeof pkgObj === "string" ? { name: pkgObj } : pkgObj;
+ location = pkgObj.location;
+
+ //Add dir to the path, but avoid paths that start with a slash
+ //or have a colon (indicates a protocol)
+ if (dir && (!location || (location.indexOf("/") !== 0 && location.indexOf(":") === -1))) {
+ location = dir + "/" + (location || pkgObj.name);
+ }
+
+ //Create a brand new object on pkgs, since currentPackages can
+ //be passed in again, and config.pkgs is the internal transformed
+ //state for all package configs.
+ pkgs[pkgObj.name] = {
+ name: pkgObj.name,
+ location: location || pkgObj.name,
+ //Remove leading dot in main, so main paths are normalized,
+ //and remove any trailing .js, since different package
+ //envs have different conventions: some use a module name,
+ //some use a file name.
+ main: (pkgObj.main || "main")
+ .replace(currDirRegExp, '')
+ .replace(jsSuffixRegExp, '')
+ };
+ }
+ }
+
+ /**
+ * jQuery 1.4.3-1.5.x use a readyWait/ready() pairing to hold DOM
+ * ready callbacks, but jQuery 1.6 supports a holdReady() API instead.
+ * At some point remove the readyWait/ready() support and just stick
+ * with using holdReady.
+ */
+ function jQueryHoldReady($, shouldHold) {
+ if ($.holdReady) {
+ $.holdReady(shouldHold);
+ } else if (shouldHold) {
+ $.readyWait += 1;
+ } else {
+ $.ready(true);
+ }
+ }
+
+ if (typeof define !== "undefined") {
+ //If a define is already in play via another AMD loader,
+ //do not overwrite.
+ return;
+ }
+
+ if (typeof requirejs !== "undefined") {
+ if (isFunction(requirejs)) {
+ //Do not overwrite and existing requirejs instance.
+ return;
+ } else {
+ cfg = requirejs;
+ requirejs = undefined;
+ }
+ }
+
+ //Allow for a require config object
+ if (typeof require !== "undefined" && !isFunction(require)) {
+ //assume it is a config object.
+ cfg = require;
+ require = undefined;
+ }
+
+ /**
+ * Creates a new context for use in require and define calls.
+ * Handle most of the heavy lifting. Do not want to use an object
+ * with prototype here to avoid using "this" in require, in case it
+ * needs to be used in more super secure envs that do not want this.
+ * Also there should not be that many contexts in the page. Usually just
+ * one for the default context, but could be extra for multiversion cases
+ * or if a package needs a special context for a dependency that conflicts
+ * with the standard context.
+ */
+ function newContext(contextName) {
+ var context, resume,
+ config = {
+ waitSeconds: 7,
+ baseUrl: "./",
+ paths: {},
+ pkgs: {},
+ catchError: {}
+ },
+ defQueue = [],
+ specified = {
+ "require": true,
+ "exports": true,
+ "module": true
+ },
+ urlMap = {},
+ defined = {},
+ loaded = {},
+ waiting = {},
+ waitAry = [],
+ urlFetched = {},
+ managerCounter = 0,
+ managerCallbacks = {},
+ plugins = {},
+ //Used to indicate which modules in a build scenario
+ //need to be full executed.
+ needFullExec = {},
+ fullExec = {},
+ resumeDepth = 0;
+
+ /**
+ * Trims the . and .. from an array of path segments.
+ * It will keep a leading path segment if a .. will become
+ * the first path segment, to help with module name lookups,
+ * which act like paths, but can be remapped. But the end result,
+ * all paths that use this function should look normalized.
+ * NOTE: this method MODIFIES the input array.
+ * @param {Array} ary the array of path segments.
+ */
+ function trimDots(ary) {
+ var i, part;
+ for (i = 0; (part = ary[i]); i++) {
+ if (part === ".") {
+ ary.splice(i, 1);
+ i -= 1;
+ } else if (part === "..") {
+ if (i === 1 && (ary[2] === '..' || ary[0] === '..')) {
+ //End of the line. Keep at least one non-dot
+ //path segment at the front so it can be mapped
+ //correctly to disk. Otherwise, there is likely
+ //no path mapping for a path starting with '..'.
+ //This can still fail, but catches the most reasonable
+ //uses of ..
+ break;
+ } else if (i > 0) {
+ ary.splice(i - 1, 2);
+ i -= 2;
+ }
+ }
+ }
+ }
+
+ /**
+ * Given a relative module name, like ./something, normalize it to
+ * a real name that can be mapped to a path.
+ * @param {String} name the relative name
+ * @param {String} baseName a real name that the name arg is relative
+ * to.
+ * @returns {String} normalized name
+ */
+ function normalize(name, baseName) {
+ var pkgName, pkgConfig;
+
+ //Adjust any relative paths.
+ if (name && name.charAt(0) === ".") {
+ //If have a base name, try to normalize against it,
+ //otherwise, assume it is a top-level require that will
+ //be relative to baseUrl in the end.
+ if (baseName) {
+ if (config.pkgs[baseName]) {
+ //If the baseName is a package name, then just treat it as one
+ //name to concat the name with.
+ baseName = [baseName];
+ } else {
+ //Convert baseName to array, and lop off the last part,
+ //so that . matches that "directory" and not name of the baseName's
+ //module. For instance, baseName of "one/two/three", maps to
+ //"one/two/three.js", but we want the directory, "one/two" for
+ //this normalization.
+ baseName = baseName.split("/");
+ baseName = baseName.slice(0, baseName.length - 1);
+ }
+
+ name = baseName.concat(name.split("/"));
+ trimDots(name);
+
+ //Some use of packages may use a . path to reference the
+ //"main" module name, so normalize for that.
+ pkgConfig = config.pkgs[(pkgName = name[0])];
+ name = name.join("/");
+ if (pkgConfig && name === pkgName + '/' + pkgConfig.main) {
+ name = pkgName;
+ }
+ } else if (name.indexOf("./") === 0) {
+ // No baseName, so this is ID is resolved relative
+ // to baseUrl, pull off the leading dot.
+ name = name.substring(2);
+ }
+ }
+ return name;
+ }
+
+ /**
+ * Creates a module mapping that includes plugin prefix, module
+ * name, and path. If parentModuleMap is provided it will
+ * also normalize the name via require.normalize()
+ *
+ * @param {String} name the module name
+ * @param {String} [parentModuleMap] parent module map
+ * for the module name, used to resolve relative names.
+ *
+ * @returns {Object}
+ */
+ function makeModuleMap(name, parentModuleMap) {
+ var index = name ? name.indexOf("!") : -1,
+ prefix = null,
+ parentName = parentModuleMap ? parentModuleMap.name : null,
+ originalName = name,
+ normalizedName, url, pluginModule;
+
+ if (index !== -1) {
+ prefix = name.substring(0, index);
+ name = name.substring(index + 1, name.length);
+ }
+
+ if (prefix) {
+ prefix = normalize(prefix, parentName);
+ }
+
+ //Account for relative paths if there is a base name.
+ if (name) {
+ if (prefix) {
+ pluginModule = defined[prefix];
+ if (pluginModule && pluginModule.normalize) {
+ //Plugin is loaded, use its normalize method.
+ normalizedName = pluginModule.normalize(name, function (name) {
+ return normalize(name, parentName);
+ });
+ } else {
+ normalizedName = normalize(name, parentName);
+ }
+ } else {
+ //A regular module.
+ normalizedName = normalize(name, parentName);
+
+ url = urlMap[normalizedName];
+ if (!url) {
+ //Calculate url for the module, if it has a name.
+ //Use name here since nameToUrl also calls normalize,
+ //and for relative names that are outside the baseUrl
+ //this causes havoc. Was thinking of just removing
+ //parentModuleMap to avoid extra normalization, but
+ //normalize() still does a dot removal because of
+ //issue #142, so just pass in name here and redo
+ //the normalization. Paths outside baseUrl are just
+ //messy to support.
+ url = context.nameToUrl(name, null, parentModuleMap);
+
+ //Store the URL mapping for later.
+ urlMap[normalizedName] = url;
+ }
+ }
+ }
+
+ return {
+ prefix: prefix,
+ name: normalizedName,
+ parentMap: parentModuleMap,
+ url: url,
+ originalName: originalName,
+ fullName: prefix ? prefix + "!" + (normalizedName || '') : normalizedName
+ };
+ }
+
+ /**
+ * Determine if priority loading is done. If so clear the priorityWait
+ */
+ function isPriorityDone() {
+ var priorityDone = true,
+ priorityWait = config.priorityWait,
+ priorityName, i;
+ if (priorityWait) {
+ for (i = 0; (priorityName = priorityWait[i]); i++) {
+ if (!loaded[priorityName]) {
+ priorityDone = false;
+ break;
+ }
+ }
+ if (priorityDone) {
+ delete config.priorityWait;
+ }
+ }
+ return priorityDone;
+ }
+
+ function makeContextModuleFunc(func, relModuleMap, enableBuildCallback) {
+ return function () {
+ //A version of a require function that passes a moduleName
+ //value for items that may need to
+ //look up paths relative to the moduleName
+ var args = aps.call(arguments, 0), lastArg;
+ if (enableBuildCallback &&
+ isFunction((lastArg = args[args.length - 1]))) {
+ lastArg.__requireJsBuild = true;
+ }
+ args.push(relModuleMap);
+ return func.apply(null, args);
+ };
+ }
+
+ /**
+ * Helper function that creates a require function object to give to
+ * modules that ask for it as a dependency. It needs to be specific
+ * per module because of the implication of path mappings that may
+ * need to be relative to the module name.
+ */
+ function makeRequire(relModuleMap, enableBuildCallback, altRequire) {
+ var modRequire = makeContextModuleFunc(altRequire || context.require, relModuleMap, enableBuildCallback);
+
+ mixin(modRequire, {
+ nameToUrl: makeContextModuleFunc(context.nameToUrl, relModuleMap),
+ toUrl: makeContextModuleFunc(context.toUrl, relModuleMap),
+ defined: makeContextModuleFunc(context.requireDefined, relModuleMap),
+ specified: makeContextModuleFunc(context.requireSpecified, relModuleMap),
+ isBrowser: req.isBrowser
+ });
+ return modRequire;
+ }
+
+ /*
+ * Queues a dependency for checking after the loader is out of a
+ * "paused" state, for example while a script file is being loaded
+ * in the browser, where it may have many modules defined in it.
+ */
+ function queueDependency(manager) {
+ context.paused.push(manager);
+ }
+
+ function execManager(manager) {
+ var i, ret, err, errFile, errModuleTree,
+ cb = manager.callback,
+ map = manager.map,
+ fullName = map.fullName,
+ args = manager.deps,
+ listeners = manager.listeners,
+ execCb = config.requireExecCb || req.execCb,
+ cjsModule;
+
+ //Call the callback to define the module, if necessary.
+ if (cb && isFunction(cb)) {
+ if (config.catchError.define) {
+ try {
+ ret = execCb(fullName, manager.callback, args, defined[fullName]);
+ } catch (e) {
+ err = e;
+ }
+ } else {
+ ret = execCb(fullName, manager.callback, args, defined[fullName]);
+ }
+
+ if (fullName) {
+ //If setting exports via "module" is in play,
+ //favor that over return value and exports. After that,
+ //favor a non-undefined return value over exports use.
+ cjsModule = manager.cjsModule;
+ if (cjsModule &&
+ cjsModule.exports !== undefined &&
+ //Make sure it is not already the exports value
+ cjsModule.exports !== defined[fullName]) {
+ ret = defined[fullName] = manager.cjsModule.exports;
+ } else if (ret === undefined && manager.usingExports) {
+ //exports already set the defined value.
+ ret = defined[fullName];
+ } else {
+ //Use the return value from the function.
+ defined[fullName] = ret;
+ //If this module needed full execution in a build
+ //environment, mark that now.
+ if (needFullExec[fullName]) {
+ fullExec[fullName] = true;
+ }
+ }
+ }
+ } else if (fullName) {
+ //May just be an object definition for the module. Only
+ //worry about defining if have a module name.
+ ret = defined[fullName] = cb;
+
+ //If this module needed full execution in a build
+ //environment, mark that now.
+ if (needFullExec[fullName]) {
+ fullExec[fullName] = true;
+ }
+ }
+
+ //Clean up waiting. Do this before error calls, and before
+ //calling back listeners, so that bookkeeping is correct
+ //in the event of an error and error is reported in correct order,
+ //since the listeners will likely have errors if the
+ //onError function does not throw.
+ if (waiting[manager.id]) {
+ delete waiting[manager.id];
+ manager.isDone = true;
+ context.waitCount -= 1;
+ if (context.waitCount === 0) {
+ //Clear the wait array used for cycles.
+ waitAry = [];
+ }
+ }
+
+ //Do not need to track manager callback now that it is defined.
+ delete managerCallbacks[fullName];
+
+ //Allow instrumentation like the optimizer to know the order
+ //of modules executed and their dependencies.
+ if (req.onResourceLoad && !manager.placeholder) {
+ req.onResourceLoad(context, map, manager.depArray);
+ }
+
+ if (err) {
+ errFile = (fullName ? makeModuleMap(fullName).url : '') ||
+ err.fileName || err.sourceURL;
+ errModuleTree = err.moduleTree;
+ err = makeError('defineerror', 'Error evaluating ' +
+ 'module "' + fullName + '" at location "' +
+ errFile + '":\n' +
+ err + '\nfileName:' + errFile +
+ '\nlineNumber: ' + (err.lineNumber || err.line), err);
+ err.moduleName = fullName;
+ err.moduleTree = errModuleTree;
+ return req.onError(err);
+ }
+
+ //Let listeners know of this manager's value.
+ for (i = 0; (cb = listeners[i]); i++) {
+ cb(ret);
+ }
+
+ return undefined;
+ }
+
+ /**
+ * Helper that creates a callack function that is called when a dependency
+ * is ready, and sets the i-th dependency for the manager as the
+ * value passed to the callback generated by this function.
+ */
+ function makeArgCallback(manager, i) {
+ return function (value) {
+ //Only do the work if it has not been done
+ //already for a dependency. Cycle breaking
+ //logic in forceExec could mean this function
+ //is called more than once for a given dependency.
+ if (!manager.depDone[i]) {
+ manager.depDone[i] = true;
+ manager.deps[i] = value;
+ manager.depCount -= 1;
+ if (!manager.depCount) {
+ //All done, execute!
+ execManager(manager);
+ }
+ }
+ };
+ }
+
+ function callPlugin(pluginName, depManager) {
+ var map = depManager.map,
+ fullName = map.fullName,
+ name = map.name,
+ plugin = plugins[pluginName] ||
+ (plugins[pluginName] = defined[pluginName]),
+ load;
+
+ //No need to continue if the manager is already
+ //in the process of loading.
+ if (depManager.loading) {
+ return;
+ }
+ depManager.loading = true;
+
+ load = function (ret) {
+ depManager.callback = function () {
+ return ret;
+ };
+ execManager(depManager);
+
+ loaded[depManager.id] = true;
+
+ //The loading of this plugin
+ //might have placed other things
+ //in the paused queue. In particular,
+ //a loader plugin that depends on
+ //a different plugin loaded resource.
+ resume();
+ };
+
+ //Allow plugins to load other code without having to know the
+ //context or how to "complete" the load.
+ load.fromText = function (moduleName, text) {
+ /*jslint evil: true */
+ var hasInteractive = useInteractive;
+
+ //Indicate a the module is in process of loading.
+ loaded[moduleName] = false;
+ context.scriptCount += 1;
+
+ //Indicate this is not a "real" module, so do not track it
+ //for builds, it does not map to a real file.
+ context.fake[moduleName] = true;
+
+ //Turn off interactive script matching for IE for any define
+ //calls in the text, then turn it back on at the end.
+ if (hasInteractive) {
+ useInteractive = false;
+ }
+
+ req.exec(text);
+
+ if (hasInteractive) {
+ useInteractive = true;
+ }
+
+ //Support anonymous modules.
+ context.completeLoad(moduleName);
+ };
+
+ //No need to continue if the plugin value has already been
+ //defined by a build.
+ if (fullName in defined) {
+ load(defined[fullName]);
+ } else {
+ //Use parentName here since the plugin's name is not reliable,
+ //could be some weird string with no path that actually wants to
+ //reference the parentName's path.
+ plugin.load(name, makeRequire(map.parentMap, true, function (deps, cb) {
+ var moduleDeps = [],
+ i, dep, depMap;
+ //Convert deps to full names and hold on to them
+ //for reference later, when figuring out if they
+ //are blocked by a circular dependency.
+ for (i = 0; (dep = deps[i]); i++) {
+ depMap = makeModuleMap(dep, map.parentMap);
+ deps[i] = depMap.fullName;
+ if (!depMap.prefix) {
+ moduleDeps.push(deps[i]);
+ }
+ }
+ depManager.moduleDeps = (depManager.moduleDeps || []).concat(moduleDeps);
+ return context.require(deps, cb);
+ }), load, config);
+ }
+ }
+
+ /**
+ * Adds the manager to the waiting queue. Only fully
+ * resolved items should be in the waiting queue.
+ */
+ function addWait(manager) {
+ if (!waiting[manager.id]) {
+ waiting[manager.id] = manager;
+ waitAry.push(manager);
+ context.waitCount += 1;
+ }
+ }
+
+ /**
+ * Function added to every manager object. Created out here
+ * to avoid new function creation for each manager instance.
+ */
+ function managerAdd(cb) {
+ this.listeners.push(cb);
+ }
+
+ function getManager(map, shouldQueue) {
+ var fullName = map.fullName,
+ prefix = map.prefix,
+ plugin = prefix ? plugins[prefix] ||
+ (plugins[prefix] = defined[prefix]) : null,
+ manager, created, pluginManager, prefixMap;
+
+ if (fullName) {
+ manager = managerCallbacks[fullName];
+ }
+
+ if (!manager) {
+ created = true;
+ manager = {
+ //ID is just the full name, but if it is a plugin resource
+ //for a plugin that has not been loaded,
+ //then add an ID counter to it.
+ id: (prefix && !plugin ?
+ (managerCounter++) + '__p@:' : '') +
+ (fullName || '__r@' + (managerCounter++)),
+ map: map,
+ depCount: 0,
+ depDone: [],
+ depCallbacks: [],
+ deps: [],
+ listeners: [],
+ add: managerAdd
+ };
+
+ specified[manager.id] = true;
+
+ //Only track the manager/reuse it if this is a non-plugin
+ //resource. Also only track plugin resources once
+ //the plugin has been loaded, and so the fullName is the
+ //true normalized value.
+ if (fullName && (!prefix || plugins[prefix])) {
+ managerCallbacks[fullName] = manager;
+ }
+ }
+
+ //If there is a plugin needed, but it is not loaded,
+ //first load the plugin, then continue on.
+ if (prefix && !plugin) {
+ prefixMap = makeModuleMap(prefix);
+
+ //Clear out defined and urlFetched if the plugin was previously
+ //loaded/defined, but not as full module (as in a build
+ //situation). However, only do this work if the plugin is in
+ //defined but does not have a module export value.
+ if (prefix in defined && !defined[prefix]) {
+ delete defined[prefix];
+ delete urlFetched[prefixMap.url];
+ }
+
+ pluginManager = getManager(prefixMap, true);
+ pluginManager.add(function (plugin) {
+ //Create a new manager for the normalized
+ //resource ID and have it call this manager when
+ //done.
+ var newMap = makeModuleMap(map.originalName, map.parentMap),
+ normalizedManager = getManager(newMap, true);
+
+ //Indicate this manager is a placeholder for the real,
+ //normalized thing. Important for when trying to map
+ //modules and dependencies, for instance, in a build.
+ manager.placeholder = true;
+
+ normalizedManager.add(function (resource) {
+ manager.callback = function () {
+ return resource;
+ };
+ execManager(manager);
+ });
+ });
+ } else if (created && shouldQueue) {
+ //Indicate the resource is not loaded yet if it is to be
+ //queued.
+ loaded[manager.id] = false;
+ queueDependency(manager);
+ addWait(manager);
+ }
+
+ return manager;
+ }
+
+ function main(inName, depArray, callback, relModuleMap) {
+ var moduleMap = makeModuleMap(inName, relModuleMap),
+ name = moduleMap.name,
+ fullName = moduleMap.fullName,
+ manager = getManager(moduleMap),
+ id = manager.id,
+ deps = manager.deps,
+ i, depArg, depName, depPrefix, cjsMod;
+
+ if (fullName) {
+ //If module already defined for context, or already loaded,
+ //then leave. Also leave if jQuery is registering but it does
+ //not match the desired version number in the config.
+ if (fullName in defined || loaded[id] === true ||
+ (fullName === "jquery" && config.jQuery &&
+ config.jQuery !== callback().fn.jquery)) {
+ return;
+ }
+
+ //Set specified/loaded here for modules that are also loaded
+ //as part of a layer, where onScriptLoad is not fired
+ //for those cases. Do this after the inline define and
+ //dependency tracing is done.
+ specified[id] = true;
+ loaded[id] = true;
+
+ //If module is jQuery set up delaying its dom ready listeners.
+ if (fullName === "jquery" && callback) {
+ jQueryCheck(callback());
+ }
+ }
+
+ //Attach real depArray and callback to the manager. Do this
+ //only if the module has not been defined already, so do this after
+ //the fullName checks above. IE can call main() more than once
+ //for a module.
+ manager.depArray = depArray;
+ manager.callback = callback;
+
+ //Add the dependencies to the deps field, and register for callbacks
+ //on the dependencies.
+ for (i = 0; i < depArray.length; i++) {
+ depArg = depArray[i];
+ //There could be cases like in IE, where a trailing comma will
+ //introduce a null dependency, so only treat a real dependency
+ //value as a dependency.
+ if (depArg) {
+ //Split the dependency name into plugin and name parts
+ depArg = makeModuleMap(depArg, (name ? moduleMap : relModuleMap));
+ depName = depArg.fullName;
+ depPrefix = depArg.prefix;
+
+ //Fix the name in depArray to be just the name, since
+ //that is how it will be called back later.
+ depArray[i] = depName;
+
+ //Fast path CommonJS standard dependencies.
+ if (depName === "require") {
+ deps[i] = makeRequire(moduleMap);
+ } else if (depName === "exports") {
+ //CommonJS module spec 1.1
+ deps[i] = defined[fullName] = {};
+ manager.usingExports = true;
+ } else if (depName === "module") {
+ //CommonJS module spec 1.1
+ manager.cjsModule = cjsMod = deps[i] = {
+ id: name,
+ uri: name ? context.nameToUrl(name, null, relModuleMap) : undefined,
+ exports: defined[fullName]
+ };
+ } else if (depName in defined && !(depName in waiting) &&
+ (!(fullName in needFullExec) ||
+ (fullName in needFullExec && fullExec[depName]))) {
+ //Module already defined, and not in a build situation
+ //where the module is a something that needs full
+ //execution and this dependency has not been fully
+ //executed. See r.js's requirePatch.js for more info
+ //on fullExec.
+ deps[i] = defined[depName];
+ } else {
+ //Mark this dependency as needing full exec if
+ //the current module needs full exec.
+ if (fullName in needFullExec) {
+ needFullExec[depName] = true;
+ //Reset state so fully executed code will get
+ //picked up correctly.
+ delete defined[depName];
+ urlFetched[depArg.url] = false;
+ }
+
+ //Either a resource that is not loaded yet, or a plugin
+ //resource for either a plugin that has not
+ //loaded yet.
+ manager.depCount += 1;
+ manager.depCallbacks[i] = makeArgCallback(manager, i);
+ getManager(depArg, true).add(manager.depCallbacks[i]);
+ }
+ }
+ }
+
+ //Do not bother tracking the manager if it is all done.
+ if (!manager.depCount) {
+ //All done, execute!
+ execManager(manager);
+ } else {
+ addWait(manager);
+ }
+ }
+
+ /**
+ * Convenience method to call main for a define call that was put on
+ * hold in the defQueue.
+ */
+ function callDefMain(args) {
+ main.apply(null, args);
+ }
+
+ /**
+ * jQuery 1.4.3+ supports ways to hold off calling
+ * calling jQuery ready callbacks until all scripts are loaded. Be sure
+ * to track it if the capability exists.. Also, since jQuery 1.4.3 does
+ * not register as a module, need to do some global inference checking.
+ * Even if it does register as a module, not guaranteed to be the precise
+ * name of the global. If a jQuery is tracked for this context, then go
+ * ahead and register it as a module too, if not already in process.
+ */
+ jQueryCheck = function (jqCandidate) {
+ if (!context.jQuery) {
+ var $ = jqCandidate || (typeof jQuery !== "undefined" ? jQuery : null);
+
+ if ($) {
+ //If a specific version of jQuery is wanted, make sure to only
+ //use this jQuery if it matches.
+ if (config.jQuery && $.fn.jquery !== config.jQuery) {
+ return;
+ }
+
+ if ("holdReady" in $ || "readyWait" in $) {
+ context.jQuery = $;
+
+ //Manually create a "jquery" module entry if not one already
+ //or in process. Note this could trigger an attempt at
+ //a second jQuery registration, but does no harm since
+ //the first one wins, and it is the same value anyway.
+ callDefMain(["jquery", [], function () {
+ return jQuery;
+ }]);
+
+ //Ask jQuery to hold DOM ready callbacks.
+ if (context.scriptCount) {
+ jQueryHoldReady($, true);
+ context.jQueryIncremented = true;
+ }
+ }
+ }
+ }
+ };
+
+ function findCycle(manager, traced) {
+ var fullName = manager.map.fullName,
+ depArray = manager.depArray,
+ fullyLoaded = true,
+ i, depName, depManager, result;
+
+ if (manager.isDone || !fullName || !loaded[fullName]) {
+ return result;
+ }
+
+ //Found the cycle.
+ if (traced[fullName]) {
+ return manager;
+ }
+
+ traced[fullName] = true;
+
+ //Trace through the dependencies.
+ if (depArray) {
+ for (i = 0; i < depArray.length; i++) {
+ //Some array members may be null, like if a trailing comma
+ //IE, so do the explicit [i] access and check if it has a value.
+ depName = depArray[i];
+ if (!loaded[depName] && !reservedDependencies[depName]) {
+ fullyLoaded = false;
+ break;
+ }
+ depManager = waiting[depName];
+ if (depManager && !depManager.isDone && loaded[depName]) {
+ result = findCycle(depManager, traced);
+ if (result) {
+ break;
+ }
+ }
+ }
+ if (!fullyLoaded) {
+ //Discard the cycle that was found, since it cannot
+ //be forced yet. Also clear this module from traced.
+ result = undefined;
+ delete traced[fullName];
+ }
+ }
+
+ return result;
+ }
+
+ function forceExec(manager, traced) {
+ var fullName = manager.map.fullName,
+ depArray = manager.depArray,
+ i, depName, depManager, prefix, prefixManager, value;
+
+
+ if (manager.isDone || !fullName || !loaded[fullName]) {
+ return undefined;
+ }
+
+ if (fullName) {
+ if (traced[fullName]) {
+ return defined[fullName];
+ }
+
+ traced[fullName] = true;
+ }
+
+ //Trace through the dependencies.
+ if (depArray) {
+ for (i = 0; i < depArray.length; i++) {
+ //Some array members may be null, like if a trailing comma
+ //IE, so do the explicit [i] access and check if it has a value.
+ depName = depArray[i];
+ if (depName) {
+ //First, make sure if it is a plugin resource that the
+ //plugin is not blocked.
+ prefix = makeModuleMap(depName).prefix;
+ if (prefix && (prefixManager = waiting[prefix])) {
+ forceExec(prefixManager, traced);
+ }
+ depManager = waiting[depName];
+ if (depManager && !depManager.isDone && loaded[depName]) {
+ value = forceExec(depManager, traced);
+ manager.depCallbacks[i](value);
+ }
+ }
+ }
+ }
+
+ return defined[fullName];
+ }
+
+ /**
+ * Checks if all modules for a context are loaded, and if so, evaluates the
+ * new ones in right dependency order.
+ *
+ * @private
+ */
+ function checkLoaded() {
+ var waitInterval = config.waitSeconds * 1000,
+ //It is possible to disable the wait interval by using waitSeconds of 0.
+ expired = waitInterval && (context.startTime + waitInterval) < new Date().getTime(),
+ noLoads = "", hasLoadedProp = false, stillLoading = false,
+ cycleDeps = [],
+ i, prop, err, manager, cycleManager, moduleDeps;
+
+ //If there are items still in the paused queue processing wait.
+ //This is particularly important in the sync case where each paused
+ //item is processed right away but there may be more waiting.
+ if (context.pausedCount > 0) {
+ return undefined;
+ }
+
+ //Determine if priority loading is done. If so clear the priority. If
+ //not, then do not check
+ if (config.priorityWait) {
+ if (isPriorityDone()) {
+ //Call resume, since it could have
+ //some waiting dependencies to trace.
+ resume();
+ } else {
+ return undefined;
+ }
+ }
+
+ //See if anything is still in flight.
+ for (prop in loaded) {
+ if (!(prop in empty)) {
+ hasLoadedProp = true;
+ if (!loaded[prop]) {
+ if (expired) {
+ noLoads += prop + " ";
+ } else {
+ stillLoading = true;
+ if (prop.indexOf('!') === -1) {
+ //No reason to keep looking for unfinished
+ //loading. If the only stillLoading is a
+ //plugin resource though, keep going,
+ //because it may be that a plugin resource
+ //is waiting on a non-plugin cycle.
+ cycleDeps = [];
+ break;
+ } else {
+ moduleDeps = managerCallbacks[prop] && managerCallbacks[prop].moduleDeps;
+ if (moduleDeps) {
+ cycleDeps.push.apply(cycleDeps, moduleDeps);
+ }
+ }
+ }
+ }
+ }
+ }
+
+ //Check for exit conditions.
+ if (!hasLoadedProp && !context.waitCount) {
+ //If the loaded object had no items, then the rest of
+ //the work below does not need to be done.
+ return undefined;
+ }
+ if (expired && noLoads) {
+ //If wait time expired, throw error of unloaded modules.
+ err = makeError("timeout", "Load timeout for modules: " + noLoads);
+ err.requireType = "timeout";
+ err.requireModules = noLoads;
+ err.contextName = context.contextName;
+ return req.onError(err);
+ }
+
+ //If still loading but a plugin is waiting on a regular module cycle
+ //break the cycle.
+ if (stillLoading && cycleDeps.length) {
+ for (i = 0; (manager = waiting[cycleDeps[i]]); i++) {
+ if ((cycleManager = findCycle(manager, {}))) {
+ forceExec(cycleManager, {});
+ break;
+ }
+ }
+
+ }
+
+ //If still waiting on loads, and the waiting load is something
+ //other than a plugin resource, or there are still outstanding
+ //scripts, then just try back later.
+ if (!expired && (stillLoading || context.scriptCount)) {
+ //Something is still waiting to load. Wait for it, but only
+ //if a timeout is not already in effect.
+ if ((isBrowser || isWebWorker) && !checkLoadedTimeoutId) {
+ checkLoadedTimeoutId = setTimeout(function () {
+ checkLoadedTimeoutId = 0;
+ checkLoaded();
+ }, 50);
+ }
+ return undefined;
+ }
+
+ //If still have items in the waiting cue, but all modules have
+ //been loaded, then it means there are some circular dependencies
+ //that need to be broken.
+ //However, as a waiting thing is fired, then it can add items to
+ //the waiting cue, and those items should not be fired yet, so
+ //make sure to redo the checkLoaded call after breaking a single
+ //cycle, if nothing else loaded then this logic will pick it up
+ //again.
+ if (context.waitCount) {
+ //Cycle through the waitAry, and call items in sequence.
+ for (i = 0; (manager = waitAry[i]); i++) {
+ forceExec(manager, {});
+ }
+
+ //If anything got placed in the paused queue, run it down.
+ if (context.paused.length) {
+ resume();
+ }
+
+ //Only allow this recursion to a certain depth. Only
+ //triggered by errors in calling a module in which its
+ //modules waiting on it cannot finish loading, or some circular
+ //dependencies that then may add more dependencies.
+ //The value of 5 is a bit arbitrary. Hopefully just one extra
+ //pass, or two for the case of circular dependencies generating
+ //more work that gets resolved in the sync node case.
+ if (checkLoadedDepth < 5) {
+ checkLoadedDepth += 1;
+ checkLoaded();
+ }
+ }
+
+ checkLoadedDepth = 0;
+
+ //Check for DOM ready, and nothing is waiting across contexts.
+ req.checkReadyState();
+
+ return undefined;
+ }
+
+ /**
+ * Resumes tracing of dependencies and then checks if everything is loaded.
+ */
+ resume = function () {
+ var manager, map, url, i, p, args, fullName;
+
+ //Any defined modules in the global queue, intake them now.
+ context.takeGlobalQueue();
+
+ resumeDepth += 1;
+
+ if (context.scriptCount <= 0) {
+ //Synchronous envs will push the number below zero with the
+ //decrement above, be sure to set it back to zero for good measure.
+ //require() calls that also do not end up loading scripts could
+ //push the number negative too.
+ context.scriptCount = 0;
+ }
+
+ //Make sure any remaining defQueue items get properly processed.
+ while (defQueue.length) {
+ args = defQueue.shift();
+ if (args[0] === null) {
+ return req.onError(makeError('mismatch', 'Mismatched anonymous define() module: ' + args[args.length - 1]));
+ } else {
+ callDefMain(args);
+ }
+ }
+
+ //Skip the resume of paused dependencies
+ //if current context is in priority wait.
+ if (!config.priorityWait || isPriorityDone()) {
+ while (context.paused.length) {
+ p = context.paused;
+ context.pausedCount += p.length;
+ //Reset paused list
+ context.paused = [];
+
+ for (i = 0; (manager = p[i]); i++) {
+ map = manager.map;
+ url = map.url;
+ fullName = map.fullName;
+
+ //If the manager is for a plugin managed resource,
+ //ask the plugin to load it now.
+ if (map.prefix) {
+ callPlugin(map.prefix, manager);
+ } else {
+ //Regular dependency.
+ if (!urlFetched[url] && !loaded[fullName]) {
+ (config.requireLoad || req.load)(context, fullName, url);
+
+ //Mark the URL as fetched, but only if it is
+ //not an empty: URL, used by the optimizer.
+ //In that case we need to be sure to call
+ //load() for each module that is mapped to
+ //empty: so that dependencies are satisfied
+ //correctly.
+ if (url.indexOf('empty:') !== 0) {
+ urlFetched[url] = true;
+ }
+ }
+ }
+ }
+
+ //Move the start time for timeout forward.
+ context.startTime = (new Date()).getTime();
+ context.pausedCount -= p.length;
+ }
+ }
+
+ //Only check if loaded when resume depth is 1. It is likely that
+ //it is only greater than 1 in sync environments where a factory
+ //function also then calls the callback-style require. In those
+ //cases, the checkLoaded should not occur until the resume
+ //depth is back at the top level.
+ if (resumeDepth === 1) {
+ checkLoaded();
+ }
+
+ resumeDepth -= 1;
+
+ return undefined;
+ };
+
+ //Define the context object. Many of these fields are on here
+ //just to make debugging easier.
+ context = {
+ contextName: contextName,
+ config: config,
+ defQueue: defQueue,
+ waiting: waiting,
+ waitCount: 0,
+ specified: specified,
+ loaded: loaded,
+ urlMap: urlMap,
+ urlFetched: urlFetched,
+ scriptCount: 0,
+ defined: defined,
+ paused: [],
+ pausedCount: 0,
+ plugins: plugins,
+ needFullExec: needFullExec,
+ fake: {},
+ fullExec: fullExec,
+ managerCallbacks: managerCallbacks,
+ makeModuleMap: makeModuleMap,
+ normalize: normalize,
+ /**
+ * Set a configuration for the context.
+ * @param {Object} cfg config object to integrate.
+ */
+ configure: function (cfg) {
+ var paths, prop, packages, pkgs, packagePaths, requireWait;
+
+ //Make sure the baseUrl ends in a slash.
+ if (cfg.baseUrl) {
+ if (cfg.baseUrl.charAt(cfg.baseUrl.length - 1) !== "/") {
+ cfg.baseUrl += "/";
+ }
+ }
+
+ //Save off the paths and packages since they require special processing,
+ //they are additive.
+ paths = config.paths;
+ packages = config.packages;
+ pkgs = config.pkgs;
+
+ //Mix in the config values, favoring the new values over
+ //existing ones in context.config.
+ mixin(config, cfg, true);
+
+ //Adjust paths if necessary.
+ if (cfg.paths) {
+ for (prop in cfg.paths) {
+ if (!(prop in empty)) {
+ paths[prop] = cfg.paths[prop];
+ }
+ }
+ config.paths = paths;
+ }
+
+ packagePaths = cfg.packagePaths;
+ if (packagePaths || cfg.packages) {
+ //Convert packagePaths into a packages config.
+ if (packagePaths) {
+ for (prop in packagePaths) {
+ if (!(prop in empty)) {
+ configurePackageDir(pkgs, packagePaths[prop], prop);
+ }
+ }
+ }
+
+ //Adjust packages if necessary.
+ if (cfg.packages) {
+ configurePackageDir(pkgs, cfg.packages);
+ }
+
+ //Done with modifications, assing packages back to context config
+ config.pkgs = pkgs;
+ }
+
+ //If priority loading is in effect, trigger the loads now
+ if (cfg.priority) {
+ //Hold on to requireWait value, and reset it after done
+ requireWait = context.requireWait;
+
+ //Allow tracing some require calls to allow the fetching
+ //of the priority config.
+ context.requireWait = false;
+ //But first, call resume to register any defined modules that may
+ //be in a data-main built file before the priority config
+ //call.
+ resume();
+
+ context.require(cfg.priority);
+
+ //Trigger a resume right away, for the case when
+ //the script with the priority load is done as part
+ //of a data-main call. In that case the normal resume
+ //call will not happen because the scriptCount will be
+ //at 1, since the script for data-main is being processed.
+ resume();
+
+ //Restore previous state.
+ context.requireWait = requireWait;
+ config.priorityWait = cfg.priority;
+ }
+
+ //If a deps array or a config callback is specified, then call
+ //require with those args. This is useful when require is defined as a
+ //config object before require.js is loaded.
+ if (cfg.deps || cfg.callback) {
+ context.require(cfg.deps || [], cfg.callback);
+ }
+ },
+
+ requireDefined: function (moduleName, relModuleMap) {
+ return makeModuleMap(moduleName, relModuleMap).fullName in defined;
+ },
+
+ requireSpecified: function (moduleName, relModuleMap) {
+ return makeModuleMap(moduleName, relModuleMap).fullName in specified;
+ },
+
+ require: function (deps, callback, relModuleMap) {
+ var moduleName, fullName, moduleMap;
+ if (typeof deps === "string") {
+ if (isFunction(callback)) {
+ //Invalid call
+ return req.onError(makeError("requireargs", "Invalid require call"));
+ }
+
+ //Synchronous access to one module. If require.get is
+ //available (as in the Node adapter), prefer that.
+ //In this case deps is the moduleName and callback is
+ //the relModuleMap
+ if (req.get) {
+ return req.get(context, deps, callback);
+ }
+
+ //Just return the module wanted. In this scenario, the
+ //second arg (if passed) is just the relModuleMap.
+ moduleName = deps;
+ relModuleMap = callback;
+
+ //Normalize module name, if it contains . or ..
+ moduleMap = makeModuleMap(moduleName, relModuleMap);
+ fullName = moduleMap.fullName;
+
+ if (!(fullName in defined)) {
+ return req.onError(makeError("notloaded", "Module name '" +
+ moduleMap.fullName +
+ "' has not been loaded yet for context: " +
+ contextName));
+ }
+ return defined[fullName];
+ }
+
+ //Call main but only if there are dependencies or
+ //a callback to call.
+ if (deps && deps.length || callback) {
+ main(null, deps, callback, relModuleMap);
+ }
+
+ //If the require call does not trigger anything new to load,
+ //then resume the dependency processing.
+ if (!context.requireWait) {
+ while (!context.scriptCount && context.paused.length) {
+ resume();
+ }
+ }
+ return context.require;
+ },
+
+ /**
+ * Internal method to transfer globalQueue items to this context's
+ * defQueue.
+ */
+ takeGlobalQueue: function () {
+ //Push all the globalDefQueue items into the context's defQueue
+ if (globalDefQueue.length) {
+ //Array splice in the values since the context code has a
+ //local var ref to defQueue, so cannot just reassign the one
+ //on context.
+ apsp.apply(context.defQueue,
+ [context.defQueue.length - 1, 0].concat(globalDefQueue));
+ globalDefQueue = [];
+ }
+ },
+
+ /**
+ * Internal method used by environment adapters to complete a load event.
+ * A load event could be a script load or just a load pass from a synchronous
+ * load call.
+ * @param {String} moduleName the name of the module to potentially complete.
+ */
+ completeLoad: function (moduleName) {
+ var args;
+
+ context.takeGlobalQueue();
+
+ while (defQueue.length) {
+ args = defQueue.shift();
+
+ if (args[0] === null) {
+ args[0] = moduleName;
+ break;
+ } else if (args[0] === moduleName) {
+ //Found matching define call for this script!
+ break;
+ } else {
+ //Some other named define call, most likely the result
+ //of a build layer that included many define calls.
+ callDefMain(args);
+ args = null;
+ }
+ }
+ if (args) {
+ callDefMain(args);
+ } else {
+ //A script that does not call define(), so just simulate
+ //the call for it. Special exception for jQuery dynamic load.
+ callDefMain([moduleName, [],
+ moduleName === "jquery" && typeof jQuery !== "undefined" ?
+ function () {
+ return jQuery;
+ } : null]);
+ }
+
+ //Doing this scriptCount decrement branching because sync envs
+ //need to decrement after resume, otherwise it looks like
+ //loading is complete after the first dependency is fetched.
+ //For browsers, it works fine to decrement after, but it means
+ //the checkLoaded setTimeout 50 ms cost is taken. To avoid
+ //that cost, decrement beforehand.
+ if (req.isAsync) {
+ context.scriptCount -= 1;
+ }
+ resume();
+ if (!req.isAsync) {
+ context.scriptCount -= 1;
+ }
+ },
+
+ /**
+ * Converts a module name + .extension into an URL path.
+ * *Requires* the use of a module name. It does not support using
+ * plain URLs like nameToUrl.
+ */
+ toUrl: function (moduleNamePlusExt, relModuleMap) {
+ var index = moduleNamePlusExt.lastIndexOf("."),
+ ext = null;
+
+ if (index !== -1) {
+ ext = moduleNamePlusExt.substring(index, moduleNamePlusExt.length);
+ moduleNamePlusExt = moduleNamePlusExt.substring(0, index);
+ }
+
+ return context.nameToUrl(moduleNamePlusExt, ext, relModuleMap);
+ },
+
+ /**
+ * Converts a module name to a file path. Supports cases where
+ * moduleName may actually be just an URL.
+ */
+ nameToUrl: function (moduleName, ext, relModuleMap) {
+ var paths, pkgs, pkg, pkgPath, syms, i, parentModule, url,
+ config = context.config;
+
+ //Normalize module name if have a base relative module name to work from.
+ moduleName = normalize(moduleName, relModuleMap && relModuleMap.fullName);
+
+ //If a colon is in the URL, it indicates a protocol is used and it is just
+ //an URL to a file, or if it starts with a slash or ends with .js, it is just a plain file.
+ //The slash is important for protocol-less URLs as well as full paths.
+ if (req.jsExtRegExp.test(moduleName)) {
+ //Just a plain path, not module name lookup, so just return it.
+ //Add extension if it is included. This is a bit wonky, only non-.js things pass
+ //an extension, this method probably needs to be reworked.
+ url = moduleName + (ext ? ext : "");
+ } else {
+ //A module that needs to be converted to a path.
+ paths = config.paths;
+ pkgs = config.pkgs;
+
+ syms = moduleName.split("/");
+ //For each module name segment, see if there is a path
+ //registered for it. Start with most specific name
+ //and work up from it.
+ for (i = syms.length; i > 0; i--) {
+ parentModule = syms.slice(0, i).join("/");
+ if (paths[parentModule]) {
+ syms.splice(0, i, paths[parentModule]);
+ break;
+ } else if ((pkg = pkgs[parentModule])) {
+ //If module name is just the package name, then looking
+ //for the main module.
+ if (moduleName === pkg.name) {
+ pkgPath = pkg.location + '/' + pkg.main;
+ } else {
+ pkgPath = pkg.location;
+ }
+ syms.splice(0, i, pkgPath);
+ break;
+ }
+ }
+
+ //Join the path parts together, then figure out if baseUrl is needed.
+ url = syms.join("/") + (ext || ".js");
+ url = (url.charAt(0) === '/' || url.match(/^\w+:/) ? "" : config.baseUrl) + url;
+ }
+
+ return config.urlArgs ? url +
+ ((url.indexOf('?') === -1 ? '?' : '&') +
+ config.urlArgs) : url;
+ }
+ };
+
+ //Make these visible on the context so can be called at the very
+ //end of the file to bootstrap
+ context.jQueryCheck = jQueryCheck;
+ context.resume = resume;
+
+ return context;
+ }
+
+ /**
+ * Main entry point.
+ *
+ * If the only argument to require is a string, then the module that
+ * is represented by that string is fetched for the appropriate context.
+ *
+ * If the first argument is an array, then it will be treated as an array
+ * of dependency string names to fetch. An optional function callback can
+ * be specified to execute when all of those dependencies are available.
+ *
+ * Make a local req variable to help Caja compliance (it assumes things
+ * on a require that are not standardized), and to give a short
+ * name for minification/local scope use.
+ */
+ req = requirejs = function (deps, callback) {
+
+ //Find the right context, use default
+ var contextName = defContextName,
+ context, config;
+
+ // Determine if have config object in the call.
+ if (!isArray(deps) && typeof deps !== "string") {
+ // deps is a config object
+ config = deps;
+ if (isArray(callback)) {
+ // Adjust args if there are dependencies
+ deps = callback;
+ callback = arguments[2];
+ } else {
+ deps = [];
+ }
+ }
+
+ if (config && config.context) {
+ contextName = config.context;
+ }
+
+ context = contexts[contextName] ||
+ (contexts[contextName] = newContext(contextName));
+
+ if (config) {
+ context.configure(config);
+ }
+
+ return context.require(deps, callback);
+ };
+
+ /**
+ * Support require.config() to make it easier to cooperate with other
+ * AMD loaders on globally agreed names.
+ */
+ req.config = function (config) {
+ return req(config);
+ };
+
+ /**
+ * Export require as a global, but only if it does not already exist.
+ */
+ if (!require) {
+ require = req;
+ }
+
+ /**
+ * Global require.toUrl(), to match global require, mostly useful
+ * for debugging/work in the global space.
+ */
+ req.toUrl = function (moduleNamePlusExt) {
+ return contexts[defContextName].toUrl(moduleNamePlusExt);
+ };
+
+ req.version = version;
+
+ //Used to filter out dependencies that are already paths.
+ req.jsExtRegExp = /^\/|:|\?|\.js$/;
+ s = req.s = {
+ contexts: contexts,
+ //Stores a list of URLs that should not get async script tag treatment.
+ skipAsync: {}
+ };
+
+ req.isAsync = req.isBrowser = isBrowser;
+ if (isBrowser) {
+ head = s.head = document.getElementsByTagName("head")[0];
+ //If BASE tag is in play, using appendChild is a problem for IE6.
+ //When that browser dies, this can be removed. Details in this jQuery bug:
+ //http://dev.jquery.com/ticket/2709
+ baseElement = document.getElementsByTagName("base")[0];
+ if (baseElement) {
+ head = s.head = baseElement.parentNode;
+ }
+ }
+
+ /**
+ * Any errors that require explicitly generates will be passed to this
+ * function. Intercept/override it if you want custom error handling.
+ * @param {Error} err the error object.
+ */
+ req.onError = function (err) {
+ throw err;
+ };
+
+ /**
+ * Does the request to load a module for the browser case.
+ * Make this a separate function to allow other environments
+ * to override it.
+ *
+ * @param {Object} context the require context to find state.
+ * @param {String} moduleName the name of the module.
+ * @param {Object} url the URL to the module.
+ */
+ req.load = function (context, moduleName, url) {
+ req.resourcesReady(false);
+
+ context.scriptCount += 1;
+ req.attach(url, context, moduleName);
+
+ //If tracking a jQuery, then make sure its ready callbacks
+ //are put on hold to prevent its ready callbacks from
+ //triggering too soon.
+ if (context.jQuery && !context.jQueryIncremented) {
+ jQueryHoldReady(context.jQuery, true);
+ context.jQueryIncremented = true;
+ }
+ };
+
+ function getInteractiveScript() {
+ var scripts, i, script;
+ if (interactiveScript && interactiveScript.readyState === 'interactive') {
+ return interactiveScript;
+ }
+
+ scripts = document.getElementsByTagName('script');
+ for (i = scripts.length - 1; i > -1 && (script = scripts[i]); i--) {
+ if (script.readyState === 'interactive') {
+ return (interactiveScript = script);
+ }
+ }
+
+ return null;
+ }
+
+ /**
+ * The function that handles definitions of modules. Differs from
+ * require() in that a string for the module should be the first argument,
+ * and the function to execute after dependencies are loaded should
+ * return a value to define the module corresponding to the first argument's
+ * name.
+ */
+ define = function (name, deps, callback) {
+ var node, context;
+
+ //Allow for anonymous functions
+ if (typeof name !== 'string') {
+ //Adjust args appropriately
+ callback = deps;
+ deps = name;
+ name = null;
+ }
+
+ //This module may not have dependencies
+ if (!isArray(deps)) {
+ callback = deps;
+ deps = [];
+ }
+
+ //If no name, and callback is a function, then figure out if it a
+ //CommonJS thing with dependencies.
+ if (!deps.length && isFunction(callback)) {
+ //Remove comments from the callback string,
+ //look for require calls, and pull them into the dependencies,
+ //but only if there are function args.
+ if (callback.length) {
+ callback
+ .toString()
+ .replace(commentRegExp, "")
+ .replace(cjsRequireRegExp, function (match, dep) {
+ deps.push(dep);
+ });
+
+ //May be a CommonJS thing even without require calls, but still
+ //could use exports, and module. Avoid doing exports and module
+ //work though if it just needs require.
+ //REQUIRES the function to expect the CommonJS variables in the
+ //order listed below.
+ deps = (callback.length === 1 ? ["require"] : ["require", "exports", "module"]).concat(deps);
+ }
+ }
+
+ //If in IE 6-8 and hit an anonymous define() call, do the interactive
+ //work.
+ if (useInteractive) {
+ node = currentlyAddingScript || getInteractiveScript();
+ if (node) {
+ if (!name) {
+ name = node.getAttribute("data-requiremodule");
+ }
+ context = contexts[node.getAttribute("data-requirecontext")];
+ }
+ }
+
+ //Always save off evaluating the def call until the script onload handler.
+ //This allows multiple modules to be in a file without prematurely
+ //tracing dependencies, and allows for anonymous module support,
+ //where the module name is not known until the script onload event
+ //occurs. If no context, use the global queue, and get it processed
+ //in the onscript load callback.
+ (context ? context.defQueue : globalDefQueue).push([name, deps, callback]);
+
+ return undefined;
+ };
+
+ define.amd = {
+ multiversion: true,
+ plugins: true,
+ jQuery: true
+ };
+
+ /**
+ * Executes the text. Normally just uses eval, but can be modified
+ * to use a more environment specific call.
+ * @param {String} text the text to execute/evaluate.
+ */
+ req.exec = function (text) {
+ return eval(text);
+ };
+
+ /**
+ * Executes a module callack function. Broken out as a separate function
+ * solely to allow the build system to sequence the files in the built
+ * layer in the right sequence.
+ *
+ * @private
+ */
+ req.execCb = function (name, callback, args, exports) {
+ return callback.apply(exports, args);
+ };
+
+
+ /**
+ * Adds a node to the DOM. Public function since used by the order plugin.
+ * This method should not normally be called by outside code.
+ */
+ req.addScriptToDom = function (node) {
+ //For some cache cases in IE 6-8, the script executes before the end
+ //of the appendChild execution, so to tie an anonymous define
+ //call to the module name (which is stored on the node), hold on
+ //to a reference to this node, but clear after the DOM insertion.
+ currentlyAddingScript = node;
+ if (baseElement) {
+ head.insertBefore(node, baseElement);
+ } else {
+ head.appendChild(node);
+ }
+ currentlyAddingScript = null;
+ };
+
+ /**
+ * callback for script loads, used to check status of loading.
+ *
+ * @param {Event} evt the event from the browser for the script
+ * that was loaded.
+ *
+ * @private
+ */
+ req.onScriptLoad = function (evt) {
+ //Using currentTarget instead of target for Firefox 2.0's sake. Not
+ //all old browsers will be supported, but this one was easy enough
+ //to support and still makes sense.
+ var node = evt.currentTarget || evt.srcElement, contextName, moduleName,
+ context;
+
+ if (evt.type === "load" || (node && readyRegExp.test(node.readyState))) {
+ //Reset interactive script so a script node is not held onto for
+ //to long.
+ interactiveScript = null;
+
+ //Pull out the name of the module and the context.
+ contextName = node.getAttribute("data-requirecontext");
+ moduleName = node.getAttribute("data-requiremodule");
+ context = contexts[contextName];
+
+ contexts[contextName].completeLoad(moduleName);
+
+ //Clean up script binding. Favor detachEvent because of IE9
+ //issue, see attachEvent/addEventListener comment elsewhere
+ //in this file.
+ if (node.detachEvent && !isOpera) {
+ //Probably IE. If not it will throw an error, which will be
+ //useful to know.
+ node.detachEvent("onreadystatechange", req.onScriptLoad);
+ } else {
+ node.removeEventListener("load", req.onScriptLoad, false);
+ }
+ }
+ };
+
+ /**
+ * Attaches the script represented by the URL to the current
+ * environment. Right now only supports browser loading,
+ * but can be redefined in other environments to do the right thing.
+ * @param {String} url the url of the script to attach.
+ * @param {Object} context the context that wants the script.
+ * @param {moduleName} the name of the module that is associated with the script.
+ * @param {Function} [callback] optional callback, defaults to require.onScriptLoad
+ * @param {String} [type] optional type, defaults to text/javascript
+ * @param {Function} [fetchOnlyFunction] optional function to indicate the script node
+ * should be set up to fetch the script but do not attach it to the DOM
+ * so that it can later be attached to execute it. This is a way for the
+ * order plugin to support ordered loading in IE. Once the script is fetched,
+ * but not executed, the fetchOnlyFunction will be called.
+ */
+ req.attach = function (url, context, moduleName, callback, type, fetchOnlyFunction) {
+ var node;
+ if (isBrowser) {
+ //In the browser so use a script tag
+ callback = callback || req.onScriptLoad;
+ node = context && context.config && context.config.xhtml ?
+ document.createElementNS("http://www.w3.org/1999/xhtml", "html:script") :
+ document.createElement("script");
+ node.type = type || (context && context.config.scriptType) ||
+ "text/javascript";
+ node.charset = "utf-8";
+ //Use async so Gecko does not block on executing the script if something
+ //like a long-polling comet tag is being run first. Gecko likes
+ //to evaluate scripts in DOM order, even for dynamic scripts.
+ //It will fetch them async, but only evaluate the contents in DOM
+ //order, so a long-polling script tag can delay execution of scripts
+ //after it. But telling Gecko we expect async gets us the behavior
+ //we want -- execute it whenever it is finished downloading. Only
+ //Helps Firefox 3.6+
+ //Allow some URLs to not be fetched async. Mostly helps the order!
+ //plugin
+ node.async = !s.skipAsync[url];
+
+ if (context) {
+ node.setAttribute("data-requirecontext", context.contextName);
+ }
+ node.setAttribute("data-requiremodule", moduleName);
+
+ //Set up load listener. Test attachEvent first because IE9 has
+ //a subtle issue in its addEventListener and script onload firings
+ //that do not match the behavior of all other browsers with
+ //addEventListener support, which fire the onload event for a
+ //script right after the script execution. See:
+ //https://connect.microsoft.com/IE/feedback/details/648057/script-onload-event-is-not-fired-immediately-after-script-execution
+ //UNFORTUNATELY Opera implements attachEvent but does not follow the script
+ //script execution mode.
+ if (node.attachEvent && !isOpera) {
+ //Probably IE. IE (at least 6-8) do not fire
+ //script onload right after executing the script, so
+ //we cannot tie the anonymous define call to a name.
+ //However, IE reports the script as being in "interactive"
+ //readyState at the time of the define call.
+ useInteractive = true;
+
+
+ if (fetchOnlyFunction) {
+ //Need to use old school onreadystate here since
+ //when the event fires and the node is not attached
+ //to the DOM, the evt.srcElement is null, so use
+ //a closure to remember the node.
+ node.onreadystatechange = function (evt) {
+ //Script loaded but not executed.
+ //Clear loaded handler, set the real one that
+ //waits for script execution.
+ if (node.readyState === 'loaded') {
+ node.onreadystatechange = null;
+ node.attachEvent("onreadystatechange", callback);
+ fetchOnlyFunction(node);
+ }
+ };
+ } else {
+ node.attachEvent("onreadystatechange", callback);
+ }
+ } else {
+ node.addEventListener("load", callback, false);
+ }
+ node.src = url;
+
+ //Fetch only means waiting to attach to DOM after loaded.
+ if (!fetchOnlyFunction) {
+ req.addScriptToDom(node);
+ }
+
+ return node;
+ } else if (isWebWorker) {
+ //In a web worker, use importScripts. This is not a very
+ //efficient use of importScripts, importScripts will block until
+ //its script is downloaded and evaluated. However, if web workers
+ //are in play, the expectation that a build has been done so that
+ //only one script needs to be loaded anyway. This may need to be
+ //reevaluated if other use cases become common.
+ importScripts(url);
+
+ //Account for anonymous modules
+ context.completeLoad(moduleName);
+ }
+ return null;
+ };
+
+ //Look for a data-main script attribute, which could also adjust the baseUrl.
+ if (isBrowser) {
+ //Figure out baseUrl. Get it from the script tag with require.js in it.
+ scripts = document.getElementsByTagName("script");
+
+ for (globalI = scripts.length - 1; globalI > -1 && (script = scripts[globalI]); globalI--) {
+ //Set the "head" where we can append children by
+ //using the script's parent.
+ if (!head) {
+ head = script.parentNode;
+ }
+
+ //Look for a data-main attribute to set main script for the page
+ //to load. If it is there, the path to data main becomes the
+ //baseUrl, if it is not already set.
+ if ((dataMain = script.getAttribute('data-main'))) {
+ if (!cfg.baseUrl) {
+ //Pull off the directory of data-main for use as the
+ //baseUrl.
+ src = dataMain.split('/');
+ mainScript = src.pop();
+ subPath = src.length ? src.join('/') + '/' : './';
+
+ //Set final config.
+ cfg.baseUrl = subPath;
+ //Strip off any trailing .js since dataMain is now
+ //like a module name.
+ dataMain = mainScript.replace(jsSuffixRegExp, '');
+ }
+
+ //Put the data-main script in the files to load.
+ cfg.deps = cfg.deps ? cfg.deps.concat(dataMain) : [dataMain];
+
+ break;
+ }
+ }
+ }
+
+ //See if there is nothing waiting across contexts, and if not, trigger
+ //resourcesReady.
+ req.checkReadyState = function () {
+ var contexts = s.contexts, prop;
+ for (prop in contexts) {
+ if (!(prop in empty)) {
+ if (contexts[prop].waitCount) {
+ return;
+ }
+ }
+ }
+ req.resourcesReady(true);
+ };
+
+ /**
+ * Internal function that is triggered whenever all scripts/resources
+ * have been loaded by the loader. Can be overridden by other, for
+ * instance the domReady plugin, which wants to know when all resources
+ * are loaded.
+ */
+ req.resourcesReady = function (isReady) {
+ var contexts, context, prop;
+
+ //First, set the public variable indicating that resources are loading.
+ req.resourcesDone = isReady;
+
+ if (req.resourcesDone) {
+ //If jQuery with DOM ready delayed, release it now.
+ contexts = s.contexts;
+ for (prop in contexts) {
+ if (!(prop in empty)) {
+ context = contexts[prop];
+ if (context.jQueryIncremented) {
+ jQueryHoldReady(context.jQuery, false);
+ context.jQueryIncremented = false;
+ }
+ }
+ }
+ }
+ };
+
+ //FF < 3.6 readyState fix. Needed so that domReady plugin
+ //works well in that environment, since require.js is normally
+ //loaded via an HTML script tag so it will be there before window load,
+ //where the domReady plugin is more likely to be loaded after window load.
+ req.pageLoaded = function () {
+ if (document.readyState !== "complete") {
+ document.readyState = "complete";
+ }
+ };
+ if (isBrowser) {
+ if (document.addEventListener) {
+ if (!document.readyState) {
+ document.readyState = "loading";
+ window.addEventListener("load", req.pageLoaded, false);
+ }
+ }
+ }
+
+ //Set up default context. If require was a configuration object, use that as base config.
+ req(cfg);
+
+ //If modules are built into require.js, then need to make sure dependencies are
+ //traced. Use a setTimeout in the browser world, to allow all the modules to register
+ //themselves. In a non-browser env, assume that modules are not built into require.js,
+ //which seems odd to do on the server.
+ if (req.isAsync && typeof setTimeout !== "undefined") {
+ ctx = s.contexts[(cfg.context || defContextName)];
+ //Indicate that the script that includes require() is still loading,
+ //so that require()'d dependencies are not traced until the end of the
+ //file is parsed (approximated via the setTimeout call).
+ ctx.requireWait = true;
+ setTimeout(function () {
+ ctx.requireWait = false;
+
+ if (!ctx.scriptCount) {
+ ctx.resume();
+ }
+ req.checkReadyState();
+ }, 0);
+ }
+}());
+
+
+ if (env === 'rhino') {
+ /**
+ * @license RequireJS rhino Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint strict: false */
+/*global require: false, java: false, load: false */
+
+(function () {
+
+ require.load = function (context, moduleName, url) {
+ //Indicate a the module is in process of loading.
+ context.scriptCount += 1;
+
+ load(url);
+
+ //Support anonymous modules.
+ context.completeLoad(moduleName);
+ };
+
+}());
+ } else if (env === 'node') {
+ this.requirejsVars = {
+ require: require,
+ requirejs: require,
+ define: define,
+ nodeRequire: nodeRequire
+ };
+ require.nodeRequire = nodeRequire;
+
+ /**
+ * @license RequireJS node Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint regexp: false, strict: false */
+/*global require: false, define: false, requirejsVars: false, process: false */
+
+/**
+ * This adapter assumes that x.js has loaded it and set up
+ * some variables. This adapter just allows limited RequireJS
+ * usage from within the requirejs directory. The general
+ * node adapater is r.js.
+ */
+
+(function () {
+ var nodeReq = requirejsVars.nodeRequire,
+ req = requirejsVars.require,
+ def = requirejsVars.define,
+ fs = nodeReq('fs'),
+ path = nodeReq('path'),
+ vm = nodeReq('vm');
+
+ //Supply an implementation that allows synchronous get of a module.
+ req.get = function (context, moduleName, relModuleMap) {
+ if (moduleName === "require" || moduleName === "exports" || moduleName === "module") {
+ req.onError(new Error("Explicit require of " + moduleName + " is not allowed."));
+ }
+
+ var ret,
+ moduleMap = context.makeModuleMap(moduleName, relModuleMap);
+
+ //Normalize module name, if it contains . or ..
+ moduleName = moduleMap.fullName;
+
+ if (moduleName in context.defined) {
+ ret = context.defined[moduleName];
+ } else {
+ if (ret === undefined) {
+ //Try to dynamically fetch it.
+ req.load(context, moduleName, moduleMap.url);
+ //The above call is sync, so can do the next thing safely.
+ ret = context.defined[moduleName];
+ }
+ }
+
+ return ret;
+ };
+
+ //Add wrapper around the code so that it gets the requirejs
+ //API instead of the Node API, and it is done lexically so
+ //that it survives later execution.
+ req.makeNodeWrapper = function (contents) {
+ return '(function (require, requirejs, define) { ' +
+ contents +
+ '\n}(requirejsVars.require, requirejsVars.requirejs, requirejsVars.define));';
+ };
+
+ requirejsVars.nodeLoad = req.load = function (context, moduleName, url) {
+ var contents, err;
+
+ //Indicate a the module is in process of loading.
+ context.scriptCount += 1;
+
+ if (path.existsSync(url)) {
+ contents = fs.readFileSync(url, 'utf8');
+
+ contents = req.makeNodeWrapper(contents);
+ try {
+ vm.runInThisContext(contents, fs.realpathSync(url));
+ } catch (e) {
+ err = new Error('Evaluating ' + url + ' as module "' +
+ moduleName + '" failed with error: ' + e);
+ err.originalError = e;
+ err.moduleName = moduleName;
+ err.fileName = url;
+ return req.onError(err);
+ }
+ } else {
+ def(moduleName, function () {
+ try {
+ return (context.config.nodeRequire || req.nodeRequire)(moduleName);
+ } catch (e) {
+ err = new Error('Calling node\'s require("' +
+ moduleName + '") failed with error: ' + e);
+ err.originalError = e;
+ err.moduleName = moduleName;
+ return req.onError(err);
+ }
+ });
+ }
+
+ //Support anonymous modules.
+ context.completeLoad(moduleName);
+
+ return undefined;
+ };
+
+ //Override to provide the function wrapper for define/require.
+ req.exec = function (text) {
+ /*jslint evil: true */
+ text = req.makeNodeWrapper(text);
+ return eval(text);
+ };
+
+ //Hold on to the original execCb to use in useLib calls.
+ requirejsVars.nodeRequireExecCb = require.execCb;
+}());
+
+ }
+
+ //Support a default file name to execute. Useful for hosted envs
+ //like Joyent where it defaults to a server.js as the only executed
+ //script. But only do it if this is not an optimization run.
+ if (commandOption !== 'o' && (!fileName || !jsSuffixRegExp.test(fileName))) {
+ fileName = 'main.js';
+ }
+
+ /**
+ * Loads the library files that can be used for the optimizer, or for other
+ * tasks.
+ */
+ function loadLib() {
+ /**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint strict: false */
+/*global Packages: false, process: false, window: false, navigator: false,
+ document: false, define: false */
+
+/**
+ * A plugin that modifies any /env/ path to be the right path based on
+ * the host environment. Right now only works for Node, Rhino and browser.
+ */
+(function () {
+ var pathRegExp = /(\/|^)env\/|\{env\}/,
+ env = 'unknown';
+
+ if (typeof Packages !== 'undefined') {
+ env = 'rhino';
+ } else if (typeof process !== 'undefined') {
+ env = 'node';
+ } else if (typeof window !== "undefined" && navigator && document) {
+ env = 'browser';
+ }
+
+ define('env', {
+ load: function (name, req, load, config) {
+ //Allow override in the config.
+ if (config.env) {
+ env = config.env;
+ }
+
+ name = name.replace(pathRegExp, function (match, prefix) {
+ if (match.indexOf('{') === -1) {
+ return prefix + env + '/';
+ } else {
+ return env;
+ }
+ });
+
+ req([name], function (mod) {
+ load(mod);
+ });
+ }
+ });
+}());
+if(env === 'node') {
+/**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint strict: false */
+/*global define: false, process: false */
+
+define('node/args', function () {
+ //Do not return the "node" or "r.js" arguments
+ var args = process.argv.slice(2);
+
+ //Ignore any command option used for rq.js
+ if (args[0] && args[0].indexOf('-' === 0)) {
+ args = args.slice(1);
+ }
+
+ return args;
+});
+
+}
+
+if(env === 'rhino') {
+/**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint strict: false */
+/*global define: false, process: false */
+
+var jsLibRhinoArgs = (typeof rhinoArgs !== 'undefined' && rhinoArgs) || [].concat(Array.prototype.slice.call(arguments, 0));
+
+define('rhino/args', function () {
+ var args = jsLibRhinoArgs;
+
+ //Ignore any command option used for rq.js
+ if (args[0] && args[0].indexOf('-' === 0)) {
+ args = args.slice(1);
+ }
+
+ return args;
+});
+
+}
+
+if(env === 'node') {
+/**
+ * @license RequireJS Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint strict: false */
+/*global define: false, console: false */
+
+define('node/load', ['fs'], function (fs) {
+ function load(fileName) {
+ var contents = fs.readFileSync(fileName, 'utf8');
+ process.compile(contents, fileName);
+ }
+
+ return load;
+});
+
+}
+
+if(env === 'rhino') {
+/**
+ * @license RequireJS Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint strict: false */
+/*global define: false, load: false */
+
+define('rhino/load', function () {
+ return load;
+});
+
+}
+
+if(env === 'node') {
+/**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint plusplus: false, octal:false, strict: false */
+/*global define: false, process: false */
+
+define('node/file', ['fs', 'path'], function (fs, path) {
+
+ var isWindows = process.platform === 'win32',
+ windowsDriveRegExp = /^[a-zA-Z]\:\/$/,
+ file;
+
+ function frontSlash(path) {
+ return path.replace(/\\/g, '/');
+ }
+
+ function exists(path) {
+ if (isWindows && path.charAt(path.length - 1) === '/' &&
+ path.charAt(path.length - 2) !== ':') {
+ path = path.substring(0, path.length - 1);
+ }
+
+ try {
+ fs.statSync(path);
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+
+ function mkDir(dir) {
+ if (!exists(dir) && (!isWindows || !windowsDriveRegExp.test(dir))) {
+ fs.mkdirSync(dir, 511);
+ }
+ }
+
+ function mkFullDir(dir) {
+ var parts = dir.split('/'),
+ currDir = '',
+ first = true;
+
+ parts.forEach(function (part) {
+ //First part may be empty string if path starts with a slash.
+ currDir += part + '/';
+ first = false;
+
+ if (part) {
+ mkDir(currDir);
+ }
+ });
+ }
+
+ file = {
+ backSlashRegExp: /\\/g,
+ exclusionRegExp: /^\./,
+ getLineSeparator: function () {
+ return '/';
+ },
+
+ exists: function (fileName) {
+ return exists(fileName);
+ },
+
+ parent: function (fileName) {
+ var parts = fileName.split('/');
+ parts.pop();
+ return parts.join('/');
+ },
+
+ /**
+ * Gets the absolute file path as a string, normalized
+ * to using front slashes for path separators.
+ * @param {String} fileName
+ */
+ absPath: function (fileName) {
+ return frontSlash(path.normalize(frontSlash(fs.realpathSync(fileName))));
+ },
+
+ normalize: function (fileName) {
+ return frontSlash(path.normalize(fileName));
+ },
+
+ isFile: function (path) {
+ return fs.statSync(path).isFile();
+ },
+
+ isDirectory: function (path) {
+ return fs.statSync(path).isDirectory();
+ },
+
+ getFilteredFileList: function (/*String*/startDir, /*RegExp*/regExpFilters, /*boolean?*/makeUnixPaths) {
+ //summary: Recurses startDir and finds matches to the files that match regExpFilters.include
+ //and do not match regExpFilters.exclude. Or just one regexp can be passed in for regExpFilters,
+ //and it will be treated as the "include" case.
+ //Ignores files/directories that start with a period (.) unless exclusionRegExp
+ //is set to another value.
+ var files = [], topDir, regExpInclude, regExpExclude, dirFileArray,
+ i, stat, filePath, ok, dirFiles, fileName;
+
+ topDir = startDir;
+
+ regExpInclude = regExpFilters.include || regExpFilters;
+ regExpExclude = regExpFilters.exclude || null;
+
+ if (file.exists(topDir)) {
+ dirFileArray = fs.readdirSync(topDir);
+ for (i = 0; i < dirFileArray.length; i++) {
+ fileName = dirFileArray[i];
+ filePath = path.join(topDir, fileName);
+ stat = fs.statSync(filePath);
+ if (stat.isFile()) {
+ if (makeUnixPaths) {
+ //Make sure we have a JS string.
+ if (filePath.indexOf("/") === -1) {
+ filePath = frontSlash(filePath);
+ }
+ }
+
+ ok = true;
+ if (regExpInclude) {
+ ok = filePath.match(regExpInclude);
+ }
+ if (ok && regExpExclude) {
+ ok = !filePath.match(regExpExclude);
+ }
+
+ if (ok && (!file.exclusionRegExp ||
+ !file.exclusionRegExp.test(fileName))) {
+ files.push(filePath);
+ }
+ } else if (stat.isDirectory() &&
+ (!file.exclusionRegExp || !file.exclusionRegExp.test(fileName))) {
+ dirFiles = this.getFilteredFileList(filePath, regExpFilters, makeUnixPaths);
+ files.push.apply(files, dirFiles);
+ }
+ }
+ }
+
+ return files; //Array
+ },
+
+ copyDir: function (/*String*/srcDir, /*String*/destDir, /*RegExp?*/regExpFilter, /*boolean?*/onlyCopyNew) {
+ //summary: copies files from srcDir to destDir using the regExpFilter to determine if the
+ //file should be copied. Returns a list file name strings of the destinations that were copied.
+ regExpFilter = regExpFilter || /\w/;
+
+ //Normalize th directory names, but keep front slashes.
+ //path module on windows now returns backslashed paths.
+ srcDir = frontSlash(path.normalize(srcDir));
+ destDir = frontSlash(path.normalize(destDir));
+
+ var fileNames = file.getFilteredFileList(srcDir, regExpFilter, true),
+ copiedFiles = [], i, srcFileName, destFileName;
+
+ for (i = 0; i < fileNames.length; i++) {
+ srcFileName = fileNames[i];
+ destFileName = srcFileName.replace(srcDir, destDir);
+
+ if (file.copyFile(srcFileName, destFileName, onlyCopyNew)) {
+ copiedFiles.push(destFileName);
+ }
+ }
+
+ return copiedFiles.length ? copiedFiles : null; //Array or null
+ },
+
+ copyFile: function (/*String*/srcFileName, /*String*/destFileName, /*boolean?*/onlyCopyNew) {
+ //summary: copies srcFileName to destFileName. If onlyCopyNew is set, it only copies the file if
+ //srcFileName is newer than destFileName. Returns a boolean indicating if the copy occurred.
+ var parentDir;
+
+ //logger.trace("Src filename: " + srcFileName);
+ //logger.trace("Dest filename: " + destFileName);
+
+ //If onlyCopyNew is true, then compare dates and only copy if the src is newer
+ //than dest.
+ if (onlyCopyNew) {
+ if (file.exists(destFileName) && fs.statSync(destFileName).mtime.getTime() >= fs.statSync(srcFileName).mtime.getTime()) {
+ return false; //Boolean
+ }
+ }
+
+ //Make sure destination dir exists.
+ parentDir = path.dirname(destFileName);
+ if (!file.exists(parentDir)) {
+ mkFullDir(parentDir);
+ }
+
+ fs.writeFileSync(destFileName, fs.readFileSync(srcFileName, 'binary'), 'binary');
+
+ return true; //Boolean
+ },
+
+ /**
+ * Renames a file. May fail if "to" already exists or is on another drive.
+ */
+ renameFile: function (from, to) {
+ return fs.renameSync(from, to);
+ },
+
+ /**
+ * Reads a *text* file.
+ */
+ readFile: function (/*String*/path, /*String?*/encoding) {
+ if (encoding === 'utf-8') {
+ encoding = 'utf8';
+ }
+ if (!encoding) {
+ encoding = 'utf8';
+ }
+
+ var text = fs.readFileSync(path, encoding);
+
+ //Hmm, would not expect to get A BOM, but it seems to happen,
+ //remove it just in case.
+ if (text.indexOf('\uFEFF') === 0) {
+ text = text.substring(1, text.length);
+ }
+
+ return text;
+ },
+
+ saveUtf8File: function (/*String*/fileName, /*String*/fileContents) {
+ //summary: saves a *text* file using UTF-8 encoding.
+ file.saveFile(fileName, fileContents, "utf8");
+ },
+
+ saveFile: function (/*String*/fileName, /*String*/fileContents, /*String?*/encoding) {
+ //summary: saves a *text* file.
+ var parentDir;
+
+ if (encoding === 'utf-8') {
+ encoding = 'utf8';
+ }
+ if (!encoding) {
+ encoding = 'utf8';
+ }
+
+ //Make sure destination directories exist.
+ parentDir = path.dirname(fileName);
+ if (!file.exists(parentDir)) {
+ mkFullDir(parentDir);
+ }
+
+ fs.writeFileSync(fileName, fileContents, encoding);
+ },
+
+ deleteFile: function (/*String*/fileName) {
+ //summary: deletes a file or directory if it exists.
+ var files, i, stat;
+ if (file.exists(fileName)) {
+ stat = fs.statSync(fileName);
+ if (stat.isDirectory()) {
+ files = fs.readdirSync(fileName);
+ for (i = 0; i < files.length; i++) {
+ this.deleteFile(path.join(fileName, files[i]));
+ }
+ fs.rmdirSync(fileName);
+ } else {
+ fs.unlinkSync(fileName);
+ }
+ }
+ }
+ };
+
+ return file;
+
+});
+
+}
+
+if(env === 'rhino') {
+/**
+ * @license RequireJS Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+//Helper functions to deal with file I/O.
+
+/*jslint plusplus: false, strict: false */
+/*global java: false, define: false */
+
+define('rhino/file', function () {
+ var file = {
+ backSlashRegExp: /\\/g,
+
+ exclusionRegExp: /^\./,
+
+ getLineSeparator: function () {
+ return file.lineSeparator;
+ },
+
+ lineSeparator: java.lang.System.getProperty("line.separator"), //Java String
+
+ exists: function (fileName) {
+ return (new java.io.File(fileName)).exists();
+ },
+
+ parent: function (fileName) {
+ return file.absPath((new java.io.File(fileName)).getParentFile());
+ },
+
+ normalize: function (fileName) {
+ return file.absPath(fileName);
+ },
+
+ isFile: function (path) {
+ return (new java.io.File(path)).isFile();
+ },
+
+ isDirectory: function (path) {
+ return (new java.io.File(path)).isDirectory();
+ },
+
+ /**
+ * Gets the absolute file path as a string, normalized
+ * to using front slashes for path separators.
+ * @param {java.io.File||String} file
+ */
+ absPath: function (fileObj) {
+ if (typeof fileObj === "string") {
+ fileObj = new java.io.File(fileObj);
+ }
+ return (fileObj.getAbsolutePath() + "").replace(file.backSlashRegExp, "/");
+ },
+
+ getFilteredFileList: function (/*String*/startDir, /*RegExp*/regExpFilters, /*boolean?*/makeUnixPaths, /*boolean?*/startDirIsJavaObject) {
+ //summary: Recurses startDir and finds matches to the files that match regExpFilters.include
+ //and do not match regExpFilters.exclude. Or just one regexp can be passed in for regExpFilters,
+ //and it will be treated as the "include" case.
+ //Ignores files/directories that start with a period (.) unless exclusionRegExp
+ //is set to another value.
+ var files = [], topDir, regExpInclude, regExpExclude, dirFileArray,
+ i, fileObj, filePath, ok, dirFiles;
+
+ topDir = startDir;
+ if (!startDirIsJavaObject) {
+ topDir = new java.io.File(startDir);
+ }
+
+ regExpInclude = regExpFilters.include || regExpFilters;
+ regExpExclude = regExpFilters.exclude || null;
+
+ if (topDir.exists()) {
+ dirFileArray = topDir.listFiles();
+ for (i = 0; i < dirFileArray.length; i++) {
+ fileObj = dirFileArray[i];
+ if (fileObj.isFile()) {
+ filePath = fileObj.getPath();
+ if (makeUnixPaths) {
+ //Make sure we have a JS string.
+ filePath = String(filePath);
+ if (filePath.indexOf("/") === -1) {
+ filePath = filePath.replace(/\\/g, "/");
+ }
+ }
+
+ ok = true;
+ if (regExpInclude) {
+ ok = filePath.match(regExpInclude);
+ }
+ if (ok && regExpExclude) {
+ ok = !filePath.match(regExpExclude);
+ }
+
+ if (ok && (!file.exclusionRegExp ||
+ !file.exclusionRegExp.test(fileObj.getName()))) {
+ files.push(filePath);
+ }
+ } else if (fileObj.isDirectory() &&
+ (!file.exclusionRegExp || !file.exclusionRegExp.test(fileObj.getName()))) {
+ dirFiles = this.getFilteredFileList(fileObj, regExpFilters, makeUnixPaths, true);
+ files.push.apply(files, dirFiles);
+ }
+ }
+ }
+
+ return files; //Array
+ },
+
+ copyDir: function (/*String*/srcDir, /*String*/destDir, /*RegExp?*/regExpFilter, /*boolean?*/onlyCopyNew) {
+ //summary: copies files from srcDir to destDir using the regExpFilter to determine if the
+ //file should be copied. Returns a list file name strings of the destinations that were copied.
+ regExpFilter = regExpFilter || /\w/;
+
+ var fileNames = file.getFilteredFileList(srcDir, regExpFilter, true),
+ copiedFiles = [], i, srcFileName, destFileName;
+
+ for (i = 0; i < fileNames.length; i++) {
+ srcFileName = fileNames[i];
+ destFileName = srcFileName.replace(srcDir, destDir);
+
+ if (file.copyFile(srcFileName, destFileName, onlyCopyNew)) {
+ copiedFiles.push(destFileName);
+ }
+ }
+
+ return copiedFiles.length ? copiedFiles : null; //Array or null
+ },
+
+ copyFile: function (/*String*/srcFileName, /*String*/destFileName, /*boolean?*/onlyCopyNew) {
+ //summary: copies srcFileName to destFileName. If onlyCopyNew is set, it only copies the file if
+ //srcFileName is newer than destFileName. Returns a boolean indicating if the copy occurred.
+ var destFile = new java.io.File(destFileName), srcFile, parentDir,
+ srcChannel, destChannel;
+
+ //logger.trace("Src filename: " + srcFileName);
+ //logger.trace("Dest filename: " + destFileName);
+
+ //If onlyCopyNew is true, then compare dates and only copy if the src is newer
+ //than dest.
+ if (onlyCopyNew) {
+ srcFile = new java.io.File(srcFileName);
+ if (destFile.exists() && destFile.lastModified() >= srcFile.lastModified()) {
+ return false; //Boolean
+ }
+ }
+
+ //Make sure destination dir exists.
+ parentDir = destFile.getParentFile();
+ if (!parentDir.exists()) {
+ if (!parentDir.mkdirs()) {
+ throw "Could not create directory: " + parentDir.getAbsolutePath();
+ }
+ }
+
+ //Java's version of copy file.
+ srcChannel = new java.io.FileInputStream(srcFileName).getChannel();
+ destChannel = new java.io.FileOutputStream(destFileName).getChannel();
+ destChannel.transferFrom(srcChannel, 0, srcChannel.size());
+ srcChannel.close();
+ destChannel.close();
+
+ return true; //Boolean
+ },
+
+ /**
+ * Renames a file. May fail if "to" already exists or is on another drive.
+ */
+ renameFile: function (from, to) {
+ return (new java.io.File(from)).renameTo((new java.io.File(to)));
+ },
+
+ readFile: function (/*String*/path, /*String?*/encoding) {
+ //A file read function that can deal with BOMs
+ encoding = encoding || "utf-8";
+ var fileObj = new java.io.File(path),
+ input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(fileObj), encoding)),
+ stringBuffer, line;
+ try {
+ stringBuffer = new java.lang.StringBuffer();
+ line = input.readLine();
+
+ // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324
+ // http://www.unicode.org/faq/utf_bom.html
+
+ // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK:
+ // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058
+ if (line && line.length() && line.charAt(0) === 0xfeff) {
+ // Eat the BOM, since we've already found the encoding on this file,
+ // and we plan to concatenating this buffer with others; the BOM should
+ // only appear at the top of a file.
+ line = line.substring(1);
+ }
+ while (line !== null) {
+ stringBuffer.append(line);
+ stringBuffer.append(file.lineSeparator);
+ line = input.readLine();
+ }
+ //Make sure we return a JavaScript string and not a Java string.
+ return String(stringBuffer.toString()); //String
+ } finally {
+ input.close();
+ }
+ },
+
+ saveUtf8File: function (/*String*/fileName, /*String*/fileContents) {
+ //summary: saves a file using UTF-8 encoding.
+ file.saveFile(fileName, fileContents, "utf-8");
+ },
+
+ saveFile: function (/*String*/fileName, /*String*/fileContents, /*String?*/encoding) {
+ //summary: saves a file.
+ var outFile = new java.io.File(fileName), outWriter, parentDir, os;
+
+ parentDir = outFile.getAbsoluteFile().getParentFile();
+ if (!parentDir.exists()) {
+ if (!parentDir.mkdirs()) {
+ throw "Could not create directory: " + parentDir.getAbsolutePath();
+ }
+ }
+
+ if (encoding) {
+ outWriter = new java.io.OutputStreamWriter(new java.io.FileOutputStream(outFile), encoding);
+ } else {
+ outWriter = new java.io.OutputStreamWriter(new java.io.FileOutputStream(outFile));
+ }
+
+ os = new java.io.BufferedWriter(outWriter);
+ try {
+ os.write(fileContents);
+ } finally {
+ os.close();
+ }
+ },
+
+ deleteFile: function (/*String*/fileName) {
+ //summary: deletes a file or directory if it exists.
+ var fileObj = new java.io.File(fileName), files, i;
+ if (fileObj.exists()) {
+ if (fileObj.isDirectory()) {
+ files = fileObj.listFiles();
+ for (i = 0; i < files.length; i++) {
+ this.deleteFile(files[i]);
+ }
+ }
+ fileObj["delete"]();
+ }
+ }
+ };
+
+ return file;
+});
+
+}
+/**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint plusplus: true */
+/*global define */
+
+define('lang', function () {
+ 'use strict';
+
+ var lang = {
+ backSlashRegExp: /\\/g,
+ ostring: Object.prototype.toString,
+
+ isArray: Array.isArray || function (it) {
+ return lang.ostring.call(it) === "[object Array]";
+ },
+
+ isFunction: function(it) {
+ return lang.ostring.call(it) === "[object Function]";
+ },
+
+ isRegExp: function(it) {
+ return it && it instanceof RegExp;
+ },
+
+ _mixin: function(dest, source, override){
+ var name;
+ for (name in source) {
+ if(source.hasOwnProperty(name)
+ && (override || !dest.hasOwnProperty(name))) {
+ dest[name] = source[name];
+ }
+ }
+
+ return dest; // Object
+ },
+
+ /**
+ * mixin({}, obj1, obj2) is allowed. If the last argument is a boolean,
+ * then the source objects properties are force copied over to dest.
+ */
+ mixin: function(dest){
+ var parameters = Array.prototype.slice.call(arguments),
+ override, i, l;
+
+ if (!dest) { dest = {}; }
+
+ if (parameters.length > 2 && typeof arguments[parameters.length-1] === 'boolean') {
+ override = parameters.pop();
+ }
+
+ for (i = 1, l = parameters.length; i < l; i++) {
+ lang._mixin(dest, parameters[i], override);
+ }
+ return dest; // Object
+ },
+
+ delegate: (function () {
+ // boodman/crockford delegation w/ cornford optimization
+ function TMP() {}
+ return function (obj, props) {
+ TMP.prototype = obj;
+ var tmp = new TMP();
+ TMP.prototype = null;
+ if (props) {
+ lang.mixin(tmp, props);
+ }
+ return tmp; // Object
+ };
+ }())
+ };
+ return lang;
+});
+
+if(env === 'node') {
+/**
+ * @license RequireJS Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint strict: false */
+/*global define: false, console: false */
+
+define('node/print', function () {
+ function print(msg) {
+ console.log(msg);
+ }
+
+ return print;
+});
+
+}
+
+if(env === 'rhino') {
+/**
+ * @license RequireJS Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint strict: false */
+/*global define: false, print: false */
+
+define('rhino/print', function () {
+ return print;
+});
+
+}
+/**
+ * @license RequireJS Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint nomen: false, strict: false */
+/*global define: false */
+
+define('logger', ['env!env/print'], function (print) {
+ var logger = {
+ TRACE: 0,
+ INFO: 1,
+ WARN: 2,
+ ERROR: 3,
+ SILENT: 4,
+ level: 0,
+ logPrefix: "",
+
+ logLevel: function( level ) {
+ this.level = level;
+ },
+
+ trace: function (message) {
+ if (this.level <= this.TRACE) {
+ this._print(message);
+ }
+ },
+
+ info: function (message) {
+ if (this.level <= this.INFO) {
+ this._print(message);
+ }
+ },
+
+ warn: function (message) {
+ if (this.level <= this.WARN) {
+ this._print(message);
+ }
+ },
+
+ error: function (message) {
+ if (this.level <= this.ERROR) {
+ this._print(message);
+ }
+ },
+
+ _print: function (message) {
+ this._sysPrint((this.logPrefix ? (this.logPrefix + " ") : "") + message);
+ },
+
+ _sysPrint: function (message) {
+ print(message);
+ }
+ };
+
+ return logger;
+});
+//Just a blank file to use when building the optimizer with the optimizer,
+//so that the build does not attempt to inline some env modules,
+//like Node's fs and path.
+
+//Just a blank file to use when building the optimizer with the optimizer,
+//so that the build does not attempt to inline some env modules,
+//like Node's fs and path.
+
+define('uglifyjs/parse-js', ["require", "exports", "module"], function(require, exports, module) {
+/***********************************************************************
+
+ A JavaScript tokenizer / parser / beautifier / compressor.
+
+ This version is suitable for Node.js. With minimal changes (the
+ exports stuff) it should work on any JS platform.
+
+ This file contains the tokenizer/parser. It is a port to JavaScript
+ of parse-js [1], a JavaScript parser library written in Common Lisp
+ by Marijn Haverbeke. Thank you Marijn!
+
+ [1] http://marijn.haverbeke.nl/parse-js/
+
+ Exported functions:
+
+ - tokenizer(code) -- returns a function. Call the returned
+ function to fetch the next token.
+
+ - parse(code) -- returns an AST of the given JavaScript code.
+
+ -------------------------------- (C) ---------------------------------
+
+ Author: Mihai Bazon
+ <mihai.bazon@gmail.com>
+ http://mihai.bazon.net/blog
+
+ Distributed under the BSD license:
+
+ Copyright 2010 (c) Mihai Bazon <mihai.bazon@gmail.com>
+ Based on parse-js (http://marijn.haverbeke.nl/parse-js/).
+
+ Redistribution and use in source and binary forms, with or without
+ modification, are permitted provided that the following conditions
+ are met:
+
+ * Redistributions of source code must retain the above
+ copyright notice, this list of conditions and the following
+ disclaimer.
+
+ * Redistributions in binary form must reproduce the above
+ copyright notice, this list of conditions and the following
+ disclaimer in the documentation and/or other materials
+ provided with the distribution.
+
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER “AS IS” AND ANY
+ EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
+ LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
+ OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+ TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
+ THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
+ SUCH DAMAGE.
+
+ ***********************************************************************/
+
+/* -----[ Tokenizer (constants) ]----- */
+
+var KEYWORDS = array_to_hash([
+ "break",
+ "case",
+ "catch",
+ "const",
+ "continue",
+ "default",
+ "delete",
+ "do",
+ "else",
+ "finally",
+ "for",
+ "function",
+ "if",
+ "in",
+ "instanceof",
+ "new",
+ "return",
+ "switch",
+ "throw",
+ "try",
+ "typeof",
+ "var",
+ "void",
+ "while",
+ "with"
+]);
+
+var RESERVED_WORDS = array_to_hash([
+ "abstract",
+ "boolean",
+ "byte",
+ "char",
+ "class",
+ "debugger",
+ "double",
+ "enum",
+ "export",
+ "extends",
+ "final",
+ "float",
+ "goto",
+ "implements",
+ "import",
+ "int",
+ "interface",
+ "long",
+ "native",
+ "package",
+ "private",
+ "protected",
+ "public",
+ "short",
+ "static",
+ "super",
+ "synchronized",
+ "throws",
+ "transient",
+ "volatile"
+]);
+
+var KEYWORDS_BEFORE_EXPRESSION = array_to_hash([
+ "return",
+ "new",
+ "delete",
+ "throw",
+ "else",
+ "case"
+]);
+
+var KEYWORDS_ATOM = array_to_hash([
+ "false",
+ "null",
+ "true",
+ "undefined"
+]);
+
+var OPERATOR_CHARS = array_to_hash(characters("+-*&%=<>!?|~^"));
+
+var RE_HEX_NUMBER = /^0x[0-9a-f]+$/i;
+var RE_OCT_NUMBER = /^0[0-7]+$/;
+var RE_DEC_NUMBER = /^\d*\.?\d*(?:e[+-]?\d*(?:\d\.?|\.?\d)\d*)?$/i;
+
+var OPERATORS = array_to_hash([
+ "in",
+ "instanceof",
+ "typeof",
+ "new",
+ "void",
+ "delete",
+ "++",
+ "--",
+ "+",
+ "-",
+ "!",
+ "~",
+ "&",
+ "|",
+ "^",
+ "*",
+ "/",
+ "%",
+ ">>",
+ "<<",
+ ">>>",
+ "<",
+ ">",
+ "<=",
+ ">=",
+ "==",
+ "===",
+ "!=",
+ "!==",
+ "?",
+ "=",
+ "+=",
+ "-=",
+ "/=",
+ "*=",
+ "%=",
+ ">>=",
+ "<<=",
+ ">>>=",
+ "|=",
+ "^=",
+ "&=",
+ "&&",
+ "||"
+]);
+
+var WHITESPACE_CHARS = array_to_hash(characters(" \u00a0\n\r\t\f\u000b\u200b\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000"));
+
+var PUNC_BEFORE_EXPRESSION = array_to_hash(characters("[{}(,.;:"));
+
+var PUNC_CHARS = array_to_hash(characters("[]{}(),;:"));
+
+var REGEXP_MODIFIERS = array_to_hash(characters("gmsiy"));
+
+/* -----[ Tokenizer ]----- */
+
+// regexps adapted from http://xregexp.com/plugins/#unicode
+var UNICODE = {
+ letter: new RegExp("[\\u0041-\\u005A\\u0061-\\u007A\\u00AA\\u00B5\\u00BA\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02C1\\u02C6-\\u02D1\\u02E0-\\u02E4\\u02EC\\u02EE\\u0370-\\u0374\\u0376\\u0377\\u037A-\\u037D\\u0386\\u0388-\\u038A\\u038C\\u038E-\\u03A1\\u03A3-\\u03F5\\u03F7-\\u0481\\u048A-\\u0523\\u0531-\\u0556\\u0559\\u0561-\\u0587\\u05D0-\\u05EA\\u05F0-\\u05F2\\u0621-\\u064A\\u066E\\u066F\\u0671-\\u06D3\\u06D5\\u06E5\\u06E6\\u06EE\\u06EF\\u06FA-\\u06FC\\u06FF\\u0710\\u0712-\\u072F\\u074D-\\u07A5\\u07B1\\u07CA-\\u07EA\\u07F4\\u07F5\\u07FA\\u0904-\\u0939\\u093D\\u0950\\u0958-\\u0961\\u0971\\u0972\\u097B-\\u097F\\u0985-\\u098C\\u098F\\u0990\\u0993-\\u09A8\\u09AA-\\u09B0\\u09B2\\u09B6-\\u09B9\\u09BD\\u09CE\\u09DC\\u09DD\\u09DF-\\u09E1\\u09F0\\u09F1\\u0A05-\\u0A0A\\u0A0F\\u0A10\\u0A13-\\u0A28\\u0A2A-\\u0A30\\u0A32\\u0A33\\u0A35\\u0A36\\u0A38\\u0A39\\u0A59-\\u0A5C\\u0A5E\\u0A72-\\u0A74\\u0A85-\\u0A8D\\u0A8F-\\u0A91\\u0A93-\\u0AA8\\u0AAA-\\u0AB0\\u0AB2\\u0AB3\\u0AB5-\\u0AB9\\u0ABD\\u0AD0\\u0AE0\\u0AE1\\u0B05-\\u0B0C\\u0B0F\\u0B10\\u0B13-\\u0B28\\u0B2A-\\u0B30\\u0B32\\u0B33\\u0B35-\\u0B39\\u0B3D\\u0B5C\\u0B5D\\u0B5F-\\u0B61\\u0B71\\u0B83\\u0B85-\\u0B8A\\u0B8E-\\u0B90\\u0B92-\\u0B95\\u0B99\\u0B9A\\u0B9C\\u0B9E\\u0B9F\\u0BA3\\u0BA4\\u0BA8-\\u0BAA\\u0BAE-\\u0BB9\\u0BD0\\u0C05-\\u0C0C\\u0C0E-\\u0C10\\u0C12-\\u0C28\\u0C2A-\\u0C33\\u0C35-\\u0C39\\u0C3D\\u0C58\\u0C59\\u0C60\\u0C61\\u0C85-\\u0C8C\\u0C8E-\\u0C90\\u0C92-\\u0CA8\\u0CAA-\\u0CB3\\u0CB5-\\u0CB9\\u0CBD\\u0CDE\\u0CE0\\u0CE1\\u0D05-\\u0D0C\\u0D0E-\\u0D10\\u0D12-\\u0D28\\u0D2A-\\u0D39\\u0D3D\\u0D60\\u0D61\\u0D7A-\\u0D7F\\u0D85-\\u0D96\\u0D9A-\\u0DB1\\u0DB3-\\u0DBB\\u0DBD\\u0DC0-\\u0DC6\\u0E01-\\u0E30\\u0E32\\u0E33\\u0E40-\\u0E46\\u0E81\\u0E82\\u0E84\\u0E87\\u0E88\\u0E8A\\u0E8D\\u0E94-\\u0E97\\u0E99-\\u0E9F\\u0EA1-\\u0EA3\\u0EA5\\u0EA7\\u0EAA\\u0EAB\\u0EAD-\\u0EB0\\u0EB2\\u0EB3\\u0EBD\\u0EC0-\\u0EC4\\u0EC6\\u0EDC\\u0EDD\\u0F00\\u0F40-\\u0F47\\u0F49-\\u0F6C\\u0F88-\\u0F8B\\u1000-\\u102A\\u103F\\u1050-\\u1055\\u105A-\\u105D\\u1061\\u1065\\u1066\\u106E-\\u1070\\u1075-\\u1081\\u108E\\u10A0-\\u10C5\\u10D0-\\u10FA\\u10FC\\u1100-\\u1159\\u115F-\\u11A2\\u11A8-\\u11F9\\u1200-\\u1248\\u124A-\\u124D\\u1250-\\u1256\\u1258\\u125A-\\u125D\\u1260-\\u1288\\u128A-\\u128D\\u1290-\\u12B0\\u12B2-\\u12B5\\u12B8-\\u12BE\\u12C0\\u12C2-\\u12C5\\u12C8-\\u12D6\\u12D8-\\u1310\\u1312-\\u1315\\u1318-\\u135A\\u1380-\\u138F\\u13A0-\\u13F4\\u1401-\\u166C\\u166F-\\u1676\\u1681-\\u169A\\u16A0-\\u16EA\\u1700-\\u170C\\u170E-\\u1711\\u1720-\\u1731\\u1740-\\u1751\\u1760-\\u176C\\u176E-\\u1770\\u1780-\\u17B3\\u17D7\\u17DC\\u1820-\\u1877\\u1880-\\u18A8\\u18AA\\u1900-\\u191C\\u1950-\\u196D\\u1970-\\u1974\\u1980-\\u19A9\\u19C1-\\u19C7\\u1A00-\\u1A16\\u1B05-\\u1B33\\u1B45-\\u1B4B\\u1B83-\\u1BA0\\u1BAE\\u1BAF\\u1C00-\\u1C23\\u1C4D-\\u1C4F\\u1C5A-\\u1C7D\\u1D00-\\u1DBF\\u1E00-\\u1F15\\u1F18-\\u1F1D\\u1F20-\\u1F45\\u1F48-\\u1F4D\\u1F50-\\u1F57\\u1F59\\u1F5B\\u1F5D\\u1F5F-\\u1F7D\\u1F80-\\u1FB4\\u1FB6-\\u1FBC\\u1FBE\\u1FC2-\\u1FC4\\u1FC6-\\u1FCC\\u1FD0-\\u1FD3\\u1FD6-\\u1FDB\\u1FE0-\\u1FEC\\u1FF2-\\u1FF4\\u1FF6-\\u1FFC\\u2071\\u207F\\u2090-\\u2094\\u2102\\u2107\\u210A-\\u2113\\u2115\\u2119-\\u211D\\u2124\\u2126\\u2128\\u212A-\\u212D\\u212F-\\u2139\\u213C-\\u213F\\u2145-\\u2149\\u214E\\u2183\\u2184\\u2C00-\\u2C2E\\u2C30-\\u2C5E\\u2C60-\\u2C6F\\u2C71-\\u2C7D\\u2C80-\\u2CE4\\u2D00-\\u2D25\\u2D30-\\u2D65\\u2D6F\\u2D80-\\u2D96\\u2DA0-\\u2DA6\\u2DA8-\\u2DAE\\u2DB0-\\u2DB6\\u2DB8-\\u2DBE\\u2DC0-\\u2DC6\\u2DC8-\\u2DCE\\u2DD0-\\u2DD6\\u2DD8-\\u2DDE\\u2E2F\\u3005\\u3006\\u3031-\\u3035\\u303B\\u303C\\u3041-\\u3096\\u309D-\\u309F\\u30A1-\\u30FA\\u30FC-\\u30FF\\u3105-\\u312D\\u3131-\\u318E\\u31A0-\\u31B7\\u31F0-\\u31FF\\u3400\\u4DB5\\u4E00\\u9FC3\\uA000-\\uA48C\\uA500-\\uA60C\\uA610-\\uA61F\\uA62A\\uA62B\\uA640-\\uA65F\\uA662-\\uA66E\\uA67F-\\uA697\\uA717-\\uA71F\\uA722-\\uA788\\uA78B\\uA78C\\uA7FB-\\uA801\\uA803-\\uA805\\uA807-\\uA80A\\uA80C-\\uA822\\uA840-\\uA873\\uA882-\\uA8B3\\uA90A-\\uA925\\uA930-\\uA946\\uAA00-\\uAA28\\uAA40-\\uAA42\\uAA44-\\uAA4B\\uAC00\\uD7A3\\uF900-\\uFA2D\\uFA30-\\uFA6A\\uFA70-\\uFAD9\\uFB00-\\uFB06\\uFB13-\\uFB17\\uFB1D\\uFB1F-\\uFB28\\uFB2A-\\uFB36\\uFB38-\\uFB3C\\uFB3E\\uFB40\\uFB41\\uFB43\\uFB44\\uFB46-\\uFBB1\\uFBD3-\\uFD3D\\uFD50-\\uFD8F\\uFD92-\\uFDC7\\uFDF0-\\uFDFB\\uFE70-\\uFE74\\uFE76-\\uFEFC\\uFF21-\\uFF3A\\uFF41-\\uFF5A\\uFF66-\\uFFBE\\uFFC2-\\uFFC7\\uFFCA-\\uFFCF\\uFFD2-\\uFFD7\\uFFDA-\\uFFDC]"),
+ non_spacing_mark: new RegExp("[\\u0300-\\u036F\\u0483-\\u0487\\u0591-\\u05BD\\u05BF\\u05C1\\u05C2\\u05C4\\u05C5\\u05C7\\u0610-\\u061A\\u064B-\\u065E\\u0670\\u06D6-\\u06DC\\u06DF-\\u06E4\\u06E7\\u06E8\\u06EA-\\u06ED\\u0711\\u0730-\\u074A\\u07A6-\\u07B0\\u07EB-\\u07F3\\u0816-\\u0819\\u081B-\\u0823\\u0825-\\u0827\\u0829-\\u082D\\u0900-\\u0902\\u093C\\u0941-\\u0948\\u094D\\u0951-\\u0955\\u0962\\u0963\\u0981\\u09BC\\u09C1-\\u09C4\\u09CD\\u09E2\\u09E3\\u0A01\\u0A02\\u0A3C\\u0A41\\u0A42\\u0A47\\u0A48\\u0A4B-\\u0A4D\\u0A51\\u0A70\\u0A71\\u0A75\\u0A81\\u0A82\\u0ABC\\u0AC1-\\u0AC5\\u0AC7\\u0AC8\\u0ACD\\u0AE2\\u0AE3\\u0B01\\u0B3C\\u0B3F\\u0B41-\\u0B44\\u0B4D\\u0B56\\u0B62\\u0B63\\u0B82\\u0BC0\\u0BCD\\u0C3E-\\u0C40\\u0C46-\\u0C48\\u0C4A-\\u0C4D\\u0C55\\u0C56\\u0C62\\u0C63\\u0CBC\\u0CBF\\u0CC6\\u0CCC\\u0CCD\\u0CE2\\u0CE3\\u0D41-\\u0D44\\u0D4D\\u0D62\\u0D63\\u0DCA\\u0DD2-\\u0DD4\\u0DD6\\u0E31\\u0E34-\\u0E3A\\u0E47-\\u0E4E\\u0EB1\\u0EB4-\\u0EB9\\u0EBB\\u0EBC\\u0EC8-\\u0ECD\\u0F18\\u0F19\\u0F35\\u0F37\\u0F39\\u0F71-\\u0F7E\\u0F80-\\u0F84\\u0F86\\u0F87\\u0F90-\\u0F97\\u0F99-\\u0FBC\\u0FC6\\u102D-\\u1030\\u1032-\\u1037\\u1039\\u103A\\u103D\\u103E\\u1058\\u1059\\u105E-\\u1060\\u1071-\\u1074\\u1082\\u1085\\u1086\\u108D\\u109D\\u135F\\u1712-\\u1714\\u1732-\\u1734\\u1752\\u1753\\u1772\\u1773\\u17B7-\\u17BD\\u17C6\\u17C9-\\u17D3\\u17DD\\u180B-\\u180D\\u18A9\\u1920-\\u1922\\u1927\\u1928\\u1932\\u1939-\\u193B\\u1A17\\u1A18\\u1A56\\u1A58-\\u1A5E\\u1A60\\u1A62\\u1A65-\\u1A6C\\u1A73-\\u1A7C\\u1A7F\\u1B00-\\u1B03\\u1B34\\u1B36-\\u1B3A\\u1B3C\\u1B42\\u1B6B-\\u1B73\\u1B80\\u1B81\\u1BA2-\\u1BA5\\u1BA8\\u1BA9\\u1C2C-\\u1C33\\u1C36\\u1C37\\u1CD0-\\u1CD2\\u1CD4-\\u1CE0\\u1CE2-\\u1CE8\\u1CED\\u1DC0-\\u1DE6\\u1DFD-\\u1DFF\\u20D0-\\u20DC\\u20E1\\u20E5-\\u20F0\\u2CEF-\\u2CF1\\u2DE0-\\u2DFF\\u302A-\\u302F\\u3099\\u309A\\uA66F\\uA67C\\uA67D\\uA6F0\\uA6F1\\uA802\\uA806\\uA80B\\uA825\\uA826\\uA8C4\\uA8E0-\\uA8F1\\uA926-\\uA92D\\uA947-\\uA951\\uA980-\\uA982\\uA9B3\\uA9B6-\\uA9B9\\uA9BC\\uAA29-\\uAA2E\\uAA31\\uAA32\\uAA35\\uAA36\\uAA43\\uAA4C\\uAAB0\\uAAB2-\\uAAB4\\uAAB7\\uAAB8\\uAABE\\uAABF\\uAAC1\\uABE5\\uABE8\\uABED\\uFB1E\\uFE00-\\uFE0F\\uFE20-\\uFE26]"),
+ space_combining_mark: new RegExp("[\\u0903\\u093E-\\u0940\\u0949-\\u094C\\u094E\\u0982\\u0983\\u09BE-\\u09C0\\u09C7\\u09C8\\u09CB\\u09CC\\u09D7\\u0A03\\u0A3E-\\u0A40\\u0A83\\u0ABE-\\u0AC0\\u0AC9\\u0ACB\\u0ACC\\u0B02\\u0B03\\u0B3E\\u0B40\\u0B47\\u0B48\\u0B4B\\u0B4C\\u0B57\\u0BBE\\u0BBF\\u0BC1\\u0BC2\\u0BC6-\\u0BC8\\u0BCA-\\u0BCC\\u0BD7\\u0C01-\\u0C03\\u0C41-\\u0C44\\u0C82\\u0C83\\u0CBE\\u0CC0-\\u0CC4\\u0CC7\\u0CC8\\u0CCA\\u0CCB\\u0CD5\\u0CD6\\u0D02\\u0D03\\u0D3E-\\u0D40\\u0D46-\\u0D48\\u0D4A-\\u0D4C\\u0D57\\u0D82\\u0D83\\u0DCF-\\u0DD1\\u0DD8-\\u0DDF\\u0DF2\\u0DF3\\u0F3E\\u0F3F\\u0F7F\\u102B\\u102C\\u1031\\u1038\\u103B\\u103C\\u1056\\u1057\\u1062-\\u1064\\u1067-\\u106D\\u1083\\u1084\\u1087-\\u108C\\u108F\\u109A-\\u109C\\u17B6\\u17BE-\\u17C5\\u17C7\\u17C8\\u1923-\\u1926\\u1929-\\u192B\\u1930\\u1931\\u1933-\\u1938\\u19B0-\\u19C0\\u19C8\\u19C9\\u1A19-\\u1A1B\\u1A55\\u1A57\\u1A61\\u1A63\\u1A64\\u1A6D-\\u1A72\\u1B04\\u1B35\\u1B3B\\u1B3D-\\u1B41\\u1B43\\u1B44\\u1B82\\u1BA1\\u1BA6\\u1BA7\\u1BAA\\u1C24-\\u1C2B\\u1C34\\u1C35\\u1CE1\\u1CF2\\uA823\\uA824\\uA827\\uA880\\uA881\\uA8B4-\\uA8C3\\uA952\\uA953\\uA983\\uA9B4\\uA9B5\\uA9BA\\uA9BB\\uA9BD-\\uA9C0\\uAA2F\\uAA30\\uAA33\\uAA34\\uAA4D\\uAA7B\\uABE3\\uABE4\\uABE6\\uABE7\\uABE9\\uABEA\\uABEC]"),
+ connector_punctuation: new RegExp("[\\u005F\\u203F\\u2040\\u2054\\uFE33\\uFE34\\uFE4D-\\uFE4F\\uFF3F]")
+};
+
+function is_letter(ch) {
+ return UNICODE.letter.test(ch);
+};
+
+function is_digit(ch) {
+ ch = ch.charCodeAt(0);
+ return ch >= 48 && ch <= 57; //XXX: find out if "UnicodeDigit" means something else than 0..9
+};
+
+function is_alphanumeric_char(ch) {
+ return is_digit(ch) || is_letter(ch);
+};
+
+function is_unicode_combining_mark(ch) {
+ return UNICODE.non_spacing_mark.test(ch) || UNICODE.space_combining_mark.test(ch);
+};
+
+function is_unicode_connector_punctuation(ch) {
+ return UNICODE.connector_punctuation.test(ch);
+};
+
+function is_identifier_start(ch) {
+ return ch == "$" || ch == "_" || is_letter(ch);
+};
+
+function is_identifier_char(ch) {
+ return is_identifier_start(ch)
+ || is_unicode_combining_mark(ch)
+ || is_digit(ch)
+ || is_unicode_connector_punctuation(ch)
+ || ch == "\u200c" // zero-width non-joiner <ZWNJ>
+ || ch == "\u200d" // zero-width joiner <ZWJ> (in my ECMA-262 PDF, this is also 200c)
+ ;
+};
+
+function parse_js_number(num) {
+ if (RE_HEX_NUMBER.test(num)) {
+ return parseInt(num.substr(2), 16);
+ } else if (RE_OCT_NUMBER.test(num)) {
+ return parseInt(num.substr(1), 8);
+ } else if (RE_DEC_NUMBER.test(num)) {
+ return parseFloat(num);
+ }
+};
+
+function JS_Parse_Error(message, line, col, pos) {
+ this.message = message;
+ this.line = line + 1;
+ this.col = col + 1;
+ this.pos = pos + 1;
+ this.stack = new Error().stack;
+};
+
+JS_Parse_Error.prototype.toString = function() {
+ return this.message + " (line: " + this.line + ", col: " + this.col + ", pos: " + this.pos + ")" + "\n\n" + this.stack;
+};
+
+function js_error(message, line, col, pos) {
+ throw new JS_Parse_Error(message, line, col, pos);
+};
+
+function is_token(token, type, val) {
+ return token.type == type && (val == null || token.value == val);
+};
+
+var EX_EOF = {};
+
+function tokenizer($TEXT) {
+
+ var S = {
+ text : $TEXT.replace(/\r\n?|[\n\u2028\u2029]/g, "\n").replace(/^\uFEFF/, ''),
+ pos : 0,
+ tokpos : 0,
+ line : 0,
+ tokline : 0,
+ col : 0,
+ tokcol : 0,
+ newline_before : false,
+ regex_allowed : false,
+ comments_before : []
+ };
+
+ function peek() { return S.text.charAt(S.pos); };
+
+ function next(signal_eof, in_string) {
+ var ch = S.text.charAt(S.pos++);
+ if (signal_eof && !ch)
+ throw EX_EOF;
+ if (ch == "\n") {
+ S.newline_before = S.newline_before || !in_string;
+ ++S.line;
+ S.col = 0;
+ } else {
+ ++S.col;
+ }
+ return ch;
+ };
+
+ function eof() {
+ return !S.peek();
+ };
+
+ function find(what, signal_eof) {
+ var pos = S.text.indexOf(what, S.pos);
+ if (signal_eof && pos == -1) throw EX_EOF;
+ return pos;
+ };
+
+ function start_token() {
+ S.tokline = S.line;
+ S.tokcol = S.col;
+ S.tokpos = S.pos;
+ };
+
+ function token(type, value, is_comment) {
+ S.regex_allowed = ((type == "operator" && !HOP(UNARY_POSTFIX, value)) ||
+ (type == "keyword" && HOP(KEYWORDS_BEFORE_EXPRESSION, value)) ||
+ (type == "punc" && HOP(PUNC_BEFORE_EXPRESSION, value)));
+ var ret = {
+ type : type,
+ value : value,
+ line : S.tokline,
+ col : S.tokcol,
+ pos : S.tokpos,
+ endpos : S.pos,
+ nlb : S.newline_before
+ };
+ if (!is_comment) {
+ ret.comments_before = S.comments_before;
+ S.comments_before = [];
+ }
+ S.newline_before = false;
+ return ret;
+ };
+
+ function skip_whitespace() {
+ while (HOP(WHITESPACE_CHARS, peek()))
+ next();
+ };
+
+ function read_while(pred) {
+ var ret = "", ch = peek(), i = 0;
+ while (ch && pred(ch, i++)) {
+ ret += next();
+ ch = peek();
+ }
+ return ret;
+ };
+
+ function parse_error(err) {
+ js_error(err, S.tokline, S.tokcol, S.tokpos);
+ };
+
+ function read_num(prefix) {
+ var has_e = false, after_e = false, has_x = false, has_dot = prefix == ".";
+ var num = read_while(function(ch, i){
+ if (ch == "x" || ch == "X") {
+ if (has_x) return false;
+ return has_x = true;
+ }
+ if (!has_x && (ch == "E" || ch == "e")) {
+ if (has_e) return false;
+ return has_e = after_e = true;
+ }
+ if (ch == "-") {
+ if (after_e || (i == 0 && !prefix)) return true;
+ return false;
+ }
+ if (ch == "+") return after_e;
+ after_e = false;
+ if (ch == ".") {
+ if (!has_dot && !has_x)
+ return has_dot = true;
+ return false;
+ }
+ return is_alphanumeric_char(ch);
+ });
+ if (prefix)
+ num = prefix + num;
+ var valid = parse_js_number(num);
+ if (!isNaN(valid)) {
+ return token("num", valid);
+ } else {
+ parse_error("Invalid syntax: " + num);
+ }
+ };
+
+ function read_escaped_char(in_string) {
+ var ch = next(true, in_string);
+ switch (ch) {
+ case "n" : return "\n";
+ case "r" : return "\r";
+ case "t" : return "\t";
+ case "b" : return "\b";
+ case "v" : return "\u000b";
+ case "f" : return "\f";
+ case "0" : return "\0";
+ case "x" : return String.fromCharCode(hex_bytes(2));
+ case "u" : return String.fromCharCode(hex_bytes(4));
+ case "\n": return "";
+ default : return ch;
+ }
+ };
+
+ function hex_bytes(n) {
+ var num = 0;
+ for (; n > 0; --n) {
+ var digit = parseInt(next(true), 16);
+ if (isNaN(digit))
+ parse_error("Invalid hex-character pattern in string");
+ num = (num << 4) | digit;
+ }
+ return num;
+ };
+
+ function read_string() {
+ return with_eof_error("Unterminated string constant", function(){
+ var quote = next(), ret = "";
+ for (;;) {
+ var ch = next(true);
+ if (ch == "\\") {
+ // read OctalEscapeSequence (XXX: deprecated if "strict mode")
+ // https://github.com/mishoo/UglifyJS/issues/178
+ var octal_len = 0, first = null;
+ ch = read_while(function(ch){
+ if (ch >= "0" && ch <= "7") {
+ if (!first) {
+ first = ch;
+ return ++octal_len;
+ }
+ else if (first <= "3" && octal_len <= 2) return ++octal_len;
+ else if (first >= "4" && octal_len <= 1) return ++octal_len;
+ }
+ return false;
+ });
+ if (octal_len > 0) ch = String.fromCharCode(parseInt(ch, 8));
+ else ch = read_escaped_char(true);
+ }
+ else if (ch == quote) break;
+ ret += ch;
+ }
+ return token("string", ret);
+ });
+ };
+
+ function read_line_comment() {
+ next();
+ var i = find("\n"), ret;
+ if (i == -1) {
+ ret = S.text.substr(S.pos);
+ S.pos = S.text.length;
+ } else {
+ ret = S.text.substring(S.pos, i);
+ S.pos = i;
+ }
+ return token("comment1", ret, true);
+ };
+
+ function read_multiline_comment() {
+ next();
+ return with_eof_error("Unterminated multiline comment", function(){
+ var i = find("*/", true),
+ text = S.text.substring(S.pos, i);
+ S.pos = i + 2;
+ S.line += text.split("\n").length - 1;
+ S.newline_before = text.indexOf("\n") >= 0;
+
+ // https://github.com/mishoo/UglifyJS/issues/#issue/100
+ if (/^@cc_on/i.test(text)) {
+ warn("WARNING: at line " + S.line);
+ warn("*** Found \"conditional comment\": " + text);
+ warn("*** UglifyJS DISCARDS ALL COMMENTS. This means your code might no longer work properly in Internet Explorer.");
+ }
+
+ return token("comment2", text, true);
+ });
+ };
+
+ function read_name() {
+ var backslash = false, name = "", ch;
+ while ((ch = peek()) != null) {
+ if (!backslash) {
+ if (ch == "\\") backslash = true, next();
+ else if (is_identifier_char(ch)) name += next();
+ else break;
+ }
+ else {
+ if (ch != "u") parse_error("Expecting UnicodeEscapeSequence -- uXXXX");
+ ch = read_escaped_char();
+ if (!is_identifier_char(ch)) parse_error("Unicode char: " + ch.charCodeAt(0) + " is not valid in identifier");
+ name += ch;
+ backslash = false;
+ }
+ }
+ return name;
+ };
+
+ function read_regexp(regexp) {
+ return with_eof_error("Unterminated regular expression", function(){
+ var prev_backslash = false, ch, in_class = false;
+ while ((ch = next(true))) if (prev_backslash) {
+ regexp += "\\" + ch;
+ prev_backslash = false;
+ } else if (ch == "[") {
+ in_class = true;
+ regexp += ch;
+ } else if (ch == "]" && in_class) {
+ in_class = false;
+ regexp += ch;
+ } else if (ch == "/" && !in_class) {
+ break;
+ } else if (ch == "\\") {
+ prev_backslash = true;
+ } else {
+ regexp += ch;
+ }
+ var mods = read_name();
+ return token("regexp", [ regexp, mods ]);
+ });
+ };
+
+ function read_operator(prefix) {
+ function grow(op) {
+ if (!peek()) return op;
+ var bigger = op + peek();
+ if (HOP(OPERATORS, bigger)) {
+ next();
+ return grow(bigger);
+ } else {
+ return op;
+ }
+ };
+ return token("operator", grow(prefix || next()));
+ };
+
+ function handle_slash() {
+ next();
+ var regex_allowed = S.regex_allowed;
+ switch (peek()) {
+ case "/":
+ S.comments_before.push(read_line_comment());
+ S.regex_allowed = regex_allowed;
+ return next_token();
+ case "*":
+ S.comments_before.push(read_multiline_comment());
+ S.regex_allowed = regex_allowed;
+ return next_token();
+ }
+ return S.regex_allowed ? read_regexp("") : read_operator("/");
+ };
+
+ function handle_dot() {
+ next();
+ return is_digit(peek())
+ ? read_num(".")
+ : token("punc", ".");
+ };
+
+ function read_word() {
+ var word = read_name();
+ return !HOP(KEYWORDS, word)
+ ? token("name", word)
+ : HOP(OPERATORS, word)
+ ? token("operator", word)
+ : HOP(KEYWORDS_ATOM, word)
+ ? token("atom", word)
+ : token("keyword", word);
+ };
+
+ function with_eof_error(eof_error, cont) {
+ try {
+ return cont();
+ } catch(ex) {
+ if (ex === EX_EOF) parse_error(eof_error);
+ else throw ex;
+ }
+ };
+
+ function next_token(force_regexp) {
+ if (force_regexp != null)
+ return read_regexp(force_regexp);
+ skip_whitespace();
+ start_token();
+ var ch = peek();
+ if (!ch) return token("eof");
+ if (is_digit(ch)) return read_num();
+ if (ch == '"' || ch == "'") return read_string();
+ if (HOP(PUNC_CHARS, ch)) return token("punc", next());
+ if (ch == ".") return handle_dot();
+ if (ch == "/") return handle_slash();
+ if (HOP(OPERATOR_CHARS, ch)) return read_operator();
+ if (ch == "\\" || is_identifier_start(ch)) return read_word();
+ parse_error("Unexpected character '" + ch + "'");
+ };
+
+ next_token.context = function(nc) {
+ if (nc) S = nc;
+ return S;
+ };
+
+ return next_token;
+
+};
+
+/* -----[ Parser (constants) ]----- */
+
+var UNARY_PREFIX = array_to_hash([
+ "typeof",
+ "void",
+ "delete",
+ "--",
+ "++",
+ "!",
+ "~",
+ "-",
+ "+"
+]);
+
+var UNARY_POSTFIX = array_to_hash([ "--", "++" ]);
+
+var ASSIGNMENT = (function(a, ret, i){
+ while (i < a.length) {
+ ret[a[i]] = a[i].substr(0, a[i].length - 1);
+ i++;
+ }
+ return ret;
+})(
+ ["+=", "-=", "/=", "*=", "%=", ">>=", "<<=", ">>>=", "|=", "^=", "&="],
+ { "=": true },
+ 0
+);
+
+var PRECEDENCE = (function(a, ret){
+ for (var i = 0, n = 1; i < a.length; ++i, ++n) {
+ var b = a[i];
+ for (var j = 0; j < b.length; ++j) {
+ ret[b[j]] = n;
+ }
+ }
+ return ret;
+})(
+ [
+ ["||"],
+ ["&&"],
+ ["|"],
+ ["^"],
+ ["&"],
+ ["==", "===", "!=", "!=="],
+ ["<", ">", "<=", ">=", "in", "instanceof"],
+ [">>", "<<", ">>>"],
+ ["+", "-"],
+ ["*", "/", "%"]
+ ],
+ {}
+);
+
+var STATEMENTS_WITH_LABELS = array_to_hash([ "for", "do", "while", "switch" ]);
+
+var ATOMIC_START_TOKEN = array_to_hash([ "atom", "num", "string", "regexp", "name" ]);
+
+/* -----[ Parser ]----- */
+
+function NodeWithToken(str, start, end) {
+ this.name = str;
+ this.start = start;
+ this.end = end;
+};
+
+NodeWithToken.prototype.toString = function() { return this.name; };
+
+function parse($TEXT, exigent_mode, embed_tokens) {
+
+ var S = {
+ input : typeof $TEXT == "string" ? tokenizer($TEXT, true) : $TEXT,
+ token : null,
+ prev : null,
+ peeked : null,
+ in_function : 0,
+ in_loop : 0,
+ labels : []
+ };
+
+ S.token = next();
+
+ function is(type, value) {
+ return is_token(S.token, type, value);
+ };
+
+ function peek() { return S.peeked || (S.peeked = S.input()); };
+
+ function next() {
+ S.prev = S.token;
+ if (S.peeked) {
+ S.token = S.peeked;
+ S.peeked = null;
+ } else {
+ S.token = S.input();
+ }
+ return S.token;
+ };
+
+ function prev() {
+ return S.prev;
+ };
+
+ function croak(msg, line, col, pos) {
+ var ctx = S.input.context();
+ js_error(msg,
+ line != null ? line : ctx.tokline,
+ col != null ? col : ctx.tokcol,
+ pos != null ? pos : ctx.tokpos);
+ };
+
+ function token_error(token, msg) {
+ croak(msg, token.line, token.col);
+ };
+
+ function unexpected(token) {
+ if (token == null)
+ token = S.token;
+ token_error(token, "Unexpected token: " + token.type + " (" + token.value + ")");
+ };
+
+ function expect_token(type, val) {
+ if (is(type, val)) {
+ return next();
+ }
+ token_error(S.token, "Unexpected token " + S.token.type + ", expected " + type);
+ };
+
+ function expect(punc) { return expect_token("punc", punc); };
+
+ function can_insert_semicolon() {
+ return !exigent_mode && (
+ S.token.nlb || is("eof") || is("punc", "}")
+ );
+ };
+
+ function semicolon() {
+ if (is("punc", ";")) next();
+ else if (!can_insert_semicolon()) unexpected();
+ };
+
+ function as() {
+ return slice(arguments);
+ };
+
+ function parenthesised() {
+ expect("(");
+ var ex = expression();
+ expect(")");
+ return ex;
+ };
+
+ function add_tokens(str, start, end) {
+ return str instanceof NodeWithToken ? str : new NodeWithToken(str, start, end);
+ };
+
+ function maybe_embed_tokens(parser) {
+ if (embed_tokens) return function() {
+ var start = S.token;
+ var ast = parser.apply(this, arguments);
+ ast[0] = add_tokens(ast[0], start, prev());
+ return ast;
+ };
+ else return parser;
+ };
+
+ var statement = maybe_embed_tokens(function() {
+ if (is("operator", "/") || is("operator", "/=")) {
+ S.peeked = null;
+ S.token = S.input(S.token.value.substr(1)); // force regexp
+ }
+ switch (S.token.type) {
+ case "num":
+ case "string":
+ case "regexp":
+ case "operator":
+ case "atom":
+ return simple_statement();
+
+ case "name":
+ return is_token(peek(), "punc", ":")
+ ? labeled_statement(prog1(S.token.value, next, next))
+ : simple_statement();
+
+ case "punc":
+ switch (S.token.value) {
+ case "{":
+ return as("block", block_());
+ case "[":
+ case "(":
+ return simple_statement();
+ case ";":
+ next();
+ return as("block");
+ default:
+ unexpected();
+ }
+
+ case "keyword":
+ switch (prog1(S.token.value, next)) {
+ case "break":
+ return break_cont("break");
+
+ case "continue":
+ return break_cont("continue");
+
+ case "debugger":
+ semicolon();
+ return as("debugger");
+
+ case "do":
+ return (function(body){
+ expect_token("keyword", "while");
+ return as("do", prog1(parenthesised, semicolon), body);
+ })(in_loop(statement));
+
+ case "for":
+ return for_();
+
+ case "function":
+ return function_(true);
+
+ case "if":
+ return if_();
+
+ case "return":
+ if (S.in_function == 0)
+ croak("'return' outside of function");
+ return as("return",
+ is("punc", ";")
+ ? (next(), null)
+ : can_insert_semicolon()
+ ? null
+ : prog1(expression, semicolon));
+
+ case "switch":
+ return as("switch", parenthesised(), switch_block_());
+
+ case "throw":
+ if (S.token.nlb)
+ croak("Illegal newline after 'throw'");
+ return as("throw", prog1(expression, semicolon));
+
+ case "try":
+ return try_();
+
+ case "var":
+ return prog1(var_, semicolon);
+
+ case "const":
+ return prog1(const_, semicolon);
+
+ case "while":
+ return as("while", parenthesised(), in_loop(statement));
+
+ case "with":
+ return as("with", parenthesised(), statement());
+
+ default:
+ unexpected();
+ }
+ }
+ });
+
+ function labeled_statement(label) {
+ S.labels.push(label);
+ var start = S.token, stat = statement();
+ if (exigent_mode && !HOP(STATEMENTS_WITH_LABELS, stat[0]))
+ unexpected(start);
+ S.labels.pop();
+ return as("label", label, stat);
+ };
+
+ function simple_statement() {
+ return as("stat", prog1(expression, semicolon));
+ };
+
+ function break_cont(type) {
+ var name;
+ if (!can_insert_semicolon()) {
+ name = is("name") ? S.token.value : null;
+ }
+ if (name != null) {
+ next();
+ if (!member(name, S.labels))
+ croak("Label " + name + " without matching loop or statement");
+ }
+ else if (S.in_loop == 0)
+ croak(type + " not inside a loop or switch");
+ semicolon();
+ return as(type, name);
+ };
+
+ function for_() {
+ expect("(");
+ var init = null;
+ if (!is("punc", ";")) {
+ init = is("keyword", "var")
+ ? (next(), var_(true))
+ : expression(true, true);
+ if (is("operator", "in"))
+ return for_in(init);
+ }
+ return regular_for(init);
+ };
+
+ function regular_for(init) {
+ expect(";");
+ var test = is("punc", ";") ? null : expression();
+ expect(";");
+ var step = is("punc", ")") ? null : expression();
+ expect(")");
+ return as("for", init, test, step, in_loop(statement));
+ };
+
+ function for_in(init) {
+ var lhs = init[0] == "var" ? as("name", init[1][0]) : init;
+ next();
+ var obj = expression();
+ expect(")");
+ return as("for-in", init, lhs, obj, in_loop(statement));
+ };
+
+ var function_ = function(in_statement) {
+ var name = is("name") ? prog1(S.token.value, next) : null;
+ if (in_statement && !name)
+ unexpected();
+ expect("(");
+ return as(in_statement ? "defun" : "function",
+ name,
+ // arguments
+ (function(first, a){
+ while (!is("punc", ")")) {
+ if (first) first = false; else expect(",");
+ if (!is("name")) unexpected();
+ a.push(S.token.value);
+ next();
+ }
+ next();
+ return a;
+ })(true, []),
+ // body
+ (function(){
+ ++S.in_function;
+ var loop = S.in_loop;
+ S.in_loop = 0;
+ var a = block_();
+ --S.in_function;
+ S.in_loop = loop;
+ return a;
+ })());
+ };
+
+ function if_() {
+ var cond = parenthesised(), body = statement(), belse;
+ if (is("keyword", "else")) {
+ next();
+ belse = statement();
+ }
+ return as("if", cond, body, belse);
+ };
+
+ function block_() {
+ expect("{");
+ var a = [];
+ while (!is("punc", "}")) {
+ if (is("eof")) unexpected();
+ a.push(statement());
+ }
+ next();
+ return a;
+ };
+
+ var switch_block_ = curry(in_loop, function(){
+ expect("{");
+ var a = [], cur = null;
+ while (!is("punc", "}")) {
+ if (is("eof")) unexpected();
+ if (is("keyword", "case")) {
+ next();
+ cur = [];
+ a.push([ expression(), cur ]);
+ expect(":");
+ }
+ else if (is("keyword", "default")) {
+ next();
+ expect(":");
+ cur = [];
+ a.push([ null, cur ]);
+ }
+ else {
+ if (!cur) unexpected();
+ cur.push(statement());
+ }
+ }
+ next();
+ return a;
+ });
+
+ function try_() {
+ var body = block_(), bcatch, bfinally;
+ if (is("keyword", "catch")) {
+ next();
+ expect("(");
+ if (!is("name"))
+ croak("Name expected");
+ var name = S.token.value;
+ next();
+ expect(")");
+ bcatch = [ name, block_() ];
+ }
+ if (is("keyword", "finally")) {
+ next();
+ bfinally = block_();
+ }
+ if (!bcatch && !bfinally)
+ croak("Missing catch/finally blocks");
+ return as("try", body, bcatch, bfinally);
+ };
+
+ function vardefs(no_in) {
+ var a = [];
+ for (;;) {
+ if (!is("name"))
+ unexpected();
+ var name = S.token.value;
+ next();
+ if (is("operator", "=")) {
+ next();
+ a.push([ name, expression(false, no_in) ]);
+ } else {
+ a.push([ name ]);
+ }
+ if (!is("punc", ","))
+ break;
+ next();
+ }
+ return a;
+ };
+
+ function var_(no_in) {
+ return as("var", vardefs(no_in));
+ };
+
+ function const_() {
+ return as("const", vardefs());
+ };
+
+ function new_() {
+ var newexp = expr_atom(false), args;
+ if (is("punc", "(")) {
+ next();
+ args = expr_list(")");
+ } else {
+ args = [];
+ }
+ return subscripts(as("new", newexp, args), true);
+ };
+
+ var expr_atom = maybe_embed_tokens(function(allow_calls) {
+ if (is("operator", "new")) {
+ next();
+ return new_();
+ }
+ if (is("punc")) {
+ switch (S.token.value) {
+ case "(":
+ next();
+ return subscripts(prog1(expression, curry(expect, ")")), allow_calls);
+ case "[":
+ next();
+ return subscripts(array_(), allow_calls);
+ case "{":
+ next();
+ return subscripts(object_(), allow_calls);
+ }
+ unexpected();
+ }
+ if (is("keyword", "function")) {
+ next();
+ return subscripts(function_(false), allow_calls);
+ }
+ if (HOP(ATOMIC_START_TOKEN, S.token.type)) {
+ var atom = S.token.type == "regexp"
+ ? as("regexp", S.token.value[0], S.token.value[1])
+ : as(S.token.type, S.token.value);
+ return subscripts(prog1(atom, next), allow_calls);
+ }
+ unexpected();
+ });
+
+ function expr_list(closing, allow_trailing_comma, allow_empty) {
+ var first = true, a = [];
+ while (!is("punc", closing)) {
+ if (first) first = false; else expect(",");
+ if (allow_trailing_comma && is("punc", closing)) break;
+ if (is("punc", ",") && allow_empty) {
+ a.push([ "atom", "undefined" ]);
+ } else {
+ a.push(expression(false));
+ }
+ }
+ next();
+ return a;
+ };
+
+ function array_() {
+ return as("array", expr_list("]", !exigent_mode, true));
+ };
+
+ function object_() {
+ var first = true, a = [];
+ while (!is("punc", "}")) {
+ if (first) first = false; else expect(",");
+ if (!exigent_mode && is("punc", "}"))
+ // allow trailing comma
+ break;
+ var type = S.token.type;
+ var name = as_property_name();
+ if (type == "name" && (name == "get" || name == "set") && !is("punc", ":")) {
+ a.push([ as_name(), function_(false), name ]);
+ } else {
+ expect(":");
+ a.push([ name, expression(false) ]);
+ }
+ }
+ next();
+ return as("object", a);
+ };
+
+ function as_property_name() {
+ switch (S.token.type) {
+ case "num":
+ case "string":
+ return prog1(S.token.value, next);
+ }
+ return as_name();
+ };
+
+ function as_name() {
+ switch (S.token.type) {
+ case "name":
+ case "operator":
+ case "keyword":
+ case "atom":
+ return prog1(S.token.value, next);
+ default:
+ unexpected();
+ }
+ };
+
+ function subscripts(expr, allow_calls) {
+ if (is("punc", ".")) {
+ next();
+ return subscripts(as("dot", expr, as_name()), allow_calls);
+ }
+ if (is("punc", "[")) {
+ next();
+ return subscripts(as("sub", expr, prog1(expression, curry(expect, "]"))), allow_calls);
+ }
+ if (allow_calls && is("punc", "(")) {
+ next();
+ return subscripts(as("call", expr, expr_list(")")), true);
+ }
+ return expr;
+ };
+
+ function maybe_unary(allow_calls) {
+ if (is("operator") && HOP(UNARY_PREFIX, S.token.value)) {
+ return make_unary("unary-prefix",
+ prog1(S.token.value, next),
+ maybe_unary(allow_calls));
+ }
+ var val = expr_atom(allow_calls);
+ while (is("operator") && HOP(UNARY_POSTFIX, S.token.value) && !S.token.nlb) {
+ val = make_unary("unary-postfix", S.token.value, val);
+ next();
+ }
+ return val;
+ };
+
+ function make_unary(tag, op, expr) {
+ if ((op == "++" || op == "--") && !is_assignable(expr))
+ croak("Invalid use of " + op + " operator");
+ return as(tag, op, expr);
+ };
+
+ function expr_op(left, min_prec, no_in) {
+ var op = is("operator") ? S.token.value : null;
+ if (op && op == "in" && no_in) op = null;
+ var prec = op != null ? PRECEDENCE[op] : null;
+ if (prec != null && prec > min_prec) {
+ next();
+ var right = expr_op(maybe_unary(true), prec, no_in);
+ return expr_op(as("binary", op, left, right), min_prec, no_in);
+ }
+ return left;
+ };
+
+ function expr_ops(no_in) {
+ return expr_op(maybe_unary(true), 0, no_in);
+ };
+
+ function maybe_conditional(no_in) {
+ var expr = expr_ops(no_in);
+ if (is("operator", "?")) {
+ next();
+ var yes = expression(false);
+ expect(":");
+ return as("conditional", expr, yes, expression(false, no_in));
+ }
+ return expr;
+ };
+
+ function is_assignable(expr) {
+ if (!exigent_mode) return true;
+ switch (expr[0]+"") {
+ case "dot":
+ case "sub":
+ case "new":
+ case "call":
+ return true;
+ case "name":
+ return expr[1] != "this";
+ }
+ };
+
+ function maybe_assign(no_in) {
+ var left = maybe_conditional(no_in), val = S.token.value;
+ if (is("operator") && HOP(ASSIGNMENT, val)) {
+ if (is_assignable(left)) {
+ next();
+ return as("assign", ASSIGNMENT[val], left, maybe_assign(no_in));
+ }
+ croak("Invalid assignment");
+ }
+ return left;
+ };
+
+ var expression = maybe_embed_tokens(function(commas, no_in) {
+ if (arguments.length == 0)
+ commas = true;
+ var expr = maybe_assign(no_in);
+ if (commas && is("punc", ",")) {
+ next();
+ return as("seq", expr, expression(true, no_in));
+ }
+ return expr;
+ });
+
+ function in_loop(cont) {
+ try {
+ ++S.in_loop;
+ return cont();
+ } finally {
+ --S.in_loop;
+ }
+ };
+
+ return as("toplevel", (function(a){
+ while (!is("eof"))
+ a.push(statement());
+ return a;
+ })([]));
+
+};
+
+/* -----[ Utilities ]----- */
+
+function curry(f) {
+ var args = slice(arguments, 1);
+ return function() { return f.apply(this, args.concat(slice(arguments))); };
+};
+
+function prog1(ret) {
+ if (ret instanceof Function)
+ ret = ret();
+ for (var i = 1, n = arguments.length; --n > 0; ++i)
+ arguments[i]();
+ return ret;
+};
+
+function array_to_hash(a) {
+ var ret = {};
+ for (var i = 0; i < a.length; ++i)
+ ret[a[i]] = true;
+ return ret;
+};
+
+function slice(a, start) {
+ return Array.prototype.slice.call(a, start || 0);
+};
+
+function characters(str) {
+ return str.split("");
+};
+
+function member(name, array) {
+ for (var i = array.length; --i >= 0;)
+ if (array[i] == name)
+ return true;
+ return false;
+};
+
+function HOP(obj, prop) {
+ return Object.prototype.hasOwnProperty.call(obj, prop);
+};
+
+var warn = function() {};
+
+/* -----[ Exports ]----- */
+
+exports.tokenizer = tokenizer;
+exports.parse = parse;
+exports.slice = slice;
+exports.curry = curry;
+exports.member = member;
+exports.array_to_hash = array_to_hash;
+exports.PRECEDENCE = PRECEDENCE;
+exports.KEYWORDS_ATOM = KEYWORDS_ATOM;
+exports.RESERVED_WORDS = RESERVED_WORDS;
+exports.KEYWORDS = KEYWORDS;
+exports.ATOMIC_START_TOKEN = ATOMIC_START_TOKEN;
+exports.OPERATORS = OPERATORS;
+exports.is_alphanumeric_char = is_alphanumeric_char;
+exports.set_logger = function(logger) {
+ warn = logger;
+};
+
+});
+define('uglifyjs/squeeze-more', ["require", "exports", "module", "./parse-js", "./process"], function(require, exports, module) {
+
+var jsp = require("./parse-js"),
+ pro = require("./process"),
+ slice = jsp.slice,
+ member = jsp.member,
+ curry = jsp.curry,
+ MAP = pro.MAP,
+ PRECEDENCE = jsp.PRECEDENCE,
+ OPERATORS = jsp.OPERATORS;
+
+function ast_squeeze_more(ast) {
+ var w = pro.ast_walker(), walk = w.walk, scope;
+ function with_scope(s, cont) {
+ var save = scope, ret;
+ scope = s;
+ ret = cont();
+ scope = save;
+ return ret;
+ };
+ function _lambda(name, args, body) {
+ return [ this[0], name, args, with_scope(body.scope, curry(MAP, body, walk)) ];
+ };
+ return w.with_walkers({
+ "toplevel": function(body) {
+ return [ this[0], with_scope(this.scope, curry(MAP, body, walk)) ];
+ },
+ "function": _lambda,
+ "defun": _lambda,
+ "new": function(ctor, args) {
+ if (ctor[0] == "name") {
+ if (ctor[1] == "Array" && !scope.has("Array")) {
+ if (args.length != 1) {
+ return [ "array", args ];
+ } else {
+ return walk([ "call", [ "name", "Array" ], args ]);
+ }
+ } else if (ctor[1] == "Object" && !scope.has("Object")) {
+ if (!args.length) {
+ return [ "object", [] ];
+ } else {
+ return walk([ "call", [ "name", "Object" ], args ]);
+ }
+ } else if ((ctor[1] == "RegExp" || ctor[1] == "Function" || ctor[1] == "Error") && !scope.has(ctor[1])) {
+ return walk([ "call", [ "name", ctor[1] ], args]);
+ }
+ }
+ },
+ "call": function(expr, args) {
+ if (expr[0] == "dot" && expr[2] == "toString" && args.length == 0) {
+ // foo.toString() ==> foo+""
+ return [ "binary", "+", expr[1], [ "string", "" ]];
+ }
+ if (expr[0] == "name") {
+ if (expr[1] == "Array" && args.length != 1 && !scope.has("Array")) {
+ return [ "array", args ];
+ }
+ if (expr[1] == "Object" && !args.length && !scope.has("Object")) {
+ return [ "object", [] ];
+ }
+ if (expr[1] == "String" && !scope.has("String")) {
+ return [ "binary", "+", args[0], [ "string", "" ]];
+ }
+ }
+ }
+ }, function() {
+ return walk(pro.ast_add_scope(ast));
+ });
+};
+
+exports.ast_squeeze_more = ast_squeeze_more;
+
+});define('uglifyjs/process', ["require", "exports", "module", "./parse-js", "./squeeze-more"], function(require, exports, module) {
+
+/***********************************************************************
+
+ A JavaScript tokenizer / parser / beautifier / compressor.
+
+ This version is suitable for Node.js. With minimal changes (the
+ exports stuff) it should work on any JS platform.
+
+ This file implements some AST processors. They work on data built
+ by parse-js.
+
+ Exported functions:
+
+ - ast_mangle(ast, options) -- mangles the variable/function names
+ in the AST. Returns an AST.
+
+ - ast_squeeze(ast) -- employs various optimizations to make the
+ final generated code even smaller. Returns an AST.
+
+ - gen_code(ast, options) -- generates JS code from the AST. Pass
+ true (or an object, see the code for some options) as second
+ argument to get "pretty" (indented) code.
+
+ -------------------------------- (C) ---------------------------------
+
+ Author: Mihai Bazon
+ <mihai.bazon@gmail.com>
+ http://mihai.bazon.net/blog
+
+ Distributed under the BSD license:
+
+ Copyright 2010 (c) Mihai Bazon <mihai.bazon@gmail.com>
+
+ Redistribution and use in source and binary forms, with or without
+ modification, are permitted provided that the following conditions
+ are met:
+
+ * Redistributions of source code must retain the above
+ copyright notice, this list of conditions and the following
+ disclaimer.
+
+ * Redistributions in binary form must reproduce the above
+ copyright notice, this list of conditions and the following
+ disclaimer in the documentation and/or other materials
+ provided with the distribution.
+
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER “AS IS” AND ANY
+ EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
+ LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
+ OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+ TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
+ THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
+ SUCH DAMAGE.
+
+ ***********************************************************************/
+
+var jsp = require("./parse-js"),
+ slice = jsp.slice,
+ member = jsp.member,
+ PRECEDENCE = jsp.PRECEDENCE,
+ OPERATORS = jsp.OPERATORS;
+
+/* -----[ helper for AST traversal ]----- */
+
+function ast_walker() {
+ function _vardefs(defs) {
+ return [ this[0], MAP(defs, function(def){
+ var a = [ def[0] ];
+ if (def.length > 1)
+ a[1] = walk(def[1]);
+ return a;
+ }) ];
+ };
+ function _block(statements) {
+ var out = [ this[0] ];
+ if (statements != null)
+ out.push(MAP(statements, walk));
+ return out;
+ };
+ var walkers = {
+ "string": function(str) {
+ return [ this[0], str ];
+ },
+ "num": function(num) {
+ return [ this[0], num ];
+ },
+ "name": function(name) {
+ return [ this[0], name ];
+ },
+ "toplevel": function(statements) {
+ return [ this[0], MAP(statements, walk) ];
+ },
+ "block": _block,
+ "splice": _block,
+ "var": _vardefs,
+ "const": _vardefs,
+ "try": function(t, c, f) {
+ return [
+ this[0],
+ MAP(t, walk),
+ c != null ? [ c[0], MAP(c[1], walk) ] : null,
+ f != null ? MAP(f, walk) : null
+ ];
+ },
+ "throw": function(expr) {
+ return [ this[0], walk(expr) ];
+ },
+ "new": function(ctor, args) {
+ return [ this[0], walk(ctor), MAP(args, walk) ];
+ },
+ "switch": function(expr, body) {
+ return [ this[0], walk(expr), MAP(body, function(branch){
+ return [ branch[0] ? walk(branch[0]) : null,
+ MAP(branch[1], walk) ];
+ }) ];
+ },
+ "break": function(label) {
+ return [ this[0], label ];
+ },
+ "continue": function(label) {
+ return [ this[0], label ];
+ },
+ "conditional": function(cond, t, e) {
+ return [ this[0], walk(cond), walk(t), walk(e) ];
+ },
+ "assign": function(op, lvalue, rvalue) {
+ return [ this[0], op, walk(lvalue), walk(rvalue) ];
+ },
+ "dot": function(expr) {
+ return [ this[0], walk(expr) ].concat(slice(arguments, 1));
+ },
+ "call": function(expr, args) {
+ return [ this[0], walk(expr), MAP(args, walk) ];
+ },
+ "function": function(name, args, body) {
+ return [ this[0], name, args.slice(), MAP(body, walk) ];
+ },
+ "defun": function(name, args, body) {
+ return [ this[0], name, args.slice(), MAP(body, walk) ];
+ },
+ "if": function(conditional, t, e) {
+ return [ this[0], walk(conditional), walk(t), walk(e) ];
+ },
+ "for": function(init, cond, step, block) {
+ return [ this[0], walk(init), walk(cond), walk(step), walk(block) ];
+ },
+ "for-in": function(vvar, key, hash, block) {
+ return [ this[0], walk(vvar), walk(key), walk(hash), walk(block) ];
+ },
+ "while": function(cond, block) {
+ return [ this[0], walk(cond), walk(block) ];
+ },
+ "do": function(cond, block) {
+ return [ this[0], walk(cond), walk(block) ];
+ },
+ "return": function(expr) {
+ return [ this[0], walk(expr) ];
+ },
+ "binary": function(op, left, right) {
+ return [ this[0], op, walk(left), walk(right) ];
+ },
+ "unary-prefix": function(op, expr) {
+ return [ this[0], op, walk(expr) ];
+ },
+ "unary-postfix": function(op, expr) {
+ return [ this[0], op, walk(expr) ];
+ },
+ "sub": function(expr, subscript) {
+ return [ this[0], walk(expr), walk(subscript) ];
+ },
+ "object": function(props) {
+ return [ this[0], MAP(props, function(p){
+ return p.length == 2
+ ? [ p[0], walk(p[1]) ]
+ : [ p[0], walk(p[1]), p[2] ]; // get/set-ter
+ }) ];
+ },
+ "regexp": function(rx, mods) {
+ return [ this[0], rx, mods ];
+ },
+ "array": function(elements) {
+ return [ this[0], MAP(elements, walk) ];
+ },
+ "stat": function(stat) {
+ return [ this[0], walk(stat) ];
+ },
+ "seq": function() {
+ return [ this[0] ].concat(MAP(slice(arguments), walk));
+ },
+ "label": function(name, block) {
+ return [ this[0], name, walk(block) ];
+ },
+ "with": function(expr, block) {
+ return [ this[0], walk(expr), walk(block) ];
+ },
+ "atom": function(name) {
+ return [ this[0], name ];
+ }
+ };
+
+ var user = {};
+ var stack = [];
+ function walk(ast) {
+ if (ast == null)
+ return null;
+ try {
+ stack.push(ast);
+ var type = ast[0];
+ var gen = user[type];
+ if (gen) {
+ var ret = gen.apply(ast, ast.slice(1));
+ if (ret != null)
+ return ret;
+ }
+ gen = walkers[type];
+ return gen.apply(ast, ast.slice(1));
+ } finally {
+ stack.pop();
+ }
+ };
+
+ function dive(ast) {
+ if (ast == null)
+ return null;
+ try {
+ stack.push(ast);
+ return walkers[ast[0]].apply(ast, ast.slice(1));
+ } finally {
+ stack.pop();
+ }
+ };
+
+ function with_walkers(walkers, cont){
+ var save = {}, i;
+ for (i in walkers) if (HOP(walkers, i)) {
+ save[i] = user[i];
+ user[i] = walkers[i];
+ }
+ var ret = cont();
+ for (i in save) if (HOP(save, i)) {
+ if (!save[i]) delete user[i];
+ else user[i] = save[i];
+ }
+ return ret;
+ };
+
+ return {
+ walk: walk,
+ dive: dive,
+ with_walkers: with_walkers,
+ parent: function() {
+ return stack[stack.length - 2]; // last one is current node
+ },
+ stack: function() {
+ return stack;
+ }
+ };
+};
+
+/* -----[ Scope and mangling ]----- */
+
+function Scope(parent) {
+ this.names = {}; // names defined in this scope
+ this.mangled = {}; // mangled names (orig.name => mangled)
+ this.rev_mangled = {}; // reverse lookup (mangled => orig.name)
+ this.cname = -1; // current mangled name
+ this.refs = {}; // names referenced from this scope
+ this.uses_with = false; // will become TRUE if with() is detected in this or any subscopes
+ this.uses_eval = false; // will become TRUE if eval() is detected in this or any subscopes
+ this.parent = parent; // parent scope
+ this.children = []; // sub-scopes
+ if (parent) {
+ this.level = parent.level + 1;
+ parent.children.push(this);
+ } else {
+ this.level = 0;
+ }
+};
+
+var base54 = (function(){
+ var DIGITS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_";
+ return function(num) {
+ var ret = "";
+ do {
+ ret = DIGITS.charAt(num % 54) + ret;
+ num = Math.floor(num / 54);
+ } while (num > 0);
+ return ret;
+ };
+})();
+
+Scope.prototype = {
+ has: function(name) {
+ for (var s = this; s; s = s.parent)
+ if (HOP(s.names, name))
+ return s;
+ },
+ has_mangled: function(mname) {
+ for (var s = this; s; s = s.parent)
+ if (HOP(s.rev_mangled, mname))
+ return s;
+ },
+ toJSON: function() {
+ return {
+ names: this.names,
+ uses_eval: this.uses_eval,
+ uses_with: this.uses_with
+ };
+ },
+
+ next_mangled: function() {
+ // we must be careful that the new mangled name:
+ //
+ // 1. doesn't shadow a mangled name from a parent
+ // scope, unless we don't reference the original
+ // name from this scope OR from any sub-scopes!
+ // This will get slow.
+ //
+ // 2. doesn't shadow an original name from a parent
+ // scope, in the event that the name is not mangled
+ // in the parent scope and we reference that name
+ // here OR IN ANY SUBSCOPES!
+ //
+ // 3. doesn't shadow a name that is referenced but not
+ // defined (possibly global defined elsewhere).
+ for (;;) {
+ var m = base54(++this.cname), prior;
+
+ // case 1.
+ prior = this.has_mangled(m);
+ if (prior && this.refs[prior.rev_mangled[m]] === prior)
+ continue;
+
+ // case 2.
+ prior = this.has(m);
+ if (prior && prior !== this && this.refs[m] === prior && !prior.has_mangled(m))
+ continue;
+
+ // case 3.
+ if (HOP(this.refs, m) && this.refs[m] == null)
+ continue;
+
+ // I got "do" once. :-/
+ if (!is_identifier(m))
+ continue;
+
+ return m;
+ }
+ },
+ set_mangle: function(name, m) {
+ this.rev_mangled[m] = name;
+ return this.mangled[name] = m;
+ },
+ get_mangled: function(name, newMangle) {
+ if (this.uses_eval || this.uses_with) return name; // no mangle if eval or with is in use
+ var s = this.has(name);
+ if (!s) return name; // not in visible scope, no mangle
+ if (HOP(s.mangled, name)) return s.mangled[name]; // already mangled in this scope
+ if (!newMangle) return name; // not found and no mangling requested
+ return s.set_mangle(name, s.next_mangled());
+ },
+ references: function(name) {
+ return name && !this.parent || this.uses_with || this.uses_eval || this.refs[name];
+ },
+ define: function(name, type) {
+ if (name != null) {
+ if (type == "var" || !HOP(this.names, name))
+ this.names[name] = type || "var";
+ return name;
+ }
+ }
+};
+
+function ast_add_scope(ast) {
+
+ var current_scope = null;
+ var w = ast_walker(), walk = w.walk;
+ var having_eval = [];
+
+ function with_new_scope(cont) {
+ current_scope = new Scope(current_scope);
+ current_scope.labels = new Scope();
+ var ret = current_scope.body = cont();
+ ret.scope = current_scope;
+ current_scope = current_scope.parent;
+ return ret;
+ };
+
+ function define(name, type) {
+ return current_scope.define(name, type);
+ };
+
+ function reference(name) {
+ current_scope.refs[name] = true;
+ };
+
+ function _lambda(name, args, body) {
+ var is_defun = this[0] == "defun";
+ return [ this[0], is_defun ? define(name, "defun") : name, args, with_new_scope(function(){
+ if (!is_defun) define(name, "lambda");
+ MAP(args, function(name){ define(name, "arg") });
+ return MAP(body, walk);
+ })];
+ };
+
+ function _vardefs(type) {
+ return function(defs) {
+ MAP(defs, function(d){
+ define(d[0], type);
+ if (d[1]) reference(d[0]);
+ });
+ };
+ };
+
+ function _breacont(label) {
+ if (label)
+ current_scope.labels.refs[label] = true;
+ };
+
+ return with_new_scope(function(){
+ // process AST
+ var ret = w.with_walkers({
+ "function": _lambda,
+ "defun": _lambda,
+ "label": function(name, stat) { current_scope.labels.define(name) },
+ "break": _breacont,
+ "continue": _breacont,
+ "with": function(expr, block) {
+ for (var s = current_scope; s; s = s.parent)
+ s.uses_with = true;
+ },
+ "var": _vardefs("var"),
+ "const": _vardefs("const"),
+ "try": function(t, c, f) {
+ if (c != null) return [
+ this[0],
+ MAP(t, walk),
+ [ define(c[0], "catch"), MAP(c[1], walk) ],
+ f != null ? MAP(f, walk) : null
+ ];
+ },
+ "name": function(name) {
+ if (name == "eval")
+ having_eval.push(current_scope);
+ reference(name);
+ }
+ }, function(){
+ return walk(ast);
+ });
+
+ // the reason why we need an additional pass here is
+ // that names can be used prior to their definition.
+
+ // scopes where eval was detected and their parents
+ // are marked with uses_eval, unless they define the
+ // "eval" name.
+ MAP(having_eval, function(scope){
+ if (!scope.has("eval")) while (scope) {
+ scope.uses_eval = true;
+ scope = scope.parent;
+ }
+ });
+
+ // for referenced names it might be useful to know
+ // their origin scope. current_scope here is the
+ // toplevel one.
+ function fixrefs(scope, i) {
+ // do children first; order shouldn't matter
+ for (i = scope.children.length; --i >= 0;)
+ fixrefs(scope.children[i]);
+ for (i in scope.refs) if (HOP(scope.refs, i)) {
+ // find origin scope and propagate the reference to origin
+ for (var origin = scope.has(i), s = scope; s; s = s.parent) {
+ s.refs[i] = origin;
+ if (s === origin) break;
+ }
+ }
+ };
+ fixrefs(current_scope);
+
+ return ret;
+ });
+
+};
+
+/* -----[ mangle names ]----- */
+
+function ast_mangle(ast, options) {
+ var w = ast_walker(), walk = w.walk, scope;
+ options = options || {};
+
+ function get_mangled(name, newMangle) {
+ if (!options.toplevel && !scope.parent) return name; // don't mangle toplevel
+ if (options.except && member(name, options.except))
+ return name;
+ return scope.get_mangled(name, newMangle);
+ };
+
+ function get_define(name) {
+ if (options.defines) {
+ // we always lookup a defined symbol for the current scope FIRST, so declared
+ // vars trump a DEFINE symbol, but if no such var is found, then match a DEFINE value
+ if (!scope.has(name)) {
+ if (HOP(options.defines, name)) {
+ return options.defines[name];
+ }
+ }
+ return null;
+ }
+ };
+
+ function _lambda(name, args, body) {
+ if (!options.no_functions) {
+ var is_defun = this[0] == "defun", extra;
+ if (name) {
+ if (is_defun) name = get_mangled(name);
+ else if (body.scope.references(name)) {
+ extra = {};
+ if (!(scope.uses_eval || scope.uses_with))
+ name = extra[name] = scope.next_mangled();
+ else
+ extra[name] = name;
+ }
+ else name = null;
+ }
+ }
+ body = with_scope(body.scope, function(){
+ args = MAP(args, function(name){ return get_mangled(name) });
+ return MAP(body, walk);
+ }, extra);
+ return [ this[0], name, args, body ];
+ };
+
+ function with_scope(s, cont, extra) {
+ var _scope = scope;
+ scope = s;
+ if (extra) for (var i in extra) if (HOP(extra, i)) {
+ s.set_mangle(i, extra[i]);
+ }
+ for (var i in s.names) if (HOP(s.names, i)) {
+ get_mangled(i, true);
+ }
+ var ret = cont();
+ ret.scope = s;
+ scope = _scope;
+ return ret;
+ };
+
+ function _vardefs(defs) {
+ return [ this[0], MAP(defs, function(d){
+ return [ get_mangled(d[0]), walk(d[1]) ];
+ }) ];
+ };
+
+ function _breacont(label) {
+ if (label) return [ this[0], scope.labels.get_mangled(label) ];
+ };
+
+ return w.with_walkers({
+ "function": _lambda,
+ "defun": function() {
+ // move function declarations to the top when
+ // they are not in some block.
+ var ast = _lambda.apply(this, arguments);
+ switch (w.parent()[0]) {
+ case "toplevel":
+ case "function":
+ case "defun":
+ return MAP.at_top(ast);
+ }
+ return ast;
+ },
+ "label": function(label, stat) {
+ if (scope.labels.refs[label]) return [
+ this[0],
+ scope.labels.get_mangled(label, true),
+ walk(stat)
+ ];
+ return walk(stat);
+ },
+ "break": _breacont,
+ "continue": _breacont,
+ "var": _vardefs,
+ "const": _vardefs,
+ "name": function(name) {
+ return get_define(name) || [ this[0], get_mangled(name) ];
+ },
+ "try": function(t, c, f) {
+ return [ this[0],
+ MAP(t, walk),
+ c != null ? [ get_mangled(c[0]), MAP(c[1], walk) ] : null,
+ f != null ? MAP(f, walk) : null ];
+ },
+ "toplevel": function(body) {
+ var self = this;
+ return with_scope(self.scope, function(){
+ return [ self[0], MAP(body, walk) ];
+ });
+ }
+ }, function() {
+ return walk(ast_add_scope(ast));
+ });
+};
+
+/* -----[
+ - compress foo["bar"] into foo.bar,
+ - remove block brackets {} where possible
+ - join consecutive var declarations
+ - various optimizations for IFs:
+ - if (cond) foo(); else bar(); ==> cond?foo():bar();
+ - if (cond) foo(); ==> cond&&foo();
+ - if (foo) return bar(); else return baz(); ==> return foo?bar():baz(); // also for throw
+ - if (foo) return bar(); else something(); ==> {if(foo)return bar();something()}
+ ]----- */
+
+var warn = function(){};
+
+function best_of(ast1, ast2) {
+ return gen_code(ast1).length > gen_code(ast2[0] == "stat" ? ast2[1] : ast2).length ? ast2 : ast1;
+};
+
+function last_stat(b) {
+ if (b[0] == "block" && b[1] && b[1].length > 0)
+ return b[1][b[1].length - 1];
+ return b;
+}
+
+function aborts(t) {
+ if (t) switch (last_stat(t)[0]) {
+ case "return":
+ case "break":
+ case "continue":
+ case "throw":
+ return true;
+ }
+};
+
+function boolean_expr(expr) {
+ return ( (expr[0] == "unary-prefix"
+ && member(expr[1], [ "!", "delete" ])) ||
+
+ (expr[0] == "binary"
+ && member(expr[1], [ "in", "instanceof", "==", "!=", "===", "!==", "<", "<=", ">=", ">" ])) ||
+
+ (expr[0] == "binary"
+ && member(expr[1], [ "&&", "||" ])
+ && boolean_expr(expr[2])
+ && boolean_expr(expr[3])) ||
+
+ (expr[0] == "conditional"
+ && boolean_expr(expr[2])
+ && boolean_expr(expr[3])) ||
+
+ (expr[0] == "assign"
+ && expr[1] === true
+ && boolean_expr(expr[3])) ||
+
+ (expr[0] == "seq"
+ && boolean_expr(expr[expr.length - 1]))
+ );
+};
+
+function empty(b) {
+ return !b || (b[0] == "block" && (!b[1] || b[1].length == 0));
+};
+
+function is_string(node) {
+ return (node[0] == "string" ||
+ node[0] == "unary-prefix" && node[1] == "typeof" ||
+ node[0] == "binary" && node[1] == "+" &&
+ (is_string(node[2]) || is_string(node[3])));
+};
+
+var when_constant = (function(){
+
+ var $NOT_CONSTANT = {};
+
+ // this can only evaluate constant expressions. If it finds anything
+ // not constant, it throws $NOT_CONSTANT.
+ function evaluate(expr) {
+ switch (expr[0]) {
+ case "string":
+ case "num":
+ return expr[1];
+ case "name":
+ case "atom":
+ switch (expr[1]) {
+ case "true": return true;
+ case "false": return false;
+ case "null": return null;
+ }
+ break;
+ case "unary-prefix":
+ switch (expr[1]) {
+ case "!": return !evaluate(expr[2]);
+ case "typeof": return typeof evaluate(expr[2]);
+ case "~": return ~evaluate(expr[2]);
+ case "-": return -evaluate(expr[2]);
+ case "+": return +evaluate(expr[2]);
+ }
+ break;
+ case "binary":
+ var left = expr[2], right = expr[3];
+ switch (expr[1]) {
+ case "&&" : return evaluate(left) && evaluate(right);
+ case "||" : return evaluate(left) || evaluate(right);
+ case "|" : return evaluate(left) | evaluate(right);
+ case "&" : return evaluate(left) & evaluate(right);
+ case "^" : return evaluate(left) ^ evaluate(right);
+ case "+" : return evaluate(left) + evaluate(right);
+ case "*" : return evaluate(left) * evaluate(right);
+ case "/" : return evaluate(left) / evaluate(right);
+ case "%" : return evaluate(left) % evaluate(right);
+ case "-" : return evaluate(left) - evaluate(right);
+ case "<<" : return evaluate(left) << evaluate(right);
+ case ">>" : return evaluate(left) >> evaluate(right);
+ case ">>>" : return evaluate(left) >>> evaluate(right);
+ case "==" : return evaluate(left) == evaluate(right);
+ case "===" : return evaluate(left) === evaluate(right);
+ case "!=" : return evaluate(left) != evaluate(right);
+ case "!==" : return evaluate(left) !== evaluate(right);
+ case "<" : return evaluate(left) < evaluate(right);
+ case "<=" : return evaluate(left) <= evaluate(right);
+ case ">" : return evaluate(left) > evaluate(right);
+ case ">=" : return evaluate(left) >= evaluate(right);
+ case "in" : return evaluate(left) in evaluate(right);
+ case "instanceof" : return evaluate(left) instanceof evaluate(right);
+ }
+ }
+ throw $NOT_CONSTANT;
+ };
+
+ return function(expr, yes, no) {
+ try {
+ var val = evaluate(expr), ast;
+ switch (typeof val) {
+ case "string": ast = [ "string", val ]; break;
+ case "number": ast = [ "num", val ]; break;
+ case "boolean": ast = [ "name", String(val) ]; break;
+ default: throw new Error("Can't handle constant of type: " + (typeof val));
+ }
+ return yes.call(expr, ast, val);
+ } catch(ex) {
+ if (ex === $NOT_CONSTANT) {
+ if (expr[0] == "binary"
+ && (expr[1] == "===" || expr[1] == "!==")
+ && ((is_string(expr[2]) && is_string(expr[3]))
+ || (boolean_expr(expr[2]) && boolean_expr(expr[3])))) {
+ expr[1] = expr[1].substr(0, 2);
+ }
+ else if (no && expr[0] == "binary"
+ && (expr[1] == "||" || expr[1] == "&&")) {
+ // the whole expression is not constant but the lval may be...
+ try {
+ var lval = evaluate(expr[2]);
+ expr = ((expr[1] == "&&" && (lval ? expr[3] : lval)) ||
+ (expr[1] == "||" && (lval ? lval : expr[3])) ||
+ expr);
+ } catch(ex2) {
+ // IGNORE... lval is not constant
+ }
+ }
+ return no ? no.call(expr, expr) : null;
+ }
+ else throw ex;
+ }
+ };
+
+})();
+
+function warn_unreachable(ast) {
+ if (!empty(ast))
+ warn("Dropping unreachable code: " + gen_code(ast, true));
+};
+
+function prepare_ifs(ast) {
+ var w = ast_walker(), walk = w.walk;
+ // In this first pass, we rewrite ifs which abort with no else with an
+ // if-else. For example:
+ //
+ // if (x) {
+ // blah();
+ // return y;
+ // }
+ // foobar();
+ //
+ // is rewritten into:
+ //
+ // if (x) {
+ // blah();
+ // return y;
+ // } else {
+ // foobar();
+ // }
+ function redo_if(statements) {
+ statements = MAP(statements, walk);
+
+ for (var i = 0; i < statements.length; ++i) {
+ var fi = statements[i];
+ if (fi[0] != "if") continue;
+
+ if (fi[3] && walk(fi[3])) continue;
+
+ var t = walk(fi[2]);
+ if (!aborts(t)) continue;
+
+ var conditional = walk(fi[1]);
+
+ var e_body = statements.slice(i + 1);
+ var e = e_body.length == 1 ? e_body[0] : [ "block", e_body ];
+
+ var ret = statements.slice(0, i).concat([ [
+ fi[0], // "if"
+ conditional, // conditional
+ t, // then
+ e // else
+ ] ]);
+
+ return redo_if(ret);
+ }
+
+ return statements;
+ };
+
+ function redo_if_lambda(name, args, body) {
+ body = redo_if(body);
+ return [ this[0], name, args, body ];
+ };
+
+ function redo_if_block(statements) {
+ return [ this[0], statements != null ? redo_if(statements) : null ];
+ };
+
+ return w.with_walkers({
+ "defun": redo_if_lambda,
+ "function": redo_if_lambda,
+ "block": redo_if_block,
+ "splice": redo_if_block,
+ "toplevel": function(statements) {
+ return [ this[0], redo_if(statements) ];
+ },
+ "try": function(t, c, f) {
+ return [
+ this[0],
+ redo_if(t),
+ c != null ? [ c[0], redo_if(c[1]) ] : null,
+ f != null ? redo_if(f) : null
+ ];
+ }
+ }, function() {
+ return walk(ast);
+ });
+};
+
+function for_side_effects(ast, handler) {
+ var w = ast_walker(), walk = w.walk;
+ var $stop = {}, $restart = {};
+ function stop() { throw $stop };
+ function restart() { throw $restart };
+ function found(){ return handler.call(this, this, w, stop, restart) };
+ function unary(op) {
+ if (op == "++" || op == "--")
+ return found.apply(this, arguments);
+ };
+ return w.with_walkers({
+ "try": found,
+ "throw": found,
+ "return": found,
+ "new": found,
+ "switch": found,
+ "break": found,
+ "continue": found,
+ "assign": found,
+ "call": found,
+ "if": found,
+ "for": found,
+ "for-in": found,
+ "while": found,
+ "do": found,
+ "return": found,
+ "unary-prefix": unary,
+ "unary-postfix": unary,
+ "defun": found
+ }, function(){
+ while (true) try {
+ walk(ast);
+ break;
+ } catch(ex) {
+ if (ex === $stop) break;
+ if (ex === $restart) continue;
+ throw ex;
+ }
+ });
+};
+
+function ast_lift_variables(ast) {
+ var w = ast_walker(), walk = w.walk, scope;
+ function do_body(body, env) {
+ var _scope = scope;
+ scope = env;
+ body = MAP(body, walk);
+ var hash = {}, names = MAP(env.names, function(type, name){
+ if (type != "var") return MAP.skip;
+ if (!env.references(name)) return MAP.skip;
+ hash[name] = true;
+ return [ name ];
+ });
+ if (names.length > 0) {
+ // looking for assignments to any of these variables.
+ // we can save considerable space by moving the definitions
+ // in the var declaration.
+ for_side_effects([ "block", body ], function(ast, walker, stop, restart) {
+ if (ast[0] == "assign"
+ && ast[1] === true
+ && ast[2][0] == "name"
+ && HOP(hash, ast[2][1])) {
+ // insert the definition into the var declaration
+ for (var i = names.length; --i >= 0;) {
+ if (names[i][0] == ast[2][1]) {
+ if (names[i][1]) // this name already defined, we must stop
+ stop();
+ names[i][1] = ast[3]; // definition
+ names.push(names.splice(i, 1)[0]);
+ break;
+ }
+ }
+ // remove this assignment from the AST.
+ var p = walker.parent();
+ if (p[0] == "seq") {
+ var a = p[2];
+ a.unshift(0, p.length);
+ p.splice.apply(p, a);
+ }
+ else if (p[0] == "stat") {
+ p.splice(0, p.length, "block"); // empty statement
+ }
+ else {
+ stop();
+ }
+ restart();
+ }
+ stop();
+ });
+ body.unshift([ "var", names ]);
+ }
+ scope = _scope;
+ return body;
+ };
+ function _vardefs(defs) {
+ var ret = null;
+ for (var i = defs.length; --i >= 0;) {
+ var d = defs[i];
+ if (!d[1]) continue;
+ d = [ "assign", true, [ "name", d[0] ], d[1] ];
+ if (ret == null) ret = d;
+ else ret = [ "seq", d, ret ];
+ }
+ if (ret == null) {
+ if (w.parent()[0] == "for-in")
+ return [ "name", defs[0][0] ];
+ return MAP.skip;
+ }
+ return [ "stat", ret ];
+ };
+ function _toplevel(body) {
+ return [ this[0], do_body(body, this.scope) ];
+ };
+ return w.with_walkers({
+ "function": function(name, args, body){
+ for (var i = args.length; --i >= 0 && !body.scope.references(args[i]);)
+ args.pop();
+ if (!body.scope.references(name)) name = null;
+ return [ this[0], name, args, do_body(body, body.scope) ];
+ },
+ "defun": function(name, args, body){
+ if (!scope.references(name)) return MAP.skip;
+ for (var i = args.length; --i >= 0 && !body.scope.references(args[i]);)
+ args.pop();
+ return [ this[0], name, args, do_body(body, body.scope) ];
+ },
+ "var": _vardefs,
+ "toplevel": _toplevel
+ }, function(){
+ return walk(ast_add_scope(ast));
+ });
+};
+
+function ast_squeeze(ast, options) {
+ options = defaults(options, {
+ make_seqs : true,
+ dead_code : true,
+ no_warnings : false,
+ keep_comps : true
+ });
+
+ var w = ast_walker(), walk = w.walk;
+
+ function negate(c) {
+ var not_c = [ "unary-prefix", "!", c ];
+ switch (c[0]) {
+ case "unary-prefix":
+ return c[1] == "!" && boolean_expr(c[2]) ? c[2] : not_c;
+ case "seq":
+ c = slice(c);
+ c[c.length - 1] = negate(c[c.length - 1]);
+ return c;
+ case "conditional":
+ return best_of(not_c, [ "conditional", c[1], negate(c[2]), negate(c[3]) ]);
+ case "binary":
+ var op = c[1], left = c[2], right = c[3];
+ if (!options.keep_comps) switch (op) {
+ case "<=" : return [ "binary", ">", left, right ];
+ case "<" : return [ "binary", ">=", left, right ];
+ case ">=" : return [ "binary", "<", left, right ];
+ case ">" : return [ "binary", "<=", left, right ];
+ }
+ switch (op) {
+ case "==" : return [ "binary", "!=", left, right ];
+ case "!=" : return [ "binary", "==", left, right ];
+ case "===" : return [ "binary", "!==", left, right ];
+ case "!==" : return [ "binary", "===", left, right ];
+ case "&&" : return best_of(not_c, [ "binary", "||", negate(left), negate(right) ]);
+ case "||" : return best_of(not_c, [ "binary", "&&", negate(left), negate(right) ]);
+ }
+ break;
+ }
+ return not_c;
+ };
+
+ function make_conditional(c, t, e) {
+ var make_real_conditional = function() {
+ if (c[0] == "unary-prefix" && c[1] == "!") {
+ return e ? [ "conditional", c[2], e, t ] : [ "binary", "||", c[2], t ];
+ } else {
+ return e ? best_of(
+ [ "conditional", c, t, e ],
+ [ "conditional", negate(c), e, t ]
+ ) : [ "binary", "&&", c, t ];
+ }
+ };
+ // shortcut the conditional if the expression has a constant value
+ return when_constant(c, function(ast, val){
+ warn_unreachable(val ? e : t);
+ return (val ? t : e);
+ }, make_real_conditional);
+ };
+
+ function rmblock(block) {
+ if (block != null && block[0] == "block" && block[1]) {
+ if (block[1].length == 1)
+ block = block[1][0];
+ else if (block[1].length == 0)
+ block = [ "block" ];
+ }
+ return block;
+ };
+
+ function _lambda(name, args, body) {
+ return [ this[0], name, args, tighten(body, "lambda") ];
+ };
+
+ // this function does a few things:
+ // 1. discard useless blocks
+ // 2. join consecutive var declarations
+ // 3. remove obviously dead code
+ // 4. transform consecutive statements using the comma operator
+ // 5. if block_type == "lambda" and it detects constructs like if(foo) return ... - rewrite like if (!foo) { ... }
+ function tighten(statements, block_type) {
+ statements = MAP(statements, walk);
+
+ statements = statements.reduce(function(a, stat){
+ if (stat[0] == "block") {
+ if (stat[1]) {
+ a.push.apply(a, stat[1]);
+ }
+ } else {
+ a.push(stat);
+ }
+ return a;
+ }, []);
+
+ statements = (function(a, prev){
+ statements.forEach(function(cur){
+ if (prev && ((cur[0] == "var" && prev[0] == "var") ||
+ (cur[0] == "const" && prev[0] == "const"))) {
+ prev[1] = prev[1].concat(cur[1]);
+ } else {
+ a.push(cur);
+ prev = cur;
+ }
+ });
+ return a;
+ })([]);
+
+ if (options.dead_code) statements = (function(a, has_quit){
+ statements.forEach(function(st){
+ if (has_quit) {
+ if (st[0] == "function" || st[0] == "defun") {
+ a.push(st);
+ }
+ else if (st[0] == "var" || st[0] == "const") {
+ if (!options.no_warnings)
+ warn("Variables declared in unreachable code");
+ st[1] = MAP(st[1], function(def){
+ if (def[1] && !options.no_warnings)
+ warn_unreachable([ "assign", true, [ "name", def[0] ], def[1] ]);
+ return [ def[0] ];
+ });
+ a.push(st);
+ }
+ else if (!options.no_warnings)
+ warn_unreachable(st);
+ }
+ else {
+ a.push(st);
+ if (member(st[0], [ "return", "throw", "break", "continue" ]))
+ has_quit = true;
+ }
+ });
+ return a;
+ })([]);
+
+ if (options.make_seqs) statements = (function(a, prev) {
+ statements.forEach(function(cur){
+ if (prev && prev[0] == "stat" && cur[0] == "stat") {
+ prev[1] = [ "seq", prev[1], cur[1] ];
+ } else {
+ a.push(cur);
+ prev = cur;
+ }
+ });
+ if (a.length >= 2
+ && a[a.length-2][0] == "stat"
+ && (a[a.length-1][0] == "return" || a[a.length-1][0] == "throw")
+ && a[a.length-1][1])
+ {
+ a.splice(a.length - 2, 2,
+ [ a[a.length-1][0],
+ [ "seq", a[a.length-2][1], a[a.length-1][1] ]]);
+ }
+ return a;
+ })([]);
+
+ // this increases jQuery by 1K. Probably not such a good idea after all..
+ // part of this is done in prepare_ifs anyway.
+ // if (block_type == "lambda") statements = (function(i, a, stat){
+ // while (i < statements.length) {
+ // stat = statements[i++];
+ // if (stat[0] == "if" && !stat[3]) {
+ // if (stat[2][0] == "return" && stat[2][1] == null) {
+ // a.push(make_if(negate(stat[1]), [ "block", statements.slice(i) ]));
+ // break;
+ // }
+ // var last = last_stat(stat[2]);
+ // if (last[0] == "return" && last[1] == null) {
+ // a.push(make_if(stat[1], [ "block", stat[2][1].slice(0, -1) ], [ "block", statements.slice(i) ]));
+ // break;
+ // }
+ // }
+ // a.push(stat);
+ // }
+ // return a;
+ // })(0, []);
+
+ return statements;
+ };
+
+ function make_if(c, t, e) {
+ return when_constant(c, function(ast, val){
+ if (val) {
+ t = walk(t);
+ warn_unreachable(e);
+ return t || [ "block" ];
+ } else {
+ e = walk(e);
+ warn_unreachable(t);
+ return e || [ "block" ];
+ }
+ }, function() {
+ return make_real_if(c, t, e);
+ });
+ };
+
+ function make_real_if(c, t, e) {
+ c = walk(c);
+ t = walk(t);
+ e = walk(e);
+
+ if (empty(t)) {
+ c = negate(c);
+ t = e;
+ e = null;
+ } else if (empty(e)) {
+ e = null;
+ } else {
+ // if we have both else and then, maybe it makes sense to switch them?
+ (function(){
+ var a = gen_code(c);
+ var n = negate(c);
+ var b = gen_code(n);
+ if (b.length < a.length) {
+ var tmp = t;
+ t = e;
+ e = tmp;
+ c = n;
+ }
+ })();
+ }
+ if (empty(e) && empty(t))
+ return [ "stat", c ];
+ var ret = [ "if", c, t, e ];
+ if (t[0] == "if" && empty(t[3]) && empty(e)) {
+ ret = best_of(ret, walk([ "if", [ "binary", "&&", c, t[1] ], t[2] ]));
+ }
+ else if (t[0] == "stat") {
+ if (e) {
+ if (e[0] == "stat") {
+ ret = best_of(ret, [ "stat", make_conditional(c, t[1], e[1]) ]);
+ }
+ }
+ else {
+ ret = best_of(ret, [ "stat", make_conditional(c, t[1]) ]);
+ }
+ }
+ else if (e && t[0] == e[0] && (t[0] == "return" || t[0] == "throw") && t[1] && e[1]) {
+ ret = best_of(ret, [ t[0], make_conditional(c, t[1], e[1] ) ]);
+ }
+ else if (e && aborts(t)) {
+ ret = [ [ "if", c, t ] ];
+ if (e[0] == "block") {
+ if (e[1]) ret = ret.concat(e[1]);
+ }
+ else {
+ ret.push(e);
+ }
+ ret = walk([ "block", ret ]);
+ }
+ else if (t && aborts(e)) {
+ ret = [ [ "if", negate(c), e ] ];
+ if (t[0] == "block") {
+ if (t[1]) ret = ret.concat(t[1]);
+ } else {
+ ret.push(t);
+ }
+ ret = walk([ "block", ret ]);
+ }
+ return ret;
+ };
+
+ function _do_while(cond, body) {
+ return when_constant(cond, function(cond, val){
+ if (!val) {
+ warn_unreachable(body);
+ return [ "block" ];
+ } else {
+ return [ "for", null, null, null, walk(body) ];
+ }
+ });
+ };
+
+ return w.with_walkers({
+ "sub": function(expr, subscript) {
+ if (subscript[0] == "string") {
+ var name = subscript[1];
+ if (is_identifier(name))
+ return [ "dot", walk(expr), name ];
+ else if (/^[1-9][0-9]*$/.test(name) || name === "0")
+ return [ "sub", walk(expr), [ "num", parseInt(name, 10) ] ];
+ }
+ },
+ "if": make_if,
+ "toplevel": function(body) {
+ return [ "toplevel", tighten(body) ];
+ },
+ "switch": function(expr, body) {
+ var last = body.length - 1;
+ return [ "switch", walk(expr), MAP(body, function(branch, i){
+ var block = tighten(branch[1]);
+ if (i == last && block.length > 0) {
+ var node = block[block.length - 1];
+ if (node[0] == "break" && !node[1])
+ block.pop();
+ }
+ return [ branch[0] ? walk(branch[0]) : null, block ];
+ }) ];
+ },
+ "function": _lambda,
+ "defun": _lambda,
+ "block": function(body) {
+ if (body) return rmblock([ "block", tighten(body) ]);
+ },
+ "binary": function(op, left, right) {
+ return when_constant([ "binary", op, walk(left), walk(right) ], function yes(c){
+ return best_of(walk(c), this);
+ }, function no() {
+ return function(){
+ if(op != "==" && op != "!=") return;
+ var l = walk(left), r = walk(right);
+ if(l && l[0] == "unary-prefix" && l[1] == "!" && l[2][0] == "num")
+ left = ['num', +!l[2][1]];
+ else if (r && r[0] == "unary-prefix" && r[1] == "!" && r[2][0] == "num")
+ right = ['num', +!r[2][1]];
+ return ["binary", op, left, right];
+ }() || this;
+ });
+ },
+ "conditional": function(c, t, e) {
+ return make_conditional(walk(c), walk(t), walk(e));
+ },
+ "try": function(t, c, f) {
+ return [
+ "try",
+ tighten(t),
+ c != null ? [ c[0], tighten(c[1]) ] : null,
+ f != null ? tighten(f) : null
+ ];
+ },
+ "unary-prefix": function(op, expr) {
+ expr = walk(expr);
+ var ret = [ "unary-prefix", op, expr ];
+ if (op == "!")
+ ret = best_of(ret, negate(expr));
+ return when_constant(ret, function(ast, val){
+ return walk(ast); // it's either true or false, so minifies to !0 or !1
+ }, function() { return ret });
+ },
+ "name": function(name) {
+ switch (name) {
+ case "true": return [ "unary-prefix", "!", [ "num", 0 ]];
+ case "false": return [ "unary-prefix", "!", [ "num", 1 ]];
+ }
+ },
+ "while": _do_while,
+ "assign": function(op, lvalue, rvalue) {
+ lvalue = walk(lvalue);
+ rvalue = walk(rvalue);
+ var okOps = [ '+', '-', '/', '*', '%', '>>', '<<', '>>>', '|', '^', '&' ];
+ if (op === true && lvalue[0] === "name" && rvalue[0] === "binary" &&
+ ~okOps.indexOf(rvalue[1]) && rvalue[2][0] === "name" &&
+ rvalue[2][1] === lvalue[1]) {
+ return [ this[0], rvalue[1], lvalue, rvalue[3] ]
+ }
+ return [ this[0], op, lvalue, rvalue ];
+ }
+ }, function() {
+ for (var i = 0; i < 2; ++i) {
+ ast = prepare_ifs(ast);
+ ast = walk(ast);
+ }
+ return ast;
+ });
+};
+
+/* -----[ re-generate code from the AST ]----- */
+
+var DOT_CALL_NO_PARENS = jsp.array_to_hash([
+ "name",
+ "array",
+ "object",
+ "string",
+ "dot",
+ "sub",
+ "call",
+ "regexp",
+ "defun"
+]);
+
+function make_string(str, ascii_only) {
+ var dq = 0, sq = 0;
+ str = str.replace(/[\\\b\f\n\r\t\x22\x27\u2028\u2029\0]/g, function(s){
+ switch (s) {
+ case "\\": return "\\\\";
+ case "\b": return "\\b";
+ case "\f": return "\\f";
+ case "\n": return "\\n";
+ case "\r": return "\\r";
+ case "\t": return "\\t";
+ case "\u2028": return "\\u2028";
+ case "\u2029": return "\\u2029";
+ case '"': ++dq; return '"';
+ case "'": ++sq; return "'";
+ case "\0": return "\\0";
+ }
+ return s;
+ });
+ if (ascii_only) str = to_ascii(str);
+ if (dq > sq) return "'" + str.replace(/\x27/g, "\\'") + "'";
+ else return '"' + str.replace(/\x22/g, '\\"') + '"';
+};
+
+function to_ascii(str) {
+ return str.replace(/[\u0080-\uffff]/g, function(ch) {
+ var code = ch.charCodeAt(0).toString(16);
+ while (code.length < 4) code = "0" + code;
+ return "\\u" + code;
+ });
+};
+
+var SPLICE_NEEDS_BRACKETS = jsp.array_to_hash([ "if", "while", "do", "for", "for-in", "with" ]);
+
+function gen_code(ast, options) {
+ options = defaults(options, {
+ indent_start : 0,
+ indent_level : 4,
+ quote_keys : false,
+ space_colon : false,
+ beautify : false,
+ ascii_only : false,
+ inline_script: false
+ });
+ var beautify = !!options.beautify;
+ var indentation = 0,
+ newline = beautify ? "\n" : "",
+ space = beautify ? " " : "";
+
+ function encode_string(str) {
+ var ret = make_string(str, options.ascii_only);
+ if (options.inline_script)
+ ret = ret.replace(/<\x2fscript([>\/\t\n\f\r ])/gi, "<\\/script$1");
+ return ret;
+ };
+
+ function make_name(name) {
+ name = name.toString();
+ if (options.ascii_only)
+ name = to_ascii(name);
+ return name;
+ };
+
+ function indent(line) {
+ if (line == null)
+ line = "";
+ if (beautify)
+ line = repeat_string(" ", options.indent_start + indentation * options.indent_level) + line;
+ return line;
+ };
+
+ function with_indent(cont, incr) {
+ if (incr == null) incr = 1;
+ indentation += incr;
+ try { return cont.apply(null, slice(arguments, 1)); }
+ finally { indentation -= incr; }
+ };
+
+ function add_spaces(a) {
+ if (beautify)
+ return a.join(" ");
+ var b = [];
+ for (var i = 0; i < a.length; ++i) {
+ var next = a[i + 1];
+ b.push(a[i]);
+ if (next &&
+ ((/[a-z0-9_\x24]$/i.test(a[i].toString()) && /^[a-z0-9_\x24]/i.test(next.toString())) ||
+ (/[\+\-]$/.test(a[i].toString()) && /^[\+\-]/.test(next.toString())))) {
+ b.push(" ");
+ }
+ }
+ return b.join("");
+ };
+
+ function add_commas(a) {
+ return a.join("," + space);
+ };
+
+ function parenthesize(expr) {
+ var gen = make(expr);
+ for (var i = 1; i < arguments.length; ++i) {
+ var el = arguments[i];
+ if ((el instanceof Function && el(expr)) || expr[0] == el)
+ return "(" + gen + ")";
+ }
+ return gen;
+ };
+
+ function best_of(a) {
+ if (a.length == 1) {
+ return a[0];
+ }
+ if (a.length == 2) {
+ var b = a[1];
+ a = a[0];
+ return a.length <= b.length ? a : b;
+ }
+ return best_of([ a[0], best_of(a.slice(1)) ]);
+ };
+
+ function needs_parens(expr) {
+ if (expr[0] == "function" || expr[0] == "object") {
+ // dot/call on a literal function requires the
+ // function literal itself to be parenthesized
+ // only if it's the first "thing" in a
+ // statement. This means that the parent is
+ // "stat", but it could also be a "seq" and
+ // we're the first in this "seq" and the
+ // parent is "stat", and so on. Messy stuff,
+ // but it worths the trouble.
+ var a = slice(w.stack()), self = a.pop(), p = a.pop();
+ while (p) {
+ if (p[0] == "stat") return true;
+ if (((p[0] == "seq" || p[0] == "call" || p[0] == "dot" || p[0] == "sub" || p[0] == "conditional") && p[1] === self) ||
+ ((p[0] == "binary" || p[0] == "assign" || p[0] == "unary-postfix") && p[2] === self)) {
+ self = p;
+ p = a.pop();
+ } else {
+ return false;
+ }
+ }
+ }
+ return !HOP(DOT_CALL_NO_PARENS, expr[0]);
+ };
+
+ function make_num(num) {
+ var str = num.toString(10), a = [ str.replace(/^0\./, ".") ], m;
+ if (Math.floor(num) === num) {
+ if (num >= 0) {
+ a.push("0x" + num.toString(16).toLowerCase(), // probably pointless
+ "0" + num.toString(8)); // same.
+ } else {
+ a.push("-0x" + (-num).toString(16).toLowerCase(), // probably pointless
+ "-0" + (-num).toString(8)); // same.
+ }
+ if ((m = /^(.*?)(0+)$/.exec(num))) {
+ a.push(m[1] + "e" + m[2].length);
+ }
+ } else if ((m = /^0?\.(0+)(.*)$/.exec(num))) {
+ a.push(m[2] + "e-" + (m[1].length + m[2].length),
+ str.substr(str.indexOf(".")));
+ }
+ return best_of(a);
+ };
+
+ var w = ast_walker();
+ var make = w.walk;
+ return w.with_walkers({
+ "string": encode_string,
+ "num": make_num,
+ "name": make_name,
+ "toplevel": function(statements) {
+ return make_block_statements(statements)
+ .join(newline + newline);
+ },
+ "splice": function(statements) {
+ var parent = w.parent();
+ if (HOP(SPLICE_NEEDS_BRACKETS, parent)) {
+ // we need block brackets in this case
+ return make_block.apply(this, arguments);
+ } else {
+ return MAP(make_block_statements(statements, true),
+ function(line, i) {
+ // the first line is already indented
+ return i > 0 ? indent(line) : line;
+ }).join(newline);
+ }
+ },
+ "block": make_block,
+ "var": function(defs) {
+ return "var " + add_commas(MAP(defs, make_1vardef)) + ";";
+ },
+ "const": function(defs) {
+ return "const " + add_commas(MAP(defs, make_1vardef)) + ";";
+ },
+ "try": function(tr, ca, fi) {
+ var out = [ "try", make_block(tr) ];
+ if (ca) out.push("catch", "(" + ca[0] + ")", make_block(ca[1]));
+ if (fi) out.push("finally", make_block(fi));
+ return add_spaces(out);
+ },
+ "throw": function(expr) {
+ return add_spaces([ "throw", make(expr) ]) + ";";
+ },
+ "new": function(ctor, args) {
+ args = args.length > 0 ? "(" + add_commas(MAP(args, function(expr){
+ return parenthesize(expr, "seq");
+ })) + ")" : "";
+ return add_spaces([ "new", parenthesize(ctor, "seq", "binary", "conditional", "assign", function(expr){
+ var w = ast_walker(), has_call = {};
+ try {
+ w.with_walkers({
+ "call": function() { throw has_call },
+ "function": function() { return this }
+ }, function(){
+ w.walk(expr);
+ });
+ } catch(ex) {
+ if (ex === has_call)
+ return true;
+ throw ex;
+ }
+ }) + args ]);
+ },
+ "switch": function(expr, body) {
+ return add_spaces([ "switch", "(" + make(expr) + ")", make_switch_block(body) ]);
+ },
+ "break": function(label) {
+ var out = "break";
+ if (label != null)
+ out += " " + make_name(label);
+ return out + ";";
+ },
+ "continue": function(label) {
+ var out = "continue";
+ if (label != null)
+ out += " " + make_name(label);
+ return out + ";";
+ },
+ "conditional": function(co, th, el) {
+ return add_spaces([ parenthesize(co, "assign", "seq", "conditional"), "?",
+ parenthesize(th, "seq"), ":",
+ parenthesize(el, "seq") ]);
+ },
+ "assign": function(op, lvalue, rvalue) {
+ if (op && op !== true) op += "=";
+ else op = "=";
+ return add_spaces([ make(lvalue), op, parenthesize(rvalue, "seq") ]);
+ },
+ "dot": function(expr) {
+ var out = make(expr), i = 1;
+ if (expr[0] == "num") {
+ if (!/\./.test(expr[1]))
+ out += ".";
+ } else if (needs_parens(expr))
+ out = "(" + out + ")";
+ while (i < arguments.length)
+ out += "." + make_name(arguments[i++]);
+ return out;
+ },
+ "call": function(func, args) {
+ var f = make(func);
+ if (f.charAt(0) != "(" && needs_parens(func))
+ f = "(" + f + ")";
+ return f + "(" + add_commas(MAP(args, function(expr){
+ return parenthesize(expr, "seq");
+ })) + ")";
+ },
+ "function": make_function,
+ "defun": make_function,
+ "if": function(co, th, el) {
+ var out = [ "if", "(" + make(co) + ")", el ? make_then(th) : make(th) ];
+ if (el) {
+ out.push("else", make(el));
+ }
+ return add_spaces(out);
+ },
+ "for": function(init, cond, step, block) {
+ var out = [ "for" ];
+ init = (init != null ? make(init) : "").replace(/;*\s*$/, ";" + space);
+ cond = (cond != null ? make(cond) : "").replace(/;*\s*$/, ";" + space);
+ step = (step != null ? make(step) : "").replace(/;*\s*$/, "");
+ var args = init + cond + step;
+ if (args == "; ; ") args = ";;";
+ out.push("(" + args + ")", make(block));
+ return add_spaces(out);
+ },
+ "for-in": function(vvar, key, hash, block) {
+ return add_spaces([ "for", "(" +
+ (vvar ? make(vvar).replace(/;+$/, "") : make(key)),
+ "in",
+ make(hash) + ")", make(block) ]);
+ },
+ "while": function(condition, block) {
+ return add_spaces([ "while", "(" + make(condition) + ")", make(block) ]);
+ },
+ "do": function(condition, block) {
+ return add_spaces([ "do", make(block), "while", "(" + make(condition) + ")" ]) + ";";
+ },
+ "return": function(expr) {
+ var out = [ "return" ];
+ if (expr != null) out.push(make(expr));
+ return add_spaces(out) + ";";
+ },
+ "binary": function(operator, lvalue, rvalue) {
+ var left = make(lvalue), right = make(rvalue);
+ // XXX: I'm pretty sure other cases will bite here.
+ // we need to be smarter.
+ // adding parens all the time is the safest bet.
+ if (member(lvalue[0], [ "assign", "conditional", "seq" ]) ||
+ lvalue[0] == "binary" && PRECEDENCE[operator] > PRECEDENCE[lvalue[1]] ||
+ lvalue[0] == "function" && needs_parens(this)) {
+ left = "(" + left + ")";
+ }
+ if (member(rvalue[0], [ "assign", "conditional", "seq" ]) ||
+ rvalue[0] == "binary" && PRECEDENCE[operator] >= PRECEDENCE[rvalue[1]] &&
+ !(rvalue[1] == operator && member(operator, [ "&&", "||", "*" ]))) {
+ right = "(" + right + ")";
+ }
+ else if (!beautify && options.inline_script && (operator == "<" || operator == "<<")
+ && rvalue[0] == "regexp" && /^script/i.test(rvalue[1])) {
+ right = " " + right;
+ }
+ return add_spaces([ left, operator, right ]);
+ },
+ "unary-prefix": function(operator, expr) {
+ var val = make(expr);
+ if (!(expr[0] == "num" || (expr[0] == "unary-prefix" && !HOP(OPERATORS, operator + expr[1])) || !needs_parens(expr)))
+ val = "(" + val + ")";
+ return operator + (jsp.is_alphanumeric_char(operator.charAt(0)) ? " " : "") + val;
+ },
+ "unary-postfix": function(operator, expr) {
+ var val = make(expr);
+ if (!(expr[0] == "num" || (expr[0] == "unary-postfix" && !HOP(OPERATORS, operator + expr[1])) || !needs_parens(expr)))
+ val = "(" + val + ")";
+ return val + operator;
+ },
+ "sub": function(expr, subscript) {
+ var hash = make(expr);
+ if (needs_parens(expr))
+ hash = "(" + hash + ")";
+ return hash + "[" + make(subscript) + "]";
+ },
+ "object": function(props) {
+ var obj_needs_parens = needs_parens(this);
+ if (props.length == 0)
+ return obj_needs_parens ? "({})" : "{}";
+ var out = "{" + newline + with_indent(function(){
+ return MAP(props, function(p){
+ if (p.length == 3) {
+ // getter/setter. The name is in p[0], the arg.list in p[1][2], the
+ // body in p[1][3] and type ("get" / "set") in p[2].
+ return indent(make_function(p[0], p[1][2], p[1][3], p[2]));
+ }
+ var key = p[0], val = parenthesize(p[1], "seq");
+ if (options.quote_keys) {
+ key = encode_string(key);
+ } else if ((typeof key == "number" || !beautify && +key + "" == key)
+ && parseFloat(key) >= 0) {
+ key = make_num(+key);
+ } else if (!is_identifier(key)) {
+ key = encode_string(key);
+ }
+ return indent(add_spaces(beautify && options.space_colon
+ ? [ key, ":", val ]
+ : [ key + ":", val ]));
+ }).join("," + newline);
+ }) + newline + indent("}");
+ return obj_needs_parens ? "(" + out + ")" : out;
+ },
+ "regexp": function(rx, mods) {
+ return "/" + rx + "/" + mods;
+ },
+ "array": function(elements) {
+ if (elements.length == 0) return "[]";
+ return add_spaces([ "[", add_commas(MAP(elements, function(el, i){
+ if (!beautify && el[0] == "atom" && el[1] == "undefined") return i === elements.length - 1 ? "," : "";
+ return parenthesize(el, "seq");
+ })), "]" ]);
+ },
+ "stat": function(stmt) {
+ return make(stmt).replace(/;*\s*$/, ";");
+ },
+ "seq": function() {
+ return add_commas(MAP(slice(arguments), make));
+ },
+ "label": function(name, block) {
+ return add_spaces([ make_name(name), ":", make(block) ]);
+ },
+ "with": function(expr, block) {
+ return add_spaces([ "with", "(" + make(expr) + ")", make(block) ]);
+ },
+ "atom": function(name) {
+ return make_name(name);
+ }
+ }, function(){ return make(ast) });
+
+ // The squeezer replaces "block"-s that contain only a single
+ // statement with the statement itself; technically, the AST
+ // is correct, but this can create problems when we output an
+ // IF having an ELSE clause where the THEN clause ends in an
+ // IF *without* an ELSE block (then the outer ELSE would refer
+ // to the inner IF). This function checks for this case and
+ // adds the block brackets if needed.
+ function make_then(th) {
+ if (th == null) return ";";
+ if (th[0] == "do") {
+ // https://github.com/mishoo/UglifyJS/issues/#issue/57
+ // IE croaks with "syntax error" on code like this:
+ // if (foo) do ... while(cond); else ...
+ // we need block brackets around do/while
+ return make_block([ th ]);
+ }
+ var b = th;
+ while (true) {
+ var type = b[0];
+ if (type == "if") {
+ if (!b[3])
+ // no else, we must add the block
+ return make([ "block", [ th ]]);
+ b = b[3];
+ }
+ else if (type == "while" || type == "do") b = b[2];
+ else if (type == "for" || type == "for-in") b = b[4];
+ else break;
+ }
+ return make(th);
+ };
+
+ function make_function(name, args, body, keyword) {
+ var out = keyword || "function";
+ if (name) {
+ out += " " + make_name(name);
+ }
+ out += "(" + add_commas(MAP(args, make_name)) + ")";
+ out = add_spaces([ out, make_block(body) ]);
+ return needs_parens(this) ? "(" + out + ")" : out;
+ };
+
+ function must_has_semicolon(node) {
+ switch (node[0]) {
+ case "with":
+ case "while":
+ return empty(node[2]); // `with' or `while' with empty body?
+ case "for":
+ case "for-in":
+ return empty(node[4]); // `for' with empty body?
+ case "if":
+ if (empty(node[2]) && !node[3]) return true; // `if' with empty `then' and no `else'
+ if (node[3]) {
+ if (empty(node[3])) return true; // `else' present but empty
+ return must_has_semicolon(node[3]); // dive into the `else' branch
+ }
+ return must_has_semicolon(node[2]); // dive into the `then' branch
+ }
+ };
+
+ function make_block_statements(statements, noindent) {
+ for (var a = [], last = statements.length - 1, i = 0; i <= last; ++i) {
+ var stat = statements[i];
+ var code = make(stat);
+ if (code != ";") {
+ if (!beautify && i == last && !must_has_semicolon(stat)) {
+ code = code.replace(/;+\s*$/, "");
+ }
+ a.push(code);
+ }
+ }
+ return noindent ? a : MAP(a, indent);
+ };
+
+ function make_switch_block(body) {
+ var n = body.length;
+ if (n == 0) return "{}";
+ return "{" + newline + MAP(body, function(branch, i){
+ var has_body = branch[1].length > 0, code = with_indent(function(){
+ return indent(branch[0]
+ ? add_spaces([ "case", make(branch[0]) + ":" ])
+ : "default:");
+ }, 0.5) + (has_body ? newline + with_indent(function(){
+ return make_block_statements(branch[1]).join(newline);
+ }) : "");
+ if (!beautify && has_body && i < n - 1)
+ code += ";";
+ return code;
+ }).join(newline) + newline + indent("}");
+ };
+
+ function make_block(statements) {
+ if (!statements) return ";";
+ if (statements.length == 0) return "{}";
+ return "{" + newline + with_indent(function(){
+ return make_block_statements(statements).join(newline);
+ }) + newline + indent("}");
+ };
+
+ function make_1vardef(def) {
+ var name = def[0], val = def[1];
+ if (val != null)
+ name = add_spaces([ make_name(name), "=", parenthesize(val, "seq") ]);
+ return name;
+ };
+
+};
+
+function split_lines(code, max_line_length) {
+ var splits = [ 0 ];
+ jsp.parse(function(){
+ var next_token = jsp.tokenizer(code);
+ var last_split = 0;
+ var prev_token;
+ function current_length(tok) {
+ return tok.pos - last_split;
+ };
+ function split_here(tok) {
+ last_split = tok.pos;
+ splits.push(last_split);
+ };
+ function custom(){
+ var tok = next_token.apply(this, arguments);
+ out: {
+ if (prev_token) {
+ if (prev_token.type == "keyword") break out;
+ }
+ if (current_length(tok) > max_line_length) {
+ switch (tok.type) {
+ case "keyword":
+ case "atom":
+ case "name":
+ case "punc":
+ split_here(tok);
+ break out;
+ }
+ }
+ }
+ prev_token = tok;
+ return tok;
+ };
+ custom.context = function() {
+ return next_token.context.apply(this, arguments);
+ };
+ return custom;
+ }());
+ return splits.map(function(pos, i){
+ return code.substring(pos, splits[i + 1] || code.length);
+ }).join("\n");
+};
+
+/* -----[ Utilities ]----- */
+
+function repeat_string(str, i) {
+ if (i <= 0) return "";
+ if (i == 1) return str;
+ var d = repeat_string(str, i >> 1);
+ d += d;
+ if (i & 1) d += str;
+ return d;
+};
+
+function defaults(args, defs) {
+ var ret = {};
+ if (args === true)
+ args = {};
+ for (var i in defs) if (HOP(defs, i)) {
+ ret[i] = (args && HOP(args, i)) ? args[i] : defs[i];
+ }
+ return ret;
+};
+
+function is_identifier(name) {
+ return /^[a-z_$][a-z0-9_$]*$/i.test(name)
+ && name != "this"
+ && !HOP(jsp.KEYWORDS_ATOM, name)
+ && !HOP(jsp.RESERVED_WORDS, name)
+ && !HOP(jsp.KEYWORDS, name);
+};
+
+function HOP(obj, prop) {
+ return Object.prototype.hasOwnProperty.call(obj, prop);
+};
+
+// some utilities
+
+var MAP;
+
+(function(){
+ MAP = function(a, f, o) {
+ var ret = [], top = [], i;
+ function doit() {
+ var val = f.call(o, a[i], i);
+ if (val instanceof AtTop) {
+ val = val.v;
+ if (val instanceof Splice) {
+ top.push.apply(top, val.v);
+ } else {
+ top.push(val);
+ }
+ }
+ else if (val != skip) {
+ if (val instanceof Splice) {
+ ret.push.apply(ret, val.v);
+ } else {
+ ret.push(val);
+ }
+ }
+ };
+ if (a instanceof Array) for (i = 0; i < a.length; ++i) doit();
+ else for (i in a) if (HOP(a, i)) doit();
+ return top.concat(ret);
+ };
+ MAP.at_top = function(val) { return new AtTop(val) };
+ MAP.splice = function(val) { return new Splice(val) };
+ var skip = MAP.skip = {};
+ function AtTop(val) { this.v = val };
+ function Splice(val) { this.v = val };
+})();
+
+/* -----[ Exports ]----- */
+
+exports.ast_walker = ast_walker;
+exports.ast_mangle = ast_mangle;
+exports.ast_squeeze = ast_squeeze;
+exports.ast_lift_variables = ast_lift_variables;
+exports.gen_code = gen_code;
+exports.ast_add_scope = ast_add_scope;
+exports.set_logger = function(logger) { warn = logger };
+exports.make_string = make_string;
+exports.split_lines = split_lines;
+exports.MAP = MAP;
+
+// keep this last!
+exports.ast_squeeze_more = require("./squeeze-more").ast_squeeze_more;
+
+});define('uglifyjs/index', ["require", "exports", "module", "./parse-js", "./process"], function(require, exports, module) {
+
+//convienence function(src, [options]);
+function uglify(orig_code, options){
+ options || (options = {});
+ var jsp = uglify.parser;
+ var pro = uglify.uglify;
+
+ var ast = jsp.parse(orig_code, options.strict_semicolons); // parse code and get the initial AST
+ ast = pro.ast_mangle(ast, options.mangle_options); // get a new AST with mangled names
+ ast = pro.ast_squeeze(ast, options.squeeze_options); // get an AST with compression optimizations
+ var final_code = pro.gen_code(ast, options.gen_options); // compressed code here
+ return final_code;
+};
+
+uglify.parser = require("./parse-js");
+uglify.uglify = require("./process");
+
+module.exports = uglify
+
+});/**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint plusplus: false, strict: false */
+/*global define: false */
+
+define('parse', ['./uglifyjs/index'], function (uglify) {
+ var parser = uglify.parser,
+ processor = uglify.uglify,
+ ostring = Object.prototype.toString,
+ isArray;
+
+ if (Array.isArray) {
+ isArray = Array.isArray;
+ } else {
+ isArray = function (it) {
+ return ostring.call(it) === "[object Array]";
+ };
+ }
+
+ /**
+ * Determines if the AST node is an array literal
+ */
+ function isArrayLiteral(node) {
+ return node[0] === 'array';
+ }
+
+ /**
+ * Determines if the AST node is an object literal
+ */
+ function isObjectLiteral(node) {
+ return node[0] === 'object';
+ }
+
+ /**
+ * Converts a regular JS array of strings to an AST node that
+ * represents that array.
+ * @param {Array} ary
+ * @param {Node} an AST node that represents an array of strings.
+ */
+ function toAstArray(ary) {
+ var output = [
+ 'array',
+ []
+ ],
+ i, item;
+
+ for (i = 0; (item = ary[i]); i++) {
+ output[1].push([
+ 'string',
+ item
+ ]);
+ }
+
+ return output;
+ }
+
+ /**
+ * Validates a node as being an object literal (like for i18n bundles)
+ * or an array literal with just string members. If an array literal,
+ * only return array members that are full strings. So the caller of
+ * this function should use the return value as the new value for the
+ * node.
+ *
+ * This function does not need to worry about comments, they are not
+ * present in this AST.
+ *
+ * @param {Node} node an AST node.
+ *
+ * @returns {Node} an AST node to use for the valid dependencies.
+ * If null is returned, then it means the input node was not a valid
+ * dependency.
+ */
+ function validateDeps(node) {
+ var newDeps = ['array', []],
+ arrayArgs, i, dep;
+
+ if (!node) {
+ return null;
+ }
+
+ if (isObjectLiteral(node) || node[0] === 'function') {
+ return node;
+ }
+
+ //Dependencies can be an object literal or an array.
+ if (!isArrayLiteral(node)) {
+ return null;
+ }
+
+ arrayArgs = node[1];
+
+ for (i = 0; i < arrayArgs.length; i++) {
+ dep = arrayArgs[i];
+ if (dep[0] === 'string') {
+ newDeps[1].push(dep);
+ }
+ }
+ return newDeps[1].length ? newDeps : null;
+ }
+
+ /**
+ * Gets dependencies from a node, but only if it is an array literal,
+ * and only if the dependency is a string literal.
+ *
+ * This function does not need to worry about comments, they are not
+ * present in this AST.
+ *
+ * @param {Node} node an AST node.
+ *
+ * @returns {Array} of valid dependencies.
+ * If null is returned, then it means the input node was not a valid
+ * array literal, or did not have any string literals..
+ */
+ function getValidDeps(node) {
+ var newDeps = [],
+ arrayArgs, i, dep;
+
+ if (!node) {
+ return null;
+ }
+
+ if (isObjectLiteral(node) || node[0] === 'function') {
+ return null;
+ }
+
+ //Dependencies can be an object literal or an array.
+ if (!isArrayLiteral(node)) {
+ return null;
+ }
+
+ arrayArgs = node[1];
+
+ for (i = 0; i < arrayArgs.length; i++) {
+ dep = arrayArgs[i];
+ if (dep[0] === 'string') {
+ newDeps.push(dep[1]);
+ }
+ }
+ return newDeps.length ? newDeps : null;
+ }
+
+ /**
+ * Main parse function. Returns a string of any valid require or define/require.def
+ * calls as part of one JavaScript source string.
+ * @param {String} moduleName the module name that represents this file.
+ * It is used to create a default define if there is not one already for the file.
+ * This allows properly tracing dependencies for builds. Otherwise, if
+ * the file just has a require() call, the file dependencies will not be
+ * properly reflected: the file will come before its dependencies.
+ * @param {String} moduleName
+ * @param {String} fileName
+ * @param {String} fileContents
+ * @param {Object} options optional options. insertNeedsDefine: true will
+ * add calls to require.needsDefine() if appropriate.
+ * @returns {String} JS source string or null, if no require or define/require.def
+ * calls are found.
+ */
+ function parse(moduleName, fileName, fileContents, options) {
+ options = options || {};
+
+ //Set up source input
+ var moduleDeps = [],
+ result = '',
+ moduleList = [],
+ needsDefine = true,
+ astRoot = parser.parse(fileContents),
+ i, moduleCall, depString;
+
+ parse.recurse(astRoot, function (callName, config, name, deps) {
+ //If name is an array, it means it is an anonymous module,
+ //so adjust args appropriately. An anonymous module could
+ //have a FUNCTION as the name type, but just ignore those
+ //since we just want to find dependencies.
+ if (name && isArrayLiteral(name)) {
+ deps = name;
+ name = null;
+ }
+
+ if (!(deps = getValidDeps(deps))) {
+ deps = [];
+ }
+
+ //Get the name as a string literal, if it is available.
+ if (name && name[0] === 'string') {
+ name = name[1];
+ } else {
+ name = null;
+ }
+
+ if (callName === 'define' && (!name || name === moduleName)) {
+ needsDefine = false;
+ }
+
+ if (!name) {
+ //If there is no module name, the dependencies are for
+ //this file/default module name.
+ moduleDeps = moduleDeps.concat(deps);
+ } else {
+ moduleList.push({
+ name: name,
+ deps: deps
+ });
+ }
+
+ //If define was found, no need to dive deeper, unless
+ //the config explicitly wants to dig deeper.
+ return !options.findNestedDependencies;
+ }, options);
+
+ if (options.insertNeedsDefine && needsDefine) {
+ result += 'require.needsDefine("' + moduleName + '");';
+ }
+
+ if (moduleDeps.length || moduleList.length) {
+ for (i = 0; (moduleCall = moduleList[i]); i++) {
+ if (result) {
+ result += '\n';
+ }
+
+ //If this is the main module for this file, combine any
+ //"anonymous" dependencies (could come from a nested require
+ //call) with this module.
+ if (moduleCall.name === moduleName) {
+ moduleCall.deps = moduleCall.deps.concat(moduleDeps);
+ moduleDeps = [];
+ }
+
+ depString = moduleCall.deps.length ? '["' + moduleCall.deps.join('","') + '"]' : '[]';
+ result += 'define("' + moduleCall.name + '",' + depString + ');';
+ }
+ if (moduleDeps.length) {
+ if (result) {
+ result += '\n';
+ }
+ depString = moduleDeps.length ? '["' + moduleDeps.join('","') + '"]' : '[]';
+ result += 'define("' + moduleName + '",' + depString + ');';
+ }
+ }
+
+ return result ? result : null;
+ }
+
+ //Add some private methods to object for use in derived objects.
+ parse.isArray = isArray;
+ parse.isObjectLiteral = isObjectLiteral;
+ parse.isArrayLiteral = isArrayLiteral;
+
+ /**
+ * Handles parsing a file recursively for require calls.
+ * @param {Array} parentNode the AST node to start with.
+ * @param {Function} onMatch function to call on a parse match.
+ * @param {Object} [options] This is normally the build config options if
+ * it is passed.
+ * @param {Function} [recurseCallback] function to call on each valid
+ * node, defaults to parse.parseNode.
+ */
+ parse.recurse = function (parentNode, onMatch, options, recurseCallback) {
+ var hasHas = options && options.has,
+ i, node;
+
+ recurseCallback = recurseCallback || this.parseNode;
+
+ if (isArray(parentNode)) {
+ for (i = 0; i < parentNode.length; i++) {
+ node = parentNode[i];
+ if (isArray(node)) {
+ //If has config is in play, if calls have been converted
+ //by this point to be true/false values. So, if
+ //options has a 'has' value, skip if branches that have
+ //literal false values.
+
+ //uglify returns if constructs in an array:
+ //[0]: 'if'
+ //[1]: the condition, ['name', true | false] for the has replaced case.
+ //[2]: the block to process if true
+ //[3]: the block to process if false
+ //For if/else if/else, the else if is in the [3],
+ //so only ever have to deal with this structure.
+ if (hasHas && node[0] === 'if' && node[1] && node[1][0] === 'name' &&
+ (node[1][1] === 'true' || node[1][1] === 'false')) {
+ if (node[1][1] === 'true') {
+ this.recurse([node[2]], onMatch, options, recurseCallback);
+ } else {
+ this.recurse([node[3]], onMatch, options, recurseCallback);
+ }
+ } else {
+ if (recurseCallback(node, onMatch)) {
+ //The onMatch indicated parsing should
+ //stop for children of this node.
+ continue;
+ }
+ this.recurse(node, onMatch, options, recurseCallback);
+ }
+ }
+ }
+ }
+ };
+
+ /**
+ * Determines if the file defines require().
+ * @param {String} fileName
+ * @param {String} fileContents
+ * @returns {Boolean}
+ */
+ parse.definesRequire = function (fileName, fileContents) {
+ var astRoot = parser.parse(fileContents);
+ return this.nodeHasRequire(astRoot);
+ };
+
+ /**
+ * Finds require("") calls inside a CommonJS anonymous module wrapped in a
+ * define(function(require, exports, module){}) wrapper. These dependencies
+ * will be added to a modified define() call that lists the dependencies
+ * on the outside of the function.
+ * @param {String} fileName
+ * @param {String} fileContents
+ * @returns {Array} an array of module names that are dependencies. Always
+ * returns an array, but could be of length zero.
+ */
+ parse.getAnonDeps = function (fileName, fileContents) {
+ var astRoot = parser.parse(fileContents),
+ defFunc = this.findAnonDefineFactory(astRoot);
+
+ return parse.getAnonDepsFromNode(defFunc);
+ };
+
+ /**
+ * Finds require("") calls inside a CommonJS anonymous module wrapped
+ * in a define function, given an AST node for the definition function.
+ * @param {Node} node the AST node for the definition function.
+ * @returns {Array} and array of dependency names. Can be of zero length.
+ */
+ parse.getAnonDepsFromNode = function (node) {
+ var deps = [],
+ funcArgLength;
+
+ if (node) {
+ this.findRequireDepNames(node, deps);
+
+ //If no deps, still add the standard CommonJS require, exports, module,
+ //in that order, to the deps, but only if specified as function args.
+ //In particular, if exports is used, it is favored over the return
+ //value of the function, so only add it if asked.
+ funcArgLength = node[2] && node[2].length;
+ if (funcArgLength) {
+ deps = (funcArgLength > 1 ? ["require", "exports", "module"] :
+ ["require"]).concat(deps);
+ }
+ }
+ return deps;
+ };
+
+ /**
+ * Finds the function in define(function (require, exports, module){});
+ * @param {Array} node
+ * @returns {Boolean}
+ */
+ parse.findAnonDefineFactory = function (node) {
+ var callback, i, n, call, args;
+
+ if (isArray(node)) {
+ if (node[0] === 'call') {
+ call = node[1];
+ args = node[2];
+ if ((call[0] === 'name' && call[1] === 'define') ||
+ (call[0] === 'dot' && call[1][1] === 'require' && call[2] === 'def')) {
+
+ //There should only be one argument and it should be a function,
+ //or a named module with function as second arg
+ if (args.length === 1 && args[0][0] === 'function') {
+ return args[0];
+ } else if (args.length === 2 && args[0][0] === 'string' &&
+ args[1][0] === 'function') {
+ return args[1];
+ }
+ }
+ }
+
+ //Check child nodes
+ for (i = 0; i < node.length; i++) {
+ n = node[i];
+ if ((callback = this.findAnonDefineFactory(n))) {
+ return callback;
+ }
+ }
+ }
+
+ return null;
+ };
+
+ /**
+ * Finds any config that is passed to requirejs.
+ * @param {String} fileName
+ * @param {String} fileContents
+ *
+ * @returns {Object} a config object. Will be null if no config.
+ * Can throw an error if the config in the file cannot be evaluated in
+ * a build context to valid JavaScript.
+ */
+ parse.findConfig = function (fileName, fileContents) {
+ /*jslint evil: true */
+ //This is a litle bit inefficient, it ends up with two uglifyjs parser
+ //calls. Can revisit later, but trying to build out larger functional
+ //pieces first.
+ var foundConfig = null,
+ astRoot = parser.parse(fileContents);
+
+ parse.recurse(astRoot, function (configNode) {
+ var jsConfig;
+
+ if (!foundConfig && configNode) {
+ jsConfig = parse.nodeToString(configNode);
+ foundConfig = eval('(' + jsConfig + ')');
+ return foundConfig;
+ }
+ return undefined;
+ }, null, parse.parseConfigNode);
+
+ return foundConfig;
+ };
+
+ /**
+ * Finds all dependencies specified in dependency arrays and inside
+ * simplified commonjs wrappers.
+ * @param {String} fileName
+ * @param {String} fileContents
+ *
+ * @returns {Array} an array of dependency strings. The dependencies
+ * have not been normalized, they may be relative IDs.
+ */
+ parse.findDependencies = function (fileName, fileContents, options) {
+ //This is a litle bit inefficient, it ends up with two uglifyjs parser
+ //calls. Can revisit later, but trying to build out larger functional
+ //pieces first.
+ var dependencies = [],
+ astRoot = parser.parse(fileContents);
+
+ parse.recurse(astRoot, function (callName, config, name, deps) {
+ //Normalize the input args.
+ if (name && isArrayLiteral(name)) {
+ deps = name;
+ name = null;
+ }
+
+ if ((deps = getValidDeps(deps))) {
+ dependencies = dependencies.concat(deps);
+ }
+ }, options);
+
+ return dependencies;
+ };
+
+ /**
+ * Finds only CJS dependencies, ones that are the form require('stringLiteral')
+ */
+ parse.findCjsDependencies = function (fileName, fileContents, options) {
+ //This is a litle bit inefficient, it ends up with two uglifyjs parser
+ //calls. Can revisit later, but trying to build out larger functional
+ //pieces first.
+ var dependencies = [],
+ astRoot = parser.parse(fileContents);
+
+ parse.recurse(astRoot, function (dep) {
+ dependencies.push(dep);
+ }, options, function (node, onMatch) {
+
+ var call, args;
+
+ if (!isArray(node)) {
+ return false;
+ }
+
+ if (node[0] === 'call') {
+ call = node[1];
+ args = node[2];
+
+ if (call) {
+ //A require('') use.
+ if (call[0] === 'name' && call[1] === 'require' &&
+ args[0][0] === 'string') {
+ return onMatch(args[0][1]);
+ }
+ }
+ }
+
+ return false;
+
+ });
+
+ return dependencies;
+ };
+
+ /**
+ * Determines if define(), require({}|[]) or requirejs was called in the
+ * file. Also finds out if define() is declared and if define.amd is called.
+ */
+ parse.usesAmdOrRequireJs = function (fileName, fileContents, options) {
+ var astRoot = parser.parse(fileContents),
+ uses;
+
+ parse.recurse(astRoot, function (prop) {
+ if (!uses) {
+ uses = {};
+ }
+ uses[prop] = true;
+ }, options, parse.findAmdOrRequireJsNode);
+
+ return uses;
+ };
+
+ /**
+ * Determines if require(''), exports.x =, module.exports =,
+ * __dirname, __filename are used. So, not strictly traditional CommonJS,
+ * also checks for Node variants.
+ */
+ parse.usesCommonJs = function (fileName, fileContents, options) {
+ var uses = null,
+ assignsExports = false,
+ astRoot = parser.parse(fileContents);
+
+ parse.recurse(astRoot, function (prop) {
+ if (prop === 'varExports') {
+ assignsExports = true;
+ } else if (prop !== 'exports' || !assignsExports) {
+ if (!uses) {
+ uses = {};
+ }
+ uses[prop] = true;
+ }
+ }, options, function (node, onMatch) {
+
+ var call, args;
+
+ if (!isArray(node)) {
+ return false;
+ }
+
+ if (node[0] === 'name' && (node[1] === '__dirname' || node[1] === '__filename')) {
+ return onMatch(node[1].substring(2));
+ } else if (node[0] === 'var' && node[1] && node[1][0] && node[1][0][0] === 'exports') {
+ //Hmm, a variable assignment for exports, so does not use cjs exports.
+ return onMatch('varExports');
+ } else if (node[0] === 'assign' && node[2] && node[2][0] === 'dot') {
+ args = node[2][1];
+
+ if (args) {
+ //An exports or module.exports assignment.
+ if (args[0] === 'name' && args[1] === 'module' &&
+ node[2][2] === 'exports') {
+ return onMatch('moduleExports');
+ } else if (args[0] === 'name' && args[1] === 'exports') {
+ return onMatch('exports');
+ }
+ }
+ } else if (node[0] === 'call') {
+ call = node[1];
+ args = node[2];
+
+ if (call) {
+ //A require('') use.
+ if (call[0] === 'name' && call[1] === 'require' &&
+ args[0][0] === 'string') {
+ return onMatch('require');
+ }
+ }
+ }
+
+ return false;
+
+ });
+
+ return uses;
+ };
+
+
+ parse.findRequireDepNames = function (node, deps) {
+ var moduleName, i, n, call, args;
+
+ if (isArray(node)) {
+ if (node[0] === 'call') {
+ call = node[1];
+ args = node[2];
+
+ if (call && call[0] === 'name' && call[1] === 'require') {
+ moduleName = args[0];
+ if (moduleName[0] === 'string') {
+ deps.push(moduleName[1]);
+ }
+ }
+
+
+ }
+
+ //Check child nodes
+ for (i = 0; i < node.length; i++) {
+ n = node[i];
+ this.findRequireDepNames(n, deps);
+ }
+ }
+ };
+
+ /**
+ * Determines if a given node contains a require() definition.
+ * @param {Array} node
+ * @returns {Boolean}
+ */
+ parse.nodeHasRequire = function (node) {
+ if (this.isDefineNode(node)) {
+ return true;
+ }
+
+ if (isArray(node)) {
+ for (var i = 0, n; i < node.length; i++) {
+ n = node[i];
+ if (this.nodeHasRequire(n)) {
+ return true;
+ }
+ }
+ }
+
+ return false;
+ };
+
+ /**
+ * Is the given node the actual definition of define(). Actually uses
+ * the definition of define.amd to find require.
+ * @param {Array} node
+ * @returns {Boolean}
+ */
+ parse.isDefineNode = function (node) {
+ //Actually look for the define.amd = assignment, since
+ //that is more indicative of RequireJS vs a plain require definition.
+ var assign;
+ if (!node) {
+ return null;
+ }
+
+ if (node[0] === 'assign' && node[1] === true) {
+ assign = node[2];
+ if (assign[0] === 'dot' && assign[1][0] === 'name' &&
+ assign[1][1] === 'define' && assign[2] === 'amd') {
+ return true;
+ }
+ }
+ return false;
+ };
+
+ /**
+ * Determines if a specific node is a valid require or define/require.def call.
+ * @param {Array} node
+ * @param {Function} onMatch a function to call when a match is found.
+ * It is passed the match name, and the config, name, deps possible args.
+ * The config, name and deps args are not normalized.
+ *
+ * @returns {String} a JS source string with the valid require/define call.
+ * Otherwise null.
+ */
+ parse.parseNode = function (node, onMatch) {
+ var call, name, config, deps, args, cjsDeps;
+
+ if (!isArray(node)) {
+ return false;
+ }
+
+ if (node[0] === 'call') {
+ call = node[1];
+ args = node[2];
+
+ if (call) {
+ if (call[0] === 'name' &&
+ (call[1] === 'require' || call[1] === 'requirejs')) {
+
+ //It is a plain require() call.
+ config = args[0];
+ deps = args[1];
+ if (isArrayLiteral(config)) {
+ deps = config;
+ config = null;
+ }
+
+ if (!(deps = validateDeps(deps))) {
+ return null;
+ }
+
+ return onMatch("require", null, null, deps);
+
+ } else if (call[0] === 'name' && call[1] === 'define') {
+
+ //A define call
+ name = args[0];
+ deps = args[1];
+ //Only allow define calls that match what is expected
+ //in an AMD call:
+ //* first arg should be string, array, function or object
+ //* second arg optional, or array, function or object.
+ //This helps weed out calls to a non-AMD define, but it is
+ //not completely robust. Someone could create a define
+ //function that still matches this shape, but this is the
+ //best that is possible, and at least allows UglifyJS,
+ //which does create its own internal define in one file,
+ //to be inlined.
+ if (((name[0] === 'string' || isArrayLiteral(name) ||
+ name[0] === 'function' || isObjectLiteral(name))) &&
+ (!deps || isArrayLiteral(deps) ||
+ deps[0] === 'function' || isObjectLiteral(deps) ||
+ // allow define(['dep'], factory) pattern
+ (isArrayLiteral(name) && deps[0] === 'name' && args.length === 2))) {
+
+ //If first arg is a function, could be a commonjs wrapper,
+ //look inside for commonjs dependencies.
+ //Also, if deps is a function look for commonjs deps.
+ if (name && name[0] === 'function') {
+ cjsDeps = parse.getAnonDepsFromNode(name);
+ if (cjsDeps.length) {
+ name = toAstArray(cjsDeps);
+ }
+ } else if (deps && deps[0] === 'function') {
+ cjsDeps = parse.getAnonDepsFromNode(deps);
+ if (cjsDeps.length) {
+ deps = toAstArray(cjsDeps);
+ }
+ }
+
+ return onMatch("define", null, name, deps);
+ }
+ }
+ }
+ }
+
+ return false;
+ };
+
+ /**
+ * Looks for define(), require({} || []), requirejs({} || []) calls.
+ */
+ parse.findAmdOrRequireJsNode = function (node, onMatch) {
+ var call, args, configNode, type;
+
+ if (!isArray(node)) {
+ return false;
+ }
+
+ if (node[0] === 'defun' && node[1] === 'define') {
+ type = 'declaresDefine';
+ } else if (node[0] === 'assign' && node[2] && node[2][2] === 'amd' &&
+ node[2][1] && node[2][1][0] === 'name' &&
+ node[2][1][1] === 'define') {
+ type = 'defineAmd';
+ } else if (node[0] === 'call') {
+ call = node[1];
+ args = node[2];
+
+ if (call) {
+ if ((call[0] === 'dot' &&
+ (call[1] && call[1][0] === 'name' &&
+ (call[1][1] === 'require' || call[1][1] === 'requirejs')) &&
+ call[2] === 'config')) {
+ //A require.config() or requirejs.config() call.
+ type = call[1][1] + 'Config';
+ } else if (call[0] === 'name' &&
+ (call[1] === 'require' || call[1] === 'requirejs')) {
+ //A require() or requirejs() config call.
+ //Only want ones that start with an object or an array.
+ configNode = args[0];
+ if (configNode[0] === 'object' || configNode[0] === 'array') {
+ type = call[1];
+ }
+ } else if (call[0] === 'name' && call[1] === 'define') {
+ //A define call.
+ type = 'define';
+ }
+ }
+ }
+
+ if (type) {
+ return onMatch(type);
+ }
+
+ return false;
+ };
+
+ /**
+ * Determines if a specific node is a valid require/requirejs config
+ * call. That includes calls to require/requirejs.config().
+ * @param {Array} node
+ * @param {Function} onMatch a function to call when a match is found.
+ * It is passed the match name, and the config, name, deps possible args.
+ * The config, name and deps args are not normalized.
+ *
+ * @returns {String} a JS source string with the valid require/define call.
+ * Otherwise null.
+ */
+ parse.parseConfigNode = function (node, onMatch) {
+ var call, configNode, args;
+
+ if (!isArray(node)) {
+ return false;
+ }
+
+ if (node[0] === 'call') {
+ call = node[1];
+ args = node[2];
+
+ if (call) {
+ //A require.config() or requirejs.config() call.
+ if ((call[0] === 'dot' &&
+ (call[1] && call[1][0] === 'name' &&
+ (call[1][1] === 'require' || call[1][1] === 'requirejs')) &&
+ call[2] === 'config') ||
+ //A require() or requirejs() config call.
+
+ (call[0] === 'name' &&
+ (call[1] === 'require' || call[1] === 'requirejs'))
+ ) {
+ //It is a plain require() call.
+ configNode = args[0];
+
+ if (configNode[0] !== 'object') {
+ return null;
+ }
+
+ return onMatch(configNode);
+
+ }
+ }
+ }
+
+ return false;
+ };
+
+ /**
+ * Converts an AST node into a JS source string. Does not maintain formatting
+ * or even comments from original source, just returns valid JS source.
+ * @param {Array} node
+ * @returns {String} a JS source string.
+ */
+ parse.nodeToString = function (node) {
+ return processor.gen_code(node, true);
+ };
+
+ return parse;
+});
+/**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint regexp: false, strict: false, plusplus: false */
+/*global define: false */
+
+define('pragma', ['parse', 'logger'], function (parse, logger) {
+
+ function Temp() {}
+
+ function create(obj, mixin) {
+ Temp.prototype = obj;
+ var temp = new Temp(), prop;
+
+ //Avoid any extra memory hanging around
+ Temp.prototype = null;
+
+ if (mixin) {
+ for (prop in mixin) {
+ if (mixin.hasOwnProperty(prop) && !(prop in temp)) {
+ temp[prop] = mixin[prop];
+ }
+ }
+ }
+
+ return temp; // Object
+ }
+
+ var pragma = {
+ conditionalRegExp: /(exclude|include)Start\s*\(\s*["'](\w+)["']\s*,(.*)\)/,
+ useStrictRegExp: /['"]use strict['"];/g,
+ hasRegExp: /has\s*\(\s*['"]([^'"]+)['"]\s*\)/g,
+ nsRegExp: /(^|[^\.])(requirejs|require|define)\s*\(/,
+ nsWrapRegExp: /\/\*requirejs namespace: true \*\//,
+ apiDefRegExp: /var requirejs, require, define;/,
+ defineCheckRegExp: /typeof\s+define\s*===\s*["']function["']\s*&&\s*define\s*\.\s*amd/g,
+ defineJQueryRegExp: /typeof\s+define\s*===\s*["']function["']\s*&&\s*define\s*\.\s*amd\s*&&\s*define\s*\.\s*amd\s*\.\s*jQuery/g,
+ defineHasRegExp: /typeof\s+define\s*==(=)?\s*['"]function['"]\s*&&\s*typeof\s+define\.amd\s*==(=)?\s*['"]object['"]\s*&&\s*define\.amd/g,
+ defineTernaryRegExp: /typeof\s+define\s*===\s*['"]function["']\s*&&\s*define\s*\.\s*amd\s*\?\s*define/,
+ amdefineRegExp: /if\s*\(\s*typeof define\s*\!==\s*'function'\s*\)\s*\{\s*[^\{\}]+amdefine[^\{\}]+\}/g,
+
+ removeStrict: function (contents, config) {
+ return config.useStrict ? contents : contents.replace(pragma.useStrictRegExp, '');
+ },
+
+ namespace: function (fileContents, ns, onLifecycleName) {
+ if (ns) {
+ //Namespace require/define calls
+ fileContents = fileContents.replace(pragma.nsRegExp, '$1' + ns + '.$2(');
+
+ //Namespace define ternary use:
+ fileContents = fileContents.replace(pragma.defineTernaryRegExp,
+ "typeof " + ns + ".define === 'function' && " + ns + ".define.amd ? " + ns + ".define");
+
+ //Namespace define jquery use:
+ fileContents = fileContents.replace(pragma.defineJQueryRegExp,
+ "typeof " + ns + ".define === 'function' && " + ns + ".define.amd && " + ns + ".define.amd.jQuery");
+
+ //Namespace has.js define use:
+ fileContents = fileContents.replace(pragma.defineHasRegExp,
+ "typeof " + ns + ".define === 'function' && typeof " + ns + ".define.amd === 'object' && " + ns + ".define.amd");
+
+ //Namespace define checks.
+ //Do this one last, since it is a subset of the more specific
+ //checks above.
+ fileContents = fileContents.replace(pragma.defineCheckRegExp,
+ "typeof " + ns + ".define === 'function' && " + ns + ".define.amd");
+
+ //Check for require.js with the require/define definitions
+ if (pragma.apiDefRegExp.test(fileContents) &&
+ fileContents.indexOf("if (typeof " + ns + " === 'undefined')") === -1) {
+ //Wrap the file contents in a typeof check, and a function
+ //to contain the API globals.
+ fileContents = "var " + ns + ";(function () { if (typeof " +
+ ns + " === 'undefined') {\n" +
+ ns + ' = {};\n' +
+ fileContents +
+ "\n" +
+ ns + ".requirejs = requirejs;" +
+ ns + ".require = require;" +
+ ns + ".define = define;\n" +
+ "}\n}());";
+ }
+
+ //Finally, if the file wants a special wrapper because it ties
+ //in to the requirejs internals in a way that would not fit
+ //the above matches, do that. Look for /*requirejs namespace: true*/
+ if (pragma.nsWrapRegExp.test(fileContents)) {
+ //Remove the pragma.
+ fileContents = fileContents.replace(pragma.nsWrapRegExp, '');
+
+ //Alter the contents.
+ fileContents = '(function () {\n' +
+ 'var require = ' + ns + '.require,' +
+ 'requirejs = ' + ns + '.requirejs,' +
+ 'define = ' + ns + '.define;\n' +
+ fileContents +
+ '\n}());'
+ }
+ }
+
+ return fileContents;
+ },
+
+ /**
+ * processes the fileContents for some //>> conditional statements
+ */
+ process: function (fileName, fileContents, config, onLifecycleName, pluginCollector) {
+ /*jslint evil: true */
+ var foundIndex = -1, startIndex = 0, lineEndIndex, conditionLine,
+ matches, type, marker, condition, isTrue, endRegExp, endMatches,
+ endMarkerIndex, shouldInclude, startLength, lifecycleHas, deps,
+ i, dep, moduleName,
+ lifecyclePragmas, pragmas = config.pragmas, hasConfig = config.has,
+ //Legacy arg defined to help in dojo conversion script. Remove later
+ //when dojo no longer needs conversion:
+ kwArgs = pragmas;
+
+ //Mix in a specific lifecycle scoped object, to allow targeting
+ //some pragmas/has tests to only when files are saved, or at different
+ //lifecycle events. Do not bother with kwArgs in this section, since
+ //the old dojo kwArgs were for all points in the build lifecycle.
+ if (onLifecycleName) {
+ lifecyclePragmas = config['pragmas' + onLifecycleName];
+ lifecycleHas = config['has' + onLifecycleName];
+
+ if (lifecyclePragmas) {
+ pragmas = create(pragmas || {}, lifecyclePragmas);
+ }
+
+ if (lifecycleHas) {
+ hasConfig = create(hasConfig || {}, lifecycleHas);
+ }
+ }
+
+ //Replace has references if desired
+ if (hasConfig) {
+ fileContents = fileContents.replace(pragma.hasRegExp, function (match, test) {
+ if (test in hasConfig) {
+ return !!hasConfig[test];
+ }
+ return match;
+ });
+ }
+
+ if (!config.skipPragmas) {
+
+ while ((foundIndex = fileContents.indexOf("//>>", startIndex)) !== -1) {
+ //Found a conditional. Get the conditional line.
+ lineEndIndex = fileContents.indexOf("\n", foundIndex);
+ if (lineEndIndex === -1) {
+ lineEndIndex = fileContents.length - 1;
+ }
+
+ //Increment startIndex past the line so the next conditional search can be done.
+ startIndex = lineEndIndex + 1;
+
+ //Break apart the conditional.
+ conditionLine = fileContents.substring(foundIndex, lineEndIndex + 1);
+ matches = conditionLine.match(pragma.conditionalRegExp);
+ if (matches) {
+ type = matches[1];
+ marker = matches[2];
+ condition = matches[3];
+ isTrue = false;
+ //See if the condition is true.
+ try {
+ isTrue = !!eval("(" + condition + ")");
+ } catch (e) {
+ throw "Error in file: " +
+ fileName +
+ ". Conditional comment: " +
+ conditionLine +
+ " failed with this error: " + e;
+ }
+
+ //Find the endpoint marker.
+ endRegExp = new RegExp('\\/\\/\\>\\>\\s*' + type + 'End\\(\\s*[\'"]' + marker + '[\'"]\\s*\\)', "g");
+ endMatches = endRegExp.exec(fileContents.substring(startIndex, fileContents.length));
+ if (endMatches) {
+ endMarkerIndex = startIndex + endRegExp.lastIndex - endMatches[0].length;
+
+ //Find the next line return based on the match position.
+ lineEndIndex = fileContents.indexOf("\n", endMarkerIndex);
+ if (lineEndIndex === -1) {
+ lineEndIndex = fileContents.length - 1;
+ }
+
+ //Should we include the segment?
+ shouldInclude = ((type === "exclude" && !isTrue) || (type === "include" && isTrue));
+
+ //Remove the conditional comments, and optionally remove the content inside
+ //the conditional comments.
+ startLength = startIndex - foundIndex;
+ fileContents = fileContents.substring(0, foundIndex) +
+ (shouldInclude ? fileContents.substring(startIndex, endMarkerIndex) : "") +
+ fileContents.substring(lineEndIndex + 1, fileContents.length);
+
+ //Move startIndex to foundIndex, since that is the new position in the file
+ //where we need to look for more conditionals in the next while loop pass.
+ startIndex = foundIndex;
+ } else {
+ throw "Error in file: " +
+ fileName +
+ ". Cannot find end marker for conditional comment: " +
+ conditionLine;
+
+ }
+ }
+ }
+ }
+
+ //If need to find all plugin resources to optimize, do that now,
+ //before namespacing, since the namespacing will change the API
+ //names.
+ //If there is a plugin collector, scan the file for plugin resources.
+ if (config.optimizeAllPluginResources && pluginCollector) {
+ try {
+ deps = parse.findDependencies(fileName, fileContents);
+ if (deps.length) {
+ for (i = 0; (dep = deps[i]); i++) {
+ if (dep.indexOf('!') !== -1) {
+ (pluginCollector[moduleName] ||
+ (pluginCollector[moduleName] = [])).push(dep);
+ }
+ }
+ }
+ } catch (eDep) {
+ logger.error('Parse error looking for plugin resources in ' +
+ fileName + ', skipping.');
+ }
+ }
+
+ //Strip amdefine use for node-shared modules.
+ fileContents = fileContents.replace(pragma.amdefineRegExp, '');
+
+ //Do namespacing
+ if (onLifecycleName === 'OnSave' && config.namespace) {
+ fileContents = pragma.namespace(fileContents, config.namespace, onLifecycleName);
+ }
+
+
+ return pragma.removeStrict(fileContents, config);
+ }
+ };
+
+ return pragma;
+});
+if(env === 'node') {
+/**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint strict: false */
+/*global define: false */
+
+define('node/optimize', {});
+
+}
+
+if(env === 'rhino') {
+/**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint strict: false, plusplus: false */
+/*global define: false, java: false, Packages: false */
+
+define('rhino/optimize', ['logger'], function (logger) {
+
+ //Add .reduce to Rhino so UglifyJS can run in Rhino,
+ //inspired by https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reduce
+ //but rewritten for brevity, and to be good enough for use by UglifyJS.
+ if (!Array.prototype.reduce) {
+ Array.prototype.reduce = function (fn /*, initialValue */) {
+ var i = 0,
+ length = this.length,
+ accumulator;
+
+ if (arguments.length >= 2) {
+ accumulator = arguments[1];
+ } else {
+ do {
+ if (i in this) {
+ accumulator = this[i++];
+ break;
+ }
+ }
+ while (true);
+ }
+
+ for (; i < length; i++) {
+ if (i in this) {
+ accumulator = fn.call(undefined, accumulator, this[i], i, this);
+ }
+ }
+
+ return accumulator;
+ };
+ }
+
+ var JSSourceFilefromCode, optimize;
+
+ //Bind to Closure compiler, but if it is not available, do not sweat it.
+ try {
+ JSSourceFilefromCode = java.lang.Class.forName('com.google.javascript.jscomp.JSSourceFile').getMethod('fromCode', [java.lang.String, java.lang.String]);
+ } catch (e) {}
+
+ //Helper for closure compiler, because of weird Java-JavaScript interactions.
+ function closurefromCode(filename, content) {
+ return JSSourceFilefromCode.invoke(null, [filename, content]);
+ }
+
+ optimize = {
+ closure: function (fileName, fileContents, keepLines, config) {
+ config = config || {};
+ var jscomp = Packages.com.google.javascript.jscomp,
+ flags = Packages.com.google.common.flags,
+ //Fake extern
+ externSourceFile = closurefromCode("fakeextern.js", " "),
+ //Set up source input
+ jsSourceFile = closurefromCode(String(fileName), String(fileContents)),
+ options, option, FLAG_compilation_level, compiler,
+ Compiler = Packages.com.google.javascript.jscomp.Compiler,
+ result;
+
+ logger.trace("Minifying file: " + fileName);
+
+ //Set up options
+ options = new jscomp.CompilerOptions();
+ for (option in config.CompilerOptions) {
+ // options are false by default and jslint wanted an if statement in this for loop
+ if (config.CompilerOptions[option]) {
+ options[option] = config.CompilerOptions[option];
+ }
+
+ }
+ options.prettyPrint = keepLines || options.prettyPrint;
+
+ FLAG_compilation_level = jscomp.CompilationLevel[config.CompilationLevel || 'SIMPLE_OPTIMIZATIONS'];
+ FLAG_compilation_level.setOptionsForCompilationLevel(options);
+
+ //Trigger the compiler
+ Compiler.setLoggingLevel(Packages.java.util.logging.Level[config.loggingLevel || 'WARNING']);
+ compiler = new Compiler();
+
+ result = compiler.compile(externSourceFile, jsSourceFile, options);
+ if (!result.success) {
+ logger.error('Cannot closure compile file: ' + fileName + '. Skipping it.');
+ } else {
+ fileContents = compiler.toSource();
+ }
+
+ return fileContents;
+ }
+ };
+
+ return optimize;
+});
+}
+/**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint plusplus: false, nomen: false, regexp: false */
+/*global define: false */
+
+define('optimize', [ 'lang', 'logger', 'env!env/optimize', 'env!env/file', 'parse',
+ 'pragma', 'uglifyjs/index'],
+function (lang, logger, envOptimize, file, parse,
+ pragma, uglify) {
+
+ var optimize,
+ cssImportRegExp = /\@import\s+(url\()?\s*([^);]+)\s*(\))?([\w, ]*)(;)?/g,
+ cssUrlRegExp = /\url\(\s*([^\)]+)\s*\)?/g;
+
+ /**
+ * If an URL from a CSS url value contains start/end quotes, remove them.
+ * This is not done in the regexp, since my regexp fu is not that strong,
+ * and the CSS spec allows for ' and " in the URL if they are backslash escaped.
+ * @param {String} url
+ */
+ function cleanCssUrlQuotes(url) {
+ //Make sure we are not ending in whitespace.
+ //Not very confident of the css regexps above that there will not be ending
+ //whitespace.
+ url = url.replace(/\s+$/, "");
+
+ if (url.charAt(0) === "'" || url.charAt(0) === "\"") {
+ url = url.substring(1, url.length - 1);
+ }
+
+ return url;
+ }
+
+ /**
+ * Inlines nested stylesheets that have @import calls in them.
+ * @param {String} fileName the file name
+ * @param {String} fileContents the file contents
+ * @param {String} cssImportIgnore comma delimited string of files to ignore
+ * @param {Object} included an object used to track the files already imported
+ */
+ function flattenCss(fileName, fileContents, cssImportIgnore, included) {
+ //Find the last slash in the name.
+ fileName = fileName.replace(lang.backSlashRegExp, "/");
+ var endIndex = fileName.lastIndexOf("/"),
+ //Make a file path based on the last slash.
+ //If no slash, so must be just a file name. Use empty string then.
+ filePath = (endIndex !== -1) ? fileName.substring(0, endIndex + 1) : "",
+ //store a list of merged files
+ importList = [];
+
+ //Make sure we have a delimited ignore list to make matching faster
+ if (cssImportIgnore && cssImportIgnore.charAt(cssImportIgnore.length - 1) !== ",") {
+ cssImportIgnore += ",";
+ }
+
+ fileContents = fileContents.replace(cssImportRegExp, function (fullMatch, urlStart, importFileName, urlEnd, mediaTypes) {
+ //Only process media type "all" or empty media type rules.
+ if (mediaTypes && ((mediaTypes.replace(/^\s\s*/, '').replace(/\s\s*$/, '')) !== "all")) {
+ return fullMatch;
+ }
+
+ importFileName = cleanCssUrlQuotes(importFileName);
+
+ //Ignore the file import if it is part of an ignore list.
+ if (cssImportIgnore && cssImportIgnore.indexOf(importFileName + ",") !== -1) {
+ return fullMatch;
+ }
+
+ //Make sure we have a unix path for the rest of the operation.
+ importFileName = importFileName.replace(lang.backSlashRegExp, "/");
+
+ try {
+ //if a relative path, then tack on the filePath.
+ //If it is not a relative path, then the readFile below will fail,
+ //and we will just skip that import.
+ var fullImportFileName = importFileName.charAt(0) === "/" ? importFileName : filePath + importFileName,
+ importContents = file.readFile(fullImportFileName), i,
+ importEndIndex, importPath, fixedUrlMatch, colonIndex, parts, flat;
+
+ //Skip the file if it has already been included.
+ if (included[fullImportFileName]) {
+ return '';
+ }
+ included[fullImportFileName] = true;
+
+ //Make sure to flatten any nested imports.
+ flat = flattenCss(fullImportFileName, importContents, cssImportIgnore, included);
+ importContents = flat.fileContents;
+
+ if (flat.importList.length) {
+ importList.push.apply(importList, flat.importList);
+ }
+
+ //Make the full import path
+ importEndIndex = importFileName.lastIndexOf("/");
+
+ //Make a file path based on the last slash.
+ //If no slash, so must be just a file name. Use empty string then.
+ importPath = (importEndIndex !== -1) ? importFileName.substring(0, importEndIndex + 1) : "";
+
+ //fix url() on relative import (#5)
+ importPath = importPath.replace(/^\.\//, '');
+
+ //Modify URL paths to match the path represented by this file.
+ importContents = importContents.replace(cssUrlRegExp, function (fullMatch, urlMatch) {
+ fixedUrlMatch = cleanCssUrlQuotes(urlMatch);
+ fixedUrlMatch = fixedUrlMatch.replace(lang.backSlashRegExp, "/");
+
+ //Only do the work for relative URLs. Skip things that start with / or have
+ //a protocol.
+ colonIndex = fixedUrlMatch.indexOf(":");
+ if (fixedUrlMatch.charAt(0) !== "/" && (colonIndex === -1 || colonIndex > fixedUrlMatch.indexOf("/"))) {
+ //It is a relative URL, tack on the path prefix
+ urlMatch = importPath + fixedUrlMatch;
+ } else {
+ logger.trace(importFileName + "\n URL not a relative URL, skipping: " + urlMatch);
+ }
+
+ //Collapse .. and .
+ parts = urlMatch.split("/");
+ for (i = parts.length - 1; i > 0; i--) {
+ if (parts[i] === ".") {
+ parts.splice(i, 1);
+ } else if (parts[i] === "..") {
+ if (i !== 0 && parts[i - 1] !== "..") {
+ parts.splice(i - 1, 2);
+ i -= 1;
+ }
+ }
+ }
+
+ return "url(" + parts.join("/") + ")";
+ });
+
+ importList.push(fullImportFileName);
+ return importContents;
+ } catch (e) {
+ logger.warn(fileName + "\n Cannot inline css import, skipping: " + importFileName);
+ return fullMatch;
+ }
+ });
+
+ return {
+ importList : importList,
+ fileContents : fileContents
+ };
+ }
+
+ optimize = {
+ licenseCommentRegExp: /\/\*[\s\S]*?\*\//g,
+
+ /**
+ * Optimizes a file that contains JavaScript content. Optionally collects
+ * plugin resources mentioned in a file, and then passes the content
+ * through an minifier if one is specified via config.optimize.
+ *
+ * @param {String} fileName the name of the file to optimize
+ * @param {String} outFileName the name of the file to use for the
+ * saved optimized content.
+ * @param {Object} config the build config object.
+ * @param {String} [moduleName] the module name to use for the file.
+ * Used for plugin resource collection.
+ * @param {Array} [pluginCollector] storage for any plugin resources
+ * found.
+ */
+ jsFile: function (fileName, outFileName, config, moduleName, pluginCollector) {
+ var parts = (config.optimize + "").split('.'),
+ optimizerName = parts[0],
+ keepLines = parts[1] === 'keepLines',
+ fileContents;
+
+ fileContents = file.readFile(fileName);
+
+ fileContents = optimize.js(fileName, fileContents, optimizerName,
+ keepLines, config, pluginCollector);
+
+ file.saveUtf8File(outFileName, fileContents);
+ },
+
+ /**
+ * Optimizes a file that contains JavaScript content. Optionally collects
+ * plugin resources mentioned in a file, and then passes the content
+ * through an minifier if one is specified via config.optimize.
+ *
+ * @param {String} fileName the name of the file that matches the
+ * fileContents.
+ * @param {String} fileContents the string of JS to optimize.
+ * @param {String} [optimizerName] optional name of the optimizer to
+ * use. 'uglify' is default.
+ * @param {Boolean} [keepLines] whether to keep line returns in the optimization.
+ * @param {Object} [config] the build config object.
+ * @param {Array} [pluginCollector] storage for any plugin resources
+ * found.
+ */
+ js: function (fileName, fileContents, optimizerName, keepLines, config, pluginCollector) {
+ var licenseContents = '',
+ optFunc, match, comment;
+
+ config = config || {};
+
+ //Apply pragmas/namespace renaming
+ fileContents = pragma.process(fileName, fileContents, config, 'OnSave', pluginCollector);
+
+ //Optimize the JS files if asked.
+ if (optimizerName && optimizerName !== 'none') {
+ optFunc = envOptimize[optimizerName] || optimize.optimizers[optimizerName];
+ if (!optFunc) {
+ throw new Error('optimizer with name of "' +
+ optimizerName +
+ '" not found for this environment');
+ }
+
+ if (config.preserveLicenseComments) {
+ //Pull out any license comments for prepending after optimization.
+ optimize.licenseCommentRegExp.lastIndex = 0;
+ while ((match = optimize.licenseCommentRegExp.exec(fileContents))) {
+ comment = match[0];
+ //Only keep the comments if they are license comments.
+ if (comment.indexOf('@license') !== -1 ||
+ comment.indexOf('/*!') === 0) {
+ licenseContents += comment + '\n';
+ }
+ }
+ }
+
+ fileContents = licenseContents + optFunc(fileName, fileContents, keepLines,
+ config[optimizerName]);
+ }
+
+ return fileContents;
+ },
+
+ /**
+ * Optimizes one CSS file, inlining @import calls, stripping comments, and
+ * optionally removes line returns.
+ * @param {String} fileName the path to the CSS file to optimize
+ * @param {String} outFileName the path to save the optimized file.
+ * @param {Object} config the config object with the optimizeCss and
+ * cssImportIgnore options.
+ */
+ cssFile: function (fileName, outFileName, config) {
+
+ //Read in the file. Make sure we have a JS string.
+ var originalFileContents = file.readFile(fileName),
+ flat = flattenCss(fileName, originalFileContents, config.cssImportIgnore, {}),
+ fileContents = flat.fileContents,
+ startIndex, endIndex, buildText;
+
+ //Do comment removal.
+ try {
+ if (config.optimizeCss.indexOf(".keepComments") === -1) {
+ startIndex = -1;
+ //Get rid of comments.
+ while ((startIndex = fileContents.indexOf("/*")) !== -1) {
+ endIndex = fileContents.indexOf("*/", startIndex + 2);
+ if (endIndex === -1) {
+ throw "Improper comment in CSS file: " + fileName;
+ }
+ fileContents = fileContents.substring(0, startIndex) + fileContents.substring(endIndex + 2, fileContents.length);
+ }
+ }
+ //Get rid of newlines.
+ if (config.optimizeCss.indexOf(".keepLines") === -1) {
+ fileContents = fileContents.replace(/[\r\n]/g, "");
+ fileContents = fileContents.replace(/\s+/g, " ");
+ fileContents = fileContents.replace(/\{\s/g, "{");
+ fileContents = fileContents.replace(/\s\}/g, "}");
+ } else {
+ //Remove multiple empty lines.
+ fileContents = fileContents.replace(/(\r\n)+/g, "\r\n");
+ fileContents = fileContents.replace(/(\n)+/g, "\n");
+ }
+ } catch (e) {
+ fileContents = originalFileContents;
+ logger.error("Could not optimized CSS file: " + fileName + ", error: " + e);
+ }
+
+ file.saveUtf8File(outFileName, fileContents);
+
+ //text output to stdout and/or written to build.txt file
+ buildText = "\n"+ outFileName.replace(config.dir, "") +"\n----------------\n";
+ flat.importList.push(fileName);
+ buildText += flat.importList.map(function(path){
+ return path.replace(config.dir, "");
+ }).join("\n");
+ return buildText +"\n";
+ },
+
+ /**
+ * Optimizes CSS files, inlining @import calls, stripping comments, and
+ * optionally removes line returns.
+ * @param {String} startDir the path to the top level directory
+ * @param {Object} config the config object with the optimizeCss and
+ * cssImportIgnore options.
+ */
+ css: function (startDir, config) {
+ var buildText = "",
+ i, fileName, fileList;
+ if (config.optimizeCss.indexOf("standard") !== -1) {
+ fileList = file.getFilteredFileList(startDir, /\.css$/, true);
+ if (fileList) {
+ for (i = 0; i < fileList.length; i++) {
+ fileName = fileList[i];
+ logger.trace("Optimizing (" + config.optimizeCss + ") CSS file: " + fileName);
+ buildText += optimize.cssFile(fileName, fileName, config);
+ }
+ }
+ }
+ return buildText;
+ },
+
+ optimizers: {
+ uglify: function (fileName, fileContents, keepLines, config) {
+ var parser = uglify.parser,
+ processor = uglify.uglify,
+ ast;
+
+ config = config || {};
+
+ logger.trace("Uglifying file: " + fileName);
+
+ try {
+ ast = parser.parse(fileContents, config.strict_semicolons);
+ ast = processor.ast_mangle(ast, config);
+ ast = processor.ast_squeeze(ast, config);
+
+ fileContents = processor.gen_code(ast, config);
+ } catch (e) {
+ logger.error('Cannot uglify file: ' + fileName + '. Skipping it. Error is:\n' + e.toString());
+ }
+ return fileContents;
+ }
+ }
+ };
+
+ return optimize;
+});
+/**
+ * @license RequireJS Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+/*
+ * This file patches require.js to communicate with the build system.
+ */
+
+/*jslint nomen: false, plusplus: false, regexp: false, strict: false */
+/*global require: false, define: true */
+
+//NOT asking for require as a dependency since the goal is to modify the
+//global require below
+define('requirePatch', [ 'env!env/file', 'pragma', 'parse'],
+function (file, pragma, parse) {
+
+ var allowRun = true;
+
+ //This method should be called when the patches to require should take hold.
+ return function () {
+ if (!allowRun) {
+ return;
+ }
+ allowRun = false;
+
+ var layer,
+ pluginBuilderRegExp = /(["']?)pluginBuilder(["']?)\s*[=\:]\s*["']([^'"\s]+)["']/,
+ oldDef;
+
+
+ /** Print out some extrs info about the module tree that caused the error. **/
+ require.onError = function (err) {
+
+ var msg = '\nIn module tree:\n',
+ standardIndent = ' ',
+ tree = err.moduleTree,
+ i, j, mod;
+
+ if (tree && tree.length > 0) {
+ for (i = tree.length - 1; i > -1 && (mod = tree[i]); i--) {
+ for (j = tree.length - i; j > -1; j--) {
+ msg += standardIndent;
+ }
+ msg += mod + '\n';
+ }
+
+ err = new Error(err.toString() + msg);
+ }
+
+ throw err;
+ };
+
+ //Stored cached file contents for reuse in other layers.
+ require._cachedFileContents = {};
+
+ /** Reset state for each build layer pass. */
+ require._buildReset = function () {
+ var oldContext = require.s.contexts._;
+
+ //Clear up the existing context.
+ delete require.s.contexts._;
+
+ //Set up new context, so the layer object can hold onto it.
+ require({});
+
+ layer = require._layer = {
+ buildPathMap: {},
+ buildFileToModule: {},
+ buildFilePaths: [],
+ pathAdded: {},
+ modulesWithNames: {},
+ needsDefine: {},
+ existingRequireUrl: "",
+ context: require.s.contexts._
+ };
+
+ //Return the previous context in case it is needed, like for
+ //the basic config object.
+ return oldContext;
+ };
+
+ require._buildReset();
+
+ /**
+ * Makes sure the URL is something that can be supported by the
+ * optimization tool.
+ * @param {String} url
+ * @returns {Boolean}
+ */
+ require._isSupportedBuildUrl = function (url) {
+ //Ignore URLs with protocols, hosts or question marks, means either network
+ //access is needed to fetch it or it is too dynamic. Note that
+ //on Windows, full paths are used for some urls, which include
+ //the drive, like c:/something, so need to test for something other
+ //than just a colon.
+ return url.indexOf("://") === -1 && url.indexOf("?") === -1 &&
+ url.indexOf('empty:') !== 0 && url.indexOf('//') !== 0;
+ };
+
+ //Override define() to catch modules that just define an object, so that
+ //a dummy define call is not put in the build file for them. They do
+ //not end up getting defined via require.execCb, so we need to catch them
+ //at the define call.
+ oldDef = define;
+
+ //This function signature does not have to be exact, just match what we
+ //are looking for.
+ define = function (name, obj) {
+ if (typeof name === "string" && !layer.needsDefine[name]) {
+ layer.modulesWithNames[name] = true;
+ }
+ return oldDef.apply(require, arguments);
+ };
+
+ define.amd = oldDef.amd;
+
+ //Add some utilities for plugins
+ require._readFile = file.readFile;
+ require._fileExists = function (path) {
+ return file.exists(path);
+ };
+
+ function normalizeUrlWithBase(context, moduleName, url) {
+ //Adjust the URL if it was not transformed to use baseUrl.
+ if (require.jsExtRegExp.test(moduleName)) {
+ url = (context.config.dir || context.config.dirBaseUrl) + url;
+ }
+ return url;
+ }
+
+ //Override load so that the file paths can be collected.
+ require.load = function (context, moduleName, url) {
+ /*jslint evil: true */
+ var contents, pluginBuilderMatch, builderName;
+
+ context.scriptCount += 1;
+
+ //Only handle urls that can be inlined, so that means avoiding some
+ //URLs like ones that require network access or may be too dynamic,
+ //like JSONP
+ if (require._isSupportedBuildUrl(url)) {
+ //Adjust the URL if it was not transformed to use baseUrl.
+ url = normalizeUrlWithBase(context, moduleName, url);
+
+ //Save the module name to path and path to module name mappings.
+ layer.buildPathMap[moduleName] = url;
+ layer.buildFileToModule[url] = moduleName;
+
+ if (moduleName in context.plugins) {
+ //plugins need to have their source evaled as-is.
+ context.needFullExec[moduleName] = true;
+ }
+
+ try {
+ if (url in require._cachedFileContents &&
+ (!context.needFullExec[moduleName] || context.fullExec[moduleName])) {
+ contents = require._cachedFileContents[url];
+ } else {
+ //Load the file contents, process for conditionals, then
+ //evaluate it.
+ contents = file.readFile(url);
+
+ //If there is a read filter, run it now.
+ if (context.config.onBuildRead) {
+ contents = context.config.onBuildRead(moduleName, url, contents);
+ }
+
+ contents = pragma.process(url, contents, context.config, 'OnExecute');
+
+ //Find out if the file contains a require() definition. Need to know
+ //this so we can inject plugins right after it, but before they are needed,
+ //and to make sure this file is first, so that define calls work.
+ //This situation mainly occurs when the build is done on top of the output
+ //of another build, where the first build may include require somewhere in it.
+ try {
+ if (!layer.existingRequireUrl && parse.definesRequire(url, contents)) {
+ layer.existingRequireUrl = url;
+ }
+ } catch (e1) {
+ throw new Error('Parse error using UglifyJS ' +
+ 'for file: ' + url + '\n' + e1);
+ }
+
+ if (moduleName in context.plugins) {
+ //This is a loader plugin, check to see if it has a build extension,
+ //otherwise the plugin will act as the plugin builder too.
+ pluginBuilderMatch = pluginBuilderRegExp.exec(contents);
+ if (pluginBuilderMatch) {
+ //Load the plugin builder for the plugin contents.
+ builderName = context.normalize(pluginBuilderMatch[3], moduleName);
+ contents = file.readFile(context.nameToUrl(builderName));
+ }
+ }
+
+ //Parse out the require and define calls.
+ //Do this even for plugins in case they have their own
+ //dependencies that may be separate to how the pluginBuilder works.
+ try {
+ if (!context.needFullExec[moduleName]) {
+ contents = parse(moduleName, url, contents, {
+ insertNeedsDefine: true,
+ has: context.config.has,
+ findNestedDependencies: context.config.findNestedDependencies
+ });
+ }
+ } catch (e2) {
+ throw new Error('Parse error using UglifyJS ' +
+ 'for file: ' + url + '\n' + e2);
+ }
+
+ require._cachedFileContents[url] = contents;
+ }
+
+ if (contents) {
+ eval(contents);
+ }
+
+ //Need to close out completion of this module
+ //so that listeners will get notified that it is available.
+ try {
+ context.completeLoad(moduleName);
+ } catch (e) {
+ //Track which module could not complete loading.
+ (e.moduleTree || (e.moduleTree = [])).push(moduleName);
+ throw e;
+ }
+
+ } catch (eOuter) {
+ if (!eOuter.fileName) {
+ eOuter.fileName = url;
+ }
+ throw eOuter;
+ }
+ } else {
+ //With unsupported URLs still need to call completeLoad to
+ //finish loading.
+ context.completeLoad(moduleName);
+ }
+
+ //Mark the module loaded.
+ context.loaded[moduleName] = true;
+ };
+
+
+ //Called when execManager runs for a dependency. Used to figure out
+ //what order of execution.
+ require.onResourceLoad = function (context, map) {
+ var fullName = map.fullName,
+ url;
+
+ //Ignore "fake" modules, usually generated by plugin code, since
+ //they do not map back to a real file to include in the optimizer,
+ //or it will be included, but in a different form.
+ if (context.fake[fullName]) {
+ return;
+ }
+
+ //A plugin.
+ if (map.prefix) {
+ if (!layer.pathAdded[fullName]) {
+ layer.buildFilePaths.push(fullName);
+ //For plugins the real path is not knowable, use the name
+ //for both module to file and file to module mappings.
+ layer.buildPathMap[fullName] = fullName;
+ layer.buildFileToModule[fullName] = fullName;
+ layer.modulesWithNames[fullName] = true;
+ layer.pathAdded[fullName] = true;
+ }
+ } else if (map.url && require._isSupportedBuildUrl(map.url)) {
+ //If the url has not been added to the layer yet, and it
+ //is from an actual file that was loaded, add it now.
+ url = normalizeUrlWithBase(context, map.fullName, map.url);
+ if (!layer.pathAdded[url] && layer.buildPathMap[fullName]) {
+ //Remember the list of dependencies for this layer.
+ layer.buildFilePaths.push(url);
+ layer.pathAdded[url] = true;
+ }
+ }
+ };
+
+ //Called by output of the parse() function, when a file does not
+ //explicitly call define, probably just require, but the parse()
+ //function normalizes on define() for dependency mapping and file
+ //ordering works correctly.
+ require.needsDefine = function (moduleName) {
+ layer.needsDefine[moduleName] = true;
+ };
+
+ //Marks module has having a name, and optionally executes the
+ //callback, but only if it meets certain criteria.
+ require.execCb = function (name, cb, args, exports) {
+ if (!layer.needsDefine[name]) {
+ layer.modulesWithNames[name] = true;
+ }
+ if (cb.__requireJsBuild || layer.context.needFullExec[name]) {
+ return cb.apply(exports, args);
+ }
+ return undefined;
+ };
+ };
+});
+/**
+ * @license RequireJS Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint plusplus: false, regexp: false, strict: false */
+/*global define: false, console: false */
+
+define('commonJs', ['env!env/file', 'uglifyjs/index'], function (file, uglify) {
+ var commonJs = {
+ depRegExp: /require\s*\(\s*["']([\w-_\.\/]+)["']\s*\)/g,
+
+ //Set this to false in non-rhino environments. If rhino, then it uses
+ //rhino's decompiler to remove comments before looking for require() calls,
+ //otherwise, it will use a crude regexp approach to remove comments. The
+ //rhino way is more robust, but he regexp is more portable across environments.
+ useRhino: true,
+
+ //Set to false if you do not want this file to log. Useful in environments
+ //like node where you want the work to happen without noise.
+ useLog: true,
+
+ convertDir: function (commonJsPath, savePath) {
+ var fileList, i,
+ jsFileRegExp = /\.js$/,
+ fileName, convertedFileName, fileContents;
+
+ //Get list of files to convert.
+ fileList = file.getFilteredFileList(commonJsPath, /\w/, true);
+
+ //Normalize on front slashes and make sure the paths do not end in a slash.
+ commonJsPath = commonJsPath.replace(/\\/g, "/");
+ savePath = savePath.replace(/\\/g, "/");
+ if (commonJsPath.charAt(commonJsPath.length - 1) === "/") {
+ commonJsPath = commonJsPath.substring(0, commonJsPath.length - 1);
+ }
+ if (savePath.charAt(savePath.length - 1) === "/") {
+ savePath = savePath.substring(0, savePath.length - 1);
+ }
+
+ //Cycle through all the JS files and convert them.
+ if (!fileList || !fileList.length) {
+ if (commonJs.useLog) {
+ if (commonJsPath === "convert") {
+ //A request just to convert one file.
+ console.log('\n\n' + commonJs.convert(savePath, file.readFile(savePath)));
+ } else {
+ console.log("No files to convert in directory: " + commonJsPath);
+ }
+ }
+ } else {
+ for (i = 0; (fileName = fileList[i]); i++) {
+ convertedFileName = fileName.replace(commonJsPath, savePath);
+
+ //Handle JS files.
+ if (jsFileRegExp.test(fileName)) {
+ fileContents = file.readFile(fileName);
+ fileContents = commonJs.convert(fileName, fileContents);
+ file.saveUtf8File(convertedFileName, fileContents);
+ } else {
+ //Just copy the file over.
+ file.copyFile(fileName, convertedFileName, true);
+ }
+ }
+ }
+ },
+
+ /**
+ * Removes the comments from a string.
+ *
+ * @param {String} fileContents
+ * @param {String} fileName mostly used for informative reasons if an error.
+ *
+ * @returns {String} a string of JS with comments removed.
+ */
+ removeComments: function (fileContents, fileName) {
+ //Uglify's ast generation removes comments, so just convert to ast,
+ //then back to source code to get rid of comments.
+ return uglify.uglify.gen_code(uglify.parser.parse(fileContents), true);
+ },
+
+ /**
+ * Regexp for testing if there is already a require.def call in the file,
+ * in which case do not try to convert it.
+ */
+ defRegExp: /define\s*\(\s*("|'|\[|function)/,
+
+ /**
+ * Regexp for testing if there is a require([]) or require(function(){})
+ * call, indicating the file is already in requirejs syntax.
+ */
+ rjsRegExp: /require\s*\(\s*(\[|function)/,
+
+ /**
+ * Does the actual file conversion.
+ *
+ * @param {String} fileName the name of the file.
+ *
+ * @param {String} fileContents the contents of a file :)
+ *
+ * @param {Boolean} skipDeps if true, require("") dependencies
+ * will not be searched, but the contents will just be wrapped in the
+ * standard require, exports, module dependencies. Only usable in sync
+ * environments like Node where the require("") calls can be resolved on
+ * the fly.
+ *
+ * @returns {String} the converted contents
+ */
+ convert: function (fileName, fileContents, skipDeps) {
+ //Strip out comments.
+ try {
+ var deps = [], depName, match,
+ //Remove comments
+ tempContents = commonJs.removeComments(fileContents, fileName);
+
+ //First see if the module is not already RequireJS-formatted.
+ if (commonJs.defRegExp.test(tempContents) || commonJs.rjsRegExp.test(tempContents)) {
+ return fileContents;
+ }
+
+ //Reset the regexp to start at beginning of file. Do this
+ //since the regexp is reused across files.
+ commonJs.depRegExp.lastIndex = 0;
+
+ if (!skipDeps) {
+ //Find dependencies in the code that was not in comments.
+ while ((match = commonJs.depRegExp.exec(tempContents))) {
+ depName = match[1];
+ if (depName) {
+ deps.push('"' + depName + '"');
+ }
+ }
+ }
+
+ //Construct the wrapper boilerplate.
+ fileContents = 'define(["require", "exports", "module"' +
+ (deps.length ? ', ' + deps.join(",") : '') + '], ' +
+ 'function(require, exports, module) {\n' +
+ fileContents +
+ '\n});\n';
+ } catch (e) {
+ console.log("COULD NOT CONVERT: " + fileName + ", so skipping it. Error was: " + e);
+ return fileContents;
+ }
+
+ return fileContents;
+ }
+ };
+
+ return commonJs;
+});
+/**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*jslint plusplus: true, nomen: true */
+/*global define, require */
+
+
+define('build', [ 'lang', 'logger', 'env!env/file', 'parse', 'optimize', 'pragma',
+ 'env!env/load', 'requirePatch'],
+function (lang, logger, file, parse, optimize, pragma,
+ load, requirePatch) {
+ 'use strict';
+
+ var build, buildBaseConfig,
+ endsWithSemiColonRegExp = /;\s*$/;
+
+ buildBaseConfig = {
+ appDir: "",
+ pragmas: {},
+ paths: {},
+ optimize: "uglify",
+ optimizeCss: "standard.keepLines",
+ inlineText: true,
+ isBuild: true,
+ optimizeAllPluginResources: false,
+ findNestedDependencies: false,
+ preserveLicenseComments: true,
+ //By default, all files/directories are copied, unless
+ //they match this regexp, by default just excludes .folders
+ dirExclusionRegExp: file.dirExclusionRegExp
+ };
+
+ /**
+ * Some JS may not be valid if concatenated with other JS, in particular
+ * the style of omitting semicolons and rely on ASI. Add a semicolon in
+ * those cases.
+ */
+ function addSemiColon(text) {
+ if (endsWithSemiColonRegExp.test(text)) {
+ return text;
+ } else {
+ return text + ";";
+ }
+ }
+
+ /**
+ * If the path looks like an URL, throw an error. This is to prevent
+ * people from using URLs with protocols in the build config, since
+ * the optimizer is not set up to do network access. However, be
+ * sure to allow absolute paths on Windows, like C:\directory.
+ */
+ function disallowUrls(path) {
+ if ((path.indexOf('://') !== -1 || path.indexOf('//') === 0) && path !== 'empty:') {
+ throw new Error('Path is not supported: ' + path +
+ '\nOptimizer can only handle' +
+ ' local paths. Download the locally if necessary' +
+ ' and update the config to use a local path.\n' +
+ 'http://requirejs.org/docs/errors.html#pathnotsupported');
+ }
+ }
+
+ function endsWithSlash(dirName) {
+ if (dirName.charAt(dirName.length - 1) !== "/") {
+ dirName += "/";
+ }
+ disallowUrls(dirName);
+ return dirName;
+ }
+
+ //Method used by plugin writeFile calls, defined up here to avoid
+ //jslint warning about "making a function in a loop".
+ function makeWriteFile(anonDefRegExp, namespaceWithDot, layer) {
+ function writeFile(name, contents) {
+ logger.trace('Saving plugin-optimized file: ' + name);
+ file.saveUtf8File(name, contents);
+ }
+
+ writeFile.asModule = function (moduleName, fileName, contents) {
+ writeFile(fileName,
+ build.toTransport(anonDefRegExp, namespaceWithDot, moduleName, fileName, contents, layer));
+ };
+
+ return writeFile;
+ }
+
+ /**
+ * Main API entry point into the build. The args argument can either be
+ * an array of arguments (like the onese passed on a command-line),
+ * or it can be a JavaScript object that has the format of a build profile
+ * file.
+ *
+ * If it is an object, then in addition to the normal properties allowed in
+ * a build profile file, the object should contain one other property:
+ *
+ * The object could also contain a "buildFile" property, which is a string
+ * that is the file path to a build profile that contains the rest
+ * of the build profile directives.
+ *
+ * This function does not return a status, it should throw an error if
+ * there is a problem completing the build.
+ */
+ build = function (args) {
+ var buildFile, cmdConfig;
+
+ if (!args || lang.isArray(args)) {
+ if (!args || args.length < 1) {
+ logger.error("build.js buildProfile.js\n" +
+ "where buildProfile.js is the name of the build file (see example.build.js for hints on how to make a build file).");
+ return undefined;
+ }
+
+ //Next args can include a build file path as well as other build args.
+ //build file path comes first. If it does not contain an = then it is
+ //a build file path. Otherwise, just all build args.
+ if (args[0].indexOf("=") === -1) {
+ buildFile = args[0];
+ args.splice(0, 1);
+ }
+
+ //Remaining args are options to the build
+ cmdConfig = build.convertArrayToObject(args);
+ cmdConfig.buildFile = buildFile;
+ } else {
+ cmdConfig = args;
+ }
+
+ return build._run(cmdConfig);
+ };
+
+ build._run = function (cmdConfig) {
+ var buildFileContents = "",
+ pluginCollector = {},
+ buildPaths, fileName, fileNames,
+ prop, paths, i,
+ baseConfig, config,
+ modules, builtModule, srcPath, buildContext,
+ destPath, moduleName, moduleMap, parentModuleMap, context,
+ resources, resource, pluginProcessed = {}, plugin;
+
+ //Can now run the patches to require.js to allow it to be used for
+ //build generation. Do it here instead of at the top of the module
+ //because we want normal require behavior to load the build tool
+ //then want to switch to build mode.
+ requirePatch();
+
+ config = build.createConfig(cmdConfig);
+ paths = config.paths;
+
+ if (config.logLevel) {
+ logger.logLevel(config.logLevel);
+ }
+
+ if (!config.out && !config.cssIn) {
+ //This is not just a one-off file build but a full build profile, with
+ //lots of files to process.
+
+ //First copy all the baseUrl content
+ file.copyDir((config.appDir || config.baseUrl), config.dir, /\w/, true);
+
+ //Adjust baseUrl if config.appDir is in play, and set up build output paths.
+ buildPaths = {};
+ if (config.appDir) {
+ //All the paths should be inside the appDir, so just adjust
+ //the paths to use the dirBaseUrl
+ for (prop in paths) {
+ if (paths.hasOwnProperty(prop)) {
+ buildPaths[prop] = paths[prop].replace(config.baseUrl, config.dirBaseUrl);
+ }
+ }
+ } else {
+ //If no appDir, then make sure to copy the other paths to this directory.
+ for (prop in paths) {
+ if (paths.hasOwnProperty(prop)) {
+ //Set up build path for each path prefix.
+ buildPaths[prop] = paths[prop] === 'empty:' ? 'empty:' : prop.replace(/\./g, "/");
+
+ //Make sure source path is fully formed with baseUrl,
+ //if it is a relative URL.
+ srcPath = paths[prop];
+ if (srcPath.indexOf('/') !== 0 && srcPath.indexOf(':') === -1) {
+ srcPath = config.baseUrl + srcPath;
+ }
+
+ destPath = config.dirBaseUrl + buildPaths[prop];
+
+ //Skip empty: paths
+ if (srcPath !== 'empty:') {
+ //If the srcPath is a directory, copy the whole directory.
+ if (file.exists(srcPath) && file.isDirectory(srcPath)) {
+ //Copy files to build area. Copy all files (the /\w/ regexp)
+ file.copyDir(srcPath, destPath, /\w/, true);
+ } else {
+ //Try a .js extension
+ srcPath += '.js';
+ destPath += '.js';
+ file.copyFile(srcPath, destPath);
+ }
+ }
+ }
+ }
+ }
+ }
+
+ //Figure out source file location for each module layer. Do this by seeding require
+ //with source area configuration. This is needed so that later the module layers
+ //can be manually copied over to the source area, since the build may be
+ //require multiple times and the above copyDir call only copies newer files.
+ require({
+ baseUrl: config.baseUrl,
+ paths: paths,
+ packagePaths: config.packagePaths,
+ packages: config.packages
+ });
+ buildContext = require.s.contexts._;
+ modules = config.modules;
+
+ if (modules) {
+ modules.forEach(function (module) {
+ if (module.name) {
+ module._sourcePath = buildContext.nameToUrl(module.name);
+ //If the module does not exist, and this is not a "new" module layer,
+ //as indicated by a true "create" property on the module, and
+ //it is not a plugin-loaded resource, then throw an error.
+ if (!file.exists(module._sourcePath) && !module.create &&
+ module.name.indexOf('!') === -1) {
+ throw new Error("ERROR: module path does not exist: " +
+ module._sourcePath + " for module named: " + module.name +
+ ". Path is relative to: " + file.absPath('.'));
+ }
+ }
+ });
+ }
+
+ if (config.out) {
+ //Just set up the _buildPath for the module layer.
+ require(config);
+ if (!config.cssIn) {
+ config.modules[0]._buildPath = config.out;
+ }
+ } else if (!config.cssIn) {
+ //Now set up the config for require to use the build area, and calculate the
+ //build file locations. Pass along any config info too.
+ baseConfig = {
+ baseUrl: config.dirBaseUrl,
+ paths: buildPaths
+ };
+
+ lang.mixin(baseConfig, config);
+ require(baseConfig);
+
+ if (modules) {
+ modules.forEach(function (module) {
+ if (module.name) {
+ module._buildPath = buildContext.nameToUrl(module.name, null);
+ if (!module.create) {
+ file.copyFile(module._sourcePath, module._buildPath);
+ }
+ }
+ });
+ }
+ }
+
+ //Run CSS optimizations before doing JS module tracing, to allow
+ //things like text loader plugins loading CSS to get the optimized
+ //CSS.
+ if (config.optimizeCss && config.optimizeCss !== "none" && config.dir) {
+ buildFileContents += optimize.css(config.dir, config);
+ }
+
+ if (modules) {
+ //For each module layer, call require to calculate dependencies.
+ modules.forEach(function (module) {
+ module.layer = build.traceDependencies(module, config);
+ });
+
+ //Now build up shadow layers for anything that should be excluded.
+ //Do this after tracing dependencies for each module, in case one
+ //of those modules end up being one of the excluded values.
+ modules.forEach(function (module) {
+ if (module.exclude) {
+ module.excludeLayers = [];
+ module.exclude.forEach(function (exclude, i) {
+ //See if it is already in the list of modules.
+ //If not trace dependencies for it.
+ module.excludeLayers[i] = build.findBuildModule(exclude, modules) ||
+ {layer: build.traceDependencies({name: exclude}, config)};
+ });
+ }
+ });
+
+ modules.forEach(function (module) {
+ if (module.exclude) {
+ //module.exclude is an array of module names. For each one,
+ //get the nested dependencies for it via a matching entry
+ //in the module.excludeLayers array.
+ module.exclude.forEach(function (excludeModule, i) {
+ var excludeLayer = module.excludeLayers[i].layer, map = excludeLayer.buildPathMap, prop;
+ for (prop in map) {
+ if (map.hasOwnProperty(prop)) {
+ build.removeModulePath(prop, map[prop], module.layer);
+ }
+ }
+ });
+ }
+ if (module.excludeShallow) {
+ //module.excludeShallow is an array of module names.
+ //shallow exclusions are just that module itself, and not
+ //its nested dependencies.
+ module.excludeShallow.forEach(function (excludeShallowModule) {
+ var path = module.layer.buildPathMap[excludeShallowModule];
+ if (path) {
+ build.removeModulePath(excludeShallowModule, path, module.layer);
+ }
+ });
+ }
+
+ //Flatten them and collect the build output for each module.
+ builtModule = build.flattenModule(module, module.layer, config);
+
+ //Save it to a temp file for now, in case there are other layers that
+ //contain optimized content that should not be included in later
+ //layer optimizations. See issue #56.
+ file.saveUtf8File(module._buildPath + '-temp', builtModule.text);
+ buildFileContents += builtModule.buildText;
+ });
+
+ //Now move the build layers to their final position.
+ modules.forEach(function (module) {
+ var finalPath = module._buildPath;
+ if (file.exists(finalPath)) {
+ file.deleteFile(finalPath);
+ }
+ file.renameFile(finalPath + '-temp', finalPath);
+ });
+ }
+
+ //Do other optimizations.
+ if (config.out && !config.cssIn) {
+ //Just need to worry about one JS file.
+ fileName = config.modules[0]._buildPath;
+ optimize.jsFile(fileName, fileName, config);
+ } else if (!config.cssIn) {
+ //Normal optimizations across modules.
+
+ //JS optimizations.
+ fileNames = file.getFilteredFileList(config.dir, /\.js$/, true);
+ for (i = 0; (fileName = fileNames[i]); i++) {
+ //Generate the module name from the config.dir root.
+ moduleName = fileName.replace(config.dir, '');
+ //Get rid of the extension
+ moduleName = moduleName.substring(0, moduleName.length - 3);
+ optimize.jsFile(fileName, fileName, config, moduleName, pluginCollector);
+ }
+
+ //Normalize all the plugin resources.
+ context = require.s.contexts._;
+
+ for (moduleName in pluginCollector) {
+ if (pluginCollector.hasOwnProperty(moduleName)) {
+ parentModuleMap = context.makeModuleMap(moduleName);
+ resources = pluginCollector[moduleName];
+ for (i = 0; (resource = resources[i]); i++) {
+ moduleMap = context.makeModuleMap(resource, parentModuleMap);
+ if (!context.plugins[moduleMap.prefix]) {
+ //Set the value in context.plugins so it
+ //will be evaluated as a full plugin.
+ context.plugins[moduleMap.prefix] = true;
+
+ //Do not bother if the plugin is not available.
+ if (!file.exists(require.toUrl(moduleMap.prefix + '.js'))) {
+ continue;
+ }
+
+ //Rely on the require in the build environment
+ //to be synchronous
+ context.require([moduleMap.prefix]);
+
+ //Now that the plugin is loaded, redo the moduleMap
+ //since the plugin will need to normalize part of the path.
+ moduleMap = context.makeModuleMap(resource, parentModuleMap);
+ }
+
+ //Only bother with plugin resources that can be handled
+ //processed by the plugin, via support of the writeFile
+ //method.
+ if (!pluginProcessed[moduleMap.fullName]) {
+ //Only do the work if the plugin was really loaded.
+ //Using an internal access because the file may
+ //not really be loaded.
+ plugin = context.defined[moduleMap.prefix];
+ if (plugin && plugin.writeFile) {
+ plugin.writeFile(
+ moduleMap.prefix,
+ moduleMap.name,
+ require,
+ makeWriteFile(
+ config.anonDefRegExp,
+ config.namespaceWithDot
+ ),
+ context.config
+ );
+ }
+
+ pluginProcessed[moduleMap.fullName] = true;
+ }
+ }
+
+ }
+ }
+
+ //console.log('PLUGIN COLLECTOR: ' + JSON.stringify(pluginCollector, null, " "));
+
+
+ //All module layers are done, write out the build.txt file.
+ file.saveUtf8File(config.dir + "build.txt", buildFileContents);
+ }
+
+ //If just have one CSS file to optimize, do that here.
+ if (config.cssIn) {
+ buildFileContents += optimize.cssFile(config.cssIn, config.out, config);
+ }
+
+ //Print out what was built into which layers.
+ if (buildFileContents) {
+ logger.info(buildFileContents);
+ return buildFileContents;
+ }
+
+ return '';
+ };
+
+ /**
+ * Converts command line args like "paths.foo=../some/path"
+ * result.paths = { foo: '../some/path' } where prop = paths,
+ * name = paths.foo and value = ../some/path, so it assumes the
+ * name=value splitting has already happened.
+ */
+ function stringDotToObj(result, prop, name, value) {
+ if (!result[prop]) {
+ result[prop] = {};
+ }
+ name = name.substring((prop + '.').length, name.length);
+ result[prop][name] = value;
+ }
+
+ //Used by convertArrayToObject to convert some things from prop.name=value
+ //to a prop: { name: value}
+ build.dotProps = [
+ 'paths.',
+ 'wrap.',
+ 'pragmas.',
+ 'pragmasOnSave.',
+ 'has.',
+ 'hasOnSave.',
+ 'wrap.',
+ 'uglify.',
+ 'closure.'
+ ];
+
+ build.hasDotPropMatch = function (prop) {
+ return build.dotProps.some(function (dotProp) {
+ return prop.indexOf(dotProp) === 0;
+ });
+ };
+
+ /**
+ * Converts an array that has String members of "name=value"
+ * into an object, where the properties on the object are the names in the array.
+ * Also converts the strings "true" and "false" to booleans for the values.
+ * member name/value pairs, and converts some comma-separated lists into
+ * arrays.
+ * @param {Array} ary
+ */
+ build.convertArrayToObject = function (ary) {
+ var result = {}, i, separatorIndex, prop, value,
+ needArray = {
+ "include": true,
+ "exclude": true,
+ "excludeShallow": true
+ };
+
+ for (i = 0; i < ary.length; i++) {
+ separatorIndex = ary[i].indexOf("=");
+ if (separatorIndex === -1) {
+ throw "Malformed name/value pair: [" + ary[i] + "]. Format should be name=value";
+ }
+
+ value = ary[i].substring(separatorIndex + 1, ary[i].length);
+ if (value === "true") {
+ value = true;
+ } else if (value === "false") {
+ value = false;
+ }
+
+ prop = ary[i].substring(0, separatorIndex);
+
+ //Convert to array if necessary
+ if (needArray[prop]) {
+ value = value.split(",");
+ }
+
+ if (build.hasDotPropMatch(prop)) {
+ stringDotToObj(result, prop.split('.')[0], prop, value);
+ } else {
+ result[prop] = value;
+ }
+ }
+ return result; //Object
+ };
+
+ build.makeAbsPath = function (path, absFilePath) {
+ //Add abspath if necessary. If path starts with a slash or has a colon,
+ //then already is an abolute path.
+ if (path.indexOf('/') !== 0 && path.indexOf(':') === -1) {
+ path = absFilePath +
+ (absFilePath.charAt(absFilePath.length - 1) === '/' ? '' : '/') +
+ path;
+ path = file.normalize(path);
+ }
+ return path.replace(lang.backSlashRegExp, '/');
+ };
+
+ build.makeAbsObject = function (props, obj, absFilePath) {
+ var i, prop;
+ if (obj) {
+ for (i = 0; (prop = props[i]); i++) {
+ if (obj.hasOwnProperty(prop)) {
+ obj[prop] = build.makeAbsPath(obj[prop], absFilePath);
+ }
+ }
+ }
+ };
+
+ /**
+ * For any path in a possible config, make it absolute relative
+ * to the absFilePath passed in.
+ */
+ build.makeAbsConfig = function (config, absFilePath) {
+ var props, prop, i;
+
+ props = ["appDir", "dir", "baseUrl"];
+ for (i = 0; (prop = props[i]); i++) {
+ if (config[prop]) {
+ //Add abspath if necessary, make sure these paths end in
+ //slashes
+ if (prop === "baseUrl") {
+ config.originalBaseUrl = config.baseUrl;
+ if (config.appDir) {
+ //If baseUrl with an appDir, the baseUrl is relative to
+ //the appDir, *not* the absFilePath. appDir and dir are
+ //made absolute before baseUrl, so this will work.
+ config.baseUrl = build.makeAbsPath(config.originalBaseUrl, config.appDir);
+ } else {
+ //The dir output baseUrl is same as regular baseUrl, both
+ //relative to the absFilePath.
+ config.baseUrl = build.makeAbsPath(config[prop], absFilePath);
+ }
+ } else {
+ config[prop] = build.makeAbsPath(config[prop], absFilePath);
+ }
+
+ config[prop] = endsWithSlash(config[prop]);
+ }
+ }
+
+ //Do not allow URLs for paths resources.
+ if (config.paths) {
+ for (prop in config.paths) {
+ if (config.paths.hasOwnProperty(prop)) {
+ config.paths[prop] = build.makeAbsPath(config.paths[prop],
+ (config.baseUrl || absFilePath));
+ }
+ }
+ }
+
+ build.makeAbsObject(["out", "cssIn"], config, absFilePath);
+ build.makeAbsObject(["startFile", "endFile"], config.wrap, absFilePath);
+ };
+
+ build.nestedMix = {
+ paths: true,
+ has: true,
+ hasOnSave: true,
+ pragmas: true,
+ pragmasOnSave: true
+ };
+
+ /**
+ * Mixes additional source config into target config, and merges some
+ * nested config, like paths, correctly.
+ */
+ function mixConfig(target, source) {
+ var prop, value;
+
+ for (prop in source) {
+ if (source.hasOwnProperty(prop)) {
+ //If the value of the property is a plain object, then
+ //allow a one-level-deep mixing of it.
+ value = source[prop];
+ if (typeof value === 'object' && value &&
+ !lang.isArray(value) && !lang.isFunction(value) &&
+ !lang.isRegExp(value)) {
+ target[prop] = lang.mixin({}, target[prop], value, true);
+ } else {
+ target[prop] = value;
+ }
+ }
+ }
+ }
+
+ /**
+ * Creates a config object for an optimization build.
+ * It will also read the build profile if it is available, to create
+ * the configuration.
+ *
+ * @param {Object} cfg config options that take priority
+ * over defaults and ones in the build file. These options could
+ * be from a command line, for instance.
+ *
+ * @param {Object} the created config object.
+ */
+ build.createConfig = function (cfg) {
+ /*jslint evil: true */
+ var config = {}, buildFileContents, buildFileConfig, mainConfig,
+ mainConfigFile, prop, buildFile, absFilePath;
+
+ //Make sure all paths are relative to current directory.
+ absFilePath = file.absPath('.');
+ build.makeAbsConfig(cfg, absFilePath);
+ build.makeAbsConfig(buildBaseConfig, absFilePath);
+
+ lang.mixin(config, buildBaseConfig);
+ lang.mixin(config, cfg, true);
+
+ if (config.buildFile) {
+ //A build file exists, load it to get more config.
+ buildFile = file.absPath(config.buildFile);
+
+ //Find the build file, and make sure it exists, if this is a build
+ //that has a build profile, and not just command line args with an in=path
+ if (!file.exists(buildFile)) {
+ throw new Error("ERROR: build file does not exist: " + buildFile);
+ }
+
+ absFilePath = config.baseUrl = file.absPath(file.parent(buildFile));
+
+ //Load build file options.
+ buildFileContents = file.readFile(buildFile);
+ try {
+ buildFileConfig = eval("(" + buildFileContents + ")");
+ build.makeAbsConfig(buildFileConfig, absFilePath);
+
+ if (!buildFileConfig.out && !buildFileConfig.dir) {
+ buildFileConfig.dir = (buildFileConfig.baseUrl || config.baseUrl) + "/build/";
+ }
+
+ } catch (e) {
+ throw new Error("Build file " + buildFile + " is malformed: " + e);
+ }
+ }
+
+ mainConfigFile = config.mainConfigFile || (buildFileConfig && buildFileConfig.mainConfigFile);
+ if (mainConfigFile) {
+ mainConfigFile = build.makeAbsPath(mainConfigFile, absFilePath);
+ try {
+ mainConfig = parse.findConfig(mainConfigFile, file.readFile(mainConfigFile));
+ } catch (configError) {
+ throw new Error('The config in mainConfigFile ' +
+ mainConfigFile +
+ ' cannot be used because it cannot be evaluated' +
+ ' correctly while running in the optimizer. Try only' +
+ ' using a config that is also valid JSON, or do not use' +
+ ' mainConfigFile and instead copy the config values needed' +
+ ' into a build file or command line arguments given to the optimizer.');
+ }
+ if (mainConfig) {
+ //If no baseUrl, then use the directory holding the main config.
+ if (!mainConfig.baseUrl) {
+ mainConfig.baseUrl = mainConfigFile.substring(0, mainConfigFile.lastIndexOf('/'));
+ }
+ build.makeAbsConfig(mainConfig, mainConfigFile);
+ mixConfig(config, mainConfig);
+ }
+ }
+
+ //Mix in build file config, but only after mainConfig has been mixed in.
+ if (buildFileConfig) {
+ mixConfig(config, buildFileConfig);
+ }
+
+ //Re-apply the override config values. Command line
+ //args should take precedence over build file values.
+ mixConfig(config, cfg);
+
+
+ //Set final output dir
+ if (config.hasOwnProperty("baseUrl")) {
+ if (config.appDir) {
+ config.dirBaseUrl = build.makeAbsPath(config.originalBaseUrl, config.dir);
+ } else {
+ config.dirBaseUrl = config.dir || config.baseUrl;
+ }
+ //Make sure dirBaseUrl ends in a slash, since it is
+ //concatenated with other strings.
+ config.dirBaseUrl = endsWithSlash(config.dirBaseUrl);
+ }
+
+ //Check for errors in config
+ if (config.cssIn && !config.out) {
+ throw new Error("ERROR: 'out' option missing.");
+ }
+ if (!config.cssIn && !config.baseUrl) {
+ throw new Error("ERROR: 'baseUrl' option missing.");
+ }
+ if (!config.out && !config.dir) {
+ throw new Error('Missing either an "out" or "dir" config value. ' +
+ 'If using "appDir" for a full project optimization, ' +
+ 'use "dir". If you want to optimize to one file, ' +
+ 'use "out".');
+ }
+ if (config.appDir && config.out) {
+ throw new Error('"appDir" is not compatible with "out". Use "dir" ' +
+ 'instead. appDir is used to copy whole projects, ' +
+ 'where "out" is used to just optimize to one file.');
+ }
+ if (config.out && config.dir) {
+ throw new Error('The "out" and "dir" options are incompatible.' +
+ ' Use "out" if you are targeting a single file for' +
+ ' for optimization, and "dir" if you want the appDir' +
+ ' or baseUrl directories optimized.');
+ }
+
+ if ((config.name || config.include) && !config.modules) {
+ //Just need to build one file, but may be part of a whole appDir/
+ //baseUrl copy, but specified on the command line, so cannot do
+ //the modules array setup. So create a modules section in that
+ //case.
+ config.modules = [
+ {
+ name: config.name,
+ out: config.out,
+ include: config.include,
+ exclude: config.exclude,
+ excludeShallow: config.excludeShallow
+ }
+ ];
+ }
+
+ if (config.out && !config.cssIn) {
+ //Just one file to optimize.
+
+ //Does not have a build file, so set up some defaults.
+ //Optimizing CSS should not be allowed, unless explicitly
+ //asked for on command line. In that case the only task is
+ //to optimize a CSS file.
+ if (!cfg.optimizeCss) {
+ config.optimizeCss = "none";
+ }
+ }
+
+ //Do not allow URLs for paths resources.
+ if (config.paths) {
+ for (prop in config.paths) {
+ if (config.paths.hasOwnProperty(prop)) {
+ disallowUrls(config.paths[prop]);
+ }
+ }
+ }
+
+ //Get any wrap text.
+ try {
+ if (config.wrap) {
+ if (config.wrap === true) {
+ //Use default values.
+ config.wrap = {
+ start: '(function () {',
+ end: '}());'
+ };
+ } else {
+ config.wrap.start = config.wrap.start ||
+ file.readFile(build.makeAbsPath(config.wrap.startFile, absFilePath));
+ config.wrap.end = config.wrap.end ||
+ file.readFile(build.makeAbsPath(config.wrap.endFile, absFilePath));
+ }
+ }
+ } catch (wrapError) {
+ throw new Error('Malformed wrap config: need both start/end or ' +
+ 'startFile/endFile: ' + wrapError.toString());
+ }
+
+
+ //Set up proper info for namespaces and using namespaces in transport
+ //wrappings.
+ config.namespaceWithDot = config.namespace ? config.namespace + '.' : '';
+ config.anonDefRegExp = build.makeAnonDefRegExp(config.namespaceWithDot);
+
+ //Do final input verification
+ if (config.context) {
+ throw new Error('The build argument "context" is not supported' +
+ ' in a build. It should only be used in web' +
+ ' pages.');
+ }
+
+ //Set file.fileExclusionRegExp if desired
+ if ('fileExclusionRegExp' in config) {
+ if (typeof config.fileExclusionRegExp === "string") {
+ file.exclusionRegExp = new RegExp(config.fileExclusionRegExp);
+ } else {
+ file.exclusionRegExp = config.fileExclusionRegExp;
+ }
+ } else if ('dirExclusionRegExp' in config) {
+ //Set file.dirExclusionRegExp if desired, this is the old
+ //name for fileExclusionRegExp before 1.0.2. Support for backwards
+ //compatibility
+ file.exclusionRegExp = config.dirExclusionRegExp;
+ }
+
+ return config;
+ };
+
+ /**
+ * finds the module being built/optimized with the given moduleName,
+ * or returns null.
+ * @param {String} moduleName
+ * @param {Array} modules
+ * @returns {Object} the module object from the build profile, or null.
+ */
+ build.findBuildModule = function (moduleName, modules) {
+ var i, module;
+ for (i = 0; (module = modules[i]); i++) {
+ if (module.name === moduleName) {
+ return module;
+ }
+ }
+ return null;
+ };
+
+ /**
+ * Removes a module name and path from a layer, if it is supposed to be
+ * excluded from the layer.
+ * @param {String} moduleName the name of the module
+ * @param {String} path the file path for the module
+ * @param {Object} layer the layer to remove the module/path from
+ */
+ build.removeModulePath = function (module, path, layer) {
+ var index = layer.buildFilePaths.indexOf(path);
+ if (index !== -1) {
+ layer.buildFilePaths.splice(index, 1);
+ }
+
+ //Take it out of the specified modules. Specified modules are mostly
+ //used to find require modifiers.
+ delete layer.specified[module];
+ };
+
+ /**
+ * Uses the module build config object to trace the dependencies for the
+ * given module.
+ *
+ * @param {Object} module the module object from the build config info.
+ * @param {Object} the build config object.
+ *
+ * @returns {Object} layer information about what paths and modules should
+ * be in the flattened module.
+ */
+ build.traceDependencies = function (module, config) {
+ var include, override, layer, context, baseConfig, oldContext;
+
+ //Reset some state set up in requirePatch.js, and clean up require's
+ //current context.
+ oldContext = require._buildReset();
+
+ //Grab the reset layer and context after the reset, but keep the
+ //old config to reuse in the new context.
+ baseConfig = oldContext.config;
+ layer = require._layer;
+ context = layer.context;
+
+ //Put back basic config, use a fresh object for it.
+ //WARNING: probably not robust for paths and packages/packagePaths,
+ //since those property's objects can be modified. But for basic
+ //config clone it works out.
+ require(lang.delegate(baseConfig));
+
+ logger.trace("\nTracing dependencies for: " + (module.name || module.out));
+ include = module.name && !module.create ? [module.name] : [];
+ if (module.include) {
+ include = include.concat(module.include);
+ }
+
+ //If there are overrides to basic config, set that up now.;
+ if (module.override) {
+ override = lang.delegate(baseConfig);
+ lang.mixin(override, module.override, true);
+ require(override);
+ }
+
+ //Figure out module layer dependencies by calling require to do the work.
+ require(include);
+
+ //Pull out the layer dependencies.
+ layer.specified = context.specified;
+
+ //Reset config
+ if (module.override) {
+ require(baseConfig);
+ }
+
+ return layer;
+ };
+
+ /**
+ * Uses the module build config object to create an flattened version
+ * of the module, with deep dependencies included.
+ *
+ * @param {Object} module the module object from the build config info.
+ *
+ * @param {Object} layer the layer object returned from build.traceDependencies.
+ *
+ * @param {Object} the build config object.
+ *
+ * @returns {Object} with two properties: "text", the text of the flattened
+ * module, and "buildText", a string of text representing which files were
+ * included in the flattened module text.
+ */
+ build.flattenModule = function (module, layer, config) {
+ var buildFileContents = "",
+ namespace = config.namespace ? config.namespace + '.' : '',
+ context = layer.context,
+ anonDefRegExp = config.anonDefRegExp,
+ path, reqIndex, fileContents, currContents,
+ i, moduleName,
+ parts, builder, writeApi;
+
+ //Use override settings, particularly for pragmas
+ if (module.override) {
+ config = lang.delegate(config);
+ lang.mixin(config, module.override, true);
+ }
+
+ //Start build output for the module.
+ buildFileContents += "\n" +
+ (config.dir ? module._buildPath.replace(config.dir, "") : module._buildPath) +
+ "\n----------------\n";
+
+ //If there was an existing file with require in it, hoist to the top.
+ if (layer.existingRequireUrl) {
+ reqIndex = layer.buildFilePaths.indexOf(layer.existingRequireUrl);
+ if (reqIndex !== -1) {
+ layer.buildFilePaths.splice(reqIndex, 1);
+ layer.buildFilePaths.unshift(layer.existingRequireUrl);
+ }
+ }
+
+ //Write the built module to disk, and build up the build output.
+ fileContents = "";
+ for (i = 0; (path = layer.buildFilePaths[i]); i++) {
+ moduleName = layer.buildFileToModule[path];
+
+ //Figure out if the module is a result of a build plugin, and if so,
+ //then delegate to that plugin.
+ parts = context.makeModuleMap(moduleName);
+ builder = parts.prefix && context.defined[parts.prefix];
+ if (builder) {
+ if (builder.write) {
+ writeApi = function (input) {
+ fileContents += "\n" + addSemiColon(input);
+ if (config.onBuildWrite) {
+ fileContents = config.onBuildWrite(moduleName, path, fileContents);
+ }
+ };
+ writeApi.asModule = function (moduleName, input) {
+ fileContents += "\n" +
+ addSemiColon(
+ build.toTransport(anonDefRegExp, namespace, moduleName, path, input, layer));
+ if (config.onBuildWrite) {
+ fileContents = config.onBuildWrite(moduleName, path, fileContents);
+ }
+ };
+ builder.write(parts.prefix, parts.name, writeApi);
+ }
+ } else {
+ currContents = file.readFile(path);
+
+ if (config.onBuildRead) {
+ currContents = config.onBuildRead(moduleName, path, currContents);
+ }
+
+ if (config.namespace) {
+ currContents = pragma.namespace(currContents, config.namespace);
+ }
+
+ currContents = build.toTransport(anonDefRegExp, namespace, moduleName, path, currContents, layer);
+
+ if (config.onBuildWrite) {
+ currContents = config.onBuildWrite(moduleName, path, currContents);
+ }
+
+ //Semicolon is for files that are not well formed when
+ //concatenated with other content.
+ fileContents += "\n" + addSemiColon(currContents);
+ }
+
+ buildFileContents += path.replace(config.dir, "") + "\n";
+ //Some files may not have declared a require module, and if so,
+ //put in a placeholder call so the require does not try to load them
+ //after the module is processed.
+ //If we have a name, but no defined module, then add in the placeholder.
+ if (moduleName && !layer.modulesWithNames[moduleName] && !config.skipModuleInsertion) {
+ //If including jquery, register the module correctly, otherwise
+ //register an empty function. For jquery, make sure jQuery is
+ //a real object, and perhaps not some other file mapping, like
+ //to zepto.
+ if (moduleName === 'jquery') {
+ fileContents += '\n(function () {\n' +
+ 'var jq = typeof jQuery !== "undefined" && jQuery;\n' +
+ namespace +
+ 'define("jquery", [], function () { return jq; });\n' +
+ '}());\n';
+ } else {
+ fileContents += '\n' + namespace + 'define("' + moduleName + '", function(){});\n';
+ }
+ }
+ }
+
+ return {
+ text: config.wrap ?
+ config.wrap.start + fileContents + config.wrap.end :
+ fileContents,
+ buildText: buildFileContents
+ };
+ };
+
+ /**
+ * Creates the regexp to find anonymous defines.
+ * @param {String} namespace an optional namespace to use. The namespace
+ * should *include* a trailing dot. So a valid value would be 'foo.'
+ * @returns {RegExp}
+ */
+ build.makeAnonDefRegExp = function (namespace) {
+ //This regexp is not bullet-proof, and it has one optional part to
+ //avoid issues with some Dojo transition modules that use a
+ //define(\n//begin v1.x content
+ //for a comment.
+ return new RegExp('(^|[^\\.])(' + (namespace || '').replace(/\./g, '\\.') +
+ 'define|define)\\s*\\(\\s*(\\/\\/[^\\n\\r]*[\\r\\n])?(\\[|function|[\\w\\d_\\-\\$]+\\s*\\)|\\{|["\']([^"\']+)["\'])(\\s*,\\s*f)?');
+ };
+
+ build.leadingCommaRegExp = /^\s*,/;
+
+ build.toTransport = function (anonDefRegExp, namespace, moduleName, path, contents, layer) {
+
+ //If anonymous module, insert the module name.
+ return contents.replace(anonDefRegExp, function (match, start, callName, possibleComment, suffix, namedModule, namedFuncStart) {
+ //A named module with either listed dependencies or an object
+ //literal for a value. Skip it. If named module, only want ones
+ //whose next argument is a function literal to scan for
+ //require('') dependecies.
+ if (namedModule && !namedFuncStart) {
+ return match;
+ }
+
+ //Only mark this module as having a name if not a named module,
+ //or if a named module and the name matches expectations.
+ if (layer && (!namedModule || namedModule === moduleName)) {
+ layer.modulesWithNames[moduleName] = true;
+ }
+
+ var deps = null;
+
+ //Look for CommonJS require calls inside the function if this is
+ //an anonymous define call that just has a function registered.
+ //Also look if a named define function but has a factory function
+ //as the second arg that should be scanned for dependencies.
+ if (suffix.indexOf('f') !== -1 || (namedModule)) {
+ deps = parse.getAnonDeps(path, contents);
+
+ if (deps.length) {
+ deps = deps.map(function (dep) {
+ return "'" + dep + "'";
+ });
+ } else {
+ deps = [];
+ }
+ }
+
+ return start + namespace + "define('" + (namedModule || moduleName) + "'," +
+ (deps ? ('[' + deps.toString() + '],') : '') +
+ (namedModule ? namedFuncStart.replace(build.leadingCommaRegExp, '') : suffix);
+ });
+
+ };
+
+ return build;
+});
+
+ }
+
+
+ /**
+ * Sets the default baseUrl for requirejs to be directory of top level
+ * script.
+ */
+ function setBaseUrl(fileName) {
+ //Use the file name's directory as the baseUrl if available.
+ dir = fileName.replace(/\\/g, '/');
+ if (dir.indexOf('/') !== -1) {
+ dir = dir.split('/');
+ dir.pop();
+ dir = dir.join('/');
+ exec("require({baseUrl: '" + dir + "'});");
+ }
+ }
+
+ //If in Node, and included via a require('requirejs'), just export and
+ //THROW IT ON THE GROUND!
+ if (env === 'node' && reqMain !== module) {
+ setBaseUrl(path.resolve(reqMain ? reqMain.filename : '.'));
+
+ //Create a method that will run the optimzer given an object
+ //config.
+ requirejs.optimize = function (config, callback) {
+ if (!loadedOptimizedLib) {
+ loadLib();
+ loadedOptimizedLib = true;
+ }
+
+ //Create the function that will be called once build modules
+ //have been loaded.
+ var runBuild = function (build, logger) {
+ //Make sure config has a log level, and if not,
+ //make it "silent" by default.
+ config.logLevel = config.hasOwnProperty('logLevel') ?
+ config.logLevel : logger.SILENT;
+
+ var result = build(config);
+
+ //Reset build internals on each run.
+ requirejs._buildReset();
+
+ if (callback) {
+ callback(result);
+ }
+ };
+
+ //Enable execution of this callback in a build setting.
+ //Normally, once requirePatch is run, by default it will
+ //not execute callbacks, unless this property is set on
+ //the callback.
+ runBuild.__requireJsBuild = true;
+
+ requirejs({
+ context: 'build'
+ }, ['build', 'logger'], runBuild);
+ };
+
+ requirejs.tools = {
+ useLib: function (contextName, callback) {
+ if (!callback) {
+ callback = contextName;
+ contextName = 'uselib';
+ }
+
+ if (!useLibLoaded[contextName]) {
+ loadLib();
+ useLibLoaded[contextName] = true;
+ }
+
+ var req = requirejs({
+ context: contextName,
+ requireLoad: requirejsVars.nodeLoad,
+ requireExecCb: requirejsVars.nodeRequireExecCb
+ });
+
+ req(['build'], function () {
+ callback(req);
+ });
+ }
+ };
+
+ requirejs.define = define;
+
+ module.exports = requirejs;
+ return;
+ }
+
+ if (commandOption === 'o') {
+ //Do the optimizer work.
+ loadLib();
+
+ /**
+ * @license Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+
+/*
+ * Create a build.js file that has the build options you want and pass that
+ * build file to this file to do the build. See example.build.js for more information.
+ */
+
+/*jslint strict: false, nomen: false */
+/*global require: false */
+
+require({
+ baseUrl: require.s.contexts._.config.baseUrl,
+ //Use a separate context than the default context so that the
+ //build can use the default context.
+ context: 'build',
+ catchError: {
+ define: true
+ }
+}, ['env!env/args', 'build'],
+function (args, build) {
+ build(args);
+});
+
+
+ } else if (commandOption === 'v') {
+ console.log('r.js: ' + version + ', RequireJS: ' + this.requirejsVars.require.version);
+ } else if (commandOption === 'convert') {
+ loadLib();
+
+ this.requirejsVars.require(['env!env/args', 'commonJs', 'env!env/print'],
+ function (args, commonJs, print) {
+
+ var srcDir, outDir;
+ srcDir = args[0];
+ outDir = args[1];
+
+ if (!srcDir || !outDir) {
+ print('Usage: path/to/commonjs/modules output/dir');
+ return;
+ }
+
+ commonJs.convertDir(args[0], args[1]);
+ });
+ } else {
+ //Just run an app
+
+ //Load the bundled libraries for use in the app.
+ if (commandOption === 'lib') {
+ loadLib();
+ }
+
+ setBaseUrl(fileName);
+
+ if (exists(fileName)) {
+ exec(readFile(fileName), fileName);
+ } else {
+ showHelp();
+ }
+ }
+
+}((typeof console !== 'undefined' ? console : undefined),
+ (typeof Packages !== 'undefined' ? Array.prototype.slice.call(arguments, 0) : []),
+ (typeof readFile !== 'undefined' ? readFile : undefined)));
--- /dev/null
+/** @license
+ * Plugin to load JS files that have dependencies but aren't wrapped into
+ * `define` calls.
+ * Author: Miller Medeiros
+ * Version: 0.1.0 (2011/12/13)
+ * Released under the MIT license
+ */
+define(function () {
+
+ var rParts = /^(.*)\[([^\]]*)\]$/;
+
+ return {
+
+ //example: depend!bar[jquery,lib/foo]
+ load : function(name, req, onLoad, config){
+ var parts = rParts.exec(name);
+
+ req(parts[2].split(','), function(){
+ req([parts[1]], function(mod){
+ onLoad(mod);
+ });
+ });
+ }
+
+ };
+
+});
\ No newline at end of file
--- /dev/null
+/**
+ * @license RequireJS order 1.0.0 Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+/*jslint nomen: false, plusplus: false, strict: false */
+/*global require: false, define: false, window: false, document: false,
+ setTimeout: false */
+
+//Specify that requirejs optimizer should wrap this code in a closure that
+//maps the namespaced requirejs API to non-namespaced local variables.
+/*requirejs namespace: true */
+
+(function () {
+
+ //Sadly necessary browser inference due to differences in the way
+ //that browsers load and execute dynamically inserted javascript
+ //and whether the script/cache method works when ordered execution is
+ //desired. Currently, Gecko and Opera do not load/fire onload for scripts with
+ //type="script/cache" but they execute injected scripts in order
+ //unless the 'async' flag is present.
+ //However, this is all changing in latest browsers implementing HTML5
+ //spec. With compliant browsers .async true by default, and
+ //if false, then it will execute in order. Favor that test first for forward
+ //compatibility.
+ var testScript = typeof document !== "undefined" &&
+ typeof window !== "undefined" &&
+ document.createElement("script"),
+
+ supportsInOrderExecution = testScript && (testScript.async ||
+ ((window.opera &&
+ Object.prototype.toString.call(window.opera) === "[object Opera]") ||
+ //If Firefox 2 does not have to be supported, then
+ //a better check may be:
+ //('mozIsLocallyAvailable' in window.navigator)
+ ("MozAppearance" in document.documentElement.style))),
+
+ //This test is true for IE browsers, which will load scripts but only
+ //execute them once the script is added to the DOM.
+ supportsLoadSeparateFromExecute = testScript &&
+ testScript.readyState === 'uninitialized',
+
+ readyRegExp = /^(complete|loaded)$/,
+ cacheWaiting = [],
+ cached = {},
+ scriptNodes = {},
+ scriptWaiting = [];
+
+ //Done with the test script.
+ testScript = null;
+
+ //Callback used by the type="script/cache" callback that indicates a script
+ //has finished downloading.
+ function scriptCacheCallback(evt) {
+ var node = evt.currentTarget || evt.srcElement, i,
+ moduleName, resource;
+
+ if (evt.type === "load" || readyRegExp.test(node.readyState)) {
+ //Pull out the name of the module and the context.
+ moduleName = node.getAttribute("data-requiremodule");
+
+ //Mark this cache request as loaded
+ cached[moduleName] = true;
+
+ //Find out how many ordered modules have loaded
+ for (i = 0; (resource = cacheWaiting[i]); i++) {
+ if (cached[resource.name]) {
+ resource.req([resource.name], resource.onLoad);
+ } else {
+ //Something in the ordered list is not loaded,
+ //so wait.
+ break;
+ }
+ }
+
+ //If just loaded some items, remove them from cacheWaiting.
+ if (i > 0) {
+ cacheWaiting.splice(0, i);
+ }
+
+ //Remove this script tag from the DOM
+ //Use a setTimeout for cleanup because some older IE versions vomit
+ //if removing a script node while it is being evaluated.
+ setTimeout(function () {
+ node.parentNode.removeChild(node);
+ }, 15);
+ }
+ }
+
+ /**
+ * Used for the IE case, where fetching is done by creating script element
+ * but not attaching it to the DOM. This function will be called when that
+ * happens so it can be determined when the node can be attached to the
+ * DOM to trigger its execution.
+ */
+ function onFetchOnly(node) {
+ var i, loadedNode, resourceName;
+
+ //Mark this script as loaded.
+ node.setAttribute('data-orderloaded', 'loaded');
+
+ //Cycle through waiting scripts. If the matching node for them
+ //is loaded, and is in the right order, add it to the DOM
+ //to execute the script.
+ for (i = 0; (resourceName = scriptWaiting[i]); i++) {
+ loadedNode = scriptNodes[resourceName];
+ if (loadedNode &&
+ loadedNode.getAttribute('data-orderloaded') === 'loaded') {
+ delete scriptNodes[resourceName];
+ require.addScriptToDom(loadedNode);
+ } else {
+ break;
+ }
+ }
+
+ //If just loaded some items, remove them from waiting.
+ if (i > 0) {
+ scriptWaiting.splice(0, i);
+ }
+ }
+
+ define({
+ version: '1.0.0',
+
+ load: function (name, req, onLoad, config) {
+ var url = req.nameToUrl(name, null),
+ node, context;
+
+ //Make sure the async attribute is not set for any pathway involving
+ //this script.
+ require.s.skipAsync[url] = true;
+ if (supportsInOrderExecution || config.isBuild) {
+ //Just a normal script tag append, but without async attribute
+ //on the script.
+ req([name], onLoad);
+ } else if (supportsLoadSeparateFromExecute) {
+ //Just fetch the URL, but do not execute it yet. The
+ //non-standards IE case. Really not so nice because it is
+ //assuming and touching requrejs internals. OK though since
+ //ordered execution should go away after a long while.
+ context = require.s.contexts._;
+
+ if (!context.urlFetched[url] && !context.loaded[name]) {
+ //Indicate the script is being fetched.
+ context.urlFetched[url] = true;
+
+ //Stuff from require.load
+ require.resourcesReady(false);
+ context.scriptCount += 1;
+
+ //Fetch the script now, remember it.
+ node = require.attach(url, context, name, null, null, onFetchOnly);
+ scriptNodes[name] = node;
+ scriptWaiting.push(name);
+ }
+
+ //Do a normal require for it, once it loads, use it as return
+ //value.
+ req([name], onLoad);
+ } else {
+ //Credit to LABjs author Kyle Simpson for finding that scripts
+ //with type="script/cache" allow scripts to be downloaded into
+ //browser cache but not executed. Use that
+ //so that subsequent addition of a real type="text/javascript"
+ //tag will cause the scripts to be executed immediately in the
+ //correct order.
+ if (req.specified(name)) {
+ req([name], onLoad);
+ } else {
+ cacheWaiting.push({
+ name: name,
+ req: req,
+ onLoad: onLoad
+ });
+ require.attach(url, null, name, scriptCacheCallback, "script/cache");
+ }
+ }
+ }
+ });
+}());
--- /dev/null
+/** vim: et:ts=4:sw=4:sts=4
+ * @license RequireJS 1.0.6 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+/*jslint strict: false, plusplus: false, sub: true */
+/*global window, navigator, document, importScripts, jQuery, setTimeout, opera */
+
+var requirejs, require, define;
+(function () {
+ //Change this version number for each release.
+ var version = "1.0.6",
+ commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,
+ cjsRequireRegExp = /require\(\s*["']([^'"\s]+)["']\s*\)/g,
+ currDirRegExp = /^\.\//,
+ jsSuffixRegExp = /\.js$/,
+ ostring = Object.prototype.toString,
+ ap = Array.prototype,
+ aps = ap.slice,
+ apsp = ap.splice,
+ isBrowser = !!(typeof window !== "undefined" && navigator && document),
+ isWebWorker = !isBrowser && typeof importScripts !== "undefined",
+ //PS3 indicates loaded and complete, but need to wait for complete
+ //specifically. Sequence is "loading", "loaded", execution,
+ // then "complete". The UA check is unfortunate, but not sure how
+ //to feature test w/o causing perf issues.
+ readyRegExp = isBrowser && navigator.platform === 'PLAYSTATION 3' ?
+ /^complete$/ : /^(complete|loaded)$/,
+ defContextName = "_",
+ //Oh the tragedy, detecting opera. See the usage of isOpera for reason.
+ isOpera = typeof opera !== "undefined" && opera.toString() === "[object Opera]",
+ empty = {},
+ contexts = {},
+ globalDefQueue = [],
+ interactiveScript = null,
+ checkLoadedDepth = 0,
+ useInteractive = false,
+ reservedDependencies = {
+ require: true,
+ module: true,
+ exports: true
+ },
+ req, cfg = {}, currentlyAddingScript, s, head, baseElement, scripts, script,
+ src, subPath, mainScript, dataMain, globalI, ctx, jQueryCheck, checkLoadedTimeoutId;
+
+ function isFunction(it) {
+ return ostring.call(it) === "[object Function]";
+ }
+
+ function isArray(it) {
+ return ostring.call(it) === "[object Array]";
+ }
+
+ /**
+ * Simple function to mix in properties from source into target,
+ * but only if target does not already have a property of the same name.
+ * This is not robust in IE for transferring methods that match
+ * Object.prototype names, but the uses of mixin here seem unlikely to
+ * trigger a problem related to that.
+ */
+ function mixin(target, source, force) {
+ for (var prop in source) {
+ if (!(prop in empty) && (!(prop in target) || force)) {
+ target[prop] = source[prop];
+ }
+ }
+ return req;
+ }
+
+ /**
+ * Constructs an error with a pointer to an URL with more information.
+ * @param {String} id the error ID that maps to an ID on a web page.
+ * @param {String} message human readable error.
+ * @param {Error} [err] the original error, if there is one.
+ *
+ * @returns {Error}
+ */
+ function makeError(id, msg, err) {
+ var e = new Error(msg + '\nhttp://requirejs.org/docs/errors.html#' + id);
+ if (err) {
+ e.originalError = err;
+ }
+ return e;
+ }
+
+ /**
+ * Used to set up package paths from a packagePaths or packages config object.
+ * @param {Object} pkgs the object to store the new package config
+ * @param {Array} currentPackages an array of packages to configure
+ * @param {String} [dir] a prefix dir to use.
+ */
+ function configurePackageDir(pkgs, currentPackages, dir) {
+ var i, location, pkgObj;
+
+ for (i = 0; (pkgObj = currentPackages[i]); i++) {
+ pkgObj = typeof pkgObj === "string" ? { name: pkgObj } : pkgObj;
+ location = pkgObj.location;
+
+ //Add dir to the path, but avoid paths that start with a slash
+ //or have a colon (indicates a protocol)
+ if (dir && (!location || (location.indexOf("/") !== 0 && location.indexOf(":") === -1))) {
+ location = dir + "/" + (location || pkgObj.name);
+ }
+
+ //Create a brand new object on pkgs, since currentPackages can
+ //be passed in again, and config.pkgs is the internal transformed
+ //state for all package configs.
+ pkgs[pkgObj.name] = {
+ name: pkgObj.name,
+ location: location || pkgObj.name,
+ //Remove leading dot in main, so main paths are normalized,
+ //and remove any trailing .js, since different package
+ //envs have different conventions: some use a module name,
+ //some use a file name.
+ main: (pkgObj.main || "main")
+ .replace(currDirRegExp, '')
+ .replace(jsSuffixRegExp, '')
+ };
+ }
+ }
+
+ /**
+ * jQuery 1.4.3-1.5.x use a readyWait/ready() pairing to hold DOM
+ * ready callbacks, but jQuery 1.6 supports a holdReady() API instead.
+ * At some point remove the readyWait/ready() support and just stick
+ * with using holdReady.
+ */
+ function jQueryHoldReady($, shouldHold) {
+ if ($.holdReady) {
+ $.holdReady(shouldHold);
+ } else if (shouldHold) {
+ $.readyWait += 1;
+ } else {
+ $.ready(true);
+ }
+ }
+
+ if (typeof define !== "undefined") {
+ //If a define is already in play via another AMD loader,
+ //do not overwrite.
+ return;
+ }
+
+ if (typeof requirejs !== "undefined") {
+ if (isFunction(requirejs)) {
+ //Do not overwrite and existing requirejs instance.
+ return;
+ } else {
+ cfg = requirejs;
+ requirejs = undefined;
+ }
+ }
+
+ //Allow for a require config object
+ if (typeof require !== "undefined" && !isFunction(require)) {
+ //assume it is a config object.
+ cfg = require;
+ require = undefined;
+ }
+
+ /**
+ * Creates a new context for use in require and define calls.
+ * Handle most of the heavy lifting. Do not want to use an object
+ * with prototype here to avoid using "this" in require, in case it
+ * needs to be used in more super secure envs that do not want this.
+ * Also there should not be that many contexts in the page. Usually just
+ * one for the default context, but could be extra for multiversion cases
+ * or if a package needs a special context for a dependency that conflicts
+ * with the standard context.
+ */
+ function newContext(contextName) {
+ var context, resume,
+ config = {
+ waitSeconds: 7,
+ baseUrl: "./",
+ paths: {},
+ pkgs: {},
+ catchError: {}
+ },
+ defQueue = [],
+ specified = {
+ "require": true,
+ "exports": true,
+ "module": true
+ },
+ urlMap = {},
+ defined = {},
+ loaded = {},
+ waiting = {},
+ waitAry = [],
+ urlFetched = {},
+ managerCounter = 0,
+ managerCallbacks = {},
+ plugins = {},
+ //Used to indicate which modules in a build scenario
+ //need to be full executed.
+ needFullExec = {},
+ fullExec = {},
+ resumeDepth = 0;
+
+ /**
+ * Trims the . and .. from an array of path segments.
+ * It will keep a leading path segment if a .. will become
+ * the first path segment, to help with module name lookups,
+ * which act like paths, but can be remapped. But the end result,
+ * all paths that use this function should look normalized.
+ * NOTE: this method MODIFIES the input array.
+ * @param {Array} ary the array of path segments.
+ */
+ function trimDots(ary) {
+ var i, part;
+ for (i = 0; (part = ary[i]); i++) {
+ if (part === ".") {
+ ary.splice(i, 1);
+ i -= 1;
+ } else if (part === "..") {
+ if (i === 1 && (ary[2] === '..' || ary[0] === '..')) {
+ //End of the line. Keep at least one non-dot
+ //path segment at the front so it can be mapped
+ //correctly to disk. Otherwise, there is likely
+ //no path mapping for a path starting with '..'.
+ //This can still fail, but catches the most reasonable
+ //uses of ..
+ break;
+ } else if (i > 0) {
+ ary.splice(i - 1, 2);
+ i -= 2;
+ }
+ }
+ }
+ }
+
+ /**
+ * Given a relative module name, like ./something, normalize it to
+ * a real name that can be mapped to a path.
+ * @param {String} name the relative name
+ * @param {String} baseName a real name that the name arg is relative
+ * to.
+ * @returns {String} normalized name
+ */
+ function normalize(name, baseName) {
+ var pkgName, pkgConfig;
+
+ //Adjust any relative paths.
+ if (name && name.charAt(0) === ".") {
+ //If have a base name, try to normalize against it,
+ //otherwise, assume it is a top-level require that will
+ //be relative to baseUrl in the end.
+ if (baseName) {
+ if (config.pkgs[baseName]) {
+ //If the baseName is a package name, then just treat it as one
+ //name to concat the name with.
+ baseName = [baseName];
+ } else {
+ //Convert baseName to array, and lop off the last part,
+ //so that . matches that "directory" and not name of the baseName's
+ //module. For instance, baseName of "one/two/three", maps to
+ //"one/two/three.js", but we want the directory, "one/two" for
+ //this normalization.
+ baseName = baseName.split("/");
+ baseName = baseName.slice(0, baseName.length - 1);
+ }
+
+ name = baseName.concat(name.split("/"));
+ trimDots(name);
+
+ //Some use of packages may use a . path to reference the
+ //"main" module name, so normalize for that.
+ pkgConfig = config.pkgs[(pkgName = name[0])];
+ name = name.join("/");
+ if (pkgConfig && name === pkgName + '/' + pkgConfig.main) {
+ name = pkgName;
+ }
+ } else if (name.indexOf("./") === 0) {
+ // No baseName, so this is ID is resolved relative
+ // to baseUrl, pull off the leading dot.
+ name = name.substring(2);
+ }
+ }
+ return name;
+ }
+
+ /**
+ * Creates a module mapping that includes plugin prefix, module
+ * name, and path. If parentModuleMap is provided it will
+ * also normalize the name via require.normalize()
+ *
+ * @param {String} name the module name
+ * @param {String} [parentModuleMap] parent module map
+ * for the module name, used to resolve relative names.
+ *
+ * @returns {Object}
+ */
+ function makeModuleMap(name, parentModuleMap) {
+ var index = name ? name.indexOf("!") : -1,
+ prefix = null,
+ parentName = parentModuleMap ? parentModuleMap.name : null,
+ originalName = name,
+ normalizedName, url, pluginModule;
+
+ if (index !== -1) {
+ prefix = name.substring(0, index);
+ name = name.substring(index + 1, name.length);
+ }
+
+ if (prefix) {
+ prefix = normalize(prefix, parentName);
+ }
+
+ //Account for relative paths if there is a base name.
+ if (name) {
+ if (prefix) {
+ pluginModule = defined[prefix];
+ if (pluginModule && pluginModule.normalize) {
+ //Plugin is loaded, use its normalize method.
+ normalizedName = pluginModule.normalize(name, function (name) {
+ return normalize(name, parentName);
+ });
+ } else {
+ normalizedName = normalize(name, parentName);
+ }
+ } else {
+ //A regular module.
+ normalizedName = normalize(name, parentName);
+
+ url = urlMap[normalizedName];
+ if (!url) {
+ //Calculate url for the module, if it has a name.
+ //Use name here since nameToUrl also calls normalize,
+ //and for relative names that are outside the baseUrl
+ //this causes havoc. Was thinking of just removing
+ //parentModuleMap to avoid extra normalization, but
+ //normalize() still does a dot removal because of
+ //issue #142, so just pass in name here and redo
+ //the normalization. Paths outside baseUrl are just
+ //messy to support.
+ url = context.nameToUrl(name, null, parentModuleMap);
+
+ //Store the URL mapping for later.
+ urlMap[normalizedName] = url;
+ }
+ }
+ }
+
+ return {
+ prefix: prefix,
+ name: normalizedName,
+ parentMap: parentModuleMap,
+ url: url,
+ originalName: originalName,
+ fullName: prefix ? prefix + "!" + (normalizedName || '') : normalizedName
+ };
+ }
+
+ /**
+ * Determine if priority loading is done. If so clear the priorityWait
+ */
+ function isPriorityDone() {
+ var priorityDone = true,
+ priorityWait = config.priorityWait,
+ priorityName, i;
+ if (priorityWait) {
+ for (i = 0; (priorityName = priorityWait[i]); i++) {
+ if (!loaded[priorityName]) {
+ priorityDone = false;
+ break;
+ }
+ }
+ if (priorityDone) {
+ delete config.priorityWait;
+ }
+ }
+ return priorityDone;
+ }
+
+ function makeContextModuleFunc(func, relModuleMap, enableBuildCallback) {
+ return function () {
+ //A version of a require function that passes a moduleName
+ //value for items that may need to
+ //look up paths relative to the moduleName
+ var args = aps.call(arguments, 0), lastArg;
+ if (enableBuildCallback &&
+ isFunction((lastArg = args[args.length - 1]))) {
+ lastArg.__requireJsBuild = true;
+ }
+ args.push(relModuleMap);
+ return func.apply(null, args);
+ };
+ }
+
+ /**
+ * Helper function that creates a require function object to give to
+ * modules that ask for it as a dependency. It needs to be specific
+ * per module because of the implication of path mappings that may
+ * need to be relative to the module name.
+ */
+ function makeRequire(relModuleMap, enableBuildCallback, altRequire) {
+ var modRequire = makeContextModuleFunc(altRequire || context.require, relModuleMap, enableBuildCallback);
+
+ mixin(modRequire, {
+ nameToUrl: makeContextModuleFunc(context.nameToUrl, relModuleMap),
+ toUrl: makeContextModuleFunc(context.toUrl, relModuleMap),
+ defined: makeContextModuleFunc(context.requireDefined, relModuleMap),
+ specified: makeContextModuleFunc(context.requireSpecified, relModuleMap),
+ isBrowser: req.isBrowser
+ });
+ return modRequire;
+ }
+
+ /*
+ * Queues a dependency for checking after the loader is out of a
+ * "paused" state, for example while a script file is being loaded
+ * in the browser, where it may have many modules defined in it.
+ */
+ function queueDependency(manager) {
+ context.paused.push(manager);
+ }
+
+ function execManager(manager) {
+ var i, ret, err, errFile, errModuleTree,
+ cb = manager.callback,
+ map = manager.map,
+ fullName = map.fullName,
+ args = manager.deps,
+ listeners = manager.listeners,
+ cjsModule;
+
+ //Call the callback to define the module, if necessary.
+ if (cb && isFunction(cb)) {
+ if (config.catchError.define) {
+ try {
+ ret = req.execCb(fullName, manager.callback, args, defined[fullName]);
+ } catch (e) {
+ err = e;
+ }
+ } else {
+ ret = req.execCb(fullName, manager.callback, args, defined[fullName]);
+ }
+
+ if (fullName) {
+ //If setting exports via "module" is in play,
+ //favor that over return value and exports. After that,
+ //favor a non-undefined return value over exports use.
+ cjsModule = manager.cjsModule;
+ if (cjsModule &&
+ cjsModule.exports !== undefined &&
+ //Make sure it is not already the exports value
+ cjsModule.exports !== defined[fullName]) {
+ ret = defined[fullName] = manager.cjsModule.exports;
+ } else if (ret === undefined && manager.usingExports) {
+ //exports already set the defined value.
+ ret = defined[fullName];
+ } else {
+ //Use the return value from the function.
+ defined[fullName] = ret;
+ //If this module needed full execution in a build
+ //environment, mark that now.
+ if (needFullExec[fullName]) {
+ fullExec[fullName] = true;
+ }
+ }
+ }
+ } else if (fullName) {
+ //May just be an object definition for the module. Only
+ //worry about defining if have a module name.
+ ret = defined[fullName] = cb;
+
+ //If this module needed full execution in a build
+ //environment, mark that now.
+ if (needFullExec[fullName]) {
+ fullExec[fullName] = true;
+ }
+ }
+
+ //Clean up waiting. Do this before error calls, and before
+ //calling back listeners, so that bookkeeping is correct
+ //in the event of an error and error is reported in correct order,
+ //since the listeners will likely have errors if the
+ //onError function does not throw.
+ if (waiting[manager.id]) {
+ delete waiting[manager.id];
+ manager.isDone = true;
+ context.waitCount -= 1;
+ if (context.waitCount === 0) {
+ //Clear the wait array used for cycles.
+ waitAry = [];
+ }
+ }
+
+ //Do not need to track manager callback now that it is defined.
+ delete managerCallbacks[fullName];
+
+ //Allow instrumentation like the optimizer to know the order
+ //of modules executed and their dependencies.
+ if (req.onResourceLoad && !manager.placeholder) {
+ req.onResourceLoad(context, map, manager.depArray);
+ }
+
+ if (err) {
+ errFile = (fullName ? makeModuleMap(fullName).url : '') ||
+ err.fileName || err.sourceURL;
+ errModuleTree = err.moduleTree;
+ err = makeError('defineerror', 'Error evaluating ' +
+ 'module "' + fullName + '" at location "' +
+ errFile + '":\n' +
+ err + '\nfileName:' + errFile +
+ '\nlineNumber: ' + (err.lineNumber || err.line), err);
+ err.moduleName = fullName;
+ err.moduleTree = errModuleTree;
+ return req.onError(err);
+ }
+
+ //Let listeners know of this manager's value.
+ for (i = 0; (cb = listeners[i]); i++) {
+ cb(ret);
+ }
+
+ return undefined;
+ }
+
+ /**
+ * Helper that creates a callack function that is called when a dependency
+ * is ready, and sets the i-th dependency for the manager as the
+ * value passed to the callback generated by this function.
+ */
+ function makeArgCallback(manager, i) {
+ return function (value) {
+ //Only do the work if it has not been done
+ //already for a dependency. Cycle breaking
+ //logic in forceExec could mean this function
+ //is called more than once for a given dependency.
+ if (!manager.depDone[i]) {
+ manager.depDone[i] = true;
+ manager.deps[i] = value;
+ manager.depCount -= 1;
+ if (!manager.depCount) {
+ //All done, execute!
+ execManager(manager);
+ }
+ }
+ };
+ }
+
+ function callPlugin(pluginName, depManager) {
+ var map = depManager.map,
+ fullName = map.fullName,
+ name = map.name,
+ plugin = plugins[pluginName] ||
+ (plugins[pluginName] = defined[pluginName]),
+ load;
+
+ //No need to continue if the manager is already
+ //in the process of loading.
+ if (depManager.loading) {
+ return;
+ }
+ depManager.loading = true;
+
+ load = function (ret) {
+ depManager.callback = function () {
+ return ret;
+ };
+ execManager(depManager);
+
+ loaded[depManager.id] = true;
+
+ //The loading of this plugin
+ //might have placed other things
+ //in the paused queue. In particular,
+ //a loader plugin that depends on
+ //a different plugin loaded resource.
+ resume();
+ };
+
+ //Allow plugins to load other code without having to know the
+ //context or how to "complete" the load.
+ load.fromText = function (moduleName, text) {
+ /*jslint evil: true */
+ var hasInteractive = useInteractive;
+
+ //Indicate a the module is in process of loading.
+ loaded[moduleName] = false;
+ context.scriptCount += 1;
+
+ //Indicate this is not a "real" module, so do not track it
+ //for builds, it does not map to a real file.
+ context.fake[moduleName] = true;
+
+ //Turn off interactive script matching for IE for any define
+ //calls in the text, then turn it back on at the end.
+ if (hasInteractive) {
+ useInteractive = false;
+ }
+
+ req.exec(text);
+
+ if (hasInteractive) {
+ useInteractive = true;
+ }
+
+ //Support anonymous modules.
+ context.completeLoad(moduleName);
+ };
+
+ //No need to continue if the plugin value has already been
+ //defined by a build.
+ if (fullName in defined) {
+ load(defined[fullName]);
+ } else {
+ //Use parentName here since the plugin's name is not reliable,
+ //could be some weird string with no path that actually wants to
+ //reference the parentName's path.
+ plugin.load(name, makeRequire(map.parentMap, true, function (deps, cb) {
+ var moduleDeps = [],
+ i, dep, depMap;
+ //Convert deps to full names and hold on to them
+ //for reference later, when figuring out if they
+ //are blocked by a circular dependency.
+ for (i = 0; (dep = deps[i]); i++) {
+ depMap = makeModuleMap(dep, map.parentMap);
+ deps[i] = depMap.fullName;
+ if (!depMap.prefix) {
+ moduleDeps.push(deps[i]);
+ }
+ }
+ depManager.moduleDeps = (depManager.moduleDeps || []).concat(moduleDeps);
+ return context.require(deps, cb);
+ }), load, config);
+ }
+ }
+
+ /**
+ * Adds the manager to the waiting queue. Only fully
+ * resolved items should be in the waiting queue.
+ */
+ function addWait(manager) {
+ if (!waiting[manager.id]) {
+ waiting[manager.id] = manager;
+ waitAry.push(manager);
+ context.waitCount += 1;
+ }
+ }
+
+ /**
+ * Function added to every manager object. Created out here
+ * to avoid new function creation for each manager instance.
+ */
+ function managerAdd(cb) {
+ this.listeners.push(cb);
+ }
+
+ function getManager(map, shouldQueue) {
+ var fullName = map.fullName,
+ prefix = map.prefix,
+ plugin = prefix ? plugins[prefix] ||
+ (plugins[prefix] = defined[prefix]) : null,
+ manager, created, pluginManager, prefixMap;
+
+ if (fullName) {
+ manager = managerCallbacks[fullName];
+ }
+
+ if (!manager) {
+ created = true;
+ manager = {
+ //ID is just the full name, but if it is a plugin resource
+ //for a plugin that has not been loaded,
+ //then add an ID counter to it.
+ id: (prefix && !plugin ?
+ (managerCounter++) + '__p@:' : '') +
+ (fullName || '__r@' + (managerCounter++)),
+ map: map,
+ depCount: 0,
+ depDone: [],
+ depCallbacks: [],
+ deps: [],
+ listeners: [],
+ add: managerAdd
+ };
+
+ specified[manager.id] = true;
+
+ //Only track the manager/reuse it if this is a non-plugin
+ //resource. Also only track plugin resources once
+ //the plugin has been loaded, and so the fullName is the
+ //true normalized value.
+ if (fullName && (!prefix || plugins[prefix])) {
+ managerCallbacks[fullName] = manager;
+ }
+ }
+
+ //If there is a plugin needed, but it is not loaded,
+ //first load the plugin, then continue on.
+ if (prefix && !plugin) {
+ prefixMap = makeModuleMap(prefix);
+
+ //Clear out defined and urlFetched if the plugin was previously
+ //loaded/defined, but not as full module (as in a build
+ //situation). However, only do this work if the plugin is in
+ //defined but does not have a module export value.
+ if (prefix in defined && !defined[prefix]) {
+ delete defined[prefix];
+ delete urlFetched[prefixMap.url];
+ }
+
+ pluginManager = getManager(prefixMap, true);
+ pluginManager.add(function (plugin) {
+ //Create a new manager for the normalized
+ //resource ID and have it call this manager when
+ //done.
+ var newMap = makeModuleMap(map.originalName, map.parentMap),
+ normalizedManager = getManager(newMap, true);
+
+ //Indicate this manager is a placeholder for the real,
+ //normalized thing. Important for when trying to map
+ //modules and dependencies, for instance, in a build.
+ manager.placeholder = true;
+
+ normalizedManager.add(function (resource) {
+ manager.callback = function () {
+ return resource;
+ };
+ execManager(manager);
+ });
+ });
+ } else if (created && shouldQueue) {
+ //Indicate the resource is not loaded yet if it is to be
+ //queued.
+ loaded[manager.id] = false;
+ queueDependency(manager);
+ addWait(manager);
+ }
+
+ return manager;
+ }
+
+ function main(inName, depArray, callback, relModuleMap) {
+ var moduleMap = makeModuleMap(inName, relModuleMap),
+ name = moduleMap.name,
+ fullName = moduleMap.fullName,
+ manager = getManager(moduleMap),
+ id = manager.id,
+ deps = manager.deps,
+ i, depArg, depName, depPrefix, cjsMod;
+
+ if (fullName) {
+ //If module already defined for context, or already loaded,
+ //then leave. Also leave if jQuery is registering but it does
+ //not match the desired version number in the config.
+ if (fullName in defined || loaded[id] === true ||
+ (fullName === "jquery" && config.jQuery &&
+ config.jQuery !== callback().fn.jquery)) {
+ return;
+ }
+
+ //Set specified/loaded here for modules that are also loaded
+ //as part of a layer, where onScriptLoad is not fired
+ //for those cases. Do this after the inline define and
+ //dependency tracing is done.
+ specified[id] = true;
+ loaded[id] = true;
+
+ //If module is jQuery set up delaying its dom ready listeners.
+ if (fullName === "jquery" && callback) {
+ jQueryCheck(callback());
+ }
+ }
+
+ //Attach real depArray and callback to the manager. Do this
+ //only if the module has not been defined already, so do this after
+ //the fullName checks above. IE can call main() more than once
+ //for a module.
+ manager.depArray = depArray;
+ manager.callback = callback;
+
+ //Add the dependencies to the deps field, and register for callbacks
+ //on the dependencies.
+ for (i = 0; i < depArray.length; i++) {
+ depArg = depArray[i];
+ //There could be cases like in IE, where a trailing comma will
+ //introduce a null dependency, so only treat a real dependency
+ //value as a dependency.
+ if (depArg) {
+ //Split the dependency name into plugin and name parts
+ depArg = makeModuleMap(depArg, (name ? moduleMap : relModuleMap));
+ depName = depArg.fullName;
+ depPrefix = depArg.prefix;
+
+ //Fix the name in depArray to be just the name, since
+ //that is how it will be called back later.
+ depArray[i] = depName;
+
+ //Fast path CommonJS standard dependencies.
+ if (depName === "require") {
+ deps[i] = makeRequire(moduleMap);
+ } else if (depName === "exports") {
+ //CommonJS module spec 1.1
+ deps[i] = defined[fullName] = {};
+ manager.usingExports = true;
+ } else if (depName === "module") {
+ //CommonJS module spec 1.1
+ manager.cjsModule = cjsMod = deps[i] = {
+ id: name,
+ uri: name ? context.nameToUrl(name, null, relModuleMap) : undefined,
+ exports: defined[fullName]
+ };
+ } else if (depName in defined && !(depName in waiting) &&
+ (!(fullName in needFullExec) ||
+ (fullName in needFullExec && fullExec[depName]))) {
+ //Module already defined, and not in a build situation
+ //where the module is a something that needs full
+ //execution and this dependency has not been fully
+ //executed. See r.js's requirePatch.js for more info
+ //on fullExec.
+ deps[i] = defined[depName];
+ } else {
+ //Mark this dependency as needing full exec if
+ //the current module needs full exec.
+ if (fullName in needFullExec) {
+ needFullExec[depName] = true;
+ //Reset state so fully executed code will get
+ //picked up correctly.
+ delete defined[depName];
+ urlFetched[depArg.url] = false;
+ }
+
+ //Either a resource that is not loaded yet, or a plugin
+ //resource for either a plugin that has not
+ //loaded yet.
+ manager.depCount += 1;
+ manager.depCallbacks[i] = makeArgCallback(manager, i);
+ getManager(depArg, true).add(manager.depCallbacks[i]);
+ }
+ }
+ }
+
+ //Do not bother tracking the manager if it is all done.
+ if (!manager.depCount) {
+ //All done, execute!
+ execManager(manager);
+ } else {
+ addWait(manager);
+ }
+ }
+
+ /**
+ * Convenience method to call main for a define call that was put on
+ * hold in the defQueue.
+ */
+ function callDefMain(args) {
+ main.apply(null, args);
+ }
+
+ /**
+ * jQuery 1.4.3+ supports ways to hold off calling
+ * calling jQuery ready callbacks until all scripts are loaded. Be sure
+ * to track it if the capability exists.. Also, since jQuery 1.4.3 does
+ * not register as a module, need to do some global inference checking.
+ * Even if it does register as a module, not guaranteed to be the precise
+ * name of the global. If a jQuery is tracked for this context, then go
+ * ahead and register it as a module too, if not already in process.
+ */
+ jQueryCheck = function (jqCandidate) {
+ if (!context.jQuery) {
+ var $ = jqCandidate || (typeof jQuery !== "undefined" ? jQuery : null);
+
+ if ($) {
+ //If a specific version of jQuery is wanted, make sure to only
+ //use this jQuery if it matches.
+ if (config.jQuery && $.fn.jquery !== config.jQuery) {
+ return;
+ }
+
+ if ("holdReady" in $ || "readyWait" in $) {
+ context.jQuery = $;
+
+ //Manually create a "jquery" module entry if not one already
+ //or in process. Note this could trigger an attempt at
+ //a second jQuery registration, but does no harm since
+ //the first one wins, and it is the same value anyway.
+ callDefMain(["jquery", [], function () {
+ return jQuery;
+ }]);
+
+ //Ask jQuery to hold DOM ready callbacks.
+ if (context.scriptCount) {
+ jQueryHoldReady($, true);
+ context.jQueryIncremented = true;
+ }
+ }
+ }
+ }
+ };
+
+ function findCycle(manager, traced) {
+ var fullName = manager.map.fullName,
+ depArray = manager.depArray,
+ fullyLoaded = true,
+ i, depName, depManager, result;
+
+ if (manager.isDone || !fullName || !loaded[fullName]) {
+ return result;
+ }
+
+ //Found the cycle.
+ if (traced[fullName]) {
+ return manager;
+ }
+
+ traced[fullName] = true;
+
+ //Trace through the dependencies.
+ if (depArray) {
+ for (i = 0; i < depArray.length; i++) {
+ //Some array members may be null, like if a trailing comma
+ //IE, so do the explicit [i] access and check if it has a value.
+ depName = depArray[i];
+ if (!loaded[depName] && !reservedDependencies[depName]) {
+ fullyLoaded = false;
+ break;
+ }
+ depManager = waiting[depName];
+ if (depManager && !depManager.isDone && loaded[depName]) {
+ result = findCycle(depManager, traced);
+ if (result) {
+ break;
+ }
+ }
+ }
+ if (!fullyLoaded) {
+ //Discard the cycle that was found, since it cannot
+ //be forced yet. Also clear this module from traced.
+ result = undefined;
+ delete traced[fullName];
+ }
+ }
+
+ return result;
+ }
+
+ function forceExec(manager, traced) {
+ var fullName = manager.map.fullName,
+ depArray = manager.depArray,
+ i, depName, depManager, prefix, prefixManager, value;
+
+
+ if (manager.isDone || !fullName || !loaded[fullName]) {
+ return undefined;
+ }
+
+ if (fullName) {
+ if (traced[fullName]) {
+ return defined[fullName];
+ }
+
+ traced[fullName] = true;
+ }
+
+ //Trace through the dependencies.
+ if (depArray) {
+ for (i = 0; i < depArray.length; i++) {
+ //Some array members may be null, like if a trailing comma
+ //IE, so do the explicit [i] access and check if it has a value.
+ depName = depArray[i];
+ if (depName) {
+ //First, make sure if it is a plugin resource that the
+ //plugin is not blocked.
+ prefix = makeModuleMap(depName).prefix;
+ if (prefix && (prefixManager = waiting[prefix])) {
+ forceExec(prefixManager, traced);
+ }
+ depManager = waiting[depName];
+ if (depManager && !depManager.isDone && loaded[depName]) {
+ value = forceExec(depManager, traced);
+ manager.depCallbacks[i](value);
+ }
+ }
+ }
+ }
+
+ return defined[fullName];
+ }
+
+ /**
+ * Checks if all modules for a context are loaded, and if so, evaluates the
+ * new ones in right dependency order.
+ *
+ * @private
+ */
+ function checkLoaded() {
+ var waitInterval = config.waitSeconds * 1000,
+ //It is possible to disable the wait interval by using waitSeconds of 0.
+ expired = waitInterval && (context.startTime + waitInterval) < new Date().getTime(),
+ noLoads = "", hasLoadedProp = false, stillLoading = false,
+ cycleDeps = [],
+ i, prop, err, manager, cycleManager, moduleDeps;
+
+ //If there are items still in the paused queue processing wait.
+ //This is particularly important in the sync case where each paused
+ //item is processed right away but there may be more waiting.
+ if (context.pausedCount > 0) {
+ return undefined;
+ }
+
+ //Determine if priority loading is done. If so clear the priority. If
+ //not, then do not check
+ if (config.priorityWait) {
+ if (isPriorityDone()) {
+ //Call resume, since it could have
+ //some waiting dependencies to trace.
+ resume();
+ } else {
+ return undefined;
+ }
+ }
+
+ //See if anything is still in flight.
+ for (prop in loaded) {
+ if (!(prop in empty)) {
+ hasLoadedProp = true;
+ if (!loaded[prop]) {
+ if (expired) {
+ noLoads += prop + " ";
+ } else {
+ stillLoading = true;
+ if (prop.indexOf('!') === -1) {
+ //No reason to keep looking for unfinished
+ //loading. If the only stillLoading is a
+ //plugin resource though, keep going,
+ //because it may be that a plugin resource
+ //is waiting on a non-plugin cycle.
+ cycleDeps = [];
+ break;
+ } else {
+ moduleDeps = managerCallbacks[prop] && managerCallbacks[prop].moduleDeps;
+ if (moduleDeps) {
+ cycleDeps.push.apply(cycleDeps, moduleDeps);
+ }
+ }
+ }
+ }
+ }
+ }
+
+ //Check for exit conditions.
+ if (!hasLoadedProp && !context.waitCount) {
+ //If the loaded object had no items, then the rest of
+ //the work below does not need to be done.
+ return undefined;
+ }
+ if (expired && noLoads) {
+ //If wait time expired, throw error of unloaded modules.
+ err = makeError("timeout", "Load timeout for modules: " + noLoads);
+ err.requireType = "timeout";
+ err.requireModules = noLoads;
+ err.contextName = context.contextName;
+ return req.onError(err);
+ }
+
+ //If still loading but a plugin is waiting on a regular module cycle
+ //break the cycle.
+ if (stillLoading && cycleDeps.length) {
+ for (i = 0; (manager = waiting[cycleDeps[i]]); i++) {
+ if ((cycleManager = findCycle(manager, {}))) {
+ forceExec(cycleManager, {});
+ break;
+ }
+ }
+
+ }
+
+ //If still waiting on loads, and the waiting load is something
+ //other than a plugin resource, or there are still outstanding
+ //scripts, then just try back later.
+ if (!expired && (stillLoading || context.scriptCount)) {
+ //Something is still waiting to load. Wait for it, but only
+ //if a timeout is not already in effect.
+ if ((isBrowser || isWebWorker) && !checkLoadedTimeoutId) {
+ checkLoadedTimeoutId = setTimeout(function () {
+ checkLoadedTimeoutId = 0;
+ checkLoaded();
+ }, 50);
+ }
+ return undefined;
+ }
+
+ //If still have items in the waiting cue, but all modules have
+ //been loaded, then it means there are some circular dependencies
+ //that need to be broken.
+ //However, as a waiting thing is fired, then it can add items to
+ //the waiting cue, and those items should not be fired yet, so
+ //make sure to redo the checkLoaded call after breaking a single
+ //cycle, if nothing else loaded then this logic will pick it up
+ //again.
+ if (context.waitCount) {
+ //Cycle through the waitAry, and call items in sequence.
+ for (i = 0; (manager = waitAry[i]); i++) {
+ forceExec(manager, {});
+ }
+
+ //If anything got placed in the paused queue, run it down.
+ if (context.paused.length) {
+ resume();
+ }
+
+ //Only allow this recursion to a certain depth. Only
+ //triggered by errors in calling a module in which its
+ //modules waiting on it cannot finish loading, or some circular
+ //dependencies that then may add more dependencies.
+ //The value of 5 is a bit arbitrary. Hopefully just one extra
+ //pass, or two for the case of circular dependencies generating
+ //more work that gets resolved in the sync node case.
+ if (checkLoadedDepth < 5) {
+ checkLoadedDepth += 1;
+ checkLoaded();
+ }
+ }
+
+ checkLoadedDepth = 0;
+
+ //Check for DOM ready, and nothing is waiting across contexts.
+ req.checkReadyState();
+
+ return undefined;
+ }
+
+ /**
+ * Resumes tracing of dependencies and then checks if everything is loaded.
+ */
+ resume = function () {
+ var manager, map, url, i, p, args, fullName;
+
+ //Any defined modules in the global queue, intake them now.
+ context.takeGlobalQueue();
+
+ resumeDepth += 1;
+
+ if (context.scriptCount <= 0) {
+ //Synchronous envs will push the number below zero with the
+ //decrement above, be sure to set it back to zero for good measure.
+ //require() calls that also do not end up loading scripts could
+ //push the number negative too.
+ context.scriptCount = 0;
+ }
+
+ //Make sure any remaining defQueue items get properly processed.
+ while (defQueue.length) {
+ args = defQueue.shift();
+ if (args[0] === null) {
+ return req.onError(makeError('mismatch', 'Mismatched anonymous define() module: ' + args[args.length - 1]));
+ } else {
+ callDefMain(args);
+ }
+ }
+
+ //Skip the resume of paused dependencies
+ //if current context is in priority wait.
+ if (!config.priorityWait || isPriorityDone()) {
+ while (context.paused.length) {
+ p = context.paused;
+ context.pausedCount += p.length;
+ //Reset paused list
+ context.paused = [];
+
+ for (i = 0; (manager = p[i]); i++) {
+ map = manager.map;
+ url = map.url;
+ fullName = map.fullName;
+
+ //If the manager is for a plugin managed resource,
+ //ask the plugin to load it now.
+ if (map.prefix) {
+ callPlugin(map.prefix, manager);
+ } else {
+ //Regular dependency.
+ if (!urlFetched[url] && !loaded[fullName]) {
+ req.load(context, fullName, url);
+
+ //Mark the URL as fetched, but only if it is
+ //not an empty: URL, used by the optimizer.
+ //In that case we need to be sure to call
+ //load() for each module that is mapped to
+ //empty: so that dependencies are satisfied
+ //correctly.
+ if (url.indexOf('empty:') !== 0) {
+ urlFetched[url] = true;
+ }
+ }
+ }
+ }
+
+ //Move the start time for timeout forward.
+ context.startTime = (new Date()).getTime();
+ context.pausedCount -= p.length;
+ }
+ }
+
+ //Only check if loaded when resume depth is 1. It is likely that
+ //it is only greater than 1 in sync environments where a factory
+ //function also then calls the callback-style require. In those
+ //cases, the checkLoaded should not occur until the resume
+ //depth is back at the top level.
+ if (resumeDepth === 1) {
+ checkLoaded();
+ }
+
+ resumeDepth -= 1;
+
+ return undefined;
+ };
+
+ //Define the context object. Many of these fields are on here
+ //just to make debugging easier.
+ context = {
+ contextName: contextName,
+ config: config,
+ defQueue: defQueue,
+ waiting: waiting,
+ waitCount: 0,
+ specified: specified,
+ loaded: loaded,
+ urlMap: urlMap,
+ urlFetched: urlFetched,
+ scriptCount: 0,
+ defined: defined,
+ paused: [],
+ pausedCount: 0,
+ plugins: plugins,
+ needFullExec: needFullExec,
+ fake: {},
+ fullExec: fullExec,
+ managerCallbacks: managerCallbacks,
+ makeModuleMap: makeModuleMap,
+ normalize: normalize,
+ /**
+ * Set a configuration for the context.
+ * @param {Object} cfg config object to integrate.
+ */
+ configure: function (cfg) {
+ var paths, prop, packages, pkgs, packagePaths, requireWait;
+
+ //Make sure the baseUrl ends in a slash.
+ if (cfg.baseUrl) {
+ if (cfg.baseUrl.charAt(cfg.baseUrl.length - 1) !== "/") {
+ cfg.baseUrl += "/";
+ }
+ }
+
+ //Save off the paths and packages since they require special processing,
+ //they are additive.
+ paths = config.paths;
+ packages = config.packages;
+ pkgs = config.pkgs;
+
+ //Mix in the config values, favoring the new values over
+ //existing ones in context.config.
+ mixin(config, cfg, true);
+
+ //Adjust paths if necessary.
+ if (cfg.paths) {
+ for (prop in cfg.paths) {
+ if (!(prop in empty)) {
+ paths[prop] = cfg.paths[prop];
+ }
+ }
+ config.paths = paths;
+ }
+
+ packagePaths = cfg.packagePaths;
+ if (packagePaths || cfg.packages) {
+ //Convert packagePaths into a packages config.
+ if (packagePaths) {
+ for (prop in packagePaths) {
+ if (!(prop in empty)) {
+ configurePackageDir(pkgs, packagePaths[prop], prop);
+ }
+ }
+ }
+
+ //Adjust packages if necessary.
+ if (cfg.packages) {
+ configurePackageDir(pkgs, cfg.packages);
+ }
+
+ //Done with modifications, assing packages back to context config
+ config.pkgs = pkgs;
+ }
+
+ //If priority loading is in effect, trigger the loads now
+ if (cfg.priority) {
+ //Hold on to requireWait value, and reset it after done
+ requireWait = context.requireWait;
+
+ //Allow tracing some require calls to allow the fetching
+ //of the priority config.
+ context.requireWait = false;
+ //But first, call resume to register any defined modules that may
+ //be in a data-main built file before the priority config
+ //call.
+ resume();
+
+ context.require(cfg.priority);
+
+ //Trigger a resume right away, for the case when
+ //the script with the priority load is done as part
+ //of a data-main call. In that case the normal resume
+ //call will not happen because the scriptCount will be
+ //at 1, since the script for data-main is being processed.
+ resume();
+
+ //Restore previous state.
+ context.requireWait = requireWait;
+ config.priorityWait = cfg.priority;
+ }
+
+ //If a deps array or a config callback is specified, then call
+ //require with those args. This is useful when require is defined as a
+ //config object before require.js is loaded.
+ if (cfg.deps || cfg.callback) {
+ context.require(cfg.deps || [], cfg.callback);
+ }
+ },
+
+ requireDefined: function (moduleName, relModuleMap) {
+ return makeModuleMap(moduleName, relModuleMap).fullName in defined;
+ },
+
+ requireSpecified: function (moduleName, relModuleMap) {
+ return makeModuleMap(moduleName, relModuleMap).fullName in specified;
+ },
+
+ require: function (deps, callback, relModuleMap) {
+ var moduleName, fullName, moduleMap;
+ if (typeof deps === "string") {
+ if (isFunction(callback)) {
+ //Invalid call
+ return req.onError(makeError("requireargs", "Invalid require call"));
+ }
+
+ //Synchronous access to one module. If require.get is
+ //available (as in the Node adapter), prefer that.
+ //In this case deps is the moduleName and callback is
+ //the relModuleMap
+ if (req.get) {
+ return req.get(context, deps, callback);
+ }
+
+ //Just return the module wanted. In this scenario, the
+ //second arg (if passed) is just the relModuleMap.
+ moduleName = deps;
+ relModuleMap = callback;
+
+ //Normalize module name, if it contains . or ..
+ moduleMap = makeModuleMap(moduleName, relModuleMap);
+ fullName = moduleMap.fullName;
+
+ if (!(fullName in defined)) {
+ return req.onError(makeError("notloaded", "Module name '" +
+ moduleMap.fullName +
+ "' has not been loaded yet for context: " +
+ contextName));
+ }
+ return defined[fullName];
+ }
+
+ //Call main but only if there are dependencies or
+ //a callback to call.
+ if (deps && deps.length || callback) {
+ main(null, deps, callback, relModuleMap);
+ }
+
+ //If the require call does not trigger anything new to load,
+ //then resume the dependency processing.
+ if (!context.requireWait) {
+ while (!context.scriptCount && context.paused.length) {
+ resume();
+ }
+ }
+ return context.require;
+ },
+
+ /**
+ * Internal method to transfer globalQueue items to this context's
+ * defQueue.
+ */
+ takeGlobalQueue: function () {
+ //Push all the globalDefQueue items into the context's defQueue
+ if (globalDefQueue.length) {
+ //Array splice in the values since the context code has a
+ //local var ref to defQueue, so cannot just reassign the one
+ //on context.
+ apsp.apply(context.defQueue,
+ [context.defQueue.length - 1, 0].concat(globalDefQueue));
+ globalDefQueue = [];
+ }
+ },
+
+ /**
+ * Internal method used by environment adapters to complete a load event.
+ * A load event could be a script load or just a load pass from a synchronous
+ * load call.
+ * @param {String} moduleName the name of the module to potentially complete.
+ */
+ completeLoad: function (moduleName) {
+ var args;
+
+ context.takeGlobalQueue();
+
+ while (defQueue.length) {
+ args = defQueue.shift();
+
+ if (args[0] === null) {
+ args[0] = moduleName;
+ break;
+ } else if (args[0] === moduleName) {
+ //Found matching define call for this script!
+ break;
+ } else {
+ //Some other named define call, most likely the result
+ //of a build layer that included many define calls.
+ callDefMain(args);
+ args = null;
+ }
+ }
+ if (args) {
+ callDefMain(args);
+ } else {
+ //A script that does not call define(), so just simulate
+ //the call for it. Special exception for jQuery dynamic load.
+ callDefMain([moduleName, [],
+ moduleName === "jquery" && typeof jQuery !== "undefined" ?
+ function () {
+ return jQuery;
+ } : null]);
+ }
+
+ //Doing this scriptCount decrement branching because sync envs
+ //need to decrement after resume, otherwise it looks like
+ //loading is complete after the first dependency is fetched.
+ //For browsers, it works fine to decrement after, but it means
+ //the checkLoaded setTimeout 50 ms cost is taken. To avoid
+ //that cost, decrement beforehand.
+ if (req.isAsync) {
+ context.scriptCount -= 1;
+ }
+ resume();
+ if (!req.isAsync) {
+ context.scriptCount -= 1;
+ }
+ },
+
+ /**
+ * Converts a module name + .extension into an URL path.
+ * *Requires* the use of a module name. It does not support using
+ * plain URLs like nameToUrl.
+ */
+ toUrl: function (moduleNamePlusExt, relModuleMap) {
+ var index = moduleNamePlusExt.lastIndexOf("."),
+ ext = null;
+
+ if (index !== -1) {
+ ext = moduleNamePlusExt.substring(index, moduleNamePlusExt.length);
+ moduleNamePlusExt = moduleNamePlusExt.substring(0, index);
+ }
+
+ return context.nameToUrl(moduleNamePlusExt, ext, relModuleMap);
+ },
+
+ /**
+ * Converts a module name to a file path. Supports cases where
+ * moduleName may actually be just an URL.
+ */
+ nameToUrl: function (moduleName, ext, relModuleMap) {
+ var paths, pkgs, pkg, pkgPath, syms, i, parentModule, url,
+ config = context.config;
+
+ //Normalize module name if have a base relative module name to work from.
+ moduleName = normalize(moduleName, relModuleMap && relModuleMap.fullName);
+
+ //If a colon is in the URL, it indicates a protocol is used and it is just
+ //an URL to a file, or if it starts with a slash or ends with .js, it is just a plain file.
+ //The slash is important for protocol-less URLs as well as full paths.
+ if (req.jsExtRegExp.test(moduleName)) {
+ //Just a plain path, not module name lookup, so just return it.
+ //Add extension if it is included. This is a bit wonky, only non-.js things pass
+ //an extension, this method probably needs to be reworked.
+ url = moduleName + (ext ? ext : "");
+ } else {
+ //A module that needs to be converted to a path.
+ paths = config.paths;
+ pkgs = config.pkgs;
+
+ syms = moduleName.split("/");
+ //For each module name segment, see if there is a path
+ //registered for it. Start with most specific name
+ //and work up from it.
+ for (i = syms.length; i > 0; i--) {
+ parentModule = syms.slice(0, i).join("/");
+ if (paths[parentModule]) {
+ syms.splice(0, i, paths[parentModule]);
+ break;
+ } else if ((pkg = pkgs[parentModule])) {
+ //If module name is just the package name, then looking
+ //for the main module.
+ if (moduleName === pkg.name) {
+ pkgPath = pkg.location + '/' + pkg.main;
+ } else {
+ pkgPath = pkg.location;
+ }
+ syms.splice(0, i, pkgPath);
+ break;
+ }
+ }
+
+ //Join the path parts together, then figure out if baseUrl is needed.
+ url = syms.join("/") + (ext || ".js");
+ url = (url.charAt(0) === '/' || url.match(/^\w+:/) ? "" : config.baseUrl) + url;
+ }
+
+ return config.urlArgs ? url +
+ ((url.indexOf('?') === -1 ? '?' : '&') +
+ config.urlArgs) : url;
+ }
+ };
+
+ //Make these visible on the context so can be called at the very
+ //end of the file to bootstrap
+ context.jQueryCheck = jQueryCheck;
+ context.resume = resume;
+
+ return context;
+ }
+
+ /**
+ * Main entry point.
+ *
+ * If the only argument to require is a string, then the module that
+ * is represented by that string is fetched for the appropriate context.
+ *
+ * If the first argument is an array, then it will be treated as an array
+ * of dependency string names to fetch. An optional function callback can
+ * be specified to execute when all of those dependencies are available.
+ *
+ * Make a local req variable to help Caja compliance (it assumes things
+ * on a require that are not standardized), and to give a short
+ * name for minification/local scope use.
+ */
+ req = requirejs = function (deps, callback) {
+
+ //Find the right context, use default
+ var contextName = defContextName,
+ context, config;
+
+ // Determine if have config object in the call.
+ if (!isArray(deps) && typeof deps !== "string") {
+ // deps is a config object
+ config = deps;
+ if (isArray(callback)) {
+ // Adjust args if there are dependencies
+ deps = callback;
+ callback = arguments[2];
+ } else {
+ deps = [];
+ }
+ }
+
+ if (config && config.context) {
+ contextName = config.context;
+ }
+
+ context = contexts[contextName] ||
+ (contexts[contextName] = newContext(contextName));
+
+ if (config) {
+ context.configure(config);
+ }
+
+ return context.require(deps, callback);
+ };
+
+ /**
+ * Support require.config() to make it easier to cooperate with other
+ * AMD loaders on globally agreed names.
+ */
+ req.config = function (config) {
+ return req(config);
+ };
+
+ /**
+ * Export require as a global, but only if it does not already exist.
+ */
+ if (!require) {
+ require = req;
+ }
+
+ /**
+ * Global require.toUrl(), to match global require, mostly useful
+ * for debugging/work in the global space.
+ */
+ req.toUrl = function (moduleNamePlusExt) {
+ return contexts[defContextName].toUrl(moduleNamePlusExt);
+ };
+
+ req.version = version;
+
+ //Used to filter out dependencies that are already paths.
+ req.jsExtRegExp = /^\/|:|\?|\.js$/;
+ s = req.s = {
+ contexts: contexts,
+ //Stores a list of URLs that should not get async script tag treatment.
+ skipAsync: {}
+ };
+
+ req.isAsync = req.isBrowser = isBrowser;
+ if (isBrowser) {
+ head = s.head = document.getElementsByTagName("head")[0];
+ //If BASE tag is in play, using appendChild is a problem for IE6.
+ //When that browser dies, this can be removed. Details in this jQuery bug:
+ //http://dev.jquery.com/ticket/2709
+ baseElement = document.getElementsByTagName("base")[0];
+ if (baseElement) {
+ head = s.head = baseElement.parentNode;
+ }
+ }
+
+ /**
+ * Any errors that require explicitly generates will be passed to this
+ * function. Intercept/override it if you want custom error handling.
+ * @param {Error} err the error object.
+ */
+ req.onError = function (err) {
+ throw err;
+ };
+
+ /**
+ * Does the request to load a module for the browser case.
+ * Make this a separate function to allow other environments
+ * to override it.
+ *
+ * @param {Object} context the require context to find state.
+ * @param {String} moduleName the name of the module.
+ * @param {Object} url the URL to the module.
+ */
+ req.load = function (context, moduleName, url) {
+ req.resourcesReady(false);
+
+ context.scriptCount += 1;
+ req.attach(url, context, moduleName);
+
+ //If tracking a jQuery, then make sure its ready callbacks
+ //are put on hold to prevent its ready callbacks from
+ //triggering too soon.
+ if (context.jQuery && !context.jQueryIncremented) {
+ jQueryHoldReady(context.jQuery, true);
+ context.jQueryIncremented = true;
+ }
+ };
+
+ function getInteractiveScript() {
+ var scripts, i, script;
+ if (interactiveScript && interactiveScript.readyState === 'interactive') {
+ return interactiveScript;
+ }
+
+ scripts = document.getElementsByTagName('script');
+ for (i = scripts.length - 1; i > -1 && (script = scripts[i]); i--) {
+ if (script.readyState === 'interactive') {
+ return (interactiveScript = script);
+ }
+ }
+
+ return null;
+ }
+
+ /**
+ * The function that handles definitions of modules. Differs from
+ * require() in that a string for the module should be the first argument,
+ * and the function to execute after dependencies are loaded should
+ * return a value to define the module corresponding to the first argument's
+ * name.
+ */
+ define = function (name, deps, callback) {
+ var node, context;
+
+ //Allow for anonymous functions
+ if (typeof name !== 'string') {
+ //Adjust args appropriately
+ callback = deps;
+ deps = name;
+ name = null;
+ }
+
+ //This module may not have dependencies
+ if (!isArray(deps)) {
+ callback = deps;
+ deps = [];
+ }
+
+ //If no name, and callback is a function, then figure out if it a
+ //CommonJS thing with dependencies.
+ if (!deps.length && isFunction(callback)) {
+ //Remove comments from the callback string,
+ //look for require calls, and pull them into the dependencies,
+ //but only if there are function args.
+ if (callback.length) {
+ callback
+ .toString()
+ .replace(commentRegExp, "")
+ .replace(cjsRequireRegExp, function (match, dep) {
+ deps.push(dep);
+ });
+
+ //May be a CommonJS thing even without require calls, but still
+ //could use exports, and module. Avoid doing exports and module
+ //work though if it just needs require.
+ //REQUIRES the function to expect the CommonJS variables in the
+ //order listed below.
+ deps = (callback.length === 1 ? ["require"] : ["require", "exports", "module"]).concat(deps);
+ }
+ }
+
+ //If in IE 6-8 and hit an anonymous define() call, do the interactive
+ //work.
+ if (useInteractive) {
+ node = currentlyAddingScript || getInteractiveScript();
+ if (node) {
+ if (!name) {
+ name = node.getAttribute("data-requiremodule");
+ }
+ context = contexts[node.getAttribute("data-requirecontext")];
+ }
+ }
+
+ //Always save off evaluating the def call until the script onload handler.
+ //This allows multiple modules to be in a file without prematurely
+ //tracing dependencies, and allows for anonymous module support,
+ //where the module name is not known until the script onload event
+ //occurs. If no context, use the global queue, and get it processed
+ //in the onscript load callback.
+ (context ? context.defQueue : globalDefQueue).push([name, deps, callback]);
+
+ return undefined;
+ };
+
+ define.amd = {
+ multiversion: true,
+ plugins: true,
+ jQuery: true
+ };
+
+ /**
+ * Executes the text. Normally just uses eval, but can be modified
+ * to use a more environment specific call.
+ * @param {String} text the text to execute/evaluate.
+ */
+ req.exec = function (text) {
+ return eval(text);
+ };
+
+ /**
+ * Executes a module callack function. Broken out as a separate function
+ * solely to allow the build system to sequence the files in the built
+ * layer in the right sequence.
+ *
+ * @private
+ */
+ req.execCb = function (name, callback, args, exports) {
+ return callback.apply(exports, args);
+ };
+
+
+ /**
+ * Adds a node to the DOM. Public function since used by the order plugin.
+ * This method should not normally be called by outside code.
+ */
+ req.addScriptToDom = function (node) {
+ //For some cache cases in IE 6-8, the script executes before the end
+ //of the appendChild execution, so to tie an anonymous define
+ //call to the module name (which is stored on the node), hold on
+ //to a reference to this node, but clear after the DOM insertion.
+ currentlyAddingScript = node;
+ if (baseElement) {
+ head.insertBefore(node, baseElement);
+ } else {
+ head.appendChild(node);
+ }
+ currentlyAddingScript = null;
+ };
+
+ /**
+ * callback for script loads, used to check status of loading.
+ *
+ * @param {Event} evt the event from the browser for the script
+ * that was loaded.
+ *
+ * @private
+ */
+ req.onScriptLoad = function (evt) {
+ //Using currentTarget instead of target for Firefox 2.0's sake. Not
+ //all old browsers will be supported, but this one was easy enough
+ //to support and still makes sense.
+ var node = evt.currentTarget || evt.srcElement, contextName, moduleName,
+ context;
+
+ if (evt.type === "load" || (node && readyRegExp.test(node.readyState))) {
+ //Reset interactive script so a script node is not held onto for
+ //to long.
+ interactiveScript = null;
+
+ //Pull out the name of the module and the context.
+ contextName = node.getAttribute("data-requirecontext");
+ moduleName = node.getAttribute("data-requiremodule");
+ context = contexts[contextName];
+
+ contexts[contextName].completeLoad(moduleName);
+
+ //Clean up script binding. Favor detachEvent because of IE9
+ //issue, see attachEvent/addEventListener comment elsewhere
+ //in this file.
+ if (node.detachEvent && !isOpera) {
+ //Probably IE. If not it will throw an error, which will be
+ //useful to know.
+ node.detachEvent("onreadystatechange", req.onScriptLoad);
+ } else {
+ node.removeEventListener("load", req.onScriptLoad, false);
+ }
+ }
+ };
+
+ /**
+ * Attaches the script represented by the URL to the current
+ * environment. Right now only supports browser loading,
+ * but can be redefined in other environments to do the right thing.
+ * @param {String} url the url of the script to attach.
+ * @param {Object} context the context that wants the script.
+ * @param {moduleName} the name of the module that is associated with the script.
+ * @param {Function} [callback] optional callback, defaults to require.onScriptLoad
+ * @param {String} [type] optional type, defaults to text/javascript
+ * @param {Function} [fetchOnlyFunction] optional function to indicate the script node
+ * should be set up to fetch the script but do not attach it to the DOM
+ * so that it can later be attached to execute it. This is a way for the
+ * order plugin to support ordered loading in IE. Once the script is fetched,
+ * but not executed, the fetchOnlyFunction will be called.
+ */
+ req.attach = function (url, context, moduleName, callback, type, fetchOnlyFunction) {
+ var node;
+ if (isBrowser) {
+ //In the browser so use a script tag
+ callback = callback || req.onScriptLoad;
+ node = context && context.config && context.config.xhtml ?
+ document.createElementNS("http://www.w3.org/1999/xhtml", "html:script") :
+ document.createElement("script");
+ node.type = type || (context && context.config.scriptType) ||
+ "text/javascript";
+ node.charset = "utf-8";
+ //Use async so Gecko does not block on executing the script if something
+ //like a long-polling comet tag is being run first. Gecko likes
+ //to evaluate scripts in DOM order, even for dynamic scripts.
+ //It will fetch them async, but only evaluate the contents in DOM
+ //order, so a long-polling script tag can delay execution of scripts
+ //after it. But telling Gecko we expect async gets us the behavior
+ //we want -- execute it whenever it is finished downloading. Only
+ //Helps Firefox 3.6+
+ //Allow some URLs to not be fetched async. Mostly helps the order!
+ //plugin
+ node.async = !s.skipAsync[url];
+
+ if (context) {
+ node.setAttribute("data-requirecontext", context.contextName);
+ }
+ node.setAttribute("data-requiremodule", moduleName);
+
+ //Set up load listener. Test attachEvent first because IE9 has
+ //a subtle issue in its addEventListener and script onload firings
+ //that do not match the behavior of all other browsers with
+ //addEventListener support, which fire the onload event for a
+ //script right after the script execution. See:
+ //https://connect.microsoft.com/IE/feedback/details/648057/script-onload-event-is-not-fired-immediately-after-script-execution
+ //UNFORTUNATELY Opera implements attachEvent but does not follow the script
+ //script execution mode.
+ if (node.attachEvent && !isOpera) {
+ //Probably IE. IE (at least 6-8) do not fire
+ //script onload right after executing the script, so
+ //we cannot tie the anonymous define call to a name.
+ //However, IE reports the script as being in "interactive"
+ //readyState at the time of the define call.
+ useInteractive = true;
+
+
+ if (fetchOnlyFunction) {
+ //Need to use old school onreadystate here since
+ //when the event fires and the node is not attached
+ //to the DOM, the evt.srcElement is null, so use
+ //a closure to remember the node.
+ node.onreadystatechange = function (evt) {
+ //Script loaded but not executed.
+ //Clear loaded handler, set the real one that
+ //waits for script execution.
+ if (node.readyState === 'loaded') {
+ node.onreadystatechange = null;
+ node.attachEvent("onreadystatechange", callback);
+ fetchOnlyFunction(node);
+ }
+ };
+ } else {
+ node.attachEvent("onreadystatechange", callback);
+ }
+ } else {
+ node.addEventListener("load", callback, false);
+ }
+ node.src = url;
+
+ //Fetch only means waiting to attach to DOM after loaded.
+ if (!fetchOnlyFunction) {
+ req.addScriptToDom(node);
+ }
+
+ return node;
+ } else if (isWebWorker) {
+ //In a web worker, use importScripts. This is not a very
+ //efficient use of importScripts, importScripts will block until
+ //its script is downloaded and evaluated. However, if web workers
+ //are in play, the expectation that a build has been done so that
+ //only one script needs to be loaded anyway. This may need to be
+ //reevaluated if other use cases become common.
+ importScripts(url);
+
+ //Account for anonymous modules
+ context.completeLoad(moduleName);
+ }
+ return null;
+ };
+
+ //Look for a data-main script attribute, which could also adjust the baseUrl.
+ if (isBrowser) {
+ //Figure out baseUrl. Get it from the script tag with require.js in it.
+ scripts = document.getElementsByTagName("script");
+
+ for (globalI = scripts.length - 1; globalI > -1 && (script = scripts[globalI]); globalI--) {
+ //Set the "head" where we can append children by
+ //using the script's parent.
+ if (!head) {
+ head = script.parentNode;
+ }
+
+ //Look for a data-main attribute to set main script for the page
+ //to load. If it is there, the path to data main becomes the
+ //baseUrl, if it is not already set.
+ if ((dataMain = script.getAttribute('data-main'))) {
+ if (!cfg.baseUrl) {
+ //Pull off the directory of data-main for use as the
+ //baseUrl.
+ src = dataMain.split('/');
+ mainScript = src.pop();
+ subPath = src.length ? src.join('/') + '/' : './';
+
+ //Set final config.
+ cfg.baseUrl = subPath;
+ //Strip off any trailing .js since dataMain is now
+ //like a module name.
+ dataMain = mainScript.replace(jsSuffixRegExp, '');
+ }
+
+ //Put the data-main script in the files to load.
+ cfg.deps = cfg.deps ? cfg.deps.concat(dataMain) : [dataMain];
+
+ break;
+ }
+ }
+ }
+
+ //See if there is nothing waiting across contexts, and if not, trigger
+ //resourcesReady.
+ req.checkReadyState = function () {
+ var contexts = s.contexts, prop;
+ for (prop in contexts) {
+ if (!(prop in empty)) {
+ if (contexts[prop].waitCount) {
+ return;
+ }
+ }
+ }
+ req.resourcesReady(true);
+ };
+
+ /**
+ * Internal function that is triggered whenever all scripts/resources
+ * have been loaded by the loader. Can be overridden by other, for
+ * instance the domReady plugin, which wants to know when all resources
+ * are loaded.
+ */
+ req.resourcesReady = function (isReady) {
+ var contexts, context, prop;
+
+ //First, set the public variable indicating that resources are loading.
+ req.resourcesDone = isReady;
+
+ if (req.resourcesDone) {
+ //If jQuery with DOM ready delayed, release it now.
+ contexts = s.contexts;
+ for (prop in contexts) {
+ if (!(prop in empty)) {
+ context = contexts[prop];
+ if (context.jQueryIncremented) {
+ jQueryHoldReady(context.jQuery, false);
+ context.jQueryIncremented = false;
+ }
+ }
+ }
+ }
+ };
+
+ //FF < 3.6 readyState fix. Needed so that domReady plugin
+ //works well in that environment, since require.js is normally
+ //loaded via an HTML script tag so it will be there before window load,
+ //where the domReady plugin is more likely to be loaded after window load.
+ req.pageLoaded = function () {
+ if (document.readyState !== "complete") {
+ document.readyState = "complete";
+ }
+ };
+ if (isBrowser) {
+ if (document.addEventListener) {
+ if (!document.readyState) {
+ document.readyState = "loading";
+ window.addEventListener("load", req.pageLoaded, false);
+ }
+ }
+ }
+
+ //Set up default context. If require was a configuration object, use that as base config.
+ req(cfg);
+
+ //If modules are built into require.js, then need to make sure dependencies are
+ //traced. Use a setTimeout in the browser world, to allow all the modules to register
+ //themselves. In a non-browser env, assume that modules are not built into require.js,
+ //which seems odd to do on the server.
+ if (req.isAsync && typeof setTimeout !== "undefined") {
+ ctx = s.contexts[(cfg.context || defContextName)];
+ //Indicate that the script that includes require() is still loading,
+ //so that require()'d dependencies are not traced until the end of the
+ //file is parsed (approximated via the setTimeout call).
+ ctx.requireWait = true;
+ setTimeout(function () {
+ ctx.requireWait = false;
+
+ if (!ctx.scriptCount) {
+ ctx.resume();
+ }
+ req.checkReadyState();
+ }, 0);
+ }
+}());
--- /dev/null
+/**
+ * @license RequireJS text 1.0.2 Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/requirejs for details
+ */
+/*jslint regexp: false, nomen: false, plusplus: false, strict: false */
+/*global require: false, XMLHttpRequest: false, ActiveXObject: false,
+ define: false, window: false, process: false, Packages: false,
+ java: false, location: false */
+
+(function () {
+ var progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],
+ xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,
+ bodyRegExp = /<body[^>]*>\s*([\s\S]+)\s*<\/body>/im,
+ hasLocation = typeof location !== 'undefined' && location.href,
+ defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''),
+ defaultHostName = hasLocation && location.hostname,
+ defaultPort = hasLocation && (location.port || undefined),
+ buildMap = [];
+
+ define(function () {
+ var text, get, fs;
+
+ if (typeof window !== "undefined" && window.navigator && window.document) {
+ get = function (url, callback) {
+ var xhr = text.createXhr();
+ xhr.open('GET', url, true);
+ xhr.onreadystatechange = function (evt) {
+ //Do not explicitly handle errors, those should be
+ //visible via console output in the browser.
+ if (xhr.readyState === 4) {
+ callback(xhr.responseText);
+ }
+ };
+ xhr.send(null);
+ };
+ } else if (typeof process !== "undefined" &&
+ process.versions &&
+ !!process.versions.node) {
+ //Using special require.nodeRequire, something added by r.js.
+ fs = require.nodeRequire('fs');
+
+ get = function (url, callback) {
+ callback(fs.readFileSync(url, 'utf8'));
+ };
+ } else if (typeof Packages !== 'undefined') {
+ //Why Java, why is this so awkward?
+ get = function (url, callback) {
+ var encoding = "utf-8",
+ file = new java.io.File(url),
+ lineSeparator = java.lang.System.getProperty("line.separator"),
+ input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)),
+ stringBuffer, line,
+ content = '';
+ try {
+ stringBuffer = new java.lang.StringBuffer();
+ line = input.readLine();
+
+ // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324
+ // http://www.unicode.org/faq/utf_bom.html
+
+ // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK:
+ // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058
+ if (line && line.length() && line.charAt(0) === 0xfeff) {
+ // Eat the BOM, since we've already found the encoding on this file,
+ // and we plan to concatenating this buffer with others; the BOM should
+ // only appear at the top of a file.
+ line = line.substring(1);
+ }
+
+ stringBuffer.append(line);
+
+ while ((line = input.readLine()) !== null) {
+ stringBuffer.append(lineSeparator);
+ stringBuffer.append(line);
+ }
+ //Make sure we return a JavaScript string and not a Java string.
+ content = String(stringBuffer.toString()); //String
+ } finally {
+ input.close();
+ }
+ callback(content);
+ };
+ }
+
+ text = {
+ version: '1.0.2',
+
+ strip: function (content) {
+ //Strips <?xml ...?> declarations so that external SVG and XML
+ //documents can be added to a document without worry. Also, if the string
+ //is an HTML document, only the part inside the body tag is returned.
+ if (content) {
+ content = content.replace(xmlRegExp, "");
+ var matches = content.match(bodyRegExp);
+ if (matches) {
+ content = matches[1];
+ }
+ } else {
+ content = "";
+ }
+ return content;
+ },
+
+ jsEscape: function (content) {
+ return content.replace(/(['\\])/g, '\\$1')
+ .replace(/[\f]/g, "\\f")
+ .replace(/[\b]/g, "\\b")
+ .replace(/[\n]/g, "\\n")
+ .replace(/[\t]/g, "\\t")
+ .replace(/[\r]/g, "\\r");
+ },
+
+ createXhr: function () {
+ //Would love to dump the ActiveX crap in here. Need IE 6 to die first.
+ var xhr, i, progId;
+ if (typeof XMLHttpRequest !== "undefined") {
+ return new XMLHttpRequest();
+ } else {
+ for (i = 0; i < 3; i++) {
+ progId = progIds[i];
+ try {
+ xhr = new ActiveXObject(progId);
+ } catch (e) {}
+
+ if (xhr) {
+ progIds = [progId]; // so faster next time
+ break;
+ }
+ }
+ }
+
+ if (!xhr) {
+ throw new Error("createXhr(): XMLHttpRequest not available");
+ }
+
+ return xhr;
+ },
+
+ get: get,
+
+ /**
+ * Parses a resource name into its component parts. Resource names
+ * look like: module/name.ext!strip, where the !strip part is
+ * optional.
+ * @param {String} name the resource name
+ * @returns {Object} with properties "moduleName", "ext" and "strip"
+ * where strip is a boolean.
+ */
+ parseName: function (name) {
+ var strip = false, index = name.indexOf("."),
+ modName = name.substring(0, index),
+ ext = name.substring(index + 1, name.length);
+
+ index = ext.indexOf("!");
+ if (index !== -1) {
+ //Pull off the strip arg.
+ strip = ext.substring(index + 1, ext.length);
+ strip = strip === "strip";
+ ext = ext.substring(0, index);
+ }
+
+ return {
+ moduleName: modName,
+ ext: ext,
+ strip: strip
+ };
+ },
+
+ xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/,
+
+ /**
+ * Is an URL on another domain. Only works for browser use, returns
+ * false in non-browser environments. Only used to know if an
+ * optimized .js version of a text resource should be loaded
+ * instead.
+ * @param {String} url
+ * @returns Boolean
+ */
+ useXhr: function (url, protocol, hostname, port) {
+ var match = text.xdRegExp.exec(url),
+ uProtocol, uHostName, uPort;
+ if (!match) {
+ return true;
+ }
+ uProtocol = match[2];
+ uHostName = match[3];
+
+ uHostName = uHostName.split(':');
+ uPort = uHostName[1];
+ uHostName = uHostName[0];
+
+ return (!uProtocol || uProtocol === protocol) &&
+ (!uHostName || uHostName === hostname) &&
+ ((!uPort && !uHostName) || uPort === port);
+ },
+
+ finishLoad: function (name, strip, content, onLoad, config) {
+ content = strip ? text.strip(content) : content;
+ if (config.isBuild) {
+ buildMap[name] = content;
+ }
+ onLoad(content);
+ },
+
+ load: function (name, req, onLoad, config) {
+ //Name has format: some.module.filext!strip
+ //The strip part is optional.
+ //if strip is present, then that means only get the string contents
+ //inside a body tag in an HTML string. For XML/SVG content it means
+ //removing the <?xml ...?> declarations so the content can be inserted
+ //into the current doc without problems.
+
+ // Do not bother with the work if a build and text will
+ // not be inlined.
+ if (config.isBuild && !config.inlineText) {
+ onLoad();
+ return;
+ }
+
+ var parsed = text.parseName(name),
+ nonStripName = parsed.moduleName + '.' + parsed.ext,
+ url = req.toUrl(nonStripName),
+ useXhr = (config && config.text && config.text.useXhr) ||
+ text.useXhr;
+
+ //Load the text. Use XHR if possible and in a browser.
+ if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
+ text.get(url, function (content) {
+ text.finishLoad(name, parsed.strip, content, onLoad, config);
+ });
+ } else {
+ //Need to fetch the resource across domains. Assume
+ //the resource has been optimized into a JS module. Fetch
+ //by the module name + extension, but do not include the
+ //!strip part to avoid file system issues.
+ req([nonStripName], function (content) {
+ text.finishLoad(parsed.moduleName + '.' + parsed.ext,
+ parsed.strip, content, onLoad, config);
+ });
+ }
+ },
+
+ write: function (pluginName, moduleName, write, config) {
+ if (moduleName in buildMap) {
+ var content = text.jsEscape(buildMap[moduleName]);
+ write.asModule(pluginName + "!" + moduleName,
+ "define(function () { return '" +
+ content +
+ "';});\n");
+ }
+ },
+
+ writeFile: function (pluginName, moduleName, req, write, config) {
+ var parsed = text.parseName(moduleName),
+ nonStripName = parsed.moduleName + '.' + parsed.ext,
+ //Use a '.js' file name so that it indicates it is a
+ //script that can be loaded across domains.
+ fileName = req.toUrl(parsed.moduleName + '.' +
+ parsed.ext) + '.js';
+
+ //Leverage own load() method to load plugin value, but only
+ //write out values that do not have the strip argument,
+ //to avoid any potential issues with ! in file names.
+ text.load(nonStripName, req, function (value) {
+ //Use own write() method to construct full module value.
+ //But need to create shell that translates writeFile's
+ //write() to the right interface.
+ var textWrite = function (contents) {
+ return write(fileName, contents);
+ };
+ textWrite.asModule = function (moduleName, contents) {
+ return write.asModule(moduleName, fileName, contents);
+ };
+
+ text.write(pluginName, nonStripName, textWrite, config);
+ }, config);
+ }
+ };
+
+ return text;
+ });
+}());
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile: Demos and Documentation</title>
+ <link rel="stylesheet" href="css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
+ <script src="js/jquery.js"></script>
+ <script src="docs/_assets/js/jqm-docs.js"></script>
+ <script src="js/"></script>
+
+</head>
+<body>
+<div data-role="page" class="type-home">
+ <div data-role="content">
+ <p id="jqm-version">1.1.0 Final Release</p>
+
+
+ <div class="content-secondary">
+
+ <div id="jqm-homeheader">
+ <h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" /></h1>
+ <p>A Touch-Optimized UI Framework built with jQuery and HTML5.</p>
+ </div>
+
+
+ <p class="intro"><strong>Welcome.</strong> jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet and desktop devices. For jQuery 1.6.4 and 1.7.1.</p>
+
+ <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
+ <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><a href="docs/about/platforms.html">Supported platforms</a></li>
+ </ul>
+
+ </div><!--/content-primary-->
+
+ <div class="content-primary">
+ <nav>
+
+
+ <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
+ <li data-role="list-divider">Components</li>
+ <li><a href="docs/pages/index.html">Pages & dialogs</a></li>
+ <li><a href="docs/toolbars/index.html">Toolbars</a></li>
+ <li><a href="docs/buttons/index.html">Buttons</a></li>
+ <li><a href="docs/content/index.html">Content formatting</a></li>
+ <li><a href="docs/forms/index.html">Form elements</a></li>
+ <li><a href="docs/lists/index.html">List views</a></li>
+
+ <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 & 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>
+ </nav>
+ </div>
+
+
+
+ </div>
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>© 2011-12 The jQuery Foundation</p>
+ </div>
+
+</div>
+</body>
+</html>
--- /dev/null
+<?php
+$type = 'text/javascript';
+$files = array(
+ '../LICENSE-INFO.txt',
+ // note that define is only included here as a means
+ // to revert to the pre async include, and should not be
+ // used in other build methods
+ 'jquery.mobile.define.js',
+ '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.navigation.pushstate.js',
+ 'jquery.mobile.transition.js',
+ 'jquery.mobile.transition.pop.js',
+ 'jquery.mobile.transition.slide.js',
+ 'jquery.mobile.transition.slidedown.js',
+ 'jquery.mobile.transition.slideup.js',
+ 'jquery.mobile.transition.flip.js',
+ 'jquery.mobile.transition.flow.js',
+ 'jquery.mobile.transition.turn.js',
+ 'jquery.mobile.degradeInputs.js',
+ 'jquery.mobile.dialog.js',
+ 'jquery.mobile.page.sections.js',
+ 'jquery.mobile.collapsible.js',
+ 'jquery.mobile.collapsibleSet.js',
+ 'jquery.mobile.fieldContain.js',
+ 'jquery.mobile.grid.js',
+ 'jquery.mobile.navbar.js',
+ 'jquery.mobile.listview.js',
+ 'jquery.mobile.listview.filter.js',
+ 'jquery.mobile.nojs.js',
+ 'jquery.mobile.forms.checkboxradio.js',
+ 'jquery.mobile.forms.button.js',
+ 'jquery.mobile.forms.slider.js',
+ 'jquery.mobile.forms.textinput.js',
+ 'jquery.mobile.forms.select.custom.js',
+ 'jquery.mobile.forms.select.js',
+ 'jquery.mobile.buttonMarkup.js',
+ 'jquery.mobile.controlGroup.js',
+ 'jquery.mobile.links.js',
+ 'jquery.mobile.fixedToolbar.js',
+ 'jquery.mobile.zoom.js',
+ 'jquery.mobile.zoom.iosorientationfix.js',
+ 'jquery.mobile.init.js'
+);
+
+require_once('../combine.php');
--- /dev/null
+/*!
+ * jQuery JavaScript Library v1.7.1
+ * http://jquery.com/
+ *
+ * Copyright 2011, John Resig
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * Includes Sizzle.js
+ * http://sizzlejs.com/
+ * Copyright 2011, The Dojo Foundation
+ * Released under the MIT, BSD, and GPL Licenses.
+ *
+ * Date: Mon Nov 21 21:11:03 2011 -0500
+ */
+(function( window, undefined ) {
+
+// Use the correct document accordingly with window argument (sandbox)
+var document = window.document,
+ navigator = window.navigator,
+ location = window.location;
+var jQuery = (function() {
+
+// Define a local copy of jQuery
+var jQuery = function( selector, context ) {
+ // The jQuery object is actually just the init constructor 'enhanced'
+ return new jQuery.fn.init( selector, context, rootjQuery );
+ },
+
+ // Map over jQuery in case of overwrite
+ _jQuery = window.jQuery,
+
+ // Map over the $ in case of overwrite
+ _$ = window.$,
+
+ // A central reference to the root jQuery(document)
+ rootjQuery,
+
+ // A simple way to check for HTML strings or ID strings
+ // Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
+ quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,
+
+ // Check if a string has a non-whitespace character in it
+ rnotwhite = /\S/,
+
+ // Used for trimming whitespace
+ trimLeft = /^\s+/,
+ trimRight = /\s+$/,
+
+ // Match a standalone tag
+ rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,
+
+ // JSON RegExp
+ rvalidchars = /^[\],:{}\s]*$/,
+ rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,
+ rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
+ rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
+
+ // Useragent RegExp
+ rwebkit = /(webkit)[ \/]([\w.]+)/,
+ ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
+ rmsie = /(msie) ([\w.]+)/,
+ rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
+
+ // Matches dashed string for camelizing
+ rdashAlpha = /-([a-z]|[0-9])/ig,
+ rmsPrefix = /^-ms-/,
+
+ // Used by jQuery.camelCase as callback to replace()
+ fcamelCase = function( all, letter ) {
+ return ( letter + "" ).toUpperCase();
+ },
+
+ // Keep a UserAgent string for use with jQuery.browser
+ userAgent = navigator.userAgent,
+
+ // For matching the engine and version of the browser
+ browserMatch,
+
+ // The deferred used on DOM ready
+ readyList,
+
+ // The ready event handler
+ DOMContentLoaded,
+
+ // Save a reference to some core methods
+ toString = Object.prototype.toString,
+ hasOwn = Object.prototype.hasOwnProperty,
+ push = Array.prototype.push,
+ slice = Array.prototype.slice,
+ trim = String.prototype.trim,
+ indexOf = Array.prototype.indexOf,
+
+ // [[Class]] -> type pairs
+ class2type = {};
+
+jQuery.fn = jQuery.prototype = {
+ constructor: jQuery,
+ init: function( selector, context, rootjQuery ) {
+ var match, elem, ret, doc;
+
+ // Handle $(""), $(null), or $(undefined)
+ if ( !selector ) {
+ return this;
+ }
+
+ // Handle $(DOMElement)
+ if ( selector.nodeType ) {
+ this.context = this[0] = selector;
+ this.length = 1;
+ return this;
+ }
+
+ // The body element only exists once, optimize finding it
+ if ( selector === "body" && !context && document.body ) {
+ this.context = document;
+ this[0] = document.body;
+ this.selector = selector;
+ this.length = 1;
+ return this;
+ }
+
+ // Handle HTML strings
+ if ( typeof selector === "string" ) {
+ // Are we dealing with HTML string or an ID?
+ if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
+ // Assume that strings that start and end with <> are HTML and skip the regex check
+ match = [ null, selector, null ];
+
+ } else {
+ match = quickExpr.exec( selector );
+ }
+
+ // Verify a match, and that no context was specified for #id
+ if ( match && (match[1] || !context) ) {
+
+ // HANDLE: $(html) -> $(array)
+ if ( match[1] ) {
+ context = context instanceof jQuery ? context[0] : context;
+ doc = ( context ? context.ownerDocument || context : document );
+
+ // If a single string is passed in and it's a single tag
+ // just do a createElement and skip the rest
+ ret = rsingleTag.exec( selector );
+
+ if ( ret ) {
+ if ( jQuery.isPlainObject( context ) ) {
+ selector = [ document.createElement( ret[1] ) ];
+ jQuery.fn.attr.call( selector, context, true );
+
+ } else {
+ selector = [ doc.createElement( ret[1] ) ];
+ }
+
+ } else {
+ ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
+ selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
+ }
+
+ return jQuery.merge( this, selector );
+
+ // HANDLE: $("#id")
+ } else {
+ elem = document.getElementById( match[2] );
+
+ // Check parentNode to catch when Blackberry 4.6 returns
+ // nodes that are no longer in the document #6963
+ if ( elem && elem.parentNode ) {
+ // Handle the case where IE and Opera return items
+ // by name instead of ID
+ if ( elem.id !== match[2] ) {
+ return rootjQuery.find( selector );
+ }
+
+ // Otherwise, we inject the element directly into the jQuery object
+ this.length = 1;
+ this[0] = elem;
+ }
+
+ this.context = document;
+ this.selector = selector;
+ return this;
+ }
+
+ // HANDLE: $(expr, $(...))
+ } else if ( !context || context.jquery ) {
+ return ( context || rootjQuery ).find( selector );
+
+ // HANDLE: $(expr, context)
+ // (which is just equivalent to: $(context).find(expr)
+ } else {
+ return this.constructor( context ).find( selector );
+ }
+
+ // HANDLE: $(function)
+ // Shortcut for document ready
+ } else if ( jQuery.isFunction( selector ) ) {
+ return rootjQuery.ready( selector );
+ }
+
+ if ( selector.selector !== undefined ) {
+ this.selector = selector.selector;
+ this.context = selector.context;
+ }
+
+ return jQuery.makeArray( selector, this );
+ },
+
+ // Start with an empty selector
+ selector: "",
+
+ // The current version of jQuery being used
+ jquery: "1.7.1",
+
+ // The default length of a jQuery object is 0
+ length: 0,
+
+ // The number of elements contained in the matched element set
+ size: function() {
+ return this.length;
+ },
+
+ toArray: function() {
+ return slice.call( this, 0 );
+ },
+
+ // Get the Nth element in the matched element set OR
+ // Get the whole matched element set as a clean array
+ get: function( num ) {
+ return num == null ?
+
+ // Return a 'clean' array
+ this.toArray() :
+
+ // Return just the object
+ ( num < 0 ? this[ this.length + num ] : this[ num ] );
+ },
+
+ // Take an array of elements and push it onto the stack
+ // (returning the new matched element set)
+ pushStack: function( elems, name, selector ) {
+ // Build a new jQuery matched element set
+ var ret = this.constructor();
+
+ if ( jQuery.isArray( elems ) ) {
+ push.apply( ret, elems );
+
+ } else {
+ jQuery.merge( ret, elems );
+ }
+
+ // Add the old object onto the stack (as a reference)
+ ret.prevObject = this;
+
+ ret.context = this.context;
+
+ if ( name === "find" ) {
+ ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;
+ } else if ( name ) {
+ ret.selector = this.selector + "." + name + "(" + selector + ")";
+ }
+
+ // Return the newly-formed element set
+ return ret;
+ },
+
+ // Execute a callback for every element in the matched set.
+ // (You can seed the arguments with an array of args, but this is
+ // only used internally.)
+ each: function( callback, args ) {
+ return jQuery.each( this, callback, args );
+ },
+
+ ready: function( fn ) {
+ // Attach the listeners
+ jQuery.bindReady();
+
+ // Add the callback
+ readyList.add( fn );
+
+ return this;
+ },
+
+ eq: function( i ) {
+ i = +i;
+ return i === -1 ?
+ this.slice( i ) :
+ this.slice( i, i + 1 );
+ },
+
+ first: function() {
+ return this.eq( 0 );
+ },
+
+ last: function() {
+ return this.eq( -1 );
+ },
+
+ slice: function() {
+ return this.pushStack( slice.apply( this, arguments ),
+ "slice", slice.call(arguments).join(",") );
+ },
+
+ map: function( callback ) {
+ return this.pushStack( jQuery.map(this, function( elem, i ) {
+ return callback.call( elem, i, elem );
+ }));
+ },
+
+ end: function() {
+ return this.prevObject || this.constructor(null);
+ },
+
+ // For internal use only.
+ // Behaves like an Array's method, not like a jQuery method.
+ push: push,
+ sort: [].sort,
+ splice: [].splice
+};
+
+// Give the init function the jQuery prototype for later instantiation
+jQuery.fn.init.prototype = jQuery.fn;
+
+jQuery.extend = jQuery.fn.extend = function() {
+ var options, name, src, copy, copyIsArray, clone,
+ target = arguments[0] || {},
+ i = 1,
+ length = arguments.length,
+ deep = false;
+
+ // Handle a deep copy situation
+ if ( typeof target === "boolean" ) {
+ deep = target;
+ target = arguments[1] || {};
+ // skip the boolean and the target
+ i = 2;
+ }
+
+ // Handle case when target is a string or something (possible in deep copy)
+ if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
+ target = {};
+ }
+
+ // extend jQuery itself if only one argument is passed
+ if ( length === i ) {
+ target = this;
+ --i;
+ }
+
+ for ( ; i < length; i++ ) {
+ // Only deal with non-null/undefined values
+ if ( (options = arguments[ i ]) != null ) {
+ // Extend the base object
+ for ( name in options ) {
+ src = target[ name ];
+ copy = options[ name ];
+
+ // Prevent never-ending loop
+ if ( target === copy ) {
+ continue;
+ }
+
+ // Recurse if we're merging plain objects or arrays
+ if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
+ if ( copyIsArray ) {
+ copyIsArray = false;
+ clone = src && jQuery.isArray(src) ? src : [];
+
+ } else {
+ clone = src && jQuery.isPlainObject(src) ? src : {};
+ }
+
+ // Never move original objects, clone them
+ target[ name ] = jQuery.extend( deep, clone, copy );
+
+ // Don't bring in undefined values
+ } else if ( copy !== undefined ) {
+ target[ name ] = copy;
+ }
+ }
+ }
+ }
+
+ // Return the modified object
+ return target;
+};
+
+jQuery.extend({
+ noConflict: function( deep ) {
+ if ( window.$ === jQuery ) {
+ window.$ = _$;
+ }
+
+ if ( deep && window.jQuery === jQuery ) {
+ window.jQuery = _jQuery;
+ }
+
+ return jQuery;
+ },
+
+ // Is the DOM ready to be used? Set to true once it occurs.
+ isReady: false,
+
+ // A counter to track how many items to wait for before
+ // the ready event fires. See #6781
+ readyWait: 1,
+
+ // Hold (or release) the ready event
+ holdReady: function( hold ) {
+ if ( hold ) {
+ jQuery.readyWait++;
+ } else {
+ jQuery.ready( true );
+ }
+ },
+
+ // Handle when the DOM is ready
+ ready: function( wait ) {
+ // Either a released hold or an DOMready/load event and not yet ready
+ if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {
+ // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
+ if ( !document.body ) {
+ return setTimeout( jQuery.ready, 1 );
+ }
+
+ // Remember that the DOM is ready
+ jQuery.isReady = true;
+
+ // If a normal DOM Ready event fired, decrement, and wait if need be
+ if ( wait !== true && --jQuery.readyWait > 0 ) {
+ return;
+ }
+
+ // If there are functions bound, to execute
+ readyList.fireWith( document, [ jQuery ] );
+
+ // Trigger any bound ready events
+ if ( jQuery.fn.trigger ) {
+ jQuery( document ).trigger( "ready" ).off( "ready" );
+ }
+ }
+ },
+
+ bindReady: function() {
+ if ( readyList ) {
+ return;
+ }
+
+ readyList = jQuery.Callbacks( "once memory" );
+
+ // Catch cases where $(document).ready() is called after the
+ // browser event has already occurred.
+ if ( document.readyState === "complete" ) {
+ // Handle it asynchronously to allow scripts the opportunity to delay ready
+ return setTimeout( jQuery.ready, 1 );
+ }
+
+ // Mozilla, Opera and webkit nightlies currently support this event
+ if ( document.addEventListener ) {
+ // Use the handy event callback
+ document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
+
+ // A fallback to window.onload, that will always work
+ window.addEventListener( "load", jQuery.ready, false );
+
+ // If IE event model is used
+ } else if ( document.attachEvent ) {
+ // ensure firing before onload,
+ // maybe late but safe also for iframes
+ document.attachEvent( "onreadystatechange", DOMContentLoaded );
+
+ // A fallback to window.onload, that will always work
+ window.attachEvent( "onload", jQuery.ready );
+
+ // If IE and not a frame
+ // continually check to see if the document is ready
+ var toplevel = false;
+
+ try {
+ toplevel = window.frameElement == null;
+ } catch(e) {}
+
+ if ( document.documentElement.doScroll && toplevel ) {
+ doScrollCheck();
+ }
+ }
+ },
+
+ // See test/unit/core.js for details concerning isFunction.
+ // Since version 1.3, DOM methods and functions like alert
+ // aren't supported. They return false on IE (#2968).
+ isFunction: function( obj ) {
+ return jQuery.type(obj) === "function";
+ },
+
+ isArray: Array.isArray || function( obj ) {
+ return jQuery.type(obj) === "array";
+ },
+
+ // A crude way of determining if an object is a window
+ isWindow: function( obj ) {
+ return obj && typeof obj === "object" && "setInterval" in obj;
+ },
+
+ isNumeric: function( obj ) {
+ return !isNaN( parseFloat(obj) ) && isFinite( obj );
+ },
+
+ type: function( obj ) {
+ return obj == null ?
+ String( obj ) :
+ class2type[ toString.call(obj) ] || "object";
+ },
+
+ isPlainObject: function( obj ) {
+ // Must be an Object.
+ // Because of IE, we also have to check the presence of the constructor property.
+ // Make sure that DOM nodes and window objects don't pass through, as well
+ if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
+ return false;
+ }
+
+ try {
+ // Not own constructor property must be Object
+ if ( obj.constructor &&
+ !hasOwn.call(obj, "constructor") &&
+ !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
+ return false;
+ }
+ } catch ( e ) {
+ // IE8,9 Will throw exceptions on certain host objects #9897
+ return false;
+ }
+
+ // Own properties are enumerated firstly, so to speed up,
+ // if last one is own, then all properties are own.
+
+ var key;
+ for ( key in obj ) {}
+
+ return key === undefined || hasOwn.call( obj, key );
+ },
+
+ isEmptyObject: function( obj ) {
+ for ( var name in obj ) {
+ return false;
+ }
+ return true;
+ },
+
+ error: function( msg ) {
+ throw new Error( msg );
+ },
+
+ parseJSON: function( data ) {
+ if ( typeof data !== "string" || !data ) {
+ return null;
+ }
+
+ // Make sure leading/trailing whitespace is removed (IE can't handle it)
+ data = jQuery.trim( data );
+
+ // Attempt to parse using the native JSON parser first
+ if ( window.JSON && window.JSON.parse ) {
+ return window.JSON.parse( data );
+ }
+
+ // Make sure the incoming data is actual JSON
+ // Logic borrowed from http://json.org/json2.js
+ if ( rvalidchars.test( data.replace( rvalidescape, "@" )
+ .replace( rvalidtokens, "]" )
+ .replace( rvalidbraces, "")) ) {
+
+ return ( new Function( "return " + data ) )();
+
+ }
+ jQuery.error( "Invalid JSON: " + data );
+ },
+
+ // Cross-browser xml parsing
+ parseXML: function( data ) {
+ var xml, tmp;
+ try {
+ if ( window.DOMParser ) { // Standard
+ tmp = new DOMParser();
+ xml = tmp.parseFromString( data , "text/xml" );
+ } else { // IE
+ xml = new ActiveXObject( "Microsoft.XMLDOM" );
+ xml.async = "false";
+ xml.loadXML( data );
+ }
+ } catch( e ) {
+ xml = undefined;
+ }
+ if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
+ jQuery.error( "Invalid XML: " + data );
+ }
+ return xml;
+ },
+
+ noop: function() {},
+
+ // Evaluates a script in a global context
+ // Workarounds based on findings by Jim Driscoll
+ // http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
+ globalEval: function( data ) {
+ if ( data && rnotwhite.test( data ) ) {
+ // We use execScript on Internet Explorer
+ // We use an anonymous function so that context is window
+ // rather than jQuery in Firefox
+ ( window.execScript || function( data ) {
+ window[ "eval" ].call( window, data );
+ } )( data );
+ }
+ },
+
+ // Convert dashed to camelCase; used by the css and data modules
+ // Microsoft forgot to hump their vendor prefix (#9572)
+ camelCase: function( string ) {
+ return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
+ },
+
+ nodeName: function( elem, name ) {
+ return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
+ },
+
+ // args is for internal usage only
+ each: function( object, callback, args ) {
+ var name, i = 0,
+ length = object.length,
+ isObj = length === undefined || jQuery.isFunction( object );
+
+ if ( args ) {
+ if ( isObj ) {
+ for ( name in object ) {
+ if ( callback.apply( object[ name ], args ) === false ) {
+ break;
+ }
+ }
+ } else {
+ for ( ; i < length; ) {
+ if ( callback.apply( object[ i++ ], args ) === false ) {
+ break;
+ }
+ }
+ }
+
+ // A special, fast, case for the most common use of each
+ } else {
+ if ( isObj ) {
+ for ( name in object ) {
+ if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
+ break;
+ }
+ }
+ } else {
+ for ( ; i < length; ) {
+ if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
+ break;
+ }
+ }
+ }
+ }
+
+ return object;
+ },
+
+ // Use native String.trim function wherever possible
+ trim: trim ?
+ function( text ) {
+ return text == null ?
+ "" :
+ trim.call( text );
+ } :
+
+ // Otherwise use our own trimming functionality
+ function( text ) {
+ return text == null ?
+ "" :
+ text.toString().replace( trimLeft, "" ).replace( trimRight, "" );
+ },
+
+ // results is for internal usage only
+ makeArray: function( array, results ) {
+ var ret = results || [];
+
+ if ( array != null ) {
+ // The window, strings (and functions) also have 'length'
+ // Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930
+ var type = jQuery.type( array );
+
+ if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) {
+ push.call( ret, array );
+ } else {
+ jQuery.merge( ret, array );
+ }
+ }
+
+ return ret;
+ },
+
+ inArray: function( elem, array, i ) {
+ var len;
+
+ if ( array ) {
+ if ( indexOf ) {
+ return indexOf.call( array, elem, i );
+ }
+
+ len = array.length;
+ i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
+
+ for ( ; i < len; i++ ) {
+ // Skip accessing in sparse arrays
+ if ( i in array && array[ i ] === elem ) {
+ return i;
+ }
+ }
+ }
+
+ return -1;
+ },
+
+ merge: function( first, second ) {
+ var i = first.length,
+ j = 0;
+
+ if ( typeof second.length === "number" ) {
+ for ( var l = second.length; j < l; j++ ) {
+ first[ i++ ] = second[ j ];
+ }
+
+ } else {
+ while ( second[j] !== undefined ) {
+ first[ i++ ] = second[ j++ ];
+ }
+ }
+
+ first.length = i;
+
+ return first;
+ },
+
+ grep: function( elems, callback, inv ) {
+ var ret = [], retVal;
+ inv = !!inv;
+
+ // Go through the array, only saving the items
+ // that pass the validator function
+ for ( var i = 0, length = elems.length; i < length; i++ ) {
+ retVal = !!callback( elems[ i ], i );
+ if ( inv !== retVal ) {
+ ret.push( elems[ i ] );
+ }
+ }
+
+ return ret;
+ },
+
+ // arg is for internal usage only
+ map: function( elems, callback, arg ) {
+ var value, key, ret = [],
+ i = 0,
+ length = elems.length,
+ // jquery objects are treated as arrays
+ isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ;
+
+ // Go through the array, translating each of the items to their
+ if ( isArray ) {
+ for ( ; i < length; i++ ) {
+ value = callback( elems[ i ], i, arg );
+
+ if ( value != null ) {
+ ret[ ret.length ] = value;
+ }
+ }
+
+ // Go through every key on the object,
+ } else {
+ for ( key in elems ) {
+ value = callback( elems[ key ], key, arg );
+
+ if ( value != null ) {
+ ret[ ret.length ] = value;
+ }
+ }
+ }
+
+ // Flatten any nested arrays
+ return ret.concat.apply( [], ret );
+ },
+
+ // A global GUID counter for objects
+ guid: 1,
+
+ // Bind a function to a context, optionally partially applying any
+ // arguments.
+ proxy: function( fn, context ) {
+ if ( typeof context === "string" ) {
+ var tmp = fn[ context ];
+ context = fn;
+ fn = tmp;
+ }
+
+ // Quick check to determine if target is callable, in the spec
+ // this throws a TypeError, but we will just return undefined.
+ if ( !jQuery.isFunction( fn ) ) {
+ return undefined;
+ }
+
+ // Simulated bind
+ var args = slice.call( arguments, 2 ),
+ proxy = function() {
+ return fn.apply( context, args.concat( slice.call( arguments ) ) );
+ };
+
+ // Set the guid of unique handler to the same of original handler, so it can be removed
+ proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++;
+
+ return proxy;
+ },
+
+ // Mutifunctional method to get and set values to a collection
+ // The value/s can optionally be executed if it's a function
+ access: function( elems, key, value, exec, fn, pass ) {
+ var length = elems.length;
+
+ // Setting many attributes
+ if ( typeof key === "object" ) {
+ for ( var k in key ) {
+ jQuery.access( elems, k, key[k], exec, fn, value );
+ }
+ return elems;
+ }
+
+ // Setting one attribute
+ if ( value !== undefined ) {
+ // Optionally, function values get executed if exec is true
+ exec = !pass && exec && jQuery.isFunction(value);
+
+ for ( var i = 0; i < length; i++ ) {
+ fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
+ }
+
+ return elems;
+ }
+
+ // Getting an attribute
+ return length ? fn( elems[0], key ) : undefined;
+ },
+
+ now: function() {
+ return ( new Date() ).getTime();
+ },
+
+ // Use of jQuery.browser is frowned upon.
+ // More details: http://docs.jquery.com/Utilities/jQuery.browser
+ uaMatch: function( ua ) {
+ ua = ua.toLowerCase();
+
+ var match = rwebkit.exec( ua ) ||
+ ropera.exec( ua ) ||
+ rmsie.exec( ua ) ||
+ ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) ||
+ [];
+
+ return { browser: match[1] || "", version: match[2] || "0" };
+ },
+
+ sub: function() {
+ function jQuerySub( selector, context ) {
+ return new jQuerySub.fn.init( selector, context );
+ }
+ jQuery.extend( true, jQuerySub, this );
+ jQuerySub.superclass = this;
+ jQuerySub.fn = jQuerySub.prototype = this();
+ jQuerySub.fn.constructor = jQuerySub;
+ jQuerySub.sub = this.sub;
+ jQuerySub.fn.init = function init( selector, context ) {
+ if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) {
+ context = jQuerySub( context );
+ }
+
+ return jQuery.fn.init.call( this, selector, context, rootjQuerySub );
+ };
+ jQuerySub.fn.init.prototype = jQuerySub.fn;
+ var rootjQuerySub = jQuerySub(document);
+ return jQuerySub;
+ },
+
+ browser: {}
+});
+
+// Populate the class2type map
+jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) {
+ class2type[ "[object " + name + "]" ] = name.toLowerCase();
+});
+
+browserMatch = jQuery.uaMatch( userAgent );
+if ( browserMatch.browser ) {
+ jQuery.browser[ browserMatch.browser ] = true;
+ jQuery.browser.version = browserMatch.version;
+}
+
+// Deprecated, use jQuery.browser.webkit instead
+if ( jQuery.browser.webkit ) {
+ jQuery.browser.safari = true;
+}
+
+// IE doesn't match non-breaking spaces with \s
+if ( rnotwhite.test( "\xA0" ) ) {
+ trimLeft = /^[\s\xA0]+/;
+ trimRight = /[\s\xA0]+$/;
+}
+
+// All jQuery objects should point back to these
+rootjQuery = jQuery(document);
+
+// Cleanup functions for the document ready method
+if ( document.addEventListener ) {
+ DOMContentLoaded = function() {
+ document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
+ jQuery.ready();
+ };
+
+} else if ( document.attachEvent ) {
+ DOMContentLoaded = function() {
+ // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
+ if ( document.readyState === "complete" ) {
+ document.detachEvent( "onreadystatechange", DOMContentLoaded );
+ jQuery.ready();
+ }
+ };
+}
+
+// The DOM ready check for Internet Explorer
+function doScrollCheck() {
+ if ( jQuery.isReady ) {
+ return;
+ }
+
+ try {
+ // If IE is used, use the trick by Diego Perini
+ // http://javascript.nwbox.com/IEContentLoaded/
+ document.documentElement.doScroll("left");
+ } catch(e) {
+ setTimeout( doScrollCheck, 1 );
+ return;
+ }
+
+ // and execute any waiting functions
+ jQuery.ready();
+}
+
+return jQuery;
+
+})();
+
+
+// String to Object flags format cache
+var flagsCache = {};
+
+// Convert String-formatted flags into Object-formatted ones and store in cache
+function createFlags( flags ) {
+ var object = flagsCache[ flags ] = {},
+ i, length;
+ flags = flags.split( /\s+/ );
+ for ( i = 0, length = flags.length; i < length; i++ ) {
+ object[ flags[i] ] = true;
+ }
+ return object;
+}
+
+/*
+ * Create a callback list using the following parameters:
+ *
+ * flags: an optional list of space-separated flags that will change how
+ * the callback list behaves
+ *
+ * By default a callback list will act like an event callback list and can be
+ * "fired" multiple times.
+ *
+ * Possible flags:
+ *
+ * once: will ensure the callback list can only be fired once (like a Deferred)
+ *
+ * memory: will keep track of previous values and will call any callback added
+ * after the list has been fired right away with the latest "memorized"
+ * values (like a Deferred)
+ *
+ * unique: will ensure a callback can only be added once (no duplicate in the list)
+ *
+ * stopOnFalse: interrupt callings when a callback returns false
+ *
+ */
+jQuery.Callbacks = function( flags ) {
+
+ // Convert flags from String-formatted to Object-formatted
+ // (we check in cache first)
+ flags = flags ? ( flagsCache[ flags ] || createFlags( flags ) ) : {};
+
+ var // Actual callback list
+ list = [],
+ // Stack of fire calls for repeatable lists
+ stack = [],
+ // Last fire value (for non-forgettable lists)
+ memory,
+ // Flag to know if list is currently firing
+ firing,
+ // First callback to fire (used internally by add and fireWith)
+ firingStart,
+ // End of the loop when firing
+ firingLength,
+ // Index of currently firing callback (modified by remove if needed)
+ firingIndex,
+ // Add one or several callbacks to the list
+ add = function( args ) {
+ var i,
+ length,
+ elem,
+ type,
+ actual;
+ for ( i = 0, length = args.length; i < length; i++ ) {
+ elem = args[ i ];
+ type = jQuery.type( elem );
+ if ( type === "array" ) {
+ // Inspect recursively
+ add( elem );
+ } else if ( type === "function" ) {
+ // Add if not in unique mode and callback is not in
+ if ( !flags.unique || !self.has( elem ) ) {
+ list.push( elem );
+ }
+ }
+ }
+ },
+ // Fire callbacks
+ fire = function( context, args ) {
+ args = args || [];
+ memory = !flags.memory || [ context, args ];
+ firing = true;
+ firingIndex = firingStart || 0;
+ firingStart = 0;
+ firingLength = list.length;
+ for ( ; list && firingIndex < firingLength; firingIndex++ ) {
+ if ( list[ firingIndex ].apply( context, args ) === false && flags.stopOnFalse ) {
+ memory = true; // Mark as halted
+ break;
+ }
+ }
+ firing = false;
+ if ( list ) {
+ if ( !flags.once ) {
+ if ( stack && stack.length ) {
+ memory = stack.shift();
+ self.fireWith( memory[ 0 ], memory[ 1 ] );
+ }
+ } else if ( memory === true ) {
+ self.disable();
+ } else {
+ list = [];
+ }
+ }
+ },
+ // Actual Callbacks object
+ self = {
+ // Add a callback or a collection of callbacks to the list
+ add: function() {
+ if ( list ) {
+ var length = list.length;
+ add( arguments );
+ // Do we need to add the callbacks to the
+ // current firing batch?
+ if ( firing ) {
+ firingLength = list.length;
+ // With memory, if we're not firing then
+ // we should call right away, unless previous
+ // firing was halted (stopOnFalse)
+ } else if ( memory && memory !== true ) {
+ firingStart = length;
+ fire( memory[ 0 ], memory[ 1 ] );
+ }
+ }
+ return this;
+ },
+ // Remove a callback from the list
+ remove: function() {
+ if ( list ) {
+ var args = arguments,
+ argIndex = 0,
+ argLength = args.length;
+ for ( ; argIndex < argLength ; argIndex++ ) {
+ for ( var i = 0; i < list.length; i++ ) {
+ if ( args[ argIndex ] === list[ i ] ) {
+ // Handle firingIndex and firingLength
+ if ( firing ) {
+ if ( i <= firingLength ) {
+ firingLength--;
+ if ( i <= firingIndex ) {
+ firingIndex--;
+ }
+ }
+ }
+ // Remove the element
+ list.splice( i--, 1 );
+ // If we have some unicity property then
+ // we only need to do this once
+ if ( flags.unique ) {
+ break;
+ }
+ }
+ }
+ }
+ }
+ return this;
+ },
+ // Control if a given callback is in the list
+ has: function( fn ) {
+ if ( list ) {
+ var i = 0,
+ length = list.length;
+ for ( ; i < length; i++ ) {
+ if ( fn === list[ i ] ) {
+ return true;
+ }
+ }
+ }
+ return false;
+ },
+ // Remove all callbacks from the list
+ empty: function() {
+ list = [];
+ return this;
+ },
+ // Have the list do nothing anymore
+ disable: function() {
+ list = stack = memory = undefined;
+ return this;
+ },
+ // Is it disabled?
+ disabled: function() {
+ return !list;
+ },
+ // Lock the list in its current state
+ lock: function() {
+ stack = undefined;
+ if ( !memory || memory === true ) {
+ self.disable();
+ }
+ return this;
+ },
+ // Is it locked?
+ locked: function() {
+ return !stack;
+ },
+ // Call all callbacks with the given context and arguments
+ fireWith: function( context, args ) {
+ if ( stack ) {
+ if ( firing ) {
+ if ( !flags.once ) {
+ stack.push( [ context, args ] );
+ }
+ } else if ( !( flags.once && memory ) ) {
+ fire( context, args );
+ }
+ }
+ return this;
+ },
+ // Call all the callbacks with the given arguments
+ fire: function() {
+ self.fireWith( this, arguments );
+ return this;
+ },
+ // To know if the callbacks have already been called at least once
+ fired: function() {
+ return !!memory;
+ }
+ };
+
+ return self;
+};
+
+
+
+
+var // Static reference to slice
+ sliceDeferred = [].slice;
+
+jQuery.extend({
+
+ Deferred: function( func ) {
+ var doneList = jQuery.Callbacks( "once memory" ),
+ failList = jQuery.Callbacks( "once memory" ),
+ progressList = jQuery.Callbacks( "memory" ),
+ state = "pending",
+ lists = {
+ resolve: doneList,
+ reject: failList,
+ notify: progressList
+ },
+ promise = {
+ done: doneList.add,
+ fail: failList.add,
+ progress: progressList.add,
+
+ state: function() {
+ return state;
+ },
+
+ // Deprecated
+ isResolved: doneList.fired,
+ isRejected: failList.fired,
+
+ then: function( doneCallbacks, failCallbacks, progressCallbacks ) {
+ deferred.done( doneCallbacks ).fail( failCallbacks ).progress( progressCallbacks );
+ return this;
+ },
+ always: function() {
+ deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments );
+ return this;
+ },
+ pipe: function( fnDone, fnFail, fnProgress ) {
+ return jQuery.Deferred(function( newDefer ) {
+ jQuery.each( {
+ done: [ fnDone, "resolve" ],
+ fail: [ fnFail, "reject" ],
+ progress: [ fnProgress, "notify" ]
+ }, function( handler, data ) {
+ var fn = data[ 0 ],
+ action = data[ 1 ],
+ returned;
+ if ( jQuery.isFunction( fn ) ) {
+ deferred[ handler ](function() {
+ returned = fn.apply( this, arguments );
+ if ( returned && jQuery.isFunction( returned.promise ) ) {
+ returned.promise().then( newDefer.resolve, newDefer.reject, newDefer.notify );
+ } else {
+ newDefer[ action + "With" ]( this === deferred ? newDefer : this, [ returned ] );
+ }
+ });
+ } else {
+ deferred[ handler ]( newDefer[ action ] );
+ }
+ });
+ }).promise();
+ },
+ // Get a promise for this deferred
+ // If obj is provided, the promise aspect is added to the object
+ promise: function( obj ) {
+ if ( obj == null ) {
+ obj = promise;
+ } else {
+ for ( var key in promise ) {
+ obj[ key ] = promise[ key ];
+ }
+ }
+ return obj;
+ }
+ },
+ deferred = promise.promise({}),
+ key;
+
+ for ( key in lists ) {
+ deferred[ key ] = lists[ key ].fire;
+ deferred[ key + "With" ] = lists[ key ].fireWith;
+ }
+
+ // Handle state
+ deferred.done( function() {
+ state = "resolved";
+ }, failList.disable, progressList.lock ).fail( function() {
+ state = "rejected";
+ }, doneList.disable, progressList.lock );
+
+ // Call given func if any
+ if ( func ) {
+ func.call( deferred, deferred );
+ }
+
+ // All done!
+ return deferred;
+ },
+
+ // Deferred helper
+ when: function( firstParam ) {
+ var args = sliceDeferred.call( arguments, 0 ),
+ i = 0,
+ length = args.length,
+ pValues = new Array( length ),
+ count = length,
+ pCount = length,
+ deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ?
+ firstParam :
+ jQuery.Deferred(),
+ promise = deferred.promise();
+ function resolveFunc( i ) {
+ return function( value ) {
+ args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value;
+ if ( !( --count ) ) {
+ deferred.resolveWith( deferred, args );
+ }
+ };
+ }
+ function progressFunc( i ) {
+ return function( value ) {
+ pValues[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value;
+ deferred.notifyWith( promise, pValues );
+ };
+ }
+ if ( length > 1 ) {
+ for ( ; i < length; i++ ) {
+ if ( args[ i ] && args[ i ].promise && jQuery.isFunction( args[ i ].promise ) ) {
+ args[ i ].promise().then( resolveFunc(i), deferred.reject, progressFunc(i) );
+ } else {
+ --count;
+ }
+ }
+ if ( !count ) {
+ deferred.resolveWith( deferred, args );
+ }
+ } else if ( deferred !== firstParam ) {
+ deferred.resolveWith( deferred, length ? [ firstParam ] : [] );
+ }
+ return promise;
+ }
+});
+
+
+
+
+jQuery.support = (function() {
+
+ var support,
+ all,
+ a,
+ select,
+ opt,
+ input,
+ marginDiv,
+ fragment,
+ tds,
+ events,
+ eventName,
+ i,
+ isSupported,
+ div = document.createElement( "div" ),
+ documentElement = document.documentElement;
+
+ // Preliminary tests
+ div.setAttribute("className", "t");
+ div.innerHTML = " <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
+
+ all = div.getElementsByTagName( "*" );
+ a = div.getElementsByTagName( "a" )[ 0 ];
+
+ // Can't get basic test support
+ if ( !all || !all.length || !a ) {
+ return {};
+ }
+
+ // First batch of supports tests
+ select = document.createElement( "select" );
+ opt = select.appendChild( document.createElement("option") );
+ input = div.getElementsByTagName( "input" )[ 0 ];
+
+ support = {
+ // IE strips leading whitespace when .innerHTML is used
+ leadingWhitespace: ( div.firstChild.nodeType === 3 ),
+
+ // Make sure that tbody elements aren't automatically inserted
+ // IE will insert them into empty tables
+ tbody: !div.getElementsByTagName("tbody").length,
+
+ // Make sure that link elements get serialized correctly by innerHTML
+ // This requires a wrapper element in IE
+ htmlSerialize: !!div.getElementsByTagName("link").length,
+
+ // Get the style information from getAttribute
+ // (IE uses .cssText instead)
+ style: /top/.test( a.getAttribute("style") ),
+
+ // Make sure that URLs aren't manipulated
+ // (IE normalizes it by default)
+ hrefNormalized: ( a.getAttribute("href") === "/a" ),
+
+ // Make sure that element opacity exists
+ // (IE uses filter instead)
+ // Use a regex to work around a WebKit issue. See #5145
+ opacity: /^0.55/.test( a.style.opacity ),
+
+ // Verify style float existence
+ // (IE uses styleFloat instead of cssFloat)
+ cssFloat: !!a.style.cssFloat,
+
+ // Make sure that if no value is specified for a checkbox
+ // that it defaults to "on".
+ // (WebKit defaults to "" instead)
+ checkOn: ( input.value === "on" ),
+
+ // Make sure that a selected-by-default option has a working selected property.
+ // (WebKit defaults to false instead of true, IE too, if it's in an optgroup)
+ optSelected: opt.selected,
+
+ // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
+ getSetAttribute: div.className !== "t",
+
+ // Tests for enctype support on a form(#6743)
+ enctype: !!document.createElement("form").enctype,
+
+ // Makes sure cloning an html5 element does not cause problems
+ // Where outerHTML is undefined, this still works
+ html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>",
+
+ // Will be defined later
+ submitBubbles: true,
+ changeBubbles: true,
+ focusinBubbles: false,
+ deleteExpando: true,
+ noCloneEvent: true,
+ inlineBlockNeedsLayout: false,
+ shrinkWrapBlocks: false,
+ reliableMarginRight: true
+ };
+
+ // Make sure checked status is properly cloned
+ input.checked = true;
+ support.noCloneChecked = input.cloneNode( true ).checked;
+
+ // Make sure that the options inside disabled selects aren't marked as disabled
+ // (WebKit marks them as disabled)
+ select.disabled = true;
+ support.optDisabled = !opt.disabled;
+
+ // Test to see if it's possible to delete an expando from an element
+ // Fails in Internet Explorer
+ try {
+ delete div.test;
+ } catch( e ) {
+ support.deleteExpando = false;
+ }
+
+ if ( !div.addEventListener && div.attachEvent && div.fireEvent ) {
+ div.attachEvent( "onclick", function() {
+ // Cloning a node shouldn't copy over any
+ // bound event handlers (IE does this)
+ support.noCloneEvent = false;
+ });
+ div.cloneNode( true ).fireEvent( "onclick" );
+ }
+
+ // Check if a radio maintains its value
+ // after being appended to the DOM
+ input = document.createElement("input");
+ input.value = "t";
+ input.setAttribute("type", "radio");
+ support.radioValue = input.value === "t";
+
+ input.setAttribute("checked", "checked");
+ div.appendChild( input );
+ fragment = document.createDocumentFragment();
+ fragment.appendChild( div.lastChild );
+
+ // WebKit doesn't clone checked state correctly in fragments
+ support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;
+
+ // Check if a disconnected checkbox will retain its checked
+ // value of true after appended to the DOM (IE6/7)
+ support.appendChecked = input.checked;
+
+ fragment.removeChild( input );
+ fragment.appendChild( div );
+
+ div.innerHTML = "";
+
+ // Check if div with explicit width and no margin-right incorrectly
+ // gets computed margin-right based on width of container. For more
+ // info see bug #3333
+ // Fails in WebKit before Feb 2011 nightlies
+ // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
+ if ( window.getComputedStyle ) {
+ marginDiv = document.createElement( "div" );
+ marginDiv.style.width = "0";
+ marginDiv.style.marginRight = "0";
+ div.style.width = "2px";
+ div.appendChild( marginDiv );
+ support.reliableMarginRight =
+ ( parseInt( ( window.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0;
+ }
+
+ // Technique from Juriy Zaytsev
+ // http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
+ // We only care about the case where non-standard event systems
+ // are used, namely in IE. Short-circuiting here helps us to
+ // avoid an eval call (in setAttribute) which can cause CSP
+ // to go haywire. See: https://developer.mozilla.org/en/Security/CSP
+ if ( div.attachEvent ) {
+ for( i in {
+ submit: 1,
+ change: 1,
+ focusin: 1
+ }) {
+ eventName = "on" + i;
+ isSupported = ( eventName in div );
+ if ( !isSupported ) {
+ div.setAttribute( eventName, "return;" );
+ isSupported = ( typeof div[ eventName ] === "function" );
+ }
+ support[ i + "Bubbles" ] = isSupported;
+ }
+ }
+
+ fragment.removeChild( div );
+
+ // Null elements to avoid leaks in IE
+ fragment = select = opt = marginDiv = div = input = null;
+
+ // Run tests that need a body at doc ready
+ jQuery(function() {
+ var container, outer, inner, table, td, offsetSupport,
+ conMarginTop, ptlm, vb, style, html,
+ body = document.getElementsByTagName("body")[0];
+
+ if ( !body ) {
+ // Return for frameset docs that don't have a body
+ return;
+ }
+
+ conMarginTop = 1;
+ ptlm = "position:absolute;top:0;left:0;width:1px;height:1px;margin:0;";
+ vb = "visibility:hidden;border:0;";
+ style = "style='" + ptlm + "border:5px solid #000;padding:0;'";
+ html = "<div " + style + "><div></div></div>" +
+ "<table " + style + " cellpadding='0' cellspacing='0'>" +
+ "<tr><td></td></tr></table>";
+
+ container = document.createElement("div");
+ container.style.cssText = vb + "width:0;height:0;position:static;top:0;margin-top:" + conMarginTop + "px";
+ body.insertBefore( container, body.firstChild );
+
+ // Construct the test element
+ div = document.createElement("div");
+ container.appendChild( div );
+
+ // Check if table cells still have offsetWidth/Height when they are set
+ // to display:none and there are still other visible table cells in a
+ // table row; if so, offsetWidth/Height are not reliable for use when
+ // determining if an element has been hidden directly using
+ // display:none (it is still safe to use offsets if a parent element is
+ // hidden; don safety goggles and see bug #4512 for more information).
+ // (only IE 8 fails this test)
+ div.innerHTML = "<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>";
+ tds = div.getElementsByTagName( "td" );
+ isSupported = ( tds[ 0 ].offsetHeight === 0 );
+
+ tds[ 0 ].style.display = "";
+ tds[ 1 ].style.display = "none";
+
+ // Check if empty table cells still have offsetWidth/Height
+ // (IE <= 8 fail this test)
+ support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );
+
+ // Figure out if the W3C box model works as expected
+ div.innerHTML = "";
+ div.style.width = div.style.paddingLeft = "1px";
+ jQuery.boxModel = support.boxModel = div.offsetWidth === 2;
+
+ if ( typeof div.style.zoom !== "undefined" ) {
+ // Check if natively block-level elements act like inline-block
+ // elements when setting their display to 'inline' and giving
+ // them layout
+ // (IE < 8 does this)
+ div.style.display = "inline";
+ div.style.zoom = 1;
+ support.inlineBlockNeedsLayout = ( div.offsetWidth === 2 );
+
+ // Check if elements with layout shrink-wrap their children
+ // (IE 6 does this)
+ div.style.display = "";
+ div.innerHTML = "<div style='width:4px;'></div>";
+ support.shrinkWrapBlocks = ( div.offsetWidth !== 2 );
+ }
+
+ div.style.cssText = ptlm + vb;
+ div.innerHTML = html;
+
+ outer = div.firstChild;
+ inner = outer.firstChild;
+ td = outer.nextSibling.firstChild.firstChild;
+
+ offsetSupport = {
+ doesNotAddBorder: ( inner.offsetTop !== 5 ),
+ doesAddBorderForTableAndCells: ( td.offsetTop === 5 )
+ };
+
+ inner.style.position = "fixed";
+ inner.style.top = "20px";
+
+ // safari subtracts parent border width here which is 5px
+ offsetSupport.fixedPosition = ( inner.offsetTop === 20 || inner.offsetTop === 15 );
+ inner.style.position = inner.style.top = "";
+
+ outer.style.overflow = "hidden";
+ outer.style.position = "relative";
+
+ offsetSupport.subtractsBorderForOverflowNotVisible = ( inner.offsetTop === -5 );
+ offsetSupport.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== conMarginTop );
+
+ body.removeChild( container );
+ div = container = null;
+
+ jQuery.extend( support, offsetSupport );
+ });
+
+ return support;
+})();
+
+
+
+
+var rbrace = /^(?:\{.*\}|\[.*\])$/,
+ rmultiDash = /([A-Z])/g;
+
+jQuery.extend({
+ cache: {},
+
+ // Please use with caution
+ uuid: 0,
+
+ // Unique for each copy of jQuery on the page
+ // Non-digits removed to match rinlinejQuery
+ expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),
+
+ // The following elements throw uncatchable exceptions if you
+ // attempt to add expando properties to them.
+ noData: {
+ "embed": true,
+ // Ban all objects except for Flash (which handle expandos)
+ "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
+ "applet": true
+ },
+
+ hasData: function( elem ) {
+ elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ];
+ return !!elem && !isEmptyDataObject( elem );
+ },
+
+ data: function( elem, name, data, pvt /* Internal Use Only */ ) {
+ if ( !jQuery.acceptData( elem ) ) {
+ return;
+ }
+
+ var privateCache, thisCache, ret,
+ internalKey = jQuery.expando,
+ getByName = typeof name === "string",
+
+ // We have to handle DOM nodes and JS objects differently because IE6-7
+ // can't GC object references properly across the DOM-JS boundary
+ isNode = elem.nodeType,
+
+ // Only DOM nodes need the global jQuery cache; JS object data is
+ // attached directly to the object so GC can occur automatically
+ cache = isNode ? jQuery.cache : elem,
+
+ // Only defining an ID for JS objects if its cache already exists allows
+ // the code to shortcut on the same path as a DOM node with no cache
+ id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey,
+ isEvents = name === "events";
+
+ // Avoid doing any more work than we need to when trying to get data on an
+ // object that has no data at all
+ if ( (!id || !cache[id] || (!isEvents && !pvt && !cache[id].data)) && getByName && data === undefined ) {
+ return;
+ }
+
+ if ( !id ) {
+ // Only DOM nodes need a new unique ID for each element since their data
+ // ends up in the global cache
+ if ( isNode ) {
+ elem[ internalKey ] = id = ++jQuery.uuid;
+ } else {
+ id = internalKey;
+ }
+ }
+
+ if ( !cache[ id ] ) {
+ cache[ id ] = {};
+
+ // Avoids exposing jQuery metadata on plain JS objects when the object
+ // is serialized using JSON.stringify
+ if ( !isNode ) {
+ cache[ id ].toJSON = jQuery.noop;
+ }
+ }
+
+ // An object can be passed to jQuery.data instead of a key/value pair; this gets
+ // shallow copied over onto the existing cache
+ if ( typeof name === "object" || typeof name === "function" ) {
+ if ( pvt ) {
+ cache[ id ] = jQuery.extend( cache[ id ], name );
+ } else {
+ cache[ id ].data = jQuery.extend( cache[ id ].data, name );
+ }
+ }
+
+ privateCache = thisCache = cache[ id ];
+
+ // jQuery data() is stored in a separate object inside the object's internal data
+ // cache in order to avoid key collisions between internal data and user-defined
+ // data.
+ if ( !pvt ) {
+ if ( !thisCache.data ) {
+ thisCache.data = {};
+ }
+
+ thisCache = thisCache.data;
+ }
+
+ if ( data !== undefined ) {
+ thisCache[ jQuery.camelCase( name ) ] = data;
+ }
+
+ // Users should not attempt to inspect the internal events object using jQuery.data,
+ // it is undocumented and subject to change. But does anyone listen? No.
+ if ( isEvents && !thisCache[ name ] ) {
+ return privateCache.events;
+ }
+
+ // Check for both converted-to-camel and non-converted data property names
+ // If a data property was specified
+ if ( getByName ) {
+
+ // First Try to find as-is property data
+ ret = thisCache[ name ];
+
+ // Test for null|undefined property data
+ if ( ret == null ) {
+
+ // Try to find the camelCased property
+ ret = thisCache[ jQuery.camelCase( name ) ];
+ }
+ } else {
+ ret = thisCache;
+ }
+
+ return ret;
+ },
+
+ removeData: function( elem, name, pvt /* Internal Use Only */ ) {
+ if ( !jQuery.acceptData( elem ) ) {
+ return;
+ }
+
+ var thisCache, i, l,
+
+ // Reference to internal data cache key
+ internalKey = jQuery.expando,
+
+ isNode = elem.nodeType,
+
+ // See jQuery.data for more information
+ cache = isNode ? jQuery.cache : elem,
+
+ // See jQuery.data for more information
+ id = isNode ? elem[ internalKey ] : internalKey;
+
+ // If there is already no cache entry for this object, there is no
+ // purpose in continuing
+ if ( !cache[ id ] ) {
+ return;
+ }
+
+ if ( name ) {
+
+ thisCache = pvt ? cache[ id ] : cache[ id ].data;
+
+ if ( thisCache ) {
+
+ // Support array or space separated string names for data keys
+ if ( !jQuery.isArray( name ) ) {
+
+ // try the string as a key before any manipulation
+ if ( name in thisCache ) {
+ name = [ name ];
+ } else {
+
+ // split the camel cased version by spaces unless a key with the spaces exists
+ name = jQuery.camelCase( name );
+ if ( name in thisCache ) {
+ name = [ name ];
+ } else {
+ name = name.split( " " );
+ }
+ }
+ }
+
+ for ( i = 0, l = name.length; i < l; i++ ) {
+ delete thisCache[ name[i] ];
+ }
+
+ // If there is no data left in the cache, we want to continue
+ // and let the cache object itself get destroyed
+ if ( !( pvt ? isEmptyDataObject : jQuery.isEmptyObject )( thisCache ) ) {
+ return;
+ }
+ }
+ }
+
+ // See jQuery.data for more information
+ if ( !pvt ) {
+ delete cache[ id ].data;
+
+ // Don't destroy the parent cache unless the internal data object
+ // had been the only thing left in it
+ if ( !isEmptyDataObject(cache[ id ]) ) {
+ return;
+ }
+ }
+
+ // Browsers that fail expando deletion also refuse to delete expandos on
+ // the window, but it will allow it on all other JS objects; other browsers
+ // don't care
+ // Ensure that `cache` is not a window object #10080
+ if ( jQuery.support.deleteExpando || !cache.setInterval ) {
+ delete cache[ id ];
+ } else {
+ cache[ id ] = null;
+ }
+
+ // We destroyed the cache and need to eliminate the expando on the node to avoid
+ // false lookups in the cache for entries that no longer exist
+ if ( isNode ) {
+ // IE does not allow us to delete expando properties from nodes,
+ // nor does it have a removeAttribute function on Document nodes;
+ // we must handle all of these cases
+ if ( jQuery.support.deleteExpando ) {
+ delete elem[ internalKey ];
+ } else if ( elem.removeAttribute ) {
+ elem.removeAttribute( internalKey );
+ } else {
+ elem[ internalKey ] = null;
+ }
+ }
+ },
+
+ // For internal use only.
+ _data: function( elem, name, data ) {
+ return jQuery.data( elem, name, data, true );
+ },
+
+ // A method for determining if a DOM node can handle the data expando
+ acceptData: function( elem ) {
+ if ( elem.nodeName ) {
+ var match = jQuery.noData[ elem.nodeName.toLowerCase() ];
+
+ if ( match ) {
+ return !(match === true || elem.getAttribute("classid") !== match);
+ }
+ }
+
+ return true;
+ }
+});
+
+jQuery.fn.extend({
+ data: function( key, value ) {
+ var parts, attr, name,
+ data = null;
+
+ if ( typeof key === "undefined" ) {
+ if ( this.length ) {
+ data = jQuery.data( this[0] );
+
+ if ( this[0].nodeType === 1 && !jQuery._data( this[0], "parsedAttrs" ) ) {
+ attr = this[0].attributes;
+ for ( var i = 0, l = attr.length; i < l; i++ ) {
+ name = attr[i].name;
+
+ if ( name.indexOf( "data-" ) === 0 ) {
+ name = jQuery.camelCase( name.substring(5) );
+
+ dataAttr( this[0], name, data[ name ] );
+ }
+ }
+ jQuery._data( this[0], "parsedAttrs", true );
+ }
+ }
+
+ return data;
+
+ } else if ( typeof key === "object" ) {
+ return this.each(function() {
+ jQuery.data( this, key );
+ });
+ }
+
+ parts = key.split(".");
+ parts[1] = parts[1] ? "." + parts[1] : "";
+
+ if ( value === undefined ) {
+ data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]);
+
+ // Try to fetch any internally stored data first
+ if ( data === undefined && this.length ) {
+ data = jQuery.data( this[0], key );
+ data = dataAttr( this[0], key, data );
+ }
+
+ return data === undefined && parts[1] ?
+ this.data( parts[0] ) :
+ data;
+
+ } else {
+ return this.each(function() {
+ var self = jQuery( this ),
+ args = [ parts[0], value ];
+
+ self.triggerHandler( "setData" + parts[1] + "!", args );
+ jQuery.data( this, key, value );
+ self.triggerHandler( "changeData" + parts[1] + "!", args );
+ });
+ }
+ },
+
+ removeData: function( key ) {
+ return this.each(function() {
+ jQuery.removeData( this, key );
+ });
+ }
+});
+
+function dataAttr( elem, key, data ) {
+ // If nothing was found internally, try to fetch any
+ // data from the HTML5 data-* attribute
+ if ( data === undefined && elem.nodeType === 1 ) {
+
+ var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
+
+ data = elem.getAttribute( name );
+
+ if ( typeof data === "string" ) {
+ try {
+ data = data === "true" ? true :
+ data === "false" ? false :
+ data === "null" ? null :
+ jQuery.isNumeric( data ) ? parseFloat( data ) :
+ rbrace.test( data ) ? jQuery.parseJSON( data ) :
+ data;
+ } catch( e ) {}
+
+ // Make sure we set the data so it isn't changed later
+ jQuery.data( elem, key, data );
+
+ } else {
+ data = undefined;
+ }
+ }
+
+ return data;
+}
+
+// checks a cache object for emptiness
+function isEmptyDataObject( obj ) {
+ for ( var name in obj ) {
+
+ // if the public data object is empty, the private is still empty
+ if ( name === "data" && jQuery.isEmptyObject( obj[name] ) ) {
+ continue;
+ }
+ if ( name !== "toJSON" ) {
+ return false;
+ }
+ }
+
+ return true;
+}
+
+
+
+
+function handleQueueMarkDefer( elem, type, src ) {
+ var deferDataKey = type + "defer",
+ queueDataKey = type + "queue",
+ markDataKey = type + "mark",
+ defer = jQuery._data( elem, deferDataKey );
+ if ( defer &&
+ ( src === "queue" || !jQuery._data(elem, queueDataKey) ) &&
+ ( src === "mark" || !jQuery._data(elem, markDataKey) ) ) {
+ // Give room for hard-coded callbacks to fire first
+ // and eventually mark/queue something else on the element
+ setTimeout( function() {
+ if ( !jQuery._data( elem, queueDataKey ) &&
+ !jQuery._data( elem, markDataKey ) ) {
+ jQuery.removeData( elem, deferDataKey, true );
+ defer.fire();
+ }
+ }, 0 );
+ }
+}
+
+jQuery.extend({
+
+ _mark: function( elem, type ) {
+ if ( elem ) {
+ type = ( type || "fx" ) + "mark";
+ jQuery._data( elem, type, (jQuery._data( elem, type ) || 0) + 1 );
+ }
+ },
+
+ _unmark: function( force, elem, type ) {
+ if ( force !== true ) {
+ type = elem;
+ elem = force;
+ force = false;
+ }
+ if ( elem ) {
+ type = type || "fx";
+ var key = type + "mark",
+ count = force ? 0 : ( (jQuery._data( elem, key ) || 1) - 1 );
+ if ( count ) {
+ jQuery._data( elem, key, count );
+ } else {
+ jQuery.removeData( elem, key, true );
+ handleQueueMarkDefer( elem, type, "mark" );
+ }
+ }
+ },
+
+ queue: function( elem, type, data ) {
+ var q;
+ if ( elem ) {
+ type = ( type || "fx" ) + "queue";
+ q = jQuery._data( elem, type );
+
+ // Speed up dequeue by getting out quickly if this is just a lookup
+ if ( data ) {
+ if ( !q || jQuery.isArray(data) ) {
+ q = jQuery._data( elem, type, jQuery.makeArray(data) );
+ } else {
+ q.push( data );
+ }
+ }
+ return q || [];
+ }
+ },
+
+ dequeue: function( elem, type ) {
+ type = type || "fx";
+
+ var queue = jQuery.queue( elem, type ),
+ fn = queue.shift(),
+ hooks = {};
+
+ // If the fx queue is dequeued, always remove the progress sentinel
+ if ( fn === "inprogress" ) {
+ fn = queue.shift();
+ }
+
+ if ( fn ) {
+ // Add a progress sentinel to prevent the fx queue from being
+ // automatically dequeued
+ if ( type === "fx" ) {
+ queue.unshift( "inprogress" );
+ }
+
+ jQuery._data( elem, type + ".run", hooks );
+ fn.call( elem, function() {
+ jQuery.dequeue( elem, type );
+ }, hooks );
+ }
+
+ if ( !queue.length ) {
+ jQuery.removeData( elem, type + "queue " + type + ".run", true );
+ handleQueueMarkDefer( elem, type, "queue" );
+ }
+ }
+});
+
+jQuery.fn.extend({
+ queue: function( type, data ) {
+ if ( typeof type !== "string" ) {
+ data = type;
+ type = "fx";
+ }
+
+ if ( data === undefined ) {
+ return jQuery.queue( this[0], type );
+ }
+ return this.each(function() {
+ var queue = jQuery.queue( this, type, data );
+
+ if ( type === "fx" && queue[0] !== "inprogress" ) {
+ jQuery.dequeue( this, type );
+ }
+ });
+ },
+ dequeue: function( type ) {
+ return this.each(function() {
+ jQuery.dequeue( this, type );
+ });
+ },
+ // Based off of the plugin by Clint Helfers, with permission.
+ // http://blindsignals.com/index.php/2009/07/jquery-delay/
+ delay: function( time, type ) {
+ time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
+ type = type || "fx";
+
+ return this.queue( type, function( next, hooks ) {
+ var timeout = setTimeout( next, time );
+ hooks.stop = function() {
+ clearTimeout( timeout );
+ };
+ });
+ },
+ clearQueue: function( type ) {
+ return this.queue( type || "fx", [] );
+ },
+ // Get a promise resolved when queues of a certain type
+ // are emptied (fx is the type by default)
+ promise: function( type, object ) {
+ if ( typeof type !== "string" ) {
+ object = type;
+ type = undefined;
+ }
+ type = type || "fx";
+ var defer = jQuery.Deferred(),
+ elements = this,
+ i = elements.length,
+ count = 1,
+ deferDataKey = type + "defer",
+ queueDataKey = type + "queue",
+ markDataKey = type + "mark",
+ tmp;
+ function resolve() {
+ if ( !( --count ) ) {
+ defer.resolveWith( elements, [ elements ] );
+ }
+ }
+ while( i-- ) {
+ if (( tmp = jQuery.data( elements[ i ], deferDataKey, undefined, true ) ||
+ ( jQuery.data( elements[ i ], queueDataKey, undefined, true ) ||
+ jQuery.data( elements[ i ], markDataKey, undefined, true ) ) &&
+ jQuery.data( elements[ i ], deferDataKey, jQuery.Callbacks( "once memory" ), true ) )) {
+ count++;
+ tmp.add( resolve );
+ }
+ }
+ resolve();
+ return defer.promise();
+ }
+});
+
+
+
+
+var rclass = /[\n\t\r]/g,
+ rspace = /\s+/,
+ rreturn = /\r/g,
+ rtype = /^(?:button|input)$/i,
+ rfocusable = /^(?:button|input|object|select|textarea)$/i,
+ rclickable = /^a(?:rea)?$/i,
+ rboolean = /^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,
+ getSetAttribute = jQuery.support.getSetAttribute,
+ nodeHook, boolHook, fixSpecified;
+
+jQuery.fn.extend({
+ attr: function( name, value ) {
+ return jQuery.access( this, name, value, true, jQuery.attr );
+ },
+
+ removeAttr: function( name ) {
+ return this.each(function() {
+ jQuery.removeAttr( this, name );
+ });
+ },
+
+ prop: function( name, value ) {
+ return jQuery.access( this, name, value, true, jQuery.prop );
+ },
+
+ removeProp: function( name ) {
+ name = jQuery.propFix[ name ] || name;
+ return this.each(function() {
+ // try/catch handles cases where IE balks (such as removing a property on window)
+ try {
+ this[ name ] = undefined;
+ delete this[ name ];
+ } catch( e ) {}
+ });
+ },
+
+ addClass: function( value ) {
+ var classNames, i, l, elem,
+ setClass, c, cl;
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( j ) {
+ jQuery( this ).addClass( value.call(this, j, this.className) );
+ });
+ }
+
+ if ( value && typeof value === "string" ) {
+ classNames = value.split( rspace );
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.nodeType === 1 ) {
+ if ( !elem.className && classNames.length === 1 ) {
+ elem.className = value;
+
+ } else {
+ setClass = " " + elem.className + " ";
+
+ for ( c = 0, cl = classNames.length; c < cl; c++ ) {
+ if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
+ setClass += classNames[ c ] + " ";
+ }
+ }
+ elem.className = jQuery.trim( setClass );
+ }
+ }
+ }
+ }
+
+ return this;
+ },
+
+ removeClass: function( value ) {
+ var classNames, i, l, elem, className, c, cl;
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( j ) {
+ jQuery( this ).removeClass( value.call(this, j, this.className) );
+ });
+ }
+
+ if ( (value && typeof value === "string") || value === undefined ) {
+ classNames = ( value || "" ).split( rspace );
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.nodeType === 1 && elem.className ) {
+ if ( value ) {
+ className = (" " + elem.className + " ").replace( rclass, " " );
+ for ( c = 0, cl = classNames.length; c < cl; c++ ) {
+ className = className.replace(" " + classNames[ c ] + " ", " ");
+ }
+ elem.className = jQuery.trim( className );
+
+ } else {
+ elem.className = "";
+ }
+ }
+ }
+ }
+
+ return this;
+ },
+
+ toggleClass: function( value, stateVal ) {
+ var type = typeof value,
+ isBool = typeof stateVal === "boolean";
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( i ) {
+ jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );
+ });
+ }
+
+ return this.each(function() {
+ if ( type === "string" ) {
+ // toggle individual class names
+ var className,
+ i = 0,
+ self = jQuery( this ),
+ state = stateVal,
+ classNames = value.split( rspace );
+
+ while ( (className = classNames[ i++ ]) ) {
+ // check each className given, space seperated list
+ state = isBool ? state : !self.hasClass( className );
+ self[ state ? "addClass" : "removeClass" ]( className );
+ }
+
+ } else if ( type === "undefined" || type === "boolean" ) {
+ if ( this.className ) {
+ // store className if set
+ jQuery._data( this, "__className__", this.className );
+ }
+
+ // toggle whole className
+ this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || "";
+ }
+ });
+ },
+
+ hasClass: function( selector ) {
+ var className = " " + selector + " ",
+ i = 0,
+ l = this.length;
+ for ( ; i < l; i++ ) {
+ if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) {
+ return true;
+ }
+ }
+
+ return false;
+ },
+
+ val: function( value ) {
+ var hooks, ret, isFunction,
+ elem = this[0];
+
+ if ( !arguments.length ) {
+ if ( elem ) {
+ hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ];
+
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
+ return ret;
+ }
+
+ ret = elem.value;
+
+ return typeof ret === "string" ?
+ // handle most common string cases
+ ret.replace(rreturn, "") :
+ // handle cases where value is null/undef or number
+ ret == null ? "" : ret;
+ }
+
+ return;
+ }
+
+ isFunction = jQuery.isFunction( value );
+
+ return this.each(function( i ) {
+ var self = jQuery(this), val;
+
+ if ( this.nodeType !== 1 ) {
+ return;
+ }
+
+ if ( isFunction ) {
+ val = value.call( this, i, self.val() );
+ } else {
+ val = value;
+ }
+
+ // Treat null/undefined as ""; convert numbers to string
+ if ( val == null ) {
+ val = "";
+ } else if ( typeof val === "number" ) {
+ val += "";
+ } else if ( jQuery.isArray( val ) ) {
+ val = jQuery.map(val, function ( value ) {
+ return value == null ? "" : value + "";
+ });
+ }
+
+ hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ];
+
+ // If set returns undefined, fall back to normal setting
+ if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
+ this.value = val;
+ }
+ });
+ }
+});
+
+jQuery.extend({
+ valHooks: {
+ option: {
+ get: function( elem ) {
+ // attributes.value is undefined in Blackberry 4.7 but
+ // uses .value. See #6932
+ var val = elem.attributes.value;
+ return !val || val.specified ? elem.value : elem.text;
+ }
+ },
+ select: {
+ get: function( elem ) {
+ var value, i, max, option,
+ index = elem.selectedIndex,
+ values = [],
+ options = elem.options,
+ one = elem.type === "select-one";
+
+ // Nothing was selected
+ if ( index < 0 ) {
+ return null;
+ }
+
+ // Loop through all the selected options
+ i = one ? index : 0;
+ max = one ? index + 1 : options.length;
+ for ( ; i < max; i++ ) {
+ option = options[ i ];
+
+ // Don't return options that are disabled or in a disabled optgroup
+ if ( option.selected && (jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) &&
+ (!option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" )) ) {
+
+ // Get the specific value for the option
+ value = jQuery( option ).val();
+
+ // We don't need an array for one selects
+ if ( one ) {
+ return value;
+ }
+
+ // Multi-Selects return an array
+ values.push( value );
+ }
+ }
+
+ // Fixes Bug #2551 -- select.val() broken in IE after form.reset()
+ if ( one && !values.length && options.length ) {
+ return jQuery( options[ index ] ).val();
+ }
+
+ return values;
+ },
+
+ set: function( elem, value ) {
+ var values = jQuery.makeArray( value );
+
+ jQuery(elem).find("option").each(function() {
+ this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0;
+ });
+
+ if ( !values.length ) {
+ elem.selectedIndex = -1;
+ }
+ return values;
+ }
+ }
+ },
+
+ attrFn: {
+ val: true,
+ css: true,
+ html: true,
+ text: true,
+ data: true,
+ width: true,
+ height: true,
+ offset: true
+ },
+
+ attr: function( elem, name, value, pass ) {
+ var ret, hooks, notxml,
+ nType = elem.nodeType;
+
+ // don't get/set attributes on text, comment and attribute nodes
+ if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
+ return;
+ }
+
+ if ( pass && name in jQuery.attrFn ) {
+ return jQuery( elem )[ name ]( value );
+ }
+
+ // Fallback to prop when attributes are not supported
+ if ( typeof elem.getAttribute === "undefined" ) {
+ return jQuery.prop( elem, name, value );
+ }
+
+ notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
+
+ // All attributes are lowercase
+ // Grab necessary hook if one is defined
+ if ( notxml ) {
+ name = name.toLowerCase();
+ hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
+ }
+
+ if ( value !== undefined ) {
+
+ if ( value === null ) {
+ jQuery.removeAttr( elem, name );
+ return;
+
+ } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
+ return ret;
+
+ } else {
+ elem.setAttribute( name, "" + value );
+ return value;
+ }
+
+ } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
+ return ret;
+
+ } else {
+
+ ret = elem.getAttribute( name );
+
+ // Non-existent attributes return null, we normalize to undefined
+ return ret === null ?
+ undefined :
+ ret;
+ }
+ },
+
+ removeAttr: function( elem, value ) {
+ var propName, attrNames, name, l,
+ i = 0;
+
+ if ( value && elem.nodeType === 1 ) {
+ attrNames = value.toLowerCase().split( rspace );
+ l = attrNames.length;
+
+ for ( ; i < l; i++ ) {
+ name = attrNames[ i ];
+
+ if ( name ) {
+ propName = jQuery.propFix[ name ] || name;
+
+ // See #9699 for explanation of this approach (setting first, then removal)
+ jQuery.attr( elem, name, "" );
+ elem.removeAttribute( getSetAttribute ? name : propName );
+
+ // Set corresponding property to false for boolean attributes
+ if ( rboolean.test( name ) && propName in elem ) {
+ elem[ propName ] = false;
+ }
+ }
+ }
+ }
+ },
+
+ attrHooks: {
+ type: {
+ set: function( elem, value ) {
+ // We can't allow the type property to be changed (since it causes problems in IE)
+ if ( rtype.test( elem.nodeName ) && elem.parentNode ) {
+ jQuery.error( "type property can't be changed" );
+ } else if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {
+ // Setting the type on a radio button after the value resets the value in IE6-9
+ // Reset value to it's default in case type is set after value
+ // This is for element creation
+ var val = elem.value;
+ elem.setAttribute( "type", value );
+ if ( val ) {
+ elem.value = val;
+ }
+ return value;
+ }
+ }
+ },
+ // Use the value property for back compat
+ // Use the nodeHook for button elements in IE6/7 (#1954)
+ value: {
+ get: function( elem, name ) {
+ if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {
+ return nodeHook.get( elem, name );
+ }
+ return name in elem ?
+ elem.value :
+ null;
+ },
+ set: function( elem, value, name ) {
+ if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {
+ return nodeHook.set( elem, value, name );
+ }
+ // Does not return so that setAttribute is also used
+ elem.value = value;
+ }
+ }
+ },
+
+ propFix: {
+ tabindex: "tabIndex",
+ readonly: "readOnly",
+ "for": "htmlFor",
+ "class": "className",
+ maxlength: "maxLength",
+ cellspacing: "cellSpacing",
+ cellpadding: "cellPadding",
+ rowspan: "rowSpan",
+ colspan: "colSpan",
+ usemap: "useMap",
+ frameborder: "frameBorder",
+ contenteditable: "contentEditable"
+ },
+
+ prop: function( elem, name, value ) {
+ var ret, hooks, notxml,
+ nType = elem.nodeType;
+
+ // don't get/set properties on text, comment and attribute nodes
+ if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
+ return;
+ }
+
+ notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
+
+ if ( notxml ) {
+ // Fix name and attach hooks
+ name = jQuery.propFix[ name ] || name;
+ hooks = jQuery.propHooks[ name ];
+ }
+
+ if ( value !== undefined ) {
+ if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
+ return ret;
+
+ } else {
+ return ( elem[ name ] = value );
+ }
+
+ } else {
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
+ return ret;
+
+ } else {
+ return elem[ name ];
+ }
+ }
+ },
+
+ propHooks: {
+ tabIndex: {
+ get: function( elem ) {
+ // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set
+ // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
+ var attributeNode = elem.getAttributeNode("tabindex");
+
+ return attributeNode && attributeNode.specified ?
+ parseInt( attributeNode.value, 10 ) :
+ rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ?
+ 0 :
+ undefined;
+ }
+ }
+ }
+});
+
+// Add the tabIndex propHook to attrHooks for back-compat (different case is intentional)
+jQuery.attrHooks.tabindex = jQuery.propHooks.tabIndex;
+
+// Hook for boolean attributes
+boolHook = {
+ get: function( elem, name ) {
+ // Align boolean attributes with corresponding properties
+ // Fall back to attribute presence where some booleans are not supported
+ var attrNode,
+ property = jQuery.prop( elem, name );
+ return property === true || typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ?
+ name.toLowerCase() :
+ undefined;
+ },
+ set: function( elem, value, name ) {
+ var propName;
+ if ( value === false ) {
+ // Remove boolean attributes when set to false
+ jQuery.removeAttr( elem, name );
+ } else {
+ // value is true since we know at this point it's type boolean and not false
+ // Set boolean attributes to the same name and set the DOM property
+ propName = jQuery.propFix[ name ] || name;
+ if ( propName in elem ) {
+ // Only set the IDL specifically if it already exists on the element
+ elem[ propName ] = true;
+ }
+
+ elem.setAttribute( name, name.toLowerCase() );
+ }
+ return name;
+ }
+};
+
+// IE6/7 do not support getting/setting some attributes with get/setAttribute
+if ( !getSetAttribute ) {
+
+ fixSpecified = {
+ name: true,
+ id: true
+ };
+
+ // Use this for any attribute in IE6/7
+ // This fixes almost every IE6/7 issue
+ nodeHook = jQuery.valHooks.button = {
+ get: function( elem, name ) {
+ var ret;
+ ret = elem.getAttributeNode( name );
+ return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ?
+ ret.nodeValue :
+ undefined;
+ },
+ set: function( elem, value, name ) {
+ // Set the existing or create a new attribute node
+ var ret = elem.getAttributeNode( name );
+ if ( !ret ) {
+ ret = document.createAttribute( name );
+ elem.setAttributeNode( ret );
+ }
+ return ( ret.nodeValue = value + "" );
+ }
+ };
+
+ // Apply the nodeHook to tabindex
+ jQuery.attrHooks.tabindex.set = nodeHook.set;
+
+ // Set width and height to auto instead of 0 on empty string( Bug #8150 )
+ // This is for removals
+ jQuery.each([ "width", "height" ], function( i, name ) {
+ jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], {
+ set: function( elem, value ) {
+ if ( value === "" ) {
+ elem.setAttribute( name, "auto" );
+ return value;
+ }
+ }
+ });
+ });
+
+ // Set contenteditable to false on removals(#10429)
+ // Setting to empty string throws an error as an invalid value
+ jQuery.attrHooks.contenteditable = {
+ get: nodeHook.get,
+ set: function( elem, value, name ) {
+ if ( value === "" ) {
+ value = "false";
+ }
+ nodeHook.set( elem, value, name );
+ }
+ };
+}
+
+
+// Some attributes require a special call on IE
+if ( !jQuery.support.hrefNormalized ) {
+ jQuery.each([ "href", "src", "width", "height" ], function( i, name ) {
+ jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], {
+ get: function( elem ) {
+ var ret = elem.getAttribute( name, 2 );
+ return ret === null ? undefined : ret;
+ }
+ });
+ });
+}
+
+if ( !jQuery.support.style ) {
+ jQuery.attrHooks.style = {
+ get: function( elem ) {
+ // Return undefined in the case of empty string
+ // Normalize to lowercase since IE uppercases css property names
+ return elem.style.cssText.toLowerCase() || undefined;
+ },
+ set: function( elem, value ) {
+ return ( elem.style.cssText = "" + value );
+ }
+ };
+}
+
+// Safari mis-reports the default selected property of an option
+// Accessing the parent's selectedIndex property fixes it
+if ( !jQuery.support.optSelected ) {
+ jQuery.propHooks.selected = jQuery.extend( jQuery.propHooks.selected, {
+ get: function( elem ) {
+ var parent = elem.parentNode;
+
+ if ( parent ) {
+ parent.selectedIndex;
+
+ // Make sure that it also works with optgroups, see #5701
+ if ( parent.parentNode ) {
+ parent.parentNode.selectedIndex;
+ }
+ }
+ return null;
+ }
+ });
+}
+
+// IE6/7 call enctype encoding
+if ( !jQuery.support.enctype ) {
+ jQuery.propFix.enctype = "encoding";
+}
+
+// Radios and checkboxes getter/setter
+if ( !jQuery.support.checkOn ) {
+ jQuery.each([ "radio", "checkbox" ], function() {
+ jQuery.valHooks[ this ] = {
+ get: function( elem ) {
+ // Handle the case where in Webkit "" is returned instead of "on" if a value isn't specified
+ return elem.getAttribute("value") === null ? "on" : elem.value;
+ }
+ };
+ });
+}
+jQuery.each([ "radio", "checkbox" ], function() {
+ jQuery.valHooks[ this ] = jQuery.extend( jQuery.valHooks[ this ], {
+ set: function( elem, value ) {
+ if ( jQuery.isArray( value ) ) {
+ return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 );
+ }
+ }
+ });
+});
+
+
+
+
+var rformElems = /^(?:textarea|input|select)$/i,
+ rtypenamespace = /^([^\.]*)?(?:\.(.+))?$/,
+ rhoverHack = /\bhover(\.\S+)?\b/,
+ rkeyEvent = /^key/,
+ rmouseEvent = /^(?:mouse|contextmenu)|click/,
+ rfocusMorph = /^(?:focusinfocus|focusoutblur)$/,
+ rquickIs = /^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,
+ quickParse = function( selector ) {
+ var quick = rquickIs.exec( selector );
+ if ( quick ) {
+ // 0 1 2 3
+ // [ _, tag, id, class ]
+ quick[1] = ( quick[1] || "" ).toLowerCase();
+ quick[3] = quick[3] && new RegExp( "(?:^|\\s)" + quick[3] + "(?:\\s|$)" );
+ }
+ return quick;
+ },
+ quickIs = function( elem, m ) {
+ var attrs = elem.attributes || {};
+ return (
+ (!m[1] || elem.nodeName.toLowerCase() === m[1]) &&
+ (!m[2] || (attrs.id || {}).value === m[2]) &&
+ (!m[3] || m[3].test( (attrs[ "class" ] || {}).value ))
+ );
+ },
+ hoverHack = function( events ) {
+ return jQuery.event.special.hover ? events : events.replace( rhoverHack, "mouseenter$1 mouseleave$1" );
+ };
+
+/*
+ * Helper functions for managing events -- not part of the public interface.
+ * Props to Dean Edwards' addEvent library for many of the ideas.
+ */
+jQuery.event = {
+
+ add: function( elem, types, handler, data, selector ) {
+
+ var elemData, eventHandle, events,
+ t, tns, type, namespaces, handleObj,
+ handleObjIn, quick, handlers, special;
+
+ // Don't attach events to noData or text/comment nodes (allow plain objects tho)
+ if ( elem.nodeType === 3 || elem.nodeType === 8 || !types || !handler || !(elemData = jQuery._data( elem )) ) {
+ return;
+ }
+
+ // Caller can pass in an object of custom data in lieu of the handler
+ if ( handler.handler ) {
+ handleObjIn = handler;
+ handler = handleObjIn.handler;
+ }
+
+ // Make sure that the handler has a unique ID, used to find/remove it later
+ if ( !handler.guid ) {
+ handler.guid = jQuery.guid++;
+ }
+
+ // Init the element's event structure and main handler, if this is the first
+ events = elemData.events;
+ if ( !events ) {
+ elemData.events = events = {};
+ }
+ eventHandle = elemData.handle;
+ if ( !eventHandle ) {
+ elemData.handle = eventHandle = function( e ) {
+ // Discard the second event of a jQuery.event.trigger() and
+ // when an event is called after a page has unloaded
+ return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ?
+ jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
+ undefined;
+ };
+ // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
+ eventHandle.elem = elem;
+ }
+
+ // Handle multiple events separated by a space
+ // jQuery(...).bind("mouseover mouseout", fn);
+ types = jQuery.trim( hoverHack(types) ).split( " " );
+ for ( t = 0; t < types.length; t++ ) {
+
+ tns = rtypenamespace.exec( types[t] ) || [];
+ type = tns[1];
+ namespaces = ( tns[2] || "" ).split( "." ).sort();
+
+ // If event changes its type, use the special event handlers for the changed type
+ special = jQuery.event.special[ type ] || {};
+
+ // If selector defined, determine special event api type, otherwise given type
+ type = ( selector ? special.delegateType : special.bindType ) || type;
+
+ // Update special based on newly reset type
+ special = jQuery.event.special[ type ] || {};
+
+ // handleObj is passed to all event handlers
+ handleObj = jQuery.extend({
+ type: type,
+ origType: tns[1],
+ data: data,
+ handler: handler,
+ guid: handler.guid,
+ selector: selector,
+ quick: quickParse( selector ),
+ namespace: namespaces.join(".")
+ }, handleObjIn );
+
+ // Init the event handler queue if we're the first
+ handlers = events[ type ];
+ if ( !handlers ) {
+ handlers = events[ type ] = [];
+ handlers.delegateCount = 0;
+
+ // Only use addEventListener/attachEvent if the special events handler returns false
+ if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
+ // Bind the global event handler to the element
+ if ( elem.addEventListener ) {
+ elem.addEventListener( type, eventHandle, false );
+
+ } else if ( elem.attachEvent ) {
+ elem.attachEvent( "on" + type, eventHandle );
+ }
+ }
+ }
+
+ if ( special.add ) {
+ special.add.call( elem, handleObj );
+
+ if ( !handleObj.handler.guid ) {
+ handleObj.handler.guid = handler.guid;
+ }
+ }
+
+ // Add to the element's handler list, delegates in front
+ if ( selector ) {
+ handlers.splice( handlers.delegateCount++, 0, handleObj );
+ } else {
+ handlers.push( handleObj );
+ }
+
+ // Keep track of which events have ever been used, for event optimization
+ jQuery.event.global[ type ] = true;
+ }
+
+ // Nullify elem to prevent memory leaks in IE
+ elem = null;
+ },
+
+ global: {},
+
+ // Detach an event or set of events from an element
+ remove: function( elem, types, handler, selector, mappedTypes ) {
+
+ var elemData = jQuery.hasData( elem ) && jQuery._data( elem ),
+ t, tns, type, origType, namespaces, origCount,
+ j, events, special, handle, eventType, handleObj;
+
+ if ( !elemData || !(events = elemData.events) ) {
+ return;
+ }
+
+ // Once for each type.namespace in types; type may be omitted
+ types = jQuery.trim( hoverHack( types || "" ) ).split(" ");
+ for ( t = 0; t < types.length; t++ ) {
+ tns = rtypenamespace.exec( types[t] ) || [];
+ type = origType = tns[1];
+ namespaces = tns[2];
+
+ // Unbind all events (on this namespace, if provided) for the element
+ if ( !type ) {
+ for ( type in events ) {
+ jQuery.event.remove( elem, type + types[ t ], handler, selector, true );
+ }
+ continue;
+ }
+
+ special = jQuery.event.special[ type ] || {};
+ type = ( selector? special.delegateType : special.bindType ) || type;
+ eventType = events[ type ] || [];
+ origCount = eventType.length;
+ namespaces = namespaces ? new RegExp("(^|\\.)" + namespaces.split(".").sort().join("\\.(?:.*\\.)?") + "(\\.|$)") : null;
+
+ // Remove matching events
+ for ( j = 0; j < eventType.length; j++ ) {
+ handleObj = eventType[ j ];
+
+ if ( ( mappedTypes || origType === handleObj.origType ) &&
+ ( !handler || handler.guid === handleObj.guid ) &&
+ ( !namespaces || namespaces.test( handleObj.namespace ) ) &&
+ ( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) {
+ eventType.splice( j--, 1 );
+
+ if ( handleObj.selector ) {
+ eventType.delegateCount--;
+ }
+ if ( special.remove ) {
+ special.remove.call( elem, handleObj );
+ }
+ }
+ }
+
+ // Remove generic event handler if we removed something and no more handlers exist
+ // (avoids potential for endless recursion during removal of special event handlers)
+ if ( eventType.length === 0 && origCount !== eventType.length ) {
+ if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) {
+ jQuery.removeEvent( elem, type, elemData.handle );
+ }
+
+ delete events[ type ];
+ }
+ }
+
+ // Remove the expando if it's no longer used
+ if ( jQuery.isEmptyObject( events ) ) {
+ handle = elemData.handle;
+ if ( handle ) {
+ handle.elem = null;
+ }
+
+ // removeData also checks for emptiness and clears the expando if empty
+ // so use it instead of delete
+ jQuery.removeData( elem, [ "events", "handle" ], true );
+ }
+ },
+
+ // Events that are safe to short-circuit if no handlers are attached.
+ // Native DOM events should not be added, they may have inline handlers.
+ customEvent: {
+ "getData": true,
+ "setData": true,
+ "changeData": true
+ },
+
+ trigger: function( event, data, elem, onlyHandlers ) {
+ // Don't do events on text and comment nodes
+ if ( elem && (elem.nodeType === 3 || elem.nodeType === 8) ) {
+ return;
+ }
+
+ // Event object or event type
+ var type = event.type || event,
+ namespaces = [],
+ cache, exclusive, i, cur, old, ontype, special, handle, eventPath, bubbleType;
+
+ // focus/blur morphs to focusin/out; ensure we're not firing them right now
+ if ( rfocusMorph.test( type + jQuery.event.triggered ) ) {
+ return;
+ }
+
+ if ( type.indexOf( "!" ) >= 0 ) {
+ // Exclusive events trigger only for the exact event (no namespaces)
+ type = type.slice(0, -1);
+ exclusive = true;
+ }
+
+ if ( type.indexOf( "." ) >= 0 ) {
+ // Namespaced trigger; create a regexp to match event type in handle()
+ namespaces = type.split(".");
+ type = namespaces.shift();
+ namespaces.sort();
+ }
+
+ if ( (!elem || jQuery.event.customEvent[ type ]) && !jQuery.event.global[ type ] ) {
+ // No jQuery handlers for this event type, and it can't have inline handlers
+ return;
+ }
+
+ // Caller can pass in an Event, Object, or just an event type string
+ event = typeof event === "object" ?
+ // jQuery.Event object
+ event[ jQuery.expando ] ? event :
+ // Object literal
+ new jQuery.Event( type, event ) :
+ // Just the event type (string)
+ new jQuery.Event( type );
+
+ event.type = type;
+ event.isTrigger = true;
+ event.exclusive = exclusive;
+ event.namespace = namespaces.join( "." );
+ event.namespace_re = event.namespace? new RegExp("(^|\\.)" + namespaces.join("\\.(?:.*\\.)?") + "(\\.|$)") : null;
+ ontype = type.indexOf( ":" ) < 0 ? "on" + type : "";
+
+ // Handle a global trigger
+ if ( !elem ) {
+
+ // TODO: Stop taunting the data cache; remove global events and always attach to document
+ cache = jQuery.cache;
+ for ( i in cache ) {
+ if ( cache[ i ].events && cache[ i ].events[ type ] ) {
+ jQuery.event.trigger( event, data, cache[ i ].handle.elem, true );
+ }
+ }
+ return;
+ }
+
+ // Clean up the event in case it is being reused
+ event.result = undefined;
+ if ( !event.target ) {
+ event.target = elem;
+ }
+
+ // Clone any incoming data and prepend the event, creating the handler arg list
+ data = data != null ? jQuery.makeArray( data ) : [];
+ data.unshift( event );
+
+ // Allow special events to draw outside the lines
+ special = jQuery.event.special[ type ] || {};
+ if ( special.trigger && special.trigger.apply( elem, data ) === false ) {
+ return;
+ }
+
+ // Determine event propagation path in advance, per W3C events spec (#9951)
+ // Bubble up to document, then to window; watch for a global ownerDocument var (#9724)
+ eventPath = [[ elem, special.bindType || type ]];
+ if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) {
+
+ bubbleType = special.delegateType || type;
+ cur = rfocusMorph.test( bubbleType + type ) ? elem : elem.parentNode;
+ old = null;
+ for ( ; cur; cur = cur.parentNode ) {
+ eventPath.push([ cur, bubbleType ]);
+ old = cur;
+ }
+
+ // Only add window if we got to document (e.g., not plain obj or detached DOM)
+ if ( old && old === elem.ownerDocument ) {
+ eventPath.push([ old.defaultView || old.parentWindow || window, bubbleType ]);
+ }
+ }
+
+ // Fire handlers on the event path
+ for ( i = 0; i < eventPath.length && !event.isPropagationStopped(); i++ ) {
+
+ cur = eventPath[i][0];
+ event.type = eventPath[i][1];
+
+ handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" );
+ if ( handle ) {
+ handle.apply( cur, data );
+ }
+ // Note that this is a bare JS function and not a jQuery handler
+ handle = ontype && cur[ ontype ];
+ if ( handle && jQuery.acceptData( cur ) && handle.apply( cur, data ) === false ) {
+ event.preventDefault();
+ }
+ }
+ event.type = type;
+
+ // If nobody prevented the default action, do it now
+ if ( !onlyHandlers && !event.isDefaultPrevented() ) {
+
+ if ( (!special._default || special._default.apply( elem.ownerDocument, data ) === false) &&
+ !(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) {
+
+ // Call a native DOM method on the target with the same name name as the event.
+ // Can't use an .isFunction() check here because IE6/7 fails that test.
+ // Don't do default actions on window, that's where global variables be (#6170)
+ // IE<9 dies on focus/blur to hidden element (#1486)
+ if ( ontype && elem[ type ] && ((type !== "focus" && type !== "blur") || event.target.offsetWidth !== 0) && !jQuery.isWindow( elem ) ) {
+
+ // Don't re-trigger an onFOO event when we call its FOO() method
+ old = elem[ ontype ];
+
+ if ( old ) {
+ elem[ ontype ] = null;
+ }
+
+ // Prevent re-triggering of the same event, since we already bubbled it above
+ jQuery.event.triggered = type;
+ elem[ type ]();
+ jQuery.event.triggered = undefined;
+
+ if ( old ) {
+ elem[ ontype ] = old;
+ }
+ }
+ }
+ }
+
+ return event.result;
+ },
+
+ dispatch: function( event ) {
+
+ // Make a writable jQuery.Event from the native event object
+ event = jQuery.event.fix( event || window.event );
+
+ var handlers = ( (jQuery._data( this, "events" ) || {} )[ event.type ] || []),
+ delegateCount = handlers.delegateCount,
+ args = [].slice.call( arguments, 0 ),
+ run_all = !event.exclusive && !event.namespace,
+ handlerQueue = [],
+ i, j, cur, jqcur, ret, selMatch, matched, matches, handleObj, sel, related;
+
+ // Use the fix-ed jQuery.Event rather than the (read-only) native event
+ args[0] = event;
+ event.delegateTarget = this;
+
+ // Determine handlers that should run if there are delegated events
+ // Avoid disabled elements in IE (#6911) and non-left-click bubbling in Firefox (#3861)
+ if ( delegateCount && !event.target.disabled && !(event.button && event.type === "click") ) {
+
+ // Pregenerate a single jQuery object for reuse with .is()
+ jqcur = jQuery(this);
+ jqcur.context = this.ownerDocument || this;
+
+ for ( cur = event.target; cur != this; cur = cur.parentNode || this ) {
+ selMatch = {};
+ matches = [];
+ jqcur[0] = cur;
+ for ( i = 0; i < delegateCount; i++ ) {
+ handleObj = handlers[ i ];
+ sel = handleObj.selector;
+
+ if ( selMatch[ sel ] === undefined ) {
+ selMatch[ sel ] = (
+ handleObj.quick ? quickIs( cur, handleObj.quick ) : jqcur.is( sel )
+ );
+ }
+ if ( selMatch[ sel ] ) {
+ matches.push( handleObj );
+ }
+ }
+ if ( matches.length ) {
+ handlerQueue.push({ elem: cur, matches: matches });
+ }
+ }
+ }
+
+ // Add the remaining (directly-bound) handlers
+ if ( handlers.length > delegateCount ) {
+ handlerQueue.push({ elem: this, matches: handlers.slice( delegateCount ) });
+ }
+
+ // Run delegates first; they may want to stop propagation beneath us
+ for ( i = 0; i < handlerQueue.length && !event.isPropagationStopped(); i++ ) {
+ matched = handlerQueue[ i ];
+ event.currentTarget = matched.elem;
+
+ for ( j = 0; j < matched.matches.length && !event.isImmediatePropagationStopped(); j++ ) {
+ handleObj = matched.matches[ j ];
+
+ // Triggered event must either 1) be non-exclusive and have no namespace, or
+ // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace).
+ if ( run_all || (!event.namespace && !handleObj.namespace) || event.namespace_re && event.namespace_re.test( handleObj.namespace ) ) {
+
+ event.data = handleObj.data;
+ event.handleObj = handleObj;
+
+ ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
+ .apply( matched.elem, args );
+
+ if ( ret !== undefined ) {
+ event.result = ret;
+ if ( ret === false ) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+ }
+ }
+ }
+
+ return event.result;
+ },
+
+ // Includes some event props shared by KeyEvent and MouseEvent
+ // *** attrChange attrName relatedNode srcElement are not normalized, non-W3C, deprecated, will be removed in 1.8 ***
+ props: "attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),
+
+ fixHooks: {},
+
+ keyHooks: {
+ props: "char charCode key keyCode".split(" "),
+ filter: function( event, original ) {
+
+ // Add which for key events
+ if ( event.which == null ) {
+ event.which = original.charCode != null ? original.charCode : original.keyCode;
+ }
+
+ return event;
+ }
+ },
+
+ mouseHooks: {
+ props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),
+ filter: function( event, original ) {
+ var eventDoc, doc, body,
+ button = original.button,
+ fromElement = original.fromElement;
+
+ // Calculate pageX/Y if missing and clientX/Y available
+ if ( event.pageX == null && original.clientX != null ) {
+ eventDoc = event.target.ownerDocument || document;
+ doc = eventDoc.documentElement;
+ body = eventDoc.body;
+
+ event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
+ event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );
+ }
+
+ // Add relatedTarget, if necessary
+ if ( !event.relatedTarget && fromElement ) {
+ event.relatedTarget = fromElement === event.target ? original.toElement : fromElement;
+ }
+
+ // Add which for click: 1 === left; 2 === middle; 3 === right
+ // Note: button is not normalized, so don't use it
+ if ( !event.which && button !== undefined ) {
+ event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
+ }
+
+ return event;
+ }
+ },
+
+ fix: function( event ) {
+ if ( event[ jQuery.expando ] ) {
+ return event;
+ }
+
+ // Create a writable copy of the event object and normalize some properties
+ var i, prop,
+ originalEvent = event,
+ fixHook = jQuery.event.fixHooks[ event.type ] || {},
+ copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props;
+
+ event = jQuery.Event( originalEvent );
+
+ for ( i = copy.length; i; ) {
+ prop = copy[ --i ];
+ event[ prop ] = originalEvent[ prop ];
+ }
+
+ // Fix target property, if necessary (#1925, IE 6/7/8 & Safari2)
+ if ( !event.target ) {
+ event.target = originalEvent.srcElement || document;
+ }
+
+ // Target should not be a text node (#504, Safari)
+ if ( event.target.nodeType === 3 ) {
+ event.target = event.target.parentNode;
+ }
+
+ // For mouse/key events; add metaKey if it's not there (#3368, IE6/7/8)
+ if ( event.metaKey === undefined ) {
+ event.metaKey = event.ctrlKey;
+ }
+
+ return fixHook.filter? fixHook.filter( event, originalEvent ) : event;
+ },
+
+ special: {
+ ready: {
+ // Make sure the ready event is setup
+ setup: jQuery.bindReady
+ },
+
+ load: {
+ // Prevent triggered image.load events from bubbling to window.load
+ noBubble: true
+ },
+
+ focus: {
+ delegateType: "focusin"
+ },
+ blur: {
+ delegateType: "focusout"
+ },
+
+ beforeunload: {
+ setup: function( data, namespaces, eventHandle ) {
+ // We only want to do this special case on windows
+ if ( jQuery.isWindow( this ) ) {
+ this.onbeforeunload = eventHandle;
+ }
+ },
+
+ teardown: function( namespaces, eventHandle ) {
+ if ( this.onbeforeunload === eventHandle ) {
+ this.onbeforeunload = null;
+ }
+ }
+ }
+ },
+
+ simulate: function( type, elem, event, bubble ) {
+ // Piggyback on a donor event to simulate a different one.
+ // Fake originalEvent to avoid donor's stopPropagation, but if the
+ // simulated event prevents default then we do the same on the donor.
+ var e = jQuery.extend(
+ new jQuery.Event(),
+ event,
+ { type: type,
+ isSimulated: true,
+ originalEvent: {}
+ }
+ );
+ if ( bubble ) {
+ jQuery.event.trigger( e, null, elem );
+ } else {
+ jQuery.event.dispatch.call( elem, e );
+ }
+ if ( e.isDefaultPrevented() ) {
+ event.preventDefault();
+ }
+ }
+};
+
+// Some plugins are using, but it's undocumented/deprecated and will be removed.
+// The 1.7 special event interface should provide all the hooks needed now.
+jQuery.event.handle = jQuery.event.dispatch;
+
+jQuery.removeEvent = document.removeEventListener ?
+ function( elem, type, handle ) {
+ if ( elem.removeEventListener ) {
+ elem.removeEventListener( type, handle, false );
+ }
+ } :
+ function( elem, type, handle ) {
+ if ( elem.detachEvent ) {
+ elem.detachEvent( "on" + type, handle );
+ }
+ };
+
+jQuery.Event = function( src, props ) {
+ // Allow instantiation without the 'new' keyword
+ if ( !(this instanceof jQuery.Event) ) {
+ return new jQuery.Event( src, props );
+ }
+
+ // Event object
+ if ( src && src.type ) {
+ this.originalEvent = src;
+ this.type = src.type;
+
+ // Events bubbling up the document may have been marked as prevented
+ // by a handler lower down the tree; reflect the correct value.
+ this.isDefaultPrevented = ( src.defaultPrevented || src.returnValue === false ||
+ src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse;
+
+ // Event type
+ } else {
+ this.type = src;
+ }
+
+ // Put explicitly provided properties onto the event object
+ if ( props ) {
+ jQuery.extend( this, props );
+ }
+
+ // Create a timestamp if incoming event doesn't have one
+ this.timeStamp = src && src.timeStamp || jQuery.now();
+
+ // Mark it as fixed
+ this[ jQuery.expando ] = true;
+};
+
+function returnFalse() {
+ return false;
+}
+function returnTrue() {
+ return true;
+}
+
+// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
+// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
+jQuery.Event.prototype = {
+ preventDefault: function() {
+ this.isDefaultPrevented = returnTrue;
+
+ var e = this.originalEvent;
+ if ( !e ) {
+ return;
+ }
+
+ // if preventDefault exists run it on the original event
+ if ( e.preventDefault ) {
+ e.preventDefault();
+
+ // otherwise set the returnValue property of the original event to false (IE)
+ } else {
+ e.returnValue = false;
+ }
+ },
+ stopPropagation: function() {
+ this.isPropagationStopped = returnTrue;
+
+ var e = this.originalEvent;
+ if ( !e ) {
+ return;
+ }
+ // if stopPropagation exists run it on the original event
+ if ( e.stopPropagation ) {
+ e.stopPropagation();
+ }
+ // otherwise set the cancelBubble property of the original event to true (IE)
+ e.cancelBubble = true;
+ },
+ stopImmediatePropagation: function() {
+ this.isImmediatePropagationStopped = returnTrue;
+ this.stopPropagation();
+ },
+ isDefaultPrevented: returnFalse,
+ isPropagationStopped: returnFalse,
+ isImmediatePropagationStopped: returnFalse
+};
+
+// Create mouseenter/leave events using mouseover/out and event-time checks
+jQuery.each({
+ mouseenter: "mouseover",
+ mouseleave: "mouseout"
+}, function( orig, fix ) {
+ jQuery.event.special[ orig ] = {
+ delegateType: fix,
+ bindType: fix,
+
+ handle: function( event ) {
+ var target = this,
+ related = event.relatedTarget,
+ handleObj = event.handleObj,
+ selector = handleObj.selector,
+ ret;
+
+ // For mousenter/leave call the handler if related is outside the target.
+ // NB: No relatedTarget if the mouse left/entered the browser window
+ if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
+ event.type = handleObj.origType;
+ ret = handleObj.handler.apply( this, arguments );
+ event.type = fix;
+ }
+ return ret;
+ }
+ };
+});
+
+// IE submit delegation
+if ( !jQuery.support.submitBubbles ) {
+
+ jQuery.event.special.submit = {
+ setup: function() {
+ // Only need this for delegated form submit events
+ if ( jQuery.nodeName( this, "form" ) ) {
+ return false;
+ }
+
+ // Lazy-add a submit handler when a descendant form may potentially be submitted
+ jQuery.event.add( this, "click._submit keypress._submit", function( e ) {
+ // Node name check avoids a VML-related crash in IE (#9807)
+ var elem = e.target,
+ form = jQuery.nodeName( elem, "input" ) || jQuery.nodeName( elem, "button" ) ? elem.form : undefined;
+ if ( form && !form._submit_attached ) {
+ jQuery.event.add( form, "submit._submit", function( event ) {
+ // If form was submitted by the user, bubble the event up the tree
+ if ( this.parentNode && !event.isTrigger ) {
+ jQuery.event.simulate( "submit", this.parentNode, event, true );
+ }
+ });
+ form._submit_attached = true;
+ }
+ });
+ // return undefined since we don't need an event listener
+ },
+
+ teardown: function() {
+ // Only need this for delegated form submit events
+ if ( jQuery.nodeName( this, "form" ) ) {
+ return false;
+ }
+
+ // Remove delegated handlers; cleanData eventually reaps submit handlers attached above
+ jQuery.event.remove( this, "._submit" );
+ }
+ };
+}
+
+// IE change delegation and checkbox/radio fix
+if ( !jQuery.support.changeBubbles ) {
+
+ jQuery.event.special.change = {
+
+ setup: function() {
+
+ if ( rformElems.test( this.nodeName ) ) {
+ // IE doesn't fire change on a check/radio until blur; trigger it on click
+ // after a propertychange. Eat the blur-change in special.change.handle.
+ // This still fires onchange a second time for check/radio after blur.
+ if ( this.type === "checkbox" || this.type === "radio" ) {
+ jQuery.event.add( this, "propertychange._change", function( event ) {
+ if ( event.originalEvent.propertyName === "checked" ) {
+ this._just_changed = true;
+ }
+ });
+ jQuery.event.add( this, "click._change", function( event ) {
+ if ( this._just_changed && !event.isTrigger ) {
+ this._just_changed = false;
+ jQuery.event.simulate( "change", this, event, true );
+ }
+ });
+ }
+ return false;
+ }
+ // Delegated event; lazy-add a change handler on descendant inputs
+ jQuery.event.add( this, "beforeactivate._change", function( e ) {
+ var elem = e.target;
+
+ if ( rformElems.test( elem.nodeName ) && !elem._change_attached ) {
+ jQuery.event.add( elem, "change._change", function( event ) {
+ if ( this.parentNode && !event.isSimulated && !event.isTrigger ) {
+ jQuery.event.simulate( "change", this.parentNode, event, true );
+ }
+ });
+ elem._change_attached = true;
+ }
+ });
+ },
+
+ handle: function( event ) {
+ var elem = event.target;
+
+ // Swallow native change events from checkbox/radio, we already triggered them above
+ if ( this !== elem || event.isSimulated || event.isTrigger || (elem.type !== "radio" && elem.type !== "checkbox") ) {
+ return event.handleObj.handler.apply( this, arguments );
+ }
+ },
+
+ teardown: function() {
+ jQuery.event.remove( this, "._change" );
+
+ return rformElems.test( this.nodeName );
+ }
+ };
+}
+
+// Create "bubbling" focus and blur events
+if ( !jQuery.support.focusinBubbles ) {
+ jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {
+
+ // Attach a single capturing handler while someone wants focusin/focusout
+ var attaches = 0,
+ handler = function( event ) {
+ jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true );
+ };
+
+ jQuery.event.special[ fix ] = {
+ setup: function() {
+ if ( attaches++ === 0 ) {
+ document.addEventListener( orig, handler, true );
+ }
+ },
+ teardown: function() {
+ if ( --attaches === 0 ) {
+ document.removeEventListener( orig, handler, true );
+ }
+ }
+ };
+ });
+}
+
+jQuery.fn.extend({
+
+ on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
+ var origFn, type;
+
+ // Types can be a map of types/handlers
+ if ( typeof types === "object" ) {
+ // ( types-Object, selector, data )
+ if ( typeof selector !== "string" ) {
+ // ( types-Object, data )
+ data = selector;
+ selector = undefined;
+ }
+ for ( type in types ) {
+ this.on( type, selector, data, types[ type ], one );
+ }
+ return this;
+ }
+
+ if ( data == null && fn == null ) {
+ // ( types, fn )
+ fn = selector;
+ data = selector = undefined;
+ } else if ( fn == null ) {
+ if ( typeof selector === "string" ) {
+ // ( types, selector, fn )
+ fn = data;
+ data = undefined;
+ } else {
+ // ( types, data, fn )
+ fn = data;
+ data = selector;
+ selector = undefined;
+ }
+ }
+ if ( fn === false ) {
+ fn = returnFalse;
+ } else if ( !fn ) {
+ return this;
+ }
+
+ if ( one === 1 ) {
+ origFn = fn;
+ fn = function( event ) {
+ // Can use an empty set, since event contains the info
+ jQuery().off( event );
+ return origFn.apply( this, arguments );
+ };
+ // Use same guid so caller can remove using origFn
+ fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
+ }
+ return this.each( function() {
+ jQuery.event.add( this, types, fn, data, selector );
+ });
+ },
+ one: function( types, selector, data, fn ) {
+ return this.on.call( this, types, selector, data, fn, 1 );
+ },
+ off: function( types, selector, fn ) {
+ if ( types && types.preventDefault && types.handleObj ) {
+ // ( event ) dispatched jQuery.Event
+ var handleObj = types.handleObj;
+ jQuery( types.delegateTarget ).off(
+ handleObj.namespace? handleObj.type + "." + handleObj.namespace : handleObj.type,
+ handleObj.selector,
+ handleObj.handler
+ );
+ return this;
+ }
+ if ( typeof types === "object" ) {
+ // ( types-object [, selector] )
+ for ( var type in types ) {
+ this.off( type, selector, types[ type ] );
+ }
+ return this;
+ }
+ if ( selector === false || typeof selector === "function" ) {
+ // ( types [, fn] )
+ fn = selector;
+ selector = undefined;
+ }
+ if ( fn === false ) {
+ fn = returnFalse;
+ }
+ return this.each(function() {
+ jQuery.event.remove( this, types, fn, selector );
+ });
+ },
+
+ bind: function( types, data, fn ) {
+ return this.on( types, null, data, fn );
+ },
+ unbind: function( types, fn ) {
+ return this.off( types, null, fn );
+ },
+
+ live: function( types, data, fn ) {
+ jQuery( this.context ).on( types, this.selector, data, fn );
+ return this;
+ },
+ die: function( types, fn ) {
+ jQuery( this.context ).off( types, this.selector || "**", fn );
+ return this;
+ },
+
+ delegate: function( selector, types, data, fn ) {
+ return this.on( types, selector, data, fn );
+ },
+ undelegate: function( selector, types, fn ) {
+ // ( namespace ) or ( selector, types [, fn] )
+ return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
+ },
+
+ trigger: function( type, data ) {
+ return this.each(function() {
+ jQuery.event.trigger( type, data, this );
+ });
+ },
+ triggerHandler: function( type, data ) {
+ if ( this[0] ) {
+ return jQuery.event.trigger( type, data, this[0], true );
+ }
+ },
+
+ toggle: function( fn ) {
+ // Save reference to arguments for access in closure
+ var args = arguments,
+ guid = fn.guid || jQuery.guid++,
+ i = 0,
+ toggler = function( event ) {
+ // Figure out which function to execute
+ var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
+ jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
+
+ // Make sure that clicks stop
+ event.preventDefault();
+
+ // and execute the function
+ return args[ lastToggle ].apply( this, arguments ) || false;
+ };
+
+ // link all the functions, so any of them can unbind this click handler
+ toggler.guid = guid;
+ while ( i < args.length ) {
+ args[ i++ ].guid = guid;
+ }
+
+ return this.click( toggler );
+ },
+
+ hover: function( fnOver, fnOut ) {
+ return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
+ }
+});
+
+jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
+ "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
+ "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
+
+ // Handle event binding
+ jQuery.fn[ name ] = function( data, fn ) {
+ if ( fn == null ) {
+ fn = data;
+ data = null;
+ }
+
+ return arguments.length > 0 ?
+ this.on( name, null, data, fn ) :
+ this.trigger( name );
+ };
+
+ if ( jQuery.attrFn ) {
+ jQuery.attrFn[ name ] = true;
+ }
+
+ if ( rkeyEvent.test( name ) ) {
+ jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks;
+ }
+
+ if ( rmouseEvent.test( name ) ) {
+ jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks;
+ }
+});
+
+
+
+/*!
+ * Sizzle CSS Selector Engine
+ * Copyright 2011, The Dojo Foundation
+ * Released under the MIT, BSD, and GPL Licenses.
+ * More information: http://sizzlejs.com/
+ */
+(function(){
+
+var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,
+ expando = "sizcache" + (Math.random() + '').replace('.', ''),
+ done = 0,
+ toString = Object.prototype.toString,
+ hasDuplicate = false,
+ baseHasDuplicate = true,
+ rBackslash = /\\/g,
+ rReturn = /\r\n/g,
+ rNonWord = /\W/;
+
+// Here we check if the JavaScript engine is using some sort of
+// optimization where it does not always call our comparision
+// function. If that is the case, discard the hasDuplicate value.
+// Thus far that includes Google Chrome.
+[0, 0].sort(function() {
+ baseHasDuplicate = false;
+ return 0;
+});
+
+var Sizzle = function( selector, context, results, seed ) {
+ results = results || [];
+ context = context || document;
+
+ var origContext = context;
+
+ if ( context.nodeType !== 1 && context.nodeType !== 9 ) {
+ return [];
+ }
+
+ if ( !selector || typeof selector !== "string" ) {
+ return results;
+ }
+
+ var m, set, checkSet, extra, ret, cur, pop, i,
+ prune = true,
+ contextXML = Sizzle.isXML( context ),
+ parts = [],
+ soFar = selector;
+
+ // Reset the position of the chunker regexp (start from head)
+ do {
+ chunker.exec( "" );
+ m = chunker.exec( soFar );
+
+ if ( m ) {
+ soFar = m[3];
+
+ parts.push( m[1] );
+
+ if ( m[2] ) {
+ extra = m[3];
+ break;
+ }
+ }
+ } while ( m );
+
+ if ( parts.length > 1 && origPOS.exec( selector ) ) {
+
+ if ( parts.length === 2 && Expr.relative[ parts[0] ] ) {
+ set = posProcess( parts[0] + parts[1], context, seed );
+
+ } else {
+ set = Expr.relative[ parts[0] ] ?
+ [ context ] :
+ Sizzle( parts.shift(), context );
+
+ while ( parts.length ) {
+ selector = parts.shift();
+
+ if ( Expr.relative[ selector ] ) {
+ selector += parts.shift();
+ }
+
+ set = posProcess( selector, set, seed );
+ }
+ }
+
+ } else {
+ // Take a shortcut and set the context if the root selector is an ID
+ // (but not if it'll be faster if the inner selector is an ID)
+ if ( !seed && parts.length > 1 && context.nodeType === 9 && !contextXML &&
+ Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1]) ) {
+
+ ret = Sizzle.find( parts.shift(), context, contextXML );
+ context = ret.expr ?
+ Sizzle.filter( ret.expr, ret.set )[0] :
+ ret.set[0];
+ }
+
+ if ( context ) {
+ ret = seed ?
+ { expr: parts.pop(), set: makeArray(seed) } :
+ Sizzle.find( parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML );
+
+ set = ret.expr ?
+ Sizzle.filter( ret.expr, ret.set ) :
+ ret.set;
+
+ if ( parts.length > 0 ) {
+ checkSet = makeArray( set );
+
+ } else {
+ prune = false;
+ }
+
+ while ( parts.length ) {
+ cur = parts.pop();
+ pop = cur;
+
+ if ( !Expr.relative[ cur ] ) {
+ cur = "";
+ } else {
+ pop = parts.pop();
+ }
+
+ if ( pop == null ) {
+ pop = context;
+ }
+
+ Expr.relative[ cur ]( checkSet, pop, contextXML );
+ }
+
+ } else {
+ checkSet = parts = [];
+ }
+ }
+
+ if ( !checkSet ) {
+ checkSet = set;
+ }
+
+ if ( !checkSet ) {
+ Sizzle.error( cur || selector );
+ }
+
+ if ( toString.call(checkSet) === "[object Array]" ) {
+ if ( !prune ) {
+ results.push.apply( results, checkSet );
+
+ } else if ( context && context.nodeType === 1 ) {
+ for ( i = 0; checkSet[i] != null; i++ ) {
+ if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) {
+ results.push( set[i] );
+ }
+ }
+
+ } else {
+ for ( i = 0; checkSet[i] != null; i++ ) {
+ if ( checkSet[i] && checkSet[i].nodeType === 1 ) {
+ results.push( set[i] );
+ }
+ }
+ }
+
+ } else {
+ makeArray( checkSet, results );
+ }
+
+ if ( extra ) {
+ Sizzle( extra, origContext, results, seed );
+ Sizzle.uniqueSort( results );
+ }
+
+ return results;
+};
+
+Sizzle.uniqueSort = function( results ) {
+ if ( sortOrder ) {
+ hasDuplicate = baseHasDuplicate;
+ results.sort( sortOrder );
+
+ if ( hasDuplicate ) {
+ for ( var i = 1; i < results.length; i++ ) {
+ if ( results[i] === results[ i - 1 ] ) {
+ results.splice( i--, 1 );
+ }
+ }
+ }
+ }
+
+ return results;
+};
+
+Sizzle.matches = function( expr, set ) {
+ return Sizzle( expr, null, null, set );
+};
+
+Sizzle.matchesSelector = function( node, expr ) {
+ return Sizzle( expr, null, null, [node] ).length > 0;
+};
+
+Sizzle.find = function( expr, context, isXML ) {
+ var set, i, len, match, type, left;
+
+ if ( !expr ) {
+ return [];
+ }
+
+ for ( i = 0, len = Expr.order.length; i < len; i++ ) {
+ type = Expr.order[i];
+
+ if ( (match = Expr.leftMatch[ type ].exec( expr )) ) {
+ left = match[1];
+ match.splice( 1, 1 );
+
+ if ( left.substr( left.length - 1 ) !== "\\" ) {
+ match[1] = (match[1] || "").replace( rBackslash, "" );
+ set = Expr.find[ type ]( match, context, isXML );
+
+ if ( set != null ) {
+ expr = expr.replace( Expr.match[ type ], "" );
+ break;
+ }
+ }
+ }
+ }
+
+ if ( !set ) {
+ set = typeof context.getElementsByTagName !== "undefined" ?
+ context.getElementsByTagName( "*" ) :
+ [];
+ }
+
+ return { set: set, expr: expr };
+};
+
+Sizzle.filter = function( expr, set, inplace, not ) {
+ var match, anyFound,
+ type, found, item, filter, left,
+ i, pass,
+ old = expr,
+ result = [],
+ curLoop = set,
+ isXMLFilter = set && set[0] && Sizzle.isXML( set[0] );
+
+ while ( expr && set.length ) {
+ for ( type in Expr.filter ) {
+ if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) {
+ filter = Expr.filter[ type ];
+ left = match[1];
+
+ anyFound = false;
+
+ match.splice(1,1);
+
+ if ( left.substr( left.length - 1 ) === "\\" ) {
+ continue;
+ }
+
+ if ( curLoop === result ) {
+ result = [];
+ }
+
+ if ( Expr.preFilter[ type ] ) {
+ match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter );
+
+ if ( !match ) {
+ anyFound = found = true;
+
+ } else if ( match === true ) {
+ continue;
+ }
+ }
+
+ if ( match ) {
+ for ( i = 0; (item = curLoop[i]) != null; i++ ) {
+ if ( item ) {
+ found = filter( item, match, i, curLoop );
+ pass = not ^ found;
+
+ if ( inplace && found != null ) {
+ if ( pass ) {
+ anyFound = true;
+
+ } else {
+ curLoop[i] = false;
+ }
+
+ } else if ( pass ) {
+ result.push( item );
+ anyFound = true;
+ }
+ }
+ }
+ }
+
+ if ( found !== undefined ) {
+ if ( !inplace ) {
+ curLoop = result;
+ }
+
+ expr = expr.replace( Expr.match[ type ], "" );
+
+ if ( !anyFound ) {
+ return [];
+ }
+
+ break;
+ }
+ }
+ }
+
+ // Improper expression
+ if ( expr === old ) {
+ if ( anyFound == null ) {
+ Sizzle.error( expr );
+
+ } else {
+ break;
+ }
+ }
+
+ old = expr;
+ }
+
+ return curLoop;
+};
+
+Sizzle.error = function( msg ) {
+ throw new Error( "Syntax error, unrecognized expression: " + msg );
+};
+
+/**
+ * Utility function for retreiving the text value of an array of DOM nodes
+ * @param {Array|Element} elem
+ */
+var getText = Sizzle.getText = function( elem ) {
+ var i, node,
+ nodeType = elem.nodeType,
+ ret = "";
+
+ if ( nodeType ) {
+ if ( nodeType === 1 || nodeType === 9 ) {
+ // Use textContent || innerText for elements
+ if ( typeof elem.textContent === 'string' ) {
+ return elem.textContent;
+ } else if ( typeof elem.innerText === 'string' ) {
+ // Replace IE's carriage returns
+ return elem.innerText.replace( rReturn, '' );
+ } else {
+ // Traverse it's children
+ for ( elem = elem.firstChild; elem; elem = elem.nextSibling) {
+ ret += getText( elem );
+ }
+ }
+ } else if ( nodeType === 3 || nodeType === 4 ) {
+ return elem.nodeValue;
+ }
+ } else {
+
+ // If no nodeType, this is expected to be an array
+ for ( i = 0; (node = elem[i]); i++ ) {
+ // Do not traverse comment nodes
+ if ( node.nodeType !== 8 ) {
+ ret += getText( node );
+ }
+ }
+ }
+ return ret;
+};
+
+var Expr = Sizzle.selectors = {
+ order: [ "ID", "NAME", "TAG" ],
+
+ match: {
+ ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,
+ CLASS: /\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,
+ NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,
+ ATTR: /\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,
+ TAG: /^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,
+ CHILD: /:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,
+ POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,
+ PSEUDO: /:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/
+ },
+
+ leftMatch: {},
+
+ attrMap: {
+ "class": "className",
+ "for": "htmlFor"
+ },
+
+ attrHandle: {
+ href: function( elem ) {
+ return elem.getAttribute( "href" );
+ },
+ type: function( elem ) {
+ return elem.getAttribute( "type" );
+ }
+ },
+
+ relative: {
+ "+": function(checkSet, part){
+ var isPartStr = typeof part === "string",
+ isTag = isPartStr && !rNonWord.test( part ),
+ isPartStrNotTag = isPartStr && !isTag;
+
+ if ( isTag ) {
+ part = part.toLowerCase();
+ }
+
+ for ( var i = 0, l = checkSet.length, elem; i < l; i++ ) {
+ if ( (elem = checkSet[i]) ) {
+ while ( (elem = elem.previousSibling) && elem.nodeType !== 1 ) {}
+
+ checkSet[i] = isPartStrNotTag || elem && elem.nodeName.toLowerCase() === part ?
+ elem || false :
+ elem === part;
+ }
+ }
+
+ if ( isPartStrNotTag ) {
+ Sizzle.filter( part, checkSet, true );
+ }
+ },
+
+ ">": function( checkSet, part ) {
+ var elem,
+ isPartStr = typeof part === "string",
+ i = 0,
+ l = checkSet.length;
+
+ if ( isPartStr && !rNonWord.test( part ) ) {
+ part = part.toLowerCase();
+
+ for ( ; i < l; i++ ) {
+ elem = checkSet[i];
+
+ if ( elem ) {
+ var parent = elem.parentNode;
+ checkSet[i] = parent.nodeName.toLowerCase() === part ? parent : false;
+ }
+ }
+
+ } else {
+ for ( ; i < l; i++ ) {
+ elem = checkSet[i];
+
+ if ( elem ) {
+ checkSet[i] = isPartStr ?
+ elem.parentNode :
+ elem.parentNode === part;
+ }
+ }
+
+ if ( isPartStr ) {
+ Sizzle.filter( part, checkSet, true );
+ }
+ }
+ },
+
+ "": function(checkSet, part, isXML){
+ var nodeCheck,
+ doneName = done++,
+ checkFn = dirCheck;
+
+ if ( typeof part === "string" && !rNonWord.test( part ) ) {
+ part = part.toLowerCase();
+ nodeCheck = part;
+ checkFn = dirNodeCheck;
+ }
+
+ checkFn( "parentNode", part, doneName, checkSet, nodeCheck, isXML );
+ },
+
+ "~": function( checkSet, part, isXML ) {
+ var nodeCheck,
+ doneName = done++,
+ checkFn = dirCheck;
+
+ if ( typeof part === "string" && !rNonWord.test( part ) ) {
+ part = part.toLowerCase();
+ nodeCheck = part;
+ checkFn = dirNodeCheck;
+ }
+
+ checkFn( "previousSibling", part, doneName, checkSet, nodeCheck, isXML );
+ }
+ },
+
+ find: {
+ ID: function( match, context, isXML ) {
+ if ( typeof context.getElementById !== "undefined" && !isXML ) {
+ var m = context.getElementById(match[1]);
+ // Check parentNode to catch when Blackberry 4.6 returns
+ // nodes that are no longer in the document #6963
+ return m && m.parentNode ? [m] : [];
+ }
+ },
+
+ NAME: function( match, context ) {
+ if ( typeof context.getElementsByName !== "undefined" ) {
+ var ret = [],
+ results = context.getElementsByName( match[1] );
+
+ for ( var i = 0, l = results.length; i < l; i++ ) {
+ if ( results[i].getAttribute("name") === match[1] ) {
+ ret.push( results[i] );
+ }
+ }
+
+ return ret.length === 0 ? null : ret;
+ }
+ },
+
+ TAG: function( match, context ) {
+ if ( typeof context.getElementsByTagName !== "undefined" ) {
+ return context.getElementsByTagName( match[1] );
+ }
+ }
+ },
+ preFilter: {
+ CLASS: function( match, curLoop, inplace, result, not, isXML ) {
+ match = " " + match[1].replace( rBackslash, "" ) + " ";
+
+ if ( isXML ) {
+ return match;
+ }
+
+ for ( var i = 0, elem; (elem = curLoop[i]) != null; i++ ) {
+ if ( elem ) {
+ if ( not ^ (elem.className && (" " + elem.className + " ").replace(/[\t\n\r]/g, " ").indexOf(match) >= 0) ) {
+ if ( !inplace ) {
+ result.push( elem );
+ }
+
+ } else if ( inplace ) {
+ curLoop[i] = false;
+ }
+ }
+ }
+
+ return false;
+ },
+
+ ID: function( match ) {
+ return match[1].replace( rBackslash, "" );
+ },
+
+ TAG: function( match, curLoop ) {
+ return match[1].replace( rBackslash, "" ).toLowerCase();
+ },
+
+ CHILD: function( match ) {
+ if ( match[1] === "nth" ) {
+ if ( !match[2] ) {
+ Sizzle.error( match[0] );
+ }
+
+ match[2] = match[2].replace(/^\+|\s*/g, '');
+
+ // parse equations like 'even', 'odd', '5', '2n', '3n+2', '4n-1', '-n+6'
+ var test = /(-?)(\d*)(?:n([+\-]?\d*))?/.exec(
+ match[2] === "even" && "2n" || match[2] === "odd" && "2n+1" ||
+ !/\D/.test( match[2] ) && "0n+" + match[2] || match[2]);
+
+ // calculate the numbers (first)n+(last) including if they are negative
+ match[2] = (test[1] + (test[2] || 1)) - 0;
+ match[3] = test[3] - 0;
+ }
+ else if ( match[2] ) {
+ Sizzle.error( match[0] );
+ }
+
+ // TODO: Move to normal caching system
+ match[0] = done++;
+
+ return match;
+ },
+
+ ATTR: function( match, curLoop, inplace, result, not, isXML ) {
+ var name = match[1] = match[1].replace( rBackslash, "" );
+
+ if ( !isXML && Expr.attrMap[name] ) {
+ match[1] = Expr.attrMap[name];
+ }
+
+ // Handle if an un-quoted value was used
+ match[4] = ( match[4] || match[5] || "" ).replace( rBackslash, "" );
+
+ if ( match[2] === "~=" ) {
+ match[4] = " " + match[4] + " ";
+ }
+
+ return match;
+ },
+
+ PSEUDO: function( match, curLoop, inplace, result, not ) {
+ if ( match[1] === "not" ) {
+ // If we're dealing with a complex expression, or a simple one
+ if ( ( chunker.exec(match[3]) || "" ).length > 1 || /^\w/.test(match[3]) ) {
+ match[3] = Sizzle(match[3], null, null, curLoop);
+
+ } else {
+ var ret = Sizzle.filter(match[3], curLoop, inplace, true ^ not);
+
+ if ( !inplace ) {
+ result.push.apply( result, ret );
+ }
+
+ return false;
+ }
+
+ } else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) {
+ return true;
+ }
+
+ return match;
+ },
+
+ POS: function( match ) {
+ match.unshift( true );
+
+ return match;
+ }
+ },
+
+ filters: {
+ enabled: function( elem ) {
+ return elem.disabled === false && elem.type !== "hidden";
+ },
+
+ disabled: function( elem ) {
+ return elem.disabled === true;
+ },
+
+ checked: function( elem ) {
+ return elem.checked === true;
+ },
+
+ selected: function( elem ) {
+ // Accessing this property makes selected-by-default
+ // options in Safari work properly
+ if ( elem.parentNode ) {
+ elem.parentNode.selectedIndex;
+ }
+
+ return elem.selected === true;
+ },
+
+ parent: function( elem ) {
+ return !!elem.firstChild;
+ },
+
+ empty: function( elem ) {
+ return !elem.firstChild;
+ },
+
+ has: function( elem, i, match ) {
+ return !!Sizzle( match[3], elem ).length;
+ },
+
+ header: function( elem ) {
+ return (/h\d/i).test( elem.nodeName );
+ },
+
+ text: function( elem ) {
+ var attr = elem.getAttribute( "type" ), type = elem.type;
+ // IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc)
+ // use getAttribute instead to test this case
+ return elem.nodeName.toLowerCase() === "input" && "text" === type && ( attr === type || attr === null );
+ },
+
+ radio: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "radio" === elem.type;
+ },
+
+ checkbox: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "checkbox" === elem.type;
+ },
+
+ file: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "file" === elem.type;
+ },
+
+ password: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "password" === elem.type;
+ },
+
+ submit: function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return (name === "input" || name === "button") && "submit" === elem.type;
+ },
+
+ image: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "image" === elem.type;
+ },
+
+ reset: function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return (name === "input" || name === "button") && "reset" === elem.type;
+ },
+
+ button: function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return name === "input" && "button" === elem.type || name === "button";
+ },
+
+ input: function( elem ) {
+ return (/input|select|textarea|button/i).test( elem.nodeName );
+ },
+
+ focus: function( elem ) {
+ return elem === elem.ownerDocument.activeElement;
+ }
+ },
+ setFilters: {
+ first: function( elem, i ) {
+ return i === 0;
+ },
+
+ last: function( elem, i, match, array ) {
+ return i === array.length - 1;
+ },
+
+ even: function( elem, i ) {
+ return i % 2 === 0;
+ },
+
+ odd: function( elem, i ) {
+ return i % 2 === 1;
+ },
+
+ lt: function( elem, i, match ) {
+ return i < match[3] - 0;
+ },
+
+ gt: function( elem, i, match ) {
+ return i > match[3] - 0;
+ },
+
+ nth: function( elem, i, match ) {
+ return match[3] - 0 === i;
+ },
+
+ eq: function( elem, i, match ) {
+ return match[3] - 0 === i;
+ }
+ },
+ filter: {
+ PSEUDO: function( elem, match, i, array ) {
+ var name = match[1],
+ filter = Expr.filters[ name ];
+
+ if ( filter ) {
+ return filter( elem, i, match, array );
+
+ } else if ( name === "contains" ) {
+ return (elem.textContent || elem.innerText || getText([ elem ]) || "").indexOf(match[3]) >= 0;
+
+ } else if ( name === "not" ) {
+ var not = match[3];
+
+ for ( var j = 0, l = not.length; j < l; j++ ) {
+ if ( not[j] === elem ) {
+ return false;
+ }
+ }
+
+ return true;
+
+ } else {
+ Sizzle.error( name );
+ }
+ },
+
+ CHILD: function( elem, match ) {
+ var first, last,
+ doneName, parent, cache,
+ count, diff,
+ type = match[1],
+ node = elem;
+
+ switch ( type ) {
+ case "only":
+ case "first":
+ while ( (node = node.previousSibling) ) {
+ if ( node.nodeType === 1 ) {
+ return false;
+ }
+ }
+
+ if ( type === "first" ) {
+ return true;
+ }
+
+ node = elem;
+
+ case "last":
+ while ( (node = node.nextSibling) ) {
+ if ( node.nodeType === 1 ) {
+ return false;
+ }
+ }
+
+ return true;
+
+ case "nth":
+ first = match[2];
+ last = match[3];
+
+ if ( first === 1 && last === 0 ) {
+ return true;
+ }
+
+ doneName = match[0];
+ parent = elem.parentNode;
+
+ if ( parent && (parent[ expando ] !== doneName || !elem.nodeIndex) ) {
+ count = 0;
+
+ for ( node = parent.firstChild; node; node = node.nextSibling ) {
+ if ( node.nodeType === 1 ) {
+ node.nodeIndex = ++count;
+ }
+ }
+
+ parent[ expando ] = doneName;
+ }
+
+ diff = elem.nodeIndex - last;
+
+ if ( first === 0 ) {
+ return diff === 0;
+
+ } else {
+ return ( diff % first === 0 && diff / first >= 0 );
+ }
+ }
+ },
+
+ ID: function( elem, match ) {
+ return elem.nodeType === 1 && elem.getAttribute("id") === match;
+ },
+
+ TAG: function( elem, match ) {
+ return (match === "*" && elem.nodeType === 1) || !!elem.nodeName && elem.nodeName.toLowerCase() === match;
+ },
+
+ CLASS: function( elem, match ) {
+ return (" " + (elem.className || elem.getAttribute("class")) + " ")
+ .indexOf( match ) > -1;
+ },
+
+ ATTR: function( elem, match ) {
+ var name = match[1],
+ result = Sizzle.attr ?
+ Sizzle.attr( elem, name ) :
+ Expr.attrHandle[ name ] ?
+ Expr.attrHandle[ name ]( elem ) :
+ elem[ name ] != null ?
+ elem[ name ] :
+ elem.getAttribute( name ),
+ value = result + "",
+ type = match[2],
+ check = match[4];
+
+ return result == null ?
+ type === "!=" :
+ !type && Sizzle.attr ?
+ result != null :
+ type === "=" ?
+ value === check :
+ type === "*=" ?
+ value.indexOf(check) >= 0 :
+ type === "~=" ?
+ (" " + value + " ").indexOf(check) >= 0 :
+ !check ?
+ value && result !== false :
+ type === "!=" ?
+ value !== check :
+ type === "^=" ?
+ value.indexOf(check) === 0 :
+ type === "$=" ?
+ value.substr(value.length - check.length) === check :
+ type === "|=" ?
+ value === check || value.substr(0, check.length + 1) === check + "-" :
+ false;
+ },
+
+ POS: function( elem, match, i, array ) {
+ var name = match[2],
+ filter = Expr.setFilters[ name ];
+
+ if ( filter ) {
+ return filter( elem, i, match, array );
+ }
+ }
+ }
+};
+
+var origPOS = Expr.match.POS,
+ fescape = function(all, num){
+ return "\\" + (num - 0 + 1);
+ };
+
+for ( var type in Expr.match ) {
+ Expr.match[ type ] = new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) );
+ Expr.leftMatch[ type ] = new RegExp( /(^(?:.|\r|\n)*?)/.source + Expr.match[ type ].source.replace(/\\(\d+)/g, fescape) );
+}
+
+var makeArray = function( array, results ) {
+ array = Array.prototype.slice.call( array, 0 );
+
+ if ( results ) {
+ results.push.apply( results, array );
+ return results;
+ }
+
+ return array;
+};
+
+// Perform a simple check to determine if the browser is capable of
+// converting a NodeList to an array using builtin methods.
+// Also verifies that the returned array holds DOM nodes
+// (which is not the case in the Blackberry browser)
+try {
+ Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;
+
+// Provide a fallback method if it does not work
+} catch( e ) {
+ makeArray = function( array, results ) {
+ var i = 0,
+ ret = results || [];
+
+ if ( toString.call(array) === "[object Array]" ) {
+ Array.prototype.push.apply( ret, array );
+
+ } else {
+ if ( typeof array.length === "number" ) {
+ for ( var l = array.length; i < l; i++ ) {
+ ret.push( array[i] );
+ }
+
+ } else {
+ for ( ; array[i]; i++ ) {
+ ret.push( array[i] );
+ }
+ }
+ }
+
+ return ret;
+ };
+}
+
+var sortOrder, siblingCheck;
+
+if ( document.documentElement.compareDocumentPosition ) {
+ sortOrder = function( a, b ) {
+ if ( a === b ) {
+ hasDuplicate = true;
+ return 0;
+ }
+
+ if ( !a.compareDocumentPosition || !b.compareDocumentPosition ) {
+ return a.compareDocumentPosition ? -1 : 1;
+ }
+
+ return a.compareDocumentPosition(b) & 4 ? -1 : 1;
+ };
+
+} else {
+ sortOrder = function( a, b ) {
+ // The nodes are identical, we can exit early
+ if ( a === b ) {
+ hasDuplicate = true;
+ return 0;
+
+ // Fallback to using sourceIndex (in IE) if it's available on both nodes
+ } else if ( a.sourceIndex && b.sourceIndex ) {
+ return a.sourceIndex - b.sourceIndex;
+ }
+
+ var al, bl,
+ ap = [],
+ bp = [],
+ aup = a.parentNode,
+ bup = b.parentNode,
+ cur = aup;
+
+ // If the nodes are siblings (or identical) we can do a quick check
+ if ( aup === bup ) {
+ return siblingCheck( a, b );
+
+ // If no parents were found then the nodes are disconnected
+ } else if ( !aup ) {
+ return -1;
+
+ } else if ( !bup ) {
+ return 1;
+ }
+
+ // Otherwise they're somewhere else in the tree so we need
+ // to build up a full list of the parentNodes for comparison
+ while ( cur ) {
+ ap.unshift( cur );
+ cur = cur.parentNode;
+ }
+
+ cur = bup;
+
+ while ( cur ) {
+ bp.unshift( cur );
+ cur = cur.parentNode;
+ }
+
+ al = ap.length;
+ bl = bp.length;
+
+ // Start walking down the tree looking for a discrepancy
+ for ( var i = 0; i < al && i < bl; i++ ) {
+ if ( ap[i] !== bp[i] ) {
+ return siblingCheck( ap[i], bp[i] );
+ }
+ }
+
+ // We ended someplace up the tree so do a sibling check
+ return i === al ?
+ siblingCheck( a, bp[i], -1 ) :
+ siblingCheck( ap[i], b, 1 );
+ };
+
+ siblingCheck = function( a, b, ret ) {
+ if ( a === b ) {
+ return ret;
+ }
+
+ var cur = a.nextSibling;
+
+ while ( cur ) {
+ if ( cur === b ) {
+ return -1;
+ }
+
+ cur = cur.nextSibling;
+ }
+
+ return 1;
+ };
+}
+
+// Check to see if the browser returns elements by name when
+// querying by getElementById (and provide a workaround)
+(function(){
+ // We're going to inject a fake input element with a specified name
+ var form = document.createElement("div"),
+ id = "script" + (new Date()).getTime(),
+ root = document.documentElement;
+
+ form.innerHTML = "<a name='" + id + "'/>";
+
+ // Inject it into the root element, check its status, and remove it quickly
+ root.insertBefore( form, root.firstChild );
+
+ // The workaround has to do additional checks after a getElementById
+ // Which slows things down for other browsers (hence the branching)
+ if ( document.getElementById( id ) ) {
+ Expr.find.ID = function( match, context, isXML ) {
+ if ( typeof context.getElementById !== "undefined" && !isXML ) {
+ var m = context.getElementById(match[1]);
+
+ return m ?
+ m.id === match[1] || typeof m.getAttributeNode !== "undefined" && m.getAttributeNode("id").nodeValue === match[1] ?
+ [m] :
+ undefined :
+ [];
+ }
+ };
+
+ Expr.filter.ID = function( elem, match ) {
+ var node = typeof elem.getAttributeNode !== "undefined" && elem.getAttributeNode("id");
+
+ return elem.nodeType === 1 && node && node.nodeValue === match;
+ };
+ }
+
+ root.removeChild( form );
+
+ // release memory in IE
+ root = form = null;
+})();
+
+(function(){
+ // Check to see if the browser returns only elements
+ // when doing getElementsByTagName("*")
+
+ // Create a fake element
+ var div = document.createElement("div");
+ div.appendChild( document.createComment("") );
+
+ // Make sure no comments are found
+ if ( div.getElementsByTagName("*").length > 0 ) {
+ Expr.find.TAG = function( match, context ) {
+ var results = context.getElementsByTagName( match[1] );
+
+ // Filter out possible comments
+ if ( match[1] === "*" ) {
+ var tmp = [];
+
+ for ( var i = 0; results[i]; i++ ) {
+ if ( results[i].nodeType === 1 ) {
+ tmp.push( results[i] );
+ }
+ }
+
+ results = tmp;
+ }
+
+ return results;
+ };
+ }
+
+ // Check to see if an attribute returns normalized href attributes
+ div.innerHTML = "<a href='#'></a>";
+
+ if ( div.firstChild && typeof div.firstChild.getAttribute !== "undefined" &&
+ div.firstChild.getAttribute("href") !== "#" ) {
+
+ Expr.attrHandle.href = function( elem ) {
+ return elem.getAttribute( "href", 2 );
+ };
+ }
+
+ // release memory in IE
+ div = null;
+})();
+
+if ( document.querySelectorAll ) {
+ (function(){
+ var oldSizzle = Sizzle,
+ div = document.createElement("div"),
+ id = "__sizzle__";
+
+ div.innerHTML = "<p class='TEST'></p>";
+
+ // Safari can't handle uppercase or unicode characters when
+ // in quirks mode.
+ if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
+ return;
+ }
+
+ Sizzle = function( query, context, extra, seed ) {
+ context = context || document;
+
+ // Only use querySelectorAll on non-XML documents
+ // (ID selectors don't work in non-HTML documents)
+ if ( !seed && !Sizzle.isXML(context) ) {
+ // See if we find a selector to speed up
+ var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query );
+
+ if ( match && (context.nodeType === 1 || context.nodeType === 9) ) {
+ // Speed-up: Sizzle("TAG")
+ if ( match[1] ) {
+ return makeArray( context.getElementsByTagName( query ), extra );
+
+ // Speed-up: Sizzle(".CLASS")
+ } else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) {
+ return makeArray( context.getElementsByClassName( match[2] ), extra );
+ }
+ }
+
+ if ( context.nodeType === 9 ) {
+ // Speed-up: Sizzle("body")
+ // The body element only exists once, optimize finding it
+ if ( query === "body" && context.body ) {
+ return makeArray( [ context.body ], extra );
+
+ // Speed-up: Sizzle("#ID")
+ } else if ( match && match[3] ) {
+ var elem = context.getElementById( match[3] );
+
+ // Check parentNode to catch when Blackberry 4.6 returns
+ // nodes that are no longer in the document #6963
+ if ( elem && elem.parentNode ) {
+ // Handle the case where IE and Opera return items
+ // by name instead of ID
+ if ( elem.id === match[3] ) {
+ return makeArray( [ elem ], extra );
+ }
+
+ } else {
+ return makeArray( [], extra );
+ }
+ }
+
+ try {
+ return makeArray( context.querySelectorAll(query), extra );
+ } catch(qsaError) {}
+
+ // qSA works strangely on Element-rooted queries
+ // We can work around this by specifying an extra ID on the root
+ // and working up from there (Thanks to Andrew Dupont for the technique)
+ // IE 8 doesn't work on object elements
+ } else if ( context.nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
+ var oldContext = context,
+ old = context.getAttribute( "id" ),
+ nid = old || id,
+ hasParent = context.parentNode,
+ relativeHierarchySelector = /^\s*[+~]/.test( query );
+
+ if ( !old ) {
+ context.setAttribute( "id", nid );
+ } else {
+ nid = nid.replace( /'/g, "\\$&" );
+ }
+ if ( relativeHierarchySelector && hasParent ) {
+ context = context.parentNode;
+ }
+
+ try {
+ if ( !relativeHierarchySelector || hasParent ) {
+ return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );
+ }
+
+ } catch(pseudoError) {
+ } finally {
+ if ( !old ) {
+ oldContext.removeAttribute( "id" );
+ }
+ }
+ }
+ }
+
+ return oldSizzle(query, context, extra, seed);
+ };
+
+ for ( var prop in oldSizzle ) {
+ Sizzle[ prop ] = oldSizzle[ prop ];
+ }
+
+ // release memory in IE
+ div = null;
+ })();
+}
+
+(function(){
+ var html = document.documentElement,
+ matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector;
+
+ if ( matches ) {
+ // Check to see if it's possible to do matchesSelector
+ // on a disconnected node (IE 9 fails this)
+ var disconnectedMatch = !matches.call( document.createElement( "div" ), "div" ),
+ pseudoWorks = false;
+
+ try {
+ // This should fail with an exception
+ // Gecko does not error, returns false instead
+ matches.call( document.documentElement, "[test!='']:sizzle" );
+
+ } catch( pseudoError ) {
+ pseudoWorks = true;
+ }
+
+ Sizzle.matchesSelector = function( node, expr ) {
+ // Make sure that attribute selectors are quoted
+ expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']");
+
+ if ( !Sizzle.isXML( node ) ) {
+ try {
+ if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) {
+ var ret = matches.call( node, expr );
+
+ // IE 9's matchesSelector returns false on disconnected nodes
+ if ( ret || !disconnectedMatch ||
+ // As well, disconnected nodes are said to be in a document
+ // fragment in IE 9, so check for that
+ node.document && node.document.nodeType !== 11 ) {
+ return ret;
+ }
+ }
+ } catch(e) {}
+ }
+
+ return Sizzle(expr, null, null, [node]).length > 0;
+ };
+ }
+})();
+
+(function(){
+ var div = document.createElement("div");
+
+ div.innerHTML = "<div class='test e'></div><div class='test'></div>";
+
+ // Opera can't find a second classname (in 9.6)
+ // Also, make sure that getElementsByClassName actually exists
+ if ( !div.getElementsByClassName || div.getElementsByClassName("e").length === 0 ) {
+ return;
+ }
+
+ // Safari caches class attributes, doesn't catch changes (in 3.2)
+ div.lastChild.className = "e";
+
+ if ( div.getElementsByClassName("e").length === 1 ) {
+ return;
+ }
+
+ Expr.order.splice(1, 0, "CLASS");
+ Expr.find.CLASS = function( match, context, isXML ) {
+ if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) {
+ return context.getElementsByClassName(match[1]);
+ }
+ };
+
+ // release memory in IE
+ div = null;
+})();
+
+function dirNodeCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) {
+ for ( var i = 0, l = checkSet.length; i < l; i++ ) {
+ var elem = checkSet[i];
+
+ if ( elem ) {
+ var match = false;
+
+ elem = elem[dir];
+
+ while ( elem ) {
+ if ( elem[ expando ] === doneName ) {
+ match = checkSet[elem.sizset];
+ break;
+ }
+
+ if ( elem.nodeType === 1 && !isXML ){
+ elem[ expando ] = doneName;
+ elem.sizset = i;
+ }
+
+ if ( elem.nodeName.toLowerCase() === cur ) {
+ match = elem;
+ break;
+ }
+
+ elem = elem[dir];
+ }
+
+ checkSet[i] = match;
+ }
+ }
+}
+
+function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) {
+ for ( var i = 0, l = checkSet.length; i < l; i++ ) {
+ var elem = checkSet[i];
+
+ if ( elem ) {
+ var match = false;
+
+ elem = elem[dir];
+
+ while ( elem ) {
+ if ( elem[ expando ] === doneName ) {
+ match = checkSet[elem.sizset];
+ break;
+ }
+
+ if ( elem.nodeType === 1 ) {
+ if ( !isXML ) {
+ elem[ expando ] = doneName;
+ elem.sizset = i;
+ }
+
+ if ( typeof cur !== "string" ) {
+ if ( elem === cur ) {
+ match = true;
+ break;
+ }
+
+ } else if ( Sizzle.filter( cur, [elem] ).length > 0 ) {
+ match = elem;
+ break;
+ }
+ }
+
+ elem = elem[dir];
+ }
+
+ checkSet[i] = match;
+ }
+ }
+}
+
+if ( document.documentElement.contains ) {
+ Sizzle.contains = function( a, b ) {
+ return a !== b && (a.contains ? a.contains(b) : true);
+ };
+
+} else if ( document.documentElement.compareDocumentPosition ) {
+ Sizzle.contains = function( a, b ) {
+ return !!(a.compareDocumentPosition(b) & 16);
+ };
+
+} else {
+ Sizzle.contains = function() {
+ return false;
+ };
+}
+
+Sizzle.isXML = function( elem ) {
+ // documentElement is verified for cases where it doesn't yet exist
+ // (such as loading iframes in IE - #4833)
+ var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement;
+
+ return documentElement ? documentElement.nodeName !== "HTML" : false;
+};
+
+var posProcess = function( selector, context, seed ) {
+ var match,
+ tmpSet = [],
+ later = "",
+ root = context.nodeType ? [context] : context;
+
+ // Position selectors must be done after the filter
+ // And so must :not(positional) so we move all PSEUDOs to the end
+ while ( (match = Expr.match.PSEUDO.exec( selector )) ) {
+ later += match[0];
+ selector = selector.replace( Expr.match.PSEUDO, "" );
+ }
+
+ selector = Expr.relative[selector] ? selector + "*" : selector;
+
+ for ( var i = 0, l = root.length; i < l; i++ ) {
+ Sizzle( selector, root[i], tmpSet, seed );
+ }
+
+ return Sizzle.filter( later, tmpSet );
+};
+
+// EXPOSE
+// Override sizzle attribute retrieval
+Sizzle.attr = jQuery.attr;
+Sizzle.selectors.attrMap = {};
+jQuery.find = Sizzle;
+jQuery.expr = Sizzle.selectors;
+jQuery.expr[":"] = jQuery.expr.filters;
+jQuery.unique = Sizzle.uniqueSort;
+jQuery.text = Sizzle.getText;
+jQuery.isXMLDoc = Sizzle.isXML;
+jQuery.contains = Sizzle.contains;
+
+
+})();
+
+
+var runtil = /Until$/,
+ rparentsprev = /^(?:parents|prevUntil|prevAll)/,
+ // Note: This RegExp should be improved, or likely pulled from Sizzle
+ rmultiselector = /,/,
+ isSimple = /^.[^:#\[\.,]*$/,
+ slice = Array.prototype.slice,
+ POS = jQuery.expr.match.POS,
+ // methods guaranteed to produce a unique set when starting from a unique set
+ guaranteedUnique = {
+ children: true,
+ contents: true,
+ next: true,
+ prev: true
+ };
+
+jQuery.fn.extend({
+ find: function( selector ) {
+ var self = this,
+ i, l;
+
+ if ( typeof selector !== "string" ) {
+ return jQuery( selector ).filter(function() {
+ for ( i = 0, l = self.length; i < l; i++ ) {
+ if ( jQuery.contains( self[ i ], this ) ) {
+ return true;
+ }
+ }
+ });
+ }
+
+ var ret = this.pushStack( "", "find", selector ),
+ length, n, r;
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ length = ret.length;
+ jQuery.find( selector, this[i], ret );
+
+ if ( i > 0 ) {
+ // Make sure that the results are unique
+ for ( n = length; n < ret.length; n++ ) {
+ for ( r = 0; r < length; r++ ) {
+ if ( ret[r] === ret[n] ) {
+ ret.splice(n--, 1);
+ break;
+ }
+ }
+ }
+ }
+ }
+
+ return ret;
+ },
+
+ has: function( target ) {
+ var targets = jQuery( target );
+ return this.filter(function() {
+ for ( var i = 0, l = targets.length; i < l; i++ ) {
+ if ( jQuery.contains( this, targets[i] ) ) {
+ return true;
+ }
+ }
+ });
+ },
+
+ not: function( selector ) {
+ return this.pushStack( winnow(this, selector, false), "not", selector);
+ },
+
+ filter: function( selector ) {
+ return this.pushStack( winnow(this, selector, true), "filter", selector );
+ },
+
+ is: function( selector ) {
+ return !!selector && (
+ typeof selector === "string" ?
+ // If this is a positional selector, check membership in the returned set
+ // so $("p:first").is("p:last") won't return true for a doc with two "p".
+ POS.test( selector ) ?
+ jQuery( selector, this.context ).index( this[0] ) >= 0 :
+ jQuery.filter( selector, this ).length > 0 :
+ this.filter( selector ).length > 0 );
+ },
+
+ closest: function( selectors, context ) {
+ var ret = [], i, l, cur = this[0];
+
+ // Array (deprecated as of jQuery 1.7)
+ if ( jQuery.isArray( selectors ) ) {
+ var level = 1;
+
+ while ( cur && cur.ownerDocument && cur !== context ) {
+ for ( i = 0; i < selectors.length; i++ ) {
+
+ if ( jQuery( cur ).is( selectors[ i ] ) ) {
+ ret.push({ selector: selectors[ i ], elem: cur, level: level });
+ }
+ }
+
+ cur = cur.parentNode;
+ level++;
+ }
+
+ return ret;
+ }
+
+ // String
+ var pos = POS.test( selectors ) || typeof selectors !== "string" ?
+ jQuery( selectors, context || this.context ) :
+ 0;
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ cur = this[i];
+
+ while ( cur ) {
+ if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
+ ret.push( cur );
+ break;
+
+ } else {
+ cur = cur.parentNode;
+ if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {
+ break;
+ }
+ }
+ }
+ }
+
+ ret = ret.length > 1 ? jQuery.unique( ret ) : ret;
+
+ return this.pushStack( ret, "closest", selectors );
+ },
+
+ // Determine the position of an element within
+ // the matched set of elements
+ index: function( elem ) {
+
+ // No argument, return index in parent
+ if ( !elem ) {
+ return ( this[0] && this[0].parentNode ) ? this.prevAll().length : -1;
+ }
+
+ // index in selector
+ if ( typeof elem === "string" ) {
+ return jQuery.inArray( this[0], jQuery( elem ) );
+ }
+
+ // Locate the position of the desired element
+ return jQuery.inArray(
+ // If it receives a jQuery object, the first element is used
+ elem.jquery ? elem[0] : elem, this );
+ },
+
+ add: function( selector, context ) {
+ var set = typeof selector === "string" ?
+ jQuery( selector, context ) :
+ jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ),
+ all = jQuery.merge( this.get(), set );
+
+ return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ?
+ all :
+ jQuery.unique( all ) );
+ },
+
+ andSelf: function() {
+ return this.add( this.prevObject );
+ }
+});
+
+// A painfully simple check to see if an element is disconnected
+// from a document (should be improved, where feasible).
+function isDisconnected( node ) {
+ return !node || !node.parentNode || node.parentNode.nodeType === 11;
+}
+
+jQuery.each({
+ parent: function( elem ) {
+ var parent = elem.parentNode;
+ return parent && parent.nodeType !== 11 ? parent : null;
+ },
+ parents: function( elem ) {
+ return jQuery.dir( elem, "parentNode" );
+ },
+ parentsUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "parentNode", until );
+ },
+ next: function( elem ) {
+ return jQuery.nth( elem, 2, "nextSibling" );
+ },
+ prev: function( elem ) {
+ return jQuery.nth( elem, 2, "previousSibling" );
+ },
+ nextAll: function( elem ) {
+ return jQuery.dir( elem, "nextSibling" );
+ },
+ prevAll: function( elem ) {
+ return jQuery.dir( elem, "previousSibling" );
+ },
+ nextUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "nextSibling", until );
+ },
+ prevUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "previousSibling", until );
+ },
+ siblings: function( elem ) {
+ return jQuery.sibling( elem.parentNode.firstChild, elem );
+ },
+ children: function( elem ) {
+ return jQuery.sibling( elem.firstChild );
+ },
+ contents: function( elem ) {
+ return jQuery.nodeName( elem, "iframe" ) ?
+ elem.contentDocument || elem.contentWindow.document :
+ jQuery.makeArray( elem.childNodes );
+ }
+}, function( name, fn ) {
+ jQuery.fn[ name ] = function( until, selector ) {
+ var ret = jQuery.map( this, fn, until );
+
+ if ( !runtil.test( name ) ) {
+ selector = until;
+ }
+
+ if ( selector && typeof selector === "string" ) {
+ ret = jQuery.filter( selector, ret );
+ }
+
+ ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret;
+
+ if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) {
+ ret = ret.reverse();
+ }
+
+ return this.pushStack( ret, name, slice.call( arguments ).join(",") );
+ };
+});
+
+jQuery.extend({
+ filter: function( expr, elems, not ) {
+ if ( not ) {
+ expr = ":not(" + expr + ")";
+ }
+
+ return elems.length === 1 ?
+ jQuery.find.matchesSelector(elems[0], expr) ? [ elems[0] ] : [] :
+ jQuery.find.matches(expr, elems);
+ },
+
+ dir: function( elem, dir, until ) {
+ var matched = [],
+ cur = elem[ dir ];
+
+ while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
+ if ( cur.nodeType === 1 ) {
+ matched.push( cur );
+ }
+ cur = cur[dir];
+ }
+ return matched;
+ },
+
+ nth: function( cur, result, dir, elem ) {
+ result = result || 1;
+ var num = 0;
+
+ for ( ; cur; cur = cur[dir] ) {
+ if ( cur.nodeType === 1 && ++num === result ) {
+ break;
+ }
+ }
+
+ return cur;
+ },
+
+ sibling: function( n, elem ) {
+ var r = [];
+
+ for ( ; n; n = n.nextSibling ) {
+ if ( n.nodeType === 1 && n !== elem ) {
+ r.push( n );
+ }
+ }
+
+ return r;
+ }
+});
+
+// Implement the identical functionality for filter and not
+function winnow( elements, qualifier, keep ) {
+
+ // Can't pass null or undefined to indexOf in Firefox 4
+ // Set to 0 to skip string check
+ qualifier = qualifier || 0;
+
+ if ( jQuery.isFunction( qualifier ) ) {
+ return jQuery.grep(elements, function( elem, i ) {
+ var retVal = !!qualifier.call( elem, i, elem );
+ return retVal === keep;
+ });
+
+ } else if ( qualifier.nodeType ) {
+ return jQuery.grep(elements, function( elem, i ) {
+ return ( elem === qualifier ) === keep;
+ });
+
+ } else if ( typeof qualifier === "string" ) {
+ var filtered = jQuery.grep(elements, function( elem ) {
+ return elem.nodeType === 1;
+ });
+
+ if ( isSimple.test( qualifier ) ) {
+ return jQuery.filter(qualifier, filtered, !keep);
+ } else {
+ qualifier = jQuery.filter( qualifier, filtered );
+ }
+ }
+
+ return jQuery.grep(elements, function( elem, i ) {
+ return ( jQuery.inArray( elem, qualifier ) >= 0 ) === keep;
+ });
+}
+
+
+
+
+function createSafeFragment( document ) {
+ var list = nodeNames.split( "|" ),
+ safeFrag = document.createDocumentFragment();
+
+ if ( safeFrag.createElement ) {
+ while ( list.length ) {
+ safeFrag.createElement(
+ list.pop()
+ );
+ }
+ }
+ return safeFrag;
+}
+
+var nodeNames = "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|" +
+ "header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
+ rinlinejQuery = / jQuery\d+="(?:\d+|null)"/g,
+ rleadingWhitespace = /^\s+/,
+ rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,
+ rtagName = /<([\w:]+)/,
+ rtbody = /<tbody/i,
+ rhtml = /<|&#?\w+;/,
+ rnoInnerhtml = /<(?:script|style)/i,
+ rnocache = /<(?:script|object|embed|option|style)/i,
+ rnoshimcache = new RegExp("<(?:" + nodeNames + ")", "i"),
+ // checked="checked" or checked
+ rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
+ rscriptType = /\/(java|ecma)script/i,
+ rcleanScript = /^\s*<!(?:\[CDATA\[|\-\-)/,
+ wrapMap = {
+ option: [ 1, "<select multiple='multiple'>", "</select>" ],
+ legend: [ 1, "<fieldset>", "</fieldset>" ],
+ thead: [ 1, "<table>", "</table>" ],
+ tr: [ 2, "<table><tbody>", "</tbody></table>" ],
+ td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
+ col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
+ area: [ 1, "<map>", "</map>" ],
+ _default: [ 0, "", "" ]
+ },
+ safeFragment = createSafeFragment( document );
+
+wrapMap.optgroup = wrapMap.option;
+wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
+wrapMap.th = wrapMap.td;
+
+// IE can't serialize <link> and <script> tags normally
+if ( !jQuery.support.htmlSerialize ) {
+ wrapMap._default = [ 1, "div<div>", "</div>" ];
+}
+
+jQuery.fn.extend({
+ text: function( text ) {
+ if ( jQuery.isFunction(text) ) {
+ return this.each(function(i) {
+ var self = jQuery( this );
+
+ self.text( text.call(this, i, self.text()) );
+ });
+ }
+
+ if ( typeof text !== "object" && text !== undefined ) {
+ return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
+ }
+
+ return jQuery.text( this );
+ },
+
+ wrapAll: function( html ) {
+ if ( jQuery.isFunction( html ) ) {
+ return this.each(function(i) {
+ jQuery(this).wrapAll( html.call(this, i) );
+ });
+ }
+
+ if ( this[0] ) {
+ // The elements to wrap the target around
+ var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true);
+
+ if ( this[0].parentNode ) {
+ wrap.insertBefore( this[0] );
+ }
+
+ wrap.map(function() {
+ var elem = this;
+
+ while ( elem.firstChild && elem.firstChild.nodeType === 1 ) {
+ elem = elem.firstChild;
+ }
+
+ return elem;
+ }).append( this );
+ }
+
+ return this;
+ },
+
+ wrapInner: function( html ) {
+ if ( jQuery.isFunction( html ) ) {
+ return this.each(function(i) {
+ jQuery(this).wrapInner( html.call(this, i) );
+ });
+ }
+
+ return this.each(function() {
+ var self = jQuery( this ),
+ contents = self.contents();
+
+ if ( contents.length ) {
+ contents.wrapAll( html );
+
+ } else {
+ self.append( html );
+ }
+ });
+ },
+
+ wrap: function( html ) {
+ var isFunction = jQuery.isFunction( html );
+
+ return this.each(function(i) {
+ jQuery( this ).wrapAll( isFunction ? html.call(this, i) : html );
+ });
+ },
+
+ unwrap: function() {
+ return this.parent().each(function() {
+ if ( !jQuery.nodeName( this, "body" ) ) {
+ jQuery( this ).replaceWith( this.childNodes );
+ }
+ }).end();
+ },
+
+ append: function() {
+ return this.domManip(arguments, true, function( elem ) {
+ if ( this.nodeType === 1 ) {
+ this.appendChild( elem );
+ }
+ });
+ },
+
+ prepend: function() {
+ return this.domManip(arguments, true, function( elem ) {
+ if ( this.nodeType === 1 ) {
+ this.insertBefore( elem, this.firstChild );
+ }
+ });
+ },
+
+ before: function() {
+ if ( this[0] && this[0].parentNode ) {
+ return this.domManip(arguments, false, function( elem ) {
+ this.parentNode.insertBefore( elem, this );
+ });
+ } else if ( arguments.length ) {
+ var set = jQuery.clean( arguments );
+ set.push.apply( set, this.toArray() );
+ return this.pushStack( set, "before", arguments );
+ }
+ },
+
+ after: function() {
+ if ( this[0] && this[0].parentNode ) {
+ return this.domManip(arguments, false, function( elem ) {
+ this.parentNode.insertBefore( elem, this.nextSibling );
+ });
+ } else if ( arguments.length ) {
+ var set = this.pushStack( this, "after", arguments );
+ set.push.apply( set, jQuery.clean(arguments) );
+ return set;
+ }
+ },
+
+ // keepData is for internal use only--do not document
+ remove: function( selector, keepData ) {
+ for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
+ if ( !selector || jQuery.filter( selector, [ elem ] ).length ) {
+ if ( !keepData && elem.nodeType === 1 ) {
+ jQuery.cleanData( elem.getElementsByTagName("*") );
+ jQuery.cleanData( [ elem ] );
+ }
+
+ if ( elem.parentNode ) {
+ elem.parentNode.removeChild( elem );
+ }
+ }
+ }
+
+ return this;
+ },
+
+ empty: function() {
+ for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
+ // Remove element nodes and prevent memory leaks
+ if ( elem.nodeType === 1 ) {
+ jQuery.cleanData( elem.getElementsByTagName("*") );
+ }
+
+ // Remove any remaining nodes
+ while ( elem.firstChild ) {
+ elem.removeChild( elem.firstChild );
+ }
+ }
+
+ return this;
+ },
+
+ clone: function( dataAndEvents, deepDataAndEvents ) {
+ dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
+ deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;
+
+ return this.map( function () {
+ return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
+ });
+ },
+
+ html: function( value ) {
+ if ( value === undefined ) {
+ return this[0] && this[0].nodeType === 1 ?
+ this[0].innerHTML.replace(rinlinejQuery, "") :
+ null;
+
+ // See if we can take a shortcut and just use innerHTML
+ } else if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
+ (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
+ !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {
+
+ value = value.replace(rxhtmlTag, "<$1></$2>");
+
+ try {
+ for ( var i = 0, l = this.length; i < l; i++ ) {
+ // Remove element nodes and prevent memory leaks
+ if ( this[i].nodeType === 1 ) {
+ jQuery.cleanData( this[i].getElementsByTagName("*") );
+ this[i].innerHTML = value;
+ }
+ }
+
+ // If using innerHTML throws an exception, use the fallback method
+ } catch(e) {
+ this.empty().append( value );
+ }
+
+ } else if ( jQuery.isFunction( value ) ) {
+ this.each(function(i){
+ var self = jQuery( this );
+
+ self.html( value.call(this, i, self.html()) );
+ });
+
+ } else {
+ this.empty().append( value );
+ }
+
+ return this;
+ },
+
+ replaceWith: function( value ) {
+ if ( this[0] && this[0].parentNode ) {
+ // Make sure that the elements are removed from the DOM before they are inserted
+ // this can help fix replacing a parent with child elements
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function(i) {
+ var self = jQuery(this), old = self.html();
+ self.replaceWith( value.call( this, i, old ) );
+ });
+ }
+
+ if ( typeof value !== "string" ) {
+ value = jQuery( value ).detach();
+ }
+
+ return this.each(function() {
+ var next = this.nextSibling,
+ parent = this.parentNode;
+
+ jQuery( this ).remove();
+
+ if ( next ) {
+ jQuery(next).before( value );
+ } else {
+ jQuery(parent).append( value );
+ }
+ });
+ } else {
+ return this.length ?
+ this.pushStack( jQuery(jQuery.isFunction(value) ? value() : value), "replaceWith", value ) :
+ this;
+ }
+ },
+
+ detach: function( selector ) {
+ return this.remove( selector, true );
+ },
+
+ domManip: function( args, table, callback ) {
+ var results, first, fragment, parent,
+ value = args[0],
+ scripts = [];
+
+ // We can't cloneNode fragments that contain checked, in WebKit
+ if ( !jQuery.support.checkClone && arguments.length === 3 && typeof value === "string" && rchecked.test( value ) ) {
+ return this.each(function() {
+ jQuery(this).domManip( args, table, callback, true );
+ });
+ }
+
+ if ( jQuery.isFunction(value) ) {
+ return this.each(function(i) {
+ var self = jQuery(this);
+ args[0] = value.call(this, i, table ? self.html() : undefined);
+ self.domManip( args, table, callback );
+ });
+ }
+
+ if ( this[0] ) {
+ parent = value && value.parentNode;
+
+ // If we're in a fragment, just use that instead of building a new one
+ if ( jQuery.support.parentNode && parent && parent.nodeType === 11 && parent.childNodes.length === this.length ) {
+ results = { fragment: parent };
+
+ } else {
+ results = jQuery.buildFragment( args, this, scripts );
+ }
+
+ fragment = results.fragment;
+
+ if ( fragment.childNodes.length === 1 ) {
+ first = fragment = fragment.firstChild;
+ } else {
+ first = fragment.firstChild;
+ }
+
+ if ( first ) {
+ table = table && jQuery.nodeName( first, "tr" );
+
+ for ( var i = 0, l = this.length, lastIndex = l - 1; i < l; i++ ) {
+ callback.call(
+ table ?
+ root(this[i], first) :
+ this[i],
+ // Make sure that we do not leak memory by inadvertently discarding
+ // the original fragment (which might have attached data) instead of
+ // using it; in addition, use the original fragment object for the last
+ // item instead of first because it can end up being emptied incorrectly
+ // in certain situations (Bug #8070).
+ // Fragments from the fragment cache must always be cloned and never used
+ // in place.
+ results.cacheable || ( l > 1 && i < lastIndex ) ?
+ jQuery.clone( fragment, true, true ) :
+ fragment
+ );
+ }
+ }
+
+ if ( scripts.length ) {
+ jQuery.each( scripts, evalScript );
+ }
+ }
+
+ return this;
+ }
+});
+
+function root( elem, cur ) {
+ return jQuery.nodeName(elem, "table") ?
+ (elem.getElementsByTagName("tbody")[0] ||
+ elem.appendChild(elem.ownerDocument.createElement("tbody"))) :
+ elem;
+}
+
+function cloneCopyEvent( src, dest ) {
+
+ if ( dest.nodeType !== 1 || !jQuery.hasData( src ) ) {
+ return;
+ }
+
+ var type, i, l,
+ oldData = jQuery._data( src ),
+ curData = jQuery._data( dest, oldData ),
+ events = oldData.events;
+
+ if ( events ) {
+ delete curData.handle;
+ curData.events = {};
+
+ for ( type in events ) {
+ for ( i = 0, l = events[ type ].length; i < l; i++ ) {
+ jQuery.event.add( dest, type + ( events[ type ][ i ].namespace ? "." : "" ) + events[ type ][ i ].namespace, events[ type ][ i ], events[ type ][ i ].data );
+ }
+ }
+ }
+
+ // make the cloned public data object a copy from the original
+ if ( curData.data ) {
+ curData.data = jQuery.extend( {}, curData.data );
+ }
+}
+
+function cloneFixAttributes( src, dest ) {
+ var nodeName;
+
+ // We do not need to do anything for non-Elements
+ if ( dest.nodeType !== 1 ) {
+ return;
+ }
+
+ // clearAttributes removes the attributes, which we don't want,
+ // but also removes the attachEvent events, which we *do* want
+ if ( dest.clearAttributes ) {
+ dest.clearAttributes();
+ }
+
+ // mergeAttributes, in contrast, only merges back on the
+ // original attributes, not the events
+ if ( dest.mergeAttributes ) {
+ dest.mergeAttributes( src );
+ }
+
+ nodeName = dest.nodeName.toLowerCase();
+
+ // IE6-8 fail to clone children inside object elements that use
+ // the proprietary classid attribute value (rather than the type
+ // attribute) to identify the type of content to display
+ if ( nodeName === "object" ) {
+ dest.outerHTML = src.outerHTML;
+
+ } else if ( nodeName === "input" && (src.type === "checkbox" || src.type === "radio") ) {
+ // IE6-8 fails to persist the checked state of a cloned checkbox
+ // or radio button. Worse, IE6-7 fail to give the cloned element
+ // a checked appearance if the defaultChecked value isn't also set
+ if ( src.checked ) {
+ dest.defaultChecked = dest.checked = src.checked;
+ }
+
+ // IE6-7 get confused and end up setting the value of a cloned
+ // checkbox/radio button to an empty string instead of "on"
+ if ( dest.value !== src.value ) {
+ dest.value = src.value;
+ }
+
+ // IE6-8 fails to return the selected option to the default selected
+ // state when cloning options
+ } else if ( nodeName === "option" ) {
+ dest.selected = src.defaultSelected;
+
+ // IE6-8 fails to set the defaultValue to the correct value when
+ // cloning other types of input fields
+ } else if ( nodeName === "input" || nodeName === "textarea" ) {
+ dest.defaultValue = src.defaultValue;
+ }
+
+ // Event data gets referenced instead of copied if the expando
+ // gets copied too
+ dest.removeAttribute( jQuery.expando );
+}
+
+jQuery.buildFragment = function( args, nodes, scripts ) {
+ var fragment, cacheable, cacheresults, doc,
+ first = args[ 0 ];
+
+ // nodes may contain either an explicit document object,
+ // a jQuery collection or context object.
+ // If nodes[0] contains a valid object to assign to doc
+ if ( nodes && nodes[0] ) {
+ doc = nodes[0].ownerDocument || nodes[0];
+ }
+
+ // Ensure that an attr object doesn't incorrectly stand in as a document object
+ // Chrome and Firefox seem to allow this to occur and will throw exception
+ // Fixes #8950
+ if ( !doc.createDocumentFragment ) {
+ doc = document;
+ }
+
+ // Only cache "small" (1/2 KB) HTML strings that are associated with the main document
+ // Cloning options loses the selected state, so don't cache them
+ // IE 6 doesn't like it when you put <object> or <embed> elements in a fragment
+ // Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache
+ // Lastly, IE6,7,8 will not correctly reuse cached fragments that were created from unknown elems #10501
+ if ( args.length === 1 && typeof first === "string" && first.length < 512 && doc === document &&
+ first.charAt(0) === "<" && !rnocache.test( first ) &&
+ (jQuery.support.checkClone || !rchecked.test( first )) &&
+ (jQuery.support.html5Clone || !rnoshimcache.test( first )) ) {
+
+ cacheable = true;
+
+ cacheresults = jQuery.fragments[ first ];
+ if ( cacheresults && cacheresults !== 1 ) {
+ fragment = cacheresults;
+ }
+ }
+
+ if ( !fragment ) {
+ fragment = doc.createDocumentFragment();
+ jQuery.clean( args, doc, fragment, scripts );
+ }
+
+ if ( cacheable ) {
+ jQuery.fragments[ first ] = cacheresults ? fragment : 1;
+ }
+
+ return { fragment: fragment, cacheable: cacheable };
+};
+
+jQuery.fragments = {};
+
+jQuery.each({
+ appendTo: "append",
+ prependTo: "prepend",
+ insertBefore: "before",
+ insertAfter: "after",
+ replaceAll: "replaceWith"
+}, function( name, original ) {
+ jQuery.fn[ name ] = function( selector ) {
+ var ret = [],
+ insert = jQuery( selector ),
+ parent = this.length === 1 && this[0].parentNode;
+
+ if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
+ insert[ original ]( this[0] );
+ return this;
+
+ } else {
+ for ( var i = 0, l = insert.length; i < l; i++ ) {
+ var elems = ( i > 0 ? this.clone(true) : this ).get();
+ jQuery( insert[i] )[ original ]( elems );
+ ret = ret.concat( elems );
+ }
+
+ return this.pushStack( ret, name, insert.selector );
+ }
+ };
+});
+
+function getAll( elem ) {
+ if ( typeof elem.getElementsByTagName !== "undefined" ) {
+ return elem.getElementsByTagName( "*" );
+
+ } else if ( typeof elem.querySelectorAll !== "undefined" ) {
+ return elem.querySelectorAll( "*" );
+
+ } else {
+ return [];
+ }
+}
+
+// Used in clean, fixes the defaultChecked property
+function fixDefaultChecked( elem ) {
+ if ( elem.type === "checkbox" || elem.type === "radio" ) {
+ elem.defaultChecked = elem.checked;
+ }
+}
+// Finds all inputs and passes them to fixDefaultChecked
+function findInputs( elem ) {
+ var nodeName = ( elem.nodeName || "" ).toLowerCase();
+ if ( nodeName === "input" ) {
+ fixDefaultChecked( elem );
+ // Skip scripts, get other children
+ } else if ( nodeName !== "script" && typeof elem.getElementsByTagName !== "undefined" ) {
+ jQuery.grep( elem.getElementsByTagName("input"), fixDefaultChecked );
+ }
+}
+
+// Derived From: http://www.iecss.com/shimprove/javascript/shimprove.1-0-1.js
+function shimCloneNode( elem ) {
+ var div = document.createElement( "div" );
+ safeFragment.appendChild( div );
+
+ div.innerHTML = elem.outerHTML;
+ return div.firstChild;
+}
+
+jQuery.extend({
+ clone: function( elem, dataAndEvents, deepDataAndEvents ) {
+ var srcElements,
+ destElements,
+ i,
+ // IE<=8 does not properly clone detached, unknown element nodes
+ clone = jQuery.support.html5Clone || !rnoshimcache.test( "<" + elem.nodeName ) ?
+ elem.cloneNode( true ) :
+ shimCloneNode( elem );
+
+ if ( (!jQuery.support.noCloneEvent || !jQuery.support.noCloneChecked) &&
+ (elem.nodeType === 1 || elem.nodeType === 11) && !jQuery.isXMLDoc(elem) ) {
+ // IE copies events bound via attachEvent when using cloneNode.
+ // Calling detachEvent on the clone will also remove the events
+ // from the original. In order to get around this, we use some
+ // proprietary methods to clear the events. Thanks to MooTools
+ // guys for this hotness.
+
+ cloneFixAttributes( elem, clone );
+
+ // Using Sizzle here is crazy slow, so we use getElementsByTagName instead
+ srcElements = getAll( elem );
+ destElements = getAll( clone );
+
+ // Weird iteration because IE will replace the length property
+ // with an element if you are cloning the body and one of the
+ // elements on the page has a name or id of "length"
+ for ( i = 0; srcElements[i]; ++i ) {
+ // Ensure that the destination node is not null; Fixes #9587
+ if ( destElements[i] ) {
+ cloneFixAttributes( srcElements[i], destElements[i] );
+ }
+ }
+ }
+
+ // Copy the events from the original to the clone
+ if ( dataAndEvents ) {
+ cloneCopyEvent( elem, clone );
+
+ if ( deepDataAndEvents ) {
+ srcElements = getAll( elem );
+ destElements = getAll( clone );
+
+ for ( i = 0; srcElements[i]; ++i ) {
+ cloneCopyEvent( srcElements[i], destElements[i] );
+ }
+ }
+ }
+
+ srcElements = destElements = null;
+
+ // Return the cloned set
+ return clone;
+ },
+
+ clean: function( elems, context, fragment, scripts ) {
+ var checkScriptType;
+
+ context = context || document;
+
+ // !context.createElement fails in IE with an error but returns typeof 'object'
+ if ( typeof context.createElement === "undefined" ) {
+ context = context.ownerDocument || context[0] && context[0].ownerDocument || document;
+ }
+
+ var ret = [], j;
+
+ for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
+ if ( typeof elem === "number" ) {
+ elem += "";
+ }
+
+ if ( !elem ) {
+ continue;
+ }
+
+ // Convert html string into DOM nodes
+ if ( typeof elem === "string" ) {
+ if ( !rhtml.test( elem ) ) {
+ elem = context.createTextNode( elem );
+ } else {
+ // Fix "XHTML"-style tags in all browsers
+ elem = elem.replace(rxhtmlTag, "<$1></$2>");
+
+ // Trim whitespace, otherwise indexOf won't work as expected
+ var tag = ( rtagName.exec( elem ) || ["", ""] )[1].toLowerCase(),
+ wrap = wrapMap[ tag ] || wrapMap._default,
+ depth = wrap[0],
+ div = context.createElement("div");
+
+ // Append wrapper element to unknown element safe doc fragment
+ if ( context === document ) {
+ // Use the fragment we've already created for this document
+ safeFragment.appendChild( div );
+ } else {
+ // Use a fragment created with the owner document
+ createSafeFragment( context ).appendChild( div );
+ }
+
+ // Go to html and back, then peel off extra wrappers
+ div.innerHTML = wrap[1] + elem + wrap[2];
+
+ // Move to the right depth
+ while ( depth-- ) {
+ div = div.lastChild;
+ }
+
+ // Remove IE's autoinserted <tbody> from table fragments
+ if ( !jQuery.support.tbody ) {
+
+ // String was a <table>, *may* have spurious <tbody>
+ var hasBody = rtbody.test(elem),
+ tbody = tag === "table" && !hasBody ?
+ div.firstChild && div.firstChild.childNodes :
+
+ // String was a bare <thead> or <tfoot>
+ wrap[1] === "<table>" && !hasBody ?
+ div.childNodes :
+ [];
+
+ for ( j = tbody.length - 1; j >= 0 ; --j ) {
+ if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
+ tbody[ j ].parentNode.removeChild( tbody[ j ] );
+ }
+ }
+ }
+
+ // IE completely kills leading whitespace when innerHTML is used
+ if ( !jQuery.support.leadingWhitespace && rleadingWhitespace.test( elem ) ) {
+ div.insertBefore( context.createTextNode( rleadingWhitespace.exec(elem)[0] ), div.firstChild );
+ }
+
+ elem = div.childNodes;
+ }
+ }
+
+ // Resets defaultChecked for any radios and checkboxes
+ // about to be appended to the DOM in IE 6/7 (#8060)
+ var len;
+ if ( !jQuery.support.appendChecked ) {
+ if ( elem[0] && typeof (len = elem.length) === "number" ) {
+ for ( j = 0; j < len; j++ ) {
+ findInputs( elem[j] );
+ }
+ } else {
+ findInputs( elem );
+ }
+ }
+
+ if ( elem.nodeType ) {
+ ret.push( elem );
+ } else {
+ ret = jQuery.merge( ret, elem );
+ }
+ }
+
+ if ( fragment ) {
+ checkScriptType = function( elem ) {
+ return !elem.type || rscriptType.test( elem.type );
+ };
+ for ( i = 0; ret[i]; i++ ) {
+ if ( scripts && jQuery.nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
+ scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
+
+ } else {
+ if ( ret[i].nodeType === 1 ) {
+ var jsTags = jQuery.grep( ret[i].getElementsByTagName( "script" ), checkScriptType );
+
+ ret.splice.apply( ret, [i + 1, 0].concat( jsTags ) );
+ }
+ fragment.appendChild( ret[i] );
+ }
+ }
+ }
+
+ return ret;
+ },
+
+ cleanData: function( elems ) {
+ var data, id,
+ cache = jQuery.cache,
+ special = jQuery.event.special,
+ deleteExpando = jQuery.support.deleteExpando;
+
+ for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
+ if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {
+ continue;
+ }
+
+ id = elem[ jQuery.expando ];
+
+ if ( id ) {
+ data = cache[ id ];
+
+ if ( data && data.events ) {
+ for ( var type in data.events ) {
+ if ( special[ type ] ) {
+ jQuery.event.remove( elem, type );
+
+ // This is a shortcut to avoid jQuery.event.remove's overhead
+ } else {
+ jQuery.removeEvent( elem, type, data.handle );
+ }
+ }
+
+ // Null the DOM reference to avoid IE6/7/8 leak (#7054)
+ if ( data.handle ) {
+ data.handle.elem = null;
+ }
+ }
+
+ if ( deleteExpando ) {
+ delete elem[ jQuery.expando ];
+
+ } else if ( elem.removeAttribute ) {
+ elem.removeAttribute( jQuery.expando );
+ }
+
+ delete cache[ id ];
+ }
+ }
+ }
+});
+
+function evalScript( i, elem ) {
+ if ( elem.src ) {
+ jQuery.ajax({
+ url: elem.src,
+ async: false,
+ dataType: "script"
+ });
+ } else {
+ jQuery.globalEval( ( elem.text || elem.textContent || elem.innerHTML || "" ).replace( rcleanScript, "/*$0*/" ) );
+ }
+
+ if ( elem.parentNode ) {
+ elem.parentNode.removeChild( elem );
+ }
+}
+
+
+
+
+var ralpha = /alpha\([^)]*\)/i,
+ ropacity = /opacity=([^)]*)/,
+ // fixed for IE9, see #8346
+ rupper = /([A-Z]|^ms)/g,
+ rnumpx = /^-?\d+(?:px)?$/i,
+ rnum = /^-?\d/,
+ rrelNum = /^([\-+])=([\-+.\de]+)/,
+
+ cssShow = { position: "absolute", visibility: "hidden", display: "block" },
+ cssWidth = [ "Left", "Right" ],
+ cssHeight = [ "Top", "Bottom" ],
+ curCSS,
+
+ getComputedStyle,
+ currentStyle;
+
+jQuery.fn.css = function( name, value ) {
+ // Setting 'undefined' is a no-op
+ if ( arguments.length === 2 && value === undefined ) {
+ return this;
+ }
+
+ return jQuery.access( this, name, value, true, function( elem, name, value ) {
+ return value !== undefined ?
+ jQuery.style( elem, name, value ) :
+ jQuery.css( elem, name );
+ });
+};
+
+jQuery.extend({
+ // Add in style property hooks for overriding the default
+ // behavior of getting and setting a style property
+ cssHooks: {
+ opacity: {
+ get: function( elem, computed ) {
+ if ( computed ) {
+ // We should always get a number back from opacity
+ var ret = curCSS( elem, "opacity", "opacity" );
+ return ret === "" ? "1" : ret;
+
+ } else {
+ return elem.style.opacity;
+ }
+ }
+ }
+ },
+
+ // Exclude the following css properties to add px
+ cssNumber: {
+ "fillOpacity": true,
+ "fontWeight": true,
+ "lineHeight": true,
+ "opacity": true,
+ "orphans": true,
+ "widows": true,
+ "zIndex": true,
+ "zoom": true
+ },
+
+ // Add in properties whose names you wish to fix before
+ // setting or getting the value
+ cssProps: {
+ // normalize float css property
+ "float": jQuery.support.cssFloat ? "cssFloat" : "styleFloat"
+ },
+
+ // Get and set the style property on a DOM Node
+ style: function( elem, name, value, extra ) {
+ // Don't set styles on text and comment nodes
+ if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
+ return;
+ }
+
+ // Make sure that we're working with the right name
+ var ret, type, origName = jQuery.camelCase( name ),
+ style = elem.style, hooks = jQuery.cssHooks[ origName ];
+
+ name = jQuery.cssProps[ origName ] || origName;
+
+ // Check if we're setting a value
+ if ( value !== undefined ) {
+ type = typeof value;
+
+ // convert relative number strings (+= or -=) to relative numbers. #7345
+ if ( type === "string" && (ret = rrelNum.exec( value )) ) {
+ value = ( +( ret[1] + 1) * +ret[2] ) + parseFloat( jQuery.css( elem, name ) );
+ // Fixes bug #9237
+ type = "number";
+ }
+
+ // Make sure that NaN and null values aren't set. See: #7116
+ if ( value == null || type === "number" && isNaN( value ) ) {
+ return;
+ }
+
+ // If a number was passed in, add 'px' to the (except for certain CSS properties)
+ if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
+ value += "px";
+ }
+
+ // If a hook was provided, use that value, otherwise just set the specified value
+ if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value )) !== undefined ) {
+ // Wrapped to prevent IE from throwing errors when 'invalid' values are provided
+ // Fixes bug #5509
+ try {
+ style[ name ] = value;
+ } catch(e) {}
+ }
+
+ } else {
+ // If a hook was provided get the non-computed value from there
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
+ return ret;
+ }
+
+ // Otherwise just get the value from the style object
+ return style[ name ];
+ }
+ },
+
+ css: function( elem, name, extra ) {
+ var ret, hooks;
+
+ // Make sure that we're working with the right name
+ name = jQuery.camelCase( name );
+ hooks = jQuery.cssHooks[ name ];
+ name = jQuery.cssProps[ name ] || name;
+
+ // cssFloat needs a special treatment
+ if ( name === "cssFloat" ) {
+ name = "float";
+ }
+
+ // If a hook was provided get the computed value from there
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, true, extra )) !== undefined ) {
+ return ret;
+
+ // Otherwise, if a way to get the computed value exists, use that
+ } else if ( curCSS ) {
+ return curCSS( elem, name );
+ }
+ },
+
+ // A method for quickly swapping in/out CSS properties to get correct calculations
+ swap: function( elem, options, callback ) {
+ var old = {};
+
+ // Remember the old values, and insert the new ones
+ for ( var name in options ) {
+ old[ name ] = elem.style[ name ];
+ elem.style[ name ] = options[ name ];
+ }
+
+ callback.call( elem );
+
+ // Revert the old values
+ for ( name in options ) {
+ elem.style[ name ] = old[ name ];
+ }
+ }
+});
+
+// DEPRECATED, Use jQuery.css() instead
+jQuery.curCSS = jQuery.css;
+
+jQuery.each(["height", "width"], function( i, name ) {
+ jQuery.cssHooks[ name ] = {
+ get: function( elem, computed, extra ) {
+ var val;
+
+ if ( computed ) {
+ if ( elem.offsetWidth !== 0 ) {
+ return getWH( elem, name, extra );
+ } else {
+ jQuery.swap( elem, cssShow, function() {
+ val = getWH( elem, name, extra );
+ });
+ }
+
+ return val;
+ }
+ },
+
+ set: function( elem, value ) {
+ if ( rnumpx.test( value ) ) {
+ // ignore negative width and height values #1599
+ value = parseFloat( value );
+
+ if ( value >= 0 ) {
+ return value + "px";
+ }
+
+ } else {
+ return value;
+ }
+ }
+ };
+});
+
+if ( !jQuery.support.opacity ) {
+ jQuery.cssHooks.opacity = {
+ get: function( elem, computed ) {
+ // IE uses filters for opacity
+ return ropacity.test( (computed && elem.currentStyle ? elem.currentStyle.filter : elem.style.filter) || "" ) ?
+ ( parseFloat( RegExp.$1 ) / 100 ) + "" :
+ computed ? "1" : "";
+ },
+
+ set: function( elem, value ) {
+ var style = elem.style,
+ currentStyle = elem.currentStyle,
+ opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "",
+ filter = currentStyle && currentStyle.filter || style.filter || "";
+
+ // IE has trouble with opacity if it does not have layout
+ // Force it by setting the zoom level
+ style.zoom = 1;
+
+ // if setting opacity to 1, and no other filters exist - attempt to remove filter attribute #6652
+ if ( value >= 1 && jQuery.trim( filter.replace( ralpha, "" ) ) === "" ) {
+
+ // Setting style.filter to null, "" & " " still leave "filter:" in the cssText
+ // if "filter:" is present at all, clearType is disabled, we want to avoid this
+ // style.removeAttribute is IE Only, but so apparently is this code path...
+ style.removeAttribute( "filter" );
+
+ // if there there is no filter style applied in a css rule, we are done
+ if ( currentStyle && !currentStyle.filter ) {
+ return;
+ }
+ }
+
+ // otherwise, set new filter values
+ style.filter = ralpha.test( filter ) ?
+ filter.replace( ralpha, opacity ) :
+ filter + " " + opacity;
+ }
+ };
+}
+
+jQuery(function() {
+ // This hook cannot be added until DOM ready because the support test
+ // for it is not run until after DOM ready
+ if ( !jQuery.support.reliableMarginRight ) {
+ jQuery.cssHooks.marginRight = {
+ get: function( elem, computed ) {
+ // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
+ // Work around by temporarily setting element display to inline-block
+ var ret;
+ jQuery.swap( elem, { "display": "inline-block" }, function() {
+ if ( computed ) {
+ ret = curCSS( elem, "margin-right", "marginRight" );
+ } else {
+ ret = elem.style.marginRight;
+ }
+ });
+ return ret;
+ }
+ };
+ }
+});
+
+if ( document.defaultView && document.defaultView.getComputedStyle ) {
+ getComputedStyle = function( elem, name ) {
+ var ret, defaultView, computedStyle;
+
+ name = name.replace( rupper, "-$1" ).toLowerCase();
+
+ if ( (defaultView = elem.ownerDocument.defaultView) &&
+ (computedStyle = defaultView.getComputedStyle( elem, null )) ) {
+ ret = computedStyle.getPropertyValue( name );
+ if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) {
+ ret = jQuery.style( elem, name );
+ }
+ }
+
+ return ret;
+ };
+}
+
+if ( document.documentElement.currentStyle ) {
+ currentStyle = function( elem, name ) {
+ var left, rsLeft, uncomputed,
+ ret = elem.currentStyle && elem.currentStyle[ name ],
+ style = elem.style;
+
+ // Avoid setting ret to empty string here
+ // so we don't default to auto
+ if ( ret === null && style && (uncomputed = style[ name ]) ) {
+ ret = uncomputed;
+ }
+
+ // From the awesome hack by Dean Edwards
+ // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
+
+ // If we're not dealing with a regular pixel number
+ // but a number that has a weird ending, we need to convert it to pixels
+ if ( !rnumpx.test( ret ) && rnum.test( ret ) ) {
+
+ // Remember the original values
+ left = style.left;
+ rsLeft = elem.runtimeStyle && elem.runtimeStyle.left;
+
+ // Put in the new values to get a computed value out
+ if ( rsLeft ) {
+ elem.runtimeStyle.left = elem.currentStyle.left;
+ }
+ style.left = name === "fontSize" ? "1em" : ( ret || 0 );
+ ret = style.pixelLeft + "px";
+
+ // Revert the changed values
+ style.left = left;
+ if ( rsLeft ) {
+ elem.runtimeStyle.left = rsLeft;
+ }
+ }
+
+ return ret === "" ? "auto" : ret;
+ };
+}
+
+curCSS = getComputedStyle || currentStyle;
+
+function getWH( elem, name, extra ) {
+
+ // Start with offset property
+ var val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
+ which = name === "width" ? cssWidth : cssHeight,
+ i = 0,
+ len = which.length;
+
+ if ( val > 0 ) {
+ if ( extra !== "border" ) {
+ for ( ; i < len; i++ ) {
+ if ( !extra ) {
+ val -= parseFloat( jQuery.css( elem, "padding" + which[ i ] ) ) || 0;
+ }
+ if ( extra === "margin" ) {
+ val += parseFloat( jQuery.css( elem, extra + which[ i ] ) ) || 0;
+ } else {
+ val -= parseFloat( jQuery.css( elem, "border" + which[ i ] + "Width" ) ) || 0;
+ }
+ }
+ }
+
+ return val + "px";
+ }
+
+ // Fall back to computed then uncomputed css if necessary
+ val = curCSS( elem, name, name );
+ if ( val < 0 || val == null ) {
+ val = elem.style[ name ] || 0;
+ }
+ // Normalize "", auto, and prepare for extra
+ val = parseFloat( val ) || 0;
+
+ // Add padding, border, margin
+ if ( extra ) {
+ for ( ; i < len; i++ ) {
+ val += parseFloat( jQuery.css( elem, "padding" + which[ i ] ) ) || 0;
+ if ( extra !== "padding" ) {
+ val += parseFloat( jQuery.css( elem, "border" + which[ i ] + "Width" ) ) || 0;
+ }
+ if ( extra === "margin" ) {
+ val += parseFloat( jQuery.css( elem, extra + which[ i ] ) ) || 0;
+ }
+ }
+ }
+
+ return val + "px";
+}
+
+if ( jQuery.expr && jQuery.expr.filters ) {
+ jQuery.expr.filters.hidden = function( elem ) {
+ var width = elem.offsetWidth,
+ height = elem.offsetHeight;
+
+ return ( width === 0 && height === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
+ };
+
+ jQuery.expr.filters.visible = function( elem ) {
+ return !jQuery.expr.filters.hidden( elem );
+ };
+}
+
+
+
+
+var r20 = /%20/g,
+ rbracket = /\[\]$/,
+ rCRLF = /\r?\n/g,
+ rhash = /#.*$/,
+ rheaders = /^(.*?):[ \t]*([^\r\n]*)\r?$/mg, // IE leaves an \r character at EOL
+ rinput = /^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,
+ // #7653, #8125, #8152: local protocol detection
+ rlocalProtocol = /^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,
+ rnoContent = /^(?:GET|HEAD)$/,
+ rprotocol = /^\/\//,
+ rquery = /\?/,
+ rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+ rselectTextarea = /^(?:select|textarea)/i,
+ rspacesAjax = /\s+/,
+ rts = /([?&])_=[^&]*/,
+ rurl = /^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,
+
+ // Keep a copy of the old load method
+ _load = jQuery.fn.load,
+
+ /* Prefilters
+ * 1) They are useful to introduce custom dataTypes (see ajax/jsonp.js for an example)
+ * 2) These are called:
+ * - BEFORE asking for a transport
+ * - AFTER param serialization (s.data is a string if s.processData is true)
+ * 3) key is the dataType
+ * 4) the catchall symbol "*" can be used
+ * 5) execution will start with transport dataType and THEN continue down to "*" if needed
+ */
+ prefilters = {},
+
+ /* Transports bindings
+ * 1) key is the dataType
+ * 2) the catchall symbol "*" can be used
+ * 3) selection will start with transport dataType and THEN go to "*" if needed
+ */
+ transports = {},
+
+ // Document location
+ ajaxLocation,
+
+ // Document location segments
+ ajaxLocParts,
+
+ // Avoid comment-prolog char sequence (#10098); must appease lint and evade compression
+ allTypes = ["*/"] + ["*"];
+
+// #8138, IE may throw an exception when accessing
+// a field from window.location if document.domain has been set
+try {
+ ajaxLocation = location.href;
+} catch( e ) {
+ // Use the href attribute of an A element
+ // since IE will modify it given document.location
+ ajaxLocation = document.createElement( "a" );
+ ajaxLocation.href = "";
+ ajaxLocation = ajaxLocation.href;
+}
+
+// Segment location into parts
+ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || [];
+
+// Base "constructor" for jQuery.ajaxPrefilter and jQuery.ajaxTransport
+function addToPrefiltersOrTransports( structure ) {
+
+ // dataTypeExpression is optional and defaults to "*"
+ return function( dataTypeExpression, func ) {
+
+ if ( typeof dataTypeExpression !== "string" ) {
+ func = dataTypeExpression;
+ dataTypeExpression = "*";
+ }
+
+ if ( jQuery.isFunction( func ) ) {
+ var dataTypes = dataTypeExpression.toLowerCase().split( rspacesAjax ),
+ i = 0,
+ length = dataTypes.length,
+ dataType,
+ list,
+ placeBefore;
+
+ // For each dataType in the dataTypeExpression
+ for ( ; i < length; i++ ) {
+ dataType = dataTypes[ i ];
+ // We control if we're asked to add before
+ // any existing element
+ placeBefore = /^\+/.test( dataType );
+ if ( placeBefore ) {
+ dataType = dataType.substr( 1 ) || "*";
+ }
+ list = structure[ dataType ] = structure[ dataType ] || [];
+ // then we add to the structure accordingly
+ list[ placeBefore ? "unshift" : "push" ]( func );
+ }
+ }
+ };
+}
+
+// Base inspection function for prefilters and transports
+function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR,
+ dataType /* internal */, inspected /* internal */ ) {
+
+ dataType = dataType || options.dataTypes[ 0 ];
+ inspected = inspected || {};
+
+ inspected[ dataType ] = true;
+
+ var list = structure[ dataType ],
+ i = 0,
+ length = list ? list.length : 0,
+ executeOnly = ( structure === prefilters ),
+ selection;
+
+ for ( ; i < length && ( executeOnly || !selection ); i++ ) {
+ selection = list[ i ]( options, originalOptions, jqXHR );
+ // If we got redirected to another dataType
+ // we try there if executing only and not done already
+ if ( typeof selection === "string" ) {
+ if ( !executeOnly || inspected[ selection ] ) {
+ selection = undefined;
+ } else {
+ options.dataTypes.unshift( selection );
+ selection = inspectPrefiltersOrTransports(
+ structure, options, originalOptions, jqXHR, selection, inspected );
+ }
+ }
+ }
+ // If we're only executing or nothing was selected
+ // we try the catchall dataType if not done already
+ if ( ( executeOnly || !selection ) && !inspected[ "*" ] ) {
+ selection = inspectPrefiltersOrTransports(
+ structure, options, originalOptions, jqXHR, "*", inspected );
+ }
+ // unnecessary when only executing (prefilters)
+ // but it'll be ignored by the caller in that case
+ return selection;
+}
+
+// A special extend for ajax options
+// that takes "flat" options (not to be deep extended)
+// Fixes #9887
+function ajaxExtend( target, src ) {
+ var key, deep,
+ flatOptions = jQuery.ajaxSettings.flatOptions || {};
+ for ( key in src ) {
+ if ( src[ key ] !== undefined ) {
+ ( flatOptions[ key ] ? target : ( deep || ( deep = {} ) ) )[ key ] = src[ key ];
+ }
+ }
+ if ( deep ) {
+ jQuery.extend( true, target, deep );
+ }
+}
+
+jQuery.fn.extend({
+ load: function( url, params, callback ) {
+ if ( typeof url !== "string" && _load ) {
+ return _load.apply( this, arguments );
+
+ // Don't do a request if no elements are being requested
+ } else if ( !this.length ) {
+ return this;
+ }
+
+ var off = url.indexOf( " " );
+ if ( off >= 0 ) {
+ var selector = url.slice( off, url.length );
+ url = url.slice( 0, off );
+ }
+
+ // Default to a GET request
+ var type = "GET";
+
+ // If the second parameter was provided
+ if ( params ) {
+ // If it's a function
+ if ( jQuery.isFunction( params ) ) {
+ // We assume that it's the callback
+ callback = params;
+ params = undefined;
+
+ // Otherwise, build a param string
+ } else if ( typeof params === "object" ) {
+ params = jQuery.param( params, jQuery.ajaxSettings.traditional );
+ type = "POST";
+ }
+ }
+
+ var self = this;
+
+ // Request the remote document
+ jQuery.ajax({
+ url: url,
+ type: type,
+ dataType: "html",
+ data: params,
+ // Complete callback (responseText is used internally)
+ complete: function( jqXHR, status, responseText ) {
+ // Store the response as specified by the jqXHR object
+ responseText = jqXHR.responseText;
+ // If successful, inject the HTML into all the matched elements
+ if ( jqXHR.isResolved() ) {
+ // #4825: Get the actual response in case
+ // a dataFilter is present in ajaxSettings
+ jqXHR.done(function( r ) {
+ responseText = r;
+ });
+ // See if a selector was specified
+ self.html( selector ?
+ // Create a dummy div to hold the results
+ jQuery("<div>")
+ // inject the contents of the document in, removing the scripts
+ // to avoid any 'Permission Denied' errors in IE
+ .append(responseText.replace(rscript, ""))
+
+ // Locate the specified elements
+ .find(selector) :
+
+ // If not, just inject the full result
+ responseText );
+ }
+
+ if ( callback ) {
+ self.each( callback, [ responseText, status, jqXHR ] );
+ }
+ }
+ });
+
+ return this;
+ },
+
+ serialize: function() {
+ return jQuery.param( this.serializeArray() );
+ },
+
+ serializeArray: function() {
+ return this.map(function(){
+ return this.elements ? jQuery.makeArray( this.elements ) : this;
+ })
+ .filter(function(){
+ return this.name && !this.disabled &&
+ ( this.checked || rselectTextarea.test( this.nodeName ) ||
+ rinput.test( this.type ) );
+ })
+ .map(function( i, elem ){
+ var val = jQuery( this ).val();
+
+ return val == null ?
+ null :
+ jQuery.isArray( val ) ?
+ jQuery.map( val, function( val, i ){
+ return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+ }) :
+ { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+ }).get();
+ }
+});
+
+// Attach a bunch of functions for handling common AJAX events
+jQuery.each( "ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split( " " ), function( i, o ){
+ jQuery.fn[ o ] = function( f ){
+ return this.on( o, f );
+ };
+});
+
+jQuery.each( [ "get", "post" ], function( i, method ) {
+ jQuery[ method ] = function( url, data, callback, type ) {
+ // shift arguments if data argument was omitted
+ if ( jQuery.isFunction( data ) ) {
+ type = type || callback;
+ callback = data;
+ data = undefined;
+ }
+
+ return jQuery.ajax({
+ type: method,
+ url: url,
+ data: data,
+ success: callback,
+ dataType: type
+ });
+ };
+});
+
+jQuery.extend({
+
+ getScript: function( url, callback ) {
+ return jQuery.get( url, undefined, callback, "script" );
+ },
+
+ getJSON: function( url, data, callback ) {
+ return jQuery.get( url, data, callback, "json" );
+ },
+
+ // Creates a full fledged settings object into target
+ // with both ajaxSettings and settings fields.
+ // If target is omitted, writes into ajaxSettings.
+ ajaxSetup: function( target, settings ) {
+ if ( settings ) {
+ // Building a settings object
+ ajaxExtend( target, jQuery.ajaxSettings );
+ } else {
+ // Extending ajaxSettings
+ settings = target;
+ target = jQuery.ajaxSettings;
+ }
+ ajaxExtend( target, settings );
+ return target;
+ },
+
+ ajaxSettings: {
+ url: ajaxLocation,
+ isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),
+ global: true,
+ type: "GET",
+ contentType: "application/x-www-form-urlencoded",
+ processData: true,
+ async: true,
+ /*
+ timeout: 0,
+ data: null,
+ dataType: null,
+ username: null,
+ password: null,
+ cache: null,
+ traditional: false,
+ headers: {},
+ */
+
+ accepts: {
+ xml: "application/xml, text/xml",
+ html: "text/html",
+ text: "text/plain",
+ json: "application/json, text/javascript",
+ "*": allTypes
+ },
+
+ contents: {
+ xml: /xml/,
+ html: /html/,
+ json: /json/
+ },
+
+ responseFields: {
+ xml: "responseXML",
+ text: "responseText"
+ },
+
+ // List of data converters
+ // 1) key format is "source_type destination_type" (a single space in-between)
+ // 2) the catchall symbol "*" can be used for source_type
+ converters: {
+
+ // Convert anything to text
+ "* text": window.String,
+
+ // Text to html (true = no transformation)
+ "text html": true,
+
+ // Evaluate text as a json expression
+ "text json": jQuery.parseJSON,
+
+ // Parse text as xml
+ "text xml": jQuery.parseXML
+ },
+
+ // For options that shouldn't be deep extended:
+ // you can add your own custom options here if
+ // and when you create one that shouldn't be
+ // deep extended (see ajaxExtend)
+ flatOptions: {
+ context: true,
+ url: true
+ }
+ },
+
+ ajaxPrefilter: addToPrefiltersOrTransports( prefilters ),
+ ajaxTransport: addToPrefiltersOrTransports( transports ),
+
+ // Main method
+ ajax: function( url, options ) {
+
+ // If url is an object, simulate pre-1.5 signature
+ if ( typeof url === "object" ) {
+ options = url;
+ url = undefined;
+ }
+
+ // Force options to be an object
+ options = options || {};
+
+ var // Create the final options object
+ s = jQuery.ajaxSetup( {}, options ),
+ // Callbacks context
+ callbackContext = s.context || s,
+ // Context for global events
+ // It's the callbackContext if one was provided in the options
+ // and if it's a DOM node or a jQuery collection
+ globalEventContext = callbackContext !== s &&
+ ( callbackContext.nodeType || callbackContext instanceof jQuery ) ?
+ jQuery( callbackContext ) : jQuery.event,
+ // Deferreds
+ deferred = jQuery.Deferred(),
+ completeDeferred = jQuery.Callbacks( "once memory" ),
+ // Status-dependent callbacks
+ statusCode = s.statusCode || {},
+ // ifModified key
+ ifModifiedKey,
+ // Headers (they are sent all at once)
+ requestHeaders = {},
+ requestHeadersNames = {},
+ // Response headers
+ responseHeadersString,
+ responseHeaders,
+ // transport
+ transport,
+ // timeout handle
+ timeoutTimer,
+ // Cross-domain detection vars
+ parts,
+ // The jqXHR state
+ state = 0,
+ // To know if global events are to be dispatched
+ fireGlobals,
+ // Loop variable
+ i,
+ // Fake xhr
+ jqXHR = {
+
+ readyState: 0,
+
+ // Caches the header
+ setRequestHeader: function( name, value ) {
+ if ( !state ) {
+ var lname = name.toLowerCase();
+ name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name;
+ requestHeaders[ name ] = value;
+ }
+ return this;
+ },
+
+ // Raw string
+ getAllResponseHeaders: function() {
+ return state === 2 ? responseHeadersString : null;
+ },
+
+ // Builds headers hashtable if needed
+ getResponseHeader: function( key ) {
+ var match;
+ if ( state === 2 ) {
+ if ( !responseHeaders ) {
+ responseHeaders = {};
+ while( ( match = rheaders.exec( responseHeadersString ) ) ) {
+ responseHeaders[ match[1].toLowerCase() ] = match[ 2 ];
+ }
+ }
+ match = responseHeaders[ key.toLowerCase() ];
+ }
+ return match === undefined ? null : match;
+ },
+
+ // Overrides response content-type header
+ overrideMimeType: function( type ) {
+ if ( !state ) {
+ s.mimeType = type;
+ }
+ return this;
+ },
+
+ // Cancel the request
+ abort: function( statusText ) {
+ statusText = statusText || "abort";
+ if ( transport ) {
+ transport.abort( statusText );
+ }
+ done( 0, statusText );
+ return this;
+ }
+ };
+
+ // Callback for when everything is done
+ // It is defined here because jslint complains if it is declared
+ // at the end of the function (which would be more logical and readable)
+ function done( status, nativeStatusText, responses, headers ) {
+
+ // Called once
+ if ( state === 2 ) {
+ return;
+ }
+
+ // State is "done" now
+ state = 2;
+
+ // Clear timeout if it exists
+ if ( timeoutTimer ) {
+ clearTimeout( timeoutTimer );
+ }
+
+ // Dereference transport for early garbage collection
+ // (no matter how long the jqXHR object will be used)
+ transport = undefined;
+
+ // Cache response headers
+ responseHeadersString = headers || "";
+
+ // Set readyState
+ jqXHR.readyState = status > 0 ? 4 : 0;
+
+ var isSuccess,
+ success,
+ error,
+ statusText = nativeStatusText,
+ response = responses ? ajaxHandleResponses( s, jqXHR, responses ) : undefined,
+ lastModified,
+ etag;
+
+ // If successful, handle type chaining
+ if ( status >= 200 && status < 300 || status === 304 ) {
+
+ // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+ if ( s.ifModified ) {
+
+ if ( ( lastModified = jqXHR.getResponseHeader( "Last-Modified" ) ) ) {
+ jQuery.lastModified[ ifModifiedKey ] = lastModified;
+ }
+ if ( ( etag = jqXHR.getResponseHeader( "Etag" ) ) ) {
+ jQuery.etag[ ifModifiedKey ] = etag;
+ }
+ }
+
+ // If not modified
+ if ( status === 304 ) {
+
+ statusText = "notmodified";
+ isSuccess = true;
+
+ // If we have data
+ } else {
+
+ try {
+ success = ajaxConvert( s, response );
+ statusText = "success";
+ isSuccess = true;
+ } catch(e) {
+ // We have a parsererror
+ statusText = "parsererror";
+ error = e;
+ }
+ }
+ } else {
+ // We extract error from statusText
+ // then normalize statusText and status for non-aborts
+ error = statusText;
+ if ( !statusText || status ) {
+ statusText = "error";
+ if ( status < 0 ) {
+ status = 0;
+ }
+ }
+ }
+
+ // Set data for the fake xhr object
+ jqXHR.status = status;
+ jqXHR.statusText = "" + ( nativeStatusText || statusText );
+
+ // Success/Error
+ if ( isSuccess ) {
+ deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
+ } else {
+ deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
+ }
+
+ // Status-dependent callbacks
+ jqXHR.statusCode( statusCode );
+ statusCode = undefined;
+
+ if ( fireGlobals ) {
+ globalEventContext.trigger( "ajax" + ( isSuccess ? "Success" : "Error" ),
+ [ jqXHR, s, isSuccess ? success : error ] );
+ }
+
+ // Complete
+ completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );
+
+ if ( fireGlobals ) {
+ globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
+ // Handle the global AJAX counter
+ if ( !( --jQuery.active ) ) {
+ jQuery.event.trigger( "ajaxStop" );
+ }
+ }
+ }
+
+ // Attach deferreds
+ deferred.promise( jqXHR );
+ jqXHR.success = jqXHR.done;
+ jqXHR.error = jqXHR.fail;
+ jqXHR.complete = completeDeferred.add;
+
+ // Status-dependent callbacks
+ jqXHR.statusCode = function( map ) {
+ if ( map ) {
+ var tmp;
+ if ( state < 2 ) {
+ for ( tmp in map ) {
+ statusCode[ tmp ] = [ statusCode[tmp], map[tmp] ];
+ }
+ } else {
+ tmp = map[ jqXHR.status ];
+ jqXHR.then( tmp, tmp );
+ }
+ }
+ return this;
+ };
+
+ // Remove hash character (#7531: and string promotion)
+ // Add protocol if not provided (#5866: IE7 issue with protocol-less urls)
+ // We also use the url parameter if available
+ s.url = ( ( url || s.url ) + "" ).replace( rhash, "" ).replace( rprotocol, ajaxLocParts[ 1 ] + "//" );
+
+ // Extract dataTypes list
+ s.dataTypes = jQuery.trim( s.dataType || "*" ).toLowerCase().split( rspacesAjax );
+
+ // Determine if a cross-domain request is in order
+ if ( s.crossDomain == null ) {
+ parts = rurl.exec( s.url.toLowerCase() );
+ s.crossDomain = !!( parts &&
+ ( parts[ 1 ] != ajaxLocParts[ 1 ] || parts[ 2 ] != ajaxLocParts[ 2 ] ||
+ ( parts[ 3 ] || ( parts[ 1 ] === "http:" ? 80 : 443 ) ) !=
+ ( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? 80 : 443 ) ) )
+ );
+ }
+
+ // Convert data if not already a string
+ if ( s.data && s.processData && typeof s.data !== "string" ) {
+ s.data = jQuery.param( s.data, s.traditional );
+ }
+
+ // Apply prefilters
+ inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );
+
+ // If request was aborted inside a prefiler, stop there
+ if ( state === 2 ) {
+ return false;
+ }
+
+ // We can fire global events as of now if asked to
+ fireGlobals = s.global;
+
+ // Uppercase the type
+ s.type = s.type.toUpperCase();
+
+ // Determine if request has content
+ s.hasContent = !rnoContent.test( s.type );
+
+ // Watch for a new set of requests
+ if ( fireGlobals && jQuery.active++ === 0 ) {
+ jQuery.event.trigger( "ajaxStart" );
+ }
+
+ // More options handling for requests with no content
+ if ( !s.hasContent ) {
+
+ // If data is available, append data to url
+ if ( s.data ) {
+ s.url += ( rquery.test( s.url ) ? "&" : "?" ) + s.data;
+ // #9682: remove data so that it's not used in an eventual retry
+ delete s.data;
+ }
+
+ // Get ifModifiedKey before adding the anti-cache parameter
+ ifModifiedKey = s.url;
+
+ // Add anti-cache in url if needed
+ if ( s.cache === false ) {
+
+ var ts = jQuery.now(),
+ // try replacing _= if it is there
+ ret = s.url.replace( rts, "$1_=" + ts );
+
+ // if nothing was replaced, add timestamp to the end
+ s.url = ret + ( ( ret === s.url ) ? ( rquery.test( s.url ) ? "&" : "?" ) + "_=" + ts : "" );
+ }
+ }
+
+ // Set the correct header, if data is being sent
+ if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
+ jqXHR.setRequestHeader( "Content-Type", s.contentType );
+ }
+
+ // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+ if ( s.ifModified ) {
+ ifModifiedKey = ifModifiedKey || s.url;
+ if ( jQuery.lastModified[ ifModifiedKey ] ) {
+ jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ ifModifiedKey ] );
+ }
+ if ( jQuery.etag[ ifModifiedKey ] ) {
+ jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ ifModifiedKey ] );
+ }
+ }
+
+ // Set the Accepts header for the server, depending on the dataType
+ jqXHR.setRequestHeader(
+ "Accept",
+ s.dataTypes[ 0 ] && s.accepts[ s.dataTypes[0] ] ?
+ s.accepts[ s.dataTypes[0] ] + ( s.dataTypes[ 0 ] !== "*" ? ", " + allTypes + "; q=0.01" : "" ) :
+ s.accepts[ "*" ]
+ );
+
+ // Check for headers option
+ for ( i in s.headers ) {
+ jqXHR.setRequestHeader( i, s.headers[ i ] );
+ }
+
+ // Allow custom headers/mimetypes and early abort
+ if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) {
+ // Abort if not done already
+ jqXHR.abort();
+ return false;
+
+ }
+
+ // Install callbacks on deferreds
+ for ( i in { success: 1, error: 1, complete: 1 } ) {
+ jqXHR[ i ]( s[ i ] );
+ }
+
+ // Get transport
+ transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );
+
+ // If no transport, we auto-abort
+ if ( !transport ) {
+ done( -1, "No Transport" );
+ } else {
+ jqXHR.readyState = 1;
+ // Send global event
+ if ( fireGlobals ) {
+ globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );
+ }
+ // Timeout
+ if ( s.async && s.timeout > 0 ) {
+ timeoutTimer = setTimeout( function(){
+ jqXHR.abort( "timeout" );
+ }, s.timeout );
+ }
+
+ try {
+ state = 1;
+ transport.send( requestHeaders, done );
+ } catch (e) {
+ // Propagate exception as error if not done
+ if ( state < 2 ) {
+ done( -1, e );
+ // Simply rethrow otherwise
+ } else {
+ throw e;
+ }
+ }
+ }
+
+ return jqXHR;
+ },
+
+ // Serialize an array of form elements or a set of
+ // key/values into a query string
+ param: function( a, traditional ) {
+ var s = [],
+ add = function( key, value ) {
+ // If value is a function, invoke it and return its value
+ value = jQuery.isFunction( value ) ? value() : value;
+ s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
+ };
+
+ // Set traditional to true for jQuery <= 1.3.2 behavior.
+ if ( traditional === undefined ) {
+ traditional = jQuery.ajaxSettings.traditional;
+ }
+
+ // If an array was passed in, assume that it is an array of form elements.
+ if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
+ // Serialize the form elements
+ jQuery.each( a, function() {
+ add( this.name, this.value );
+ });
+
+ } else {
+ // If traditional, encode the "old" way (the way 1.3.2 or older
+ // did it), otherwise encode params recursively.
+ for ( var prefix in a ) {
+ buildParams( prefix, a[ prefix ], traditional, add );
+ }
+ }
+
+ // Return the resulting serialization
+ return s.join( "&" ).replace( r20, "+" );
+ }
+});
+
+function buildParams( prefix, obj, traditional, add ) {
+ if ( jQuery.isArray( obj ) ) {
+ // Serialize array item.
+ jQuery.each( obj, function( i, v ) {
+ if ( traditional || rbracket.test( prefix ) ) {
+ // Treat each array item as a scalar.
+ add( prefix, v );
+
+ } else {
+ // If array item is non-scalar (array or object), encode its
+ // numeric index to resolve deserialization ambiguity issues.
+ // Note that rack (as of 1.0.0) can't currently deserialize
+ // nested arrays properly, and attempting to do so may cause
+ // a server error. Possible fixes are to modify rack's
+ // deserialization algorithm or to provide an option or flag
+ // to force array serialization to be shallow.
+ buildParams( prefix + "[" + ( typeof v === "object" || jQuery.isArray(v) ? i : "" ) + "]", v, traditional, add );
+ }
+ });
+
+ } else if ( !traditional && obj != null && typeof obj === "object" ) {
+ // Serialize object item.
+ for ( var name in obj ) {
+ buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
+ }
+
+ } else {
+ // Serialize scalar item.
+ add( prefix, obj );
+ }
+}
+
+// This is still on the jQuery object... for now
+// Want to move this to jQuery.ajax some day
+jQuery.extend({
+
+ // Counter for holding the number of active queries
+ active: 0,
+
+ // Last-Modified header cache for next request
+ lastModified: {},
+ etag: {}
+
+});
+
+/* Handles responses to an ajax request:
+ * - sets all responseXXX fields accordingly
+ * - finds the right dataType (mediates between content-type and expected dataType)
+ * - returns the corresponding response
+ */
+function ajaxHandleResponses( s, jqXHR, responses ) {
+
+ var contents = s.contents,
+ dataTypes = s.dataTypes,
+ responseFields = s.responseFields,
+ ct,
+ type,
+ finalDataType,
+ firstDataType;
+
+ // Fill responseXXX fields
+ for ( type in responseFields ) {
+ if ( type in responses ) {
+ jqXHR[ responseFields[type] ] = responses[ type ];
+ }
+ }
+
+ // Remove auto dataType and get content-type in the process
+ while( dataTypes[ 0 ] === "*" ) {
+ dataTypes.shift();
+ if ( ct === undefined ) {
+ ct = s.mimeType || jqXHR.getResponseHeader( "content-type" );
+ }
+ }
+
+ // Check if we're dealing with a known content-type
+ if ( ct ) {
+ for ( type in contents ) {
+ if ( contents[ type ] && contents[ type ].test( ct ) ) {
+ dataTypes.unshift( type );
+ break;
+ }
+ }
+ }
+
+ // Check to see if we have a response for the expected dataType
+ if ( dataTypes[ 0 ] in responses ) {
+ finalDataType = dataTypes[ 0 ];
+ } else {
+ // Try convertible dataTypes
+ for ( type in responses ) {
+ if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) {
+ finalDataType = type;
+ break;
+ }
+ if ( !firstDataType ) {
+ firstDataType = type;
+ }
+ }
+ // Or just use first one
+ finalDataType = finalDataType || firstDataType;
+ }
+
+ // If we found a dataType
+ // We add the dataType to the list if needed
+ // and return the corresponding response
+ if ( finalDataType ) {
+ if ( finalDataType !== dataTypes[ 0 ] ) {
+ dataTypes.unshift( finalDataType );
+ }
+ return responses[ finalDataType ];
+ }
+}
+
+// Chain conversions given the request and the original response
+function ajaxConvert( s, response ) {
+
+ // Apply the dataFilter if provided
+ if ( s.dataFilter ) {
+ response = s.dataFilter( response, s.dataType );
+ }
+
+ var dataTypes = s.dataTypes,
+ converters = {},
+ i,
+ key,
+ length = dataTypes.length,
+ tmp,
+ // Current and previous dataTypes
+ current = dataTypes[ 0 ],
+ prev,
+ // Conversion expression
+ conversion,
+ // Conversion function
+ conv,
+ // Conversion functions (transitive conversion)
+ conv1,
+ conv2;
+
+ // For each dataType in the chain
+ for ( i = 1; i < length; i++ ) {
+
+ // Create converters map
+ // with lowercased keys
+ if ( i === 1 ) {
+ for ( key in s.converters ) {
+ if ( typeof key === "string" ) {
+ converters[ key.toLowerCase() ] = s.converters[ key ];
+ }
+ }
+ }
+
+ // Get the dataTypes
+ prev = current;
+ current = dataTypes[ i ];
+
+ // If current is auto dataType, update it to prev
+ if ( current === "*" ) {
+ current = prev;
+ // If no auto and dataTypes are actually different
+ } else if ( prev !== "*" && prev !== current ) {
+
+ // Get the converter
+ conversion = prev + " " + current;
+ conv = converters[ conversion ] || converters[ "* " + current ];
+
+ // If there is no direct converter, search transitively
+ if ( !conv ) {
+ conv2 = undefined;
+ for ( conv1 in converters ) {
+ tmp = conv1.split( " " );
+ if ( tmp[ 0 ] === prev || tmp[ 0 ] === "*" ) {
+ conv2 = converters[ tmp[1] + " " + current ];
+ if ( conv2 ) {
+ conv1 = converters[ conv1 ];
+ if ( conv1 === true ) {
+ conv = conv2;
+ } else if ( conv2 === true ) {
+ conv = conv1;
+ }
+ break;
+ }
+ }
+ }
+ }
+ // If we found no converter, dispatch an error
+ if ( !( conv || conv2 ) ) {
+ jQuery.error( "No conversion from " + conversion.replace(" "," to ") );
+ }
+ // If found converter is not an equivalence
+ if ( conv !== true ) {
+ // Convert with 1 or 2 converters accordingly
+ response = conv ? conv( response ) : conv2( conv1(response) );
+ }
+ }
+ }
+ return response;
+}
+
+
+
+
+var jsc = jQuery.now(),
+ jsre = /(\=)\?(&|$)|\?\?/i;
+
+// Default jsonp settings
+jQuery.ajaxSetup({
+ jsonp: "callback",
+ jsonpCallback: function() {
+ return jQuery.expando + "_" + ( jsc++ );
+ }
+});
+
+// Detect, normalize options and install callbacks for jsonp requests
+jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) {
+
+ var inspectData = s.contentType === "application/x-www-form-urlencoded" &&
+ ( typeof s.data === "string" );
+
+ if ( s.dataTypes[ 0 ] === "jsonp" ||
+ s.jsonp !== false && ( jsre.test( s.url ) ||
+ inspectData && jsre.test( s.data ) ) ) {
+
+ var responseContainer,
+ jsonpCallback = s.jsonpCallback =
+ jQuery.isFunction( s.jsonpCallback ) ? s.jsonpCallback() : s.jsonpCallback,
+ previous = window[ jsonpCallback ],
+ url = s.url,
+ data = s.data,
+ replace = "$1" + jsonpCallback + "$2";
+
+ if ( s.jsonp !== false ) {
+ url = url.replace( jsre, replace );
+ if ( s.url === url ) {
+ if ( inspectData ) {
+ data = data.replace( jsre, replace );
+ }
+ if ( s.data === data ) {
+ // Add callback manually
+ url += (/\?/.test( url ) ? "&" : "?") + s.jsonp + "=" + jsonpCallback;
+ }
+ }
+ }
+
+ s.url = url;
+ s.data = data;
+
+ // Install callback
+ window[ jsonpCallback ] = function( response ) {
+ responseContainer = [ response ];
+ };
+
+ // Clean-up function
+ jqXHR.always(function() {
+ // Set callback back to previous value
+ window[ jsonpCallback ] = previous;
+ // Call if it was a function and we have a response
+ if ( responseContainer && jQuery.isFunction( previous ) ) {
+ window[ jsonpCallback ]( responseContainer[ 0 ] );
+ }
+ });
+
+ // Use data converter to retrieve json after script execution
+ s.converters["script json"] = function() {
+ if ( !responseContainer ) {
+ jQuery.error( jsonpCallback + " was not called" );
+ }
+ return responseContainer[ 0 ];
+ };
+
+ // force json dataType
+ s.dataTypes[ 0 ] = "json";
+
+ // Delegate to script
+ return "script";
+ }
+});
+
+
+
+
+// Install script dataType
+jQuery.ajaxSetup({
+ accepts: {
+ script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
+ },
+ contents: {
+ script: /javascript|ecmascript/
+ },
+ converters: {
+ "text script": function( text ) {
+ jQuery.globalEval( text );
+ return text;
+ }
+ }
+});
+
+// Handle cache's special case and global
+jQuery.ajaxPrefilter( "script", function( s ) {
+ if ( s.cache === undefined ) {
+ s.cache = false;
+ }
+ if ( s.crossDomain ) {
+ s.type = "GET";
+ s.global = false;
+ }
+});
+
+// Bind script tag hack transport
+jQuery.ajaxTransport( "script", function(s) {
+
+ // This transport only deals with cross domain requests
+ if ( s.crossDomain ) {
+
+ var script,
+ head = document.head || document.getElementsByTagName( "head" )[0] || document.documentElement;
+
+ return {
+
+ send: function( _, callback ) {
+
+ script = document.createElement( "script" );
+
+ script.async = "async";
+
+ if ( s.scriptCharset ) {
+ script.charset = s.scriptCharset;
+ }
+
+ script.src = s.url;
+
+ // Attach handlers for all browsers
+ script.onload = script.onreadystatechange = function( _, isAbort ) {
+
+ if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) {
+
+ // Handle memory leak in IE
+ script.onload = script.onreadystatechange = null;
+
+ // Remove the script
+ if ( head && script.parentNode ) {
+ head.removeChild( script );
+ }
+
+ // Dereference the script
+ script = undefined;
+
+ // Callback if not abort
+ if ( !isAbort ) {
+ callback( 200, "success" );
+ }
+ }
+ };
+ // Use insertBefore instead of appendChild to circumvent an IE6 bug.
+ // This arises when a base node is used (#2709 and #4378).
+ head.insertBefore( script, head.firstChild );
+ },
+
+ abort: function() {
+ if ( script ) {
+ script.onload( 0, 1 );
+ }
+ }
+ };
+ }
+});
+
+
+
+
+var // #5280: Internet Explorer will keep connections alive if we don't abort on unload
+ xhrOnUnloadAbort = window.ActiveXObject ? function() {
+ // Abort all pending requests
+ for ( var key in xhrCallbacks ) {
+ xhrCallbacks[ key ]( 0, 1 );
+ }
+ } : false,
+ xhrId = 0,
+ xhrCallbacks;
+
+// Functions to create xhrs
+function createStandardXHR() {
+ try {
+ return new window.XMLHttpRequest();
+ } catch( e ) {}
+}
+
+function createActiveXHR() {
+ try {
+ return new window.ActiveXObject( "Microsoft.XMLHTTP" );
+ } catch( e ) {}
+}
+
+// Create the request object
+// (This is still attached to ajaxSettings for backward compatibility)
+jQuery.ajaxSettings.xhr = window.ActiveXObject ?
+ /* Microsoft failed to properly
+ * implement the XMLHttpRequest in IE7 (can't request local files),
+ * so we use the ActiveXObject when it is available
+ * Additionally XMLHttpRequest can be disabled in IE7/IE8 so
+ * we need a fallback.
+ */
+ function() {
+ return !this.isLocal && createStandardXHR() || createActiveXHR();
+ } :
+ // For all other browsers, use the standard XMLHttpRequest object
+ createStandardXHR;
+
+// Determine support properties
+(function( xhr ) {
+ jQuery.extend( jQuery.support, {
+ ajax: !!xhr,
+ cors: !!xhr && ( "withCredentials" in xhr )
+ });
+})( jQuery.ajaxSettings.xhr() );
+
+// Create transport if the browser can provide an xhr
+if ( jQuery.support.ajax ) {
+
+ jQuery.ajaxTransport(function( s ) {
+ // Cross domain only allowed if supported through XMLHttpRequest
+ if ( !s.crossDomain || jQuery.support.cors ) {
+
+ var callback;
+
+ return {
+ send: function( headers, complete ) {
+
+ // Get a new xhr
+ var xhr = s.xhr(),
+ handle,
+ i;
+
+ // Open the socket
+ // Passing null username, generates a login popup on Opera (#2865)
+ if ( s.username ) {
+ xhr.open( s.type, s.url, s.async, s.username, s.password );
+ } else {
+ xhr.open( s.type, s.url, s.async );
+ }
+
+ // Apply custom fields if provided
+ if ( s.xhrFields ) {
+ for ( i in s.xhrFields ) {
+ xhr[ i ] = s.xhrFields[ i ];
+ }
+ }
+
+ // Override mime type if needed
+ if ( s.mimeType && xhr.overrideMimeType ) {
+ xhr.overrideMimeType( s.mimeType );
+ }
+
+ // X-Requested-With header
+ // For cross-domain requests, seeing as conditions for a preflight are
+ // akin to a jigsaw puzzle, we simply never set it to be sure.
+ // (it can always be set on a per-request basis or even using ajaxSetup)
+ // For same-domain requests, won't change header if already provided.
+ if ( !s.crossDomain && !headers["X-Requested-With"] ) {
+ headers[ "X-Requested-With" ] = "XMLHttpRequest";
+ }
+
+ // Need an extra try/catch for cross domain requests in Firefox 3
+ try {
+ for ( i in headers ) {
+ xhr.setRequestHeader( i, headers[ i ] );
+ }
+ } catch( _ ) {}
+
+ // Do send the request
+ // This may raise an exception which is actually
+ // handled in jQuery.ajax (so no try/catch here)
+ xhr.send( ( s.hasContent && s.data ) || null );
+
+ // Listener
+ callback = function( _, isAbort ) {
+
+ var status,
+ statusText,
+ responseHeaders,
+ responses,
+ xml;
+
+ // Firefox throws exceptions when accessing properties
+ // of an xhr when a network error occured
+ // http://helpful.knobs-dials.com/index.php/Component_returned_failure_code:_0x80040111_(NS_ERROR_NOT_AVAILABLE)
+ try {
+
+ // Was never called and is aborted or complete
+ if ( callback && ( isAbort || xhr.readyState === 4 ) ) {
+
+ // Only called once
+ callback = undefined;
+
+ // Do not keep as active anymore
+ if ( handle ) {
+ xhr.onreadystatechange = jQuery.noop;
+ if ( xhrOnUnloadAbort ) {
+ delete xhrCallbacks[ handle ];
+ }
+ }
+
+ // If it's an abort
+ if ( isAbort ) {
+ // Abort it manually if needed
+ if ( xhr.readyState !== 4 ) {
+ xhr.abort();
+ }
+ } else {
+ status = xhr.status;
+ responseHeaders = xhr.getAllResponseHeaders();
+ responses = {};
+ xml = xhr.responseXML;
+
+ // Construct response list
+ if ( xml && xml.documentElement /* #4958 */ ) {
+ responses.xml = xml;
+ }
+ responses.text = xhr.responseText;
+
+ // Firefox throws an exception when accessing
+ // statusText for faulty cross-domain requests
+ try {
+ statusText = xhr.statusText;
+ } catch( e ) {
+ // We normalize with Webkit giving an empty statusText
+ statusText = "";
+ }
+
+ // Filter status for non standard behaviors
+
+ // If the request is local and we have data: assume a success
+ // (success with no data won't get notified, that's the best we
+ // can do given current implementations)
+ if ( !status && s.isLocal && !s.crossDomain ) {
+ status = responses.text ? 200 : 404;
+ // IE - #1450: sometimes returns 1223 when it should be 204
+ } else if ( status === 1223 ) {
+ status = 204;
+ }
+ }
+ }
+ } catch( firefoxAccessException ) {
+ if ( !isAbort ) {
+ complete( -1, firefoxAccessException );
+ }
+ }
+
+ // Call complete if needed
+ if ( responses ) {
+ complete( status, statusText, responses, responseHeaders );
+ }
+ };
+
+ // if we're in sync mode or it's in cache
+ // and has been retrieved directly (IE6 & IE7)
+ // we need to manually fire the callback
+ if ( !s.async || xhr.readyState === 4 ) {
+ callback();
+ } else {
+ handle = ++xhrId;
+ if ( xhrOnUnloadAbort ) {
+ // Create the active xhrs callbacks list if needed
+ // and attach the unload handler
+ if ( !xhrCallbacks ) {
+ xhrCallbacks = {};
+ jQuery( window ).unload( xhrOnUnloadAbort );
+ }
+ // Add to list of active xhrs callbacks
+ xhrCallbacks[ handle ] = callback;
+ }
+ xhr.onreadystatechange = callback;
+ }
+ },
+
+ abort: function() {
+ if ( callback ) {
+ callback(0,1);
+ }
+ }
+ };
+ }
+ });
+}
+
+
+
+
+var elemdisplay = {},
+ iframe, iframeDoc,
+ rfxtypes = /^(?:toggle|show|hide)$/,
+ rfxnum = /^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,
+ timerId,
+ fxAttrs = [
+ // height animations
+ [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
+ // width animations
+ [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
+ // opacity animations
+ [ "opacity" ]
+ ],
+ fxNow;
+
+jQuery.fn.extend({
+ show: function( speed, easing, callback ) {
+ var elem, display;
+
+ if ( speed || speed === 0 ) {
+ return this.animate( genFx("show", 3), speed, easing, callback );
+
+ } else {
+ for ( var i = 0, j = this.length; i < j; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.style ) {
+ display = elem.style.display;
+
+ // Reset the inline display of this element to learn if it is
+ // being hidden by cascaded rules or not
+ if ( !jQuery._data(elem, "olddisplay") && display === "none" ) {
+ display = elem.style.display = "";
+ }
+
+ // Set elements which have been overridden with display: none
+ // in a stylesheet to whatever the default browser style is
+ // for such an element
+ if ( display === "" && jQuery.css(elem, "display") === "none" ) {
+ jQuery._data( elem, "olddisplay", defaultDisplay(elem.nodeName) );
+ }
+ }
+ }
+
+ // Set the display of most of the elements in a second loop
+ // to avoid the constant reflow
+ for ( i = 0; i < j; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.style ) {
+ display = elem.style.display;
+
+ if ( display === "" || display === "none" ) {
+ elem.style.display = jQuery._data( elem, "olddisplay" ) || "";
+ }
+ }
+ }
+
+ return this;
+ }
+ },
+
+ hide: function( speed, easing, callback ) {
+ if ( speed || speed === 0 ) {
+ return this.animate( genFx("hide", 3), speed, easing, callback);
+
+ } else {
+ var elem, display,
+ i = 0,
+ j = this.length;
+
+ for ( ; i < j; i++ ) {
+ elem = this[i];
+ if ( elem.style ) {
+ display = jQuery.css( elem, "display" );
+
+ if ( display !== "none" && !jQuery._data( elem, "olddisplay" ) ) {
+ jQuery._data( elem, "olddisplay", display );
+ }
+ }
+ }
+
+ // Set the display of the elements in a second loop
+ // to avoid the constant reflow
+ for ( i = 0; i < j; i++ ) {
+ if ( this[i].style ) {
+ this[i].style.display = "none";
+ }
+ }
+
+ return this;
+ }
+ },
+
+ // Save the old toggle function
+ _toggle: jQuery.fn.toggle,
+
+ toggle: function( fn, fn2, callback ) {
+ var bool = typeof fn === "boolean";
+
+ if ( jQuery.isFunction(fn) && jQuery.isFunction(fn2) ) {
+ this._toggle.apply( this, arguments );
+
+ } else if ( fn == null || bool ) {
+ this.each(function() {
+ var state = bool ? fn : jQuery(this).is(":hidden");
+ jQuery(this)[ state ? "show" : "hide" ]();
+ });
+
+ } else {
+ this.animate(genFx("toggle", 3), fn, fn2, callback);
+ }
+
+ return this;
+ },
+
+ fadeTo: function( speed, to, easing, callback ) {
+ return this.filter(":hidden").css("opacity", 0).show().end()
+ .animate({opacity: to}, speed, easing, callback);
+ },
+
+ animate: function( prop, speed, easing, callback ) {
+ var optall = jQuery.speed( speed, easing, callback );
+
+ if ( jQuery.isEmptyObject( prop ) ) {
+ return this.each( optall.complete, [ false ] );
+ }
+
+ // Do not change referenced properties as per-property easing will be lost
+ prop = jQuery.extend( {}, prop );
+
+ function doAnimation() {
+ // XXX 'this' does not always have a nodeName when running the
+ // test suite
+
+ if ( optall.queue === false ) {
+ jQuery._mark( this );
+ }
+
+ var opt = jQuery.extend( {}, optall ),
+ isElement = this.nodeType === 1,
+ hidden = isElement && jQuery(this).is(":hidden"),
+ name, val, p, e,
+ parts, start, end, unit,
+ method;
+
+ // will store per property easing and be used to determine when an animation is complete
+ opt.animatedProperties = {};
+
+ for ( p in prop ) {
+
+ // property name normalization
+ name = jQuery.camelCase( p );
+ if ( p !== name ) {
+ prop[ name ] = prop[ p ];
+ delete prop[ p ];
+ }
+
+ val = prop[ name ];
+
+ // easing resolution: per property > opt.specialEasing > opt.easing > 'swing' (default)
+ if ( jQuery.isArray( val ) ) {
+ opt.animatedProperties[ name ] = val[ 1 ];
+ val = prop[ name ] = val[ 0 ];
+ } else {
+ opt.animatedProperties[ name ] = opt.specialEasing && opt.specialEasing[ name ] || opt.easing || 'swing';
+ }
+
+ if ( val === "hide" && hidden || val === "show" && !hidden ) {
+ return opt.complete.call( this );
+ }
+
+ if ( isElement && ( name === "height" || name === "width" ) ) {
+ // Make sure that nothing sneaks out
+ // Record all 3 overflow attributes because IE does not
+ // change the overflow attribute when overflowX and
+ // overflowY are set to the same value
+ opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
+
+ // Set display property to inline-block for height/width
+ // animations on inline elements that are having width/height animated
+ if ( jQuery.css( this, "display" ) === "inline" &&
+ jQuery.css( this, "float" ) === "none" ) {
+
+ // inline-level elements accept inline-block;
+ // block-level elements need to be inline with layout
+ if ( !jQuery.support.inlineBlockNeedsLayout || defaultDisplay( this.nodeName ) === "inline" ) {
+ this.style.display = "inline-block";
+
+ } else {
+ this.style.zoom = 1;
+ }
+ }
+ }
+ }
+
+ if ( opt.overflow != null ) {
+ this.style.overflow = "hidden";
+ }
+
+ for ( p in prop ) {
+ e = new jQuery.fx( this, opt, p );
+ val = prop[ p ];
+
+ if ( rfxtypes.test( val ) ) {
+
+ // Tracks whether to show or hide based on private
+ // data attached to the element
+ method = jQuery._data( this, "toggle" + p ) || ( val === "toggle" ? hidden ? "show" : "hide" : 0 );
+ if ( method ) {
+ jQuery._data( this, "toggle" + p, method === "show" ? "hide" : "show" );
+ e[ method ]();
+ } else {
+ e[ val ]();
+ }
+
+ } else {
+ parts = rfxnum.exec( val );
+ start = e.cur();
+
+ if ( parts ) {
+ end = parseFloat( parts[2] );
+ unit = parts[3] || ( jQuery.cssNumber[ p ] ? "" : "px" );
+
+ // We need to compute starting value
+ if ( unit !== "px" ) {
+ jQuery.style( this, p, (end || 1) + unit);
+ start = ( (end || 1) / e.cur() ) * start;
+ jQuery.style( this, p, start + unit);
+ }
+
+ // If a +=/-= token was provided, we're doing a relative animation
+ if ( parts[1] ) {
+ end = ( (parts[ 1 ] === "-=" ? -1 : 1) * end ) + start;
+ }
+
+ e.custom( start, end, unit );
+
+ } else {
+ e.custom( start, val, "" );
+ }
+ }
+ }
+
+ // For JS strict compliance
+ return true;
+ }
+
+ return optall.queue === false ?
+ this.each( doAnimation ) :
+ this.queue( optall.queue, doAnimation );
+ },
+
+ stop: function( type, clearQueue, gotoEnd ) {
+ if ( typeof type !== "string" ) {
+ gotoEnd = clearQueue;
+ clearQueue = type;
+ type = undefined;
+ }
+ if ( clearQueue && type !== false ) {
+ this.queue( type || "fx", [] );
+ }
+
+ return this.each(function() {
+ var index,
+ hadTimers = false,
+ timers = jQuery.timers,
+ data = jQuery._data( this );
+
+ // clear marker counters if we know they won't be
+ if ( !gotoEnd ) {
+ jQuery._unmark( true, this );
+ }
+
+ function stopQueue( elem, data, index ) {
+ var hooks = data[ index ];
+ jQuery.removeData( elem, index, true );
+ hooks.stop( gotoEnd );
+ }
+
+ if ( type == null ) {
+ for ( index in data ) {
+ if ( data[ index ] && data[ index ].stop && index.indexOf(".run") === index.length - 4 ) {
+ stopQueue( this, data, index );
+ }
+ }
+ } else if ( data[ index = type + ".run" ] && data[ index ].stop ){
+ stopQueue( this, data, index );
+ }
+
+ for ( index = timers.length; index--; ) {
+ if ( timers[ index ].elem === this && (type == null || timers[ index ].queue === type) ) {
+ if ( gotoEnd ) {
+
+ // force the next step to be the last
+ timers[ index ]( true );
+ } else {
+ timers[ index ].saveState();
+ }
+ hadTimers = true;
+ timers.splice( index, 1 );
+ }
+ }
+
+ // start the next in the queue if the last step wasn't forced
+ // timers currently will call their complete callbacks, which will dequeue
+ // but only if they were gotoEnd
+ if ( !( gotoEnd && hadTimers ) ) {
+ jQuery.dequeue( this, type );
+ }
+ });
+ }
+
+});
+
+// Animations created synchronously will run synchronously
+function createFxNow() {
+ setTimeout( clearFxNow, 0 );
+ return ( fxNow = jQuery.now() );
+}
+
+function clearFxNow() {
+ fxNow = undefined;
+}
+
+// Generate parameters to create a standard animation
+function genFx( type, num ) {
+ var obj = {};
+
+ jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice( 0, num )), function() {
+ obj[ this ] = type;
+ });
+
+ return obj;
+}
+
+// Generate shortcuts for custom animations
+jQuery.each({
+ slideDown: genFx( "show", 1 ),
+ slideUp: genFx( "hide", 1 ),
+ slideToggle: genFx( "toggle", 1 ),
+ fadeIn: { opacity: "show" },
+ fadeOut: { opacity: "hide" },
+ fadeToggle: { opacity: "toggle" }
+}, function( name, props ) {
+ jQuery.fn[ name ] = function( speed, easing, callback ) {
+ return this.animate( props, speed, easing, callback );
+ };
+});
+
+jQuery.extend({
+ speed: function( speed, easing, fn ) {
+ var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {
+ complete: fn || !fn && easing ||
+ jQuery.isFunction( speed ) && speed,
+ duration: speed,
+ easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing
+ };
+
+ opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
+ opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;
+
+ // normalize opt.queue - true/undefined/null -> "fx"
+ if ( opt.queue == null || opt.queue === true ) {
+ opt.queue = "fx";
+ }
+
+ // Queueing
+ opt.old = opt.complete;
+
+ opt.complete = function( noUnmark ) {
+ if ( jQuery.isFunction( opt.old ) ) {
+ opt.old.call( this );
+ }
+
+ if ( opt.queue ) {
+ jQuery.dequeue( this, opt.queue );
+ } else if ( noUnmark !== false ) {
+ jQuery._unmark( this );
+ }
+ };
+
+ return opt;
+ },
+
+ easing: {
+ linear: function( p, n, firstNum, diff ) {
+ return firstNum + diff * p;
+ },
+ swing: function( p, n, firstNum, diff ) {
+ return ( ( -Math.cos( p*Math.PI ) / 2 ) + 0.5 ) * diff + firstNum;
+ }
+ },
+
+ timers: [],
+
+ fx: function( elem, options, prop ) {
+ this.options = options;
+ this.elem = elem;
+ this.prop = prop;
+
+ options.orig = options.orig || {};
+ }
+
+});
+
+jQuery.fx.prototype = {
+ // Simple function for setting a style value
+ update: function() {
+ if ( this.options.step ) {
+ this.options.step.call( this.elem, this.now, this );
+ }
+
+ ( jQuery.fx.step[ this.prop ] || jQuery.fx.step._default )( this );
+ },
+
+ // Get the current size
+ cur: function() {
+ if ( this.elem[ this.prop ] != null && (!this.elem.style || this.elem.style[ this.prop ] == null) ) {
+ return this.elem[ this.prop ];
+ }
+
+ var parsed,
+ r = jQuery.css( this.elem, this.prop );
+ // Empty strings, null, undefined and "auto" are converted to 0,
+ // complex values such as "rotate(1rad)" are returned as is,
+ // simple values such as "10px" are parsed to Float.
+ return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;
+ },
+
+ // Start an animation from one number to another
+ custom: function( from, to, unit ) {
+ var self = this,
+ fx = jQuery.fx;
+
+ this.startTime = fxNow || createFxNow();
+ this.end = to;
+ this.now = this.start = from;
+ this.pos = this.state = 0;
+ this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
+
+ function t( gotoEnd ) {
+ return self.step( gotoEnd );
+ }
+
+ t.queue = this.options.queue;
+ t.elem = this.elem;
+ t.saveState = function() {
+ if ( self.options.hide && jQuery._data( self.elem, "fxshow" + self.prop ) === undefined ) {
+ jQuery._data( self.elem, "fxshow" + self.prop, self.start );
+ }
+ };
+
+ if ( t() && jQuery.timers.push(t) && !timerId ) {
+ timerId = setInterval( fx.tick, fx.interval );
+ }
+ },
+
+ // Simple 'show' function
+ show: function() {
+ var dataShow = jQuery._data( this.elem, "fxshow" + this.prop );
+
+ // Remember where we started, so that we can go back to it later
+ this.options.orig[ this.prop ] = dataShow || jQuery.style( this.elem, this.prop );
+ this.options.show = true;
+
+ // Begin the animation
+ // Make sure that we start at a small width/height to avoid any flash of content
+ if ( dataShow !== undefined ) {
+ // This show is picking up where a previous hide or show left off
+ this.custom( this.cur(), dataShow );
+ } else {
+ this.custom( this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur() );
+ }
+
+ // Start by showing the element
+ jQuery( this.elem ).show();
+ },
+
+ // Simple 'hide' function
+ hide: function() {
+ // Remember where we started, so that we can go back to it later
+ this.options.orig[ this.prop ] = jQuery._data( this.elem, "fxshow" + this.prop ) || jQuery.style( this.elem, this.prop );
+ this.options.hide = true;
+
+ // Begin the animation
+ this.custom( this.cur(), 0 );
+ },
+
+ // Each step of an animation
+ step: function( gotoEnd ) {
+ var p, n, complete,
+ t = fxNow || createFxNow(),
+ done = true,
+ elem = this.elem,
+ options = this.options;
+
+ if ( gotoEnd || t >= options.duration + this.startTime ) {
+ this.now = this.end;
+ this.pos = this.state = 1;
+ this.update();
+
+ options.animatedProperties[ this.prop ] = true;
+
+ for ( p in options.animatedProperties ) {
+ if ( options.animatedProperties[ p ] !== true ) {
+ done = false;
+ }
+ }
+
+ if ( done ) {
+ // Reset the overflow
+ if ( options.overflow != null && !jQuery.support.shrinkWrapBlocks ) {
+
+ jQuery.each( [ "", "X", "Y" ], function( index, value ) {
+ elem.style[ "overflow" + value ] = options.overflow[ index ];
+ });
+ }
+
+ // Hide the element if the "hide" operation was done
+ if ( options.hide ) {
+ jQuery( elem ).hide();
+ }
+
+ // Reset the properties, if the item has been hidden or shown
+ if ( options.hide || options.show ) {
+ for ( p in options.animatedProperties ) {
+ jQuery.style( elem, p, options.orig[ p ] );
+ jQuery.removeData( elem, "fxshow" + p, true );
+ // Toggle data is no longer needed
+ jQuery.removeData( elem, "toggle" + p, true );
+ }
+ }
+
+ // Execute the complete function
+ // in the event that the complete function throws an exception
+ // we must ensure it won't be called twice. #5684
+
+ complete = options.complete;
+ if ( complete ) {
+
+ options.complete = false;
+ complete.call( elem );
+ }
+ }
+
+ return false;
+
+ } else {
+ // classical easing cannot be used with an Infinity duration
+ if ( options.duration == Infinity ) {
+ this.now = t;
+ } else {
+ n = t - this.startTime;
+ this.state = n / options.duration;
+
+ // Perform the easing function, defaults to swing
+ this.pos = jQuery.easing[ options.animatedProperties[this.prop] ]( this.state, n, 0, 1, options.duration );
+ this.now = this.start + ( (this.end - this.start) * this.pos );
+ }
+ // Perform the next step of the animation
+ this.update();
+ }
+
+ return true;
+ }
+};
+
+jQuery.extend( jQuery.fx, {
+ tick: function() {
+ var timer,
+ timers = jQuery.timers,
+ i = 0;
+
+ for ( ; i < timers.length; i++ ) {
+ timer = timers[ i ];
+ // Checks the timer has not already been removed
+ if ( !timer() && timers[ i ] === timer ) {
+ timers.splice( i--, 1 );
+ }
+ }
+
+ if ( !timers.length ) {
+ jQuery.fx.stop();
+ }
+ },
+
+ interval: 13,
+
+ stop: function() {
+ clearInterval( timerId );
+ timerId = null;
+ },
+
+ speeds: {
+ slow: 600,
+ fast: 200,
+ // Default speed
+ _default: 400
+ },
+
+ step: {
+ opacity: function( fx ) {
+ jQuery.style( fx.elem, "opacity", fx.now );
+ },
+
+ _default: function( fx ) {
+ if ( fx.elem.style && fx.elem.style[ fx.prop ] != null ) {
+ fx.elem.style[ fx.prop ] = fx.now + fx.unit;
+ } else {
+ fx.elem[ fx.prop ] = fx.now;
+ }
+ }
+ }
+});
+
+// Adds width/height step functions
+// Do not set anything below 0
+jQuery.each([ "width", "height" ], function( i, prop ) {
+ jQuery.fx.step[ prop ] = function( fx ) {
+ jQuery.style( fx.elem, prop, Math.max(0, fx.now) + fx.unit );
+ };
+});
+
+if ( jQuery.expr && jQuery.expr.filters ) {
+ jQuery.expr.filters.animated = function( elem ) {
+ return jQuery.grep(jQuery.timers, function( fn ) {
+ return elem === fn.elem;
+ }).length;
+ };
+}
+
+// Try to restore the default display value of an element
+function defaultDisplay( nodeName ) {
+
+ if ( !elemdisplay[ nodeName ] ) {
+
+ var body = document.body,
+ elem = jQuery( "<" + nodeName + ">" ).appendTo( body ),
+ display = elem.css( "display" );
+ elem.remove();
+
+ // If the simple way fails,
+ // get element's real default display by attaching it to a temp iframe
+ if ( display === "none" || display === "" ) {
+ // No iframe to use yet, so create it
+ if ( !iframe ) {
+ iframe = document.createElement( "iframe" );
+ iframe.frameBorder = iframe.width = iframe.height = 0;
+ }
+
+ body.appendChild( iframe );
+
+ // Create a cacheable copy of the iframe document on first call.
+ // IE and Opera will allow us to reuse the iframeDoc without re-writing the fake HTML
+ // document to it; WebKit & Firefox won't allow reusing the iframe document.
+ if ( !iframeDoc || !iframe.createElement ) {
+ iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document;
+ iframeDoc.write( ( document.compatMode === "CSS1Compat" ? "<!doctype html>" : "" ) + "<html><body>" );
+ iframeDoc.close();
+ }
+
+ elem = iframeDoc.createElement( nodeName );
+
+ iframeDoc.body.appendChild( elem );
+
+ display = jQuery.css( elem, "display" );
+ body.removeChild( iframe );
+ }
+
+ // Store the correct default display
+ elemdisplay[ nodeName ] = display;
+ }
+
+ return elemdisplay[ nodeName ];
+}
+
+
+
+
+var rtable = /^t(?:able|d|h)$/i,
+ rroot = /^(?:body|html)$/i;
+
+if ( "getBoundingClientRect" in document.documentElement ) {
+ jQuery.fn.offset = function( options ) {
+ var elem = this[0], box;
+
+ if ( options ) {
+ return this.each(function( i ) {
+ jQuery.offset.setOffset( this, options, i );
+ });
+ }
+
+ if ( !elem || !elem.ownerDocument ) {
+ return null;
+ }
+
+ if ( elem === elem.ownerDocument.body ) {
+ return jQuery.offset.bodyOffset( elem );
+ }
+
+ try {
+ box = elem.getBoundingClientRect();
+ } catch(e) {}
+
+ var doc = elem.ownerDocument,
+ docElem = doc.documentElement;
+
+ // Make sure we're not dealing with a disconnected DOM node
+ if ( !box || !jQuery.contains( docElem, elem ) ) {
+ return box ? { top: box.top, left: box.left } : { top: 0, left: 0 };
+ }
+
+ var body = doc.body,
+ win = getWindow(doc),
+ clientTop = docElem.clientTop || body.clientTop || 0,
+ clientLeft = docElem.clientLeft || body.clientLeft || 0,
+ scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop,
+ scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
+ top = box.top + scrollTop - clientTop,
+ left = box.left + scrollLeft - clientLeft;
+
+ return { top: top, left: left };
+ };
+
+} else {
+ jQuery.fn.offset = function( options ) {
+ var elem = this[0];
+
+ if ( options ) {
+ return this.each(function( i ) {
+ jQuery.offset.setOffset( this, options, i );
+ });
+ }
+
+ if ( !elem || !elem.ownerDocument ) {
+ return null;
+ }
+
+ if ( elem === elem.ownerDocument.body ) {
+ return jQuery.offset.bodyOffset( elem );
+ }
+
+ var computedStyle,
+ offsetParent = elem.offsetParent,
+ prevOffsetParent = elem,
+ doc = elem.ownerDocument,
+ docElem = doc.documentElement,
+ body = doc.body,
+ defaultView = doc.defaultView,
+ prevComputedStyle = defaultView ? defaultView.getComputedStyle( elem, null ) : elem.currentStyle,
+ top = elem.offsetTop,
+ left = elem.offsetLeft;
+
+ while ( (elem = elem.parentNode) && elem !== body && elem !== docElem ) {
+ if ( jQuery.support.fixedPosition && prevComputedStyle.position === "fixed" ) {
+ break;
+ }
+
+ computedStyle = defaultView ? defaultView.getComputedStyle(elem, null) : elem.currentStyle;
+ top -= elem.scrollTop;
+ left -= elem.scrollLeft;
+
+ if ( elem === offsetParent ) {
+ top += elem.offsetTop;
+ left += elem.offsetLeft;
+
+ if ( jQuery.support.doesNotAddBorder && !(jQuery.support.doesAddBorderForTableAndCells && rtable.test(elem.nodeName)) ) {
+ top += parseFloat( computedStyle.borderTopWidth ) || 0;
+ left += parseFloat( computedStyle.borderLeftWidth ) || 0;
+ }
+
+ prevOffsetParent = offsetParent;
+ offsetParent = elem.offsetParent;
+ }
+
+ if ( jQuery.support.subtractsBorderForOverflowNotVisible && computedStyle.overflow !== "visible" ) {
+ top += parseFloat( computedStyle.borderTopWidth ) || 0;
+ left += parseFloat( computedStyle.borderLeftWidth ) || 0;
+ }
+
+ prevComputedStyle = computedStyle;
+ }
+
+ if ( prevComputedStyle.position === "relative" || prevComputedStyle.position === "static" ) {
+ top += body.offsetTop;
+ left += body.offsetLeft;
+ }
+
+ if ( jQuery.support.fixedPosition && prevComputedStyle.position === "fixed" ) {
+ top += Math.max( docElem.scrollTop, body.scrollTop );
+ left += Math.max( docElem.scrollLeft, body.scrollLeft );
+ }
+
+ return { top: top, left: left };
+ };
+}
+
+jQuery.offset = {
+
+ bodyOffset: function( body ) {
+ var top = body.offsetTop,
+ left = body.offsetLeft;
+
+ if ( jQuery.support.doesNotIncludeMarginInBodyOffset ) {
+ top += parseFloat( jQuery.css(body, "marginTop") ) || 0;
+ left += parseFloat( jQuery.css(body, "marginLeft") ) || 0;
+ }
+
+ return { top: top, left: left };
+ },
+
+ setOffset: function( elem, options, i ) {
+ var position = jQuery.css( elem, "position" );
+
+ // set position first, in-case top/left are set even on static elem
+ if ( position === "static" ) {
+ elem.style.position = "relative";
+ }
+
+ var curElem = jQuery( elem ),
+ curOffset = curElem.offset(),
+ curCSSTop = jQuery.css( elem, "top" ),
+ curCSSLeft = jQuery.css( elem, "left" ),
+ calculatePosition = ( position === "absolute" || position === "fixed" ) && jQuery.inArray("auto", [curCSSTop, curCSSLeft]) > -1,
+ props = {}, curPosition = {}, curTop, curLeft;
+
+ // need to be able to calculate position if either top or left is auto and position is either absolute or fixed
+ if ( calculatePosition ) {
+ curPosition = curElem.position();
+ curTop = curPosition.top;
+ curLeft = curPosition.left;
+ } else {
+ curTop = parseFloat( curCSSTop ) || 0;
+ curLeft = parseFloat( curCSSLeft ) || 0;
+ }
+
+ if ( jQuery.isFunction( options ) ) {
+ options = options.call( elem, i, curOffset );
+ }
+
+ if ( options.top != null ) {
+ props.top = ( options.top - curOffset.top ) + curTop;
+ }
+ if ( options.left != null ) {
+ props.left = ( options.left - curOffset.left ) + curLeft;
+ }
+
+ if ( "using" in options ) {
+ options.using.call( elem, props );
+ } else {
+ curElem.css( props );
+ }
+ }
+};
+
+
+jQuery.fn.extend({
+
+ position: function() {
+ if ( !this[0] ) {
+ return null;
+ }
+
+ var elem = this[0],
+
+ // Get *real* offsetParent
+ offsetParent = this.offsetParent(),
+
+ // Get correct offsets
+ offset = this.offset(),
+ parentOffset = rroot.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset();
+
+ // Subtract element margins
+ // note: when an element has margin: auto the offsetLeft and marginLeft
+ // are the same in Safari causing offset.left to incorrectly be 0
+ offset.top -= parseFloat( jQuery.css(elem, "marginTop") ) || 0;
+ offset.left -= parseFloat( jQuery.css(elem, "marginLeft") ) || 0;
+
+ // Add offsetParent borders
+ parentOffset.top += parseFloat( jQuery.css(offsetParent[0], "borderTopWidth") ) || 0;
+ parentOffset.left += parseFloat( jQuery.css(offsetParent[0], "borderLeftWidth") ) || 0;
+
+ // Subtract the two offsets
+ return {
+ top: offset.top - parentOffset.top,
+ left: offset.left - parentOffset.left
+ };
+ },
+
+ offsetParent: function() {
+ return this.map(function() {
+ var offsetParent = this.offsetParent || document.body;
+ while ( offsetParent && (!rroot.test(offsetParent.nodeName) && jQuery.css(offsetParent, "position") === "static") ) {
+ offsetParent = offsetParent.offsetParent;
+ }
+ return offsetParent;
+ });
+ }
+});
+
+
+// Create scrollLeft and scrollTop methods
+jQuery.each( ["Left", "Top"], function( i, name ) {
+ var method = "scroll" + name;
+
+ jQuery.fn[ method ] = function( val ) {
+ var elem, win;
+
+ if ( val === undefined ) {
+ elem = this[ 0 ];
+
+ if ( !elem ) {
+ return null;
+ }
+
+ win = getWindow( elem );
+
+ // Return the scroll offset
+ return win ? ("pageXOffset" in win) ? win[ i ? "pageYOffset" : "pageXOffset" ] :
+ jQuery.support.boxModel && win.document.documentElement[ method ] ||
+ win.document.body[ method ] :
+ elem[ method ];
+ }
+
+ // Set the scroll offset
+ return this.each(function() {
+ win = getWindow( this );
+
+ if ( win ) {
+ win.scrollTo(
+ !i ? val : jQuery( win ).scrollLeft(),
+ i ? val : jQuery( win ).scrollTop()
+ );
+
+ } else {
+ this[ method ] = val;
+ }
+ });
+ };
+});
+
+function getWindow( elem ) {
+ return jQuery.isWindow( elem ) ?
+ elem :
+ elem.nodeType === 9 ?
+ elem.defaultView || elem.parentWindow :
+ false;
+}
+
+
+
+
+// Create width, height, innerHeight, innerWidth, outerHeight and outerWidth methods
+jQuery.each([ "Height", "Width" ], function( i, name ) {
+
+ var type = name.toLowerCase();
+
+ // innerHeight and innerWidth
+ jQuery.fn[ "inner" + name ] = function() {
+ var elem = this[0];
+ return elem ?
+ elem.style ?
+ parseFloat( jQuery.css( elem, type, "padding" ) ) :
+ this[ type ]() :
+ null;
+ };
+
+ // outerHeight and outerWidth
+ jQuery.fn[ "outer" + name ] = function( margin ) {
+ var elem = this[0];
+ return elem ?
+ elem.style ?
+ parseFloat( jQuery.css( elem, type, margin ? "margin" : "border" ) ) :
+ this[ type ]() :
+ null;
+ };
+
+ jQuery.fn[ type ] = function( size ) {
+ // Get window width or height
+ var elem = this[0];
+ if ( !elem ) {
+ return size == null ? null : this;
+ }
+
+ if ( jQuery.isFunction( size ) ) {
+ return this.each(function( i ) {
+ var self = jQuery( this );
+ self[ type ]( size.call( this, i, self[ type ]() ) );
+ });
+ }
+
+ if ( jQuery.isWindow( elem ) ) {
+ // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
+ // 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat
+ var docElemProp = elem.document.documentElement[ "client" + name ],
+ body = elem.document.body;
+ return elem.document.compatMode === "CSS1Compat" && docElemProp ||
+ body && body[ "client" + name ] || docElemProp;
+
+ // Get document width or height
+ } else if ( elem.nodeType === 9 ) {
+ // Either scroll[Width/Height] or offset[Width/Height], whichever is greater
+ return Math.max(
+ elem.documentElement["client" + name],
+ elem.body["scroll" + name], elem.documentElement["scroll" + name],
+ elem.body["offset" + name], elem.documentElement["offset" + name]
+ );
+
+ // Get or set width or height on the element
+ } else if ( size === undefined ) {
+ var orig = jQuery.css( elem, type ),
+ ret = parseFloat( orig );
+
+ return jQuery.isNumeric( ret ) ? ret : orig;
+
+ // Set the width or height on the element (default to pixels if value is unitless)
+ } else {
+ return this.css( type, typeof size === "string" ? size : size + "px" );
+ }
+ };
+
+});
+
+
+
+
+// Expose jQuery to the global object
+window.jQuery = window.$ = jQuery;
+
+// Expose jQuery as an AMD module, but only for AMD loaders that
+// understand the issues with loading multiple versions of jQuery
+// in a page that all might call define(). The loader will indicate
+// they have special allowances for multiple jQuery versions by
+// specifying define.amd.jQuery = true. Register as a named module,
+// since jQuery can be concatenated with other files that may use define,
+// but not use a proper concatenation script that understands anonymous
+// AMD modules. A named AMD is safest and most robust way to register.
+// Lowercase jquery is used because AMD module names are derived from
+// file names, and jQuery is normally delivered in a lowercase file name.
+// Do this after creating the global so that if an AMD module wants to call
+// noConflict to hide this version of jQuery, it will work.
+if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
+ define( "jquery", [], function () { return jQuery; } );
+}
+
+
+
+})( window );
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: jQuery 1.7.1 core library
+//>>label: jQuery Core
+//>>excludeEnd("jqmBuildExclude");
+
+
+/*!
+ * jQuery JavaScript Library v1.7.1
+ * http://jquery.com/
+ *
+ * Copyright 2011, John Resig
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * Includes Sizzle.js
+ * http://sizzlejs.com/
+ * Copyright 2011, The Dojo Foundation
+ * Released under the MIT, BSD, and GPL Licenses.
+ *
+ * Date: Mon Nov 21 21:11:03 2011 -0500
+ */
+(function( window, undefined ) {
+
+// Use the correct document accordingly with window argument (sandbox)
+var document = window.document,
+ navigator = window.navigator,
+ location = window.location;
+var jQuery = (function() {
+
+// Define a local copy of jQuery
+var jQuery = function( selector, context ) {
+ // The jQuery object is actually just the init constructor 'enhanced'
+ return new jQuery.fn.init( selector, context, rootjQuery );
+ },
+
+ // Map over jQuery in case of overwrite
+ _jQuery = window.jQuery,
+
+ // Map over the $ in case of overwrite
+ _$ = window.$,
+
+ // A central reference to the root jQuery(document)
+ rootjQuery,
+
+ // A simple way to check for HTML strings or ID strings
+ // Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
+ quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,
+
+ // Check if a string has a non-whitespace character in it
+ rnotwhite = /\S/,
+
+ // Used for trimming whitespace
+ trimLeft = /^\s+/,
+ trimRight = /\s+$/,
+
+ // Match a standalone tag
+ rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,
+
+ // JSON RegExp
+ rvalidchars = /^[\],:{}\s]*$/,
+ rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,
+ rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
+ rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
+
+ // Useragent RegExp
+ rwebkit = /(webkit)[ \/]([\w.]+)/,
+ ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
+ rmsie = /(msie) ([\w.]+)/,
+ rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
+
+ // Matches dashed string for camelizing
+ rdashAlpha = /-([a-z]|[0-9])/ig,
+ rmsPrefix = /^-ms-/,
+
+ // Used by jQuery.camelCase as callback to replace()
+ fcamelCase = function( all, letter ) {
+ return ( letter + "" ).toUpperCase();
+ },
+
+ // Keep a UserAgent string for use with jQuery.browser
+ userAgent = navigator.userAgent,
+
+ // For matching the engine and version of the browser
+ browserMatch,
+
+ // The deferred used on DOM ready
+ readyList,
+
+ // The ready event handler
+ DOMContentLoaded,
+
+ // Save a reference to some core methods
+ toString = Object.prototype.toString,
+ hasOwn = Object.prototype.hasOwnProperty,
+ push = Array.prototype.push,
+ slice = Array.prototype.slice,
+ trim = String.prototype.trim,
+ indexOf = Array.prototype.indexOf,
+
+ // [[Class]] -> type pairs
+ class2type = {};
+
+jQuery.fn = jQuery.prototype = {
+ constructor: jQuery,
+ init: function( selector, context, rootjQuery ) {
+ var match, elem, ret, doc;
+
+ // Handle $(""), $(null), or $(undefined)
+ if ( !selector ) {
+ return this;
+ }
+
+ // Handle $(DOMElement)
+ if ( selector.nodeType ) {
+ this.context = this[0] = selector;
+ this.length = 1;
+ return this;
+ }
+
+ // The body element only exists once, optimize finding it
+ if ( selector === "body" && !context && document.body ) {
+ this.context = document;
+ this[0] = document.body;
+ this.selector = selector;
+ this.length = 1;
+ return this;
+ }
+
+ // Handle HTML strings
+ if ( typeof selector === "string" ) {
+ // Are we dealing with HTML string or an ID?
+ if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
+ // Assume that strings that start and end with <> are HTML and skip the regex check
+ match = [ null, selector, null ];
+
+ } else {
+ match = quickExpr.exec( selector );
+ }
+
+ // Verify a match, and that no context was specified for #id
+ if ( match && (match[1] || !context) ) {
+
+ // HANDLE: $(html) -> $(array)
+ if ( match[1] ) {
+ context = context instanceof jQuery ? context[0] : context;
+ doc = ( context ? context.ownerDocument || context : document );
+
+ // If a single string is passed in and it's a single tag
+ // just do a createElement and skip the rest
+ ret = rsingleTag.exec( selector );
+
+ if ( ret ) {
+ if ( jQuery.isPlainObject( context ) ) {
+ selector = [ document.createElement( ret[1] ) ];
+ jQuery.fn.attr.call( selector, context, true );
+
+ } else {
+ selector = [ doc.createElement( ret[1] ) ];
+ }
+
+ } else {
+ ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
+ selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
+ }
+
+ return jQuery.merge( this, selector );
+
+ // HANDLE: $("#id")
+ } else {
+ elem = document.getElementById( match[2] );
+
+ // Check parentNode to catch when Blackberry 4.6 returns
+ // nodes that are no longer in the document #6963
+ if ( elem && elem.parentNode ) {
+ // Handle the case where IE and Opera return items
+ // by name instead of ID
+ if ( elem.id !== match[2] ) {
+ return rootjQuery.find( selector );
+ }
+
+ // Otherwise, we inject the element directly into the jQuery object
+ this.length = 1;
+ this[0] = elem;
+ }
+
+ this.context = document;
+ this.selector = selector;
+ return this;
+ }
+
+ // HANDLE: $(expr, $(...))
+ } else if ( !context || context.jquery ) {
+ return ( context || rootjQuery ).find( selector );
+
+ // HANDLE: $(expr, context)
+ // (which is just equivalent to: $(context).find(expr)
+ } else {
+ return this.constructor( context ).find( selector );
+ }
+
+ // HANDLE: $(function)
+ // Shortcut for document ready
+ } else if ( jQuery.isFunction( selector ) ) {
+ return rootjQuery.ready( selector );
+ }
+
+ if ( selector.selector !== undefined ) {
+ this.selector = selector.selector;
+ this.context = selector.context;
+ }
+
+ return jQuery.makeArray( selector, this );
+ },
+
+ // Start with an empty selector
+ selector: "",
+
+ // The current version of jQuery being used
+ jquery: "1.7.1",
+
+ // The default length of a jQuery object is 0
+ length: 0,
+
+ // The number of elements contained in the matched element set
+ size: function() {
+ return this.length;
+ },
+
+ toArray: function() {
+ return slice.call( this, 0 );
+ },
+
+ // Get the Nth element in the matched element set OR
+ // Get the whole matched element set as a clean array
+ get: function( num ) {
+ return num == null ?
+
+ // Return a 'clean' array
+ this.toArray() :
+
+ // Return just the object
+ ( num < 0 ? this[ this.length + num ] : this[ num ] );
+ },
+
+ // Take an array of elements and push it onto the stack
+ // (returning the new matched element set)
+ pushStack: function( elems, name, selector ) {
+ // Build a new jQuery matched element set
+ var ret = this.constructor();
+
+ if ( jQuery.isArray( elems ) ) {
+ push.apply( ret, elems );
+
+ } else {
+ jQuery.merge( ret, elems );
+ }
+
+ // Add the old object onto the stack (as a reference)
+ ret.prevObject = this;
+
+ ret.context = this.context;
+
+ if ( name === "find" ) {
+ ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;
+ } else if ( name ) {
+ ret.selector = this.selector + "." + name + "(" + selector + ")";
+ }
+
+ // Return the newly-formed element set
+ return ret;
+ },
+
+ // Execute a callback for every element in the matched set.
+ // (You can seed the arguments with an array of args, but this is
+ // only used internally.)
+ each: function( callback, args ) {
+ return jQuery.each( this, callback, args );
+ },
+
+ ready: function( fn ) {
+ // Attach the listeners
+ jQuery.bindReady();
+
+ // Add the callback
+ readyList.add( fn );
+
+ return this;
+ },
+
+ eq: function( i ) {
+ i = +i;
+ return i === -1 ?
+ this.slice( i ) :
+ this.slice( i, i + 1 );
+ },
+
+ first: function() {
+ return this.eq( 0 );
+ },
+
+ last: function() {
+ return this.eq( -1 );
+ },
+
+ slice: function() {
+ return this.pushStack( slice.apply( this, arguments ),
+ "slice", slice.call(arguments).join(",") );
+ },
+
+ map: function( callback ) {
+ return this.pushStack( jQuery.map(this, function( elem, i ) {
+ return callback.call( elem, i, elem );
+ }));
+ },
+
+ end: function() {
+ return this.prevObject || this.constructor(null);
+ },
+
+ // For internal use only.
+ // Behaves like an Array's method, not like a jQuery method.
+ push: push,
+ sort: [].sort,
+ splice: [].splice
+};
+
+// Give the init function the jQuery prototype for later instantiation
+jQuery.fn.init.prototype = jQuery.fn;
+
+jQuery.extend = jQuery.fn.extend = function() {
+ var options, name, src, copy, copyIsArray, clone,
+ target = arguments[0] || {},
+ i = 1,
+ length = arguments.length,
+ deep = false;
+
+ // Handle a deep copy situation
+ if ( typeof target === "boolean" ) {
+ deep = target;
+ target = arguments[1] || {};
+ // skip the boolean and the target
+ i = 2;
+ }
+
+ // Handle case when target is a string or something (possible in deep copy)
+ if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
+ target = {};
+ }
+
+ // extend jQuery itself if only one argument is passed
+ if ( length === i ) {
+ target = this;
+ --i;
+ }
+
+ for ( ; i < length; i++ ) {
+ // Only deal with non-null/undefined values
+ if ( (options = arguments[ i ]) != null ) {
+ // Extend the base object
+ for ( name in options ) {
+ src = target[ name ];
+ copy = options[ name ];
+
+ // Prevent never-ending loop
+ if ( target === copy ) {
+ continue;
+ }
+
+ // Recurse if we're merging plain objects or arrays
+ if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
+ if ( copyIsArray ) {
+ copyIsArray = false;
+ clone = src && jQuery.isArray(src) ? src : [];
+
+ } else {
+ clone = src && jQuery.isPlainObject(src) ? src : {};
+ }
+
+ // Never move original objects, clone them
+ target[ name ] = jQuery.extend( deep, clone, copy );
+
+ // Don't bring in undefined values
+ } else if ( copy !== undefined ) {
+ target[ name ] = copy;
+ }
+ }
+ }
+ }
+
+ // Return the modified object
+ return target;
+};
+
+jQuery.extend({
+ noConflict: function( deep ) {
+ if ( window.$ === jQuery ) {
+ window.$ = _$;
+ }
+
+ if ( deep && window.jQuery === jQuery ) {
+ window.jQuery = _jQuery;
+ }
+
+ return jQuery;
+ },
+
+ // Is the DOM ready to be used? Set to true once it occurs.
+ isReady: false,
+
+ // A counter to track how many items to wait for before
+ // the ready event fires. See #6781
+ readyWait: 1,
+
+ // Hold (or release) the ready event
+ holdReady: function( hold ) {
+ if ( hold ) {
+ jQuery.readyWait++;
+ } else {
+ jQuery.ready( true );
+ }
+ },
+
+ // Handle when the DOM is ready
+ ready: function( wait ) {
+ // Either a released hold or an DOMready/load event and not yet ready
+ if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {
+ // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
+ if ( !document.body ) {
+ return setTimeout( jQuery.ready, 1 );
+ }
+
+ // Remember that the DOM is ready
+ jQuery.isReady = true;
+
+ // If a normal DOM Ready event fired, decrement, and wait if need be
+ if ( wait !== true && --jQuery.readyWait > 0 ) {
+ return;
+ }
+
+ // If there are functions bound, to execute
+ readyList.fireWith( document, [ jQuery ] );
+
+ // Trigger any bound ready events
+ if ( jQuery.fn.trigger ) {
+ jQuery( document ).trigger( "ready" ).off( "ready" );
+ }
+ }
+ },
+
+ bindReady: function() {
+ if ( readyList ) {
+ return;
+ }
+
+ readyList = jQuery.Callbacks( "once memory" );
+
+ // Catch cases where $(document).ready() is called after the
+ // browser event has already occurred.
+ if ( document.readyState === "complete" ) {
+ // Handle it asynchronously to allow scripts the opportunity to delay ready
+ return setTimeout( jQuery.ready, 1 );
+ }
+
+ // Mozilla, Opera and webkit nightlies currently support this event
+ if ( document.addEventListener ) {
+ // Use the handy event callback
+ document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
+
+ // A fallback to window.onload, that will always work
+ window.addEventListener( "load", jQuery.ready, false );
+
+ // If IE event model is used
+ } else if ( document.attachEvent ) {
+ // ensure firing before onload,
+ // maybe late but safe also for iframes
+ document.attachEvent( "onreadystatechange", DOMContentLoaded );
+
+ // A fallback to window.onload, that will always work
+ window.attachEvent( "onload", jQuery.ready );
+
+ // If IE and not a frame
+ // continually check to see if the document is ready
+ var toplevel = false;
+
+ try {
+ toplevel = window.frameElement == null;
+ } catch(e) {}
+
+ if ( document.documentElement.doScroll && toplevel ) {
+ doScrollCheck();
+ }
+ }
+ },
+
+ // See test/unit/core.js for details concerning isFunction.
+ // Since version 1.3, DOM methods and functions like alert
+ // aren't supported. They return false on IE (#2968).
+ isFunction: function( obj ) {
+ return jQuery.type(obj) === "function";
+ },
+
+ isArray: Array.isArray || function( obj ) {
+ return jQuery.type(obj) === "array";
+ },
+
+ // A crude way of determining if an object is a window
+ isWindow: function( obj ) {
+ return obj && typeof obj === "object" && "setInterval" in obj;
+ },
+
+ isNumeric: function( obj ) {
+ return !isNaN( parseFloat(obj) ) && isFinite( obj );
+ },
+
+ type: function( obj ) {
+ return obj == null ?
+ String( obj ) :
+ class2type[ toString.call(obj) ] || "object";
+ },
+
+ isPlainObject: function( obj ) {
+ // Must be an Object.
+ // Because of IE, we also have to check the presence of the constructor property.
+ // Make sure that DOM nodes and window objects don't pass through, as well
+ if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
+ return false;
+ }
+
+ try {
+ // Not own constructor property must be Object
+ if ( obj.constructor &&
+ !hasOwn.call(obj, "constructor") &&
+ !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
+ return false;
+ }
+ } catch ( e ) {
+ // IE8,9 Will throw exceptions on certain host objects #9897
+ return false;
+ }
+
+ // Own properties are enumerated firstly, so to speed up,
+ // if last one is own, then all properties are own.
+
+ var key;
+ for ( key in obj ) {}
+
+ return key === undefined || hasOwn.call( obj, key );
+ },
+
+ isEmptyObject: function( obj ) {
+ for ( var name in obj ) {
+ return false;
+ }
+ return true;
+ },
+
+ error: function( msg ) {
+ throw new Error( msg );
+ },
+
+ parseJSON: function( data ) {
+ if ( typeof data !== "string" || !data ) {
+ return null;
+ }
+
+ // Make sure leading/trailing whitespace is removed (IE can't handle it)
+ data = jQuery.trim( data );
+
+ // Attempt to parse using the native JSON parser first
+ if ( window.JSON && window.JSON.parse ) {
+ return window.JSON.parse( data );
+ }
+
+ // Make sure the incoming data is actual JSON
+ // Logic borrowed from http://json.org/json2.js
+ if ( rvalidchars.test( data.replace( rvalidescape, "@" )
+ .replace( rvalidtokens, "]" )
+ .replace( rvalidbraces, "")) ) {
+
+ return ( new Function( "return " + data ) )();
+
+ }
+ jQuery.error( "Invalid JSON: " + data );
+ },
+
+ // Cross-browser xml parsing
+ parseXML: function( data ) {
+ var xml, tmp;
+ try {
+ if ( window.DOMParser ) { // Standard
+ tmp = new DOMParser();
+ xml = tmp.parseFromString( data , "text/xml" );
+ } else { // IE
+ xml = new ActiveXObject( "Microsoft.XMLDOM" );
+ xml.async = "false";
+ xml.loadXML( data );
+ }
+ } catch( e ) {
+ xml = undefined;
+ }
+ if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
+ jQuery.error( "Invalid XML: " + data );
+ }
+ return xml;
+ },
+
+ noop: function() {},
+
+ // Evaluates a script in a global context
+ // Workarounds based on findings by Jim Driscoll
+ // http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
+ globalEval: function( data ) {
+ if ( data && rnotwhite.test( data ) ) {
+ // We use execScript on Internet Explorer
+ // We use an anonymous function so that context is window
+ // rather than jQuery in Firefox
+ ( window.execScript || function( data ) {
+ window[ "eval" ].call( window, data );
+ } )( data );
+ }
+ },
+
+ // Convert dashed to camelCase; used by the css and data modules
+ // Microsoft forgot to hump their vendor prefix (#9572)
+ camelCase: function( string ) {
+ return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
+ },
+
+ nodeName: function( elem, name ) {
+ return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
+ },
+
+ // args is for internal usage only
+ each: function( object, callback, args ) {
+ var name, i = 0,
+ length = object.length,
+ isObj = length === undefined || jQuery.isFunction( object );
+
+ if ( args ) {
+ if ( isObj ) {
+ for ( name in object ) {
+ if ( callback.apply( object[ name ], args ) === false ) {
+ break;
+ }
+ }
+ } else {
+ for ( ; i < length; ) {
+ if ( callback.apply( object[ i++ ], args ) === false ) {
+ break;
+ }
+ }
+ }
+
+ // A special, fast, case for the most common use of each
+ } else {
+ if ( isObj ) {
+ for ( name in object ) {
+ if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
+ break;
+ }
+ }
+ } else {
+ for ( ; i < length; ) {
+ if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
+ break;
+ }
+ }
+ }
+ }
+
+ return object;
+ },
+
+ // Use native String.trim function wherever possible
+ trim: trim ?
+ function( text ) {
+ return text == null ?
+ "" :
+ trim.call( text );
+ } :
+
+ // Otherwise use our own trimming functionality
+ function( text ) {
+ return text == null ?
+ "" :
+ text.toString().replace( trimLeft, "" ).replace( trimRight, "" );
+ },
+
+ // results is for internal usage only
+ makeArray: function( array, results ) {
+ var ret = results || [];
+
+ if ( array != null ) {
+ // The window, strings (and functions) also have 'length'
+ // Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930
+ var type = jQuery.type( array );
+
+ if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) {
+ push.call( ret, array );
+ } else {
+ jQuery.merge( ret, array );
+ }
+ }
+
+ return ret;
+ },
+
+ inArray: function( elem, array, i ) {
+ var len;
+
+ if ( array ) {
+ if ( indexOf ) {
+ return indexOf.call( array, elem, i );
+ }
+
+ len = array.length;
+ i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
+
+ for ( ; i < len; i++ ) {
+ // Skip accessing in sparse arrays
+ if ( i in array && array[ i ] === elem ) {
+ return i;
+ }
+ }
+ }
+
+ return -1;
+ },
+
+ merge: function( first, second ) {
+ var i = first.length,
+ j = 0;
+
+ if ( typeof second.length === "number" ) {
+ for ( var l = second.length; j < l; j++ ) {
+ first[ i++ ] = second[ j ];
+ }
+
+ } else {
+ while ( second[j] !== undefined ) {
+ first[ i++ ] = second[ j++ ];
+ }
+ }
+
+ first.length = i;
+
+ return first;
+ },
+
+ grep: function( elems, callback, inv ) {
+ var ret = [], retVal;
+ inv = !!inv;
+
+ // Go through the array, only saving the items
+ // that pass the validator function
+ for ( var i = 0, length = elems.length; i < length; i++ ) {
+ retVal = !!callback( elems[ i ], i );
+ if ( inv !== retVal ) {
+ ret.push( elems[ i ] );
+ }
+ }
+
+ return ret;
+ },
+
+ // arg is for internal usage only
+ map: function( elems, callback, arg ) {
+ var value, key, ret = [],
+ i = 0,
+ length = elems.length,
+ // jquery objects are treated as arrays
+ isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ;
+
+ // Go through the array, translating each of the items to their
+ if ( isArray ) {
+ for ( ; i < length; i++ ) {
+ value = callback( elems[ i ], i, arg );
+
+ if ( value != null ) {
+ ret[ ret.length ] = value;
+ }
+ }
+
+ // Go through every key on the object,
+ } else {
+ for ( key in elems ) {
+ value = callback( elems[ key ], key, arg );
+
+ if ( value != null ) {
+ ret[ ret.length ] = value;
+ }
+ }
+ }
+
+ // Flatten any nested arrays
+ return ret.concat.apply( [], ret );
+ },
+
+ // A global GUID counter for objects
+ guid: 1,
+
+ // Bind a function to a context, optionally partially applying any
+ // arguments.
+ proxy: function( fn, context ) {
+ if ( typeof context === "string" ) {
+ var tmp = fn[ context ];
+ context = fn;
+ fn = tmp;
+ }
+
+ // Quick check to determine if target is callable, in the spec
+ // this throws a TypeError, but we will just return undefined.
+ if ( !jQuery.isFunction( fn ) ) {
+ return undefined;
+ }
+
+ // Simulated bind
+ var args = slice.call( arguments, 2 ),
+ proxy = function() {
+ return fn.apply( context, args.concat( slice.call( arguments ) ) );
+ };
+
+ // Set the guid of unique handler to the same of original handler, so it can be removed
+ proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++;
+
+ return proxy;
+ },
+
+ // Mutifunctional method to get and set values to a collection
+ // The value/s can optionally be executed if it's a function
+ access: function( elems, key, value, exec, fn, pass ) {
+ var length = elems.length;
+
+ // Setting many attributes
+ if ( typeof key === "object" ) {
+ for ( var k in key ) {
+ jQuery.access( elems, k, key[k], exec, fn, value );
+ }
+ return elems;
+ }
+
+ // Setting one attribute
+ if ( value !== undefined ) {
+ // Optionally, function values get executed if exec is true
+ exec = !pass && exec && jQuery.isFunction(value);
+
+ for ( var i = 0; i < length; i++ ) {
+ fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
+ }
+
+ return elems;
+ }
+
+ // Getting an attribute
+ return length ? fn( elems[0], key ) : undefined;
+ },
+
+ now: function() {
+ return ( new Date() ).getTime();
+ },
+
+ // Use of jQuery.browser is frowned upon.
+ // More details: http://docs.jquery.com/Utilities/jQuery.browser
+ uaMatch: function( ua ) {
+ ua = ua.toLowerCase();
+
+ var match = rwebkit.exec( ua ) ||
+ ropera.exec( ua ) ||
+ rmsie.exec( ua ) ||
+ ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) ||
+ [];
+
+ return { browser: match[1] || "", version: match[2] || "0" };
+ },
+
+ sub: function() {
+ function jQuerySub( selector, context ) {
+ return new jQuerySub.fn.init( selector, context );
+ }
+ jQuery.extend( true, jQuerySub, this );
+ jQuerySub.superclass = this;
+ jQuerySub.fn = jQuerySub.prototype = this();
+ jQuerySub.fn.constructor = jQuerySub;
+ jQuerySub.sub = this.sub;
+ jQuerySub.fn.init = function init( selector, context ) {
+ if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) {
+ context = jQuerySub( context );
+ }
+
+ return jQuery.fn.init.call( this, selector, context, rootjQuerySub );
+ };
+ jQuerySub.fn.init.prototype = jQuerySub.fn;
+ var rootjQuerySub = jQuerySub(document);
+ return jQuerySub;
+ },
+
+ browser: {}
+});
+
+// Populate the class2type map
+jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) {
+ class2type[ "[object " + name + "]" ] = name.toLowerCase();
+});
+
+browserMatch = jQuery.uaMatch( userAgent );
+if ( browserMatch.browser ) {
+ jQuery.browser[ browserMatch.browser ] = true;
+ jQuery.browser.version = browserMatch.version;
+}
+
+// Deprecated, use jQuery.browser.webkit instead
+if ( jQuery.browser.webkit ) {
+ jQuery.browser.safari = true;
+}
+
+// IE doesn't match non-breaking spaces with \s
+if ( rnotwhite.test( "\xA0" ) ) {
+ trimLeft = /^[\s\xA0]+/;
+ trimRight = /[\s\xA0]+$/;
+}
+
+// All jQuery objects should point back to these
+rootjQuery = jQuery(document);
+
+// Cleanup functions for the document ready method
+if ( document.addEventListener ) {
+ DOMContentLoaded = function() {
+ document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
+ jQuery.ready();
+ };
+
+} else if ( document.attachEvent ) {
+ DOMContentLoaded = function() {
+ // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
+ if ( document.readyState === "complete" ) {
+ document.detachEvent( "onreadystatechange", DOMContentLoaded );
+ jQuery.ready();
+ }
+ };
+}
+
+// The DOM ready check for Internet Explorer
+function doScrollCheck() {
+ if ( jQuery.isReady ) {
+ return;
+ }
+
+ try {
+ // If IE is used, use the trick by Diego Perini
+ // http://javascript.nwbox.com/IEContentLoaded/
+ document.documentElement.doScroll("left");
+ } catch(e) {
+ setTimeout( doScrollCheck, 1 );
+ return;
+ }
+
+ // and execute any waiting functions
+ jQuery.ready();
+}
+
+return jQuery;
+
+})();
+
+
+// String to Object flags format cache
+var flagsCache = {};
+
+// Convert String-formatted flags into Object-formatted ones and store in cache
+function createFlags( flags ) {
+ var object = flagsCache[ flags ] = {},
+ i, length;
+ flags = flags.split( /\s+/ );
+ for ( i = 0, length = flags.length; i < length; i++ ) {
+ object[ flags[i] ] = true;
+ }
+ return object;
+}
+
+/*
+ * Create a callback list using the following parameters:
+ *
+ * flags: an optional list of space-separated flags that will change how
+ * the callback list behaves
+ *
+ * By default a callback list will act like an event callback list and can be
+ * "fired" multiple times.
+ *
+ * Possible flags:
+ *
+ * once: will ensure the callback list can only be fired once (like a Deferred)
+ *
+ * memory: will keep track of previous values and will call any callback added
+ * after the list has been fired right away with the latest "memorized"
+ * values (like a Deferred)
+ *
+ * unique: will ensure a callback can only be added once (no duplicate in the list)
+ *
+ * stopOnFalse: interrupt callings when a callback returns false
+ *
+ */
+jQuery.Callbacks = function( flags ) {
+
+ // Convert flags from String-formatted to Object-formatted
+ // (we check in cache first)
+ flags = flags ? ( flagsCache[ flags ] || createFlags( flags ) ) : {};
+
+ var // Actual callback list
+ list = [],
+ // Stack of fire calls for repeatable lists
+ stack = [],
+ // Last fire value (for non-forgettable lists)
+ memory,
+ // Flag to know if list is currently firing
+ firing,
+ // First callback to fire (used internally by add and fireWith)
+ firingStart,
+ // End of the loop when firing
+ firingLength,
+ // Index of currently firing callback (modified by remove if needed)
+ firingIndex,
+ // Add one or several callbacks to the list
+ add = function( args ) {
+ var i,
+ length,
+ elem,
+ type,
+ actual;
+ for ( i = 0, length = args.length; i < length; i++ ) {
+ elem = args[ i ];
+ type = jQuery.type( elem );
+ if ( type === "array" ) {
+ // Inspect recursively
+ add( elem );
+ } else if ( type === "function" ) {
+ // Add if not in unique mode and callback is not in
+ if ( !flags.unique || !self.has( elem ) ) {
+ list.push( elem );
+ }
+ }
+ }
+ },
+ // Fire callbacks
+ fire = function( context, args ) {
+ args = args || [];
+ memory = !flags.memory || [ context, args ];
+ firing = true;
+ firingIndex = firingStart || 0;
+ firingStart = 0;
+ firingLength = list.length;
+ for ( ; list && firingIndex < firingLength; firingIndex++ ) {
+ if ( list[ firingIndex ].apply( context, args ) === false && flags.stopOnFalse ) {
+ memory = true; // Mark as halted
+ break;
+ }
+ }
+ firing = false;
+ if ( list ) {
+ if ( !flags.once ) {
+ if ( stack && stack.length ) {
+ memory = stack.shift();
+ self.fireWith( memory[ 0 ], memory[ 1 ] );
+ }
+ } else if ( memory === true ) {
+ self.disable();
+ } else {
+ list = [];
+ }
+ }
+ },
+ // Actual Callbacks object
+ self = {
+ // Add a callback or a collection of callbacks to the list
+ add: function() {
+ if ( list ) {
+ var length = list.length;
+ add( arguments );
+ // Do we need to add the callbacks to the
+ // current firing batch?
+ if ( firing ) {
+ firingLength = list.length;
+ // With memory, if we're not firing then
+ // we should call right away, unless previous
+ // firing was halted (stopOnFalse)
+ } else if ( memory && memory !== true ) {
+ firingStart = length;
+ fire( memory[ 0 ], memory[ 1 ] );
+ }
+ }
+ return this;
+ },
+ // Remove a callback from the list
+ remove: function() {
+ if ( list ) {
+ var args = arguments,
+ argIndex = 0,
+ argLength = args.length;
+ for ( ; argIndex < argLength ; argIndex++ ) {
+ for ( var i = 0; i < list.length; i++ ) {
+ if ( args[ argIndex ] === list[ i ] ) {
+ // Handle firingIndex and firingLength
+ if ( firing ) {
+ if ( i <= firingLength ) {
+ firingLength--;
+ if ( i <= firingIndex ) {
+ firingIndex--;
+ }
+ }
+ }
+ // Remove the element
+ list.splice( i--, 1 );
+ // If we have some unicity property then
+ // we only need to do this once
+ if ( flags.unique ) {
+ break;
+ }
+ }
+ }
+ }
+ }
+ return this;
+ },
+ // Control if a given callback is in the list
+ has: function( fn ) {
+ if ( list ) {
+ var i = 0,
+ length = list.length;
+ for ( ; i < length; i++ ) {
+ if ( fn === list[ i ] ) {
+ return true;
+ }
+ }
+ }
+ return false;
+ },
+ // Remove all callbacks from the list
+ empty: function() {
+ list = [];
+ return this;
+ },
+ // Have the list do nothing anymore
+ disable: function() {
+ list = stack = memory = undefined;
+ return this;
+ },
+ // Is it disabled?
+ disabled: function() {
+ return !list;
+ },
+ // Lock the list in its current state
+ lock: function() {
+ stack = undefined;
+ if ( !memory || memory === true ) {
+ self.disable();
+ }
+ return this;
+ },
+ // Is it locked?
+ locked: function() {
+ return !stack;
+ },
+ // Call all callbacks with the given context and arguments
+ fireWith: function( context, args ) {
+ if ( stack ) {
+ if ( firing ) {
+ if ( !flags.once ) {
+ stack.push( [ context, args ] );
+ }
+ } else if ( !( flags.once && memory ) ) {
+ fire( context, args );
+ }
+ }
+ return this;
+ },
+ // Call all the callbacks with the given arguments
+ fire: function() {
+ self.fireWith( this, arguments );
+ return this;
+ },
+ // To know if the callbacks have already been called at least once
+ fired: function() {
+ return !!memory;
+ }
+ };
+
+ return self;
+};
+
+
+
+
+var // Static reference to slice
+ sliceDeferred = [].slice;
+
+jQuery.extend({
+
+ Deferred: function( func ) {
+ var doneList = jQuery.Callbacks( "once memory" ),
+ failList = jQuery.Callbacks( "once memory" ),
+ progressList = jQuery.Callbacks( "memory" ),
+ state = "pending",
+ lists = {
+ resolve: doneList,
+ reject: failList,
+ notify: progressList
+ },
+ promise = {
+ done: doneList.add,
+ fail: failList.add,
+ progress: progressList.add,
+
+ state: function() {
+ return state;
+ },
+
+ // Deprecated
+ isResolved: doneList.fired,
+ isRejected: failList.fired,
+
+ then: function( doneCallbacks, failCallbacks, progressCallbacks ) {
+ deferred.done( doneCallbacks ).fail( failCallbacks ).progress( progressCallbacks );
+ return this;
+ },
+ always: function() {
+ deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments );
+ return this;
+ },
+ pipe: function( fnDone, fnFail, fnProgress ) {
+ return jQuery.Deferred(function( newDefer ) {
+ jQuery.each( {
+ done: [ fnDone, "resolve" ],
+ fail: [ fnFail, "reject" ],
+ progress: [ fnProgress, "notify" ]
+ }, function( handler, data ) {
+ var fn = data[ 0 ],
+ action = data[ 1 ],
+ returned;
+ if ( jQuery.isFunction( fn ) ) {
+ deferred[ handler ](function() {
+ returned = fn.apply( this, arguments );
+ if ( returned && jQuery.isFunction( returned.promise ) ) {
+ returned.promise().then( newDefer.resolve, newDefer.reject, newDefer.notify );
+ } else {
+ newDefer[ action + "With" ]( this === deferred ? newDefer : this, [ returned ] );
+ }
+ });
+ } else {
+ deferred[ handler ]( newDefer[ action ] );
+ }
+ });
+ }).promise();
+ },
+ // Get a promise for this deferred
+ // If obj is provided, the promise aspect is added to the object
+ promise: function( obj ) {
+ if ( obj == null ) {
+ obj = promise;
+ } else {
+ for ( var key in promise ) {
+ obj[ key ] = promise[ key ];
+ }
+ }
+ return obj;
+ }
+ },
+ deferred = promise.promise({}),
+ key;
+
+ for ( key in lists ) {
+ deferred[ key ] = lists[ key ].fire;
+ deferred[ key + "With" ] = lists[ key ].fireWith;
+ }
+
+ // Handle state
+ deferred.done( function() {
+ state = "resolved";
+ }, failList.disable, progressList.lock ).fail( function() {
+ state = "rejected";
+ }, doneList.disable, progressList.lock );
+
+ // Call given func if any
+ if ( func ) {
+ func.call( deferred, deferred );
+ }
+
+ // All done!
+ return deferred;
+ },
+
+ // Deferred helper
+ when: function( firstParam ) {
+ var args = sliceDeferred.call( arguments, 0 ),
+ i = 0,
+ length = args.length,
+ pValues = new Array( length ),
+ count = length,
+ pCount = length,
+ deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ?
+ firstParam :
+ jQuery.Deferred(),
+ promise = deferred.promise();
+ function resolveFunc( i ) {
+ return function( value ) {
+ args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value;
+ if ( !( --count ) ) {
+ deferred.resolveWith( deferred, args );
+ }
+ };
+ }
+ function progressFunc( i ) {
+ return function( value ) {
+ pValues[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value;
+ deferred.notifyWith( promise, pValues );
+ };
+ }
+ if ( length > 1 ) {
+ for ( ; i < length; i++ ) {
+ if ( args[ i ] && args[ i ].promise && jQuery.isFunction( args[ i ].promise ) ) {
+ args[ i ].promise().then( resolveFunc(i), deferred.reject, progressFunc(i) );
+ } else {
+ --count;
+ }
+ }
+ if ( !count ) {
+ deferred.resolveWith( deferred, args );
+ }
+ } else if ( deferred !== firstParam ) {
+ deferred.resolveWith( deferred, length ? [ firstParam ] : [] );
+ }
+ return promise;
+ }
+});
+
+
+
+
+jQuery.support = (function() {
+
+ var support,
+ all,
+ a,
+ select,
+ opt,
+ input,
+ marginDiv,
+ fragment,
+ tds,
+ events,
+ eventName,
+ i,
+ isSupported,
+ div = document.createElement( "div" ),
+ documentElement = document.documentElement;
+
+ // Preliminary tests
+ div.setAttribute("className", "t");
+ div.innerHTML = " <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
+
+ all = div.getElementsByTagName( "*" );
+ a = div.getElementsByTagName( "a" )[ 0 ];
+
+ // Can't get basic test support
+ if ( !all || !all.length || !a ) {
+ return {};
+ }
+
+ // First batch of supports tests
+ select = document.createElement( "select" );
+ opt = select.appendChild( document.createElement("option") );
+ input = div.getElementsByTagName( "input" )[ 0 ];
+
+ support = {
+ // IE strips leading whitespace when .innerHTML is used
+ leadingWhitespace: ( div.firstChild.nodeType === 3 ),
+
+ // Make sure that tbody elements aren't automatically inserted
+ // IE will insert them into empty tables
+ tbody: !div.getElementsByTagName("tbody").length,
+
+ // Make sure that link elements get serialized correctly by innerHTML
+ // This requires a wrapper element in IE
+ htmlSerialize: !!div.getElementsByTagName("link").length,
+
+ // Get the style information from getAttribute
+ // (IE uses .cssText instead)
+ style: /top/.test( a.getAttribute("style") ),
+
+ // Make sure that URLs aren't manipulated
+ // (IE normalizes it by default)
+ hrefNormalized: ( a.getAttribute("href") === "/a" ),
+
+ // Make sure that element opacity exists
+ // (IE uses filter instead)
+ // Use a regex to work around a WebKit issue. See #5145
+ opacity: /^0.55/.test( a.style.opacity ),
+
+ // Verify style float existence
+ // (IE uses styleFloat instead of cssFloat)
+ cssFloat: !!a.style.cssFloat,
+
+ // Make sure that if no value is specified for a checkbox
+ // that it defaults to "on".
+ // (WebKit defaults to "" instead)
+ checkOn: ( input.value === "on" ),
+
+ // Make sure that a selected-by-default option has a working selected property.
+ // (WebKit defaults to false instead of true, IE too, if it's in an optgroup)
+ optSelected: opt.selected,
+
+ // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
+ getSetAttribute: div.className !== "t",
+
+ // Tests for enctype support on a form(#6743)
+ enctype: !!document.createElement("form").enctype,
+
+ // Makes sure cloning an html5 element does not cause problems
+ // Where outerHTML is undefined, this still works
+ html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>",
+
+ // Will be defined later
+ submitBubbles: true,
+ changeBubbles: true,
+ focusinBubbles: false,
+ deleteExpando: true,
+ noCloneEvent: true,
+ inlineBlockNeedsLayout: false,
+ shrinkWrapBlocks: false,
+ reliableMarginRight: true
+ };
+
+ // Make sure checked status is properly cloned
+ input.checked = true;
+ support.noCloneChecked = input.cloneNode( true ).checked;
+
+ // Make sure that the options inside disabled selects aren't marked as disabled
+ // (WebKit marks them as disabled)
+ select.disabled = true;
+ support.optDisabled = !opt.disabled;
+
+ // Test to see if it's possible to delete an expando from an element
+ // Fails in Internet Explorer
+ try {
+ delete div.test;
+ } catch( e ) {
+ support.deleteExpando = false;
+ }
+
+ if ( !div.addEventListener && div.attachEvent && div.fireEvent ) {
+ div.attachEvent( "onclick", function() {
+ // Cloning a node shouldn't copy over any
+ // bound event handlers (IE does this)
+ support.noCloneEvent = false;
+ });
+ div.cloneNode( true ).fireEvent( "onclick" );
+ }
+
+ // Check if a radio maintains its value
+ // after being appended to the DOM
+ input = document.createElement("input");
+ input.value = "t";
+ input.setAttribute("type", "radio");
+ support.radioValue = input.value === "t";
+
+ input.setAttribute("checked", "checked");
+ div.appendChild( input );
+ fragment = document.createDocumentFragment();
+ fragment.appendChild( div.lastChild );
+
+ // WebKit doesn't clone checked state correctly in fragments
+ support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;
+
+ // Check if a disconnected checkbox will retain its checked
+ // value of true after appended to the DOM (IE6/7)
+ support.appendChecked = input.checked;
+
+ fragment.removeChild( input );
+ fragment.appendChild( div );
+
+ div.innerHTML = "";
+
+ // Check if div with explicit width and no margin-right incorrectly
+ // gets computed margin-right based on width of container. For more
+ // info see bug #3333
+ // Fails in WebKit before Feb 2011 nightlies
+ // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
+ if ( window.getComputedStyle ) {
+ marginDiv = document.createElement( "div" );
+ marginDiv.style.width = "0";
+ marginDiv.style.marginRight = "0";
+ div.style.width = "2px";
+ div.appendChild( marginDiv );
+ support.reliableMarginRight =
+ ( parseInt( ( window.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0;
+ }
+
+ // Technique from Juriy Zaytsev
+ // http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
+ // We only care about the case where non-standard event systems
+ // are used, namely in IE. Short-circuiting here helps us to
+ // avoid an eval call (in setAttribute) which can cause CSP
+ // to go haywire. See: https://developer.mozilla.org/en/Security/CSP
+ if ( div.attachEvent ) {
+ for( i in {
+ submit: 1,
+ change: 1,
+ focusin: 1
+ }) {
+ eventName = "on" + i;
+ isSupported = ( eventName in div );
+ if ( !isSupported ) {
+ div.setAttribute( eventName, "return;" );
+ isSupported = ( typeof div[ eventName ] === "function" );
+ }
+ support[ i + "Bubbles" ] = isSupported;
+ }
+ }
+
+ fragment.removeChild( div );
+
+ // Null elements to avoid leaks in IE
+ fragment = select = opt = marginDiv = div = input = null;
+
+ // Run tests that need a body at doc ready
+ jQuery(function() {
+ var container, outer, inner, table, td, offsetSupport,
+ conMarginTop, ptlm, vb, style, html,
+ body = document.getElementsByTagName("body")[0];
+
+ if ( !body ) {
+ // Return for frameset docs that don't have a body
+ return;
+ }
+
+ conMarginTop = 1;
+ ptlm = "position:absolute;top:0;left:0;width:1px;height:1px;margin:0;";
+ vb = "visibility:hidden;border:0;";
+ style = "style='" + ptlm + "border:5px solid #000;padding:0;'";
+ html = "<div " + style + "><div></div></div>" +
+ "<table " + style + " cellpadding='0' cellspacing='0'>" +
+ "<tr><td></td></tr></table>";
+
+ container = document.createElement("div");
+ container.style.cssText = vb + "width:0;height:0;position:static;top:0;margin-top:" + conMarginTop + "px";
+ body.insertBefore( container, body.firstChild );
+
+ // Construct the test element
+ div = document.createElement("div");
+ container.appendChild( div );
+
+ // Check if table cells still have offsetWidth/Height when they are set
+ // to display:none and there are still other visible table cells in a
+ // table row; if so, offsetWidth/Height are not reliable for use when
+ // determining if an element has been hidden directly using
+ // display:none (it is still safe to use offsets if a parent element is
+ // hidden; don safety goggles and see bug #4512 for more information).
+ // (only IE 8 fails this test)
+ div.innerHTML = "<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>";
+ tds = div.getElementsByTagName( "td" );
+ isSupported = ( tds[ 0 ].offsetHeight === 0 );
+
+ tds[ 0 ].style.display = "";
+ tds[ 1 ].style.display = "none";
+
+ // Check if empty table cells still have offsetWidth/Height
+ // (IE <= 8 fail this test)
+ support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );
+
+ // Figure out if the W3C box model works as expected
+ div.innerHTML = "";
+ div.style.width = div.style.paddingLeft = "1px";
+ jQuery.boxModel = support.boxModel = div.offsetWidth === 2;
+
+ if ( typeof div.style.zoom !== "undefined" ) {
+ // Check if natively block-level elements act like inline-block
+ // elements when setting their display to 'inline' and giving
+ // them layout
+ // (IE < 8 does this)
+ div.style.display = "inline";
+ div.style.zoom = 1;
+ support.inlineBlockNeedsLayout = ( div.offsetWidth === 2 );
+
+ // Check if elements with layout shrink-wrap their children
+ // (IE 6 does this)
+ div.style.display = "";
+ div.innerHTML = "<div style='width:4px;'></div>";
+ support.shrinkWrapBlocks = ( div.offsetWidth !== 2 );
+ }
+
+ div.style.cssText = ptlm + vb;
+ div.innerHTML = html;
+
+ outer = div.firstChild;
+ inner = outer.firstChild;
+ td = outer.nextSibling.firstChild.firstChild;
+
+ offsetSupport = {
+ doesNotAddBorder: ( inner.offsetTop !== 5 ),
+ doesAddBorderForTableAndCells: ( td.offsetTop === 5 )
+ };
+
+ inner.style.position = "fixed";
+ inner.style.top = "20px";
+
+ // safari subtracts parent border width here which is 5px
+ offsetSupport.fixedPosition = ( inner.offsetTop === 20 || inner.offsetTop === 15 );
+ inner.style.position = inner.style.top = "";
+
+ outer.style.overflow = "hidden";
+ outer.style.position = "relative";
+
+ offsetSupport.subtractsBorderForOverflowNotVisible = ( inner.offsetTop === -5 );
+ offsetSupport.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== conMarginTop );
+
+ body.removeChild( container );
+ div = container = null;
+
+ jQuery.extend( support, offsetSupport );
+ });
+
+ return support;
+})();
+
+
+
+
+var rbrace = /^(?:\{.*\}|\[.*\])$/,
+ rmultiDash = /([A-Z])/g;
+
+jQuery.extend({
+ cache: {},
+
+ // Please use with caution
+ uuid: 0,
+
+ // Unique for each copy of jQuery on the page
+ // Non-digits removed to match rinlinejQuery
+ expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),
+
+ // The following elements throw uncatchable exceptions if you
+ // attempt to add expando properties to them.
+ noData: {
+ "embed": true,
+ // Ban all objects except for Flash (which handle expandos)
+ "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
+ "applet": true
+ },
+
+ hasData: function( elem ) {
+ elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ];
+ return !!elem && !isEmptyDataObject( elem );
+ },
+
+ data: function( elem, name, data, pvt /* Internal Use Only */ ) {
+ if ( !jQuery.acceptData( elem ) ) {
+ return;
+ }
+
+ var privateCache, thisCache, ret,
+ internalKey = jQuery.expando,
+ getByName = typeof name === "string",
+
+ // We have to handle DOM nodes and JS objects differently because IE6-7
+ // can't GC object references properly across the DOM-JS boundary
+ isNode = elem.nodeType,
+
+ // Only DOM nodes need the global jQuery cache; JS object data is
+ // attached directly to the object so GC can occur automatically
+ cache = isNode ? jQuery.cache : elem,
+
+ // Only defining an ID for JS objects if its cache already exists allows
+ // the code to shortcut on the same path as a DOM node with no cache
+ id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey,
+ isEvents = name === "events";
+
+ // Avoid doing any more work than we need to when trying to get data on an
+ // object that has no data at all
+ if ( (!id || !cache[id] || (!isEvents && !pvt && !cache[id].data)) && getByName && data === undefined ) {
+ return;
+ }
+
+ if ( !id ) {
+ // Only DOM nodes need a new unique ID for each element since their data
+ // ends up in the global cache
+ if ( isNode ) {
+ elem[ internalKey ] = id = ++jQuery.uuid;
+ } else {
+ id = internalKey;
+ }
+ }
+
+ if ( !cache[ id ] ) {
+ cache[ id ] = {};
+
+ // Avoids exposing jQuery metadata on plain JS objects when the object
+ // is serialized using JSON.stringify
+ if ( !isNode ) {
+ cache[ id ].toJSON = jQuery.noop;
+ }
+ }
+
+ // An object can be passed to jQuery.data instead of a key/value pair; this gets
+ // shallow copied over onto the existing cache
+ if ( typeof name === "object" || typeof name === "function" ) {
+ if ( pvt ) {
+ cache[ id ] = jQuery.extend( cache[ id ], name );
+ } else {
+ cache[ id ].data = jQuery.extend( cache[ id ].data, name );
+ }
+ }
+
+ privateCache = thisCache = cache[ id ];
+
+ // jQuery data() is stored in a separate object inside the object's internal data
+ // cache in order to avoid key collisions between internal data and user-defined
+ // data.
+ if ( !pvt ) {
+ if ( !thisCache.data ) {
+ thisCache.data = {};
+ }
+
+ thisCache = thisCache.data;
+ }
+
+ if ( data !== undefined ) {
+ thisCache[ jQuery.camelCase( name ) ] = data;
+ }
+
+ // Users should not attempt to inspect the internal events object using jQuery.data,
+ // it is undocumented and subject to change. But does anyone listen? No.
+ if ( isEvents && !thisCache[ name ] ) {
+ return privateCache.events;
+ }
+
+ // Check for both converted-to-camel and non-converted data property names
+ // If a data property was specified
+ if ( getByName ) {
+
+ // First Try to find as-is property data
+ ret = thisCache[ name ];
+
+ // Test for null|undefined property data
+ if ( ret == null ) {
+
+ // Try to find the camelCased property
+ ret = thisCache[ jQuery.camelCase( name ) ];
+ }
+ } else {
+ ret = thisCache;
+ }
+
+ return ret;
+ },
+
+ removeData: function( elem, name, pvt /* Internal Use Only */ ) {
+ if ( !jQuery.acceptData( elem ) ) {
+ return;
+ }
+
+ var thisCache, i, l,
+
+ // Reference to internal data cache key
+ internalKey = jQuery.expando,
+
+ isNode = elem.nodeType,
+
+ // See jQuery.data for more information
+ cache = isNode ? jQuery.cache : elem,
+
+ // See jQuery.data for more information
+ id = isNode ? elem[ internalKey ] : internalKey;
+
+ // If there is already no cache entry for this object, there is no
+ // purpose in continuing
+ if ( !cache[ id ] ) {
+ return;
+ }
+
+ if ( name ) {
+
+ thisCache = pvt ? cache[ id ] : cache[ id ].data;
+
+ if ( thisCache ) {
+
+ // Support array or space separated string names for data keys
+ if ( !jQuery.isArray( name ) ) {
+
+ // try the string as a key before any manipulation
+ if ( name in thisCache ) {
+ name = [ name ];
+ } else {
+
+ // split the camel cased version by spaces unless a key with the spaces exists
+ name = jQuery.camelCase( name );
+ if ( name in thisCache ) {
+ name = [ name ];
+ } else {
+ name = name.split( " " );
+ }
+ }
+ }
+
+ for ( i = 0, l = name.length; i < l; i++ ) {
+ delete thisCache[ name[i] ];
+ }
+
+ // If there is no data left in the cache, we want to continue
+ // and let the cache object itself get destroyed
+ if ( !( pvt ? isEmptyDataObject : jQuery.isEmptyObject )( thisCache ) ) {
+ return;
+ }
+ }
+ }
+
+ // See jQuery.data for more information
+ if ( !pvt ) {
+ delete cache[ id ].data;
+
+ // Don't destroy the parent cache unless the internal data object
+ // had been the only thing left in it
+ if ( !isEmptyDataObject(cache[ id ]) ) {
+ return;
+ }
+ }
+
+ // Browsers that fail expando deletion also refuse to delete expandos on
+ // the window, but it will allow it on all other JS objects; other browsers
+ // don't care
+ // Ensure that `cache` is not a window object #10080
+ if ( jQuery.support.deleteExpando || !cache.setInterval ) {
+ delete cache[ id ];
+ } else {
+ cache[ id ] = null;
+ }
+
+ // We destroyed the cache and need to eliminate the expando on the node to avoid
+ // false lookups in the cache for entries that no longer exist
+ if ( isNode ) {
+ // IE does not allow us to delete expando properties from nodes,
+ // nor does it have a removeAttribute function on Document nodes;
+ // we must handle all of these cases
+ if ( jQuery.support.deleteExpando ) {
+ delete elem[ internalKey ];
+ } else if ( elem.removeAttribute ) {
+ elem.removeAttribute( internalKey );
+ } else {
+ elem[ internalKey ] = null;
+ }
+ }
+ },
+
+ // For internal use only.
+ _data: function( elem, name, data ) {
+ return jQuery.data( elem, name, data, true );
+ },
+
+ // A method for determining if a DOM node can handle the data expando
+ acceptData: function( elem ) {
+ if ( elem.nodeName ) {
+ var match = jQuery.noData[ elem.nodeName.toLowerCase() ];
+
+ if ( match ) {
+ return !(match === true || elem.getAttribute("classid") !== match);
+ }
+ }
+
+ return true;
+ }
+});
+
+jQuery.fn.extend({
+ data: function( key, value ) {
+ var parts, attr, name,
+ data = null;
+
+ if ( typeof key === "undefined" ) {
+ if ( this.length ) {
+ data = jQuery.data( this[0] );
+
+ if ( this[0].nodeType === 1 && !jQuery._data( this[0], "parsedAttrs" ) ) {
+ attr = this[0].attributes;
+ for ( var i = 0, l = attr.length; i < l; i++ ) {
+ name = attr[i].name;
+
+ if ( name.indexOf( "data-" ) === 0 ) {
+ name = jQuery.camelCase( name.substring(5) );
+
+ dataAttr( this[0], name, data[ name ] );
+ }
+ }
+ jQuery._data( this[0], "parsedAttrs", true );
+ }
+ }
+
+ return data;
+
+ } else if ( typeof key === "object" ) {
+ return this.each(function() {
+ jQuery.data( this, key );
+ });
+ }
+
+ parts = key.split(".");
+ parts[1] = parts[1] ? "." + parts[1] : "";
+
+ if ( value === undefined ) {
+ data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]);
+
+ // Try to fetch any internally stored data first
+ if ( data === undefined && this.length ) {
+ data = jQuery.data( this[0], key );
+ data = dataAttr( this[0], key, data );
+ }
+
+ return data === undefined && parts[1] ?
+ this.data( parts[0] ) :
+ data;
+
+ } else {
+ return this.each(function() {
+ var self = jQuery( this ),
+ args = [ parts[0], value ];
+
+ self.triggerHandler( "setData" + parts[1] + "!", args );
+ jQuery.data( this, key, value );
+ self.triggerHandler( "changeData" + parts[1] + "!", args );
+ });
+ }
+ },
+
+ removeData: function( key ) {
+ return this.each(function() {
+ jQuery.removeData( this, key );
+ });
+ }
+});
+
+function dataAttr( elem, key, data ) {
+ // If nothing was found internally, try to fetch any
+ // data from the HTML5 data-* attribute
+ if ( data === undefined && elem.nodeType === 1 ) {
+
+ var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
+
+ data = elem.getAttribute( name );
+
+ if ( typeof data === "string" ) {
+ try {
+ data = data === "true" ? true :
+ data === "false" ? false :
+ data === "null" ? null :
+ jQuery.isNumeric( data ) ? parseFloat( data ) :
+ rbrace.test( data ) ? jQuery.parseJSON( data ) :
+ data;
+ } catch( e ) {}
+
+ // Make sure we set the data so it isn't changed later
+ jQuery.data( elem, key, data );
+
+ } else {
+ data = undefined;
+ }
+ }
+
+ return data;
+}
+
+// checks a cache object for emptiness
+function isEmptyDataObject( obj ) {
+ for ( var name in obj ) {
+
+ // if the public data object is empty, the private is still empty
+ if ( name === "data" && jQuery.isEmptyObject( obj[name] ) ) {
+ continue;
+ }
+ if ( name !== "toJSON" ) {
+ return false;
+ }
+ }
+
+ return true;
+}
+
+
+
+
+function handleQueueMarkDefer( elem, type, src ) {
+ var deferDataKey = type + "defer",
+ queueDataKey = type + "queue",
+ markDataKey = type + "mark",
+ defer = jQuery._data( elem, deferDataKey );
+ if ( defer &&
+ ( src === "queue" || !jQuery._data(elem, queueDataKey) ) &&
+ ( src === "mark" || !jQuery._data(elem, markDataKey) ) ) {
+ // Give room for hard-coded callbacks to fire first
+ // and eventually mark/queue something else on the element
+ setTimeout( function() {
+ if ( !jQuery._data( elem, queueDataKey ) &&
+ !jQuery._data( elem, markDataKey ) ) {
+ jQuery.removeData( elem, deferDataKey, true );
+ defer.fire();
+ }
+ }, 0 );
+ }
+}
+
+jQuery.extend({
+
+ _mark: function( elem, type ) {
+ if ( elem ) {
+ type = ( type || "fx" ) + "mark";
+ jQuery._data( elem, type, (jQuery._data( elem, type ) || 0) + 1 );
+ }
+ },
+
+ _unmark: function( force, elem, type ) {
+ if ( force !== true ) {
+ type = elem;
+ elem = force;
+ force = false;
+ }
+ if ( elem ) {
+ type = type || "fx";
+ var key = type + "mark",
+ count = force ? 0 : ( (jQuery._data( elem, key ) || 1) - 1 );
+ if ( count ) {
+ jQuery._data( elem, key, count );
+ } else {
+ jQuery.removeData( elem, key, true );
+ handleQueueMarkDefer( elem, type, "mark" );
+ }
+ }
+ },
+
+ queue: function( elem, type, data ) {
+ var q;
+ if ( elem ) {
+ type = ( type || "fx" ) + "queue";
+ q = jQuery._data( elem, type );
+
+ // Speed up dequeue by getting out quickly if this is just a lookup
+ if ( data ) {
+ if ( !q || jQuery.isArray(data) ) {
+ q = jQuery._data( elem, type, jQuery.makeArray(data) );
+ } else {
+ q.push( data );
+ }
+ }
+ return q || [];
+ }
+ },
+
+ dequeue: function( elem, type ) {
+ type = type || "fx";
+
+ var queue = jQuery.queue( elem, type ),
+ fn = queue.shift(),
+ hooks = {};
+
+ // If the fx queue is dequeued, always remove the progress sentinel
+ if ( fn === "inprogress" ) {
+ fn = queue.shift();
+ }
+
+ if ( fn ) {
+ // Add a progress sentinel to prevent the fx queue from being
+ // automatically dequeued
+ if ( type === "fx" ) {
+ queue.unshift( "inprogress" );
+ }
+
+ jQuery._data( elem, type + ".run", hooks );
+ fn.call( elem, function() {
+ jQuery.dequeue( elem, type );
+ }, hooks );
+ }
+
+ if ( !queue.length ) {
+ jQuery.removeData( elem, type + "queue " + type + ".run", true );
+ handleQueueMarkDefer( elem, type, "queue" );
+ }
+ }
+});
+
+jQuery.fn.extend({
+ queue: function( type, data ) {
+ if ( typeof type !== "string" ) {
+ data = type;
+ type = "fx";
+ }
+
+ if ( data === undefined ) {
+ return jQuery.queue( this[0], type );
+ }
+ return this.each(function() {
+ var queue = jQuery.queue( this, type, data );
+
+ if ( type === "fx" && queue[0] !== "inprogress" ) {
+ jQuery.dequeue( this, type );
+ }
+ });
+ },
+ dequeue: function( type ) {
+ return this.each(function() {
+ jQuery.dequeue( this, type );
+ });
+ },
+ // Based off of the plugin by Clint Helfers, with permission.
+ // http://blindsignals.com/index.php/2009/07/jquery-delay/
+ delay: function( time, type ) {
+ time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
+ type = type || "fx";
+
+ return this.queue( type, function( next, hooks ) {
+ var timeout = setTimeout( next, time );
+ hooks.stop = function() {
+ clearTimeout( timeout );
+ };
+ });
+ },
+ clearQueue: function( type ) {
+ return this.queue( type || "fx", [] );
+ },
+ // Get a promise resolved when queues of a certain type
+ // are emptied (fx is the type by default)
+ promise: function( type, object ) {
+ if ( typeof type !== "string" ) {
+ object = type;
+ type = undefined;
+ }
+ type = type || "fx";
+ var defer = jQuery.Deferred(),
+ elements = this,
+ i = elements.length,
+ count = 1,
+ deferDataKey = type + "defer",
+ queueDataKey = type + "queue",
+ markDataKey = type + "mark",
+ tmp;
+ function resolve() {
+ if ( !( --count ) ) {
+ defer.resolveWith( elements, [ elements ] );
+ }
+ }
+ while( i-- ) {
+ if (( tmp = jQuery.data( elements[ i ], deferDataKey, undefined, true ) ||
+ ( jQuery.data( elements[ i ], queueDataKey, undefined, true ) ||
+ jQuery.data( elements[ i ], markDataKey, undefined, true ) ) &&
+ jQuery.data( elements[ i ], deferDataKey, jQuery.Callbacks( "once memory" ), true ) )) {
+ count++;
+ tmp.add( resolve );
+ }
+ }
+ resolve();
+ return defer.promise();
+ }
+});
+
+
+
+
+var rclass = /[\n\t\r]/g,
+ rspace = /\s+/,
+ rreturn = /\r/g,
+ rtype = /^(?:button|input)$/i,
+ rfocusable = /^(?:button|input|object|select|textarea)$/i,
+ rclickable = /^a(?:rea)?$/i,
+ rboolean = /^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,
+ getSetAttribute = jQuery.support.getSetAttribute,
+ nodeHook, boolHook, fixSpecified;
+
+jQuery.fn.extend({
+ attr: function( name, value ) {
+ return jQuery.access( this, name, value, true, jQuery.attr );
+ },
+
+ removeAttr: function( name ) {
+ return this.each(function() {
+ jQuery.removeAttr( this, name );
+ });
+ },
+
+ prop: function( name, value ) {
+ return jQuery.access( this, name, value, true, jQuery.prop );
+ },
+
+ removeProp: function( name ) {
+ name = jQuery.propFix[ name ] || name;
+ return this.each(function() {
+ // try/catch handles cases where IE balks (such as removing a property on window)
+ try {
+ this[ name ] = undefined;
+ delete this[ name ];
+ } catch( e ) {}
+ });
+ },
+
+ addClass: function( value ) {
+ var classNames, i, l, elem,
+ setClass, c, cl;
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( j ) {
+ jQuery( this ).addClass( value.call(this, j, this.className) );
+ });
+ }
+
+ if ( value && typeof value === "string" ) {
+ classNames = value.split( rspace );
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.nodeType === 1 ) {
+ if ( !elem.className && classNames.length === 1 ) {
+ elem.className = value;
+
+ } else {
+ setClass = " " + elem.className + " ";
+
+ for ( c = 0, cl = classNames.length; c < cl; c++ ) {
+ if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
+ setClass += classNames[ c ] + " ";
+ }
+ }
+ elem.className = jQuery.trim( setClass );
+ }
+ }
+ }
+ }
+
+ return this;
+ },
+
+ removeClass: function( value ) {
+ var classNames, i, l, elem, className, c, cl;
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( j ) {
+ jQuery( this ).removeClass( value.call(this, j, this.className) );
+ });
+ }
+
+ if ( (value && typeof value === "string") || value === undefined ) {
+ classNames = ( value || "" ).split( rspace );
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.nodeType === 1 && elem.className ) {
+ if ( value ) {
+ className = (" " + elem.className + " ").replace( rclass, " " );
+ for ( c = 0, cl = classNames.length; c < cl; c++ ) {
+ className = className.replace(" " + classNames[ c ] + " ", " ");
+ }
+ elem.className = jQuery.trim( className );
+
+ } else {
+ elem.className = "";
+ }
+ }
+ }
+ }
+
+ return this;
+ },
+
+ toggleClass: function( value, stateVal ) {
+ var type = typeof value,
+ isBool = typeof stateVal === "boolean";
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( i ) {
+ jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );
+ });
+ }
+
+ return this.each(function() {
+ if ( type === "string" ) {
+ // toggle individual class names
+ var className,
+ i = 0,
+ self = jQuery( this ),
+ state = stateVal,
+ classNames = value.split( rspace );
+
+ while ( (className = classNames[ i++ ]) ) {
+ // check each className given, space seperated list
+ state = isBool ? state : !self.hasClass( className );
+ self[ state ? "addClass" : "removeClass" ]( className );
+ }
+
+ } else if ( type === "undefined" || type === "boolean" ) {
+ if ( this.className ) {
+ // store className if set
+ jQuery._data( this, "__className__", this.className );
+ }
+
+ // toggle whole className
+ this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || "";
+ }
+ });
+ },
+
+ hasClass: function( selector ) {
+ var className = " " + selector + " ",
+ i = 0,
+ l = this.length;
+ for ( ; i < l; i++ ) {
+ if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) {
+ return true;
+ }
+ }
+
+ return false;
+ },
+
+ val: function( value ) {
+ var hooks, ret, isFunction,
+ elem = this[0];
+
+ if ( !arguments.length ) {
+ if ( elem ) {
+ hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ];
+
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
+ return ret;
+ }
+
+ ret = elem.value;
+
+ return typeof ret === "string" ?
+ // handle most common string cases
+ ret.replace(rreturn, "") :
+ // handle cases where value is null/undef or number
+ ret == null ? "" : ret;
+ }
+
+ return;
+ }
+
+ isFunction = jQuery.isFunction( value );
+
+ return this.each(function( i ) {
+ var self = jQuery(this), val;
+
+ if ( this.nodeType !== 1 ) {
+ return;
+ }
+
+ if ( isFunction ) {
+ val = value.call( this, i, self.val() );
+ } else {
+ val = value;
+ }
+
+ // Treat null/undefined as ""; convert numbers to string
+ if ( val == null ) {
+ val = "";
+ } else if ( typeof val === "number" ) {
+ val += "";
+ } else if ( jQuery.isArray( val ) ) {
+ val = jQuery.map(val, function ( value ) {
+ return value == null ? "" : value + "";
+ });
+ }
+
+ hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ];
+
+ // If set returns undefined, fall back to normal setting
+ if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
+ this.value = val;
+ }
+ });
+ }
+});
+
+jQuery.extend({
+ valHooks: {
+ option: {
+ get: function( elem ) {
+ // attributes.value is undefined in Blackberry 4.7 but
+ // uses .value. See #6932
+ var val = elem.attributes.value;
+ return !val || val.specified ? elem.value : elem.text;
+ }
+ },
+ select: {
+ get: function( elem ) {
+ var value, i, max, option,
+ index = elem.selectedIndex,
+ values = [],
+ options = elem.options,
+ one = elem.type === "select-one";
+
+ // Nothing was selected
+ if ( index < 0 ) {
+ return null;
+ }
+
+ // Loop through all the selected options
+ i = one ? index : 0;
+ max = one ? index + 1 : options.length;
+ for ( ; i < max; i++ ) {
+ option = options[ i ];
+
+ // Don't return options that are disabled or in a disabled optgroup
+ if ( option.selected && (jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) &&
+ (!option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" )) ) {
+
+ // Get the specific value for the option
+ value = jQuery( option ).val();
+
+ // We don't need an array for one selects
+ if ( one ) {
+ return value;
+ }
+
+ // Multi-Selects return an array
+ values.push( value );
+ }
+ }
+
+ // Fixes Bug #2551 -- select.val() broken in IE after form.reset()
+ if ( one && !values.length && options.length ) {
+ return jQuery( options[ index ] ).val();
+ }
+
+ return values;
+ },
+
+ set: function( elem, value ) {
+ var values = jQuery.makeArray( value );
+
+ jQuery(elem).find("option").each(function() {
+ this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0;
+ });
+
+ if ( !values.length ) {
+ elem.selectedIndex = -1;
+ }
+ return values;
+ }
+ }
+ },
+
+ attrFn: {
+ val: true,
+ css: true,
+ html: true,
+ text: true,
+ data: true,
+ width: true,
+ height: true,
+ offset: true
+ },
+
+ attr: function( elem, name, value, pass ) {
+ var ret, hooks, notxml,
+ nType = elem.nodeType;
+
+ // don't get/set attributes on text, comment and attribute nodes
+ if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
+ return;
+ }
+
+ if ( pass && name in jQuery.attrFn ) {
+ return jQuery( elem )[ name ]( value );
+ }
+
+ // Fallback to prop when attributes are not supported
+ if ( typeof elem.getAttribute === "undefined" ) {
+ return jQuery.prop( elem, name, value );
+ }
+
+ notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
+
+ // All attributes are lowercase
+ // Grab necessary hook if one is defined
+ if ( notxml ) {
+ name = name.toLowerCase();
+ hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
+ }
+
+ if ( value !== undefined ) {
+
+ if ( value === null ) {
+ jQuery.removeAttr( elem, name );
+ return;
+
+ } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
+ return ret;
+
+ } else {
+ elem.setAttribute( name, "" + value );
+ return value;
+ }
+
+ } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
+ return ret;
+
+ } else {
+
+ ret = elem.getAttribute( name );
+
+ // Non-existent attributes return null, we normalize to undefined
+ return ret === null ?
+ undefined :
+ ret;
+ }
+ },
+
+ removeAttr: function( elem, value ) {
+ var propName, attrNames, name, l,
+ i = 0;
+
+ if ( value && elem.nodeType === 1 ) {
+ attrNames = value.toLowerCase().split( rspace );
+ l = attrNames.length;
+
+ for ( ; i < l; i++ ) {
+ name = attrNames[ i ];
+
+ if ( name ) {
+ propName = jQuery.propFix[ name ] || name;
+
+ // See #9699 for explanation of this approach (setting first, then removal)
+ jQuery.attr( elem, name, "" );
+ elem.removeAttribute( getSetAttribute ? name : propName );
+
+ // Set corresponding property to false for boolean attributes
+ if ( rboolean.test( name ) && propName in elem ) {
+ elem[ propName ] = false;
+ }
+ }
+ }
+ }
+ },
+
+ attrHooks: {
+ type: {
+ set: function( elem, value ) {
+ // We can't allow the type property to be changed (since it causes problems in IE)
+ if ( rtype.test( elem.nodeName ) && elem.parentNode ) {
+ jQuery.error( "type property can't be changed" );
+ } else if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {
+ // Setting the type on a radio button after the value resets the value in IE6-9
+ // Reset value to it's default in case type is set after value
+ // This is for element creation
+ var val = elem.value;
+ elem.setAttribute( "type", value );
+ if ( val ) {
+ elem.value = val;
+ }
+ return value;
+ }
+ }
+ },
+ // Use the value property for back compat
+ // Use the nodeHook for button elements in IE6/7 (#1954)
+ value: {
+ get: function( elem, name ) {
+ if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {
+ return nodeHook.get( elem, name );
+ }
+ return name in elem ?
+ elem.value :
+ null;
+ },
+ set: function( elem, value, name ) {
+ if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {
+ return nodeHook.set( elem, value, name );
+ }
+ // Does not return so that setAttribute is also used
+ elem.value = value;
+ }
+ }
+ },
+
+ propFix: {
+ tabindex: "tabIndex",
+ readonly: "readOnly",
+ "for": "htmlFor",
+ "class": "className",
+ maxlength: "maxLength",
+ cellspacing: "cellSpacing",
+ cellpadding: "cellPadding",
+ rowspan: "rowSpan",
+ colspan: "colSpan",
+ usemap: "useMap",
+ frameborder: "frameBorder",
+ contenteditable: "contentEditable"
+ },
+
+ prop: function( elem, name, value ) {
+ var ret, hooks, notxml,
+ nType = elem.nodeType;
+
+ // don't get/set properties on text, comment and attribute nodes
+ if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
+ return;
+ }
+
+ notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
+
+ if ( notxml ) {
+ // Fix name and attach hooks
+ name = jQuery.propFix[ name ] || name;
+ hooks = jQuery.propHooks[ name ];
+ }
+
+ if ( value !== undefined ) {
+ if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
+ return ret;
+
+ } else {
+ return ( elem[ name ] = value );
+ }
+
+ } else {
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
+ return ret;
+
+ } else {
+ return elem[ name ];
+ }
+ }
+ },
+
+ propHooks: {
+ tabIndex: {
+ get: function( elem ) {
+ // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set
+ // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
+ var attributeNode = elem.getAttributeNode("tabindex");
+
+ return attributeNode && attributeNode.specified ?
+ parseInt( attributeNode.value, 10 ) :
+ rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ?
+ 0 :
+ undefined;
+ }
+ }
+ }
+});
+
+// Add the tabIndex propHook to attrHooks for back-compat (different case is intentional)
+jQuery.attrHooks.tabindex = jQuery.propHooks.tabIndex;
+
+// Hook for boolean attributes
+boolHook = {
+ get: function( elem, name ) {
+ // Align boolean attributes with corresponding properties
+ // Fall back to attribute presence where some booleans are not supported
+ var attrNode,
+ property = jQuery.prop( elem, name );
+ return property === true || typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ?
+ name.toLowerCase() :
+ undefined;
+ },
+ set: function( elem, value, name ) {
+ var propName;
+ if ( value === false ) {
+ // Remove boolean attributes when set to false
+ jQuery.removeAttr( elem, name );
+ } else {
+ // value is true since we know at this point it's type boolean and not false
+ // Set boolean attributes to the same name and set the DOM property
+ propName = jQuery.propFix[ name ] || name;
+ if ( propName in elem ) {
+ // Only set the IDL specifically if it already exists on the element
+ elem[ propName ] = true;
+ }
+
+ elem.setAttribute( name, name.toLowerCase() );
+ }
+ return name;
+ }
+};
+
+// IE6/7 do not support getting/setting some attributes with get/setAttribute
+if ( !getSetAttribute ) {
+
+ fixSpecified = {
+ name: true,
+ id: true
+ };
+
+ // Use this for any attribute in IE6/7
+ // This fixes almost every IE6/7 issue
+ nodeHook = jQuery.valHooks.button = {
+ get: function( elem, name ) {
+ var ret;
+ ret = elem.getAttributeNode( name );
+ return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ?
+ ret.nodeValue :
+ undefined;
+ },
+ set: function( elem, value, name ) {
+ // Set the existing or create a new attribute node
+ var ret = elem.getAttributeNode( name );
+ if ( !ret ) {
+ ret = document.createAttribute( name );
+ elem.setAttributeNode( ret );
+ }
+ return ( ret.nodeValue = value + "" );
+ }
+ };
+
+ // Apply the nodeHook to tabindex
+ jQuery.attrHooks.tabindex.set = nodeHook.set;
+
+ // Set width and height to auto instead of 0 on empty string( Bug #8150 )
+ // This is for removals
+ jQuery.each([ "width", "height" ], function( i, name ) {
+ jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], {
+ set: function( elem, value ) {
+ if ( value === "" ) {
+ elem.setAttribute( name, "auto" );
+ return value;
+ }
+ }
+ });
+ });
+
+ // Set contenteditable to false on removals(#10429)
+ // Setting to empty string throws an error as an invalid value
+ jQuery.attrHooks.contenteditable = {
+ get: nodeHook.get,
+ set: function( elem, value, name ) {
+ if ( value === "" ) {
+ value = "false";
+ }
+ nodeHook.set( elem, value, name );
+ }
+ };
+}
+
+
+// Some attributes require a special call on IE
+if ( !jQuery.support.hrefNormalized ) {
+ jQuery.each([ "href", "src", "width", "height" ], function( i, name ) {
+ jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], {
+ get: function( elem ) {
+ var ret = elem.getAttribute( name, 2 );
+ return ret === null ? undefined : ret;
+ }
+ });
+ });
+}
+
+if ( !jQuery.support.style ) {
+ jQuery.attrHooks.style = {
+ get: function( elem ) {
+ // Return undefined in the case of empty string
+ // Normalize to lowercase since IE uppercases css property names
+ return elem.style.cssText.toLowerCase() || undefined;
+ },
+ set: function( elem, value ) {
+ return ( elem.style.cssText = "" + value );
+ }
+ };
+}
+
+// Safari mis-reports the default selected property of an option
+// Accessing the parent's selectedIndex property fixes it
+if ( !jQuery.support.optSelected ) {
+ jQuery.propHooks.selected = jQuery.extend( jQuery.propHooks.selected, {
+ get: function( elem ) {
+ var parent = elem.parentNode;
+
+ if ( parent ) {
+ parent.selectedIndex;
+
+ // Make sure that it also works with optgroups, see #5701
+ if ( parent.parentNode ) {
+ parent.parentNode.selectedIndex;
+ }
+ }
+ return null;
+ }
+ });
+}
+
+// IE6/7 call enctype encoding
+if ( !jQuery.support.enctype ) {
+ jQuery.propFix.enctype = "encoding";
+}
+
+// Radios and checkboxes getter/setter
+if ( !jQuery.support.checkOn ) {
+ jQuery.each([ "radio", "checkbox" ], function() {
+ jQuery.valHooks[ this ] = {
+ get: function( elem ) {
+ // Handle the case where in Webkit "" is returned instead of "on" if a value isn't specified
+ return elem.getAttribute("value") === null ? "on" : elem.value;
+ }
+ };
+ });
+}
+jQuery.each([ "radio", "checkbox" ], function() {
+ jQuery.valHooks[ this ] = jQuery.extend( jQuery.valHooks[ this ], {
+ set: function( elem, value ) {
+ if ( jQuery.isArray( value ) ) {
+ return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 );
+ }
+ }
+ });
+});
+
+
+
+
+var rformElems = /^(?:textarea|input|select)$/i,
+ rtypenamespace = /^([^\.]*)?(?:\.(.+))?$/,
+ rhoverHack = /\bhover(\.\S+)?\b/,
+ rkeyEvent = /^key/,
+ rmouseEvent = /^(?:mouse|contextmenu)|click/,
+ rfocusMorph = /^(?:focusinfocus|focusoutblur)$/,
+ rquickIs = /^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,
+ quickParse = function( selector ) {
+ var quick = rquickIs.exec( selector );
+ if ( quick ) {
+ // 0 1 2 3
+ // [ _, tag, id, class ]
+ quick[1] = ( quick[1] || "" ).toLowerCase();
+ quick[3] = quick[3] && new RegExp( "(?:^|\\s)" + quick[3] + "(?:\\s|$)" );
+ }
+ return quick;
+ },
+ quickIs = function( elem, m ) {
+ var attrs = elem.attributes || {};
+ return (
+ (!m[1] || elem.nodeName.toLowerCase() === m[1]) &&
+ (!m[2] || (attrs.id || {}).value === m[2]) &&
+ (!m[3] || m[3].test( (attrs[ "class" ] || {}).value ))
+ );
+ },
+ hoverHack = function( events ) {
+ return jQuery.event.special.hover ? events : events.replace( rhoverHack, "mouseenter$1 mouseleave$1" );
+ };
+
+/*
+ * Helper functions for managing events -- not part of the public interface.
+ * Props to Dean Edwards' addEvent library for many of the ideas.
+ */
+jQuery.event = {
+
+ add: function( elem, types, handler, data, selector ) {
+
+ var elemData, eventHandle, events,
+ t, tns, type, namespaces, handleObj,
+ handleObjIn, quick, handlers, special;
+
+ // Don't attach events to noData or text/comment nodes (allow plain objects tho)
+ if ( elem.nodeType === 3 || elem.nodeType === 8 || !types || !handler || !(elemData = jQuery._data( elem )) ) {
+ return;
+ }
+
+ // Caller can pass in an object of custom data in lieu of the handler
+ if ( handler.handler ) {
+ handleObjIn = handler;
+ handler = handleObjIn.handler;
+ }
+
+ // Make sure that the handler has a unique ID, used to find/remove it later
+ if ( !handler.guid ) {
+ handler.guid = jQuery.guid++;
+ }
+
+ // Init the element's event structure and main handler, if this is the first
+ events = elemData.events;
+ if ( !events ) {
+ elemData.events = events = {};
+ }
+ eventHandle = elemData.handle;
+ if ( !eventHandle ) {
+ elemData.handle = eventHandle = function( e ) {
+ // Discard the second event of a jQuery.event.trigger() and
+ // when an event is called after a page has unloaded
+ return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ?
+ jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
+ undefined;
+ };
+ // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
+ eventHandle.elem = elem;
+ }
+
+ // Handle multiple events separated by a space
+ // jQuery(...).bind("mouseover mouseout", fn);
+ types = jQuery.trim( hoverHack(types) ).split( " " );
+ for ( t = 0; t < types.length; t++ ) {
+
+ tns = rtypenamespace.exec( types[t] ) || [];
+ type = tns[1];
+ namespaces = ( tns[2] || "" ).split( "." ).sort();
+
+ // If event changes its type, use the special event handlers for the changed type
+ special = jQuery.event.special[ type ] || {};
+
+ // If selector defined, determine special event api type, otherwise given type
+ type = ( selector ? special.delegateType : special.bindType ) || type;
+
+ // Update special based on newly reset type
+ special = jQuery.event.special[ type ] || {};
+
+ // handleObj is passed to all event handlers
+ handleObj = jQuery.extend({
+ type: type,
+ origType: tns[1],
+ data: data,
+ handler: handler,
+ guid: handler.guid,
+ selector: selector,
+ quick: quickParse( selector ),
+ namespace: namespaces.join(".")
+ }, handleObjIn );
+
+ // Init the event handler queue if we're the first
+ handlers = events[ type ];
+ if ( !handlers ) {
+ handlers = events[ type ] = [];
+ handlers.delegateCount = 0;
+
+ // Only use addEventListener/attachEvent if the special events handler returns false
+ if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
+ // Bind the global event handler to the element
+ if ( elem.addEventListener ) {
+ elem.addEventListener( type, eventHandle, false );
+
+ } else if ( elem.attachEvent ) {
+ elem.attachEvent( "on" + type, eventHandle );
+ }
+ }
+ }
+
+ if ( special.add ) {
+ special.add.call( elem, handleObj );
+
+ if ( !handleObj.handler.guid ) {
+ handleObj.handler.guid = handler.guid;
+ }
+ }
+
+ // Add to the element's handler list, delegates in front
+ if ( selector ) {
+ handlers.splice( handlers.delegateCount++, 0, handleObj );
+ } else {
+ handlers.push( handleObj );
+ }
+
+ // Keep track of which events have ever been used, for event optimization
+ jQuery.event.global[ type ] = true;
+ }
+
+ // Nullify elem to prevent memory leaks in IE
+ elem = null;
+ },
+
+ global: {},
+
+ // Detach an event or set of events from an element
+ remove: function( elem, types, handler, selector, mappedTypes ) {
+
+ var elemData = jQuery.hasData( elem ) && jQuery._data( elem ),
+ t, tns, type, origType, namespaces, origCount,
+ j, events, special, handle, eventType, handleObj;
+
+ if ( !elemData || !(events = elemData.events) ) {
+ return;
+ }
+
+ // Once for each type.namespace in types; type may be omitted
+ types = jQuery.trim( hoverHack( types || "" ) ).split(" ");
+ for ( t = 0; t < types.length; t++ ) {
+ tns = rtypenamespace.exec( types[t] ) || [];
+ type = origType = tns[1];
+ namespaces = tns[2];
+
+ // Unbind all events (on this namespace, if provided) for the element
+ if ( !type ) {
+ for ( type in events ) {
+ jQuery.event.remove( elem, type + types[ t ], handler, selector, true );
+ }
+ continue;
+ }
+
+ special = jQuery.event.special[ type ] || {};
+ type = ( selector? special.delegateType : special.bindType ) || type;
+ eventType = events[ type ] || [];
+ origCount = eventType.length;
+ namespaces = namespaces ? new RegExp("(^|\\.)" + namespaces.split(".").sort().join("\\.(?:.*\\.)?") + "(\\.|$)") : null;
+
+ // Remove matching events
+ for ( j = 0; j < eventType.length; j++ ) {
+ handleObj = eventType[ j ];
+
+ if ( ( mappedTypes || origType === handleObj.origType ) &&
+ ( !handler || handler.guid === handleObj.guid ) &&
+ ( !namespaces || namespaces.test( handleObj.namespace ) ) &&
+ ( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) {
+ eventType.splice( j--, 1 );
+
+ if ( handleObj.selector ) {
+ eventType.delegateCount--;
+ }
+ if ( special.remove ) {
+ special.remove.call( elem, handleObj );
+ }
+ }
+ }
+
+ // Remove generic event handler if we removed something and no more handlers exist
+ // (avoids potential for endless recursion during removal of special event handlers)
+ if ( eventType.length === 0 && origCount !== eventType.length ) {
+ if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) {
+ jQuery.removeEvent( elem, type, elemData.handle );
+ }
+
+ delete events[ type ];
+ }
+ }
+
+ // Remove the expando if it's no longer used
+ if ( jQuery.isEmptyObject( events ) ) {
+ handle = elemData.handle;
+ if ( handle ) {
+ handle.elem = null;
+ }
+
+ // removeData also checks for emptiness and clears the expando if empty
+ // so use it instead of delete
+ jQuery.removeData( elem, [ "events", "handle" ], true );
+ }
+ },
+
+ // Events that are safe to short-circuit if no handlers are attached.
+ // Native DOM events should not be added, they may have inline handlers.
+ customEvent: {
+ "getData": true,
+ "setData": true,
+ "changeData": true
+ },
+
+ trigger: function( event, data, elem, onlyHandlers ) {
+ // Don't do events on text and comment nodes
+ if ( elem && (elem.nodeType === 3 || elem.nodeType === 8) ) {
+ return;
+ }
+
+ // Event object or event type
+ var type = event.type || event,
+ namespaces = [],
+ cache, exclusive, i, cur, old, ontype, special, handle, eventPath, bubbleType;
+
+ // focus/blur morphs to focusin/out; ensure we're not firing them right now
+ if ( rfocusMorph.test( type + jQuery.event.triggered ) ) {
+ return;
+ }
+
+ if ( type.indexOf( "!" ) >= 0 ) {
+ // Exclusive events trigger only for the exact event (no namespaces)
+ type = type.slice(0, -1);
+ exclusive = true;
+ }
+
+ if ( type.indexOf( "." ) >= 0 ) {
+ // Namespaced trigger; create a regexp to match event type in handle()
+ namespaces = type.split(".");
+ type = namespaces.shift();
+ namespaces.sort();
+ }
+
+ if ( (!elem || jQuery.event.customEvent[ type ]) && !jQuery.event.global[ type ] ) {
+ // No jQuery handlers for this event type, and it can't have inline handlers
+ return;
+ }
+
+ // Caller can pass in an Event, Object, or just an event type string
+ event = typeof event === "object" ?
+ // jQuery.Event object
+ event[ jQuery.expando ] ? event :
+ // Object literal
+ new jQuery.Event( type, event ) :
+ // Just the event type (string)
+ new jQuery.Event( type );
+
+ event.type = type;
+ event.isTrigger = true;
+ event.exclusive = exclusive;
+ event.namespace = namespaces.join( "." );
+ event.namespace_re = event.namespace? new RegExp("(^|\\.)" + namespaces.join("\\.(?:.*\\.)?") + "(\\.|$)") : null;
+ ontype = type.indexOf( ":" ) < 0 ? "on" + type : "";
+
+ // Handle a global trigger
+ if ( !elem ) {
+
+ // TODO: Stop taunting the data cache; remove global events and always attach to document
+ cache = jQuery.cache;
+ for ( i in cache ) {
+ if ( cache[ i ].events && cache[ i ].events[ type ] ) {
+ jQuery.event.trigger( event, data, cache[ i ].handle.elem, true );
+ }
+ }
+ return;
+ }
+
+ // Clean up the event in case it is being reused
+ event.result = undefined;
+ if ( !event.target ) {
+ event.target = elem;
+ }
+
+ // Clone any incoming data and prepend the event, creating the handler arg list
+ data = data != null ? jQuery.makeArray( data ) : [];
+ data.unshift( event );
+
+ // Allow special events to draw outside the lines
+ special = jQuery.event.special[ type ] || {};
+ if ( special.trigger && special.trigger.apply( elem, data ) === false ) {
+ return;
+ }
+
+ // Determine event propagation path in advance, per W3C events spec (#9951)
+ // Bubble up to document, then to window; watch for a global ownerDocument var (#9724)
+ eventPath = [[ elem, special.bindType || type ]];
+ if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) {
+
+ bubbleType = special.delegateType || type;
+ cur = rfocusMorph.test( bubbleType + type ) ? elem : elem.parentNode;
+ old = null;
+ for ( ; cur; cur = cur.parentNode ) {
+ eventPath.push([ cur, bubbleType ]);
+ old = cur;
+ }
+
+ // Only add window if we got to document (e.g., not plain obj or detached DOM)
+ if ( old && old === elem.ownerDocument ) {
+ eventPath.push([ old.defaultView || old.parentWindow || window, bubbleType ]);
+ }
+ }
+
+ // Fire handlers on the event path
+ for ( i = 0; i < eventPath.length && !event.isPropagationStopped(); i++ ) {
+
+ cur = eventPath[i][0];
+ event.type = eventPath[i][1];
+
+ handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" );
+ if ( handle ) {
+ handle.apply( cur, data );
+ }
+ // Note that this is a bare JS function and not a jQuery handler
+ handle = ontype && cur[ ontype ];
+ if ( handle && jQuery.acceptData( cur ) && handle.apply( cur, data ) === false ) {
+ event.preventDefault();
+ }
+ }
+ event.type = type;
+
+ // If nobody prevented the default action, do it now
+ if ( !onlyHandlers && !event.isDefaultPrevented() ) {
+
+ if ( (!special._default || special._default.apply( elem.ownerDocument, data ) === false) &&
+ !(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) {
+
+ // Call a native DOM method on the target with the same name name as the event.
+ // Can't use an .isFunction() check here because IE6/7 fails that test.
+ // Don't do default actions on window, that's where global variables be (#6170)
+ // IE<9 dies on focus/blur to hidden element (#1486)
+ if ( ontype && elem[ type ] && ((type !== "focus" && type !== "blur") || event.target.offsetWidth !== 0) && !jQuery.isWindow( elem ) ) {
+
+ // Don't re-trigger an onFOO event when we call its FOO() method
+ old = elem[ ontype ];
+
+ if ( old ) {
+ elem[ ontype ] = null;
+ }
+
+ // Prevent re-triggering of the same event, since we already bubbled it above
+ jQuery.event.triggered = type;
+ elem[ type ]();
+ jQuery.event.triggered = undefined;
+
+ if ( old ) {
+ elem[ ontype ] = old;
+ }
+ }
+ }
+ }
+
+ return event.result;
+ },
+
+ dispatch: function( event ) {
+
+ // Make a writable jQuery.Event from the native event object
+ event = jQuery.event.fix( event || window.event );
+
+ var handlers = ( (jQuery._data( this, "events" ) || {} )[ event.type ] || []),
+ delegateCount = handlers.delegateCount,
+ args = [].slice.call( arguments, 0 ),
+ run_all = !event.exclusive && !event.namespace,
+ handlerQueue = [],
+ i, j, cur, jqcur, ret, selMatch, matched, matches, handleObj, sel, related;
+
+ // Use the fix-ed jQuery.Event rather than the (read-only) native event
+ args[0] = event;
+ event.delegateTarget = this;
+
+ // Determine handlers that should run if there are delegated events
+ // Avoid disabled elements in IE (#6911) and non-left-click bubbling in Firefox (#3861)
+ if ( delegateCount && !event.target.disabled && !(event.button && event.type === "click") ) {
+
+ // Pregenerate a single jQuery object for reuse with .is()
+ jqcur = jQuery(this);
+ jqcur.context = this.ownerDocument || this;
+
+ for ( cur = event.target; cur != this; cur = cur.parentNode || this ) {
+ selMatch = {};
+ matches = [];
+ jqcur[0] = cur;
+ for ( i = 0; i < delegateCount; i++ ) {
+ handleObj = handlers[ i ];
+ sel = handleObj.selector;
+
+ if ( selMatch[ sel ] === undefined ) {
+ selMatch[ sel ] = (
+ handleObj.quick ? quickIs( cur, handleObj.quick ) : jqcur.is( sel )
+ );
+ }
+ if ( selMatch[ sel ] ) {
+ matches.push( handleObj );
+ }
+ }
+ if ( matches.length ) {
+ handlerQueue.push({ elem: cur, matches: matches });
+ }
+ }
+ }
+
+ // Add the remaining (directly-bound) handlers
+ if ( handlers.length > delegateCount ) {
+ handlerQueue.push({ elem: this, matches: handlers.slice( delegateCount ) });
+ }
+
+ // Run delegates first; they may want to stop propagation beneath us
+ for ( i = 0; i < handlerQueue.length && !event.isPropagationStopped(); i++ ) {
+ matched = handlerQueue[ i ];
+ event.currentTarget = matched.elem;
+
+ for ( j = 0; j < matched.matches.length && !event.isImmediatePropagationStopped(); j++ ) {
+ handleObj = matched.matches[ j ];
+
+ // Triggered event must either 1) be non-exclusive and have no namespace, or
+ // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace).
+ if ( run_all || (!event.namespace && !handleObj.namespace) || event.namespace_re && event.namespace_re.test( handleObj.namespace ) ) {
+
+ event.data = handleObj.data;
+ event.handleObj = handleObj;
+
+ ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
+ .apply( matched.elem, args );
+
+ if ( ret !== undefined ) {
+ event.result = ret;
+ if ( ret === false ) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+ }
+ }
+ }
+
+ return event.result;
+ },
+
+ // Includes some event props shared by KeyEvent and MouseEvent
+ // *** attrChange attrName relatedNode srcElement are not normalized, non-W3C, deprecated, will be removed in 1.8 ***
+ props: "attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),
+
+ fixHooks: {},
+
+ keyHooks: {
+ props: "char charCode key keyCode".split(" "),
+ filter: function( event, original ) {
+
+ // Add which for key events
+ if ( event.which == null ) {
+ event.which = original.charCode != null ? original.charCode : original.keyCode;
+ }
+
+ return event;
+ }
+ },
+
+ mouseHooks: {
+ props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),
+ filter: function( event, original ) {
+ var eventDoc, doc, body,
+ button = original.button,
+ fromElement = original.fromElement;
+
+ // Calculate pageX/Y if missing and clientX/Y available
+ if ( event.pageX == null && original.clientX != null ) {
+ eventDoc = event.target.ownerDocument || document;
+ doc = eventDoc.documentElement;
+ body = eventDoc.body;
+
+ event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
+ event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );
+ }
+
+ // Add relatedTarget, if necessary
+ if ( !event.relatedTarget && fromElement ) {
+ event.relatedTarget = fromElement === event.target ? original.toElement : fromElement;
+ }
+
+ // Add which for click: 1 === left; 2 === middle; 3 === right
+ // Note: button is not normalized, so don't use it
+ if ( !event.which && button !== undefined ) {
+ event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
+ }
+
+ return event;
+ }
+ },
+
+ fix: function( event ) {
+ if ( event[ jQuery.expando ] ) {
+ return event;
+ }
+
+ // Create a writable copy of the event object and normalize some properties
+ var i, prop,
+ originalEvent = event,
+ fixHook = jQuery.event.fixHooks[ event.type ] || {},
+ copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props;
+
+ event = jQuery.Event( originalEvent );
+
+ for ( i = copy.length; i; ) {
+ prop = copy[ --i ];
+ event[ prop ] = originalEvent[ prop ];
+ }
+
+ // Fix target property, if necessary (#1925, IE 6/7/8 & Safari2)
+ if ( !event.target ) {
+ event.target = originalEvent.srcElement || document;
+ }
+
+ // Target should not be a text node (#504, Safari)
+ if ( event.target.nodeType === 3 ) {
+ event.target = event.target.parentNode;
+ }
+
+ // For mouse/key events; add metaKey if it's not there (#3368, IE6/7/8)
+ if ( event.metaKey === undefined ) {
+ event.metaKey = event.ctrlKey;
+ }
+
+ return fixHook.filter? fixHook.filter( event, originalEvent ) : event;
+ },
+
+ special: {
+ ready: {
+ // Make sure the ready event is setup
+ setup: jQuery.bindReady
+ },
+
+ load: {
+ // Prevent triggered image.load events from bubbling to window.load
+ noBubble: true
+ },
+
+ focus: {
+ delegateType: "focusin"
+ },
+ blur: {
+ delegateType: "focusout"
+ },
+
+ beforeunload: {
+ setup: function( data, namespaces, eventHandle ) {
+ // We only want to do this special case on windows
+ if ( jQuery.isWindow( this ) ) {
+ this.onbeforeunload = eventHandle;
+ }
+ },
+
+ teardown: function( namespaces, eventHandle ) {
+ if ( this.onbeforeunload === eventHandle ) {
+ this.onbeforeunload = null;
+ }
+ }
+ }
+ },
+
+ simulate: function( type, elem, event, bubble ) {
+ // Piggyback on a donor event to simulate a different one.
+ // Fake originalEvent to avoid donor's stopPropagation, but if the
+ // simulated event prevents default then we do the same on the donor.
+ var e = jQuery.extend(
+ new jQuery.Event(),
+ event,
+ { type: type,
+ isSimulated: true,
+ originalEvent: {}
+ }
+ );
+ if ( bubble ) {
+ jQuery.event.trigger( e, null, elem );
+ } else {
+ jQuery.event.dispatch.call( elem, e );
+ }
+ if ( e.isDefaultPrevented() ) {
+ event.preventDefault();
+ }
+ }
+};
+
+// Some plugins are using, but it's undocumented/deprecated and will be removed.
+// The 1.7 special event interface should provide all the hooks needed now.
+jQuery.event.handle = jQuery.event.dispatch;
+
+jQuery.removeEvent = document.removeEventListener ?
+ function( elem, type, handle ) {
+ if ( elem.removeEventListener ) {
+ elem.removeEventListener( type, handle, false );
+ }
+ } :
+ function( elem, type, handle ) {
+ if ( elem.detachEvent ) {
+ elem.detachEvent( "on" + type, handle );
+ }
+ };
+
+jQuery.Event = function( src, props ) {
+ // Allow instantiation without the 'new' keyword
+ if ( !(this instanceof jQuery.Event) ) {
+ return new jQuery.Event( src, props );
+ }
+
+ // Event object
+ if ( src && src.type ) {
+ this.originalEvent = src;
+ this.type = src.type;
+
+ // Events bubbling up the document may have been marked as prevented
+ // by a handler lower down the tree; reflect the correct value.
+ this.isDefaultPrevented = ( src.defaultPrevented || src.returnValue === false ||
+ src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse;
+
+ // Event type
+ } else {
+ this.type = src;
+ }
+
+ // Put explicitly provided properties onto the event object
+ if ( props ) {
+ jQuery.extend( this, props );
+ }
+
+ // Create a timestamp if incoming event doesn't have one
+ this.timeStamp = src && src.timeStamp || jQuery.now();
+
+ // Mark it as fixed
+ this[ jQuery.expando ] = true;
+};
+
+function returnFalse() {
+ return false;
+}
+function returnTrue() {
+ return true;
+}
+
+// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
+// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
+jQuery.Event.prototype = {
+ preventDefault: function() {
+ this.isDefaultPrevented = returnTrue;
+
+ var e = this.originalEvent;
+ if ( !e ) {
+ return;
+ }
+
+ // if preventDefault exists run it on the original event
+ if ( e.preventDefault ) {
+ e.preventDefault();
+
+ // otherwise set the returnValue property of the original event to false (IE)
+ } else {
+ e.returnValue = false;
+ }
+ },
+ stopPropagation: function() {
+ this.isPropagationStopped = returnTrue;
+
+ var e = this.originalEvent;
+ if ( !e ) {
+ return;
+ }
+ // if stopPropagation exists run it on the original event
+ if ( e.stopPropagation ) {
+ e.stopPropagation();
+ }
+ // otherwise set the cancelBubble property of the original event to true (IE)
+ e.cancelBubble = true;
+ },
+ stopImmediatePropagation: function() {
+ this.isImmediatePropagationStopped = returnTrue;
+ this.stopPropagation();
+ },
+ isDefaultPrevented: returnFalse,
+ isPropagationStopped: returnFalse,
+ isImmediatePropagationStopped: returnFalse
+};
+
+// Create mouseenter/leave events using mouseover/out and event-time checks
+jQuery.each({
+ mouseenter: "mouseover",
+ mouseleave: "mouseout"
+}, function( orig, fix ) {
+ jQuery.event.special[ orig ] = {
+ delegateType: fix,
+ bindType: fix,
+
+ handle: function( event ) {
+ var target = this,
+ related = event.relatedTarget,
+ handleObj = event.handleObj,
+ selector = handleObj.selector,
+ ret;
+
+ // For mousenter/leave call the handler if related is outside the target.
+ // NB: No relatedTarget if the mouse left/entered the browser window
+ if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
+ event.type = handleObj.origType;
+ ret = handleObj.handler.apply( this, arguments );
+ event.type = fix;
+ }
+ return ret;
+ }
+ };
+});
+
+// IE submit delegation
+if ( !jQuery.support.submitBubbles ) {
+
+ jQuery.event.special.submit = {
+ setup: function() {
+ // Only need this for delegated form submit events
+ if ( jQuery.nodeName( this, "form" ) ) {
+ return false;
+ }
+
+ // Lazy-add a submit handler when a descendant form may potentially be submitted
+ jQuery.event.add( this, "click._submit keypress._submit", function( e ) {
+ // Node name check avoids a VML-related crash in IE (#9807)
+ var elem = e.target,
+ form = jQuery.nodeName( elem, "input" ) || jQuery.nodeName( elem, "button" ) ? elem.form : undefined;
+ if ( form && !form._submit_attached ) {
+ jQuery.event.add( form, "submit._submit", function( event ) {
+ // If form was submitted by the user, bubble the event up the tree
+ if ( this.parentNode && !event.isTrigger ) {
+ jQuery.event.simulate( "submit", this.parentNode, event, true );
+ }
+ });
+ form._submit_attached = true;
+ }
+ });
+ // return undefined since we don't need an event listener
+ },
+
+ teardown: function() {
+ // Only need this for delegated form submit events
+ if ( jQuery.nodeName( this, "form" ) ) {
+ return false;
+ }
+
+ // Remove delegated handlers; cleanData eventually reaps submit handlers attached above
+ jQuery.event.remove( this, "._submit" );
+ }
+ };
+}
+
+// IE change delegation and checkbox/radio fix
+if ( !jQuery.support.changeBubbles ) {
+
+ jQuery.event.special.change = {
+
+ setup: function() {
+
+ if ( rformElems.test( this.nodeName ) ) {
+ // IE doesn't fire change on a check/radio until blur; trigger it on click
+ // after a propertychange. Eat the blur-change in special.change.handle.
+ // This still fires onchange a second time for check/radio after blur.
+ if ( this.type === "checkbox" || this.type === "radio" ) {
+ jQuery.event.add( this, "propertychange._change", function( event ) {
+ if ( event.originalEvent.propertyName === "checked" ) {
+ this._just_changed = true;
+ }
+ });
+ jQuery.event.add( this, "click._change", function( event ) {
+ if ( this._just_changed && !event.isTrigger ) {
+ this._just_changed = false;
+ jQuery.event.simulate( "change", this, event, true );
+ }
+ });
+ }
+ return false;
+ }
+ // Delegated event; lazy-add a change handler on descendant inputs
+ jQuery.event.add( this, "beforeactivate._change", function( e ) {
+ var elem = e.target;
+
+ if ( rformElems.test( elem.nodeName ) && !elem._change_attached ) {
+ jQuery.event.add( elem, "change._change", function( event ) {
+ if ( this.parentNode && !event.isSimulated && !event.isTrigger ) {
+ jQuery.event.simulate( "change", this.parentNode, event, true );
+ }
+ });
+ elem._change_attached = true;
+ }
+ });
+ },
+
+ handle: function( event ) {
+ var elem = event.target;
+
+ // Swallow native change events from checkbox/radio, we already triggered them above
+ if ( this !== elem || event.isSimulated || event.isTrigger || (elem.type !== "radio" && elem.type !== "checkbox") ) {
+ return event.handleObj.handler.apply( this, arguments );
+ }
+ },
+
+ teardown: function() {
+ jQuery.event.remove( this, "._change" );
+
+ return rformElems.test( this.nodeName );
+ }
+ };
+}
+
+// Create "bubbling" focus and blur events
+if ( !jQuery.support.focusinBubbles ) {
+ jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {
+
+ // Attach a single capturing handler while someone wants focusin/focusout
+ var attaches = 0,
+ handler = function( event ) {
+ jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true );
+ };
+
+ jQuery.event.special[ fix ] = {
+ setup: function() {
+ if ( attaches++ === 0 ) {
+ document.addEventListener( orig, handler, true );
+ }
+ },
+ teardown: function() {
+ if ( --attaches === 0 ) {
+ document.removeEventListener( orig, handler, true );
+ }
+ }
+ };
+ });
+}
+
+jQuery.fn.extend({
+
+ on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
+ var origFn, type;
+
+ // Types can be a map of types/handlers
+ if ( typeof types === "object" ) {
+ // ( types-Object, selector, data )
+ if ( typeof selector !== "string" ) {
+ // ( types-Object, data )
+ data = selector;
+ selector = undefined;
+ }
+ for ( type in types ) {
+ this.on( type, selector, data, types[ type ], one );
+ }
+ return this;
+ }
+
+ if ( data == null && fn == null ) {
+ // ( types, fn )
+ fn = selector;
+ data = selector = undefined;
+ } else if ( fn == null ) {
+ if ( typeof selector === "string" ) {
+ // ( types, selector, fn )
+ fn = data;
+ data = undefined;
+ } else {
+ // ( types, data, fn )
+ fn = data;
+ data = selector;
+ selector = undefined;
+ }
+ }
+ if ( fn === false ) {
+ fn = returnFalse;
+ } else if ( !fn ) {
+ return this;
+ }
+
+ if ( one === 1 ) {
+ origFn = fn;
+ fn = function( event ) {
+ // Can use an empty set, since event contains the info
+ jQuery().off( event );
+ return origFn.apply( this, arguments );
+ };
+ // Use same guid so caller can remove using origFn
+ fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
+ }
+ return this.each( function() {
+ jQuery.event.add( this, types, fn, data, selector );
+ });
+ },
+ one: function( types, selector, data, fn ) {
+ return this.on.call( this, types, selector, data, fn, 1 );
+ },
+ off: function( types, selector, fn ) {
+ if ( types && types.preventDefault && types.handleObj ) {
+ // ( event ) dispatched jQuery.Event
+ var handleObj = types.handleObj;
+ jQuery( types.delegateTarget ).off(
+ handleObj.namespace? handleObj.type + "." + handleObj.namespace : handleObj.type,
+ handleObj.selector,
+ handleObj.handler
+ );
+ return this;
+ }
+ if ( typeof types === "object" ) {
+ // ( types-object [, selector] )
+ for ( var type in types ) {
+ this.off( type, selector, types[ type ] );
+ }
+ return this;
+ }
+ if ( selector === false || typeof selector === "function" ) {
+ // ( types [, fn] )
+ fn = selector;
+ selector = undefined;
+ }
+ if ( fn === false ) {
+ fn = returnFalse;
+ }
+ return this.each(function() {
+ jQuery.event.remove( this, types, fn, selector );
+ });
+ },
+
+ bind: function( types, data, fn ) {
+ return this.on( types, null, data, fn );
+ },
+ unbind: function( types, fn ) {
+ return this.off( types, null, fn );
+ },
+
+ live: function( types, data, fn ) {
+ jQuery( this.context ).on( types, this.selector, data, fn );
+ return this;
+ },
+ die: function( types, fn ) {
+ jQuery( this.context ).off( types, this.selector || "**", fn );
+ return this;
+ },
+
+ delegate: function( selector, types, data, fn ) {
+ return this.on( types, selector, data, fn );
+ },
+ undelegate: function( selector, types, fn ) {
+ // ( namespace ) or ( selector, types [, fn] )
+ return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
+ },
+
+ trigger: function( type, data ) {
+ return this.each(function() {
+ jQuery.event.trigger( type, data, this );
+ });
+ },
+ triggerHandler: function( type, data ) {
+ if ( this[0] ) {
+ return jQuery.event.trigger( type, data, this[0], true );
+ }
+ },
+
+ toggle: function( fn ) {
+ // Save reference to arguments for access in closure
+ var args = arguments,
+ guid = fn.guid || jQuery.guid++,
+ i = 0,
+ toggler = function( event ) {
+ // Figure out which function to execute
+ var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
+ jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
+
+ // Make sure that clicks stop
+ event.preventDefault();
+
+ // and execute the function
+ return args[ lastToggle ].apply( this, arguments ) || false;
+ };
+
+ // link all the functions, so any of them can unbind this click handler
+ toggler.guid = guid;
+ while ( i < args.length ) {
+ args[ i++ ].guid = guid;
+ }
+
+ return this.click( toggler );
+ },
+
+ hover: function( fnOver, fnOut ) {
+ return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
+ }
+});
+
+jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
+ "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
+ "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
+
+ // Handle event binding
+ jQuery.fn[ name ] = function( data, fn ) {
+ if ( fn == null ) {
+ fn = data;
+ data = null;
+ }
+
+ return arguments.length > 0 ?
+ this.on( name, null, data, fn ) :
+ this.trigger( name );
+ };
+
+ if ( jQuery.attrFn ) {
+ jQuery.attrFn[ name ] = true;
+ }
+
+ if ( rkeyEvent.test( name ) ) {
+ jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks;
+ }
+
+ if ( rmouseEvent.test( name ) ) {
+ jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks;
+ }
+});
+
+
+
+/*!
+ * Sizzle CSS Selector Engine
+ * Copyright 2011, The Dojo Foundation
+ * Released under the MIT, BSD, and GPL Licenses.
+ * More information: http://sizzlejs.com/
+ */
+(function(){
+
+var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,
+ expando = "sizcache" + (Math.random() + '').replace('.', ''),
+ done = 0,
+ toString = Object.prototype.toString,
+ hasDuplicate = false,
+ baseHasDuplicate = true,
+ rBackslash = /\\/g,
+ rReturn = /\r\n/g,
+ rNonWord = /\W/;
+
+// Here we check if the JavaScript engine is using some sort of
+// optimization where it does not always call our comparision
+// function. If that is the case, discard the hasDuplicate value.
+// Thus far that includes Google Chrome.
+[0, 0].sort(function() {
+ baseHasDuplicate = false;
+ return 0;
+});
+
+var Sizzle = function( selector, context, results, seed ) {
+ results = results || [];
+ context = context || document;
+
+ var origContext = context;
+
+ if ( context.nodeType !== 1 && context.nodeType !== 9 ) {
+ return [];
+ }
+
+ if ( !selector || typeof selector !== "string" ) {
+ return results;
+ }
+
+ var m, set, checkSet, extra, ret, cur, pop, i,
+ prune = true,
+ contextXML = Sizzle.isXML( context ),
+ parts = [],
+ soFar = selector;
+
+ // Reset the position of the chunker regexp (start from head)
+ do {
+ chunker.exec( "" );
+ m = chunker.exec( soFar );
+
+ if ( m ) {
+ soFar = m[3];
+
+ parts.push( m[1] );
+
+ if ( m[2] ) {
+ extra = m[3];
+ break;
+ }
+ }
+ } while ( m );
+
+ if ( parts.length > 1 && origPOS.exec( selector ) ) {
+
+ if ( parts.length === 2 && Expr.relative[ parts[0] ] ) {
+ set = posProcess( parts[0] + parts[1], context, seed );
+
+ } else {
+ set = Expr.relative[ parts[0] ] ?
+ [ context ] :
+ Sizzle( parts.shift(), context );
+
+ while ( parts.length ) {
+ selector = parts.shift();
+
+ if ( Expr.relative[ selector ] ) {
+ selector += parts.shift();
+ }
+
+ set = posProcess( selector, set, seed );
+ }
+ }
+
+ } else {
+ // Take a shortcut and set the context if the root selector is an ID
+ // (but not if it'll be faster if the inner selector is an ID)
+ if ( !seed && parts.length > 1 && context.nodeType === 9 && !contextXML &&
+ Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1]) ) {
+
+ ret = Sizzle.find( parts.shift(), context, contextXML );
+ context = ret.expr ?
+ Sizzle.filter( ret.expr, ret.set )[0] :
+ ret.set[0];
+ }
+
+ if ( context ) {
+ ret = seed ?
+ { expr: parts.pop(), set: makeArray(seed) } :
+ Sizzle.find( parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML );
+
+ set = ret.expr ?
+ Sizzle.filter( ret.expr, ret.set ) :
+ ret.set;
+
+ if ( parts.length > 0 ) {
+ checkSet = makeArray( set );
+
+ } else {
+ prune = false;
+ }
+
+ while ( parts.length ) {
+ cur = parts.pop();
+ pop = cur;
+
+ if ( !Expr.relative[ cur ] ) {
+ cur = "";
+ } else {
+ pop = parts.pop();
+ }
+
+ if ( pop == null ) {
+ pop = context;
+ }
+
+ Expr.relative[ cur ]( checkSet, pop, contextXML );
+ }
+
+ } else {
+ checkSet = parts = [];
+ }
+ }
+
+ if ( !checkSet ) {
+ checkSet = set;
+ }
+
+ if ( !checkSet ) {
+ Sizzle.error( cur || selector );
+ }
+
+ if ( toString.call(checkSet) === "[object Array]" ) {
+ if ( !prune ) {
+ results.push.apply( results, checkSet );
+
+ } else if ( context && context.nodeType === 1 ) {
+ for ( i = 0; checkSet[i] != null; i++ ) {
+ if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) {
+ results.push( set[i] );
+ }
+ }
+
+ } else {
+ for ( i = 0; checkSet[i] != null; i++ ) {
+ if ( checkSet[i] && checkSet[i].nodeType === 1 ) {
+ results.push( set[i] );
+ }
+ }
+ }
+
+ } else {
+ makeArray( checkSet, results );
+ }
+
+ if ( extra ) {
+ Sizzle( extra, origContext, results, seed );
+ Sizzle.uniqueSort( results );
+ }
+
+ return results;
+};
+
+Sizzle.uniqueSort = function( results ) {
+ if ( sortOrder ) {
+ hasDuplicate = baseHasDuplicate;
+ results.sort( sortOrder );
+
+ if ( hasDuplicate ) {
+ for ( var i = 1; i < results.length; i++ ) {
+ if ( results[i] === results[ i - 1 ] ) {
+ results.splice( i--, 1 );
+ }
+ }
+ }
+ }
+
+ return results;
+};
+
+Sizzle.matches = function( expr, set ) {
+ return Sizzle( expr, null, null, set );
+};
+
+Sizzle.matchesSelector = function( node, expr ) {
+ return Sizzle( expr, null, null, [node] ).length > 0;
+};
+
+Sizzle.find = function( expr, context, isXML ) {
+ var set, i, len, match, type, left;
+
+ if ( !expr ) {
+ return [];
+ }
+
+ for ( i = 0, len = Expr.order.length; i < len; i++ ) {
+ type = Expr.order[i];
+
+ if ( (match = Expr.leftMatch[ type ].exec( expr )) ) {
+ left = match[1];
+ match.splice( 1, 1 );
+
+ if ( left.substr( left.length - 1 ) !== "\\" ) {
+ match[1] = (match[1] || "").replace( rBackslash, "" );
+ set = Expr.find[ type ]( match, context, isXML );
+
+ if ( set != null ) {
+ expr = expr.replace( Expr.match[ type ], "" );
+ break;
+ }
+ }
+ }
+ }
+
+ if ( !set ) {
+ set = typeof context.getElementsByTagName !== "undefined" ?
+ context.getElementsByTagName( "*" ) :
+ [];
+ }
+
+ return { set: set, expr: expr };
+};
+
+Sizzle.filter = function( expr, set, inplace, not ) {
+ var match, anyFound,
+ type, found, item, filter, left,
+ i, pass,
+ old = expr,
+ result = [],
+ curLoop = set,
+ isXMLFilter = set && set[0] && Sizzle.isXML( set[0] );
+
+ while ( expr && set.length ) {
+ for ( type in Expr.filter ) {
+ if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) {
+ filter = Expr.filter[ type ];
+ left = match[1];
+
+ anyFound = false;
+
+ match.splice(1,1);
+
+ if ( left.substr( left.length - 1 ) === "\\" ) {
+ continue;
+ }
+
+ if ( curLoop === result ) {
+ result = [];
+ }
+
+ if ( Expr.preFilter[ type ] ) {
+ match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter );
+
+ if ( !match ) {
+ anyFound = found = true;
+
+ } else if ( match === true ) {
+ continue;
+ }
+ }
+
+ if ( match ) {
+ for ( i = 0; (item = curLoop[i]) != null; i++ ) {
+ if ( item ) {
+ found = filter( item, match, i, curLoop );
+ pass = not ^ found;
+
+ if ( inplace && found != null ) {
+ if ( pass ) {
+ anyFound = true;
+
+ } else {
+ curLoop[i] = false;
+ }
+
+ } else if ( pass ) {
+ result.push( item );
+ anyFound = true;
+ }
+ }
+ }
+ }
+
+ if ( found !== undefined ) {
+ if ( !inplace ) {
+ curLoop = result;
+ }
+
+ expr = expr.replace( Expr.match[ type ], "" );
+
+ if ( !anyFound ) {
+ return [];
+ }
+
+ break;
+ }
+ }
+ }
+
+ // Improper expression
+ if ( expr === old ) {
+ if ( anyFound == null ) {
+ Sizzle.error( expr );
+
+ } else {
+ break;
+ }
+ }
+
+ old = expr;
+ }
+
+ return curLoop;
+};
+
+Sizzle.error = function( msg ) {
+ throw new Error( "Syntax error, unrecognized expression: " + msg );
+};
+
+/**
+ * Utility function for retreiving the text value of an array of DOM nodes
+ * @param {Array|Element} elem
+ */
+var getText = Sizzle.getText = function( elem ) {
+ var i, node,
+ nodeType = elem.nodeType,
+ ret = "";
+
+ if ( nodeType ) {
+ if ( nodeType === 1 || nodeType === 9 ) {
+ // Use textContent || innerText for elements
+ if ( typeof elem.textContent === 'string' ) {
+ return elem.textContent;
+ } else if ( typeof elem.innerText === 'string' ) {
+ // Replace IE's carriage returns
+ return elem.innerText.replace( rReturn, '' );
+ } else {
+ // Traverse it's children
+ for ( elem = elem.firstChild; elem; elem = elem.nextSibling) {
+ ret += getText( elem );
+ }
+ }
+ } else if ( nodeType === 3 || nodeType === 4 ) {
+ return elem.nodeValue;
+ }
+ } else {
+
+ // If no nodeType, this is expected to be an array
+ for ( i = 0; (node = elem[i]); i++ ) {
+ // Do not traverse comment nodes
+ if ( node.nodeType !== 8 ) {
+ ret += getText( node );
+ }
+ }
+ }
+ return ret;
+};
+
+var Expr = Sizzle.selectors = {
+ order: [ "ID", "NAME", "TAG" ],
+
+ match: {
+ ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,
+ CLASS: /\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,
+ NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,
+ ATTR: /\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,
+ TAG: /^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,
+ CHILD: /:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,
+ POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,
+ PSEUDO: /:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/
+ },
+
+ leftMatch: {},
+
+ attrMap: {
+ "class": "className",
+ "for": "htmlFor"
+ },
+
+ attrHandle: {
+ href: function( elem ) {
+ return elem.getAttribute( "href" );
+ },
+ type: function( elem ) {
+ return elem.getAttribute( "type" );
+ }
+ },
+
+ relative: {
+ "+": function(checkSet, part){
+ var isPartStr = typeof part === "string",
+ isTag = isPartStr && !rNonWord.test( part ),
+ isPartStrNotTag = isPartStr && !isTag;
+
+ if ( isTag ) {
+ part = part.toLowerCase();
+ }
+
+ for ( var i = 0, l = checkSet.length, elem; i < l; i++ ) {
+ if ( (elem = checkSet[i]) ) {
+ while ( (elem = elem.previousSibling) && elem.nodeType !== 1 ) {}
+
+ checkSet[i] = isPartStrNotTag || elem && elem.nodeName.toLowerCase() === part ?
+ elem || false :
+ elem === part;
+ }
+ }
+
+ if ( isPartStrNotTag ) {
+ Sizzle.filter( part, checkSet, true );
+ }
+ },
+
+ ">": function( checkSet, part ) {
+ var elem,
+ isPartStr = typeof part === "string",
+ i = 0,
+ l = checkSet.length;
+
+ if ( isPartStr && !rNonWord.test( part ) ) {
+ part = part.toLowerCase();
+
+ for ( ; i < l; i++ ) {
+ elem = checkSet[i];
+
+ if ( elem ) {
+ var parent = elem.parentNode;
+ checkSet[i] = parent.nodeName.toLowerCase() === part ? parent : false;
+ }
+ }
+
+ } else {
+ for ( ; i < l; i++ ) {
+ elem = checkSet[i];
+
+ if ( elem ) {
+ checkSet[i] = isPartStr ?
+ elem.parentNode :
+ elem.parentNode === part;
+ }
+ }
+
+ if ( isPartStr ) {
+ Sizzle.filter( part, checkSet, true );
+ }
+ }
+ },
+
+ "": function(checkSet, part, isXML){
+ var nodeCheck,
+ doneName = done++,
+ checkFn = dirCheck;
+
+ if ( typeof part === "string" && !rNonWord.test( part ) ) {
+ part = part.toLowerCase();
+ nodeCheck = part;
+ checkFn = dirNodeCheck;
+ }
+
+ checkFn( "parentNode", part, doneName, checkSet, nodeCheck, isXML );
+ },
+
+ "~": function( checkSet, part, isXML ) {
+ var nodeCheck,
+ doneName = done++,
+ checkFn = dirCheck;
+
+ if ( typeof part === "string" && !rNonWord.test( part ) ) {
+ part = part.toLowerCase();
+ nodeCheck = part;
+ checkFn = dirNodeCheck;
+ }
+
+ checkFn( "previousSibling", part, doneName, checkSet, nodeCheck, isXML );
+ }
+ },
+
+ find: {
+ ID: function( match, context, isXML ) {
+ if ( typeof context.getElementById !== "undefined" && !isXML ) {
+ var m = context.getElementById(match[1]);
+ // Check parentNode to catch when Blackberry 4.6 returns
+ // nodes that are no longer in the document #6963
+ return m && m.parentNode ? [m] : [];
+ }
+ },
+
+ NAME: function( match, context ) {
+ if ( typeof context.getElementsByName !== "undefined" ) {
+ var ret = [],
+ results = context.getElementsByName( match[1] );
+
+ for ( var i = 0, l = results.length; i < l; i++ ) {
+ if ( results[i].getAttribute("name") === match[1] ) {
+ ret.push( results[i] );
+ }
+ }
+
+ return ret.length === 0 ? null : ret;
+ }
+ },
+
+ TAG: function( match, context ) {
+ if ( typeof context.getElementsByTagName !== "undefined" ) {
+ return context.getElementsByTagName( match[1] );
+ }
+ }
+ },
+ preFilter: {
+ CLASS: function( match, curLoop, inplace, result, not, isXML ) {
+ match = " " + match[1].replace( rBackslash, "" ) + " ";
+
+ if ( isXML ) {
+ return match;
+ }
+
+ for ( var i = 0, elem; (elem = curLoop[i]) != null; i++ ) {
+ if ( elem ) {
+ if ( not ^ (elem.className && (" " + elem.className + " ").replace(/[\t\n\r]/g, " ").indexOf(match) >= 0) ) {
+ if ( !inplace ) {
+ result.push( elem );
+ }
+
+ } else if ( inplace ) {
+ curLoop[i] = false;
+ }
+ }
+ }
+
+ return false;
+ },
+
+ ID: function( match ) {
+ return match[1].replace( rBackslash, "" );
+ },
+
+ TAG: function( match, curLoop ) {
+ return match[1].replace( rBackslash, "" ).toLowerCase();
+ },
+
+ CHILD: function( match ) {
+ if ( match[1] === "nth" ) {
+ if ( !match[2] ) {
+ Sizzle.error( match[0] );
+ }
+
+ match[2] = match[2].replace(/^\+|\s*/g, '');
+
+ // parse equations like 'even', 'odd', '5', '2n', '3n+2', '4n-1', '-n+6'
+ var test = /(-?)(\d*)(?:n([+\-]?\d*))?/.exec(
+ match[2] === "even" && "2n" || match[2] === "odd" && "2n+1" ||
+ !/\D/.test( match[2] ) && "0n+" + match[2] || match[2]);
+
+ // calculate the numbers (first)n+(last) including if they are negative
+ match[2] = (test[1] + (test[2] || 1)) - 0;
+ match[3] = test[3] - 0;
+ }
+ else if ( match[2] ) {
+ Sizzle.error( match[0] );
+ }
+
+ // TODO: Move to normal caching system
+ match[0] = done++;
+
+ return match;
+ },
+
+ ATTR: function( match, curLoop, inplace, result, not, isXML ) {
+ var name = match[1] = match[1].replace( rBackslash, "" );
+
+ if ( !isXML && Expr.attrMap[name] ) {
+ match[1] = Expr.attrMap[name];
+ }
+
+ // Handle if an un-quoted value was used
+ match[4] = ( match[4] || match[5] || "" ).replace( rBackslash, "" );
+
+ if ( match[2] === "~=" ) {
+ match[4] = " " + match[4] + " ";
+ }
+
+ return match;
+ },
+
+ PSEUDO: function( match, curLoop, inplace, result, not ) {
+ if ( match[1] === "not" ) {
+ // If we're dealing with a complex expression, or a simple one
+ if ( ( chunker.exec(match[3]) || "" ).length > 1 || /^\w/.test(match[3]) ) {
+ match[3] = Sizzle(match[3], null, null, curLoop);
+
+ } else {
+ var ret = Sizzle.filter(match[3], curLoop, inplace, true ^ not);
+
+ if ( !inplace ) {
+ result.push.apply( result, ret );
+ }
+
+ return false;
+ }
+
+ } else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) {
+ return true;
+ }
+
+ return match;
+ },
+
+ POS: function( match ) {
+ match.unshift( true );
+
+ return match;
+ }
+ },
+
+ filters: {
+ enabled: function( elem ) {
+ return elem.disabled === false && elem.type !== "hidden";
+ },
+
+ disabled: function( elem ) {
+ return elem.disabled === true;
+ },
+
+ checked: function( elem ) {
+ return elem.checked === true;
+ },
+
+ selected: function( elem ) {
+ // Accessing this property makes selected-by-default
+ // options in Safari work properly
+ if ( elem.parentNode ) {
+ elem.parentNode.selectedIndex;
+ }
+
+ return elem.selected === true;
+ },
+
+ parent: function( elem ) {
+ return !!elem.firstChild;
+ },
+
+ empty: function( elem ) {
+ return !elem.firstChild;
+ },
+
+ has: function( elem, i, match ) {
+ return !!Sizzle( match[3], elem ).length;
+ },
+
+ header: function( elem ) {
+ return (/h\d/i).test( elem.nodeName );
+ },
+
+ text: function( elem ) {
+ var attr = elem.getAttribute( "type" ), type = elem.type;
+ // IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc)
+ // use getAttribute instead to test this case
+ return elem.nodeName.toLowerCase() === "input" && "text" === type && ( attr === type || attr === null );
+ },
+
+ radio: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "radio" === elem.type;
+ },
+
+ checkbox: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "checkbox" === elem.type;
+ },
+
+ file: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "file" === elem.type;
+ },
+
+ password: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "password" === elem.type;
+ },
+
+ submit: function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return (name === "input" || name === "button") && "submit" === elem.type;
+ },
+
+ image: function( elem ) {
+ return elem.nodeName.toLowerCase() === "input" && "image" === elem.type;
+ },
+
+ reset: function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return (name === "input" || name === "button") && "reset" === elem.type;
+ },
+
+ button: function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return name === "input" && "button" === elem.type || name === "button";
+ },
+
+ input: function( elem ) {
+ return (/input|select|textarea|button/i).test( elem.nodeName );
+ },
+
+ focus: function( elem ) {
+ return elem === elem.ownerDocument.activeElement;
+ }
+ },
+ setFilters: {
+ first: function( elem, i ) {
+ return i === 0;
+ },
+
+ last: function( elem, i, match, array ) {
+ return i === array.length - 1;
+ },
+
+ even: function( elem, i ) {
+ return i % 2 === 0;
+ },
+
+ odd: function( elem, i ) {
+ return i % 2 === 1;
+ },
+
+ lt: function( elem, i, match ) {
+ return i < match[3] - 0;
+ },
+
+ gt: function( elem, i, match ) {
+ return i > match[3] - 0;
+ },
+
+ nth: function( elem, i, match ) {
+ return match[3] - 0 === i;
+ },
+
+ eq: function( elem, i, match ) {
+ return match[3] - 0 === i;
+ }
+ },
+ filter: {
+ PSEUDO: function( elem, match, i, array ) {
+ var name = match[1],
+ filter = Expr.filters[ name ];
+
+ if ( filter ) {
+ return filter( elem, i, match, array );
+
+ } else if ( name === "contains" ) {
+ return (elem.textContent || elem.innerText || getText([ elem ]) || "").indexOf(match[3]) >= 0;
+
+ } else if ( name === "not" ) {
+ var not = match[3];
+
+ for ( var j = 0, l = not.length; j < l; j++ ) {
+ if ( not[j] === elem ) {
+ return false;
+ }
+ }
+
+ return true;
+
+ } else {
+ Sizzle.error( name );
+ }
+ },
+
+ CHILD: function( elem, match ) {
+ var first, last,
+ doneName, parent, cache,
+ count, diff,
+ type = match[1],
+ node = elem;
+
+ switch ( type ) {
+ case "only":
+ case "first":
+ while ( (node = node.previousSibling) ) {
+ if ( node.nodeType === 1 ) {
+ return false;
+ }
+ }
+
+ if ( type === "first" ) {
+ return true;
+ }
+
+ node = elem;
+
+ case "last":
+ while ( (node = node.nextSibling) ) {
+ if ( node.nodeType === 1 ) {
+ return false;
+ }
+ }
+
+ return true;
+
+ case "nth":
+ first = match[2];
+ last = match[3];
+
+ if ( first === 1 && last === 0 ) {
+ return true;
+ }
+
+ doneName = match[0];
+ parent = elem.parentNode;
+
+ if ( parent && (parent[ expando ] !== doneName || !elem.nodeIndex) ) {
+ count = 0;
+
+ for ( node = parent.firstChild; node; node = node.nextSibling ) {
+ if ( node.nodeType === 1 ) {
+ node.nodeIndex = ++count;
+ }
+ }
+
+ parent[ expando ] = doneName;
+ }
+
+ diff = elem.nodeIndex - last;
+
+ if ( first === 0 ) {
+ return diff === 0;
+
+ } else {
+ return ( diff % first === 0 && diff / first >= 0 );
+ }
+ }
+ },
+
+ ID: function( elem, match ) {
+ return elem.nodeType === 1 && elem.getAttribute("id") === match;
+ },
+
+ TAG: function( elem, match ) {
+ return (match === "*" && elem.nodeType === 1) || !!elem.nodeName && elem.nodeName.toLowerCase() === match;
+ },
+
+ CLASS: function( elem, match ) {
+ return (" " + (elem.className || elem.getAttribute("class")) + " ")
+ .indexOf( match ) > -1;
+ },
+
+ ATTR: function( elem, match ) {
+ var name = match[1],
+ result = Sizzle.attr ?
+ Sizzle.attr( elem, name ) :
+ Expr.attrHandle[ name ] ?
+ Expr.attrHandle[ name ]( elem ) :
+ elem[ name ] != null ?
+ elem[ name ] :
+ elem.getAttribute( name ),
+ value = result + "",
+ type = match[2],
+ check = match[4];
+
+ return result == null ?
+ type === "!=" :
+ !type && Sizzle.attr ?
+ result != null :
+ type === "=" ?
+ value === check :
+ type === "*=" ?
+ value.indexOf(check) >= 0 :
+ type === "~=" ?
+ (" " + value + " ").indexOf(check) >= 0 :
+ !check ?
+ value && result !== false :
+ type === "!=" ?
+ value !== check :
+ type === "^=" ?
+ value.indexOf(check) === 0 :
+ type === "$=" ?
+ value.substr(value.length - check.length) === check :
+ type === "|=" ?
+ value === check || value.substr(0, check.length + 1) === check + "-" :
+ false;
+ },
+
+ POS: function( elem, match, i, array ) {
+ var name = match[2],
+ filter = Expr.setFilters[ name ];
+
+ if ( filter ) {
+ return filter( elem, i, match, array );
+ }
+ }
+ }
+};
+
+var origPOS = Expr.match.POS,
+ fescape = function(all, num){
+ return "\\" + (num - 0 + 1);
+ };
+
+for ( var type in Expr.match ) {
+ Expr.match[ type ] = new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) );
+ Expr.leftMatch[ type ] = new RegExp( /(^(?:.|\r|\n)*?)/.source + Expr.match[ type ].source.replace(/\\(\d+)/g, fescape) );
+}
+
+var makeArray = function( array, results ) {
+ array = Array.prototype.slice.call( array, 0 );
+
+ if ( results ) {
+ results.push.apply( results, array );
+ return results;
+ }
+
+ return array;
+};
+
+// Perform a simple check to determine if the browser is capable of
+// converting a NodeList to an array using builtin methods.
+// Also verifies that the returned array holds DOM nodes
+// (which is not the case in the Blackberry browser)
+try {
+ Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;
+
+// Provide a fallback method if it does not work
+} catch( e ) {
+ makeArray = function( array, results ) {
+ var i = 0,
+ ret = results || [];
+
+ if ( toString.call(array) === "[object Array]" ) {
+ Array.prototype.push.apply( ret, array );
+
+ } else {
+ if ( typeof array.length === "number" ) {
+ for ( var l = array.length; i < l; i++ ) {
+ ret.push( array[i] );
+ }
+
+ } else {
+ for ( ; array[i]; i++ ) {
+ ret.push( array[i] );
+ }
+ }
+ }
+
+ return ret;
+ };
+}
+
+var sortOrder, siblingCheck;
+
+if ( document.documentElement.compareDocumentPosition ) {
+ sortOrder = function( a, b ) {
+ if ( a === b ) {
+ hasDuplicate = true;
+ return 0;
+ }
+
+ if ( !a.compareDocumentPosition || !b.compareDocumentPosition ) {
+ return a.compareDocumentPosition ? -1 : 1;
+ }
+
+ return a.compareDocumentPosition(b) & 4 ? -1 : 1;
+ };
+
+} else {
+ sortOrder = function( a, b ) {
+ // The nodes are identical, we can exit early
+ if ( a === b ) {
+ hasDuplicate = true;
+ return 0;
+
+ // Fallback to using sourceIndex (in IE) if it's available on both nodes
+ } else if ( a.sourceIndex && b.sourceIndex ) {
+ return a.sourceIndex - b.sourceIndex;
+ }
+
+ var al, bl,
+ ap = [],
+ bp = [],
+ aup = a.parentNode,
+ bup = b.parentNode,
+ cur = aup;
+
+ // If the nodes are siblings (or identical) we can do a quick check
+ if ( aup === bup ) {
+ return siblingCheck( a, b );
+
+ // If no parents were found then the nodes are disconnected
+ } else if ( !aup ) {
+ return -1;
+
+ } else if ( !bup ) {
+ return 1;
+ }
+
+ // Otherwise they're somewhere else in the tree so we need
+ // to build up a full list of the parentNodes for comparison
+ while ( cur ) {
+ ap.unshift( cur );
+ cur = cur.parentNode;
+ }
+
+ cur = bup;
+
+ while ( cur ) {
+ bp.unshift( cur );
+ cur = cur.parentNode;
+ }
+
+ al = ap.length;
+ bl = bp.length;
+
+ // Start walking down the tree looking for a discrepancy
+ for ( var i = 0; i < al && i < bl; i++ ) {
+ if ( ap[i] !== bp[i] ) {
+ return siblingCheck( ap[i], bp[i] );
+ }
+ }
+
+ // We ended someplace up the tree so do a sibling check
+ return i === al ?
+ siblingCheck( a, bp[i], -1 ) :
+ siblingCheck( ap[i], b, 1 );
+ };
+
+ siblingCheck = function( a, b, ret ) {
+ if ( a === b ) {
+ return ret;
+ }
+
+ var cur = a.nextSibling;
+
+ while ( cur ) {
+ if ( cur === b ) {
+ return -1;
+ }
+
+ cur = cur.nextSibling;
+ }
+
+ return 1;
+ };
+}
+
+// Check to see if the browser returns elements by name when
+// querying by getElementById (and provide a workaround)
+(function(){
+ // We're going to inject a fake input element with a specified name
+ var form = document.createElement("div"),
+ id = "script" + (new Date()).getTime(),
+ root = document.documentElement;
+
+ form.innerHTML = "<a name='" + id + "'/>";
+
+ // Inject it into the root element, check its status, and remove it quickly
+ root.insertBefore( form, root.firstChild );
+
+ // The workaround has to do additional checks after a getElementById
+ // Which slows things down for other browsers (hence the branching)
+ if ( document.getElementById( id ) ) {
+ Expr.find.ID = function( match, context, isXML ) {
+ if ( typeof context.getElementById !== "undefined" && !isXML ) {
+ var m = context.getElementById(match[1]);
+
+ return m ?
+ m.id === match[1] || typeof m.getAttributeNode !== "undefined" && m.getAttributeNode("id").nodeValue === match[1] ?
+ [m] :
+ undefined :
+ [];
+ }
+ };
+
+ Expr.filter.ID = function( elem, match ) {
+ var node = typeof elem.getAttributeNode !== "undefined" && elem.getAttributeNode("id");
+
+ return elem.nodeType === 1 && node && node.nodeValue === match;
+ };
+ }
+
+ root.removeChild( form );
+
+ // release memory in IE
+ root = form = null;
+})();
+
+(function(){
+ // Check to see if the browser returns only elements
+ // when doing getElementsByTagName("*")
+
+ // Create a fake element
+ var div = document.createElement("div");
+ div.appendChild( document.createComment("") );
+
+ // Make sure no comments are found
+ if ( div.getElementsByTagName("*").length > 0 ) {
+ Expr.find.TAG = function( match, context ) {
+ var results = context.getElementsByTagName( match[1] );
+
+ // Filter out possible comments
+ if ( match[1] === "*" ) {
+ var tmp = [];
+
+ for ( var i = 0; results[i]; i++ ) {
+ if ( results[i].nodeType === 1 ) {
+ tmp.push( results[i] );
+ }
+ }
+
+ results = tmp;
+ }
+
+ return results;
+ };
+ }
+
+ // Check to see if an attribute returns normalized href attributes
+ div.innerHTML = "<a href='#'></a>";
+
+ if ( div.firstChild && typeof div.firstChild.getAttribute !== "undefined" &&
+ div.firstChild.getAttribute("href") !== "#" ) {
+
+ Expr.attrHandle.href = function( elem ) {
+ return elem.getAttribute( "href", 2 );
+ };
+ }
+
+ // release memory in IE
+ div = null;
+})();
+
+if ( document.querySelectorAll ) {
+ (function(){
+ var oldSizzle = Sizzle,
+ div = document.createElement("div"),
+ id = "__sizzle__";
+
+ div.innerHTML = "<p class='TEST'></p>";
+
+ // Safari can't handle uppercase or unicode characters when
+ // in quirks mode.
+ if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
+ return;
+ }
+
+ Sizzle = function( query, context, extra, seed ) {
+ context = context || document;
+
+ // Only use querySelectorAll on non-XML documents
+ // (ID selectors don't work in non-HTML documents)
+ if ( !seed && !Sizzle.isXML(context) ) {
+ // See if we find a selector to speed up
+ var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query );
+
+ if ( match && (context.nodeType === 1 || context.nodeType === 9) ) {
+ // Speed-up: Sizzle("TAG")
+ if ( match[1] ) {
+ return makeArray( context.getElementsByTagName( query ), extra );
+
+ // Speed-up: Sizzle(".CLASS")
+ } else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) {
+ return makeArray( context.getElementsByClassName( match[2] ), extra );
+ }
+ }
+
+ if ( context.nodeType === 9 ) {
+ // Speed-up: Sizzle("body")
+ // The body element only exists once, optimize finding it
+ if ( query === "body" && context.body ) {
+ return makeArray( [ context.body ], extra );
+
+ // Speed-up: Sizzle("#ID")
+ } else if ( match && match[3] ) {
+ var elem = context.getElementById( match[3] );
+
+ // Check parentNode to catch when Blackberry 4.6 returns
+ // nodes that are no longer in the document #6963
+ if ( elem && elem.parentNode ) {
+ // Handle the case where IE and Opera return items
+ // by name instead of ID
+ if ( elem.id === match[3] ) {
+ return makeArray( [ elem ], extra );
+ }
+
+ } else {
+ return makeArray( [], extra );
+ }
+ }
+
+ try {
+ return makeArray( context.querySelectorAll(query), extra );
+ } catch(qsaError) {}
+
+ // qSA works strangely on Element-rooted queries
+ // We can work around this by specifying an extra ID on the root
+ // and working up from there (Thanks to Andrew Dupont for the technique)
+ // IE 8 doesn't work on object elements
+ } else if ( context.nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
+ var oldContext = context,
+ old = context.getAttribute( "id" ),
+ nid = old || id,
+ hasParent = context.parentNode,
+ relativeHierarchySelector = /^\s*[+~]/.test( query );
+
+ if ( !old ) {
+ context.setAttribute( "id", nid );
+ } else {
+ nid = nid.replace( /'/g, "\\$&" );
+ }
+ if ( relativeHierarchySelector && hasParent ) {
+ context = context.parentNode;
+ }
+
+ try {
+ if ( !relativeHierarchySelector || hasParent ) {
+ return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );
+ }
+
+ } catch(pseudoError) {
+ } finally {
+ if ( !old ) {
+ oldContext.removeAttribute( "id" );
+ }
+ }
+ }
+ }
+
+ return oldSizzle(query, context, extra, seed);
+ };
+
+ for ( var prop in oldSizzle ) {
+ Sizzle[ prop ] = oldSizzle[ prop ];
+ }
+
+ // release memory in IE
+ div = null;
+ })();
+}
+
+(function(){
+ var html = document.documentElement,
+ matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector;
+
+ if ( matches ) {
+ // Check to see if it's possible to do matchesSelector
+ // on a disconnected node (IE 9 fails this)
+ var disconnectedMatch = !matches.call( document.createElement( "div" ), "div" ),
+ pseudoWorks = false;
+
+ try {
+ // This should fail with an exception
+ // Gecko does not error, returns false instead
+ matches.call( document.documentElement, "[test!='']:sizzle" );
+
+ } catch( pseudoError ) {
+ pseudoWorks = true;
+ }
+
+ Sizzle.matchesSelector = function( node, expr ) {
+ // Make sure that attribute selectors are quoted
+ expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']");
+
+ if ( !Sizzle.isXML( node ) ) {
+ try {
+ if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) {
+ var ret = matches.call( node, expr );
+
+ // IE 9's matchesSelector returns false on disconnected nodes
+ if ( ret || !disconnectedMatch ||
+ // As well, disconnected nodes are said to be in a document
+ // fragment in IE 9, so check for that
+ node.document && node.document.nodeType !== 11 ) {
+ return ret;
+ }
+ }
+ } catch(e) {}
+ }
+
+ return Sizzle(expr, null, null, [node]).length > 0;
+ };
+ }
+})();
+
+(function(){
+ var div = document.createElement("div");
+
+ div.innerHTML = "<div class='test e'></div><div class='test'></div>";
+
+ // Opera can't find a second classname (in 9.6)
+ // Also, make sure that getElementsByClassName actually exists
+ if ( !div.getElementsByClassName || div.getElementsByClassName("e").length === 0 ) {
+ return;
+ }
+
+ // Safari caches class attributes, doesn't catch changes (in 3.2)
+ div.lastChild.className = "e";
+
+ if ( div.getElementsByClassName("e").length === 1 ) {
+ return;
+ }
+
+ Expr.order.splice(1, 0, "CLASS");
+ Expr.find.CLASS = function( match, context, isXML ) {
+ if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) {
+ return context.getElementsByClassName(match[1]);
+ }
+ };
+
+ // release memory in IE
+ div = null;
+})();
+
+function dirNodeCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) {
+ for ( var i = 0, l = checkSet.length; i < l; i++ ) {
+ var elem = checkSet[i];
+
+ if ( elem ) {
+ var match = false;
+
+ elem = elem[dir];
+
+ while ( elem ) {
+ if ( elem[ expando ] === doneName ) {
+ match = checkSet[elem.sizset];
+ break;
+ }
+
+ if ( elem.nodeType === 1 && !isXML ){
+ elem[ expando ] = doneName;
+ elem.sizset = i;
+ }
+
+ if ( elem.nodeName.toLowerCase() === cur ) {
+ match = elem;
+ break;
+ }
+
+ elem = elem[dir];
+ }
+
+ checkSet[i] = match;
+ }
+ }
+}
+
+function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) {
+ for ( var i = 0, l = checkSet.length; i < l; i++ ) {
+ var elem = checkSet[i];
+
+ if ( elem ) {
+ var match = false;
+
+ elem = elem[dir];
+
+ while ( elem ) {
+ if ( elem[ expando ] === doneName ) {
+ match = checkSet[elem.sizset];
+ break;
+ }
+
+ if ( elem.nodeType === 1 ) {
+ if ( !isXML ) {
+ elem[ expando ] = doneName;
+ elem.sizset = i;
+ }
+
+ if ( typeof cur !== "string" ) {
+ if ( elem === cur ) {
+ match = true;
+ break;
+ }
+
+ } else if ( Sizzle.filter( cur, [elem] ).length > 0 ) {
+ match = elem;
+ break;
+ }
+ }
+
+ elem = elem[dir];
+ }
+
+ checkSet[i] = match;
+ }
+ }
+}
+
+if ( document.documentElement.contains ) {
+ Sizzle.contains = function( a, b ) {
+ return a !== b && (a.contains ? a.contains(b) : true);
+ };
+
+} else if ( document.documentElement.compareDocumentPosition ) {
+ Sizzle.contains = function( a, b ) {
+ return !!(a.compareDocumentPosition(b) & 16);
+ };
+
+} else {
+ Sizzle.contains = function() {
+ return false;
+ };
+}
+
+Sizzle.isXML = function( elem ) {
+ // documentElement is verified for cases where it doesn't yet exist
+ // (such as loading iframes in IE - #4833)
+ var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement;
+
+ return documentElement ? documentElement.nodeName !== "HTML" : false;
+};
+
+var posProcess = function( selector, context, seed ) {
+ var match,
+ tmpSet = [],
+ later = "",
+ root = context.nodeType ? [context] : context;
+
+ // Position selectors must be done after the filter
+ // And so must :not(positional) so we move all PSEUDOs to the end
+ while ( (match = Expr.match.PSEUDO.exec( selector )) ) {
+ later += match[0];
+ selector = selector.replace( Expr.match.PSEUDO, "" );
+ }
+
+ selector = Expr.relative[selector] ? selector + "*" : selector;
+
+ for ( var i = 0, l = root.length; i < l; i++ ) {
+ Sizzle( selector, root[i], tmpSet, seed );
+ }
+
+ return Sizzle.filter( later, tmpSet );
+};
+
+// EXPOSE
+// Override sizzle attribute retrieval
+Sizzle.attr = jQuery.attr;
+Sizzle.selectors.attrMap = {};
+jQuery.find = Sizzle;
+jQuery.expr = Sizzle.selectors;
+jQuery.expr[":"] = jQuery.expr.filters;
+jQuery.unique = Sizzle.uniqueSort;
+jQuery.text = Sizzle.getText;
+jQuery.isXMLDoc = Sizzle.isXML;
+jQuery.contains = Sizzle.contains;
+
+
+})();
+
+
+var runtil = /Until$/,
+ rparentsprev = /^(?:parents|prevUntil|prevAll)/,
+ // Note: This RegExp should be improved, or likely pulled from Sizzle
+ rmultiselector = /,/,
+ isSimple = /^.[^:#\[\.,]*$/,
+ slice = Array.prototype.slice,
+ POS = jQuery.expr.match.POS,
+ // methods guaranteed to produce a unique set when starting from a unique set
+ guaranteedUnique = {
+ children: true,
+ contents: true,
+ next: true,
+ prev: true
+ };
+
+jQuery.fn.extend({
+ find: function( selector ) {
+ var self = this,
+ i, l;
+
+ if ( typeof selector !== "string" ) {
+ return jQuery( selector ).filter(function() {
+ for ( i = 0, l = self.length; i < l; i++ ) {
+ if ( jQuery.contains( self[ i ], this ) ) {
+ return true;
+ }
+ }
+ });
+ }
+
+ var ret = this.pushStack( "", "find", selector ),
+ length, n, r;
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ length = ret.length;
+ jQuery.find( selector, this[i], ret );
+
+ if ( i > 0 ) {
+ // Make sure that the results are unique
+ for ( n = length; n < ret.length; n++ ) {
+ for ( r = 0; r < length; r++ ) {
+ if ( ret[r] === ret[n] ) {
+ ret.splice(n--, 1);
+ break;
+ }
+ }
+ }
+ }
+ }
+
+ return ret;
+ },
+
+ has: function( target ) {
+ var targets = jQuery( target );
+ return this.filter(function() {
+ for ( var i = 0, l = targets.length; i < l; i++ ) {
+ if ( jQuery.contains( this, targets[i] ) ) {
+ return true;
+ }
+ }
+ });
+ },
+
+ not: function( selector ) {
+ return this.pushStack( winnow(this, selector, false), "not", selector);
+ },
+
+ filter: function( selector ) {
+ return this.pushStack( winnow(this, selector, true), "filter", selector );
+ },
+
+ is: function( selector ) {
+ return !!selector && (
+ typeof selector === "string" ?
+ // If this is a positional selector, check membership in the returned set
+ // so $("p:first").is("p:last") won't return true for a doc with two "p".
+ POS.test( selector ) ?
+ jQuery( selector, this.context ).index( this[0] ) >= 0 :
+ jQuery.filter( selector, this ).length > 0 :
+ this.filter( selector ).length > 0 );
+ },
+
+ closest: function( selectors, context ) {
+ var ret = [], i, l, cur = this[0];
+
+ // Array (deprecated as of jQuery 1.7)
+ if ( jQuery.isArray( selectors ) ) {
+ var level = 1;
+
+ while ( cur && cur.ownerDocument && cur !== context ) {
+ for ( i = 0; i < selectors.length; i++ ) {
+
+ if ( jQuery( cur ).is( selectors[ i ] ) ) {
+ ret.push({ selector: selectors[ i ], elem: cur, level: level });
+ }
+ }
+
+ cur = cur.parentNode;
+ level++;
+ }
+
+ return ret;
+ }
+
+ // String
+ var pos = POS.test( selectors ) || typeof selectors !== "string" ?
+ jQuery( selectors, context || this.context ) :
+ 0;
+
+ for ( i = 0, l = this.length; i < l; i++ ) {
+ cur = this[i];
+
+ while ( cur ) {
+ if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
+ ret.push( cur );
+ break;
+
+ } else {
+ cur = cur.parentNode;
+ if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {
+ break;
+ }
+ }
+ }
+ }
+
+ ret = ret.length > 1 ? jQuery.unique( ret ) : ret;
+
+ return this.pushStack( ret, "closest", selectors );
+ },
+
+ // Determine the position of an element within
+ // the matched set of elements
+ index: function( elem ) {
+
+ // No argument, return index in parent
+ if ( !elem ) {
+ return ( this[0] && this[0].parentNode ) ? this.prevAll().length : -1;
+ }
+
+ // index in selector
+ if ( typeof elem === "string" ) {
+ return jQuery.inArray( this[0], jQuery( elem ) );
+ }
+
+ // Locate the position of the desired element
+ return jQuery.inArray(
+ // If it receives a jQuery object, the first element is used
+ elem.jquery ? elem[0] : elem, this );
+ },
+
+ add: function( selector, context ) {
+ var set = typeof selector === "string" ?
+ jQuery( selector, context ) :
+ jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ),
+ all = jQuery.merge( this.get(), set );
+
+ return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ?
+ all :
+ jQuery.unique( all ) );
+ },
+
+ andSelf: function() {
+ return this.add( this.prevObject );
+ }
+});
+
+// A painfully simple check to see if an element is disconnected
+// from a document (should be improved, where feasible).
+function isDisconnected( node ) {
+ return !node || !node.parentNode || node.parentNode.nodeType === 11;
+}
+
+jQuery.each({
+ parent: function( elem ) {
+ var parent = elem.parentNode;
+ return parent && parent.nodeType !== 11 ? parent : null;
+ },
+ parents: function( elem ) {
+ return jQuery.dir( elem, "parentNode" );
+ },
+ parentsUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "parentNode", until );
+ },
+ next: function( elem ) {
+ return jQuery.nth( elem, 2, "nextSibling" );
+ },
+ prev: function( elem ) {
+ return jQuery.nth( elem, 2, "previousSibling" );
+ },
+ nextAll: function( elem ) {
+ return jQuery.dir( elem, "nextSibling" );
+ },
+ prevAll: function( elem ) {
+ return jQuery.dir( elem, "previousSibling" );
+ },
+ nextUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "nextSibling", until );
+ },
+ prevUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "previousSibling", until );
+ },
+ siblings: function( elem ) {
+ return jQuery.sibling( elem.parentNode.firstChild, elem );
+ },
+ children: function( elem ) {
+ return jQuery.sibling( elem.firstChild );
+ },
+ contents: function( elem ) {
+ return jQuery.nodeName( elem, "iframe" ) ?
+ elem.contentDocument || elem.contentWindow.document :
+ jQuery.makeArray( elem.childNodes );
+ }
+}, function( name, fn ) {
+ jQuery.fn[ name ] = function( until, selector ) {
+ var ret = jQuery.map( this, fn, until );
+
+ if ( !runtil.test( name ) ) {
+ selector = until;
+ }
+
+ if ( selector && typeof selector === "string" ) {
+ ret = jQuery.filter( selector, ret );
+ }
+
+ ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret;
+
+ if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) {
+ ret = ret.reverse();
+ }
+
+ return this.pushStack( ret, name, slice.call( arguments ).join(",") );
+ };
+});
+
+jQuery.extend({
+ filter: function( expr, elems, not ) {
+ if ( not ) {
+ expr = ":not(" + expr + ")";
+ }
+
+ return elems.length === 1 ?
+ jQuery.find.matchesSelector(elems[0], expr) ? [ elems[0] ] : [] :
+ jQuery.find.matches(expr, elems);
+ },
+
+ dir: function( elem, dir, until ) {
+ var matched = [],
+ cur = elem[ dir ];
+
+ while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
+ if ( cur.nodeType === 1 ) {
+ matched.push( cur );
+ }
+ cur = cur[dir];
+ }
+ return matched;
+ },
+
+ nth: function( cur, result, dir, elem ) {
+ result = result || 1;
+ var num = 0;
+
+ for ( ; cur; cur = cur[dir] ) {
+ if ( cur.nodeType === 1 && ++num === result ) {
+ break;
+ }
+ }
+
+ return cur;
+ },
+
+ sibling: function( n, elem ) {
+ var r = [];
+
+ for ( ; n; n = n.nextSibling ) {
+ if ( n.nodeType === 1 && n !== elem ) {
+ r.push( n );
+ }
+ }
+
+ return r;
+ }
+});
+
+// Implement the identical functionality for filter and not
+function winnow( elements, qualifier, keep ) {
+
+ // Can't pass null or undefined to indexOf in Firefox 4
+ // Set to 0 to skip string check
+ qualifier = qualifier || 0;
+
+ if ( jQuery.isFunction( qualifier ) ) {
+ return jQuery.grep(elements, function( elem, i ) {
+ var retVal = !!qualifier.call( elem, i, elem );
+ return retVal === keep;
+ });
+
+ } else if ( qualifier.nodeType ) {
+ return jQuery.grep(elements, function( elem, i ) {
+ return ( elem === qualifier ) === keep;
+ });
+
+ } else if ( typeof qualifier === "string" ) {
+ var filtered = jQuery.grep(elements, function( elem ) {
+ return elem.nodeType === 1;
+ });
+
+ if ( isSimple.test( qualifier ) ) {
+ return jQuery.filter(qualifier, filtered, !keep);
+ } else {
+ qualifier = jQuery.filter( qualifier, filtered );
+ }
+ }
+
+ return jQuery.grep(elements, function( elem, i ) {
+ return ( jQuery.inArray( elem, qualifier ) >= 0 ) === keep;
+ });
+}
+
+
+
+
+function createSafeFragment( document ) {
+ var list = nodeNames.split( "|" ),
+ safeFrag = document.createDocumentFragment();
+
+ if ( safeFrag.createElement ) {
+ while ( list.length ) {
+ safeFrag.createElement(
+ list.pop()
+ );
+ }
+ }
+ return safeFrag;
+}
+
+var nodeNames = "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|" +
+ "header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
+ rinlinejQuery = / jQuery\d+="(?:\d+|null)"/g,
+ rleadingWhitespace = /^\s+/,
+ rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,
+ rtagName = /<([\w:]+)/,
+ rtbody = /<tbody/i,
+ rhtml = /<|&#?\w+;/,
+ rnoInnerhtml = /<(?:script|style)/i,
+ rnocache = /<(?:script|object|embed|option|style)/i,
+ rnoshimcache = new RegExp("<(?:" + nodeNames + ")", "i"),
+ // checked="checked" or checked
+ rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
+ rscriptType = /\/(java|ecma)script/i,
+ rcleanScript = /^\s*<!(?:\[CDATA\[|\-\-)/,
+ wrapMap = {
+ option: [ 1, "<select multiple='multiple'>", "</select>" ],
+ legend: [ 1, "<fieldset>", "</fieldset>" ],
+ thead: [ 1, "<table>", "</table>" ],
+ tr: [ 2, "<table><tbody>", "</tbody></table>" ],
+ td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
+ col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
+ area: [ 1, "<map>", "</map>" ],
+ _default: [ 0, "", "" ]
+ },
+ safeFragment = createSafeFragment( document );
+
+wrapMap.optgroup = wrapMap.option;
+wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
+wrapMap.th = wrapMap.td;
+
+// IE can't serialize <link> and <script> tags normally
+if ( !jQuery.support.htmlSerialize ) {
+ wrapMap._default = [ 1, "div<div>", "</div>" ];
+}
+
+jQuery.fn.extend({
+ text: function( text ) {
+ if ( jQuery.isFunction(text) ) {
+ return this.each(function(i) {
+ var self = jQuery( this );
+
+ self.text( text.call(this, i, self.text()) );
+ });
+ }
+
+ if ( typeof text !== "object" && text !== undefined ) {
+ return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
+ }
+
+ return jQuery.text( this );
+ },
+
+ wrapAll: function( html ) {
+ if ( jQuery.isFunction( html ) ) {
+ return this.each(function(i) {
+ jQuery(this).wrapAll( html.call(this, i) );
+ });
+ }
+
+ if ( this[0] ) {
+ // The elements to wrap the target around
+ var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true);
+
+ if ( this[0].parentNode ) {
+ wrap.insertBefore( this[0] );
+ }
+
+ wrap.map(function() {
+ var elem = this;
+
+ while ( elem.firstChild && elem.firstChild.nodeType === 1 ) {
+ elem = elem.firstChild;
+ }
+
+ return elem;
+ }).append( this );
+ }
+
+ return this;
+ },
+
+ wrapInner: function( html ) {
+ if ( jQuery.isFunction( html ) ) {
+ return this.each(function(i) {
+ jQuery(this).wrapInner( html.call(this, i) );
+ });
+ }
+
+ return this.each(function() {
+ var self = jQuery( this ),
+ contents = self.contents();
+
+ if ( contents.length ) {
+ contents.wrapAll( html );
+
+ } else {
+ self.append( html );
+ }
+ });
+ },
+
+ wrap: function( html ) {
+ var isFunction = jQuery.isFunction( html );
+
+ return this.each(function(i) {
+ jQuery( this ).wrapAll( isFunction ? html.call(this, i) : html );
+ });
+ },
+
+ unwrap: function() {
+ return this.parent().each(function() {
+ if ( !jQuery.nodeName( this, "body" ) ) {
+ jQuery( this ).replaceWith( this.childNodes );
+ }
+ }).end();
+ },
+
+ append: function() {
+ return this.domManip(arguments, true, function( elem ) {
+ if ( this.nodeType === 1 ) {
+ this.appendChild( elem );
+ }
+ });
+ },
+
+ prepend: function() {
+ return this.domManip(arguments, true, function( elem ) {
+ if ( this.nodeType === 1 ) {
+ this.insertBefore( elem, this.firstChild );
+ }
+ });
+ },
+
+ before: function() {
+ if ( this[0] && this[0].parentNode ) {
+ return this.domManip(arguments, false, function( elem ) {
+ this.parentNode.insertBefore( elem, this );
+ });
+ } else if ( arguments.length ) {
+ var set = jQuery.clean( arguments );
+ set.push.apply( set, this.toArray() );
+ return this.pushStack( set, "before", arguments );
+ }
+ },
+
+ after: function() {
+ if ( this[0] && this[0].parentNode ) {
+ return this.domManip(arguments, false, function( elem ) {
+ this.parentNode.insertBefore( elem, this.nextSibling );
+ });
+ } else if ( arguments.length ) {
+ var set = this.pushStack( this, "after", arguments );
+ set.push.apply( set, jQuery.clean(arguments) );
+ return set;
+ }
+ },
+
+ // keepData is for internal use only--do not document
+ remove: function( selector, keepData ) {
+ for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
+ if ( !selector || jQuery.filter( selector, [ elem ] ).length ) {
+ if ( !keepData && elem.nodeType === 1 ) {
+ jQuery.cleanData( elem.getElementsByTagName("*") );
+ jQuery.cleanData( [ elem ] );
+ }
+
+ if ( elem.parentNode ) {
+ elem.parentNode.removeChild( elem );
+ }
+ }
+ }
+
+ return this;
+ },
+
+ empty: function() {
+ for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
+ // Remove element nodes and prevent memory leaks
+ if ( elem.nodeType === 1 ) {
+ jQuery.cleanData( elem.getElementsByTagName("*") );
+ }
+
+ // Remove any remaining nodes
+ while ( elem.firstChild ) {
+ elem.removeChild( elem.firstChild );
+ }
+ }
+
+ return this;
+ },
+
+ clone: function( dataAndEvents, deepDataAndEvents ) {
+ dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
+ deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;
+
+ return this.map( function () {
+ return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
+ });
+ },
+
+ html: function( value ) {
+ if ( value === undefined ) {
+ return this[0] && this[0].nodeType === 1 ?
+ this[0].innerHTML.replace(rinlinejQuery, "") :
+ null;
+
+ // See if we can take a shortcut and just use innerHTML
+ } else if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
+ (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
+ !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {
+
+ value = value.replace(rxhtmlTag, "<$1></$2>");
+
+ try {
+ for ( var i = 0, l = this.length; i < l; i++ ) {
+ // Remove element nodes and prevent memory leaks
+ if ( this[i].nodeType === 1 ) {
+ jQuery.cleanData( this[i].getElementsByTagName("*") );
+ this[i].innerHTML = value;
+ }
+ }
+
+ // If using innerHTML throws an exception, use the fallback method
+ } catch(e) {
+ this.empty().append( value );
+ }
+
+ } else if ( jQuery.isFunction( value ) ) {
+ this.each(function(i){
+ var self = jQuery( this );
+
+ self.html( value.call(this, i, self.html()) );
+ });
+
+ } else {
+ this.empty().append( value );
+ }
+
+ return this;
+ },
+
+ replaceWith: function( value ) {
+ if ( this[0] && this[0].parentNode ) {
+ // Make sure that the elements are removed from the DOM before they are inserted
+ // this can help fix replacing a parent with child elements
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function(i) {
+ var self = jQuery(this), old = self.html();
+ self.replaceWith( value.call( this, i, old ) );
+ });
+ }
+
+ if ( typeof value !== "string" ) {
+ value = jQuery( value ).detach();
+ }
+
+ return this.each(function() {
+ var next = this.nextSibling,
+ parent = this.parentNode;
+
+ jQuery( this ).remove();
+
+ if ( next ) {
+ jQuery(next).before( value );
+ } else {
+ jQuery(parent).append( value );
+ }
+ });
+ } else {
+ return this.length ?
+ this.pushStack( jQuery(jQuery.isFunction(value) ? value() : value), "replaceWith", value ) :
+ this;
+ }
+ },
+
+ detach: function( selector ) {
+ return this.remove( selector, true );
+ },
+
+ domManip: function( args, table, callback ) {
+ var results, first, fragment, parent,
+ value = args[0],
+ scripts = [];
+
+ // We can't cloneNode fragments that contain checked, in WebKit
+ if ( !jQuery.support.checkClone && arguments.length === 3 && typeof value === "string" && rchecked.test( value ) ) {
+ return this.each(function() {
+ jQuery(this).domManip( args, table, callback, true );
+ });
+ }
+
+ if ( jQuery.isFunction(value) ) {
+ return this.each(function(i) {
+ var self = jQuery(this);
+ args[0] = value.call(this, i, table ? self.html() : undefined);
+ self.domManip( args, table, callback );
+ });
+ }
+
+ if ( this[0] ) {
+ parent = value && value.parentNode;
+
+ // If we're in a fragment, just use that instead of building a new one
+ if ( jQuery.support.parentNode && parent && parent.nodeType === 11 && parent.childNodes.length === this.length ) {
+ results = { fragment: parent };
+
+ } else {
+ results = jQuery.buildFragment( args, this, scripts );
+ }
+
+ fragment = results.fragment;
+
+ if ( fragment.childNodes.length === 1 ) {
+ first = fragment = fragment.firstChild;
+ } else {
+ first = fragment.firstChild;
+ }
+
+ if ( first ) {
+ table = table && jQuery.nodeName( first, "tr" );
+
+ for ( var i = 0, l = this.length, lastIndex = l - 1; i < l; i++ ) {
+ callback.call(
+ table ?
+ root(this[i], first) :
+ this[i],
+ // Make sure that we do not leak memory by inadvertently discarding
+ // the original fragment (which might have attached data) instead of
+ // using it; in addition, use the original fragment object for the last
+ // item instead of first because it can end up being emptied incorrectly
+ // in certain situations (Bug #8070).
+ // Fragments from the fragment cache must always be cloned and never used
+ // in place.
+ results.cacheable || ( l > 1 && i < lastIndex ) ?
+ jQuery.clone( fragment, true, true ) :
+ fragment
+ );
+ }
+ }
+
+ if ( scripts.length ) {
+ jQuery.each( scripts, evalScript );
+ }
+ }
+
+ return this;
+ }
+});
+
+function root( elem, cur ) {
+ return jQuery.nodeName(elem, "table") ?
+ (elem.getElementsByTagName("tbody")[0] ||
+ elem.appendChild(elem.ownerDocument.createElement("tbody"))) :
+ elem;
+}
+
+function cloneCopyEvent( src, dest ) {
+
+ if ( dest.nodeType !== 1 || !jQuery.hasData( src ) ) {
+ return;
+ }
+
+ var type, i, l,
+ oldData = jQuery._data( src ),
+ curData = jQuery._data( dest, oldData ),
+ events = oldData.events;
+
+ if ( events ) {
+ delete curData.handle;
+ curData.events = {};
+
+ for ( type in events ) {
+ for ( i = 0, l = events[ type ].length; i < l; i++ ) {
+ jQuery.event.add( dest, type + ( events[ type ][ i ].namespace ? "." : "" ) + events[ type ][ i ].namespace, events[ type ][ i ], events[ type ][ i ].data );
+ }
+ }
+ }
+
+ // make the cloned public data object a copy from the original
+ if ( curData.data ) {
+ curData.data = jQuery.extend( {}, curData.data );
+ }
+}
+
+function cloneFixAttributes( src, dest ) {
+ var nodeName;
+
+ // We do not need to do anything for non-Elements
+ if ( dest.nodeType !== 1 ) {
+ return;
+ }
+
+ // clearAttributes removes the attributes, which we don't want,
+ // but also removes the attachEvent events, which we *do* want
+ if ( dest.clearAttributes ) {
+ dest.clearAttributes();
+ }
+
+ // mergeAttributes, in contrast, only merges back on the
+ // original attributes, not the events
+ if ( dest.mergeAttributes ) {
+ dest.mergeAttributes( src );
+ }
+
+ nodeName = dest.nodeName.toLowerCase();
+
+ // IE6-8 fail to clone children inside object elements that use
+ // the proprietary classid attribute value (rather than the type
+ // attribute) to identify the type of content to display
+ if ( nodeName === "object" ) {
+ dest.outerHTML = src.outerHTML;
+
+ } else if ( nodeName === "input" && (src.type === "checkbox" || src.type === "radio") ) {
+ // IE6-8 fails to persist the checked state of a cloned checkbox
+ // or radio button. Worse, IE6-7 fail to give the cloned element
+ // a checked appearance if the defaultChecked value isn't also set
+ if ( src.checked ) {
+ dest.defaultChecked = dest.checked = src.checked;
+ }
+
+ // IE6-7 get confused and end up setting the value of a cloned
+ // checkbox/radio button to an empty string instead of "on"
+ if ( dest.value !== src.value ) {
+ dest.value = src.value;
+ }
+
+ // IE6-8 fails to return the selected option to the default selected
+ // state when cloning options
+ } else if ( nodeName === "option" ) {
+ dest.selected = src.defaultSelected;
+
+ // IE6-8 fails to set the defaultValue to the correct value when
+ // cloning other types of input fields
+ } else if ( nodeName === "input" || nodeName === "textarea" ) {
+ dest.defaultValue = src.defaultValue;
+ }
+
+ // Event data gets referenced instead of copied if the expando
+ // gets copied too
+ dest.removeAttribute( jQuery.expando );
+}
+
+jQuery.buildFragment = function( args, nodes, scripts ) {
+ var fragment, cacheable, cacheresults, doc,
+ first = args[ 0 ];
+
+ // nodes may contain either an explicit document object,
+ // a jQuery collection or context object.
+ // If nodes[0] contains a valid object to assign to doc
+ if ( nodes && nodes[0] ) {
+ doc = nodes[0].ownerDocument || nodes[0];
+ }
+
+ // Ensure that an attr object doesn't incorrectly stand in as a document object
+ // Chrome and Firefox seem to allow this to occur and will throw exception
+ // Fixes #8950
+ if ( !doc.createDocumentFragment ) {
+ doc = document;
+ }
+
+ // Only cache "small" (1/2 KB) HTML strings that are associated with the main document
+ // Cloning options loses the selected state, so don't cache them
+ // IE 6 doesn't like it when you put <object> or <embed> elements in a fragment
+ // Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache
+ // Lastly, IE6,7,8 will not correctly reuse cached fragments that were created from unknown elems #10501
+ if ( args.length === 1 && typeof first === "string" && first.length < 512 && doc === document &&
+ first.charAt(0) === "<" && !rnocache.test( first ) &&
+ (jQuery.support.checkClone || !rchecked.test( first )) &&
+ (jQuery.support.html5Clone || !rnoshimcache.test( first )) ) {
+
+ cacheable = true;
+
+ cacheresults = jQuery.fragments[ first ];
+ if ( cacheresults && cacheresults !== 1 ) {
+ fragment = cacheresults;
+ }
+ }
+
+ if ( !fragment ) {
+ fragment = doc.createDocumentFragment();
+ jQuery.clean( args, doc, fragment, scripts );
+ }
+
+ if ( cacheable ) {
+ jQuery.fragments[ first ] = cacheresults ? fragment : 1;
+ }
+
+ return { fragment: fragment, cacheable: cacheable };
+};
+
+jQuery.fragments = {};
+
+jQuery.each({
+ appendTo: "append",
+ prependTo: "prepend",
+ insertBefore: "before",
+ insertAfter: "after",
+ replaceAll: "replaceWith"
+}, function( name, original ) {
+ jQuery.fn[ name ] = function( selector ) {
+ var ret = [],
+ insert = jQuery( selector ),
+ parent = this.length === 1 && this[0].parentNode;
+
+ if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
+ insert[ original ]( this[0] );
+ return this;
+
+ } else {
+ for ( var i = 0, l = insert.length; i < l; i++ ) {
+ var elems = ( i > 0 ? this.clone(true) : this ).get();
+ jQuery( insert[i] )[ original ]( elems );
+ ret = ret.concat( elems );
+ }
+
+ return this.pushStack( ret, name, insert.selector );
+ }
+ };
+});
+
+function getAll( elem ) {
+ if ( typeof elem.getElementsByTagName !== "undefined" ) {
+ return elem.getElementsByTagName( "*" );
+
+ } else if ( typeof elem.querySelectorAll !== "undefined" ) {
+ return elem.querySelectorAll( "*" );
+
+ } else {
+ return [];
+ }
+}
+
+// Used in clean, fixes the defaultChecked property
+function fixDefaultChecked( elem ) {
+ if ( elem.type === "checkbox" || elem.type === "radio" ) {
+ elem.defaultChecked = elem.checked;
+ }
+}
+// Finds all inputs and passes them to fixDefaultChecked
+function findInputs( elem ) {
+ var nodeName = ( elem.nodeName || "" ).toLowerCase();
+ if ( nodeName === "input" ) {
+ fixDefaultChecked( elem );
+ // Skip scripts, get other children
+ } else if ( nodeName !== "script" && typeof elem.getElementsByTagName !== "undefined" ) {
+ jQuery.grep( elem.getElementsByTagName("input"), fixDefaultChecked );
+ }
+}
+
+// Derived From: http://www.iecss.com/shimprove/javascript/shimprove.1-0-1.js
+function shimCloneNode( elem ) {
+ var div = document.createElement( "div" );
+ safeFragment.appendChild( div );
+
+ div.innerHTML = elem.outerHTML;
+ return div.firstChild;
+}
+
+jQuery.extend({
+ clone: function( elem, dataAndEvents, deepDataAndEvents ) {
+ var srcElements,
+ destElements,
+ i,
+ // IE<=8 does not properly clone detached, unknown element nodes
+ clone = jQuery.support.html5Clone || !rnoshimcache.test( "<" + elem.nodeName ) ?
+ elem.cloneNode( true ) :
+ shimCloneNode( elem );
+
+ if ( (!jQuery.support.noCloneEvent || !jQuery.support.noCloneChecked) &&
+ (elem.nodeType === 1 || elem.nodeType === 11) && !jQuery.isXMLDoc(elem) ) {
+ // IE copies events bound via attachEvent when using cloneNode.
+ // Calling detachEvent on the clone will also remove the events
+ // from the original. In order to get around this, we use some
+ // proprietary methods to clear the events. Thanks to MooTools
+ // guys for this hotness.
+
+ cloneFixAttributes( elem, clone );
+
+ // Using Sizzle here is crazy slow, so we use getElementsByTagName instead
+ srcElements = getAll( elem );
+ destElements = getAll( clone );
+
+ // Weird iteration because IE will replace the length property
+ // with an element if you are cloning the body and one of the
+ // elements on the page has a name or id of "length"
+ for ( i = 0; srcElements[i]; ++i ) {
+ // Ensure that the destination node is not null; Fixes #9587
+ if ( destElements[i] ) {
+ cloneFixAttributes( srcElements[i], destElements[i] );
+ }
+ }
+ }
+
+ // Copy the events from the original to the clone
+ if ( dataAndEvents ) {
+ cloneCopyEvent( elem, clone );
+
+ if ( deepDataAndEvents ) {
+ srcElements = getAll( elem );
+ destElements = getAll( clone );
+
+ for ( i = 0; srcElements[i]; ++i ) {
+ cloneCopyEvent( srcElements[i], destElements[i] );
+ }
+ }
+ }
+
+ srcElements = destElements = null;
+
+ // Return the cloned set
+ return clone;
+ },
+
+ clean: function( elems, context, fragment, scripts ) {
+ var checkScriptType;
+
+ context = context || document;
+
+ // !context.createElement fails in IE with an error but returns typeof 'object'
+ if ( typeof context.createElement === "undefined" ) {
+ context = context.ownerDocument || context[0] && context[0].ownerDocument || document;
+ }
+
+ var ret = [], j;
+
+ for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
+ if ( typeof elem === "number" ) {
+ elem += "";
+ }
+
+ if ( !elem ) {
+ continue;
+ }
+
+ // Convert html string into DOM nodes
+ if ( typeof elem === "string" ) {
+ if ( !rhtml.test( elem ) ) {
+ elem = context.createTextNode( elem );
+ } else {
+ // Fix "XHTML"-style tags in all browsers
+ elem = elem.replace(rxhtmlTag, "<$1></$2>");
+
+ // Trim whitespace, otherwise indexOf won't work as expected
+ var tag = ( rtagName.exec( elem ) || ["", ""] )[1].toLowerCase(),
+ wrap = wrapMap[ tag ] || wrapMap._default,
+ depth = wrap[0],
+ div = context.createElement("div");
+
+ // Append wrapper element to unknown element safe doc fragment
+ if ( context === document ) {
+ // Use the fragment we've already created for this document
+ safeFragment.appendChild( div );
+ } else {
+ // Use a fragment created with the owner document
+ createSafeFragment( context ).appendChild( div );
+ }
+
+ // Go to html and back, then peel off extra wrappers
+ div.innerHTML = wrap[1] + elem + wrap[2];
+
+ // Move to the right depth
+ while ( depth-- ) {
+ div = div.lastChild;
+ }
+
+ // Remove IE's autoinserted <tbody> from table fragments
+ if ( !jQuery.support.tbody ) {
+
+ // String was a <table>, *may* have spurious <tbody>
+ var hasBody = rtbody.test(elem),
+ tbody = tag === "table" && !hasBody ?
+ div.firstChild && div.firstChild.childNodes :
+
+ // String was a bare <thead> or <tfoot>
+ wrap[1] === "<table>" && !hasBody ?
+ div.childNodes :
+ [];
+
+ for ( j = tbody.length - 1; j >= 0 ; --j ) {
+ if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
+ tbody[ j ].parentNode.removeChild( tbody[ j ] );
+ }
+ }
+ }
+
+ // IE completely kills leading whitespace when innerHTML is used
+ if ( !jQuery.support.leadingWhitespace && rleadingWhitespace.test( elem ) ) {
+ div.insertBefore( context.createTextNode( rleadingWhitespace.exec(elem)[0] ), div.firstChild );
+ }
+
+ elem = div.childNodes;
+ }
+ }
+
+ // Resets defaultChecked for any radios and checkboxes
+ // about to be appended to the DOM in IE 6/7 (#8060)
+ var len;
+ if ( !jQuery.support.appendChecked ) {
+ if ( elem[0] && typeof (len = elem.length) === "number" ) {
+ for ( j = 0; j < len; j++ ) {
+ findInputs( elem[j] );
+ }
+ } else {
+ findInputs( elem );
+ }
+ }
+
+ if ( elem.nodeType ) {
+ ret.push( elem );
+ } else {
+ ret = jQuery.merge( ret, elem );
+ }
+ }
+
+ if ( fragment ) {
+ checkScriptType = function( elem ) {
+ return !elem.type || rscriptType.test( elem.type );
+ };
+ for ( i = 0; ret[i]; i++ ) {
+ if ( scripts && jQuery.nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
+ scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
+
+ } else {
+ if ( ret[i].nodeType === 1 ) {
+ var jsTags = jQuery.grep( ret[i].getElementsByTagName( "script" ), checkScriptType );
+
+ ret.splice.apply( ret, [i + 1, 0].concat( jsTags ) );
+ }
+ fragment.appendChild( ret[i] );
+ }
+ }
+ }
+
+ return ret;
+ },
+
+ cleanData: function( elems ) {
+ var data, id,
+ cache = jQuery.cache,
+ special = jQuery.event.special,
+ deleteExpando = jQuery.support.deleteExpando;
+
+ for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
+ if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {
+ continue;
+ }
+
+ id = elem[ jQuery.expando ];
+
+ if ( id ) {
+ data = cache[ id ];
+
+ if ( data && data.events ) {
+ for ( var type in data.events ) {
+ if ( special[ type ] ) {
+ jQuery.event.remove( elem, type );
+
+ // This is a shortcut to avoid jQuery.event.remove's overhead
+ } else {
+ jQuery.removeEvent( elem, type, data.handle );
+ }
+ }
+
+ // Null the DOM reference to avoid IE6/7/8 leak (#7054)
+ if ( data.handle ) {
+ data.handle.elem = null;
+ }
+ }
+
+ if ( deleteExpando ) {
+ delete elem[ jQuery.expando ];
+
+ } else if ( elem.removeAttribute ) {
+ elem.removeAttribute( jQuery.expando );
+ }
+
+ delete cache[ id ];
+ }
+ }
+ }
+});
+
+function evalScript( i, elem ) {
+ if ( elem.src ) {
+ jQuery.ajax({
+ url: elem.src,
+ async: false,
+ dataType: "script"
+ });
+ } else {
+ jQuery.globalEval( ( elem.text || elem.textContent || elem.innerHTML || "" ).replace( rcleanScript, "/*$0*/" ) );
+ }
+
+ if ( elem.parentNode ) {
+ elem.parentNode.removeChild( elem );
+ }
+}
+
+
+
+
+var ralpha = /alpha\([^)]*\)/i,
+ ropacity = /opacity=([^)]*)/,
+ // fixed for IE9, see #8346
+ rupper = /([A-Z]|^ms)/g,
+ rnumpx = /^-?\d+(?:px)?$/i,
+ rnum = /^-?\d/,
+ rrelNum = /^([\-+])=([\-+.\de]+)/,
+
+ cssShow = { position: "absolute", visibility: "hidden", display: "block" },
+ cssWidth = [ "Left", "Right" ],
+ cssHeight = [ "Top", "Bottom" ],
+ curCSS,
+
+ getComputedStyle,
+ currentStyle;
+
+jQuery.fn.css = function( name, value ) {
+ // Setting 'undefined' is a no-op
+ if ( arguments.length === 2 && value === undefined ) {
+ return this;
+ }
+
+ return jQuery.access( this, name, value, true, function( elem, name, value ) {
+ return value !== undefined ?
+ jQuery.style( elem, name, value ) :
+ jQuery.css( elem, name );
+ });
+};
+
+jQuery.extend({
+ // Add in style property hooks for overriding the default
+ // behavior of getting and setting a style property
+ cssHooks: {
+ opacity: {
+ get: function( elem, computed ) {
+ if ( computed ) {
+ // We should always get a number back from opacity
+ var ret = curCSS( elem, "opacity", "opacity" );
+ return ret === "" ? "1" : ret;
+
+ } else {
+ return elem.style.opacity;
+ }
+ }
+ }
+ },
+
+ // Exclude the following css properties to add px
+ cssNumber: {
+ "fillOpacity": true,
+ "fontWeight": true,
+ "lineHeight": true,
+ "opacity": true,
+ "orphans": true,
+ "widows": true,
+ "zIndex": true,
+ "zoom": true
+ },
+
+ // Add in properties whose names you wish to fix before
+ // setting or getting the value
+ cssProps: {
+ // normalize float css property
+ "float": jQuery.support.cssFloat ? "cssFloat" : "styleFloat"
+ },
+
+ // Get and set the style property on a DOM Node
+ style: function( elem, name, value, extra ) {
+ // Don't set styles on text and comment nodes
+ if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
+ return;
+ }
+
+ // Make sure that we're working with the right name
+ var ret, type, origName = jQuery.camelCase( name ),
+ style = elem.style, hooks = jQuery.cssHooks[ origName ];
+
+ name = jQuery.cssProps[ origName ] || origName;
+
+ // Check if we're setting a value
+ if ( value !== undefined ) {
+ type = typeof value;
+
+ // convert relative number strings (+= or -=) to relative numbers. #7345
+ if ( type === "string" && (ret = rrelNum.exec( value )) ) {
+ value = ( +( ret[1] + 1) * +ret[2] ) + parseFloat( jQuery.css( elem, name ) );
+ // Fixes bug #9237
+ type = "number";
+ }
+
+ // Make sure that NaN and null values aren't set. See: #7116
+ if ( value == null || type === "number" && isNaN( value ) ) {
+ return;
+ }
+
+ // If a number was passed in, add 'px' to the (except for certain CSS properties)
+ if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
+ value += "px";
+ }
+
+ // If a hook was provided, use that value, otherwise just set the specified value
+ if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value )) !== undefined ) {
+ // Wrapped to prevent IE from throwing errors when 'invalid' values are provided
+ // Fixes bug #5509
+ try {
+ style[ name ] = value;
+ } catch(e) {}
+ }
+
+ } else {
+ // If a hook was provided get the non-computed value from there
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
+ return ret;
+ }
+
+ // Otherwise just get the value from the style object
+ return style[ name ];
+ }
+ },
+
+ css: function( elem, name, extra ) {
+ var ret, hooks;
+
+ // Make sure that we're working with the right name
+ name = jQuery.camelCase( name );
+ hooks = jQuery.cssHooks[ name ];
+ name = jQuery.cssProps[ name ] || name;
+
+ // cssFloat needs a special treatment
+ if ( name === "cssFloat" ) {
+ name = "float";
+ }
+
+ // If a hook was provided get the computed value from there
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, true, extra )) !== undefined ) {
+ return ret;
+
+ // Otherwise, if a way to get the computed value exists, use that
+ } else if ( curCSS ) {
+ return curCSS( elem, name );
+ }
+ },
+
+ // A method for quickly swapping in/out CSS properties to get correct calculations
+ swap: function( elem, options, callback ) {
+ var old = {};
+
+ // Remember the old values, and insert the new ones
+ for ( var name in options ) {
+ old[ name ] = elem.style[ name ];
+ elem.style[ name ] = options[ name ];
+ }
+
+ callback.call( elem );
+
+ // Revert the old values
+ for ( name in options ) {
+ elem.style[ name ] = old[ name ];
+ }
+ }
+});
+
+// DEPRECATED, Use jQuery.css() instead
+jQuery.curCSS = jQuery.css;
+
+jQuery.each(["height", "width"], function( i, name ) {
+ jQuery.cssHooks[ name ] = {
+ get: function( elem, computed, extra ) {
+ var val;
+
+ if ( computed ) {
+ if ( elem.offsetWidth !== 0 ) {
+ return getWH( elem, name, extra );
+ } else {
+ jQuery.swap( elem, cssShow, function() {
+ val = getWH( elem, name, extra );
+ });
+ }
+
+ return val;
+ }
+ },
+
+ set: function( elem, value ) {
+ if ( rnumpx.test( value ) ) {
+ // ignore negative width and height values #1599
+ value = parseFloat( value );
+
+ if ( value >= 0 ) {
+ return value + "px";
+ }
+
+ } else {
+ return value;
+ }
+ }
+ };
+});
+
+if ( !jQuery.support.opacity ) {
+ jQuery.cssHooks.opacity = {
+ get: function( elem, computed ) {
+ // IE uses filters for opacity
+ return ropacity.test( (computed && elem.currentStyle ? elem.currentStyle.filter : elem.style.filter) || "" ) ?
+ ( parseFloat( RegExp.$1 ) / 100 ) + "" :
+ computed ? "1" : "";
+ },
+
+ set: function( elem, value ) {
+ var style = elem.style,
+ currentStyle = elem.currentStyle,
+ opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "",
+ filter = currentStyle && currentStyle.filter || style.filter || "";
+
+ // IE has trouble with opacity if it does not have layout
+ // Force it by setting the zoom level
+ style.zoom = 1;
+
+ // if setting opacity to 1, and no other filters exist - attempt to remove filter attribute #6652
+ if ( value >= 1 && jQuery.trim( filter.replace( ralpha, "" ) ) === "" ) {
+
+ // Setting style.filter to null, "" & " " still leave "filter:" in the cssText
+ // if "filter:" is present at all, clearType is disabled, we want to avoid this
+ // style.removeAttribute is IE Only, but so apparently is this code path...
+ style.removeAttribute( "filter" );
+
+ // if there there is no filter style applied in a css rule, we are done
+ if ( currentStyle && !currentStyle.filter ) {
+ return;
+ }
+ }
+
+ // otherwise, set new filter values
+ style.filter = ralpha.test( filter ) ?
+ filter.replace( ralpha, opacity ) :
+ filter + " " + opacity;
+ }
+ };
+}
+
+jQuery(function() {
+ // This hook cannot be added until DOM ready because the support test
+ // for it is not run until after DOM ready
+ if ( !jQuery.support.reliableMarginRight ) {
+ jQuery.cssHooks.marginRight = {
+ get: function( elem, computed ) {
+ // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
+ // Work around by temporarily setting element display to inline-block
+ var ret;
+ jQuery.swap( elem, { "display": "inline-block" }, function() {
+ if ( computed ) {
+ ret = curCSS( elem, "margin-right", "marginRight" );
+ } else {
+ ret = elem.style.marginRight;
+ }
+ });
+ return ret;
+ }
+ };
+ }
+});
+
+if ( document.defaultView && document.defaultView.getComputedStyle ) {
+ getComputedStyle = function( elem, name ) {
+ var ret, defaultView, computedStyle;
+
+ name = name.replace( rupper, "-$1" ).toLowerCase();
+
+ if ( (defaultView = elem.ownerDocument.defaultView) &&
+ (computedStyle = defaultView.getComputedStyle( elem, null )) ) {
+ ret = computedStyle.getPropertyValue( name );
+ if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) {
+ ret = jQuery.style( elem, name );
+ }
+ }
+
+ return ret;
+ };
+}
+
+if ( document.documentElement.currentStyle ) {
+ currentStyle = function( elem, name ) {
+ var left, rsLeft, uncomputed,
+ ret = elem.currentStyle && elem.currentStyle[ name ],
+ style = elem.style;
+
+ // Avoid setting ret to empty string here
+ // so we don't default to auto
+ if ( ret === null && style && (uncomputed = style[ name ]) ) {
+ ret = uncomputed;
+ }
+
+ // From the awesome hack by Dean Edwards
+ // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
+
+ // If we're not dealing with a regular pixel number
+ // but a number that has a weird ending, we need to convert it to pixels
+ if ( !rnumpx.test( ret ) && rnum.test( ret ) ) {
+
+ // Remember the original values
+ left = style.left;
+ rsLeft = elem.runtimeStyle && elem.runtimeStyle.left;
+
+ // Put in the new values to get a computed value out
+ if ( rsLeft ) {
+ elem.runtimeStyle.left = elem.currentStyle.left;
+ }
+ style.left = name === "fontSize" ? "1em" : ( ret || 0 );
+ ret = style.pixelLeft + "px";
+
+ // Revert the changed values
+ style.left = left;
+ if ( rsLeft ) {
+ elem.runtimeStyle.left = rsLeft;
+ }
+ }
+
+ return ret === "" ? "auto" : ret;
+ };
+}
+
+curCSS = getComputedStyle || currentStyle;
+
+function getWH( elem, name, extra ) {
+
+ // Start with offset property
+ var val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
+ which = name === "width" ? cssWidth : cssHeight,
+ i = 0,
+ len = which.length;
+
+ if ( val > 0 ) {
+ if ( extra !== "border" ) {
+ for ( ; i < len; i++ ) {
+ if ( !extra ) {
+ val -= parseFloat( jQuery.css( elem, "padding" + which[ i ] ) ) || 0;
+ }
+ if ( extra === "margin" ) {
+ val += parseFloat( jQuery.css( elem, extra + which[ i ] ) ) || 0;
+ } else {
+ val -= parseFloat( jQuery.css( elem, "border" + which[ i ] + "Width" ) ) || 0;
+ }
+ }
+ }
+
+ return val + "px";
+ }
+
+ // Fall back to computed then uncomputed css if necessary
+ val = curCSS( elem, name, name );
+ if ( val < 0 || val == null ) {
+ val = elem.style[ name ] || 0;
+ }
+ // Normalize "", auto, and prepare for extra
+ val = parseFloat( val ) || 0;
+
+ // Add padding, border, margin
+ if ( extra ) {
+ for ( ; i < len; i++ ) {
+ val += parseFloat( jQuery.css( elem, "padding" + which[ i ] ) ) || 0;
+ if ( extra !== "padding" ) {
+ val += parseFloat( jQuery.css( elem, "border" + which[ i ] + "Width" ) ) || 0;
+ }
+ if ( extra === "margin" ) {
+ val += parseFloat( jQuery.css( elem, extra + which[ i ] ) ) || 0;
+ }
+ }
+ }
+
+ return val + "px";
+}
+
+if ( jQuery.expr && jQuery.expr.filters ) {
+ jQuery.expr.filters.hidden = function( elem ) {
+ var width = elem.offsetWidth,
+ height = elem.offsetHeight;
+
+ return ( width === 0 && height === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
+ };
+
+ jQuery.expr.filters.visible = function( elem ) {
+ return !jQuery.expr.filters.hidden( elem );
+ };
+}
+
+
+
+
+var r20 = /%20/g,
+ rbracket = /\[\]$/,
+ rCRLF = /\r?\n/g,
+ rhash = /#.*$/,
+ rheaders = /^(.*?):[ \t]*([^\r\n]*)\r?$/mg, // IE leaves an \r character at EOL
+ rinput = /^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,
+ // #7653, #8125, #8152: local protocol detection
+ rlocalProtocol = /^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,
+ rnoContent = /^(?:GET|HEAD)$/,
+ rprotocol = /^\/\//,
+ rquery = /\?/,
+ rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+ rselectTextarea = /^(?:select|textarea)/i,
+ rspacesAjax = /\s+/,
+ rts = /([?&])_=[^&]*/,
+ rurl = /^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,
+
+ // Keep a copy of the old load method
+ _load = jQuery.fn.load,
+
+ /* Prefilters
+ * 1) They are useful to introduce custom dataTypes (see ajax/jsonp.js for an example)
+ * 2) These are called:
+ * - BEFORE asking for a transport
+ * - AFTER param serialization (s.data is a string if s.processData is true)
+ * 3) key is the dataType
+ * 4) the catchall symbol "*" can be used
+ * 5) execution will start with transport dataType and THEN continue down to "*" if needed
+ */
+ prefilters = {},
+
+ /* Transports bindings
+ * 1) key is the dataType
+ * 2) the catchall symbol "*" can be used
+ * 3) selection will start with transport dataType and THEN go to "*" if needed
+ */
+ transports = {},
+
+ // Document location
+ ajaxLocation,
+
+ // Document location segments
+ ajaxLocParts,
+
+ // Avoid comment-prolog char sequence (#10098); must appease lint and evade compression
+ allTypes = ["*/"] + ["*"];
+
+// #8138, IE may throw an exception when accessing
+// a field from window.location if document.domain has been set
+try {
+ ajaxLocation = location.href;
+} catch( e ) {
+ // Use the href attribute of an A element
+ // since IE will modify it given document.location
+ ajaxLocation = document.createElement( "a" );
+ ajaxLocation.href = "";
+ ajaxLocation = ajaxLocation.href;
+}
+
+// Segment location into parts
+ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || [];
+
+// Base "constructor" for jQuery.ajaxPrefilter and jQuery.ajaxTransport
+function addToPrefiltersOrTransports( structure ) {
+
+ // dataTypeExpression is optional and defaults to "*"
+ return function( dataTypeExpression, func ) {
+
+ if ( typeof dataTypeExpression !== "string" ) {
+ func = dataTypeExpression;
+ dataTypeExpression = "*";
+ }
+
+ if ( jQuery.isFunction( func ) ) {
+ var dataTypes = dataTypeExpression.toLowerCase().split( rspacesAjax ),
+ i = 0,
+ length = dataTypes.length,
+ dataType,
+ list,
+ placeBefore;
+
+ // For each dataType in the dataTypeExpression
+ for ( ; i < length; i++ ) {
+ dataType = dataTypes[ i ];
+ // We control if we're asked to add before
+ // any existing element
+ placeBefore = /^\+/.test( dataType );
+ if ( placeBefore ) {
+ dataType = dataType.substr( 1 ) || "*";
+ }
+ list = structure[ dataType ] = structure[ dataType ] || [];
+ // then we add to the structure accordingly
+ list[ placeBefore ? "unshift" : "push" ]( func );
+ }
+ }
+ };
+}
+
+// Base inspection function for prefilters and transports
+function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR,
+ dataType /* internal */, inspected /* internal */ ) {
+
+ dataType = dataType || options.dataTypes[ 0 ];
+ inspected = inspected || {};
+
+ inspected[ dataType ] = true;
+
+ var list = structure[ dataType ],
+ i = 0,
+ length = list ? list.length : 0,
+ executeOnly = ( structure === prefilters ),
+ selection;
+
+ for ( ; i < length && ( executeOnly || !selection ); i++ ) {
+ selection = list[ i ]( options, originalOptions, jqXHR );
+ // If we got redirected to another dataType
+ // we try there if executing only and not done already
+ if ( typeof selection === "string" ) {
+ if ( !executeOnly || inspected[ selection ] ) {
+ selection = undefined;
+ } else {
+ options.dataTypes.unshift( selection );
+ selection = inspectPrefiltersOrTransports(
+ structure, options, originalOptions, jqXHR, selection, inspected );
+ }
+ }
+ }
+ // If we're only executing or nothing was selected
+ // we try the catchall dataType if not done already
+ if ( ( executeOnly || !selection ) && !inspected[ "*" ] ) {
+ selection = inspectPrefiltersOrTransports(
+ structure, options, originalOptions, jqXHR, "*", inspected );
+ }
+ // unnecessary when only executing (prefilters)
+ // but it'll be ignored by the caller in that case
+ return selection;
+}
+
+// A special extend for ajax options
+// that takes "flat" options (not to be deep extended)
+// Fixes #9887
+function ajaxExtend( target, src ) {
+ var key, deep,
+ flatOptions = jQuery.ajaxSettings.flatOptions || {};
+ for ( key in src ) {
+ if ( src[ key ] !== undefined ) {
+ ( flatOptions[ key ] ? target : ( deep || ( deep = {} ) ) )[ key ] = src[ key ];
+ }
+ }
+ if ( deep ) {
+ jQuery.extend( true, target, deep );
+ }
+}
+
+jQuery.fn.extend({
+ load: function( url, params, callback ) {
+ if ( typeof url !== "string" && _load ) {
+ return _load.apply( this, arguments );
+
+ // Don't do a request if no elements are being requested
+ } else if ( !this.length ) {
+ return this;
+ }
+
+ var off = url.indexOf( " " );
+ if ( off >= 0 ) {
+ var selector = url.slice( off, url.length );
+ url = url.slice( 0, off );
+ }
+
+ // Default to a GET request
+ var type = "GET";
+
+ // If the second parameter was provided
+ if ( params ) {
+ // If it's a function
+ if ( jQuery.isFunction( params ) ) {
+ // We assume that it's the callback
+ callback = params;
+ params = undefined;
+
+ // Otherwise, build a param string
+ } else if ( typeof params === "object" ) {
+ params = jQuery.param( params, jQuery.ajaxSettings.traditional );
+ type = "POST";
+ }
+ }
+
+ var self = this;
+
+ // Request the remote document
+ jQuery.ajax({
+ url: url,
+ type: type,
+ dataType: "html",
+ data: params,
+ // Complete callback (responseText is used internally)
+ complete: function( jqXHR, status, responseText ) {
+ // Store the response as specified by the jqXHR object
+ responseText = jqXHR.responseText;
+ // If successful, inject the HTML into all the matched elements
+ if ( jqXHR.isResolved() ) {
+ // #4825: Get the actual response in case
+ // a dataFilter is present in ajaxSettings
+ jqXHR.done(function( r ) {
+ responseText = r;
+ });
+ // See if a selector was specified
+ self.html( selector ?
+ // Create a dummy div to hold the results
+ jQuery("<div>")
+ // inject the contents of the document in, removing the scripts
+ // to avoid any 'Permission Denied' errors in IE
+ .append(responseText.replace(rscript, ""))
+
+ // Locate the specified elements
+ .find(selector) :
+
+ // If not, just inject the full result
+ responseText );
+ }
+
+ if ( callback ) {
+ self.each( callback, [ responseText, status, jqXHR ] );
+ }
+ }
+ });
+
+ return this;
+ },
+
+ serialize: function() {
+ return jQuery.param( this.serializeArray() );
+ },
+
+ serializeArray: function() {
+ return this.map(function(){
+ return this.elements ? jQuery.makeArray( this.elements ) : this;
+ })
+ .filter(function(){
+ return this.name && !this.disabled &&
+ ( this.checked || rselectTextarea.test( this.nodeName ) ||
+ rinput.test( this.type ) );
+ })
+ .map(function( i, elem ){
+ var val = jQuery( this ).val();
+
+ return val == null ?
+ null :
+ jQuery.isArray( val ) ?
+ jQuery.map( val, function( val, i ){
+ return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+ }) :
+ { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+ }).get();
+ }
+});
+
+// Attach a bunch of functions for handling common AJAX events
+jQuery.each( "ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split( " " ), function( i, o ){
+ jQuery.fn[ o ] = function( f ){
+ return this.on( o, f );
+ };
+});
+
+jQuery.each( [ "get", "post" ], function( i, method ) {
+ jQuery[ method ] = function( url, data, callback, type ) {
+ // shift arguments if data argument was omitted
+ if ( jQuery.isFunction( data ) ) {
+ type = type || callback;
+ callback = data;
+ data = undefined;
+ }
+
+ return jQuery.ajax({
+ type: method,
+ url: url,
+ data: data,
+ success: callback,
+ dataType: type
+ });
+ };
+});
+
+jQuery.extend({
+
+ getScript: function( url, callback ) {
+ return jQuery.get( url, undefined, callback, "script" );
+ },
+
+ getJSON: function( url, data, callback ) {
+ return jQuery.get( url, data, callback, "json" );
+ },
+
+ // Creates a full fledged settings object into target
+ // with both ajaxSettings and settings fields.
+ // If target is omitted, writes into ajaxSettings.
+ ajaxSetup: function( target, settings ) {
+ if ( settings ) {
+ // Building a settings object
+ ajaxExtend( target, jQuery.ajaxSettings );
+ } else {
+ // Extending ajaxSettings
+ settings = target;
+ target = jQuery.ajaxSettings;
+ }
+ ajaxExtend( target, settings );
+ return target;
+ },
+
+ ajaxSettings: {
+ url: ajaxLocation,
+ isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),
+ global: true,
+ type: "GET",
+ contentType: "application/x-www-form-urlencoded",
+ processData: true,
+ async: true,
+ /*
+ timeout: 0,
+ data: null,
+ dataType: null,
+ username: null,
+ password: null,
+ cache: null,
+ traditional: false,
+ headers: {},
+ */
+
+ accepts: {
+ xml: "application/xml, text/xml",
+ html: "text/html",
+ text: "text/plain",
+ json: "application/json, text/javascript",
+ "*": allTypes
+ },
+
+ contents: {
+ xml: /xml/,
+ html: /html/,
+ json: /json/
+ },
+
+ responseFields: {
+ xml: "responseXML",
+ text: "responseText"
+ },
+
+ // List of data converters
+ // 1) key format is "source_type destination_type" (a single space in-between)
+ // 2) the catchall symbol "*" can be used for source_type
+ converters: {
+
+ // Convert anything to text
+ "* text": window.String,
+
+ // Text to html (true = no transformation)
+ "text html": true,
+
+ // Evaluate text as a json expression
+ "text json": jQuery.parseJSON,
+
+ // Parse text as xml
+ "text xml": jQuery.parseXML
+ },
+
+ // For options that shouldn't be deep extended:
+ // you can add your own custom options here if
+ // and when you create one that shouldn't be
+ // deep extended (see ajaxExtend)
+ flatOptions: {
+ context: true,
+ url: true
+ }
+ },
+
+ ajaxPrefilter: addToPrefiltersOrTransports( prefilters ),
+ ajaxTransport: addToPrefiltersOrTransports( transports ),
+
+ // Main method
+ ajax: function( url, options ) {
+
+ // If url is an object, simulate pre-1.5 signature
+ if ( typeof url === "object" ) {
+ options = url;
+ url = undefined;
+ }
+
+ // Force options to be an object
+ options = options || {};
+
+ var // Create the final options object
+ s = jQuery.ajaxSetup( {}, options ),
+ // Callbacks context
+ callbackContext = s.context || s,
+ // Context for global events
+ // It's the callbackContext if one was provided in the options
+ // and if it's a DOM node or a jQuery collection
+ globalEventContext = callbackContext !== s &&
+ ( callbackContext.nodeType || callbackContext instanceof jQuery ) ?
+ jQuery( callbackContext ) : jQuery.event,
+ // Deferreds
+ deferred = jQuery.Deferred(),
+ completeDeferred = jQuery.Callbacks( "once memory" ),
+ // Status-dependent callbacks
+ statusCode = s.statusCode || {},
+ // ifModified key
+ ifModifiedKey,
+ // Headers (they are sent all at once)
+ requestHeaders = {},
+ requestHeadersNames = {},
+ // Response headers
+ responseHeadersString,
+ responseHeaders,
+ // transport
+ transport,
+ // timeout handle
+ timeoutTimer,
+ // Cross-domain detection vars
+ parts,
+ // The jqXHR state
+ state = 0,
+ // To know if global events are to be dispatched
+ fireGlobals,
+ // Loop variable
+ i,
+ // Fake xhr
+ jqXHR = {
+
+ readyState: 0,
+
+ // Caches the header
+ setRequestHeader: function( name, value ) {
+ if ( !state ) {
+ var lname = name.toLowerCase();
+ name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name;
+ requestHeaders[ name ] = value;
+ }
+ return this;
+ },
+
+ // Raw string
+ getAllResponseHeaders: function() {
+ return state === 2 ? responseHeadersString : null;
+ },
+
+ // Builds headers hashtable if needed
+ getResponseHeader: function( key ) {
+ var match;
+ if ( state === 2 ) {
+ if ( !responseHeaders ) {
+ responseHeaders = {};
+ while( ( match = rheaders.exec( responseHeadersString ) ) ) {
+ responseHeaders[ match[1].toLowerCase() ] = match[ 2 ];
+ }
+ }
+ match = responseHeaders[ key.toLowerCase() ];
+ }
+ return match === undefined ? null : match;
+ },
+
+ // Overrides response content-type header
+ overrideMimeType: function( type ) {
+ if ( !state ) {
+ s.mimeType = type;
+ }
+ return this;
+ },
+
+ // Cancel the request
+ abort: function( statusText ) {
+ statusText = statusText || "abort";
+ if ( transport ) {
+ transport.abort( statusText );
+ }
+ done( 0, statusText );
+ return this;
+ }
+ };
+
+ // Callback for when everything is done
+ // It is defined here because jslint complains if it is declared
+ // at the end of the function (which would be more logical and readable)
+ function done( status, nativeStatusText, responses, headers ) {
+
+ // Called once
+ if ( state === 2 ) {
+ return;
+ }
+
+ // State is "done" now
+ state = 2;
+
+ // Clear timeout if it exists
+ if ( timeoutTimer ) {
+ clearTimeout( timeoutTimer );
+ }
+
+ // Dereference transport for early garbage collection
+ // (no matter how long the jqXHR object will be used)
+ transport = undefined;
+
+ // Cache response headers
+ responseHeadersString = headers || "";
+
+ // Set readyState
+ jqXHR.readyState = status > 0 ? 4 : 0;
+
+ var isSuccess,
+ success,
+ error,
+ statusText = nativeStatusText,
+ response = responses ? ajaxHandleResponses( s, jqXHR, responses ) : undefined,
+ lastModified,
+ etag;
+
+ // If successful, handle type chaining
+ if ( status >= 200 && status < 300 || status === 304 ) {
+
+ // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+ if ( s.ifModified ) {
+
+ if ( ( lastModified = jqXHR.getResponseHeader( "Last-Modified" ) ) ) {
+ jQuery.lastModified[ ifModifiedKey ] = lastModified;
+ }
+ if ( ( etag = jqXHR.getResponseHeader( "Etag" ) ) ) {
+ jQuery.etag[ ifModifiedKey ] = etag;
+ }
+ }
+
+ // If not modified
+ if ( status === 304 ) {
+
+ statusText = "notmodified";
+ isSuccess = true;
+
+ // If we have data
+ } else {
+
+ try {
+ success = ajaxConvert( s, response );
+ statusText = "success";
+ isSuccess = true;
+ } catch(e) {
+ // We have a parsererror
+ statusText = "parsererror";
+ error = e;
+ }
+ }
+ } else {
+ // We extract error from statusText
+ // then normalize statusText and status for non-aborts
+ error = statusText;
+ if ( !statusText || status ) {
+ statusText = "error";
+ if ( status < 0 ) {
+ status = 0;
+ }
+ }
+ }
+
+ // Set data for the fake xhr object
+ jqXHR.status = status;
+ jqXHR.statusText = "" + ( nativeStatusText || statusText );
+
+ // Success/Error
+ if ( isSuccess ) {
+ deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
+ } else {
+ deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
+ }
+
+ // Status-dependent callbacks
+ jqXHR.statusCode( statusCode );
+ statusCode = undefined;
+
+ if ( fireGlobals ) {
+ globalEventContext.trigger( "ajax" + ( isSuccess ? "Success" : "Error" ),
+ [ jqXHR, s, isSuccess ? success : error ] );
+ }
+
+ // Complete
+ completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );
+
+ if ( fireGlobals ) {
+ globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
+ // Handle the global AJAX counter
+ if ( !( --jQuery.active ) ) {
+ jQuery.event.trigger( "ajaxStop" );
+ }
+ }
+ }
+
+ // Attach deferreds
+ deferred.promise( jqXHR );
+ jqXHR.success = jqXHR.done;
+ jqXHR.error = jqXHR.fail;
+ jqXHR.complete = completeDeferred.add;
+
+ // Status-dependent callbacks
+ jqXHR.statusCode = function( map ) {
+ if ( map ) {
+ var tmp;
+ if ( state < 2 ) {
+ for ( tmp in map ) {
+ statusCode[ tmp ] = [ statusCode[tmp], map[tmp] ];
+ }
+ } else {
+ tmp = map[ jqXHR.status ];
+ jqXHR.then( tmp, tmp );
+ }
+ }
+ return this;
+ };
+
+ // Remove hash character (#7531: and string promotion)
+ // Add protocol if not provided (#5866: IE7 issue with protocol-less urls)
+ // We also use the url parameter if available
+ s.url = ( ( url || s.url ) + "" ).replace( rhash, "" ).replace( rprotocol, ajaxLocParts[ 1 ] + "//" );
+
+ // Extract dataTypes list
+ s.dataTypes = jQuery.trim( s.dataType || "*" ).toLowerCase().split( rspacesAjax );
+
+ // Determine if a cross-domain request is in order
+ if ( s.crossDomain == null ) {
+ parts = rurl.exec( s.url.toLowerCase() );
+ s.crossDomain = !!( parts &&
+ ( parts[ 1 ] != ajaxLocParts[ 1 ] || parts[ 2 ] != ajaxLocParts[ 2 ] ||
+ ( parts[ 3 ] || ( parts[ 1 ] === "http:" ? 80 : 443 ) ) !=
+ ( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? 80 : 443 ) ) )
+ );
+ }
+
+ // Convert data if not already a string
+ if ( s.data && s.processData && typeof s.data !== "string" ) {
+ s.data = jQuery.param( s.data, s.traditional );
+ }
+
+ // Apply prefilters
+ inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );
+
+ // If request was aborted inside a prefiler, stop there
+ if ( state === 2 ) {
+ return false;
+ }
+
+ // We can fire global events as of now if asked to
+ fireGlobals = s.global;
+
+ // Uppercase the type
+ s.type = s.type.toUpperCase();
+
+ // Determine if request has content
+ s.hasContent = !rnoContent.test( s.type );
+
+ // Watch for a new set of requests
+ if ( fireGlobals && jQuery.active++ === 0 ) {
+ jQuery.event.trigger( "ajaxStart" );
+ }
+
+ // More options handling for requests with no content
+ if ( !s.hasContent ) {
+
+ // If data is available, append data to url
+ if ( s.data ) {
+ s.url += ( rquery.test( s.url ) ? "&" : "?" ) + s.data;
+ // #9682: remove data so that it's not used in an eventual retry
+ delete s.data;
+ }
+
+ // Get ifModifiedKey before adding the anti-cache parameter
+ ifModifiedKey = s.url;
+
+ // Add anti-cache in url if needed
+ if ( s.cache === false ) {
+
+ var ts = jQuery.now(),
+ // try replacing _= if it is there
+ ret = s.url.replace( rts, "$1_=" + ts );
+
+ // if nothing was replaced, add timestamp to the end
+ s.url = ret + ( ( ret === s.url ) ? ( rquery.test( s.url ) ? "&" : "?" ) + "_=" + ts : "" );
+ }
+ }
+
+ // Set the correct header, if data is being sent
+ if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
+ jqXHR.setRequestHeader( "Content-Type", s.contentType );
+ }
+
+ // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+ if ( s.ifModified ) {
+ ifModifiedKey = ifModifiedKey || s.url;
+ if ( jQuery.lastModified[ ifModifiedKey ] ) {
+ jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ ifModifiedKey ] );
+ }
+ if ( jQuery.etag[ ifModifiedKey ] ) {
+ jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ ifModifiedKey ] );
+ }
+ }
+
+ // Set the Accepts header for the server, depending on the dataType
+ jqXHR.setRequestHeader(
+ "Accept",
+ s.dataTypes[ 0 ] && s.accepts[ s.dataTypes[0] ] ?
+ s.accepts[ s.dataTypes[0] ] + ( s.dataTypes[ 0 ] !== "*" ? ", " + allTypes + "; q=0.01" : "" ) :
+ s.accepts[ "*" ]
+ );
+
+ // Check for headers option
+ for ( i in s.headers ) {
+ jqXHR.setRequestHeader( i, s.headers[ i ] );
+ }
+
+ // Allow custom headers/mimetypes and early abort
+ if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) {
+ // Abort if not done already
+ jqXHR.abort();
+ return false;
+
+ }
+
+ // Install callbacks on deferreds
+ for ( i in { success: 1, error: 1, complete: 1 } ) {
+ jqXHR[ i ]( s[ i ] );
+ }
+
+ // Get transport
+ transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );
+
+ // If no transport, we auto-abort
+ if ( !transport ) {
+ done( -1, "No Transport" );
+ } else {
+ jqXHR.readyState = 1;
+ // Send global event
+ if ( fireGlobals ) {
+ globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );
+ }
+ // Timeout
+ if ( s.async && s.timeout > 0 ) {
+ timeoutTimer = setTimeout( function(){
+ jqXHR.abort( "timeout" );
+ }, s.timeout );
+ }
+
+ try {
+ state = 1;
+ transport.send( requestHeaders, done );
+ } catch (e) {
+ // Propagate exception as error if not done
+ if ( state < 2 ) {
+ done( -1, e );
+ // Simply rethrow otherwise
+ } else {
+ throw e;
+ }
+ }
+ }
+
+ return jqXHR;
+ },
+
+ // Serialize an array of form elements or a set of
+ // key/values into a query string
+ param: function( a, traditional ) {
+ var s = [],
+ add = function( key, value ) {
+ // If value is a function, invoke it and return its value
+ value = jQuery.isFunction( value ) ? value() : value;
+ s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
+ };
+
+ // Set traditional to true for jQuery <= 1.3.2 behavior.
+ if ( traditional === undefined ) {
+ traditional = jQuery.ajaxSettings.traditional;
+ }
+
+ // If an array was passed in, assume that it is an array of form elements.
+ if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
+ // Serialize the form elements
+ jQuery.each( a, function() {
+ add( this.name, this.value );
+ });
+
+ } else {
+ // If traditional, encode the "old" way (the way 1.3.2 or older
+ // did it), otherwise encode params recursively.
+ for ( var prefix in a ) {
+ buildParams( prefix, a[ prefix ], traditional, add );
+ }
+ }
+
+ // Return the resulting serialization
+ return s.join( "&" ).replace( r20, "+" );
+ }
+});
+
+function buildParams( prefix, obj, traditional, add ) {
+ if ( jQuery.isArray( obj ) ) {
+ // Serialize array item.
+ jQuery.each( obj, function( i, v ) {
+ if ( traditional || rbracket.test( prefix ) ) {
+ // Treat each array item as a scalar.
+ add( prefix, v );
+
+ } else {
+ // If array item is non-scalar (array or object), encode its
+ // numeric index to resolve deserialization ambiguity issues.
+ // Note that rack (as of 1.0.0) can't currently deserialize
+ // nested arrays properly, and attempting to do so may cause
+ // a server error. Possible fixes are to modify rack's
+ // deserialization algorithm or to provide an option or flag
+ // to force array serialization to be shallow.
+ buildParams( prefix + "[" + ( typeof v === "object" || jQuery.isArray(v) ? i : "" ) + "]", v, traditional, add );
+ }
+ });
+
+ } else if ( !traditional && obj != null && typeof obj === "object" ) {
+ // Serialize object item.
+ for ( var name in obj ) {
+ buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
+ }
+
+ } else {
+ // Serialize scalar item.
+ add( prefix, obj );
+ }
+}
+
+// This is still on the jQuery object... for now
+// Want to move this to jQuery.ajax some day
+jQuery.extend({
+
+ // Counter for holding the number of active queries
+ active: 0,
+
+ // Last-Modified header cache for next request
+ lastModified: {},
+ etag: {}
+
+});
+
+/* Handles responses to an ajax request:
+ * - sets all responseXXX fields accordingly
+ * - finds the right dataType (mediates between content-type and expected dataType)
+ * - returns the corresponding response
+ */
+function ajaxHandleResponses( s, jqXHR, responses ) {
+
+ var contents = s.contents,
+ dataTypes = s.dataTypes,
+ responseFields = s.responseFields,
+ ct,
+ type,
+ finalDataType,
+ firstDataType;
+
+ // Fill responseXXX fields
+ for ( type in responseFields ) {
+ if ( type in responses ) {
+ jqXHR[ responseFields[type] ] = responses[ type ];
+ }
+ }
+
+ // Remove auto dataType and get content-type in the process
+ while( dataTypes[ 0 ] === "*" ) {
+ dataTypes.shift();
+ if ( ct === undefined ) {
+ ct = s.mimeType || jqXHR.getResponseHeader( "content-type" );
+ }
+ }
+
+ // Check if we're dealing with a known content-type
+ if ( ct ) {
+ for ( type in contents ) {
+ if ( contents[ type ] && contents[ type ].test( ct ) ) {
+ dataTypes.unshift( type );
+ break;
+ }
+ }
+ }
+
+ // Check to see if we have a response for the expected dataType
+ if ( dataTypes[ 0 ] in responses ) {
+ finalDataType = dataTypes[ 0 ];
+ } else {
+ // Try convertible dataTypes
+ for ( type in responses ) {
+ if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) {
+ finalDataType = type;
+ break;
+ }
+ if ( !firstDataType ) {
+ firstDataType = type;
+ }
+ }
+ // Or just use first one
+ finalDataType = finalDataType || firstDataType;
+ }
+
+ // If we found a dataType
+ // We add the dataType to the list if needed
+ // and return the corresponding response
+ if ( finalDataType ) {
+ if ( finalDataType !== dataTypes[ 0 ] ) {
+ dataTypes.unshift( finalDataType );
+ }
+ return responses[ finalDataType ];
+ }
+}
+
+// Chain conversions given the request and the original response
+function ajaxConvert( s, response ) {
+
+ // Apply the dataFilter if provided
+ if ( s.dataFilter ) {
+ response = s.dataFilter( response, s.dataType );
+ }
+
+ var dataTypes = s.dataTypes,
+ converters = {},
+ i,
+ key,
+ length = dataTypes.length,
+ tmp,
+ // Current and previous dataTypes
+ current = dataTypes[ 0 ],
+ prev,
+ // Conversion expression
+ conversion,
+ // Conversion function
+ conv,
+ // Conversion functions (transitive conversion)
+ conv1,
+ conv2;
+
+ // For each dataType in the chain
+ for ( i = 1; i < length; i++ ) {
+
+ // Create converters map
+ // with lowercased keys
+ if ( i === 1 ) {
+ for ( key in s.converters ) {
+ if ( typeof key === "string" ) {
+ converters[ key.toLowerCase() ] = s.converters[ key ];
+ }
+ }
+ }
+
+ // Get the dataTypes
+ prev = current;
+ current = dataTypes[ i ];
+
+ // If current is auto dataType, update it to prev
+ if ( current === "*" ) {
+ current = prev;
+ // If no auto and dataTypes are actually different
+ } else if ( prev !== "*" && prev !== current ) {
+
+ // Get the converter
+ conversion = prev + " " + current;
+ conv = converters[ conversion ] || converters[ "* " + current ];
+
+ // If there is no direct converter, search transitively
+ if ( !conv ) {
+ conv2 = undefined;
+ for ( conv1 in converters ) {
+ tmp = conv1.split( " " );
+ if ( tmp[ 0 ] === prev || tmp[ 0 ] === "*" ) {
+ conv2 = converters[ tmp[1] + " " + current ];
+ if ( conv2 ) {
+ conv1 = converters[ conv1 ];
+ if ( conv1 === true ) {
+ conv = conv2;
+ } else if ( conv2 === true ) {
+ conv = conv1;
+ }
+ break;
+ }
+ }
+ }
+ }
+ // If we found no converter, dispatch an error
+ if ( !( conv || conv2 ) ) {
+ jQuery.error( "No conversion from " + conversion.replace(" "," to ") );
+ }
+ // If found converter is not an equivalence
+ if ( conv !== true ) {
+ // Convert with 1 or 2 converters accordingly
+ response = conv ? conv( response ) : conv2( conv1(response) );
+ }
+ }
+ }
+ return response;
+}
+
+
+
+
+var jsc = jQuery.now(),
+ jsre = /(\=)\?(&|$)|\?\?/i;
+
+// Default jsonp settings
+jQuery.ajaxSetup({
+ jsonp: "callback",
+ jsonpCallback: function() {
+ return jQuery.expando + "_" + ( jsc++ );
+ }
+});
+
+// Detect, normalize options and install callbacks for jsonp requests
+jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) {
+
+ var inspectData = s.contentType === "application/x-www-form-urlencoded" &&
+ ( typeof s.data === "string" );
+
+ if ( s.dataTypes[ 0 ] === "jsonp" ||
+ s.jsonp !== false && ( jsre.test( s.url ) ||
+ inspectData && jsre.test( s.data ) ) ) {
+
+ var responseContainer,
+ jsonpCallback = s.jsonpCallback =
+ jQuery.isFunction( s.jsonpCallback ) ? s.jsonpCallback() : s.jsonpCallback,
+ previous = window[ jsonpCallback ],
+ url = s.url,
+ data = s.data,
+ replace = "$1" + jsonpCallback + "$2";
+
+ if ( s.jsonp !== false ) {
+ url = url.replace( jsre, replace );
+ if ( s.url === url ) {
+ if ( inspectData ) {
+ data = data.replace( jsre, replace );
+ }
+ if ( s.data === data ) {
+ // Add callback manually
+ url += (/\?/.test( url ) ? "&" : "?") + s.jsonp + "=" + jsonpCallback;
+ }
+ }
+ }
+
+ s.url = url;
+ s.data = data;
+
+ // Install callback
+ window[ jsonpCallback ] = function( response ) {
+ responseContainer = [ response ];
+ };
+
+ // Clean-up function
+ jqXHR.always(function() {
+ // Set callback back to previous value
+ window[ jsonpCallback ] = previous;
+ // Call if it was a function and we have a response
+ if ( responseContainer && jQuery.isFunction( previous ) ) {
+ window[ jsonpCallback ]( responseContainer[ 0 ] );
+ }
+ });
+
+ // Use data converter to retrieve json after script execution
+ s.converters["script json"] = function() {
+ if ( !responseContainer ) {
+ jQuery.error( jsonpCallback + " was not called" );
+ }
+ return responseContainer[ 0 ];
+ };
+
+ // force json dataType
+ s.dataTypes[ 0 ] = "json";
+
+ // Delegate to script
+ return "script";
+ }
+});
+
+
+
+
+// Install script dataType
+jQuery.ajaxSetup({
+ accepts: {
+ script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
+ },
+ contents: {
+ script: /javascript|ecmascript/
+ },
+ converters: {
+ "text script": function( text ) {
+ jQuery.globalEval( text );
+ return text;
+ }
+ }
+});
+
+// Handle cache's special case and global
+jQuery.ajaxPrefilter( "script", function( s ) {
+ if ( s.cache === undefined ) {
+ s.cache = false;
+ }
+ if ( s.crossDomain ) {
+ s.type = "GET";
+ s.global = false;
+ }
+});
+
+// Bind script tag hack transport
+jQuery.ajaxTransport( "script", function(s) {
+
+ // This transport only deals with cross domain requests
+ if ( s.crossDomain ) {
+
+ var script,
+ head = document.head || document.getElementsByTagName( "head" )[0] || document.documentElement;
+
+ return {
+
+ send: function( _, callback ) {
+
+ script = document.createElement( "script" );
+
+ script.async = "async";
+
+ if ( s.scriptCharset ) {
+ script.charset = s.scriptCharset;
+ }
+
+ script.src = s.url;
+
+ // Attach handlers for all browsers
+ script.onload = script.onreadystatechange = function( _, isAbort ) {
+
+ if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) {
+
+ // Handle memory leak in IE
+ script.onload = script.onreadystatechange = null;
+
+ // Remove the script
+ if ( head && script.parentNode ) {
+ head.removeChild( script );
+ }
+
+ // Dereference the script
+ script = undefined;
+
+ // Callback if not abort
+ if ( !isAbort ) {
+ callback( 200, "success" );
+ }
+ }
+ };
+ // Use insertBefore instead of appendChild to circumvent an IE6 bug.
+ // This arises when a base node is used (#2709 and #4378).
+ head.insertBefore( script, head.firstChild );
+ },
+
+ abort: function() {
+ if ( script ) {
+ script.onload( 0, 1 );
+ }
+ }
+ };
+ }
+});
+
+
+
+
+var // #5280: Internet Explorer will keep connections alive if we don't abort on unload
+ xhrOnUnloadAbort = window.ActiveXObject ? function() {
+ // Abort all pending requests
+ for ( var key in xhrCallbacks ) {
+ xhrCallbacks[ key ]( 0, 1 );
+ }
+ } : false,
+ xhrId = 0,
+ xhrCallbacks;
+
+// Functions to create xhrs
+function createStandardXHR() {
+ try {
+ return new window.XMLHttpRequest();
+ } catch( e ) {}
+}
+
+function createActiveXHR() {
+ try {
+ return new window.ActiveXObject( "Microsoft.XMLHTTP" );
+ } catch( e ) {}
+}
+
+// Create the request object
+// (This is still attached to ajaxSettings for backward compatibility)
+jQuery.ajaxSettings.xhr = window.ActiveXObject ?
+ /* Microsoft failed to properly
+ * implement the XMLHttpRequest in IE7 (can't request local files),
+ * so we use the ActiveXObject when it is available
+ * Additionally XMLHttpRequest can be disabled in IE7/IE8 so
+ * we need a fallback.
+ */
+ function() {
+ return !this.isLocal && createStandardXHR() || createActiveXHR();
+ } :
+ // For all other browsers, use the standard XMLHttpRequest object
+ createStandardXHR;
+
+// Determine support properties
+(function( xhr ) {
+ jQuery.extend( jQuery.support, {
+ ajax: !!xhr,
+ cors: !!xhr && ( "withCredentials" in xhr )
+ });
+})( jQuery.ajaxSettings.xhr() );
+
+// Create transport if the browser can provide an xhr
+if ( jQuery.support.ajax ) {
+
+ jQuery.ajaxTransport(function( s ) {
+ // Cross domain only allowed if supported through XMLHttpRequest
+ if ( !s.crossDomain || jQuery.support.cors ) {
+
+ var callback;
+
+ return {
+ send: function( headers, complete ) {
+
+ // Get a new xhr
+ var xhr = s.xhr(),
+ handle,
+ i;
+
+ // Open the socket
+ // Passing null username, generates a login popup on Opera (#2865)
+ if ( s.username ) {
+ xhr.open( s.type, s.url, s.async, s.username, s.password );
+ } else {
+ xhr.open( s.type, s.url, s.async );
+ }
+
+ // Apply custom fields if provided
+ if ( s.xhrFields ) {
+ for ( i in s.xhrFields ) {
+ xhr[ i ] = s.xhrFields[ i ];
+ }
+ }
+
+ // Override mime type if needed
+ if ( s.mimeType && xhr.overrideMimeType ) {
+ xhr.overrideMimeType( s.mimeType );
+ }
+
+ // X-Requested-With header
+ // For cross-domain requests, seeing as conditions for a preflight are
+ // akin to a jigsaw puzzle, we simply never set it to be sure.
+ // (it can always be set on a per-request basis or even using ajaxSetup)
+ // For same-domain requests, won't change header if already provided.
+ if ( !s.crossDomain && !headers["X-Requested-With"] ) {
+ headers[ "X-Requested-With" ] = "XMLHttpRequest";
+ }
+
+ // Need an extra try/catch for cross domain requests in Firefox 3
+ try {
+ for ( i in headers ) {
+ xhr.setRequestHeader( i, headers[ i ] );
+ }
+ } catch( _ ) {}
+
+ // Do send the request
+ // This may raise an exception which is actually
+ // handled in jQuery.ajax (so no try/catch here)
+ xhr.send( ( s.hasContent && s.data ) || null );
+
+ // Listener
+ callback = function( _, isAbort ) {
+
+ var status,
+ statusText,
+ responseHeaders,
+ responses,
+ xml;
+
+ // Firefox throws exceptions when accessing properties
+ // of an xhr when a network error occured
+ // http://helpful.knobs-dials.com/index.php/Component_returned_failure_code:_0x80040111_(NS_ERROR_NOT_AVAILABLE)
+ try {
+
+ // Was never called and is aborted or complete
+ if ( callback && ( isAbort || xhr.readyState === 4 ) ) {
+
+ // Only called once
+ callback = undefined;
+
+ // Do not keep as active anymore
+ if ( handle ) {
+ xhr.onreadystatechange = jQuery.noop;
+ if ( xhrOnUnloadAbort ) {
+ delete xhrCallbacks[ handle ];
+ }
+ }
+
+ // If it's an abort
+ if ( isAbort ) {
+ // Abort it manually if needed
+ if ( xhr.readyState !== 4 ) {
+ xhr.abort();
+ }
+ } else {
+ status = xhr.status;
+ responseHeaders = xhr.getAllResponseHeaders();
+ responses = {};
+ xml = xhr.responseXML;
+
+ // Construct response list
+ if ( xml && xml.documentElement /* #4958 */ ) {
+ responses.xml = xml;
+ }
+ responses.text = xhr.responseText;
+
+ // Firefox throws an exception when accessing
+ // statusText for faulty cross-domain requests
+ try {
+ statusText = xhr.statusText;
+ } catch( e ) {
+ // We normalize with Webkit giving an empty statusText
+ statusText = "";
+ }
+
+ // Filter status for non standard behaviors
+
+ // If the request is local and we have data: assume a success
+ // (success with no data won't get notified, that's the best we
+ // can do given current implementations)
+ if ( !status && s.isLocal && !s.crossDomain ) {
+ status = responses.text ? 200 : 404;
+ // IE - #1450: sometimes returns 1223 when it should be 204
+ } else if ( status === 1223 ) {
+ status = 204;
+ }
+ }
+ }
+ } catch( firefoxAccessException ) {
+ if ( !isAbort ) {
+ complete( -1, firefoxAccessException );
+ }
+ }
+
+ // Call complete if needed
+ if ( responses ) {
+ complete( status, statusText, responses, responseHeaders );
+ }
+ };
+
+ // if we're in sync mode or it's in cache
+ // and has been retrieved directly (IE6 & IE7)
+ // we need to manually fire the callback
+ if ( !s.async || xhr.readyState === 4 ) {
+ callback();
+ } else {
+ handle = ++xhrId;
+ if ( xhrOnUnloadAbort ) {
+ // Create the active xhrs callbacks list if needed
+ // and attach the unload handler
+ if ( !xhrCallbacks ) {
+ xhrCallbacks = {};
+ jQuery( window ).unload( xhrOnUnloadAbort );
+ }
+ // Add to list of active xhrs callbacks
+ xhrCallbacks[ handle ] = callback;
+ }
+ xhr.onreadystatechange = callback;
+ }
+ },
+
+ abort: function() {
+ if ( callback ) {
+ callback(0,1);
+ }
+ }
+ };
+ }
+ });
+}
+
+
+
+
+var elemdisplay = {},
+ iframe, iframeDoc,
+ rfxtypes = /^(?:toggle|show|hide)$/,
+ rfxnum = /^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,
+ timerId,
+ fxAttrs = [
+ // height animations
+ [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
+ // width animations
+ [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
+ // opacity animations
+ [ "opacity" ]
+ ],
+ fxNow;
+
+jQuery.fn.extend({
+ show: function( speed, easing, callback ) {
+ var elem, display;
+
+ if ( speed || speed === 0 ) {
+ return this.animate( genFx("show", 3), speed, easing, callback );
+
+ } else {
+ for ( var i = 0, j = this.length; i < j; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.style ) {
+ display = elem.style.display;
+
+ // Reset the inline display of this element to learn if it is
+ // being hidden by cascaded rules or not
+ if ( !jQuery._data(elem, "olddisplay") && display === "none" ) {
+ display = elem.style.display = "";
+ }
+
+ // Set elements which have been overridden with display: none
+ // in a stylesheet to whatever the default browser style is
+ // for such an element
+ if ( display === "" && jQuery.css(elem, "display") === "none" ) {
+ jQuery._data( elem, "olddisplay", defaultDisplay(elem.nodeName) );
+ }
+ }
+ }
+
+ // Set the display of most of the elements in a second loop
+ // to avoid the constant reflow
+ for ( i = 0; i < j; i++ ) {
+ elem = this[ i ];
+
+ if ( elem.style ) {
+ display = elem.style.display;
+
+ if ( display === "" || display === "none" ) {
+ elem.style.display = jQuery._data( elem, "olddisplay" ) || "";
+ }
+ }
+ }
+
+ return this;
+ }
+ },
+
+ hide: function( speed, easing, callback ) {
+ if ( speed || speed === 0 ) {
+ return this.animate( genFx("hide", 3), speed, easing, callback);
+
+ } else {
+ var elem, display,
+ i = 0,
+ j = this.length;
+
+ for ( ; i < j; i++ ) {
+ elem = this[i];
+ if ( elem.style ) {
+ display = jQuery.css( elem, "display" );
+
+ if ( display !== "none" && !jQuery._data( elem, "olddisplay" ) ) {
+ jQuery._data( elem, "olddisplay", display );
+ }
+ }
+ }
+
+ // Set the display of the elements in a second loop
+ // to avoid the constant reflow
+ for ( i = 0; i < j; i++ ) {
+ if ( this[i].style ) {
+ this[i].style.display = "none";
+ }
+ }
+
+ return this;
+ }
+ },
+
+ // Save the old toggle function
+ _toggle: jQuery.fn.toggle,
+
+ toggle: function( fn, fn2, callback ) {
+ var bool = typeof fn === "boolean";
+
+ if ( jQuery.isFunction(fn) && jQuery.isFunction(fn2) ) {
+ this._toggle.apply( this, arguments );
+
+ } else if ( fn == null || bool ) {
+ this.each(function() {
+ var state = bool ? fn : jQuery(this).is(":hidden");
+ jQuery(this)[ state ? "show" : "hide" ]();
+ });
+
+ } else {
+ this.animate(genFx("toggle", 3), fn, fn2, callback);
+ }
+
+ return this;
+ },
+
+ fadeTo: function( speed, to, easing, callback ) {
+ return this.filter(":hidden").css("opacity", 0).show().end()
+ .animate({opacity: to}, speed, easing, callback);
+ },
+
+ animate: function( prop, speed, easing, callback ) {
+ var optall = jQuery.speed( speed, easing, callback );
+
+ if ( jQuery.isEmptyObject( prop ) ) {
+ return this.each( optall.complete, [ false ] );
+ }
+
+ // Do not change referenced properties as per-property easing will be lost
+ prop = jQuery.extend( {}, prop );
+
+ function doAnimation() {
+ // XXX 'this' does not always have a nodeName when running the
+ // test suite
+
+ if ( optall.queue === false ) {
+ jQuery._mark( this );
+ }
+
+ var opt = jQuery.extend( {}, optall ),
+ isElement = this.nodeType === 1,
+ hidden = isElement && jQuery(this).is(":hidden"),
+ name, val, p, e,
+ parts, start, end, unit,
+ method;
+
+ // will store per property easing and be used to determine when an animation is complete
+ opt.animatedProperties = {};
+
+ for ( p in prop ) {
+
+ // property name normalization
+ name = jQuery.camelCase( p );
+ if ( p !== name ) {
+ prop[ name ] = prop[ p ];
+ delete prop[ p ];
+ }
+
+ val = prop[ name ];
+
+ // easing resolution: per property > opt.specialEasing > opt.easing > 'swing' (default)
+ if ( jQuery.isArray( val ) ) {
+ opt.animatedProperties[ name ] = val[ 1 ];
+ val = prop[ name ] = val[ 0 ];
+ } else {
+ opt.animatedProperties[ name ] = opt.specialEasing && opt.specialEasing[ name ] || opt.easing || 'swing';
+ }
+
+ if ( val === "hide" && hidden || val === "show" && !hidden ) {
+ return opt.complete.call( this );
+ }
+
+ if ( isElement && ( name === "height" || name === "width" ) ) {
+ // Make sure that nothing sneaks out
+ // Record all 3 overflow attributes because IE does not
+ // change the overflow attribute when overflowX and
+ // overflowY are set to the same value
+ opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
+
+ // Set display property to inline-block for height/width
+ // animations on inline elements that are having width/height animated
+ if ( jQuery.css( this, "display" ) === "inline" &&
+ jQuery.css( this, "float" ) === "none" ) {
+
+ // inline-level elements accept inline-block;
+ // block-level elements need to be inline with layout
+ if ( !jQuery.support.inlineBlockNeedsLayout || defaultDisplay( this.nodeName ) === "inline" ) {
+ this.style.display = "inline-block";
+
+ } else {
+ this.style.zoom = 1;
+ }
+ }
+ }
+ }
+
+ if ( opt.overflow != null ) {
+ this.style.overflow = "hidden";
+ }
+
+ for ( p in prop ) {
+ e = new jQuery.fx( this, opt, p );
+ val = prop[ p ];
+
+ if ( rfxtypes.test( val ) ) {
+
+ // Tracks whether to show or hide based on private
+ // data attached to the element
+ method = jQuery._data( this, "toggle" + p ) || ( val === "toggle" ? hidden ? "show" : "hide" : 0 );
+ if ( method ) {
+ jQuery._data( this, "toggle" + p, method === "show" ? "hide" : "show" );
+ e[ method ]();
+ } else {
+ e[ val ]();
+ }
+
+ } else {
+ parts = rfxnum.exec( val );
+ start = e.cur();
+
+ if ( parts ) {
+ end = parseFloat( parts[2] );
+ unit = parts[3] || ( jQuery.cssNumber[ p ] ? "" : "px" );
+
+ // We need to compute starting value
+ if ( unit !== "px" ) {
+ jQuery.style( this, p, (end || 1) + unit);
+ start = ( (end || 1) / e.cur() ) * start;
+ jQuery.style( this, p, start + unit);
+ }
+
+ // If a +=/-= token was provided, we're doing a relative animation
+ if ( parts[1] ) {
+ end = ( (parts[ 1 ] === "-=" ? -1 : 1) * end ) + start;
+ }
+
+ e.custom( start, end, unit );
+
+ } else {
+ e.custom( start, val, "" );
+ }
+ }
+ }
+
+ // For JS strict compliance
+ return true;
+ }
+
+ return optall.queue === false ?
+ this.each( doAnimation ) :
+ this.queue( optall.queue, doAnimation );
+ },
+
+ stop: function( type, clearQueue, gotoEnd ) {
+ if ( typeof type !== "string" ) {
+ gotoEnd = clearQueue;
+ clearQueue = type;
+ type = undefined;
+ }
+ if ( clearQueue && type !== false ) {
+ this.queue( type || "fx", [] );
+ }
+
+ return this.each(function() {
+ var index,
+ hadTimers = false,
+ timers = jQuery.timers,
+ data = jQuery._data( this );
+
+ // clear marker counters if we know they won't be
+ if ( !gotoEnd ) {
+ jQuery._unmark( true, this );
+ }
+
+ function stopQueue( elem, data, index ) {
+ var hooks = data[ index ];
+ jQuery.removeData( elem, index, true );
+ hooks.stop( gotoEnd );
+ }
+
+ if ( type == null ) {
+ for ( index in data ) {
+ if ( data[ index ] && data[ index ].stop && index.indexOf(".run") === index.length - 4 ) {
+ stopQueue( this, data, index );
+ }
+ }
+ } else if ( data[ index = type + ".run" ] && data[ index ].stop ){
+ stopQueue( this, data, index );
+ }
+
+ for ( index = timers.length; index--; ) {
+ if ( timers[ index ].elem === this && (type == null || timers[ index ].queue === type) ) {
+ if ( gotoEnd ) {
+
+ // force the next step to be the last
+ timers[ index ]( true );
+ } else {
+ timers[ index ].saveState();
+ }
+ hadTimers = true;
+ timers.splice( index, 1 );
+ }
+ }
+
+ // start the next in the queue if the last step wasn't forced
+ // timers currently will call their complete callbacks, which will dequeue
+ // but only if they were gotoEnd
+ if ( !( gotoEnd && hadTimers ) ) {
+ jQuery.dequeue( this, type );
+ }
+ });
+ }
+
+});
+
+// Animations created synchronously will run synchronously
+function createFxNow() {
+ setTimeout( clearFxNow, 0 );
+ return ( fxNow = jQuery.now() );
+}
+
+function clearFxNow() {
+ fxNow = undefined;
+}
+
+// Generate parameters to create a standard animation
+function genFx( type, num ) {
+ var obj = {};
+
+ jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice( 0, num )), function() {
+ obj[ this ] = type;
+ });
+
+ return obj;
+}
+
+// Generate shortcuts for custom animations
+jQuery.each({
+ slideDown: genFx( "show", 1 ),
+ slideUp: genFx( "hide", 1 ),
+ slideToggle: genFx( "toggle", 1 ),
+ fadeIn: { opacity: "show" },
+ fadeOut: { opacity: "hide" },
+ fadeToggle: { opacity: "toggle" }
+}, function( name, props ) {
+ jQuery.fn[ name ] = function( speed, easing, callback ) {
+ return this.animate( props, speed, easing, callback );
+ };
+});
+
+jQuery.extend({
+ speed: function( speed, easing, fn ) {
+ var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {
+ complete: fn || !fn && easing ||
+ jQuery.isFunction( speed ) && speed,
+ duration: speed,
+ easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing
+ };
+
+ opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
+ opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;
+
+ // normalize opt.queue - true/undefined/null -> "fx"
+ if ( opt.queue == null || opt.queue === true ) {
+ opt.queue = "fx";
+ }
+
+ // Queueing
+ opt.old = opt.complete;
+
+ opt.complete = function( noUnmark ) {
+ if ( jQuery.isFunction( opt.old ) ) {
+ opt.old.call( this );
+ }
+
+ if ( opt.queue ) {
+ jQuery.dequeue( this, opt.queue );
+ } else if ( noUnmark !== false ) {
+ jQuery._unmark( this );
+ }
+ };
+
+ return opt;
+ },
+
+ easing: {
+ linear: function( p, n, firstNum, diff ) {
+ return firstNum + diff * p;
+ },
+ swing: function( p, n, firstNum, diff ) {
+ return ( ( -Math.cos( p*Math.PI ) / 2 ) + 0.5 ) * diff + firstNum;
+ }
+ },
+
+ timers: [],
+
+ fx: function( elem, options, prop ) {
+ this.options = options;
+ this.elem = elem;
+ this.prop = prop;
+
+ options.orig = options.orig || {};
+ }
+
+});
+
+jQuery.fx.prototype = {
+ // Simple function for setting a style value
+ update: function() {
+ if ( this.options.step ) {
+ this.options.step.call( this.elem, this.now, this );
+ }
+
+ ( jQuery.fx.step[ this.prop ] || jQuery.fx.step._default )( this );
+ },
+
+ // Get the current size
+ cur: function() {
+ if ( this.elem[ this.prop ] != null && (!this.elem.style || this.elem.style[ this.prop ] == null) ) {
+ return this.elem[ this.prop ];
+ }
+
+ var parsed,
+ r = jQuery.css( this.elem, this.prop );
+ // Empty strings, null, undefined and "auto" are converted to 0,
+ // complex values such as "rotate(1rad)" are returned as is,
+ // simple values such as "10px" are parsed to Float.
+ return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;
+ },
+
+ // Start an animation from one number to another
+ custom: function( from, to, unit ) {
+ var self = this,
+ fx = jQuery.fx;
+
+ this.startTime = fxNow || createFxNow();
+ this.end = to;
+ this.now = this.start = from;
+ this.pos = this.state = 0;
+ this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
+
+ function t( gotoEnd ) {
+ return self.step( gotoEnd );
+ }
+
+ t.queue = this.options.queue;
+ t.elem = this.elem;
+ t.saveState = function() {
+ if ( self.options.hide && jQuery._data( self.elem, "fxshow" + self.prop ) === undefined ) {
+ jQuery._data( self.elem, "fxshow" + self.prop, self.start );
+ }
+ };
+
+ if ( t() && jQuery.timers.push(t) && !timerId ) {
+ timerId = setInterval( fx.tick, fx.interval );
+ }
+ },
+
+ // Simple 'show' function
+ show: function() {
+ var dataShow = jQuery._data( this.elem, "fxshow" + this.prop );
+
+ // Remember where we started, so that we can go back to it later
+ this.options.orig[ this.prop ] = dataShow || jQuery.style( this.elem, this.prop );
+ this.options.show = true;
+
+ // Begin the animation
+ // Make sure that we start at a small width/height to avoid any flash of content
+ if ( dataShow !== undefined ) {
+ // This show is picking up where a previous hide or show left off
+ this.custom( this.cur(), dataShow );
+ } else {
+ this.custom( this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur() );
+ }
+
+ // Start by showing the element
+ jQuery( this.elem ).show();
+ },
+
+ // Simple 'hide' function
+ hide: function() {
+ // Remember where we started, so that we can go back to it later
+ this.options.orig[ this.prop ] = jQuery._data( this.elem, "fxshow" + this.prop ) || jQuery.style( this.elem, this.prop );
+ this.options.hide = true;
+
+ // Begin the animation
+ this.custom( this.cur(), 0 );
+ },
+
+ // Each step of an animation
+ step: function( gotoEnd ) {
+ var p, n, complete,
+ t = fxNow || createFxNow(),
+ done = true,
+ elem = this.elem,
+ options = this.options;
+
+ if ( gotoEnd || t >= options.duration + this.startTime ) {
+ this.now = this.end;
+ this.pos = this.state = 1;
+ this.update();
+
+ options.animatedProperties[ this.prop ] = true;
+
+ for ( p in options.animatedProperties ) {
+ if ( options.animatedProperties[ p ] !== true ) {
+ done = false;
+ }
+ }
+
+ if ( done ) {
+ // Reset the overflow
+ if ( options.overflow != null && !jQuery.support.shrinkWrapBlocks ) {
+
+ jQuery.each( [ "", "X", "Y" ], function( index, value ) {
+ elem.style[ "overflow" + value ] = options.overflow[ index ];
+ });
+ }
+
+ // Hide the element if the "hide" operation was done
+ if ( options.hide ) {
+ jQuery( elem ).hide();
+ }
+
+ // Reset the properties, if the item has been hidden or shown
+ if ( options.hide || options.show ) {
+ for ( p in options.animatedProperties ) {
+ jQuery.style( elem, p, options.orig[ p ] );
+ jQuery.removeData( elem, "fxshow" + p, true );
+ // Toggle data is no longer needed
+ jQuery.removeData( elem, "toggle" + p, true );
+ }
+ }
+
+ // Execute the complete function
+ // in the event that the complete function throws an exception
+ // we must ensure it won't be called twice. #5684
+
+ complete = options.complete;
+ if ( complete ) {
+
+ options.complete = false;
+ complete.call( elem );
+ }
+ }
+
+ return false;
+
+ } else {
+ // classical easing cannot be used with an Infinity duration
+ if ( options.duration == Infinity ) {
+ this.now = t;
+ } else {
+ n = t - this.startTime;
+ this.state = n / options.duration;
+
+ // Perform the easing function, defaults to swing
+ this.pos = jQuery.easing[ options.animatedProperties[this.prop] ]( this.state, n, 0, 1, options.duration );
+ this.now = this.start + ( (this.end - this.start) * this.pos );
+ }
+ // Perform the next step of the animation
+ this.update();
+ }
+
+ return true;
+ }
+};
+
+jQuery.extend( jQuery.fx, {
+ tick: function() {
+ var timer,
+ timers = jQuery.timers,
+ i = 0;
+
+ for ( ; i < timers.length; i++ ) {
+ timer = timers[ i ];
+ // Checks the timer has not already been removed
+ if ( !timer() && timers[ i ] === timer ) {
+ timers.splice( i--, 1 );
+ }
+ }
+
+ if ( !timers.length ) {
+ jQuery.fx.stop();
+ }
+ },
+
+ interval: 13,
+
+ stop: function() {
+ clearInterval( timerId );
+ timerId = null;
+ },
+
+ speeds: {
+ slow: 600,
+ fast: 200,
+ // Default speed
+ _default: 400
+ },
+
+ step: {
+ opacity: function( fx ) {
+ jQuery.style( fx.elem, "opacity", fx.now );
+ },
+
+ _default: function( fx ) {
+ if ( fx.elem.style && fx.elem.style[ fx.prop ] != null ) {
+ fx.elem.style[ fx.prop ] = fx.now + fx.unit;
+ } else {
+ fx.elem[ fx.prop ] = fx.now;
+ }
+ }
+ }
+});
+
+// Adds width/height step functions
+// Do not set anything below 0
+jQuery.each([ "width", "height" ], function( i, prop ) {
+ jQuery.fx.step[ prop ] = function( fx ) {
+ jQuery.style( fx.elem, prop, Math.max(0, fx.now) + fx.unit );
+ };
+});
+
+if ( jQuery.expr && jQuery.expr.filters ) {
+ jQuery.expr.filters.animated = function( elem ) {
+ return jQuery.grep(jQuery.timers, function( fn ) {
+ return elem === fn.elem;
+ }).length;
+ };
+}
+
+// Try to restore the default display value of an element
+function defaultDisplay( nodeName ) {
+
+ if ( !elemdisplay[ nodeName ] ) {
+
+ var body = document.body,
+ elem = jQuery( "<" + nodeName + ">" ).appendTo( body ),
+ display = elem.css( "display" );
+ elem.remove();
+
+ // If the simple way fails,
+ // get element's real default display by attaching it to a temp iframe
+ if ( display === "none" || display === "" ) {
+ // No iframe to use yet, so create it
+ if ( !iframe ) {
+ iframe = document.createElement( "iframe" );
+ iframe.frameBorder = iframe.width = iframe.height = 0;
+ }
+
+ body.appendChild( iframe );
+
+ // Create a cacheable copy of the iframe document on first call.
+ // IE and Opera will allow us to reuse the iframeDoc without re-writing the fake HTML
+ // document to it; WebKit & Firefox won't allow reusing the iframe document.
+ if ( !iframeDoc || !iframe.createElement ) {
+ iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document;
+ iframeDoc.write( ( document.compatMode === "CSS1Compat" ? "<!doctype html>" : "" ) + "<html><body>" );
+ iframeDoc.close();
+ }
+
+ elem = iframeDoc.createElement( nodeName );
+
+ iframeDoc.body.appendChild( elem );
+
+ display = jQuery.css( elem, "display" );
+ body.removeChild( iframe );
+ }
+
+ // Store the correct default display
+ elemdisplay[ nodeName ] = display;
+ }
+
+ return elemdisplay[ nodeName ];
+}
+
+
+
+
+var rtable = /^t(?:able|d|h)$/i,
+ rroot = /^(?:body|html)$/i;
+
+if ( "getBoundingClientRect" in document.documentElement ) {
+ jQuery.fn.offset = function( options ) {
+ var elem = this[0], box;
+
+ if ( options ) {
+ return this.each(function( i ) {
+ jQuery.offset.setOffset( this, options, i );
+ });
+ }
+
+ if ( !elem || !elem.ownerDocument ) {
+ return null;
+ }
+
+ if ( elem === elem.ownerDocument.body ) {
+ return jQuery.offset.bodyOffset( elem );
+ }
+
+ try {
+ box = elem.getBoundingClientRect();
+ } catch(e) {}
+
+ var doc = elem.ownerDocument,
+ docElem = doc.documentElement;
+
+ // Make sure we're not dealing with a disconnected DOM node
+ if ( !box || !jQuery.contains( docElem, elem ) ) {
+ return box ? { top: box.top, left: box.left } : { top: 0, left: 0 };
+ }
+
+ var body = doc.body,
+ win = getWindow(doc),
+ clientTop = docElem.clientTop || body.clientTop || 0,
+ clientLeft = docElem.clientLeft || body.clientLeft || 0,
+ scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop,
+ scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
+ top = box.top + scrollTop - clientTop,
+ left = box.left + scrollLeft - clientLeft;
+
+ return { top: top, left: left };
+ };
+
+} else {
+ jQuery.fn.offset = function( options ) {
+ var elem = this[0];
+
+ if ( options ) {
+ return this.each(function( i ) {
+ jQuery.offset.setOffset( this, options, i );
+ });
+ }
+
+ if ( !elem || !elem.ownerDocument ) {
+ return null;
+ }
+
+ if ( elem === elem.ownerDocument.body ) {
+ return jQuery.offset.bodyOffset( elem );
+ }
+
+ var computedStyle,
+ offsetParent = elem.offsetParent,
+ prevOffsetParent = elem,
+ doc = elem.ownerDocument,
+ docElem = doc.documentElement,
+ body = doc.body,
+ defaultView = doc.defaultView,
+ prevComputedStyle = defaultView ? defaultView.getComputedStyle( elem, null ) : elem.currentStyle,
+ top = elem.offsetTop,
+ left = elem.offsetLeft;
+
+ while ( (elem = elem.parentNode) && elem !== body && elem !== docElem ) {
+ if ( jQuery.support.fixedPosition && prevComputedStyle.position === "fixed" ) {
+ break;
+ }
+
+ computedStyle = defaultView ? defaultView.getComputedStyle(elem, null) : elem.currentStyle;
+ top -= elem.scrollTop;
+ left -= elem.scrollLeft;
+
+ if ( elem === offsetParent ) {
+ top += elem.offsetTop;
+ left += elem.offsetLeft;
+
+ if ( jQuery.support.doesNotAddBorder && !(jQuery.support.doesAddBorderForTableAndCells && rtable.test(elem.nodeName)) ) {
+ top += parseFloat( computedStyle.borderTopWidth ) || 0;
+ left += parseFloat( computedStyle.borderLeftWidth ) || 0;
+ }
+
+ prevOffsetParent = offsetParent;
+ offsetParent = elem.offsetParent;
+ }
+
+ if ( jQuery.support.subtractsBorderForOverflowNotVisible && computedStyle.overflow !== "visible" ) {
+ top += parseFloat( computedStyle.borderTopWidth ) || 0;
+ left += parseFloat( computedStyle.borderLeftWidth ) || 0;
+ }
+
+ prevComputedStyle = computedStyle;
+ }
+
+ if ( prevComputedStyle.position === "relative" || prevComputedStyle.position === "static" ) {
+ top += body.offsetTop;
+ left += body.offsetLeft;
+ }
+
+ if ( jQuery.support.fixedPosition && prevComputedStyle.position === "fixed" ) {
+ top += Math.max( docElem.scrollTop, body.scrollTop );
+ left += Math.max( docElem.scrollLeft, body.scrollLeft );
+ }
+
+ return { top: top, left: left };
+ };
+}
+
+jQuery.offset = {
+
+ bodyOffset: function( body ) {
+ var top = body.offsetTop,
+ left = body.offsetLeft;
+
+ if ( jQuery.support.doesNotIncludeMarginInBodyOffset ) {
+ top += parseFloat( jQuery.css(body, "marginTop") ) || 0;
+ left += parseFloat( jQuery.css(body, "marginLeft") ) || 0;
+ }
+
+ return { top: top, left: left };
+ },
+
+ setOffset: function( elem, options, i ) {
+ var position = jQuery.css( elem, "position" );
+
+ // set position first, in-case top/left are set even on static elem
+ if ( position === "static" ) {
+ elem.style.position = "relative";
+ }
+
+ var curElem = jQuery( elem ),
+ curOffset = curElem.offset(),
+ curCSSTop = jQuery.css( elem, "top" ),
+ curCSSLeft = jQuery.css( elem, "left" ),
+ calculatePosition = ( position === "absolute" || position === "fixed" ) && jQuery.inArray("auto", [curCSSTop, curCSSLeft]) > -1,
+ props = {}, curPosition = {}, curTop, curLeft;
+
+ // need to be able to calculate position if either top or left is auto and position is either absolute or fixed
+ if ( calculatePosition ) {
+ curPosition = curElem.position();
+ curTop = curPosition.top;
+ curLeft = curPosition.left;
+ } else {
+ curTop = parseFloat( curCSSTop ) || 0;
+ curLeft = parseFloat( curCSSLeft ) || 0;
+ }
+
+ if ( jQuery.isFunction( options ) ) {
+ options = options.call( elem, i, curOffset );
+ }
+
+ if ( options.top != null ) {
+ props.top = ( options.top - curOffset.top ) + curTop;
+ }
+ if ( options.left != null ) {
+ props.left = ( options.left - curOffset.left ) + curLeft;
+ }
+
+ if ( "using" in options ) {
+ options.using.call( elem, props );
+ } else {
+ curElem.css( props );
+ }
+ }
+};
+
+
+jQuery.fn.extend({
+
+ position: function() {
+ if ( !this[0] ) {
+ return null;
+ }
+
+ var elem = this[0],
+
+ // Get *real* offsetParent
+ offsetParent = this.offsetParent(),
+
+ // Get correct offsets
+ offset = this.offset(),
+ parentOffset = rroot.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset();
+
+ // Subtract element margins
+ // note: when an element has margin: auto the offsetLeft and marginLeft
+ // are the same in Safari causing offset.left to incorrectly be 0
+ offset.top -= parseFloat( jQuery.css(elem, "marginTop") ) || 0;
+ offset.left -= parseFloat( jQuery.css(elem, "marginLeft") ) || 0;
+
+ // Add offsetParent borders
+ parentOffset.top += parseFloat( jQuery.css(offsetParent[0], "borderTopWidth") ) || 0;
+ parentOffset.left += parseFloat( jQuery.css(offsetParent[0], "borderLeftWidth") ) || 0;
+
+ // Subtract the two offsets
+ return {
+ top: offset.top - parentOffset.top,
+ left: offset.left - parentOffset.left
+ };
+ },
+
+ offsetParent: function() {
+ return this.map(function() {
+ var offsetParent = this.offsetParent || document.body;
+ while ( offsetParent && (!rroot.test(offsetParent.nodeName) && jQuery.css(offsetParent, "position") === "static") ) {
+ offsetParent = offsetParent.offsetParent;
+ }
+ return offsetParent;
+ });
+ }
+});
+
+
+// Create scrollLeft and scrollTop methods
+jQuery.each( ["Left", "Top"], function( i, name ) {
+ var method = "scroll" + name;
+
+ jQuery.fn[ method ] = function( val ) {
+ var elem, win;
+
+ if ( val === undefined ) {
+ elem = this[ 0 ];
+
+ if ( !elem ) {
+ return null;
+ }
+
+ win = getWindow( elem );
+
+ // Return the scroll offset
+ return win ? ("pageXOffset" in win) ? win[ i ? "pageYOffset" : "pageXOffset" ] :
+ jQuery.support.boxModel && win.document.documentElement[ method ] ||
+ win.document.body[ method ] :
+ elem[ method ];
+ }
+
+ // Set the scroll offset
+ return this.each(function() {
+ win = getWindow( this );
+
+ if ( win ) {
+ win.scrollTo(
+ !i ? val : jQuery( win ).scrollLeft(),
+ i ? val : jQuery( win ).scrollTop()
+ );
+
+ } else {
+ this[ method ] = val;
+ }
+ });
+ };
+});
+
+function getWindow( elem ) {
+ return jQuery.isWindow( elem ) ?
+ elem :
+ elem.nodeType === 9 ?
+ elem.defaultView || elem.parentWindow :
+ false;
+}
+
+
+
+
+// Create width, height, innerHeight, innerWidth, outerHeight and outerWidth methods
+jQuery.each([ "Height", "Width" ], function( i, name ) {
+
+ var type = name.toLowerCase();
+
+ // innerHeight and innerWidth
+ jQuery.fn[ "inner" + name ] = function() {
+ var elem = this[0];
+ return elem ?
+ elem.style ?
+ parseFloat( jQuery.css( elem, type, "padding" ) ) :
+ this[ type ]() :
+ null;
+ };
+
+ // outerHeight and outerWidth
+ jQuery.fn[ "outer" + name ] = function( margin ) {
+ var elem = this[0];
+ return elem ?
+ elem.style ?
+ parseFloat( jQuery.css( elem, type, margin ? "margin" : "border" ) ) :
+ this[ type ]() :
+ null;
+ };
+
+ jQuery.fn[ type ] = function( size ) {
+ // Get window width or height
+ var elem = this[0];
+ if ( !elem ) {
+ return size == null ? null : this;
+ }
+
+ if ( jQuery.isFunction( size ) ) {
+ return this.each(function( i ) {
+ var self = jQuery( this );
+ self[ type ]( size.call( this, i, self[ type ]() ) );
+ });
+ }
+
+ if ( jQuery.isWindow( elem ) ) {
+ // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
+ // 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat
+ var docElemProp = elem.document.documentElement[ "client" + name ],
+ body = elem.document.body;
+ return elem.document.compatMode === "CSS1Compat" && docElemProp ||
+ body && body[ "client" + name ] || docElemProp;
+
+ // Get document width or height
+ } else if ( elem.nodeType === 9 ) {
+ // Either scroll[Width/Height] or offset[Width/Height], whichever is greater
+ return Math.max(
+ elem.documentElement["client" + name],
+ elem.body["scroll" + name], elem.documentElement["scroll" + name],
+ elem.body["offset" + name], elem.documentElement["offset" + name]
+ );
+
+ // Get or set width or height on the element
+ } else if ( size === undefined ) {
+ var orig = jQuery.css( elem, type ),
+ ret = parseFloat( orig );
+
+ return jQuery.isNumeric( ret ) ? ret : orig;
+
+ // Set the width or height on the element (default to pixels if value is unitless)
+ } else {
+ return this.css( type, typeof size === "string" ? size : size + "px" );
+ }
+ };
+
+});
+
+
+
+
+// Expose jQuery to the global object
+window.jQuery = window.$ = jQuery;
+
+// Expose jQuery as an AMD module, but only for AMD loaders that
+// understand the issues with loading multiple versions of jQuery
+// in a page that all might call define(). The loader will indicate
+// they have special allowances for multiple jQuery versions by
+// specifying define.amd.jQuery = true. Register as a named module,
+// since jQuery can be concatenated with other files that may use define,
+// but not use a proper concatenation script that understands anonymous
+// AMD modules. A named AMD is safest and most robust way to register.
+// Lowercase jquery is used because AMD module names are derived from
+// file names, and jQuery is normally delivered in a lowercase file name.
+// Do this after creating the global so that if an AMD module wants to call
+// noConflict to hide this version of jQuery, it will work.
+if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
+ define( "jquery", [], function () { return jQuery; } );
+}
+
+
+
+})( window );
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Applies button styling to links
+//>>label: Buttons: Link-based
+//>>group: Forms
+//>>css: ../css/themes/default/jquery.mobile.theme.css, ../css/structure/jquery.mobile.button.css
+
+define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.vmouse" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+( function( $, undefined ) {
+
+$.fn.buttonMarkup = function( options ) {
+ var $workingSet = this;
+
+ // Enforce options to be of type string
+ options = ( options && ( $.type( options ) == "object" ) )? options : {};
+ for ( var i = 0; i < $workingSet.length; i++ ) {
+ var el = $workingSet.eq( i ),
+ e = el[ 0 ],
+ o = $.extend( {}, $.fn.buttonMarkup.defaults, {
+ icon: options.icon !== undefined ? options.icon : el.jqmData( "icon" ),
+ iconpos: options.iconpos !== undefined ? options.iconpos : el.jqmData( "iconpos" ),
+ theme: options.theme !== undefined ? options.theme : el.jqmData( "theme" ) || $.mobile.getInheritedTheme( el, "c" ),
+ inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ),
+ shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ),
+ corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ),
+ iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" ),
+ mini: options.mini !== undefined ? options.mini : el.jqmData( "mini" )
+ }, options ),
+
+ // Classes Defined
+ innerClass = "ui-btn-inner",
+ textClass = "ui-btn-text",
+ buttonClass, iconClass,
+ // Button inner markup
+ buttonInner,
+ buttonText,
+ buttonIcon,
+ buttonElements;
+
+ $.each(o, function(key, value) {
+ e.setAttribute( "data-" + $.mobile.ns + key, value );
+ el.jqmData(key, value);
+ });
+
+ // Check if this element is already enhanced
+ buttonElements = $.data(((e.tagName === "INPUT" || e.tagName === "BUTTON") ? e.parentNode : e), "buttonElements");
+
+ if (buttonElements) {
+ e = buttonElements.outer;
+ el = $(e);
+ buttonInner = buttonElements.inner;
+ buttonText = buttonElements.text;
+ // We will recreate this icon below
+ $(buttonElements.icon).remove();
+ buttonElements.icon = null;
+ }
+ else {
+ buttonInner = document.createElement( o.wrapperEls );
+ buttonText = document.createElement( o.wrapperEls );
+ }
+ buttonIcon = o.icon ? document.createElement( "span" ) : null;
+
+ if ( attachEvents && !buttonElements) {
+ attachEvents();
+ }
+
+ // if not, try to find closest theme container
+ if ( !o.theme ) {
+ o.theme = $.mobile.getInheritedTheme( el, "c" );
+ }
+
+ buttonClass = "ui-btn ui-btn-up-" + o.theme;
+ buttonClass += o.inline ? " ui-btn-inline" : "";
+ buttonClass += o.shadow ? " ui-shadow" : "";
+ buttonClass += o.corners ? " ui-btn-corner-all" : "";
+
+ if ( o.mini !== undefined ) {
+ // Used to control styling in headers/footers, where buttons default to `mini` style.
+ buttonClass += o.mini ? " ui-mini" : " ui-fullsize";
+ }
+
+ if ( o.inline !== undefined ) {
+ // Used to control styling in headers/footers, where buttons default to `mini` style.
+ buttonClass += o.inline === false ? " ui-btn-block" : " ui-btn-inline";
+ }
+
+
+ if ( o.icon ) {
+ o.icon = "ui-icon-" + o.icon;
+ o.iconpos = o.iconpos || "left";
+
+ iconClass = "ui-icon " + o.icon;
+
+ if ( o.iconshadow ) {
+ iconClass += " ui-icon-shadow";
+ }
+ }
+
+ if ( o.iconpos ) {
+ buttonClass += " ui-btn-icon-" + o.iconpos;
+
+ if ( o.iconpos == "notext" && !el.attr( "title" ) ) {
+ el.attr( "title", el.getEncodedText() );
+ }
+ }
+
+ innerClass += o.corners ? " ui-btn-corner-all" : "";
+
+ if ( o.iconpos && o.iconpos === "notext" && !el.attr( "title" ) ) {
+ el.attr( "title", el.getEncodedText() );
+ }
+
+ if ( buttonElements ) {
+ el.removeClass( buttonElements.bcls || "" );
+ }
+ el.removeClass( "ui-link" ).addClass( buttonClass );
+
+ buttonInner.className = innerClass;
+
+ buttonText.className = textClass;
+ if ( !buttonElements ) {
+ buttonInner.appendChild( buttonText );
+ }
+ if ( buttonIcon ) {
+ buttonIcon.className = iconClass;
+ if ( !(buttonElements && buttonElements.icon) ) {
+ buttonIcon.appendChild( document.createTextNode("\u00a0") );
+ buttonInner.appendChild( buttonIcon );
+ }
+ }
+
+ while ( e.firstChild && !buttonElements) {
+ buttonText.appendChild( e.firstChild );
+ }
+
+ if ( !buttonElements ) {
+ e.appendChild( buttonInner );
+ }
+
+ // Assign a structure containing the elements of this button to the elements of this button. This
+ // will allow us to recognize this as an already-enhanced button in future calls to buttonMarkup().
+ buttonElements = {
+ bcls : buttonClass,
+ outer : e,
+ inner : buttonInner,
+ text : buttonText,
+ icon : buttonIcon
+ };
+
+ $.data(e, 'buttonElements', buttonElements);
+ $.data(buttonInner, 'buttonElements', buttonElements);
+ $.data(buttonText, 'buttonElements', buttonElements);
+ if (buttonIcon) {
+ $.data(buttonIcon, 'buttonElements', buttonElements);
+ }
+ }
+
+ return this;
+};
+
+$.fn.buttonMarkup.defaults = {
+ corners: true,
+ shadow: true,
+ iconshadow: true,
+ wrapperEls: "span"
+};
+
+function closestEnabledButton( element ) {
+ var cname;
+
+ while ( element ) {
+ // Note that we check for typeof className below because the element we
+ // handed could be in an SVG DOM where className on SVG elements is defined to
+ // be of a different type (SVGAnimatedString). We only operate on HTML DOM
+ // elements, so we look for plain "string".
+ cname = ( typeof element.className === 'string' ) && (element.className + ' ');
+ if ( cname && cname.indexOf("ui-btn ") > -1 && cname.indexOf("ui-disabled ") < 0 ) {
+ break;
+ }
+
+ element = element.parentNode;
+ }
+
+ return element;
+}
+
+var attachEvents = function() {
+ var hoverDelay = $.mobile.buttonMarkup.hoverDelay, hov, foc;
+
+ $( document ).bind( {
+ "vmousedown vmousecancel vmouseup vmouseover vmouseout focus blur scrollstart": function( event ) {
+ var theme,
+ $btn = $( closestEnabledButton( event.target ) ),
+ evt = event.type;
+
+ if ( $btn.length ) {
+ theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
+
+ if ( evt === "vmousedown" ) {
+ if ( $.support.touch ) {
+ hov = setTimeout(function() {
+ $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
+ }, hoverDelay );
+ } else {
+ $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
+ }
+ } else if ( evt === "vmousecancel" || evt === "vmouseup" ) {
+ $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
+ } else if ( evt === "vmouseover" || evt === "focus" ) {
+ if ( $.support.touch ) {
+ foc = setTimeout(function() {
+ $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
+ }, hoverDelay );
+ } else {
+ $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
+ }
+ } else if ( evt === "vmouseout" || evt === "blur" || evt === "scrollstart" ) {
+ $btn.removeClass( "ui-btn-hover-" + theme + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
+ if ( hov ) {
+ clearTimeout( hov );
+ }
+ if ( foc ) {
+ clearTimeout( foc );
+ }
+ }
+ }
+ },
+ "focusin focus": function( event ){
+ $( closestEnabledButton( event.target ) ).addClass( $.mobile.focusClass );
+ },
+ "focusout blur": function( event ){
+ $( closestEnabledButton( event.target ) ).removeClass( $.mobile.focusClass );
+ }
+ });
+
+ attachEvents = null;
+};
+
+//links in bars, or those with data-role become buttons
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+
+ $( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", e.target )
+ .not( ".ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )
+ .buttonMarkup();
+});
+
+})( jQuery );
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Creates collapsible content blocks.
+//>>label: Collapsible
+//>>group: Widgets
+//>>css: ../css/themes/default/jquery.mobile.theme.css,../css/structure/jquery.mobile.collapsible.css
+
+define( [ "jquery", "./jquery.mobile.widget", "./jquery.mobile.buttonMarkup" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.collapsible", $.mobile.widget, {
+ options: {
+ expandCueText: " click to expand contents",
+ collapseCueText: " click to collapse contents",
+ collapsed: true,
+ heading: "h1,h2,h3,h4,h5,h6,legend",
+ theme: null,
+ contentTheme: null,
+ iconTheme: "d",
+ mini: false,
+ initSelector: ":jqmData(role='collapsible')"
+ },
+ _create: function() {
+
+ var $el = this.element,
+ o = this.options,
+ collapsible = $el.addClass( "ui-collapsible" ),
+ collapsibleHeading = $el.children( o.heading ).first(),
+ collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
+ collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
+
+ // Replace collapsibleHeading if it's a legend
+ if ( collapsibleHeading.is( "legend" ) ) {
+ collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
+ collapsibleHeading.next().remove();
+ }
+
+ // If we are in a collapsible set
+ if ( collapsibleSet.length ) {
+ // Inherit the theme from collapsible-set
+ if ( !o.theme ) {
+ o.theme = collapsibleSet.jqmData("theme") || $.mobile.getInheritedTheme( collapsibleSet, "c" );
+ }
+ // Inherit the content-theme from collapsible-set
+ if ( !o.contentTheme ) {
+ o.contentTheme = collapsibleSet.jqmData( "content-theme" );
+ }
+
+ // Gets the preference icon position in the set
+ if ( !o.iconPos ) {
+ o.iconPos = collapsibleSet.jqmData( "iconpos" );
+ }
+
+ if( !o.mini ) {
+ o.mini = collapsibleSet.jqmData( "mini" );
+ }
+ }
+ collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
+
+ collapsibleHeading
+ //drop heading in before content
+ .insertBefore( collapsibleContent )
+ //modify markup & attributes
+ .addClass( "ui-collapsible-heading" )
+ .append( "<span class='ui-collapsible-heading-status'></span>" )
+ .wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
+ .find( "a" )
+ .first()
+ .buttonMarkup({
+ shadow: false,
+ corners: false,
+ iconpos: $el.jqmData( "iconpos" ) || o.iconPos || "left",
+ icon: "plus",
+ mini: o.mini,
+ theme: o.theme
+ })
+ .add( ".ui-btn-inner", $el )
+ .addClass( "ui-corner-top ui-corner-bottom" );
+
+ //events
+ collapsible
+ .bind( "expand collapse", function( event ) {
+ if ( !event.isDefaultPrevented() ) {
+
+ event.preventDefault();
+
+ var $this = $( this ),
+ isCollapse = ( event.type === "collapse" ),
+ contentTheme = o.contentTheme;
+
+ collapsibleHeading
+ .toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
+ .find( ".ui-collapsible-heading-status" )
+ .text( isCollapse ? o.expandCueText : o.collapseCueText )
+ .end()
+ .find( ".ui-icon" )
+ .toggleClass( "ui-icon-minus", !isCollapse )
+ .toggleClass( "ui-icon-plus", isCollapse );
+
+ $this.toggleClass( "ui-collapsible-collapsed", isCollapse );
+ collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
+
+ if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
+ collapsibleHeading
+ .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
+ .toggleClass( "ui-corner-bottom", isCollapse );
+ collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
+ }
+ collapsibleContent.trigger( "updatelayout" );
+ }
+ })
+ .trigger( o.collapsed ? "collapse" : "expand" );
+
+ collapsibleHeading
+ .bind( "click", function( event ) {
+
+ var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ?
+ "expand" : "collapse";
+
+ collapsible.trigger( type );
+
+ event.preventDefault();
+ });
+ }
+});
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $.mobile.collapsible.prototype.enhanceWithin( e.target );
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: For creating grouped collapsible content areas.
+//>>label: Collapsible Sets (Accordions)
+//>>group: Widgets
+//>>css: ../css/themes/default/jquery.mobile.theme.css,../css/structure/jquery.mobile.collapsible.css
+
+define( [ "jquery", "./jquery.mobile.widget", "./jquery.mobile.collapsible" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.collapsibleset", $.mobile.widget, {
+ options: {
+ initSelector: ":jqmData(role='collapsible-set')"
+ },
+ _create: function() {
+ var $el = this.element.addClass( "ui-collapsible-set" ),
+ o = this.options;
+
+ // Inherit the theme from collapsible-set
+ if ( !o.theme ) {
+ o.theme = $.mobile.getInheritedTheme( $el, "c" );
+ }
+ // Inherit the content-theme from collapsible-set
+ if ( !o.contentTheme ) {
+ o.contentTheme = $el.jqmData( "content-theme" );
+ }
+
+ if ( !o.corners ) {
+ o.corners = $el.jqmData( "corners" ) === undefined ? true : false;
+ }
+
+ // Initialize the collapsible set if it's not already initialized
+ if ( !$el.jqmData( "collapsiblebound" ) ) {
+ $el
+ .jqmData( "collapsiblebound", true )
+ .bind( "expand collapse", function( event ) {
+ var isCollapse = ( event.type === "collapse" ),
+ collapsible = $( event.target ).closest( ".ui-collapsible" ),
+ widget = collapsible.data( "collapsible" ),
+ contentTheme = widget.options.contentTheme;
+ if ( contentTheme && collapsible.jqmData( "collapsible-last" ) ) {
+ collapsible.find( widget.options.heading ).first()
+ .find( "a" ).first()
+ .add( ".ui-btn-inner" )
+ .toggleClass( "ui-corner-bottom", isCollapse );
+ collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
+ }
+ })
+ .bind( "expand", function( event ) {
+ $( event.target )
+ .closest( ".ui-collapsible" )
+ .siblings( ".ui-collapsible" )
+ .trigger( "collapse" );
+ });
+ }
+ },
+
+ _init: function() {
+ this.refresh();
+ },
+
+ refresh: function() {
+ var $el = this.element,
+ o = this.options,
+ collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );
+
+ $.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );
+
+ // clean up borders
+ collapsiblesInSet.each( function() {
+ $( this ).find( $.mobile.collapsible.prototype.options.heading )
+ .find( "a" ).first()
+ .add( ".ui-btn-inner" )
+ .removeClass( "ui-corner-top ui-corner-bottom" );
+ });
+
+ collapsiblesInSet.first()
+ .find( "a" )
+ .first()
+ .addClass( o.corners ? "ui-corner-top" : "" )
+ .find( ".ui-btn-inner" )
+ .addClass( "ui-corner-top" );
+
+ collapsiblesInSet.last()
+ .jqmData( "collapsible-last", true )
+ .find( "a" )
+ .first()
+ .addClass( o.corners ? "ui-corner-bottom" : "" )
+ .find( ".ui-btn-inner" )
+ .addClass( "ui-corner-bottom" );
+ }
+});
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $.mobile.collapsibleset.prototype.enhanceWithin( e.target );
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Visually groups sets of buttons, checks, radios, etc.
+//>>label: Controlgroups
+//>>group: Forms
+//>>css: ../css/themes/default/jquery.mobile.theme.css,../css/structure/jquery.mobile.controlgroup.css
+
+define( [ "jquery", "./jquery.mobile.buttonMarkup" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.fn.controlgroup = function( options ) {
+ function flipClasses( els, flCorners ) {
+ els.removeClass( "ui-btn-corner-all ui-shadow" )
+ .eq( 0 ).addClass( flCorners[ 0 ] )
+ .end()
+ .last().addClass( flCorners[ 1 ] ).addClass( "ui-controlgroup-last" );
+ }
+
+ return this.each(function() {
+ var $el = $( this ),
+ o = $.extend({
+ direction: $el.jqmData( "type" ) || "vertical",
+ shadow: false,
+ excludeInvisible: true,
+ mini: $el.jqmData( "mini" )
+ }, options ),
+ groupheading = $el.children( "legend" ),
+ flCorners = o.direction == "horizontal" ? [ "ui-corner-left", "ui-corner-right" ] : [ "ui-corner-top", "ui-corner-bottom" ],
+ type = $el.find( "input" ).first().attr( "type" );
+
+ // Replace legend with more stylable replacement div
+ if ( groupheading.length ) {
+ $el.wrapInner( "<div class='ui-controlgroup-controls'></div>" );
+ $( "<div role='heading' class='ui-controlgroup-label'>" + groupheading.html() + "</div>" ).insertBefore( $el.children(0) );
+ groupheading.remove();
+ }
+
+ $el.addClass( "ui-corner-all ui-controlgroup ui-controlgroup-" + o.direction );
+
+ flipClasses( $el.find( ".ui-btn" + ( o.excludeInvisible ? ":visible" : "" ) ).not('.ui-slider-handle'), flCorners );
+ flipClasses( $el.find( ".ui-btn-inner" ), flCorners );
+
+ if ( o.shadow ) {
+ $el.addClass( "ui-shadow" );
+ }
+
+ if ( o.mini ) {
+ $el.addClass( "ui-mini" );
+ }
+
+ });
+};
+
+// The pagecreate handler for controlgroup is in jquery.mobile.init because of the soft-dependency on the wrapped widgets
+
+})(jQuery);
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Base file for jQuery Mobile
+//>>label: Core
+//>>group: Core
+//>>required: true
+//>>css: ../css/structure/jquery.mobile.core.css
+
+define( [ "jquery", "../external/requirejs/text!../version.txt", "./jquery.mobile.widget" ], function( $, __version__ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+ var nsNormalizeDict = {};
+
+ // jQuery.mobile configurable options
+ $.mobile = $.extend( {}, {
+
+ // Version of the jQuery Mobile Framework
+ version: __version__,
+
+ // Namespace used framework-wide for data-attrs. Default is no namespace
+ ns: "",
+
+ // Define the url parameter used for referencing widget-generated sub-pages.
+ // Translates to to example.html&ui-page=subpageIdentifier
+ // hash segment before &ui-page= is used to make Ajax request
+ subPageUrlKey: "ui-page",
+
+ // Class assigned to page currently in view, and during transitions
+ activePageClass: "ui-page-active",
+
+ // Class used for "active" button state, from CSS framework
+ activeBtnClass: "ui-btn-active",
+
+ // Class used for "focus" form element state, from CSS framework
+ focusClass: "ui-focus",
+
+ // Automatically handle clicks and form submissions through Ajax, when same-domain
+ ajaxEnabled: true,
+
+ // Automatically load and show pages based on location.hash
+ hashListeningEnabled: true,
+
+ // disable to prevent jquery from bothering with links
+ linkBindingEnabled: true,
+
+ // Set default page transition - 'none' for no transitions
+ defaultPageTransition: "fade",
+
+ // Set maximum window width for transitions to apply - 'false' for no limit
+ maxTransitionWidth: false,
+
+ // Minimum scroll distance that will be remembered when returning to a page
+ minScrollBack: 250,
+
+ // DEPRECATED: the following property is no longer in use, but defined until 2.0 to prevent conflicts
+ touchOverflowEnabled: false,
+
+ // Set default dialog transition - 'none' for no transitions
+ defaultDialogTransition: "pop",
+
+ // Show loading message during Ajax requests
+ // if false, message will not appear, but loading classes will still be toggled on html el
+ loadingMessage: "loading",
+
+ // Error response message - appears when an Ajax page request fails
+ pageLoadErrorMessage: "Error Loading Page",
+
+ // Should the text be visble in the loading message?
+ loadingMessageTextVisible: false,
+
+ // When the text is visible, what theme does the loading box use?
+ loadingMessageTheme: "a",
+
+ // For error messages, which theme does the box uses?
+ pageLoadErrorMessageTheme: "e",
+
+ //automatically initialize the DOM when it's ready
+ autoInitializePage: true,
+
+ pushStateEnabled: true,
+
+ // allows users to opt in to ignoring content by marking a parent element as
+ // data-ignored
+ ignoreContentEnabled: false,
+
+ // turn of binding to the native orientationchange due to android orientation behavior
+ orientationChangeEnabled: true,
+
+ buttonMarkup: {
+ hoverDelay: 200
+ },
+
+ // TODO might be useful upstream in jquery itself ?
+ keyCode: {
+ ALT: 18,
+ BACKSPACE: 8,
+ CAPS_LOCK: 20,
+ COMMA: 188,
+ COMMAND: 91,
+ COMMAND_LEFT: 91, // COMMAND
+ COMMAND_RIGHT: 93,
+ CONTROL: 17,
+ DELETE: 46,
+ DOWN: 40,
+ END: 35,
+ ENTER: 13,
+ ESCAPE: 27,
+ HOME: 36,
+ INSERT: 45,
+ LEFT: 37,
+ MENU: 93, // COMMAND_RIGHT
+ NUMPAD_ADD: 107,
+ NUMPAD_DECIMAL: 110,
+ NUMPAD_DIVIDE: 111,
+ NUMPAD_ENTER: 108,
+ NUMPAD_MULTIPLY: 106,
+ NUMPAD_SUBTRACT: 109,
+ PAGE_DOWN: 34,
+ PAGE_UP: 33,
+ PERIOD: 190,
+ RIGHT: 39,
+ SHIFT: 16,
+ SPACE: 32,
+ TAB: 9,
+ UP: 38,
+ WINDOWS: 91 // COMMAND
+ },
+
+ // Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
+ silentScroll: function( ypos ) {
+ if ( $.type( ypos ) !== "number" ) {
+ ypos = $.mobile.defaultHomeScroll;
+ }
+
+ // prevent scrollstart and scrollstop events
+ $.event.special.scrollstart.enabled = false;
+
+ setTimeout(function() {
+ window.scrollTo( 0, ypos );
+ $( document ).trigger( "silentscroll", { x: 0, y: ypos });
+ }, 20 );
+
+ setTimeout(function() {
+ $.event.special.scrollstart.enabled = true;
+ }, 150 );
+ },
+
+ // Expose our cache for testing purposes.
+ nsNormalizeDict: nsNormalizeDict,
+
+ // Take a data attribute property, prepend the namespace
+ // and then camel case the attribute string. Add the result
+ // to our nsNormalizeDict so we don't have to do this again.
+ nsNormalize: function( prop ) {
+ if ( !prop ) {
+ return;
+ }
+
+ return nsNormalizeDict[ prop ] || ( nsNormalizeDict[ prop ] = $.camelCase( $.mobile.ns + prop ) );
+ },
+
+ getInheritedTheme: function( el, defaultTheme ) {
+
+ // Find the closest parent with a theme class on it. Note that
+ // we are not using $.fn.closest() on purpose here because this
+ // method gets called quite a bit and we need it to be as fast
+ // as possible.
+
+ var e = el[ 0 ],
+ ltr = "",
+ re = /ui-(bar|body|overlay)-([a-z])\b/,
+ c, m;
+
+ while ( e ) {
+ var c = e.className || "";
+ if ( ( m = re.exec( c ) ) && ( ltr = m[ 2 ] ) ) {
+ // We found a parent with a theme class
+ // on it so bail from this loop.
+ break;
+ }
+ e = e.parentNode;
+ }
+
+ // Return the theme letter we found, if none, return the
+ // specified default.
+
+ return ltr || defaultTheme || "a";
+ },
+
+ // TODO the following $ and $.fn extensions can/probably should be moved into jquery.mobile.core.helpers
+ //
+ // Find the closest javascript page element to gather settings data jsperf test
+ // http://jsperf.com/single-complex-selector-vs-many-complex-selectors/edit
+ // possibly naive, but it shows that the parsing overhead for *just* the page selector vs
+ // the page and dialog selector is negligable. This could probably be speed up by
+ // doing a similar parent node traversal to the one found in the inherited theme code above
+ closestPageData: function( $target ) {
+ return $target
+ .closest(':jqmData(role="page"), :jqmData(role="dialog")')
+ .data("page");
+ },
+
+ enhanceable: function( $set ) {
+ return this.haveParents( $set, "enhance" );
+ },
+
+ hijackable: function( $set ) {
+ return this.haveParents( $set, "ajax" );
+ },
+
+ haveParents: function( $set, attr ) {
+ if( !$.mobile.ignoreContentEnabled ){
+ return $set;
+ }
+
+ var count = $set.length,
+ $newSet = $(),
+ e, $element, excluded;
+
+ for ( var i = 0; i < count; i++ ) {
+ $element = $set.eq( i );
+ excluded = false;
+ e = $set[ i ];
+
+ while ( e ) {
+ var c = e.getAttribute ? e.getAttribute( "data-" + $.mobile.ns + attr ) : "";
+
+ if ( c === "false" ) {
+ excluded = true;
+ break;
+ }
+
+ e = e.parentNode;
+ }
+
+ if ( !excluded ) {
+ $newSet = $newSet.add( $element );
+ }
+ }
+
+ return $newSet;
+ }
+ }, $.mobile );
+
+ // Mobile version of data and removeData and hasData methods
+ // ensures all data is set and retrieved using jQuery Mobile's data namespace
+ $.fn.jqmData = function( prop, value ) {
+ var result;
+ if ( typeof prop != "undefined" ) {
+ if ( prop ) {
+ prop = $.mobile.nsNormalize( prop );
+ }
+ result = this.data.apply( this, arguments.length < 2 ? [ prop ] : [ prop, value ] );
+ }
+ return result;
+ };
+
+ $.jqmData = function( elem, prop, value ) {
+ var result;
+ if ( typeof prop != "undefined" ) {
+ result = $.data( elem, prop ? $.mobile.nsNormalize( prop ) : prop, value );
+ }
+ return result;
+ };
+
+ $.fn.jqmRemoveData = function( prop ) {
+ return this.removeData( $.mobile.nsNormalize( prop ) );
+ };
+
+ $.jqmRemoveData = function( elem, prop ) {
+ return $.removeData( elem, $.mobile.nsNormalize( prop ) );
+ };
+
+ $.fn.removeWithDependents = function() {
+ $.removeWithDependents( this );
+ };
+
+ $.removeWithDependents = function( elem ) {
+ var $elem = $( elem );
+
+ ( $elem.jqmData('dependents') || $() ).remove();
+ $elem.remove();
+ };
+
+ $.fn.addDependents = function( newDependents ) {
+ $.addDependents( $(this), newDependents );
+ };
+
+ $.addDependents = function( elem, newDependents ) {
+ var dependents = $(elem).jqmData( 'dependents' ) || $();
+
+ $(elem).jqmData( 'dependents', $.merge(dependents, newDependents) );
+ };
+
+ // note that this helper doesn't attempt to handle the callback
+ // or setting of an html elements text, its only purpose is
+ // to return the html encoded version of the text in all cases. (thus the name)
+ $.fn.getEncodedText = function() {
+ return $( "<div/>" ).text( $(this).text() ).html();
+ };
+
+ // fluent helper function for the mobile namespaced equivalent
+ $.fn.jqmEnhanceable = function() {
+ return $.mobile.enhanceable( this );
+ };
+
+ $.fn.jqmHijackable = function() {
+ return $.mobile.hijackable( this );
+ };
+
+ // Monkey-patching Sizzle to filter the :jqmData selector
+ var oldFind = $.find,
+ jqmDataRE = /:jqmData\(([^)]*)\)/g;
+
+ $.find = function( selector, context, ret, extra ) {
+ selector = selector.replace( jqmDataRE, "[data-" + ( $.mobile.ns || "" ) + "$1]" );
+
+ return oldFind.call( this, selector, context, ret, extra );
+ };
+
+ $.extend( $.find, oldFind );
+
+ $.find.matches = function( expr, set ) {
+ return $.find( expr, null, null, set );
+ };
+
+ $.find.matchesSelector = function( node, expr ) {
+ return $.find( expr, null, null, [ node ] ).length > 0;
+ };
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
+
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Creates the define method on window, for async loading
+//>>label: Define
+//>>group: exclude
+//>>excludeEnd("jqmBuildExclude");
+
+// creates the define method on window, only used where async loading
+// is not desired in the docs and experiments
+window.define = function(){
+ Array.prototype.slice.call( arguments ).pop()( window.jQuery );
+};
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Changes input type to another after custom enhancements are made (ex. range > numberic).
+//>>label: Degrade Inputs
+//>>group: Utilities
+
+
+define( [ "jquery", "./jquery.mobile.page" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.mobile.page.prototype.options.degradeInputs = {
+ color: false,
+ date: false,
+ datetime: false,
+ "datetime-local": false,
+ email: false,
+ month: false,
+ number: false,
+ range: "number",
+ search: "text",
+ tel: false,
+ time: false,
+ url: false,
+ week: false
+};
+
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+
+ var page = $.mobile.closestPageData($(e.target)), options;
+
+ if( !page ) {
+ return;
+ }
+
+ options = page.options;
+
+ // degrade inputs to avoid poorly implemented native functionality
+ $( e.target ).find( "input" ).not( page.keepNativeSelector() ).each(function() {
+ var $this = $( this ),
+ type = this.getAttribute( "type" ),
+ optType = options.degradeInputs[ type ] || "text";
+
+ if ( options.degradeInputs[ type ] ) {
+ var html = $( "<div>" ).html( $this.clone() ).html(),
+ // In IE browsers, the type sometimes doesn't exist in the cloned markup, so we replace the closing tag instead
+ hasType = html.indexOf( " type=" ) > -1,
+ findstr = hasType ? /\s+type=["']?\w+['"]?/ : /\/?>/,
+ repstr = " type=\"" + optType + "\" data-" + $.mobile.ns + "type=\"" + type + "\"" + ( hasType ? "" : ">" );
+
+ $this.replaceWith( html.replace( findstr, repstr ) );
+ }
+ });
+
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Displays a page as a modal dialog with inset appearance and overlay background
+//>>label: Dialogs
+//>>group: Widgets
+//>>css: ../css/themes/default/jquery.mobile.theme.css,../css/structure/jquery.mobile.dialog.css
+
+define( [ "jquery", "./jquery.mobile.widget" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+$.widget( "mobile.dialog", $.mobile.widget, {
+ options: {
+ closeBtnText : "Close",
+ overlayTheme : "a",
+ initSelector : ":jqmData(role='dialog')"
+ },
+ _create: function() {
+ var self = this,
+ $el = this.element,
+ headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" ),
+ dialogWrap = $("<div/>", {
+ "role" : "dialog",
+ "class" : "ui-dialog-contain ui-corner-all ui-overlay-shadow"
+ });
+
+ $el.addClass( "ui-dialog ui-overlay-" + this.options.overlayTheme );
+
+ // Class the markup for dialog styling
+ // Set aria role
+ $el
+ .wrapInner( dialogWrap )
+ .children()
+ .find( ":jqmData(role='header')" )
+ .prepend( headerCloseButton )
+ .end()
+ .children( ':first-child')
+ .addClass( "ui-corner-top" )
+ .end()
+ .children( ":last-child" )
+ .addClass( "ui-corner-bottom" );
+
+ // this must be an anonymous function so that select menu dialogs can replace
+ // the close method. This is a change from previously just defining data-rel=back
+ // on the button and letting nav handle it
+ //
+ // Use click rather than vclick in order to prevent the possibility of unintentionally
+ // reopening the dialog if the dialog opening item was directly under the close button.
+ headerCloseButton.bind( "click", function() {
+ self.close();
+ });
+
+ /* bind events
+ - clicks and submits should use the closing transition that the dialog opened with
+ unless a data-transition is specified on the link/form
+ - if the click was on the close button, or the link has a data-rel="back" it'll go back in history naturally
+ */
+ $el.bind( "vclick submit", function( event ) {
+ var $target = $( event.target ).closest( event.type === "vclick" ? "a" : "form" ),
+ active;
+
+ if ( $target.length && !$target.jqmData( "transition" ) ) {
+
+ active = $.mobile.urlHistory.getActive() || {};
+
+ $target.attr( "data-" + $.mobile.ns + "transition", ( active.transition || $.mobile.defaultDialogTransition ) )
+ .attr( "data-" + $.mobile.ns + "direction", "reverse" );
+ }
+ })
+ .bind( "pagehide", function( e, ui ) {
+ $( this ).find( "." + $.mobile.activeBtnClass ).removeClass( $.mobile.activeBtnClass );
+ })
+ // Override the theme set by the page plugin on pageshow
+ .bind( "pagebeforeshow", function(){
+ if( self.options.overlayTheme ){
+ self.element
+ .page( "removeContainerBackground" )
+ .page( "setContainerBackground", self.options.overlayTheme );
+ }
+ });
+ },
+
+ // Close method goes back in history
+ close: function() {
+ window.history.back();
+ }
+});
+
+//auto self-init widgets
+$( document ).delegate( $.mobile.dialog.prototype.options.initSelector, "pagecreate", function(){
+ $.mobile.dialog.prototype.enhance( this );
+});
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: jQuery Mobile documentation JS
+//>>label: Docs
+//>>group: exclude
+define( [ "../external/requirejs/depend!../docs/_assets/js/jqm-docs[jquery]", "../external/requirejs/order!./jquery.mobile" ] );
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Custom events and shortcuts.
+//>>label: Events
+//>>group: Core
+//>>required: true
+
+define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery.mobile.vmouse" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+// add new event shortcuts
+$.each( ( "touchstart touchmove touchend orientationchange throttledresize " +
+ "tap taphold swipe swipeleft swiperight scrollstart scrollstop" ).split( " " ), function( i, name ) {
+
+ $.fn[ name ] = function( fn ) {
+ return fn ? this.bind( name, fn ) : this.trigger( name );
+ };
+
+ $.attrFn[ name ] = true;
+});
+
+var supportTouch = $.support.touch,
+ scrollEvent = "touchmove scroll",
+ touchStartEvent = supportTouch ? "touchstart" : "mousedown",
+ touchStopEvent = supportTouch ? "touchend" : "mouseup",
+ touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
+
+function triggerCustomEvent( obj, eventType, event ) {
+ var originalType = event.type;
+ event.type = eventType;
+ $.event.handle.call( obj, event );
+ event.type = originalType;
+}
+
+// also handles scrollstop
+$.event.special.scrollstart = {
+
+ enabled: true,
+
+ setup: function() {
+
+ var thisObject = this,
+ $this = $( thisObject ),
+ scrolling,
+ timer;
+
+ function trigger( event, state ) {
+ scrolling = state;
+ triggerCustomEvent( thisObject, scrolling ? "scrollstart" : "scrollstop", event );
+ }
+
+ // iPhone triggers scroll after a small delay; use touchmove instead
+ $this.bind( scrollEvent, function( event ) {
+
+ if ( !$.event.special.scrollstart.enabled ) {
+ return;
+ }
+
+ if ( !scrolling ) {
+ trigger( event, true );
+ }
+
+ clearTimeout( timer );
+ timer = setTimeout(function() {
+ trigger( event, false );
+ }, 50 );
+ });
+ }
+};
+
+// also handles taphold
+$.event.special.tap = {
+ setup: function() {
+ var thisObject = this,
+ $this = $( thisObject );
+
+ $this.bind( "vmousedown", function( event ) {
+
+ if ( event.which && event.which !== 1 ) {
+ return false;
+ }
+
+ var origTarget = event.target,
+ origEvent = event.originalEvent,
+ timer;
+
+ function clearTapTimer() {
+ clearTimeout( timer );
+ }
+
+ function clearTapHandlers() {
+ clearTapTimer();
+
+ $this.unbind( "vclick", clickHandler )
+ .unbind( "vmouseup", clearTapTimer );
+ $( document ).unbind( "vmousecancel", clearTapHandlers );
+ }
+
+ function clickHandler(event) {
+ clearTapHandlers();
+
+ // ONLY trigger a 'tap' event if the start target is
+ // the same as the stop target.
+ if ( origTarget == event.target ) {
+ triggerCustomEvent( thisObject, "tap", event );
+ }
+ }
+
+ $this.bind( "vmouseup", clearTapTimer )
+ .bind( "vclick", clickHandler );
+ $( document ).bind( "vmousecancel", clearTapHandlers );
+
+ timer = setTimeout(function() {
+ triggerCustomEvent( thisObject, "taphold", $.Event( "taphold", { target: origTarget } ) );
+ }, 750 );
+ });
+ }
+};
+
+// also handles swipeleft, swiperight
+$.event.special.swipe = {
+ scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
+
+ durationThreshold: 1000, // More time than this, and it isn't a swipe.
+
+ horizontalDistanceThreshold: 30, // Swipe horizontal displacement must be more than this.
+
+ verticalDistanceThreshold: 75, // Swipe vertical displacement must be less than this.
+
+ setup: function() {
+ var thisObject = this,
+ $this = $( thisObject );
+
+ $this.bind( touchStartEvent, function( event ) {
+ var data = event.originalEvent.touches ?
+ event.originalEvent.touches[ 0 ] : event,
+ start = {
+ time: ( new Date() ).getTime(),
+ coords: [ data.pageX, data.pageY ],
+ origin: $( event.target )
+ },
+ stop;
+
+ function moveHandler( event ) {
+
+ if ( !start ) {
+ return;
+ }
+
+ var data = event.originalEvent.touches ?
+ event.originalEvent.touches[ 0 ] : event;
+
+ stop = {
+ time: ( new Date() ).getTime(),
+ coords: [ data.pageX, data.pageY ]
+ };
+
+ // prevent scrolling
+ if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.scrollSupressionThreshold ) {
+ event.preventDefault();
+ }
+ }
+
+ $this.bind( touchMoveEvent, moveHandler )
+ .one( touchStopEvent, function( event ) {
+ $this.unbind( touchMoveEvent, moveHandler );
+
+ if ( start && stop ) {
+ if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
+ Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
+ Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
+
+ start.origin.trigger( "swipe" )
+ .trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
+ }
+ }
+ start = stop = undefined;
+ });
+ });
+ }
+};
+
+(function( $, window ) {
+ // "Cowboy" Ben Alman
+
+ var win = $( window ),
+ special_event,
+ get_orientation,
+ last_orientation,
+ initial_orientation_is_landscape,
+ initial_orientation_is_default,
+ portrait_map = { "0": true, "180": true };
+
+ // It seems that some device/browser vendors use window.orientation values 0 and 180 to
+ // denote the "default" orientation. For iOS devices, and most other smart-phones tested,
+ // the default orientation is always "portrait", but in some Android and RIM based tablets,
+ // the default orientation is "landscape". The following code attempts to use the window
+ // dimensions to figure out what the current orientation is, and then makes adjustments
+ // to the to the portrait_map if necessary, so that we can properly decode the
+ // window.orientation value whenever get_orientation() is called.
+ //
+ // Note that we used to use a media query to figure out what the orientation the browser
+ // thinks it is in:
+ //
+ // initial_orientation_is_landscape = $.mobile.media("all and (orientation: landscape)");
+ //
+ // but there was an iPhone/iPod Touch bug beginning with iOS 4.2, up through iOS 5.1,
+ // where the browser *ALWAYS* applied the landscape media query. This bug does not
+ // happen on iPad.
+
+ if ( $.support.orientation ) {
+
+ // Check the window width and height to figure out what the current orientation
+ // of the device is at this moment. Note that we've initialized the portrait map
+ // values to 0 and 180, *AND* we purposely check for landscape so that if we guess
+ // wrong, , we default to the assumption that portrait is the default orientation.
+ // We use a threshold check below because on some platforms like iOS, the iPhone
+ // form-factor can report a larger width than height if the user turns on the
+ // developer console. The actual threshold value is somewhat arbitrary, we just
+ // need to make sure it is large enough to exclude the developer console case.
+
+ var ww = window.innerWidth || $( window ).width(),
+ wh = window.innerHeight || $( window ).height(),
+ landscape_threshold = 50;
+
+ initial_orientation_is_landscape = ww > wh && ( ww - wh ) > landscape_threshold;
+
+
+ // Now check to see if the current window.orientation is 0 or 180.
+ initial_orientation_is_default = portrait_map[ window.orientation ];
+
+ // If the initial orientation is landscape, but window.orientation reports 0 or 180, *OR*
+ // if the initial orientation is portrait, but window.orientation reports 90 or -90, we
+ // need to flip our portrait_map values because landscape is the default orientation for
+ // this device/browser.
+ if ( ( initial_orientation_is_landscape && initial_orientation_is_default ) || ( !initial_orientation_is_landscape && !initial_orientation_is_default ) ) {
+ portrait_map = { "-90": true, "90": true };
+ }
+ }
+
+ $.event.special.orientationchange = special_event = {
+ setup: function() {
+ // If the event is supported natively, return false so that jQuery
+ // will bind to the event using DOM methods.
+ if ( $.support.orientation && $.mobile.orientationChangeEnabled ) {
+ return false;
+ }
+
+ // Get the current orientation to avoid initial double-triggering.
+ last_orientation = get_orientation();
+
+ // Because the orientationchange event doesn't exist, simulate the
+ // event by testing window dimensions on resize.
+ win.bind( "throttledresize", handler );
+ },
+ teardown: function(){
+ // If the event is not supported natively, return false so that
+ // jQuery will unbind the event using DOM methods.
+ if ( $.support.orientation && $.mobile.orientationChangeEnabled ) {
+ return false;
+ }
+
+ // Because the orientationchange event doesn't exist, unbind the
+ // resize event handler.
+ win.unbind( "throttledresize", handler );
+ },
+ add: function( handleObj ) {
+ // Save a reference to the bound event handler.
+ var old_handler = handleObj.handler;
+
+
+ handleObj.handler = function( event ) {
+ // Modify event object, adding the .orientation property.
+ event.orientation = get_orientation();
+
+ // Call the originally-bound event handler and return its result.
+ return old_handler.apply( this, arguments );
+ };
+ }
+ };
+
+ // If the event is not supported natively, this handler will be bound to
+ // the window resize event to simulate the orientationchange event.
+ function handler() {
+ // Get the current orientation.
+ var orientation = get_orientation();
+
+ if ( orientation !== last_orientation ) {
+ // The orientation has changed, so trigger the orientationchange event.
+ last_orientation = orientation;
+ win.trigger( "orientationchange" );
+ }
+ }
+
+ // Get the current page orientation. This method is exposed publicly, should it
+ // be needed, as jQuery.event.special.orientationchange.orientation()
+ $.event.special.orientationchange.orientation = get_orientation = function() {
+ var isPortrait = true, elem = document.documentElement;
+
+ // prefer window orientation to the calculation based on screensize as
+ // the actual screen resize takes place before or after the orientation change event
+ // has been fired depending on implementation (eg android 2.3 is before, iphone after).
+ // More testing is required to determine if a more reliable method of determining the new screensize
+ // is possible when orientationchange is fired. (eg, use media queries + element + opacity)
+ if ( $.support.orientation ) {
+ // if the window orientation registers as 0 or 180 degrees report
+ // portrait, otherwise landscape
+ isPortrait = portrait_map[ window.orientation ];
+ } else {
+ isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1;
+ }
+
+ return isPortrait ? "portrait" : "landscape";
+ };
+
+})( jQuery, window );
+
+
+// throttled resize event
+(function() {
+
+ $.event.special.throttledresize = {
+ setup: function() {
+ $( this ).bind( "resize", handler );
+ },
+ teardown: function(){
+ $( this ).unbind( "resize", handler );
+ }
+ };
+
+ var throttle = 250,
+ handler = function() {
+ curr = ( new Date() ).getTime();
+ diff = curr - lastCall;
+
+ if ( diff >= throttle ) {
+
+ lastCall = curr;
+ $( this ).trigger( "throttledresize" );
+
+ } else {
+
+ if ( heldCall ) {
+ clearTimeout( heldCall );
+ }
+
+ // Promise a held call will still execute
+ heldCall = setTimeout( handler, throttle - diff );
+ }
+ },
+ lastCall = 0,
+ heldCall,
+ curr,
+ diff;
+})();
+
+
+$.each({
+ scrollstop: "scrollstart",
+ taphold: "tap",
+ swipeleft: "swipe",
+ swiperight: "swipe"
+}, function( event, sourceEvent ) {
+
+ $.event.special[ event ] = {
+ setup: function() {
+ $( this ).bind( sourceEvent, $.noop );
+ }
+ };
+});
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Styling to responsively position forms and labels based on screen width and add visual separation
+//>>label: Fieldcontainers
+//>>group: Forms
+//>>css: ../css/themes/default/jquery.mobile.theme.css,../css/structure/jquery.mobile.forms.fieldcontain.css
+
+define( [ "jquery" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.fn.fieldcontain = function( options ) {
+ return this.addClass( "ui-field-contain ui-body ui-br" );
+};
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $( ":jqmData(role='fieldcontain')", e.target ).jqmEnhanceable().fieldcontain();
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Behavior for "fixed" headers and footers
+//>>label: Toolbars: Fixed
+//>>group: Widgets
+//>>css: ../css/themes/default/jquery.mobile.theme.css,../css/structure/jquery.mobile.fixedToolbar.css
+
+define( [ "jquery", "./jquery.mobile.widget", "./jquery.mobile.core", "./jquery.mobile.navigation", "./jquery.mobile.page", "./jquery.mobile.page.sections", "./jquery.mobile.zoom" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+
+ $.widget( "mobile.fixedtoolbar", $.mobile.widget, {
+ options: {
+ visibleOnPageShow: true,
+ disablePageZoom: true,
+ transition: "slide", //can be none, fade, slide (slide maps to slideup or slidedown)
+ fullscreen: false,
+ tapToggle: true,
+ tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed",
+ hideDuringFocus: "input, textarea, select",
+ updatePagePadding: true,
+ trackPersistentToolbars: true,
+
+ // Browser detection! Weeee, here we go...
+ // Unfortunately, position:fixed is costly, not to mention probably impossible, to feature-detect accurately.
+ // Some tests exist, but they currently return false results in critical devices and browsers, which could lead to a broken experience.
+ // Testing fixed positioning is also pretty obtrusive to page load, requiring injected elements and scrolling the window
+ // The following function serves to rule out some popular browsers with known fixed-positioning issues
+ // This is a plugin option like any other, so feel free to improve or overwrite it
+ supportBlacklist: function(){
+ var w = window,
+ ua = navigator.userAgent,
+ platform = navigator.platform,
+ // Rendering engine is Webkit, and capture major version
+ wkmatch = ua.match( /AppleWebKit\/([0-9]+)/ ),
+ wkversion = !!wkmatch && wkmatch[ 1 ],
+ ffmatch = ua.match( /Fennec\/([0-9]+)/ ),
+ ffversion = !!ffmatch && ffmatch[ 1 ],
+ operammobilematch = ua.match( /Opera Mobi\/([0-9]+)/ ),
+ omversion = !!operammobilematch && operammobilematch[ 1 ];
+
+ if(
+ // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
+ ( ( platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1 || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534 )
+ ||
+ // Opera Mini
+ ( w.operamini && ({}).toString.call( w.operamini ) === "[object OperaMini]" )
+ ||
+ ( operammobilematch && omversion < 7458 )
+ ||
+ //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
+ ( ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533 )
+ ||
+ // Firefox Mobile before 6.0 -
+ ( ffversion && ffversion < 6 )
+ ||
+ // WebOS less than 3
+ ( "palmGetResource" in window && wkversion && wkversion < 534 )
+ ||
+ // MeeGo
+ ( ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1 )
+ ){
+ return true;
+ }
+
+ return false;
+ },
+ initSelector: ":jqmData(position='fixed')"
+ },
+
+ _create: function() {
+
+ var self = this,
+ o = self.options,
+ $el = self.element,
+ tbtype = $el.is( ":jqmData(role='header')" ) ? "header" : "footer",
+ $page = $el.closest(".ui-page");
+
+ // Feature detecting support for
+ if( o.supportBlacklist() ){
+ self.destroy();
+ return;
+ }
+
+ $el.addClass( "ui-"+ tbtype +"-fixed" );
+
+ // "fullscreen" overlay positioning
+ if( o.fullscreen ){
+ $el.addClass( "ui-"+ tbtype +"-fullscreen" );
+ $page.addClass( "ui-page-" + tbtype + "-fullscreen" );
+ }
+ // If not fullscreen, add class to page to set top or bottom padding
+ else{
+ $page.addClass( "ui-page-" + tbtype + "-fixed" );
+ }
+
+ self._addTransitionClass();
+ self._bindPageEvents();
+ self._bindToggleHandlers();
+ },
+
+ _addTransitionClass: function(){
+ var tclass = this.options.transition;
+
+ if( tclass && tclass !== "none" ){
+ // use appropriate slide for header or footer
+ if( tclass === "slide" ){
+ tclass = this.element.is( ".ui-header" ) ? "slidedown" : "slideup";
+ }
+
+ this.element.addClass( tclass );
+ }
+ },
+
+ _bindPageEvents: function(){
+ var self = this,
+ o = self.options,
+ $el = self.element;
+
+ //page event bindings
+ // Fixed toolbars require page zoom to be disabled, otherwise usability issues crop up
+ // This method is meant to disable zoom while a fixed-positioned toolbar page is visible
+ $el.closest( ".ui-page" )
+ .bind( "pagebeforeshow", function(){
+ if( o.disablePageZoom ){
+ $.mobile.zoom.disable( true );
+ }
+ if( !o.visibleOnPageShow ){
+ self.hide( true );
+ }
+ } )
+ .bind( "webkitAnimationStart animationstart updatelayout", function(){
+ if( o.updatePagePadding ){
+ self.updatePagePadding();
+ }
+ })
+ .bind( "pageshow", function(){
+ self.updatePagePadding();
+ if( o.updatePagePadding ){
+ $( window ).bind( "throttledresize." + self.widgetName, function(){
+ self.updatePagePadding();
+ });
+ }
+ })
+ .bind( "pagebeforehide", function( e, ui ){
+ if( o.disablePageZoom ){
+ $.mobile.zoom.enable( true );
+ }
+ if( o.updatePagePadding ){
+ $( window ).unbind( "throttledresize." + self.widgetName );
+ }
+
+ if( o.trackPersistentToolbars ){
+ var thisFooter = $( ".ui-footer-fixed:jqmData(id)", this ),
+ thisHeader = $( ".ui-header-fixed:jqmData(id)", this ),
+ nextFooter = thisFooter.length && ui.nextPage && $( ".ui-footer-fixed:jqmData(id='" + thisFooter.jqmData( "id" ) + "')", ui.nextPage ),
+ nextHeader = thisHeader.length && ui.nextPage && $( ".ui-header-fixed:jqmData(id='" + thisHeader.jqmData( "id" ) + "')", ui.nextPage );
+
+ nextFooter = nextFooter || $();
+
+ if( nextFooter.length || nextHeader.length ){
+
+ nextFooter.add( nextHeader ).appendTo( $.mobile.pageContainer );
+
+ ui.nextPage.one( "pageshow", function(){
+ nextFooter.add( nextHeader ).appendTo( this );
+ });
+ }
+ }
+ });
+ },
+
+ _visible: true,
+
+ // This will set the content element's top or bottom padding equal to the toolbar's height
+ updatePagePadding: function() {
+ var $el = this.element,
+ header = $el.is( ".ui-header" );
+
+ // This behavior only applies to "fixed", not "fullscreen"
+ if( this.options.fullscreen ){ return; }
+
+ $el.closest( ".ui-page" ).css( "padding-" + ( header ? "top" : "bottom" ), $el.outerHeight() );
+ },
+
+ _useTransition: function( notransition ){
+ var $win = $( window ),
+ $el = this.element,
+ scroll = $win.scrollTop(),
+ elHeight = $el.height(),
+ pHeight = $el.closest( ".ui-page" ).height(),
+ viewportHeight = $.mobile.getScreenHeight(),
+ tbtype = $el.is( ":jqmData(role='header')" ) ? "header" : "footer";
+
+ return !notransition &&
+ ( this.options.transition && this.options.transition !== "none" &&
+ (
+ ( tbtype === "header" && !this.options.fullscreen && scroll > elHeight ) ||
+ ( tbtype === "footer" && !this.options.fullscreen && scroll + viewportHeight < pHeight - elHeight )
+ ) || this.options.fullscreen
+ );
+ },
+
+ show: function( notransition ){
+ var hideClass = "ui-fixed-hidden",
+ $el = this.element;
+
+ if( this._useTransition( notransition ) ){
+ $el
+ .removeClass( "out " + hideClass )
+ .addClass( "in" );
+ }
+ else {
+ $el.removeClass( hideClass );
+ }
+ this._visible = true;
+ },
+
+ hide: function( notransition ){
+ var hideClass = "ui-fixed-hidden",
+ $el = this.element,
+ // if it's a slide transition, our new transitions need the reverse class as well to slide outward
+ outclass = "out" + ( this.options.transition === "slide" ? " reverse" : "" );
+
+ if( this._useTransition( notransition ) ){
+ $el
+ .addClass( outclass )
+ .removeClass( "in" )
+ .animationComplete( function(){
+ $el.addClass( hideClass ).removeClass( outclass );
+ });
+ }
+ else {
+ $el.addClass( hideClass ).removeClass( outclass );
+ }
+ this._visible = false;
+ },
+
+ toggle: function(){
+ this[ this._visible ? "hide" : "show" ]();
+ },
+
+ _bindToggleHandlers: function(){
+ var self = this,
+ o = self.options,
+ $el = self.element;
+
+ // tap toggle
+ $el.closest( ".ui-page" )
+ .bind( "vclick", function( e ){
+ if( o.tapToggle && !$( e.target ).closest( o.tapToggleBlacklist ).length ){
+ self.toggle();
+ }
+ })
+ .bind( "focusin focusout", function( e ){
+ if( screen.width < 500 && $( e.target ).is( o.hideDuringFocus ) && !$( e.target ).closest( ".ui-header-fixed, .ui-footer-fixed" ).length ){
+ self[ ( e.type === "focusin" && self._visible ) ? "hide" : "show" ]();
+ }
+ });
+ },
+
+ destroy: function(){
+ this.element.removeClass( "ui-header-fixed ui-footer-fixed ui-header-fullscreen ui-footer-fullscreen in out fade slidedown slideup ui-fixed-hidden" );
+ this.element.closest( ".ui-page" ).removeClass( "ui-page-header-fixed ui-page-footer-fixed ui-page-header-fullscreen ui-page-footer-fullscreen" );
+ }
+
+ });
+
+ //auto self-init widgets
+ $( document )
+ .bind( "pagecreate create", function( e ){
+
+ // DEPRECATED in 1.1: support for data-fullscreen=true|false on the page element.
+ // This line ensures it still works, but we recommend moving the attribute to the toolbars themselves.
+ if( $( e.target ).jqmData( "fullscreen" ) ){
+ $( $.mobile.fixedtoolbar.prototype.options.initSelector, e.target ).not( ":jqmData(fullscreen)" ).jqmData( "fullscreen", true );
+ }
+
+ $.mobile.fixedtoolbar.prototype.enhanceWithin( e.target );
+ });
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Custom-styled native input/buttons
+//>>label: Buttons: Input or button-based
+//>>group: Forms
+//>>css: ../css/themes/default/jquery.mobile.theme.css,../css/structure/jquery.mobile.button.css
+
+define( [ "jquery", "./jquery.mobile.widget", "./jquery.mobile.buttonMarkup" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.button", $.mobile.widget, {
+ options: {
+ theme: null,
+ icon: null,
+ iconpos: null,
+ inline: false,
+ corners: true,
+ shadow: true,
+ iconshadow: true,
+ initSelector: "button, [type='button'], [type='submit'], [type='reset'], [type='image']",
+ mini: false
+ },
+ _create: function() {
+ var $el = this.element,
+ $button,
+ o = this.options,
+ type,
+ name,
+ classes = "",
+ $buttonPlaceholder;
+
+ // if this is a link, check if it's been enhanced and, if not, use the right function
+ if( $el[ 0 ].tagName === "A" ) {
+ !$el.hasClass( "ui-btn" ) && $el.buttonMarkup();
+ return;
+ }
+
+ // get the inherited theme
+ // TODO centralize for all widgets
+ if ( !this.options.theme ) {
+ this.options.theme = $.mobile.getInheritedTheme( this.element, "c" );
+ }
+
+ // TODO: Post 1.1--once we have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577
+ /* if( $el[0].className.length ) {
+ classes = $el[0].className;
+ } */
+ if( !!~$el[0].className.indexOf( "ui-btn-left" ) ) {
+ classes = "ui-btn-left";
+ }
+
+ if( !!~$el[0].className.indexOf( "ui-btn-right" ) ) {
+ classes = "ui-btn-right";
+ }
+
+ // Add ARIA role
+ this.button = $( "<div></div>" )
+ .text( $el.text() || $el.val() )
+ .insertBefore( $el )
+ .buttonMarkup({
+ theme: o.theme,
+ icon: o.icon,
+ iconpos: o.iconpos,
+ inline: o.inline,
+ corners: o.corners,
+ shadow: o.shadow,
+ iconshadow: o.iconshadow,
+ mini: o.mini
+ })
+ .addClass( classes )
+ .append( $el.addClass( "ui-btn-hidden" ) );
+
+ $button = this.button;
+ type = $el.attr( "type" );
+ name = $el.attr( "name" );
+
+ // Add hidden input during submit if input type="submit" has a name.
+ if ( type !== "button" && type !== "reset" && name ) {
+ $el.bind( "vclick", function() {
+ // Add hidden input if it doesn’t already exist.
+ if( $buttonPlaceholder === undefined ) {
+ $buttonPlaceholder = $( "<input>", {
+ type: "hidden",
+ name: $el.attr( "name" ),
+ value: $el.attr( "value" )
+ }).insertBefore( $el );
+
+ // Bind to doc to remove after submit handling
+ $( document ).one("submit", function(){
+ $buttonPlaceholder.remove();
+
+ // reset the local var so that the hidden input
+ // will be re-added on subsequent clicks
+ $buttonPlaceholder = undefined;
+ });
+ }
+ });
+ }
+
+ $el.bind({
+ focus: function() {
+ $button.addClass( $.mobile.focusClass );
+ },
+
+ blur: function() {
+ $button.removeClass( $.mobile.focusClass );
+ }
+ });
+
+ this.refresh();
+ },
+
+ enable: function() {
+ this.element.attr( "disabled", false );
+ this.button.removeClass( "ui-disabled" ).attr( "aria-disabled", false );
+ return this._setOption( "disabled", false );
+ },
+
+ disable: function() {
+ this.element.attr( "disabled", true );
+ this.button.addClass( "ui-disabled" ).attr( "aria-disabled", true );
+ return this._setOption( "disabled", true );
+ },
+
+ refresh: function() {
+ var $el = this.element;
+
+ if ( $el.prop("disabled") ) {
+ this.disable();
+ } else {
+ this.enable();
+ }
+
+ // Grab the button's text element from its implementation-independent data item
+ $( this.button.data( 'buttonElements' ).text ).text( $el.text() || $el.val() );
+ }
+});
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $.mobile.button.prototype.enhanceWithin( e.target, true );
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+/*
+* "checkboxradio" plugin
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Consistent styling for checkboxes/radio buttons.
+//>>label: Checkboxes & Radio Buttons
+//>>group: Forms
+//>>css: ../css/themes/default/jquery.mobile.theme.css,../css/structure/jquery.mobile.forms.checkboxradio.css
+
+define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.widget", "./jquery.mobile.buttonMarkup" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.checkboxradio", $.mobile.widget, {
+ options: {
+ theme: null,
+ initSelector: "input[type='checkbox'],input[type='radio']"
+ },
+ _create: function() {
+ var self = this,
+ input = this.element,
+ inheritAttr = function( input, dataAttr ) {
+ return input.jqmData( dataAttr ) || input.closest( "form,fieldset" ).jqmData( dataAttr )
+ },
+ // NOTE: Windows Phone could not find the label through a selector
+ // filter works though.
+ parentLabel = $( input ).closest( "label" ),
+ label = parentLabel.length ? parentLabel : $( input ).closest( "form,fieldset,:jqmData(role='page'),:jqmData(role='dialog')" ).find( "label" ).filter( "[for='" + input[0].id + "']" ),
+ inputtype = input[0].type,
+ mini = inheritAttr( input, "mini" ),
+ checkedState = inputtype + "-on",
+ uncheckedState = inputtype + "-off",
+ icon = input.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedState,
+ iconpos = inheritAttr( input, "iconpos" ),
+ activeBtn = icon ? "" : " " + $.mobile.activeBtnClass,
+ checkedClass = "ui-" + checkedState + activeBtn,
+ uncheckedClass = "ui-" + uncheckedState,
+ checkedicon = "ui-icon-" + checkedState,
+ uncheckedicon = "ui-icon-" + uncheckedState;
+
+ if ( inputtype !== "checkbox" && inputtype !== "radio" ) {
+ return;
+ }
+
+ // Expose for other methods
+ $.extend( this, {
+ label: label,
+ inputtype: inputtype,
+ checkedClass: checkedClass,
+ uncheckedClass: uncheckedClass,
+ checkedicon: checkedicon,
+ uncheckedicon: uncheckedicon
+ });
+
+ // If there's no selected theme check the data attr
+ if( !this.options.theme ) {
+ this.options.theme = $.mobile.getInheritedTheme( this.element, "c" );
+ }
+
+ label.buttonMarkup({
+ theme: this.options.theme,
+ icon: icon,
+ shadow: false,
+ mini: mini,
+ iconpos: iconpos
+ });
+
+ // Wrap the input + label in a div
+ var wrapper = document.createElement('div');
+ wrapper.className = 'ui-' + inputtype;
+
+ input.add( label ).wrapAll( wrapper );
+
+ label.bind({
+ vmouseover: function( event ) {
+ if ( $( this ).parent().is( ".ui-disabled" ) ) {
+ event.stopPropagation();
+ }
+ },
+
+ vclick: function( event ) {
+ if ( input.is( ":disabled" ) ) {
+ event.preventDefault();
+ return;
+ }
+
+ self._cacheVals();
+
+ input.prop( "checked", inputtype === "radio" && true || !input.prop( "checked" ) );
+
+ // trigger click handler's bound directly to the input as a substitute for
+ // how label clicks behave normally in the browsers
+ // TODO: it would be nice to let the browser's handle the clicks and pass them
+ // through to the associate input. we can swallow that click at the parent
+ // wrapper element level
+ input.triggerHandler( 'click' );
+
+ // Input set for common radio buttons will contain all the radio
+ // buttons, but will not for checkboxes. clearing the checked status
+ // of other radios ensures the active button state is applied properly
+ self._getInputSet().not( input ).prop( "checked", false );
+
+ self._updateAll();
+ return false;
+ }
+ });
+
+ input
+ .bind({
+ vmousedown: function() {
+ self._cacheVals();
+ },
+
+ vclick: function() {
+ var $this = $(this);
+
+ // Adds checked attribute to checked input when keyboard is used
+ if ( $this.is( ":checked" ) ) {
+
+ $this.prop( "checked", true);
+ self._getInputSet().not($this).prop( "checked", false );
+ } else {
+
+ $this.prop( "checked", false );
+ }
+
+ self._updateAll();
+ },
+
+ focus: function() {
+ label.addClass( $.mobile.focusClass );
+ },
+
+ blur: function() {
+ label.removeClass( $.mobile.focusClass );
+ }
+ });
+
+ this.refresh();
+ },
+
+ _cacheVals: function() {
+ this._getInputSet().each(function() {
+ $(this).jqmData( "cacheVal", this.checked );
+ });
+ },
+
+ //returns either a set of radios with the same name attribute, or a single checkbox
+ _getInputSet: function(){
+ if(this.inputtype === "checkbox") {
+ return this.element;
+ }
+
+ return this.element.closest( "form,fieldset,:jqmData(role='page')" )
+ .find( "input[name='"+ this.element[0].name +"'][type='"+ this.inputtype +"']" );
+ },
+
+ _updateAll: function() {
+ var self = this;
+
+ this._getInputSet().each(function() {
+ var $this = $(this);
+
+ if ( this.checked || self.inputtype === "checkbox" ) {
+ $this.trigger( "change" );
+ }
+ })
+ .checkboxradio( "refresh" );
+ },
+
+ refresh: function() {
+ var input = this.element[0],
+ label = this.label,
+ icon = label.find( ".ui-icon" );
+
+ if ( input.checked ) {
+ label.addClass( this.checkedClass ).removeClass( this.uncheckedClass );
+ icon.addClass( this.checkedicon ).removeClass( this.uncheckedicon );
+ } else {
+ label.removeClass( this.checkedClass ).addClass( this.uncheckedClass );
+ icon.removeClass( this.checkedicon ).addClass( this.uncheckedicon );
+ }
+
+ if ( input.disabled ) {
+ this.disable();
+ } else {
+ this.enable();
+ }
+ },
+
+ disable: function() {
+ this.element.prop( "disabled", true ).parent().addClass( "ui-disabled" );
+ },
+
+ enable: function() {
+ this.element.prop( "disabled", false ).parent().removeClass( "ui-disabled" );
+ }
+});
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $.mobile.checkboxradio.prototype.enhanceWithin( e.target, true );
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+/*
+* custom "selectmenu" plugin
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Extension to select menus to support menu styling, placeholder options, and multi-select features.
+//>>label: Selects: Custom menus
+//>>group: Forms
+//>>css: ../css/themes/default/jquery.mobile.theme.css, ../css/structure/jquery.mobile.forms.select.css
+
+define( [
+ "jquery",
+ "./jquery.mobile.buttonMarkup",
+ "./jquery.mobile.core",
+ "./jquery.mobile.dialog",
+ "./jquery.mobile.forms.select",
+ "./jquery.mobile.listview",
+ "./jquery.mobile.page",
+ // NOTE expects ui content in the defined page, see selector for menuPageContent definition
+ "./jquery.mobile.page.sections" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+ var extendSelect = function( widget ){
+
+ var select = widget.select,
+ selectID = widget.selectID,
+ label = widget.label,
+ thisPage = widget.select.closest( ".ui-page" ),
+ screen = $( "<div>", {"class": "ui-selectmenu-screen ui-screen-hidden"} ).appendTo( thisPage ),
+ selectOptions = widget._selectOptions(),
+ isMultiple = widget.isMultiple = widget.select[ 0 ].multiple,
+ buttonId = selectID + "-button",
+ menuId = selectID + "-menu",
+ menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' data-" +$.mobile.ns + "theme='"+ widget.options.theme +"' data-" +$.mobile.ns + "overlay-theme='"+ widget.options.overlayTheme +"'>" +
+ "<div data-" + $.mobile.ns + "role='header'>" +
+ "<div class='ui-title'>" + label.getEncodedText() + "</div>"+
+ "</div>"+
+ "<div data-" + $.mobile.ns + "role='content'></div>"+
+ "</div>" ),
+
+ listbox = $("<div>", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen),
+
+ list = $( "<ul>", {
+ "class": "ui-selectmenu-list",
+ "id": menuId,
+ "role": "listbox",
+ "aria-labelledby": buttonId
+ }).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).appendTo( listbox ),
+
+ header = $( "<div>", {
+ "class": "ui-header ui-bar-" + widget.options.theme
+ }).prependTo( listbox ),
+
+ headerTitle = $( "<h1>", {
+ "class": "ui-title"
+ }).appendTo( header ),
+
+ menuPageContent,
+ menuPageClose,
+ headerClose;
+
+ if( widget.isMultiple ) {
+ headerClose = $( "<a>", {
+ "text": widget.options.closeText,
+ "href": "#",
+ "class": "ui-btn-left"
+ }).attr( "data-" + $.mobile.ns + "iconpos", "notext" ).attr( "data-" + $.mobile.ns + "icon", "delete" ).appendTo( header ).buttonMarkup();
+ }
+
+ $.extend( widget, {
+ select: widget.select,
+ selectID: selectID,
+ buttonId: buttonId,
+ menuId: menuId,
+ thisPage: thisPage,
+ menuPage: menuPage,
+ label: label,
+ screen: screen,
+ selectOptions: selectOptions,
+ isMultiple: isMultiple,
+ theme: widget.options.theme,
+ listbox: listbox,
+ list: list,
+ header: header,
+ headerTitle: headerTitle,
+ headerClose: headerClose,
+ menuPageContent: menuPageContent,
+ menuPageClose: menuPageClose,
+ placeholder: "",
+
+ build: function() {
+ var self = this;
+
+ // Create list from select, update state
+ self.refresh();
+
+ self.select.attr( "tabindex", "-1" ).focus(function() {
+ $( this ).blur();
+ self.button.focus();
+ });
+
+ // Button events
+ self.button.bind( "vclick keydown" , function( event ) {
+ if ( event.type == "vclick" ||
+ event.keyCode && ( event.keyCode === $.mobile.keyCode.ENTER ||
+ event.keyCode === $.mobile.keyCode.SPACE ) ) {
+
+ self.open();
+ event.preventDefault();
+ }
+ });
+
+ // Events for list items
+ self.list.attr( "role", "listbox" )
+ .bind( "focusin", function( e ){
+ $( e.target )
+ .attr( "tabindex", "0" )
+ .trigger( "vmouseover" );
+
+ })
+ .bind( "focusout", function( e ){
+ $( e.target )
+ .attr( "tabindex", "-1" )
+ .trigger( "vmouseout" );
+ })
+ .delegate( "li:not(.ui-disabled, .ui-li-divider)", "click", function( event ) {
+
+ // index of option tag to be selected
+ var oldIndex = self.select[ 0 ].selectedIndex,
+ newIndex = self.list.find( "li:not(.ui-li-divider)" ).index( this ),
+ option = self._selectOptions().eq( newIndex )[ 0 ];
+
+ // toggle selected status on the tag for multi selects
+ option.selected = self.isMultiple ? !option.selected : true;
+
+ // toggle checkbox class for multiple selects
+ if ( self.isMultiple ) {
+ $( this ).find( ".ui-icon" )
+ .toggleClass( "ui-icon-checkbox-on", option.selected )
+ .toggleClass( "ui-icon-checkbox-off", !option.selected );
+ }
+
+ // trigger change if value changed
+ if ( self.isMultiple || oldIndex !== newIndex ) {
+ self.select.trigger( "change" );
+ }
+
+ //hide custom select for single selects only
+ if ( !self.isMultiple ) {
+ self.close();
+ }
+
+ event.preventDefault();
+ })
+ .keydown(function( event ) { //keyboard events for menu items
+ var target = $( event.target ),
+ li = target.closest( "li" ),
+ prev, next;
+
+ // switch logic based on which key was pressed
+ switch ( event.keyCode ) {
+ // up or left arrow keys
+ case 38:
+ prev = li.prev().not( ".ui-selectmenu-placeholder" );
+
+ if( prev.is( ".ui-li-divider" ) ) {
+ prev = prev.prev();
+ }
+
+ // if there's a previous option, focus it
+ if ( prev.length ) {
+ target
+ .blur()
+ .attr( "tabindex", "-1" );
+
+ prev.addClass( "ui-btn-down-" + widget.options.theme ).find( "a" ).first().focus();
+ }
+
+ return false;
+ break;
+
+ // down or right arrow keys
+ case 40:
+ next = li.next();
+
+ if( next.is( ".ui-li-divider" ) ) {
+ next = next.next();
+ }
+
+ // if there's a next option, focus it
+ if ( next.length ) {
+ target
+ .blur()
+ .attr( "tabindex", "-1" );
+
+ next.addClass( "ui-btn-down-" + widget.options.theme ).find( "a" ).first().focus();
+ }
+
+ return false;
+ break;
+
+ // If enter or space is pressed, trigger click
+ case 13:
+ case 32:
+ target.trigger( "click" );
+
+ return false;
+ break;
+ }
+ });
+
+ // button refocus ensures proper height calculation
+ // by removing the inline style and ensuring page inclusion
+ self.menuPage.bind( "pagehide", function() {
+ self.list.appendTo( self.listbox );
+ self._focusButton();
+
+ // TODO centralize page removal binding / handling in the page plugin.
+ // Suggestion from @jblas to do refcounting
+ //
+ // TODO extremely confusing dependency on the open method where the pagehide.remove
+ // bindings are stripped to prevent the parent page from disappearing. The way
+ // we're keeping pages in the DOM right now sucks
+ //
+ // rebind the page remove that was unbound in the open function
+ // to allow for the parent page removal from actions other than the use
+ // of a dialog sized custom select
+ //
+ // doing this here provides for the back button on the custom select dialog
+ $.mobile._bindPageRemove.call( self.thisPage );
+ });
+
+ // Events on "screen" overlay
+ self.screen.bind( "vclick", function( event ) {
+ self.close();
+ });
+
+ // Close button on small overlays
+ if( self.isMultiple ){
+ self.headerClose.click( function() {
+ if ( self.menuType == "overlay" ) {
+ self.close();
+ return false;
+ }
+ });
+ }
+
+ // track this dependency so that when the parent page
+ // is removed on pagehide it will also remove the menupage
+ self.thisPage.addDependents( this.menuPage );
+ },
+
+ _isRebuildRequired: function() {
+ var list = this.list.find( "li" ),
+ options = this._selectOptions();
+
+ // TODO exceedingly naive method to determine difference
+ // ignores value changes etc in favor of a forcedRebuild
+ // from the user in the refresh method
+ return options.text() !== list.text();
+ },
+
+ refresh: function( forceRebuild , foo ){
+ var self = this,
+ select = this.element,
+ isMultiple = this.isMultiple,
+ options = this._selectOptions(),
+ selected = this.selected(),
+ // return an array of all selected index's
+ indicies = this.selectedIndices();
+
+ if ( forceRebuild || this._isRebuildRequired() ) {
+ self._buildList();
+ }
+
+ self.setButtonText();
+ self.setButtonCount();
+
+ self.list.find( "li:not(.ui-li-divider)" )
+ .removeClass( $.mobile.activeBtnClass )
+ .attr( "aria-selected", false )
+ .each(function( i ) {
+
+ if ( $.inArray( i, indicies ) > -1 ) {
+ var item = $( this );
+
+ // Aria selected attr
+ item.attr( "aria-selected", true );
+
+ // Multiple selects: add the "on" checkbox state to the icon
+ if ( self.isMultiple ) {
+ item.find( ".ui-icon" ).removeClass( "ui-icon-checkbox-off" ).addClass( "ui-icon-checkbox-on" );
+ } else {
+ if( item.is( ".ui-selectmenu-placeholder" ) ) {
+ item.next().addClass( $.mobile.activeBtnClass );
+ } else {
+ item.addClass( $.mobile.activeBtnClass );
+ }
+ }
+ }
+ });
+ },
+
+ close: function() {
+ if ( this.options.disabled || !this.isOpen ) {
+ return;
+ }
+
+ var self = this;
+
+ if ( self.menuType == "page" ) {
+ // doesn't solve the possible issue with calling change page
+ // where the objects don't define data urls which prevents dialog key
+ // stripping - changePage has incoming refactor
+ window.history.back();
+ } else {
+ self.screen.addClass( "ui-screen-hidden" );
+ self.listbox.addClass( "ui-selectmenu-hidden" ).removeAttr( "style" ).removeClass( "in" );
+ self.list.appendTo( self.listbox );
+ self._focusButton();
+ }
+
+ // allow the dialog to be closed again
+ self.isOpen = false;
+ },
+
+ open: function() {
+ if ( this.options.disabled ) {
+ return;
+ }
+
+ var self = this,
+ $window = $( window ),
+ selfListParent = self.list.parent(),
+ menuHeight = selfListParent.outerHeight(),
+ menuWidth = selfListParent.outerWidth(),
+ activePage = $( ".ui-page-active" ),
+ tScrollElem = activePage,
+ scrollTop = $window.scrollTop(),
+ btnOffset = self.button.offset().top,
+ screenHeight = $window.height(),
+ screenWidth = $window.width();
+
+ //add active class to button
+ self.button.addClass( $.mobile.activeBtnClass );
+
+ //remove after delay
+ setTimeout( function() {
+ self.button.removeClass( $.mobile.activeBtnClass );
+ }, 300);
+
+ function focusMenuItem() {
+ self.list.find( "." + $.mobile.activeBtnClass + " a" ).focus();
+ }
+
+ if ( menuHeight > screenHeight - 80 || !$.support.scrollTop ) {
+
+ self.menuPage.appendTo( $.mobile.pageContainer ).page();
+ self.menuPageContent = menuPage.find( ".ui-content" );
+ self.menuPageClose = menuPage.find( ".ui-header a" );
+
+ // prevent the parent page from being removed from the DOM,
+ // otherwise the results of selecting a list item in the dialog
+ // fall into a black hole
+ self.thisPage.unbind( "pagehide.remove" );
+
+ //for WebOS/Opera Mini (set lastscroll using button offset)
+ if ( scrollTop == 0 && btnOffset > screenHeight ) {
+ self.thisPage.one( "pagehide", function() {
+ $( this ).jqmData( "lastScroll", btnOffset );
+ });
+ }
+
+ self.menuPage.one( "pageshow", function() {
+ focusMenuItem();
+ self.isOpen = true;
+ });
+
+ self.menuType = "page";
+ self.menuPageContent.append( self.list );
+ self.menuPage.find("div .ui-title").text(self.label.text());
+ $.mobile.changePage( self.menuPage, {
+ transition: $.mobile.defaultDialogTransition
+ });
+ } else {
+ self.menuType = "overlay";
+
+ self.screen.height( $(document).height() )
+ .removeClass( "ui-screen-hidden" );
+
+ // Try and center the overlay over the button
+ var roomtop = btnOffset - scrollTop,
+ roombot = scrollTop + screenHeight - btnOffset,
+ halfheight = menuHeight / 2,
+ maxwidth = parseFloat( self.list.parent().css( "max-width" ) ),
+ newtop, newleft;
+
+ if ( roomtop > menuHeight / 2 && roombot > menuHeight / 2 ) {
+ newtop = btnOffset + ( self.button.outerHeight() / 2 ) - halfheight;
+ } else {
+ // 30px tolerance off the edges
+ newtop = roomtop > roombot ? scrollTop + screenHeight - menuHeight - 30 : scrollTop + 30;
+ }
+
+ // If the menuwidth is smaller than the screen center is
+ if ( menuWidth < maxwidth ) {
+ newleft = ( screenWidth - menuWidth ) / 2;
+ } else {
+
+ //otherwise insure a >= 30px offset from the left
+ newleft = self.button.offset().left + self.button.outerWidth() / 2 - menuWidth / 2;
+
+ // 30px tolerance off the edges
+ if ( newleft < 30 ) {
+ newleft = 30;
+ } else if ( (newleft + menuWidth) > screenWidth ) {
+ newleft = screenWidth - menuWidth - 30;
+ }
+ }
+
+ self.listbox.append( self.list )
+ .removeClass( "ui-selectmenu-hidden" )
+ .css({
+ top: newtop,
+ left: newleft
+ })
+ .addClass( "in" );
+
+ focusMenuItem();
+
+ // duplicate with value set in page show for dialog sized selects
+ self.isOpen = true;
+ }
+ },
+
+ _buildList: function() {
+ var self = this,
+ o = this.options,
+ placeholder = this.placeholder,
+ needPlaceholder = true,
+ optgroups = [],
+ lis = [],
+ dataIcon = self.isMultiple ? "checkbox-off" : "false";
+
+ self.list.empty().filter( ".ui-listview" ).listview( "destroy" );
+
+ var $options = self.select.find("option"),
+ numOptions = $options.length,
+ select = this.select[ 0 ],
+ dataPrefix = 'data-' + $.mobile.ns,
+ dataIndexAttr = dataPrefix + 'option-index',
+ dataIconAttr = dataPrefix + 'icon',
+ dataRoleAttr = dataPrefix + 'role',
+ fragment = document.createDocumentFragment(),
+ optGroup;
+
+ for (var i = 0; i < numOptions;i++){
+ var option = $options[i],
+ $option = $(option),
+ parent = option.parentNode,
+ text = $option.text(),
+ anchor = document.createElement('a'),
+ classes = [];
+
+ anchor.setAttribute('href','#');
+ anchor.appendChild(document.createTextNode(text));
+
+ // Are we inside an optgroup?
+ if (parent !== select && parent.nodeName.toLowerCase() === "optgroup"){
+ var optLabel = parent.getAttribute('label');
+ if ( optLabel != optGroup) {
+ var divider = document.createElement('li');
+ divider.setAttribute(dataRoleAttr,'list-divider');
+ divider.setAttribute('role','option');
+ divider.setAttribute('tabindex','-1');
+ divider.appendChild(document.createTextNode(optLabel));
+ fragment.appendChild(divider);
+ optGroup = optLabel;
+ }
+ }
+
+ if (needPlaceholder && (!option.getAttribute( "value" ) || text.length == 0 || $option.jqmData( "placeholder" ))) {
+ needPlaceholder = false;
+ if ( o.hidePlaceholderMenuItems ) {
+ classes.push( "ui-selectmenu-placeholder" );
+ }
+ if (!placeholder) {
+ placeholder = self.placeholder = text;
+ }
+ }
+
+ var item = document.createElement('li');
+ if ( option.disabled ) {
+ classes.push( "ui-disabled" );
+ item.setAttribute('aria-disabled',true);
+ }
+ item.setAttribute(dataIndexAttr,i);
+ item.setAttribute(dataIconAttr,dataIcon);
+ item.className = classes.join(" ");
+ item.setAttribute('role','option');
+ anchor.setAttribute('tabindex','-1');
+ item.appendChild(anchor);
+ fragment.appendChild(item);
+ }
+
+ self.list[0].appendChild(fragment);
+
+ // Hide header if it's not a multiselect and there's no placeholder
+ if ( !this.isMultiple && !placeholder.length ) {
+ this.header.hide();
+ } else {
+ this.headerTitle.text( this.placeholder );
+ }
+
+ // Now populated, create listview
+ self.list.listview();
+ },
+
+ _button: function(){
+ return $( "<a>", {
+ "href": "#",
+ "role": "button",
+ // TODO value is undefined at creation
+ "id": this.buttonId,
+ "aria-haspopup": "true",
+
+ // TODO value is undefined at creation
+ "aria-owns": this.menuId
+ });
+ }
+ });
+ };
+
+ // issue #3894 - core doesn't triggered events on disabled delegates
+ $( document ).bind( "selectmenubeforecreate", function( event ){
+ var selectmenuWidget = $( event.target ).data( "selectmenu" );
+
+ if( !selectmenuWidget.options.nativeMenu ){
+ extendSelect( selectmenuWidget );
+ }
+ });
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Consistent styling for native select menus. Tapping opens a native select menu.
+//>>label: Selects
+//>>group: Forms
+//>>css: ../css/themes/default/jquery.mobile.theme.css, ../css/structure/jquery.mobile.forms.select.css
+
+define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.widget", "./jquery.mobile.buttonMarkup", "./jquery.mobile.zoom" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.selectmenu", $.mobile.widget, {
+ options: {
+ theme: null,
+ disabled: false,
+ icon: "arrow-d",
+ iconpos: "right",
+ inline: false,
+ corners: true,
+ shadow: true,
+ iconshadow: true,
+ overlayTheme: "a",
+ hidePlaceholderMenuItems: true,
+ closeText: "Close",
+ nativeMenu: true,
+ // This option defaults to true on iOS devices.
+ preventFocusZoom: /iPhone|iPad|iPod/.test( navigator.platform ) && navigator.userAgent.indexOf( "AppleWebKit" ) > -1,
+ initSelector: "select:not(:jqmData(role='slider'))",
+ mini: false
+ },
+
+ _button: function(){
+ return $( "<div/>" );
+ },
+
+ _setDisabled: function( value ) {
+ this.element.attr( "disabled", value );
+ this.button.attr( "aria-disabled", value );
+ return this._setOption( "disabled", value );
+ },
+
+ _focusButton : function() {
+ var self = this;
+
+ setTimeout( function() {
+ self.button.focus();
+ }, 40);
+ },
+
+ _selectOptions: function() {
+ return this.select.find( "option" );
+ },
+
+ // setup items that are generally necessary for select menu extension
+ _preExtension: function(){
+ var classes = "";
+ // TODO: Post 1.1--once we have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577
+ /* if( $el[0].className.length ) {
+ classes = $el[0].className;
+ } */
+ if( !!~this.element[0].className.indexOf( "ui-btn-left" ) ) {
+ classes = " ui-btn-left";
+ }
+
+ if( !!~this.element[0].className.indexOf( "ui-btn-right" ) ) {
+ classes = " ui-btn-right";
+ }
+
+ this.select = this.element.wrap( "<div class='ui-select" + classes + "'>" );
+ this.selectID = this.select.attr( "id" );
+ this.label = $( "label[for='"+ this.selectID +"']" ).addClass( "ui-select" );
+ this.isMultiple = this.select[ 0 ].multiple;
+ if ( !this.options.theme ) {
+ this.options.theme = $.mobile.getInheritedTheme( this.select, "c" );
+ }
+ },
+
+ _create: function() {
+ this._preExtension();
+
+ // Allows for extension of the native select for custom selects and other plugins
+ // see select.custom for example extension
+ // TODO explore plugin registration
+ this._trigger( "beforeCreate" );
+
+ this.button = this._button();
+
+ var self = this,
+
+ options = this.options,
+
+ // IE throws an exception at options.item() function when
+ // there is no selected item
+ // select first in this case
+ selectedIndex = this.select[ 0 ].selectedIndex == -1 ? 0 : this.select[ 0 ].selectedIndex,
+
+ // TODO values buttonId and menuId are undefined here
+ button = this.button
+ .text( $( this.select[ 0 ].options.item( selectedIndex ) ).text() )
+ .insertBefore( this.select )
+ .buttonMarkup( {
+ theme: options.theme,
+ icon: options.icon,
+ iconpos: options.iconpos,
+ inline: options.inline,
+ corners: options.corners,
+ shadow: options.shadow,
+ iconshadow: options.iconshadow,
+ mini: options.mini
+ });
+
+ // Opera does not properly support opacity on select elements
+ // In Mini, it hides the element, but not its text
+ // On the desktop,it seems to do the opposite
+ // for these reasons, using the nativeMenu option results in a full native select in Opera
+ if ( options.nativeMenu && window.opera && window.opera.version ) {
+ this.select.addClass( "ui-select-nativeonly" );
+ }
+
+ // Add counter for multi selects
+ if ( this.isMultiple ) {
+ this.buttonCount = $( "<span>" )
+ .addClass( "ui-li-count ui-btn-up-c ui-btn-corner-all" )
+ .hide()
+ .appendTo( button.addClass('ui-li-has-count') );
+ }
+
+ // Disable if specified
+ if ( options.disabled || this.element.attr('disabled')) {
+ this.disable();
+ }
+
+ // Events on native select
+ this.select.change( function() {
+ self.refresh();
+ });
+
+ this.build();
+ },
+
+ build: function() {
+ var self = this;
+
+ this.select
+ .appendTo( self.button )
+ .bind( "vmousedown", function() {
+ // Add active class to button
+ self.button.addClass( $.mobile.activeBtnClass );
+ })
+ .bind( "focus", function() {
+ self.button.addClass( $.mobile.focusClass );
+ })
+ .bind( "blur", function() {
+ self.button.removeClass( $.mobile.focusClass );
+ })
+ .bind( "focus vmouseover", function() {
+ self.button.trigger( "vmouseover" );
+ })
+ .bind( "vmousemove", function() {
+ // Remove active class on scroll/touchmove
+ self.button.removeClass( $.mobile.activeBtnClass );
+ })
+ .bind( "change blur vmouseout", function() {
+ self.button.trigger( "vmouseout" )
+ .removeClass( $.mobile.activeBtnClass );
+ })
+ .bind( "change blur", function() {
+ self.button.removeClass( "ui-btn-down-" + self.options.theme );
+ });
+
+ // In many situations, iOS will zoom into the select upon tap, this prevents that from happening
+ self.button.bind( "vmousedown", function() {
+ if( self.options.preventFocusZoom ){
+ $.mobile.zoom.disable( true );
+ }
+ })
+ .bind( "mouseup", function() {
+ if( self.options.preventFocusZoom ){
+ $.mobile.zoom.enable( true );
+ }
+ });
+ },
+
+ selected: function() {
+ return this._selectOptions().filter( ":selected" );
+ },
+
+ selectedIndices: function() {
+ var self = this;
+
+ return this.selected().map( function() {
+ return self._selectOptions().index( this );
+ }).get();
+ },
+
+ setButtonText: function() {
+ var self = this, selected = this.selected();
+
+ this.button.find( ".ui-btn-text" ).text( function() {
+ if ( !self.isMultiple ) {
+ return selected.text();
+ }
+
+ return selected.length ? selected.map( function() {
+ return $( this ).text();
+ }).get().join( ", " ) : self.placeholder;
+ });
+ },
+
+ setButtonCount: function() {
+ var selected = this.selected();
+
+ // multiple count inside button
+ if ( this.isMultiple ) {
+ this.buttonCount[ selected.length > 1 ? "show" : "hide" ]().text( selected.length );
+ }
+ },
+
+ refresh: function() {
+ this.setButtonText();
+ this.setButtonCount();
+ },
+
+ // open and close preserved in native selects
+ // to simplify users code when looping over selects
+ open: $.noop,
+ close: $.noop,
+
+ disable: function() {
+ this._setDisabled( true );
+ this.button.addClass( "ui-disabled" );
+ },
+
+ enable: function() {
+ this._setDisabled( false );
+ this.button.removeClass( "ui-disabled" );
+ }
+});
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $.mobile.selectmenu.prototype.enhanceWithin( e.target, true );
+});
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Slider form widget
+//>>label: Slider
+//>>group: Forms
+//>>css: ../css/themes/default/jquery.mobile.theme.css, ../css/structure/jquery.mobile.forms.slider.css
+
+define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.widget", "./jquery.mobile.forms.textinput", "./jquery.mobile.buttonMarkup" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+( function( $, undefined ) {
+
+$.widget( "mobile.slider", $.mobile.widget, {
+ options: {
+ theme: null,
+ trackTheme: null,
+ disabled: false,
+ initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')",
+ mini: false
+ },
+
+ _create: function() {
+
+ // TODO: Each of these should have comments explain what they're for
+ var self = this,
+
+ control = this.element,
+
+ parentTheme = $.mobile.getInheritedTheme( control, "c" ),
+
+ theme = this.options.theme || parentTheme,
+
+ trackTheme = this.options.trackTheme || parentTheme,
+
+ cType = control[ 0 ].nodeName.toLowerCase(),
+
+ selectClass = ( cType == "select" ) ? "ui-slider-switch" : "",
+
+ controlID = control.attr( "id" ),
+
+ labelID = controlID + "-label",
+
+ label = $( "[for='"+ controlID +"']" ).attr( "id", labelID ),
+
+ val = function() {
+ return cType == "input" ? parseFloat( control.val() ) : control[0].selectedIndex;
+ },
+
+ min = cType == "input" ? parseFloat( control.attr( "min" ) ) : 0,
+
+ max = cType == "input" ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length-1,
+
+ step = window.parseFloat( control.attr( "step" ) || 1 ),
+
+ inlineClass = ( this.options.inline || control.jqmData("inline") == true ) ? " ui-slider-inline" : "",
+
+ miniClass = ( this.options.mini || control.jqmData("mini") ) ? " ui-slider-mini" : "",
+
+
+ domHandle = document.createElement('a'),
+ handle = $( domHandle ),
+ domSlider = document.createElement('div'),
+ slider = $( domSlider ),
+
+ valuebg = control.jqmData("highlight") && cType != "select" ? (function() {
+ var bg = document.createElement('div');
+ bg.className = 'ui-slider-bg ui-btn-active ui-btn-corner-all';
+ return $( bg ).prependTo( slider );
+ })() : false,
+
+ options;
+
+ domHandle.setAttribute( 'href', "#" );
+ domSlider.setAttribute('role','application');
+ domSlider.className = ['ui-slider ',selectClass," ui-btn-down-",trackTheme,' ui-btn-corner-all', inlineClass, miniClass].join("");
+ domHandle.className = 'ui-slider-handle';
+ domSlider.appendChild(domHandle);
+
+ handle.buttonMarkup({ corners: true, theme: theme, shadow: true })
+ .attr({
+ "role": "slider",
+ "aria-valuemin": min,
+ "aria-valuemax": max,
+ "aria-valuenow": val(),
+ "aria-valuetext": val(),
+ "title": val(),
+ "aria-labelledby": labelID
+ });
+
+ $.extend( this, {
+ slider: slider,
+ handle: handle,
+ valuebg: valuebg,
+ dragging: false,
+ beforeStart: null,
+ userModified: false,
+ mouseMoved: false
+ });
+
+ if ( cType == "select" ) {
+ var wrapper = document.createElement('div');
+ wrapper.className = 'ui-slider-inneroffset';
+
+ for(var j = 0,length = domSlider.childNodes.length;j < length;j++){
+ wrapper.appendChild(domSlider.childNodes[j]);
+ }
+
+ domSlider.appendChild(wrapper);
+
+ // slider.wrapInner( "<div class='ui-slider-inneroffset'></div>" );
+
+ // make the handle move with a smooth transition
+ handle.addClass( "ui-slider-handle-snapping" );
+
+ options = control.find( "option" );
+
+ for(var i = 0, optionsCount = options.length; i < optionsCount; i++){
+ var side = !i ? "b":"a",
+ sliderTheme = !i ? " ui-btn-down-" + trackTheme :( " " + $.mobile.activeBtnClass ),
+ sliderLabel = document.createElement('div'),
+ sliderImg = document.createElement('span');
+
+ sliderImg.className = ['ui-slider-label ui-slider-label-',side,sliderTheme," ui-btn-corner-all"].join("");
+ sliderImg.setAttribute('role','img');
+ sliderImg.appendChild(document.createTextNode(options[i].innerHTML));
+ $(sliderImg).prependTo( slider );
+ }
+
+ self._labels = $( ".ui-slider-label", slider );
+
+ }
+
+ label.addClass( "ui-slider" );
+
+ // monitor the input for updated values
+ control.addClass( cType === "input" ? "ui-slider-input" : "ui-slider-switch" )
+ .change( function() {
+ // if the user dragged the handle, the "change" event was triggered from inside refresh(); don't call refresh() again
+ if (!self.mouseMoved) {
+ self.refresh( val(), true );
+ }
+ })
+ .keyup( function() { // necessary?
+ self.refresh( val(), true, true );
+ })
+ .blur( function() {
+ self.refresh( val(), true );
+ });
+
+ // prevent screen drag when slider activated
+ $( document ).bind( "vmousemove", function( event ) {
+ if ( self.dragging ) {
+ // self.mouseMoved must be updated before refresh() because it will be used in the control "change" event
+ self.mouseMoved = true;
+
+ if ( cType === "select" ) {
+ // make the handle move in sync with the mouse
+ handle.removeClass( "ui-slider-handle-snapping" );
+ }
+
+ self.refresh( event );
+
+ // only after refresh() you can calculate self.userModified
+ self.userModified = self.beforeStart !== control[0].selectedIndex;
+ return false;
+ }
+ });
+
+ slider.bind( "vmousedown", function( event ) {
+ self.dragging = true;
+ self.userModified = false;
+ self.mouseMoved = false;
+
+ if ( cType === "select" ) {
+ self.beforeStart = control[0].selectedIndex;
+ }
+
+ self.refresh( event );
+ return false;
+ })
+ .bind( "vclick", false );
+
+ slider.add( document )
+ .bind( "vmouseup", function() {
+ if ( self.dragging ) {
+
+ self.dragging = false;
+
+ if ( cType === "select") {
+
+ // make the handle move with a smooth transition
+ handle.addClass( "ui-slider-handle-snapping" );
+
+ if ( self.mouseMoved ) {
+
+ // this is a drag, change the value only if user dragged enough
+ if ( self.userModified ) {
+ self.refresh( self.beforeStart == 0 ? 1 : 0 );
+ }
+ else {
+ self.refresh( self.beforeStart );
+ }
+
+ }
+ else {
+ // this is just a click, change the value
+ self.refresh( self.beforeStart == 0 ? 1 : 0 );
+ }
+
+ }
+
+ self.mouseMoved = false;
+
+ return false;
+ }
+ });
+
+ slider.insertAfter( control );
+
+ // Only add focus class to toggle switch, sliders get it automatically from ui-btn
+ if( cType == 'select' ) {
+ this.handle.bind({
+ focus: function() {
+ slider.addClass( $.mobile.focusClass );
+ },
+
+ blur: function() {
+ slider.removeClass( $.mobile.focusClass );
+ }
+ });
+ }
+
+ this.handle.bind({
+ // NOTE force focus on handle
+ vmousedown: function() {
+ $( this ).focus();
+ },
+
+ vclick: false,
+
+ keydown: function( event ) {
+ var index = val();
+
+ if ( self.options.disabled ) {
+ return;
+ }
+
+ // In all cases prevent the default and mark the handle as active
+ switch ( event.keyCode ) {
+ case $.mobile.keyCode.HOME:
+ case $.mobile.keyCode.END:
+ case $.mobile.keyCode.PAGE_UP:
+ case $.mobile.keyCode.PAGE_DOWN:
+ case $.mobile.keyCode.UP:
+ case $.mobile.keyCode.RIGHT:
+ case $.mobile.keyCode.DOWN:
+ case $.mobile.keyCode.LEFT:
+ event.preventDefault();
+
+ if ( !self._keySliding ) {
+ self._keySliding = true;
+ $( this ).addClass( "ui-state-active" );
+ }
+ break;
+ }
+
+ // move the slider according to the keypress
+ switch ( event.keyCode ) {
+ case $.mobile.keyCode.HOME:
+ self.refresh( min );
+ break;
+ case $.mobile.keyCode.END:
+ self.refresh( max );
+ break;
+ case $.mobile.keyCode.PAGE_UP:
+ case $.mobile.keyCode.UP:
+ case $.mobile.keyCode.RIGHT:
+ self.refresh( index + step );
+ break;
+ case $.mobile.keyCode.PAGE_DOWN:
+ case $.mobile.keyCode.DOWN:
+ case $.mobile.keyCode.LEFT:
+ self.refresh( index - step );
+ break;
+ }
+ }, // remove active mark
+
+ keyup: function( event ) {
+ if ( self._keySliding ) {
+ self._keySliding = false;
+ $( this ).removeClass( "ui-state-active" );
+ }
+ }
+ });
+
+ this.refresh(undefined, undefined, true);
+ },
+
+ refresh: function( val, isfromControl, preventInputUpdate ) {
+
+ if ( this.options.disabled || this.element.attr('disabled')) {
+ this.disable();
+ }
+
+ var control = this.element, percent,
+ cType = control[0].nodeName.toLowerCase(),
+ min = cType === "input" ? parseFloat( control.attr( "min" ) ) : 0,
+ max = cType === "input" ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length - 1,
+ step = (cType === "input" && parseFloat( control.attr( "step" ) ) > 0) ? parseFloat(control.attr("step")) : 1;
+
+ if ( typeof val === "object" ) {
+ var data = val,
+ // a slight tolerance helped get to the ends of the slider
+ tol = 8;
+ if ( !this.dragging ||
+ data.pageX < this.slider.offset().left - tol ||
+ data.pageX > this.slider.offset().left + this.slider.width() + tol ) {
+ return;
+ }
+ percent = Math.round( ( ( data.pageX - this.slider.offset().left ) / this.slider.width() ) * 100 );
+ } else {
+ if ( val == null ) {
+ val = cType === "input" ? parseFloat( control.val() || 0 ) : control[0].selectedIndex;
+ }
+ percent = ( parseFloat( val ) - min ) / ( max - min ) * 100;
+ }
+
+ if ( isNaN( percent ) ) {
+ return;
+ }
+
+ if ( percent < 0 ) {
+ percent = 0;
+ }
+
+ if ( percent > 100 ) {
+ percent = 100;
+ }
+
+ var newval = ( percent / 100 ) * ( max - min ) + min;
+
+ //from jQuery UI slider, the following source will round to the nearest step
+ var valModStep = ( newval - min ) % step;
+ var alignValue = newval - valModStep;
+
+ if ( Math.abs( valModStep ) * 2 >= step ) {
+ alignValue += ( valModStep > 0 ) ? step : ( -step );
+ }
+ // Since JavaScript has problems with large floats, round
+ // the final value to 5 digits after the decimal point (see jQueryUI: #4124)
+ newval = parseFloat( alignValue.toFixed(5) );
+
+ if ( newval < min ) {
+ newval = min;
+ }
+
+ if ( newval > max ) {
+ newval = max;
+ }
+
+ this.handle.css( "left", percent + "%" );
+ this.handle.attr( {
+ "aria-valuenow": cType === "input" ? newval : control.find( "option" ).eq( newval ).attr( "value" ),
+ "aria-valuetext": cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText(),
+ title: cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText()
+ });
+ this.valuebg && this.valuebg.css( "width", percent + "%" );
+
+ // drag the label widths
+ if ( this._labels ) {
+ var handlePercent = this.handle.width() / this.slider.width() * 100,
+ aPercent = percent && handlePercent + ( 100 - handlePercent ) * percent / 100,
+ bPercent = percent === 100 ? 0 : Math.min( handlePercent + 100 - aPercent, 100 );
+
+ this._labels.each(function(){
+ var ab = $(this).is( ".ui-slider-label-a" );
+ $( this ).width( ( ab ? aPercent : bPercent ) + "%" );
+ });
+ }
+
+ if ( !preventInputUpdate ) {
+ var valueChanged = false;
+
+ // update control"s value
+ if ( cType === "input" ) {
+ valueChanged = control.val() !== newval;
+ control.val( newval );
+ } else {
+ valueChanged = control[ 0 ].selectedIndex !== newval;
+ control[ 0 ].selectedIndex = newval;
+ }
+ if ( !isfromControl && valueChanged ) {
+ control.trigger( "change" );
+ }
+ }
+ },
+
+ enable: function() {
+ this.element.attr( "disabled", false );
+ this.slider.removeClass( "ui-disabled" ).attr( "aria-disabled", false );
+ return this._setOption( "disabled", false );
+ },
+
+ disable: function() {
+ this.element.attr( "disabled", true );
+ this.slider.addClass( "ui-disabled" ).attr( "aria-disabled", true );
+ return this._setOption( "disabled", true );
+ }
+
+});
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $.mobile.slider.prototype.enhanceWithin( e.target, true );
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Enhances and consistently styles text inputs.
+//>>label: Text Inputs & Textareas
+//>>group: Forms
+//>>css: ../css/themes/default/jquery.mobile.theme.css, ../css/structure/jquery.mobile.forms.textinput.css
+
+define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.widget", "./jquery.mobile.degradeInputs", "./jquery.mobile.buttonMarkup", "./jquery.mobile.zoom" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.textinput", $.mobile.widget, {
+ options: {
+ theme: null,
+ // This option defaults to true on iOS devices.
+ preventFocusZoom: /iPhone|iPad|iPod/.test( navigator.platform ) && navigator.userAgent.indexOf( "AppleWebKit" ) > -1,
+ initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type])",
+ clearSearchButtonText: "clear text"
+ },
+
+ _create: function() {
+
+ var input = this.element,
+ o = this.options,
+ theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ),
+ themeclass = " ui-body-" + theme,
+ mini = input.jqmData("mini") == true,
+ miniclass = mini ? " ui-mini" : "",
+ focusedEl, clearbtn;
+
+ $( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
+
+ focusedEl = input.addClass("ui-input-text ui-body-"+ theme );
+
+ // XXX: Temporary workaround for issue 785 (Apple bug 8910589).
+ // Turn off autocorrect and autocomplete on non-iOS 5 devices
+ // since the popup they use can't be dismissed by the user. Note
+ // that we test for the presence of the feature by looking for
+ // the autocorrect property on the input element. We currently
+ // have no test for iOS 5 or newer so we're temporarily using
+ // the touchOverflow support flag for jQM 1.0. Yes, I feel dirty. - jblas
+ if ( typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow ) {
+ // Set the attribute instead of the property just in case there
+ // is code that attempts to make modifications via HTML.
+ input[0].setAttribute( "autocorrect", "off" );
+ input[0].setAttribute( "autocomplete", "off" );
+ }
+
+
+ //"search" input widget
+ if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
+
+ focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + miniclass + "'></div>" ).parent();
+ clearbtn = $( "<a href='#' class='ui-input-clear' title='" + o.clearSearchButtonText + "'>" + o.clearSearchButtonText + "</a>" )
+ .bind('click', function( event ) {
+ input
+ .val( "" )
+ .focus()
+ .trigger( "change" );
+ clearbtn.addClass( "ui-input-clear-hidden" );
+ event.preventDefault();
+ })
+ .appendTo( focusedEl )
+ .buttonMarkup({
+ icon: "delete",
+ iconpos: "notext",
+ corners: true,
+ shadow: true,
+ mini: mini
+ });
+
+ function toggleClear() {
+ setTimeout(function() {
+ clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
+ }, 0);
+ }
+
+ toggleClear();
+
+ input.bind('paste cut keyup focus change blur', toggleClear);
+
+ } else {
+ input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass );
+ }
+
+ input.focus(function() {
+ focusedEl.addClass( $.mobile.focusClass );
+ })
+ .blur(function(){
+ focusedEl.removeClass( $.mobile.focusClass );
+ })
+ // In many situations, iOS will zoom into the select upon tap, this prevents that from happening
+ .bind( "focus", function() {
+ if( o.preventFocusZoom ){
+ $.mobile.zoom.disable( true );
+ }
+ })
+ .bind( "blur", function() {
+ if( o.preventFocusZoom ){
+ $.mobile.zoom.enable( true );
+ }
+ });
+
+ // Autogrow
+ if ( input.is( "textarea" ) ) {
+ var extraLineHeight = 15,
+ keyupTimeoutBuffer = 100,
+ keyup = function() {
+ var scrollHeight = input[ 0 ].scrollHeight,
+ clientHeight = input[ 0 ].clientHeight;
+
+ if ( clientHeight < scrollHeight ) {
+ input.height(scrollHeight + extraLineHeight);
+ }
+ },
+ keyupTimeout;
+
+ input.keyup(function() {
+ clearTimeout( keyupTimeout );
+ keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
+ });
+
+ // binding to pagechange here ensures that for pages loaded via
+ // ajax the height is recalculated without user input
+ $( document ).one( "pagechange", keyup );
+
+ // Issue 509: the browser is not providing scrollHeight properly until the styles load
+ if ( $.trim( input.val() ) ) {
+ // bind to the window load to make sure the height is calculated based on BOTH
+ // the DOM and CSS
+ $( window ).load( keyup );
+ }
+ }
+ },
+
+ disable: function(){
+ ( this.element.attr( "disabled", true ).is( "[type='search'],:jqmData(type='search')" ) ?
+ this.element.parent() : this.element ).addClass( "ui-disabled" );
+ },
+
+ enable: function(){
+ ( this.element.attr( "disabled", false).is( "[type='search'],:jqmData(type='search')" ) ?
+ this.element.parent() : this.element ).removeClass( "ui-disabled" );
+ }
+});
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $.mobile.textinput.prototype.enhanceWithin( e.target, true );
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Applies classes for creating grid or column styling.
+//>>label: Grid Layouts (Columns)
+//>>group: Widgets
+//>>css: ../css/themes/default/jquery.mobile.theme.css, ../css/structure/jquery.mobile.grid.css
+
+define( [ "jquery" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.fn.grid = function( options ) {
+ return this.each(function() {
+
+ var $this = $( this ),
+ o = $.extend({
+ grid: null
+ },options),
+ $kids = $this.children(),
+ gridCols = {solo:1, a:2, b:3, c:4, d:5},
+ grid = o.grid,
+ iterator;
+
+ if ( !grid ) {
+ if ( $kids.length <= 5 ) {
+ for ( var letter in gridCols ) {
+ if ( gridCols[ letter ] === $kids.length ) {
+ grid = letter;
+ }
+ }
+ } else {
+ grid = "a";
+ }
+ }
+ iterator = gridCols[grid];
+
+ $this.addClass( "ui-grid-" + grid );
+
+ $kids.filter( ":nth-child(" + iterator + "n+1)" ).addClass( "ui-block-a" );
+
+ if ( iterator > 1 ) {
+ $kids.filter( ":nth-child(" + iterator + "n+2)" ).addClass( "ui-block-b" );
+ }
+ if ( iterator > 2 ) {
+ $kids.filter( ":nth-child(3n+3)" ).addClass( "ui-block-c" );
+ }
+ if ( iterator > 3 ) {
+ $kids.filter( ":nth-child(4n+4)" ).addClass( "ui-block-d" );
+ }
+ if ( iterator > 4 ) {
+ $kids.filter( ":nth-child(5n+5)" ).addClass( "ui-block-e" );
+ }
+ });
+};
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Hashchange event management for AJAX navigation system
+//>>label: Hashchange
+//>>group: Navigation
+//>>excludeEnd("jqmBuildExclude");
+
+
+// Script: jQuery hashchange event
+//
+// *Version: 1.3, Last updated: 7/21/2010*
+//
+// Project Home - http://benalman.com/projects/jquery-hashchange-plugin/
+// GitHub - http://github.com/cowboy/jquery-hashchange/
+// Source - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js
+// (Minified) - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.min.js (0.8kb gzipped)
+//
+// About: License
+//
+// Copyright (c) 2010 "Cowboy" Ben Alman,
+// Dual licensed under the MIT and GPL licenses.
+// http://benalman.com/about/license/
+//
+// About: Examples
+//
+// These working examples, complete with fully commented code, illustrate a few
+// ways in which this plugin can be used.
+//
+// hashchange event - http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
+// document.domain - http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/
+//
+// About: Support and Testing
+//
+// Information about what version or versions of jQuery this plugin has been
+// tested with, what browsers it has been tested in, and where the unit tests
+// reside (so you can test it yourself).
+//
+// jQuery Versions - 1.2.6, 1.3.2, 1.4.1, 1.4.2
+// Browsers Tested - Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5,
+// Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
+// Unit Tests - http://benalman.com/code/projects/jquery-hashchange/unit/
+//
+// About: Known issues
+//
+// While this jQuery hashchange event implementation is quite stable and
+// robust, there are a few unfortunate browser bugs surrounding expected
+// hashchange event-based behaviors, independent of any JavaScript
+// window.onhashchange abstraction. See the following examples for more
+// information:
+//
+// Chrome: Back Button - http://benalman.com/code/projects/jquery-hashchange/examples/bug-chrome-back-button/
+// Firefox: Remote XMLHttpRequest - http://benalman.com/code/projects/jquery-hashchange/examples/bug-firefox-remote-xhr/
+// WebKit: Back Button in an Iframe - http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/
+// Safari: Back Button from a different domain - http://benalman.com/code/projects/jquery-hashchange/examples/bug-safari-back-from-diff-domain/
+//
+// Also note that should a browser natively support the window.onhashchange
+// event, but not report that it does, the fallback polling loop will be used.
+//
+// About: Release History
+//
+// 1.3 - (7/21/2010) Reorganized IE6/7 Iframe code to make it more
+// "removable" for mobile-only development. Added IE6/7 document.title
+// support. Attempted to make Iframe as hidden as possible by using
+// techniques from http://www.paciellogroup.com/blog/?p=604. Added
+// support for the "shortcut" format $(window).hashchange( fn ) and
+// $(window).hashchange() like jQuery provides for built-in events.
+// Renamed jQuery.hashchangeDelay to <jQuery.fn.hashchange.delay> and
+// lowered its default value to 50. Added <jQuery.fn.hashchange.domain>
+// and <jQuery.fn.hashchange.src> properties plus document-domain.html
+// file to address access denied issues when setting document.domain in
+// IE6/7.
+// 1.2 - (2/11/2010) Fixed a bug where coming back to a page using this plugin
+// from a page on another domain would cause an error in Safari 4. Also,
+// IE6/7 Iframe is now inserted after the body (this actually works),
+// which prevents the page from scrolling when the event is first bound.
+// Event can also now be bound before DOM ready, but it won't be usable
+// before then in IE6/7.
+// 1.1 - (1/21/2010) Incorporated document.documentMode test to fix IE8 bug
+// where browser version is incorrectly reported as 8.0, despite
+// inclusion of the X-UA-Compatible IE=EmulateIE7 meta tag.
+// 1.0 - (1/9/2010) Initial Release. Broke out the jQuery BBQ event.special
+// window.onhashchange functionality into a separate plugin for users
+// who want just the basic event & back button support, without all the
+// extra awesomeness that BBQ provides. This plugin will be included as
+// part of jQuery BBQ, but also be available separately.
+
+(function($,window,undefined){
+ // Reused string.
+ var str_hashchange = 'hashchange',
+
+ // Method / object references.
+ doc = document,
+ fake_onhashchange,
+ special = $.event.special,
+
+ // Does the browser support window.onhashchange? Note that IE8 running in
+ // IE7 compatibility mode reports true for 'onhashchange' in window, even
+ // though the event isn't supported, so also test document.documentMode.
+ doc_mode = doc.documentMode,
+ supports_onhashchange = 'on' + str_hashchange in window && ( doc_mode === undefined || doc_mode > 7 );
+
+ // Get location.hash (or what you'd expect location.hash to be) sans any
+ // leading #. Thanks for making this necessary, Firefox!
+ function get_fragment( url ) {
+ url = url || location.href;
+ return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
+ };
+
+ // Method: jQuery.fn.hashchange
+ //
+ // Bind a handler to the window.onhashchange event or trigger all bound
+ // window.onhashchange event handlers. This behavior is consistent with
+ // jQuery's built-in event handlers.
+ //
+ // Usage:
+ //
+ // > jQuery(window).hashchange( [ handler ] );
+ //
+ // Arguments:
+ //
+ // handler - (Function) Optional handler to be bound to the hashchange
+ // event. This is a "shortcut" for the more verbose form:
+ // jQuery(window).bind( 'hashchange', handler ). If handler is omitted,
+ // all bound window.onhashchange event handlers will be triggered. This
+ // is a shortcut for the more verbose
+ // jQuery(window).trigger( 'hashchange' ). These forms are described in
+ // the <hashchange event> section.
+ //
+ // Returns:
+ //
+ // (jQuery) The initial jQuery collection of elements.
+
+ // Allow the "shortcut" format $(elem).hashchange( fn ) for binding and
+ // $(elem).hashchange() for triggering, like jQuery does for built-in events.
+ $.fn[ str_hashchange ] = function( fn ) {
+ return fn ? this.bind( str_hashchange, fn ) : this.trigger( str_hashchange );
+ };
+
+ // Property: jQuery.fn.hashchange.delay
+ //
+ // The numeric interval (in milliseconds) at which the <hashchange event>
+ // polling loop executes. Defaults to 50.
+
+ // Property: jQuery.fn.hashchange.domain
+ //
+ // If you're setting document.domain in your JavaScript, and you want hash
+ // history to work in IE6/7, not only must this property be set, but you must
+ // also set document.domain BEFORE jQuery is loaded into the page. This
+ // property is only applicable if you are supporting IE6/7 (or IE8 operating
+ // in "IE7 compatibility" mode).
+ //
+ // In addition, the <jQuery.fn.hashchange.src> property must be set to the
+ // path of the included "document-domain.html" file, which can be renamed or
+ // modified if necessary (note that the document.domain specified must be the
+ // same in both your main JavaScript as well as in this file).
+ //
+ // Usage:
+ //
+ // jQuery.fn.hashchange.domain = document.domain;
+
+ // Property: jQuery.fn.hashchange.src
+ //
+ // If, for some reason, you need to specify an Iframe src file (for example,
+ // when setting document.domain as in <jQuery.fn.hashchange.domain>), you can
+ // do so using this property. Note that when using this property, history
+ // won't be recorded in IE6/7 until the Iframe src file loads. This property
+ // is only applicable if you are supporting IE6/7 (or IE8 operating in "IE7
+ // compatibility" mode).
+ //
+ // Usage:
+ //
+ // jQuery.fn.hashchange.src = 'path/to/file.html';
+
+ $.fn[ str_hashchange ].delay = 50;
+ /*
+ $.fn[ str_hashchange ].domain = null;
+ $.fn[ str_hashchange ].src = null;
+ */
+
+ // Event: hashchange event
+ //
+ // Fired when location.hash changes. In browsers that support it, the native
+ // HTML5 window.onhashchange event is used, otherwise a polling loop is
+ // initialized, running every <jQuery.fn.hashchange.delay> milliseconds to
+ // see if the hash has changed. In IE6/7 (and IE8 operating in "IE7
+ // compatibility" mode), a hidden Iframe is created to allow the back button
+ // and hash-based history to work.
+ //
+ // Usage as described in <jQuery.fn.hashchange>:
+ //
+ // > // Bind an event handler.
+ // > jQuery(window).hashchange( function(e) {
+ // > var hash = location.hash;
+ // > ...
+ // > });
+ // >
+ // > // Manually trigger the event handler.
+ // > jQuery(window).hashchange();
+ //
+ // A more verbose usage that allows for event namespacing:
+ //
+ // > // Bind an event handler.
+ // > jQuery(window).bind( 'hashchange', function(e) {
+ // > var hash = location.hash;
+ // > ...
+ // > });
+ // >
+ // > // Manually trigger the event handler.
+ // > jQuery(window).trigger( 'hashchange' );
+ //
+ // Additional Notes:
+ //
+ // * The polling loop and Iframe are not created until at least one handler
+ // is actually bound to the 'hashchange' event.
+ // * If you need the bound handler(s) to execute immediately, in cases where
+ // a location.hash exists on page load, via bookmark or page refresh for
+ // example, use jQuery(window).hashchange() or the more verbose
+ // jQuery(window).trigger( 'hashchange' ).
+ // * The event can be bound before DOM ready, but since it won't be usable
+ // before then in IE6/7 (due to the necessary Iframe), recommended usage is
+ // to bind it inside a DOM ready handler.
+
+ // Override existing $.event.special.hashchange methods (allowing this plugin
+ // to be defined after jQuery BBQ in BBQ's source code).
+ special[ str_hashchange ] = $.extend( special[ str_hashchange ], {
+
+ // Called only when the first 'hashchange' event is bound to window.
+ setup: function() {
+ // If window.onhashchange is supported natively, there's nothing to do..
+ if ( supports_onhashchange ) { return false; }
+
+ // Otherwise, we need to create our own. And we don't want to call this
+ // until the user binds to the event, just in case they never do, since it
+ // will create a polling loop and possibly even a hidden Iframe.
+ $( fake_onhashchange.start );
+ },
+
+ // Called only when the last 'hashchange' event is unbound from window.
+ teardown: function() {
+ // If window.onhashchange is supported natively, there's nothing to do..
+ if ( supports_onhashchange ) { return false; }
+
+ // Otherwise, we need to stop ours (if possible).
+ $( fake_onhashchange.stop );
+ }
+
+ });
+
+ // fake_onhashchange does all the work of triggering the window.onhashchange
+ // event for browsers that don't natively support it, including creating a
+ // polling loop to watch for hash changes and in IE 6/7 creating a hidden
+ // Iframe to enable back and forward.
+ fake_onhashchange = (function(){
+ var self = {},
+ timeout_id,
+
+ // Remember the initial hash so it doesn't get triggered immediately.
+ last_hash = get_fragment(),
+
+ fn_retval = function(val){ return val; },
+ history_set = fn_retval,
+ history_get = fn_retval;
+
+ // Start the polling loop.
+ self.start = function() {
+ timeout_id || poll();
+ };
+
+ // Stop the polling loop.
+ self.stop = function() {
+ timeout_id && clearTimeout( timeout_id );
+ timeout_id = undefined;
+ };
+
+ // This polling loop checks every $.fn.hashchange.delay milliseconds to see
+ // if location.hash has changed, and triggers the 'hashchange' event on
+ // window when necessary.
+ function poll() {
+ var hash = get_fragment(),
+ history_hash = history_get( last_hash );
+
+ if ( hash !== last_hash ) {
+ history_set( last_hash = hash, history_hash );
+
+ $(window).trigger( str_hashchange );
+
+ } else if ( history_hash !== last_hash ) {
+ location.href = location.href.replace( /#.*/, '' ) + history_hash;
+ }
+
+ timeout_id = setTimeout( poll, $.fn[ str_hashchange ].delay );
+ };
+
+ // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
+ // vvvvvvvvvvvvvvvvvvv REMOVE IF NOT SUPPORTING IE6/7/8 vvvvvvvvvvvvvvvvvvv
+ // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
+ $.browser.msie && !supports_onhashchange && (function(){
+ // Not only do IE6/7 need the "magical" Iframe treatment, but so does IE8
+ // when running in "IE7 compatibility" mode.
+
+ var iframe,
+ iframe_src;
+
+ // When the event is bound and polling starts in IE 6/7, create a hidden
+ // Iframe for history handling.
+ self.start = function(){
+ if ( !iframe ) {
+ iframe_src = $.fn[ str_hashchange ].src;
+ iframe_src = iframe_src && iframe_src + get_fragment();
+
+ // Create hidden Iframe. Attempt to make Iframe as hidden as possible
+ // by using techniques from http://www.paciellogroup.com/blog/?p=604.
+ iframe = $('<iframe tabindex="-1" title="empty"/>').hide()
+
+ // When Iframe has completely loaded, initialize the history and
+ // start polling.
+ .one( 'load', function(){
+ iframe_src || history_set( get_fragment() );
+ poll();
+ })
+
+ // Load Iframe src if specified, otherwise nothing.
+ .attr( 'src', iframe_src || 'javascript:0' )
+
+ // Append Iframe after the end of the body to prevent unnecessary
+ // initial page scrolling (yes, this works).
+ .insertAfter( 'body' )[0].contentWindow;
+
+ // Whenever `document.title` changes, update the Iframe's title to
+ // prettify the back/next history menu entries. Since IE sometimes
+ // errors with "Unspecified error" the very first time this is set
+ // (yes, very useful) wrap this with a try/catch block.
+ doc.onpropertychange = function(){
+ try {
+ if ( event.propertyName === 'title' ) {
+ iframe.document.title = doc.title;
+ }
+ } catch(e) {}
+ };
+
+ }
+ };
+
+ // Override the "stop" method since an IE6/7 Iframe was created. Even
+ // if there are no longer any bound event handlers, the polling loop
+ // is still necessary for back/next to work at all!
+ self.stop = fn_retval;
+
+ // Get history by looking at the hidden Iframe's location.hash.
+ history_get = function() {
+ return get_fragment( iframe.location.href );
+ };
+
+ // Set a new history item by opening and then closing the Iframe
+ // document, *then* setting its location.hash. If document.domain has
+ // been set, update that as well.
+ history_set = function( hash, history_hash ) {
+ var iframe_doc = iframe.document,
+ domain = $.fn[ str_hashchange ].domain;
+
+ if ( hash !== history_hash ) {
+ // Update Iframe with any initial `document.title` that might be set.
+ iframe_doc.title = doc.title;
+
+ // Opening the Iframe's document after it has been closed is what
+ // actually adds a history entry.
+ iframe_doc.open();
+
+ // Set document.domain for the Iframe document as well, if necessary.
+ domain && iframe_doc.write( '<script>document.domain="' + domain + '"</script>' );
+
+ iframe_doc.close();
+
+ // Update the Iframe's hash, for great justice.
+ iframe.location.hash = hash;
+ }
+ };
+
+ })();
+ // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ // ^^^^^^^^^^^^^^^^^^^ REMOVE IF NOT SUPPORTING IE6/7/8 ^^^^^^^^^^^^^^^^^^^
+ // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+ return self;
+ })();
+
+})(jQuery,this);
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Global initialization of the library.
+//>>label: Init
+//>>group: Core
+
+
+define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery.mobile.navigation",
+ "./jquery.mobile.navigation.pushstate", "../external/requirejs/depend!./jquery.mobile.hashchange[jquery]" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+( function( $, window, undefined ) {
+ var $html = $( "html" ),
+ $head = $( "head" ),
+ $window = $( window );
+
+ // trigger mobileinit event - useful hook for configuring $.mobile settings before they're used
+ $( window.document ).trigger( "mobileinit" );
+
+ // support conditions
+ // if device support condition(s) aren't met, leave things as they are -> a basic, usable experience,
+ // otherwise, proceed with the enhancements
+ if ( !$.mobile.gradeA() ) {
+ return;
+ }
+
+ // override ajaxEnabled on platforms that have known conflicts with hash history updates
+ // or generally work better browsing in regular http for full page refreshes (BB5, Opera Mini)
+ if ( $.mobile.ajaxBlacklist ) {
+ $.mobile.ajaxEnabled = false;
+ }
+
+ // Add mobile, initial load "rendering" classes to docEl
+ $html.addClass( "ui-mobile ui-mobile-rendering" );
+
+ // This is a fallback. If anything goes wrong (JS errors, etc), or events don't fire,
+ // this ensures the rendering class is removed after 5 seconds, so content is visible and accessible
+ setTimeout( hideRenderingClass, 5000 );
+
+ // loading div which appears during Ajax requests
+ // will not appear if $.mobile.loadingMessage is false
+ var loaderClass = "ui-loader",
+ $loader = $( "<div class='" + loaderClass + "'><span class='ui-icon ui-icon-loading'></span><h1></h1></div>" );
+
+ // For non-fixed supportin browsers. Position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
+ function fakeFixLoader(){
+ var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
+
+ $loader
+ .css({
+ top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
+ activeBtn.length && activeBtn.offset().top || 100
+ });
+ }
+
+ // check position of loader to see if it appears to be "fixed" to center
+ // if not, use abs positioning
+ function checkLoaderPosition(){
+ var offset = $loader.offset(),
+ scrollTop = $window.scrollTop(),
+ screenHeight = $.mobile.getScreenHeight();
+
+ if( offset.top < scrollTop || (offset.top - scrollTop) > screenHeight ) {
+ $loader.addClass( "ui-loader-fakefix" );
+ fakeFixLoader();
+ $window
+ .unbind( "scroll", checkLoaderPosition )
+ .bind( "scroll", fakeFixLoader );
+ }
+ }
+
+ //remove initial build class (only present on first pageshow)
+ function hideRenderingClass(){
+ $html.removeClass( "ui-mobile-rendering" );
+ }
+
+ $.extend($.mobile, {
+ // turn on/off page loading message.
+ showPageLoadingMsg: function( theme, msgText, textonly ) {
+ $html.addClass( "ui-loading" );
+
+ if ( $.mobile.loadingMessage ) {
+ // text visibility from argument takes priority
+ var textVisible = textonly || $.mobile.loadingMessageTextVisible;
+
+ theme = theme || $.mobile.loadingMessageTheme,
+
+ $loader
+ .attr( "class", loaderClass + " ui-corner-all ui-body-" + ( theme || "a" ) + " ui-loader-" + ( textVisible ? "verbose" : "default" ) + ( textonly ? " ui-loader-textonly" : "" ) )
+ .find( "h1" )
+ .text( msgText || $.mobile.loadingMessage )
+ .end()
+ .appendTo( $.mobile.pageContainer );
+
+ checkLoaderPosition();
+ $window.bind( "scroll", checkLoaderPosition );
+ }
+ },
+
+ hidePageLoadingMsg: function() {
+ $html.removeClass( "ui-loading" );
+
+ if( $.mobile.loadingMessage ){
+ $loader.removeClass( "ui-loader-fakefix" );
+ }
+
+ $( window ).unbind( "scroll", fakeFixLoader );
+ $( window ).unbind( "scroll", checkLoaderPosition );
+ },
+
+ // find and enhance the pages in the dom and transition to the first page.
+ initializePage: function() {
+ // find present pages
+ var $pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" );
+
+ // if no pages are found, create one with body's inner html
+ if ( !$pages.length ) {
+ $pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 );
+ }
+
+ // add dialogs, set data-url attrs
+ $pages.each(function() {
+ var $this = $(this);
+
+ // unless the data url is already set set it to the pathname
+ if ( !$this.jqmData("url") ) {
+ $this.attr( "data-" + $.mobile.ns + "url", $this.attr( "id" ) || location.pathname + location.search );
+ }
+ });
+
+ // define first page in dom case one backs out to the directory root (not always the first page visited, but defined as fallback)
+ $.mobile.firstPage = $pages.first();
+
+ // define page container
+ $.mobile.pageContainer = $pages.first().parent().addClass( "ui-mobile-viewport" );
+
+ // alert listeners that the pagecontainer has been determined for binding
+ // to events triggered on it
+ $window.trigger( "pagecontainercreate" );
+
+ // cue page loading message
+ $.mobile.showPageLoadingMsg();
+
+ //remove initial build class (only present on first pageshow)
+ hideRenderingClass();
+
+ // if hashchange listening is disabled or there's no hash deeplink, change to the first page in the DOM
+ if ( !$.mobile.hashListeningEnabled || !$.mobile.path.stripHash( location.hash ) ) {
+ $.mobile.changePage( $.mobile.firstPage, { transition: "none", reverse: true, changeHash: false, fromHashChange: true } );
+ }
+ // otherwise, trigger a hashchange to load a deeplink
+ else {
+ $window.trigger( "hashchange", [ true ] );
+ }
+ }
+ });
+
+ // initialize events now, after mobileinit has occurred
+ $.mobile._registerInternalEvents();
+
+ // check which scrollTop value should be used by scrolling to 1 immediately at domready
+ // then check what the scroll top is. Android will report 0... others 1
+ // note that this initial scroll won't hide the address bar. It's just for the check.
+ $(function() {
+ window.scrollTo( 0, 1 );
+
+ // if defaultHomeScroll hasn't been set yet, see if scrollTop is 1
+ // it should be 1 in most browsers, but android treats 1 as 0 (for hiding addr bar)
+ // so if it's 1, use 0 from now on
+ $.mobile.defaultHomeScroll = ( !$.support.scrollTop || $(window).scrollTop() === 1 ) ? 0 : 1;
+
+
+ // TODO: Implement a proper registration mechanism with dependency handling in order to not have exceptions like the one below
+ //auto self-init widgets for those widgets that have a soft dependency on others
+ if ( $.fn.controlgroup ) {
+ $( document ).bind( "pagecreate create", function( e ){
+ $( ":jqmData(role='controlgroup')", e.target )
+ .jqmEnhanceable()
+ .controlgroup({ excludeInvisible: false });
+ });
+ }
+
+ //dom-ready inits
+ if( $.mobile.autoInitializePage ){
+ $.mobile.initializePage();
+ }
+
+ // window load event
+ // hide iOS browser chrome on load
+ $window.load( $.mobile.silentScroll );
+ });
+}( jQuery, this ));
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>group: exclude
+
+define([
+ 'require',
+ './jquery.mobile.navigation',
+ './jquery.mobile.navigation.pushstate',
+ './jquery.mobile.transition.pop',
+ './jquery.mobile.transition.slide',
+ './jquery.mobile.transition.slidedown',
+ './jquery.mobile.transition.slideup',
+ './jquery.mobile.transition.flip',
+ './jquery.mobile.transition.flow',
+ './jquery.mobile.transition.turn',
+ './jquery.mobile.degradeInputs',
+ './jquery.mobile.dialog',
+ './jquery.mobile.page.sections',
+ './jquery.mobile.collapsible',
+ './jquery.mobile.collapsibleSet',
+ './jquery.mobile.fieldContain',
+ './jquery.mobile.grid',
+ './jquery.mobile.navbar',
+ './jquery.mobile.listview',
+ './jquery.mobile.listview.filter',
+ './jquery.mobile.nojs',
+ './jquery.mobile.forms.checkboxradio',
+ './jquery.mobile.forms.button',
+ './jquery.mobile.forms.slider',
+ './jquery.mobile.forms.textinput',
+ './jquery.mobile.forms.select.custom',
+ './jquery.mobile.forms.select',
+ './jquery.mobile.buttonMarkup',
+ './jquery.mobile.controlGroup',
+ './jquery.mobile.links',
+ './jquery.mobile.fixedToolbar',
+ './jquery.mobile.zoom',
+ './jquery.mobile.zoom.iosorientationfix'
+], function( require ) {
+ require( [ './jquery.mobile.init' ], function() {} );
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Adds classes to links.
+//>>label: Link Classes
+//>>group: Utilities
+
+
+define( [ "jquery" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$( document ).bind( "pagecreate create", function( e ){
+
+ //links within content areas, tests included with page
+ $( e.target )
+ .find( "a" )
+ .jqmEnhanceable()
+ .not( ".ui-btn, .ui-link-inherit, :jqmData(role='none'), :jqmData(role='nojs')" )
+ .addClass( "ui-link" );
+
+});
+
+})( jQuery );
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Extends the listview to add a search box to filter lists
+//>>label: Listview: Filter
+//>>group: Widgets
+
+
+define( [ "jquery", "./jquery.mobile.listview", "./jquery.mobile.forms.textinput" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.mobile.listview.prototype.options.filter = false;
+$.mobile.listview.prototype.options.filterPlaceholder = "Filter items...";
+$.mobile.listview.prototype.options.filterTheme = "c";
+$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){
+ return text.toLowerCase().indexOf( searchValue ) === -1;
+};
+
+$( document ).delegate( ":jqmData(role='listview')", "listviewcreate", function() {
+
+ var list = $( this ),
+ listview = list.data( "listview" );
+
+ if ( !listview.options.filter ) {
+ return;
+ }
+
+ var wrapper = $( "<form>", {
+ "class": "ui-listview-filter ui-bar-" + listview.options.filterTheme,
+ "role": "search"
+ }),
+ search = $( "<input>", {
+ placeholder: listview.options.filterPlaceholder
+ })
+ .attr( "data-" + $.mobile.ns + "type", "search" )
+ .jqmData( "lastval", "" )
+ .bind( "keyup change", function() {
+
+ var $this = $(this),
+ val = this.value.toLowerCase(),
+ listItems = null,
+ lastval = $this.jqmData( "lastval" ) + "",
+ childItems = false,
+ itemtext = "",
+ item;
+
+ // Change val as lastval for next execution
+ $this.jqmData( "lastval" , val );
+ if ( val.length < lastval.length || val.indexOf(lastval) !== 0 ) {
+
+ // Removed chars or pasted something totally different, check all items
+ listItems = list.children();
+ } else {
+
+ // Only chars added, not removed, only use visible subset
+ listItems = list.children( ":not(.ui-screen-hidden)" );
+ }
+
+ if ( val ) {
+
+ // This handles hiding regular rows without the text we search for
+ // and any list dividers without regular rows shown under it
+
+ for ( var i = listItems.length - 1; i >= 0; i-- ) {
+ item = $( listItems[ i ] );
+ itemtext = item.jqmData( "filtertext" ) || item.text();
+
+ if ( item.is( "li:jqmData(role=list-divider)" ) ) {
+
+ item.toggleClass( "ui-filter-hidequeue" , !childItems );
+
+ // New bucket!
+ childItems = false;
+
+ } else if ( listview.options.filterCallback( itemtext, val ) ) {
+
+ //mark to be hidden
+ item.toggleClass( "ui-filter-hidequeue" , true );
+ } else {
+
+ // There's a shown item in the bucket
+ childItems = true;
+ }
+ }
+
+ // Show items, not marked to be hidden
+ listItems
+ .filter( ":not(.ui-filter-hidequeue)" )
+ .toggleClass( "ui-screen-hidden", false );
+
+ // Hide items, marked to be hidden
+ listItems
+ .filter( ".ui-filter-hidequeue" )
+ .toggleClass( "ui-screen-hidden", true )
+ .toggleClass( "ui-filter-hidequeue", false );
+
+ } else {
+
+ //filtervalue is empty => show all
+ listItems.toggleClass( "ui-screen-hidden", false );
+ }
+ listview._refreshCorners();
+ })
+ .appendTo( wrapper )
+ .textinput();
+
+ if ( listview.options.inset ) {
+ wrapper.addClass( "ui-listview-filter-inset" );
+ }
+
+ wrapper.bind( "submit", function() {
+ return false;
+ })
+ .insertBefore( list );
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Applies listview styling of various types (standard, numbered, split button, etc.)
+//>>label: Listview
+//>>group: Widgets
+//>>css: ../css/themes/default/jquery.mobile.theme.css, ../css/structure/jquery.mobile.listview.css
+
+define( [ "jquery", "./jquery.mobile.widget", "./jquery.mobile.buttonMarkup", "./jquery.mobile.page", "./jquery.mobile.page.sections" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+//Keeps track of the number of lists per page UID
+//This allows support for multiple nested list in the same page
+//https://github.com/jquery/jquery-mobile/issues/1617
+var listCountPerPage = {};
+
+$.widget( "mobile.listview", $.mobile.widget, {
+
+ options: {
+ theme: null,
+ countTheme: "c",
+ headerTheme: "b",
+ dividerTheme: "b",
+ splitIcon: "arrow-r",
+ splitTheme: "b",
+ mini: false,
+ inset: false,
+ initSelector: ":jqmData(role='listview')"
+ },
+
+ _create: function() {
+ var t = this,
+ listviewClasses = "";
+
+ listviewClasses += t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "";
+ listviewClasses += t.element.jqmData( "mini" ) || t.options.mini === true ? " ui-mini" : "";
+
+ // create listview markup
+ t.element.addClass(function( i, orig ) {
+ return orig + " ui-listview " + listviewClasses;
+ });
+
+ t.refresh( true );
+ },
+
+ _removeCorners: function( li, which ) {
+ var top = "ui-corner-top ui-corner-tr ui-corner-tl",
+ bot = "ui-corner-bottom ui-corner-br ui-corner-bl";
+
+ li = li.add( li.find( ".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb" ) );
+
+ if ( which === "top" ) {
+ li.removeClass( top );
+ } else if ( which === "bottom" ) {
+ li.removeClass( bot );
+ } else {
+ li.removeClass( top + " " + bot );
+ }
+ },
+
+ _refreshCorners: function( create ) {
+ var $li,
+ $visibleli,
+ $topli,
+ $bottomli;
+
+ if ( this.options.inset ) {
+ $li = this.element.children( "li" );
+ // at create time the li are not visible yet so we need to rely on .ui-screen-hidden
+ $visibleli = create?$li.not( ".ui-screen-hidden" ):$li.filter( ":visible" );
+
+ this._removeCorners( $li );
+
+ // Select the first visible li element
+ $topli = $visibleli.first()
+ .addClass( "ui-corner-top" );
+
+ $topli.add( $topli.find( ".ui-btn-inner" )
+ .not( ".ui-li-link-alt span:first-child" ) )
+ .addClass( "ui-corner-top" )
+ .end()
+ .find( ".ui-li-link-alt, .ui-li-link-alt span:first-child" )
+ .addClass( "ui-corner-tr" )
+ .end()
+ .find( ".ui-li-thumb" )
+ .not(".ui-li-icon")
+ .addClass( "ui-corner-tl" );
+
+ // Select the last visible li element
+ $bottomli = $visibleli.last()
+ .addClass( "ui-corner-bottom" );
+
+ $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )
+ .find( ".ui-li-link-alt" )
+ .addClass( "ui-corner-br" )
+ .end()
+ .find( ".ui-li-thumb" )
+ .not(".ui-li-icon")
+ .addClass( "ui-corner-bl" );
+ }
+ if ( !create ) {
+ this.element.trigger( "updatelayout" );
+ }
+ },
+
+ // This is a generic utility method for finding the first
+ // node with a given nodeName. It uses basic DOM traversal
+ // to be fast and is meant to be a substitute for simple
+ // $.fn.closest() and $.fn.children() calls on a single
+ // element. Note that callers must pass both the lowerCase
+ // and upperCase version of the nodeName they are looking for.
+ // The main reason for this is that this function will be
+ // called many times and we want to avoid having to lowercase
+ // the nodeName from the element every time to ensure we have
+ // a match. Note that this function lives here for now, but may
+ // be moved into $.mobile if other components need a similar method.
+ _findFirstElementByTagName: function( ele, nextProp, lcName, ucName )
+ {
+ var dict = {};
+ dict[ lcName ] = dict[ ucName ] = true;
+ while ( ele ) {
+ if ( dict[ ele.nodeName ] ) {
+ return ele;
+ }
+ ele = ele[ nextProp ];
+ }
+ return null;
+ },
+ _getChildrenByTagName: function( ele, lcName, ucName )
+ {
+ var results = [],
+ dict = {};
+ dict[ lcName ] = dict[ ucName ] = true;
+ ele = ele.firstChild;
+ while ( ele ) {
+ if ( dict[ ele.nodeName ] ) {
+ results.push( ele );
+ }
+ ele = ele.nextSibling;
+ }
+ return $( results );
+ },
+
+ _addThumbClasses: function( containers )
+ {
+ var i, img, len = containers.length;
+ for ( i = 0; i < len; i++ ) {
+ img = $( this._findFirstElementByTagName( containers[ i ].firstChild, "nextSibling", "img", "IMG" ) );
+ if ( img.length ) {
+ img.addClass( "ui-li-thumb" );
+ $( this._findFirstElementByTagName( img[ 0 ].parentNode, "parentNode", "li", "LI" ) ).addClass( img.is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
+ }
+ }
+ },
+
+ refresh: function( create ) {
+ this.parentPage = this.element.closest( ".ui-page" );
+ this._createSubPages();
+
+ var o = this.options,
+ $list = this.element,
+ self = this,
+ dividertheme = $list.jqmData( "dividertheme" ) || o.dividerTheme,
+ listsplittheme = $list.jqmData( "splittheme" ),
+ listspliticon = $list.jqmData( "spliticon" ),
+ li = this._getChildrenByTagName( $list[ 0 ], "li", "LI" ),
+ counter = $.support.cssPseudoElement || !$.nodeName( $list[ 0 ], "ol" ) ? 0 : 1,
+ itemClassDict = {},
+ item, itemClass, itemTheme,
+ a, last, splittheme, countParent, icon, imgParents, img, linkIcon;
+
+ if ( counter ) {
+ $list.find( ".ui-li-dec" ).remove();
+ }
+
+ if ( !o.theme ) {
+ o.theme = $.mobile.getInheritedTheme( this.element, "c" );
+ }
+
+ for ( var pos = 0, numli = li.length; pos < numli; pos++ ) {
+ item = li.eq( pos );
+ itemClass = "ui-li";
+
+ // If we're creating the element, we update it regardless
+ if ( create || !item.hasClass( "ui-li" ) ) {
+ itemTheme = item.jqmData("theme") || o.theme;
+ a = this._getChildrenByTagName( item[ 0 ], "a", "A" );
+
+ if ( a.length ) {
+ icon = item.jqmData("icon");
+
+ item.buttonMarkup({
+ wrapperEls: "div",
+ shadow: false,
+ corners: false,
+ iconpos: "right",
+ icon: a.length > 1 || icon === false ? false : icon || "arrow-r",
+ theme: itemTheme
+ });
+
+ if ( ( icon != false ) && ( a.length == 1 ) ) {
+ item.addClass( "ui-li-has-arrow" );
+ }
+
+ a.first().removeClass( "ui-link" ).addClass( "ui-link-inherit" );
+
+ if ( a.length > 1 ) {
+ itemClass += " ui-li-has-alt";
+
+ last = a.last();
+ splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;
+ linkIcon = last.jqmData("icon");
+
+ last.appendTo(item)
+ .attr( "title", last.getEncodedText() )
+ .addClass( "ui-li-link-alt" )
+ .empty()
+ .buttonMarkup({
+ shadow: false,
+ corners: false,
+ theme: itemTheme,
+ icon: false,
+ iconpos: false
+ })
+ .find( ".ui-btn-inner" )
+ .append(
+ $( document.createElement( "span" ) ).buttonMarkup({
+ shadow: true,
+ corners: true,
+ theme: splittheme,
+ iconpos: "notext",
+ // link icon overrides list item icon overrides ul element overrides options
+ icon: linkIcon || icon || listspliticon || o.splitIcon
+ })
+ );
+ }
+ } else if ( item.jqmData( "role" ) === "list-divider" ) {
+
+ itemClass += " ui-li-divider ui-bar-" + dividertheme;
+ item.attr( "role", "heading" );
+
+ //reset counter when a divider heading is encountered
+ if ( counter ) {
+ counter = 1;
+ }
+
+ } else {
+ itemClass += " ui-li-static ui-body-" + itemTheme;
+ }
+ }
+
+ if ( counter && itemClass.indexOf( "ui-li-divider" ) < 0 ) {
+ countParent = item.is( ".ui-li-static:first" ) ? item : item.find( ".ui-link-inherit" );
+
+ countParent.addClass( "ui-li-jsnumbering" )
+ .prepend( "<span class='ui-li-dec'>" + (counter++) + ". </span>" );
+ }
+
+ // Instead of setting item class directly on the list item and its
+ // btn-inner at this point in time, push the item into a dictionary
+ // that tells us what class to set on it so we can do this after this
+ // processing loop is finished.
+
+ if ( !itemClassDict[ itemClass ] ) {
+ itemClassDict[ itemClass ] = [];
+ }
+
+ itemClassDict[ itemClass ].push( item[ 0 ] );
+ }
+
+ // Set the appropriate listview item classes on each list item
+ // and their btn-inner elements. The main reason we didn't do this
+ // in the for-loop above is because we can eliminate per-item function overhead
+ // by calling addClass() and children() once or twice afterwards. This
+ // can give us a significant boost on platforms like WP7.5.
+
+ for ( itemClass in itemClassDict ) {
+ $( itemClassDict[ itemClass ] ).addClass( itemClass ).children( ".ui-btn-inner" ).addClass( itemClass );
+ }
+
+ $list.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" )
+ .end()
+
+ .find( "p, dl" ).addClass( "ui-li-desc" )
+ .end()
+
+ .find( ".ui-li-aside" ).each(function() {
+ var $this = $(this);
+ $this.prependTo( $this.parent() ); //shift aside to front for css float
+ })
+ .end()
+
+ .find( ".ui-li-count" ).each( function() {
+ $( this ).closest( "li" ).addClass( "ui-li-has-count" );
+ }).addClass( "ui-btn-up-" + ( $list.jqmData( "counttheme" ) || this.options.countTheme) + " ui-btn-corner-all" );
+
+ // The idea here is to look at the first image in the list item
+ // itself, and any .ui-link-inherit element it may contain, so we
+ // can place the appropriate classes on the image and list item.
+ // Note that we used to use something like:
+ //
+ // li.find(">img:eq(0), .ui-link-inherit>img:eq(0)").each( ... );
+ //
+ // But executing a find() like that on Windows Phone 7.5 took a
+ // really long time. Walking things manually with the code below
+ // allows the 400 listview item page to load in about 3 seconds as
+ // opposed to 30 seconds.
+
+ this._addThumbClasses( li );
+ this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
+
+ this._refreshCorners( create );
+ },
+
+ //create a string for ID/subpage url creation
+ _idStringEscape: function( str ) {
+ return str.replace(/[^a-zA-Z0-9]/g, '-');
+ },
+
+ _createSubPages: function() {
+ var parentList = this.element,
+ parentPage = parentList.closest( ".ui-page" ),
+ parentUrl = parentPage.jqmData( "url" ),
+ parentId = parentUrl || parentPage[ 0 ][ $.expando ],
+ parentListId = parentList.attr( "id" ),
+ o = this.options,
+ dns = "data-" + $.mobile.ns,
+ self = this,
+ persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" ),
+ hasSubPages;
+
+ if ( typeof listCountPerPage[ parentId ] === "undefined" ) {
+ listCountPerPage[ parentId ] = -1;
+ }
+
+ parentListId = parentListId || ++listCountPerPage[ parentId ];
+
+ $( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function( i ) {
+ var self = this,
+ list = $( this ),
+ listId = list.attr( "id" ) || parentListId + "-" + i,
+ parent = list.parent(),
+ nodeEls = $( list.prevAll().toArray().reverse() ),
+ nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim(parent.contents()[ 0 ].nodeValue) + "</span>" ),
+ title = nodeEls.first().getEncodedText(),//url limits to first 30 chars of text
+ id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId,
+ theme = list.jqmData( "theme" ) || o.theme,
+ countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,
+ newPage, anchor;
+
+ //define hasSubPages for use in later removal
+ hasSubPages = true;
+
+ newPage = list.detach()
+ .wrap( "<div " + dns + "role='page' " + dns + "url='" + id + "' " + dns + "theme='" + theme + "' " + dns + "count-theme='" + countTheme + "'><div " + dns + "role='content'></div></div>" )
+ .parent()
+ .before( "<div " + dns + "role='header' " + dns + "theme='" + o.headerTheme + "'><div class='ui-title'>" + title + "</div></div>" )
+ .after( persistentFooterID ? $( "<div " + dns + "role='footer' " + dns + "id='"+ persistentFooterID +"'>") : "" )
+ .parent()
+ .appendTo( $.mobile.pageContainer );
+
+ newPage.page();
+
+ anchor = parent.find('a:first');
+
+ if ( !anchor.length ) {
+ anchor = $( "<a/>" ).html( nodeEls || title ).prependTo( parent.empty() );
+ }
+
+ anchor.attr( "href", "#" + id );
+
+ }).listview();
+
+ // on pagehide, remove any nested pages along with the parent page, as long as they aren't active
+ // and aren't embedded
+ if( hasSubPages &&
+ parentPage.is( ":jqmData(external-page='true')" ) &&
+ parentPage.data("page").options.domCache === false ) {
+
+ var newRemove = function( e, ui ){
+ var nextPage = ui.nextPage, npURL;
+
+ if( ui.nextPage ){
+ npURL = nextPage.jqmData( "url" );
+ if( npURL.indexOf( parentUrl + "&" + $.mobile.subPageUrlKey ) !== 0 ){
+ self.childPages().remove();
+ parentPage.remove();
+ }
+ }
+ };
+
+ // unbind the original page remove and replace with our specialized version
+ parentPage
+ .unbind( "pagehide.remove" )
+ .bind( "pagehide.remove", newRemove);
+ }
+ },
+
+ // TODO sort out a better way to track sub pages of the listview this is brittle
+ childPages: function(){
+ var parentUrl = this.parentPage.jqmData( "url" );
+
+ return $( ":jqmData(url^='"+ parentUrl + "&" + $.mobile.subPageUrlKey +"')");
+ }
+});
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $.mobile.listview.prototype.enhanceWithin( e.target );
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: A workaround for browsers without window.matchMedia
+//>>label: matchMedia Polyfill
+//>>group: Utilities
+
+
+define( [ "jquery", "./jquery.mobile.core" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+var $window = $( window ),
+ $html = $( "html" );
+
+/* $.mobile.media method: pass a CSS media type or query and get a bool return
+ note: this feature relies on actual media query support for media queries, though types will work most anywhere
+ examples:
+ $.mobile.media('screen') // tests for screen media type
+ $.mobile.media('screen and (min-width: 480px)') // tests for screen media type with window width > 480px
+ $.mobile.media('@media screen and (-webkit-min-device-pixel-ratio: 2)') // tests for webkit 2x pixel ratio (iPhone 4)
+*/
+$.mobile.media = (function() {
+ // TODO: use window.matchMedia once at least one UA implements it
+ var cache = {},
+ testDiv = $( "<div id='jquery-mediatest'>" ),
+ fakeBody = $( "<body>" ).append( testDiv );
+
+ return function( query ) {
+ if ( !( query in cache ) ) {
+ var styleBlock = document.createElement( "style" ),
+ cssrule = "@media " + query + " { #jquery-mediatest { position:absolute; } }";
+
+ //must set type for IE!
+ styleBlock.type = "text/css";
+
+ if ( styleBlock.styleSheet ){
+ styleBlock.styleSheet.cssText = cssrule;
+ } else {
+ styleBlock.appendChild( document.createTextNode(cssrule) );
+ }
+
+ $html.prepend( fakeBody ).prepend( styleBlock );
+ cache[ query ] = testDiv.css( "position" ) === "absolute";
+ fakeBody.add( styleBlock ).remove();
+ }
+ return cache[ query ];
+ };
+})();
+
+})(jQuery);
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Formats groups of links as horizontal navigation bars.
+//>>label: Navbars
+//>>group: Widgets
+//>>css: ../css/themes/default/jquery.mobile.theme.css, ../css/structure/jquery.mobile.navbar.css
+
+
+define( [ "jquery", "./jquery.mobile.widget", "./jquery.mobile.buttonMarkup", "./jquery.mobile.grid" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.navbar", $.mobile.widget, {
+ options: {
+ iconpos: "top",
+ grid: null,
+ initSelector: ":jqmData(role='navbar')"
+ },
+
+ _create: function(){
+
+ var $navbar = this.element,
+ $navbtns = $navbar.find( "a" ),
+ iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
+ this.options.iconpos : undefined;
+
+ $navbar.addClass( "ui-navbar" )
+ .attr( "role","navigation" )
+ .find( "ul" )
+ .jqmEnhanceable()
+ .grid({ grid: this.options.grid });
+
+ if ( !iconpos ) {
+ $navbar.addClass( "ui-navbar-noicons" );
+ }
+
+ $navbtns.buttonMarkup({
+ corners: false,
+ shadow: false,
+ inline: true,
+ iconpos: iconpos
+ });
+
+ $navbar.delegate( "a", "vclick", function( event ) {
+ if( !$(event.target).hasClass("ui-disabled") ) {
+ $navbtns.removeClass( $.mobile.activeBtnClass );
+ $( this ).addClass( $.mobile.activeBtnClass );
+ }
+ });
+
+ // Buttons in the navbar with ui-state-persist class should regain their active state before page show
+ $navbar.closest( ".ui-page" ).bind( "pagebeforeshow", function() {
+ $navbtns.filter( ".ui-state-persist" ).addClass( $.mobile.activeBtnClass );
+ });
+ }
+});
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $.mobile.navbar.prototype.enhanceWithin( e.target );
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Applies the AJAX navigation system to links and forms to enable page transitions
+//>>label: AJAX Navigation System
+//>>group: Navigation
+
+define( [
+ "jquery",
+ "./jquery.mobile.core",
+ "./jquery.mobile.event",
+ "../external/requirejs/depend!./jquery.mobile.hashchange[jquery]",
+ "./jquery.mobile.page",
+ "./jquery.mobile.transition" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+( function( $, undefined ) {
+
+ //define vars for interal use
+ var $window = $( window ),
+ $html = $( 'html' ),
+ $head = $( 'head' ),
+
+ //url path helpers for use in relative url management
+ path = {
+
+ // This scary looking regular expression parses an absolute URL or its relative
+ // variants (protocol, site, document, query, and hash), into the various
+ // components (protocol, host, path, query, fragment, etc that make up the
+ // URL as well as some other commonly used sub-parts. When used with RegExp.exec()
+ // or String.match, it parses the URL into a results array that looks like this:
+ //
+ // [0]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content
+ // [1]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread
+ // [2]: http://jblas:password@mycompany.com:8080/mail/inbox
+ // [3]: http://jblas:password@mycompany.com:8080
+ // [4]: http:
+ // [5]: //
+ // [6]: jblas:password@mycompany.com:8080
+ // [7]: jblas:password
+ // [8]: jblas
+ // [9]: password
+ // [10]: mycompany.com:8080
+ // [11]: mycompany.com
+ // [12]: 8080
+ // [13]: /mail/inbox
+ // [14]: /mail/
+ // [15]: inbox
+ // [16]: ?msg=1234&type=unread
+ // [17]: #msg-content
+ //
+ urlParseRE: /^(((([^:\/#\?]+:)?(?:(\/\/)((?:(([^:@\/#\?]+)(?:\:([^:@\/#\?]+))?)@)?(([^:\/#\?\]\[]+|\[[^\/\]@#?]+\])(?:\:([0-9]+))?))?)?)?((\/?(?:[^\/\?#]+\/+)*)([^\?#]*)))?(\?[^#]+)?)(#.*)?/,
+
+ //Parse a URL into a structure that allows easy access to
+ //all of the URL components by name.
+ parseUrl: function( url ) {
+ // If we're passed an object, we'll assume that it is
+ // a parsed url object and just return it back to the caller.
+ if ( $.type( url ) === "object" ) {
+ return url;
+ }
+
+ var matches = path.urlParseRE.exec( url || "" ) || [];
+
+ // Create an object that allows the caller to access the sub-matches
+ // by name. Note that IE returns an empty string instead of undefined,
+ // like all other browsers do, so we normalize everything so its consistent
+ // no matter what browser we're running on.
+ return {
+ href: matches[ 0 ] || "",
+ hrefNoHash: matches[ 1 ] || "",
+ hrefNoSearch: matches[ 2 ] || "",
+ domain: matches[ 3 ] || "",
+ protocol: matches[ 4 ] || "",
+ doubleSlash: matches[ 5 ] || "",
+ authority: matches[ 6 ] || "",
+ username: matches[ 8 ] || "",
+ password: matches[ 9 ] || "",
+ host: matches[ 10 ] || "",
+ hostname: matches[ 11 ] || "",
+ port: matches[ 12 ] || "",
+ pathname: matches[ 13 ] || "",
+ directory: matches[ 14 ] || "",
+ filename: matches[ 15 ] || "",
+ search: matches[ 16 ] || "",
+ hash: matches[ 17 ] || ""
+ };
+ },
+
+ //Turn relPath into an asbolute path. absPath is
+ //an optional absolute path which describes what
+ //relPath is relative to.
+ makePathAbsolute: function( relPath, absPath ) {
+ if ( relPath && relPath.charAt( 0 ) === "/" ) {
+ return relPath;
+ }
+
+ relPath = relPath || "";
+ absPath = absPath ? absPath.replace( /^\/|(\/[^\/]*|[^\/]+)$/g, "" ) : "";
+
+ var absStack = absPath ? absPath.split( "/" ) : [],
+ relStack = relPath.split( "/" );
+ for ( var i = 0; i < relStack.length; i++ ) {
+ var d = relStack[ i ];
+ switch ( d ) {
+ case ".":
+ break;
+ case "..":
+ if ( absStack.length ) {
+ absStack.pop();
+ }
+ break;
+ default:
+ absStack.push( d );
+ break;
+ }
+ }
+ return "/" + absStack.join( "/" );
+ },
+
+ //Returns true if both urls have the same domain.
+ isSameDomain: function( absUrl1, absUrl2 ) {
+ return path.parseUrl( absUrl1 ).domain === path.parseUrl( absUrl2 ).domain;
+ },
+
+ //Returns true for any relative variant.
+ isRelativeUrl: function( url ) {
+ // All relative Url variants have one thing in common, no protocol.
+ return path.parseUrl( url ).protocol === "";
+ },
+
+ //Returns true for an absolute url.
+ isAbsoluteUrl: function( url ) {
+ return path.parseUrl( url ).protocol !== "";
+ },
+
+ //Turn the specified realtive URL into an absolute one. This function
+ //can handle all relative variants (protocol, site, document, query, fragment).
+ makeUrlAbsolute: function( relUrl, absUrl ) {
+ if ( !path.isRelativeUrl( relUrl ) ) {
+ return relUrl;
+ }
+
+ var relObj = path.parseUrl( relUrl ),
+ absObj = path.parseUrl( absUrl ),
+ protocol = relObj.protocol || absObj.protocol,
+ doubleSlash = relObj.protocol ? relObj.doubleSlash : ( relObj.doubleSlash || absObj.doubleSlash ),
+ authority = relObj.authority || absObj.authority,
+ hasPath = relObj.pathname !== "",
+ pathname = path.makePathAbsolute( relObj.pathname || absObj.filename, absObj.pathname ),
+ search = relObj.search || ( !hasPath && absObj.search ) || "",
+ hash = relObj.hash;
+
+ return protocol + doubleSlash + authority + pathname + search + hash;
+ },
+
+ //Add search (aka query) params to the specified url.
+ addSearchParams: function( url, params ) {
+ var u = path.parseUrl( url ),
+ p = ( typeof params === "object" ) ? $.param( params ) : params,
+ s = u.search || "?";
+ return u.hrefNoSearch + s + ( s.charAt( s.length - 1 ) !== "?" ? "&" : "" ) + p + ( u.hash || "" );
+ },
+
+ convertUrlToDataUrl: function( absUrl ) {
+ var u = path.parseUrl( absUrl );
+ if ( path.isEmbeddedPage( u ) ) {
+ // For embedded pages, remove the dialog hash key as in getFilePath(),
+ // otherwise the Data Url won't match the id of the embedded Page.
+ return u.hash.split( dialogHashKey )[0].replace( /^#/, "" );
+ } else if ( path.isSameDomain( u, documentBase ) ) {
+ return u.hrefNoHash.replace( documentBase.domain, "" );
+ }
+ return absUrl;
+ },
+
+ //get path from current hash, or from a file path
+ get: function( newPath ) {
+ if( newPath === undefined ) {
+ newPath = location.hash;
+ }
+ return path.stripHash( newPath ).replace( /[^\/]*\.[^\/*]+$/, '' );
+ },
+
+ //return the substring of a filepath before the sub-page key, for making a server request
+ getFilePath: function( path ) {
+ var splitkey = '&' + $.mobile.subPageUrlKey;
+ return path && path.split( splitkey )[0].split( dialogHashKey )[0];
+ },
+
+ //set location hash to path
+ set: function( path ) {
+ location.hash = path;
+ },
+
+ //test if a given url (string) is a path
+ //NOTE might be exceptionally naive
+ isPath: function( url ) {
+ return ( /\// ).test( url );
+ },
+
+ //return a url path with the window's location protocol/hostname/pathname removed
+ clean: function( url ) {
+ return url.replace( documentBase.domain, "" );
+ },
+
+ //just return the url without an initial #
+ stripHash: function( url ) {
+ return url.replace( /^#/, "" );
+ },
+
+ //remove the preceding hash, any query params, and dialog notations
+ cleanHash: function( hash ) {
+ return path.stripHash( hash.replace( /\?.*$/, "" ).replace( dialogHashKey, "" ) );
+ },
+
+ //check whether a url is referencing the same domain, or an external domain or different protocol
+ //could be mailto, etc
+ isExternal: function( url ) {
+ var u = path.parseUrl( url );
+ return u.protocol && u.domain !== documentUrl.domain ? true : false;
+ },
+
+ hasProtocol: function( url ) {
+ return ( /^(:?\w+:)/ ).test( url );
+ },
+
+ //check if the specified url refers to the first page in the main application document.
+ isFirstPageUrl: function( url ) {
+ // We only deal with absolute paths.
+ var u = path.parseUrl( path.makeUrlAbsolute( url, documentBase ) ),
+
+ // Does the url have the same path as the document?
+ samePath = u.hrefNoHash === documentUrl.hrefNoHash || ( documentBaseDiffers && u.hrefNoHash === documentBase.hrefNoHash ),
+
+ // Get the first page element.
+ fp = $.mobile.firstPage,
+
+ // Get the id of the first page element if it has one.
+ fpId = fp && fp[0] ? fp[0].id : undefined;
+
+ // The url refers to the first page if the path matches the document and
+ // it either has no hash value, or the hash is exactly equal to the id of the
+ // first page element.
+ return samePath && ( !u.hash || u.hash === "#" || ( fpId && u.hash.replace( /^#/, "" ) === fpId ) );
+ },
+
+ isEmbeddedPage: function( url ) {
+ var u = path.parseUrl( url );
+
+ //if the path is absolute, then we need to compare the url against
+ //both the documentUrl and the documentBase. The main reason for this
+ //is that links embedded within external documents will refer to the
+ //application document, whereas links embedded within the application
+ //document will be resolved against the document base.
+ if ( u.protocol !== "" ) {
+ return ( u.hash && ( u.hrefNoHash === documentUrl.hrefNoHash || ( documentBaseDiffers && u.hrefNoHash === documentBase.hrefNoHash ) ) );
+ }
+ return (/^#/).test( u.href );
+ }
+ },
+
+ //will be defined when a link is clicked and given an active class
+ $activeClickedLink = null,
+
+ //urlHistory is purely here to make guesses at whether the back or forward button was clicked
+ //and provide an appropriate transition
+ urlHistory = {
+ // Array of pages that are visited during a single page load.
+ // Each has a url and optional transition, title, and pageUrl (which represents the file path, in cases where URL is obscured, such as dialogs)
+ stack: [],
+
+ //maintain an index number for the active page in the stack
+ activeIndex: 0,
+
+ //get active
+ getActive: function() {
+ return urlHistory.stack[ urlHistory.activeIndex ];
+ },
+
+ getPrev: function() {
+ return urlHistory.stack[ urlHistory.activeIndex - 1 ];
+ },
+
+ getNext: function() {
+ return urlHistory.stack[ urlHistory.activeIndex + 1 ];
+ },
+
+ // addNew is used whenever a new page is added
+ addNew: function( url, transition, title, pageUrl, role ) {
+ //if there's forward history, wipe it
+ if( urlHistory.getNext() ) {
+ urlHistory.clearForward();
+ }
+
+ urlHistory.stack.push( {url : url, transition: transition, title: title, pageUrl: pageUrl, role: role } );
+
+ urlHistory.activeIndex = urlHistory.stack.length - 1;
+ },
+
+ //wipe urls ahead of active index
+ clearForward: function() {
+ urlHistory.stack = urlHistory.stack.slice( 0, urlHistory.activeIndex + 1 );
+ },
+
+ directHashChange: function( opts ) {
+ var back , forward, newActiveIndex, prev = this.getActive();
+
+ // check if url isp in history and if it's ahead or behind current page
+ $.each( urlHistory.stack, function( i, historyEntry ) {
+
+ //if the url is in the stack, it's a forward or a back
+ if( opts.currentUrl === historyEntry.url ) {
+ //define back and forward by whether url is older or newer than current page
+ back = i < urlHistory.activeIndex;
+ forward = !back;
+ newActiveIndex = i;
+ }
+ });
+
+ // save new page index, null check to prevent falsey 0 result
+ this.activeIndex = newActiveIndex !== undefined ? newActiveIndex : this.activeIndex;
+
+ if( back ) {
+ ( opts.either || opts.isBack )( true );
+ } else if( forward ) {
+ ( opts.either || opts.isForward )( false );
+ }
+ },
+
+ //disable hashchange event listener internally to ignore one change
+ //toggled internally when location.hash is updated to match the url of a successful page load
+ ignoreNextHashChange: false
+ },
+
+ //define first selector to receive focus when a page is shown
+ focusable = "[tabindex],a,button:visible,select:visible,input",
+
+ //queue to hold simultanious page transitions
+ pageTransitionQueue = [],
+
+ //indicates whether or not page is in process of transitioning
+ isPageTransitioning = false,
+
+ //nonsense hash change key for dialogs, so they create a history entry
+ dialogHashKey = "&ui-state=dialog",
+
+ //existing base tag?
+ $base = $head.children( "base" ),
+
+ //tuck away the original document URL minus any fragment.
+ documentUrl = path.parseUrl( location.href ),
+
+ //if the document has an embedded base tag, documentBase is set to its
+ //initial value. If a base tag does not exist, then we default to the documentUrl.
+ documentBase = $base.length ? path.parseUrl( path.makeUrlAbsolute( $base.attr( "href" ), documentUrl.href ) ) : documentUrl,
+
+ //cache the comparison once.
+ documentBaseDiffers = ( documentUrl.hrefNoHash !== documentBase.hrefNoHash );
+
+ //base element management, defined depending on dynamic base tag support
+ var base = $.support.dynamicBaseTag ? {
+
+ //define base element, for use in routing asset urls that are referenced in Ajax-requested markup
+ element: ( $base.length ? $base : $( "<base>", { href: documentBase.hrefNoHash } ).prependTo( $head ) ),
+
+ //set the generated BASE element's href attribute to a new page's base path
+ set: function( href ) {
+ base.element.attr( "href", path.makeUrlAbsolute( href, documentBase ) );
+ },
+
+ //set the generated BASE element's href attribute to a new page's base path
+ reset: function() {
+ base.element.attr( "href", documentBase.hrefNoHash );
+ }
+
+ } : undefined;
+
+/*
+ internal utility functions
+--------------------------------------*/
+
+
+ //direct focus to the page title, or otherwise first focusable element
+ $.mobile.focusPage = function ( page ) {
+ var autofocus = page.find("[autofocus]"),
+ pageTitle = page.find( ".ui-title:eq(0)" );
+
+ if( autofocus.length ) {
+ autofocus.focus();
+ return;
+ }
+
+ if( pageTitle.length ) {
+ pageTitle.focus();
+ }
+ else{
+ page.focus();
+ }
+ }
+
+ //remove active classes after page transition or error
+ function removeActiveLinkClass( forceRemoval ) {
+ if( !!$activeClickedLink && ( !$activeClickedLink.closest( '.ui-page-active' ).length || forceRemoval ) ) {
+ $activeClickedLink.removeClass( $.mobile.activeBtnClass );
+ }
+ $activeClickedLink = null;
+ }
+
+ function releasePageTransitionLock() {
+ isPageTransitioning = false;
+ if( pageTransitionQueue.length > 0 ) {
+ $.mobile.changePage.apply( null, pageTransitionQueue.pop() );
+ }
+ }
+
+ // Save the last scroll distance per page, before it is hidden
+ var setLastScrollEnabled = true,
+ setLastScroll, delayedSetLastScroll;
+
+ setLastScroll = function() {
+ // this barrier prevents setting the scroll value based on the browser
+ // scrolling the window based on a hashchange
+ if( !setLastScrollEnabled ) {
+ return;
+ }
+
+ var active = $.mobile.urlHistory.getActive();
+
+ if( active ) {
+ var lastScroll = $window.scrollTop();
+
+ // Set active page's lastScroll prop.
+ // If the location we're scrolling to is less than minScrollBack, let it go.
+ active.lastScroll = lastScroll < $.mobile.minScrollBack ? $.mobile.defaultHomeScroll : lastScroll;
+ }
+ };
+
+ // bind to scrollstop to gather scroll position. The delay allows for the hashchange
+ // event to fire and disable scroll recording in the case where the browser scrolls
+ // to the hash targets location (sometimes the top of the page). once pagechange fires
+ // getLastScroll is again permitted to operate
+ delayedSetLastScroll = function() {
+ setTimeout( setLastScroll, 100 );
+ };
+
+ // disable an scroll setting when a hashchange has been fired, this only works
+ // because the recording of the scroll position is delayed for 100ms after
+ // the browser might have changed the position because of the hashchange
+ $window.bind( $.support.pushState ? "popstate" : "hashchange", function() {
+ setLastScrollEnabled = false;
+ });
+
+ // handle initial hashchange from chrome :(
+ $window.one( $.support.pushState ? "popstate" : "hashchange", function() {
+ setLastScrollEnabled = true;
+ });
+
+ // wait until the mobile page container has been determined to bind to pagechange
+ $window.one( "pagecontainercreate", function(){
+ // once the page has changed, re-enable the scroll recording
+ $.mobile.pageContainer.bind( "pagechange", function() {
+
+ setLastScrollEnabled = true;
+
+ // remove any binding that previously existed on the get scroll
+ // which may or may not be different than the scroll element determined for
+ // this page previously
+ $window.unbind( "scrollstop", delayedSetLastScroll );
+
+ // determine and bind to the current scoll element which may be the window
+ // or in the case of touch overflow the element with touch overflow
+ $window.bind( "scrollstop", delayedSetLastScroll );
+ });
+ });
+
+ // bind to scrollstop for the first page as "pagechange" won't be fired in that case
+ $window.bind( "scrollstop", delayedSetLastScroll );
+
+ //function for transitioning between two existing pages
+ function transitionPages( toPage, fromPage, transition, reverse ) {
+
+ if( fromPage ) {
+ //trigger before show/hide events
+ fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } );
+ }
+
+ toPage.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } );
+
+ //clear page loader
+ $.mobile.hidePageLoadingMsg();
+
+ // If transition is defined, check if css 3D transforms are supported, and if not, if a fallback is specified
+ if( transition && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ transition ] ){
+ transition = $.mobile.transitionFallbacks[ transition ];
+ }
+
+ //find the transition handler for the specified transition. If there
+ //isn't one in our transitionHandlers dictionary, use the default one.
+ //call the handler immediately to kick-off the transition.
+ var th = $.mobile.transitionHandlers[ transition || "default" ] || $.mobile.defaultTransitionHandler,
+ promise = th( transition, reverse, toPage, fromPage );
+
+ promise.done(function() {
+
+ //trigger show/hide events
+ if( fromPage ) {
+ fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );
+ }
+
+ //trigger pageshow, define prevPage as either fromPage or empty jQuery obj
+ toPage.data( "page" )._trigger( "show", null, { prevPage: fromPage || $( "" ) } );
+ });
+
+ return promise;
+ }
+
+ //simply set the active page's minimum height to screen height, depending on orientation
+ function getScreenHeight(){
+ // Native innerHeight returns more accurate value for this across platforms,
+ // jQuery version is here as a normalized fallback for platforms like Symbian
+ return window.innerHeight || $( window ).height();
+ }
+
+ $.mobile.getScreenHeight = getScreenHeight;
+
+ //simply set the active page's minimum height to screen height, depending on orientation
+ function resetActivePageHeight(){
+ var aPage = $( "." + $.mobile.activePageClass ),
+ aPagePadT = parseFloat( aPage.css( "padding-top" ) ),
+ aPagePadB = parseFloat( aPage.css( "padding-bottom" ) );
+
+ aPage.css( "min-height", getScreenHeight() - aPagePadT - aPagePadB );
+ }
+
+ //shared page enhancements
+ function enhancePage( $page, role ) {
+ // If a role was specified, make sure the data-role attribute
+ // on the page element is in sync.
+ if( role ) {
+ $page.attr( "data-" + $.mobile.ns + "role", role );
+ }
+
+ //run page plugin
+ $page.page();
+ }
+
+/* exposed $.mobile methods */
+
+ //animation complete callback
+ $.fn.animationComplete = function( callback ) {
+ if( $.support.cssTransitions ) {
+ return $( this ).one( 'webkitAnimationEnd animationend', callback );
+ }
+ else{
+ // defer execution for consistency between webkit/non webkit
+ setTimeout( callback, 0 );
+ return $( this );
+ }
+ };
+
+ //expose path object on $.mobile
+ $.mobile.path = path;
+
+ //expose base object on $.mobile
+ $.mobile.base = base;
+
+ //history stack
+ $.mobile.urlHistory = urlHistory;
+
+ $.mobile.dialogHashKey = dialogHashKey;
+
+
+
+ //enable cross-domain page support
+ $.mobile.allowCrossDomainPages = false;
+
+ //return the original document url
+ $.mobile.getDocumentUrl = function(asParsedObject) {
+ return asParsedObject ? $.extend( {}, documentUrl ) : documentUrl.href;
+ };
+
+ //return the original document base url
+ $.mobile.getDocumentBase = function(asParsedObject) {
+ return asParsedObject ? $.extend( {}, documentBase ) : documentBase.href;
+ };
+
+ $.mobile._bindPageRemove = function() {
+ var page = $(this);
+
+ // when dom caching is not enabled or the page is embedded bind to remove the page on hide
+ if( !page.data("page").options.domCache
+ && page.is(":jqmData(external-page='true')") ) {
+
+ page.bind( 'pagehide.remove', function() {
+ var $this = $( this ),
+ prEvent = new $.Event( "pageremove" );
+
+ $this.trigger( prEvent );
+
+ if( !prEvent.isDefaultPrevented() ){
+ $this.removeWithDependents();
+ }
+ });
+ }
+ };
+
+ // Load a page into the DOM.
+ $.mobile.loadPage = function( url, options ) {
+ // This function uses deferred notifications to let callers
+ // know when the page is done loading, or if an error has occurred.
+ var deferred = $.Deferred(),
+
+ // The default loadPage options with overrides specified by
+ // the caller.
+ settings = $.extend( {}, $.mobile.loadPage.defaults, options ),
+
+ // The DOM element for the page after it has been loaded.
+ page = null,
+
+ // If the reloadPage option is true, and the page is already
+ // in the DOM, dupCachedPage will be set to the page element
+ // so that it can be removed after the new version of the
+ // page is loaded off the network.
+ dupCachedPage = null,
+
+ // determine the current base url
+ findBaseWithDefault = function(){
+ var closestBase = ( $.mobile.activePage && getClosestBaseUrl( $.mobile.activePage ) );
+ return closestBase || documentBase.hrefNoHash;
+ },
+
+ // The absolute version of the URL passed into the function. This
+ // version of the URL may contain dialog/subpage params in it.
+ absUrl = path.makeUrlAbsolute( url, findBaseWithDefault() );
+
+
+ // If the caller provided data, and we're using "get" request,
+ // append the data to the URL.
+ if ( settings.data && settings.type === "get" ) {
+ absUrl = path.addSearchParams( absUrl, settings.data );
+ settings.data = undefined;
+ }
+
+ // If the caller is using a "post" request, reloadPage must be true
+ if( settings.data && settings.type === "post" ){
+ settings.reloadPage = true;
+ }
+
+ // The absolute version of the URL minus any dialog/subpage params.
+ // In otherwords the real URL of the page to be loaded.
+ var fileUrl = path.getFilePath( absUrl ),
+
+ // The version of the Url actually stored in the data-url attribute of
+ // the page. For embedded pages, it is just the id of the page. For pages
+ // within the same domain as the document base, it is the site relative
+ // path. For cross-domain pages (Phone Gap only) the entire absolute Url
+ // used to load the page.
+ dataUrl = path.convertUrlToDataUrl( absUrl );
+
+ // Make sure we have a pageContainer to work with.
+ settings.pageContainer = settings.pageContainer || $.mobile.pageContainer;
+
+ // Check to see if the page already exists in the DOM.
+ page = settings.pageContainer.children( ":jqmData(url='" + dataUrl + "')" );
+
+ // If we failed to find the page, check to see if the url is a
+ // reference to an embedded page. If so, it may have been dynamically
+ // injected by a developer, in which case it would be lacking a data-url
+ // attribute and in need of enhancement.
+ if ( page.length === 0 && dataUrl && !path.isPath( dataUrl ) ) {
+ page = settings.pageContainer.children( "#" + dataUrl )
+ .attr( "data-" + $.mobile.ns + "url", dataUrl );
+ }
+
+ // If we failed to find a page in the DOM, check the URL to see if it
+ // refers to the first page in the application. If it isn't a reference
+ // to the first page and refers to non-existent embedded page, error out.
+ if ( page.length === 0 ) {
+ if ( $.mobile.firstPage && path.isFirstPageUrl( fileUrl ) ) {
+ // Check to make sure our cached-first-page is actually
+ // in the DOM. Some user deployed apps are pruning the first
+ // page from the DOM for various reasons, we check for this
+ // case here because we don't want a first-page with an id
+ // falling through to the non-existent embedded page error
+ // case. If the first-page is not in the DOM, then we let
+ // things fall through to the ajax loading code below so
+ // that it gets reloaded.
+ if ( $.mobile.firstPage.parent().length ) {
+ page = $( $.mobile.firstPage );
+ }
+ } else if ( path.isEmbeddedPage( fileUrl ) ) {
+ deferred.reject( absUrl, options );
+ return deferred.promise();
+ }
+ }
+
+ // Reset base to the default document base.
+ if ( base ) {
+ base.reset();
+ }
+
+ // If the page we are interested in is already in the DOM,
+ // and the caller did not indicate that we should force a
+ // reload of the file, we are done. Otherwise, track the
+ // existing page as a duplicated.
+ if ( page.length ) {
+ if ( !settings.reloadPage ) {
+ enhancePage( page, settings.role );
+ deferred.resolve( absUrl, options, page );
+ return deferred.promise();
+ }
+ dupCachedPage = page;
+ }
+
+ var mpc = settings.pageContainer,
+ pblEvent = new $.Event( "pagebeforeload" ),
+ triggerData = { url: url, absUrl: absUrl, dataUrl: dataUrl, deferred: deferred, options: settings };
+
+ // Let listeners know we're about to load a page.
+ mpc.trigger( pblEvent, triggerData );
+
+ // If the default behavior is prevented, stop here!
+ if( pblEvent.isDefaultPrevented() ){
+ return deferred.promise();
+ }
+
+ if ( settings.showLoadMsg ) {
+
+ // This configurable timeout allows cached pages a brief delay to load without showing a message
+ var loadMsgDelay = setTimeout(function(){
+ $.mobile.showPageLoadingMsg();
+ }, settings.loadMsgDelay ),
+
+ // Shared logic for clearing timeout and removing message.
+ hideMsg = function(){
+
+ // Stop message show timer
+ clearTimeout( loadMsgDelay );
+
+ // Hide loading message
+ $.mobile.hidePageLoadingMsg();
+ };
+ }
+
+ if ( !( $.mobile.allowCrossDomainPages || path.isSameDomain( documentUrl, absUrl ) ) ) {
+ deferred.reject( absUrl, options );
+ } else {
+ // Load the new page.
+ $.ajax({
+ url: fileUrl,
+ type: settings.type,
+ data: settings.data,
+ dataType: "html",
+ success: function( html, textStatus, xhr ) {
+ //pre-parse html to check for a data-url,
+ //use it as the new fileUrl, base path, etc
+ var all = $( "<div></div>" ),
+
+ //page title regexp
+ newPageTitle = html.match( /<title[^>]*>([^<]*)/ ) && RegExp.$1,
+
+ // TODO handle dialogs again
+ pageElemRegex = new RegExp( "(<[^>]+\\bdata-" + $.mobile.ns + "role=[\"']?page[\"']?[^>]*>)" ),
+ dataUrlRegex = new RegExp( "\\bdata-" + $.mobile.ns + "url=[\"']?([^\"'>]*)[\"']?" );
+
+
+ // data-url must be provided for the base tag so resource requests can be directed to the
+ // correct url. loading into a temprorary element makes these requests immediately
+ if( pageElemRegex.test( html )
+ && RegExp.$1
+ && dataUrlRegex.test( RegExp.$1 )
+ && RegExp.$1 ) {
+ url = fileUrl = path.getFilePath( RegExp.$1 );
+ }
+
+ if ( base ) {
+ base.set( fileUrl );
+ }
+
+ //workaround to allow scripts to execute when included in page divs
+ all.get( 0 ).innerHTML = html;
+ page = all.find( ":jqmData(role='page'), :jqmData(role='dialog')" ).first();
+
+ //if page elem couldn't be found, create one and insert the body element's contents
+ if( !page.length ){
+ page = $( "<div data-" + $.mobile.ns + "role='page'>" + html.split( /<\/?body[^>]*>/gmi )[1] + "</div>" );
+ }
+
+ if ( newPageTitle && !page.jqmData( "title" ) ) {
+ if ( ~newPageTitle.indexOf( "&" ) ) {
+ newPageTitle = $( "<div>" + newPageTitle + "</div>" ).text();
+ }
+ page.jqmData( "title", newPageTitle );
+ }
+
+ //rewrite src and href attrs to use a base url
+ if( !$.support.dynamicBaseTag ) {
+ var newPath = path.get( fileUrl );
+ page.find( "[src], link[href], a[rel='external'], :jqmData(ajax='false'), a[target]" ).each(function() {
+ var thisAttr = $( this ).is( '[href]' ) ? 'href' :
+ $(this).is('[src]') ? 'src' : 'action',
+ thisUrl = $( this ).attr( thisAttr );
+
+ // XXX_jblas: We need to fix this so that it removes the document
+ // base URL, and then prepends with the new page URL.
+ //if full path exists and is same, chop it - helps IE out
+ thisUrl = thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );
+
+ if( !/^(\w+:|#|\/)/.test( thisUrl ) ) {
+ $( this ).attr( thisAttr, newPath + thisUrl );
+ }
+ });
+ }
+
+ //append to page and enhance
+ // TODO taging a page with external to make sure that embedded pages aren't removed
+ // by the various page handling code is bad. Having page handling code in many
+ // places is bad. Solutions post 1.0
+ page
+ .attr( "data-" + $.mobile.ns + "url", path.convertUrlToDataUrl( fileUrl ) )
+ .attr( "data-" + $.mobile.ns + "external-page", true )
+ .appendTo( settings.pageContainer );
+
+ // wait for page creation to leverage options defined on widget
+ page.one( 'pagecreate', $.mobile._bindPageRemove );
+
+ enhancePage( page, settings.role );
+
+ // Enhancing the page may result in new dialogs/sub pages being inserted
+ // into the DOM. If the original absUrl refers to a sub-page, that is the
+ // real page we are interested in.
+ if ( absUrl.indexOf( "&" + $.mobile.subPageUrlKey ) > -1 ) {
+ page = settings.pageContainer.children( ":jqmData(url='" + dataUrl + "')" );
+ }
+
+ //bind pageHide to removePage after it's hidden, if the page options specify to do so
+
+ // Remove loading message.
+ if ( settings.showLoadMsg ) {
+ hideMsg();
+ }
+
+ // Add the page reference and xhr to our triggerData.
+ triggerData.xhr = xhr;
+ triggerData.textStatus = textStatus;
+ triggerData.page = page;
+
+ // Let listeners know the page loaded successfully.
+ settings.pageContainer.trigger( "pageload", triggerData );
+
+ deferred.resolve( absUrl, options, page, dupCachedPage );
+ },
+ error: function( xhr, textStatus, errorThrown ) {
+ //set base back to current path
+ if( base ) {
+ base.set( path.get() );
+ }
+
+ // Add error info to our triggerData.
+ triggerData.xhr = xhr;
+ triggerData.textStatus = textStatus;
+ triggerData.errorThrown = errorThrown;
+
+ var plfEvent = new $.Event( "pageloadfailed" );
+
+ // Let listeners know the page load failed.
+ settings.pageContainer.trigger( plfEvent, triggerData );
+
+ // If the default behavior is prevented, stop here!
+ // Note that it is the responsibility of the listener/handler
+ // that called preventDefault(), to resolve/reject the
+ // deferred object within the triggerData.
+ if( plfEvent.isDefaultPrevented() ){
+ return;
+ }
+
+ // Remove loading message.
+ if ( settings.showLoadMsg ) {
+
+ // Remove loading message.
+ hideMsg();
+
+ // show error message
+ $.mobile.showPageLoadingMsg( $.mobile.pageLoadErrorMessageTheme, $.mobile.pageLoadErrorMessage, true );
+
+ // hide after delay
+ setTimeout( $.mobile.hidePageLoadingMsg, 1500 );
+ }
+
+ deferred.reject( absUrl, options );
+ }
+ });
+ }
+
+ return deferred.promise();
+ };
+
+ $.mobile.loadPage.defaults = {
+ type: "get",
+ data: undefined,
+ reloadPage: false,
+ role: undefined, // By default we rely on the role defined by the @data-role attribute.
+ showLoadMsg: false,
+ pageContainer: undefined,
+ loadMsgDelay: 50 // This delay allows loads that pull from browser cache to occur without showing the loading message.
+ };
+
+ // Show a specific page in the page container.
+ $.mobile.changePage = function( toPage, options ) {
+ // If we are in the midst of a transition, queue the current request.
+ // We'll call changePage() once we're done with the current transition to
+ // service the request.
+ if( isPageTransitioning ) {
+ pageTransitionQueue.unshift( arguments );
+ return;
+ }
+
+ var settings = $.extend( {}, $.mobile.changePage.defaults, options );
+
+ // Make sure we have a pageContainer to work with.
+ settings.pageContainer = settings.pageContainer || $.mobile.pageContainer;
+
+ // Make sure we have a fromPage.
+ settings.fromPage = settings.fromPage || $.mobile.activePage;
+
+ var mpc = settings.pageContainer,
+ pbcEvent = new $.Event( "pagebeforechange" ),
+ triggerData = { toPage: toPage, options: settings };
+
+ // Let listeners know we're about to change the current page.
+ mpc.trigger( pbcEvent, triggerData );
+
+ // If the default behavior is prevented, stop here!
+ if( pbcEvent.isDefaultPrevented() ){
+ return;
+ }
+
+ // We allow "pagebeforechange" observers to modify the toPage in the trigger
+ // data to allow for redirects. Make sure our toPage is updated.
+
+ toPage = triggerData.toPage;
+
+ // Set the isPageTransitioning flag to prevent any requests from
+ // entering this method while we are in the midst of loading a page
+ // or transitioning.
+
+ isPageTransitioning = true;
+
+ // If the caller passed us a url, call loadPage()
+ // to make sure it is loaded into the DOM. We'll listen
+ // to the promise object it returns so we know when
+ // it is done loading or if an error ocurred.
+ if ( typeof toPage == "string" ) {
+ $.mobile.loadPage( toPage, settings )
+ .done(function( url, options, newPage, dupCachedPage ) {
+ isPageTransitioning = false;
+ options.duplicateCachedPage = dupCachedPage;
+ $.mobile.changePage( newPage, options );
+ })
+ .fail(function( url, options ) {
+ isPageTransitioning = false;
+
+ //clear out the active button state
+ removeActiveLinkClass( true );
+
+ //release transition lock so navigation is free again
+ releasePageTransitionLock();
+ settings.pageContainer.trigger( "pagechangefailed", triggerData );
+ });
+ return;
+ }
+
+ // If we are going to the first-page of the application, we need to make
+ // sure settings.dataUrl is set to the application document url. This allows
+ // us to avoid generating a document url with an id hash in the case where the
+ // first-page of the document has an id attribute specified.
+ if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl ) {
+ settings.dataUrl = documentUrl.hrefNoHash;
+ }
+
+ // The caller passed us a real page DOM element. Update our
+ // internal state and then trigger a transition to the page.
+ var fromPage = settings.fromPage,
+ url = ( settings.dataUrl && path.convertUrlToDataUrl( settings.dataUrl ) ) || toPage.jqmData( "url" ),
+ // The pageUrl var is usually the same as url, except when url is obscured as a dialog url. pageUrl always contains the file path
+ pageUrl = url,
+ fileUrl = path.getFilePath( url ),
+ active = urlHistory.getActive(),
+ activeIsInitialPage = urlHistory.activeIndex === 0,
+ historyDir = 0,
+ pageTitle = document.title,
+ isDialog = settings.role === "dialog" || toPage.jqmData( "role" ) === "dialog";
+
+ // By default, we prevent changePage requests when the fromPage and toPage
+ // are the same element, but folks that generate content manually/dynamically
+ // and reuse pages want to be able to transition to the same page. To allow
+ // this, they will need to change the default value of allowSamePageTransition
+ // to true, *OR*, pass it in as an option when they manually call changePage().
+ // It should be noted that our default transition animations assume that the
+ // formPage and toPage are different elements, so they may behave unexpectedly.
+ // It is up to the developer that turns on the allowSamePageTransitiona option
+ // to either turn off transition animations, or make sure that an appropriate
+ // animation transition is used.
+ if( fromPage && fromPage[0] === toPage[0] && !settings.allowSamePageTransition ) {
+ isPageTransitioning = false;
+ mpc.trigger( "pagechange", triggerData );
+ return;
+ }
+
+ // We need to make sure the page we are given has already been enhanced.
+ enhancePage( toPage, settings.role );
+
+ // If the changePage request was sent from a hashChange event, check to see if the
+ // page is already within the urlHistory stack. If so, we'll assume the user hit
+ // the forward/back button and will try to match the transition accordingly.
+ if( settings.fromHashChange ) {
+ urlHistory.directHashChange({
+ currentUrl: url,
+ isBack: function() { historyDir = -1; },
+ isForward: function() { historyDir = 1; }
+ });
+ }
+
+ // Kill the keyboard.
+ // XXX_jblas: We need to stop crawling the entire document to kill focus. Instead,
+ // we should be tracking focus with a delegate() handler so we already have
+ // the element in hand at this point.
+ // Wrap this in a try/catch block since IE9 throw "Unspecified error" if document.activeElement
+ // is undefined when we are in an IFrame.
+ try {
+ if(document.activeElement && document.activeElement.nodeName.toLowerCase() != 'body') {
+ $(document.activeElement).blur();
+ } else {
+ $( "input:focus, textarea:focus, select:focus" ).blur();
+ }
+ } catch(e) {}
+
+ // If we're displaying the page as a dialog, we don't want the url
+ // for the dialog content to be used in the hash. Instead, we want
+ // to append the dialogHashKey to the url of the current page.
+ if ( isDialog && active ) {
+ // on the initial page load active.url is undefined and in that case should
+ // be an empty string. Moving the undefined -> empty string back into
+ // urlHistory.addNew seemed imprudent given undefined better represents
+ // the url state
+ url = ( active.url || "" ) + dialogHashKey;
+ }
+
+ // Set the location hash.
+ if( settings.changeHash !== false && url ) {
+ //disable hash listening temporarily
+ urlHistory.ignoreNextHashChange = true;
+ //update hash and history
+ path.set( url );
+ }
+
+ // if title element wasn't found, try the page div data attr too
+ // If this is a deep-link or a reload ( active === undefined ) then just use pageTitle
+ var newPageTitle = ( !active )? pageTitle : toPage.jqmData( "title" ) || toPage.children(":jqmData(role='header')").find(".ui-title" ).getEncodedText();
+ if( !!newPageTitle && pageTitle == document.title ) {
+ pageTitle = newPageTitle;
+ }
+ if ( !toPage.jqmData( "title" ) ) {
+ toPage.jqmData( "title", pageTitle );
+ }
+
+ // Make sure we have a transition defined.
+ settings.transition = settings.transition
+ || ( ( historyDir && !activeIsInitialPage ) ? active.transition : undefined )
+ || ( isDialog ? $.mobile.defaultDialogTransition : $.mobile.defaultPageTransition );
+
+ //add page to history stack if it's not back or forward
+ if( !historyDir ) {
+ urlHistory.addNew( url, settings.transition, pageTitle, pageUrl, settings.role );
+ }
+
+ //set page title
+ document.title = urlHistory.getActive().title;
+
+ //set "toPage" as activePage
+ $.mobile.activePage = toPage;
+
+ // If we're navigating back in the URL history, set reverse accordingly.
+ settings.reverse = settings.reverse || historyDir < 0;
+
+ transitionPages( toPage, fromPage, settings.transition, settings.reverse )
+ .done(function( name, reverse, $to, $from, alreadyFocused ) {
+ removeActiveLinkClass();
+
+ //if there's a duplicateCachedPage, remove it from the DOM now that it's hidden
+ if ( settings.duplicateCachedPage ) {
+ settings.duplicateCachedPage.remove();
+ }
+
+ // Send focus to the newly shown page. Moved from promise .done binding in transitionPages
+ // itself to avoid ie bug that reports offsetWidth as > 0 (core check for visibility)
+ // despite visibility: hidden addresses issue #2965
+ // https://github.com/jquery/jquery-mobile/issues/2965
+ if( !alreadyFocused ){
+ $.mobile.focusPage( toPage );
+ }
+
+ releasePageTransitionLock();
+
+ // Let listeners know we're all done changing the current page.
+ mpc.trigger( "pagechange", triggerData );
+ });
+ };
+
+ $.mobile.changePage.defaults = {
+ transition: undefined,
+ reverse: false,
+ changeHash: true,
+ fromHashChange: false,
+ role: undefined, // By default we rely on the role defined by the @data-role attribute.
+ duplicateCachedPage: undefined,
+ pageContainer: undefined,
+ showLoadMsg: true, //loading message shows by default when pages are being fetched during changePage
+ dataUrl: undefined,
+ fromPage: undefined,
+ allowSamePageTransition: false
+ };
+
+/* Event Bindings - hashchange, submit, and click */
+ function findClosestLink( ele )
+ {
+ while ( ele ) {
+ // Look for the closest element with a nodeName of "a".
+ // Note that we are checking if we have a valid nodeName
+ // before attempting to access it. This is because the
+ // node we get called with could have originated from within
+ // an embedded SVG document where some symbol instance elements
+ // don't have nodeName defined on them, or strings are of type
+ // SVGAnimatedString.
+ if ( ( typeof ele.nodeName === "string" ) && ele.nodeName.toLowerCase() == "a" ) {
+ break;
+ }
+ ele = ele.parentNode;
+ }
+ return ele;
+ }
+
+ // The base URL for any given element depends on the page it resides in.
+ function getClosestBaseUrl( ele )
+ {
+ // Find the closest page and extract out its url.
+ var url = $( ele ).closest( ".ui-page" ).jqmData( "url" ),
+ base = documentBase.hrefNoHash;
+
+ if ( !url || !path.isPath( url ) ) {
+ url = base;
+ }
+
+ return path.makeUrlAbsolute( url, base);
+ }
+
+
+ //The following event bindings should be bound after mobileinit has been triggered
+ //the following function is called in the init file
+ $.mobile._registerInternalEvents = function(){
+
+ //bind to form submit events, handle with Ajax
+ $( document ).delegate( "form", "submit", function( event ) {
+ var $this = $( this );
+
+ if( !$.mobile.ajaxEnabled ||
+ // test that the form is, itself, ajax false
+ $this.is(":jqmData(ajax='false')") ||
+ // test that $.mobile.ignoreContentEnabled is set and
+ // the form or one of it's parents is ajax=false
+ !$this.jqmHijackable().length ) {
+ return;
+ }
+
+ var type = $this.attr( "method" ),
+ target = $this.attr( "target" ),
+ url = $this.attr( "action" );
+
+ // If no action is specified, browsers default to using the
+ // URL of the document containing the form. Since we dynamically
+ // pull in pages from external documents, the form should submit
+ // to the URL for the source document of the page containing
+ // the form.
+ if ( !url ) {
+ // Get the @data-url for the page containing the form.
+ url = getClosestBaseUrl( $this );
+ if ( url === documentBase.hrefNoHash ) {
+ // The url we got back matches the document base,
+ // which means the page must be an internal/embedded page,
+ // so default to using the actual document url as a browser
+ // would.
+ url = documentUrl.hrefNoSearch;
+ }
+ }
+
+ url = path.makeUrlAbsolute( url, getClosestBaseUrl($this) );
+
+ //external submits use regular HTTP
+ if( path.isExternal( url ) || target ) {
+ return;
+ }
+
+ $.mobile.changePage(
+ url,
+ {
+ type: type && type.length && type.toLowerCase() || "get",
+ data: $this.serialize(),
+ transition: $this.jqmData( "transition" ),
+ direction: $this.jqmData( "direction" ),
+ reloadPage: true
+ }
+ );
+ event.preventDefault();
+ });
+
+ //add active state on vclick
+ $( document ).bind( "vclick", function( event ) {
+ // if this isn't a left click we don't care. Its important to note
+ // that when the virtual event is generated it will create the which attr
+ if ( event.which > 1 || !$.mobile.linkBindingEnabled ) {
+ return;
+ }
+
+ var link = findClosestLink( event.target );
+
+ // split from the previous return logic to avoid find closest where possible
+ // TODO teach $.mobile.hijackable to operate on raw dom elements so the link wrapping
+ // can be avoided
+ if ( !$(link).jqmHijackable().length ) {
+ return;
+ }
+
+ if ( link ) {
+ if ( path.parseUrl( link.getAttribute( "href" ) || "#" ).hash !== "#" ) {
+ removeActiveLinkClass( true );
+ $activeClickedLink = $( link ).closest( ".ui-btn" ).not( ".ui-disabled" );
+ $activeClickedLink.addClass( $.mobile.activeBtnClass );
+ $( "." + $.mobile.activePageClass + " .ui-btn" ).not( link ).blur();
+
+ // By caching the href value to data and switching the href to a #, we can avoid address bar showing in iOS. The click handler resets the href during its initial steps if this data is present
+ $( link )
+ .jqmData( "href", $( link ).attr( "href" ) )
+ .attr( "href", "#" );
+ }
+ }
+ });
+
+ // click routing - direct to HTTP or Ajax, accordingly
+ $( document ).bind( "click", function( event ) {
+ if( !$.mobile.linkBindingEnabled ){
+ return;
+ }
+
+ var link = findClosestLink( event.target ), $link = $( link ), httpCleanup;
+
+ // If there is no link associated with the click or its not a left
+ // click we want to ignore the click
+ // TODO teach $.mobile.hijackable to operate on raw dom elements so the link wrapping
+ // can be avoided
+ if ( !link || event.which > 1 || !$link.jqmHijackable().length ) {
+ return;
+ }
+
+ //remove active link class if external (then it won't be there if you come back)
+ httpCleanup = function(){
+ window.setTimeout( function() { removeActiveLinkClass( true ); }, 200 );
+ };
+
+ // If there's data cached for the real href value, set the link's href back to it again. This pairs with an address bar workaround from the vclick handler
+ if( $link.jqmData( "href" ) ){
+ $link.attr( "href", $link.jqmData( "href" ) );
+ }
+
+ //if there's a data-rel=back attr, go back in history
+ if( $link.is( ":jqmData(rel='back')" ) ) {
+ window.history.back();
+ return false;
+ }
+
+ var baseUrl = getClosestBaseUrl( $link ),
+
+ //get href, if defined, otherwise default to empty hash
+ href = path.makeUrlAbsolute( $link.attr( "href" ) || "#", baseUrl );
+
+ //if ajax is disabled, exit early
+ if( !$.mobile.ajaxEnabled && !path.isEmbeddedPage( href ) ){
+ httpCleanup();
+ //use default click handling
+ return;
+ }
+
+ // XXX_jblas: Ideally links to application pages should be specified as
+ // an url to the application document with a hash that is either
+ // the site relative path or id to the page. But some of the
+ // internal code that dynamically generates sub-pages for nested
+ // lists and select dialogs, just write a hash in the link they
+ // create. This means the actual URL path is based on whatever
+ // the current value of the base tag is at the time this code
+ // is called. For now we are just assuming that any url with a
+ // hash in it is an application page reference.
+ if ( href.search( "#" ) != -1 ) {
+ href = href.replace( /[^#]*#/, "" );
+ if ( !href ) {
+ //link was an empty hash meant purely
+ //for interaction, so we ignore it.
+ event.preventDefault();
+ return;
+ } else if ( path.isPath( href ) ) {
+ //we have apath so make it the href we want to load.
+ href = path.makeUrlAbsolute( href, baseUrl );
+ } else {
+ //we have a simple id so use the documentUrl as its base.
+ href = path.makeUrlAbsolute( "#" + href, documentUrl.hrefNoHash );
+ }
+ }
+
+ // Should we handle this link, or let the browser deal with it?
+ var useDefaultUrlHandling = $link.is( "[rel='external']" ) || $link.is( ":jqmData(ajax='false')" ) || $link.is( "[target]" ),
+
+ // Some embedded browsers, like the web view in Phone Gap, allow cross-domain XHR
+ // requests if the document doing the request was loaded via the file:// protocol.
+ // This is usually to allow the application to "phone home" and fetch app specific
+ // data. We normally let the browser handle external/cross-domain urls, but if the
+ // allowCrossDomainPages option is true, we will allow cross-domain http/https
+ // requests to go through our page loading logic.
+ isCrossDomainPageLoad = ( $.mobile.allowCrossDomainPages && documentUrl.protocol === "file:" && href.search( /^https?:/ ) != -1 ),
+
+ //check for protocol or rel and its not an embedded page
+ //TODO overlap in logic from isExternal, rel=external check should be
+ // moved into more comprehensive isExternalLink
+ isExternal = useDefaultUrlHandling || ( path.isExternal( href ) && !isCrossDomainPageLoad );
+
+ if( isExternal ) {
+ httpCleanup();
+ //use default click handling
+ return;
+ }
+
+ //use ajax
+ var transition = $link.jqmData( "transition" ),
+ direction = $link.jqmData( "direction" ),
+ reverse = ( direction && direction === "reverse" ) ||
+ // deprecated - remove by 1.0
+ $link.jqmData( "back" ),
+
+ //this may need to be more specific as we use data-rel more
+ role = $link.attr( "data-" + $.mobile.ns + "rel" ) || undefined;
+
+ $.mobile.changePage( href, { transition: transition, reverse: reverse, role: role } );
+ event.preventDefault();
+ });
+
+ //prefetch pages when anchors with data-prefetch are encountered
+ $( document ).delegate( ".ui-page", "pageshow.prefetch", function() {
+ var urls = [];
+ $( this ).find( "a:jqmData(prefetch)" ).each(function(){
+ var $link = $(this),
+ url = $link.attr( "href" );
+
+ if ( url && $.inArray( url, urls ) === -1 ) {
+ urls.push( url );
+
+ $.mobile.loadPage( url, {role: $link.attr("data-" + $.mobile.ns + "rel")} );
+ }
+ });
+ });
+
+ $.mobile._handleHashChange = function( hash ) {
+ //find first page via hash
+ var to = path.stripHash( hash ),
+ //transition is false if it's the first page, undefined otherwise (and may be overridden by default)
+ transition = $.mobile.urlHistory.stack.length === 0 ? "none" : undefined,
+
+ // default options for the changPage calls made after examining the current state
+ // of the page and the hash
+ changePageOptions = {
+ transition: transition,
+ changeHash: false,
+ fromHashChange: true
+ };
+
+ //if listening is disabled (either globally or temporarily), or it's a dialog hash
+ if( !$.mobile.hashListeningEnabled || urlHistory.ignoreNextHashChange ) {
+ urlHistory.ignoreNextHashChange = false;
+ return;
+ }
+
+ // special case for dialogs
+ if( urlHistory.stack.length > 1 && to.indexOf( dialogHashKey ) > -1 ) {
+
+ // If current active page is not a dialog skip the dialog and continue
+ // in the same direction
+ if(!$.mobile.activePage.is( ".ui-dialog" )) {
+ //determine if we're heading forward or backward and continue accordingly past
+ //the current dialog
+ urlHistory.directHashChange({
+ currentUrl: to,
+ isBack: function() { window.history.back(); },
+ isForward: function() { window.history.forward(); }
+ });
+
+ // prevent changePage()
+ return;
+ } else {
+ // if the current active page is a dialog and we're navigating
+ // to a dialog use the dialog objected saved in the stack
+ urlHistory.directHashChange({
+ currentUrl: to,
+
+ // regardless of the direction of the history change
+ // do the following
+ either: function( isBack ) {
+ var active = $.mobile.urlHistory.getActive();
+
+ to = active.pageUrl;
+
+ // make sure to set the role, transition and reversal
+ // as most of this is lost by the domCache cleaning
+ $.extend( changePageOptions, {
+ role: active.role,
+ transition: active.transition,
+ reverse: isBack
+ });
+ }
+ });
+ }
+ }
+
+ //if to is defined, load it
+ if ( to ) {
+ // At this point, 'to' can be one of 3 things, a cached page element from
+ // a history stack entry, an id, or site-relative/absolute URL. If 'to' is
+ // an id, we need to resolve it against the documentBase, not the location.href,
+ // since the hashchange could've been the result of a forward/backward navigation
+ // that crosses from an external page/dialog to an internal page/dialog.
+ to = ( typeof to === "string" && !path.isPath( to ) ) ? ( path.makeUrlAbsolute( '#' + to, documentBase ) ) : to;
+ $.mobile.changePage( to, changePageOptions );
+ } else {
+ //there's no hash, go to the first page in the dom
+ $.mobile.changePage( $.mobile.firstPage, changePageOptions );
+ }
+ };
+
+ //hashchange event handler
+ $window.bind( "hashchange", function( e, triggered ) {
+ $.mobile._handleHashChange( location.hash );
+ });
+
+ //set page min-heights to be device specific
+ $( document ).bind( "pageshow", resetActivePageHeight );
+ $( window ).bind( "throttledresize", resetActivePageHeight );
+
+ };//_registerInternalEvents callback
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: history.pushState support, layered on top of hashchange.
+//>>label: Pushstate Support
+//>>group: Navigation
+
+define( [ "jquery", "./jquery.mobile.navigation", "../external/requirejs/depend!./jquery.mobile.hashchange[jquery]" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+( function( $, window ) {
+ // For now, let's Monkeypatch this onto the end of $.mobile._registerInternalEvents
+ // Scope self to pushStateHandler so we can reference it sanely within the
+ // methods handed off as event handlers
+ var pushStateHandler = {},
+ self = pushStateHandler,
+ $win = $( window ),
+ url = $.mobile.path.parseUrl( location.href );
+
+ $.extend( pushStateHandler, {
+ // TODO move to a path helper, this is rather common functionality
+ initialFilePath: (function() {
+ return url.pathname + url.search;
+ })(),
+
+ initialHref: url.hrefNoHash,
+
+ state: function() {
+ return {
+ hash: location.hash || "#" + self.initialFilePath,
+ title: document.title,
+
+ // persist across refresh
+ initialHref: self.initialHref
+ };
+ },
+
+ resetUIKeys: function( url ) {
+ var dialog = $.mobile.dialogHashKey,
+ subkey = "&" + $.mobile.subPageUrlKey,
+ dialogIndex = url.indexOf( dialog );
+
+ if( dialogIndex > -1 ) {
+ url = url.slice( 0, dialogIndex ) + "#" + url.slice( dialogIndex );
+ } else if( url.indexOf( subkey ) > -1 ) {
+ url = url.split( subkey ).join( "#" + subkey );
+ }
+
+ return url;
+ },
+
+ hashValueAfterReset: function( url ) {
+ var resetUrl = self.resetUIKeys( url );
+ return $.mobile.path.parseUrl( resetUrl ).hash;
+ },
+
+ // TODO sort out a single barrier to hashchange functionality
+ nextHashChangePrevented: function( value ) {
+ $.mobile.urlHistory.ignoreNextHashChange = value;
+ self.onHashChangeDisabled = value;
+ },
+
+ // on hash change we want to clean up the url
+ // NOTE this takes place *after* the vanilla navigation hash change
+ // handling has taken place and set the state of the DOM
+ onHashChange: function( e ) {
+ // disable this hash change
+ if( self.onHashChangeDisabled ){
+ return;
+ }
+
+ var href, state,
+ hash = location.hash,
+ isPath = $.mobile.path.isPath( hash ),
+ resolutionUrl = isPath ? location.href : $.mobile.getDocumentUrl();
+
+ hash = isPath ? hash.replace( "#", "" ) : hash;
+
+
+ // propulate the hash when its not available
+ state = self.state();
+
+ // make the hash abolute with the current href
+ href = $.mobile.path.makeUrlAbsolute( hash, resolutionUrl );
+
+ if ( isPath ) {
+ href = self.resetUIKeys( href );
+ }
+
+ // replace the current url with the new href and store the state
+ // Note that in some cases we might be replacing an url with the
+ // same url. We do this anyways because we need to make sure that
+ // all of our history entries have a state object associated with
+ // them. This allows us to work around the case where window.history.back()
+ // is called to transition from an external page to an embedded page.
+ // In that particular case, a hashchange event is *NOT* generated by the browser.
+ // Ensuring each history entry has a state object means that onPopState()
+ // will always trigger our hashchange callback even when a hashchange event
+ // is not fired.
+ history.replaceState( state, document.title, href );
+ },
+
+ // on popstate (ie back or forward) we need to replace the hash that was there previously
+ // cleaned up by the additional hash handling
+ onPopState: function( e ) {
+ var poppedState = e.originalEvent.state,
+ timeout, fromHash, toHash, hashChanged;
+
+ // if there's no state its not a popstate we care about, eg chrome's initial popstate
+ if( poppedState ) {
+ // the active url in the history stack will still be from the previous state
+ // so we can use it to verify if a hashchange will be fired from the popstate
+ fromHash = self.hashValueAfterReset( $.mobile.urlHistory.getActive().url );
+
+ // the hash stored in the state popped off the stack will be our currenturl or
+ // the url to which we wish to navigate
+ toHash = self.hashValueAfterReset( poppedState.hash.replace("#", "") );
+
+ // if the hashes of the urls are different we must assume that the browser
+ // will fire a hashchange
+ hashChanged = fromHash !== toHash;
+
+ // unlock hash handling once the hashchange caused be the popstate has fired
+ if( hashChanged ) {
+ $win.one( "hashchange.pushstate", function() {
+ self.nextHashChangePrevented( false );
+ });
+ }
+
+ // enable hash handling for the the _handleHashChange call
+ self.nextHashChangePrevented( false );
+
+ // change the page based on the hash
+ $.mobile._handleHashChange( poppedState.hash );
+
+ // only prevent another hash change handling if a hash change will be fired
+ // by the browser
+ if( hashChanged ) {
+ // disable hash handling until one of the above timers fires
+ self.nextHashChangePrevented( true );
+ }
+ }
+ },
+
+ init: function() {
+ $win.bind( "hashchange", self.onHashChange );
+
+ // Handle popstate events the occur through history changes
+ $win.bind( "popstate", self.onPopState );
+
+ // if there's no hash, we need to replacestate for returning to home
+ if ( location.hash === "" ) {
+ history.replaceState( self.state(), document.title, location.href );
+ }
+ }
+ });
+
+ $( function() {
+ if( $.mobile.pushStateEnabled && $.support.pushState ){
+ pushStateHandler.init();
+ }
+ });
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Adds class to make elements hidden to A grade browsers
+//>>label: “nojs” Classes
+//>>group: Utilities
+
+define( [ "jquery" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$( document ).bind( "pagecreate create", function( e ){
+ $( ":jqmData(role='nojs')", e.target ).addClass( "ui-nojs" );
+
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Basic page definition and formatting.
+//>>label: Page Creation
+//>>group: Core
+
+define( [ "jquery", "./jquery.mobile.widget" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.page", $.mobile.widget, {
+ options: {
+ theme: "c",
+ domCache: false,
+ keepNativeDefault: ":jqmData(role='none'), :jqmData(role='nojs')"
+ },
+
+ _create: function() {
+
+ var self = this;
+
+ // if false is returned by the callbacks do not create the page
+ if( self._trigger( "beforecreate" ) === false ){
+ return false;
+ }
+
+ self.element
+ .attr( "tabindex", "0" )
+ .addClass( "ui-page ui-body-" + self.options.theme )
+ .bind( "pagebeforehide", function(){
+ self.removeContainerBackground();
+ } )
+ .bind( "pagebeforeshow", function(){
+ self.setContainerBackground();
+ } );
+
+ },
+
+ removeContainerBackground: function(){
+ $.mobile.pageContainer.removeClass( "ui-overlay-" + $.mobile.getInheritedTheme( this.element.parent() ) );
+ },
+
+ // set the page container background to the page theme
+ setContainerBackground: function( theme ){
+ if( this.options.theme ){
+ $.mobile.pageContainer.addClass( "ui-overlay-" + ( theme || this.options.theme ) );
+ }
+ },
+
+ keepNativeSelector: function() {
+ var options = this.options,
+ keepNativeDefined = options.keepNative && $.trim(options.keepNative);
+
+ if( keepNativeDefined && options.keepNative !== options.keepNativeDefault ){
+ return [options.keepNative, options.keepNativeDefault].join(", ");
+ }
+
+ return options.keepNativeDefault;
+ }
+});
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Theming and layout of headers, footers, and content areas
+//>>label: Page Sections
+//>>group: Core
+
+define( [ "jquery", "./jquery.mobile.page", "./jquery.mobile.core", "./jquery.mobile.buttonMarkup" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.mobile.page.prototype.options.backBtnText = "Back";
+$.mobile.page.prototype.options.addBackBtn = false;
+$.mobile.page.prototype.options.backBtnTheme = null;
+$.mobile.page.prototype.options.headerTheme = "a";
+$.mobile.page.prototype.options.footerTheme = "a";
+$.mobile.page.prototype.options.contentTheme = null;
+
+$( document ).delegate( ":jqmData(role='page'), :jqmData(role='dialog')", "pagecreate", function( e ) {
+
+ var $page = $( this ),
+ o = $page.data( "page" ).options,
+ pageRole = $page.jqmData( "role" ),
+ pageTheme = o.theme;
+
+ $( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this )
+ .jqmEnhanceable()
+ .each(function() {
+
+ var $this = $( this ),
+ role = $this.jqmData( "role" ),
+ theme = $this.jqmData( "theme" ),
+ contentTheme = theme || o.contentTheme || ( pageRole === "dialog" && pageTheme ),
+ $headeranchors,
+ leftbtn,
+ rightbtn,
+ backBtn;
+
+ $this.addClass( "ui-" + role );
+
+ //apply theming and markup modifications to page,header,content,footer
+ if ( role === "header" || role === "footer" ) {
+
+ var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;
+
+ $this
+ //add theme class
+ .addClass( "ui-bar-" + thisTheme )
+ // Add ARIA role
+ .attr( "role", role === "header" ? "banner" : "contentinfo" );
+
+ if( role === "header") {
+ // Right,left buttons
+ $headeranchors = $this.children( "a" );
+ leftbtn = $headeranchors.hasClass( "ui-btn-left" );
+ rightbtn = $headeranchors.hasClass( "ui-btn-right" );
+
+ leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
+
+ rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
+ }
+
+ // Auto-add back btn on pages beyond first view
+ if ( o.addBackBtn &&
+ role === "header" &&
+ $( ".ui-page" ).length > 1 &&
+ $page.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
+ !leftbtn ) {
+
+ backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
+ // If theme is provided, override default inheritance
+ .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
+ .prependTo( $this );
+ }
+
+ // Page title
+ $this.children( "h1, h2, h3, h4, h5, h6" )
+ .addClass( "ui-title" )
+ // Regardless of h element number in src, it becomes h1 for the enhanced page
+ .attr({
+ "role": "heading",
+ "aria-level": "1"
+ });
+
+ } else if ( role === "content" ) {
+ if ( contentTheme ) {
+ $this.addClass( "ui-body-" + ( contentTheme ) );
+ }
+
+ // Add ARIA role
+ $this.attr( "role", "main" );
+ }
+ });
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Assorted tests to qualify browsers by detecting features
+//>>label: Support Tests
+//>>group: Core
+//>>required: true
+
+define( [ "jquery", "./jquery.mobile.media", "./jquery.mobile.core" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+var fakeBody = $( "<body>" ).prependTo( "html" ),
+ fbCSS = fakeBody[ 0 ].style,
+ vendors = [ "Webkit", "Moz", "O" ],
+ webos = "palmGetResource" in window, //only used to rule out scrollTop
+ operamini = window.operamini && ({}).toString.call( window.operamini ) === "[object OperaMini]",
+ bb = window.blackberry; //only used to rule out box shadow, as it's filled opaque on BB
+
+// thx Modernizr
+function propExists( prop ) {
+ var uc_prop = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ),
+ props = ( prop + " " + vendors.join( uc_prop + " " ) + uc_prop ).split( " " );
+
+ for ( var v in props ){
+ if ( fbCSS[ props[ v ] ] !== undefined ) {
+ return true;
+ }
+ }
+}
+
+function validStyle( prop, value, check_vend ) {
+ var div = document.createElement('div'),
+ uc = function( txt ) {
+ return txt.charAt( 0 ).toUpperCase() + txt.substr( 1 )
+ },
+ vend_pref = function( vend ) {
+ return "-" + vend.charAt( 0 ).toLowerCase() + vend.substr( 1 ) + "-";
+ },
+ check_style = function( vend ) {
+ var vend_prop = vend_pref( vend ) + prop + ": " + value + ";",
+ uc_vend = uc( vend ),
+ propStyle = uc_vend + uc( prop );
+
+ div.setAttribute( "style", vend_prop );
+
+ if( !!div.style[ propStyle ] ) {
+ ret = true;
+ }
+ },
+ check_vends = check_vend ? [ check_vend ] : vendors,
+ ret;
+
+ for( i = 0; i < check_vends.length; i++ ) {
+ check_style( check_vends[i] );
+ }
+ return !!ret;
+}
+
+// Thanks to Modernizr src for this test idea. `perspective` check is limited to Moz to prevent a false positive for 3D transforms on Android.
+function transform3dTest() {
+ var prop = "transform-3d";
+ return validStyle( 'perspective', '10px', 'moz' ) || $.mobile.media( "(-" + vendors.join( "-" + prop + "),(-" ) + "-" + prop + "),(" + prop + ")" );
+}
+
+// Test for dynamic-updating base tag support ( allows us to avoid href,src attr rewriting )
+function baseTagTest() {
+ var fauxBase = location.protocol + "//" + location.host + location.pathname + "ui-dir/",
+ base = $( "head base" ),
+ fauxEle = null,
+ href = "",
+ link, rebase;
+
+ if ( !base.length ) {
+ base = fauxEle = $( "<base>", { "href": fauxBase }).appendTo( "head" );
+ } else {
+ href = base.attr( "href" );
+ }
+
+ link = $( "<a href='testurl' />" ).prependTo( fakeBody );
+ rebase = link[ 0 ].href;
+ base[ 0 ].href = href || location.pathname;
+
+ if ( fauxEle ) {
+ fauxEle.remove();
+ }
+ return rebase.indexOf( fauxBase ) === 0;
+}
+
+
+// non-UA-based IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
+// allows for inclusion of IE 6+, including Windows Mobile 7
+$.extend( $.mobile, { browser: {} } );
+$.mobile.browser.ie = (function() {
+ var v = 3,
+ div = document.createElement( "div" ),
+ a = div.all || [];
+
+ // added {} to silence closure compiler warnings. registering my dislike of all things
+ // overly clever here for future reference
+ while ( div.innerHTML = "<!--[if gt IE " + ( ++v ) + "]><br><![endif]-->", a[ 0 ] ){};
+
+ return v > 4 ? v : !v;
+})();
+
+
+$.extend( $.support, {
+ orientation: "orientation" in window && "onorientationchange" in window,
+ touch: "ontouchend" in document,
+ cssTransitions: "WebKitTransitionEvent" in window || validStyle( 'transition', 'height 100ms linear' ),
+ pushState: "pushState" in history && "replaceState" in history,
+ mediaquery: $.mobile.media( "only all" ),
+ cssPseudoElement: !!propExists( "content" ),
+ touchOverflow: !!propExists( "overflowScrolling" ),
+ cssTransform3d: transform3dTest(),
+ boxShadow: !!propExists( "boxShadow" ) && !bb,
+ scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini,
+ dynamicBaseTag: baseTagTest()
+});
+
+fakeBody.remove();
+
+
+// $.mobile.ajaxBlacklist is used to override ajaxEnabled on platforms that have known conflicts with hash history updates (BB5, Symbian)
+// or that generally work better browsing in regular http for full page refreshes (Opera Mini)
+// Note: This detection below is used as a last resort.
+// We recommend only using these detection methods when all other more reliable/forward-looking approaches are not possible
+var nokiaLTE7_3 = (function(){
+
+ var ua = window.navigator.userAgent;
+
+ //The following is an attempt to match Nokia browsers that are running Symbian/s60, with webkit, version 7.3 or older
+ return ua.indexOf( "Nokia" ) > -1 &&
+ ( ua.indexOf( "Symbian/3" ) > -1 || ua.indexOf( "Series60/5" ) > -1 ) &&
+ ua.indexOf( "AppleWebKit" ) > -1 &&
+ ua.match( /(BrowserNG|NokiaBrowser)\/7\.[0-3]/ );
+})();
+
+// Support conditions that must be met in order to proceed
+// default enhanced qualifications are media query support OR IE 7+
+$.mobile.gradeA = function(){
+ return $.support.mediaquery || $.mobile.browser.ie && $.mobile.browser.ie >= 7;
+};
+
+$.mobile.ajaxBlacklist =
+ // BlackBerry browsers, pre-webkit
+ window.blackberry && !window.WebKitPoint ||
+ // Opera Mini
+ operamini ||
+ // Symbian webkits pre 7.3
+ nokiaLTE7_3;
+
+// Lastly, this workaround is the only way we've found so far to get pre 7.3 Symbian webkit devices
+// to render the stylesheets when they're referenced before this script, as we'd recommend doing.
+// This simply reappends the CSS in place, which for some reason makes it apply
+if ( nokiaLTE7_3 ) {
+ $(function() {
+ $( "head link[rel='stylesheet']" ).attr( "rel", "alternate stylesheet" ).attr( "rel", "stylesheet" );
+ });
+}
+
+// For ruling out shadows via css
+if ( !$.support.boxShadow ) {
+ $( "html" ).addClass( "ui-mobile-nosupport-boxshadow" );
+}
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+/*
+* fallback transition for flip in non-3D supporting browsers (which tend to handle complex transitions poorly in general
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Animation styles and fallback transition definition for non-3D supporting browsers
+//>>label: Flip Transition
+//>>group: Transitions
+//>>css: ../css/structure/jquery.mobile.transition.flip.css
+
+define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+$.mobile.transitionFallbacks.flip = "fade";
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file
--- /dev/null
+/*
+* fallback transition for flow in non-3D supporting browsers (which tend to handle complex transitions poorly in general
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Animation styles and fallback transition definition for non-3D supporting browsers
+//>>label: Flow Transition
+//>>group: Transitions
+//>>css: ../css/structure/jquery.mobile.transition.flow.css
+
+define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+$.mobile.transitionFallbacks.flow = "fade";
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file
--- /dev/null
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Animated page change core logic and sequence handlers
+//>>label: Transition Core
+//>>group: Transitions
+//>>css: ../css/themes/default/jquery.mobile.theme.css, ../css/structure/jquery.mobile.transition.css
+
+define( [ "jquery", "./jquery.mobile.core" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+var createHandler = function( sequential ){
+
+ // Default to sequential
+ if( sequential === undefined ){
+ sequential = true;
+ }
+
+ return function( name, reverse, $to, $from ) {
+
+ var deferred = new $.Deferred(),
+ reverseClass = reverse ? " reverse" : "",
+ active = $.mobile.urlHistory.getActive(),
+ toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
+ screenHeight = $.mobile.getScreenHeight(),
+ maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
+ none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
+ toggleViewportClass = function(){
+ $.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
+ },
+ scrollPage = function(){
+ // By using scrollTo instead of silentScroll, we can keep things better in order
+ // Just to be precautios, disable scrollstart listening like silentScroll would
+ $.event.special.scrollstart.enabled = false;
+
+ window.scrollTo( 0, toScroll );
+
+ // reenable scrollstart listening like silentScroll would
+ setTimeout(function() {
+ $.event.special.scrollstart.enabled = true;
+ }, 150 );
+ },
+ cleanFrom = function(){
+ $from
+ .removeClass( $.mobile.activePageClass + " out in reverse " + name )
+ .height( "" );
+ },
+ startOut = function(){
+ // if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
+ if( !sequential ){
+ doneOut();
+ }
+ else {
+ $from.animationComplete( doneOut );
+ }
+
+ // Set the from page's height and start it transitioning out
+ // Note: setting an explicit height helps eliminate tiling in the transitions
+ $from
+ .height( screenHeight + $(window ).scrollTop() )
+ .addClass( name + " out" + reverseClass );
+ },
+
+ doneOut = function() {
+
+ if ( $from && sequential ) {
+ cleanFrom();
+ }
+
+ startIn();
+ },
+
+ startIn = function(){
+
+ $to.addClass( $.mobile.activePageClass );
+
+ // Send focus to page as it is now display: block
+ $.mobile.focusPage( $to );
+
+ // Set to page height
+ $to.height( screenHeight + toScroll );
+
+ scrollPage();
+
+ if( !none ){
+ $to.animationComplete( doneIn );
+ }
+
+ $to.addClass( name + " in" + reverseClass );
+
+ if( none ){
+ doneIn();
+ }
+
+ },
+
+ doneIn = function() {
+
+ if ( !sequential ) {
+
+ if( $from ){
+ cleanFrom();
+ }
+ }
+
+ $to
+ .removeClass( "out in reverse " + name )
+ .height( "" );
+
+ toggleViewportClass();
+
+ // In some browsers (iOS5), 3D transitions block the ability to scroll to the desired location during transition
+ // This ensures we jump to that spot after the fact, if we aren't there already.
+ if( $( window ).scrollTop() !== toScroll ){
+ scrollPage();
+ }
+
+ deferred.resolve( name, reverse, $to, $from, true );
+ };
+
+ toggleViewportClass();
+
+ if ( $from && !none ) {
+ startOut();
+ }
+ else {
+ doneOut();
+ }
+
+ return deferred.promise();
+ };
+}
+
+// generate the handlers from the above
+var sequentialHandler = createHandler(),
+ simultaneousHandler = createHandler( false );
+
+// Make our transition handler the public default.
+$.mobile.defaultTransitionHandler = sequentialHandler;
+
+//transition handler dictionary for 3rd party transitions
+$.mobile.transitionHandlers = {
+ "default": $.mobile.defaultTransitionHandler,
+ "sequential": sequentialHandler,
+ "simultaneous": simultaneousHandler
+};
+
+$.mobile.transitionFallbacks = {};
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file
--- /dev/null
+/*
+* fallback transition for pop in non-3D supporting browsers (which tend to handle complex transitions poorly in general
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Animation styles and fallback transition definition for non-3D supporting browsers
+//>>label: Pop Transition
+//>>group: Transitions
+//>>css: ../css/structure/jquery.mobile.transition.pop.css
+
+define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+$.mobile.transitionFallbacks.pop = "fade";
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file
--- /dev/null
+/*
+* fallback transition for slide in non-3D supporting browsers (which tend to handle complex transitions poorly in general
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Animation styles and fallback transition definition for non-3D supporting browsers
+//>>label: Slide Transition
+//>>group: Transitions
+//>>css: ../css/structure/jquery.mobile.transition.slide.css
+
+define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+// Use the simultaneous transition handler for slide transitions
+$.mobile.transitionHandlers.slide = $.mobile.transitionHandlers.simultaneous;
+
+// Set the slide transition's fallback to "fade"
+$.mobile.transitionFallbacks.slide = "fade";
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file
--- /dev/null
+/*
+* fallback transition for slidedown in non-3D supporting browsers (which tend to handle complex transitions poorly in general
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Animation styles and fallback transition definition for non-3D supporting browsers
+//>>label: Slidedown Transition
+//>>group: Transitions
+//>>css: ../css/structure/jquery.mobile.transition.slidedown.css
+
+define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+$.mobile.transitionFallbacks.slidedown = "fade";
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file
--- /dev/null
+/*
+* fallback transition for slidefade in non-3D supporting browsers (which tend to handle complex transitions poorly in general
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Animation styles and fallback transition definition for non-3D supporting browsers
+//>>label: Slidefade Transition
+//>>group: Transitions
+//>>css: ../css/structure/jquery.mobile.transition.slidefade.css
+
+define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+// Set the slide transition's fallback to "fade"
+$.mobile.transitionFallbacks.slidefade = "fade";
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file
--- /dev/null
+/*
+* fallback transition for slideup in non-3D supporting browsers (which tend to handle complex transitions poorly in general
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Animation styles and fallback transition definition for non-3D supporting browsers
+//>>label: Slideup Transition
+//>>group: Transitions
+//>>css: ../css/structure/jquery.mobile.transition.slideup.css
+
+define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+$.mobile.transitionFallbacks.slideup = "fade";
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file
--- /dev/null
+/*
+* fallback transition for turn in non-3D supporting browsers (which tend to handle complex transitions poorly in general
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Animation styles and fallback transition definition for non-3D supporting browsers
+//>>label: Turn Transition
+//>>group: Transitions
+//>>css: ../css/structure/jquery.mobile.transition.turn.css
+
+define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+$.mobile.transitionFallbacks.turn = "fade";
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file
--- /dev/null
+
+// This plugin is an experiment for abstracting away the touch and mouse
+// events so that developers don't have to worry about which method of input
+// the device their document is loaded on supports.
+//
+// The idea here is to allow 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, while still retaining the order of event firing in
+// the traditional mouse environment, should multiple handlers be registered
+// on the same element for different events.
+//
+// The current version exposes the following virtual events to jQuery bind methods:
+// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Normalizes touch/mouse events.
+//>>label: Virtual Mouse (vmouse) Bindings
+//>>group: Core
+
+define( [ "jquery" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, document, undefined ) {
+
+var dataPropertyName = "virtualMouseBindings",
+ touchTargetPropertyName = "virtualTouchID",
+ virtualEventNames = "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split( " " ),
+ touchEventProps = "clientX clientY pageX pageY screenX screenY".split( " " ),
+ mouseHookProps = $.event.mouseHooks ? $.event.mouseHooks.props : [],
+ mouseEventProps = $.event.props.concat( mouseHookProps ),
+ activeDocHandlers = {},
+ resetTimerID = 0,
+ startX = 0,
+ startY = 0,
+ didScroll = false,
+ clickBlockList = [],
+ blockMouseTriggers = false,
+ blockTouchTriggers = false,
+ eventCaptureSupported = "addEventListener" in document,
+ $document = $( document ),
+ nextTouchID = 1,
+ lastTouchID = 0;
+
+$.vmouse = {
+ moveDistanceThreshold: 10,
+ clickDistanceThreshold: 10,
+ resetTimerDuration: 1500
+};
+
+function getNativeEvent( event ) {
+
+ while ( event && typeof event.originalEvent !== "undefined" ) {
+ event = event.originalEvent;
+ }
+ return event;
+}
+
+function createVirtualEvent( event, eventType ) {
+
+ var t = event.type,
+ oe, props, ne, prop, ct, touch, i, j;
+
+ event = $.Event(event);
+ event.type = eventType;
+
+ oe = event.originalEvent;
+ props = $.event.props;
+
+ // addresses separation of $.event.props in to $.event.mouseHook.props and Issue 3280
+ // https://github.com/jquery/jquery-mobile/issues/3280
+ if ( t.search( /^(mouse|click)/ ) > -1 ) {
+ props = mouseEventProps;
+ }
+
+ // copy original event properties over to the new event
+ // this would happen if we could call $.event.fix instead of $.Event
+ // but we don't have a way to force an event to be fixed multiple times
+ if ( oe ) {
+ for ( i = props.length, prop; i; ) {
+ prop = props[ --i ];
+ event[ prop ] = oe[ prop ];
+ }
+ }
+
+ // make sure that if the mouse and click virtual events are generated
+ // without a .which one is defined
+ if ( t.search(/mouse(down|up)|click/) > -1 && !event.which ){
+ event.which = 1;
+ }
+
+ if ( t.search(/^touch/) !== -1 ) {
+ ne = getNativeEvent( oe );
+ t = ne.touches;
+ ct = ne.changedTouches;
+ touch = ( t && t.length ) ? t[0] : ( (ct && ct.length) ? ct[ 0 ] : undefined );
+
+ if ( touch ) {
+ for ( j = 0, len = touchEventProps.length; j < len; j++){
+ prop = touchEventProps[ j ];
+ event[ prop ] = touch[ prop ];
+ }
+ }
+ }
+
+ return event;
+}
+
+function getVirtualBindingFlags( element ) {
+
+ var flags = {},
+ b, k;
+
+ while ( element ) {
+
+ b = $.data( element, dataPropertyName );
+
+ for ( k in b ) {
+ if ( b[ k ] ) {
+ flags[ k ] = flags.hasVirtualBinding = true;
+ }
+ }
+ element = element.parentNode;
+ }
+ return flags;
+}
+
+function getClosestElementWithVirtualBinding( element, eventType ) {
+ var b;
+ while ( element ) {
+
+ b = $.data( element, dataPropertyName );
+
+ if ( b && ( !eventType || b[ eventType ] ) ) {
+ return element;
+ }
+ element = element.parentNode;
+ }
+ return null;
+}
+
+function enableTouchBindings() {
+ blockTouchTriggers = false;
+}
+
+function disableTouchBindings() {
+ blockTouchTriggers = true;
+}
+
+function enableMouseBindings() {
+ lastTouchID = 0;
+ clickBlockList.length = 0;
+ blockMouseTriggers = false;
+
+ // When mouse bindings are enabled, our
+ // touch bindings are disabled.
+ disableTouchBindings();
+}
+
+function disableMouseBindings() {
+ // When mouse bindings are disabled, our
+ // touch bindings are enabled.
+ enableTouchBindings();
+}
+
+function startResetTimer() {
+ clearResetTimer();
+ resetTimerID = setTimeout(function(){
+ resetTimerID = 0;
+ enableMouseBindings();
+ }, $.vmouse.resetTimerDuration );
+}
+
+function clearResetTimer() {
+ if ( resetTimerID ){
+ clearTimeout( resetTimerID );
+ resetTimerID = 0;
+ }
+}
+
+function triggerVirtualEvent( eventType, event, flags ) {
+ var ve;
+
+ if ( ( flags && flags[ eventType ] ) ||
+ ( !flags && getClosestElementWithVirtualBinding( event.target, eventType ) ) ) {
+
+ ve = createVirtualEvent( event, eventType );
+
+ $( event.target).trigger( ve );
+ }
+
+ return ve;
+}
+
+function mouseEventCallback( event ) {
+ var touchID = $.data(event.target, touchTargetPropertyName);
+
+ if ( !blockMouseTriggers && ( !lastTouchID || lastTouchID !== touchID ) ){
+ var ve = triggerVirtualEvent( "v" + event.type, event );
+ if ( ve ) {
+ if ( ve.isDefaultPrevented() ) {
+ event.preventDefault();
+ }
+ if ( ve.isPropagationStopped() ) {
+ event.stopPropagation();
+ }
+ if ( ve.isImmediatePropagationStopped() ) {
+ event.stopImmediatePropagation();
+ }
+ }
+ }
+}
+
+function handleTouchStart( event ) {
+
+ var touches = getNativeEvent( event ).touches,
+ target, flags;
+
+ if ( touches && touches.length === 1 ) {
+
+ target = event.target;
+ flags = getVirtualBindingFlags( target );
+
+ if ( flags.hasVirtualBinding ) {
+
+ lastTouchID = nextTouchID++;
+ $.data( target, touchTargetPropertyName, lastTouchID );
+
+ clearResetTimer();
+
+ disableMouseBindings();
+ didScroll = false;
+
+ var t = getNativeEvent( event ).touches[ 0 ];
+ startX = t.pageX;
+ startY = t.pageY;
+
+ triggerVirtualEvent( "vmouseover", event, flags );
+ triggerVirtualEvent( "vmousedown", event, flags );
+ }
+ }
+}
+
+function handleScroll( event ) {
+ if ( blockTouchTriggers ) {
+ return;
+ }
+
+ if ( !didScroll ) {
+ triggerVirtualEvent( "vmousecancel", event, getVirtualBindingFlags( event.target ) );
+ }
+
+ didScroll = true;
+ startResetTimer();
+}
+
+function handleTouchMove( event ) {
+ if ( blockTouchTriggers ) {
+ return;
+ }
+
+ var t = getNativeEvent( event ).touches[ 0 ],
+ didCancel = didScroll,
+ moveThreshold = $.vmouse.moveDistanceThreshold;
+ didScroll = didScroll ||
+ ( Math.abs(t.pageX - startX) > moveThreshold ||
+ Math.abs(t.pageY - startY) > moveThreshold ),
+ flags = getVirtualBindingFlags( event.target );
+
+ if ( didScroll && !didCancel ) {
+ triggerVirtualEvent( "vmousecancel", event, flags );
+ }
+
+ triggerVirtualEvent( "vmousemove", event, flags );
+ startResetTimer();
+}
+
+function handleTouchEnd( event ) {
+ if ( blockTouchTriggers ) {
+ return;
+ }
+
+ disableTouchBindings();
+
+ var flags = getVirtualBindingFlags( event.target ),
+ t;
+ triggerVirtualEvent( "vmouseup", event, flags );
+
+ if ( !didScroll ) {
+ var ve = triggerVirtualEvent( "vclick", event, flags );
+ if ( ve && ve.isDefaultPrevented() ) {
+ // The target of the mouse events that follow the touchend
+ // event don't necessarily match the target used during the
+ // touch. This means we need to rely on coordinates for blocking
+ // any click that is generated.
+ t = getNativeEvent( event ).changedTouches[ 0 ];
+ clickBlockList.push({
+ touchID: lastTouchID,
+ x: t.clientX,
+ y: t.clientY
+ });
+
+ // Prevent any mouse events that follow from triggering
+ // virtual event notifications.
+ blockMouseTriggers = true;
+ }
+ }
+ triggerVirtualEvent( "vmouseout", event, flags);
+ didScroll = false;
+
+ startResetTimer();
+}
+
+function hasVirtualBindings( ele ) {
+ var bindings = $.data( ele, dataPropertyName ),
+ k;
+
+ if ( bindings ) {
+ for ( k in bindings ) {
+ if ( bindings[ k ] ) {
+ return true;
+ }
+ }
+ }
+ return false;
+}
+
+function dummyMouseHandler(){}
+
+function getSpecialEventObject( eventType ) {
+ var realType = eventType.substr( 1 );
+
+ return {
+ setup: function( data, namespace ) {
+ // If this is the first virtual mouse binding for this element,
+ // add a bindings object to its data.
+
+ if ( !hasVirtualBindings( this ) ) {
+ $.data( this, dataPropertyName, {});
+ }
+
+ // If setup is called, we know it is the first binding for this
+ // eventType, so initialize the count for the eventType to zero.
+ var bindings = $.data( this, dataPropertyName );
+ bindings[ eventType ] = true;
+
+ // If this is the first virtual mouse event for this type,
+ // register a global handler on the document.
+
+ activeDocHandlers[ eventType ] = ( activeDocHandlers[ eventType ] || 0 ) + 1;
+
+ if ( activeDocHandlers[ eventType ] === 1 ) {
+ $document.bind( realType, mouseEventCallback );
+ }
+
+ // Some browsers, like Opera Mini, won't dispatch mouse/click events
+ // for elements unless they actually have handlers registered on them.
+ // To get around this, we register dummy handlers on the elements.
+
+ $( this ).bind( realType, dummyMouseHandler );
+
+ // For now, if event capture is not supported, we rely on mouse handlers.
+ if ( eventCaptureSupported ) {
+ // If this is the first virtual mouse binding for the document,
+ // register our touchstart handler on the document.
+
+ activeDocHandlers[ "touchstart" ] = ( activeDocHandlers[ "touchstart" ] || 0) + 1;
+
+ if (activeDocHandlers[ "touchstart" ] === 1) {
+ $document.bind( "touchstart", handleTouchStart )
+ .bind( "touchend", handleTouchEnd )
+
+ // On touch platforms, touching the screen and then dragging your finger
+ // causes the window content to scroll after some distance threshold is
+ // exceeded. On these platforms, a scroll prevents a click event from being
+ // dispatched, and on some platforms, even the touchend is suppressed. To
+ // mimic the suppression of the click event, we need to watch for a scroll
+ // event. Unfortunately, some platforms like iOS don't dispatch scroll
+ // events until *AFTER* the user lifts their finger (touchend). This means
+ // we need to watch both scroll and touchmove events to figure out whether
+ // or not a scroll happenens before the touchend event is fired.
+
+ .bind( "touchmove", handleTouchMove )
+ .bind( "scroll", handleScroll );
+ }
+ }
+ },
+
+ teardown: function( data, namespace ) {
+ // If this is the last virtual binding for this eventType,
+ // remove its global handler from the document.
+
+ --activeDocHandlers[ eventType ];
+
+ if ( !activeDocHandlers[ eventType ] ) {
+ $document.unbind( realType, mouseEventCallback );
+ }
+
+ if ( eventCaptureSupported ) {
+ // If this is the last virtual mouse binding in existence,
+ // remove our document touchstart listener.
+
+ --activeDocHandlers[ "touchstart" ];
+
+ if ( !activeDocHandlers[ "touchstart" ] ) {
+ $document.unbind( "touchstart", handleTouchStart )
+ .unbind( "touchmove", handleTouchMove )
+ .unbind( "touchend", handleTouchEnd )
+ .unbind( "scroll", handleScroll );
+ }
+ }
+
+ var $this = $( this ),
+ bindings = $.data( this, dataPropertyName );
+
+ // teardown may be called when an element was
+ // removed from the DOM. If this is the case,
+ // jQuery core may have already stripped the element
+ // of any data bindings so we need to check it before
+ // using it.
+ if ( bindings ) {
+ bindings[ eventType ] = false;
+ }
+
+ // Unregister the dummy event handler.
+
+ $this.unbind( realType, dummyMouseHandler );
+
+ // If this is the last virtual mouse binding on the
+ // element, remove the binding data from the element.
+
+ if ( !hasVirtualBindings( this ) ) {
+ $this.removeData( dataPropertyName );
+ }
+ }
+ };
+}
+
+// Expose our custom events to the jQuery bind/unbind mechanism.
+
+for ( var i = 0; i < virtualEventNames.length; i++ ){
+ $.event.special[ virtualEventNames[ i ] ] = getSpecialEventObject( virtualEventNames[ i ] );
+}
+
+// Add a capture click handler to block clicks.
+// Note that we require event capture support for this so if the device
+// doesn't support it, we punt for now and rely solely on mouse events.
+if ( eventCaptureSupported ) {
+ document.addEventListener( "click", function( e ){
+ var cnt = clickBlockList.length,
+ target = e.target,
+ x, y, ele, i, o, touchID;
+
+ if ( cnt ) {
+ x = e.clientX;
+ y = e.clientY;
+ threshold = $.vmouse.clickDistanceThreshold;
+
+ // The idea here is to run through the clickBlockList to see if
+ // the current click event is in the proximity of one of our
+ // vclick events that had preventDefault() called on it. If we find
+ // one, then we block the click.
+ //
+ // Why do we have to rely on proximity?
+ //
+ // Because the target of the touch event that triggered the vclick
+ // can be different from the target of the click event synthesized
+ // by the browser. The target of a mouse/click event that is syntehsized
+ // from a touch event seems to be implementation specific. For example,
+ // some browsers will fire mouse/click events for a link that is near
+ // a touch event, even though the target of the touchstart/touchend event
+ // says the user touched outside the link. Also, it seems that with most
+ // browsers, the target of the mouse/click event is not calculated until the
+ // time it is dispatched, so if you replace an element that you touched
+ // with another element, the target of the mouse/click will be the new
+ // element underneath that point.
+ //
+ // Aside from proximity, we also check to see if the target and any
+ // of its ancestors were the ones that blocked a click. This is necessary
+ // because of the strange mouse/click target calculation done in the
+ // Android 2.1 browser, where if you click on an element, and there is a
+ // mouse/click handler on one of its ancestors, the target will be the
+ // innermost child of the touched element, even if that child is no where
+ // near the point of touch.
+
+ ele = target;
+
+ while ( ele ) {
+ for ( i = 0; i < cnt; i++ ) {
+ o = clickBlockList[ i ];
+ touchID = 0;
+
+ if ( ( ele === target && Math.abs( o.x - x ) < threshold && Math.abs( o.y - y ) < threshold ) ||
+ $.data( ele, touchTargetPropertyName ) === o.touchID ) {
+ // XXX: We may want to consider removing matches from the block list
+ // instead of waiting for the reset timer to fire.
+ e.preventDefault();
+ e.stopPropagation();
+ return;
+ }
+ }
+ ele = ele.parentNode;
+ }
+ }
+ }, true);
+}
+})( jQuery, window, document );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Widget factory extentions for mobile.
+//>>label: Widget Factory
+//>>group: Core
+//>>css: ../css/themes/default/jquery.mobile.theme.css
+
+define( [ "jquery", "../external/requirejs/depend!./jquery.ui.widget[jquery]" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.widget", {
+ // decorate the parent _createWidget to trigger `widgetinit` for users
+ // who wish to do post post `widgetcreate` alterations/additions
+ //
+ // TODO create a pull request for jquery ui to trigger this event
+ // in the original _createWidget
+ _createWidget: function() {
+ $.Widget.prototype._createWidget.apply( this, arguments );
+ this._trigger( 'init' );
+ },
+
+ _getCreateOptions: function() {
+
+ var elem = this.element,
+ options = {};
+
+ $.each( this.options, function( option ) {
+
+ var value = elem.jqmData( option.replace( /[A-Z]/g, function( c ) {
+ return "-" + c.toLowerCase();
+ })
+ );
+
+ if ( value !== undefined ) {
+ options[ option ] = value;
+ }
+ });
+
+ return options;
+ },
+
+ enhanceWithin: function( target, useKeepNative ) {
+ this.enhance( $( this.options.initSelector, $( target )), useKeepNative );
+ },
+
+ enhance: function( targets, useKeepNative ) {
+ var page, keepNative, $widgetElements = $( targets ), self = this;
+
+ // if ignoreContentEnabled is set to true the framework should
+ // only enhance the selected elements when they do NOT have a
+ // parent with the data-namespace-ignore attribute
+ $widgetElements = $.mobile.enhanceable( $widgetElements );
+
+ if ( useKeepNative && $widgetElements.length ) {
+ // TODO remove dependency on the page widget for the keepNative.
+ // Currently the keepNative value is defined on the page prototype so
+ // the method is as well
+ page = $.mobile.closestPageData( $widgetElements );
+ keepNative = (page && page.keepNativeSelector()) || "";
+
+ $widgetElements = $widgetElements.not( keepNative );
+ }
+
+ $widgetElements[ this.widgetName ]();
+ },
+
+ raise: function( msg ) {
+ throw "Widget [" + this.widgetName + "]: " + msg;
+ }
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Fixes the orientation change bug in iOS when switching between landspace and portrait
+//>>label: iOS Orientation Change Fix
+//>>group: Utilities
+
+define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.zoom" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+( function( $, window ) {
+
+ // This fix addresses an iOS bug, so return early if the UA claims it's something else.
+ if( !(/iPhone|iPad|iPod/.test( navigator.platform ) && navigator.userAgent.indexOf( "AppleWebKit" ) > -1 ) ){
+ return;
+ }
+
+ var zoom = $.mobile.zoom,
+ evt, x, y, z, aig;
+
+ function checkTilt( e ){
+ evt = e.originalEvent;
+ aig = evt.accelerationIncludingGravity;
+
+ x = Math.abs( aig.x );
+ y = Math.abs( aig.y );
+ z = Math.abs( aig.z );
+
+ // If portrait orientation and in one of the danger zones
+ if( !window.orientation && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){
+ if( zoom.enabled ){
+ zoom.disable();
+ }
+ }
+ else if( !zoom.enabled ){
+ zoom.enable();
+ }
+ }
+
+ $( window )
+ .bind( "orientationchange.iosorientationfix", zoom.enable )
+ .bind( "devicemotion.iosorientationfix", checkTilt );
+
+}( jQuery, this ));
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Utility methods for enabling and disabling user scaling (pinch zoom)
+//>>label: Zoom Handling
+//>>group: Utilities
+
+define( [ "jquery", "./jquery.mobile.core" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+( function( $ ) {
+ var meta = $( "meta[name=viewport]" ),
+ initialContent = meta.attr( "content" ),
+ disabledZoom = initialContent + ",maximum-scale=1, user-scalable=no",
+ enabledZoom = initialContent + ",maximum-scale=10, user-scalable=yes",
+ disabledInitially = /(user-scalable[\s]*=[\s]*no)|(maximum-scale[\s]*=[\s]*1)[$,\s]/.test( initialContent );
+
+ $.mobile.zoom = $.extend( {}, {
+ enabled: !disabledInitially,
+ locked: false,
+ disable: function( lock ) {
+ if( !disabledInitially && !$.mobile.zoom.locked ){
+ meta.attr( "content", disabledZoom );
+ $.mobile.zoom.enabled = false;
+ $.mobile.zoom.locked = lock || false;
+ }
+ },
+ enable: function( unlock ) {
+ if( !disabledInitially && ( !$.mobile.zoom.locked || unlock === true ) ){
+ meta.attr( "content", enabledZoom );
+ $.mobile.zoom.enabled = true;
+ $.mobile.zoom.locked = false;
+ }
+ },
+ restore: function() {
+ if( !disabledInitially ){
+ meta.attr( "content", initialContent );
+ $.mobile.zoom.enabled = true;
+ }
+ }
+ });
+
+}( jQuery ));
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+(function() {
+ // Insert a script tag pointing at the desired version of jQuery
+
+ // Get the version from the url
+ var jqueryRE = /[\\?&]jquery=([^&#]*)/,
+ results = jqueryRE.exec( location.search ),
+ version = "",
+ jq,
+ myScriptTag = document.getElementsByTagName( "script" )[document.getElementsByTagName( "script" ).length - 1],
+ baseUrl = myScriptTag.src.replace( /(.*)\/.*$/, "$1/" ),
+ url = baseUrl + "jquery-1.7.1.js";
+
+ if( results ) {
+ version = decodeURIComponent(results[results.length - 1].replace(/\+/g, " "));
+ }
+
+ switch( version ) {
+ case "1.6.4":
+ url = baseUrl + "jquery-1.6.4.js";
+ break;
+ case "git":
+ url = "http://code.jquery.com/jquery-git.js";
+ break;
+ }
+
+ document.write( "<script src='" + url + "'></script>" );
+
+ if ( parseInt( version.replace( /\./g, "" ), 10 ) < 170 && window.define && window.define.amd ) {
+ document.write( '<script>define( "jquery", [], function () { return jQuery; } );</script>' );
+ }
+}());
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile: Event Logger</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
+ <script src="../../js/jquery.tag.inserter.js"></script>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+ <script>
+ $(function(){
+ $( "a" ).bind("tap click",function( e ){
+ $("#log")
+ .prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"</li>")
+ .listview("refresh");
+ return false;
+ })
+ .bind("tap click", false);
+ });
+ </script>
+
+ <style>
+ #jqm-home {
+ height: 500px;
+ }
+ </style>
+</head>
+<body>
+<div data-role="page" data-theme="b" id="jqm-home">
+ <div data-role="header">
+ <h1>Event Logger</h1>
+ </div>
+
+ <div data-role="content">
+ <p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
+
+ <a href="foo.html" data-role="button">Click me</a>
+
+ <ul data-role="listview" id="log">
+
+ </ul>
+
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Button Markup Tester</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
+ <script src="../../js/jquery.tag.inserter.js"></script>
+ <script src="../../js"></script>
+<script>
+$(document).bind("pagecreate", function() {
+ $("#button-apply").bind("vclick", function() {
+ var options = {empty: true};
+
+ $("[data-setter]").each(function() {
+ var self = $(this),
+ val = ($(this).is("[type='checkbox']") ? $(this).is(":checked") : $(this).val()),
+ key = $(this).parent().find("label").text(),
+ apply = $("#button-" + key + "-apply").is(":checked");
+
+ if (apply) {
+ options.empty = false;
+ options[key] = val;
+ }
+ });
+ if (!options.empty) {
+ delete options.empty;
+ $("#sample-link,#sample-input-button,#sample-button").buttonMarkup(options);
+ }
+ });
+});
+</script>
+<style>
+.ui-field-contain {
+ margin-top: 0px;
+ margin-bottom: 0px;
+}
+</style>
+</head>
+
+<body>
+ <div data-role="page">
+ <div data-role="header">
+ <h1>jQuery Mobile Widget Option Tester</h1>
+ </div>
+ <div data-role="contents">
+ <a id="sample-link" data-role="button">Sample Link</a>
+ <input id="sample-input-button" type="button" name="Input Button" value="Sample Input Button"></input>
+ <button id="sample-button" name="Button">Sample Button</button>
+
+ <form id="button-settings" name="button-settings" action="#" method="get" style="display: table;">
+ <table><tr><td>
+ <div data-role="fieldcontain">
+ <label for="button-icon">icon</label>
+ <input data-setter="true" type="text" id="button-icon"></input>
+ </div>
+ </td><td>
+ <div data-role="fieldcontain">
+ <label for="button-icon-apply">Apply</label>
+ <input data-apply="true" type="checkbox" id="button-icon-apply"></input>
+ </div>
+ </td></tr><tr><td>
+ <div data-role="fieldcontain">
+ <label for="button-iconpos">iconpos</label>
+ <input data-setter="true" type="text" id="button-iconpos"></input>
+ </div>
+ </td><td>
+ <div data-role="fieldcontain">
+ <label for="button-iconpos-apply">Apply</label>
+ <input data-apply="true" type="checkbox" id="button-iconpos-apply"></input>
+ </div>
+ </td></tr><tr><td>
+ <div data-role="fieldcontain">
+ <label for="button-theme">theme</label>
+ <input data-setter="true" type="text" id="button-theme"></input>
+ </div>
+ </td><td>
+ <div data-role="fieldcontain">
+ <label for="button-theme-apply">Apply</label>
+ <input data-apply="true" type="checkbox" id="button-theme-apply"></input>
+ </div>
+ </td></tr><tr><td>
+ <div data-role="fieldcontain">
+ <label for="button-inline">inline</label>
+ <input data-setter="true" type="checkbox" id="button-inline"></input>
+ </div>
+ </td><td>
+ <div data-role="fieldcontain">
+ <label for="button-inline-apply">Apply</label>
+ <input data-apply="true" type="checkbox" id="button-inline-apply"></input>
+ </div>
+ </td></tr><tr><td>
+ <div data-role="fieldcontain">
+ <label for="button-shadow">shadow</label>
+ <input data-setter="true" type="checkbox" id="button-shadow"></input>
+ </div>
+ </td><td>
+ <div data-role="fieldcontain">
+ <label for="button-shadow-apply">Apply</label>
+ <input data-apply="true" type="checkbox" id="button-shadow-apply"></input>
+ </div>
+ </td></tr><tr><td>
+ <div data-role="fieldcontain">
+ <label for="button-corners">corners</label>
+ <input data-setter="true" type="checkbox" id="button-corners"></input>
+ </div>
+ </td><td>
+ <div data-role="fieldcontain">
+ <label for="button-corners-apply">Apply</label>
+ <input data-apply="true" type="checkbox" id="button-corners-apply"></input>
+ </div>
+ </td></tr><tr><td>
+ <div data-role="fieldcontain">
+ <label for="button-iconshadow">iconshadow</label>
+ <input data-setter="true" type="checkbox" id="button-iconshadow"></input>
+ </div>
+ </td><td>
+ <div data-role="fieldcontain">
+ <label for="button-iconshadow-apply">Apply</label>
+ <input data-apply="true" type="checkbox" id="button-iconshadow-apply"></input>
+ </div>
+ </td></tr>
+ <tr><td colspan="2">
+ <input type="button" name="button-apply" value="Apply" id="button-apply"></input>
+ </td></tr></table>
+ </form>
+ </div>
+ </div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile: Event Logger</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
+ <script src="../../js/jquery.tag.inserter.js"></script>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+ <script>
+ $( document )
+ .bind("tap taphold swipe swipeleft swiperight scrollstart scrollstop orientationchange",function( e ){
+ $("#log")
+ .prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"</li>")
+ .listview("refresh");
+
+ });
+ </script>
+</head>
+<body>
+<div data-role="page" data-theme="b" id="jqm-home">
+ <div data-role="header">
+ <h1>Event Logger</h1>
+ </div>
+
+ <div data-role="content">
+ <p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
+
+ <ul data-role="listview" id="log">
+
+ </ul>
+
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>jQuery Mobile: Grid Layout</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
+ <script src="../../js/jquery.tag.inserter.js"></script>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+ <script>
+ $(function(){
+ $(".ui-grid-d a").bind("tap click", function(e){
+ $(this).hide();
+ $("#log")
+ .prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"; message: grid '"+$(this).text()+"' hidden</li>")
+ .listview("refresh");
+ return false;
+ }).bind("tap click", false);
+ $("#showbtn").bind("tap click", function(e){
+ $(".ui-grid-d a").show();
+ $("#log")
+ .prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"; message: show all buttons</li>")
+ .listview("refresh");
+ }).bind("tap click", false);
+ });
+ </script>
+</head>
+<body>
+<div data-role="page" data-theme="b" id="jqm-home">
+ <div data-role="header">
+ <h1>Grid Layout</h1>
+ </div>
+
+ <div data-role="content">
+ <p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
+
+ <div class="ui-grid-d">
+ <div class="ui-block-a">
+ <a data-role="button" id="btn1" data-theme="b">Button 1</a>
+ </div>
+ <div class="ui-block-b">
+ <a data-role="button" id="btn2" data-theme="b">Button 2</a>
+ </div>
+ <div class="ui-block-c">
+ <a data-role="button" id="btn3" data-theme="b">Button 3</a>
+ </div>
+ <div class="ui-block-d">
+ <a data-role="button" id="btn4" data-theme="b">Button 4</a>
+ </div>
+ <div class="ui-block-e">
+ <a data-role="button" id="btn5" data-theme="b">Button 5</a>
+ </div>
+ </div>
+
+ <a data-role="button" id="showbtn">Show all button</a>
+
+ <ul data-role="listview" id="log">
+
+ </ul>
+
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile: Orientation</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
+ <style>
+
+ #orientationText {
+ font-size: x-large;
+ font-weight: bold;
+ margin: 1em;
+ }
+
+ </style>
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../../js/jquery.tag.inserter.js"></script>
+ <script>
+ require( {
+ baseUrl: "../../js"
+ } )( [ "jquery", "jquery.mobile" ], function( $ ) {
+ $( document ).one( "pageinit", function() {
+ function updateOrientation()
+ {
+ $( "#orientationText" ).text( $.event.special.orientationchange.orientation() );
+ }
+
+ updateOrientation();
+ $( window ).bind( $.support.orientation ? "orientationchange" : "resize", updateOrientation);
+ });
+ });
+ </script>
+</head>
+
+<body>
+<div data-role="page">
+ <div data-role="header"><h1>Orientation Test</h1></div>
+ <div data-role="content">
+ <p>The current device orientation is displayed below. It should *ALWAYS* be correct!</p>
+ <div id="orientationText">Orientation Not Supported!</div>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * mobile support unit tests
+ */
+
+(function( $ ) {
+ $.testHelper = {
+ // This function takes sets of files to load asynchronously. Each set will be loaded after
+ // the previous set has completed loading. That is, each require and it's dependencies in a
+ // set will be loaded asynchronously, but each set will be run in serial.
+ asyncLoad: function( seq ) {
+ require({
+ baseUrl: "../../../js"
+ });
+
+ function loadSeq( seq, i ){
+ if( !seq[i] ){
+ $( document ).ready( function() {
+ var $fixture = $( '#qunit-fixture' );
+ if ( $fixture.length ) {
+ QUnit.config.fixture = $fixture.html();
+ }
+ QUnit.start();
+ });
+ return;
+ }
+
+ require( seq[i], function() {
+ loadSeq(seq, i + 1);
+ });
+ }
+
+ // stop qunit from running the tests until everything is in the page
+ QUnit.config.autostart = false;
+
+ loadSeq( seq, 0 );
+ },
+
+ excludeFileProtocol: function(callback){
+ var message = "Tests require script reload and cannot be run via file: protocol";
+
+ if (location.protocol == "file:") {
+ test(message, function(){
+ ok(false, message);
+ });
+ } else {
+ callback();
+ }
+ },
+
+ // TODO prevent test suite loads when the browser doesn't support push state
+ // and push-state false is defined.
+ setPushState: function() {
+ if( $.support.pushState && location.search.indexOf( "push-state" ) >= 0 ) {
+ $.support.pushState = false;
+ }
+ },
+
+ reloads: {},
+
+ reloadModule: function(libName){
+ var deferred = $.Deferred(),
+ context;
+
+ // where a module loader isn't defined use the old way
+ if( !window.require ) {
+ this.reloadLib( libName );
+ deferred.resolve();
+ return deferred;
+ }
+
+ if(this.reloads[libName] === undefined) {
+ this.reloads[libName] = {
+ count: 0
+ };
+ }
+
+ //Clear internal cache of module inside of require
+ context = require.s.contexts._;
+ delete context.defined[libName];
+ delete context.specified[libName];
+ delete context.loaded[libName];
+ delete context.urlFetched[require.toUrl(libName + '.js')];
+
+ require(
+ {
+ baseUrl: "../../../js"
+ }, [libName],
+ function() {
+ deferred.resolve();
+ }
+ );
+
+ return deferred;
+ },
+
+ reloadLib: function(libName){
+ if(this.reloads[libName] === undefined) {
+ this.reloads[libName] = {
+ lib: $("script[src$='" + libName + "']"),
+ count: 0
+ };
+ }
+
+ var lib = this.reloads[libName].lib.clone(),
+ src = lib.attr('src');
+
+ //NOTE append "cache breaker" to force reload
+ lib.attr('src', src + "?" + this.reloads[libName].count++);
+ $("body").append(lib);
+ },
+
+ rerunQunit: function(){
+ var self = this;
+ QUnit.init();
+ $("script:not([src*='.\/'])").each(function(i, elem){
+ var src = elem.src.split("/");
+ self.reloadLib(src[src.length - 1]);
+ });
+ QUnit.start();
+ },
+
+ alterExtend: function(extraExtension){
+ var extendFn = $.extend;
+
+ $.extend = function(object, extension){
+ // NOTE extend the object as normal
+ var result = extendFn.apply(this, arguments);
+
+ // NOTE add custom extensions
+ result = extendFn(result, extraExtension);
+ return result;
+ };
+ },
+
+ hideActivePageWhenComplete: function() {
+ if( $('#qunit-testresult').length > 0 ) {
+ $('.ui-page-active').css('display', 'none');
+ } else {
+ setTimeout($.testHelper.hideActivePageWhenComplete, 500);
+ }
+ },
+
+ openPage: function(hash){
+ location.href = location.href.split('#')[0] + hash;
+ },
+
+ sequence: function(fns, interval){
+ $.each(fns, function(i, fn){
+ setTimeout(fn, i * interval);
+ });
+ },
+
+ pageSequence: function( fns ){
+ this.eventSequence( "pagechange", fns );
+ },
+
+ eventSequence: function( event, fns, timedOut ){
+ var seq = [];
+ $.each(fns, function( i, fn ) {
+ seq.push( fn );
+ if( i !== fns.length - 1) seq.push( event );
+ });
+
+ this.eventCascade( seq );
+ },
+
+ eventCascade: function( sequence, timedOut ) {
+ var fn = sequence.shift(),
+ event = sequence.shift(),
+ self = this;
+
+ if( fn === undefined ) {
+ return;
+ }
+
+ if( event ){
+ // if a pagechange or defined event is never triggered
+ // continue in the sequence to alert possible failures
+ var warnTimer = setTimeout(function() {
+ self.eventCascade( sequence, true );
+ }, 2000);
+
+ // bind the recursive call to the event
+ $.mobile.pageContainer.one(event, function() {
+ clearTimeout( warnTimer );
+
+ // Let the current stack unwind before we fire off the next item in the sequence.
+ // TODO setTimeout(self.pageSequence, 0, sequence);
+ setTimeout(function(){ self.eventCascade(sequence); }, 0);
+ });
+ }
+
+ // invoke the function which should, in some fashion,
+ // trigger the next event
+ fn( timedOut );
+ },
+
+ deferredSequence: function(fns) {
+ var fn = fns.shift(),
+ deferred = $.Deferred(),
+ self = this, res;
+
+ if (fn) {
+ res = fn();
+ if ( res && $.type( res.done ) === "function" ) {
+ res.done(function() {
+ self.deferredSequence( fns ).done(function() {
+ deferred.resolve();
+ });
+ });
+ } else {
+ self.deferredSequence( fns ).done(function() {
+ deferred.resolve();
+ });
+ }
+ } else {
+ deferred.resolve();
+ }
+ return deferred;
+ },
+
+ decorate: function(opts){
+ var thisVal = opts.self || window;
+
+ return function(){
+ var returnVal;
+ opts.before && opts.before.apply(thisVal, arguments);
+ returnVal = opts.fn.apply(thisVal, arguments);
+ opts.after && opts.after.apply(thisVal, arguments);
+
+ return returnVal;
+ };
+ },
+
+ assertUrlLocation: function( args ) {
+ var parts = $.mobile.path.parseUrl( location.href ),
+ pathnameOnward = location.href.replace( parts.domain, "" );
+
+ if( $.support.pushState ) {
+ same( pathnameOnward, args.hashOrPush || args.push, args.report );
+ } else {
+ same( parts.hash, "#" + (args.hashOrPush || args.hash), args.report );
+ }
+ }
+ };
+})(jQuery);
--- /dev/null
+/*
+ * mobile button unit tests
+ */
+(function($){
+ $.mobile.page.prototype.options.keepNative = "button.should-be-native";
+
+ test( "button elements in the keepNative set shouldn't be enhanced", function() {
+ same( $("button.should-be-native").siblings("div.ui-slider").length, 0 );
+ });
+
+ test( "button elements should be enhanced", function() {
+ ok( $("#enhanced").hasClass( "ui-btn-hidden" ) );
+ });
+
+ test( "button markup text value should be changed on refresh", function() {
+ var textValueButton = $("#text"), valueButton = $("#value");
+
+ // the value shouldn't change unless it's been altered
+ textValueButton.button( 'refresh' );
+ same( textValueButton.siblings().text(), "foo" );
+
+ // use the text where it's provided
+ same( textValueButton.siblings().text(), "foo" );
+ textValueButton.text( "bar" ).button( 'refresh' );
+ same( textValueButton.siblings().text(), "bar" );
+
+ // use the val if it's provided where the text isn't
+ same( valueButton.siblings().text(), "foo" );
+ valueButton.val( "bar" ).button( 'refresh' );
+ same( valueButton.siblings().text(), "bar" );
+
+ // prefer the text to the value
+ textValueButton.text( "bar" ).val( "baz" ).button( 'refresh' );
+ same( textValueButton.siblings().text(), "bar" );
+ });
+
+ // Issue 2877
+ test( "verify the button placeholder is added many times", function() {
+ var $form = $( "#hidden-element-addition-form" ), count = 3;
+ expect( count * 2 );
+
+ for( var x = 0; x < count; x++ ) {
+ $( "#hidden-element-addition" ).trigger( "vclick" );
+ same( $form.find( "input[type='hidden']" ).length, 1, "hidden form input should be added" );
+
+ $form.trigger( "submit" );
+ same( $form.find( "[type='hidden']" ).length, 0, "hidden form input is removed" );
+ }
+ });
+
+ test( "theme should be inherited", function() {
+ var $inherited = $( "#theme-check" ),
+ $explicit = $( "#theme-check-explicit" );
+
+ ok( $inherited.closest("div").hasClass( "ui-btn-up-a" ), "should inherit from page" );
+ ok( $explicit.closest("div").hasClass( "ui-btn-up-b" ), "should not inherit" );
+ });
+})( jQuery );
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Button Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.forms.button",
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "button_core.js"
+ ]
+ ]);
+ </script>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+ <h1 id="qunit-header">jQuery Mobile Button Test Suite</h1>
+ <h2 id="qunit-banner"></h2>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests">
+ </ol>
+
+ <div data-nstest-role="page" data-nstest-theme="a">
+ <div data-nstest-role="content" data-nstest-theme="p">
+ <button class="should-be-native">foo</button>
+ <button id="enhanced">bar</button>
+ <button id="text">foo</button>
+ <button id="value" value="foo"></button>
+ <form id="hidden-element-addition-form" method="get" action="this will fail!">
+ <input type="submit" id="hidden-element-addition" name="foo">foo</input>
+ </form>
+ <button id="theme-check" value="foo"></button>
+ <button id="theme-check-explicit" value="foo" data-nstest-theme="b"></button>
+ </div>
+ </div>
+</body>
+</html>
--- /dev/null
+/*
+ * mobile buttonMarkup tests
+ */
+(function($){
+ module("jquery.mobile.buttonMarkup.js");
+
+ test( "header buttons should have the header class", function() {
+ var headerButton1 = $("#header-button-1"),
+ headerButton2 = $("#header-button-2");
+
+ ok((headerButton1.hasClass("ui-btn-left") &&
+ headerButton2.hasClass("ui-btn-right")), "first header button should have class 'ui-btn-left' and the second one should have 'ui-btn-right'");
+ });
+
+ test( "control group buttons should be enhanced inside a footer", function(){
+ var group, linkCount;
+
+ group = $("#control-group-footer");
+ linkCount = group.find( "a" ).length;
+
+ same( group.find("a.ui-btn").length, linkCount, "all 4 links should be buttons");
+ same( group.find("a > span.ui-corner-left").length, 1, "only 1 left cornered button");
+ same( group.find("a > span.ui-corner-right").length, 1, "only 1 right cornered button");
+ same( group.find("a > span:not(.ui-corner-left):not(.ui-corner-right)").length, linkCount - 2, "only 2 buttons are cornered");
+ });
+
+ test( "control group buttons should respect theme-related data attributes", function(){
+ var group = $("#control-group-content");
+
+ ok(!group.find('[data-shadow=false]').hasClass("ui-shadow"),
+ "buttons with data-shadow=false should not have the ui-shadow class");
+ ok(!group.find('[data-corners=false]').hasClass("ui-btn-corner-all"),
+ "buttons with data-corners=false should not have the ui-btn-corner-all class");
+ ok(!group.find('[data-iconshadow=false] .ui-icon').hasClass("ui-icon-shadow"),
+ "buttons with data-iconshadow=false should not have the ui-icon-shadow class on their icons");
+ });
+
+ // Test for issue #3046 and #3054:
+ test( "mousedown on SVG elements should not throw an exception", function(){
+ var svg = $("#embedded-svg"),
+ success = true,
+ rect;
+ ok(svg.length > 0, "found embedded svg document" );
+ if ( svg.length > 0 ) {
+ rect = $( "rect", svg );
+ ok(rect.length > 0, "found rect" );
+ try {
+ rect.trigger("mousedown");
+ } catch ( ex ) {
+ success = false;
+ }
+ ok( success, "mousedown executed without exception");
+ }
+ });
+
+ test( "Elements with “data-mini='true'” should have “ui-mini” class attached to enhanced element.", function(){
+ var $mini = $("#mini"),
+ $full = $("#full"),
+ $minicontrol = $('#mini-control');
+
+ ok( $full.not('.ui-mini'), "Original element does not have data attribute, enhanced version does not recieve .ui-mini.");
+ ok( $mini.is('.ui-mini'), "Original element has data attribute, enhanced version recieves .ui-mini." );
+ ok( $minicontrol.is('.ui-mini'), "Controlgroup has data attribute and recieves .ui-mini.");
+ });
+
+ test( "Ensure icon positioning defaults to left, and can be overridden with “data-iconpos”", function() {
+ var posdefault = $("#iconpos1"),
+ posleft = $("#iconpos2"),
+ posright = $("#iconpos3");
+
+ ok( posdefault.hasClass("ui-btn-icon-left"), "Button with unspecified icon position gets .ui-btn-icon-left" );
+ ok( posleft.hasClass("ui-btn-icon-left"), "Button with left icon positioning specified .ui-btn-icon-left" );
+ ok( posright.hasClass("ui-btn-icon-right"), "Button with right icon positioning specified .ui-btn-icon-right" );
+
+ });
+
+ asyncTest( "ui-btn-* should be applied based on a setting", function() {
+ // force touch support so the timeout is set
+ $.support.touch = true;
+
+ var $btn = $( "#hover-delay" );
+
+ $.testHelper.sequence([
+ function() {
+ $btn.trigger( "vmousedown" );
+ },
+
+ function() {
+ ok( $btn.attr("class").indexOf( "ui-btn-down" ) == -1, "button doesn't have the down class yet" );
+ },
+
+ function() {
+ ok( $btn.attr("class").indexOf( "ui-btn-down" ) >= 0, "button has the down class yet" );
+ start();
+ }
+ // the value is split and some padding is added to make sure that the last check fires
+ // after the hoverDelay has expired
+ ], $.mobile.buttonMarkup.hoverDelay / 2 + 50 );
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Mobile Button Markup Test Suite</title>
+ <!-- meta viewport left out on purpose for test append -->
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../jquery.testHelper.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.buttonMarkup",
+ "jquery.mobile.controlGroup",
+ "jquery.mobile.fixedToolbar",
+ "jquery.mobile.forms.button",
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "buttonMarkup_core.js"
+ ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Button Markup Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="default">
+ <div data-nstest-role="header" id="page-header">
+ <a id="header-button-1" data-role="button" href="index.html">Header button 1</a>
+ <a id="header-button-2" data-role="button" href="index.html">Header button 2</a>
+ </div>
+ <div data-nstest-role="content" id="control-group-content">
+ <input type="submit" data-nstest-role="button" value="Double Enhanced?" id="double-enhanced" />
+ <a href="index.html" data-nstest-role="button" data-nstest-shadow="false">No shadow</a>
+ <a href="index.html" data-nstest-role="button" data-nstest-corners="false">No corners</a>
+ <a href="index.html" data-nstest-role="button" data-nstest-shadow="false" data-nstest-corners="false">No shadow or corners</a>
+ <a href="index.html" data-nstest-role="button" data-nstest-icon="delete" data-nstest-iconshadow="false">No iconshadow</a>
+ <button data-nstest-shadow="false" data-nstest-corners="false" data-nstest-icon="delete" data-nstest-iconshadow="false">None of the above</button>
+ <svg id="embedded-svg" width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect x="10" y="10" width="100" height="100"/>
+ </svg>
+
+ <a href="docs-bars.html" data-nstest-role="button" id="full">Fullsize</a>
+ <a href="docs-bars.html" data-nstest-role="button" data-nstest-mini="true" id="mini">Mini</a>
+
+ <div data-nstest-role="controlgroup" data-nstest-mini="true" id="mini-control">
+ <a href="index.html" data-nstest-role="button">Yes</a>
+ </div>
+
+ <a id="iconpos1" data-nstest-role="button" href="index.html" data-nstest-icon="check">Default iconpos</a>
+ <a id="iconpos2" data-nstest-role="button" href="index.html" data-nstest-icon="check" data-nstest-iconpos="left">Left iconpos</a>
+ <a id="iconpos3" data-nstest-role="button" href="index.html" data-nstest-icon="check" data-nstest-iconpos="right">Right iconpos</a>
+ <a id="hover-delay" data-nstest-role="button" href="index.html"></a>
+ </div>
+ <div data-nstest-role="footer" id="control-group-footer" class="ui-bar" data-nstest-position="inline">
+ <div data-nstest-role="controlgroup" data-nstest-type="horizontal">
+ <a href="index.html" data-nstest-icon="delete">Remove</a>
+ <a href="index.html" data-nstest-icon="plus">Add</a>
+ <a href="index.html" data-nstest-icon="arrow-u">Up</a>
+ <a href="index.html" data-nstest-icon="arrow-d">Down</a>
+ </div>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * mobile checkboxradio unit tests
+ */
+(function($){
+ module( 'jquery.mobile.forms.checkboxradio.js' );
+
+ test( "widget can be disabled and enabled", function(){
+ var input = $( "#checkbox-1" ),
+ button = input.parent().find( ".ui-btn" );
+
+ input.checkboxradio( "disable" );
+ input.checkboxradio( "enable" );
+ ok( !input.attr( "disabled" ), "start input as enabled" );
+ ok( !input.parent().hasClass( "ui-disabled" ), "no disabled styles" );
+ ok( !input.attr( "checked" ), "not checked before click" );
+ button.trigger( "click" );
+ ok( input.attr( "checked" ), "checked after click" );
+ ok( button.hasClass( "ui-checkbox-on" ), "active styles after click" );
+ button.trigger( "click" );
+
+ input.checkboxradio( "disable" );
+ ok( input.attr( "disabled" ), "input disabled" );
+ ok( input.parent().hasClass( "ui-disabled" ), "disabled styles" );
+ ok( !input.attr( "checked" ), "not checked before click" );
+ button.trigger( "click" );
+ ok( !input.attr( "checked" ), "not checked after click" );
+ ok( !button.hasClass( "ui-checkbox-on" ), "no active styles after click" );
+ });
+
+ test( "clicking a checkbox within a controlgroup does not affect checkboxes with the same name in the same controlgroup", function(){
+ var input1 = $("#checkbox-31");
+ var button1 = input1.parent().find(".ui-btn");
+ var input2 = $("#checkbox-32");
+ var button2 = input2.parent().find(".ui-btn");
+
+ ok(!input1.attr("checked"), "input1 not checked before click");
+ ok(!input2.attr("checked"), "input2 not checked before click");
+
+ button1.trigger("click");
+ ok(input1.attr("checked"), "input1 checked after click on input1");
+ ok(!input2.attr("checked"), "input2 not checked after click on input1");
+
+ button2.trigger("click");
+ ok(input1.attr("checked"), "input1 not changed after click on input2");
+ ok(input2.attr("checked"), "input2 checked after click on input2");
+ });
+
+ asyncTest( "change events fired on checkbox for both check and uncheck", function(){
+ var $checkbox = $( "#checkbox-2" ),
+ $checkboxLabel = $checkbox.parent().find( ".ui-btn" );
+
+ $checkbox.unbind( "change" );
+
+ expect( 1 );
+
+ $checkbox.one('change', function(){
+ ok( true, "change fired on click to check the box" );
+ });
+
+ $checkboxLabel.trigger( "click" );
+
+ //test above will be triggered twice, and the start here once
+ $checkbox.one('change', function(){
+ start();
+ });
+
+ $checkboxLabel.trigger( "click" );
+ });
+
+ asyncTest( "radio button labels should update the active button class to last clicked and clear checked", function(){
+ var $radioBtns = $( '#radio-active-btn-test input' ),
+ singleActiveAndChecked = function(){
+ same( $( "#radio-active-btn-test .ui-radio-on" ).length, 1, "there should be only one active button" );
+ // Use the .checked property, not the checked attribute which is not dynamic
+ var numChecked = 0;
+ $( "#radio-active-btn-test input" ).each(function(i, e) {
+ if( e.checked ) {
+ numChecked++;
+ }
+ });
+ same( numChecked, 1, "there should be only one checked" );
+ };
+
+ $.testHelper.sequence([
+ function(){
+ $radioBtns.last().siblings( 'label' ).click();
+ },
+
+ function(){
+ ok( $radioBtns.last().prop( 'checked' ), "last input is checked" );
+ ok( $radioBtns.last().siblings( 'label' ).hasClass( 'ui-radio-on' ),
+ "last input label is an active button" );
+
+ ok( !$radioBtns.first().prop( 'checked' ), "first input label is not active" );
+ ok( !$radioBtns.first().siblings( 'label' ).hasClass( 'ui-radio-on' ),
+ "first input label is not active" );
+
+ singleActiveAndChecked();
+
+ $radioBtns.first().siblings( 'label' ).click();
+ },
+
+ function(){
+ ok( $radioBtns.first().prop( 'checked' ));
+ ok( $radioBtns.first().siblings( 'label' ).hasClass( 'ui-radio-on' ),
+ "first input label is an active button" );
+
+ ok( !$radioBtns.last().prop( 'checked' ));
+ ok( !$radioBtns.last().siblings( 'label' ).hasClass( 'ui-radio-on' ),
+ "last input label is not active" );
+
+ singleActiveAndChecked();
+
+ start();
+ }
+ ], 500);
+
+ });
+
+ test( "checkboxradio controls will create when inside a container that receives a 'create' event", function(){
+ ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-checkbox").length, "did not have enhancements applied" );
+ ok( $("#enhancetest").trigger("create").find(".ui-checkbox").length, "enhancements applied" );
+ });
+
+ $.mobile.page.prototype.options.keepNative = "input.should-be-native";
+
+ // not testing the positive case here since's it's obviously tested elsewhere
+ test( "checkboxradio elements in the keepNative set shouldn't be enhanced", function() {
+ ok( !$("input.should-be-native").parent().is("div.ui-checkbox") );
+ });
+
+ test( "Elements with \u201cdata-mini='true'\u201d should have \u201cui-mini\u201d class attached to enhanced element.", function(){
+ var full = document.getElementById("radio-full"),
+ $fulllbl = $('[for="radio-full"]'),
+ mini = document.getElementById("radio-mini"),
+ $minilbl = $('[for="radio-mini"]'),
+ minictrl = $("#mini-control");
+
+ ok( !full.getAttribute('data-nstest-mini') && !$fulllbl.hasClass('ui-mini'), "Original element does not have data attribute, enhanced version does not recieve .ui-mini.");
+ ok( mini.getAttribute('data-nstest-mini'), "Original element has data attribute, enhanced version recieves .ui-mini." );
+ });
+
+ asyncTest( "clicking the label triggers a click on the element", function() {
+ var clicked = false;
+
+ expect( 1 );
+
+ $( "#checkbox-click-triggered" ).one('click', function() {
+ clicked = true;
+ });
+
+ $.testHelper.sequence([
+ function() {
+ $( "[for='checkbox-click-triggered']" ).click();
+ },
+
+ function() {
+ ok(clicked, "click was fired on input");
+ start();
+ }
+ ], 2000);
+ });
+
+ asyncTest( "clicking the label triggers a change on the element", function() {
+ var changed = false;
+
+ expect( 1 );
+
+ $( "#checkbox-change-triggered" ).one('change', function() {
+ changed = true;
+ });
+
+ $.testHelper.sequence([
+ function() {
+ $( "[for='checkbox-change-triggered']" ).click();
+ },
+
+ function() {
+ ok(changed, "change was fired on input");
+ start();
+ }
+ ], 2000);
+ });
+
+
+ test( "theme should be inherited", function() {
+ var $inherited = $( "#checkbox-inherit-theme" ),
+ $explicit = $( "#checkbox-explicit-theme" );
+
+ ok( $inherited.siblings("label").hasClass( "ui-btn-up-a" ), "should inherit from page" );
+ ok( $explicit.siblings("label").hasClass( "ui-btn-up-b" ), "should not inherit" );
+ });
+
+ asyncTest( "form submission should include radio button values", function() {
+ var $form = $( "#radio-form" ), $input = $form.find("input").first();
+
+ $.testHelper.pageSequence([
+ function() {
+ $input.click();
+ $form.submit();
+ },
+
+ function( timeout ){
+ ok( location.search.indexOf("radio1=1") >= 0, "the radio was checked" );
+
+ // if the changepage in the previous function failed don't go back
+ if( !timeout ){
+ window.history.back();
+ }
+ },
+
+ function(){
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "form submission should include checkbox button values", function() {
+ var $form = $( "#check-form" ), $inputs = $form.find("input");
+
+ $.testHelper.pageSequence([
+ function() {
+ $inputs.click();
+ $form.submit();
+ },
+
+ function( timeout ){
+ ok( location.search.indexOf("checkbox-form=on") >= 0, "the first checkbox was checked" );
+ ok( location.search.indexOf("checkbox-form-2=on") >= 0, "the second checkbox was checked" );
+ // if the changepage in the previous function failed don't go back
+ if( !timeout ){
+ window.history.back();
+ }
+ },
+
+ function(){
+ start();
+ }
+ ]);
+ });
+
+ test( "nested label checkbox still renders", function() {
+ var $checkbox = $( "#checkbox-nested-label" );
+
+ try {
+ $checkbox.checkboxradio();
+ } catch (e) {
+ ok( false, "checkboxradio exception raised: " + e.toString());
+ }
+
+ ok( $checkbox.parent().hasClass("ui-checkbox"), "enhancement has occured");
+ });
+
+ test( "nested label (no [for]) checkbox still renders", function() {
+ var $checkbox = $( "#checkbox-nested-label-no-for" );
+
+ try {
+ $checkbox.checkboxradio();
+ } catch (e) {
+ ok( false, "checkboxradio exception raised: " + e.toString());
+ }
+
+ ok( $checkbox.parent().hasClass("ui-checkbox"), "enhancement has occured");
+ });
+
+ test( "Icon positioning", function() {
+ var bottomicon = $("[for='bottomicon']")
+ topicon = $("[for='topicon']");
+
+ ok( bottomicon.hasClass("ui-btn-icon-bottom"), "Icon position set on label adds the appropriate class." );
+ ok( topicon.hasClass("ui-btn-icon-top"), "Icon position set on input adds the appropriate class to the label." );
+ });
+})(jQuery);
--- /dev/null
+<div id="form-result" data-role="page">
+</div>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Mobile Checkboxradio Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.forms.checkboxradio",
+ "jquery.mobile.page" // Needed by the test suite
+ ],
+ [
+ "checkboxradio_core.js"
+ ],
+ [ "jquery.mobile.init" ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Checkbockradio Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" data-nstest-theme="a">
+ <div data-nstest-role="content">
+
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup">
+ <legend>Agree to the terms:</legend>
+ <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom"/>
+ <label for="checkbox-1">I agree</label>
+ </fieldset>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup">
+ <legend>Agree to the terms:</legend>
+ <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom"/>
+ <label for="checkbox-2">I agree</label>
+ </fieldset>
+ </div>
+
+ <div data-nstest-role="fieldcontain" data-nstest-role="controlgroup">
+ <div>
+ <legend>Agree to the terms 3.1:</legend>
+ <input type="checkbox" name="checkbox-3" id="checkbox-31" class="custom"/>
+ <label for="checkbox-31">I agree 3.1</label>
+ </div>
+ <div>
+ <legend>Agree to the terms 3.2:</legend>
+ <input type="checkbox" name="checkbox-3" id="checkbox-32" class="custom"/>
+ <label for="checkbox-32">I agree 3.2</label>
+ </div>
+ </div>
+ </div>
+
+<div data-role="fieldcontain" id="radio-active-btn-test">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-pet-active-btn" id="radio-pet-1" value="choice-1" checked="checked" />
+ <label for="radio-pet-1">Cat</label>
+
+ <input type="radio" name="radio-pet-active-btn" id="radio-pet-2" value="choice-2" />
+ <label for="radio-pet-2">Dog</label>
+
+ <input type="radio" name="radio-pet-active-btn" id="radio-pet-3" value="choice-3" />
+ <label for="radio-pet-3">Hamster</label>
+
+ <input type="radio" name="radio-pet-active-btn" id="radio-pet-4" value="choice-4" />
+ <label for="radio-pet-4">Lizard</label>
+ </fieldset>
+</div>
+
+<div data-role="fieldcontain">
+ <input type="radio" name="radio-full" value="choice-3" id="radio-full" />
+ <label for="radio-full">Hamster</label>
+
+ <input type="radio" name="radio-mini" value="choice-3" id="radio-mini" data-nstest-mini="true" />
+ <label for="radio-mini">Hamster</label>
+
+ <div data-nstest-role="controlgroup" data-nstest-mini="true" id="mini-control">
+ <input type="radio" name="radio-mini" value="choice-3" id="mini-ctrl" />
+ <label for="mini-ctrl">Hamster</label>
+ <input type="radio" name="full-ctrl" value="choice-3" id="full-ctrl" />
+ <label for="full-ctrl">Hamster</label>
+ </div>
+</div>
+
+
+<div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Agree to the terms:</legend>
+ <input type="checkbox" name="checkbox-1" id="checkbox-1" class="should-be-native" />
+ <label for="checkbox-1">I agree</label>
+ </fieldset>
+</div>
+
+<div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Agree to the terms:</legend>
+ <input type="checkbox" name="checkbox-click-triggered" id="checkbox-click-triggered"/>
+ <label for="checkbox-click-triggered">click triggered</label>
+ <input type="checkbox" name="checkbox-click-triggered" id="checkbox-click-triggered-2"/>
+ <label for="checkbox-click-triggered-2">click triggered</label>
+
+ <input type="radio" name="checkbox-change-triggered" id="checkbox-change-triggered"/>
+ <label for="checkbox-change-triggered">click triggered</label>
+ <input type="radio" name="checkbox-change-triggered" id="checkbox-change-triggered-2"/>
+ <label for="checkbox-change-triggered-2">click triggered</label>
+ </fieldset>
+</div>
+
+<div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend>Agree to the terms:</legend>
+ <input type="checkbox" name="checkbox-inherit-theme" id="checkbox-inherit-theme"/>
+ <label for="checkbox-inherit-theme">foo</label>
+ </fieldset>
+
+ <fieldset data-role="controlgroup">
+ <legend>Agree to the terms:</legend>
+ <input type="checkbox" name="checkbox-explicit-theme" id="checkbox-explicit-theme" data-nstest-theme="b"/>
+ <label for="checkbox-explicit-theme">foo</label>
+ </fieldset>
+</div>
+
+<div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup">
+ <input type="checkbox" name="topicon" id="topicon" class="custom" data-nstest-iconpos="top" />
+ <label for="topicon">I agree</label>
+
+ <input type="checkbox" name="bottomicon" id="bottomicon" class="custom" />
+ <label for="bottomicon" data-nstest-iconpos="bottom">I agree</label>
+ </fieldset>
+</div>
+
+<form id="radio-form" method="get" action="form-result.html">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Check one:</legend>
+ <input type="radio" id="radio1" name="radio1" value="1" />
+ <label for="radio1">Radio1</label>
+ </fieldset>
+</form>
+
+
+<form id="check-form" method="get" action="form-result.html">
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-form" id="checkbox-form" class="custom" />
+ <label for="checkbox-form">b</label>
+
+ <input type="checkbox" name="checkbox-form-2" id="checkbox-form-2" class="custom" />
+ <label for="checkbox-form-2"><em>i</em></label>
+ </fieldset>
+ </div>
+</form>
+
+</div>
+
+<div id="enhancetest">
+ <input type="checkbox" name="checkbox-332" id="checkbox-332" class="custom"/>
+ <label for="checkbox-332">I agree 3.2</label>
+</div>
+
+<div id="exception-test">
+ <form>
+ <input type="checkbox" name="checkbox-exception" id="checkbox-exception" class="custom"/>
+ </form>
+</div>
+
+<div id="nested-label-test">
+ <form>
+ <label for="checkbox-nested-label">
+ <input type="checkbox" name="checkbox-nested-label" id="checkbox-nested-label" class="custom"/>
+ </label>
+ </form>
+</div>
+
+<div id="nested-label-no-for-test">
+ <form>
+ <label>
+ <input type="checkbox" name="checkbox-nested-label-no-for" id="checkbox-nested-label-no-for" class="custom"/>
+ </label>
+ </form>
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * mobile listview unit tests
+ */
+
+// TODO split out into seperate test files
+(function( $ ){
+ module( "Collapsible section", {});
+
+ asyncTest( "The page should enhanced correctly", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#basic-collapsible-test" );
+ },
+
+ function() {
+ var $page = $( "#basic-collapsible-test" );
+ ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible" ), ".ui-collapsible class added to collapsible elements" );
+ ok($page.find( ".ui-content >:eq(0) >:header" ).hasClass( "ui-collapsible-heading" ), ".ui-collapsible-heading class added to collapsible heading" );
+ ok($page.find( ".ui-content >:eq(0) > div" ).hasClass( "ui-collapsible-content" ), ".ui-collapsible-content class added to collapsible content" );
+ ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible-collapsed" ), ".ui-collapsible-collapsed added to collapsed elements" );
+ ok(!$page.find( ".ui-content >:eq(1)" ).hasClass( "ui-collapsible-collapsed" ), ".ui-collapsible-collapsed not added to expanded elements" );
+ ok($page.find( ".ui-collapsible.ui-collapsible-collapsed" ).find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top ui-corner-bottom" ), "Collapsible header button should have class ui-corner-all" );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Expand/Collapse", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#basic-collapsible-test" );
+ },
+
+ function() {
+ ok($( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed");
+ $( "#basic-collapsible-test .ui-collapsible-heading-toggle" ).eq(0).click();
+ ok(!$( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be expanded after click");
+ $( "#basic-collapsible-test .ui-collapsible-heading-toggle" ).eq(0).click();
+ ok($( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed");
+ start();
+ }
+ ]);
+ });
+
+ module( "Collapsible set", {});
+
+ asyncTest( "The page should enhanced correctly", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#basic-collapsible-set-test" );
+ },
+
+ function() {
+ var $page = $( "#basic-collapsible-set-test" );
+
+ ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible-set" ), ".ui-collapsible-set class added to collapsible set" );
+ ok($page.find( ".ui-content >:eq(0) > div" ).hasClass( "ui-collapsible" ), ".ui-collapsible class added to collapsible elements" );
+ $page.find( ".ui-collapsible-set" ).each(function() {
+ var $this = $( this );
+ ok($this.find( ".ui-collapsible" ).first().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top" ), "First collapsible header button should have class ui-corner-top" );
+ ok($this.find( ".ui-collapsible" ).last().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-bottom" ), "Last collapsible header button should have class ui-corner-bottom" );
+ });
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Collapsible set with only one collapsible", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-set-with-lonely-collapsible-test" );
+ },
+
+ function() {
+ var $page = $( "#collapsible-set-with-lonely-collapsible-test" );
+ $page.find( ".ui-collapsible-set" ).each(function() {
+ var $this = $( this );
+ ok($this.find( ".ui-collapsible" ).first().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top" ), "First collapsible header button should have class ui-corner-top" );
+ ok($this.find( ".ui-collapsible" ).last().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-bottom" ), "Last collapsible header button should have class ui-corner-bottom" );
+ });
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Section expanded by default", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#basic-collapsible-set-test" );
+ },
+
+ function() {
+ equals($( "#basic-collapsible-set-test .ui-content >:eq(0) .ui-collapsible-collapsed" ).length, 2, "There should be 2 section collapsed" );
+ ok(!$( "#basic-collapsible-set-test .ui-content >:eq(0) >:eq(1)" ).hasClass( "ui-collapsible-collapsed" ), "Section B should be expanded" );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Expand/Collapse", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#basic-collapsible-set-test" );
+ },
+
+ function() {
+ ok($( "#basic-collapsible-set-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed");
+ $( "#basic-collapsible-set-test .ui-collapsible-heading-toggle" ).eq(0).click();
+ ok(!$( "#basic-collapsible-set-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be expanded after click");
+ $( "#basic-collapsible-set-test .ui-collapsible-heading-toggle" ).eq(0).click();
+ ok($( "#basic-collapsible-set-test .ui-collapsible" ).hasClass( "ui-collapsible-collapsed" ), "All collapsible should be collapsed");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Collapsible Set with dynamic content", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-set-with-dynamic-content" );
+ },
+
+ function() {
+ var set = $( ".ui-page-active" ).find( ".ui-collapsible-set" );
+ for ( var i = 0; i < 3; i++ ) {
+ $( '<div data-'+ $.mobile.ns +'role="collapsible"><h3>Collapsible Item ' + i + '</h3></div>' ).appendTo( set );
+ }
+ set.collapsibleset( "refresh" );
+ equal( set.find( ".ui-collapsible" ).length, 3, "The 3 collapsibles should be enhanced" );
+ ok( set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-top" ), "The 1st collapsible should have top corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 1st collapsible should NOT have bottom corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-top" ), "The 2nd collapsible should NOT have top corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 2nd collapsible should NOT have bottom corners" );
+ ok( set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 3rd collapsible should have bottom corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-top" ), "The 3rd collapsible should NOT have top corners" );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Collapsible Set with static and dynamic content", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-set-with-static-and-dynamic-content" );
+ },
+
+ function() {
+ var set = $( ".ui-page-active" ).find( ".ui-collapsible-set" );
+ for ( var i = 0; i < 2; i++ ) {
+ $( '<div data-'+ $.mobile.ns +'role="collapsible"><h3>Collapsible Item ' + i + '</h3></div>' ).appendTo( set );
+ }
+ set.collapsibleset( "refresh" );
+ equal( set.find( ".ui-collapsible" ).length, 3, "The 3 collapsibles should be enhanced" );
+ ok( set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-top" ), "The 1st collapsible should have top corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 1st collapsible should NOT have bottom corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-top" ), "The 2nd collapsible should NOT have top corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 2nd collapsible should NOT have bottom corners" );
+ ok( set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 3rd collapsible should have bottom corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-top" ), "The 3rd collapsible should NOT have top corners" );
+ start();
+ }
+ ]);
+ });
+
+ module( "Theming", {});
+
+ asyncTest( "Collapsible", 6, function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-with-theming" );
+ },
+
+ function() {
+ var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
+ ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
+ ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
+ ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
+ ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-body-b" ), "Content of second collapsible should have class ui-btn-up-b");
+ ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-c" ), "Heading of third collapsible should have class ui-btn-up-c");
+ ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-body-c" ), "Content of third collapsible should have class ui-btn-up-c");
+ start();
+ }
+ ]);
+ });
+
+
+ asyncTest( "Collapsible Set", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-set-with-theming" );
+ },
+
+ function() {
+ var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
+ ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
+ ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of first collapsible should NOT have class ui-btn-up-[a,b,c]");
+ ok( collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of first collapsible should NOT have class ui-btn-up-d");
+ ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
+ ok( !collapsibles.eq(1).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-c,.ui-body-d" ), "Content of second collapsible should NOT have class ui-btn-up-[a,c,d]");
+ ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-body-b" ), "Content of second collapsible should have class ui-btn-up-b");
+ ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of third collapsible should have class ui-btn-up-d");
+ ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of third collapsible should NOT have class ui-btn-up-[a,b,c]");
+ ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of third collapsible should have class ui-btn-up-d");
+ ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-collapsible-content-collapsed" ), "Content of third collapsible should NOT have class ui-collapsible-content-collapsed");
+ ok( collapsibles.eq(3).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of fourth collapsible should have class ui-btn-up-d");
+ ok( !collapsibles.eq(3).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of fourth collapsible should NOT have class ui-btn-up-[a,b,c]");
+ ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of fourth collapsible should have class ui-btn-up-d");
+ start();
+ }
+ ]);
+ });
+
+
+})( jQuery );
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Collapsible Integration Test</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.collapsible",
+ "jquery.mobile.collapsibleSet",
+ "jquery.mobile.page.sections"
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "collapsible_core.js"
+ ]
+ ]);
+ </script>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Collapsible Integration Test</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id='basic-collapsible-test'>
+ <div data-nstest-role="header">
+ <h1>Basic collapsible</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-nstest-role="collapsible">
+ <h3>Section A</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed="false">
+ <h3>Section B</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ </div>
+</div>
+
+<div data-nstest-role="page" id='basic-collapsible-set-test'>
+ <div data-nstest-role="header">
+ <h1>Basic collapsible</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-nstest-role="collapsible-set">
+ <div data-nstest-role="collapsible">
+ <h3>Section A</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed="false">
+ <h3>Section B</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ <div data-nstest-role="collapsible">
+ <h3>Section C</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<div data-nstest-role="page" id='collapsible-set-with-lonely-collapsible-test'>
+ <div data-nstest-role="header">
+ <h1>Basic collapsible</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-nstest-role="collapsible-set">
+ <div data-nstest-role="collapsible" >
+ <h3>Section D</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ </div>
+
+ <div data-nstest-role="collapsible" >
+ <h3>Section E</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ </div>
+</div>
+
+<div data-nstest-role="page" id='collapsible-with-theming'>
+ <div data-nstest-role="header">
+ <h1>Themed collapsibles</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-nstest-role="collapsible" data-nstest-theme="a">
+ <h3>Section A</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-theme="b" data-nstest-content-theme="b">
+ <h3>Section B</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-theme="c" data-nstest-content-theme="c" data-nstest-collapsed="false">
+ <h3>Section B</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+
+ </div>
+</div>
+
+<div data-nstest-role="page" id='collapsible-set-with-theming'>
+ <div data-nstest-role="header">
+ <h1>Themed collapsibles</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-nstest-role="collapsible-set" data-nstest-theme="d" data-nstest-content-theme="d">
+ <div data-nstest-role="collapsible" data-nstest-theme="a">
+ <h3>Section A</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-theme="b" data-nstest-content-theme="b">
+ <h3>Section B</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed="false">
+ <h3>Section C</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible">
+ <h3>Section D</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ </div>
+
+ </div>
+</div>
+
+<div data-nstest-role="page" id='collapsible-set-with-dynamic-content'>
+ <div data-nstest-role="header">
+ <h1>Collapsible Set with dynamic content</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-nstest-role="collapsible-set"></div>
+ </div>
+</div>
+
+<div data-nstest-role="page" id='collapsible-set-with-static-and-dynamic-content'>
+ <div data-nstest-role="header">
+ <h1>Collapsible Set with dynamic content</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-nstest-role="collapsible-set">
+ <div data-nstest-role="collapsible">
+ <h3>Section A</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * mobile checkboxradio unit tests
+ */
+(function($){
+ module( 'vertical controlgroup, no refresh' , {
+ setup: function() {
+ this.vcontrolgroup = $( "#vertical-controlgroup" );
+ }
+ });
+
+ test( "vertical controlgroup classes", function() {
+ var buttons = this.vcontrolgroup.find( ".ui-btn" ),
+ middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+ length = buttons.length;
+
+ ok( !buttons.hasClass( "ui-btn-corner-all" ), "no button should have class 'ui-btn-corner-all'");
+ ok( buttons.first().hasClass( "ui-corner-top" ), "first button should have class 'ui-corner-top'" );
+ ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
+ ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
+ ok( buttons.last().hasClass( "ui-corner-bottom"), "last button should have class 'ui-corner-bottom'" );
+ });
+
+ module( 'vertical controlgroup, refresh', {
+ setup: function() {
+ this.vcontrolgroup = $( "#vertical-controlgroup" );
+ this.vcontrolgroup.find( ".ui-btn" ).show();
+ this.vcontrolgroup.controlgroup();
+ }
+ });
+
+ test( "vertical controlgroup after first button was hidden", function() {
+ //https://github.com/jquery/jquery-mobile/issues/1929
+
+ //We hide the first button and refresh
+ this.vcontrolgroup.find( ".ui-btn" ).first().hide();
+ this.vcontrolgroup.controlgroup();
+
+ var buttons = this.vcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
+ middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+ length = buttons.length;
+
+ ok( buttons.first().hasClass( "ui-corner-top" ), "first visible button should have class 'ui-corner-top'" );
+ ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
+ ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
+ ok( buttons.last().hasClass( "ui-corner-bottom"), "last visible button should have class 'ui-corner-bottom'" );
+ });
+
+ test( "vertical controlgroup after last button was hidden", function() {
+ //https://github.com/jquery/jquery-mobile/issues/1929
+
+ //We hide the last button and refresh
+ this.vcontrolgroup.find( ".ui-btn" ).last().hide();
+ this.vcontrolgroup.controlgroup();
+
+ var buttons = this.vcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
+ middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+ length = buttons.length;
+
+ ok( buttons.first().hasClass( "ui-corner-top" ), "first visible button should have class 'ui-corner-top'" );
+ ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
+ ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
+ ok( buttons.last().hasClass( "ui-corner-bottom"), "last visible button should have class 'ui-corner-bottom'" );
+ });
+
+ module( 'horizontal controlgroup, no refresh', {
+ setup: function() {
+ this.hcontrolgroup = $( "#horizontal-controlgroup" );
+ }
+ });
+
+ test( "horizontal controlgroup classes", function() {
+ var buttons = this.hcontrolgroup.find( ".ui-btn" ),
+ middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+ length = buttons.length;
+
+ ok( !buttons.hasClass( "ui-btn-corner-all" ), "no button should have class 'ui-btn-corner-all'");
+ ok( buttons.first().hasClass( "ui-corner-left" ), "first button should have class 'ui-corner-left'" );
+ ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
+ ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
+ ok( buttons.last().hasClass( "ui-corner-right"), "last button should have class 'ui-corner-right'" );
+ });
+
+ module( 'horizontal controlgroup, refresh', {
+ setup: function() {
+ this.hcontrolgroup = $( "#horizontal-controlgroup" );
+ this.hcontrolgroup.find( ".ui-btn" ).show();
+ this.hcontrolgroup.controlgroup();
+ }
+ });
+
+ test( "horizontal controlgroup after first button was hidden", function() {
+ //We hide the first button and refresh
+ this.hcontrolgroup.find( ".ui-btn" ).first().hide();
+ this.hcontrolgroup.controlgroup();
+
+ var buttons = this.hcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
+ middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+ length = buttons.length;
+
+ ok( buttons.first().hasClass( "ui-corner-left" ), "first visible button should have class 'ui-corner-left'" );
+ ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
+ ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
+ ok( buttons.last().hasClass( "ui-corner-right"), "last visible button should have class 'ui-corner-right'" );
+ });
+
+ test( "horizontal controlgroup after last button was hidden", function() {
+ //We hide the last button and refresh
+ this.hcontrolgroup.find( ".ui-btn" ).last().hide();
+ this.hcontrolgroup.controlgroup();
+
+ var buttons = this.hcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
+ middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+ length = buttons.length;
+
+ ok( buttons.first().hasClass( "ui-corner-left" ), "first visible button should have class 'ui-corner-left'" );
+ ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
+ ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
+ ok( buttons.last().hasClass( "ui-corner-right"), "last visible button should have class 'ui-corner-right'" );
+ });
+
+
+ test( "controlgroups will create when inside a container that receives a 'create' event", function(){
+ ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-controlgroup").length, "did not have enhancements applied" );
+ ok( $("#enhancetest").trigger("create").find(".ui-controlgroup").length, "enhancements applied" );
+ });
+
+ test( "controlgroups in ignored containers aren't enhanced", function() {
+ var $unenhancedFieldSet = $( "#unenhanced-fieldset" ),
+ $enhancedFieldSet = $( "#enhanced-fieldset" );
+
+ $.mobile.ignoreContentEnabled = true;
+
+ // attempt to enhance the controlgroup
+ $unenhancedFieldSet.parent().trigger("create");
+
+ same( $unenhancedFieldSet.length, 1, "the fieldset test fixtures exist" );
+ ok( !$unenhancedFieldSet.is(".ui-controlgroup"), "there is no control group" );
+
+ // attempt to enhance the controlgroup
+ $enhancedFieldSet.parent().trigger("create");
+
+ same( $enhancedFieldSet.length, 1, "the fieldset test fixtures exist" );
+ ok( $enhancedFieldSet.is(".ui-controlgroup"), "there is a control group" );
+
+ $.mobile.ignoreContentEnabled = false;
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Mobile Controlgroup Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.forms.checkboxradio",
+ "jquery.mobile.controlGroup"
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "controlgroup_core.js"
+ ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Controlgroup Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="content">
+
+ <div data-nstest-role="fieldcontain" id="radio-active-btn-test">
+ <fieldset data-nstest-role="controlgroup" id="vertical-controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-pet-active-btn" id="radio-pet-1" value="choice-1" checked="checked" />
+ <label for="radio-pet-1">Cat</label>
+
+ <input type="radio" name="radio-pet-active-btn" id="radio-pet-2" value="choice-2" />
+ <label for="radio-pet-2">Dog</label>
+
+ <input type="radio" name="radio-pet-active-btn" id="radio-pet-3" value="choice-3" />
+ <label for="radio-pet-3">Hamster</label>
+
+ <input type="radio" name="radio-pet-active-btn" id="radio-pet-4" value="choice-4" />
+ <label for="radio-pet-4">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup" data-nstest-type="horizontal" id="horizontal-controlgroup">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
+ <label for="checkbox-6">b</label>
+
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
+ <label for="checkbox-7"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
+ <label for="checkbox-8"><em>s</em></label>
+
+ <input type="checkbox" name="checkbox-9" id="checkbox-9" class="custom" />
+ <label for="checkbox-9">u</label>
+ </fieldset>
+ </div>
+
+ </div>
+</div>
+
+<div data-nstest-enhance="false" data-nstest-role="fieldcontain" id="unenhanced-fieldcontain">
+ <fieldset data-nstest-type="horizontal" id="unenhanced-fieldset" data-nstest-role="controlgroup">
+ <input type="checkbox" name="checkbox-10" id="checkbox-10" class="custom" />
+ <label for="checkbox-10">b</label>
+
+ <input type="checkbox" name="checkbox-11" id="checkbox-11" class="custom" />
+ <label for="checkbox-11"><em>i</em></label>
+ </fieldset>
+</div>
+
+<div data-nstest-role="fieldcontain" id="enhanced-fieldcontain">
+ <fieldset data-nstest-type="horizontal" id="enhanced-fieldset" data-nstest-role="controlgroup">
+ <input type="checkbox" name="checkbox-12" id="checkbox-12" class="custom" />
+ <label for="checkbox-12">b</label>
+
+ <input type="checkbox" name="checkbox-13" id="checkbox-13" class="custom" />
+ <label for="checkbox-13"><em>i</em></label>
+ </fieldset>
+</div>
+
+<div data-nstest-role="fieldcontain" id="enhancetest">
+ <fieldset data-nstest-role="controlgroup">
+ </fieldset>
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * mobile core unit tests
+ */
+
+(function($){
+ var libName = "jquery.mobile.core",
+ setGradeA = function(value, version) {
+ $.support.mediaquery = value;
+ $.mobile.browser.ie = version;
+ },
+ extendFn = $.extend;
+
+ module(libName, {
+ setup: function(){
+ // NOTE reset for gradeA tests
+ $('html').removeClass('ui-mobile');
+
+ // NOTE reset for pageLoading tests
+ $('.ui-loader').remove();
+ },
+ teardown: function(){
+ $.extend = extendFn;
+ }
+ });
+
+ $.testHelper.excludeFileProtocol(function(){
+ asyncTest( "grade A browser either supports media queries or is IE 7+", function(){
+ setGradeA(false, 6);
+ $.testHelper.deferredSequence([
+ function() {
+ return $.testHelper.reloadModule(libName);
+ },
+
+ function() {
+ ok(!$.mobile.gradeA());
+ },
+
+ function() {
+ setGradeA(true, 8);
+ return $.testHelper.reloadModule(libName);
+ },
+
+ function() {
+ ok($.mobile.gradeA());
+ start();
+ }
+ ]);
+ });
+ });
+
+ function clearNSNormalizeDictionary()
+ {
+ var dict = $.mobile.nsNormalizeDict;
+ for ( var prop in dict ) {
+ delete dict[ prop ];
+ }
+ }
+
+ test( "$.mobile.nsNormalize works properly with namespace defined (test default)", function(){
+ // Start with a fresh namespace property cache, just in case
+ // the previous test mucked with namespaces.
+ clearNSNormalizeDictionary();
+
+ equal($.mobile.nsNormalize("foo"), "nstestFoo", "appends ns and initcaps");
+ equal($.mobile.nsNormalize("fooBar"), "nstestFooBar", "leaves capped strings intact");
+ equal($.mobile.nsNormalize("foo-bar"), "nstestFooBar", "changes dashed strings");
+ equal($.mobile.nsNormalize("foo-bar-bak"), "nstestFooBarBak", "changes multiple dashed strings");
+
+ // Reset the namespace property cache for the next test.
+ clearNSNormalizeDictionary();
+ });
+
+ test( "$.mobile.nsNormalize works properly with an empty namespace", function(){
+ var realNs = $.mobile.ns;
+
+ $.mobile.ns = "";
+
+ // Start with a fresh namespace property cache, just in case
+ // the previous test mucked with namespaces.
+ clearNSNormalizeDictionary();
+
+ equal($.mobile.nsNormalize("foo"), "foo", "leaves uncapped and undashed");
+ equal($.mobile.nsNormalize("fooBar"), "fooBar", "leaves capped strings intact");
+ equal($.mobile.nsNormalize("foo-bar"), "fooBar", "changes dashed strings");
+ equal($.mobile.nsNormalize("foo-bar-bak"), "fooBarBak", "changes multiple dashed strings");
+
+ $.mobile.ns = realNs;
+
+ // Reset the namespace property cache for the next test.
+ clearNSNormalizeDictionary();
+ });
+
+ //data tests
+ test( "$.fn.jqmData and $.fn.jqmRemoveData methods are working properly", function(){
+ var data;
+
+ same( $("body").jqmData("foo", true), $("body"), "setting data returns the element" );
+
+ same( $("body").jqmData("foo"), true, "getting data returns the right value" );
+
+ same( $("body").data($.mobile.nsNormalize("foo")), true, "data was set using namespace" );
+
+ same( $("body").jqmData("foo", undefined), true, "getting data still returns the value if there's an undefined second arg" );
+
+ data = $.extend( {}, $("body").data() );
+ delete data[ $.expando ]; //discard the expando for that test
+ same( data , { "nstestFoo": true }, "passing .data() no arguments returns a hash with all set properties" );
+
+ same( $("body").jqmData(), undefined, "passing no arguments returns undefined" );
+
+ same( $("body").jqmData(undefined), undefined, "passing a single undefined argument returns undefined" );
+
+ same( $("body").jqmData(undefined, undefined), undefined, "passing 2 undefined arguments returns undefined" );
+
+ same( $("body").jqmRemoveData("foo"), $("body"), "jqmRemoveData returns the element" );
+
+ same( $("body").jqmData("foo"), undefined, "jqmRemoveData properly removes namespaced data" );
+
+ });
+
+
+ test( "$.jqmData and $.jqmRemoveData methods are working properly", function(){
+ same( $.jqmData(document.body, "foo", true), true, "setting data returns the value" );
+
+ same( $.jqmData(document.body, "foo"), true, "getting data returns the right value" );
+
+ same( $.data(document.body, $.mobile.nsNormalize("foo")), true, "data was set using namespace" );
+
+ same( $.jqmData(document.body, "foo", undefined), true, "getting data still returns the value if there's an undefined second arg" );
+
+ same( $.jqmData(document.body), undefined, "passing no arguments returns undefined" );
+
+ same( $.jqmData(document.body, undefined), undefined, "passing a single undefined argument returns undefined" );
+
+ same( $.jqmData(document.body, undefined, undefined), undefined, "passing 2 undefined arguments returns undefined" );
+
+ same( $.jqmRemoveData(document.body, "foo"), undefined, "jqmRemoveData returns the undefined value" );
+
+ same( $("body").jqmData("foo"), undefined, "jqmRemoveData properly removes namespaced data" );
+
+ });
+
+ test( "addDependents works properly", function() {
+ same( $("#parent").jqmData('dependents'), undefined );
+ $( "#parent" ).addDependents( $("#dependent") );
+ same( $("#parent").jqmData('dependents').length, 1 );
+ });
+
+ test( "removeWithDependents removes the parent element and ", function(){
+ $( "#parent" ).addDependents( $("#dependent") );
+ same($( "#parent, #dependent" ).length, 2);
+ $( "#parent" ).removeWithDependents();
+ same($( "#parent, #dependent" ).length, 0);
+ });
+
+ test( "$.fn.getEncodedText should return the encoded value where $.fn.text doesn't", function() {
+ same( $("#encoded").text(), "foo>");
+ same( $("#encoded").getEncodedText(), "foo>");
+ same( $("#unencoded").getEncodedText(), "var foo;");
+ });
+
+ test( "closestPageData returns the parent's page data", function() {
+ var pageChild = $( "#page-child" );
+
+ $( "#parent-page" ).data( "page", { foo: "bar" } );
+ same( $.mobile.closestPageData( pageChild ).foo, "bar" );
+ });
+
+ test( "closestPageData returns the parent dialog's page data", function() {
+ var dialogChild = $( "#dialog-child" );
+
+ $( "#parent-dialog" ).data( "page", { foo: "bar" } );
+ same( $.mobile.closestPageData(dialogChild).foo, "bar" );
+ });
+
+ test( "test that $.fn.jqmHijackable works", function() {
+ $.mobile.ignoreContentEnabled = true;
+
+ same( $( "#hijacked-link" ).jqmHijackable().length, 1,
+ "a link without any association to data-ajax=false should be included");
+
+ same( $( "#unhijacked-link-by-parent" ).jqmHijackable().length, 0,
+ "a link with a data-ajax=false parent should be excluded");
+
+ same( $( "#unhijacked-link-by-attr" ).jqmHijackable().length, 0,
+ "a link with data-ajax=false should be excluded");
+
+ $.mobile.ignoreContentEnabled = false;
+ });
+})(jQuery);
\ No newline at end of file
--- /dev/null
+/*
+ * mobile core unit tests
+ */
+
+(function($){
+ var libName = "jquery.mobile.core",
+ scrollTimeout = 20, // TODO expose timing as an attribute
+ scrollStartEnabledTimeout = 150;
+
+ module(libName, {
+ setup: function(){
+ $("<div id='scroll-testing' style='height: 1000px'></div>").appendTo("body");
+ },
+
+ teardown: function(){
+ $("#scroll-testing").remove();
+ }
+ });
+
+ var scrollUp = function( pos ){
+ $(window).scrollTop(1000);
+ ok($(window).scrollTop() > 0, $(window).scrollTop());
+ $.mobile.silentScroll(pos);
+ };
+
+ asyncTest( "silent scroll scrolls the page to the top by default", function(){
+ scrollUp();
+
+ setTimeout(function(){
+ same($(window).scrollTop(), 0);
+ start();
+ }, scrollTimeout);
+ });
+
+ asyncTest( "silent scroll scrolls the page to the passed y position", function(){
+ var pos = 10;
+ scrollUp(pos);
+
+ setTimeout(function(){
+ same($(window).scrollTop(), pos);
+ start();
+ }, scrollTimeout);
+ });
+
+ test( "silent scroll is async", function(){
+ scrollUp();
+ ok($(window).scrollTop() != 0, "scrolltop position should not be zero");
+ start();
+ });
+
+ asyncTest( "scrolling marks scrollstart as disabled for 150 ms", function(){
+ $.event.special.scrollstart.enabled = true;
+ scrollUp();
+ ok(!$.event.special.scrollstart.enabled);
+
+ setTimeout(function(){
+ ok($.event.special.scrollstart.enabled);
+ start();
+ }, scrollStartEnabledTimeout);
+ });
+
+ //TODO test that silentScroll is called on window load
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Core Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.core"
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "core.js",
+ "core_scroll.js"
+ ]
+ ]);
+ </script>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Core Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page">
+</div>
+
+<div id="qunit-fixtures">
+ <div id="parent"></div>
+ <div id="dependent"></div>
+ <div id="encoded">foo></div>
+ <div id="unencoded"><script>var foo;</script></div>
+
+ <div id="parent-page" data-nstest-role="page">
+ <div id="page-child"></div>
+ </div>
+
+ <div id="parent-dialog" data-nstest-role="dialog">
+ <div id="dialog-child"></div>
+ </div>
+</div>
+
+<div id="hijackable">
+ <a href="#" id="hijacked-link"></a>
+ <a href="#" id="unhijacked-link-by-attr" data-nstest-ajax="false"></a>
+</div>
+
+<div id="not-hijackable" data-nstest-ajax="false">
+ <a href="#" id="unhijacked-link-by-parent"></a>
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * degradeInputs unit tests
+ */
+
+(function($){
+ module('jquery.mobile.degradeInputs.js');
+
+ test('keepNative elements should not be degraded', function() {
+ same($('input#not-to-be-degraded').attr("type"), "range");
+ });
+
+ asyncTest('should degrade input type to a different type, as specified in page options', function(){
+ var degradeInputs = $.mobile.page.prototype.options.degradeInputs;
+
+ expect( degradeInputs.length );
+
+ // NOTE the initial page is already enhanced (or expected to be) so we load the dialog to enhance it
+ // and _expect_ that the default page will remain "unreaped". This will break if that assumption changes
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( "#dialog" );
+ },
+
+ function() {
+ $.each(degradeInputs, function( oldType, newType ) {
+ if (newType === false) {
+ newType = oldType;
+ }
+
+ $('#page-test-container').html('<input type="' + oldType + '" />').trigger("create");
+
+ same($('#page-test-container input').attr("type"), newType, "type attr on page is: " + newType);
+
+ $('#dialog-test-container').html('<input type="' + oldType + '" />').trigger("create");
+
+ same($('#dialog-test-container input').attr("type"), newType, "type attr on dialog is: " + newType);
+ });
+
+ start();
+ }
+ ]);
+ });
+})(jQuery);
\ No newline at end of file
--- /dev/null
+ <!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Degrade Inputs Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [ "jquery.mobile.degradeInputs" ],
+ [ "jquery.mobile.init" ],
+ [ "degradeInputs.js" ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Degrade Inputs Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="page" data-nstest-role="page">
+
+ <input id="not-to-be-degraded" type="range" data-nstest-role="nojs" />
+
+ <div id="page-test-container">
+ </div>
+
+</div>
+
+<div id="dialog" data-nstest-role="dialog">
+
+ <div id="dialog-test-container">
+ </div>
+
+</div>
+
+</html>
--- /dev/null
+/*
+ * mobile dialog unit tests
+ */
+(function($) {
+
+ test( "When the page loads, any dialogs in the page should be initialized", function() {
+ expect( 1 );
+
+ ok( $( "#foo-dialog" ).is( ".ui-dialog" ), "When a dialog is the first element in a page, it is created as a dialog widget." );
+ });
+
+
+})( jQuery );
--- /dev/null
+/*
+ * mobile dialog unit tests
+ */
+(function($) {
+ module( "jquery.mobile.dialog.js", {
+ setup: function() {
+ $.mobile.page.prototype.options.contentTheme = "d";
+ }
+ });
+
+ asyncTest( "dialog hash is added when the dialog is opened and removed when closed", function() {
+ expect( 2 );
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( $( "#mypage" ) );
+ },
+
+ function() {
+ //bring up the dialog
+ $( "#foo-dialog-link" ).click();
+ },
+
+ function() {
+ var fooDialog = $( "#foo-dialog" );
+
+ // make sure the dialog came up
+ ok( /&ui-state=dialog/.test(location.hash), "ui-state=dialog =~ location.hash", "dialog open" );
+
+ // close the dialog
+ $( ".ui-dialog" ).dialog( "close" );
+ },
+
+ function() {
+ ok( !/&ui-state=dialog/.test(location.hash), "ui-state=dialog !~ location.hash" );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "dialog element with no theming", function() {
+ expect(4);
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( $( "#mypage" ) );
+ },
+
+ function() {
+ //bring up the dialog
+ $( "#link-a" ).click();
+ },
+
+ function() {
+ var dialog = $( "#dialog-a" );
+
+ // Assert dialog theme inheritance (issue 1375):
+ ok( dialog.hasClass( "ui-body-c" ), "Expected explicit theme ui-body-c" );
+ ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
+ ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
+ ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "dialog element with data-theme", function() {
+ // Reset fallback theme for content
+ $.mobile.page.prototype.options.contentTheme = null;
+
+ expect(5);
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( $( "#mypage" ) );
+ },
+
+ function() {
+ //bring up the dialog
+ $( "#link-b" ).click();
+ },
+
+ function() {
+ var dialog = $( "#dialog-b" );
+
+ // Assert dialog theme inheritance (issue 1375):
+ ok( dialog.hasClass( "ui-body-e" ), "Expected explicit theme ui-body-e" );
+ ok( !dialog.hasClass( "ui-overlay-b" ), "Expected no theme ui-overlay-b" );
+ ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
+ ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-e" ), "Expect content to inherit from data-theme" );
+ ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "dialog element with data-theme & data-overlay-theme", function() {
+ expect(5);
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( $( "#mypage" ) );
+ },
+
+ function() {
+ //bring up the dialog
+ $( "#link-c" ).click();
+ },
+
+ function() {
+ var dialog = $( "#dialog-c" );
+
+ // Assert dialog theme inheritance (issue 1375):
+ ok( dialog.hasClass( "ui-body-e" ), "Expected explicit theme ui-body-e" );
+ ok( dialog.hasClass( "ui-overlay-b" ), "Expected explicit theme ui-overlay-b" );
+ ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
+ ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
+ ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
+
+ start();
+ }
+ ]);
+ });
+
+
+ asyncTest( "page container is updated to dialog overlayTheme at pagebeforeshow", function(){
+
+ expect( 1 );
+
+ var pageTheme = "ui-overlay-" + $.mobile.activePage.dialog( "option", "overlayTheme" );
+
+ $.mobile.pageContainer.removeClass( pageTheme );
+
+ $.mobile.activePage
+ .bind( "pagebeforeshow", function(){
+ ok( $.mobile.pageContainer.hasClass( pageTheme ), "Page container has the same theme as the dialog overlayTheme on pagebeforeshow" );
+ start();
+ })
+ .trigger( "pagebeforeshow" );
+
+ } );
+
+
+})( jQuery );
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Dialog Test Suite</title>
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script>
+ $(document).bind('mobileinit',function(){
+ // Expect content to inherit this theme when not explicitly set
+ $.mobile.page.prototype.options.contentTheme = "d";
+ });
+ </script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.dialog",
+ "jquery.mobile.page",
+ "jquery.mobile.page.sections"
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "dialog_count.js"
+ ]
+ ]);
+ </script>
+
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Dialog Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="qunit-fixture">
+
+<div id="foo-dialog" data-nstest-role="dialog" data-nstest-theme="b">
+ <div data-nstest-role="header">
+ <h1>Dialog</h1>
+ </div>
+ <div data-nstest-role="content" >
+
+ </div>
+ <div data-nstest-role="footer">
+ footer
+ </div>
+</div>
+
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Dialog Test Suite</title>
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script>
+ $(document).bind('mobileinit',function(){
+ // Expect content to inherit this theme when not explicitly set
+ $.mobile.page.prototype.options.contentTheme = "d";
+ });
+ </script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.dialog",
+ "jquery.mobile.page",
+ "jquery.mobile.page.sections"
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "dialog_events.js"
+ ]
+ ]);
+ </script>
+
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Dialog Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="mypage" data-nstest-role="page" data-nstest-theme="a">
+ <a href="#foo-dialog" id="foo-dialog-link" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog"></a>
+ <a href="#dialog-a" id="link-a" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">no theme set</a>
+ <a href="#dialog-b" id="link-b" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">data-theme set</a>
+ <a href="#dialog-c" id="link-c" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">data-theme & data-nstest-overlay-theme set</a>
+</div>
+
+<div id="foo-dialog" data-nstest-role="dialog" data-nstest-theme="b">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Dialog</h1>
+ </div>
+ <div data-nstest-role="content" >
+ <a href="#" id="internal-link">foo</a>
+ </div>
+ <div data-nstest-role="footer">
+ footer
+ </div>
+</div>
+
+<div data-nstest-role="page" id="dialog-a">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1> No theme set </h1>
+ </div>
+ <div data-nstest-role="content">
+ Some text here....
+ </div>
+ <div data-nstest-role="footer">
+ footer
+ </div>
+</div>
+
+<div data-nstest-role="page" data-nstest-theme="e" id="dialog-b">
+ <div data-nstest-role="header">
+ <h1> data-nstest-theme set </h1>
+ </div>
+ <div data-nstest-role="content">
+ Some text here....
+ </div>
+ <div data-nstest-role="footer">
+ footer
+ </div>
+</div>
+
+<div data-nstest-role="page" id="dialog-c" data-nstest-overlay-theme="b" data-nstest-theme="e">
+ <div data-nstest-role="header">
+ <h1> data-nstest-theme & data-nstest-overlay-theme set </h1>
+ </div>
+ <div data-nstest-role="content">
+ Some text here....
+ </div>
+ <div data-nstest-role="footer">
+ footer
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * mobile event unit tests
+ */
+
+(function($){
+ var libName = "jquery.mobile.event.js",
+ absFn = Math.abs,
+ originalEventFn = $.Event.prototype.originalEvent,
+ preventDefaultFn = $.Event.prototype.preventDefault,
+ events = ("touchstart touchmove touchend orientationchange tap taphold " +
+ "swipe swipeleft swiperight scrollstart scrollstop").split( " " );
+
+ module(libName, {
+ setup: function(){
+
+ // ensure bindings are removed
+ $.each(events + "vmouseup vmousedown".split(" "), function(i, name){
+ $("#qunit-fixture").unbind();
+ });
+
+ //NOTE unmock
+ Math.abs = absFn;
+ $.Event.prototype.originalEvent = originalEventFn;
+ $.Event.prototype.preventDefault = preventDefaultFn;
+
+ // make sure the event objects respond to touches to simulate
+ // the collections existence in non touch enabled test browsers
+ $.Event.prototype.touches = [{pageX: 1, pageY: 1 }];
+
+ $($.mobile.pageContainer).unbind( "throttledresize" );
+ }
+ });
+
+ $.testHelper.excludeFileProtocol(function(){
+ test( "new events defined on the jquery object", function(){
+ $.each(events, function( i, name ) {
+ delete $.fn[name];
+ same($.fn[name], undefined);
+ });
+
+ $.testHelper.reloadLib(libName);
+
+ $.each(events, function( i, name ) {
+ ok($.fn[name] !== undefined, name + " is not undefined");
+ });
+ });
+ });
+
+ asyncTest( "defined event functions bind a closure when passed", function(){
+ expect( 1 );
+
+ $('#qunit-fixture').bind(events[0], function(){
+ ok(true, "event fired");
+ start();
+ });
+
+ $('#qunit-fixture').trigger(events[0]);
+ });
+
+ asyncTest( "defined event functions trigger the event with no arguments", function(){
+ expect( 1 );
+
+ $('#qunit-fixture').bind('touchstart', function(){
+ ok(true, "event fired");
+ start();
+ });
+
+ $('#qunit-fixture').touchstart();
+ });
+
+ test( "defining event functions sets the attrFn to true", function(){
+ $.each(events, function(i, name){
+ ok($.attrFn[name], "attribute function is true");
+ });
+ });
+
+ test( "scrollstart enabled defaults to true", function(){
+ $.event.special.scrollstart.enabled = false;
+ $.testHelper.reloadLib(libName);
+ ok($.event.special.scrollstart.enabled, "scrollstart enabled");
+ });
+
+ asyncTest( "scrollstart setup binds a function that returns when its disabled", function(){
+ expect( 1 );
+ $.event.special.scrollstart.enabled = false;
+
+ $( "#qunit-fixture" ).bind("scrollstart", function(){
+ ok(false, "scrollstart fired");
+ });
+
+ $( "#qunit-fixture" ).bind("touchmove", function(){
+ ok(true, "touchmove fired");
+ start();
+ });
+
+ $( "#qunit-fixture" ).trigger("touchmove");
+ });
+
+ asyncTest( "scrollstart setup binds a function that triggers scroll start when enabled", function(){
+ $.event.special.scrollstart.enabled = true;
+
+ $( "#qunit-fixture" ).bind("scrollstart", function(){
+ ok(true, "scrollstart fired");
+ start();
+ });
+
+ $( "#qunit-fixture" ).trigger("touchmove");
+ });
+
+ asyncTest( "scrollstart setup binds a function that triggers scroll stop after 50 ms", function(){
+ var triggered = false;
+ $.event.special.scrollstart.enabled = true;
+
+ $( "#qunit-fixture" ).bind("scrollstop", function(){
+ triggered = true;
+ });
+
+ ok(!triggered, "not triggered");
+
+ $( "#qunit-fixture" ).trigger("touchmove");
+
+ setTimeout(function(){
+ ok(triggered, "triggered");
+ start();
+ }, 50);
+ });
+
+ var forceTouchSupport = function(){
+ $.support.touch = true;
+ $.testHelper.reloadLib(libName);
+
+ //mock originalEvent information
+ $.Event.prototype.originalEvent = {
+ touches: [{ 'pageX' : 0 }, { 'pageY' : 0 }]
+ };
+ };
+
+ asyncTest( "long press fires tap hold after 750 ms", function(){
+ var taphold = false,
+ target;
+
+ forceTouchSupport();
+
+ $( "#qunit-fixture" ).bind("taphold", function( e ){
+ taphold = true;
+ target = e.target;
+ });
+
+ $( "#qunit-fixture" ).trigger("vmousedown");
+
+ setTimeout(function(){
+ ok( taphold );
+ equal( target, $( "#qunit-fixture" ).get( 0 ), "taphold target should be #qunit-fixture" );
+ start();
+ }, 751);
+ });
+
+ //NOTE used to simulate movement when checked
+ //TODO find a better way ...
+ var mockAbs = function(value){
+ Math.abs = function(){
+ return value;
+ };
+ };
+
+ asyncTest( "move prevents taphold", function(){
+ expect( 1 );
+ var taphold = false;
+
+ forceTouchSupport();
+ mockAbs(100);
+
+ //NOTE record taphold event
+ $( "#qunit-fixture" ).bind("taphold", function(){
+ ok(false, "taphold fired");
+ taphold = true;
+ });
+
+ //NOTE start the touch events
+ $( "#qunit-fixture" ).trigger("vmousedown");
+
+ //NOTE fire touchmove to push back taphold
+ setTimeout(function(){
+ $( "#qunit-fixture" ).trigger("vmousecancel");
+ }, 100);
+
+ //NOTE verify that the taphold hasn't been fired
+ // with the normal timing
+ setTimeout(function(){
+ ok(!taphold, "taphold not fired");
+ start();
+ }, 751);
+ });
+
+ asyncTest( "tap event fired without movement", function(){
+ expect( 1 );
+ var tap = false,
+ checkTap = function(){
+ ok(true, "tap fired");
+ };
+
+ forceTouchSupport();
+
+ //NOTE record the tap event
+ $( "#qunit-fixture" ).bind("tap", checkTap);
+
+ $( "#qunit-fixture" ).trigger("vmousedown");
+ $( "#qunit-fixture" ).trigger("vmouseup");
+ $( "#qunit-fixture" ).trigger("vclick");
+
+ setTimeout(function(){
+ start();
+ }, 400);
+ });
+
+ asyncTest( "tap event not fired when there is movement", function(){
+ expect( 1 );
+ var tap = false;
+ forceTouchSupport();
+
+ //NOTE record tap event
+ $( "#qunit-fixture" ).bind("tap", function(){
+ ok(false, "tap fired");
+ tap = true;
+ });
+
+ //NOTE make sure movement is recorded
+ mockAbs(100);
+
+ //NOTE start and move right away
+ $( "#qunit-fixture" ).trigger("touchstart");
+ $( "#qunit-fixture" ).trigger("touchmove");
+
+ //NOTE end touch sequence after 20 ms
+ setTimeout(function(){
+ $( "#qunit-fixture" ).trigger("touchend");
+ }, 20);
+
+ setTimeout(function(){
+ ok(!tap, "not tapped");
+ start();
+ }, 40);
+ });
+
+ asyncTest( "tap event propagates up DOM tree", function(){
+ var tap = 0,
+ $qf = $( "#qunit-fixture" ),
+ $doc = $( document ),
+ docTapCB = function(){
+ same(++tap, 2, "document tap callback called once after #qunit-fixture callback");
+ };
+
+ $qf.bind( "tap", function() {
+ same(++tap, 1, "#qunit-fixture tap callback called once");
+ });
+
+ $doc.bind( "tap", docTapCB );
+
+ $qf.trigger( "vmousedown" )
+ .trigger( "vmouseup" )
+ .trigger( "vclick" );
+
+ // tap binding should be triggered twice, once for
+ // #qunit-fixture, and a second time for document.
+ same( tap, 2, "final tap callback count is 2" );
+
+ $doc.unbind( "tap", docTapCB );
+
+ start();
+ });
+
+ asyncTest( "stopPropagation() prevents tap from propagating up DOM tree", function(){
+ var tap = 0,
+ $qf = $( "#qunit-fixture" ),
+ $doc = $( document ),
+ docTapCB = function(){
+ ok(false, "tap should NOT be triggered on document");
+ };
+
+ $qf.bind( "tap", function(e) {
+ same(++tap, 1, "tap callback 1 triggered once on #qunit-fixture");
+ e.stopPropagation();
+ })
+ .bind( "tap", function(e) {
+ same(++tap, 2, "tap callback 2 triggered once on #qunit-fixture");
+ });
+
+ $doc.bind( "tap", docTapCB);
+
+ $qf.trigger( "vmousedown" )
+ .trigger( "vmouseup" )
+ .trigger( "vclick" );
+
+ // tap binding should be triggered twice.
+ same( tap, 2, "final tap count is 2" );
+
+ $doc.unbind( "tap", docTapCB );
+
+ start();
+ });
+
+ asyncTest( "stopImmediatePropagation() prevents tap propagation and execution of 2nd handler", function(){
+ var tap = 0,
+ $cf = $( "#qunit-fixture" );
+ $doc = $( document ),
+ docTapCB = function(){
+ ok(false, "tap should NOT be triggered on document");
+ };
+
+ // Bind 2 tap callbacks on qunit-fixture. Only the first
+ // one should ever be called.
+ $cf.bind( "tap", function(e) {
+ same(++tap, 1, "tap callback 1 triggered once on #qunit-fixture");
+ e.stopImmediatePropagation();
+ })
+ .bind( "tap", function(e) {
+ ok(false, "tap callback 2 should NOT be triggered on #qunit-fixture");
+ });
+
+ $doc.bind( "tap", docTapCB);
+
+ $cf.trigger( "vmousedown" )
+ .trigger( "vmouseup" )
+ .trigger( "vclick" );
+
+ // tap binding should be triggered once.
+ same( tap, 1, "final tap count is 1" );
+
+ $doc.unbind( "tap", docTapCB );
+
+ start();
+ });
+
+ var swipeTimedTest = function(opts){
+ var swipe = false;
+
+ forceTouchSupport();
+
+ $( "#qunit-fixture" ).bind('swipe', function(){
+ swipe = true;
+ });
+
+ //NOTE bypass the trigger source check
+ $.Event.prototype.originalEvent = {
+ touches: false
+ };
+
+ $( "#qunit-fixture" ).trigger("touchstart");
+
+ //NOTE make sure the coordinates are calculated within range
+ // to be registered as a swipe
+ mockAbs(opts.coordChange);
+
+ setTimeout(function(){
+ $( "#qunit-fixture" ).trigger("touchmove");
+ $( "#qunit-fixture" ).trigger("touchend");
+ }, opts.timeout + 100);
+
+ setTimeout(function(){
+ same(swipe, opts.expected, "swipe expected");
+ start();
+ }, opts.timeout + 200);
+
+ stop();
+ };
+
+ test( "swipe fired when coordinate change in less than a second", function(){
+ swipeTimedTest({ timeout: 10, coordChange: 35, expected: true });
+ });
+
+ test( "swipe not fired when coordinate change takes more than a second", function(){
+ swipeTimedTest({ timeout: 1000, coordChange: 35, expected: false });
+ });
+
+ test( "swipe not fired when coordinate change <= 30", function(){
+ swipeTimedTest({ timeout: 1000, coordChange: 30, expected: false });
+ });
+
+ test( "swipe not fired when coordinate change >= 75", function(){
+ swipeTimedTest({ timeout: 1000, coordChange: 75, expected: false });
+ });
+
+ asyncTest( "scrolling prevented when coordinate change > 10", function(){
+ expect( 1 );
+
+ forceTouchSupport();
+
+ // ensure the swipe custome event is setup
+ $( "#qunit-fixture" ).bind('swipe', function(){});
+
+ //NOTE bypass the trigger source check
+ $.Event.prototype.originalEvent = {
+ touches: false
+ };
+
+ $.Event.prototype.preventDefault = function(){
+ ok(true, "prevent default called");
+ start();
+ };
+
+ mockAbs(11);
+
+ $( "#qunit-fixture" ).trigger("touchstart");
+ $( "#qunit-fixture" ).trigger("touchmove");
+ });
+
+ asyncTest( "move handler returns when touchstart has been fired since touchstop", function(){
+ expect( 1 );
+
+ // bypass triggered event check
+ $.Event.prototype.originalEvent = {
+ touches: false
+ };
+
+ forceTouchSupport();
+
+ // ensure the swipe custome event is setup
+ $( "#qunit-fixture" ).bind('swipe', function(){});
+
+ $( "#qunit-fixture" ).trigger("touchstart");
+ $( "#qunit-fixture" ).trigger("touchend");
+
+ $( "#qunit-fixture" ).bind("touchmove", function(){
+ ok(true, "touchmove bound functions are fired");
+ start();
+ });
+
+ Math.abs = function(){
+ ok(false, "shouldn't compare coordinates");
+ };
+
+ $( "#qunit-fixture" ).trigger("touchmove");
+ });
+
+ var nativeSupportTest = function(opts){
+ $.support.orientation = opts.orientationSupport;
+ same($.event.special.orientationchange[opts.method](), opts.returnValue);
+ };
+
+ test( "orientation change setup should do nothing when natively supported", function(){
+ nativeSupportTest({
+ method: 'setup',
+ orientationSupport: true,
+ returnValue: false
+ });
+ });
+
+ test( "orientation change setup should bind resize when not supported natively", function(){
+ nativeSupportTest({
+ method: 'setup',
+ orientationSupport: false,
+ returnValue: undefined //NOTE result of bind function call
+ });
+ });
+
+ test( "orientation change teardown should do nothing when natively supported", function(){
+ nativeSupportTest({
+ method: 'teardown',
+ orientationSupport: true,
+ returnValue: false
+ });
+ });
+
+ test( "orientation change teardown should unbind resize when not supported natively", function(){
+ nativeSupportTest({
+ method: 'teardown',
+ orientationSupport: false,
+ returnValue: undefined //NOTE result of unbind function call
+ });
+ });
+
+ /* The following 4 tests are async so that the throttled event triggers don't interfere with subsequent tests */
+
+ asyncTest( "throttledresize event proxies resize events", function(){
+ $( window ).one( "throttledresize", function(){
+ ok( true, "throttledresize called");
+ start();
+ });
+
+ $( window ).trigger( "resize" );
+ });
+
+ asyncTest( "throttledresize event prevents resize events from firing more frequently than 250ms", function(){
+ var called = 0;
+
+ $(window).bind( "throttledresize", function(){
+ called++;
+ });
+
+ // NOTE 250 ms * 3 = 750ms which is plenty of time
+ // for the events to trigger before the next test, but
+ // not so much time that the second resize will be triggered
+ // before the call to same() is made
+ $.testHelper.sequence([
+ function(){
+ $(window).trigger( "resize" ).trigger( "resize" );
+ },
+
+ // verify that only one throttled resize was called after 250ms
+ function(){ same( called, 1 ); },
+
+ function(){
+ start();
+ }
+ ], 250);
+ });
+
+ asyncTest( "throttledresize event promises that a held call will execute only once after throttled timeout", function(){
+ var called = 0;
+
+ expect( 2 );
+
+ $.testHelper.eventSequence( "throttledresize", [
+ // ignore the first call
+ $.noop,
+
+ function(){
+ ok( true, "second throttled resize should run" );
+ },
+
+ function(timedOut){
+ ok( timedOut, "third throttled resize should not run");
+ start();
+ }
+ ]);
+
+ $.mobile.pageContainer
+ .trigger( "resize" )
+ .trigger( "resize" )
+ .trigger( "resize" );
+ });
+
+ asyncTest( "mousedown mouseup and click events should add a which when its not defined", function() {
+ var whichDefined = function( event ){
+ same(event.which, 1);
+ };
+
+ $( document ).bind( "vclick", whichDefined);
+ $( document ).trigger( "click" );
+
+ $( document ).bind( "vmousedown", whichDefined);
+ $( document ).trigger( "mousedown" );
+
+ $( document ).bind( "vmouseup", function( event ){
+ same(event.which, 1);
+ start();
+ });
+
+ $( document ).trigger( "mouseup" );
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Event Test Suite</title>
+
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script type="text/javascript">
+ $.testHelper.setPushState();
+ </script>
+
+ <script src="../../../js/jquery.mobile.define.js"></script>
+ <script src="../../../js/jquery.mobile.event.js"></script>
+ <script src="../../../js/"></script>
+
+
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+ <script src="../../../external/qunit.js"></script>
+
+ <script src="event_core.js"></script>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Event Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="qunit-fixture"></div>
+
+<div id="foo" data-nstest-role="page">
+ <a href="#bar" data-nstest-transition="flip"></a>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * mobile dialog unit tests
+ */
+(function($){
+ module('jquery.mobile.fieldContain.js');
+
+ test( "Field container contains appropriate css styles", function(){
+ ok($('#test-fieldcontain').hasClass('ui-field-contain ui-body ui-br'), 'A fieldcontain element must contain styles "ui-field-contain ui-body ui-br"');
+ });
+
+ test( "Field container will create when inside a container that receives a 'create' event", function(){
+ ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-field-contain").length, "did not have enhancements applied" );
+ ok( $("#enhancetest").trigger("create").find(".ui-field-contain").length, "enhancements applied" );
+ });
+
+ test( "field containers inside ignore container should not be enhanced", function() {
+ var $ignored = $( "#ignored-fieldcontain" ), $enhanced = $( "#enhanced-fieldcontain" );
+
+ $.mobile.ignoreContentEnabled = true;
+
+ $( "#ignore-container-tests" ).trigger( "create" );
+
+ same( $ignored.attr( "class" ), undefined, "ignored div does not have field contain class" );
+ ok( $enhanced.hasClass( "ui-field-contain" ), "enhanced div has field contain class" );
+
+ $.mobile.ignoreContentEnabled = false;
+
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Mobile FieldContain Integration Test</title>
+
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.fieldContain"
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "./fieldContain_events.js"
+ ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile FieldContainer Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page">
+
+ <!-- Basic fieldcontain test -->
+ <div id="test-fieldcontain" data-nstest-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+</div>
+
+<div id="enhancetest">
+ <div data-nstest-role="fieldcontain">
+ </div>
+</div>
+
+<div id="ignore-container-tests">
+ <div data-nstest-enhance="false">
+ <div data-nstest-role="fieldcontain" id="ignored-fieldcontain">
+ </div>
+ </div>
+
+ <div>
+ <div data-nstest-role="fieldcontain" id="enhanced-fieldcontain">
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * mobile Fixed Toolbar unit tests
+ */
+(function($){
+ module('jquery.mobile.fixedToolbar.js');
+
+ $( "html" ).height( screen.height * 3 );
+
+ function scrollDown(){
+ window.scrollTo(0,screen.height );
+ }
+
+ function scrollUp(){
+ window.scrollTo(0,0);
+ }
+
+ module("jquery.mobile.fixedToolbar.js", {setup: function() {
+ var startTimeout;
+
+ // swallow the inital page change
+ stop();
+ $(document).one("pagechange", function() {
+ clearTimeout(startTimeout);
+ });
+
+ startTimeout = setTimeout(start, 1000);
+ }});
+
+
+ test( "Fixed Header Structural Classes are applied correctly", function(){
+
+ //footer
+ ok( !$('#classes-test-a').hasClass('ui-header-fixed'), 'An ordinary header should not have fixed classes');
+ ok( $('#classes-test-b').hasClass('ui-header-fixed'), 'An header with data-position=fixed should have ui-header-fixed class');
+ ok( $('#classes-test-c').hasClass('ui-header-fullscreen'), 'An header with data-position=fixed and data-fullscreen should have ui-header-fullscreen class');
+
+ //footer
+ ok( !$('#classes-test-d').hasClass('ui-footer-fixed'), 'An ordinary footer should not have fixed classes');
+ ok( $('#classes-test-e').hasClass('ui-footer-fixed'), 'A footer with data-position=fixed should have ui-footer-fixed class"');
+ ok( $('#classes-test-f').hasClass('ui-footer-fullscreen'), 'A footer with data-position=fixed and data-fullscreen should have ui-footer-fullscreen class');
+
+ //parent
+ ok( $('#classes-test-b').closest( ".ui-page" ).hasClass( "ui-page-header-fixed" ), "Parent page of a fixed header has class ui-page-header-fixed" );
+ ok( $('#classes-test-e').closest( ".ui-page" ).hasClass( "ui-page-footer-fixed" ), "Parent page of a fixed footer has class ui-page-header-fixed" );
+ ok( $('#classes-test-c').closest( ".ui-page" ).hasClass( "ui-page-header-fullscreen" ), "Parent page of a fullscreen header has class ui-page-header-fullscreen" );
+ ok( $('#classes-test-f').closest( ".ui-page" ).hasClass( "ui-page-footer-fullscreen" ), "Parent page of a fullscreen footer has class ui-page-header-fullscreen" );
+
+
+ });
+
+ asyncTest( "Fixed header and footer transition classes are applied correctly", function(){
+
+ expect( 6 );
+
+ $.testHelper.sequence([
+ function(){
+ $( '#classes-test-b, #classes-test-g, #classes-test-e,#classes-test-h,#classes-test-i,#classes-test-j, #classes-test-k' ).fixedtoolbar( "hide" );
+ scrollDown();
+ },
+
+ function(){
+ //show first
+ $( '#classes-test-b, #classes-test-g, #classes-test-e,#classes-test-h,#classes-test-i,#classes-test-j, #classes-test-k' ).fixedtoolbar( "show" );
+ },
+
+ function() {
+
+ ok( $( '#classes-test-g' ).hasClass('slidedown'), 'The slidedown class should be applied by default');
+ ok( $( '#classes-test-k' ).hasClass('in'), 'The "in" class should be applied for fade transitions');
+ ok( !$( '#classes-test-h' ).hasClass('slidedown'), 'The slidedown class should not be applied when the header has a data-transition of "none"');
+
+ ok( !$( '#classes-test-h' ).hasClass('in'), 'The "in" class should not be applied when the header has a data-transition of "none"');
+ ok( $( '#classes-test-i' ).hasClass('slidedown'), 'The "slidedown" class should be applied when the header has a data-transition of "slide"');
+ ok( $( '#classes-test-j' ).hasClass('slideup'), 'The "slideup" class should be applied when the footer has a data-transition of "slide"');
+
+ },
+
+ function(){
+ scrollUp();
+ start();
+ }
+ ], 1000);
+
+ });
+
+ test( "User zooming is disabled when the header is visible and disablePageZoom is true", function(){
+ $.mobile.zoom.enable();
+ var defaultZoom = $.mobile.fixedtoolbar.prototype.options.disablePageZoom;
+ $( ".ui-page-active .ui-header-fixed" ).fixedtoolbar("option", "disablePageZoom", true );
+
+ $( ".ui-page-active" ).trigger( "pagebeforeshow" );
+ ok( !$.mobile.zoom.enabled, "Viewport scaling is disabled before page show." );
+ $( ".ui-page-active .ui-header-fixed" ).fixedtoolbar("option", "disablePageZoom", defaultZoom );
+ $.mobile.zoom.enable();
+ });
+
+ test( "Meta viewport content is restored to previous state, and zooming renabled, after pagebeforehide", function(){
+ $.mobile.zoom.enable( true );
+ var defaultZoom = $.mobile.fixedtoolbar.prototype.options.disablePageZoom;
+ $( ".ui-page-active .ui-header-fixed" ).fixedtoolbar("option", "disablePageZoom", true );
+
+ $( ".ui-page-active" ).trigger( "pagebeforeshow" );
+ ok( !$.mobile.zoom.enabled, "Viewport scaling is disabled before page show." );
+ $( ".ui-page-active" ).trigger( "pagebeforehide" );
+ ok( $.mobile.zoom.enabled, "Viewport scaling is enabled." );
+ $( ".ui-page-active .ui-header-fixed" ).fixedtoolbar("option", "disablePageZoom", defaultZoom );
+ $.mobile.zoom.enable( true );
+ });
+
+ test( "User zooming is not disabled when the header is visible and disablePageZoom is false", function(){
+ $.mobile.zoom.enable( true );
+ var defaultZoom = $.mobile.fixedtoolbar.prototype.options.disablePageZoom;
+ $( ".ui-page :jqmData(position='fixed')" ).fixedtoolbar( "option", "disablePageZoom", false );
+
+ $( ".ui-page-active" ).trigger( "pagebeforeshow" );
+
+ ok( $.mobile.zoom.enabled, "Viewport scaling is not disabled before page show." );
+
+ $( ".ui-page :jqmData(position='fixed')" ).fixedtoolbar( "option", "disablePageZoom", defaultZoom );
+
+ $.mobile.zoom.enable( true );
+ });
+
+
+ asyncTest( "The hide method is working properly", function() {
+
+ expect( 2 );
+
+ $.testHelper.sequence([
+ function(){
+ $( '#classes-test-g' ).fixedtoolbar( "show" );
+ scrollDown();
+ },
+
+ function() {
+ $( '#classes-test-g' ).fixedtoolbar( "hide" );
+
+ ok( $( '#classes-test-g' ).hasClass('out'), 'The out class should be applied when hide is called');
+ },
+
+ function() {
+ ok( $( '#classes-test-g' ).hasClass('ui-fixed-hidden'), 'The toolbar has the ui-fixed-hidden class applied after hide');
+ $( '#classes-test-g' ).fixedtoolbar( "show" );
+
+ },
+
+ function(){
+ scrollUp();
+ start();
+ }
+
+ ], 500);
+ });
+
+
+
+ asyncTest( "The show method is working properly", function() {
+
+ expect( 2 );
+
+ $.testHelper.sequence([
+ function(){
+ scrollDown();
+ },
+
+ function() {
+ $( '#classes-test-g' ).fixedtoolbar( "hide" );
+ },
+
+ function() {
+ $( '#classes-test-g' ).fixedtoolbar( "show" );
+
+ ok( $( '#classes-test-g' ).hasClass('in'), 'The in class should be applied when show is called');
+ },
+
+ function() {
+ ok( !$( '#classes-test-g' ).hasClass('ui-fixed-hidden'), 'The toolbar does not have the ui-fixed-hidden class applied after show');
+
+ },
+
+ function(){
+ scrollUp();
+ start();
+ }
+ ], 500);
+ });
+
+
+ asyncTest( "The toggle method is working properly", function() {
+
+ expect( 3 );
+
+ $.testHelper.sequence([
+ function(){
+ scrollDown();
+ },
+
+ function(){
+ $( '#classes-test-g' ).fixedtoolbar( "show" );
+ },
+
+ function() {
+ ok( !$( '#classes-test-g' ).hasClass('ui-fixed-hidden'), 'The toolbar does not have the ui-fixed-hidden class');
+ $( '#classes-test-g' ).fixedtoolbar( "toggle" );
+ },
+
+ function() {
+ ok( $( '#classes-test-g' ).hasClass('ui-fixed-hidden'), 'The toolbar does have the ui-fixed-hidden class');
+ $( '#classes-test-g' ).fixedtoolbar( "toggle" );
+ },
+
+ function() {
+ ok( !$( '#classes-test-g' ).hasClass('ui-fixed-hidden'), 'The toolbar does not have the ui-fixed-hidden class');
+
+ },
+
+ function(){
+ scrollUp();
+ start();
+ }
+
+ ], 500);
+ });
+
+
+ asyncTest( "The persistent headers and footers are working properly", function() {
+
+ expect( 3 );
+
+ $( "#persist-test-b, #persist-test-a" ).page();
+
+ var nextpageheader = $( "#persist-test-b .ui-header-fixed" ),
+ nextpagefooter = $( "#persist-test-b .ui-footer-fixed" );
+
+
+ $.testHelper.pageSequence([
+ function(){
+ ok( nextpageheader.length && nextpagefooter.length, "next page has fixed header and fixed footer" );
+ $.mobile.changePage( "#persist-test-a" );
+ },
+
+ function(){
+ $( "#persist-test-b" )
+ .one( "pagebeforeshow", function(){
+ ok( nextpageheader.parent( ".ui-mobile-viewport" ).length, "fixed header and footer are now a child of page container" );
+ });
+
+ $.mobile.changePage( "#persist-test-b" );
+ },
+
+ function() {
+ ok( nextpageheader.parent( ".ui-page" ).length, "fixed header and footer are now a child of page again" );
+ $.mobile.changePage( "#default" );
+ },
+
+ start
+ ]);
+ });
+
+ asyncTest( "The persistent headers should work without a footer", function() {
+
+ expect( 3 );
+
+ $( "#persist-test-c, #persist-test-d" ).page();
+
+ var nextpageheader = $( "#persist-test-d .ui-header-fixed" );
+
+ $.testHelper.pageSequence([
+ function(){
+ ok( nextpageheader.length, "next page has fixed header and fixed footer" );
+ $.mobile.changePage( "#persist-test-c" );
+ },
+
+ function(){
+ $( "#persist-test-d" )
+ .one( "pagebeforeshow", function(){
+ same( nextpageheader.parent()[0], $.mobile.pageContainer[0], "fixed header is now a child of page container" );
+ });
+
+ $.mobile.changePage( "#persist-test-d" );
+ },
+
+ function() {
+ same( nextpageheader.parent()[0], $.mobile.activePage[0], "fixed header is now a child of page again" );
+ $.mobile.changePage( "#default" );
+ },
+
+ start
+ ]);
+ });
+
+ asyncTest( "The persistent footers should work without a header", function() {
+
+ expect( 3 );
+
+ $( "#persist-test-e, #persist-test-f" ).page();
+
+ var nextpagefooter = $( "#persist-test-f .ui-footer-fixed" );
+
+ $.testHelper.pageSequence([
+ function(){
+ ok( nextpagefooter.length, "next page has fixed footer and fixed footer" );
+ $.mobile.changePage( "#persist-test-e" );
+ },
+
+ function(){
+ $( "#persist-test-f" )
+ .one( "pagebeforeshow", function(){
+ same( nextpagefooter.parent()[0], $.mobile.pageContainer[0], "fixed footer is now a child of page container" );
+ });
+
+ $.mobile.changePage( "#persist-test-f" );
+ },
+
+ function() {
+ same( nextpagefooter.parent()[0], $.mobile.activePage[0], "fixed footer is now a child of page again" );
+ $.mobile.changePage( "#default" );
+ },
+
+ start
+ ]);
+ });
+
+
+ var asyncTestFooterAndHeader = function( pageSelector, areHidden ) {
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( pageSelector );
+ },
+
+ function() {
+ var $footer = $.mobile.activePage.find( ".ui-footer" ),
+ $header = $.mobile.activePage.find( ".ui-header" ),
+ hidden = areHidden ? "hidden" : "visible";
+
+ equal( $footer.length, 1, "there should be one footer" );
+ equal( $header.length, 1, "there should be one header" );
+
+ equal( $footer.hasClass( "ui-fixed-hidden" ), areHidden, "the footer should be " + hiddenStr );
+ equal( $header.hasClass( "ui-fixed-hidden" ), areHidden, "the header should be " + hiddenStr );
+
+ $.mobile.changePage( "#default" );
+ },
+
+ start
+ ]);
+ };
+
+ asyncTest( "data-visible-on-page-show hides toolbars when false", function() {
+ asyncTestFooterAndHeader( "#page-show-visible-false", false );
+ });
+
+ asyncTest( "data-visible-on-page-show shows toolbars when explicitly true", function() {
+ asyncTestFooterAndHeader( "#page-show-visible-true", true );
+ });
+
+ asyncTest( "data-visible-on-page-show shows toolbars when undefined", function() {
+ asyncTestFooterAndHeader( "#page-show-visible-undefined", true );
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Mobile Fixed Toolbar Integration Test</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [ "jquery.mobile.fixedToolbar" ],
+ [ "jquery.mobile.init" ],
+ [ "./fixedToolbar.js" ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile FieldContainer Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="default">
+ <!-- structural classes -->
+ <div data-nstest-role="header" id="classes-test-a"></div>
+ <div data-nstest-role="header" data-nstest-position="fixed" id="classes-test-b"></div>
+ <div data-nstest-role="header" data-nstest-position="fixed" data-nstest-fullscreen="true" id="classes-test-c"></div>
+ <div data-nstest-role="footer" id="classes-test-d"></div>
+ <div data-nstest-role="footer" data-nstest-position="fixed" id="classes-test-e"></div>
+ <div data-nstest-role="footer" data-nstest-position="fixed" data-nstest-fullscreen="true" id="classes-test-f"></div>
+
+ <!-- transition classes -->
+ <div data-nstest-role="header" data-nstest-position="fixed" id="classes-test-g"></div>
+ <div data-nstest-role="header" data-nstest-position="fixed" data-nstest-transition="none" id="classes-test-h"></div>
+ <div data-nstest-role="header" data-nstest-position="fixed" data-nstest-transition="slide" id="classes-test-i"></div>
+ <div data-nstest-role="footer" data-nstest-position="fixed" data-nstest-transition="slide" id="classes-test-j"></div>
+ <div data-nstest-role="header" data-nstest-position="fixed" data-nstest-transition="fade" id="classes-test-k"></div>
+</div>
+
+
+
+<div data-nstest-role="page" id="persist-test-a">
+ <div data-nstest-role="header" data-nstest-position="fixed" data-nstest-id="a"></div>
+ <div data-nstest-role="footer" data-nstest-position="fixed" data-nstest-id="b"></div>
+</div>
+
+<div data-nstest-role="page" id="persist-test-b">
+ <div data-nstest-role="header" data-nstest-position="fixed" data-nstest-id="a"></div>
+ <div data-nstest-role="footer" data-nstest-position="fixed" data-nstest-id="b"></div>
+</div>
+
+<div data-nstest-role="page" id="persist-test-c">
+ <div data-nstest-role="header" data-nstest-position="fixed" data-nstest-id="c"></div>
+</div>
+
+<div data-nstest-role="page" id="persist-test-d">
+ <div data-nstest-role="header" data-nstest-position="fixed" data-nstest-id="c"></div>
+</div>
+
+<div data-nstest-role="page" id="persist-test-e">
+ <div data-nstest-role="footer" data-nstest-position="fixed" data-nstest-id="d"></div>
+</div>
+
+<div data-nstest-role="page" id="persist-test-f">
+ <div data-nstest-role="footer" data-nstest-position="fixed" data-nstest-id="d"></div>
+</div>
+
+<div data-nstest-role="page" id="page-show-visible-false">
+ <div data-nstest-role="header" data-nstest-position="fixed" data-nstest-fullscreen="true" data-nstest-visible-on-page-show="false">
+ <h1>foo</h1>
+ </div>
+ <div data-nstest-role="footer" data-nstest-position="fixed" data-nstest-fullscreen="true" data-nstest-visible-on-page-show="false">
+ <h1>foo</h1>
+ </div>
+</div>
+
+<div data-nstest-role="page" id="page-show-visible-true">
+ <div data-nstest-role="header" data-nstest-position="fixed" data-nstest-fullscreen="true" data-nstest-visible-on-page-show="true"></div>
+ <div data-nstest-role="footer" data-nstest-position="fixed" data-nstest-fullscreen="true" data-nstest-visible-on-page-show="true"></div>
+</div>
+
+<div data-nstest-role="page" id="page-show-visible-undefined">
+ <div data-nstest-role="header" data-nstest-fullscreen="true" data-nstest-position="fixed"></div>
+ <div data-nstest-role="footer" data-nstest-fullscreen="true" data-nstest-position="fixed"></div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="../../external/qunit.css" />
+ <script src="../../js/jquery.tag.inserter.js"></script>
+ <script src="../../external/qunit.js"></script>
+ <script src="runner.js"></script>
+ <style type="text/css">
+ html, body {
+ width:100%;
+ height:100%;
+ margin:0px;
+ padding:0px;
+ }
+
+ #testFrame {
+ float: left;
+ border: 0px;
+ height: 100%;
+ width: 60%;
+ }
+
+ #results {
+ float: left;
+ width: 30%;
+ }
+ </style>
+</head>
+<body>
+ <div id="results">
+ <h1 id="qunit-header"><a href="#">jQuery Mobile Test Suite</a></h1>
+ <h2 id="qunit-banner"></h2>
+ <ol id="qunit-tests">
+ </ol>
+ </div>
+ <iframe data-src="../../tests/unit/{{testdir}}?jquery={{jquery.version}}" name="testFrame" id="testFrame" scrolling="no">
+ </iframe>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Mobile Init Test Suite</title>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../../external/requirejs/require.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.core",
+ ],
+ [ "jquery.mobile.init" ],
+ [ "init_dialog.js" ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+ </script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Init Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="dialog" id="foo">
+ <label for="select-choice-0" class="select">Shipping method:</label>
+ <select name="select-choice-0" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Mobile Init Test Suite</title>
+ <!-- meta viewport left out on purpose for test append -->
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../js/"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../jquery.testHelper.js"></script>
+ <script src="init_core.js"></script>
+ <!-- added explicitly for library reloading (see testHelper ) -->
+ <script src="../../../js/jquery.mobile.core.js"></script>
+ <script src="../../../js/jquery.mobile.init.js"></script>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Init Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="foo">
+</div>
+
+<div data-nstest-role="page" id="bar" data-nstest-url="bak">
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * mobile init tests
+ */
+(function($){
+ var mobilePage = undefined,
+ libName = 'jquery.mobile.init.js',
+ coreLib = 'jquery.mobile.core.js',
+ extendFn = $.extend,
+ originalLoadingMessage = $.mobile.loadingMessage,
+ setGradeA = function(value) { $.mobile.gradeA = function(){ return value; }; },
+ reloadCoreNSandInit = function(){
+ $.testHelper.reloadLib(coreLib);
+ $.testHelper.reloadLib("jquery.setNamespace.js");
+ $.testHelper.reloadLib(libName);
+ };
+
+
+ module(libName, {
+ setup: function(){
+ // NOTE reset for gradeA tests
+ $('html').removeClass('ui-mobile');
+
+ // TODO add post reload callback
+ $('.ui-loader').remove();
+ },
+ teardown: function(){
+ $.extend = extendFn;
+
+ // NOTE reset for showPageLoadingMsg/hidePageLoadingMsg tests
+ $('.ui-loader').remove();
+
+ // clear the classes added by reloading the init
+ $("html").attr('class', '');
+
+ $.mobile.loadingMessage = originalLoadingMessage;
+ }
+ });
+
+ // NOTE important to use $.fn.one here to make sure library reloads don't fire
+ // the event before the test check below
+ $(document).one("mobileinit", function(){
+ mobilePage = $.mobile.page;
+ });
+
+ // NOTE for the following two tests see index html for the binding
+ test( "mobile.page is available when mobile init is fired", function(){
+ ok( mobilePage !== undefined, "$.mobile.page is defined" );
+ });
+
+ $.testHelper.excludeFileProtocol(function(){
+ asyncTest( "loading the init library triggers mobilinit on the document", function(){
+ var initFired = false;
+ expect( 1 );
+
+ $(window.document).one('mobileinit', function(event){
+ initFired = true;
+ });
+
+ $.testHelper.reloadLib(libName);
+
+ setTimeout(function(){
+ ok(initFired, "init fired");
+ start();
+ }, 1000);
+ });
+
+ test( "enhancments are skipped when the browser is not grade A", function(){
+ setGradeA(false);
+ $.testHelper.reloadLib(libName);
+
+ //NOTE easiest way to check for enhancements, not the most obvious
+ ok(!$("html").hasClass("ui-mobile"), "html elem doesn't have class ui-mobile");
+ });
+
+ test( "enhancments are added when the browser is grade A", function(){
+ setGradeA(true);
+ $.testHelper.reloadLib(libName);
+
+ ok($("html").hasClass("ui-mobile"), "html elem has class mobile");
+ });
+
+ asyncTest( "useFastClick is configurable via mobileinit", function(){
+ $(document).one( "mobileinit", function(){
+ $.mobile.useFastClick = false;
+ start();
+ });
+
+ $.testHelper.reloadLib(libName);
+
+ same( $.mobile.useFastClick, false , "fast click is set to false after init" );
+ $.mobile.useFastClick = true;
+ });
+
+
+
+ var findFirstPage = function() {
+ return $(":jqmData(role='page')").first();
+ };
+
+ test( "active page and start page should be set to the fist page in the selected set", function(){
+ expect( 2 );
+ $.testHelper.reloadLib(libName);
+ var firstPage = findFirstPage();
+
+ same($.mobile.firstPage[0], firstPage[0]);
+ same($.mobile.activePage[0], firstPage[0]);
+ });
+
+ test( "mobile viewport class is defined on the first page's parent", function(){
+ expect( 1 );
+ $.testHelper.reloadLib(libName);
+ var firstPage = findFirstPage();
+
+ ok(firstPage.parent().hasClass("ui-mobile-viewport"), "first page has viewport");
+ });
+
+ test( "mobile page container is the first page's parent", function(){
+ expect( 1 );
+ $.testHelper.reloadLib(libName);
+ var firstPage = findFirstPage();
+
+ same($.mobile.pageContainer[0], firstPage.parent()[0]);
+ });
+
+ asyncTest( "hashchange triggered on document ready with single argument: true", function(){
+ $.testHelper.sequence([
+ function(){
+ location.hash = "#foo";
+ },
+
+ // delay the bind until the first hashchange
+ function(){
+ $(window).one("hashchange", function(ev, arg){
+ same(arg, true);
+ start();
+ });
+ },
+
+ function(){
+ $.testHelper.reloadLib(libName);
+ }
+ ], 1000);
+ });
+
+ test( "pages without a data-url attribute have it set to their id", function(){
+ same($("#foo").jqmData('url'), "foo");
+ });
+
+ test( "pages with a data-url attribute are left with the original value", function(){
+ same($("#bar").jqmData('url'), "bak");
+ });
+
+ asyncTest( "showPageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
+ expect( 1 );
+ $.mobile.loadingMessage = false;
+ $.mobile.showPageLoadingMsg();
+
+ setTimeout(function(){
+ ok(!$(".ui-loader").length, "no ui-loader element");
+ start();
+ }, 500);
+ });
+
+ asyncTest( "hidePageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
+ expect( 1 );
+ $.mobile.loadingMessage = true;
+ $.mobile.hidePageLoadingMsg();
+
+ setTimeout(function(){
+ same($(".ui-loading").length, 0, "page should not be in the loading state");
+ start();
+ }, 500);
+ });
+
+ asyncTest( "showPageLoadingMsg adds the dialog to the page when loadingMessage is true", function(){
+ expect( 1 );
+ $.mobile.loadingMessage = true;
+ $.mobile.showPageLoadingMsg();
+
+ setTimeout(function(){
+ same($(".ui-loading").length, 1, "page should be in the loading state");
+ start();
+ }, 500);
+ });
+
+ asyncTest( "page loading should contain default loading message", function(){
+ expect( 1 );
+ reloadCoreNSandInit();
+ $.mobile.showPageLoadingMsg();
+
+ setTimeout(function(){
+ same($(".ui-loader h1").text(), "loading");
+ start();
+ }, 500);
+ });
+
+ asyncTest( "page loading should contain custom loading message", function(){
+ $.mobile.loadingMessage = "foo";
+ $.testHelper.reloadLib(libName);
+ $.mobile.showPageLoadingMsg();
+
+ setTimeout(function(){
+ same($(".ui-loader h1").text(), "foo");
+ start();
+ }, 500);
+ });
+
+ asyncTest( "page loading should contain custom loading message when set during runtime", function(){
+ $.mobile.loadingMessage = "bar";
+ $.mobile.showPageLoadingMsg();
+
+ setTimeout(function(){
+ same($(".ui-loader h1").text(), "bar");
+ start();
+ }, 500);
+ });
+
+
+
+ // NOTE: the next two tests work on timeouts that assume a page will be created within 2 seconds
+ // it'd be great to get these using a more reliable callback or event
+
+ asyncTest( "page does auto-initialize at domready when autoinitialize option is true (default) ", function(){
+
+ $( "<div />", { "data-nstest-role": "page", "id": "autoinit-on" } ).prependTo( "body" )
+
+ $(document).one("mobileinit", function(){
+ $.mobile.autoInitializePage = true;
+ });
+
+ location.hash = "";
+
+ reloadCoreNSandInit();
+
+ setTimeout(function(){
+ same( $( "#autoinit-on.ui-page" ).length, 1 );
+
+ start();
+ }, 2000);
+ });
+
+
+ asyncTest( "page does not initialize at domready when autoinitialize option is false ", function(){
+ $(document).one("mobileinit", function(){
+ $.mobile.autoInitializePage = false;
+ });
+
+ $( "<div />", { "data-nstest-role": "page", "id": "autoinit-off" } ).prependTo( "body" )
+
+ location.hash = "";
+
+
+ reloadCoreNSandInit();
+
+ setTimeout(function(){
+ same( $( "#autoinit-off.ui-page" ).length, 0 );
+
+ $(document).bind("mobileinit", function(){
+ $.mobile.autoInitializePage = true;
+ });
+
+ reloadCoreNSandInit();
+
+ start();
+ }, 2000);
+ });
+
+
+
+ });
+})(jQuery);
--- /dev/null
+/*
+ * mobile init dialog tests
+ */
+(function($){
+ module( "jquery.mobile.init dialog load tests" );
+
+ // issue #3275
+ test( "A document containing no pages and a dialog role div will enhance the div as a page", function() {
+ ok( $("#foo").hasClass( "ui-page" ), "the div has the page class" );
+
+ // NOTE this will fail when/if we decide to render it as a dialog
+ ok( !$("#foo").hasClass( "ui-dialog" ), "the div does NOT have the dialog page class" );
+ });
+
+ //NOTE the opposite case is tested everyewhere else in the suite :D
+})( jQuery );
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Mobile Init Test Suite</title>
+ <!-- meta viewport left out on purpose for test append -->
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../js/"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../jquery.testHelper.js"></script>
+ <script src="init_core_nopage.js"></script>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+ <script src="../swarminject.js"></script>
+
+ <style>
+ [data-nstest-role="page"], [data-nstest-role="dialog"] {
+ position: static !important;
+ }
+ </style>
+</head>
+
+<h1 id="qunit-header">jQuery Mobile Init Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Mobile Kitchen Sink Test Suite</title>
+ <!-- meta viewport left out on purpose for test append -->
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../jquery.testHelper.js"></script>
+ <script src="../../../js/"></script>
+
+ <script>
+ $.testHelper.asyncLoad([
+ [ "jquery.mobile.init" ],
+ [ "kitchensink_core.js" ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Kitchen Sink Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="default">
+ <div data-nstest-role="header" data-nstest-position="fixed" data-nstest-theme="a">
+ <h1>Fixed toolbars</h1>
+ <a href="../../" data-nstest-icon="home" data-nstest-iconpos="notext" data-nstest-direction="reverse">Home</a>
+ <a href="../nav.html" data-nstest-icon="search" data-nstest-iconpos="notext" data-nstest-rel="dialog" data-nstest-transition="fade">Search</a>
+ </div>
+
+ <div data-nstest-role="content" id="control-group-content">
+
+ <h2>Form Elements in Fieldcontains</h2>
+ <div data-nstest-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" />
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="search">Search Input:</label>
+ <input type="search" name="password" id="search" value="" />
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-nstest-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="50" min="0" max="100" data-nstest-highlight="true" />
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup">
+ <legend>Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
+ <label for="checkbox-1a">Cheetos</label>
+
+ <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
+ <label for="checkbox-2a">Doritos</label>
+
+ <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
+ <label for="checkbox-3a">Fritos</label>
+
+ <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
+ <label for="checkbox-4a">Sun Chips</label>
+ </fieldset>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup" data-nstest-type="horizontal">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
+ <label for="checkbox-6">b</label>
+
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
+ <label for="checkbox-7"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
+ <label for="checkbox-8">u</label>
+ </fieldset>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup" data-nstest-theme="c">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup" data-nstest-type="horizontal">
+ <legend>Layout view:</legend>
+ <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
+ <label for="radio-choice-c">List</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
+ <label for="radio-choice-d">Grid</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
+ <label for="radio-choice-e">Gallery</label>
+ </fieldset>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a" data-nstest-native-menu="false">
+ <option>Custom menu example</option>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ </div>
+ <div data-nstest-role="footer" id="control-group-footer" class="ui-bar" data-nstest-position="inline">
+ <div data-nstest-role="controlgroup" data-nstest-type="horizontal">
+ <a href="index.html" data-nstest-icon="delete">Remove</a>
+ <a href="index.html" data-nstest-icon="plus">Add</a>
+ <a href="index.html" data-nstest-icon="arrow-u">Up</a>
+ <a href="index.html" data-nstest-icon="arrow-d">Down</a>
+ </div>
+ </div>
+
+ <h2>Mini Form Elements</h2>
+
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" data-nstest-mini="true" />
+
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea" data-nstest-mini="true"></textarea>
+
+ <label for="search">Search Input:</label>
+ <input type="search" name="password" id="search" value="" data-nstest-mini="true" />
+
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-nstest-role="slider" data-nstest-mini="true">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="50" min="0" max="100" data-nstest-highlight="true" data-nstest-mini="true" />
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup" data-nstest-mini="true">
+ <!-- Mini set on controlgroup -->
+
+ <legend>Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
+ <label for="checkbox-1a">Cheetos</label>
+
+ <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
+ <label for="checkbox-2a">Doritos</label>
+
+ <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
+ <label for="checkbox-3a">Fritos</label>
+
+ <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
+ <label for="checkbox-4a">Sun Chips</label>
+ </fieldset>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup" data-nstest-type="horizontal" data-nstest-mini="true">
+
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
+ <label for="checkbox-6">b</label>
+
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
+ <label for="checkbox-7"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
+ <label for="checkbox-8">u</label>
+ </fieldset>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <input type="checkbox" name="radio-gaga" id="radio-gaga" value="choice-1" data-nstest-mini="true" data-nstest-mini="true" />
+ <label for="radio-gaga">Unchecked by Default</label>
+
+ <input type="checkbox" name="radio-googoo" id="radio-googoo" value="choice-1" data-nstest-mini="true" checked="checked" data-nstest-mini="true" />
+ <label for="radio-googoo">Checked by Default</label>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup" data-nstest-theme="c" >
+ <!-- Mini set on individual elements. -->
+
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" data-nstest-mini="true"/>
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup" data-nstest-type="horizontal">
+ <legend>Layout view:</legend>
+ <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
+ <label for="radio-choice-c">List</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
+ <label for="radio-choice-d">Grid</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
+ <label for="radio-choice-e">Gallery</label>
+ </fieldset>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a" data-nstest-native-menu="false">
+ <option>Custom menu example</option>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="footer" id="control-group-footer" class="ui-bar" data-nstest-position="inline">
+ <div data-nstest-role="controlgroup" data-nstest-type="horizontal">
+ <a href="index.html" data-nstest-icon="delete">Remove</a>
+ <a href="index.html" data-nstest-icon="plus">Add</a>
+ <a href="index.html" data-nstest-icon="arrow-u">Up</a>
+ <a href="index.html" data-nstest-icon="arrow-d">Down</a>
+ </div>
+ </div>
+
+
+ <h2>Simple list</h2>
+
+ <ul data-nstest-role="listview">
+ <li><a href="index.html">Acura</a></li>
+ <li><a href="index.html">Audi</a></li>
+ <li><a href="index.html">BMW</a></li>
+ </ul>
+
+ <h2>Mini list</h2>
+ <ul data-nstest-role="listview" data-nstest-mini="true">
+ <li><a href="index.html">Cooper</a></li>
+ <li><a href="index.html">Cooper S</a></li>
+ <li><a href="index.html">Clubman</a></li>
+ </ul>
+
+ <h2>Individual mini item</h2>
+ <ul data-nstest-role="listview">
+ <li><a href="index.html">Cooper</a></li>
+ <li data-nstest-mini="true"><a href="index.html">Cooper S</a></li>
+ <li><a href="index.html">Clubman</a></li>
+ </ul>
+
+
+
+
+ <h2>Count bubbles</h2>
+ <ul data-nstest-role="listview">
+ <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ <h2>Numbered list</h2>
+ <ol data-nstest-role="listview">
+ <li><a href="index.html">The Godfather</a></li>
+ <li><a href="index.html">Inception</a></li>
+ <li><a href="index.html">The Good, the Bad and the Ugly </a></li>
+ <li><a href="index.html">Pulp Fiction</a></li>
+ <li><a href="index.html">Schindler's List</a></li>
+ </ol>
+
+ <h2>Divided, formatted content</h2>
+ <ul data-nstest-role="listview">
+ <li><a href="index.html">
+ <h3>Stephen Weber</h3>
+ <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
+ <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
+ <p class="ui-li-aside"><strong>6:24</strong>PM</p>
+ </a></li>
+ <li><a href="index.html">
+ <h3>jQuery Team</h3>
+ <p><strong>Boston Conference Planning</strong></p>
+ <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
+ <p class="ui-li-aside"><strong>9:18</strong>AM</p>
+ </a></li>
+ </ul>
+
+
+
+ <h2>Icon list</h2>
+ <ul data-nstest-role="listview" data-nstest-theme="a">
+ <li><a href="index.html"><img src="../../../docs/lists/../../../docs/lists/images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
+ <li><a href="index.html"><img src="../../../docs/lists/images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
+ <li data-nstest-theme="b"><a href="index.html"><img src="../../../docs/lists/images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
+ <li><a href="index.html"><img src="../../../docs/lists/images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
+ <li><a href="index.html"><img src="../../../docs/lists/images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
+ <li><a href="index.html"><img src="../../../docs/lists/images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
+ </ul>
+
+ <h2>Thumbnail, split button list</h2>
+
+ <ul data-nstest-role="listview">
+ <li><a href="index.html">
+ <img src="../../../docs/lists/images/album-bb.jpg" />
+ <h3>Broken Bells</h3>
+ <p>Broken Bells</p>
+ </a><a href="lists-split-purchase.html" data-nstest-rel="dialog" data-nstest-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../../../docs/lists/images/album-hc.jpg" />
+ <h3>Warning</h3>
+ <p>Hot Chip</p>
+ </a><a href="lists-split-purchase.html" data-nstest-rel="dialog" data-nstest-transition="slideup">Purchase album
+ </a></li>
+ <li><a href="index.html">
+ <img src="../../../docs/lists/images/album-p.jpg" />
+ <h3>Wolfgang Amadeus Phoenix</h3>
+ <p>Phoenix</p>
+ </a><a href="lists-split-purchase.html" data-nstest-rel="dialog" data-nstest-transition="slideup">Purchase album
+ </a></li>
+ </ul>
+
+ <h2>Divided, filterable list</h2>
+ <ul data-nstest-role="listview" data-nstest-filter="true">
+ <li data-nstest-role="list-divider">A</li>
+ <li><a href="index.html">Adam Kinkaid</a></li>
+ <li><a href="index.html">Alex Wickerham</a></li>
+ <li><a href="index.html">Avery Johnson</a></li>
+ <li data-nstest-role="list-divider">B</li>
+ <li><a href="index.html">Bob Cabot</a></li>
+ <li data-nstest-role="list-divider">C</li>
+ <li><a href="index.html">Caleb Booth</a></li>
+ <li><a href="index.html">Christopher Adams</a></li>
+ </ul>
+
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * Kitchen Sink Tests
+ */
+(function($){
+ module("kitchen sink class test");
+
+ test( "Nothing on the page has a class that contains `undefined`.", function(){
+ var undefClass = $(".ui-page").find("[class*='undefined']");
+
+ ok( undefClass.length == 0 );
+ });
+
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Listview Integration Test</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.navigation",
+ "jquery.mobile.listview",
+ "jquery.mobile.listview.filter",
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "listview_core.js"
+ ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Listview Integration Test</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<!-- Basic Linked view test -->
+<div data-nstest-role="page" id='basic-linked-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Basic List View</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview">
+ <li><a href="#basic-link-results">Home</a></li>
+ <li><a href="#basic-link-results">Back</a></li>
+ <li><a href="#basic-link-results">Return</a></li>
+ <li><a href="#nested-list-test" id="nested-list-test-anchor">Nested List Test</a></li>
+ </ul>
+ </div>
+ <a href="cache-tests/nested.html" id="cached-tests"></a>
+</div>
+
+<div data-nstest-role='page' id='basic-link-results'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Results</h1>
+ </div>
+</div>
+
+<!-- Nested List -->
+<div data-nstest-role="page" id='nested-list-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Basic List View</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview">
+ <li>Groups of animals
+ <ul>
+ <li>pod of whales</li>
+ <li>quiver of cobras</li>
+ <li>troop of baboons</li>
+ </ul>
+ </li>
+ <li class="linebreaknode">
+
+ More animals
+
+
+ <ul>
+ <li>Shoal of Bass</li>
+ <li>Rhumba of rattlesnakes</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+</div>
+
+
+<div data-nstest-role="page" id='nested-lists-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Basic multiple lists view</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview" data-nstest-inset="true">
+ <li>Item 1</li>
+ <li>Item 2</li>
+ <li>Item 3
+ <ul data-nstest-role="listview">
+ <li>Item A-3-0</li>
+ <li>Item A-3-1</li>
+ <li>Item A-3-2</li>
+ </ul>
+ </li>
+ </ul>
+ <ul data-nstest-role="listview" data-nstest-inset="true">
+ <li>Item 1</li>
+ <li>Item 2</li>
+ <li>Item 3
+ <ul data-nstest-role="listview">
+ <li>Item B-3-0
+ <ul data-nstest-role="listview">
+ <li>Item B-3-0-0</li>
+ <li>Item B-3-0-1
+ <ul data-nstest-role="listview">
+ <li>Item B-3-0-1-0</li>
+ <li>Item B-3-0-1-1</li>
+ <li>Item B-3-0-1-2</li>
+ </ul>
+ </li>
+ <li>Item B-3-0-2</li>
+ </ul>
+ </li>
+ <li>Item B-3-1
+ <ul data-nstest-role="listview">
+ <li>Item B-3-1-0</li>
+ <li>Item B-3-1-1</li>
+ <li>Item B-3-1-2</li>
+ </ul>
+ </li>
+ <li>Item B-3-2</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+</div>
+
+<!-- Numbered List -->
+<div data-nstest-role="page" id='numbered-list-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Basic List View</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ol data-nstest-role="listview">
+ <li><a href="#numbered-list-results">Number 1</a></li>
+ <li><a href="#numbered-list-results">Number 2</a></li>
+ <li><a href="#numbered-list-results">Number 3</a></li>
+ </ol>
+ </div>
+</div>
+
+<div data-nstest-role='page' id='numbered-list-results'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Numbered List</h1>
+ </div>
+</div>
+
+<!-- Read only List -->
+<div data-nstest-role="page" id='read-only-list-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Basic List View</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview">
+ <li>Read</li>
+ <li>Only</li>
+ <li>List</li>
+ <li>View</li>
+ </ul>
+ </div>
+</div>
+
+<!-- Split listview -->
+<div data-nstest-role="page" id='split-list-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Split List View</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview">
+ <li>
+ <a href="#split-list-link1">link one</a>
+ <a href="#split-list-link2">link second</a>
+ </li>
+ <li>
+ <a href="#split-list-link1">link one</a>
+ <a href="#split-list-link2">link second</a>
+ </li>
+ <li>
+ <a href="#split-list-link1">link one</a>
+ <a href="#split-list-link2">link second</a>
+ </li>
+ </ul>
+ </div>
+</div>
+
+<div data-nstest-role="page" id='split-list-link1'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Split List view 1</h1>
+ </div>
+</div>
+
+<div data-nstest-role="page" id='split-list-link2'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Split List view 2</h1>
+ </div>
+</div>
+
+<!-- List divider -->
+<div data-nstest-role="page" id='list-divider-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>List Divider Test</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview">
+ <li>a is for aquaman</li>
+ <li>b is for batman</li>
+ <li data-nstest-role="list-divider">This is a list divider</li>
+ <li>c is for catwoman</li>
+ <li data-nstest-role="list-divider">This is another list divider</li>
+ <li>d is for darkwing</li>
+ </ul>
+ </div>
+</div>
+
+<!-- Search bar filter -->
+<div data-nstest-role="page" id='search-filter-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Split List View</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview" data-nstest-filter="true">
+ <li>a is for aquaman</li>
+ <li>b is for batman</li>
+ <li>c is for catwoman</li>
+ <li>d is for darkwing</li>
+ </ul>
+ </div>
+</div>
+
+<!-- Search bar filter with list-dividers -->
+<div data-nstest-role="page" id='search-filter-with-dividers-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Split List View</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview" data-nstest-filter="true">
+ <li data-nstest-role="list-divider">a</li>
+ <li>a is for aquaman</li>
+ <li data-nstest-role="list-divider">b</li>
+ <li>b is for batman</li>
+ <li data-nstest-role="list-divider">c</li>
+ <li>c is for catwoman</li>
+ <li data-nstest-role="list-divider">d</li>
+ <li>d is for darkwing</li>
+ </ul>
+ </div>
+</div>
+
+<!-- Search bar filter inset -->
+<div data-nstest-role="page" id='search-filter-inset-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Inset Filter List View</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview" data-nstest-filter="true" data-nstest-inset="true">
+ <li>a is for aquaman</li>
+ <li>b is for batman</li>
+ <li>c is for catwoman</li>
+ <li>d is for darkwing</li>
+ </ul>
+ </div>
+</div>
+
+<!-- Programmatically generated list items !-->
+<div data-nstest-role="page" id="programmatically-generated-list">
+ <ul data-nstest-role="listview" data-nstest-inset="true" id="programmatically-generated-list-items"></ul>
+</div>
+
+<!-- Removing items from list -->
+<div data-nstest-role="page" id='removing-items-from-list-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Basic List View</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview" data-nstest-inset="true">
+ <li>Item 1</li>
+ <li>Item 2</li>
+ <li>Item 3</li>
+ <li>Item 4</li>
+ </ul>
+ </div>
+</div>
+
+<!-- Rounded corners inset list with variable items -->
+<div data-nstest-role="page" id='corner-rounded-test'>
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Basic List View</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview" data-nstest-inset="true">
+ </ul>
+ </div>
+</div>
+
+<div data-nstest-role="page" id="enhancetest">
+ <ul data-nstest-role="listview">
+ <li><a href="#basic-link-results">Home</a></li>
+ <li><a href="#basic-link-results">Back</a></li>
+ <li><a href="#basic-link-results">Return</a></li>
+ </ul>
+</div>
+
+<div id="list-theme-inherit" data-nstest-theme="b">
+ <ul data-nstest-role="listview">
+ <li>foo</li>
+ </ul>
+</div>
+
+<div data-nstest-role="page" id="ui-li-has-test">
+ <div data-nstest-role="content">
+ <p>Right padding on item 1 is OK (75px).</p>
+ <p>Right padding on items 2 & 3 should probably be around 30 or 35 (not 25).</p>
+ <p>Right padding on item 4 should be 15px to match the left side.</p>
+ <ol data-nstest-role="listview" data-nstest-inset="true">
+ <li><a href="#">Link LI with counter --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></a></li>
+ <li><a href="#">Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a></li>
+ <li><a href="#page1">Page1 Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a><a href="#page2"></a></li>
+ <li>Static LI with counter ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></li>
+ <li>Static LI without counter ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</li>
+ </ol>
+ </div>
+</div>
+
+
+<div id="list-inset-filter-prototype" data-nstest-theme="b">
+ <ul data-nstest-role="listview" data-nstest-filter="true">
+ <li>foo</li>
+ <li>bar</li>
+ </ul>
+</div>
+
+<div id="list-inset-filter-data-attr" data-nstest-theme="b">
+ <ul data-nstest-role="listview" data-nstest-filter="true" data-nstest-inset="true">
+ <li>foo</li>
+ <li>bar</li>
+ </ul>
+</div>
+
+
+<div data-nstest-role="page" id="split-list-icon">
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview" data-nstest-split-icon="delete">
+ <li data-nstest-icon="star"><a href="#">Star</a><a href="#">Star</a></li>
+ <li data-nstest-icon="plug"><a href="#">Plus</a><a href="#">Plus</a></li>
+ <li><a href="#">Default</a><a href="#">Default</a></li>
+ <!-- respect the child element icon -->
+ <li data-nstest-icon="star"><a href="#">Default</a><a data-nstest-icon="plug" href="#">Default</a></li>
+ </ul>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * mobile listview unit tests
+ */
+
+// TODO split out into seperate test files
+(function($){
+ var home = $.mobile.path.parseUrl( location.href ).pathname + location.search,
+ insetVal = $.mobile.listview.prototype.options.inset;
+
+ $.mobile.defaultTransition = "none";
+
+ module( "Basic Linked list", {
+ setup: function(){
+ if( location.hash != "#basic-linked-test" ){
+ stop();
+
+ $(document).one("pagechange", function() {
+ start();
+ });
+
+ $.mobile.changePage( home );
+ }
+ },
+
+ teardown: function() {
+ $.mobile.listview.prototype.options.inset = insetVal;
+ }
+ });
+
+ asyncTest( "The page should enhanced correctly", function(){
+ setTimeout(function() {
+ ok($('#basic-linked-test .ui-li').length, ".ui-li classes added to li elements");
+ start();
+ }, 800);
+ });
+
+ asyncTest( "Slides to the listview page when the li a is clicked", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#basic-linked-test");
+ },
+
+ function(){
+ $('#basic-linked-test li a').first().click();
+ },
+
+ function(){
+ ok($('#basic-link-results').hasClass('ui-page-active'));
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Slides back to main page when back button is clicked", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#basic-link-results");
+ },
+
+ function(){
+ window.history.back();
+ },
+
+ function(){
+ ok($('#basic-linked-test').hasClass('ui-page-active'));
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Presence of ui-li-has- classes", function(){
+ $.testHelper.pageSequence( [
+ function() {
+ $.mobile.changePage( "#ui-li-has-test" );
+ },
+
+ function() {
+ var page = $( ".ui-page-active" ),
+ items = page.find( "li" );
+
+ ok( items.eq( 0 ).hasClass( "ui-li-has-count"), "First LI should have ui-li-has-count class" );
+ ok( items.eq( 0 ).hasClass( "ui-li-has-arrow"), "First LI should have ui-li-has-arrow class" );
+ ok( !items.eq( 1 ).hasClass( "ui-li-has-count"), "Second LI should NOT have ui-li-has-count class" );
+ ok( items.eq( 1 ).hasClass( "ui-li-has-arrow"), "Second LI should have ui-li-has-arrow class" );
+ ok( !items.eq( 2 ).hasClass( "ui-li-has-count"), "Third LI should NOT have ui-li-has-count class" );
+ ok( !items.eq( 2 ).hasClass( "ui-li-has-arrow"), "Third LI should NOT have ui-li-has-arrow class" );
+ ok( items.eq( 3 ).hasClass( "ui-li-has-count"), "Fourth LI should have ui-li-has-count class" );
+ ok( !items.eq( 3 ).hasClass( "ui-li-has-arrow"), "Fourth LI should NOT have ui-li-has-arrow class" );
+ ok( !items.eq( 4 ).hasClass( "ui-li-has-count"), "Fifth LI should NOT have ui-li-has-count class" );
+ ok( !items.eq( 4 ).hasClass( "ui-li-has-arrow"), "Fifth LI should NOT have ui-li-has-arrow class" );
+ start();
+ }
+ ]);
+ });
+
+ module('Nested List Test');
+
+ asyncTest( "Changes page to nested list test and enhances", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#nested-list-test");
+ },
+
+ function(){
+ ok($('#nested-list-test').hasClass('ui-page-active'), "makes nested list test page active");
+ ok($(':jqmData(url="nested-list-test&ui-page=0-0")').length == 1, "Adds first UL to the page");
+ ok($(':jqmData(url="nested-list-test&ui-page=0-1")').length == 1, "Adds second nested UL to the page");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "change to nested page when the li a is clicked", function() {
+
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#nested-list-test");
+ },
+
+ function(){
+ $('.ui-page-active li:eq(1) a:eq(0)').click();
+ },
+
+ function(){
+ var $new_page = $(':jqmData(url="nested-list-test&ui-page=0-0")');
+
+ ok($new_page.hasClass('ui-page-active'), 'Makes the nested page the active page.');
+ ok($('.ui-listview', $new_page).find(":contains('Rhumba of rattlesnakes')").length == 1, "The current page should have the proper text in the list.");
+ ok($('.ui-listview', $new_page).find(":contains('Shoal of Bass')").length == 1, "The current page should have the proper text in the list.");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "should go back to top level when the back button is clicked", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#nested-list-test&ui-page=0-0");
+ },
+
+ function(){
+ window.history.back();
+ },
+
+ function(){
+ ok($('#nested-list-test').hasClass('ui-page-active'), 'Transitions back to the parent nested page');
+ start();
+ }
+ ]);
+ });
+
+ test( "nested list title should use first text node, regardless of line breaks", function(){
+ // NOTE this is a super fragile reference to the nested page, any change to the list will break it
+ ok($(":jqmData(url='nested-list-test&ui-page=0-0') .ui-title").text() === "More animals", 'Text should be "More animals"');
+ });
+
+ asyncTest( "Multiple nested lists on a page with same labels", function() {
+ $.testHelper.pageSequence([
+ function(){
+ // https://github.com/jquery/jquery-mobile/issues/1617
+ $.mobile.changePage("#nested-lists-test");
+ },
+
+ function(){
+ // Click on the link of the third li element
+ $('.ui-page-active li:eq(2) a:eq(0)').click();
+ },
+
+ function(){
+ equal($('.ui-page-active .ui-content .ui-listview li').text(), "Item A-3-0Item A-3-1Item A-3-2", 'Text should be "Item A-3-0Item A-3-1Item A-3-2"');
+ start();
+ }
+ ]);
+ });
+
+ module('Ordered Lists');
+
+ asyncTest( "changes to the numbered list page and enhances it", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#numbered-list-test");
+ },
+
+ function(){
+ var $new_page = $('#numbered-list-test');
+ ok($new_page.hasClass('ui-page-active'), "Makes the new page active when the hash is changed.");
+ ok($('.ui-link-inherit', $new_page).first().text() == "Number 1", "The text of the first LI should be Number 1");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "changes to number 1 page when the li a is clicked", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $('#numbered-list-test li a').first().click();
+ },
+
+ function(){
+ ok($('#numbered-list-results').hasClass('ui-page-active'), "The new numbered page was transitioned correctly.");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "takes us back to the numbered list when the back button is clicked", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage('#numbered-list-test');
+ },
+
+ function(){
+ $.mobile.changePage('#numbered-list-results');
+ },
+
+ function(){
+ window.history.back();
+ },
+
+ function(){
+ ok($('#numbered-list-test').hasClass('ui-page-active'));
+ start();
+ }
+ ]);
+ });
+
+ module('Read only list');
+
+ asyncTest( "changes to the read only page when hash is changed", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#read-only-list-test");
+ },
+
+ function(){
+ var $new_page = $('#read-only-list-test');
+ ok($new_page.hasClass('ui-page-active'), "makes the read only page the active page");
+ ok($('li', $new_page).first().text() === "Read", "The first LI has the proper text.");
+ start();
+ }
+ ]);
+ });
+
+ module('Split view list');
+
+ asyncTest( "changes the page to the split view list and enhances it correctly.", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#split-list-test");
+ },
+
+ function(){
+ var $new_page = $('#split-list-test');
+ ok($('.ui-li-link-alt', $new_page).length == 3);
+ ok($('.ui-link-inherit', $new_page).length == 3);
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "change the page to the split view page 1 when the first link is clicked", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#split-list-test");
+ },
+
+ function(){
+ $('.ui-page-active .ui-li a:eq(0)').click();
+ },
+
+ function(){
+ ok($('#split-list-link1').hasClass('ui-page-active'));
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Slide back to the parent list view when the back button is clicked", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#split-list-test");
+ },
+
+ function(){
+ $('.ui-page-active .ui-listview a:eq(0)').click();
+ },
+
+ function(){
+ history.back();
+ },
+
+ function(){
+ ok($('#split-list-test').hasClass('ui-page-active'));
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Clicking on the icon (the second link) should take the user to other a href of this LI", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#split-list-test");
+ },
+
+ function(){
+ $('.ui-page-active .ui-li-link-alt:eq(0)').click();
+ },
+
+ function(){
+ ok($('#split-list-link2').hasClass('ui-page-active'));
+ start();
+ }
+ ]);
+ });
+
+ module( "List Dividers" );
+
+ asyncTest( "Makes the list divider page the active page and enhances it correctly.", function() {
+ $.testHelper.pageSequence([
+ function(){
+ $.mobile.changePage("#list-divider-test");
+ },
+
+ function(){
+ var $new_page = $('#list-divider-test');
+ ok($new_page.find('.ui-li-divider').length == 2);
+ ok($new_page.hasClass('ui-page-active'));
+ start();
+ }
+ ]);
+ });
+
+ module( "Search Filter");
+
+ var searchFilterId = "#search-filter-test";
+
+
+ asyncTest( "Filter downs results when the user enters information", function() {
+ var $searchPage = $(searchFilterId);
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage(searchFilterId);
+ },
+
+ function() {
+ $searchPage.find('input').val('at');
+ $searchPage.find('input').trigger('change');
+
+ same($searchPage.find('li.ui-screen-hidden').length, 2);
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Redisplay results when user removes values", function() {
+ var $searchPage = $(searchFilterId);
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage(searchFilterId);
+ },
+
+ function() {
+ $searchPage.find('input').val('a');
+ $searchPage.find('input').trigger('change');
+
+ same($searchPage.find("li[style^='display: none;']").length, 0);
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Filter works fine with \\W- or regexp-special-characters", function() {
+ var $searchPage = $(searchFilterId);
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage(searchFilterId);
+ },
+
+ function() {
+ $searchPage.find('input').val('*');
+ $searchPage.find('input').trigger('change');
+
+ same($searchPage.find('li.ui-screen-hidden').length, 4);
+ start();
+ }
+ ]);
+ });
+
+ test( "Refresh applies thumb styling", function(){
+ var ul = $('.ui-page-active ul');
+
+ ul.append("<li id='fiz'><img/></li>");
+ ok(!ul.find("#fiz img").hasClass("ui-li-thumb"));
+ ul.listview('refresh');
+ ok(ul.find("#fiz img").hasClass("ui-li-thumb"));
+ });
+
+ asyncTest( "Filter downs results and dividers when the user enters information", function() {
+ var $searchPage = $("#search-filter-with-dividers-test");
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#search-filter-with-dividers-test");
+ },
+
+ // wait for the page to become active/enhanced
+ function(){
+ $searchPage.find('input').val('at');
+ $searchPage.find('input').trigger('change');
+ setTimeout(function() {
+ //there should be four hidden list entries
+ same($searchPage.find('li.ui-screen-hidden').length, 4);
+
+ //there should be two list entries that are list dividers and hidden
+ same($searchPage.find('li.ui-screen-hidden:jqmData(role=list-divider)').length, 2);
+
+ //there should be two list entries that are not list dividers and hidden
+ same($searchPage.find('li.ui-screen-hidden:not(:jqmData(role=list-divider))').length, 2);
+ start();
+ }, 1000);
+ }
+ ]);
+ });
+
+ asyncTest( "Redisplay results when user removes values", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#search-filter-with-dividers-test");
+ },
+
+ function() {
+ $('.ui-page-active input').val('a');
+ $('.ui-page-active input').trigger('change');
+
+ setTimeout(function() {
+ same($('.ui-page-active input').val(), 'a');
+ same($('.ui-page-active li[style^="display: none;"]').length, 0);
+ start();
+ }, 1000);
+ }
+ ]);
+ });
+
+ asyncTest( "Dividers are hidden when preceding hidden rows and shown when preceding shown rows", function () {
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#search-filter-with-dividers-test");
+ },
+
+ function() {
+ var $page = $('.ui-page-active');
+
+ $page.find('input').val('at');
+ $page.find('input').trigger('change');
+
+ setTimeout(function() {
+ same($page.find('li:jqmData(role=list-divider):hidden').length, 2);
+ same($page.find('li:jqmData(role=list-divider):hidden + li:not(:jqmData(role=list-divider)):hidden').length, 2);
+ same($page.find('li:jqmData(role=list-divider):not(:hidden) + li:not(:jqmData(role=list-divider)):not([:hidden)').length, 2);
+ start();
+ }, 1000);
+ }
+ ]);
+ });
+
+ asyncTest( "Inset List View should refresh corner classes after filtering", 4 * 2, function () {
+ var checkClasses = function() {
+ var $page = $( ".ui-page-active" ),
+ $li = $page.find( "li:visible" );
+ ok($li.first().hasClass( "ui-corner-top" ), $li.length+" li elements: First visible element should have class ui-corner-top");
+ ok($li.last().hasClass( "ui-corner-bottom" ), $li.length+" li elements: Last visible element should have class ui-corner-bottom");
+ };
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#search-filter-inset-test");
+ },
+
+ function() {
+ var $page = $('.ui-page-active');
+ $.testHelper.sequence([
+ function() {
+ checkClasses();
+
+ $page.find('input').val('man');
+ $page.find('input').trigger('change');
+ },
+
+ function() {
+ checkClasses();
+
+ $page.find('input').val('at');
+ $page.find('input').trigger('change');
+ },
+
+ function() {
+ checkClasses();
+
+ $page.find('input').val('catwoman');
+ $page.find('input').trigger('change');
+ },
+
+ function() {
+ checkClasses();
+ start();
+ }
+ ], 50);
+ }
+ ]);
+ });
+
+ module( "Programmatically generated list items", {
+ setup: function(){
+ var item,
+ data = [
+ {
+ id: 1,
+ label: "Item 1"
+ },
+ {
+ id: 2,
+ label: "Item 2"
+ },
+ {
+ id: 3,
+ label: "Item 3"
+ },
+ {
+ id: 4,
+ label: "Item 4"
+ }
+ ];
+
+ $( "#programmatically-generated-list-items" ).html("");
+
+ for ( var i = 0, len = data.length; i < len; i++ ) {
+ item = $( '<li id="myItem' + data[i].id + '">' );
+ label = $( "<strong>" + data[i].label + "</strong>").appendTo( item );
+ $( "#programmatically-generated-list-items" ).append( item );
+ }
+ }
+ });
+
+ asyncTest( "Corner styling on programmatically created list items", function() {
+ // https://github.com/jquery/jquery-mobile/issues/1470
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( "#programmatically-generated-list" );
+ },
+ function() {
+ ok(!$( "#programmatically-generated-list-items li:first-child" ).hasClass( "ui-corner-bottom" ), "First list item should not have class ui-corner-bottom" );
+ start();
+ }
+ ]);
+ });
+
+ module("Programmatic list items manipulation");
+
+ asyncTest("Removing list items", 4, function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#removing-items-from-list-test");
+ },
+
+ function() {
+ var ul = $('#removing-items-from-list-test ul');
+ ul.find("li").first().remove();
+ equal(ul.find("li").length, 3, "There should be only 3 list items left");
+
+ ul.listview('refresh');
+ ok(ul.find("li").first().hasClass("ui-corner-top"), "First list item should have class ui-corner-top");
+
+ ul.find("li").last().remove();
+ equal(ul.find("li").length, 2, "There should be only 2 list items left");
+
+ ul.listview('refresh');
+ ok(ul.find("li").last().hasClass("ui-corner-bottom"), "Last list item should have class ui-corner-bottom");
+ start();
+ }
+ ]);
+ });
+
+ module("Rounded corners");
+
+ asyncTest("Top and bottom corners rounded in inset list", 14, function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#corner-rounded-test");
+ },
+
+ function() {
+ var ul = $('#corner-rounded-test ul');
+
+ for( var t = 0; t<3; t++){
+ ul.append("<li>Item " + t + "</li>");
+ ul.listview('refresh');
+ equals(ul.find(".ui-corner-top").length, 1, "There should be only one element with class ui-corner-top");
+ equals(ul.find("li:visible").first()[0], ul.find(".ui-corner-top")[0], "First list item should have class ui-corner-top in list with " + ul.find("li").length + " item(s)");
+ equals(ul.find(".ui-corner-bottom").length, 1, "There should be only one element with class ui-corner-bottom");
+ equals(ul.find("li:visible").last()[0], ul.find(".ui-corner-bottom")[0], "Last list item should have class ui-corner-bottom in list with " + ul.find("li").length + " item(s)");
+ }
+
+ ul.find( "li" ).first().hide();
+ ul.listview( "refresh" );
+ equals(ul.find("li:visible").first()[0], ul.find(".ui-corner-top")[0], "First visible list item should have class ui-corner-top");
+
+ ul.find( "li" ).last().hide();
+ ul.listview( "refresh" );
+ equals(ul.find("li:visible").last()[0], ul.find(".ui-corner-bottom")[0], "Last visible list item should have class ui-corner-bottom");
+
+ start();
+ }
+ ]);
+ });
+
+ test( "Listview will create when inside a container that receives a 'create' event", function(){
+ ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-listview").length, "did not have enhancements applied" );
+ ok( $("#enhancetest").trigger("create").find(".ui-listview").length, "enhancements applied" );
+ });
+
+ module( "Cached Linked List" );
+
+ var findNestedPages = function(selector){
+ return $( selector + " #topmost" ).listview( 'childPages' );
+ };
+
+ asyncTest( "nested pages are removed from the dom by default", function(){
+ $.testHelper.pageSequence([
+ function(){
+ //reset for relative url refs
+ $.mobile.changePage( home );
+ },
+
+ function(){
+ $.mobile.changePage( "cache-tests/uncached-nested.html" );
+ },
+
+ function(){
+ ok( findNestedPages( "#uncached-nested-list" ).length > 0, "verify that there are nested pages" );
+ $.mobile.changePage( home );
+ },
+
+ function() {
+ $.mobile.changePage( "cache-tests/clear.html" );
+ },
+
+ function(){
+ same( findNestedPages( "#uncached-nested-list" ).length, 0 );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "nested pages preserved when parent page is cached", function(){
+
+ $.testHelper.pageSequence([
+ function(){
+ //reset for relative url refs
+ $.mobile.changePage( home );
+ },
+
+ function(){
+ $.mobile.changePage( "cache-tests/cached-nested.html" );
+ },
+
+ function(){
+ ok( findNestedPages( "#cached-nested-list" ).length > 0, "verify that there are nested pages" );
+ $.mobile.changePage( home );
+ },
+
+ function() {
+ $.mobile.changePage( "cache-tests/clear.html" );
+ },
+
+ function(){
+ ok( findNestedPages( "#cached-nested-list" ).length > 0, "nested pages remain" );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "parent page is not removed when visiting a sub page", function(){
+ $.testHelper.pageSequence([
+ function(){
+ //reset for relative url refs
+ $.mobile.changePage( home );
+ },
+
+ function(){
+ $.mobile.changePage( "cache-tests/cached-nested.html" );
+ },
+
+ function(){
+ same( $("#cached-nested-list").length, 1 );
+ $.mobile.changePage( home );
+ },
+
+ function() {
+ $.mobile.changePage( "cache-tests/clear.html" );
+ },
+
+ function(){
+ same( $("#cached-nested-list").length, 1 );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "filterCallback can be altered after widget creation", function(){
+ var listPage = $( "#search-filter-test" );
+ expect( listPage.find("li").length );
+
+ $.testHelper.pageSequence( [
+ function(){
+ //reset for relative url refs
+ $.mobile.changePage( home );
+ },
+
+ function() {
+ $.mobile.changePage( "#search-filter-test" );
+ },
+
+ function() {
+ // set the listview instance callback
+ listPage.find( "ul" ).listview( "option", "filterCallback", function() {
+ ok(true, "custom callback invoked");
+ });
+
+ // trigger a change in the search filter
+ listPage.find( "input" ).val( "foo" ).trigger( "change" );
+
+ //NOTE beware a poossible issue with timing here
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "nested pages hash key is always in the hash (replaceState)", function(){
+ $.testHelper.pageSequence([
+ function(){
+ //reset for relative url refs
+ $.mobile.changePage( home );
+ },
+
+ function(){
+ // https://github.com/jquery/jquery-mobile/issues/1617
+ $.mobile.changePage("#nested-lists-test");
+ },
+
+ function(){
+ // Click on the link of the third li element
+ $('.ui-page-active li:eq(2) a:eq(0)').click();
+ },
+
+ function(){
+ ok( location.hash.search($.mobile.subPageUrlKey) >= 0 );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "embedded listview page with nested pages is not removed from the dom", function() {
+ $.testHelper.pageSequence([
+ function() {
+ // open the nested list page
+ same( $("div#nested-list-test").length, 1 );
+ $( "a#nested-list-test-anchor" ).click();
+ },
+
+ function() {
+ // go back to the origin page
+ window.history.back();
+ },
+
+ function() {
+ // make sure the page is still in place
+ same( $("div#nested-list-test").length, 1 );
+ start();
+ }
+ ]);
+ });
+
+
+ asyncTest( "list inherits theme from parent", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#list-theme-inherit");
+ },
+
+ function() {
+ var theme = $.mobile.activePage.jqmData('theme');
+ ok( $.mobile.activePage.find("ul > li").hasClass("ui-body-b"), "theme matches the parent");
+ window.history.back();
+ },
+
+ start
+ ]);
+ });
+
+ asyncTest( "list filter is inset from prototype options value", function() {
+ $.mobile.listview.prototype.options.inset = true;
+ $("#list-inset-filter-prototype").page();
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#list-inset-filter-prototype");
+ },
+
+ function( timedOut) {
+ ok( !timedOut );
+ same( $.mobile.activePage.find("form.ui-listview-filter-inset").length, 1, "form is inset");
+ window.history.back();
+ },
+
+ start
+ ]);
+ });
+
+ asyncTest( "list filter is inset from data attr value", function() {
+ $.mobile.listview.prototype.options.inset = false;
+ $("#list-inset-filter-data-attr").page();
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#list-inset-filter-data-attr");
+ },
+
+ function( timedOut) {
+ ok( !timedOut );
+ same( $.mobile.activePage.find("form.ui-listview-filter-inset").length, 1, "form is inset");
+ window.history.back();
+ },
+
+ start
+ ]);
+ });
+
+ asyncTest( "split list items respect the icon", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#split-list-icon");
+ },
+
+ function() {
+ $.mobile.activePage.find("li").each(function(i, elem){
+ var $elem = $(elem),
+ order = [ "star", "plug", "delete", "plug" ];
+
+ same( $elem.find("span.ui-icon-" + order[i]).length, 1, "there should be one " + order[i] + " icon" );
+ });
+
+ window.history.back();
+ },
+
+ start
+ ]);
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Listview Integration Test</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.navigation",
+ "jquery.mobile.listview",
+ "jquery.mobile.listview.filter",
+ ],
+ [ "jquery.mobile.init" ],
+ [ "listview_pushstate.js" ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Listview Integration Test</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Basic multiple lists view</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview" data-nstest-inset="true">
+ <li>Item 1</li>
+ <li>Item 2</li>
+ <li>Item 3
+ <ul data-nstest-role="listview">
+ <li>Item A-3-0</li>
+ <li>Item A-3-1</li>
+ <li>Item A-3-2</li>
+ </ul>
+ </li>
+ </ul>
+ <ul data-nstest-role="listview" data-nstest-inset="true">
+ <li>Item 1</li>
+ <li>Item 2</li>
+ <li>Item 3
+ <ul data-nstest-role="listview">
+ <li>Item B-3-0
+ <ul data-nstest-role="listview">
+ <li>Item B-3-0-0</li>
+ <li>Item B-3-0-1
+ <ul data-nstest-role="listview">
+ <li>Item B-3-0-1-0</li>
+ <li>Item B-3-0-1-1</li>
+ <li>Item B-3-0-1-2</li>
+ </ul>
+ </li>
+ <li>Item B-3-0-2</li>
+ </ul>
+ </li>
+ <li>Item B-3-1
+ <ul data-nstest-role="listview">
+ <li>Item B-3-1-0</li>
+ <li>Item B-3-1-1</li>
+ <li>Item B-3-1-2</li>
+ </ul>
+ </li>
+ <li>Item B-3-2</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Media Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.media"
+ ],
+ [
+ "./media_core.js"
+ ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Media Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="qunit-fixture"></div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Navigation Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.navbar"
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "./navbar_core.js"
+ ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+</head>
+<body>
+<h1 id="qunit-header">jQuery Mobile Navigation Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+<div data-nstest-role="page" id="disabled-btn-click">
+ <div data-nstest-role="navbar">
+ <ul>
+ <li><a href="#" class="ui-disabled">One</a></li>
+ <li><a href="#">Two</a></li>
+ </ul>
+ </div>
+</div>
+
+<div id="foo">
+ <div data-nstest-role="navbar">
+ <div data-nstest-enhance="false">
+ <ul id="ignored-grid">
+ <li></li>
+ <li></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-nstest-role="navbar">
+ <div>
+ <ul id="enhanced-grid">
+ <li></li>
+ <li></li>
+ </ul>
+ </div>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * mobile navbar unit tests
+ */
+(function($){
+ test( "navbar button gets active button class when clicked", function() {
+ var link = $("#disabled-btn-click a:not(.ui-disabled)").first();
+
+ link.click();
+ ok( link.hasClass($.mobile.activeBtnClass), "link has active button class" );
+ });
+
+ test( "disabled navbar button doesn't add active button class when clicked", function() {
+ var link = $("#disabled-btn-click a.ui-disabled").first();
+
+ link.click();
+ ok( !link.hasClass($.mobile.activeBtnClass), "link doesn't have active button class" );
+ });
+
+ test( "grids inside an ignored container do not enhance", function() {
+ var $ignored = $( "#ignored-grid" ), $enhanced = $( "#enhanced-grid" );
+
+ $.mobile.ignoreContentEnabled = true;
+
+ $("#foo").trigger( "create" );
+
+ same( $ignored.attr( "class" ), undefined, "ignored list doesn't have the grid theme" );
+ same( $enhanced.attr( "class" ).indexOf("ui-grid"), 0, "enhanced list has the grid theme" );
+
+ $.mobile.ignoreContentEnabled = false;
+ });
+})(jQuery);
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Navigation Test Suite</title>
+
+ <script>
+
+ // This unit test requires a base tag to be set within the file.
+ // Most browsers require a base tag with an @href URL that is absolute.
+ // We need to dynamically inject the base tag so we can prefix it with
+ // the location of this test on the server without any server-side language
+ // requirements.
+
+ var baseUrl = location.href.replace(/[^\?\#\/]*(\?[^#]*)?(#.*)?$/, "");
+ document.write("<base href=\"" + baseUrl + "base-tests/app-base/\"/>\n");
+
+ </script>
+ <script src="../../../../../js/jquery.tag.inserter.js"></script>
+ <script src="../../../jquery.setNameSpace.js"></script>
+ <script src="../../../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../../../js/"></script>
+
+
+ <link rel="stylesheet" href="../../../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../../../external/qunit.css"/>
+ <script src="../../../../../external/qunit.js"></script>
+ <script type="text/javascript">
+ $.testHelper.setPushState();
+ </script>
+
+ <script type="text/javascript" src="../../navigation_base.js"></script>
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Navigation Base Tag Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="internal-page-1" data-nstest-role="page">
+ <a href="base-page-1.html" class="bp1"></a>
+ <a href="base-page-2.html" class="bp2"></a>
+ <a href="../content/content-page-1.html" class="cp1"></a>
+ <a href="../content/content-page-2.html" class="cp2"></a>
+ <a href="#internal-page-2" class="ip2"></a>
+ <img src="images/internal-page-1.png">
+</div>
+
+<div id="internal-page-2" data-nstest-role="page">
+ <a href="base-page-1.html" class="bp1"></a>
+ <a href="base-page-2.html" class="bp2"></a>
+ <a href="../content/content-page-1.html" class="cp1"></a>
+ <a href="../content/content-page-2.html" class="cp2"></a>
+ <a href="#internal-page-1" class="ip1"></a>
+ <img src="images/internal-page-2.png">
+</div>
+
+<div data-nstest-role="page" id="internal-no-action-form-page">
+ <div data-nstest-role="content">
+ <form>
+ <input type="hidden" name="foo" value="1">
+ <input type="hidden" name="bar" value="2">
+ </form>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Navigation Test Suite</title>
+
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script type="text/javascript">
+ $.testHelper.setPushState();
+ </script>
+
+ <script src="../../../js/"></script>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+ <script src="../../../external/qunit.js"></script>
+
+ <script type="text/javascript" src="navigation_helpers.js"></script>
+ <script type="text/javascript" src="navigation_core.js"></script>
+ <script type="text/javascript" src="navigation_paths.js"></script>
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Navigation Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="harmless-default-page" data-nstest-role="page" class="first-page">
+</div>
+
+<div id="foo" data-nstest-role="page" class="foo-class">
+ <a href="#bar" data-nstest-transition="flip"></a>
+ <a id="bad-internal-page-link" href="#non-existent-page"></a>
+</div>
+
+<div id="prefetch" data-nstest-role="page">
+ <a href="prefetched.html" data-nstest-prefetch>Prefetch test</a>
+</div>
+
+<div id="foozball" data-nstest-role="page">
+</div>
+
+<div id="bar" data-nstest-role="page">
+ <a href="#baz"></a>
+</div>
+
+<div id="baz" data-nstest-role="page">
+ <a href="#foo"></a>
+</div>
+
+<div id="fade-trans" data-nstest-role="page">
+ <a href="#flip-trans" data-nstest-transition="fade"></a>
+</div>
+
+<div id="flip-trans" data-nstest-role="page">
+ <a href="#fade-trans" data-nstest-transition="flip"></a>
+</div>
+
+<div id="no-trans" data-nstest-role="page">
+ <a href="#pop-trans"></a>
+</div>
+
+<div id="pop-trans" data-nstest-role="page">
+ <a href="#no-trans" data-nstest-transition="pop"></a>
+</div>
+
+<div id="default-trans" data-nstest-role="page">
+ <a href="#no-trans"></a>
+</div>
+
+<div id="data-url" data-nstest-role="page">
+ <a href="data-url-tests/data-url.html"></a>
+</div>
+
+<div id="non-data-url" data-nstest-role="page">
+ <a href="data-url-tests/non-data-url.html"></a>
+</div>
+
+<div id="nested-data-url" data-nstest-role="page">
+ <a href="data-url-tests/nested.html"></a>
+</div>
+
+<div id="single-quotes-data-url" data-nstest-role="page">
+ <a href="data-url-tests/single-quotes.html"></a>
+</div>
+
+<div id="reverse-attr-data-url" data-nstest-role="page">
+ <a href="data-url-tests/reverse-attr.html"></a>
+</div>
+
+<div id="ajax-disabled-form" data-nstest-role="page">
+ <form method="POST" id="non-ajax-form" action="/ajax-disabled-form" data-nstest-ajax="false">
+ </form>
+
+ <form method="POST" id="ajax-form" action="/ajax-disabled-form">
+ </form>
+
+ <form method="POST" id="rand-ajax-form" action="/ajax-disabled-form" data-nstest-ajax="foo">
+ </form>
+</div>
+
+<div id="default-trans-dialog" data-nstest-role="page">
+ <a href="#no-trans-dialog" data-nstest-rel="dialog"></a>
+</div>
+
+<div id="no-trans-dialog" data-nstest-role="page">
+</div>
+
+<div id="dup-history-first" data-nstest-role="page">
+ <a href="#dup-history-second" data-nstest-transition="slideup" data-nstest-role="button" >
+ Page 2
+ </a>
+</div>
+
+<div id="dup-history-second" data-nstest-role="page">
+ <a href="#dup-history-first" data-nstest-transition="slideup" data-nstest-role="button">
+ Page 1
+ </a>
+ <a href="#dup-history-dialog" data-nstest-role="button" data-nstest-transition="pop" data-nstest-rel="dialog">Dialog</a>
+</div>
+
+<div id="dup-history-dialog" data-nstest-role="dialog">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Dialog</h1>
+ </div>
+</div>
+
+<div id="skip-dialog-first" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="#skip-dialog" data-nstest-role="button" data-nstest-transition="pop" data-nstest-rel="dialog">Dialog</a>
+ </div>
+</div>
+
+<div id="skip-dialog" data-nstest-role="dialog">
+ <div data-nstest-role="content">
+ <a href="#skip-dialog-second">Page 2</a>
+ </div>
+</div>
+
+<div id="skip-dialog-second" data-nstest-role="page">
+ <a href="#" data-nstest-rel="back">Go Back</a>
+</div>
+
+
+<div id="nested-dialog-page" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="#nested-dialog-first">Dialog</a>
+ </div>
+</div>
+
+<div id="nested-dialog-first" data-nstest-role="dialog">
+ <div data-nstest-role="content">
+ <a href="#nested-dialog-second">Dialog 2</a>
+ </div>
+</div>
+
+<div id="nested-dialog-second" data-nstest-role="dialog">
+</div>
+
+<div id="relative-after-embeded-page-first" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="#relative-after-embeded-page-second">second page</a>
+ </div>
+</div>
+
+<div id="relative-after-embeded-page-second" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="data-url-tests/data-url.html">file path page</a>
+ </div>
+</div>
+
+<div id="ajax-title-page" data-nstest-title="Title Attr 1" data-nstest-role="page">
+ <a href="title1.html" id="titletest1" data-nstest-transition="none">test</a>
+ <a href="title2.html" id="titletest2" data-nstest-transition="none">test</a>
+ <a href="title3.html" id="titletest3" data-nstest-transition="none">test</a>
+</div>
+
+<div data-nstest-role="page" id="titletest4" data-nstest-title="Title Attr 2">
+ <div data-nstest-role="header"><h1>Title Heading</h1></div>
+</div>
+
+<div data-nstest-role="page" id="titletest5" data-nstest-title="Title Attr">
+ <div data-nstest-role="header"><h1>Title Heading</h1></div>
+</div>
+
+<div data-nstest-role="page" id="self-link">
+ <a href="#self-link">self!</a>
+</div>
+
+<div data-nstest-role="page" id="dialog-param-link">
+ <a href="dialog-param-test/dialog-param.html">go</a>
+</div>
+
+<div data-nstest-role="page" id="pathing-tests">
+ <!-- doc rel links -->
+ <a href="file.html" id="doc-rel-test-one">go</a>
+ <a href="path-tests/file.html" id="doc-rel-test-two">go</a>
+ <a href="path-tests/sub-dir/file.html" id="doc-rel-test-three">go</a>
+ <a href="path-tests/sub-dir/" id="doc-rel-test-four">go</a>
+ <a href="../../unit/navigation/path-tests/parent-ref.html" id="doc-rel-test-five">go</a>
+ <a href="../../unit/navigation/path-tests/parent/" id="doc-rel-test-six">go</a>
+
+ <!-- site rel links -->
+ <!-- these will be altered before the test suite runs to use the current path -->
+ <a href="file.html" id="site-rel-test-one" class="site-rel">go</a>
+ <a href="path-tests/file.html" id="site-rel-test-two" class="site-rel">go</a>
+ <a href="path-tests/sub-dir/file.html" id="site-rel-test-three" class="site-rel">go</a>
+ <a href="path-tests/sub-dir/" id="site-rel-test-four" class="site-rel">go</a>
+ <a href="../../unit/navigation/path-tests/parent-ref.html" id="site-rel-test-five" class="site-rel">go</a>
+ <a href="../../unit/navigation/path-tests/parent/" id="site-rel-test-six" class="site-rel">go</a>
+
+ <!-- protocol rel links -->
+ <!-- these will be altered before the test suite runs to use the
+ current domain and path -->
+ <a href="file.html" id="protocol-rel-test-one" class="protocol-rel">go</a>
+ <a href="path-tests/file.html" id="protocol-rel-test-two" class="protocol-rel">go</a>
+ <a href="path-tests/sub-dir/file.html" id="protocol-rel-test-three" class="protocol-rel">go</a>
+ <a href="path-tests/sub-dir/" id="protocol-rel-test-four" class="protocol-rel">go</a>
+ <a href="../../unit/navigation/path-tests/parent-ref.html" id="protocol-rel-test-five" class="protocol-rel">go</a>
+ <a href="../../unit/navigation/path-tests/parent/" id="protocol-rel-test-six" class="protocol-rel">go</a>
+
+ <!-- absolute links -->
+ <!-- these will be altered before the test suite runs to use the
+ current protocol, domain and path -->
+ <a href="file.html" id="absolute-test-one" class="absolute">go</a>
+ <a href="path-tests/file.html" id="absolute-test-two" class="absolute">go</a>
+ <a href="path-tests/sub-dir/file.html" id="absolute-test-three" class="absolute">go</a>
+ <a href="path-tests/sub-dir/" id="absolute-test-four" class="absolute">go</a>
+ <a href="../../unit/navigation/path-tests/parent-ref.html" id="absolute-test-five" class="absolute">go</a>
+ <a href="../../unit/navigation/path-tests/parent/" id="absolute-test-six" class="absolute">go</a>
+
+</div>
+
+<div data-nstest-role="page" id="pathing-tests-reset">
+ <div class="reset-value">page didn't change!</div>
+</div>
+
+<div data-nstest-role="page" id="internal-no-action-form-page">
+ <div data-nstest-role="content">
+ <form>
+ <input type="hidden" name="foo" value="1">
+ <input type="hidden" name="bar" value="2">
+ </form>
+ <a href="form-tests/form-no-action.html">External page containing form with no action.</a>
+ </div>
+</div>
+
+<div id="active-state-page1" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="#active-state-page2" data-nstest-role="button">page2</a>
+ </div>
+</div>
+
+<div id="active-state-page2" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="#active-state-page1" data-nstest-role="button">href button</a>
+ <a href="#active-state-page1" data-nstest-rel="back" data-nstest-role="button">back button</a>
+ </div>
+</div>
+
+
+
+<div id="odd-clicks-page" data-nstest-role="page">
+ <a href="#odd-clicks-page-dest" id="right-or-middle-click">foo</a>
+</div>
+
+<div id="odd-clicks-page-dest" data-nstest-role="page"></div>
+
+<div id="inject-links-page" data-nstest-role="page">
+ <a href="#injected-test-page" id="static-injected-test-page-link">static link</a>
+</div>
+
+<div id="prefetched-dialog-page" data-nstest-role="page">
+ <a href="prefetched-dialog.html"
+ id="prefetched-dialog-link"
+ data-nstest-role="prefetch"
+ data-nstest-rel="dialog">
+ static link
+ </a>
+</div>
+
+<div id="link-hijacking-test" data-nstest-role="page">
+ <div id="hijackable">
+ <a href="#link-hijacking-destination" id="hijacked-link"></a>
+ <a href="#link-hijacking-destination" id="unhijacked-link-by-attr" data-nstest-ajax="false"></a>
+ </div>
+
+ <div id="not-hijackable" data-nstest-ajax="false">
+ <a href="#link-hijacking-destination" id="unhijacked-link-by-parent"></a>
+ </div>
+</div>
+
+<div id="link-hijacking-destination" data-nstest-role="page">
+ hello!
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * mobile navigation base tag unit tests
+ */
+(function($){
+ var baseDir = $.mobile.path.parseUrl($("base").attr("href")).directory,
+ contentDir = $.mobile.path.makePathAbsolute("../content/", baseDir),
+ home = location.pathname + location.search;
+
+ module('jquery.mobile.navigation.js - base tag', {
+ setup: function(){
+ if ( location.hash ) {
+ stop();
+ $(document).one("pagechange", function() {
+ start();
+ } );
+ location.hash = "";
+ }
+ }
+ });
+
+ asyncTest( "can navigate between internal and external pages", function(){
+ $.testHelper.pageSequence([
+ function(){
+ // Navigate from default internal page to another internal page.
+ $.testHelper.openPage( "#internal-page-2" );
+ },
+
+ function(){
+ // Verify that we are on the 2nd internal page.
+ $.testHelper.assertUrlLocation({
+ push: home + "#internal-page-2",
+ hash: "internal-page-2",
+ report: "navigate to internal page"
+ });
+
+ // Navigate to a page that is in the base directory. Note that the application
+ // document and this new page are *NOT* in the same directory.
+ $("#internal-page-2 .bp1").click();
+ },
+
+ function(){
+ // Verify that we are on the expected page.
+ $.testHelper.assertUrlLocation({
+ hashOrPush: baseDir + "base-page-1.html",
+ report: "navigate from internal page to page in base directory"
+ });
+
+ // Navigate to another page in the same directory as the current page.
+ $("#base-page-1 .bp2").click();
+ },
+
+ function(){
+ // Verify that we are on the expected page.
+ $.testHelper.assertUrlLocation({
+ hashOrPush: baseDir + "base-page-2.html",
+ report: "navigate from base directory page to another base directory page"
+ });
+
+ // Navigate to another page in a directory that is the sibling of the base.
+ $("#base-page-2 .cp1").click();
+ },
+
+ function(){
+ // Verify that we are on the expected page.
+ $.testHelper.assertUrlLocation({
+ hashOrPush: contentDir + "content-page-1.html",
+ report: "navigate from base directory page to a page in a different directory hierarchy"
+ });
+
+ // Navigate to another page in a directory that is the sibling of the base.
+ $("#content-page-1 .cp2").click();
+ },
+
+ function(){
+ // Verify that we are on the expected page.
+ $.testHelper.assertUrlLocation({
+ hashOrPush: contentDir + "content-page-2.html",
+ report: "navigate to another page within the same non-base directory hierarchy"
+ });
+
+ // Navigate to an internal page.
+ $("#content-page-2 .ip1").click();
+ },
+
+ function(){
+ // Verify that we are on the expected page.
+ // the hash based nav result (hash:) is dictate by the fact that #internal-page-1
+ // is the original root page element
+ $.testHelper.assertUrlLocation({
+ hashOrPush: home,
+ report: "navigate from a page in a non-base directory to an internal page"
+ });
+
+ // Try calling changePage() directly with a relative path.
+ $.mobile.changePage("base-page-1.html");
+ },
+
+ function(){
+ // Verify that we are on the expected page.
+ $.testHelper.assertUrlLocation({
+ hashOrPush: baseDir + "base-page-1.html",
+ report: "call changePage() with a filename (no path)"
+ });
+
+ // Try calling changePage() directly with a relative path.
+ $.mobile.changePage("../content/content-page-1.html");
+ },
+
+ function(){
+ // Verify that we are on the expected page.
+ $.testHelper.assertUrlLocation({
+ hashOrPush: contentDir + "content-page-1.html",
+ report: "call changePage() with a relative path containing up-level references"
+ });
+
+ // Try calling changePage() with an id
+ $.mobile.changePage("content-page-2.html");
+ },
+
+ function(){
+ // Verify that we are on the expected page.
+ $.testHelper.assertUrlLocation({
+ hashOrPush: contentDir + "content-page-2.html",
+ report: "call changePage() with a relative path should resolve relative to current page"
+ });
+
+ // test that an internal page works
+ $("a.ip2").click();
+ },
+
+ function(){
+ // Verify that we are on the expected page.
+ $.testHelper.assertUrlLocation({
+ hash: "internal-page-2",
+ push: home + "#internal-page-2",
+ report: "call changePage() with a page id"
+ });
+
+ // Try calling changePage() with an id
+ $.mobile.changePage("internal-page-1");
+ },
+
+ function(){
+ // Verify that we are on the expected page.
+ $.testHelper.assertUrlLocation({
+ hash: "internal-page-2",
+ push: home + "#internal-page-2",
+ report: "calling changePage() with a page id that is not prefixed with '#' should not change page"
+ });
+
+ // Previous load should have failed and left us on internal-page-2.
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "internal form with no action submits to document URL", function(){
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ $.testHelper.openPage( "#internal-no-action-form-page" );
+ },
+
+ function(){
+ $( "#internal-no-action-form-page form" ).eq( 0 ).submit();
+ },
+
+ function(){
+ $.testHelper.assertUrlLocation({
+ hashOrPush: location.pathname + "?foo=1&bar=2",
+ report: "hash should match document url and not base url"
+ });
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "external page form with no action submits to external page URL", function(){
+ $.testHelper.pageSequence([
+ function(){
+ // Go to an external page that has a form.
+ $("#internal-page-1 .cp1").click();
+ },
+
+ function(){
+ // Make sure we actually navigated to the external page.
+ $.testHelper.assertUrlLocation({
+ hashOrPush: contentDir + "content-page-1.html",
+ report: "should be on content-page-1.html"
+ });
+
+ // Now submit the form in the external page.
+ $("#content-page-1 form").eq(0).submit();
+ },
+
+ function(){
+ $.testHelper.assertUrlLocation({
+ hashOrPush: contentDir + "content-page-1.html?foo=1&bar=2",
+ report: "hash should match page url and not document url"
+ });
+
+ start();
+ }]);
+ });
+})(jQuery);
--- /dev/null
+/*
+ * mobile navigation unit tests
+ */
+(function($){
+ // TODO move siteDirectory over to the nav path helper
+ var changePageFn = $.mobile.changePage,
+ originalTitle = document.title,
+ originalLinkBinding = $.mobile.linkBindingEnabled,
+ siteDirectory = location.pathname.replace( /[^/]+$/, "" ),
+ home = $.mobile.path.parseUrl(location.pathname).directory,
+ homeWithSearch = home + location.search,
+ navigateTestRoot = function(){
+ $.testHelper.openPage( "#" + location.pathname + location.search );
+ };
+
+ module('jquery.mobile.navigation.js', {
+ setup: function(){
+ $.mobile.changePage = changePageFn;
+ document.title = originalTitle;
+
+ var pageReset = function( hash ) {
+ hash = hash || "";
+
+ stop();
+
+ $(document).one( "pagechange", function() {
+ start();
+ });
+
+ location.hash = "#" + hash;
+ };
+
+ // force the page reset for hash based tests
+ if ( location.hash && !$.support.pushState ) {
+ pageReset();
+ }
+
+ // force the page reset for all pushstate tests
+ if ( $.support.pushState ) {
+ pageReset( homeWithSearch );
+ }
+
+
+ $.mobile.urlHistory.stack = [];
+ $.mobile.urlHistory.activeIndex = 0;
+ $.Event.prototype.which = undefined;
+ $.mobile.linkBindingEnabled = originalLinkBinding;
+ }
+ });
+
+ asyncTest( "window.history.back() from external to internal page", function(){
+
+ $.testHelper.pageSequence([
+
+ // open our test page
+ function(){
+ $.testHelper.openPage("#active-state-page1");
+ },
+
+ function(){
+ ok( $.mobile.activePage[0] === $( "#active-state-page1" )[ 0 ], "successful navigation to internal page." );
+
+ //location.hash = siteDirectory + "external.html";
+ $.mobile.changePage("external.html");
+ },
+
+ function(){
+ ok( $.mobile.activePage[0] !== $( "#active-state-page1" )[ 0 ], "successful navigation to external page." );
+
+ window.history.back();
+ },
+
+ function(){
+ ok( $.mobile.activePage[0] === $( "#active-state-page1" )[ 0 ], "successful navigation back to internal page." );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "external page is removed from the DOM after pagehide", function(){
+ $.testHelper.pageSequence([
+ navigateTestRoot,
+
+ function(){
+ $.mobile.changePage( "external.html" );
+ },
+
+ // page is pulled and displayed in the dom
+ function(){
+ same( $( "#external-test" ).length, 1 );
+ window.history.back();
+ },
+
+ // external-test is *NOT* cached in the dom after transitioning away
+ function(){
+ same( $( "#external-test" ).length, 0 );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "preventDefault on pageremove event can prevent external page from being removed from the DOM", function(){
+ var preventRemoval = true,
+ removeCallback = function( e ) {
+ if ( preventRemoval ) {
+ e.preventDefault();
+ }
+ };
+
+ $( document ).bind( "pageremove", removeCallback );
+
+ $.testHelper.pageSequence([
+ navigateTestRoot,
+
+ function(){
+ $.mobile.changePage( "external.html" );
+ },
+
+ // page is pulled and displayed in the dom
+ function(){
+ same( $( "#external-test" ).length, 1 );
+ window.history.back();
+ },
+
+ // external-test *IS* cached in the dom after transitioning away
+ function(){
+ same( $( "#external-test" ).length, 1 );
+
+ // Switch back to the page again!
+ $.mobile.changePage( "external.html" );
+ },
+
+ // page is still present and displayed in the dom
+ function(){
+ same( $( "#external-test" ).length, 1 );
+
+ // Now turn off our removal prevention.
+ preventRemoval = false;
+
+ window.history.back();
+ },
+
+ // external-test is *NOT* cached in the dom after transitioning away
+ function(){
+ same( $( "#external-test" ).length, 0 );
+ $( document ).unbind( "pageremove", removeCallback );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "external page is cached in the DOM after pagehide", function(){
+ $.testHelper.pageSequence([
+ navigateTestRoot,
+
+ function(){
+ $.mobile.changePage( "cached-external.html" );
+ },
+
+ // page is pulled and displayed in the dom
+ function(){
+ same( $( "#external-test-cached" ).length, 1 );
+ window.history.back();
+ },
+
+ // external test page is cached in the dom after transitioning away
+ function(){
+ same( $( "#external-test-cached" ).length, 1 );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "external page is cached in the DOM after pagehide when option is set globally", function(){
+ $.testHelper.pageSequence([
+ navigateTestRoot,
+
+ function(){
+ $.mobile.page.prototype.options.domCache = true;
+ $.mobile.changePage( "external.html" );
+ },
+
+ // page is pulled and displayed in the dom
+ function(){
+ same( $( "#external-test" ).length, 1 );
+ window.history.back();
+ },
+
+ // external test page is cached in the dom after transitioning away
+ function(){
+ same( $( "#external-test" ).length, 1 );
+ $.mobile.page.prototype.options.domCache = false;
+ $( "#external-test" ).remove();
+ start();
+ }]);
+ });
+
+ asyncTest( "page last scroll distance is remembered while navigating to and from pages", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $( "body" ).height( $( window ).height() + 500 );
+ $.mobile.changePage( "external.html" );
+ },
+
+ function(){
+ // wait for the initial scroll to 0
+ setTimeout( function() {
+ window.scrollTo( 0, 300 );
+ same( $(window).scrollTop(), 300, "scrollTop is 300 after setting it" );
+ }, 300);
+
+ // wait for the scrollstop to fire and for the scroll to be
+ // recorded 100 ms afterward (see changes made to handle hash
+ // scrolling in some browsers)
+ setTimeout( navigateTestRoot, 500 );
+ },
+
+ function(){
+ history.back();
+ },
+
+ function(){
+ // Give the silentScroll function some time to kick in.
+ setTimeout(function() {
+ same( $(window).scrollTop(), 300, "scrollTop is 300 after returning to the page" );
+ $( "body" ).height( "" );
+ start();
+ }, 300 );
+ }
+ ]);
+ });
+
+ asyncTest( "forms with data attribute ajax set to false will not call changePage", function(){
+ var called = false;
+ var newChangePage = function(){
+ called = true;
+ };
+
+ $.testHelper.sequence([
+ // avoid initial page load triggering changePage early
+ function(){
+ $.mobile.changePage = newChangePage;
+
+ $('#non-ajax-form').one('submit', function(event){
+ ok(true, 'submit callbacks are fired');
+ event.preventDefault();
+ }).submit();
+ },
+
+ function(){
+ ok(!called, "change page should not be called");
+ start();
+ }], 1000);
+ });
+
+ asyncTest( "forms with data attribute ajax not set or set to anything but false will call changePage", function(){
+ var called = 0,
+ newChangePage = function(){
+ called++;
+ };
+
+ $.testHelper.sequence([
+ // avoid initial page load triggering changePage early
+ function(){
+ $.mobile.changePage = newChangePage;
+ $('#ajax-form, #rand-ajax-form').submit();
+ },
+
+ function(){
+ ok(called >= 2, "change page should be called at least twice");
+ start();
+ }], 300);
+ });
+
+
+ asyncTest( "anchors with no href attribute will do nothing when clicked", function(){
+ var fired = false;
+
+ $(window).bind("hashchange.temp", function(){
+ fired = true;
+ });
+
+ $( "<a>test</a>" ).appendTo( $.mobile.firstPage ).click();
+
+ setTimeout(function(){
+ same(fired, false, "hash shouldn't change after click");
+ $(window).unbind("hashchange.temp");
+ start();
+ }, 500);
+ });
+
+ test( "urlHistory is working properly", function(){
+
+ //urlHistory
+ same( $.type( $.mobile.urlHistory.stack ), "array", "urlHistory.stack is an array" );
+
+ //preload the stack
+ $.mobile.urlHistory.stack[0] = { url: "foo", transition: "bar" };
+ $.mobile.urlHistory.stack[1] = { url: "baz", transition: "shizam" };
+ $.mobile.urlHistory.stack[2] = { url: "shizoo", transition: "shizaah" };
+
+ //active index
+ same( $.mobile.urlHistory.activeIndex , 0, "urlHistory.activeIndex is 0" );
+
+ //getActive
+ same( $.type( $.mobile.urlHistory.getActive() ) , "object", "active item is an object" );
+ same( $.mobile.urlHistory.getActive().url , "foo", "active item has url foo" );
+ same( $.mobile.urlHistory.getActive().transition , "bar", "active item has transition bar" );
+
+ //get prev / next
+ same( $.mobile.urlHistory.getPrev(), undefined, "urlHistory.getPrev() is undefined when active index is 0" );
+ $.mobile.urlHistory.activeIndex = 1;
+ same( $.mobile.urlHistory.getPrev().url, "foo", "urlHistory.getPrev() has url foo when active index is 1" );
+ $.mobile.urlHistory.activeIndex = 0;
+ same( $.mobile.urlHistory.getNext().url, "baz", "urlHistory.getNext() has url baz when active index is 0" );
+
+ //add new
+ $.mobile.urlHistory.activeIndex = 2;
+ $.mobile.urlHistory.addNew("test");
+ same( $.mobile.urlHistory.stack.length, 4, "urlHistory.addNew() adds an item after the active index" );
+ same( $.mobile.urlHistory.activeIndex, 3, "urlHistory.addNew() moves the activeIndex to the newly added item" );
+
+ //clearForward
+ $.mobile.urlHistory.activeIndex = 0;
+ $.mobile.urlHistory.clearForward();
+ same( $.mobile.urlHistory.stack.length, 1, "urlHistory.clearForward() clears the url stack after the active index" );
+ });
+
+ //url listening
+ function testListening( prop ){
+ var stillListening = false;
+ $(document).bind("pagebeforehide", function(){
+ stillListening = true;
+ });
+ location.hash = "foozball";
+ setTimeout(function(){
+ ok( prop == stillListening, prop + " = false disables default hashchange event handler");
+ location.hash = "";
+ prop = true;
+ start();
+ }, 1000);
+ }
+
+ asyncTest( "ability to disable our hash change event listening internally", function(){
+ testListening( ! $.mobile.urlHistory.ignoreNextHashChange );
+ });
+
+ asyncTest( "ability to disable our hash change event listening globally", function(){
+ testListening( $.mobile.hashListeningEnabled );
+ });
+
+ var testDataUrlHash = function( linkSelector, matches ) {
+ $.testHelper.pageSequence([
+ function(){ window.location.hash = ""; },
+ function(){ $(linkSelector).click(); },
+ function(){
+ $.testHelper.assertUrlLocation(
+ $.extend(matches, {
+ report: "url or hash should match"
+ })
+ );
+
+ start();
+ }
+ ]);
+
+ stop();
+ };
+
+ test( "when loading a page where data-url is not defined on a sub element hash defaults to the url", function(){
+ testDataUrlHash( "#non-data-url a", {hashOrPush: siteDirectory + "data-url-tests/non-data-url.html"} );
+ });
+
+ test( "data url works for nested paths", function(){
+ var url = "foo/bar.html";
+ testDataUrlHash( "#nested-data-url a", {hash: url, push: home + url} );
+ });
+
+ test( "data url works for single quoted paths and roles", function(){
+ var url = "foo/bar/single.html";
+ testDataUrlHash( "#single-quotes-data-url a", {hash: url, push: home + url} );
+ });
+
+ test( "data url works when role and url are reversed on the page element", function(){
+ var url = "foo/bar/reverse.html";
+ testDataUrlHash( "#reverse-attr-data-url a", {hash: url, push: home + url} );
+ });
+
+ asyncTest( "last entry choosen amongst multiple identical url history stack entries on hash change", function(){
+ // make sure the stack is clear after initial page load an any other delayed page loads
+ // TODO better browser state management
+ $.mobile.urlHistory.stack = [];
+ $.mobile.urlHistory.activeIndex = 0;
+
+ $.testHelper.pageSequence([
+ function(){ $.testHelper.openPage("#dup-history-first"); },
+ function(){ $("#dup-history-first a").click(); },
+ function(){ $("#dup-history-second a:first").click(); },
+ function(){ $("#dup-history-first a").click(); },
+ function(){ $("#dup-history-second a:last").click(); },
+ function(){ $("#dup-history-dialog a:contains('Close')").click(); },
+ function(){
+
+ // fourth page (third index) in the stack to account for first page being hash manipulation,
+ // the third page is dup-history-second which has two entries in history
+ // the test is to make sure the index isn't 1 in this case, or the first entry for dup-history-second
+ same($.mobile.urlHistory.activeIndex, 3, "should be the fourth page in the stack");
+ start();
+ }]);
+ });
+
+ asyncTest( "going back from a page entered from a dialog skips the dialog and goes to the previous page", function(){
+ $.testHelper.pageSequence([
+ // setup
+ function(){ $.testHelper.openPage("#skip-dialog-first"); },
+
+ // transition to the dialog
+ function(){ $("#skip-dialog-first a").click(); },
+
+ // transition to the second page
+ function(){ $("#skip-dialog a").click(); },
+
+ // transition past the dialog via data-rel=back link on the second page
+ function(){ $("#skip-dialog-second a").click(); },
+
+ // make sure we're at the first page and not the dialog
+ function(){
+ $.testHelper.assertUrlLocation({
+ hash: "skip-dialog-first",
+ push: homeWithSearch + "#skip-dialog-first",
+ report: "should be the first page in the sequence"
+ });
+
+ start();
+ }]);
+ });
+
+ asyncTest( "going forward from a page entered from a dialog skips the dialog and goes to the next page", function(){
+ $.testHelper.pageSequence([
+ // setup
+ function(){ $.testHelper.openPage("#skip-dialog-first"); },
+
+ // transition to the dialog
+ function(){ $("#skip-dialog-first a").click(); },
+
+ // transition to the second page
+ function(){ $("#skip-dialog a").click(); },
+
+ // transition to back past the dialog
+ function(){ window.history.back(); },
+
+ // transition to the second page past the dialog through history
+ function(){ window.history.forward(); },
+
+ // make sure we're on the second page and not the dialog
+ function(){
+ $.testHelper.assertUrlLocation({
+ hash: "skip-dialog-second",
+ push: homeWithSearch + "#skip-dialog-second",
+ report: "should be the second page after the dialog"
+ });
+
+ start();
+ }]);
+ });
+
+ asyncTest( "going back from a dialog triggered from a dialog should result in the first dialog ", function(){
+ $.testHelper.pageSequence([
+ // setup
+ function(){ $.testHelper.openPage("#nested-dialog-page"); },
+
+ // transition to the dialog
+ function(){ $("#nested-dialog-page a").click(); },
+
+ // transition to the second dialog
+ function(){ $("#nested-dialog-first a").click(); },
+
+ // transition to back to the first dialog
+ function(){ window.history.back(); },
+
+ // make sure we're on first dialog
+ function(){
+ same($(".ui-page-active")[0], $("#nested-dialog-first")[0], "should be the first dialog");
+ start();
+ }]);
+ });
+
+ asyncTest( "loading a relative file path after an embeded page works", function(){
+ $.testHelper.pageSequence([
+ // transition second page
+ function(){ $.testHelper.openPage("#relative-after-embeded-page-first"); },
+
+ // transition second page
+ function(){ $("#relative-after-embeded-page-first a").click(); },
+
+ // transition to the relative ajax loaded page
+ function(){ $("#relative-after-embeded-page-second a").click(); },
+
+ // make sure the page was loaded properly via ajax
+ function(){
+ // data attribute intentionally left without namespace
+ same($(".ui-page-active").data("other"), "for testing", "should be relative ajax loaded page");
+ start();
+ }]);
+ });
+
+ asyncTest( "Page title updates properly when clicking back to previous page", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage("#relative-after-embeded-page-first");
+ },
+
+ function(){
+ window.history.back();
+ },
+
+ function(){
+ same(document.title, "jQuery Mobile Navigation Test Suite");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Page title updates properly when clicking a link back to first page", function(){
+ var title = document.title;
+
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage("#ajax-title-page");
+ },
+
+ function(){
+ $("#titletest1").click();
+ },
+
+ function(){
+ same(document.title, "Title Tag");
+ $.mobile.activePage.find("#title-check-link").click();
+ },
+
+ function(){
+ same(document.title, title);
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Page title updates properly from title tag when loading an external page", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage("#ajax-title-page");
+ },
+
+ function(){
+ $("#titletest1").click();
+ },
+
+ function(){
+ same(document.title, "Title Tag");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Page title updates properly from data-title attr when loading an external page", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage("#ajax-title-page");
+ },
+
+ function(){
+ $("#titletest2").click();
+ },
+
+ function(){
+ same(document.title, "Title Attr");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Page title updates properly from heading text in header when loading an external page", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage("#ajax-title-page");
+ },
+
+ function(){
+ $("#titletest3").click();
+ },
+
+ function(){
+ same(document.title, "Title Heading");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Page links to the current active page result in the same active page", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage("#self-link");
+ },
+
+ function(){
+ $("a[href='#self-link']").click();
+ },
+
+ function(){
+ same($.mobile.activePage[0], $("#self-link")[0], "self-link page is still the active page" );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "links on subdirectory pages with query params append the params and load the page", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage("#data-url-tests/non-data-url.html");
+ },
+
+ function(){
+ $("#query-param-anchor").click();
+ },
+
+ function(){
+ $.testHelper.assertUrlLocation({
+ hashOrPush: home + "data-url-tests/non-data-url.html?foo=bar",
+ report: "the hash or url has query params"
+ });
+
+ ok($(".ui-page-active").jqmData("url").indexOf("?foo=bar") > -1, "the query params are in the data url");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "identical query param link doesn't add additional set of query params", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage("#data-url-tests/non-data-url.html");
+ },
+
+ function(){
+ $("#query-param-anchor").click();
+ },
+
+ function(){
+ $.testHelper.assertUrlLocation({
+ hashOrPush: home + "data-url-tests/non-data-url.html?foo=bar",
+ report: "the hash or url has query params"
+ });
+
+ $("#query-param-anchor").click();
+ },
+
+ function(){
+ $.testHelper.assertUrlLocation({
+ hashOrPush: home + "data-url-tests/non-data-url.html?foo=bar",
+ report: "the hash or url still has query params"
+ });
+
+ start();
+ }
+ ]);
+ });
+
+ // Special handling inside navigation because query params must be applied to the hash
+ // or absolute reference and dialogs apply extra information int the hash that must be removed
+ asyncTest( "query param link from a dialog to itself should be a not add another dialog", function(){
+ var firstDialogLoc;
+
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ $.testHelper.openPage("#dialog-param-link");
+ },
+
+ // navigate to the subdirectory page with the query link
+ function(){
+ $("#dialog-param-link a").click();
+ },
+
+ // navigate to the query param self reference link
+ function(){
+ $("#dialog-param-link-page a").click();
+ },
+
+ // attempt to navigate to the same link
+ function(){
+ // store the current hash for comparison (with one dialog hash key)
+ firstDialogLoc = location.hash || location.href;
+ $("#dialog-param-link-page a").click();
+ },
+
+ function(){
+ same(location.hash || location.href, firstDialogLoc, "additional dialog hash key not added");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "query data passed as string to changePage is appended to URL", function(){
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ $.mobile.changePage( "form-tests/changepage-data.html", {
+ data: "foo=1&bar=2"
+ } );
+ },
+
+ function(){
+ $.testHelper.assertUrlLocation({
+ hashOrPush: home + "form-tests/changepage-data.html?foo=1&bar=2",
+ report: "the hash or url still has query params"
+ });
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "query data passed as object to changePage is appended to URL", function(){
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ $.mobile.changePage( "form-tests/changepage-data.html", {
+ data: {
+ foo: 3,
+ bar: 4
+ }
+ } );
+ },
+
+ function(){
+ $.testHelper.assertUrlLocation({
+ hashOrPush: home + "form-tests/changepage-data.html?foo=3&bar=4",
+ report: "the hash or url still has query params"
+ });
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "refresh of a dialog url should not duplicate page", function(){
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ same($(".foo-class").length, 1, "should only have one instance of foo-class in the document");
+ location.hash = "#foo&ui-state=dialog";
+ },
+
+ function(){
+ $.testHelper.assertUrlLocation({
+ hash: "foo&ui-state=dialog",
+ push: homeWithSearch + "#foo&ui-state=dialog",
+ report: "hash should match what was loaded"
+ });
+
+ same( $(".foo-class").length, 1, "should only have one instance of foo-class in the document" );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "internal form with no action submits to document URL", function(){
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ $.testHelper.openPage("#internal-no-action-form-page");
+ },
+
+ function(){
+ $("#internal-no-action-form-page form").eq(0).submit();
+ },
+
+ function(){
+ $.testHelper.assertUrlLocation({
+ hashOrPush: home + "?foo=1&bar=2",
+ report: "hash should match what was loaded"
+ });
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "external page containing form with no action submits to page URL", function(){
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ $.testHelper.openPage("#internal-no-action-form-page");
+ },
+
+ function(){
+ $("#internal-no-action-form-page a").eq(0).click();
+ },
+
+ function(){
+ $("#external-form-no-action-page form").eq(0).submit();
+ },
+
+ function(){
+ $.testHelper.assertUrlLocation({
+ hashOrPush: home + "form-tests/form-no-action.html?foo=1&bar=2",
+ report: "hash should match page url and not document url"
+ });
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "handling of active button state when navigating", 1, function(){
+
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ $.testHelper.openPage("#active-state-page1");
+ },
+
+ function(){
+ $("#active-state-page1 a").eq(0).click();
+ },
+
+ function(){
+ $("#active-state-page2 a").eq(0).click();
+ },
+
+ function(){
+ ok(!$("#active-state-page1 a").hasClass( $.mobile.activeBtnClass ), "No button should not have class " + $.mobile.activeBtnClass );
+ start();
+ }
+ ]);
+ });
+
+ // issue 2444 https://github.com/jquery/jquery-mobile/issues/2444
+ // results from preventing spurious hash changes
+ asyncTest( "dialog should return to its parent page when open and closed multiple times", function() {
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ $.testHelper.openPage("#default-trans-dialog");
+ },
+
+ function(){
+ $.mobile.activePage.find( "a" ).click();
+ },
+
+ function(){
+ window.history.back();
+ },
+
+ function(){
+ same( $.mobile.activePage[0], $( "#default-trans-dialog" )[0] );
+ $.mobile.activePage.find( "a" ).click();
+ },
+
+ function(){
+ window.history.back();
+ },
+
+ function(){
+ same( $.mobile.activePage[0], $( "#default-trans-dialog" )[0] );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "clicks with middle mouse button are ignored", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage( "#odd-clicks-page" );
+ },
+
+ function() {
+ $( "#right-or-middle-click" ).click();
+ },
+
+ // make sure the page is opening first without the mocked button click value
+ // only necessary to prevent issues with test specific fixtures
+ function() {
+ same($.mobile.activePage[0], $("#odd-clicks-page-dest")[0]);
+ $.testHelper.openPage( "#odd-clicks-page" );
+
+ // mock the which value to simulate a middle click
+ $.Event.prototype.which = 2;
+ },
+
+ function() {
+ $( "#right-or-middle-click" ).click();
+ },
+
+ function( timeout ) {
+ ok( timeout, "page event handler timed out due to ignored click" );
+ ok($.mobile.activePage[0] !== $("#odd-clicks-page-dest")[0], "pages are not the same");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "disabling link binding disables navigation via links and highlighting", function() {
+ $.mobile.linkBindingEnabled = false;
+
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage("#bar");
+ },
+
+ function() {
+ $.mobile.activePage.find( "a" ).click();
+ },
+
+ function( timeout ) {
+ ok( !$.mobile.activePage.find( "a" ).hasClass( $.mobile.activeBtnClass ), "vlick handler doesn't add the activebtn class" );
+ ok( timeout, "no page change was fired" );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "handling of button active state when navigating by clicking back button", 1, function(){
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ $.testHelper.openPage("#active-state-page1");
+ },
+
+ function(){
+ $("#active-state-page1 a").eq(0).click();
+ },
+
+ function(){
+ $("#active-state-page2 a").eq(1).click();
+ },
+
+ function(){
+ $("#active-state-page1 a").eq(0).click();
+ },
+
+ function(){
+ ok(!$("#active-state-page2 a").hasClass( $.mobile.activeBtnClass ), "No button should not have class " + $.mobile.activeBtnClass );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "can navigate to dynamically injected page with dynamically injected link", function(){
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ $.testHelper.openPage("#inject-links-page");
+ },
+
+ function(){
+ var $ilpage = $( "#inject-links-page" ),
+ $link = $( "<a href='#injected-test-page'>injected-test-page link</a>" );
+
+ // Make sure we actually navigated to the expected page.
+ ok( $.mobile.activePage[ 0 ] == $ilpage[ 0 ], "navigated successfully to #inject-links-page" );
+
+ // Now dynamically insert a page.
+ $ilpage.parent().append( "<div data-role='page' id='injected-test-page'>testing...</div>" );
+
+ // Now inject a link to this page dynamically and attempt to navigate
+ // to the page we just inserted.
+ $link.appendTo( $ilpage ).click();
+ },
+
+ function(){
+ // Make sure we actually navigated to the expected page.
+ ok( $.mobile.activePage[ 0 ] == $( "#injected-test-page" )[ 0 ], "navigated successfully to #injected-test-page" );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "application url with dialogHashKey loads application's first page", function(){
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ // Navigate to any page except the first page of the application.
+ $.testHelper.openPage("#foo");
+ },
+
+ function(){
+ ok( $.mobile.activePage[ 0 ] === $( "#foo" )[ 0 ], "navigated successfully to #foo" );
+
+ // Now navigate to an hash that contains just a dialogHashKey.
+ $.mobile.changePage("#" + $.mobile.dialogHashKey);
+ },
+
+ function(){
+ // Make sure we actually navigated to the first page.
+ ok( $.mobile.activePage[ 0 ] === $.mobile.firstPage[ 0 ], "navigated successfully to first-page" );
+
+ // Now make sure opening the page didn't result in page duplication.
+ ok( $.mobile.firstPage.hasClass( "first-page" ), "first page has expected class" );
+ same( $( ".first-page" ).length, 1, "first page was not duplicated" );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "navigate to non-existent internal page throws pagechangefailed", function(){
+ var pagechangefailed = false,
+ pageChangeFailedCB = function( e ) {
+ pagechangefailed = true;
+ }
+
+ $( document ).bind( "pagechangefailed", pageChangeFailedCB );
+
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ // Make sure there's only one copy of the first-page in the DOM to begin with.
+ ok( $.mobile.firstPage.hasClass( "first-page" ), "first page has expected class" );
+ same( $( ".first-page" ).length, 1, "first page was not duplicated" );
+
+ // Navigate to any page except the first page of the application.
+ $.testHelper.openPage("#foo");
+ },
+
+ function(){
+ var $foo = $( "#foo" );
+ ok( $.mobile.activePage[ 0 ] === $foo[ 0 ], "navigated successfully to #foo" );
+ same( pagechangefailed, false, "no page change failures" );
+
+ // Now navigate to a non-existent page.
+ $foo.find( "#bad-internal-page-link" ).click();
+ },
+
+ function(){
+ // Make sure a pagechangefailed event was triggered.
+ same( pagechangefailed, true, "pagechangefailed dispatched" );
+
+ // Make sure we didn't navigate away from #foo.
+ ok( $.mobile.activePage[ 0 ] === $( "#foo" )[ 0 ], "did not navigate away from #foo" );
+
+ // Now make sure opening the page didn't result in page duplication.
+ same( $( ".first-page" ).length, 1, "first page was not duplicated" );
+
+ $( document ).unbind( "pagechangefailed", pageChangeFailedCB );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "prefetched links with data rel dialog result in a dialog", function() {
+ $.testHelper.pageSequence([
+ // open our test page
+ function(){
+ // Navigate to any page except the first page of the application.
+ $.testHelper.openPage("#prefetched-dialog-page");
+ },
+
+ function() {
+ $("#prefetched-dialog-link").click();
+ },
+
+ function() {
+ ok( $.mobile.activePage.is(".ui-dialog"), "prefetched page is rendered as a dialog" );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "first page gets reloaded if pruned from the DOM", function(){
+ var hideCallbackTriggered = false;
+
+ function hideCallback( e, data )
+ {
+ var page = e.target;
+ ok( ( page === $.mobile.firstPage[ 0 ] ), "hide called with prevPage set to firstPage");
+ if ( page === $.mobile.firstPage[ 0 ] ) {
+ $( page ).remove();
+ }
+ hideCallbackTriggered = true;
+ }
+
+ $(document).bind('pagehide', hideCallback);
+
+ $.testHelper.pageSequence([
+ function(){
+ // Make sure the first page is actually in the DOM.
+ ok( $.mobile.firstPage.parent().length !== 0, "first page is currently in the DOM" );
+
+ // Make sure the first page is the active page.
+ ok( $.mobile.activePage[ 0 ] === $.mobile.firstPage[ 0 ], "first page is the active page" );
+
+ // Now make sure the first page has an id that we can use to reload it.
+ ok( $.mobile.firstPage[ 0 ].id, "first page has an id" );
+
+ // Make sure there is only one first page in the DOM.
+ same( $( ".first-page" ).length, 1, "only one instance of the first page in the DOM" );
+
+ // Navigate to any page except the first page of the application.
+ $.testHelper.openPage("#foo");
+ },
+
+ function(){
+ // Make sure the active page is #foo.
+ ok( $.mobile.activePage[ 0 ] === $( "#foo" )[ 0 ], "navigated successfully to #foo" );
+
+ // Make sure our hide callback was triggered.
+ ok( hideCallbackTriggered, "hide callback was triggered" );
+
+ // Make sure the first page was actually pruned from the document.
+ ok( $.mobile.firstPage.parent().length === 0, "first page was pruned from the DOM" );
+ same( $( ".first-page" ).length, 0, "no instance of the first page in the DOM" );
+
+ // Remove our hideCallback.
+ $(document).unbind('pagehide', hideCallback);
+
+ // Navigate back to the first page!
+ $.testHelper.openPage( "#" + $.mobile.firstPage[0].id );
+ },
+
+ function(){
+ var firstPage = $( ".first-page" );
+
+ // We should only have one first page in the document at any time!
+ same( firstPage.length, 1, "single instance of first page recreated in the DOM" );
+
+ // Make sure the first page in the DOM is actually a different DOM element than the original
+ // one we started with.
+ ok( $.mobile.firstPage[ 0 ] !== firstPage[ 0 ], "first page is a new DOM element");
+
+ // Make sure we actually navigated to the new first page.
+ ok( $.mobile.activePage[ 0 ] === firstPage[ 0 ], "navigated successfully to new first-page");
+
+ // Reset the $.mobile.firstPage for subsequent tests.
+ // XXX: Should we just get rid of the new one and restore the old?
+ $.mobile.firstPage = $.mobile.activePage;
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "test that clicks are ignored where data-ajax='false' parents exist", function() {
+ var $disabledByParent = $( "#unhijacked-link-by-parent" ),
+ $disabledByAttr = $( "#unhijacked-link-by-attr" );
+
+ $.mobile.ignoreContentEnabled = true;
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( "#link-hijacking-test" );
+ },
+
+ function() {
+ $( "#hijacked-link" ).trigger( 'click' );
+ },
+
+ function() {
+ ok( $.mobile.activePage.is("#link-hijacking-destination"), "nav works for links to hijacking destination" );
+ window.history.back();
+ },
+
+ function() {
+ $disabledByParent.trigger( 'click' );
+ },
+
+ function() {
+ ok( $.mobile.activePage.is("#link-hijacking-test"), "click should be ignored keeping the active mobile page the same as before" );
+ },
+
+ function() {
+ $disabledByAttr.trigger( 'click' );
+ },
+
+ function() {
+ ok( $.mobile.activePage.is("#link-hijacking-test"), "click should be ignored keeping the active mobile page the same as before" );
+
+ $.mobile.ignoreContentEnabled = false;
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "test that *vclicks* are ignored where data-ajax='false' parents exist", function() {
+ var $disabledByParent = $( "#unhijacked-link-by-parent" ),
+ $disabledByAttr = $( "#unhijacked-link-by-attr" ),
+ $hijacked = $( "#hijacked-link" );
+
+ $.mobile.ignoreContentEnabled = true;
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( "#link-hijacking-test" );
+ },
+
+ function() {
+ // force the active button class
+ $hijacked.addClass( $.mobile.activeBtnClass );
+ $hijacked.trigger( 'vclick' );
+ ok( $hijacked.hasClass( $.mobile.activeBtnClass ), "active btn class is added to the link per normal" );
+
+ $disabledByParent.trigger( 'vclick' );
+ ok( !$disabledByParent.hasClass( $.mobile.activeBtnClass ), "active button class is never added to the link" );
+
+ $disabledByAttr.trigger( 'vclick' );
+ ok( !$disabledByAttr.hasClass( $.mobile.activeBtnClass ), "active button class is never added to the link" );
+
+ $.mobile.ignoreContentEnabled = false;
+ start();
+ }
+ ]);
+ });
+})(jQuery);
--- /dev/null
+/*
+ * mobile navigation unit tests
+ */
+(function($){
+ var perspective,
+ transitioning = "ui-mobile-viewport-transitioning",
+ animationCompleteFn = $.fn.animationComplete,
+ defaultMaxTrans = $.mobile.maxTransitionWidth,
+
+ //TODO centralize class names?
+ transitionTypes = "in out fade slide flip reverse pop",
+
+ isTransitioning = function(page){
+ return $.grep(transitionTypes.split(" "), function(className, i){
+ return page.hasClass(className);
+ }).length > 0;
+ },
+
+ isTransitioningIn = function(page){
+ return page.hasClass("in") && isTransitioning(page);
+ },
+
+ disableMaxTransWidth = function(){
+ $.mobile.maxTransitionWidth = false;
+ },
+
+ enableMaxTransWidth = function(){
+ $.mobile.maxTransitionWidth = defaultMaxTrans;
+ },
+
+ //animationComplete callback queue
+ fromQueue = [],
+ toQueue = [],
+
+ resetQueues = function(){
+ fromQueue = [];
+ toQueue = [];
+ },
+
+ onFromComplete = function( f ){
+ fromQueue.push( f );
+ },
+
+ onToComplete = function( f ){
+ toQueue.push( f );
+ },
+
+
+ //wipe all urls
+ clearUrlHistory = function(){
+ $.mobile.urlHistory.stack = [];
+ $.mobile.urlHistory.activeIndex = 0;
+ };
+
+
+ if( !$.support.cssTransform3d ) {
+ perspective = "viewport-fade";
+ } else {
+ perspective = "viewport-flip";
+ }
+
+ module('jquery.mobile.navigation.js', {
+ setup: function(){
+
+
+ // disable this option so we can test transitions regardless of window width
+ disableMaxTransWidth();
+
+ //stub to allow callback before function is returned to transition handler
+ $.fn.animationComplete = function( callback ){
+ animationCompleteFn.call( this, function(){
+ var queue = $(this).is(".out") ? fromQueue : toQueue;
+ for( var i = 0, il = queue.length; i < il; i++ ){
+ queue.pop()( this );
+ }
+ callback();
+ });
+
+ return this;
+ };
+
+ resetQueues();
+ clearUrlHistory();
+
+ if ( location.hash !== "#harmless-default-page" ) {
+ stop();
+
+ $(document).one("pagechange", function() {
+ start();
+ } );
+
+ location.hash = "#harmless-default-page";
+ }
+ },
+
+ teardown: function(){
+ // unmock animation complete
+ $.fn.animationComplete = animationCompleteFn;
+ enableMaxTransWidth();
+ }
+ });
+
+ /*
+ NOTES:
+ Our default transition handler now has either one or two animationComplete calls - two if there are two pages in play (from and to)
+ To is required, so each async function must call start() onToComplete, not onFromComplete.
+ */
+ asyncTest( "changePage applies perspective class to mobile viewport for flip", function(){
+ expect(1);
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#foo");
+ },
+
+ function() {
+ onToComplete( function( el ) {
+ console.log( $("body").attr("class") );
+ ok($("body").hasClass(perspective), "has viewport-flip or viewport-fade based on 3d transform");
+ start();
+ });
+
+ $("#foo > a").first().click();
+ }
+ ]);
+ });
+
+ asyncTest( "changePage applies transition class to mobile viewport for default transition", function(){
+ expect(1);
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage("#baz");
+ },
+
+ function() {
+ onToComplete( function( el ){
+ ok($("body").hasClass(transitioning), "has transitioning class");
+ start();
+ });
+
+ $("#baz > a").click();
+ }
+ ]);
+ });
+
+ asyncTest( "explicit transition preferred for page navigation reversal (ie back)", function(){
+ expect( 1 );
+
+ onToComplete(function(){
+ $("#flip-trans > a").click();
+ onToComplete(function(){
+ $("#fade-trans > a").click();
+ onToComplete(function(){
+ ok($("#flip-trans").hasClass("fade"), "has fade class");
+ start();
+ });
+ });
+ });
+
+ $("#fade-trans > a").click();
+ });
+
+ asyncTest( "default transition is fade", function(){
+ onToComplete(function(){
+ ok($("#no-trans").hasClass("fade"), "has fade class");
+ start();
+ })
+
+ $("#default-trans > a").click();
+ });
+
+ asyncTest( "changePage queues requests", function(){
+ expect(4)
+ var firstPage = $("#foo"),
+ secondPage = $("#bar");
+
+ $.mobile.changePage(firstPage);
+ $.mobile.changePage(secondPage);
+
+ onToComplete(function(){
+ ok(isTransitioningIn(firstPage), "first page begins transition");
+ ok(!isTransitioningIn(secondPage), "second page doesn't transition yet");
+ onToComplete(function(){
+ ok(!isTransitioningIn(firstPage), "first page transition should be complete");
+ ok(isTransitioningIn(secondPage), "second page should begin transitioning");
+ start();
+
+ });
+ });
+ });
+
+ asyncTest( "default transition is pop for a dialog", function(){
+ var defaultTransition = "pop";
+
+ if( !$.support.cssTransform3d ){
+ defaultTransition = "fade";
+ }
+
+ expect( 1 );
+ onToComplete(function(){
+ ok( $("#no-trans-dialog").hasClass(defaultTransition), "has pop class" );
+ start();
+ });
+
+ $("#default-trans-dialog > a").click();
+ });
+
+ test( "animationComplete return value", function(){
+ $.fn.animationComplete = animationCompleteFn;
+ equals($("#foo").animationComplete(function(){})[0], $("#foo")[0]);
+ });
+
+
+ // reusable function for a few tests below
+ function testTransitionMaxWidth( val, expected ){
+ expect( 1 );
+
+ $.mobile.maxTransitionWidth = val;
+
+ var transitionOccurred = false;
+
+ onToComplete(function(){
+ transitionOccurred = true;
+ });
+
+
+ return setTimeout(function(){
+ ok( transitionOccurred === expected, (expected ? "" : "no ") + "transition occurred" );
+ start();
+ }, 5000);
+
+ $.mobile.changePage( $(".ui-page:not(.ui-page-active)").first() );
+
+ }
+
+ asyncTest( "maxTransitionWidth property disables transitions when value is less than browser width", function(){
+ testTransitionMaxWidth( $( window ).width() - 1, false );
+ });
+
+ asyncTest( "maxTransitionWidth property disables transitions when value is false", function(){
+ testTransitionMaxWidth( false, false );
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Navigation Test Suite</title>
+
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../js/"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+ <script src="../../../external/qunit.js"></script>
+
+ <script type="text/javascript" src="navigation_dialog_pushstate.js"></script>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Navigation Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page">
+ <a href="#dialog">open the dialog</a>
+</div>
+
+<div id="dialog" data-nstest-role="dialog">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Dialog</h1>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Navigation Test Suite</title>
+
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script type="text/javascript">
+ $.testHelper.setPushState();
+ </script>
+
+ <script src="../../../js/"></script>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+ <script src="../../../external/qunit.js"></script>
+
+ <script type="text/javascript" src="navigation_transitions.js"></script>
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Navigation Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="harmless-default-page" data-nstest-role="page" class="first-page">
+</div>
+
+<div id="foo" data-nstest-role="page" class="foo-class">
+ <a href="#bar" data-nstest-transition="flip"></a>
+ <a id="bad-internal-page-link" href="#non-existent-page"></a>
+</div>
+
+<div id="prefetch" data-nstest-role="page">
+ <a href="prefetched.html" data-nstest-prefetch>Prefetch test</a>
+</div>
+
+<div id="foozball" data-nstest-role="page">
+</div>
+
+<div id="bar" data-nstest-role="page">
+ <a href="#baz"></a>
+</div>
+
+<div id="baz" data-nstest-role="page">
+ <a href="#foo"></a>
+</div>
+
+<div id="fade-trans" data-nstest-role="page">
+ <a href="#flip-trans" data-nstest-transition="fade"></a>
+</div>
+
+<div id="flip-trans" data-nstest-role="page">
+ <a href="#fade-trans" data-nstest-transition="flip"></a>
+</div>
+
+<div id="no-trans" data-nstest-role="page">
+ <a href="#pop-trans"></a>
+</div>
+
+<div id="pop-trans" data-nstest-role="page">
+ <a href="#no-trans" data-nstest-transition="pop"></a>
+</div>
+
+<div id="default-trans" data-nstest-role="page">
+ <a href="#no-trans"></a>
+</div>
+
+<div id="data-url" data-nstest-role="page">
+ <a href="data-url-tests/data-url.html"></a>
+</div>
+
+<div id="non-data-url" data-nstest-role="page">
+ <a href="data-url-tests/non-data-url.html"></a>
+</div>
+
+<div id="nested-data-url" data-nstest-role="page">
+ <a href="data-url-tests/nested.html"></a>
+</div>
+
+<div id="single-quotes-data-url" data-nstest-role="page">
+ <a href="data-url-tests/single-quotes.html"></a>
+</div>
+
+<div id="reverse-attr-data-url" data-nstest-role="page">
+ <a href="data-url-tests/reverse-attr.html"></a>
+</div>
+
+<div id="ajax-disabled-form" data-nstest-role="page">
+ <form method="POST" id="non-ajax-form" action="/ajax-disabled-form" data-nstest-ajax="false">
+ </form>
+
+ <form method="POST" id="ajax-form" action="/ajax-disabled-form">
+ </form>
+
+ <form method="POST" id="rand-ajax-form" action="/ajax-disabled-form" data-nstest-ajax="foo">
+ </form>
+</div>
+
+<div id="default-trans-dialog" data-nstest-role="page">
+ <a href="#no-trans-dialog" data-nstest-rel="dialog"></a>
+</div>
+
+<div id="no-trans-dialog" data-nstest-role="page">
+</div>
+
+<div id="dup-history-first" data-nstest-role="page">
+ <a href="#dup-history-second" data-nstest-transition="slideup" data-nstest-role="button" >
+ Page 2
+ </a>
+</div>
+
+<div id="dup-history-second" data-nstest-role="page">
+ <a href="#dup-history-first" data-nstest-transition="slideup" data-nstest-role="button">
+ Page 1
+ </a>
+ <a href="#dup-history-dialog" data-nstest-role="button" data-nstest-transition="pop" data-nstest-rel="dialog">Dialog</a>
+</div>
+
+<div id="dup-history-dialog" data-nstest-role="dialog">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Dialog</h1>
+ </div>
+</div>
+
+<div id="skip-dialog-first" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="#skip-dialog" data-nstest-role="button" data-nstest-transition="pop" data-nstest-rel="dialog">Dialog</a>
+ </div>
+</div>
+
+<div id="skip-dialog" data-nstest-role="dialog">
+ <div data-nstest-role="content">
+ <a href="#skip-dialog-second">Page 2</a>
+ </div>
+</div>
+
+<div id="skip-dialog-second" data-nstest-role="page">
+ <a href="#" data-nstest-rel="back">Go Back</a>
+</div>
+
+
+<div id="nested-dialog-page" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="#nested-dialog-first">Dialog</a>
+ </div>
+</div>
+
+<div id="nested-dialog-first" data-nstest-role="dialog">
+ <div data-nstest-role="content">
+ <a href="#nested-dialog-second">Dialog 2</a>
+ </div>
+</div>
+
+<div id="nested-dialog-second" data-nstest-role="dialog">
+</div>
+
+<div id="relative-after-embeded-page-first" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="#relative-after-embeded-page-second">second page</a>
+ </div>
+</div>
+
+<div id="relative-after-embeded-page-second" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="data-url-tests/data-url.html">file path page</a>
+ </div>
+</div>
+
+<div id="ajax-title-page" data-nstest-title="Title Attr 1" data-nstest-role="page">
+ <a href="title1.html" id="titletest1" data-nstest-transition="none">test</a>
+ <a href="title2.html" id="titletest2" data-nstest-transition="none">test</a>
+ <a href="title3.html" id="titletest3" data-nstest-transition="none">test</a>
+</div>
+
+<div data-nstest-role="page" id="titletest4" data-nstest-title="Title Attr 2">
+ <div data-nstest-role="header"><h1>Title Heading</h1></div>
+</div>
+
+<div data-nstest-role="page" id="titletest5" data-nstest-title="Title Attr">
+ <div data-nstest-role="header"><h1>Title Heading</h1></div>
+</div>
+
+<div data-nstest-role="page" id="self-link">
+ <a href="#self-link">self!</a>
+</div>
+
+<div data-nstest-role="page" id="dialog-param-link">
+ <a href="dialog-param-test/dialog-param.html">go</a>
+</div>
+
+<div data-nstest-role="page" id="pathing-tests">
+ <!-- doc rel links -->
+ <a href="file.html" id="doc-rel-test-one">go</a>
+ <a href="path-tests/file.html" id="doc-rel-test-two">go</a>
+ <a href="path-tests/sub-dir/file.html" id="doc-rel-test-three">go</a>
+ <a href="path-tests/sub-dir/" id="doc-rel-test-four">go</a>
+ <a href="../../unit/navigation/path-tests/parent-ref.html" id="doc-rel-test-five">go</a>
+ <a href="../../unit/navigation/path-tests/parent/" id="doc-rel-test-six">go</a>
+
+ <!-- site rel links -->
+ <!-- these will be altered before the test suite runs to use the current path -->
+ <a href="file.html" id="site-rel-test-one" class="site-rel">go</a>
+ <a href="path-tests/file.html" id="site-rel-test-two" class="site-rel">go</a>
+ <a href="path-tests/sub-dir/file.html" id="site-rel-test-three" class="site-rel">go</a>
+ <a href="path-tests/sub-dir/" id="site-rel-test-four" class="site-rel">go</a>
+ <a href="../../unit/navigation/path-tests/parent-ref.html" id="site-rel-test-five" class="site-rel">go</a>
+ <a href="../../unit/navigation/path-tests/parent/" id="site-rel-test-six" class="site-rel">go</a>
+
+ <!-- protocol rel links -->
+ <!-- these will be altered before the test suite runs to use the
+ current domain and path -->
+ <a href="file.html" id="protocol-rel-test-one" class="protocol-rel">go</a>
+ <a href="path-tests/file.html" id="protocol-rel-test-two" class="protocol-rel">go</a>
+ <a href="path-tests/sub-dir/file.html" id="protocol-rel-test-three" class="protocol-rel">go</a>
+ <a href="path-tests/sub-dir/" id="protocol-rel-test-four" class="protocol-rel">go</a>
+ <a href="../../unit/navigation/path-tests/parent-ref.html" id="protocol-rel-test-five" class="protocol-rel">go</a>
+ <a href="../../unit/navigation/path-tests/parent/" id="protocol-rel-test-six" class="protocol-rel">go</a>
+
+ <!-- absolute links -->
+ <!-- these will be altered before the test suite runs to use the
+ current protocol, domain and path -->
+ <a href="file.html" id="absolute-test-one" class="absolute">go</a>
+ <a href="path-tests/file.html" id="absolute-test-two" class="absolute">go</a>
+ <a href="path-tests/sub-dir/file.html" id="absolute-test-three" class="absolute">go</a>
+ <a href="path-tests/sub-dir/" id="absolute-test-four" class="absolute">go</a>
+ <a href="../../unit/navigation/path-tests/parent-ref.html" id="absolute-test-five" class="absolute">go</a>
+ <a href="../../unit/navigation/path-tests/parent/" id="absolute-test-six" class="absolute">go</a>
+
+</div>
+
+<div data-nstest-role="page" id="pathing-tests-reset">
+ <div class="reset-value">page didn't change!</div>
+</div>
+
+<div data-nstest-role="page" id="internal-no-action-form-page">
+ <div data-nstest-role="content">
+ <form>
+ <input type="hidden" name="foo" value="1">
+ <input type="hidden" name="bar" value="2">
+ </form>
+ <a href="form-tests/form-no-action.html">External page containing form with no action.</a>
+ </div>
+</div>
+
+<div id="active-state-page1" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="#active-state-page2" data-nstest-role="button">page2</a>
+ </div>
+</div>
+
+<div id="active-state-page2" data-nstest-role="page">
+ <div data-nstest-role="content">
+ <a href="#active-state-page1" data-nstest-role="button">href button</a>
+ <a href="#active-state-page1" data-nstest-rel="back" data-nstest-role="button">back button</a>
+ </div>
+</div>
+
+
+
+<div id="odd-clicks-page" data-nstest-role="page">
+ <a href="#odd-clicks-page-dest" id="right-or-middle-click">foo</a>
+</div>
+
+<div id="odd-clicks-page-dest" data-nstest-role="page"></div>
+
+<div id="inject-links-page" data-nstest-role="page">
+ <a href="#injected-test-page" id="static-injected-test-page-link">static link</a>
+</div>
+
+<div id="prefetched-dialog-page" data-nstest-role="page">
+ <a href="prefetched-dialog.html"
+ id="prefetched-dialog-link"
+ data-nstest-role="prefetch"
+ data-nstest-rel="dialog">
+ static link
+ </a>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Page Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.page",
+ "jquery.mobile.page.sections"
+ ],
+ [ "page_core.js" ],
+ [ "jquery.mobile.init" ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Page Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="qunit-fixture">
+ <div data-nstest-role="page">
+ <div data-nstest-role="header">
+ <div>
+ <a href="foo">foo</a>
+ </div>
+ <a href="foo">foo</a>
+ </div><!-- /header -->
+
+ <div data-nstest-role="footer">
+ <div>
+ <a href="foo">foo</a>
+ </div>
+
+ <a href="foo">foo</a>
+ </div><!-- /header -->
+
+ <div class="ui-bar">
+ <div>
+ <a href="foo">foo</a>
+ </div>
+
+ <a href="foo">foo</a>
+ </div>
+ </div>
+</div>
+
+<div data-nstest-enhance="false">
+ <div data-nstest-role="header" id="ignored-header">
+ <div>
+ <a href="foo">foo</a>
+ </div>
+ <a href="foo">foo</a>
+ </div><!-- /header -->
+</div>
+
+<div>
+ <div data-nstest-role="header" id="enhanced-header">
+ <div>
+ <a href="foo">foo</a>
+ </div>
+ <a href="foo">foo</a>
+ </div><!-- /header -->
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * mobile page unit tests
+ */
+(function($){
+ var libName = 'jquery.mobile.page.sections';
+
+ module(libName);
+
+ test( "nested header anchors aren't altered", function(){
+ ok(!$('.ui-header > div > a').hasClass('ui-btn'));
+ });
+
+ test( "nested footer anchors aren't altered", function(){
+ ok(!$('.ui-footer > div > a').hasClass('ui-btn'));
+ });
+
+ test( "nested bar anchors aren't styled", function(){
+ ok(!$('.ui-bar > div > a').hasClass('ui-btn'));
+ });
+
+ test( "unnested footer anchors are styled", function(){
+ ok($('.ui-footer > a').hasClass('ui-btn'));
+ });
+
+ test( "unnested bar anchors are styled", function(){
+ ok($('.ui-bar > a').hasClass('ui-btn'));
+ });
+
+ test( "no auto-generated back button exists on first page", function(){
+ ok( !$(".ui-header > :jqmData(rel='back')").length );
+ });
+
+ test( "sections inside an ignored container do not enhance", function() {
+ var $ignored = $( "#ignored-header" ), $enhanced = $( "#enhanced-header" );
+
+ $.mobile.ignoreContentEnabled = true;
+
+ $ignored
+ .parent()
+ .attr( "data-" + $.mobile.ns + "role", "page" )
+ .page()
+ .trigger( "pagecreate" );
+ same( $ignored.attr( "class" ), undefined, "ignored header has no class" );
+
+ $enhanced
+ .parent()
+ .attr( "data-" + $.mobile.ns + "role", "page" )
+ .page()
+ .trigger( "pagecreate" );
+ same( $enhanced.attr( "class" ).indexOf("ui-header"), 0, "enhanced header has classes" );
+
+ $.mobile.ignoreContentEnabled = false;
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Page Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.page",
+ "jquery.mobile.links",
+ ],
+ [ "page_core.js" ],
+ [ "jquery.mobile.init" ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Page Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="a" data-nstest-role="page"></div>
+<div id="b" data-nstest-role="page" data-nstest-theme="e"></div>
+<div id="c" data-nstest-role="page"></div>
+
+<div>
+ <a href="#" id="enhanced-link"></a>
+</div>
+
+<div data-nstest-enhance="false">
+ <a href="#" id="ignored-link"></a>
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * mobile page unit tests
+ */
+(function($){
+ var libName = 'jquery.mobile.page',
+ themedefault = $.mobile.page.prototype.options.theme,
+ keepNative = $.mobile.page.prototype.options.keepNative;
+
+ module(libName, {
+ setup: function() {
+ $.mobile.page.prototype.options.keepNative = keepNative;
+ }
+ });
+
+ var eventStack = [],
+ etargets = [],
+ cEvents=[],
+ cTargets=[];
+
+ $( document ).bind( "pagebeforecreate pagecreate", function( e ){
+ eventStack.push( e.type );
+ etargets.push( e.target );
+ });
+
+ $( "#c" ).live( "pagebeforecreate", function( e ){
+ cEvents.push( e.type );
+ cTargets.push( e.target );
+ return false;
+ });
+
+ test( "pagecreate event fires when page is created", function(){
+ ok( eventStack[0] === "pagecreate" || eventStack[1] === "pagecreate" );
+ });
+
+ test( "pagebeforecreate event fires when page is created", function(){
+ ok( eventStack[0] === "pagebeforecreate" || eventStack[1] === "pagebeforecreate" );
+ });
+
+ test( "pagebeforecreate fires before pagecreate", function(){
+ ok( eventStack[0] === "pagebeforecreate" );
+ });
+
+ test( "target of pagebeforecreate event was div #a", function(){
+ ok( $( etargets[0] ).is("#a") );
+ });
+
+ test( "target of pagecreate event was div #a" , function(){
+ ok( $( etargets[0] ).is("#a") );
+ });
+
+ test( "page element has ui-page class" , function(){
+ ok( $( "#a" ).hasClass( "ui-page" ) );
+ });
+
+ test( "page element has default body theme when not overidden" , function(){
+ ok( $( "#a" ).hasClass( "ui-body-" + themedefault ) );
+ });
+
+ test( "B page has non-default theme matching its data-theme attr" , function(){
+ $( "#b" ).page();
+ var btheme = $( "#b" ).jqmData( "theme" );
+ ok( $( "#b" ).hasClass( "ui-body-" + btheme ) );
+ });
+
+ test( "Binding to pagebeforecreate and returning false prevents pagecreate event from firing" , function(){
+ $( "#c" ).page();
+
+ ok( cEvents[0] === "pagebeforecreate" );
+ ok( !cTargets[1] );
+ });
+
+ test( "Binding to pagebeforecreate and returning false prevents classes from being applied to page" , function(){
+ $( "#c" ).page();
+
+ ok( !$( "#c" ).hasClass( "ui-body-" + themedefault ) );
+ ok( !$( "#c" ).hasClass( "ui-page" ) );
+ });
+
+ test( "keepNativeSelector returns the default where keepNative is not different", function() {
+ var pageProto = $.mobile.page.prototype;
+ pageProto.options.keepNative = pageProto.options.keepNativeDefault;
+
+ same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
+ });
+
+ test( "keepNativeSelector returns the default where keepNative is empty, undefined, whitespace", function() {
+ var pageProto = $.mobile.page.prototype;
+
+ pageProto.options.keepNative = "";
+ same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
+
+ pageProto.options.keepNative = undefined;
+ same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
+
+ pageProto.options.keepNative = " ";
+ same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
+ });
+
+ test( "keepNativeSelector returns a selector joined with the default", function() {
+ var pageProto = $.mobile.page.prototype;
+
+ pageProto.options.keepNative = "foo, bar";
+ same(pageProto.keepNativeSelector(), "foo, bar, " + pageProto.options.keepNativeDefault);
+ });
+
+ test( "links inside an ignored container do not enhance", function() {
+ var $ignored = $( "#ignored-link" ), $enhanced = $( "#enhanced-link" );
+
+ $.mobile.ignoreContentEnabled = true;
+
+ $ignored.parent().trigger( "create" );
+ same( $ignored.attr( "class" ), undefined, "ignored link doesn't have link class" );
+
+ $enhanced.parent().trigger( "create" );
+ same( $enhanced.attr( "class" ).indexOf("ui-link"), 0, "enhanced link has link class" );
+
+ $.mobile.ignoreContentEnabled = false;
+ });
+
+
+ asyncTest( "page container is updated to page theme at pagebeforeshow", function(){
+
+ expect( 1 );
+
+ var pageTheme = "ui-overlay-" + $.mobile.activePage.page( "option", "theme" );
+
+ $.mobile.pageContainer.removeClass( pageTheme );
+
+ $.mobile.activePage
+ .bind( "pagebeforeshow", function(){
+ ok( $.mobile.pageContainer.hasClass( pageTheme ), "Page container has the same theme as the page on pagebeforeshow" );
+ start();
+ })
+ .trigger( "pagebeforeshow" );
+
+ } );
+
+ asyncTest( "page container is updated to page theme at pagebeforeshow", function(){
+
+ expect( 1 );
+
+ var pageTheme = "ui-overlay-" + $.mobile.activePage.page( "option", "theme" );
+
+ $.mobile.pageContainer.addClass( pageTheme );
+
+ $.mobile.activePage
+ .bind( "pagebeforehide", function(){
+ ok( !$.mobile.pageContainer.hasClass( pageTheme ), "Page container does not have the same theme as the page on pagebeforeshow" );
+ start();
+ })
+ .trigger( "pagebeforehide" );
+
+ } );
+
+
+
+})(jQuery);
--- /dev/null
+$(function() {
+ var Runner = function( ) {
+ var self = this;
+
+ $.extend( self, {
+ frame: window.frames[ "testFrame" ],
+
+ testTimeout: 3 * 60 * 1000,
+
+ $frameElem: $( "#testFrame" ),
+
+ assertionResultPrefix: "assertion result for test:",
+
+ onTimeout: QUnit.start,
+
+ onFrameLoad: function() {
+ // establish a timeout for a given suite in case of async tests hanging
+ self.testTimer = setTimeout( self.onTimeout, self.testTimeout );
+
+ // it might be a redirect with query params for push state
+ // tests skip this call and expect another
+ if( !self.frame.QUnit ) {
+ self.$frameElem.one( "load", self.onFrameLoad );
+ return;
+ }
+
+ // when the QUnit object reports done in the iframe
+ // run the onFrameDone method
+ self.frame.QUnit.done = self.onFrameDone;
+ self.frame.QUnit.testDone = self.onTestDone;
+ },
+
+ onTestDone: function( result ) {
+ QUnit.ok( !(result.failed > 0), result.name );
+ self.recordAssertions( result.total - result.failed, result.name );
+ },
+
+ onFrameDone: function( results ) {
+ // make sure we don't time out the tests
+ clearTimeout( self.testTimer );
+
+ // TODO decipher actual cause of multiple test results firing twice
+ // clear the done call to prevent early completion of other test cases
+ self.frame.QUnit.done = $.noop;
+ self.frame.QUnit.testDone = $.noop;
+
+ // hide the extra assertions made to propogate the count
+ // to the suite level test
+ self.hideAssertionResults();
+
+ // continue on to the next suite
+ QUnit.start();
+ },
+
+ recordAssertions: function( count, parentTest ) {
+ for( var i = 0; i < count; i++ ) {
+ ok( true, self.assertionResultPrefix + parentTest );
+ }
+ },
+
+ hideAssertionResults: function() {
+ $( "li:not([id]):contains('" + self.assertionResultPrefix + "')" ).hide();
+ },
+
+ exec: function( data ) {
+ var template = self.$frameElem.attr( "data-src" );
+
+ $.each( data.testPages, function(i, dir) {
+ QUnit.asyncTest( dir, function() {
+ self.dir = dir;
+ self.$frameElem.one( "load", self.onFrameLoad );
+ self.$frameElem.attr( "src", template.replace("{{testdir}}", dir).replace( "{{jquery.version}}", $.fn.jquery ) );
+ });
+ });
+
+ // having defined all suite level tests let QUnit run
+ QUnit.start();
+ }
+ });
+ };
+
+ // prevent qunit from starting the test suite until all tests are defined
+ QUnit.begin = function( ) {
+ this.config.autostart = false;
+ };
+
+ // get the test directories
+ $.get( "ls.php", (new Runner()).exec );
+});
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Select Events Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.forms.select",
+ "jquery.mobile.forms.select.custom"
+ ],
+ [ "jquery.mobile.init" ],
+ [ "select_cached.js" ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Select Event Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+<div id="default" data-nstest-role="page"></div>
+</body>
+</html>
--- /dev/null
+$(document).bind("mobileinit", function() {
+ $.mobile.page.prototype.options.keepNative = "select.should-be-native";
+});
+
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Select Events Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.forms.select",
+ "jquery.mobile.forms.select.custom",
+ "defineKeepNative.js"
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "select_events.js",
+ "select_native.js",
+ "select_core.js"
+ ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Select Event Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="default" data-nstest-role="page" data-nstest-theme="c">
+ <div data-nstest-role="fieldcontain" id="select-choice-few-container">
+ <select name="select-choice-few" id="select-choice-few" data-nstest-native-menu="false">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain" id="native-select-choice-few-container">
+ <label for="native-select-choice-few" class="select">Choose shipping method:</label>
+ <select name="native-select-choice-few" id="native-select-choice-few" data-nstest-native-menu="true">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain" id="select-choice-native-container">
+ <select name="select-choice-native" id="select-choice-native" data-nstest-native-menu="true">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain" id="select-choice-global-native-container">
+ <select name="select-choice-global-native" id="select-choice-global-native" data-nstest-native-menu="false">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain" id="select-choice-focus-test">
+ <select name="select-choice-focus-test" id="select-choice-focus-test" data-nstest-native-menu="false">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain" id="select-choice-many-container-1">
+ <label for="select-choice-many-1" class="select">Your state:</label>
+ <select name="select-choice-many-1" id="select-choice-many-1" data-nstest-native-menu="false">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain" id="select-choice-many-container">
+ <label for="select-choice-many" class="select">Your state:</label>
+ <select name="select-choice-many" id="select-choice-many" data-nstest-native-menu="false">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain" id="select-choice-many-container-hash-check">
+ <label for="select-choice-many-hash-check" class="select">Your state:</label>
+ <select name="select-choice-many-hash-check" id="select-choice-many-hash-check" data-nstest-native-menu="false">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain" id="select-choice-many-container-many-clicks">
+ <label for="select-choice-many-many-clicks" class="select">Your state:</label>
+ <select name="select-choice-many-many-clicks" id="select-choice-many-many-clicks" data-nstest-native-menu="false">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain" id="select-offscreen-container">
+ <style>
+ /* keep the select small and close to the screen border to test rendering */
+ #select-offscreen-container {
+ width: 100px;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ }
+ </style>
+
+ <select name="select-choice-few" id="select-offscreen" data-nstest-native-menu="false">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain" id="select-long-option-label-container">
+ <select name="select-long-option-label" id="select-long-option-label" data-nstest-native-menu="false">
+ <option value="short">Choice 1</option>
+ <option value="long">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</option>
+ </select>
+ </div>
+
+ <select name="native-refresh" id="native-refresh">
+ <option value="-1">default</option>
+ <option value="-1">other</option>
+ </select>
+
+ <select name="custom-refresh" id="custom-refresh" data-nstest-native-menu="false">
+ <option value="-1">default</option>
+ </select>
+
+ <select name="custom-refresh-opts-list" id="custom-refresh-opts-list" data-nstest-native-menu="false">
+ <option value="-1">default</option>
+ </select>
+
+ <select name="non-parent-themed" id="non-parent-themed" data-nstest-native-menu="false" data-nstest-theme="a">
+ <option value="-1">default</option>
+ </select>
+
+ <select name="parent-themed" id="parent-themed" data-nstest-native-menu="false">
+ <option value="-1">default</option>
+ </select>
+
+ <select name="encoded-option" id="encoded-option" data-nstest-native-menu="false">
+ <option><script>window.encodedValueIsDefined = true;</script></option>
+ </select>
+
+ <select name="keep-native" id="keep-native" class="should-be-native">
+ <option></option>
+ </select>
+
+ <div data-nstest-role="fieldcontain" id="optgroup-and-placeholder-container">
+ <select name="optgroup-and-placeholder" id="optgroup-and-placeholder" data-nstest-native-menu="false">
+ <option>Choose shipping method</option>
+ <optgroup label="USPS">
+ <option value="standard" selected>Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </optgroup>
+ <optgroup label="FedEx">
+ <option value="firstOvernight">First Overnight</option>
+ <option value="expressSaver">Express Saver</option>
+ <option value="ground">Ground</option>
+ </optgroup>
+ </select>
+ </div>
+
+ <select name="select-disabled-enhancetest" id="select-disabled-enhancetest" disabled="disabled" data-nstest-native-menu="false">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ <option value="overnight">disabled enhance test</option>
+ </select>
+</div>
+
+
+<div id="enhancetest">
+ <select name="select-enhancetest" id="select-enhancetest">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * mobile select unit tests
+ */
+
+(function($){
+ var resetHash;
+
+ resetHash = function(timeout){
+ $.testHelper.openPage( location.hash.indexOf("#default") >= 0 ? "#" : "#default" );
+ };
+
+ // https://github.com/jquery/jquery-mobile/issues/2181
+ asyncTest( "dialog sized select should alter the value of its parent select", function(){
+ var selectButton, value;
+
+ $.testHelper.pageSequence([
+ resetHash,
+
+ function(){
+ $.mobile.changePage( "cached.html" );
+ },
+
+ function(){
+ ok( $.mobile.activePage.is("#dialog-select-parent-cache-test"), "cached page appears" );
+ selectButton = $( "#cached-page-select" ).siblings( 'a' );
+ selectButton.click();
+ },
+
+ function(){
+ ok( $.mobile.activePage.hasClass('ui-dialog'), "the dialog came up" );
+ var option = $.mobile.activePage.find( "li a" ).not(":contains('" + selectButton.text() + "')").last();
+ value = $.trim(option.text());
+ option.click();
+ },
+
+ function(){
+ same( value, $.trim(selectButton.text()), "the selected value is propogated back to the button text" );
+ start();
+ }
+ ]);
+ });
+
+ // https://github.com/jquery/jquery-mobile/issues/2181
+ asyncTest( "dialog sized select should prevent the removal of its parent page from the dom", function(){
+ var selectButton, parentPageId;
+
+ expect( 2 );
+
+ $.testHelper.pageSequence([
+ resetHash,
+
+ function(){
+ $.mobile.changePage( "cached.html" );
+ },
+
+ function(){
+ selectButton = $.mobile.activePage.find( "#cached-page-select" ).siblings( 'a' );
+ parentPageId = $.mobile.activePage.attr( 'id' );
+ same( $("#" + parentPageId).length, 1, "establish the parent page exists" );
+ selectButton.click();
+ },
+
+ function(){
+ same( $( "#" + parentPageId).length, 1, "make sure parent page is still there after opening the dialog" );
+ $.mobile.activePage.find( "li a" ).last().click();
+ },
+
+ start
+ ]);
+ });
+
+ asyncTest( "dialog sized select shouldn't rebind its parent page remove handler when closing, if the parent page domCache option is true", function(){
+ expect( 3 );
+
+ $.testHelper.pageSequence([
+ resetHash,
+
+ function(){
+ $.mobile.changePage( "cached-dom-cache-true.html" );
+ },
+
+ function(){
+ $.mobile.activePage.find( "#domcache-page-select" ).siblings( 'a' ).click();
+ },
+
+ function(){
+ ok( $.mobile.activePage.hasClass('ui-dialog'), "the dialog came up" );
+ $.mobile.activePage.find( "li a" ).last().click();
+ },
+
+ function(){
+ ok( $.mobile.activePage.is( "#dialog-select-parent-domcache-test" ), "the dialog closed" );
+ $.mobile.changePage( $( "#default" ) );
+ },
+
+ function(){
+ same( $("#dialog-select-parent-domcache-test").length, 1, "make sure the select parent page is still cached in the dom after changing page" );
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "menupage is removed when the parent page is removed", function(){
+ var dialogCount = $(":jqmData(role='dialog')").length;
+ $.testHelper.pageSequence([
+ resetHash,
+
+ function(){
+ $.mobile.changePage( "uncached-dom-cached-false.html" );
+ },
+
+ function(){
+ // for performance reason we don't initially create the menu dialog now
+ same( $(":jqmData(role='dialog')").length, dialogCount);
+
+ // manually trigger dialog opening
+ $( "#domcache-uncached-page-select" ).data( 'selectmenu' ).open();
+ },
+
+ function(){
+ // check if dialog was successfully created
+ same( $(":jqmData(role='dialog')").length, dialogCount + 1 );
+ $( "#domcache-uncached-page-select" ).data( 'selectmenu' ).close();
+ },
+
+ function(){
+ // navigate to parent(initial) page
+ window.history.back();
+ },
+
+ function() {
+ same( $(":jqmData(role='dialog')").length, dialogCount );
+ start();
+ }
+ ]);
+ });
+})(jQuery);
\ No newline at end of file
--- /dev/null
+/*
+ * mobile select unit tests
+ */
+
+(function($){
+ var libName = "jquery.mobile.forms.select",
+ originalDefaultDialogTrans = $.mobile.defaultDialogTransition,
+ originalDefTransitionHandler = $.mobile.defaultTransitionHandler,
+ originalGetEncodedText = $.fn.getEncodedText,
+ resetHash, closeDialog;
+
+ resetHash = function(timeout){
+ $.testHelper.openPage( location.hash.indexOf("#default") >= 0 ? "#" : "#default" );
+ };
+
+ closeDialog = function(timeout){
+ $.mobile.activePage.find("li a").first().click();
+ };
+
+ module(libName, {
+ teardown: function(){
+ $.mobile.defaultDialogTransition = originalDefaultDialogTrans;
+ $.mobile.defaultTransitionHandler = originalDefTransitionHandler;
+
+ $.fn.getEncodedText = originalGetEncodedText;
+ window.encodedValueIsDefined = undefined;
+ }
+ });
+
+ asyncTest( "placeholder correctly gets ui-selectmenu-placeholder class after rebuilding", function(){
+ $.testHelper.sequence([
+ function(){
+ // bring up the optgroup menu
+ ok($("#optgroup-and-placeholder-container a").length > 0, "there is in fact a button in the page");
+ $("#optgroup-and-placeholder-container a").trigger("click");
+ },
+
+ function(){
+ //select the first menu item
+ $("#optgroup-and-placeholder-menu a:first").click();
+ },
+
+ function(){
+ ok($("#optgroup-and-placeholder-menu li:first").hasClass("ui-selectmenu-placeholder"), "the placeholder item has the ui-selectmenu-placeholder class");
+ start();
+ }
+ ], 1000);
+ });
+
+ asyncTest( "firing a click at least 400 ms later on the select screen overlay does close it", function(){
+ $.testHelper.sequence([
+ function(){
+ // bring up the smaller choice menu
+ ok($("#select-choice-few-container a").length > 0, "there is in fact a button in the page");
+ $("#select-choice-few-container a").trigger("click");
+ },
+
+ function(){
+ //select the first menu item
+ $("#select-choice-few-menu a:first").click();
+ },
+
+ function(){
+ same($("#select-choice-few-menu").parent(".ui-selectmenu-hidden").length, 1);
+ start();
+ }
+ ], 1000);
+ });
+
+ asyncTest( "a large select menu should use the default dialog transition", function(){
+ var select;
+
+ $.testHelper.pageSequence([
+ resetHash,
+
+ function(timeout){
+ select = $("#select-choice-many-container-1 a");
+
+ //set to something else
+ $.mobile.defaultTransitionHandler = $.testHelper.decorate({
+ fn: $.mobile.defaultTransitionHandler,
+
+ before: function(name){
+ same(name, $.mobile.defaultDialogTransition);
+ }
+ });
+
+ // bring up the dialog
+ select.trigger("click");
+ },
+
+ closeDialog,
+
+ start
+ ]);
+ });
+
+ asyncTest( "custom select menu always renders screen from the left", function(){
+ var select;
+
+ expect( 1 );
+
+ $.testHelper.sequence([
+ resetHash,
+
+ function(){
+ select = $("ul#select-offscreen-menu");
+ $("#select-offscreen-container a").trigger("click");
+ },
+
+ function(){
+ ok(select.offset().left >= 30, "offset from the left is greater than or equal to 30px" );
+ start();
+ }
+ ], 1000);
+ });
+
+ asyncTest( "selecting an item from a dialog sized custom select menu leaves no dialog hash key", function(){
+ var dialogHashKey = "ui-state=dialog";
+
+ $.testHelper.pageSequence([
+ resetHash,
+
+ function(timeout){
+ $("#select-choice-many-container-hash-check a").click();
+ },
+
+ function(){
+ ok(location.hash.indexOf(dialogHashKey) > -1);
+ closeDialog();
+ },
+
+ function(){
+ same(location.hash.indexOf(dialogHashKey), -1);
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "dialog sized select menu opened many times remains a dialog", function(){
+ var dialogHashKey = "ui-state=dialog",
+
+ openDialogSequence = [
+ resetHash,
+
+ function(){
+ $("#select-choice-many-container-many-clicks a").click();
+ },
+
+ function(){
+ ok(location.hash.indexOf(dialogHashKey) > -1, "hash should have the dialog hash key");
+ closeDialog();
+ }
+ ],
+
+ sequence = openDialogSequence.concat(openDialogSequence).concat([start]);
+
+ $.testHelper.sequence(sequence, 1000);
+ });
+
+ test( "make sure the label for the select gets the ui-select class", function(){
+ ok( $( "#native-select-choice-few-container label" ).hasClass( "ui-select" ), "created label has ui-select class" );
+ });
+
+ module("Non native menus", {
+ setup: function() {
+ $.mobile.selectmenu.prototype.options.nativeMenu = false;
+ },
+ teardown: function() {
+ $.mobile.selectmenu.prototype.options.nativeMenu = true;
+ }
+ });
+
+ asyncTest( "a large select option should not overflow", function(){
+ // https://github.com/jquery/jquery-mobile/issues/1338
+ var menu, select;
+
+ $.testHelper.sequence([
+ resetHash,
+
+ function(){
+ select = $("#select-long-option-label");
+ // bring up the dialog
+ select.trigger("click");
+ },
+
+ function() {
+ menu = $(".ui-selectmenu-list");
+
+ equal(menu.width(), menu.find("li:nth-child(2) .ui-btn-text").width(), "ui-btn-text element should not overflow");
+ start();
+ }
+ ], 500);
+ });
+
+ asyncTest( "using custom refocuses the button after close", function() {
+ var select, button, triggered = false;
+
+ expect( 1 );
+
+ $.testHelper.sequence([
+ resetHash,
+
+ function() {
+ select = $("#select-choice-focus-test");
+ button = select.find( "a" );
+ button.trigger( "click" );
+ },
+
+ function() {
+ // NOTE this is called twice per triggered click
+ button.focus(function() {
+ triggered = true;
+ });
+
+ $(".ui-selectmenu-screen:not(.ui-screen-hidden)").trigger("click");
+ },
+
+ function(){
+ ok(triggered, "focus is triggered");
+ start();
+ }
+ ], 5000);
+ });
+
+ asyncTest( "selected items are highlighted", function(){
+ $.testHelper.sequence([
+ resetHash,
+
+ function(){
+ // bring up the smaller choice menu
+ ok($("#select-choice-few-container a").length > 0, "there is in fact a button in the page");
+ $("#select-choice-few-container a").trigger("click");
+ },
+
+ function(){
+ var firstMenuChoice = $("#select-choice-few-menu li:first");
+ ok( firstMenuChoice.hasClass( $.mobile.activeBtnClass ),
+ "default menu choice has the active button class" );
+
+ $("#select-choice-few-menu a:last").click();
+ },
+
+ function(){
+ // bring up the menu again
+ $("#select-choice-few-container a").trigger("click");
+ },
+
+ function(){
+ var lastMenuChoice = $("#select-choice-few-menu li:last");
+ ok( lastMenuChoice.hasClass( $.mobile.activeBtnClass ),
+ "previously slected item has the active button class" );
+
+ // close the dialog
+ lastMenuChoice.find( "a" ).click();
+ },
+
+ start
+ ], 1000);
+ });
+
+ test( "enabling and disabling", function(){
+ var select = $( "select" ).first(), button;
+
+ button = select.siblings( "a" ).first();
+
+ select.selectmenu( 'disable' );
+ same( select.attr('disabled'), "disabled", "select is disabled" );
+ ok( button.hasClass("ui-disabled"), "disabled class added" );
+ same( button.attr('aria-disabled'), "true", "select is disabled" );
+ same( select.selectmenu( 'option', 'disabled' ), true, "disbaled option set" );
+
+ select.selectmenu( 'enable' );
+ same( select.attr('disabled'), undefined, "select is disabled" );
+ ok( !button.hasClass("ui-disabled"), "disabled class added" );
+ same( button.attr('aria-disabled'), "false", "select is disabled" );
+ same( select.selectmenu( 'option', 'disabled' ), false, "disbaled option set" );
+ });
+
+ asyncTest( "adding options and refreshing a custom select changes the options list", function(){
+ var select = $( "#custom-refresh-opts-list" ),
+ button = select.siblings( "a" ).find( ".ui-btn-inner" ),
+ text = "foo";
+
+ $.testHelper.sequence([
+ // bring up the dialog
+ function() {
+ button.click();
+ },
+
+ function() {
+ same( $( ".ui-selectmenu.in ul" ).text(), "default" );
+ $( ".ui-selectmenu-screen" ).click();
+ },
+
+ function() {
+ select.find( "option" ).remove(); //remove the loading message
+ select.append('<option value="1">' + text + '</option>');
+ select.selectmenu( 'refresh' );
+ },
+
+ function() {
+ button.click();
+ },
+
+ function() {
+ same( $( ".ui-selectmenu.in ul" ).text(), text );
+ $( ".ui-selectmenu-screen" ).click();
+ },
+
+ start
+ ], 500);
+ });
+
+ test( "theme defined on select is used", function(){
+ var select = $("select#non-parent-themed");
+
+ ok( select.siblings( "a" ).hasClass("ui-btn-up-" + select.jqmData('theme')));
+ });
+
+ test( "select without theme defined inherits theme from parent", function() {
+ var select = $("select#parent-themed");
+
+ ok( select
+ .siblings( "a" )
+ .hasClass("ui-btn-up-" + select.parents(":jqmData(role='page')").jqmData('theme')));
+ });
+
+ // issue #2547
+ test( "custom select list item links have encoded option text values", function() {
+ $( "#encoded-option" ).data( 'selectmenu' )._buildList();
+ same(window.encodedValueIsDefined, undefined);
+ });
+
+ // not testing the positive case here since's it's obviously tested elsewhere
+ test( "select elements in the keepNative set shouldn't be enhanced", function() {
+ ok( !$("#keep-native").parent().is("div.ui-btn") );
+ });
+
+ asyncTest( "dialog size select title should match the label", function() {
+ var $select = $( "#select-choice-many-1" ),
+ $label = $select.parent().siblings( "label" ),
+ $button = $select.siblings( "a" );
+
+ $.testHelper.pageSequence([
+ function() {
+ $button.click();
+ },
+
+ function() {
+ same($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
+ window.history.back();
+ },
+
+ start
+ ]);
+ });
+
+ asyncTest( "dialog size select title should match the label when changed after the dialog markup is added to the DOM", function() {
+ var $select = $( "#select-choice-many-1" ),
+ $label = $select.parent().siblings( "label" ),
+ $button = $select.siblings( "a" );
+
+ $label.text( "foo" );
+
+ $.testHelper.pageSequence([
+ function() {
+ $label.text( "foo" );
+ $button.click();
+ },
+
+ function() {
+ same($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
+ window.history.back();
+ },
+
+ start
+ ]);
+ });
+
+ test( "a disabled custom select should still be enhanced as custom", function() {
+ $("#select-disabled-enhancetest").selectmenu("enable").siblings("a").click();
+
+ var menu = $(".ui-selectmenu").not( ".ui-selectmenu-hidden" );
+ ok( menu.text().indexOf("disabled enhance test") > -1, "the right select is showing" );
+ });
+})(jQuery);
--- /dev/null
+/*
+ * mobile select unit tests
+ */
+
+(function($){
+ var libName = "jquery.mobile.forms.select";
+
+ $(document).bind('mobileinit', function(){
+ $.mobile.selectmenu.prototype.options.nativeMenu = false;
+ });
+
+ module(libName,{
+ setup: function(){
+ $.testHelper.openPage( location.hash.indexOf("#default") >= 0 ? "#" : "#default" );
+ }
+ });
+
+ test( "selects marked with data-native-menu=true should use a div as their button", function(){
+ same($("#select-choice-native-container div.ui-btn").length, 1);
+ });
+
+ test( "selects marked with data-native-menu=true should not have a custom menu", function(){
+ same($("#select-choice-native-container ul").length, 0);
+ });
+
+ test( "selects marked with data-native-menu=true should sit inside the button", function(){
+ same($("#select-choice-native-container div.ui-btn select").length, 1);
+ });
+
+ test( "select controls will create when inside a container that receives a 'create' event", function(){
+ ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-select").length, "did not have enhancements applied" );
+ ok( $("#enhancetest").trigger("create").find(".ui-select").length, "enhancements applied" );
+ });
+})(jQuery);
--- /dev/null
+/*
+ * mobile select unit tests
+ */
+
+(function($){
+ module("jquery.mobile.forms.select native");
+
+ test( "native menu selections alter the button text", function(){
+ var select = $( "#native-select-choice-few" ), setAndCheck;
+
+ setAndCheck = function(key){
+ var text;
+
+ select.val( key ).selectmenu( 'refresh' );
+ text = select.find( "option[value='" + key + "']" ).text();
+ same( select.parent().find(".ui-btn-text").text(), text );
+ };
+
+ setAndCheck( 'rush' );
+ setAndCheck( 'standard' );
+ });
+
+ asyncTest( "selecting a value removes the related buttons down state", function(){
+ var select = $( "#native-select-choice-few" );
+
+ $.testHelper.sequence([
+ function() {
+ // click the native menu parent button
+ select.parent().trigger( 'vmousedown' );
+ },
+
+ function() {
+ ok( select.parent().hasClass("ui-btn-down-c"), "button down class added" );
+ },
+
+ function() {
+ // trigger a change on the select
+ select.trigger( "change" );
+ },
+
+ function() {
+ ok( !select.parent().hasClass("ui-btn-down-c"), "button down class removed" );
+ start();
+ }
+ ], 300);
+ });
+
+ // issue https://github.com/jquery/jquery-mobile/issues/2410
+ test( "adding options and refreshing a custom select defaults the text", function() {
+ var select = $( "#custom-refresh" ),
+ button = select.siblings( "a" ).find( ".ui-btn-inner" ),
+ text = "foo";
+
+ same($.trim(button.text()), "default");
+ select.find( "option" ).remove(); //remove the loading message
+ select.append('<option value="1">' + text + '</option>');
+ select.selectmenu( 'refresh' );
+ same($.trim(button.text()), text);
+ });
+
+ // issue 2424
+ test( "native selects should provide open and close as a no-op", function() {
+ // exception will prevent test success if undef
+ $( "#native-refresh" ).selectmenu( 'open' );
+ $( "#native-refresh" ).selectmenu( 'close' );
+ ok( true );
+ });
+
+ asyncTest( "The preventFocusZoom option is working as expected", function() {
+
+ var zoomoptiondefault = $.mobile.selectmenu.prototype.options.preventFocusZoom;
+ $.mobile.selectmenu.prototype.options.preventFocusZoom = true;
+
+ $(document)
+ .one("vmousedown.test", function(){
+ ok( $.mobile.zoom.enabled === false, "zoom is disabled on vmousedown" );
+ })
+ .one("mouseup.test", function(){
+ ok( $.mobile.zoom.enabled === true, "zoom is enabled on mouseup" );
+ $.mobile.selectmenu.prototype.options.preventFocusZoom = zoomoptiondefault;
+ $(document).unbind(".test");
+ $( "#select-choice-native" ).selectmenu( "option", "preventFocusZoom", zoomoptiondefault )
+ start();
+ });
+
+ $( "#select-choice-native" )
+ .selectmenu( "option", "preventFocusZoom", true )
+ .parent()
+ .trigger( "vmousedown" )
+ .trigger( "mouseup" );
+
+
+
+
+ });
+
+ asyncTest( "The preventFocusZoom option does not manipulate zoom when it is false", function() {
+
+ var zoomstate = $.mobile.zoom.enabled,
+ zoomoptiondefault = $.mobile.selectmenu.prototype.options.preventFocusZoom;
+
+
+ $(document)
+ .one("vmousedown.test", function(){
+ ok( $.mobile.zoom.enabled === zoomstate, "zoom is unaffected on vmousedown" );
+ })
+ .one("mouseup.test", function(){
+ ok( $.mobile.zoom.enabled === zoomstate, "zoom is unaffected on mouseup" );
+ $(document).unbind(".test");
+ $( "#select-choice-native" ).selectmenu( "option", "preventFocusZoom", zoomoptiondefault );
+ start();
+
+ });
+
+ $( "#select-choice-native" )
+ .selectmenu( "option", "preventFocusZoom", false )
+ .parent()
+ .trigger( "vmousedown" )
+ .trigger( "mouseup" );
+
+ });
+})(jQuery);
\ No newline at end of file
--- /dev/null
+ <!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Slider Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.forms.slider"
+ ],
+ [
+ "slider_events.js",
+ "slider_core.js"
+ ],
+ [ "jquery.mobile.init" ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Slider Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="foo" data-nstest-role="page">
+ <div data-nstest-role="fieldcontain">
+ <input type="range" name="slider-1" id="range-slider-up" value="0" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <input type="range" name="slider-1" id="range-slider-down" value="10" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <input type="range" name="background-slider" id="background-slider" value="10" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" data-nstest-highlight="true"/>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <input type="range" name="no-background-slider" id="no-background-slider" value="10" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a"/>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <input type="range" name="slider-1" id="range-slider-home" value="75" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <label for="slider-1">Input slider:</label>
+ <input type="range" name="slider-1" id="range-slider-end" value="15" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <input type="range" name="stepped" id="stepped" value="15" min="0" max="100" step="10" data-nstest-theme="b" data-nstest-track-theme="a" />
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <select name="slider" id="slider-switch" data-nstest-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-nstest-role="fieldcontain">
+ <input type="range" name="onchange" id="onchange" value="25" min="0" max="100" step="10" onchange="onChangeCounter()" data-nstest-theme="b" data-nstest-track-theme="a" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Input slider:</label>
+ <input type="range" name="slider" id="slider" value="25" min="0" max="100" class="should-be-native"/>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="step-slider">Input slider:</label>
+ <input type="range" name="step-slider" id="step-slider" value="25" min="0" max="100" step="20"/>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="empty-string-val-slider">Input slider:</label>
+ <input type="range" name="empty-string-val-slider" id="empty-string-val-slider" value="25" min="10" max="100" step="20"/>
+ </div>
+</div>
+
+<div id="enhancetest">
+ <input type="range" name="slider-enhancetest" id="range-slider-enhancetest" value="75" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
+</div>
+</html>
--- /dev/null
+/*
+ * mobile slider unit tests
+ */
+(function($){
+ $.mobile.page.prototype.options.keepNative = "input.should-be-native";
+
+ // not testing the positive case here since's it's obviously tested elsewhere
+ test( "slider elements in the keepNative set shouldn't be enhanced", function() {
+ same( $("input.should-be-native").siblings("div.ui-slider").length, 0 );
+ });
+
+ test( "refresh should force val to nearest step", function() {
+ var slider = $( "#step-slider" ),
+ step = parseInt(slider.attr( "step" ), 10);
+
+ slider.val( step + 1 );
+
+ slider.slider( 'refresh' );
+
+ ok( step > 1, "the step is greater than one" );
+ ok( slider.val() > 0, "the value has been altered" );
+ same( slider.val() % step, 0, "value has 'snapped' to a step" );
+ });
+
+ test( "empty string value results defaults to slider min value", function() {
+ var slider = $( "#empty-string-val-slider" );
+ same( slider.attr('min'), "10", "slider min is greater than 0" );
+ same( slider.val( '' ).slider( 'refresh' ).val(), slider.attr('min'), "val is equal to min attr");
+ });
+
+ test( "flip toggle switch title should be current selected value attr", function() {
+ var slider = $( "#slider-switch" );
+
+ same(slider.siblings(".ui-slider").find("a").attr('title'),
+ $(slider.find("option")[slider[0].selectedIndex]).text(),
+ "verify that the link title is set to the selected option text");
+ });
+
+ test( "data-highlight works properly", function() {
+ var $highlighted = $("#background-slider"), $unhighlighted = $("#no-background-slider");
+
+ same( $highlighted.siblings( ".ui-slider" ).find( ".ui-slider-bg" ).length, 1,
+ "highlighted slider should have a div for the track bg" );
+ same( $unhighlighted.siblings( ".ui-slider" ).find( ".ui-slider-bg" ).length, 0,
+ "unhighlighted slider _not_ should have a div for the track bg" );
+ });
+})( jQuery );
\ No newline at end of file
--- /dev/null
+/*
+ * mobile slider unit tests
+ */
+
+(function($){
+ var onChangeCnt = 0;
+ window.onChangeCounter = function() {
+ onChangeCnt++;
+ };
+
+ module('jquery.mobile.slider.js', {
+ setup: function() {
+ // force the value to be an increment of 10 when we aren't testing the rounding
+ $("#stepped").val( 20 );
+ }
+ });
+
+ var keypressTest = function(opts){
+ var slider = $(opts.selector),
+ val = window.parseFloat(slider.val()),
+ handle = slider.siblings('.ui-slider').find('.ui-slider-handle');
+
+ expect( opts.keyCodes.length );
+
+ $.each(opts.keyCodes, function(i, elem){
+
+ // stub the keycode value and trigger the keypress
+ $.Event.prototype.keyCode = $.mobile.keyCode[elem];
+ handle.trigger('keydown');
+
+ val += opts.increment;
+ same(val, window.parseFloat(slider.val(), 10), "new value is " + opts.increment + " different");
+ });
+ };
+
+ test( "slider should move right with up, right, and page up keypress", function(){
+ keypressTest({
+ selector: '#range-slider-up',
+ keyCodes: ['UP', 'RIGHT', 'PAGE_UP'],
+ increment: 1
+ });
+ });
+
+ test( "slider should move left with down, left, and page down keypress", function(){
+ keypressTest({
+ selector: '#range-slider-down',
+ keyCodes: ['DOWN', 'LEFT', 'PAGE_DOWN'],
+ increment: -1
+ });
+ });
+
+ test( "slider should move to range minimum on end keypress", function(){
+ var selector = "#range-slider-end",
+ initialVal = window.parseFloat($(selector).val(), 10),
+ max = window.parseFloat($(selector).attr('max'), 10);
+
+ keypressTest({
+ selector: selector,
+ keyCodes: ['END'],
+ increment: max - initialVal
+ });
+ });
+
+ test( "slider should move to range minimum on end keypress", function(){
+ var selector = "#range-slider-home",
+ initialVal = window.parseFloat($(selector).val(), 10);
+
+ keypressTest({
+ selector: selector,
+ keyCodes: ['HOME'],
+ increment: 0 - initialVal
+ });
+ });
+
+ test( "slider should move positive by steps on keypress", function(){
+ keypressTest({
+ selector: "#stepped",
+ keyCodes: ['RIGHT'],
+ increment: 10
+ });
+ });
+
+ test( "slider should move negative by steps on keypress", function(){
+ keypressTest({
+ selector: "#stepped",
+ keyCodes: ['LEFT'],
+ increment: -10
+ });
+ });
+
+ test( "slider should validate input value on blur", function(){
+ var slider = $("#range-slider-up");
+ slider.focus();
+ slider.val(200);
+ same(slider.val(), "200");
+ slider.blur();
+ same(slider.val(), slider.attr('max'));
+ });
+
+ test( "slider should not validate input on keyup", function(){
+ var slider = $("#range-slider-up");
+ slider.focus();
+ slider.val(200);
+ same(slider.val(), "200");
+ slider.keyup();
+ same(slider.val(), "200");
+ });
+
+ test( "input type should degrade to number when slider is created", function(){
+ same($("#range-slider-up").attr( "type" ), "number");
+ });
+
+ // generic switch test function
+ var sliderSwitchTest = function(opts){
+ var slider = $("#slider-switch"),
+ handle = slider.siblings('.ui-slider').find('a'),
+ switchValues = {
+ 'off' : 0,
+ 'on' : 1
+ };
+
+ // One for the select and one for the aria-valuenow
+ expect( opts.keyCodes.length * 2 );
+
+ $.each(opts.keyCodes, function(i, elem){
+ // reset the values
+ slider[0].selectedIndex = switchValues[opts.start];
+ handle.attr({'aria-valuenow' : opts.start });
+
+ // stub the keycode and trigger the event
+ $.Event.prototype.keyCode = $.mobile.keyCode[elem];
+ handle.trigger('keydown');
+
+ same(handle.attr('aria-valuenow'), opts.finish, "handle value is " + opts.finish);
+ same(slider[0].selectedIndex, switchValues[opts.finish], "select input has correct index");
+ });
+ };
+
+ test( "switch should select on with up, right, page up and end", function(){
+ sliderSwitchTest({
+ start: 'off',
+ finish: 'on',
+ keyCodes: ['UP', 'RIGHT', 'PAGE_UP', 'END']
+ });
+ });
+
+ test( "switch should select off with down, left, page down and home", function(){
+ sliderSwitchTest({
+ start: 'on',
+ finish: 'off',
+ keyCodes: ['DOWN', 'LEFT', 'PAGE_DOWN', 'HOME']
+ });
+ });
+
+ test( "onchange should not be called on create", function(){
+ equals(onChangeCnt, 0, "onChange should not have been called");
+ });
+
+ test( "onchange should be called onchange", function(){
+ onChangeCnt = 0;
+ $( "#onchange" ).slider( "refresh", 50 );
+ equals(onChangeCnt, 1, "onChange should have been called once");
+ });
+
+ test( "slider controls will create when inside a container that receives a 'create' event", function(){
+ ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-slider").length, "did not have enhancements applied" );
+ ok( $("#enhancetest").trigger("create").find(".ui-slider").length, "enhancements applied" );
+ });
+
+ var createEvent = function( name, target, x, y ) {
+ var event = $.Event( name );
+ event.target = target;
+ event.pageX = x;
+ event.pageY = y;
+ return event;
+ };
+
+ test( "toggle switch should fire one change event when clicked", function(){
+ var control = $( "#slider-switch" ),
+ widget = control.data( "slider" ),
+ slider = widget.slider,
+ handle = widget.handle,
+ changeCount = 0,
+ changeFunc = function( e ) {
+ ok( control[0].selectedIndex !== currentValue, "change event should only be triggered if the value changes");
+ ++changeCount;
+ },
+ event = null,
+ offset = handle.offset(),
+ currentValue = control[0].selectedIndex;
+
+ control.bind( "change", changeFunc );
+
+ // The toggle switch actually updates on mousedown and mouseup events, so we go through
+ // the motions of generating all the events that happen during a click to make sure that
+ // during all of those events, the value only changes once.
+
+ slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
+ slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
+ slider.trigger( createEvent( "click", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
+
+ control.unbind( "change", changeFunc );
+
+ ok( control[0].selectedIndex !== currentValue, "value did change");
+ same( changeCount, 1, "change event should be fired once during a click" );
+ });
+
+ var assertLeftCSS = function( obj, opts ) {
+ var integerLeft, compare, css, threshold;
+
+ css = obj.css('left');
+ threshold = opts.pxThreshold || 0;
+
+ if( css.indexOf( "px" ) > -1 ) {
+ // parse the actual pixel value returned by the left css value
+ // and the pixels passed in for comparison
+ integerLeft = Math.round( parseFloat( css.replace("px", "") ) ),
+ compare = parseInt( opts.pixels.replace( "px", "" ), 10 );
+
+ // check that the pixel value provided is within a given threshold; default is 0px
+ ok( compare >= integerLeft - threshold && compare <= integerLeft + threshold, opts.message );
+ } else {
+ equal( css, opts.percent, opts.message );
+ }
+ };
+
+ asyncTest( "toggle switch handle should snap in the old position if dragged less than half of the slider width, in the new position if dragged more than half of the slider width", function() {
+ var control = $( "#slider-switch" ),
+ widget = control.data( "slider" ),
+ slider = widget.slider,
+ handle = widget.handle,
+ width = handle.width(),
+ offset = null;
+
+ $.testHelper.sequence([
+ function() {
+ // initialize the switch
+ control.val('on').slider('refresh');
+ },
+
+ function() {
+ assertLeftCSS(handle, {
+ percent: '100%',
+ pixels: handle.parent().css('width'),
+ message: 'handle starts on the right side'
+ });
+
+ // simulate dragging less than a half
+ offset = handle.offset();
+ slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + width - 10, offset.top + 10 ) );
+ slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left + width - 20, offset.top + 10 ) );
+ slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left + width - 20, offset.top + 10 ) );
+ },
+
+ function() {
+ assertLeftCSS(handle, {
+ percent: '100%',
+ pixels: handle.parent().css('width'),
+ message: 'handle ends on the right side'
+ });
+
+ // initialize the switch
+ control.val('on').slider('refresh');
+ },
+
+ function() {
+ assertLeftCSS(handle, {
+ percent: '100%',
+ pixels: handle.parent().css('width'),
+ message: 'handle starts on the right side'
+ });
+
+ // simulate dragging more than a half
+ offset = handle.offset();
+ slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
+ slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - ( width / 2 + 10 ), offset.top + 10 ) );
+ slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left - ( width / 2 + 10 ), offset.top + 10 ) );
+ },
+
+ function() {
+ assertLeftCSS(handle, {
+ percent: '0%',
+ pixels: '0px',
+ message: 'handle ends on the left side'
+ });
+
+ start();
+ }
+ ], 500);
+ });
+
+ asyncTest( "toggle switch handle should not move if user is dragging and value is changed", function() {
+ var control = $( "#slider-switch" ),
+ widget = control.data( "slider" ),
+ slider = widget.slider,
+ handle = widget.handle,
+ width = handle.width(),
+ offset = null;
+
+ $.testHelper.sequence([
+ function() {
+ // initialize the switch
+ control.val('on').slider('refresh');
+ },
+
+ function() {
+ assertLeftCSS(handle, {
+ percent: '100%',
+ pixels: handle.parent().css('width'),
+ message: 'handle starts on the right side'
+ });
+
+ // simulate dragging more than a half
+ offset = handle.offset();
+ slider.trigger( createEvent( "mousedown", handle[ 0 ], offset.left + 10, offset.top + 10 ) );
+ slider.trigger( createEvent( "mousemove", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) );
+ },
+
+ function() {
+ var min, max;
+ if( handle.css('left').indexOf("%") > -1 ){
+ min = "0%";
+ max = "100%";
+ } else {
+ min = "0px";
+ max = handle.parent().css( 'width' );
+ }
+
+ notEqual(handle.css('left'), min, 'handle is not on the left side');
+ notEqual(handle.css('left'), max, 'handle is not on the right side');
+
+ // reset slider state so it is ready for other tests
+ slider.trigger( createEvent( "mouseup", handle[ 0 ], offset.left - ( width / 2 ), offset.top + 10 ) );
+
+ start();
+ }
+ ], 500);
+ });
+
+ asyncTest( "toggle switch should refresh when disabled", function() {
+ var control = $( "#slider-switch" ),
+ handle = control.data( "slider" ).handle;
+
+ $.testHelper.sequence([
+ function() {
+ // set the initial value
+ control.val('off').slider('refresh');
+ },
+
+ function() {
+ assertLeftCSS(handle, {
+ percent: '0%',
+ pixels: '0px',
+ message: 'handle starts on the left side'
+ });
+
+ // disable and change value
+ control.slider('disable');
+ control.val('on').slider('refresh');
+ },
+
+ function() {
+ assertLeftCSS(handle, {
+ percent: '100%',
+ pixels: handle.parent().css( 'width' ),
+ message: 'handle ends on the right side'
+ });
+
+ // reset slider state so it is ready for other tests
+ control.slider('enable');
+
+ start();
+ }
+ ], 500);
+ });
+})(jQuery);
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Support Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.support"
+ ],
+ [
+ "support_core.js"
+ ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Support Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="qunit-fixture"></div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * mobile support unit tests
+ */
+
+$.testHelper.excludeFileProtocol(function(){
+ var prependToFn = $.fn.prependTo,
+ moduleName = "jquery.mobile.support";
+
+ module(moduleName, {
+ teardown: function(){
+ //NOTE undo any mocking
+ $.fn.prependTo = prependToFn;
+ }
+ });
+
+ // NOTE following two tests have debatable value as they only
+ // prevent property name changes and improper attribute checks
+ asyncTest( "detects functionality from basic affirmative properties and attributes", function(){
+ // TODO expose properties for less brittle tests
+ $.extend(window, {
+ WebKitTransitionEvent: true,
+ orientation: true,
+ onorientationchange: true
+ });
+
+ document.ontouchend = true;
+
+ window.history.pushState = function(){};
+ window.history.replaceState = function(){};
+
+ $.mobile.media = function(){ return true; };
+
+ $.testHelper.reloadModule( moduleName ).done( function() {
+ ok($.support.orientation);
+ ok($.support.touch);
+ ok($.support.cssTransitions);
+ ok($.support.pushState);
+ ok($.support.mediaquery);
+ start();
+ });
+ });
+
+ asyncTest( "detects functionality from basic negative properties and attributes (where possible)", function(){
+ delete window["orientation"];
+ delete document["ontouchend"];
+
+ $.testHelper.reloadModule( moduleName ).done( function() {
+ ok(!$.support.orientation);
+ ok(!$.support.touch);
+ start();
+ });
+ });
+
+ // NOTE mocks prependTo to simulate base href updates or lack thereof
+ var mockBaseCheck = function( url ){
+ var prependToFn = $.fn.prependTo;
+
+ $.fn.prependTo = function( selector ){
+ var result = prependToFn.call(this, selector);
+ if(this[0].href && this[0].href.indexOf("testurl") != -1)
+ result = [{href: url}];
+ return result;
+ };
+ };
+
+ asyncTest( "detects dynamic base tag when new base element added and base href updates", function(){
+ mockBaseCheck(location.protocol + '//' + location.host + location.pathname + "ui-dir/");
+ $.testHelper.reloadModule( moduleName ).done( function() {
+ ok($.support.dynamicBaseTag);
+ start();
+ });
+ });
+
+ asyncTest( "detects no dynamic base tag when new base element added and base href unchanged", function(){
+ mockBaseCheck('testurl');
+ $.testHelper.reloadModule( moduleName ).done( function() {
+ ok(!$.support.dynamicBaseTag);
+ start();
+ });
+ });
+
+ asyncTest( "jQM's IE browser check properly detects IE versions", function(){
+ $.testHelper.reloadModule( moduleName ).done( function() {
+ //here we're just comparing our version to what the conditional compilation finds
+ var ie = !!$.browser.msie, //get a boolean
+ version = parseInt( $.browser.version, 10),
+ jqmdetectedver = $.mobile.browser.ie;
+
+ if( ie ){
+ same(version, jqmdetectedver, "It's IE and the version is correct");
+ }
+ else{
+ same(ie, jqmdetectedver, "It's not IE");
+ }
+ start();
+ });
+ });
+
+
+ //TODO propExists testing, refactor propExists into mockable method
+ //TODO scrollTop testing, refactor scrollTop logic into mockable method
+});
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Textinput Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [ "jquery.mobile.forms.textinput" ],
+ [ "settings.js" ],
+ [ "jquery.mobile.init" ],
+ [ "textinput_core.js" ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Textinput Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page">
+ <input name="" id="typeless-input" />
+ <textarea class="should-be-native"></textarea>
+
+ <textarea id="reference-autogrow">
+ </textarea>
+
+ <textarea id="init-autogrow">
+ Place holder text
+ Place holder text
+ Place holder text
+ Place holder text
+ Place holder text
+ Place holder text
+ Place holder text
+ Place holder text
+ Place holder text
+ </textarea>
+
+ <textarea id="keyup-autogrow">
+ </textarea>
+ <a href="external.html" id="external">external</a>
+
+ <input type="search" id="search-input">
+</div>
+</body>
+</html>
--- /dev/null
+$( document ).bind("mobileinit", function(){
+ $.mobile.textinput.prototype.options.clearSearchButtonText = "custom value";
+});
--- /dev/null
+/*
+ * mobile textinput unit tests
+ */
+(function($){
+ module( "jquery.mobile.forms.textinput.js" );
+
+ test( "inputs without type specified are enhanced", function(){
+ ok( $( "#typeless-input" ).hasClass( "ui-input-text" ) );
+ });
+
+ $.mobile.page.prototype.options.keepNative = "textarea.should-be-native";
+
+ // not testing the positive case here since's it's obviously tested elsewhere
+ test( "textarea in the keepNative set shouldn't be enhanced", function() {
+ ok( !$("textarea.should-be-native").is("ui-input-text") );
+ });
+
+ asyncTest( "textarea should autogrow on document ready", function() {
+ var test = $( "#init-autogrow" );
+
+ setTimeout(function() {
+ ok( $( "#reference-autogrow" )[0].clientHeight < test[0].clientHeight, "the height is greater than the reference text area with no content" );
+ ok( test[0].clientHeight > 100, "autogrow text area's height is greater than any style padding");
+ start();
+ }, 400);
+ });
+
+ asyncTest( "textarea should autogrow when text is added via the keyboard", function() {
+ var test = $( "#keyup-autogrow" ),
+ originalHeight = test[0].clientHeight;
+
+ test.keyup(function() {
+ setTimeout(function() {
+ ok( test[0].clientHeight > originalHeight, "the height is greater than original with no content" );
+ ok( test[0].clientHeight > 100, "autogrow text area's height is greater any style/padding");
+ start();
+ }, 400);
+ });
+
+ test.val("foo\n\n\n\n\n\n\n\n\n\n\n\n\n\n").trigger("keyup");
+ });
+
+ asyncTest( "text area should auto grow when the parent page is loaded via ajax", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $("#external").click();
+ },
+
+ function() {
+ setTimeout(function() {
+ ok($.mobile.activePage.find( "textarea" )[0].clientHeight > 100, "text area's height has grown");
+ window.history.back();
+ }, 1000);
+ },
+
+ function() {
+ start();
+ }
+ ]);
+ });
+
+ // NOTE init binding to alter the setting is in settings.js
+ test( "'clear text' button for search inputs should use configured text", function(){
+ strictEqual( $( "#search-input" ).closest( ".ui-input-search" ).find( ".ui-input-clear" ).attr( "title" ), "custom value" );
+ });
+})(jQuery);
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Widget Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [ "widget_init.js" ],
+ [
+ "jquery.mobile.forms.slider",
+ "jquery.mobile.collapsible",
+ "jquery.mobile.widget"
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "widget_core.js"
+ ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Widget Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="qunit-fixture">
+
+<div id="widget-wrapper">
+ <div id="widget">
+ <div>...</div>
+ </div>
+</div>
+
+</div>
+
+<div id="foo" data-nstest-role="page">
+ <input type="range" id="foo-slider" name="foo-slider" value="" />
+ <div id="enhance-prevented">
+ </div>
+ <div id="enhance-allowed">
+ </div>
+</div>
+
+<div id="ignored" data-nstest-enhance="false" style="display: none">
+ <div id="ignored-collapsible" data-nstest-role="collapsible">
+ </div>
+</div>
+
+<div id="many-ignored" style="display: none">
+ <div>
+ <div id="many-enhanced-collapsible" data-nstest-role="collapsible">
+ </div>
+ </div>
+ <div data-nstest-enhance="false">
+ <div id="many-ignored-collapsible" data-nstest-role="collapsible">
+ </div>
+ </div>
+</div>
+
+<div id="not-ignored" style="display: none">
+ <div id="collapsible" data-nstest-role="collapsible">
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * mobile widget unit tests
+ */
+(function($){
+ module('jquery.mobile.widget.js');
+
+ test( "getting data from creation options", function(){
+ var expected = "bizzle";
+
+ $.mobile.widget.prototype.options = { "fooBar" : true };
+ $.mobile.widget.prototype.element = $("<div data-"+$.mobile.ns+"foo-bar=" + expected + ">");
+ same($.mobile.widget.prototype._getCreateOptions()["fooBar"],
+ expected);
+ });
+
+ test( "getting no data when the options are empty", function(){
+ var expected = {};
+
+ $.mobile.widget.prototype.options = {};
+ $.mobile.widget.prototype.element = $("<div data-"+$.mobile.ns+"foo-bar=" + expected + ">");
+ same($.mobile.widget.prototype._getCreateOptions(),
+ expected);
+ });
+
+ test( "getting no data when the element has none", function(){
+ var expected = {};
+
+ $.mobile.widget.prototype.options = { "fooBar" : true };
+ $.mobile.widget.prototype.element = $("<div>");
+ same($.mobile.widget.prototype._getCreateOptions(),
+ expected);
+ });
+
+ test( "elements embedded in sub page elements are excluded on create when they match the keep native selector", function() {
+ // uses default keep native of data-role=none
+ $("#enhance-prevented")
+ .append('<label for="unenhanced">Text Input:</label><input type="text" name="name" id="unenhanced" value="" data-'+$.mobile.ns+'role="none" />')
+ .trigger("create");
+
+ ok( !$("#unenhanced").hasClass( "ui-input-text" ), "doesn't have the ui input text class (unenhanced)");
+ });
+
+ test( "elements embedded in sub page elements are included on create when they don't match the keep native selector", function() {
+
+ // uses default keep native of data-role=none
+ $("#enhance-allowed")
+ .append('<label for="enhanced">Text Input:</label><input type="text" name="name" id="enhanced" value=""/>')
+ .trigger("create");
+
+ ok( $("#enhanced").hasClass( "ui-input-text" ), "has the ui input text class (unenhanced)");
+ });
+})(jQuery);
\ No newline at end of file
--- /dev/null
+/*
+ * mobile widget unit tests
+ */
+(function($){
+ var widgetInitialized = false;
+
+ module( 'jquery.mobile.widget.js' );
+
+ $( "#foo" ).live( 'pageinit', function(){
+ // ordering sensitive here, the value has to be set after the call
+ // so that if the widget factory says that its not yet initialized,
+ // which is an exception, the value won't be set
+ $( "#foo-slider" ).slider( 'refresh' );
+ widgetInitialized = true;
+ });
+
+ test( "page is enhanced before init is fired", function() {
+ ok( widgetInitialized );
+ });
+
+ test( "elements within an ignore container are not enhanced when ignoreContentEnabled is true ", function() {
+ $.mobile.ignoreContentEnabled = true;
+
+ $.mobile.collapsible.prototype.enhanceWithin( $("#ignored") );
+
+ ok( !$( "#ignored-collapsible" ).hasClass( "ui-collapsible" ), "ignored element doesn't have ui-collapsible" );
+
+ $.mobile.collapsible.prototype.enhanceWithin( $("#not-ignored") );
+
+ ok( $( "#collapsible" ).hasClass( "ui-collapsible" ), "identical unignored elements are enahanced" );
+
+ $.mobile.ignoreContentEnabled = false;
+ });
+
+ test( "siblings without ignore parent are enhanced", function() {
+ $.mobile.ignoreContentEnabled = true;
+
+ $.mobile.collapsible.prototype.enhanceWithin( $("#many-ignored") );
+
+ ok( !$( "#many-ignored-collapsible" ).hasClass( "ui-collapsible" ), "sibling ignored element doesn't have ui-collapsible" );
+ ok( $( "#many-enhanced-collapsible" ).hasClass( "ui-collapsible" ), "sibling unignored elements are enahanced" );
+
+ $.mobile.ignoreContentEnabled = false;
+ });
+})( jQuery );
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Mobile Zoom Maniplation Integration Test</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.zoom"
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "./zoom.js"
+ ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile FieldContainer Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page">
+
+
+</div>
+
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Mobile Zoom Maniplation Integration Test</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/jquery.js"></script>
+ <script src="../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+ <script src="../../../external/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [
+ "jquery.mobile.zoom"
+ ],
+ [ "jquery.mobile.init" ],
+ [
+ "./zoom-initial-disable.js"
+ ]
+ ]);
+ </script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit.css"/>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile FieldContainer Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page">
+
+
+</div>
+
+
+
+</body>
+</html>
--- /dev/null
+/*
+ * mobile zoom
+ */
+(function($){
+ test( "User zooming will not enable when calling enable() method if zooming was disabled in page source", function(){
+ $.mobile.zoom.enable();
+ ok( !$.mobile.zoom.enabled );
+ });
+})(jQuery);
\ No newline at end of file
--- /dev/null
+/*
+ * mobile Fixed Toolbar unit tests
+ */
+(function($){
+ module('jquery.mobile.fixedToolbar.js');
+
+ var defaultMeta = $( "meta[name=viewport]" ).attr("content");
+
+
+ test( "User zooming is enabled by default", function(){
+ ok( $.mobile.zoom.enabled === true, "property is true" );
+ });
+
+ test( "The zoom lock is disabled by default", function(){
+ ok( $.mobile.zoom.locked === false, "property is false" );
+ });
+
+
+ test( "Meta viewport content is manipulated with maximum-scale", function(){
+ $.mobile.zoom.disable();
+ ok( $( "meta[name=viewport]" ).attr( "content" ).match( /,maximum-scale=1, user-scalable=no/ ), "The meta viewport tag's content contains maximum-scale=1, user-scalable=yes after enable is called" );
+
+ $.mobile.zoom.enable();
+ ok( $( "meta[name=viewport]" ).attr( "content" ).match( /,maximum-scale=10, user-scalable=yes/ ), "The meta viewport tag's content contains maximum-scale=1, user-scalable=yes0, user-scalable=no after enable is called" );
+
+ });
+
+ test( "Meta viewport content restore method restores it back to original value", function(){
+ $.mobile.zoom.disable();
+ ok( $( "meta[name=viewport]" ).attr( "content" ).match( /,maximum-scale=1, user-scalable=no/ ), "The meta viewport tag's content contains maximum-scale=1, user-scalable=yes after enable is called" );
+
+ $.mobile.zoom.restore();
+ ok( $( "meta[name=viewport]" ).attr( "content" ) === defaultMeta, "The meta viewport tag's content matches its default state" );
+
+ });
+
+
+
+ test( "When locked, the enable method does nothing", function(){
+ //enabled it first
+ $.mobile.zoom.locked = false;
+ $.mobile.zoom.disable();
+ $.mobile.zoom.locked = true;
+ $.mobile.zoom.enable();
+
+ ok( $( "meta[name=viewport]" ).attr( "content" ).match( /,maximum-scale=1, user-scalable=no/ ), "The meta viewport tag's content contains maximum-scale=1, user-scalable=yes after enable is called" );
+ $.mobile.zoom.locked = false;
+ $.mobile.zoom.enable();
+
+ });
+
+ test( "When locked, the disable method does nothing", function(){
+ //enabled it first
+ $.mobile.zoom.locked = false;
+ $.mobile.zoom.enable();
+ $.mobile.zoom.locked = true;
+ $.mobile.zoom.disable();
+
+ ok( $( "meta[name=viewport]" ).attr( "content" ).match( /,maximum-scale=10, user-scalable=yes/ ), "The meta viewport tag's content contains maximum-scale=1, user-scalable=yes0, user-scalable=no after disable is called" );
+
+ $.mobile.zoom.locked = false;
+ $.mobile.zoom.enable();
+
+ });
+
+ test( "When locked, the enable method with a true 'unlock' argument works", function(){
+ //enabled it first
+ $.mobile.zoom.locked = false;
+ $.mobile.zoom.disable();
+ $.mobile.zoom.locked = true;
+ $.mobile.zoom.enable( true );
+
+ ok( $( "meta[name=viewport]" ).attr( "content" ).match( /,maximum-scale=10, user-scalable=yes/ ), "The meta viewport tag's content contains maximum-scale=1, user-scalable=yes0, user-scalable=no after enable is called" );
+ ok( $.mobile.zoom.locked === false, "The locked property is false again" );
+
+ $.mobile.zoom.locked = false;
+ $.mobile.zoom.enable();
+
+ });
+
+
+ test( "When locked, the disable method with a true 'lock' argument works", function(){
+ //enabled it first
+ $.mobile.zoom.locked = false;
+ $.mobile.zoom.enable();
+
+ $.mobile.zoom.disable( true );
+
+ ok( $( "meta[name=viewport]" ).attr( "content" ).match( /,maximum-scale=1, user-scalable=no/ ), "The meta viewport tag's content contains maximum-scale=1, user-scalable=yes after disable is called" );
+ ok( $.mobile.zoom.locked === true, "The locked property is true" );
+
+ $.mobile.zoom.locked = false;
+ $.mobile.zoom.enable();
+
+ });
+
+
+
+})(jQuery);
--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width">
+<title>Configuration Properties</title>
+<link rel="stylesheet" href="../css/themes/default/jquery.mobile.css" />
+<style>
+
+.prop { float: left; font-weight: bold; }
+.val { float: right; margin-left: 2em; }
+
+.ui-li { overflow: hidden; }
+
+</style>
+<script src="../js/jquery.js"></script>
+<script src="../js/"></script>
+<script>
+
+function simpleEntityEncode( str )
+{
+ return ( str + "" ).replace( /&/, "&" ).replace( /</, "<" ).replace( />/, ">" );
+}
+
+function getObjectPropsAsArray( obj, doSort )
+{
+ var props = [], prop;
+ for ( prop in obj ) {
+ props.push( prop );
+ }
+ return doSort ? props.sort() : props;
+}
+
+function getPropsAsListviewMarkkup( obj )
+{
+ var props = getObjectPropsAsArray( obj || {}, true ),
+ propStr = "<ul data-role='listview' data-inset='true'>\n",
+ prop, val, i;
+
+ for ( i = 0; i < props.length; i++ ) {
+ prop = props[ i ];
+ val = obj[ prop ],
+ vtype = typeof val;
+
+ if ( vtype !== "function" && vtype !== "object" ) {
+ propStr += "\t<li><span class='prop'>" + simpleEntityEncode( prop ) + ":</span><span class='val'>" + simpleEntityEncode( val ) + "</span></li>\n";
+ }
+ }
+
+ return propStr + "</ul>\n";
+}
+
+$( document ).bind( "pageinit", function( e ) {
+ var $content = $( e.target ).find( ".ui-content");
+
+ $( "<h2>$.mobile</h2>" ).appendTo( $content );
+ $( getPropsAsListviewMarkkup( $.mobile ) ).appendTo( $content ).listview();
+ $( "<h2>$.support</h2>" ).appendTo( $content );
+ $( getPropsAsListviewMarkkup( $.support ) ).appendTo( $content ).listview();
+});
+
+</script>
+</head>
+
+<body>
+<div data-role="page">
+ <div data-role="header"><h1>Configuration Properties</h1></div>
+ <div data-role="content">
+ <p>Below is a dump of the non-function/object properties of the $.mobile and $.support objects. These properties typically control how the jQuery Mobile framework behaves on the various devices/platforms. You can use this page to quickly assess the default support configuration calculated by both jQuery Core and jQuery Mobile.</p>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>jQuery Mobile Tools</title>
+<link rel="stylesheet" href="../css/themes/default/jquery.mobile.css">
+<script src="../js/jquery.js"></script>
+<script src="../js/"></script>
+</head>
+
+<body>
+<div data-role="page">
+ <div data-role="header"><h1>Tools</h1></div>
+ <div data-role="content">
+ <p>Tools written by the team to aid in debugging jQuery Mobile apps.</p>
+ <ul data-role="listview" data-inset="true">
+ <li><a href="config-props.html" rel="external">
+ <h3>Configuration Properties</h3>
+ <p>A simple page for dumping the framework configuration property values and the calculated $.support values for a given browser/device.</p>
+ </a></li>
+ <li><a href="log-page-events.html" rel="external">
+ <h3>Page Event Logger Bookmarklet</h3>
+ <p>A simple bookmarklet that dumps page event information to the browser console. Good for debugging page loading and lifecycle problems.</p>
+ </a></li>
+ <li><a href="page-change-time.html" rel="external">
+ <h3>Page Change Timing Bookmarklet</h3>
+ <p>A simple bookmarklet that dumps timing information at specific points within the loading, processing, and activation of a page.</p>
+ </a></li>
+ </ul>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Page Event Logger Bookmarklet</title>
+</head>
+
+<body>
+<h1>Page Event Logger Bookmarklet</h1>
+<p>A simple bookmarklet for logging jQuery Mobile page events. To use, bookmark the following link:</p>
+<script>
+document.write('<p><a id="bookmarklet-link" href="javascript:function loadScript(u){var s=document.createElement(\'script\');s.setAttribute(\'language\',\'javascript\');s.setAttribute(\'src\',u);document.body.appendChild(s);} loadScript(\'' + ( location.href.replace( /\.html/, ".js" ) ) + '\');">Page EventLogger Bookmark</a></p>');
+</script>
+<p>For platforms that don't allow bookmarking of <code>javascript:</code> urls, you can copy/paste the following source for the bookmarklet directly into the browser's location bar then hit enter or hit the "go" button on your keypad:</p>
+<p>
+ <textarea id="ta" rows="10" cols="50"></textarea>
+</p>
+<p>NOTE: Some browsers like Chrome will strip off the javascript: prefix from the string above when you paste it into the location bar. Make sure what you pasted is prefixed by javascript: before attempting to load the bookmarklet.</p>
+<script>
+document.getElementById("ta").value = document.getElementById("bookmarklet-link").href;
+ </script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Page Change Timing Bookmarklet</title>
+</head>
+
+<body>
+<h1>Page Change Timing Bookmarklet</h1>
+<p>A simple bookmarklet for timing the load, enhanement, and transition of a jQuery Mobile changePage() request. To use, bookmark the following link:</p>
+<script>
+document.write('<p><a id="bookmarklet-link" href="javascript:function loadScript(u){var s=document.createElement(\'script\');s.setAttribute(\'language\',\'javascript\');s.setAttribute(\'src\',u);document.body.appendChild(s);} loadScript(\'' + ( location.href.replace( /\.html/, ".js" ) ) + '\');">Page Change Timing Bookmark</a></p>');
+</script>
+<p>For platforms that don't allow bookmarking of <code>javascript:</code> urls, you can copy/paste the following source for the bookmarklet directly into the browser's location bar then hit enter or hit the "go" button on your keypad:</p>
+<p>
+ <textarea id="ta" rows="10" cols="50"></textarea>
+</p>
+<p>NOTE: Some browsers like Chrome will strip off the javascript: prefix from the string above when you paste it into the location bar. Make sure what you pasted is prefixed by javascript: before attempting to load the bookmarklet.</p>
+<script>
+document.getElementById("ta").value = document.getElementById("bookmarklet-link").href;
+ </script>
+</body>
+</html>
+++ /dev/null
-From 18a19ed0ee31851c720fc6b83b50adea3d91a653 Mon Sep 17 00:00:00 2001
-From: Minkyu Kang <mk7.kang@samsung.com>
-Date: Tue, 28 Feb 2012 10:48:14 +0900
-Subject: [PATCH] JQM: Fix jqm build to exclude compressed version build
-
-Signed-off-by: Youmin Ha <youmin.ha@samsung.com>
----
- libs/js/jquery-mobile-1.0.1pre/Makefile | 16 +++++++++-------
- 1 files changed, 9 insertions(+), 7 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.0.1pre/Makefile b/libs/js/jquery-mobile-1.0.1pre/Makefile
-index 23541cd..08bf27b 100644
---- a/libs/js/jquery-mobile-1.0.1pre/Makefile
-+++ b/libs/js/jquery-mobile-1.0.1pre/Makefile
-@@ -82,6 +82,7 @@ THEME = default
- # When no build target is specified, all gets ran
- all: init css js zip notify
-
-+all-but-min: init js css notify
-
- # Build and minify the CSS files
- css: init
-@@ -89,14 +90,14 @@ css: init
- @@cat js/jquery.mobile.intro.js | ${VER} > ${OUTPUT}/${NAME}.css
- @@cat ${CSSTHEMEFILES} ${CSSFILES} >> ${OUTPUT}/${NAME}.css
- # ..... and then minify it
-- @@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.css
-- @@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${NAME}.css >> ${OUTPUT}/${NAME}.min.css
-+ #@@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.css
-+ #@@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${NAME}.css >> ${OUTPUT}/${NAME}.min.css
- # Build the CSS Structure-only file
- @@cat js/jquery.mobile.intro.js | ${VER} > ${OUTPUT}/${STRUCTURE}.css
- @@cat ${CSSFILES} >> ${OUTPUT}/${STRUCTURE}.css
- # ..... and then minify it
-- @@echo ${VER_MIN} > ${OUTPUT}/${STRUCTURE}.min.css
-- @@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${STRUCTURE}.css >> ${OUTPUT}/${STRUCTURE}.min.css
-+ #@@echo ${VER_MIN} > ${OUTPUT}/${STRUCTURE}.min.css
-+ #@@java -jar build/yuicompressor-2.4.6.jar --type css ${OUTPUT}/${STRUCTURE}.css >> ${OUTPUT}/${STRUCTURE}.min.css
- # ..... and then copy in the images
- @@cp -R css/themes/${THEME}/images ${OUTPUT}/
- # Css portion is complete.
-@@ -137,8 +138,8 @@ js: init
- @@cat js/jquery.mobile.intro.js | ${VER} > ${OUTPUT}/${NAME}.js
- @@cat ${JSFILES} >> ${OUTPUT}/${NAME}.js
- # ..... and then minify it
-- @@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.js
-- @@java -jar build/google-compiler-20111003.jar --js ${OUTPUT}/${NAME}.js --warning_level QUIET >> ${OUTPUT}/${NAME}.min.js
-+ #@@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.js
-+ #@@java -jar build/google-compiler-20111003.jar --js ${OUTPUT}/${NAME}.js --warning_level QUIET >> ${OUTPUT}/${NAME}.min.js
- # -------------------------------------------------
-
-
-@@ -208,4 +209,5 @@ deploy: init js css docs zip
- @@rm -rf ${OUTPUT}
- # -------------------------------------------------
-
--
-+clean:
-+ @@rm -rf ${CURDIR}/compiled
---
-1.7.5.4
-
--- /dev/null
+From f95cf2987e50119260db1763a1b52b4bc34d57b2 Mon Sep 17 00:00:00 2001
+From: "wongi11.lee" <wongi11.lee@samsung.com>
+Date: Thu, 21 Jun 2012 17:35:28 +0900
+Subject: [PATCH] JQM:fix vclick trigger twice after pageChange.
+
+Signed-off-by: Wongi Lee <wongi11.lee@samsung.com>
+---
+ .../jquery-mobile-1.1.0/js/jquery.mobile.vmouse.js | 4 ++++
+ 1 file changed, 4 insertions(+)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.vmouse.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.vmouse.js
+index 6e9b504..b608460 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.vmouse.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.vmouse.js
+@@ -195,6 +195,10 @@ function triggerVirtualEvent( eventType, event, flags ) {
+ function mouseEventCallback( event ) {
+ var touchID = $.data(event.target, touchTargetPropertyName);
+
++ if ( ( $.support.touch === true ) && ( touchID === undefined ) ) {
++ return;
++ }
++
+ if ( !blockMouseTriggers && ( !lastTouchID || lastTouchID !== touchID ) ){
+ var ve = triggerVirtualEvent( "v" + event.type, event );
+ if ( ve ) {
+--
+1.7.9.5
+
+++ /dev/null
-From aee148944929c79484c59d2e70b63ffdd09e1dd0 Mon Sep 17 00:00:00 2001
-From: Minkyu Kang <mk7.kang@samsung.com>
-Date: Tue, 28 Feb 2012 10:59:29 +0900
-Subject: [PATCH] JQM: Fix bug on live firing of custom events
-
-Signed-off-by: Youmin Ha <youmin.ha@samsung.com>
----
- .../js/jquery.mobile.event.js | 6 ++++++
- 1 files changed, 6 insertions(+), 0 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.event.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.event.js
-index 7b79b79..408d2ba 100644
---- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.event.js
-+++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.event.js
-@@ -24,6 +24,12 @@ var supportTouch = $.support.touch,
- function triggerCustomEvent( obj, eventType, event ) {
- var originalType = event.type;
- event.type = eventType;
-+
-+ // event.liveFired is already set by basic events e.g. vclick,
-+ // which is fired already.
-+ // To fire this custom event, event.liveFired must be cleared.
-+ event.liveFired = undefined;
-+
- $.event.handle.call( obj, event );
- event.type = originalType;
- }
---
-1.7.5.4
-
--- /dev/null
+From 2807a575905be49a8445aea0b1759a88339f4e16 Mon Sep 17 00:00:00 2001
+From: Koeun Choi <koeun.choi@samsung.com>
+Date: Fri, 15 Jun 2012 17:11:51 +0900
+Subject: [PATCH] JQM:nolabel n favorite class for check support
+
+Signed-off-by: Koeun Choi <koeun.choi@samsung.com>
+---
+ .../js/jquery.mobile.forms.checkboxradio.js | 10 ++++++++++
+ 1 file changed, 10 insertions(+)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.checkboxradio.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.checkboxradio.js
+index eb4731b..b373431 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.checkboxradio.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.checkboxradio.js
+@@ -43,6 +43,12 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
+ return;
+ }
+
++ // Support fake label
++ if ( label.length == 0 ) {
++ label = $( "<label for='" + input[ 0 ].id +
++ "' style='display:block;width:1px;height:1px;'></label>" );
++ }
++
+ // Expose for other methods
+ $.extend( this, {
+ label: label,
+@@ -70,6 +76,10 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
+ var wrapper = document.createElement('div');
+ wrapper.className = 'ui-' + inputtype;
+
++ if ( input.hasClass( "favorite" ) ) {
++ wrapper.className += ' favorite';
++ }
++
+ input.add( label ).wrapAll( wrapper );
+
+ label.bind({
+--
+1.7.9.5
+
+++ /dev/null
-From 6a249538e0f36ddcaa70dd8db43f5d4f189a82c7 Mon Sep 17 00:00:00 2001
-From: Minkyu Kang <mk7.kang@samsung.com>
-Date: Tue, 28 Feb 2012 11:09:31 +0900
-Subject: [PATCH] JQM: Don't draw right arrow on clickable listitems (For
- Tizen theme)
-
-Signed-off-by: Lee Wongi <wongi11.lee@samsung.com>
-Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
----
- .../js/jquery.mobile.listview.js | 1 +
- 1 files changed, 1 insertions(+), 0 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.listview.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.listview.js
-index 58a2078..a290f9f 100644
---- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.listview.js
-+++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.listview.js
-@@ -178,6 +178,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
- if ( a.length ) {
- icon = item.jqmData("icon");
-
-+ icon = false;
- item.buttonMarkup({
- wrapperEls: "div",
- shadow: false,
---
-1.7.5.4
-
--- /dev/null
+From c9edd80183fa459dff180d7f51e9cd03143473b4 Mon Sep 17 00:00:00 2001
+From: Minkyu Kang <mk7.kang@samsung.com>
+Date: Mon, 11 Jun 2012 15:19:06 +0900
+Subject: [PATCH] JQM:trigger the pageshow event after transitionPages
+ function at none transition
+
+Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
+---
+ .../js/jquery.mobile.transition.js | 2 +-
+ 1 file changed, 1 insertions(+), 1 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.transition.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.transition.js
+index 9a099dc..4476bfd 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.transition.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.transition.js
+@@ -89,7 +89,7 @@ var createHandler = function( sequential ){
+ $to.addClass( name + " in" + reverseClass );
+
+ if( none ){
+- doneIn();
++ setTimeout( doneIn, 0 );
+ }
+
+ },
+--
+1.7.9.5
+
+++ /dev/null
-From 6734ec723c053c9c81949c146a5f3ea5a0fbfdc5 Mon Sep 17 00:00:00 2001
-From: Minkyu Kang <mk7.kang@samsung.com>
-Date: Tue, 28 Feb 2012 14:19:23 +0900
-Subject: [PATCH] JQM: button event bug fixed
-
-Signed-off-by: Koeun Choi <koeun.choi@samsung.com>
-Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
----
- .../js/jquery.mobile.buttonMarkup.js | 74 +++++++++++++-------
- 1 files changed, 49 insertions(+), 25 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js
-index a08e611..d192e37 100644
---- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js
-+++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js
-@@ -130,47 +130,71 @@ function closestEnabledButton( element ) {
- return element;
- }
-
-+// Bug fix: When moving finger out of button after touching down button, button color MUST be returned.
-+// button click event comes this order : vmouseover -> vmousedown -> vmouseup -> vmouseout
-+
-+var selectedButton = null;
-+var useScrollview = false;
-+
- var attachEvents = function() {
- $( document ).bind( {
-- "vmousedown": function( event ) {
-- var btn = closestEnabledButton( event.target ),
-- $btn, theme;
-+ "vmouseover focus": function( event ) {
-+ var $btn, theme;
-
-- if ( btn ) {
-- $btn = $( btn );
-+ // check if there is selected button... if so, make it to "btn-up" state.
-+ if ( selectedButton ) {
-+ $btn = $( selectedButton );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
-- $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
-+ $btn.removeClass( "ui-btn-down-" + theme ).removeClass( "ui-btn-hover-" + theme )
-+ .addClass( "ui-btn-up-" + theme );
- }
-- },
-- "vmousecancel vmouseup": function( event ) {
-- var btn = closestEnabledButton( event.target ),
-- $btn, theme;
-
-- if ( btn ) {
-- $btn = $( btn );
-+ selectedButton = closestEnabledButton( event.target );
-+ if ( selectedButton ) {
-+ $btn = $( selectedButton );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
-- $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
-+ $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
- }
- },
-- "vmouseover focus": function( event ) {
-- var btn = closestEnabledButton( event.target ),
-- $btn, theme;
-+ "vmouseout blur": function( event ) {
-+ var $btn, theme;
-
-- if ( btn ) {
-- $btn = $( btn );
-+ if ( selectedButton ) {
-+ $btn = $( selectedButton );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
-- $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
-+ $btn.removeClass( "ui-btn-hover-" + theme ).removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
- }
- },
-- "vmouseout blur": function( event ) {
-- var btn = closestEnabledButton( event.target ),
-- $btn, theme;
-+ "vmousedown": function( event ) {
-+ var $btn, theme;
-+
-+ if ( !selectedButton ) {
-+ selectedButton = closestEnabledButton( event.target );
-+ }
-
-- if ( btn ) {
-- $btn = $( btn );
-+ $btn = $( selectedButton );
-+ theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
-+ $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
-+ },
-+ "vmousecancel vmouseup": function( event ) {
-+ var $btn, theme;
-+
-+ if ( selectedButton ) {
-+ $btn = $( selectedButton );
- theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
-- $btn.removeClass( "ui-btn-hover-" + theme + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
-+ $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
-+
-+ if ( event.type === "vmousecancel" && useScrollview ) {
-+ event.preventDefault();
-+ }
-+ selectedButton = null;
-+ }
-+ },
-+ "scrollstart scrollview_scroll": function( event ) {
-+ if ( event.type === "scrollview_scroll" ) {
-+ useScrollview = true;
- }
-+ $( this ).trigger("vmousecancel");
- }
- });
-
---
-1.7.5.4
-
--- /dev/null
+From 12f7cdd3e6a427c777eb5b4c48b33fdd0ba1ef15 Mon Sep 17 00:00:00 2001
+From: Jun Jinhyuk <jinhyuk.jun@samsung.com>
+Date: Thu, 5 Jul 2012 01:00:43 -0400
+Subject: [PATCH] JQM move pagelayout to winset
+
+Change-Id: I38777266f0e4d30bce2db5057e2675f35221096a
+---
+ .../js/jquery.mobile.fixedToolbar.js | 2 +-
+ .../js/jquery.mobile.page.sections.js | 16 ++--------------
+ 2 files changed, 3 insertions(+), 15 deletions(-)
+ mode change 100644 => 100755 libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.sections.js
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.fixedToolbar.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.fixedToolbar.js
+index 0f9c23d..6a40ac5 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.fixedToolbar.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.fixedToolbar.js
+@@ -65,7 +65,7 @@ define( [ "jquery", "./jquery.mobile.widget", "./jquery.mobile.core", "./jquery.
+
+ return false;
+ },
+- initSelector: ":jqmData(position='fixed')"
++ initSelector: ":jqmData(position='dummy')"
+ },
+
+ _create: function() {
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.sections.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.sections.js
+old mode 100644
+new mode 100755
+index e0a718d..e78af6a
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.sections.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.sections.js
+@@ -8,11 +8,12 @@ define( [ "jquery", "./jquery.mobile.page", "./jquery.mobile.core", "./jquery.mo
+ (function( $, undefined ) {
+
+ $.mobile.page.prototype.options.backBtnText = "Back";
+-$.mobile.page.prototype.options.addBackBtn = false;
++$.mobile.page.prototype.options.addBackBtn = "footer";
+ $.mobile.page.prototype.options.backBtnTheme = null;
+ $.mobile.page.prototype.options.headerTheme = "a";
+ $.mobile.page.prototype.options.footerTheme = "a";
+ $.mobile.page.prototype.options.contentTheme = null;
++$.mobile.page.prototype.options.footerExist = true;
+
+ $( document ).delegate( ":jqmData(role='page'), :jqmData(role='dialog')", "pagecreate", function( e ) {
+
+@@ -58,19 +59,6 @@ $( document ).delegate( ":jqmData(role='page'), :jqmData(role='dialog')", "pagec
+ rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
+ }
+
+- // Auto-add back btn on pages beyond first view
+- if ( o.addBackBtn &&
+- role === "header" &&
+- $( ".ui-page" ).length > 1 &&
+- $page.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
+- !leftbtn ) {
+-
+- backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
+- // If theme is provided, override default inheritance
+- .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
+- .prependTo( $this );
+- }
+-
+ // Page title
+ $this.children( "h1, h2, h3, h4, h5, h6" )
+ .addClass( "ui-title" )
+--
+1.7.4.1
+
+++ /dev/null
-From 01ba67004fdeaa1c205935ffb3e6739a9005cc21 Mon Sep 17 00:00:00 2001
-From: Minkyu Kang <mk7.kang@samsung.com>
-Date: Wed, 29 Feb 2012 11:28:03 +0900
-Subject: [PATCH] JQM: Change button design to meet TIZEN UI
-
-Signed-off-by: Lee Wongi <wongi11.lee@samsung.com>
-Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
----
- .../js/jquery.mobile.buttonMarkup.js | 61 +++++++++++++++++++-
- 1 files changed, 58 insertions(+), 3 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js
-index d192e37..93485f1 100644
---- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js
-+++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js
-@@ -2,6 +2,21 @@
- * "buttons" plugin - for making button-like links
- */
-
-+/*
-+ * Button Markup modified for TIZEN style.
-+ *
-+ * HTML Attributes:
-+ *
-+ * data-role: button
-+ * data-style: circle, nobg, edit
-+ *
-+ * Examples:
-+ *
-+ * <div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div>
-+ * <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg">
-+ * <div data-role="button" data-inline="true" data-icon="editminus" data-style="edit"></div>
-+ */
-+
- ( function( $, undefined ) {
-
- $.fn.buttonMarkup = function( options ) {
-@@ -73,8 +88,48 @@ $.fn.buttonMarkup = function( options ) {
- buttonClass += " ui-shadow";
- }
-
-- e.setAttribute( "data-" + $.mobile.ns + "theme", o.theme );
-- el.addClass( buttonClass );
-+ /* TIZEN style markup */
-+ buttonStyle = el.jqmData("style");
-+
-+ if ( buttonStyle == "circle" ) {
-+ /* style : no text, Icon only */
-+ buttonClass += " ui-btn-corner-circle";
-+ buttonClass += " ui-btn-icon_only";
-+ } else if ( buttonStyle == "nobg" ) {
-+ /* style : no text, Icon only, no bg */
-+ buttonClass += " ui-btn-icon-nobg";
-+ buttonClass += " ui-btn-icon_only";
-+ } else if ( buttonStyle == "edit" ) {
-+ buttonClass += " ui-btn-edit";
-+ }
-+
-+ if ( o.icon ) {
-+ if ( $(el).text().length > 0 ) {
-+ o.iconpos == "right" ?
-+ textClass += " ui-btn-text-padding-right" :
-+ textClass += " ui-btn-text-padding-left";
-+
-+ innerClass += " ui-btn-hastxt";
-+ } else {
-+ if ( buttonStyle == "circle" ) {
-+ /* style : no text, Icon only */
-+ innerClass += " ui-btn-corner-circle";
-+ } else if ( buttonStyle == "nobg" ) {
-+ /* style : no text, Icon only, no bg */
-+ innerClass += " ui-btn-icon-nobg";
-+ }
-+
-+ buttonClass += " ui-btn-icon_only";
-+ innerClass += " ui-btn-icon-only";
-+ }
-+ } else {
-+ if ( $(el).text().length > 0 ) {
-+ innerClass += " ui-btn-hastxt";
-+ }
-+ }
-+
-+ el.attr( "data-" + $.mobile.ns + "theme", o.theme )
-+ .addClass( buttonClass );
-
- buttonInner.className = innerClass;
- buttonInner.setAttribute("aria-hidden", "true");
-@@ -96,7 +151,7 @@ $.fn.buttonMarkup = function( options ) {
- // TODO obviously it would be nice to pull this element out instead of
- // retrieving it from the DOM again, but this change is much less obtrusive
- // and 1.0 draws nigh
-- $.data( e, 'textWrapper', $( buttonText ) );
-+ el.data( 'textWrapper', $( buttonText ) );
- }
-
- return this;
---
-1.7.5.4
-
--- /dev/null
+From 3548a6e0000943da605e6cbb00c1ec51ba82cf12 Mon Sep 17 00:00:00 2001
+From: Youmin Ha <youmin.ha@samsung.com>
+Date: Tue, 5 Jun 2012 16:47:59 +0900
+Subject: [PATCH] JQM:Fix bug on live firing custom events
+
+Signed-off-by: Youmin Ha <youmin.ha@samsung.com>
+---
+ .../jquery-mobile-1.1.0/js/jquery.mobile.event.js | 5 +++++
+ 1 file changed, 5 insertions(+)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.event.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.event.js
+index f9d1744..0dc5428 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.event.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.event.js
+@@ -28,6 +28,11 @@ var supportTouch = $.support.touch,
+ function triggerCustomEvent( obj, eventType, event ) {
+ var originalType = event.type;
+ event.type = eventType;
++
++ // event.liveFired is already set by basic events, e.g. vclick, which is fired already.
++ // To fire this custom event, event.liveFired must be cleared.
++ event.liveFired = undefined;
++
+ $.event.handle.call( obj, event );
+ event.type = originalType;
+ }
+--
+1.7.9.5
+
--- /dev/null
+From 3fea934afc1252e6476750d86e450a61e6d8b816 Mon Sep 17 00:00:00 2001
+From: wongi11.lee <wongi11.lee@samsung.com>
+Date: Fri, 8 Jun 2012 19:58:19 +0900
+Subject: [PATCH] JQM:Apply Tizen button style.
+
+Signed-off-by: Wongi Lee <wongi11.lee@samsung.com>
+Signed-off-by: Hyunjung Kim <hjnim.kim@samsung.com>
+---
+ .../js/jquery.mobile.buttonMarkup.js | 59 ++++++++++++++++++++
+ 1 files changed, 59 insertions(+), 0 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.buttonMarkup.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.buttonMarkup.js
+index c5f32b4..d1b992b 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.buttonMarkup.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.buttonMarkup.js
+@@ -1,3 +1,22 @@
++/*
++* "buttons" plugin - for making button-like links
++*/
++
++/*
++ * Button Markup modified for TIZEN style.
++ *
++ * HTML Attributes:
++ *
++ * data-role: button
++ * data-style: circle, nobg, edit
++ *
++ * Examples:
++ *
++ * <div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div>
++ * <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg">
++ * <div data-role="button" data-inline="true" data-icon="editminus" data-style="edit"></div>
++ */
++
+ //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+ //>>description: Applies button styling to links
+ //>>label: Buttons: Link-based
+@@ -74,6 +93,63 @@ $.fn.buttonMarkup = function( options ) {
+ buttonClass += o.shadow ? " ui-shadow" : "";
+ buttonClass += o.corners ? " ui-btn-corner-all" : "";
+
++ // To distinguish real buttons
++ if( el.jqmData("role") == "button" || e.tagName == "BUTTON" || e.tagName == "A" ){
++ buttonClass += " ui-btn-box-" + o.theme;
++ }
++
++ /* TIZEN style markup */
++ buttonStyle = el.jqmData("style");
++
++ if ( buttonStyle == "circle" ) {
++ /* style : no text, Icon only */
++ buttonClass += " ui-btn-corner-circle";
++ buttonClass += " ui-btn-icon_only";
++ } else if ( buttonStyle == "nobg" ) {
++ /* style : no text, Icon only, no bg */
++ buttonClass += " ui-btn-icon-nobg";
++ buttonClass += " ui-btn-icon_only";
++ } else if ( buttonStyle == "edit" ) {
++ buttonClass += " ui-btn-edit";
++ }
++
++ if ( o.icon ) {
++ if ( $(el).text().length > 0 ) {
++ o.iconpos == "right" ?
++ textClass += " ui-btn-text-padding-right" :
++ textClass += " ui-btn-text-padding-left";
++
++ switch ( o.iconpos ) {
++ case "right" :
++ case "left" :
++ case "top" :
++ case "bottom" :
++ textClass += " ui-btn-text-padding-" + o.iconpos;
++ break;
++ default:
++ textClass += " ui-btn-text-padding-left";
++ break;
++ }
++
++ innerClass += " ui-btn-hastxt";
++ } else {
++ if ( buttonStyle == "circle" ) {
++ /* style : no text, Icon only */
++ innerClass += " ui-btn-corner-circle";
++ } else if ( buttonStyle == "nobg" ) {
++ /* style : no text, Icon only, no bg */
++ innerClass += " ui-btn-icon-nobg";
++ }
++
++ buttonClass += " ui-btn-icon_only";
++ innerClass += " ui-btn-icon-only";
++ }
++ } else {
++ if ( $(el).text().length > 0 ) {
++ innerClass += " ui-btn-hastxt";
++ }
++ }
++
+ if ( o.mini !== undefined ) {
+ // Used to control styling in headers/footers, where buttons default to `mini` style.
+ buttonClass += o.mini ? " ui-mini" : " ui-fullsize";
+--
+1.7.0.4
+
+++ /dev/null
-From f55b2231026c520cc9899aaf8f2279c29e057da3 Mon Sep 17 00:00:00 2001
-From: Minkyu Kang <mk7.kang@samsung.com>
-Date: Wed, 29 Feb 2012 15:44:47 +0900
-Subject: [PATCH] JQM: Change header/footer code to meet TIZEN UI
-
-Signed-off-by: Jun Jinhyuk <jinhyuk.jun@samsung.com>
-Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
----
- .../js/jquery.mobile.fixHeaderFooter.js | 293 +++++++++++++++++++-
- 1 files changed, 279 insertions(+), 14 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
-index 3bb5613..0216c65 100644
---- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
-+++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
-@@ -2,6 +2,51 @@
- * "fixHeaderFooter" plugin - on-demand positioning for headers,footers
- */
-
-+/*
-+ * Header/Footer can be created using the
-+ * data-role="header", data-role="footer" attribute to an element.
-+ *
-+ * Every page in SLP theme have Header&Footer and default footer contains back button
-+ * Framework automatically generate footer even though web developer does not define footer
-+ * For more detail footer usage, refer Page(page.section.js) guideline
-+ *
-+ * Attribute:
-+ * data-position : default value is fixed, automatically generated footer has fixed position,
-+ * in header, web dev. defines header fix or not.
-+ *
-+ * Examples:
-+ *
-+ * HTML markup for creating header :
-+ * <div data-role="header" data-position="fixed">
-+ * <h1>NBeat UI</h1>
-+ * </div>
-+ *
-+ * HTML markup for creating 1 button title ( button is available 1~3 )
-+ * <div data-role="header" data-position="fixed">
-+ * <a>Text1</a>
-+ * <h1>Title Area</h1>
-+ * </div>
-+ *
-+ * HTML markup for creating 2 button and groupControl title ( Groupcontrol is available 2~4 )
-+ * <div data-role="header" data-position="fixed">
-+ * <a>Text</a>
-+ * <h1>Title Extend 2 Button </h1>
-+ * <a>Text</a>
-+ * <div data-role="fieldcontain">
-+ * <fieldset data-role="controlgroup" data-type="horizontal">
-+ * <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
-+ * <label for="segment1">All</label>
-+ * <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
-+ * <label for="segment2">Call</label>
-+ * </fieldset>
-+ * </div>
-+ * </div>
-+ *
-+ * HTML markup for creating footer
-+ * <div data-role="footer" data-position="fixed">
-+ * </div>
-+ */
-+
- (function( $, undefined ) {
-
- var slideDownClass = "ui-header-fixed ui-fixed-inline fade",
-@@ -50,6 +95,7 @@ $.mobile.fixedToolbars = (function() {
- touchStopEvent = supportTouch ? "touchend" : "mouseup",
- stateBefore = null,
- scrollTriggered = false,
-+ defaultFooterHeight = 114,
- touchToggleEnabled = true;
-
- function showEventCallback( event ) {
-@@ -62,6 +108,57 @@ $.mobile.fixedToolbars = (function() {
- //
- // If we are in autoHideMode, we don't do anything because we know the scroll
- // callbacks for the plugin will fire off a show when the scrolling has stopped.
-+
-+ var footer_filter;
-+
-+ if ( $( document ).find( ".ui-page-active" ).length ) {
-+ footer_filter = $( document ).find( ".ui-page-active" ).find( ":jqmData(role='footer')" );
-+ } else {
-+ footer_filter = $( document ).find( ":jqmData(role='footer')" ).eq( 0 );
-+ }
-+
-+ if ( footer_filter.height() < defaultFooterHeight ) {
-+ footer_filter.css("height", defaultFooterHeight);
-+ }
-+
-+ footer_filter
-+ .css( "top", $(window).height() - footer_filter.height() )
-+ .show();
-+
-+ var footerNavbar = footer_filter.find(".ui-navbar");
-+
-+ if ( footerNavbar.jqmData("style") == "toolbar" ) {
-+ footerNavbar
-+ .css( "width", $(window).width() - footerNavbar.siblings(".ui-btn").width() );
-+ }
-+
-+ // divide content mode scrollview and non-scrollview
-+ // recalculate content area when resize callback occur
-+ if ( event.type == "resize" ) {
-+ var s_theme_header =
-+ $( document ).find( ".ui-page-active" ).find( ":jqmData(role='header')" );
-+ var s_theme_content =
-+ $( document ).find( ".ui-page-active" ).find( ":jqmData(role='content')" );
-+
-+ if ( $.support.scrollview ) {
-+ if ( s_theme_header.css("position") != "fixed" ) {
-+ s_theme_header.css( "position", "fixed" );
-+ }
-+
-+ s_theme_content.css( "top", s_theme_header.height() );
-+ s_theme_content.css( "height",
-+ document.documentElement.clientHeight -
-+ footer_filter.height() - s_theme_header.height() );
-+ } else {
-+ if ( s_theme_header.css("position") != "fixed" ) {
-+ s_theme_header.css( "position", "relative" );
-+ s_theme_content
-+ .css( "top", "0" )
-+ .css( "height", "" );
-+ }
-+ }
-+ }
-+
- if ( !autoHideMode && currentstate === "overlay" ) {
- if ( !delayTimer ) {
- $.mobile.fixedToolbars.hide( true );
-@@ -107,6 +204,9 @@ $.mobile.fixedToolbars = (function() {
-
- ( ( $document.scrollTop() === 0 ) ? $window : $document )
- .bind( "scrollstart", function( event ) {
-+ if ( $( event.target ).find(":jqmData(role='header')").is(":jqmData(position='fixed')") ) {
-+ return;
-+ }
-
- scrollTriggered = true;
-
-@@ -131,7 +231,6 @@ $.mobile.fixedToolbars = (function() {
- }
- })
- .bind( "scrollstop", function( event ) {
--
- if ( $( event.target ).closest( ignoreTargets ).length ) {
- return;
- }
-@@ -145,13 +244,141 @@ $.mobile.fixedToolbars = (function() {
- stateBefore = null;
- });
-
-- $window.bind( "resize updatelayout", showEventCallback );
-+ $window.bind( "resize", showEventCallback );
- });
-
- // 1. Before page is shown, check for duplicate footer
- // 2. After page is shown, append footer to new page
- $( ".ui-page" )
- .live( "pagebeforeshow", function( event, ui ) {
-+ /* Fixed header modify for theme-s */
-+ var s_theme_header = $( event.target ).find(":jqmData(role='header')");
-+ var s_theme_fieldcontain = s_theme_header.find(":jqmData(role='fieldcontain')");
-+ var s_theme_content = $( event.target ).find(".ui-content");
-+ var title_style = "normal";
-+
-+ if ( s_theme_fieldcontain.length != 0 ) {
-+ title_style = "extended";
-+ }
-+
-+ if ( s_theme_header.jqmData("position") == "fixed" || window.S.frameworkData.theme.match(/tizen/).length ||
-+ s_theme_header.css("position") == "fixed" ) {
-+ s_theme_header
-+ .css( "position", "fixed" )
-+ .css( "top", "0px" );
-+
-+ if ( s_theme_header.children().is(".ui-navbar") ) {
-+ s_theme_header.addClass("ui-title-controlbar-height");
-+ $( event.target ).find( ".ui-content" )
-+ .addClass("ui-title-content-controlbar-height");
-+ } else {
-+ $( event.target ).find( ".ui-content" )
-+ .addClass("ui-title-content-" + title_style + "-height");
-+ }
-+ }
-+
-+ if ( s_theme_header.children().is(".ui-option-header") ) {
-+ s_theme_content.removeClass("ui-title-content-" + title_style + "-height");
-+
-+ if ( s_theme_header.children().is(".input-search-bar") ) {
-+ s_theme_content.addClass("ui-title-content-optionheader-search");
-+ } else {
-+ if ( $.tizen.optionheader.prototype.options.collapseOnInit == true ) {
-+ s_theme_content
-+ .addClass("ui-title-content-option-header-collapsed-1line-height");
-+ } else {
-+ s_theme_content
-+ .addClass("ui-title-content-option-header-expanded-1line-height");
-+ }
-+ }
-+ } else if ( s_theme_header.find("input").jqmData("type") == "search" ) {
-+ s_theme_content
-+ .removeClass("ui-title-content-" + title_style + "-height")
-+ .addClass("ui-title-content-search");
-+ }
-+
-+ if ( s_theme_header.children().is("a") ||
-+ s_theme_header.children().find(".ui-radio").length != 0 ) {
-+ if ( title_style == "normal" ) {
-+ if ( s_theme_header.children("a").length == 3 ) {
-+ s_theme_header.find( "a" ).eq( 1 )
-+ .removeClass("ui-btn-right")
-+ .addClass("ui-title-normal-3btn");
-+
-+ s_theme_header.find( "a" ).eq( 2 )
-+ .addClass("ui-btn-right");
-+ }
-+ } else {
-+ var group_length = s_theme_fieldcontain.find(".ui-radio").length;
-+
-+ s_theme_header
-+ .addClass("ui-title-extended-height");
-+
-+ s_theme_fieldcontain
-+ .find(".ui-controlgroup")
-+ .addClass("ui-title-extended-controlgroup");
-+
-+ s_theme_fieldcontain
-+ .find(".ui-controlgroup")
-+ .addClass("ui-extended-controlgroup");
-+
-+ s_theme_fieldcontain
-+ .addClass("ui-title-extended-segment-style");
-+
-+ if ( group_length == 2 || group_length == 3 || group_length == 4 ) {
-+ s_theme_fieldcontain
-+ .addClass("ui-title-extended-controlgroup-" + group_length + "btn");
-+ }
-+ }
-+ s_theme_content.addClass("ui-title-content-" + title_style + "-height");
-+ }
-+
-+ // divide content mode scrollview and non-scrollview
-+ // recalculate content area when resize callback occur
-+ if ( event.type == "resize" ) {
-+ if ( $.support.scrollview ) {
-+ if ( s_theme_header.css("position") != "fixed" ) {
-+ s_theme_header.css( "position", "fixed" );
-+ }
-+
-+ s_theme_content.css( "top", s_theme_header.height() );
-+ } else {
-+ if ( s_theme_header.css("position") != "fixed" ) {
-+ s_theme_header.css( "position", "relative" );
-+ s_theme_content.css( "top", "0" );
-+ }
-+ }
-+ }
-+
-+ var footer_filter = $( document ).find(":jqmData(role='footer')");
-+
-+ if ( footer_filter.find(".ui-navbar").is(".ui-controlbar-s") ){
-+ footer_filter
-+ .css( "top", $(window).height() - footer_filter.height() )
-+ .show();
-+ }
-+
-+ if ( footer_filter.children().find(".ui-radio").length != 0 ) {
-+ var footerGroup = footer_filter.find(":jqmData(role='fieldcontain')");
-+ var groupLength = footerGroup.find(".ui-radio").length;
-+
-+ footerGroup.find(".ui-controlgroup")
-+ .addClass("ui-extended-controlgroup")
-+ .addClass("ui-footer-extended-controlgroup")
-+ .css( "display", "inline" );
-+
-+ /* Groupcontrol cannot initialize inline property at first page */
-+ footerGroup.addClass("ui-title-extended-controlgroup-" + groupLength + "btn");
-+
-+ footerButton = footer_filter.children("a");
-+ footerButton.each(function( i ) {
-+ if ( footerButton.eq( i ).is(".ui-btn") && !footerButton.eq( i ).is(".ui-btn-back") ){
-+ footerButton.eq( i )
-+ .removeClass("ui-btn-left")
-+ .addClass("ui-btn-footer-right");
-+ }
-+ });
-+ }
-
- var page = $( event.target ),
- footer = page.find( ":jqmData(role='footer')" ),
-@@ -162,15 +389,53 @@ $.mobile.fixedToolbars = (function() {
-
- if ( id && prevFooterMatches ) {
- stickyFooter = footer;
-- setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
-+ stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer );
-+ stickyFooter
-+ .css("position", "fixed")
-+ .css("top", $(".ui-page").find(":jqmData(role='footer')").eq( 0 ).css("top"));
-+
-+ }
-+
-+ if ( footer.is(".ui-footer-fixed") ) {
-+ footer.css( "top", $(window).height() - footer.height() );
-+ }
-+
-+ /* Increase Content size with dummy <div> because of footer height */
-+ if ( footer.length != 0 && $( event.target ).find(".dummy-div").length == 0 ) {
-+ $( event.target ).find( ":jqmData(role='content')" ).append( '<div class="dummy-div"></div>' );
-+ $( ".dummy-div" )
-+ .css( "width", footer.width() )
-+ .css( "height", footer.height() );
-+
-+ if ( $(".dummy-div").height() < defaultFooterHeight ) {
-+ $( ".dummy-div" ).css( "height", defaultFooterHeight );
-+ }
- }
-+
-+ /* Header position fix(remove transition) */
-+ var next_id = $( event.target ).attr( "id" );
-+
-+ $( "#"+next_id ).find( ":jqmData(role='header')" )
-+ .removeClass( "fade in out" )
-+ .appendTo( $.mobile.pageContainer );
- })
- .live( "pageshow", function( event, ui ) {
-+ /* Fixed header modify for theme-s */
-+ var s_theme_header = $( event.target ).find( ":jqmData(role='header')" );
-+ if ( s_theme_header.is(".ui-header-fixed") && s_theme_header.is(".ui-bar-s") ) {
-+ $( event.target ).find(":jqmData(role='header')")
-+ .css( "position", "fixed" )
-+ .css( "top", "0px" );
-+
-+ ( $( document ).scrollTop() === 0 ? $( window ) : $( document ) )
-+ .unbind("scrollstart")
-+ .unbind("silentscroll")
-+ .unbind("scrollstop");
-+ }
-
- var $this = $( this );
-
- if ( stickyFooter && stickyFooter.length ) {
--
- setTimeout(function() {
- setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
- stickyFooter = null;
-@@ -178,8 +443,13 @@ $.mobile.fixedToolbars = (function() {
- }
-
- $.mobile.fixedToolbars.show( true, this );
-+
-+ /* Header position fix(remove transition) */
-+ $("body").children(":jqmData(role='header')")
-+ .insertBefore( $(event.target).find(":jqmData(role='content')").eq( 0 ) );
- });
-
-+
- // When a collapsiable is hidden or shown we need to trigger the fixed toolbar to reposition itself (#1635)
- $( ".ui-collapsible-contain" ).live( "collapse expand", showEventCallback );
-
-@@ -215,10 +485,15 @@ $.mobile.fixedToolbars = (function() {
- }
-
- function setTop( el ) {
-+ if ( el.parents(".ui-page").find(":jqmData(role='header')").is(".ui-header-fixed") &&
-+ el.parents(".ui-page").find(":jqmData(role='header')").is(".ui-bar-s") ) {
-+ return;
-+ }
-+
- var fromTop = $(window).scrollTop(),
- thisTop = getOffsetTop( el[ 0 ] ), // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead.
- thisCSStop = el.css( "top" ) == "auto" ? 0 : parseFloat(el.css( "top" )),
-- screenHeight = window.innerHeight,
-+ screenHeight = $(window).height(),
- thisHeight = el.outerHeight(),
- useRelative = el.parents( ".ui-page:not(.ui-page-fullscreen)" ).length,
- relval;
-@@ -260,20 +535,10 @@ $.mobile.fixedToolbars = (function() {
- fromTop = $( window ).scrollTop(),
- // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead.
- thisTop = getOffsetTop( el[ 0 ] ),
-- screenHeight = window.innerHeight,
-+ screenHeight = $(window).height(),
- thisHeight = el.outerHeight(),
- alreadyVisible = ( el.is( ".ui-header-fixed" ) && fromTop <= thisTop + thisHeight ) ||
- ( el.is( ".ui-footer-fixed" ) && thisTop <= fromTop + screenHeight );
--
-- // Add state class
-- el.addClass( "ui-fixed-overlay" ).removeClass( "ui-fixed-inline" );
--
-- if ( !alreadyVisible && !immediately ) {
-- el.animationComplete(function() {
-- el.removeClass( "in" );
-- }).addClass( "in" );
-- }
-- setTop(el);
- });
- },
-
---
-1.7.5.4
-
+++ /dev/null
-From 4755edbf7aaae376a58f94ec98ca433ce98ef0d9 Mon Sep 17 00:00:00 2001
-From: Minkyu Kang <mk7.kang@samsung.com>
-Date: Wed, 29 Feb 2012 16:17:13 +0900
-Subject: [PATCH] JQM: Add back button into header/footer
-
-Signed-off-by: Jun Jinhyuk <jinhyuk.jun@samsung.com>
-Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
----
- .../js/jquery.mobile.page.sections.js | 97 ++++++++++++++++++--
- 1 files changed, 90 insertions(+), 7 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.page.sections.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.page.sections.js
-index 2317c0c..63bba20 100644
---- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.page.sections.js
-+++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.page.sections.js
-@@ -2,6 +2,40 @@
- * This plugin handles theming and layout of headers, footers, and content areas
- */
-
-+/*
-+ * Page can be created using the calendarpicker() method or by adding a
-+ * data-role="page" attribute to an element.
-+ *
-+ * Page has 3 main sub element. Header, Footer, Content
-+ * 3 sub element can be created using <div> element
-+ *
-+ * Attribute:
-+ *
-+ * data-back-Btn-Text: determine which text is displayed in back button
-+ * data-add-Back-Btn: Defines if header/footer has back button or not (default false)
-+ * data-back-Btn-Theme: defines back button's theme
-+ * data-header-Theme: defines header <div>'s theme
-+ * data-footer-Theme: defines footer <div>'s theme
-+ * data-content-Theme: defines content <div>'s theme
-+ * data-footer-Exist: defines to show default footer or not in each page (default true)
-+ * data-footer-User-Control-Theme: defines to show default footer in whole page
-+ * (default false. if true, all document do not has footer)
-+ *
-+ * Examples:
-+ *
-+ * HTML markup for creating Page:
-+ * <div data-role="page">
-+ *
-+ * How to show back button
-+ * <div data-role="page" id="no-contents-0" data-add-back-btn="true">
-+ *
-+ * How to remove footer of specific page
-+ * <div data-role="page" id="no-contents-0" data-footer-Exist="false">
-+ *
-+ * How to remove footer of whole page
-+ * <div data-role="page" id="no-contents-0" data-footer-User-Control="true">
-+ */
-+
- (function( $, undefined ) {
-
- $.mobile.page.prototype.options.backBtnText = "Back";
-@@ -10,6 +44,8 @@ $.mobile.page.prototype.options.backBtnTheme = null;
- $.mobile.page.prototype.options.headerTheme = "a";
- $.mobile.page.prototype.options.footerTheme = "a";
- $.mobile.page.prototype.options.contentTheme = null;
-+$.mobile.page.prototype.options.footerExist = true;
-+$.mobile.page.prototype.options.footerUserControl = false;
-
- $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", function( e ) {
-
-@@ -22,17 +58,23 @@ $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", functi
- var $this = $( this ),
- role = $this.jqmData( "role" ),
- theme = $this.jqmData( "theme" ),
-- contentTheme = theme || o.contentTheme || ( pageRole === "dialog" && pageTheme ),
-+ contentTheme = theme || o.contentTheme || pageTheme,
- $headeranchors,
- leftbtn,
- rightbtn,
- backBtn;
-+
-+ var normalFooter,
-+ footerExist = $this.jqmData("footerexist");
-+
-+ if ( footerExist != undefined ) {
-+ o.footerExist = footerExist;
-+ }
-
- $this.addClass( "ui-" + role );
-
- //apply theming and markup modifications to page,header,content,footer
- if ( role === "header" || role === "footer" ) {
--
- var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;
-
- $this
-@@ -47,20 +89,31 @@ $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", functi
- rightbtn = $headeranchors.hasClass( "ui-btn-right" );
-
- leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
--
- rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
-+
-+ // set default userControl value
-+ if ( o.footerUserControl ) {
-+ $.mobile.page.prototype.options.footerUserControl = "true";
-+ }
-
- // Auto-add back btn on pages beyond first view
-+ // create backbtn in case footer exist
- if ( o.addBackBtn &&
-- role === "header" &&
-- $( ".ui-page" ).length > 1 &&
-+ role === "footer" &&
-+ o.footerExist &&
- $this.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
- !leftbtn ) {
-
-- backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
-+ backBtn = $( "<a href='#' class='ui-btn-back' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='header-back-btn'></a>" )
- // If theme is provided, override default inheritance
- .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
- .prependTo( $this );
-+
-+
-+ backBtn.bind( "vclick", function( event ) {
-+ window.history.back();
-+ return false;
-+ });
- }
-
- // Page title
-@@ -80,8 +133,38 @@ $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", functi
-
- // Add ARIA role
- $this.attr( "role", "main" );
-+
-+ /* Add default footer to add backbtn */
-+ thisTheme = "s";
-+
-+ if ( o.footerExist ) {
-+ backBtn = $( "<a href='#' class='ui-btn-back' data-" +
-+ $.mobile.ns + "rel='back' data-" +
-+ $.mobile.ns + "icon='header-back-btn'></a>" )
-+ .attr( "data-" + $.mobile.ns + "theme", o.backBtnTheme || thisTheme );
-+ var footer = $page.find("div:jqmData(role='footer')");
-+
-+ if ( footer.length != 0 ) {
-+ if ( !footer.find("jqmData(role='navbar')").is("jqmData(style='tabbar')") ) {
-+ backBtn.appendTo( footer );
-+ }
-+ } else {
-+ if ( !$.mobile.page.prototype.options.footerUserControl ) {
-+ normalFooter = $( "<div data-role='footer' class='ui-footer ui-bar-s ui-footer-fixed fade ui-fixed-overlay' data-position='fixed'></div>" )
-+ .insertAfter( $page.find( ".ui-content" ) );
-+ backBtn.appendTo( normalFooter );
-+ }
-+ }
-+
-+ if ( backBtn ) {
-+ backBtn.bind( "vclick", function( event ) {
-+ window.history.back();
-+ return false;
-+ });
-+ }
-+ }
- }
- });
- });
-
--})( jQuery );
-\ No newline at end of file
-+})( jQuery );
---
-1.7.5.4
-
--- /dev/null
+From c70b1f818389c9703af17bb59e1f78f4eefa7c65 Mon Sep 17 00:00:00 2001
+From: wongi11.lee <wongi11.lee@samsung.com>
+Date: Fri, 29 Jun 2012 13:24:49 +0900
+Subject: [PATCH] JQM remove 'search' from forms.textinput.
+
+Change-Id: I3de28a38dad8cfcc40a6e98273107e5beabb836e
+Signed-off-by: wongi11.lee <wongi11.lee@samsung.com>
+---
+ .../js/jquery.mobile.forms.textinput.js | 49 +++----------------
+ 1 files changed, 8 insertions(+), 41 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.textinput.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.textinput.js
+index f444522..a06d54d 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.textinput.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.textinput.js
+@@ -13,8 +13,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
+ theme: null,
+ // This option defaults to true on iOS devices.
+ preventFocusZoom: /iPhone|iPad|iPod/.test( navigator.platform ) && navigator.userAgent.indexOf( "AppleWebKit" ) > -1,
+- initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type])",
+- clearSearchButtonText: "clear text"
++ initSelector: "input[type='text'], input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type])"
+ },
+
+ _create: function() {
+@@ -46,41 +45,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
+ }
+
+
+- //"search" input widget
+- if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
+-
+- focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + miniclass + "'></div>" ).parent();
+- clearbtn = $( "<a href='#' class='ui-input-clear' title='" + o.clearSearchButtonText + "'>" + o.clearSearchButtonText + "</a>" )
+- .bind('click', function( event ) {
+- input
+- .val( "" )
+- .focus()
+- .trigger( "change" );
+- clearbtn.addClass( "ui-input-clear-hidden" );
+- event.preventDefault();
+- })
+- .appendTo( focusedEl )
+- .buttonMarkup({
+- icon: "delete",
+- iconpos: "notext",
+- corners: true,
+- shadow: true,
+- mini: mini
+- });
+-
+- function toggleClear() {
+- setTimeout(function() {
+- clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
+- }, 0);
+- }
+-
+- toggleClear();
+-
+- input.bind('paste cut keyup focus change blur', toggleClear);
+-
+- } else {
+- input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass );
+- }
++ input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass );
+
+ input.focus(function() {
+ focusedEl.addClass( $.mobile.focusClass );
+@@ -133,13 +98,15 @@ $.widget( "mobile.textinput", $.mobile.widget, {
+ },
+
+ disable: function(){
+- ( this.element.attr( "disabled", true ).is( "[type='search'],:jqmData(type='search')" ) ?
+- this.element.parent() : this.element ).addClass( "ui-disabled" );
++ if ( this.element.attr( "disabled", true ) ) {
++ this.element.addClass( "ui-disabled" );
++ }
+ },
+
+ enable: function(){
+- ( this.element.attr( "disabled", false).is( "[type='search'],:jqmData(type='search')" ) ?
+- this.element.parent() : this.element ).removeClass( "ui-disabled" );
++ if ( this.element.attr( "disabled", false) ) {
++ this.element.removeClass( "ui-disabled" );
++ }
+ }
+ });
+
+--
+1.7.0.4
+
+++ /dev/null
-From 412619cb65dfa87ee6485afa6bbe810a2705dd67 Mon Sep 17 00:00:00 2001
-From: Minkyu Kang <mk7.kang@samsung.com>
-Date: Wed, 29 Feb 2012 16:46:14 +0900
-Subject: [PATCH] JQM: checkbox pressed, no-lable support
-
-Signed-off-by: Koeun Choi <koeun.choi@samsung.com>
----
- .../js/jquery.mobile.forms.checkboxradio.js | 57 ++++++++++++++++++-
- 1 files changed, 54 insertions(+), 3 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.forms.checkboxradio.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.forms.checkboxradio.js
-index d09a422..9243f2e 100644
---- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.forms.checkboxradio.js
-+++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.forms.checkboxradio.js
-@@ -25,10 +25,23 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
- checkedicon = "ui-icon-" + checkedState,
- uncheckedicon = "ui-icon-" + uncheckedState;
-
-+ var checkedpressedicon = checkedicon + "-press",
-+ uncheckedpressedicon = uncheckedicon + "-press";
-+
- if ( inputtype !== "checkbox" && inputtype !== "radio" ) {
- return;
- }
-
-+ // Support fake label
-+ if ( label.length == 0 ) {
-+ label = $( "<label for='" + input[ 0 ].id +
-+ "' style='display:block;width:1px;height:1px;'></label>" );
-+ }
-+
-+ // Wrap the input + label in a div
-+ input.add( label )
-+ .wrapAll( "<div class='ui-" + inputtype + "'></div>" );
-+
- // Expose for other methods
- $.extend( this, {
- label: label,
-@@ -36,6 +49,8 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
- checkedClass: checkedClass,
- uncheckedClass: uncheckedClass,
- checkedicon: checkedicon,
-+ checkedpressedicon: checkedpressedicon,
-+ uncheckedpressedicon: uncheckedpressedicon,
- uncheckedicon: uncheckedicon
- });
-
-@@ -50,11 +65,19 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
- shadow: false
- });
-
-- // Wrap the input + label in a div
-- input.add( label )
-- .wrapAll( "<div class='ui-" + inputtype + "'></div>" );
-+ if ( input.hasClass( "favorite" ) ) {
-+ input.parent().addClass( "favorite" ).end();
-+ }
-
- label.bind({
-+ vmousedown: function() {
-+ self.press();
-+ },
-+ vmouseup: function() {
-+ self.unpress();
-+ },
-+
-+
- vmouseover: function( event ) {
- if ( $( this ).parent().is( ".ui-disabled" ) ) {
- event.stopPropagation();
-@@ -154,6 +177,34 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
- .checkboxradio( "refresh" );
- },
-
-+ press: function() {
-+ var input = this.element,
-+ label = this.label,
-+ icon = label.find( ".ui-icon" );
-+
-+ if ( !$( input[ 0 ] ).is( ":disabled" ) ) {
-+ if ( $( input[ 0 ] ).prop( "checked" ) ) {
-+ icon.addClass( this.uncheckedpressedicon ).removeClass( this.checkedicon );
-+ } else {
-+ icon.removeClass( this.uncheckedicon ).addClass( this.checkedpressedicon );
-+ }
-+ }
-+ },
-+
-+ unpress: function() {
-+ var input = this.element,
-+ label = this.label,
-+ icon = label.find( ".ui-icon" );
-+
-+ if ( !$( input[ 0 ] ).is( ":disabled" ) ) {
-+ if ( $( input[ 0 ] ).prop( "checked" ) ) {
-+ icon.removeClass( this.uncheckedpressedicon ).addClass( this.uncheckedicon );
-+ } else {
-+ icon.addClass( this.checkedicon ).removeClass( this.checkedpressedicon );
-+ }
-+ }
-+ },
-+
- refresh: function() {
- var input = this.element,
- label = this.label,
---
-1.7.5.4
-
--- /dev/null
+From c0960209ffd4540404d680331f54bdac872476ac Mon Sep 17 00:00:00 2001
+From: wongi11.lee <wongi11.lee@samsung.com>
+Date: Fri, 29 Jun 2012 14:25:03 +0900
+Subject: [PATCH] JQM remove auto populated right-arrow button.
+
+Change-Id: I57c6583aee484c8dedb4a49f12e9dfa2b1bf6b85
+Signed-off-by: wongi11.lee <wongi11.lee@samsung.com>
+---
+ .../js/jquery.mobile.listview.js | 5 +++++
+ 1 files changed, 5 insertions(+), 0 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js
+index f3fabfa..4ccdd73 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js
+@@ -188,6 +188,11 @@ $.widget( "mobile.listview", $.mobile.widget, {
+ if ( a.length ) {
+ icon = item.jqmData("icon");
+
++ /* Remove auto populated right-arrow button. */
++ if ( icon === undefined ) {
++ icon = false;
++ }
++
+ item.buttonMarkup({
+ wrapperEls: "div",
+ shadow: false,
+--
+1.7.0.4
+
--- /dev/null
+From b4ca5396f3d90e5f7ce05fba7f4d4182a6921e4b Mon Sep 17 00:00:00 2001
+From: wongi11.lee <wongi11.lee@samsung.com>
+Date: Mon, 2 Jul 2012 16:01:35 +0900
+Subject: [PATCH] JQM change button hoverDelay to 0 to improve response.
+
+Change-Id: Ie37bc90d86a94a2ea48819386a76fe976b91aa79
+Signed-off-by: wongi11.lee <wongi11.lee@samsung.com>
+---
+ .../jquery-mobile-1.1.0/js/jquery.mobile.core.js | 2 +-
+ 1 files changed, 1 insertions(+), 1 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.core.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.core.js
+index 7bde672..9007c36 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.core.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.core.js
+@@ -87,7 +87,7 @@ define( [ "jquery", "../external/requirejs/text!../version.txt", "./jquery.mobil
+ orientationChangeEnabled: true,
+
+ buttonMarkup: {
+- hoverDelay: 200
++ hoverDelay: 0
+ },
+
+ // TODO might be useful upstream in jquery itself ?
+--
+1.7.0.4
+
+++ /dev/null
-From 83fdd7d7b42cc8a9326f0f991d6a1928c83fb8cf Mon Sep 17 00:00:00 2001
-From: Lee Wongi <wongi11.lee@samsung.com>
-Date: Wed, 29 Feb 2012 14:21:44 +0900
-Subject: [PATCH] JQM remove search init selector and functions.
-
-Signed-off-by: Lee Wongi <wongi11.lee@samsung.com>
----
- .../js/jquery.mobile.forms.textinput.js | 41 ++------------------
- 1 files changed, 4 insertions(+), 37 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.forms.textinput.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.forms.textinput.js
-index f44c8a8..44cab9b 100644
---- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.forms.textinput.js
-+++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.forms.textinput.js
-@@ -7,7 +7,7 @@
- $.widget( "mobile.textinput", $.mobile.widget, {
- options: {
- theme: null,
-- initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type])"
-+ initSelector: "input[type='text'], input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type])"
- },
-
- _create: function() {
-@@ -37,38 +37,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
- }
-
-
-- //"search" input widget
-- if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
--
-- focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + "'></div>" ).parent();
-- clearbtn = $( "<a href='#' class='ui-input-clear' title='clear text'>clear text</a>" )
-- .tap(function( event ) {
-- input.val( "" ).focus();
-- input.trigger( "change" );
-- clearbtn.addClass( "ui-input-clear-hidden" );
-- event.preventDefault();
-- })
-- .appendTo( focusedEl )
-- .buttonMarkup({
-- icon: "delete",
-- iconpos: "notext",
-- corners: true,
-- shadow: true
-- });
--
-- function toggleClear() {
-- setTimeout(function() {
-- clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
-- }, 0);
-- }
--
-- toggleClear();
--
-- input.bind('paste cut keyup focus change blur', toggleClear);
--
-- } else {
-- input.addClass( "ui-corner-all ui-shadow-inset" + themeclass );
-- }
-+ input.addClass( "ui-corner-all ui-shadow-inset" + themeclass );
-
- input.focus(function() {
- focusedEl.addClass( "ui-focus" );
-@@ -110,13 +79,11 @@ $.widget( "mobile.textinput", $.mobile.widget, {
- },
-
- disable: function(){
-- ( this.element.attr( "disabled", true ).is( "[type='search'],:jqmData(type='search')" ) ?
-- this.element.parent() : this.element ).addClass( "ui-disabled" );
-+ this.element.attr( "disabled", true ).addClass( "ui-disabled" );
- },
-
- enable: function(){
-- ( this.element.attr( "disabled", false).is( "[type='search'],:jqmData(type='search')" ) ?
-- this.element.parent() : this.element ).removeClass( "ui-disabled" );
-+ this.element.attr( "disabled", false).removeClass( "ui-disabled" );
- }
- });
-
---
-1.7.0.4
-
--- /dev/null
+From bf9dc02776446faee9e5587360584d9d9b9b135e Mon Sep 17 00:00:00 2001
+From: Youmin Ha <youmin.ha@samsung.com>
+Date: Tue, 3 Jul 2012 15:07:07 +0900
+Subject: [PATCH] JQM:Prevent blinking on page transition
+
+Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
+Signed-off-by: Youmin Ha <youmin.ha@samsung.com>
+---
+ .../js/jquery.mobile.transition.js | 11 ++++++++++-
+ 1 file changed, 10 insertions(+), 1 deletion(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.transition.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.transition.js
+index 56f93a6..e5555e8 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.transition.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.transition.js
+@@ -29,6 +29,15 @@ var createHandler = function( sequential ){
+ $.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
+ },
+ scrollPage = function(){
++ // Prevent blinking on page scrolling in Tizen/Android devices.
++ // Don't scoll window, when current scroll top(scrollTop()) is already at toScroll,
++ // or when current scroll top is 0 and toScroll is same to defaultHomeScroll
++ // (which means the top position of page). In these case, page scrolling is not needed.
++ var st = $( window ).scrollTop();
++ if( st === toScroll || ( $.mobile.defaultHomeScroll === toScroll && st == 0 ) ) {
++ return;
++ }
++
+ // By using scrollTo instead of silentScroll, we can keep things better in order
+ // Just to be precautios, disable scrollstart listening like silentScroll would
+ $.event.special.scrollstart.enabled = false;
+@@ -150,4 +159,4 @@ $.mobile.transitionFallbacks = {};
+ })( jQuery, this );
+ //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+ });
+-//>>excludeEnd("jqmBuildExclude");
+\ No newline at end of file
++//>>excludeEnd("jqmBuildExclude");
+--
+1.7.9.5
+
+++ /dev/null
-From 88c84e8e486540403b51573a28350a707f4b60ef Mon Sep 17 00:00:00 2001
-From: Minkyu Kang <mk7.kang@samsung.com>
-Date: Wed, 29 Feb 2012 16:56:24 +0900
-Subject: [PATCH] JQM change input's type on fixed header
-
-Signed-off-by: Lee Wongi <wongi11.lee@samsung.com>
----
- .../js/jquery.mobile.fixHeaderFooter.js | 2 +-
- 1 files changed, 1 insertions(+), 1 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
-index 0216c65..8fd9357 100644
---- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
-+++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
-@@ -291,7 +291,7 @@ $.mobile.fixedToolbars = (function() {
- .addClass("ui-title-content-option-header-expanded-1line-height");
- }
- }
-- } else if ( s_theme_header.find("input").jqmData("type") == "search" ) {
-+ } else if( s_theme_header.find("input").attr("type") === "search" || s_theme_header.find("input").attr("type") === "tizen-search" ) {
- s_theme_content
- .removeClass("ui-title-content-" + title_style + "-height")
- .addClass("ui-title-content-search");
---
-1.7.5.4
-
--- /dev/null
+From 15b17c830a4d9737b23da195e23ed02aabcf2c36 Mon Sep 17 00:00:00 2001
+From: Jun Jinhyuk <jinhyuk.jun@samsung.com>
+Date: Fri, 6 Jul 2012 07:15:19 -0400
+Subject: [PATCH] JQM add refresh api to page
+
+---
+ .../jquery-mobile-1.1.0/js/jquery.mobile.page.js | 12 ++++++++----
+ 1 files changed, 8 insertions(+), 4 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.js
+index d2bd195..85c77fe 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.js
+@@ -15,9 +15,9 @@ $.widget( "mobile.page", $.mobile.widget, {
+ },
+
+ _create: function() {
+-
++
+ var self = this;
+-
++
+ // if false is returned by the callbacks do not create the page
+ if( self._trigger( "beforecreate" ) === false ){
+ return false;
+@@ -34,11 +34,15 @@ $.widget( "mobile.page", $.mobile.widget, {
+ } );
+
+ },
+-
++
++ refresh : function() {
++ $( ".ui-page-active" ).children( ".ui-content" ).trigger("updatelayout", ["external"]);
++ },
++
+ removeContainerBackground: function(){
+ $.mobile.pageContainer.removeClass( "ui-overlay-" + $.mobile.getInheritedTheme( this.element.parent() ) );
+ },
+-
++
+ // set the page container background to the page theme
+ setContainerBackground: function( theme ){
+ if( this.options.theme ){
+--
+1.7.4.1
+
+++ /dev/null
-From 8983a5b902ea20d879321cad4162c91b0efd6bbf Mon Sep 17 00:00:00 2001
-From: Youmin Ha <youmin.ha@samsung.com>
-Date: Fri, 16 Mar 2012 15:16:03 +0900
-Subject: [PATCH] jQuery: Remove layerX, layerY events which is deprecated in webkit
-
-Signed-off-by: Youmin Ha <youmin.ha@samsung.com>
----
- libs/js/jquery-1.6.4.js | 2 +-
- libs/js/jquery-1.6.4.min.js | 4 ++--
- 2 files changed, 3 insertions(+), 3 deletions(-)
-
-diff --git a/libs/js/jquery-1.6.4.js b/libs/js/jquery-1.6.4.js
-index 11e6d06..2c12adb 100644
---- a/libs/js/jquery-1.6.4.js
-+++ b/libs/js/jquery-1.6.4.js
-@@ -3016,7 +3016,7 @@ jQuery.event = {
- return event.result;
- },
-
-- props: "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),
-+ props: "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),
-
- fix: function( event ) {
- if ( event[ jQuery.expando ] ) {
-diff --git a/libs/js/jquery-1.6.4.min.js b/libs/js/jquery-1.6.4.min.js
-index 628ed9b..1d70aab 100644
---- a/libs/js/jquery-1.6.4.min.js
-+++ b/libs/js/jquery-1.6.4.min.js
-@@ -1,4 +1,4 @@
- /*! jQuery v1.6.4 http://jquery.com/ | http://jquery.org/license */
- (function(a,b){function cu(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cr(a){if(!cg[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){ch||(ch=c.createElement("iframe"),ch.frameBorder=ch.width=ch.height=0),b.appendChild(ch);if(!ci||!ch.createElement)ci=(ch.contentWindow||ch.contentDocument).document,ci.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),ci.close();d=ci.createElement(a),ci.body.appendChild(d),e=f.css(d,"display"),b.removeChild(ch)}cg[a]=e}return cg[a]}function cq(a,b){var c={};f.each(cm.concat.apply([],cm.slice(0,b)),function(){c[this]=a});return c}function cp(){cn=b}function co(){setTimeout(cp,0);return cn=f.now()}function cf(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ce(){try{return new a.XMLHttpRequest}catch(b){}}function b$(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function bZ(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function bY(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bA.test(a)?d(a,e):bY(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)bY(a+"["+e+"]",b[e],c,d);else d(a,b)}function bX(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function bW(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bP,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=bW(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=bW(a,c,d,e,"*",g));return l}function bV(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bL),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function by(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bt:bu;if(d>0){c!=="border"&&f.each(e,function(){c||(d-=parseFloat(f.css(a,"padding"+this))||0),c==="margin"?d+=parseFloat(f.css(a,c+this))||0:d-=parseFloat(f.css(a,"border"+this+"Width"))||0});return d+"px"}d=bv(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0,c&&f.each(e,function(){d+=parseFloat(f.css(a,"padding"+this))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+this+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+this))||0)});return d+"px"}function bl(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bd,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bk(a){f.nodeName(a,"input")?bj(a):"getElementsByTagName"in a&&f.grep(a.getElementsByTagName("input"),bj)}function bj(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bi(a){return"getElementsByTagName"in a?a.getElementsByTagName("*"):"querySelectorAll"in a?a.querySelectorAll("*"):[]}function bh(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bg(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c=f.expando,d=f.data(a),e=f.data(b,d);if(d=d[c]){var g=d.events;e=e[c]=f.extend({},d);if(g){delete e.handle,e.events={};for(var h in g)for(var i=0,j=g[h].length;i<j;i++)f.event.add(b,h+(g[h][i].namespace?".":"")+g[h][i].namespace,g[h][i],g[h][i].data)}}}}function bf(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function V(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(Q.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function U(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function M(a,b){return(a&&a!=="*"?a+".":"")+b.replace(y,"`").replace(z,"&")}function L(a){var b,c,d,e,g,h,i,j,k,l,m,n,o,p=[],q=[],r=f._data(this,"events");if(!(a.liveFired===this||!r||!r.live||a.target.disabled||a.button&&a.type==="click")){a.namespace&&(n=new RegExp("(^|\\.)"+a.namespace.split(".").join("\\.(?:.*\\.)?")+"(\\.|$)")),a.liveFired=this;var s=r.live.slice(0);for(i=0;i<s.length;i++)g=s[i],g.origType.replace(w,"")===a.type?q.push(g.selector):s.splice(i--,1);e=f(a.target).closest(q,a.currentTarget);for(j=0,k=e.length;j<k;j++){m=e[j];for(i=0;i<s.length;i++){g=s[i];if(m.selector===g.selector&&(!n||n.test(g.namespace))&&!m.elem.disabled){h=m.elem,d=null;if(g.preType==="mouseenter"||g.preType==="mouseleave")a.type=g.preType,d=f(a.relatedTarget).closest(g.selector)[0],d&&f.contains(h,d)&&(d=h);(!d||d!==h)&&p.push({elem:h,handleObj:g,level:m.level})}}}for(j=0,k=p.length;j<k;j++){e=p[j];if(c&&e.level>c)break;a.currentTarget=e.elem,a.data=e.handleObj.data,a.handleObj=e.handleObj,o=e.handleObj.origHandler.apply(e.elem,arguments);if(o===!1||a.isPropagationStopped()){c=e.level,o===!1&&(b=!1);if(a.isImmediatePropagationStopped())break}}return b}}function J(a,c,d){var e=f.extend({},d[0]);e.type=a,e.originalEvent={},e.liveFired=b,f.event.handle.call(c,e),e.isDefaultPrevented()&&d[0].preventDefault()}function D(){return!0}function C(){return!1}function m(a,c,d){var e=c+"defer",g=c+"queue",h=c+"mark",i=f.data(a,e,b,!0);i&&(d==="queue"||!f.data(a,g,b,!0))&&(d==="mark"||!f.data(a,h,b,!0))&&setTimeout(function(){!f.data(a,g,b,!0)&&!f.data(a,h,b,!0)&&(f.removeData(a,e,!0),i.resolve())},0)}function l(a){for(var b in a)if(b!=="toJSON")return!1;return!0}function k(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(j,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNaN(d)?i.test(d)?f.parseJSON(d):d:parseFloat(d)}catch(g){}f.data(a,c,d)}else d=b}return d}var c=a.document,d=a.navigator,e=a.location,f=function(){function K(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(K,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/\d/,n=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,o=/^[\],:{}\s]*$/,p=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,q=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,r=/(?:^|:|,)(?:\s*\[)+/g,s=/(webkit)[ \/]([\w.]+)/,t=/(opera)(?:.*version)?[ \/]([\w.]+)/,u=/(msie) ([\w.]+)/,v=/(mozilla)(?:.*? rv:([\w.]+))?/,w=/-([a-z]|[0-9])/ig,x=/^-ms-/,y=function(a,b){return(b+"").toUpperCase()},z=d.userAgent,A,B,C,D=Object.prototype.toString,E=Object.prototype.hasOwnProperty,F=Array.prototype.push,G=Array.prototype.slice,H=String.prototype.trim,I=Array.prototype.indexOf,J={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=n.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.6.4",length:0,size:function(){return this.length},toArray:function(){return G.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?F.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),B.done(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(G.apply(this,arguments),"slice",G.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:F,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;B.resolveWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").unbind("ready")}},bindReady:function(){if(!B){B=e._Deferred();if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",C,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",C),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&K()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNaN:function(a){return a==null||!m.test(a)||isNaN(a)},type:function(a){return a==null?String(a):J[D.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!E.call(a,"constructor")&&!E.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||E.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw a},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(o.test(b.replace(p,"@").replace(q,"]").replace(r,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(x,"ms-").replace(w,y)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:H?function(a){return a==null?"":H.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?F.call(c,a):e.merge(c,a)}return c},inArray:function(a,b){if(!b)return-1;if(I)return I.call(b,a);for(var c=0,d=b.length;c<d;c++)if(b[c]===a)return c;return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=G.call(arguments,2),g=function(){return a.apply(c,f.concat(G.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=s.exec(a)||t.exec(a)||u.exec(a)||a.indexOf("compatible")<0&&v.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){J["[object "+b+"]"]=b.toLowerCase()}),A=e.uaMatch(z),A.browser&&(e.browser[A.browser]=!0,e.browser.version=A.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?C=function(){c.removeEventListener("DOMContentLoaded",C,!1),e.ready()}:c.attachEvent&&(C=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",C),e.ready())});return e}(),g="done fail isResolved isRejected promise then always pipe".split(" "),h=[].slice;f.extend({_Deferred:function(){var a=[],b,c,d,e={done:function(){if(!d){var c=arguments,g,h,i,j,k;b&&(k=b,b=0);for(g=0,h=c.length;g<h;g++)i=c[g],j=f.type(i),j==="array"?e.done.apply(e,i):j==="function"&&a.push(i);k&&e.resolveWith(k[0],k[1])}return this},resolveWith:function(e,f){if(!d&&!b&&!c){f=f||[],c=1;try{while(a[0])a.shift().apply(e,f)}finally{b=[e,f],c=0}}return this},resolve:function(){e.resolveWith(this,arguments);return this},isResolved:function(){return!!c||!!b},cancel:function(){d=1,a=[];return this}};return e},Deferred:function(a){var b=f._Deferred(),c=f._Deferred(),d;f.extend(b,{then:function(a,c){b.done(a).fail(c);return this},always:function(){return b.done.apply(b,arguments).fail.apply(this,arguments)},fail:c.done,rejectWith:c.resolveWith,reject:c.resolve,isRejected:c.isResolved,pipe:function(a,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[c,"reject"]},function(a,c){var e=c[0],g=c[1],h;f.isFunction(e)?b[a](function(){h=e.apply(this,arguments),h&&f.isFunction(h.promise)?h.promise().then(d.resolve,d.reject):d[g+"With"](this===b?d:this,[h])}):b[a](d[g])})}).promise()},promise:function(a){if(a==null){if(d)return d;d=a={}}var c=g.length;while(c--)a[g[c]]=b[g[c]];return a}}),b.done(c.cancel).fail(b.cancel),delete b.cancel,a&&a.call(b,b);return b},when:function(a){function i(a){return function(c){b[a]=arguments.length>1?h.call(arguments,0):c,--e||g.resolveWith(g,h.call(b,0))}}var b=arguments,c=0,d=b.length,e=d,g=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred();if(d>1){for(;c<d;c++)b[c]&&f.isFunction(b[c].promise)?b[c].promise().then(i(c),g.reject):--e;e||g.resolveWith(g,b)}else g!==a&&g.resolveWith(g,d?[a]:[]);return g.promise()}}),f.support=function(){var a=c.createElement("div"),b=c.documentElement,d,e,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u;a.setAttribute("className","t"),a.innerHTML=" <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=a.getElementsByTagName("*"),e=a.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=a.getElementsByTagName("input")[0],k={leadingWhitespace:a.firstChild.nodeType===3,tbody:!a.getElementsByTagName("tbody").length,htmlSerialize:!!a.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55$/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:a.className!=="t",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,k.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,k.optDisabled=!h.disabled;try{delete a.test}catch(v){k.deleteExpando=!1}!a.addEventListener&&a.attachEvent&&a.fireEvent&&(a.attachEvent("onclick",function(){k.noCloneEvent=!1}),a.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),k.radioValue=i.value==="t",i.setAttribute("checked","checked"),a.appendChild(i),l=c.createDocumentFragment(),l.appendChild(a.firstChild),k.checkClone=l.cloneNode(!0).cloneNode(!0).lastChild.checked,a.innerHTML="",a.style.width=a.style.paddingLeft="1px",m=c.getElementsByTagName("body")[0],o=c.createElement(m?"div":"body"),p={visibility:"hidden",width:0,height:0,border:0,margin:0,background:"none"},m&&f.extend(p,{position:"absolute",left:"-1000px",top:"-1000px"});for(t in p)o.style[t]=p[t];o.appendChild(a),n=m||b,n.insertBefore(o,n.firstChild),k.appendChecked=i.checked,k.boxModel=a.offsetWidth===2,"zoom"in a.style&&(a.style.display="inline",a.style.zoom=1,k.inlineBlockNeedsLayout=a.offsetWidth===2,a.style.display="",a.innerHTML="<div style='width:4px;'></div>",k.shrinkWrapBlocks=a.offsetWidth!==2),a.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",q=a.getElementsByTagName("td"),u=q[0].offsetHeight===0,q[0].style.display="",q[1].style.display="none",k.reliableHiddenOffsets=u&&q[0].offsetHeight===0,a.innerHTML="",c.defaultView&&c.defaultView.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",a.appendChild(j),k.reliableMarginRight=(parseInt((c.defaultView.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0),o.innerHTML="",n.removeChild(o);if(a.attachEvent)for(t in{submit:1,change:1,focusin:1})s="on"+t,u=s in a,u||(a.setAttribute(s,"return;"),u=typeof a[s]=="function"),k[t+"Bubbles"]=u;o=l=g=h=m=j=a=i=null;return k}(),f.boxModel=f.support.boxModel;var i=/^(?:\{.*\}|\[.*\])$/,j=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!l(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i=f.expando,j=typeof c=="string",k=a.nodeType,l=k?f.cache:a,m=k?a[f.expando]:a[f.expando]&&f.expando;if((!m||e&&m&&l[m]&&!l[m][i])&&j&&d===b)return;m||(k?a[f.expando]=m=++f.uuid:m=f.expando),l[m]||(l[m]={},k||(l[m].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?l[m][i]=f.extend(l[m][i],c):l[m]=f.extend(l[m],c);g=l[m],e&&(g[i]||(g[i]={}),g=g[i]),d!==b&&(g[f.camelCase(c)]=d);if(c==="events"&&!g[c])return g[i]&&g[i].events;j?(h=g[c],h==null&&(h=g[f.camelCase(c)])):h=g;return h}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e=f.expando,g=a.nodeType,h=g?f.cache:a,i=g?a[f.expando]:f.expando;if(!h[i])return;if(b){d=c?h[i][e]:h[i];if(d){d[b]||(b=f.camelCase(b)),delete d[b];if(!l(d))return}}if(c){delete h[i][e];if(!l(h[i]))return}var j=h[i][e];f.support.deleteExpando||!h.setInterval?delete h[i]:h[i]=null,j?(h[i]={},g||(h[i].toJSON=f.noop),h[i][e]=j):g&&(f.support.deleteExpando?delete a[f.expando]:a.removeAttribute?a.removeAttribute(f.expando):a[f.expando]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d=null;if(typeof a=="undefined"){if(this.length){d=f.data(this[0]);if(this[0].nodeType===1){var e=this[0].attributes,g;for(var h=0,i=e.length;h<i;h++)g=e[h].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),k(this[0],g,d[g]))}}return d}if(typeof a=="object")return this.each(function(){f.data(this,a)});var j=a.split(".");j[1]=j[1]?"."+j[1]:"";if(c===b){d=this.triggerHandler("getData"+j[1]+"!",[j[0]]),d===b&&this.length&&(d=f.data(this[0],a),d=k(this[0],a,d));return d===b&&j[1]?this.data(j[0]):d}return this.each(function(){var b=f(this),d=[j[0],c];b.triggerHandler("setData"+j[1]+"!",d),f.data(this,a,c),b.triggerHandler("changeData"+j[1]+"!",d)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,c){a&&(c=(c||"fx")+"mark",f.data(a,c,(f.data(a,c,b,!0)||0)+1,!0))},_unmark:function(a,c,d){a!==!0&&(d=c,c=a,a=!1);if(c){d=d||"fx";var e=d+"mark",g=a?0:(f.data(c,e,b,!0)||1)-1;g?f.data(c,e,g,!0):(f.removeData(c,e,!0),m(c,d,"mark"))}},queue:function(a,c,d){if(a){c=(c||"fx")+"queue";var e=f.data(a,c,b,!0);d&&(!e||f.isArray(d)?e=f.data(a,c,f.makeArray(d),!0):e.push(d));return e||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e;d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),d.call(a,function(){f.dequeue(a,b)})),c.length||(f.removeData(a,b+"queue",!0),m(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(){var c=this;setTimeout(function(){f.dequeue(c,b)},a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f._Deferred(),!0))h++,l.done(m);m();return d.promise()}});var n=/[\n\t\r]/g,o=/\s+/,p=/\r/g,q=/^(?:button|input)$/i,r=/^(?:button|input|object|select|textarea)$/i,s=/^a(?:rea)?$/i,t=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,u,v;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(o);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(o);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(n," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(o);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ";for(var c=0,d=this.length;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(n," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e=this[0];if(!arguments.length){if(e){c=f.valHooks[e.nodeName.toLowerCase()]||f.valHooks[e.type];if(c&&"get"in c&&(d=c.get(e,"value"))!==b)return d;d=e.value;return typeof d=="string"?d.replace(p,""):d==null?"":d}return b}var g=f.isFunction(a);return this.each(function(d){var e=f(this),h;if(this.nodeType===1){g?h=a.call(this,d,e.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c=a.selectedIndex,d=[],e=a.options,g=a.type==="select-one";if(c<0)return null;for(var h=g?c:0,i=g?c+1:e.length;h<i;h++){var j=e[h];if(j.selected&&(f.support.optDisabled?!j.disabled:j.getAttribute("disabled")===null)&&(!j.parentNode.disabled||!f.nodeName(j.parentNode,"optgroup"))){b=f(j).val();if(g)return b;d.push(b)}}if(g&&!d.length&&e.length)return f(e[c]).val();return d},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attrFix:{tabindex:"tabIndex"},attr:function(a,c,d,e){var g=a.nodeType;if(!a||g===3||g===8||g===2)return b;if(e&&c in f.attrFn)return f(a)[c](d);if(!("getAttribute"in a))return f.prop(a,c,d);var h,i,j=g!==1||!f.isXMLDoc(a);j&&(c=f.attrFix[c]||c,i=f.attrHooks[c],i||(t.test(c)?i=v:u&&(i=u)));if(d!==b){if(d===null){f.removeAttr(a,c);return b}if(i&&"set"in i&&j&&(h=i.set(a,d,c))!==b)return h;a.setAttribute(c,""+d);return d}if(i&&"get"in i&&j&&(h=i.get(a,c))!==null)return h;h=a.getAttribute(c);return h===null?b:h},removeAttr:function(a,b){var c;a.nodeType===1&&(b=f.attrFix[b]||b,f.attr(a,b,""),a.removeAttribute(b),t.test(b)&&(c=f.propFix[b]||b)in a&&(a[c]=!1))},attrHooks:{type:{set:function(a,b){if(q.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(u&&f.nodeName(a,"button"))return u.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(u&&f.nodeName(a,"button"))return u.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e=a.nodeType;if(!a||e===3||e===8||e===2)return b;var g,h,i=e!==1||!f.isXMLDoc(a);i&&(c=f.propFix[c]||c,h=f.propHooks[c]);return d!==b?h&&"set"in h&&(g=h.set(a,d,c))!==b?g:a[c]=d:h&&"get"in h&&(g=h.get(a,c))!==null?g:a[c]},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):r.test(a.nodeName)||s.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabIndex=f.propHooks.tabIndex,v={get:function(a,c){var d;return f.prop(a,c)===!0||(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},f.support.getSetAttribute||(u=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&d.nodeValue!==""?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})})),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var w=/\.(.*)$/,x=/^(?:textarea|input|select)$/i,y=/\./g,z=/ /g,A=/[^\w\s.|`]/g,B=function(a){return a.replace(A,"\\$&")};f.event={add:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){if(d===!1)d=C;else if(!d)return;var g,h;d.handler&&(g=d,d=g.handler),d.guid||(d.guid=f.guid++);var i=f._data(a);if(!i)return;var j=i.events,k=i.handle;j||(i.events=j={}),k||(i.handle=k=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.handle.apply(k.elem,arguments):b}),k.elem=a,c=c.split(" ");var l,m=0,n;while(l=c[m++]){h=g?f.extend({},g):{handler:d,data:e},l.indexOf(".")>-1?(n=l.split("."),l=n.shift(),h.namespace=n.slice(0).sort().join(".")):(n=[],h.namespace=""),h.type=l,h.guid||(h.guid=d.guid);var o=j[l],p=f.event.special[l]||{};if(!o){o=j[l]=[];if(!p.setup||p.setup.call(a,e,n,k)===!1)a.addEventListener?a.addEventListener(l,k,!1):a.attachEvent&&a.attachEvent("on"+l,k)}p.add&&(p.add.call(a,h),h.handler.guid||(h.handler.guid=d.guid)),o.push(h),f.event.global[l]=!0}a=null}},global:{},remove:function(a,c,d,e){if(a.nodeType!==3&&a.nodeType!==8){d===!1&&(d=C);var g,h,i,j,k=0,l,m,n,o,p,q,r,s=f.hasData(a)&&f._data(a),t=s&&s.events;if(!s||!t)return;c&&c.type&&(d=c.handler,c=c.type);if(!c||typeof c=="string"&&c.charAt(0)==="."){c=c||"";for(h in t)f.event.remove(a,h+c);return}c=c.split(" ");while(h=c[k++]){r=h,q=null,l=h.indexOf(".")<0,m=[],l||(m=h.split("."),h=m.shift(),n=new RegExp("(^|\\.)"+f.map(m.slice(0).sort(),B).join("\\.(?:.*\\.)?")+"(\\.|$)")),p=t[h];if(!p)continue;if(!d){for(j=0;j<p.length;j++){q=p[j];if(l||n.test(q.namespace))f.event.remove(a,r,q.handler,j),p.splice(j--,1)}continue}o=f.event.special[h]||{};for(j=e||0;j<p.length;j++){q=p[j];if(d.guid===q.guid){if(l||n.test(q.namespace))e==null&&p.splice(j--,1),o.remove&&o.remove.call(a,q);if(e!=null)break}}if(p.length===0||e!=null&&p.length===1)(!o.teardown||o.teardown.call(a,m)===!1)&&f.removeEvent(a,h,s.handle),g=null,delete
--t[h]}if(f.isEmptyObject(t)){var u=s.handle;u&&(u.elem=null),delete s.events,delete s.handle,f.isEmptyObject(s)&&f.removeData(a,b,!0)}}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){var h=c.type||c,i=[],j;h.indexOf("!")>=0&&(h=h.slice(0,-1),j=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if(!!e&&!f.event.customEvent[h]||!!f.event.global[h]){c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.exclusive=j,c.namespace=i.join("."),c.namespace_re=new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)");if(g||!e)c.preventDefault(),c.stopPropagation();if(!e){f.each(f.cache,function(){var a=f.expando,b=this[a];b&&b.events&&b.events[h]&&f.event.trigger(c,d,b.handle.elem)});return}if(e.nodeType===3||e.nodeType===8)return;c.result=b,c.target=e,d=d!=null?f.makeArray(d):[],d.unshift(c);var k=e,l=h.indexOf(":")<0?"on"+h:"";do{var m=f._data(k,"handle");c.currentTarget=k,m&&m.apply(k,d),l&&f.acceptData(k)&&k[l]&&k[l].apply(k,d)===!1&&(c.result=!1,c.preventDefault()),k=k.parentNode||k.ownerDocument||k===c.target.ownerDocument&&a}while(k&&!c.isPropagationStopped());if(!c.isDefaultPrevented()){var n,o=f.event.special[h]||{};if((!o._default||o._default.call(e.ownerDocument,c)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)){try{l&&e[h]&&(n=e[l],n&&(e[l]=null),f.event.triggered=h,e[h]())}catch(p){}n&&(e[l]=n),f.event.triggered=b}}return c.result}},handle:function(c){c=f.event.fix(c||a.event);var d=((f._data(this,"events")||{})[c.type]||[]).slice(0),e=!c.exclusive&&!c.namespace,g=Array.prototype.slice.call(arguments,0);g[0]=c,c.currentTarget=this;for(var h=0,i=d.length;h<i;h++){var j=d[h];if(e||c.namespace_re.test(j.namespace)){c.handler=j.handler,c.data=j.data,c.handleObj=j;var k=j.handler.apply(this,g);k!==b&&(c.result=k,k===!1&&(c.preventDefault(),c.stopPropagation()));if(c.isImmediatePropagationStopped())break}}return c.result},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(a){if(a[f.expando])return a;var d=a;a=f.Event(d);for(var e=this.props.length,g;e;)g=this.props[--e],a[g]=d[g];a.target||(a.target=a.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),!a.relatedTarget&&a.fromElement&&(a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement);if(a.pageX==null&&a.clientX!=null){var h=a.target.ownerDocument||c,i=h.documentElement,j=h.body;a.pageX=a.clientX+(i&&i.scrollLeft||j&&j.scrollLeft||0)-(i&&i.clientLeft||j&&j.clientLeft||0),a.pageY=a.clientY+(i&&i.scrollTop||j&&j.scrollTop||0)-(i&&i.clientTop||j&&j.clientTop||0)}a.which==null&&(a.charCode!=null||a.keyCode!=null)&&(a.which=a.charCode!=null?a.charCode:a.keyCode),!a.metaKey&&a.ctrlKey&&(a.metaKey=a.ctrlKey),!a.which&&a.button!==b&&(a.which=a.button&1?1:a.button&2?3:a.button&4?2:0);return a},guid:1e8,proxy:f.proxy,special:{ready:{setup:f.bindReady,teardown:f.noop},live:{add:function(a){f.event.add(this,M(a.origType,a.selector),f.extend({},a,{handler:L,guid:a.handler.guid}))},remove:function(a){f.event.remove(this,M(a.origType,a.selector),a)}},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}}},f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!this.preventDefault)return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?D:C):this.type=a,b&&f.extend(this,b),this.timeStamp=f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=D;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=D;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=D,this.stopPropagation()},isDefaultPrevented:C,isPropagationStopped:C,isImmediatePropagationStopped:C};var E=function(a){var b=a.relatedTarget,c=!1,d=a.type;a.type=a.data,b!==this&&(b&&(c=f.contains(this,b)),c||(f.event.handle.apply(this,arguments),a.type=d))},F=function(a){a.type=a.data,f.event.handle.apply(this,arguments)};f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={setup:function(c){f.event.add(this,b,c&&c.selector?F:E,a)},teardown:function(a){f.event.remove(this,b,a&&a.selector?F:E)}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(a,b){if(!f.nodeName(this,"form"))f.event.add(this,"click.specialSubmit",function(a){var b=a.target,c=f.nodeName(b,"input")||f.nodeName(b,"button")?b.type:"";(c==="submit"||c==="image")&&f(b).closest("form").length&&J("submit",this,arguments)}),f.event.add(this,"keypress.specialSubmit",function(a){var b=a.target,c=f.nodeName(b,"input")||f.nodeName(b,"button")?b.type:"";(c==="text"||c==="password")&&f(b).closest("form").length&&a.keyCode===13&&J("submit",this,arguments)});else return!1},teardown:function(a){f.event.remove(this,".specialSubmit")}});if(!f.support.changeBubbles){var G,H=function(a){var b=f.nodeName(a,"input")?a.type:"",c=a.value;b==="radio"||b==="checkbox"?c=a.checked:b==="select-multiple"?c=a.selectedIndex>-1?f.map(a.options,function(a){return a.selected}).join("-"):"":f.nodeName(a,"select")&&(c=a.selectedIndex);return c},I=function(c){var d=c.target,e,g;if(!!x.test(d.nodeName)&&!d.readOnly){e=f._data(d,"_change_data"),g=H(d),(c.type!=="focusout"||d.type!=="radio")&&f._data(d,"_change_data",g);if(e===b||g===e)return;if(e!=null||g)c.type="change",c.liveFired=b,f.event.trigger(c,arguments[1],d)}};f.event.special.change={filters:{focusout:I,beforedeactivate:I,click:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(c==="radio"||c==="checkbox"||f.nodeName(b,"select"))&&I.call(this,a)},keydown:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(a.keyCode===13&&!f.nodeName(b,"textarea")||a.keyCode===32&&(c==="checkbox"||c==="radio")||c==="select-multiple")&&I.call(this,a)},beforeactivate:function(a){var b=a.target;f._data(b,"_change_data",H(b))}},setup:function(a,b){if(this.type==="file")return!1;for(var c in G)f.event.add(this,c+".specialChange",G[c]);return x.test(this.nodeName)},teardown:function(a){f.event.remove(this,".specialChange");return x.test(this.nodeName)}},G=f.event.special.change.filters,G.focus=G.beforeactivate}f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){function e(a){var c=f.event.fix(a);c.type=b,c.originalEvent={},f.event.trigger(c,null,c.target),c.isDefaultPrevented()&&a.preventDefault()}var d=0;f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.each(["bind","one"],function(a,c){f.fn[c]=function(a,d,e){var g;if(typeof a=="object"){for(var h in a)this[c](h,d,a[h],e);return this}if(arguments.length===2||d===!1)e=d,d=b;c==="one"?(g=function(a){f(this).unbind(a,g);return e.apply(this,arguments)},g.guid=e.guid||f.guid++):g=e;if(a==="unload"&&c!=="one")this.one(a,d,e);else for(var i=0,j=this.length;i<j;i++)f.event.add(this[i],a,g,d);return this}}),f.fn.extend({unbind:function(a,b){if(typeof a=="object"&&!a.preventDefault)for(var c in a)this.unbind(c,a[c]);else for(var d=0,e=this.length;d<e;d++)f.event.remove(this[d],a,b);return this},delegate:function(a,b,c,d){return this.live(b,c,d,a)},undelegate:function(a,b,c){return arguments.length===0?this.unbind("live"):this.die(b,null,c,a)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f.data(this,"lastToggle"+a.guid)||0)%d;f.data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}});var K={focus:"focusin",blur:"focusout",mouseenter:"mouseover",mouseleave:"mouseout"};f.each(["live","die"],function(a,c){f.fn[c]=function(a,d,e,g){var h,i=0,j,k,l,m=g||this.selector,n=g?this:f(this.context);if(typeof a=="object"&&!a.preventDefault){for(var o in a)n[c](o,d,a[o],m);return this}if(c==="die"&&!a&&g&&g.charAt(0)==="."){n.unbind(g);return this}if(d===!1||f.isFunction(d))e=d||C,d=b;a=(a||"").split(" ");while((h=a[i++])!=null){j=w.exec(h),k="",j&&(k=j[0],h=h.replace(w,""));if(h==="hover"){a.push("mouseenter"+k,"mouseleave"+k);continue}l=h,K[h]?(a.push(K[h]+k),h=h+k):h=(K[h]||h)+k;if(c==="live")for(var p=0,q=n.length;p<q;p++)f.event.add(n[p],"live."+M(h,m),{data:d,selector:m,handler:e,origType:h,origHandler:e,preType:l});else n.unbind("live."+M(h,m),e)}return this}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0)}),function(){function u(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}if(i.nodeType===1){f||(i.sizcache=c,i.sizset=g);if(typeof b!="string"){if(i===b){j=!0;break}}else if(k.filter(b,[i]).length>0){j=i;break}}i=i[a]}d[g]=j}}}function t(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}i.nodeType===1&&!f&&(i.sizcache=c,i.sizset=g);if(i.nodeName.toLowerCase()===b){j=i;break}i=i[a]}d[g]=j}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d=0,e=Object.prototype.toString,g=!1,h=!0,i=/\\/g,j=/\W/;[0,0].sort(function(){h=!1;return 0});var k=function(b,d,f,g){f=f||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return f;var i,j,n,o,q,r,s,t,u=!0,w=k.isXML(d),x=[],y=b;do{a.exec(""),i=a.exec(y);if(i){y=i[3],x.push(i[1]);if(i[2]){o=i[3];break}}}while(i);if(x.length>1&&m.exec(b))if(x.length===2&&l.relative[x[0]])j=v(x[0]+x[1],d);else{j=l.relative[x[0]]?[d]:k(x.shift(),d);while(x.length)b=x.shift(),l.relative[b]&&(b+=x.shift()),j=v(b,j)}else{!g&&x.length>1&&d.nodeType===9&&!w&&l.match.ID.test(x[0])&&!l.match.ID.test(x[x.length-1])&&(q=k.find(x.shift(),d,w),d=q.expr?k.filter(q.expr,q.set)[0]:q.set[0]);if(d){q=g?{expr:x.pop(),set:p(g)}:k.find(x.pop(),x.length===1&&(x[0]==="~"||x[0]==="+")&&d.parentNode?d.parentNode:d,w),j=q.expr?k.filter(q.expr,q.set):q.set,x.length>0?n=p(j):u=!1;while(x.length)r=x.pop(),s=r,l.relative[r]?s=x.pop():r="",s==null&&(s=d),l.relative[r](n,s,w)}else n=x=[]}n||(n=j),n||k.error(r||b);if(e.call(n)==="[object Array]")if(!u)f.push.apply(f,n);else if(d&&d.nodeType===1)for(t=0;n[t]!=null;t++)n[t]&&(n[t]===!0||n[t].nodeType===1&&k.contains(d,n[t]))&&f.push(j[t]);else for(t=0;n[t]!=null;t++)n[t]&&n[t].nodeType===1&&f.push(j[t]);else p(n,f);o&&(k(o,h,f,g),k.uniqueSort(f));return f};k.uniqueSort=function(a){if(r){g=h,a.sort(r);if(g)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},k.matches=function(a,b){return k(a,null,null,b)},k.matchesSelector=function(a,b){return k(b,null,null,[a]).length>0},k.find=function(a,b,c){var d;if(!a)return[];for(var e=0,f=l.order.length;e<f;e++){var g,h=l.order[e];if(g=l.leftMatch[h].exec(a)){var j=g[1];g.splice(1,1);if(j.substr(j.length-1)!=="\\"){g[1]=(g[1]||"").replace(i,""),d=l.find[h](g,b,c);if(d!=null){a=a.replace(l.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},k.filter=function(a,c,d,e){var f,g,h=a,i=[],j=c,m=c&&c[0]&&k.isXML(c[0]);while(a&&c.length){for(var n in l.filter)if((f=l.leftMatch[n].exec(a))!=null&&f[2]){var o,p,q=l.filter[n],r=f[1];g=!1,f.splice(1,1);if(r.substr(r.length-1)==="\\")continue;j===i&&(i=[]);if(l.preFilter[n]){f=l.preFilter[n](f,j,d,i,e,m);if(!f)g=o=!0;else if(f===!0)continue}if(f)for(var s=0;(p=j[s])!=null;s++)if(p){o=q(p,f,s,j);var t=e^!!o;d&&o!=null?t?g=!0:j[s]=!1:t&&(i.push(p),g=!0)}if(o!==b){d||(j=i),a=a.replace(l.match[n],"");if(!g)return[];break}}if(a===h)if(g==null)k.error(a);else break;h=a}return j},k.error=function(a){throw"Syntax error, unrecognized expression: "+a};var l=k.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!j.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&k.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!j.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&k.filter(b,a,!0)}},"":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("parentNode",b,f,a,e,c)},"~":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("previousSibling",b,f,a,e,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(i,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(i,"")},TAG:function(a,b){return a[1].replace(i,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||k.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&k.error(a[0]);a[0]=d++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(i,"");!f&&l.attrMap[g]&&(a[1]=l.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(i,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=k(b[3],null,null,c);else{var g=k.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(l.match.POS.test(b[0])||l.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!k(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=l.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||k.getText([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}k.error(e)},CHILD:function(a,b){var c=b[1],d=a;switch(c){case"only":case"first":while(d=d.previousSibling)if(d.nodeType===1)return!1;if(c==="first")return!0;d=a;case"last":while(d=d.nextSibling)if(d.nodeType===1)return!1;return!0;case"nth":var e=b[2],f=b[3];if(e===1&&f===0)return!0;var g=b[0],h=a.parentNode;if(h&&(h.sizcache!==g||!a.nodeIndex)){var i=0;for(d=h.firstChild;d;d=d.nextSibling)d.nodeType===1&&(d.nodeIndex=++i);h.sizcache=g}var j=a.nodeIndex-f;return e===0?j===0:j%e===0&&j/e>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=l.attrHandle[c]?l.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=l.setFilters[e];if(f)return f(a,c,b,d)}}},m=l.match.POS,n=function(a,b){return"\\"+(b-0+1)};for(var o in l.match)l.match[o]=new RegExp(l.match[o].source+/(?![^\[]*\])(?![^\(]*\))/.source),l.leftMatch[o]=new RegExp(/(^(?:.|\r|\n)*?)/.source+l.match[o].source.replace(/\\(\d+)/g,n));var p=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(q){p=function(a,b){var c=0,d=b||[];if(e.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var f=a.length;c<f;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var r,s;c.documentElement.compareDocumentPosition?r=function(a,b){if(a===b){g=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(r=function(a,b){if(a===b){g=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],h=a.parentNode,i=b.parentNode,j=h;if(h===i)return s(a,b);if(!h)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return s(e[k],f[k]);return k===c?s(a,f[k],-1):s(e[k],b,1)},s=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),k.getText=function(a){var b="",c;for(var d=0;a[d];d++)c=a[d],c.nodeType===3||c.nodeType===4?b+=c.nodeValue:c.nodeType!==8&&(b+=k.getText(c.childNodes));return b},function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(l.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},l.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(l.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(l.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=k,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){k=function(b,e,f,g){e=e||c;if(!g&&!k.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return p(e.getElementsByTagName(b),f);if(h[2]&&l.find.CLASS&&e.getElementsByClassName)return p(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return p([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return p([],f);if(i.id===h[3])return p([i],f)}try{return p(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var m=e,n=e.getAttribute("id"),o=n||d,q=e.parentNode,r=/^\s*[+~]/.test(b);n?o=o.replace(/'/g,"\\$&"):e.setAttribute("id",o),r&&q&&(e=e.parentNode);try{if(!r||q)return p(e.querySelectorAll("[id='"+o+"'] "+b),f)}catch(s){}finally{n||m.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)k[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}k.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!k.isXML(a))try{if(e||!l.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return k(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;l.order.splice(1,0,"CLASS"),l.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?k.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?k.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:k.contains=function(){return!1},k.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var v=function(a,b){var c,d=[],e="",f=b.nodeType?[b]:b;while(c=l.match.PSEUDO.exec(a))e+=c[0],a=a.replace(l.match.PSEUDO,"");a=l.relative[a]?a+"*":a;for(var g=0,h=f.length;g<h;g++)k(a,f[g],d);return k.filter(e,d)};f.find=k,f.expr=k.selectors,f.expr[":"]=f.expr.filters,f.unique=k.uniqueSort,f.text=k.getText,f.isXMLDoc=k.isXML,f.contains=k.contains}();var N=/Until$/,O=/^(?:parents|prevUntil|prevAll)/,P=/,/,Q=/^.[^:#\[\.,]*$/,R=Array.prototype.slice,S=f.expr.match.POS,T={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(V(this,a,!1),"not",a)},filter:function(a){return this.pushStack(V(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h,i,j={},k=1;if(g&&a.length){for(d=0,e=a.length;d<e;d++)i=a[d],j[i]||(j[i]=S.test(i)?f(i,b||this.context):i);while(g&&g.ownerDocument&&g!==b){for(i in j)h=j[i],(h.jquery?h.index(g)>-1:f(g).is(h))&&c.push({selector:i,elem:g,level:k});g=g.parentNode,k++}}return c}var l=S.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(l?l.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(U(c[0])||U(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c),g=R.call(arguments);N.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!T[a]?f.unique(e):e,(this.length>1||P.test(d))&&O.test(a)&&(e=e.reverse());return this.pushStack(e,a,g.join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|object|embed|option|style)/i,bb=/checked\s*(?:[^=]|=\s*.checked.)/i,bc=/\/(java|ecma)script/i,bd=/^\s*<!(?:\[CDATA\[|\-\-)/,be={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]};be.optgroup=be.option,be.tbody=be.tfoot=be.colgroup=be.caption=be.thead,be.th=be.td,f.support.htmlSerialize||(be._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){f(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f(arguments[0]).toArray());return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!be[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bb.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bf(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bl)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i;b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof a[0]=="string"&&a[0].length<512&&i===c&&a[0].charAt(0)==="<"&&!ba.test(a[0])&&(f.support.checkClone||!bb.test(a[0]))&&(g=!0,h=f.fragments[a[0]],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean
--(a,i,e,d)),g&&(f.fragments[a[0]]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d=a.cloneNode(!0),e,g,h;if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bh(a,d),e=bi(a),g=bi(d);for(h=0;e[h];++h)g[h]&&bh(e[h],g[h])}if(b){bg(a,d);if(c){e=bi(a),g=bi(d);for(h=0;e[h];++h)bg(e[h],g[h])}}e=g=null;return d},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=be[l]||be._default,n=m[0],o=b.createElement("div");o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bk(k[i]);else bk(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||bc.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.expando,g=f.event.special,h=f.support.deleteExpando;for(var i=0,j;(j=a[i])!=null;i++){if(j.nodeName&&f.noData[j.nodeName.toLowerCase()])continue;c=j[f.expando];if(c){b=d[c]&&d[c][e];if(b&&b.events){for(var k in b.events)g[k]?f.event.remove(j,k):f.removeEvent(j,k,b.handle);b.handle&&(b.handle.elem=null)}h?delete j[f.expando]:j.removeAttribute&&j.removeAttribute(f.expando),delete d[c]}}}});var bm=/alpha\([^)]*\)/i,bn=/opacity=([^)]*)/,bo=/([A-Z]|^ms)/g,bp=/^-?\d+(?:px)?$/i,bq=/^-?\d/,br=/^([\-+])=([\-+.\de]+)/,bs={position:"absolute",visibility:"hidden",display:"block"},bt=["Left","Right"],bu=["Top","Bottom"],bv,bw,bx;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bv(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=br.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bv)return bv(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return by(a,b,d);f.swap(a,bs,function(){e=by(a,b,d)});return e}},set:function(a,b){if(!bp.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return bn.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNaN(b)?"":"alpha(opacity="+b*100+")",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bm,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bm.test(g)?g.replace(bm,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bv(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bw=function(a,c){var d,e,g;c=c.replace(bo,"-$1").toLowerCase();if(!(e=a.ownerDocument.defaultView))return b;if(g=e.getComputedStyle(a,null))d=g.getPropertyValue(c),d===""&&!f.contains(a.ownerDocument.documentElement,a)&&(d=f.style(a,c));return d}),c.documentElement.currentStyle&&(bx=function(a,b){var c,d=a.currentStyle&&a.currentStyle[b],e=a.runtimeStyle&&a.runtimeStyle[b],f=a.style;!bp.test(d)&&bq.test(d)&&(c=f.left,e&&(a.runtimeStyle.left=a.currentStyle.left),f.left=b==="fontSize"?"1em":d||0,d=f.pixelLeft+"px",f.left=c,e&&(a.runtimeStyle.left=e));return d===""?"auto":d}),bv=bw||bx,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bz=/%20/g,bA=/\[\]$/,bB=/\r?\n/g,bC=/#.*$/,bD=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bE=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bF=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bG=/^(?:GET|HEAD)$/,bH=/^\/\//,bI=/\?/,bJ=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bK=/^(?:select|textarea)/i,bL=/\s+/,bM=/([?&])_=[^&]*/,bN=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bO=f.fn.load,bP={},bQ={},bR,bS,bT=["*/"]+["*"];try{bR=e.href}catch(bU){bR=c.createElement("a"),bR.href="",bR=bR.href}bS=bN.exec(bR.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bO)return bO.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bJ,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bK.test(this.nodeName)||bE.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bB,"\r\n")}}):{name:b.name,value:c.replace(bB,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.bind(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?bX(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),bX(a,b);return a},ajaxSettings:{url:bR,isLocal:bF.test(bS[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bT},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bV(bP),ajaxTransport:bV(bQ),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?bZ(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=b$(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.resolveWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f._Deferred(),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bD.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.done,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bC,"").replace(bH,bS[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bL),d.crossDomain==null&&(r=bN.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bS[1]&&r[2]==bS[2]&&(r[3]||(r[1]==="http:"?80:443))==(bS[3]||(bS[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),bW(bP,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bG.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bI.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bM,"$1_="+x);d.url=y+(y===d.url?(bI.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bT+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=bW(bQ,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){s<2?w(-1,z):f.error(z)}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)bY(g,a[g],c,e);return d.join("&").replace(bz,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var b_=f.now(),ca=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+b_++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ca.test(b.url)||e&&ca.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ca,l),b.url===j&&(e&&(k=k.replace(ca,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cb=a.ActiveXObject?function(){for(var a in cd)cd[a](0,1)}:!1,cc=0,cd;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ce()||cf()}:ce,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cb&&delete cd[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cc,cb&&(cd||(cd={},f(a).unload(cb)),cd[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var cg={},ch,ci,cj=/^(?:toggle|show|hide)$/,ck=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cl,cm=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cn;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cq("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cr(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cq("hide",3),a,b,c);for(var d=0,e=this.length;d<e;d++)if(this[d].style){var g=f.css(this[d],"display");g!=="none"&&!f._data(this[d],"olddisplay")&&f._data(this[d],"olddisplay",g)}for(d=0;d<e;d++)this[d].style&&(this[d].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cq("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return this[e.queue===!1?"each":"queue"](function(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(f.support.inlineBlockNeedsLayout?(j=cr(this.nodeName),j==="inline"?this.style.display="inline-block":(this.style.display="inline",this.style.zoom=1)):this.style.display="inline-block"))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)k=new f.fx(this,b,i),h=a[i],cj.test(h)?k[h==="toggle"?d?"show":"hide":h]():(l=ck.exec(h),m=k.cur(),l?(n=parseFloat(l[2]),o=l[3]||(f.cssNumber[i]?"":"px"),o!=="px"&&(f.style(this,i,(n||1)+o),m=(n||1)/k.cur()*m,f.style(this,i,m+o)),l[1]&&(n=(l[1]==="-="?-1:1)*n+m),k.custom(m,n,o)):k.custom(m,h,""));return!0})},stop:function(a,b){a&&this.queue([]),this.each(function(){var a=f.timers,c=a.length;b||f._unmark(!0,this);while(c--)a[c].elem===this&&(b&&a[c](!0),a.splice(c,1))}),b||this.dequeue();return this}}),f.each({slideDown:cq("show",1),slideUp:cq("hide",1),slideToggle:cq("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default,d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue!==!1?f.dequeue(this):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,b,c){function g(a){return d.step(a)}var d=this,e=f.fx;this.startTime=cn||co(),this.start=a,this.end=b,this.unit=c||this.unit||(f.cssNumber[this.prop]?"":"px"),this.now=this.start,this.pos=this.state=0,g.elem=this.elem,g()&&f.timers.push(g)&&!cl&&(cl=setInterval(e.tick,e.interval))},show:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.show=!0,this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b=cn||co(),c=!0,d=this.elem,e=this.options,g,h;if(a||b>=e.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),e.animatedProperties[this.prop]=!0;for(g in e.animatedProperties)e.animatedProperties[g]!==!0&&(c=!1);if(c){e.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){d.style["overflow"+b]=e.overflow[a]}),e.hide&&f(d).hide();if(e.hide||e.show)for(var i in e.animatedProperties)f.style(d,i,e.orig[i]);e.complete.call(d)}return!1}e.duration==Infinity?this.now=b:(h=b-this.startTime,this.state=h/e.duration,this.pos=f.easing[e.animatedProperties[this.prop]](this.state,h,0,1,e.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){for(var a=f.timers,b=0;b<a.length;++b)a[b]()||a.splice(b--,1);a.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cl),cl=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit:a.elem[a.prop]=a.now}}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cs=/^t(?:able|d|h)$/i,ct=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cu(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);f.offset.initialize();var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.offset.supportsFixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.offset.doesNotAddBorder&&(!f.offset.doesAddBorderForTableAndCells||!cs.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.offset.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.offset.supportsFixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={initialize:function(){var a=c.body,b=c.createElement("div"),d,e,g,h,i=parseFloat(f.css(a,"marginTop"))||0,j="<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>";f.extend(b.style,{position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"}),b.innerHTML=j,a.insertBefore(b,a.firstChild),d=b.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,this.doesNotAddBorder=e.offsetTop!==5,this.doesAddBorderForTableAndCells=h.offsetTop===5,e.style.position="fixed",e.style.top="20px",this.supportsFixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",this.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,this.doesNotIncludeMarginInBodyOffset=a.offsetTop!==i,a.removeChild(b),f.offset.initialize=f.noop},bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.offset.initialize(),f.offset.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=ct.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!ct.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cu(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cu(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a&&a.style?parseFloat(f.css(a,d,"padding")):null},f.fn["outer"+c]=function(a){var b=this[0];return b&&b.style?parseFloat(f.css(b,d,a?"margin":"border")):null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNaN(j)?i:j}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f})(window);
-\ No newline at end of file
-+t[h]}if(f.isEmptyObject(t)){var u=s.handle;u&&(u.elem=null),delete s.events,delete s.handle,f.isEmptyObject(s)&&f.removeData(a,b,!0)}}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){var h=c.type||c,i=[],j;h.indexOf("!")>=0&&(h=h.slice(0,-1),j=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if(!!e&&!f.event.customEvent[h]||!!f.event.global[h]){c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.exclusive=j,c.namespace=i.join("."),c.namespace_re=new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)");if(g||!e)c.preventDefault(),c.stopPropagation();if(!e){f.each(f.cache,function(){var a=f.expando,b=this[a];b&&b.events&&b.events[h]&&f.event.trigger(c,d,b.handle.elem)});return}if(e.nodeType===3||e.nodeType===8)return;c.result=b,c.target=e,d=d!=null?f.makeArray(d):[],d.unshift(c);var k=e,l=h.indexOf(":")<0?"on"+h:"";do{var m=f._data(k,"handle");c.currentTarget=k,m&&m.apply(k,d),l&&f.acceptData(k)&&k[l]&&k[l].apply(k,d)===!1&&(c.result=!1,c.preventDefault()),k=k.parentNode||k.ownerDocument||k===c.target.ownerDocument&&a}while(k&&!c.isPropagationStopped());if(!c.isDefaultPrevented()){var n,o=f.event.special[h]||{};if((!o._default||o._default.call(e.ownerDocument,c)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)){try{l&&e[h]&&(n=e[l],n&&(e[l]=null),f.event.triggered=h,e[h]())}catch(p){}n&&(e[l]=n),f.event.triggered=b}}return c.result}},handle:function(c){c=f.event.fix(c||a.event);var d=((f._data(this,"events")||{})[c.type]||[]).slice(0),e=!c.exclusive&&!c.namespace,g=Array.prototype.slice.call(arguments,0);g[0]=c,c.currentTarget=this;for(var h=0,i=d.length;h<i;h++){var j=d[h];if(e||c.namespace_re.test(j.namespace)){c.handler=j.handler,c.data=j.data,c.handleObj=j;var k=j.handler.apply(this,g);k!==b&&(c.result=k,k===!1&&(c.preventDefault(),c.stopPropagation()));if(c.isImmediatePropagationStopped())break}}return c.result},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(a){if(a[f.expando])return a;var d=a;a=f.Event(d);for(var e=this.props.length,g;e;)g=this.props[--e],a[g]=d[g];a.target||(a.target=a.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),!a.relatedTarget&&a.fromElement&&(a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement);if(a.pageX==null&&a.clientX!=null){var h=a.target.ownerDocument||c,i=h.documentElement,j=h.body;a.pageX=a.clientX+(i&&i.scrollLeft||j&&j.scrollLeft||0)-(i&&i.clientLeft||j&&j.clientLeft||0),a.pageY=a.clientY+(i&&i.scrollTop||j&&j.scrollTop||0)-(i&&i.clientTop||j&&j.clientTop||0)}a.which==null&&(a.charCode!=null||a.keyCode!=null)&&(a.which=a.charCode!=null?a.charCode:a.keyCode),!a.metaKey&&a.ctrlKey&&(a.metaKey=a.ctrlKey),!a.which&&a.button!==b&&(a.which=a.button&1?1:a.button&2?3:a.button&4?2:0);return a},guid:1e8,proxy:f.proxy,special:{ready:{setup:f.bindReady,teardown:f.noop},live:{add:function(a){f.event.add(this,M(a.origType,a.selector),f.extend({},a,{handler:L,guid:a.handler.guid}))},remove:function(a){f.event.remove(this,M(a.origType,a.selector),a)}},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}}},f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!this.preventDefault)return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?D:C):this.type=a,b&&f.extend(this,b),this.timeStamp=f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=D;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=D;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=D,this.stopPropagation()},isDefaultPrevented:C,isPropagationStopped:C,isImmediatePropagationStopped:C};var E=function(a){var b=a.relatedTarget,c=!1,d=a.type;a.type=a.data,b!==this&&(b&&(c=f.contains(this,b)),c||(f.event.handle.apply(this,arguments),a.type=d))},F=function(a){a.type=a.data,f.event.handle.apply(this,arguments)};f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={setup:function(c){f.event.add(this,b,c&&c.selector?F:E,a)},teardown:function(a){f.event.remove(this,b,a&&a.selector?F:E)}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(a,b){if(!f.nodeName(this,"form"))f.event.add(this,"click.specialSubmit",function(a){var b=a.target,c=f.nodeName(b,"input")||f.nodeName(b,"button")?b.type:"";(c==="submit"||c==="image")&&f(b).closest("form").length&&J("submit",this,arguments)}),f.event.add(this,"keypress.specialSubmit",function(a){var b=a.target,c=f.nodeName(b,"input")||f.nodeName(b,"button")?b.type:"";(c==="text"||c==="password")&&f(b).closest("form").length&&a.keyCode===13&&J("submit",this,arguments)});else return!1},teardown:function(a){f.event.remove(this,".specialSubmit")}});if(!f.support.changeBubbles){var G,H=function(a){var b=f.nodeName(a,"input")?a.type:"",c=a.value;b==="radio"||b==="checkbox"?c=a.checked:b==="select-multiple"?c=a.selectedIndex>-1?f.map(a.options,function(a){return a.selected}).join("-"):"":f.nodeName(a,"select")&&(c=a.selectedIndex);return c},I=function(c){var d=c.target,e,g;if(!!x.test(d.nodeName)&&!d.readOnly){e=f._data(d,"_change_data"),g=H(d),(c.type!=="focusout"||d.type!=="radio")&&f._data(d,"_change_data",g);if(e===b||g===e)return;if(e!=null||g)c.type="change",c.liveFired=b,f.event.trigger(c,arguments[1],d)}};f.event.special.change={filters:{focusout:I,beforedeactivate:I,click:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(c==="radio"||c==="checkbox"||f.nodeName(b,"select"))&&I.call(this,a)},keydown:function(a){var b=a.target,c=f.nodeName(b,"input")?b.type:"";(a.keyCode===13&&!f.nodeName(b,"textarea")||a.keyCode===32&&(c==="checkbox"||c==="radio")||c==="select-multiple")&&I.call(this,a)},beforeactivate:function(a){var b=a.target;f._data(b,"_change_data",H(b))}},setup:function(a,b){if(this.type==="file")return!1;for(var c in G)f.event.add(this,c+".specialChange",G[c]);return x.test(this.nodeName)},teardown:function(a){f.event.remove(this,".specialChange");return x.test(this.nodeName)}},G=f.event.special.change.filters,G.focus=G.beforeactivate}f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){function e(a){var c=f.event.fix(a);c.type=b,c.originalEvent={},f.event.trigger(c,null,c.target),c.isDefaultPrevented()&&a.preventDefault()}var d=0;f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.each(["bind","one"],function(a,c){f.fn[c]=function(a,d,e){var g;if(typeof a=="object"){for(var h in a)this[c](h,d,a[h],e);return this}if(arguments.length===2||d===!1)e=d,d=b;c==="one"?(g=function(a){f(this).unbind(a,g);return e.apply(this,arguments)},g.guid=e.guid||f.guid++):g=e;if(a==="unload"&&c!=="one")this.one(a,d,e);else for(var i=0,j=this.length;i<j;i++)f.event.add(this[i],a,g,d);return this}}),f.fn.extend({unbind:function(a,b){if(typeof a=="object"&&!a.preventDefault)for(var c in a)this.unbind(c,a[c]);else for(var d=0,e=this.length;d<e;d++)f.event.remove(this[d],a,b);return this},delegate:function(a,b,c,d){return this.live(b,c,d,a)},undelegate:function(a,b,c){return arguments.length===0?this.unbind("live"):this.die(b,null,c,a)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f.data(this,"lastToggle"+a.guid)||0)%d;f.data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}});var K={focus:"focusin",blur:"focusout",mouseenter:"mouseover",mouseleave:"mouseout"};f.each(["live","die"],function(a,c){f.fn[c]=function(a,d,e,g){var h,i=0,j,k,l,m=g||this.selector,n=g?this:f(this.context);if(typeof a=="object"&&!a.preventDefault){for(var o in a)n[c](o,d,a[o],m);return this}if(c==="die"&&!a&&g&&g.charAt(0)==="."){n.unbind(g);return this}if(d===!1||f.isFunction(d))e=d||C,d=b;a=(a||"").split(" ");while((h=a[i++])!=null){j=w.exec(h),k="",j&&(k=j[0],h=h.replace(w,""));if(h==="hover"){a.push("mouseenter"+k,"mouseleave"+k);continue}l=h,K[h]?(a.push(K[h]+k),h=h+k):h=(K[h]||h)+k;if(c==="live")for(var p=0,q=n.length;p<q;p++)f.event.add(n[p],"live."+M(h,m),{data:d,selector:m,handler:e,origType:h,origHandler:e,preType:l});else n.unbind("live."+M(h,m),e)}return this}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0)}),function(){function u(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}if(i.nodeType===1){f||(i.sizcache=c,i.sizset=g);if(typeof b!="string"){if(i===b){j=!0;break}}else if(k.filter(b,[i]).length>0){j=i;break}}i=i[a]}d[g]=j}}}function t(a,b,c,d,e,f){for(var g=0,h=d.length;g<h;g++){var i=d[g];if(i){var j=!1;i=i[a];while(i){if(i.sizcache===c){j=d[i.sizset];break}i.nodeType===1&&!f&&(i.sizcache=c,i.sizset=g);if(i.nodeName.toLowerCase()===b){j=i;break}i=i[a]}d[g]=j}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d=0,e=Object.prototype.toString,g=!1,h=!0,i=/\\/g,j=/\W/;[0,0].sort(function(){h=!1;return 0});var k=function(b,d,f,g){f=f||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return f;var i,j,n,o,q,r,s,t,u=!0,w=k.isXML(d),x=[],y=b;do{a.exec(""),i=a.exec(y);if(i){y=i[3],x.push(i[1]);if(i[2]){o=i[3];break}}}while(i);if(x.length>1&&m.exec(b))if(x.length===2&&l.relative[x[0]])j=v(x[0]+x[1],d);else{j=l.relative[x[0]]?[d]:k(x.shift(),d);while(x.length)b=x.shift(),l.relative[b]&&(b+=x.shift()),j=v(b,j)}else{!g&&x.length>1&&d.nodeType===9&&!w&&l.match.ID.test(x[0])&&!l.match.ID.test(x[x.length-1])&&(q=k.find(x.shift(),d,w),d=q.expr?k.filter(q.expr,q.set)[0]:q.set[0]);if(d){q=g?{expr:x.pop(),set:p(g)}:k.find(x.pop(),x.length===1&&(x[0]==="~"||x[0]==="+")&&d.parentNode?d.parentNode:d,w),j=q.expr?k.filter(q.expr,q.set):q.set,x.length>0?n=p(j):u=!1;while(x.length)r=x.pop(),s=r,l.relative[r]?s=x.pop():r="",s==null&&(s=d),l.relative[r](n,s,w)}else n=x=[]}n||(n=j),n||k.error(r||b);if(e.call(n)==="[object Array]")if(!u)f.push.apply(f,n);else if(d&&d.nodeType===1)for(t=0;n[t]!=null;t++)n[t]&&(n[t]===!0||n[t].nodeType===1&&k.contains(d,n[t]))&&f.push(j[t]);else for(t=0;n[t]!=null;t++)n[t]&&n[t].nodeType===1&&f.push(j[t]);else p(n,f);o&&(k(o,h,f,g),k.uniqueSort(f));return f};k.uniqueSort=function(a){if(r){g=h,a.sort(r);if(g)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},k.matches=function(a,b){return k(a,null,null,b)},k.matchesSelector=function(a,b){return k(b,null,null,[a]).length>0},k.find=function(a,b,c){var d;if(!a)return[];for(var e=0,f=l.order.length;e<f;e++){var g,h=l.order[e];if(g=l.leftMatch[h].exec(a)){var j=g[1];g.splice(1,1);if(j.substr(j.length-1)!=="\\"){g[1]=(g[1]||"").replace(i,""),d=l.find[h](g,b,c);if(d!=null){a=a.replace(l.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},k.filter=function(a,c,d,e){var f,g,h=a,i=[],j=c,m=c&&c[0]&&k.isXML(c[0]);while(a&&c.length){for(var n in l.filter)if((f=l.leftMatch[n].exec(a))!=null&&f[2]){var o,p,q=l.filter[n],r=f[1];g=!1,f.splice(1,1);if(r.substr(r.length-1)==="\\")continue;j===i&&(i=[]);if(l.preFilter[n]){f=l.preFilter[n](f,j,d,i,e,m);if(!f)g=o=!0;else if(f===!0)continue}if(f)for(var s=0;(p=j[s])!=null;s++)if(p){o=q(p,f,s,j);var t=e^!!o;d&&o!=null?t?g=!0:j[s]=!1:t&&(i.push(p),g=!0)}if(o!==b){d||(j=i),a=a.replace(l.match[n],"");if(!g)return[];break}}if(a===h)if(g==null)k.error(a);else break;h=a}return j},k.error=function(a){throw"Syntax error, unrecognized expression: "+a};var l=k.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!j.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&k.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!j.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&k.filter(b,a,!0)}},"":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("parentNode",b,f,a,e,c)},"~":function(a,b,c){var e,f=d++,g=u;typeof b=="string"&&!j.test(b)&&(b=b.toLowerCase(),e=b,g=t),g("previousSibling",b,f,a,e,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(i,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(i,"")},TAG:function(a,b){return a[1].replace(i,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||k.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&k.error(a[0]);a[0]=d++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(i,"");!f&&l.attrMap[g]&&(a[1]=l.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(i,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=k(b[3],null,null,c);else{var g=k.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(l.match.POS.test(b[0])||l.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!k(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=l.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||k.getText([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}k.error(e)},CHILD:function(a,b){var c=b[1],d=a;switch(c){case"only":case"first":while(d=d.previousSibling)if(d.nodeType===1)return!1;if(c==="first")return!0;d=a;case"last":while(d=d.nextSibling)if(d.nodeType===1)return!1;return!0;case"nth":var e=b[2],f=b[3];if(e===1&&f===0)return!0;var g=b[0],h=a.parentNode;if(h&&(h.sizcache!==g||!a.nodeIndex)){var i=0;for(d=h.firstChild;d;d=d.nextSibling)d.nodeType===1&&(d.nodeIndex=++i);h.sizcache=g}var j=a.nodeIndex-f;return e===0?j===0:j%e===0&&j/e>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=l.attrHandle[c]?l.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=l.setFilters[e];if(f)return f(a,c,b,d)}}},m=l.match.POS,n=function(a,b){return"\\"+(b-0+1)};for(var o in l.match)l.match[o]=new RegExp(l.match[o].source+/(?![^\[]*\])(?![^\(]*\))/.source),l.leftMatch[o]=new RegExp(/(^(?:.|\r|\n)*?)/.source+l.match[o].source.replace(/\\(\d+)/g,n));var p=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(q){p=function(a,b){var c=0,d=b||[];if(e.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var f=a.length;c<f;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var r,s;c.documentElement.compareDocumentPosition?r=function(a,b){if(a===b){g=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(r=function(a,b){if(a===b){g=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],h=a.parentNode,i=b.parentNode,j=h;if(h===i)return s(a,b);if(!h)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return s(e[k],f[k]);return k===c?s(a,f[k],-1):s(e[k],b,1)},s=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),k.getText=function(a){var b="",c;for(var d=0;a[d];d++)c=a[d],c.nodeType===3||c.nodeType===4?b+=c.nodeValue:c.nodeType!==8&&(b+=k.getText(c.childNodes));return b},function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(l.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},l.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(l.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(l.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=k,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){k=function(b,e,f,g){e=e||c;if(!g&&!k.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return p(e.getElementsByTagName(b),f);if(h[2]&&l.find.CLASS&&e.getElementsByClassName)return p(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return p([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return p([],f);if(i.id===h[3])return p([i],f)}try{return p(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var m=e,n=e.getAttribute("id"),o=n||d,q=e.parentNode,r=/^\s*[+~]/.test(b);n?o=o.replace(/'/g,"\\$&"):e.setAttribute("id",o),r&&q&&(e=e.parentNode);try{if(!r||q)return p(e.querySelectorAll("[id='"+o+"'] "+b),f)}catch(s){}finally{n||m.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)k[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}k.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!k.isXML(a))try{if(e||!l.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return k(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;l.order.splice(1,0,"CLASS"),l.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?k.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?k.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:k.contains=function(){return!1},k.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var v=function(a,b){var c,d=[],e="",f=b.nodeType?[b]:b;while(c=l.match.PSEUDO.exec(a))e+=c[0],a=a.replace(l.match.PSEUDO,"");a=l.relative[a]?a+"*":a;for(var g=0,h=f.length;g<h;g++)k(a,f[g],d);return k.filter(e,d)};f.find=k,f.expr=k.selectors,f.expr[":"]=f.expr.filters,f.unique=k.uniqueSort,f.text=k.getText,f.isXMLDoc=k.isXML,f.contains=k.contains}();var N=/Until$/,O=/^(?:parents|prevUntil|prevAll)/,P=/,/,Q=/^.[^:#\[\.,]*$/,R=Array.prototype.slice,S=f.expr.match.POS,T={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(V(this,a,!1),"not",a)},filter:function(a){return this.pushStack(V(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h,i,j={},k=1;if(g&&a.length){for(d=0,e=a.length;d<e;d++)i=a[d],j[i]||(j[i]=S.test(i)?f(i,b||this.context):i);while(g&&g.ownerDocument&&g!==b){for(i in j)h=j[i],(h.jquery?h.index(g)>-1:f(g).is(h))&&c.push({selector:i,elem:g,level:k});g=g.parentNode,k++}}return c}var l=S.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(l?l.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(U(c[0])||U(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c),g=R.call(arguments);N.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!T[a]?f.unique(e):e,(this.length>1||P.test(d))&&O.test(a)&&(e=e.reverse());return this.pushStack(e,a,g.join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|object|embed|option|style)/i,bb=/checked\s*(?:[^=]|=\s*.checked.)/i,bc=/\/(java|ecma)script/i,bd=/^\s*<!(?:\[CDATA\[|\-\-)/,be={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]};be.optgroup=be.option,be.tbody=be.tfoot=be.colgroup=be.caption=be.thead,be.th=be.td,f.support.htmlSerialize||(be._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){f(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f(arguments[0]).toArray());return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!be[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bb.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bf(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bl)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i;b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof a[0]=="string"&&a[0].length<512&&i===c&&a[0].charAt(0)==="<"&&!ba.test(a[0])&&(f.support.checkClone||!bb.test(a[0]))&&(g=!0,h=f.fragments[a[0]],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean
-+(a,i,e,d)),g&&(f.fragments[a[0]]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d=a.cloneNode(!0),e,g,h;if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bh(a,d),e=bi(a),g=bi(d);for(h=0;e[h];++h)g[h]&&bh(e[h],g[h])}if(b){bg(a,d);if(c){e=bi(a),g=bi(d);for(h=0;e[h];++h)bg(e[h],g[h])}}e=g=null;return d},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=be[l]||be._default,n=m[0],o=b.createElement("div");o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bk(k[i]);else bk(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||bc.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.expando,g=f.event.special,h=f.support.deleteExpando;for(var i=0,j;(j=a[i])!=null;i++){if(j.nodeName&&f.noData[j.nodeName.toLowerCase()])continue;c=j[f.expando];if(c){b=d[c]&&d[c][e];if(b&&b.events){for(var k in b.events)g[k]?f.event.remove(j,k):f.removeEvent(j,k,b.handle);b.handle&&(b.handle.elem=null)}h?delete j[f.expando]:j.removeAttribute&&j.removeAttribute(f.expando),delete d[c]}}}});var bm=/alpha\([^)]*\)/i,bn=/opacity=([^)]*)/,bo=/([A-Z]|^ms)/g,bp=/^-?\d+(?:px)?$/i,bq=/^-?\d/,br=/^([\-+])=([\-+.\de]+)/,bs={position:"absolute",visibility:"hidden",display:"block"},bt=["Left","Right"],bu=["Top","Bottom"],bv,bw,bx;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bv(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=br.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bv)return bv(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return by(a,b,d);f.swap(a,bs,function(){e=by(a,b,d)});return e}},set:function(a,b){if(!bp.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return bn.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNaN(b)?"":"alpha(opacity="+b*100+")",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bm,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bm.test(g)?g.replace(bm,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bv(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bw=function(a,c){var d,e,g;c=c.replace(bo,"-$1").toLowerCase();if(!(e=a.ownerDocument.defaultView))return b;if(g=e.getComputedStyle(a,null))d=g.getPropertyValue(c),d===""&&!f.contains(a.ownerDocument.documentElement,a)&&(d=f.style(a,c));return d}),c.documentElement.currentStyle&&(bx=function(a,b){var c,d=a.currentStyle&&a.currentStyle[b],e=a.runtimeStyle&&a.runtimeStyle[b],f=a.style;!bp.test(d)&&bq.test(d)&&(c=f.left,e&&(a.runtimeStyle.left=a.currentStyle.left),f.left=b==="fontSize"?"1em":d||0,d=f.pixelLeft+"px",f.left=c,e&&(a.runtimeStyle.left=e));return d===""?"auto":d}),bv=bw||bx,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bz=/%20/g,bA=/\[\]$/,bB=/\r?\n/g,bC=/#.*$/,bD=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bE=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bF=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bG=/^(?:GET|HEAD)$/,bH=/^\/\//,bI=/\?/,bJ=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bK=/^(?:select|textarea)/i,bL=/\s+/,bM=/([?&])_=[^&]*/,bN=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bO=f.fn.load,bP={},bQ={},bR,bS,bT=["*/"]+["*"];try{bR=e.href}catch(bU){bR=c.createElement("a"),bR.href="",bR=bR.href}bS=bN.exec(bR.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bO)return bO.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bJ,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bK.test(this.nodeName)||bE.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bB,"\r\n")}}):{name:b.name,value:c.replace(bB,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.bind(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?bX(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),bX(a,b);return a},ajaxSettings:{url:bR,isLocal:bF.test(bS[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bT},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bV(bP),ajaxTransport:bV(bQ),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?bZ(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=b$(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.resolveWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f._Deferred(),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bD.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.done,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bC,"").replace(bH,bS[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bL),d.crossDomain==null&&(r=bN.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bS[1]&&r[2]==bS[2]&&(r[3]||(r[1]==="http:"?80:443))==(bS[3]||(bS[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),bW(bP,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bG.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bI.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bM,"$1_="+x);d.url=y+(y===d.url?(bI.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bT+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=bW(bQ,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){s<2?w(-1,z):f.error(z)}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)bY(g,a[g],c,e);return d.join("&").replace(bz,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var b_=f.now(),ca=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+b_++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ca.test(b.url)||e&&ca.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ca,l),b.url===j&&(e&&(k=k.replace(ca,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cb=a.ActiveXObject?function(){for(var a in cd)cd[a](0,1)}:!1,cc=0,cd;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ce()||cf()}:ce,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cb&&delete cd[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cc,cb&&(cd||(cd={},f(a).unload(cb)),cd[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var cg={},ch,ci,cj=/^(?:toggle|show|hide)$/,ck=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cl,cm=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cn;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cq("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cr(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cq("hide",3),a,b,c);for(var d=0,e=this.length;d<e;d++)if(this[d].style){var g=f.css(this[d],"display");g!=="none"&&!f._data(this[d],"olddisplay")&&f._data(this[d],"olddisplay",g)}for(d=0;d<e;d++)this[d].style&&(this[d].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cq("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return this[e.queue===!1?"each":"queue"](function(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(f.support.inlineBlockNeedsLayout?(j=cr(this.nodeName),j==="inline"?this.style.display="inline-block":(this.style.display="inline",this.style.zoom=1)):this.style.display="inline-block"))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)k=new f.fx(this,b,i),h=a[i],cj.test(h)?k[h==="toggle"?d?"show":"hide":h]():(l=ck.exec(h),m=k.cur(),l?(n=parseFloat(l[2]),o=l[3]||(f.cssNumber[i]?"":"px"),o!=="px"&&(f.style(this,i,(n||1)+o),m=(n||1)/k.cur()*m,f.style(this,i,m+o)),l[1]&&(n=(l[1]==="-="?-1:1)*n+m),k.custom(m,n,o)):k.custom(m,h,""));return!0})},stop:function(a,b){a&&this.queue([]),this.each(function(){var a=f.timers,c=a.length;b||f._unmark(!0,this);while(c--)a[c].elem===this&&(b&&a[c](!0),a.splice(c,1))}),b||this.dequeue();return this}}),f.each({slideDown:cq("show",1),slideUp:cq("hide",1),slideToggle:cq("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default,d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue!==!1?f.dequeue(this):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,b,c){function g(a){return d.step(a)}var d=this,e=f.fx;this.startTime=cn||co(),this.start=a,this.end=b,this.unit=c||this.unit||(f.cssNumber[this.prop]?"":"px"),this.now=this.start,this.pos=this.state=0,g.elem=this.elem,g()&&f.timers.push(g)&&!cl&&(cl=setInterval(e.tick,e.interval))},show:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.show=!0,this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b=cn||co(),c=!0,d=this.elem,e=this.options,g,h;if(a||b>=e.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),e.animatedProperties[this.prop]=!0;for(g in e.animatedProperties)e.animatedProperties[g]!==!0&&(c=!1);if(c){e.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){d.style["overflow"+b]=e.overflow[a]}),e.hide&&f(d).hide();if(e.hide||e.show)for(var i in e.animatedProperties)f.style(d,i,e.orig[i]);e.complete.call(d)}return!1}e.duration==Infinity?this.now=b:(h=b-this.startTime,this.state=h/e.duration,this.pos=f.easing[e.animatedProperties[this.prop]](this.state,h,0,1,e.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){for(var a=f.timers,b=0;b<a.length;++b)a[b]()||a.splice(b--,1);a.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cl),cl=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit:a.elem[a.prop]=a.now}}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cs=/^t(?:able|d|h)$/i,ct=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cu(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);f.offset.initialize();var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.offset.supportsFixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.offset.doesNotAddBorder&&(!f.offset.doesAddBorderForTableAndCells||!cs.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.offset.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.offset.supportsFixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={initialize:function(){var a=c.body,b=c.createElement("div"),d,e,g,h,i=parseFloat(f.css(a,"marginTop"))||0,j="<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>";f.extend(b.style,{position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"}),b.innerHTML=j,a.insertBefore(b,a.firstChild),d=b.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,this.doesNotAddBorder=e.offsetTop!==5,this.doesAddBorderForTableAndCells=h.offsetTop===5,e.style.position="fixed",e.style.top="20px",this.supportsFixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",this.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,this.doesNotIncludeMarginInBodyOffset=a.offsetTop!==i,a.removeChild(b),f.offset.initialize=f.noop},bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.offset.initialize(),f.offset.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=ct.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!ct.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cu(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cu(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a&&a.style?parseFloat(f.css(a,d,"padding")):null},f.fn["outer"+c]=function(a){var b=this[0];return b&&b.style?parseFloat(f.css(b,d,a?"margin":"border")):null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNaN(j)?i:j}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f})(window);
---
-1.7.4.1
-
+++ /dev/null
-From e8670410ade06362532722b541ce4bef81222d6b Mon Sep 17 00:00:00 2001
-From: Jun Jinhyuk <jinhyuk.jun@samsung.com>
-Date: Mon, 19 Mar 2012 22:13:16 -0400
-Subject: [PATCH] delete defaultFooter size
-
-Change-Id: I026d36ed75b53707d682731d26150bee3521a7f2
----
- .../js/jquery.mobile.fixHeaderFooter.js | 14 +++++++-------
- 1 files changed, 7 insertions(+), 7 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
-index 2d19b4e..23877df 100644
---- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
-+++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
-@@ -95,7 +95,7 @@ $.mobile.fixedToolbars = (function() {
- touchStopEvent = supportTouch ? "touchend" : "mouseup",
- stateBefore = null,
- scrollTriggered = false,
-- defaultFooterHeight = 114,
-+// defaultFooterHeight = 114,
- touchToggleEnabled = true;
-
- function showEventCallback( event ) {
-@@ -117,9 +117,9 @@ $.mobile.fixedToolbars = (function() {
- footer_filter = $( document ).find( ":jqmData(role='footer')" ).eq( 0 );
- }
-
-- if ( footer_filter.height() < defaultFooterHeight ) {
-- footer_filter.css("height", defaultFooterHeight);
-- }
-+// if ( footer_filter.height() < defaultFooterHeight ) {
-+// footer_filter.css("height", defaultFooterHeight);
-+// }
-
- footer_filter
- .css( "top", $(window).height() - footer_filter.height() )
-@@ -407,9 +407,9 @@ $.mobile.fixedToolbars = (function() {
- .css( "width", footer.width() )
- .css( "height", footer.height() );
-
-- if ( $(".dummy-div").height() < defaultFooterHeight ) {
-- $( ".dummy-div" ).css( "height", defaultFooterHeight );
-- }
-+// if ( $(".dummy-div").height() < defaultFooterHeight ) {
-+// $( ".dummy-div" ).css( "height", defaultFooterHeight );
-+// }
- }
-
- /* Header position fix(remove transition) */
---
-1.7.4.1
-
--- /dev/null
+From 55dcac86989fdc737ea6894ca136bb250bdc5f95 Mon Sep 17 00:00:00 2001
+From: Minkyu Kang <mk7.kang@samsung.com>
+Date: Tue, 17 Jul 2012 09:12:49 +0900
+Subject: [PATCH] JQM: set default page transition to none
+
+Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
+---
+ .../jquery-mobile-1.1.0/js/jquery.mobile.core.js | 2 +-
+ 1 file changed, 1 insertion(+), 1 deletion(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.core.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.core.js
+index 9007c36..ae576b1 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.core.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.core.js
+@@ -44,7 +44,7 @@ define( [ "jquery", "../external/requirejs/text!../version.txt", "./jquery.mobil
+ linkBindingEnabled: true,
+
+ // Set default page transition - 'none' for no transitions
+- defaultPageTransition: "fade",
++ defaultPageTransition: "none",
+
+ // Set maximum window width for transitions to apply - 'false' for no limit
+ maxTransitionWidth: false,
+--
+1.7.9.5
+
--- /dev/null
+From 731daf9729c9163dd0db78d72acc0c21ff334ca8 Mon Sep 17 00:00:00 2001
+From: Minkyu Kang <mk7.kang@samsung.com>
+Date: Mon, 20 Aug 2012 15:48:11 +0900
+Subject: [PATCH] JQM: remove filter Placeholder of listview
+
+Change-Id: I03d5e62e33d3e1fe7455e9b30d2cc479c092503f
+Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
+---
+ .../js/jquery.mobile.listview.filter.js | 2 +-
+ 1 file changed, 1 insertion(+), 1 deletion(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.filter.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.filter.js
+index a2420d8..929b221 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.filter.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.filter.js
+@@ -9,7 +9,7 @@ define( [ "jquery", "./jquery.mobile.listview", "./jquery.mobile.forms.textinput
+ (function( $, undefined ) {
+
+ $.mobile.listview.prototype.options.filter = false;
+-$.mobile.listview.prototype.options.filterPlaceholder = "Filter items...";
++$.mobile.listview.prototype.options.filterPlaceholder = "";
+ $.mobile.listview.prototype.options.filterTheme = "c";
+ $.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){
+ return text.toLowerCase().indexOf( searchValue ) === -1;
+--
+1.7.9.5
+
--- /dev/null
+From b0b89011ffeb68fc9a207f67558048217912025c Mon Sep 17 00:00:00 2001
+From: Youmin Ha <youmin.ha@samsung.com>
+Date: Wed, 25 Jul 2012 10:15:08 +0900
+Subject: [PATCH] JQM: Add default theme on buttonMarkup
+
+Signed-off-by: Youmin Ha <youmin.ha@samsung.com>
+---
+ .../js/jquery.mobile.buttonMarkup.js | 3 ++-
+ 1 file changed, 2 insertions(+), 1 deletion(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.buttonMarkup.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.buttonMarkup.js
+index d523ad9..9ca2366 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.buttonMarkup.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.buttonMarkup.js
+@@ -38,7 +38,7 @@ $.fn.buttonMarkup = function( options ) {
+ o = $.extend( {}, $.fn.buttonMarkup.defaults, {
+ icon: options.icon !== undefined ? options.icon : el.jqmData( "icon" ),
+ iconpos: options.iconpos !== undefined ? options.iconpos : el.jqmData( "iconpos" ),
+- theme: options.theme !== undefined ? options.theme : el.jqmData( "theme" ) || $.mobile.getInheritedTheme( el, "c" ),
++ theme: options.theme !== undefined ? options.theme : el.jqmData( "theme" ) || $.mobile.getInheritedTheme( el, $.fn.buttonMarkup.defaults["theme"] ),
+ inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ),
+ shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ),
+ corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ),
+@@ -235,6 +235,7 @@ $.fn.buttonMarkup = function( options ) {
+ };
+
+ $.fn.buttonMarkup.defaults = {
++ theme: "c",
+ corners: true,
+ shadow: true,
+ iconshadow: true,
+--
+1.7.9.5
+
--- /dev/null
+From c8f2ce6d45c42d572ef96cc166a64c8d60bc5ef8 Mon Sep 17 00:00:00 2001
+From: Minkyu Kang <mk7.kang@samsung.com>
+Date: Thu, 9 Aug 2012 17:36:11 +0900
+Subject: [PATCH] JQM: If height of textarea is bigger than
+ window.innerHeight/2, don't grow up anymore
+
+Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
+---
+ .../js/jquery.mobile.forms.textinput.js | 2 +-
+ 1 file changed, 1 insertion(+), 1 deletion(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.textinput.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.textinput.js
+index f444522..681b9b4 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.textinput.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.textinput.js
+@@ -73,7 +73,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
+ var scrollHeight = input[ 0 ].scrollHeight,
+ clientHeight = input[ 0 ].clientHeight;
+
+- if ( clientHeight < scrollHeight ) {
++ if ( clientHeight < scrollHeight && window.innerHeight / 2 > scrollHeight ) {
+ input.height(scrollHeight + extraLineHeight);
+ }
+ },
+--
+1.7.9.5
+
--- /dev/null
+From cdada84aa4444504a17346146a8b08c9e633eaaa Mon Sep 17 00:00:00 2001
+From: Jun Jinhyuk <jinhyuk.jun@samsung.com>
+Date: Tue, 21 Aug 2012 14:45:17 +0900
+Subject: [PATCH] JQM generate checkbox radio has class in list
+
+Change-Id: Ie958c0a960d14494f476e2354677fcc588b7a32c
+---
+ .../js/jquery.mobile.listview.js | 16 ++++++++++++++++
+ 1 files changed, 16 insertions(+), 0 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js
+index 4ccdd73..a290e32 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js
+@@ -151,6 +151,19 @@ $.widget( "mobile.listview", $.mobile.widget, {
+ }
+ }
+ },
++
++ _addCheckboxRadioClasses: function( containers )
++ {
++ var i, inputAttr, len = containers.length;
++ for ( i = 0; i < len; i++ ) {
++ inputAttr = $( containers[ i ] ).find( "input" );
++ if ( inputAttr.attr( "type" ) == "checkbox" ) {
++ $( containers[ i ] ).addClass( "ui-li-has-checkbox" );
++ } else if ( inputAttr.attr( "type" ) == "radio" ) {
++ $( containers[ i ] ).addClass( "ui-li-has-radio" );
++ }
++ }
++ },
+
+ refresh: function( create ) {
+ this.parentPage = this.element.closest( ".ui-page" );
+@@ -313,6 +326,9 @@ $.widget( "mobile.listview", $.mobile.widget, {
+ this._addThumbClasses( li );
+ this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
+
++ this._addCheckboxRadioClasses( li );
++ this._addCheckboxRadioClasses( $list.find( ".ui-link-inherit" ) );
++
+ this._refreshCorners( create );
+ },
+
+--
+1.7.4.1
+
--- /dev/null
+From ea0849395563ced0fab0ce5d4b0c947b49b4b152 Mon Sep 17 00:00:00 2001
+From: Koeun Choi <koeun.choi@samsung.com>
+Date: Fri, 17 Aug 2012 21:05:05 +0900
+Subject: [PATCH] apply tizen default button order in title bar: ui-btn-right.
+
+Change-Id: I3ad4b706982090e2b1efa28227fe8e40ac9ee039
+---
+ .../js/jquery.mobile.page.sections.js | 4 ++++
+ 1 file changed, 4 insertions(+)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.sections.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.sections.js
+index e78af6a..5e289b5 100755
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.sections.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.page.sections.js
+@@ -54,9 +54,13 @@ $( document ).delegate( ":jqmData(role='page'), :jqmData(role='dialog')", "pagec
+ leftbtn = $headeranchors.hasClass( "ui-btn-left" );
+ rightbtn = $headeranchors.hasClass( "ui-btn-right" );
+
++ // when button position is not declared, make it "right" button on Tizen.
++ rightbtn = $headeranchors.not( ".ui-btn-left" ).addClass( "ui-btn-right" );
++ /*
+ leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
+
+ rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
++ */
+ }
+
+ // Page title
+--
+1.7.9.5
+
exit $ret
}
-# If --cancel option is given, just reset git and exit.
-test "$1" == "--cancel" && reset_branch 0
-
# Make sure if current branch is PATCH_BRANCH
test ! -f "$ORIG_BRANCH_FILE" && echo "ERROR: Original branch file ($ORIG_BRANCH_FILE) is not found!" && exit 1
test "${CURRENT_BRANCH}" != "$PATCH_BRANCH" && echo "ERROR: Current branch is not '$PATCH_BRANCH'." && exit 1
function reset_branch
{
- echo "Restore to original git branch."
+ echo "Reset git to original git branch..."
test -f "$CURRENT_BRANCH_FILE" && CURRENT_BRANCH="`cat $CURRENT_BRANCH_FILE`"
git checkout ${CURRENT_BRANCH}
+ test -e ".git/rebase-apply" && git am --abort
git branch -D ${PATCH_BRANCH}
rm -f $CURRENT_BRANCH_FILE
exit 1
# If --cancel option is given, just reset git and exit.
test "$1" == "--cancel" && reset_branch
+# If current branch file is already exist, reset and exit.
+test -f "$CURRENT_BRANCH_FILE" && reset_branch
+
# Remember current branch name to a file
echo "${CURRENT_BRANCH}" > $CURRENT_BRANCH_FILE
--- /dev/null
+#!/bin/bash
+
+cd `dirname $0`/../
+SRCROOT=`pwd`
+
+PROJECT=web-ui-fw
+VERSION=`grep 'Version:' packaging/web-ui-fw.spec | awk '{print $2}'`
+TARNAME=$PROJECT-$VERSION
+
+OBS_USER=$1
+OBS_LOCAL=home:$OBS_USER
+OBSDIR_ROOT=$HOME/obs
+OBSDIR_USER=$OBSDIR_ROOT/$OBS_LOCAL
+OBSDIR_PROJECT=$OBSDIR_USER/$PROJECT
+
+if test ! -n "$OBS_USER"; then
+ echo "Error: No OBS account is given."
+ echo "USAGE: $0 <OBS account name> [--upload]"
+ echo ""
+ echo "${HOME}/obs/home:<OBS account>/web-ui-fw direcory will be created."
+ echo "NOTE:"
+ echo " If --upload option is given, OBS build request will be done to your home project."
+ echo " Otherwise, local OBS will be run."
+ exit 1
+fi
+
+### OBS
+test -d "$OBSDIR_ROOT" || mkdir -p $OBSDIR_ROOT
+cd $OBSDIR_ROOT
+test -d "$OBSDIR_USER" || osc co $OBS_LOCAL/$PROJECT || ( echo "Error: Failed to checkout $OBS_LOCAL/$PROJECT"; exit 1 )
+cd $OBSDIR_USER
+test -d $OBSDIR_PROJECT || osc mkpac $PROJECT
+
+### Make tarball and spec into obs project dir
+cd $OBSDIR_PROJECT
+osc rm --force *
+rm -rf $OBSDIR_PROJECT/*
+cd $SRCROOT
+git archive --format=tar --prefix=$TARNAME/ HEAD | gzip > $OBSDIR_PROJECT/$TARNAME.tar.gz
+cp -av ./packaging/$PROJECT.spec $OBSDIR_PROJECT/
+cd $OBSDIR_PROJECT
+
+echo "Complete."
+echo "If you want to build locally, run following command:"
+echo "cd $OBSDIR_PROJECT; osc build standard --no-verify --local-package --clean"
+echo ""
+
+### Build
+if test "$2" == "--upload"; then
+ osc add *
+ osc ci
+else
+ #rpmbuild -ba packaging/*.spec
+ cd $OBSDIR_PROJECT
+ osc build standard --no-verify --local-package --clean
+fi
+
-Name: web-ui-fw
-Summary: Tizen Web UI Framework Library
-Version: 0.1.11
-Release: 1
-Group: TO_BE/FILLED_IN
-License: MIT
-BuildRequires: node-js, make
+Name: web-ui-fw
+Version: 0.1.38
+Release: 0
+Summary: Tizen Web UI Framework Library
+Group: Development/Other
+License: MIT
+BuildArch: noarch
+BuildRequires: make
+BuildRequires: nodejs
+%ifarch %{arm}
+BuildRequires: nodejs-x86-arm
+%endif
+
+Source0: %{name}-%{version}.tar.gz
%description
-Tizen Web UI Framework library package
+Tizen Web UI Framework library and theme packages
%prep
-make clean
+%setup -q
%build
-make
+make all
-%post
+%install
+make DESTDIR=%{buildroot} install
+%post
%files
-/usr/lib/tizen-web-ui-fw/*/js
-/usr/lib/tizen-web-ui-fw/*/themes/tizen-gray
+/usr/share/tizen-web-ui-fw/*/js
+/usr/share/tizen-web-ui-fw/latest
+
+###############################
+%package -n web-ui-fw-theme-tizen-gray
+BuildArch: noarch
+Summary: Tizen Web UI Framework Theme : tizen-gray
+%Description -n web-ui-fw-theme-tizen-gray
+ Tizen Web UI Framework Theme : tizen-gray
+%files -n web-ui-fw-theme-tizen-gray
+/usr/share/tizen-web-ui-fw/*/themes/tizen-gray
+
+###############################
+%package -n web-ui-fw-theme-tizen-white
+BuildArch: noarch
+Summary: Tizen Web UI Framework Theme : tizen-white
+%Description -n web-ui-fw-theme-tizen-white
+ Tizen Web UI Framework Theme : tizen-white
+%files -n web-ui-fw-theme-tizen-white
+/usr/share/tizen-web-ui-fw/*/themes/tizen-white
+
+###############################
+%package -n web-ui-fw-theme-default
+BuildArch: noarch
+Summary: Tizen Web UI Framework Theme : default
+%Description -n web-ui-fw-theme-default
+ Tizen Web UI Framework Theme : default
+%files -n web-ui-fw-theme-default
+/usr/share/tizen-web-ui-fw/*/themes/default
+
+###############################
+%package -n web-ui-fw-devel
+BuildArch: noarch
+Summary: Tizen Web UI Framework Developer's files
+%Description -n web-ui-fw-devel
+ Tizen Web UI Framework Developer's files
+%files -n web-ui-fw-devel
+/usr/share/tizen-web-ui-fw/bin
+/usr/share/tizen-web-ui-fw/template
+
+###############################
+%package -n web-ui-fw-demo-tizen-winsets
+BuildArch: noarch
+Summary: Tizen Web UI Framework Demo Application: tizen winset demo
+%Description -n web-ui-fw-demo-tizen-winsets
+ Tizen Web UI Framework Demo Application: tizen winset demo
+%files -n web-ui-fw-demo-tizen-winsets
+/usr/share/tizen-web-ui-fw/demos/tizen-winsets
+
+
+###############################
+%changelog
+
+* Mon Aug 20 2012 Minkyu Kang <mk7.kang@samasung.com> 0.1.38
+- FIX:
+ - fix coment of version tag
+
+* Fri Aug 17 2012 Minkyu Kang <mk7.kang@samasung.com> 0.1.37
+- FIX :
+ - button: fix alignment
+ - listview: adjust the main text width
+ - virtualgrid: refactoring
+- Spec changes:
+ - transition: support JQM 1.1.0 transitions
+ - scrollview: support the outer scroll
+ - notification: remove interval feature
+
+* Tue Aug 14 2012 Youmin Ha <youmin.ha@samasung.com> 0.1.36
+- FIX :
+ - checkboxRadio: Add left/right padding
+ - button: custom button & icon position
+ - virtuallist: remove 'recreate' test
+- Spec changes:
+ - header/footer: enable/disable support
+
+* Fri Aug 10 2012 Minkyu Kang <mk7.kang@samsung.com> 0.1.35
+- FIX :
+ - expandablelist: modify show animation
+ - virtualgrid: Redesign programming interface
+ - popupwindow: code clean and fixed issues
+ - pagelayout: fix content height
+ - license file update
+ - virtuallist: Change programming interface
+ - datetimepicker: getting days correctly
+ - searchbar: set to hidden when cancel button is hide
+ - White theme title font tuning
+- Spec changes:
+ - default theme tizen-gray to tizen-white
+ - set default page transition to none
+
+* Mon Aug 02 2012 Jinhyuk Jun <jinhyuk.jun@samsung.com> 0.1.34
+- FIX :
+ - Back Button : enlarge backbutton click size for white theme
+- Feature :
+ - Expandable List : Add refresh api
+* Mon Aug 02 2012 Jinhyuk Jun <jinhyuk.jun@samsung.com> 0.1.33
+- FIX :
+ - click event touch threshold tuning
+
+* Mon Aug 02 2012 Jinhyuk Jun <jinhyuk.jun@samsung.com> 0.1.32
+- FIX :
+ - Add back button highlight effect for white theme
+
+* Mon Aug 01 2012 Jinhyuk Jun <jinhyuk.jun@samsnug.com> 0.1.31
+- FIX :
+ - IME checkroutine update, improve relayout on resize event
+ - Add highlight effect for radio button list
+ - Scrollview : fix condition of updatelayout event
+- Feature : progressing : add show/hide api
+
+* Mon Jul 27 2012 Koeun Choi <koeun.choi@samsung.com> 0.1.30
+- FIX : virtuallist, virtualgrid: Clean up temporary jquery.template object to clear cache
+ add default theme option on buttonMarkup for tizen theme
+ [searchbar] first fix : focus/blur fixed
+ back button does not work when long press
+ scrollview: don't auto scrolling if resizing area is too large
+- Feature : notification : add api to set the icon at tickernoti
+ demo : update the list sample demo
+ Support tizen default theme
+
+* Mon Jul 23 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.29
+- Improvements & Bugfixes
+ - HOTFIX: Revert template function with jquery.template
+
+* Thu Jul 19 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.28
+- Improvements & Bugfixes
+ - Fix #WEB-1028: memory leak on virtuallist/virtualgrid
+- Spec changes
+ - $.tizen.loadTheme() function accepts theme name as arguement
+ - Scrollview supports 'updatelayout' callback
+
+* Tue Jul 17 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.27
+- Improvements & Bugfixes
+ - Revert 'preventing long-press popup' patch, to fix backbutton to work in SocialMagazine
+* Tue Jul 17 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.26
+- Improvements & Bugfixes
+ - Add tizen-white theme package, to make rpm build to be finished
-%package -n libweb-ui-fw
+* Tue Jul 17 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.25
+- Improvements & Bugfixes
+ - Set 'slide' as default page transition effect, by JQM patch
-%package -n libweb-ui-fw-theme-tizen-gray
+* Fri Jul 13 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.24
+- Improvements & Bugfixes
+ - Fix IME show/hide algorithm
+ - Fix error on virtualgrid: link _set_scrollbar_size() function to the one in virtuallist
-%package -n libweb-ui-fw-dev
+* Wed Jul 11 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.23
+- Improvements & Bugfixes
+ - Fix notification position
+ - Fix unit tests
-%package -n libweb-ui-fw-demo-tizen-gray
+ Fri Jul 6 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.22
+- Spec changes
+ - JQM 1.1 upgrade
+- Improvements & Bugfixes
+ - Transform3D support on scrollview
+ - Page layout supports IME control
+ - Mapview supports pinch zoom on JQM 1.1
+ - Fix wrong character on button in minified version
+ - Virtualgrid supports scrollbar
+ - Lots of bugfixes
+* Fri Jun 22 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.20
+- Spec changes
+ - Support 'latest' version (by symlink) for tizen-web-ui-fw.js path.
+ - imageslider : supports 'resize' event.
+ - listview : listview has 1px padding-bottom.
+ - loader : Change global namespace, from S to $.tizen.
+ - loader : Move loadCustomGlobalizeCulture() into $.tizen.util namespace.
+- Improvements & Bugfixes
+ - Scrollview : supports 'translate3d', instead of 'translate'.
+ - notification : reset timer when 'show' or 'refresh' event.
+ - JQM patch : Fix vclick event triggered twice.
+- Etc.
+ - Add & fix unit tests.
+* Thu Jun 14 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.19
+- Spec changes
+ - mapview : new widget.
+ - notification : add .refresh() API.
+ - pagecontrol : add .value([val]) API, and change an attribute name 'data-initVal' to 'data-value'.
+- Improvements & Bugfixes
+ - Support minified CSS.
+ - loader : Fix & refactor 'loading globalize culture file' routine.
+ - JQM Patch : Calculate min-height of window in javascript code, and remove predefined min-height value from CSS.
+ - Many more bugfixes.
+- Etc.
+ - Add many unit tests.
+ - Fix test coverage instrumentation tool to work with current source code.
/**
- * loader.js : Loader for web-ui-fw
- * Refactored from bootstrap.js
- *
- * By Youmin Ha <youmin.ha@samsung.com>
+ * loader.js
*
+ * Youmin Ha <youmin.ha@samsung.com>
*/
( function ($, Globalize, window, undefined) {
- window.S = {
+ var tizen = {
libFileName : "tizen-web-ui-fw(.min)?.js",
frameworkData : {
rootDir: '/usr/lib/tizen-web-ui-fw',
version: '0.1',
- theme: "default",
+ theme: "tizen-white",
viewportScale: false,
+ defaultFontSize: 16,
+ minified: false
},
util : {
url: scriptPath,
dataType: 'script',
async: false,
+ crossDomain: false,
success: successCB,
error: function ( jqXHR, textStatus, errorThrown ) {
if ( errorCB ) {
} );
},
getScaleFactor: function ( ) {
- var factor = window.scale,
+ var factor = navigator.scale,
width = 0,
defaultWidth = 720;
'',
addElementToHead : function ( elem ) {
var head = document.getElementsByTagName( 'head' )[0];
- head.appendChild( elem );
- },
- load: function ( path ) {
- this.addElementToHead( this.makeLink( path + this.cacheBust ) );
+ if( head ) {
+ $( head ).prepend( elem );
+ }
},
makeLink : function ( href ) {
- var customstylesheetLink = document.createElement( 'link' );
- customstylesheetLink.setAttribute( 'rel', 'stylesheet' );
- customstylesheetLink.setAttribute( 'href', href );
- return customstylesheetLink;
+ var cssLink = document.createElement( 'link' );
+ cssLink.setAttribute( 'rel', 'stylesheet' );
+ cssLink.setAttribute( 'href', href );
+ cssLink.setAttribute( 'name', 'tizen-theme' );
+ return cssLink;
+ },
+ load: function ( path ) {
+ var head = document.getElementsByTagName( 'head' )[0],
+ cssLinks = head.getElementsByTagName( 'link' ),
+ idx,
+ l = null;
+ // Find css link element
+ for ( idx = 0; idx < cssLinks.length; idx++ ) {
+ if( cssLinks[idx].getAttribute( 'name' ) == "tizen-theme" ) {
+ l = cssLinks[idx];
+ break;
+ }
+ }
+ if ( l ) { // Found the link element!
+ l.setAttribute( 'href', path );
+ } else {
+ this.addElementToHead( this.makeLink( path ) );
+ }
}
},
getParams: function ( ) {
- /* Get data-* params from <script> tag, and set S.frameworkData.* values
+ /* Get data-* params from <script> tag, and set tizen.frameworkData.* values
* Returns true if proper <script> tag is found, or false if not.
*/
// Find current <script> tag element
src,
tokens,
version_idx;
+
+ function getTizenTheme( ) {
+ var t = navigator.theme ? navigator.theme.split( ':' )[0] : null;
+ if ( t ) {
+ t = t.replace('-hd', '');
+ if( ! t.match( /^tizen-/ ) ) {
+ t = 'tizen-' + t;
+ }
+ }
+ return t;
+ }
+
for ( idx in scriptElems ) {
elem = scriptElems[idx];
src = elem.src ? elem.getAttribute( 'src' ) : undefined;
|| tokens[ tokens.length + version_idx ]
|| this.frameworkData.version;
this.frameworkData.theme = elem.getAttribute( 'data-framework-theme' )
+ || getTizenTheme( )
|| this.frameworkData.theme;
this.frameworkData.viewportScale = "true" === elem.getAttribute( 'data-framework-viewport-scale' ) ? true : this.frameworkData.viewportScale;
+ this.frameworkData.minified = src.search(/\.min\.js$/) > -1 ? true : false;
foundScriptTag = true;
break;
}
return foundScriptTag;
},
- loadTheme: function ( ) {
- var themePath = [
- this.frameworkData.rootDir,
- this.frameworkData.version,
+ loadTheme: function ( theme ) {
+ var themePath, cssPath, jsPath;
+
+ if ( ! theme ) {
+ theme = tizen.frameworkData.theme;
+ }
+ themePath = [
+ tizen.frameworkData.rootDir,
+ tizen.frameworkData.version,
'themes',
- this.frameworkData.theme
+ theme
].join( '/' ),
- cssPath = [themePath, 'tizen-web-ui-fw-theme.css'].join( '/' ),
- jsPath = [themePath, 'theme.js'].join( '/' );
- this.css.load( cssPath );
- this.util.loadScriptSync( jsPath );
+ jsPath = [themePath, 'theme.js'].join( '/' );
+
+ if( tizen.frameworkData.minified ) {
+ cssPath = [themePath, 'tizen-web-ui-fw-theme.min.css'].join( '/' );
+ } else {
+ cssPath = [themePath, 'tizen-web-ui-fw-theme.css'].join( '/' );
+ }
+ tizen.css.load( cssPath );
+ tizen.util.loadScriptSync( jsPath );
},
/** Load Globalize culture file, and set default culture.
- * @param[in] language Language code. ex) en-US, en, ko-KR, ko
- * If language is not given, read language from html 'lang' attribute, or from system setting.
+ * @param[in] language (optional) Language code. ex) en-US, en, ko-KR, ko
+ * If language is not given, read language from html 'lang' attribute,
+ * or from system setting.
+ * @param[in] cultureDic (optional) Dictionary having language code->
*/
- loadGlobalizeCulture: function ( language ) {
- function getGlobalizeCultureFile( lang ) {
- return ['globalize.culture.', lang, '.js'].join( '' );
+ loadGlobalizeCulture: function ( language, cultureDic ) {
+ var self = this,
+ cFPath,
+ lang,
+ mockJSXHR;
+
+ function getLang ( language ) {
+ var lang = language
+ || $( 'html' ).attr( 'lang' )
+ || window.navigator.language.split( '.' )[0] // Webkit, Safari + workaround for Tizen
+ || window.navigator.userLanguage // IE
+ || 'en',
+ countryCode = null,
+ countryCodeIdx = lang.lastIndexOf('-'),
+ ignoreCodes = ['Cyrl', 'Latn', 'Mong']; // Not country code!
+ if ( countryCodeIdx != -1 ) { // Found country code!
+ countryCode = lang.substr( countryCodeIdx + 1 );
+ if ( ignoreCodes.join( '-' ).indexOf( countryCode ) < 0 ) {
+ // countryCode is not found from ignoreCodes.
+ // Make countryCode to uppercase.
+ lang = [ lang.substr( 0, countryCodeIdx ), countryCode.toUpperCase( ) ].join( '-' );
+ }
+ }
+ // NOTE: 'en' to 'en-US', because globalize has no 'en' culture file.
+ lang = lang == 'en' ? 'en-US' : lang;
+ return lang;
}
- function getGlobalizeCulturePath( self, file ) {
- return [
- self.frameworkData.rootDir,
- self.frameworkData.version,
- 'js',
- 'cultures',
- file,
- ].join( '/' );
+
+ function getNeutralLang ( lang ) {
+ var neutralLangIdx = lang.lastIndexOf( '-' ),
+ neutralLang;
+ if ( neutralLangIdx != -1 ) {
+ neutralLang = lang.substr( 0, neutralLangIdx );
+ }
+ return neutralLang;
}
- // Get lang, and change country code to uppercase chars.
- var self = this,
- lang = language
- || $( 'html' ).attr( 'lang' )
- || window.navigator.language.split( '.' )[0] /* Webkit, Safari + workaround for Tizen */
- || window.navigator.userLanguage /* IE */
- || 'en',
- countryCode = null,
- countryCodeIdx = lang.lastIndexOf('-'),
- ignoreCodes = ['Cyrl', 'Latn', 'Mong'], // Not country code!
- globalizeCultureFile,
- globalizeCulturePath,
- neutralLangIndex;
-
- if ( countryCodeIdx != -1 ) { // Found country code!
- countryCode = lang.substr( countryCodeIdx + 1 );
- if ( ignoreCodes.join( '-' ).indexOf( countryCode ) < 0 ) { // countryCode is not found from ignoreCodes
- // Make countryCode to uppercase
- lang = [ lang.substr( 0, countryCodeIdx ), countryCode.toUpperCase( ) ].join( '-' );
+ function getCultureFilePath ( lang, cFDic ) {
+ var cFPath = null; // error value
+
+ if ( "string" != typeof lang ) {
+ return null;
+ }
+ if ( cFDic ) {
+ if ( cFDic[lang] ) cFPath = cFDic[lang];
+ } else {
+ // Default Globalize culture file path
+ cFPath = [
+ self.frameworkData.rootDir,
+ self.frameworkData.version,
+ 'js',
+ 'cultures',
+ ['globalize.culture.', lang, '.js'].join( '' ),
+ ].join( '/' );
}
+ return cFPath;
}
- globalizeCultureFile = getGlobalizeCultureFile( lang );
- globalizeCulturePath = getGlobalizeCulturePath( self, globalizeCultureFile );
- neutralLangIndex = lang.lastIndexOf( '-' );
-
- // Run culture script
- console.log( 'Run globalize culture: ' + globalizeCulturePath );
- this.util.loadScriptSync(
- globalizeCulturePath,
- null,
- function ( jqXHR, textStatus, errorThrown ) { // Failed to load!
- if ( jqXHR.status == 404 ) {
- // If culture file is not found, run neutral language culture.
- // (e.g. en-US --> en)
- if ( neutralLangIndex != -1 ) {
- var neutralLang = lang.substr( 0, neutralLangIndex ),
- neutralCultureFile = getGlobalizeCultureFile( neutralLang ),
- neutralCulturePath = getGlobalizeCulturePath( self, neutralCultureFile );
- console.log( 'Run globalize culture of neutral lang: ' + neutralCulturePath );
- self.util.loadScriptSync( neutralCulturePath );
- }
- } else {
- window.alert( 'Error while loading ' + globalizeCulturePath + '\n' + jqXHR.status + ':' + jqXHR.statusText );
+ function printLoadError( cFPath, jqXHR ) {
+ console.log( "Error " + jqXHR.status + ": " + jqXHR.statusText );
+ console.log( "::Culture file (" + cFPath + ") is failed to load.");
+ }
+
+ function loadCultureFile ( cFPath, errCB ) {
+ function _successCB ( ) {
+ console.log( "Culture file (" + cFPath + ") is loaded successfully.");
+ }
+ function _errCB ( jqXHR, textStatus, err ) {
+ if( errCB ) {
+ errCB( jqXHR, textStatus, err );
}
+ else {
+ printLoadError( cFPath, jqXHR );
+ }
+ }
+
+ if( ! cFPath ) { // Invalid cFPath -> Regard it as '404 Not Found' error.
+ mockJSXHR = {
+ status: 404,
+ statusText: "Not Found"
+ };
+ _errCB( mockJSXHR, null, null );
+ } else {
+ $.ajax( {
+ url: cFPath,
+ dataType: 'script',
+ cache: true,
+ async: false,
+ success: _successCB,
+ error: _errCB
+ } );
}
- );
+ }
+
+ lang = getLang( language );
+ cFPath = getCultureFilePath( lang, cultureDic );
+ loadCultureFile( cFPath,
+ function ( jqXHR, textStatus, err ) {
+ if( jqXHR.status == 404 ) {
+ // If culture file is not found, try once more with neutral lang.
+ var nLang = getNeutralLang( lang ),
+ cFPath = getCultureFilePath( nLang, cultureDic );
+ loadCultureFile( cFPath, null );
+ } else {
+ printLoadError( cFPath, jqXHR );
+ }
+ } );
+
return lang;
},
setGlobalize: function ( ) {
var lang = this.loadGlobalizeCulture( );
// Set culture
- // NOTE: It is not needed to set with neutral lang.
+ // NOTE: It is not needed to set with neutral lang.
// Globalize automatically deals with it.
Globalize.culture( lang );
},
+ /**
+ * Load custom globalize culture file
+ * Find current system language, and load appropriate culture file from given colture file list.
+ *
+ * @param[in] cultureDic collection of 'language':'culture file path' key-val pair.
+ * @example
+ * var myCultures = {
+ * "en" : "culture/en.js",
+ * "fr" : "culture/fr.js",
+ * "ko-KR" : "culture/ko-KR.js"
+ * };
+ * loadCultomGlobalizeCulture( myCultures );
+ *
+ * ex) culture/fr.js
+ * -------------------------------
+ * Globalize.addCultureInfo( "fr", {
+ * messages: {
+ * "hello" : "bonjour",
+ * "translate" : "traduire"
+ * }
+ * } );
+ * -------------------------------
+ */
+ loadCustomGlobalizeCulture: function ( cultureDic ) {
+ tizen.loadGlobalizeCulture( null, cultureDic );
+ },
/** Set viewport meta tag for mobile devices.
*
* @param[in] viewportWidth Viewport width. 'device-dpi' is also allowed.
- * @param[in] useAutoScale If true, calculate & use scale factor. otherwise, scale factor is 1.
+ * @param[in] useAutoScale If true, cculate & use scale factor. otherwise, scale factor is 1.
* @param[in] useDeviceDpi If true, add 'target-densityDpi=device-dpi' to viewport meta content.
*/
setViewport: function ( viewportWidth, useAutoScale, useDeviceDpi ) {
var meta,
scale = 1,
- head;
+ head,
+ content,
+ ratio,
+ threshold = 15,
+ standardWidth = 360,
+ screenWidth = screen.width;
+
// Do nothing if viewport setting code is already in the code.
- $( "meta" ).each( function ( ) {
- if ( $( this ).attr( "name" ) === "viewport" ) {
- console.log( "User set viewport... framework viewport will not be applied." );
- meta = this;
- return;
- }
+ $( "meta[name=viewport]" ).each( function ( ) {
+ console.log( "User set viewport... framework viewport will not be applied." );
+ meta = this;
+ return;
});
+ if( meta ) {
+ content = $( meta ).prop( "content" );
+ if ( content.indexOf( "device-width" ) > 0
+ && content.indexOf( "device-dpi" ) > 0 ) {
+ ratio = screenWidth > standardWidth ? ( screenWidth/standardWidth) : 1;
+ $.vmouse.moveDistanceThreshold = threshold * ratio;
+ $.vmouse.clickDistanceThreshold = threshold * ratio;
+ }
+ return; // Ignore viewport setting, when viewport is already set.
+ }
// Set meta tag
meta = document.createElement( "meta" );
console.log( meta.content );
head = document.getElementsByTagName( 'head' ).item( 0 );
head.insertBefore( meta, head.firstChild );
+
+ // TODO : change threshold when scaleFactor is changed. Reference line 354-356
}
},
*/
scaleBaseFontSize: function ( themeDefaultFontSize, ratio ) {
var scaledFontSize = Math.round( themeDefaultFontSize * ratio );
- $( '.ui-mobile' ).css( { 'font-size': scaledFontSize + "px" } );
- $( '.ui-mobile').children( 'body' ).css( { 'font-size': scaledFontSize + "px" } );
+
+ $( 'html.ui-mobile' ).css( { 'font-size': scaledFontSize + "px" } );
+ console.log('html:font size is set to ' + scaledFontSize );
+ $( document ).ready( function ( ) {
+ $( '.ui-mobile').children( 'body' ).css( { 'font-size': scaledFontSize + "px" } );
+ } );
},
setScaling: function ( ) {
- var baseWidth = 720, // NOTE: need to be changed to get the value from theme.
+ var baseWidth = 720, // Winset GUI Guide is 720 HD.
standardWidth = 360,
- themeDefaultFontSize = parseInt( $( 'body' ).css( 'font-size' ), 10 );
+ themeDefaultFontSize;
+
+ themeDefaultFontSize = this.frameworkData.defaultFontSize;
+
$( 'body' ).attr( 'data-tizen-theme-default-font-size', themeDefaultFontSize );
if ( this.frameworkData.viewportScale ) {
this.setViewport( baseWidth, true, true );
} else {
// Fixed viewport scale(=1.0) with scaled font size
- this.setViewport( "device-dpi", false, undefined );
+ this.setViewport( "device-width", false, undefined );
this.scaleBaseFontSize( themeDefaultFontSize, parseFloat( standardWidth / baseWidth ) );
}
}
};
-} ( jQuery, window.Globalize, window ) );
+ function export2TizenNS ( $, tizen ) {
+ if ( undefined == typeof $.tizen ) {
+ $.tizen = { };
+ }
+
+ $.tizen.frameworkData = tizen.frameworkData;
+ $.tizen.loadCustomGlobalizeCulture = tizen.loadCustomGlobalizeCulture;
+ $.tizen.loadTheme = tizen.loadTheme;
+
+ $.tizen.__tizen__ = tizen; // for unit-test
+ }
-// Loader's job list
-( function ( S, $, undefined ) {
- S.getParams( );
- S.loadTheme( );
- S.setGlobalize( );
+ export2TizenNS( $, tizen );
+
+ tizen.getParams( );
+ tizen.loadTheme( );
+ tizen.setScaling( ); // Run after loadTheme(), for the default font size.
+ tizen.setGlobalize( );
// Turn off JQM's auto initialization option.
// NOTE: This job must be done before domready.
$.mobile.autoInitializePage = false;
$(document).ready( function ( ) {
- S.setScaling( );
$.mobile.initializePage( );
});
-} ( window.S, jQuery ) );
+
+} ( jQuery, window.Globalize, window ) );
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+
+<widget xmlns="http://www.w3.org/ns/widgets"
+ xmlns:tizen="http://tizen.org/ns/widgets"
+ version="0.1"
+ id="http://www.samsung.com/app/templateID"
+ viewmodes="fullscreen">
+ <!-- automatically generated name -->
+ <name>@APP_NAME@</name>
+
+ <!-- icon resource -->
+ <icon src="icon.png"/>
+
+ <!-- Permission : feature to access -->
+ <!-- modify here and remove comments
+ <feature name="http://waclists.org/api/deviceapis" required="false"/>
+ <feature name="http://wacapps.net/api/accelerometer" required="true" />
+ -->
+
+ <!-- access remote web resource -->
+ <!-- modify here and remove comments
+ <access origin="http://www.samsung.com" subdomain=true />
+ <access origin="*"/>
+ -->
+
+</widget>
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-
-<widget xmlns="http://www.w3.org/ns/widgets"
- version="0.1"
- id="http://www.samsung.com/app/templateID"
- viewmodes="fullscreen">
- <!-- automatically generated name -->
- <name>@APP_NAME@</name>
-
- <!-- icon resource -->
- <icon src="icon.png"/>
-
- <!-- Permission : feature to access -->
- <!-- modify here and remove comments
- <feature name="http://waclists.org/api/deviceapis" required="false"/>
- <feature name="http://wacapps.net/api/accelerometer" required="true" />
- -->
-
- <!-- access remote web resource -->
- <!-- modify here and remove comments
- <access origin="http://www.samsung.com" subdomain=true />
- <access origin="*"/>
- -->
-
-</widget>
@height_buttonEdit: 74 * @unit_base;
@width_buttonEdit: @height_buttonEdit;
-.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; /*margin: .5em 5px;*/ padding: 0; vertical-align: middle; } /* wongi_1018 : For button align. */
+.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; /*margin: .2em 0px;*/ padding: 0; vertical-align: middle; } /* wongi_1018 : For button align. */
.ui-btn:focus, .ui-btn:active { outline: none; }
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13 * @unit_base; margin: 0; }
.ui-btn-inline { display: inline-block; }
-.ui-btn-inner { padding: .6em 25 * @unit_base; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
-.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: 0.7em 8 * @unit_base 0.7em; } /* wongi_1024 : Button text middle align */
+.ui-btn-inner { padding: .5em 32 * @unit_base; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
+.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: 0.7em 0 0.7em; } /* wongi_1024 : Button text middle align */
.ui-header .ui-btn-inner.ui-btn-icon-only , .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner.ui-btn-icon-only { padding: .4em 8 * @unit_base .5em; } /* wongi_1024 : Button text middle align */
.ui-btn-icon-notext { width: 24 * @unit_base; height: 24 * @unit_base; }
.ui-btn-icon-notext .ui-btn-inner { padding: 2 * @unit_base 1 * @unit_base 2 * @unit_base 3 * @unit_base; }
.ui-header .ui-btn-icon-right .ui-btn-inner,
.ui-footer .ui-btn-icon-right .ui-btn-inner,
.ui-bar .ui-btn-icon-right .ui-btn-inner { padding-right: 27 * @unit_base; }
-.ui-btn-icon-top .ui-btn-inner { padding-top: 33 * @unit_base; }
+.ui-btn-icon-top .ui-btn-inner { padding-top: 27 * @unit_base; }
.ui-header .ui-btn-icon-top .ui-btn-inner,
.ui-footer .ui-btn-icon-top .ui-btn-inner,
.ui-bar .ui-btn-icon-top .ui-btn-inner { padding-top: 27 * @unit_base; }
.ui-btn-icon-left .ui-icon { left: /*10px;*/ 0 * @unit_base; } /* wongi_1018 : with 64px icon, left 10 -> 0 for good looking. */
.ui-btn-icon-circle .ui-icon {left: 0 * @unit_base;} /* wongi_1018 : for circle icon center positioning. */
.ui-btn-icon-right .ui-icon { right: 10 * @unit_base; }
-.ui-btn-icon-top .ui-icon { top: 10 * @unit_base; }
-.ui-btn-icon-bottom .ui-icon { bottom: 10 * @unit_base; }
+.ui-btn-icon-top .ui-icon { top: 0 * @unit_base; margin-top: 0; }
+.ui-btn-icon-bottom .ui-icon { bottom: 0 * @unit_base; }
.ui-header .ui-btn-icon-left .ui-icon,
.ui-footer .ui-btn-icon-left .ui-icon,
-.ui-bar .ui-btn-icon-left .ui-icon { left: 24 * @unit_base; } /* SLP Default Footer : Jinhyuk */
+.ui-bar .ui-btn-icon-left .ui-icon { left: @style-back-btn-left; } /* SLP Default Footer : Jinhyuk */
.ui-header .ui-btn-icon-right .ui-icon,
.ui-footer .ui-btn-icon-right .ui-icon,
.ui-bar .ui-btn-icon-right .ui-icon { right: 4 * @unit_base; }
{
padding: 0.2em 0.5em;
}
+.ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt
+{
+ padding-top: 52 * @unit_base;
+}
+.ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt
+{
+ padding-bottom: 52 * @unit_base;
+}
+/* white theme, delete button padding */
+.ui-li .ui-btn.ui-btn-edit .ui-btn-inner.ui-btn-hastxt
+{
+ .LESSbutton_edit_padding;
+}
/* wongi_1017 : Icons */
/* icons sizing */
.ui-btn.ui-btn-edit .ui-icon { width: @width_buttonEdit; height: @height_buttonEdit; }
/* Padding for Icon with text */
-.ui-btn .ui-btn-text.ui-btn-text-padding-left {padding-left: 32 * @unit_base;}
-.ui-btn .ui-btn-text.ui-btn-text-padding-right {padding-right: 48 * @unit_base;}
-
+.ui-btn .ui-btn-text.ui-btn-text-padding-left { padding-left: 44 * @unit_base; }
+.ui-btn .ui-btn-text.ui-btn-text-padding-right { padding-right: 48 * @unit_base; }
+.ui-btn .ui-btn-text.ui-btn-text-padding-top {padding-top: 32 * @unit_base;}
+.ui-icon
+{
+ z-index: 10;
+ background-repeat: no-repeat;
+ vertical-align: middle;
+ background-position: 0% 0%;
+ background-size: 100%;
+}
+.ui-btn-box.s .ui-icon
+{
+ position: absolute;
+}
+.ui-btn-box-s.ui-btn-icon-left .ui-icon, .ui-btn-box-s.ui-btn-icon-right .ui-icon
+{
+ margin-top: -64 * @unit_base / 2;
+ top: 50%;
+}
+.ui-btn-box-s.ui-btn-icon-top .ui-icon, .ui-btn-box-s.ui-btn-icon-bottom .ui-icon
+{
+ margin-left: -64 * @unit_base / 2;
+ left: 50%;
+}
.tizen-icon-common
{
/* Overlap original property */
- background-position:0% 0%;
-
width: 64 * @unit_base; height: 64 * @unit_base;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- margin-top : 50%;
- top : -32 * @unit_base;
- z-index : 10;
- vertical-align:middle;
+ /* margin-top : 50 */
+ /* top : -32 * @unit_base; */
}
.ui-icon-bg {.tizen-icon-common; background-image: url(images/00_btn_circle_bg_normal.png); z-index:0; }
.ui-icon-editplus {.tizen-icon-common; background-image: url(images/00_button_icon_plus.png); top : -@height_buttonEdit/2;}
/* Header back btn : Jinjyuk */
-.ui-btn-up-s .ui-icon-header-back-btn{
+.ui-btn-up-s .ui-icon-header-back-btn{
width: 56 * @unit_base;
height: 56 * @unit_base;
- left : 24 * @unit_base;
- top : 10 * @unit_base;
+
background-repeat: no-repeat;
background-size: 100% 100%;
-background-image: url(images/00_winset_Back.png);}
+
+ .LESSbtn-arrow-position;
+ background-image: url(images/00_winset_Back.png);
+}
+
.ui-btn-down-s, .ui-btn-hover-s {
- .ui-icon-header-back-btn{
- width: 56 * @unit_base; height: 56 * @unit_base;
- left : 24 * @unit_base;
- top : 10 * @unit_base;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- background-image: url(images/00_winset_Back.png);}
+ .ui-icon-header-back-btn{
+ width: 56 * @unit_base;
+ height: 56 * @unit_base;
+
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+
+ .LESSbtn-arrow-position;
+ background-image: url(images/00_winset_Back.png);
+ }
+}
+
+.ui-header {
+ .ui-btn-down-s, .ui-btn-hover-s, .ui-btn-up-s {
+ .ui-icon-header-back-btn {
+ top : @style-back-btn-arrow-top;
+ }
+ }
}
.ui-icon-header-back-btn{
/* No BG button : data-iconbg = "nobg" */
.ui-btn.ui-btn-icon-nobg, .ui-btn .ui-btn-icon-nobg
{
+ background: transparent;
background-color: transparent;
border: none;
}
.ui-btn.ui-btn-edit
{
- background-color: @color_button_normal;
+ .LESSbutton_edit_style;
position: absolute;
top: 0 * @unit_base;
margin-top: 0 * @unit_base;
.ui-btn.ui-btn-edit.ui-btn-down-s
{
- background-color: @color_button_press;
+ .LESSbutton_editpress_style;
}
+
+.ui-btn-box-s
+{
+ .LESSbutton_box_style;
+}
+
/* 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; background: black; }
-}
-@media screen and (orientation: landscape){
-.ui-mobile, .ui-mobile .ui-page { min-height: 300px; background: black; }
+.ui-mobile, .ui-mobile .ui-page {
+ background: @color_bg;
+ color : @color_text;
}
/* native overflow scrolling */
.ui-page .ui-header, .ui-page .ui-footer {
position : fixed; /*position: relative;*/
z-index : @z_base_header_footer;
-}/* Option header reposition : Jinhyuk */
-.ui-header .ui-btn-left { position: absolute; left: 10px; top: .4em; }
-.ui-header .ui-btn-right { position: absolute; right: 10px; top: .4em; }
+}
+/* Title button packing order */
+.ui-header .ui-btn-left {
+ top: .4em;
+ float: left;
+}
+.ui-header .ui-btn-right {
+ float: right;
+ top: .4em;
+}
.ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 90px .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
/*content area*/
.ui-btn-inner {
display: inline-block;
line-height: @checkbox-radio-all-height;
- padding: 0 0 0 16*@unit_base;
+ padding: 0 16*@unit_base 0 16*@unit_base;
.ui-btn-text {
display: inline-block;
vertical-align: middle;
.ui-icon {
position: absolute;
top: 50%;
+ left: 16 * @unit_base;
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
margin-top: @checkbox-radio-icon-internal-bottom;
*/
.ui-field-contain { padding: 1.5em 0; margin: 0; border-bottom-width: 1px; overflow: visible; }
.ui-field-contain:first-child { border-top-width: 0; }
-@media all and (min-width: 450px){
- .ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
-}
\ No newline at end of file
+@media all {
+ .ui-field-contain { border-width: 0; padding: 0; margin: 0.8em 0; }
+}
position: relative;\r
width: 70%;\r
padding: 0;\r
- background-color: black;\r
+ background-color: @color_searchbar_input_field_bg;\r
.ui-input-text {\r
height: 74 * @unit_base;\r
padding : 0px;\r
\r
.ui-btn-icon-cancel.ui-input-cancel {\r
width: 26%; \r
+ -webkit-transition: all 400ms linear;\r
+ -moz-transition: all 400ms linear;\r
+ -o-transition: all 400ms linear;\r
+ transition: all 400ms linear;\r
}\r
.ui-btn-cancel-hide {\r
left: 100%;\r
- -webkit-transition: left 400ms linear;\r
- -moz-transition: left 400ms linear;\r
- -o-transition: left 400ms linear;\r
- transition: left 400ms linear;\r
+ visibility: hidden;\r
}\r
.ui-btn-cancel-show {\r
left: 70%;\r
- -webkit-transition: left 400ms linear;\r
- -moz-transition: left 400ms linear;\r
- -o-transition: left 400ms linear;\r
- transition: left 400ms linear;\r
+ visibility: visible;\r
}\r
}\r
\r
@import "config.less";
-// Basic
+/* Using font size */
@list-font-size-main: 44 * @unit_base;
@list-font-size-sub: 32 * @unit_base;
-@list-font-size-divider: 28 * @unit_base; // NOTE: defined in dialogue group
+@list-font-size-divider: 32 * @unit_base; // NOTE: defined in dialogue group
+/*
@list-dialogue-font-size-main: 38 * @unit_base;
@list-dialogue-font-size-sub: 32 * @unit_base;
-
+*/
@list-font-weight: normal;
+/*
@list-li-height: 112 * @unit_base;
+
@list-li-2line-height: 128 * @unit_base;
@list-li-3line-height: 160 * @unit_base;
@list-li-top-padding: 10 * @unit_base;
@list-li-main-line-height: 60 * @unit_base;
@list-li-sub-line-height: 48 * @unit_base;
+*/
+@list-smallicon-size: 32 * @unit_base;
@list-li-padding-horizontal: 16 * @unit_base;
+/*
@list-li-divider-height: 32 * @unit_base;
-@list-smallicon-size: 32 * @unit_base;
+*/
@list-bigicon-size: 64 * @unit_base;
-@list-bigicon-size2: 96 * @unit_base;
+@list-bigicon-size2: 72 * @unit_base;
+/*
@list-checkbox-size: 42 * @unit_base;
-
@list-progressbar-height: 16 * @unit_base;
+*/
+
// Bubble
@list-li-bubble-font-size: 38 * @unit_base;
@list-li-bubble-date-font-size: @list-li-bubble-time-font-size;
@list-li-bubble-corner-radius: 9 * @unit_base; // TODO: fit to 9px (picked from bg images)
-@list-li-dialogue-width: 16 * @unit_base;
-
@list-li-sub-left-width: 187 * @unit_base;
@list-li-main-right-padding: 187 * @unit_base;
border-top-width: 1px;
border-top-style: solid;
- // Override default button behavior for listitem
- li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
- li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
- li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
- font-size: @font_size_list_main_text;
- }
-
li.ui-btn > .ui-btn-hastxt > .ui-btn-text.ui-btn-text-padding-right {
padding-right: 0 * @unit_base; // Clear default button padding-right
}
// list item separator line
border-bottom-width: 1px;
border-bottom-style: solid;
+
+ border-top-width: 0px;
+ }
+
+ &> .ui-li:not(.ui-li-divider) {
+ &:not(.ui-li-static) {
+ min-height : 112 * @unit_base;
+ }
+ }
+
+ &> .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
+ &:not(.ui-li-static) {
+ min-height : 128 * @unit_base;
+ }
}
}
.ui-content {
.ui-listview {
margin: -16 * @unit_base;
+ padding-bottom: 1px;
.ui-listview {
margin: 0;
.ui-li {
list-style:none;
padding:0;
+
+ font-size : @list-font-size-main;
+
}
.ui-li,
.ui-li.ui-field-contain {
text-align: left;
}
.ui-li {
+
+ h3 {
+ margin-top : 0px;
+ margin-bottom : 0px;
+
+ font-size : @list-font-size-main;
+ min-height : 52 * @unit_base;
+ font-weight : normal;
+ }
.ui-btn {
top: 50%;
margin-top: -0.8em;
padding: 0;
border-width:0;
}
+
+ &>.ui-btn-inner.ui-btn-hastxt {
+ padding: 0px 0px;
+
+ }
+
.ui-btn-inner a.ui-link-inherit,
&.ui-li-static {
- padding: .7em 16*@unit_base;
+ padding-top : 30 * @unit_base;
+ padding-bottom : 30 * @unit_base;
+ padding-left : 16 * @unit_base;
+ padding-right : 16 * @unit_base;
display: block;
}
+
+ .ui-toggleswitch {
+ &:last-child {
+ top : 50%;
+ margin-top : -40 * @unit_base;
+
+ display : inline-block;
+ position : absolute;
+
+ right : 16 * @unit_base;
+ }
+ }
+
+ [data-role="button"] {
+ &:last-child {
+ position : absolute;
+ right : 16 * @unit_base;
+ }
+ }
+
+ .ui-radio,
+ .ui-checkbox {
+ &:first-child{
+ position : absolute;
+ top : 50%;
+ margin-top : -30 * @unit_base;
+
+ left : 16 * @unit_base;
+
+ width : 60 * @unit_base;
+ height : 60 * @unit_base;
+
+ .ui-btn-inner {
+ padding : 10 * @unit_base 10 * @unit_base 10 * @unit_base 10 * @unit_base;
+ line-height : 40 * @unit_base;
+
+ color : transparent;
+
+ .ui-icon {
+ left : 5 * @unit_base;
+ }
+ }
+ }
+ }
+
+ img.ui-li-bigicon {
+ position : absolute;
+
+ top : 50%;
+ margin-top : -36 * @unit_base;
+
+ &:first-child {
+ left : 16 * @unit_base;
+ }
+
+ &:nth-child(2) {
+ left : 92 * @unit_base;
+ }
+
+ &:last-child {
+ right : 16 * @unit_base;
+ }
+ }
+
+ .ui-li-color-bar + img.ui-li-bigicon:nth-child(2) {
+ left : 16 * @unit_base;
+ }
+
+ .ui-li-color-bar {
+ position : absolute;
+ width : 12 * @unit_base;
+ height : 20 * @unit_base;
+
+ top : 0 * @unit_base;
+ left : 0 * @unit_base;
+
+ background-color : rgba(0, 0, 0, 1);
+ }
}
-.ui-li-divider,
-.ui-li-static {
- font-weight: @list-font-weight;
- padding: 0px @list-li-padding-horizontal;
+
+li.ui-li-thumbnail-right {
+ img.ui-li-bigicon.ui-li-thumb {
+ left : auto;
+ right : 16 * @unit_base;
+ }
}
-.ui-li-static {
- font-size: @font_size_list_main_text;
+
+.ui-li.ui-li-has-multiline {
+ .ui-btn-inner a.ui-link-inherit,
+ &.ui-li-static {
+ padding-top : 10 * @unit_base;
+ padding-bottom : 58 * @unit_base;
+/* padding-left : 16 * @unit_base;
+ padding-right : 16 * @unit_base;
+ display: block;*/
+
+ min-height : 60 * @unit_base;
+ }
}
+
+
+/********************************************/
+/*************** Divider ********************/
+/********************************************/
.ui-li-divider {
+ cursor: default;
+
counter-reset: listnumbering;
+ font-weight: bold;
font-size: @list-font-size-divider;
- padding-top: @list-font-size-divider;
- &.ui-bar-s {
- height : @list-font-size-divider;
- }
+ padding-left: 16 * @unit_base;
+ padding-top: 8 * @unit_base;
+ padding-bottom: 8 * @unit_base;
}
+.ui-listview .ui-li-divider {
+ &[data-style="dialogue"] {
+ height: 32 * @unit_base;
+ padding : 0px;
+
+ .LESSdialogue-divider;
+ }
+
+ &[data-style="check"] {
+ height: 60 * @unit_base;
+ padding-top : 0px;
+ padding-bottom : 0px;
-// Ordered list
-ol.ui-listview .ui-link-inherit:before,
-ol.ui-listview .ui-li-static:before,
-.ui-li-dec {
- font-size: .8em;
- display: inline-block;
- padding-right: .3em;
- font-weight: normal;
- counter-increment: listnumbering;
- content: counter(listnumbering) ". ";
-}
-ol.ui-listview {
- .ui-li-jsnumbering:before {
- content: "" !important; /* to avoid chance of duplication */
+ padding-left : 92 * @unit_base;
+ line-height : 60 * @unit_base;
}
-}
-// Detailed li styles
+ &[data-style="checkexpandable"] {
+ height: 60 * @unit_base;
+ padding-top : 0px;
+ padding-bottom : 0px;
-.ui-listview-inset {
- .ui-li {
- border-right-width: 1px;
- border-left-width: 1px;
+ padding-left : 92 * @unit_base;
+ line-height : 60 * @unit_base;
}
}
-.ui-li-has-thumb {
+
+.ui-divider-expand-div {
+
+
+}
+
+
+.ui-li-has-thumb:not(.ui-li-thumbnail-right) {
.ui-btn-inner a.ui-link-inherit,
&.ui-li-static {
min-height: 60 * @unit_base;
- padding-left: 100 * @unit_base;
+ padding-left: 104 * @unit_base;
+ }
+ .ui-li-text-sub {
+ padding-left: 104 * @unit_base;
}
}
-.ui-li-has-icon {
+
+.ui-li-has-checkbox,
+.ui-li-has-radio{
.ui-btn-inner a.ui-link-inherit,
- &.ui-li-static {
- min-height: 20px;
- padding-left: 40px;
+ &.ui-li-static {
+ min-height: 60 * @unit_base;
+ padding-left: 92 * @unit_base;
+ }
+ .ui-li-text-sub {
+ padding-left: 92 * @unit_base;
}
}
-.ui-li-has-count {
+
+.ui-li-has-thumb.ui-li-has-checkbox,
+.ui-li-has-thumb.ui-li-has-radio {
.ui-btn-inner a.ui-link-inherit,
- &.ui-li-static {
- padding-right: 45px;
+ &.ui-li-static {
+ min-height: 60 * @unit_base;
+ padding-left: 180 * @unit_base;
+ }
+
+ .ui-li-text-sub {
+ padding-left: 180 * @unit_base;
}
}
-.ui-li-has-arrow {
+
+.ui-li-has-icon {
.ui-btn-inner a.ui-link-inherit,
&.ui-li-static {
- padding-right: 30px;
+ min-height: 20px;
+ padding-left: 40px;
}
- &.ui-li-has-count .ui-btn-inner a.ui-link-inherit,
- &.ui-li-static.ui-li-has-count {
- padding-right: 75px;
+ .ui-li-text-sub {
+ padding-left: 40px;
}
}
+
.ui-li-heading {
font-size: 16px;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
-.ui-li-desc {
- font-size: 12px;
- font-weight: normal;
- display: block;
- margin: -.5em 0 .6em;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
+
.ui-li-thumb,
.ui-li-icon {
position: absolute;
max-height: @list-bigicon-size2;
max-width: @list-bigicon-size2;
}
-.ui-li-aside {
- float: right;
- width: 50%;
- text-align: right;
- margin: .3em 0;
-}
-@media all and (min-width: 480px){
- .ui-li-aside { width: 45%; }
-}
-.ui-li-divider {
- cursor: default;
-}
-.ui-li-has-alt {
- .ui-btn-inner a.ui-link-inherit,
- &.ui-li-static {
- padding-right: 95px;
- }
-}
-.ui-li-has-count {
- .ui-li-count {
- position: absolute;
- font-size: 11px;
- font-weight: bold;
- padding: .2em .5em;
- top: 50%;
- margin-top: -.9em;
- right: 38px;
- }
-}
-.ui-li-divider .ui-li-count,
-.ui-li-static .ui-li-count {
- right: 10px;
-}
-.ui-li-has-alt .ui-li-count {
- right: 55px;
-}
-.ui-li-link-alt {
- position: absolute;
- width: 40px;
- height: 100%;
- border-width: 0;
- border-left-width: 1px;
- top: 0;
- right: 0;
- margin: 0;
- padding: 0;
- z-index: 2;
- .ui-btn {
- overflow: hidden;
- position: absolute;
- right: 8px;
- top: 50%;
- margin: -11px 0 0 0;
- border-bottom-width: 1px;
- z-index: -1;
- }
- .ui-btn-inner {
- padding: 0;
- height: 100%;
- position: absolute;
- width: 100%;
- top: 0;
- left: 0;
- }
- .ui-btn .ui-icon {
- right: 50%;
- margin-right: -9px;
- }
-}
.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
border-top: 0px;
}
-.ui-listview-filter {
- border-width: 0;
- overflow: hidden;
- margin: -15px -15px 15px -15px;
-
- .ui-input-search {
- margin: 5px;
- width: auto;
- display: block;
- }
-}
-.ui-listview-filter-inset {
- margin: -15px -5px -15px -5px;
- background: transparent;
-}
-.ui-li.ui-screen-hidden {
- display:none;
-}
.ui-li-sub,
.ui-li-sub-setting {
float: right;
margin: .3em 0;
}
-/* listview: size for li with a link */
-/*
-.ui-listview li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
-.ui-listview li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
-.ui-listview li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
- margin: 0;
- min-height: @height;
- padding-left: 0;
-}
-*/
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+/* ~~~~~~~~~~~~~~ NEW LIST STYLE ~~~~~~~~~ */
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+.ui-li-text-sub {
+ float: right;
+ text-align: right;
+ font-size: @font_size_list_sub_text;
+ color: @color_list_sub_text_default;
+/* top: 50%;
+ margin-top: -0.5em;*/
-// =======================
-// tizen normal list
-// =======================
-.ui-li-long-text {
- display: inline-block;
- text-overflow: ellipsis;
- overflow-x: hidden;
- white-space: nowrap;
+ position : absolute;
+ right : 16 * @unit_base;
+ top : 16 * @unit_base;
+ > img {
+ position : relative;
+ width: @list-smallicon-size;
+ height: @list-smallicon-size;
+ margin: 0 @list-li-padding-horizontal 0 @list-li-padding-horizontal;
+ }
}
-.LESSli-reset-position-1line(@height: @list-li-main-line-height, @padding-left: @list-li-padding-horizontal) {
- margin: 0;
- height: @height !important;
- min-height: @height;
- padding-left: @padding-left;
-}
-.LESSli-reset-position(@height: @list-li-2line-height) {
- margin: 0;
- padding: 0 @list-li-padding-horizontal;
- height: @height;
- min-height: @height;
-}
-.LESSli-reset-position-3line(@height: @list-li-3line-height) {
- margin: 0;
- padding: 0 @list-li-padding-horizontal;
- height: @height;
- min-height: @height;
-}
-.LESStext-main-1line(@left:@list-li-padding-horizontal) {
- .ui-li-text-main {
- font-size: @font_size_list_main_text;
- top: 50%;
- left: @left;
- margin-top: -0.5em;
- }
-}
+.ui-li-text-sub2 {
+ float: right;
+ text-align: right;
+ font-size: @font_size_list_sub_text;
+ color: @color_list_sub_text_default;
-.LESStext-sub-1line() {
- .ui-li-text-sub {
- float: right;
- text-align: right;
- font-size: @font_size_list_sub_text;
- color: @color_list_sub_text_default;
- top: 50%;
- margin-top: -0.5em;
- }
-}
-.LESStext-sub-setting() {
- .ui-li-text-sub {
- color: @color_list_sub_text_settings;
- }
-}
+ position : absolute;
+ right : 16 * @unit_base;
+ top : 16 * @unit_base;
-.LESStext-email-sub1-setting() {
- .ui-li-text-sub1 {
- color: @color_list_sub_text_settings;
- }
+ > img {
+ width: @list-smallicon-size;
+ height: @list-smallicon-size;
+ margin: 0 0 0 @list-li-padding-horizontal;
+ }
}
+/*
+li:not(.ui-li-has-multiline) .ui-li-text-sub {
+ position : absolute;
-.LESStext-sub-1line-left(@left:@list-li-padding-horizontal) {
- .ui-li-text-sub-left {
- font-size: @font_size_list_sub_text;
- top: 50%;
- left: @left;
- width: @list-li-sub-left-width;
- line-height: @list-li-main-line-height;
- margin-top: -0.5em;
- vertical-align: top;
- }
+ right : 16 * @unit_base;
+ top: 22 * @unit_base;
+ margin-top: 0px;
+}*/
+.ui-li-has-multiline .ui-li-text-sub {
+ position : absolute;
+
+ right : auto;
+ left : 16 * @unit_base;
+ top: 70 * @unit_base;
+ margin-top: 0px;
}
-.LESStext-main-1line-right(@left:@list-li-main-right-padding) {
- .ui-li-text-main-right {
- font-size: @font_size_list_main_text;
- top: 50%;
- left: @left;
- margin-top: -0.5em;
- padding-left: @list-li-padding-horizontal;
- border-left: 1px rgba(68, 68, 68, 255) solid;
- }
+
+.ui-li-icon-sub-right,
+.ui-li-icon-sub {
+ position: absolute;
+ left: auto;
+ width: @list-smallicon-size;
+ height: @list-smallicon-size;
+ margin: 0 0;
}
-.LESStext-main-1line-right-setting() {
- .ui-li-text-main-right {
- color: @color_list_sub_text_settings;
- }
+.ui-li-icon-sub-right {
+ right : 16 * @unit_base;
}
-.LESStext-main-2line(@left:@list-li-padding-horizontal, @top: @list-li-top-padding) {
- .ui-li-text-main {
- position: absolute;
- font-size: @font_size_list_main_text;
- line-height: @list-li-main-line-height;
- left: @left;
- top: @top;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 90%;
- }
-}
-.LESStext-sub-2line-left(@left:@list-li-padding-horizontal, @top: @list-li-top-padding+@list-li-main-line-height) {
- .ui-li-text-sub {
- position: absolute;
- font-size: @font_size_list_sub_text;
- line-height: @list-li-sub-line-height;
- color: @color_list_sub_text_default;
- left: @left;
- top: @top;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 90%;
- }
-}
-.LESStext-sub-2line-right(@right:@list-li-padding-horizontal, @top: @list-li-top-padding) {
- .ui-li-text-sub2 {
- position: absolute;
- font-size: @font_size_list_sub_text;
- line-height: @list-li-sub-line-height;
- color: @color_list_sub_text_default;
- right: @right;
- top: @top;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 30%;
- }
-}
+// =========
+// Dialogue
+// =========
+.ui-listview {
+ &> li.ui-li-dialogue {
+ margin-left: @style_list_li_dialogue_margin_left;
+ margin-right : @style_list_li_dialogue_margin_left;
+ border-left: @style_list_li_dialogue_border_left_width @color_dialogue_editor_border solid;
+ //margin-left: @style_list_li_dialogue_margin_left;
+ border-top-width: 0px;
-.LESStext-main-3line(@left:@list-li-padding-horizontal, @top: @list-li-top-padding) {
- .ui-li-text-main {
- position: absolute;
- font-size: @font_size_list_main_text;
- line-height: @list-li-sub-line-height;
- left: @left;
- top: @top;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 90%;
+ .LESSdialogue-border-style;
}
-}
-.LESStext-email-main-3line(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top: @list-li-email-top-padding) {
- .ui-li-text-main {
- position: absolute;
- font-size: @font_size_list_main_text;
- line-height: @list-li-main-line-height;
- left: @left;
- top: @top;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 90%;
+ &> li.ui-li-dialogue.ui-body-s,
+ &> li.ui-li-dialogue.ui-btn-hover-up-s:not(.ui-btn-down-s),
+ &> li.ui-li-dialogue.ui-btn-up-s {
+ &:not(.ui-li-expanded){
+ background : @color_list_dialogue_bg;
+ }
}
-}
-.LESStext-sub-3line-left1(@left:@list-li-padding-horizontal, @top: @list-li-top-padding+@list-li-main-line-height) {
- .ui-li-text-sub1 {
- position: absolute;
- font-size: @font_size_list_sub_text;
- line-height: @list-li-sub-line-height;
- color: @color_list_sub_text_default;
- left: @left;
- top: @top;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 90%;
+
+ &> li.ui-li-dialogue.ui-li-divider {
+ height: 32 * @unit_base;
+ padding : 0px;
}
-}
-.LESStext-sub-3line-left2(@left:@list-li-padding-horizontal, @top: @list-li-top-padding+@list-li-main-line-height) {
- .ui-li-text-sub2 {
- position: absolute;
- font-size: @font_size_list_sub_text;
- line-height: @list-li-sub-line-height;
- color: @color_list_sub_text_default;
- left: @left;
- top: @top;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 90%;
+
+ &> li.ui-li-group-title {
+ padding-top : 32 * @unit_base;
}
-}
-.LESStext-email-sub-3line-sub1(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top:@list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding) {
- .ui-li-text-sub1 {
- position: absolute;
- font-size: @font_size_list_sub_text;
- line-height: @list-li-email-sub-line-height;
- color: @color_list_name_text;
- left: @left;
- top: @top;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 90%;
+ &> li.ui-li-group-title span {
+ padding-left : 16 * @unit_base;
}
-}
-.LESStext-email-sub-3line-sub2(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top:@list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height) {
- .ui-li-text-sub2 {
- position: absolute;
- font-size: @font_size_list_sub_text;
- line-height: @list-li-email-sub-line-height;
- color: @color_list_contents_text;
- left: @left;
- top: @top;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 90%;
- }
-}
-.LESStext-email-sub-3line-sub3(@right:@list-li-padding-horizontal, @top: @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height) {
- .ui-li-text-sub3 {
- position: absolute;
- font-size: @font_size_list_sub_text;
- line-height: @list-li-email-sub-line-height;
- color: @color_list_sub_text_default;
- right: @right;
- top: @top;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 30%;
- }
-}
-
-
-
-.LESSsubicon-right(@right:@list-li-padding-horizontal, @top: @list-li-top-padding) { // NOTE: This can be changed according to checkbox implementation!
- img.ui-li-icon-sub {
- position: absolute;
- left: auto;
- right: @right;
- top: @top;
- width: @list-smallicon-size;
- height: @list-smallicon-size;
- margin: 0 0;
- }
-}
-
-.LESSsubicon-right-resize(@right:@list-li-padding-horizontal, @top: @list-li-top-padding, @width:@list-smallicon-size, @height:@list-smallicon-size ) { // NOTE: This can be changed according to checkbox implementation!
- .ui-checkbox.favorite,
- .ui-icon-checkbox-off,
- .ui-icon-checkbox-on,
- .ui-icon-checkbox-off-press,
- .ui-icon-checkbox-on-press,
- .ui-radio,
- .ui-icon-radio-off,
- .ui-icon-radio-on,
- .ui-icon-radio-off-press,
- .ui-icon-radio-on-press {
- position: absolute;
- left: auto;
- right: @right;
- top: @top;
- width: @width;
- height: @height;
- margin: 0 0;
-
- }
- .ui-checkbox.favorite .ui-btn.ui-btn-icon-left .ui-btn-inner .ui-btn-text {
- margin-left: @list-email-text-padding-left;
- }
-
-}
-
-.LESSsubicon-attach-resize(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top: @list-li-email-top-padding, @width:@list-email-attach-icon-width, @height:@list-email-attach-icon-height ) {
- img.ui-li-icon-attach {
- position: absolute;
- left: @left;
- right: auto;
- top: @top;
- width: @width;
- height: @height;
- margin: 0 0;
- }
-}
-
-.LESSsubicon-warning-resize(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top: @list-li-email-top-padding, @width:@list-email-attach-icon-width, @height:@list-email-attach-icon-height ) {
- img.ui-li-icon-warning {
- position: absolute;
- left: @left;
- right: auto;
- top: @top;
- width: @width;
- height: @height;
- margin: 0 0;
- }
-}
-
-.LESSbtn-right(@right:@list-li-padding-horizontal, @top: 50%) {
- &>.ui-btn {
- position: absolute;
- right: @right;
- top: @top;
- }
-}
-
-.LESSbtn-email(@right:@list-li-padding-horizontal, @top: 24%) {
- &>.ui-btn {
- position: absolute;
- right: @right;
- top: @top;
- }
-}
-.LESScheckbox-right(@right:@list-li-padding-horizontal, @top: 50%) { // NOTE: This can be changed according to checkbox implementation!
- .ui-checkbox {
- position: absolute;
- right: @right;
- top: @top;
- margin: -1.1em 65*@unit_base 0 @list-li-padding-horizontal;
- }
-}
-.LESStoggleswitch-right(@right:@list-li-padding-horizontal, @top: 50%) { // NOTE: This can be changed according to checkbox implementation!
- .ui-toggleswitch {
- position: absolute;
- right: @right;
- top: @top;
- margin: -1.1em 0 0 @list-li-padding-horizontal;
- }
-}
-.LESScheckbox-left(@left:@list-li-padding-horizontal, @top: 50%) { // checkbox + radio
- .ui-checkbox,
- .ui-icon-checkbox-off,
- .ui-icon-checkbox-on,
- .ui-icon-checkbox-off-press,
- .ui-icon-checkbox-on-press,
- .ui-radio,
- .ui-icon-radio-off,
- .ui-icon-radio-on,
- .ui-icon-radio-off-press,
- .ui-icon-radio-on-press {
- position: absolute;
- right: auto;
- left: @left;
- top: @top;
- margin: -1.1em 0 0 -8*@unit_base;
- }
-}
-.LESSimg-bigicon(@size:@list-bigicon-size) {
- img.ui-li-bigicon {
- width: @size;
- height: @size;
- }
-}
-.LESSimg-bigicon-left(@left:@list-li-padding-horizontal, @size:@list-bigicon-size) {
- .LESSimg-bigicon;
- img.ui-li-bigicon {
- display: block;
- position: absolute;
- top: 50%;
- margin-top: -(@size/2);
- left: @left;
- }
-}
-.LESSimg-bigicon-right(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
- .LESSimg-bigicon(@size);
- img.ui-li-bigicon {
- display: block;
- position: absolute;
- top: 50%;
- margin-top: -(@size/2);
- left: auto;
- right: @right;
- }
-}
-
-.LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
- .ui-li-expand-icon {
- background-image: url(images/00_button_expand_closed.png);
- background-size: 100%;
- position: absolute;
- top: 50%;
- width: 64 * @unit_base;
- height: 64 * @unit_base;
- margin-top: -(@size/2);
- right: 16 * @unit_base;
- }
-}
-
-.LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
- .ui-li-expanded-icon {
- background-image: url(images/00_button_expand_opened.png);
- background-size: 100%;
- position: absolute;
- top: 50%;
- width: 64 * @unit_base;
- height: 64 * @unit_base;
- margin-top: -(@size/2);
- right: 16 * @unit_base;
- }
-}
-
-
-ul.ui-listview {
- /* 1.11 Hidden style with 2 button */
- &> li.ui-li-1-11 {
- height : 96px;
- padding : 0px;
- padding-left : 16px;
- padding-right : 16px;
-
- &> div.ui-btn {
- position : absolute;
- padding : 0px;
- margin-top : 0px;
- width : 336px;
- top : 18px;
-
- &> span.ui-btn-hastxt {
- padding-top : 0.4em;
- }
- }
-
- &> div.ui-btn:nth-child(1) {
- left : 16px;
- }
-
- &> div.ui-btn:nth-child(2) {
- left : 372px;
- }
- }
-
- &> li.ui-li-1line,
- &> li.ui-li-1line-sub,
- &> li.ui-li-1line-setting {
- .LESStext-main-1line;
- .LESStext-sub-1line;
- }
- &> li.ui-li-1line-setting {
- .LESStext-sub-setting;
- }
- &> li.ui-li-1line-btn1,
- &> li.ui-li-1line-btn2 {
- .LESStext-main-1line;
- .LESSbtn-right;
- }
- &> li.ui-li-1line-toggle {
- .LESStext-main-1line;
- .LESStoggleswitch-right;
- }
-
- &> li.ui-li-1line-bigicon1,
- &> li.ui-li-1line-bigicon2,
- &> li.ui-li-1line-bigicon4,
- &> li.ui-li-1line-bigicon5,
- &> li.ui-li-1line-bigicon6 {
- .LESStext-main-1line(2 * @list-li-padding-horizontal + @list-bigicon-size);
- .LESSimg-bigicon-left;
- }
- &> li.ui-li-1line-bigicon2 {
- .LESStext-sub-1line;
- }
- &> li.ui-li-1line-bigicon6 {
- .LESStoggleswitch-right;
- }
-
- &> li.ui-li-1line-check1,
- &> li.ui-li-1line-check2,
- &> li.ui-li-1line-radio1,
- &> li.ui-li-1line-radio3,
- &> li.ui-li-1line-radio5 {
- .LESSli-reset-position-1line(@list-li-main-line-height, 2 * @list-li-padding-horizontal + @list-checkbox-size);
- .LESScheckbox-left;
- .LESStext-main-1line;
- }
- &> li.ui-li-1line-check3,
- &> li.ui-li-1line-check4,
- &> li.ui-li-1line-radio4 {
- .LESSli-reset-position-1line(@list-li-main-line-height, 3 * @list-li-padding-horizontal + @list-checkbox-size + @list-bigicon-size);
- .LESScheckbox-left;
- .LESSimg-bigicon-left(74 * @unit_base);
- .LESStext-main-1line;
- }
- &> li.ui-li-1line-bigicon4,
- &> li.ui-li-1line-bigicon5,
- &> li.ui-li-1line-check2,
- &> li.ui-li-1line-check4,
- &> li.ui-li-1line-radio3,
- &> li.ui-li-1line-radio5 {
- .LESSbtn-right;
- }
- &> li.ui-li-1line-radio5 {
- .LESSimg-bigicon-right(96 * @unit_base);
- }
-
- /* For Contacts list : wongi_1108 */
- &> li.ui-li-1line-radio6 {
- .LESStext-main-1line;
- .LESSimg-bigicon-right(16 * @unit_base);
- }
-
-
- // === 2 line ===
- // text align
- &> li.ui-li-2line,
- &> li.ui-li-2line-setting,
- &> li.ui-li-2line-toggle-setting {
- .LESSli-reset-position;
- .LESStext-main-2line;
- .LESStext-sub-2line-left;
- .LESStoggleswitch-right;
- }
- &> li.ui-li-2line-sub-main,
- &> li.ui-li-2line-sub-main-bigicon1 {
- .LESSli-reset-position;
- .LESStext-main-2line(@list-li-padding-horizontal, @list-li-top-padding + @list-li-sub-line-height);
- .LESStext-sub-2line-left(@list-li-padding-horizontal, @list-li-top-padding);
- .LESSimg-bigicon-right;
- }
- &> li.ui-li-2line-2sub {
- .LESSli-reset-position;
- .LESStext-main-2line;
- .LESStext-sub-2line-left;
- .LESStext-sub-2line-right;
- }
- &> li.ui-li-2line-btn1,
- &> li.ui-li-2line-btn2,
- &> li.ui-li-2line-btn-setting,
- &> li.ui-li-2line-bigicon0 {
- .LESSli-reset-position;
- .LESStext-main-2line;
- .LESStext-sub-2line-left;
- .LESSbtn-right;
- .ui-li-text-sub{
- >img {
- width: @list-smallicon-size;
- height: @list-smallicon-size;
- margin: 0 0 0 @list-li-padding-horizontal;
- }
- }
- }
- &> li.ui-li-2line-star1 {
- .LESSli-reset-position;
- .LESStext-main-2line;
- .LESStext-sub-2line-left;
- .LESSsubicon-right(@list-li-padding-horizontal, @list-li-top-padding);
- .LESStext-sub-2line-right(@list-li-padding-horizontal, @list-li-top-padding+@list-li-main-line-height);
- }
- &> li.ui-li-2line-star2 {
- .LESSli-reset-position;
- .LESStext-main-2line;
- .LESStext-sub-2line-left;
- .LESSsubicon-right(@list-li-padding-horizontal, @list-li-top-padding);
- .ui-li-text-sub {
- >img {
- width: @list-smallicon-size;
- height: @list-smallicon-size;
- margin: 0 @list-li-padding-horizontal 0 0;
- }
- }
- }
-
- &> li.ui-li-2line-bigicon1,
- &> li.ui-li-2line-bigicon2,
- &> li.ui-li-2line-bigicon3,
- &> li.ui-li-2line-bigicon4,
- &> li.ui-li-2line-colorbar3,
- &> li.ui-li-2line-bigicon-pgbar2 {
- .LESSli-reset-position;
- .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding);
- .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding+@list-li-main-line-height);
- .LESSbtn-right;
- .LESSimg-bigicon-left;
- }
- &> li.ui-li-2line-bigicon2 {
- .LESStext-sub-2line-right;
- }
-
- &> li.ui-li-2line-setting,
- &> li.ui-li-2line-toggle-setting,
- &> li.ui-li-2line-btn-setting,
- &> li.ui-li-2line-bigicon3 {
- .LESStext-sub-setting;
- }
-
- &> li.ui-li-2line-check1,
- &> li.ui-li-2line-check2,
- &> li.ui-li-2line-radio1 {
- .LESSli-reset-position;
- .LESScheckbox-left;
- .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-top-padding);
- .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-top-padding+@list-li-main-line-height);
- .LESSbtn-right;
- }
- &> li.ui-li-2line-check3,
- &> li.ui-li-2line-radio2,
- &> li.ui-li-2line-icon-bigicon-btn {
- .LESSli-reset-position;
- .LESScheckbox-left;
- .LESSimg-bigicon-left(2*@list-li-padding-horizontal + @list-checkbox-size);
- .LESStext-main-2line(3 * @list-li-padding-horizontal + @list-checkbox-size + @list-bigicon-size, @list-li-top-padding);
- .LESStext-sub-2line-left(3 * @list-li-padding-horizontal + @list-checkbox-size + @list-bigicon-size, @list-li-top-padding+@list-li-main-line-height);
- .LESSbtn-right;
- }
-
- &> li.ui-li-2line-colorbar1,
- &> li.ui-li-2line-colorbar2,
- &> li.ui-li-2line-colorbar3 {
- .ui-li-color-bar {
- position: absolute;
- left: 0;
- top: 0;
- width: 10 * @unit_base;
- height: 20 * @unit_base;
- background-color: @color_list_colorbar;
- }
- }
- &> li.ui-li-2line-colorbar1 {
- .LESSli-reset-position;
- .LESStext-main-2line;
- .LESStext-sub-2line-left;
- .LESStext-sub-2line-right(@list-li-padding-horizontal, @list-li-top-padding+@list-li-main-line-height);
- .ui-btn {
- position: absolute;
- left: auto;
- right: @list-li-padding-horizontal;
- top: @list-li-top-padding;
- margin: 0 0 0 @list-li-padding-horizontal;
- max-height: 60*@unit_base;
- }
- .ui-li-text-sub{
- img {
- width: @list-smallicon-size;
- height: @list-smallicon-size;
- margin: 0 0 0 @list-li-padding-horizontal;
- }
- }
- }
- &> li.ui-li-2line-colorbar2 {
- .LESSli-reset-position;
- .LESStext-main-2line;
- .LESStext-sub-2line-left;
- .LESSbtn-right;
- .ui-li-text-main {
- img {
- width: @list-smallicon-size;
- height: @list-smallicon-size;
- margin: 0 0 0 @list-li-padding-horizontal;
- }
- }
- }
- &> li.ui-li-2line-bigicon8 {
- .LESSli-reset-position;
- .LESSimg-bigicon-left;
- .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding);
- .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding+@list-li-main-line-height);
- .LESSsubicon-right(@list-li-padding-horizontal, @list-li-top-padding + @list-li-main-line-height + 8*@unit_base);
- }
- &> li.ui-li-2line-thumb1,
- &> li.ui-li-2line-thumb2,
- &> li.ui-li-2line-thumb3 {
- .LESSli-reset-position;
- .LESStext-main-2line;
- .LESStext-sub-2line-left;
- .LESSimg-bigicon-right(@list-li-padding-horizontal,@list-bigicon-size2);
- .ui-li-text-main {
- img {
- width: @list-smallicon-size;
- height: @list-smallicon-size;
- margin: 0 0 0 @list-li-padding-horizontal;
- }
- }
- .ui-li-text-sub{
- img {
- width: @list-smallicon-size;
- height: @list-smallicon-size;
- margin: 0 @list-li-padding-horizontal 0 0;
- }
- }
- }
- &> li.ui-li-2line-bigicon-pgbar1 {
- .LESSli-reset-position;
- .LESSimg-bigicon-left;
- .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, 0);
- .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-main-line-height+@list-progressbar-height);
- .LESStext-sub-2line-right(2 * @list-li-padding-horizontal + 134*@unit_base, @list-li-main-line-height+@list-progressbar-height);
- .LESSbtn-right;
- .ui-btn {
- max-width: 134 * @unit_base;
- }
- .ui-progressbar {
- left: 2 * @list-li-padding-horizontal + @list-bigicon-size;
- top: @list-li-main-line-height;
- height: @list-progressbar-height;
- width: 468 * @unit_base;
- }
- }
- &> li.ui-li-2line-bigicon-pgbar3 {
- .LESSli-reset-position;
- .LESSimg-bigicon-left;
- .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, 0);
- .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-main-line-height+@list-progressbar-height);
- .LESStext-sub-2line-right(@list-li-padding-horizontal, @list-li-main-line-height+@list-progressbar-height);
- .ui-progressbar {
- left: 2 * @list-li-padding-horizontal + @list-bigicon-size;
- top: @list-li-main-line-height;
- height: @list-progressbar-height;
- width: 608 * @unit_base;
- }
- }
- &> li.ui-li-2line,
- &> li.ui-li-2line-sub-main,
- &> li.ui-li-2line-setting {
- .ui-li-text-main,
- .ui-li-text-sub {
- max-width: 95%;
- }
- }
- &> li.ui-li-2line-2sub,
- &> li.ui-li-3-2-6 {
- .ui-li-text-main {
- max-width: 65%;
- }
- .ui-li-text-sub {
- max-width: 95%;
- }
- .ui-li-text-sub2 {
- max-width: 30%;
- }
- }
- &> li.ui-li-2line-btn1,
- &> li.ui-li-2line-colorbar3,
- &> li.ui-li-2line-thumb1,
- &> li.ui-li-2line-thumb2 {
- .ui-li-text-main,
- .ui-li-text-sub {
- max-width: 65%;
- }
- .ui-btn {
- max-width: 30%;
- }
- }
- &> li.ui-li-2line-btn2,
- &> li.ui-li-2line-toggle-setting,
- &> li.ui-li-2line-btn-setting,
- &> li.ui-li-2line-bigicon0,
- &> li.ui-li-2line-bigicon1,
- &> li.ui-li-2line-bigicon3,
- &> li.ui-li-2line-check1,
- &> li.ui-li-2line-radio1,
- &> li.ui-li-2line-sub-main-bigicon1 {
- .ui-li-text-main,
- .ui-li-text-sub {
- max-width: 80%;
- }
- }
- &> li.ui-li-2line-star1,
- &> li.ui-li-2line-colorbar1 {
- .ui-li-text-main {
- max-width: 85%;
- }
- .ui-li-text-sub {
- max-width: 65%;
- }
- .ui-li-text-sub2 {
- max-width: 30%;
- }
- }
- &> li.ui-li-2line-star2 {
- .ui-li-text-main {
- max-width: 85%;
- }
- .ui-li-text-sub {
- max-width: 95%;
- }
- }
- &> li.ui-li-2line-bigicon2 {
- .ui-li-text-main {
- max-width: 55%;
- }
- .ui-li-text-sub {
- max-width: 80%;
- }
- .ui-li-text-sub2 {
- max-width: 20%;
- }
- }
- &> li.ui-li-2line-bigicon4,
- &> li.ui-li-2line-check2,
- &> li.ui-li-2line-check3,
- &> li.ui-li-2line-radio2,
- &> li.ui-li-2line-colorbar3,
- &> li.ui-li-2line-icon-bigicon-btn {
- .ui-li-text-main,
- .ui-li-text-sub {
- max-width: 65%;
- }
- }
- &> li.ui-li-2line-bigicon8 {
- .ui-li-text-main {
- max-width: 75%;
- }
- .ui-li-text-sub {
- max-width: 70%;
- }
- }
- &> li.ui-li-2line-bigicon-pgbar1 {
- .ui-li-text-main {
- max-width: 60%;
- }
- .ui-li-text-sub {
- max-width: 40%;
- }
- .ui-li-text-sub2 {
- max-width: 20%;
- }
- }
- &> li.ui-li-2line-bigicon-pgbar2 {
- .ui-li-text-main,
- .ui-li-text-sub {
- max-width: 55%;
- }
- }
- &> li.ui-li-2line-bigicon-pgbar3 {
- .ui-li-text-main {
- max-width: 80%;
- }
- .ui-li-text-sub {
- max-width: 60%;
- }
- .ui-li-text-sub2 {
- max-width: 20%;
- }
- }
- &> li.ui-li-2line-thumb3 {
- .ui-li-text-main,
- .ui-li-text-sub {
- max-width: 75%;
- }
- }
-
- // Multiline
- &> li.ui-li-3-4-1 {
- font-size: 36 * @unit_base;
- padding: 16 * @unit_base;
-
- h1.ui-li-heading {
- font-size: 48 * @unit_base;
- margin-top: 0 * @unit_base;
- margin-bottom: 0 * @unit_base;
- }
- }
- &> li.ui-li-3-4-5 {
- h1.ui-li-heading {
- display: inline-block;
- width: 224 * @unit_base;
- height: 100%;
- //float: left;
- }
- }
-
- // Email
- &> li.ui-li-email-name1-btn,
- &> li.ui-li-email-name2-btn,
- &> li.ui-li-email-name1,
- &> li.ui-li-email-name2,
- &> li.ui-li-email-name1-btn-warning,
- &> li.ui-li-email-name2-btn-warning,
- &> li.ui-li-email-name1-warning,
- &> li.ui-li-email-name2-warning,
- &> li.ui-li-email-name1-btn-attach,
- &> li.ui-li-email-name2-btn-attach,
- &> li.ui-li-email-name1-attach,
- &> li.ui-li-email-name2-attach,
- &> li.ui-li-email-name1-btn-warning-attach,
- &> li.ui-li-email-name2-btn-warning-attach,
- &> li.ui-li-email-name1-warning-attach,
- &> li.ui-li-email-name2-warning-attach {
- .ui-li-color-bar {
- position: absolute;
- left: 0;
- top: 0;
- width: 10 * @unit_base;
- height: 20 * @unit_base;
- background-color: @color_list_colorbar;
- }
- .LESSli-reset-position-3line;
- .LESScheckbox-left;
- .LESSsubicon-right-resize(@list-li-padding-horizontal, @list-li-email-top-padding, @list-email-icon-width, @list-email-icon-height);
- .LESStext-email-sub-3line-sub2(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height);
- .LESStext-email-sub-3line-sub3(@list-li-padding-horizontal, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height);
- }
-
- &> li.ui-li-email-name1-btn,
- &> li.ui-li-email-name2-btn,
- &> li.ui-li-email-name1,
- &> li.ui-li-email-name2 {
- .LESStext-email-main-3line(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
- .LESStext-email-sub-3line-sub1(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
- }
- &> li.ui-li-email-name1-btn-warning,
- &> li.ui-li-email-name2-btn-warning,
- &> li.ui-li-email-name1-warning,
- &> li.ui-li-email-name2-warning {
- .LESStext-email-main-3line(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
- .LESStext-email-sub-3line-sub1(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
- .LESSsubicon-warning-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding + @list-li-main-line-height, @list-email-warning-icon-width, @list-email-warning-icon-height);
- }
- &> li.ui-li-email-name1-btn-attach,
- &> li.ui-li-email-name2-btn-attach,
- &> li.ui-li-email-name1-attach,
- &> li.ui-li-email-name2-attach {
- .LESStext-email-main-3line(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
- .LESStext-email-sub-3line-sub1(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
- .LESSsubicon-attach-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding, @list-email-attach-icon-width, @list-email-attach-icon-height);
- }
- &> li.ui-li-email-name1-btn-warning-attach,
- &> li.ui-li-email-name2-btn-warning-attach,
- &> li.ui-li-email-name1-warning-attach,
- &> li.ui-li-email-name2-warning-attach {
- .LESStext-email-main-3line(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
- .LESStext-email-sub-3line-sub1(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
- .LESSsubicon-attach-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding, @list-email-attach-icon-width, @list-email-attach-icon-height);
- .LESSsubicon-warning-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding + @list-li-main-line-height, @list-email-warning-icon-width, @list-email-warning-icon-height);
- }
-
- &> li.ui-li-email-name1-btn,
- &> li.ui-li-email-name2-btn,
- &> li.ui-li-email-name1-btn-warning,
- &> li.ui-li-email-name2-btn-warning,
- &> li.ui-li-email-name1-btn-attach,
- &> li.ui-li-email-name2-btn-attach,
- &> li.ui-li-email-name1-btn-warning-attach,
- &> li.ui-li-email-name2-btn-warning-attach {
- .LESSbtn-email(2 * @list-li-padding-horizontal + @list-email-icon-width);
- }
- &> li.ui-li-email-name1-btn,
- &> li.ui-li-email-name1,
- &> li.ui-li-email-name1-btn-warning,
- &> li.ui-li-email-name1-warning,
- &> li.ui-li-email-name1-btn-attach,
- &> li.ui-li-email-name1-attach,
- &> li.ui-li-email-name1-btn-warning-attach,
- &> li.ui-li-email-name1-warning-attach {
- .LESStext-email-sub1-setting;
- }
-
-
- // Dialogue list
- &> li.ui-li-1line-leftsub1 {
- .LESStext-sub-1line-left;
- .LESStext-main-1line-right;
- }
- &> li.ui-li-1line-leftsub2 {
- .LESSli-reset-position-1line;
- .LESStext-sub-1line-left;
- .LESStext-main-1line-right;
- .LESSimg-bigicon-right(16 * @unit_base);
- }
- &> li.ui-li-4-2-3 {
- .LESSli-reset-position;
- .LESStext-main-2line;
- .LESStext-sub-2line-left;
- .LESStext-sub-setting;
- .ui-li-text-main,
- .ui-li-text-sub {
- max-width: 95%;
- }
- }
- &> li.ui-li-4-2-10 {
- .LESSli-reset-position;
- .LESStext-main-2line(@list-li-padding-horizontal, @list-li-top-padding + @list-li-sub-line-height);
- .LESStext-sub-2line-left(@list-li-padding-horizontal, @list-li-top-padding);
- .ui-li-text-main,
- .ui-li-text-sub {
- max-width: 80%;
- }
- .LESScheckbox-right;
- }
-
- &> li.ui-li-4-2-11 {
- .LESStext-sub-1line-left;
- .LESStext-main-1line-right;
-
- .ui-li-text-main-right
- {
- display: inline-block;
- word-wrap:normal;
- }
- }
-
- &> li.ui-li-3line-dgroup1 {
- .LESSli-reset-position-3line;
- .LESStext-main-3line(@list-li-padding-horizontal, @list-li-top-padding);
- .LESStext-sub-3line-left1(@list-li-padding-horizontal, @list-li-top-padding + @list-li-sub-line-height);
- .LESStext-sub-3line-left2(@list-li-padding-horizontal, @list-li-top-padding + 2 * @list-li-sub-line-height);
- }
-
- // Special dialogue for Phonebook
- &> li.ui-li-4-3-2 {
- height : 190px;
- padding : 0px;
-
- .ui-li-thumb {
- float : left;
- height : 128px;
- max-height: 128px;
- width : 128px;
- max-width: 128px;
- left: 32px;
- top: 28px;
- }
-
- span.contact_name_field {
- position : absolute;
- font-size : @list-dialogue-font-size-main;
- color : @color_dialogue_main_text;
- left : 184px;
- top : 32px;
- height : 54px;
- }
-
- span.contact_subname_field {
- position : absolute;
- font-size : @list-dialogue-font-size-sub;
- color : @color_dialogue_sub_text;
- left : 184px;
- top : 94px;
- }
-
- span.companyname_field {
- position : absolute;
- font-size : @list-dialogue-font-size-sub;
- color : @color_dialogue_sub_text;
- left : 184px;
- top : 126px;
- }
- }
-
- // Dialogue Editor for Phonebook
- &> div.ui-li-dialogue-editor-photo
- {
- width: 160px;
- left: 16px;
- top: 34px;
- position: absolute;
- &> img
- {
- width:128px;
- height:128px;
- }
- }
-
- &> li.ui-li-dialogue-editor-1
- {
- border-left: @list-li-dialogue-width rgba(68, 68, 68, 255) solid;
- border-top-width: 0px; //wongi_1201 //for phonebook
- left : 160px;
- width : 790px;
- padding-left: 12px;
- padding-right: 0px;
-
- &> .ui-field-contain
- {
- margin:0;
- padding : 8px;
- width : 782px;
-
- &> input
- {
- border : none;
- outline: none;
- width : 782px;
- padding : 0px;
- }
-
- /* wongi_1215 : Default Text */
- &>div.ui-input-default-text {
- position: absolute;
- top: 0;
- left: 0;
- width : 100%;
- margin: 0px;
- color: @color_dialogue_editor_default_text;
- }
-
- &>div.ui-input-default-text.ui-input-default-hidden {
- display : none;
- }
- }
- }
-
- &> li.ui-li-dialogue-editor-1.ui-li-expanded
- {
- background-color: @color_dialogue_editor_bg;
- }
-
- &> li.ui-li-dialogue-editor-2
- {
- padding : 0px !important;
- height : 130px;
- border-left: @list-li-dialogue-width @color_dialogue_editor_border solid;
- border-top-width: 0px;
- left : 0px;
- width : 962px;
- font-size:32px;
-
- &> div.ui-li-dialogue-editor-border
- {
- border-right: 1px @color_dialogue_editor_border solid;
- width: 160px;
- height: 130px;
- }
-
- &> div div.ui-li-dialogue-editor-2-label
- {
- margin-left:16px;
- line-height:32px;
- position:absolute;
- top:50%;
- margin-top:-16px;
- }
-
- &> .ui-field-contain
- {
- margin:0;
- width : 676px;
- position:absolute;
- top:50%;
- margin-top:-16px;
- left : 200px;
-
- &> input
- {
- border : none;
- outline: none;
- width : 676px;
- padding : 0px;
- }
-
- /* wongi_1215 : Default Text */
- &>div.ui-input-default-text {
- position: absolute;
- top: 0;
- width : 100%;
- margin: 0px;
- color: @color_dialogue_editor_default_text;
- }
-
- &>div.ui-input-default-text.ui-input-default-hidden {
- display : none;
- }
- }
- }
-
- // Dialogue
- &> li.ui-li-dialogue {
- border-left: @list-li-dialogue-width @color_dialogue_editor_border solid;
- border-top-width: 0px;
- }
-
- &> li.ui-li-dialogue.ui-li-divider {
- height: 32 * @unit_base;
- padding : 0px;
- }
-
- &> li.ui-li-divider {
- height: 32 * @unit_base;
- padding : 0px;
- }
-
- &> li.ui-li-group-title {
- padding-top : 32 * @unit_base;
- }
-
- &> li.ui-li-group-title span {
- padding-left : 16 * @unit_base;
- }
-
- &> li.ui-li-3-button {
- padding-left : 8px;
- padding-right : 8px;
- height : 60px;
- }
-
- &> li.ui-li-3-button div.ui-btn {
- margin-left : 8px;
- margin-right : 8px;
- height : 74px;
- width :224px;
- top : 24px;
- position : absolute;
- padding : 0px;
- margin-top : 0px;
- .ui-btn-inner.ui-btn-hastxt {
- padding-top : 0.6em;
- }
- }
-
- &> li.ui-li-3-button div.ui-btn:nth-child(1) {
- left : 0%;
- }
-
- &> li.ui-li-3-button div.ui-btn:nth-child(2) {
- left : 33%;
- }
-
- &> li.ui-li-3-button div.ui-btn:nth-child(3) {
- left : 66%;
+ &> li.ui-li-dialogue-divider {
+ .LESSdialogue-divider;
}
}
.ui-li-bubble-sos {
}
.ui-li-bubble-date {
- height: 40px;
+ height: 40 * @unit_base;
font-size: @list-li-bubble-date-font-size;
margin: 12px 0%; // no horizontal margin
padding: 0% 16px;
padding-top: 15px;
+ text-align: @style_list_bubble_date_text_align;
}
span.ui-li-bubble-time {
margin-left: 12px;
}
// Expandable list animation
+
+@-webkit-keyframes ui-expand-show {
+ from {
+ -webkit-transform-origin: 0% 0%;
+ -webkit-transform: rotateX(90deg) skewX(30deg) translateZ(0);
+ } to {
+ -webkit-transform-origin: 0% 0%;
+ -webkit-transform: rotateX(0deg) skewX(0deg) translateZ(0);
+ }
+}
.ui-listview {
.ui-li-expandable {
}
}
.ui-li-expanded {
overflow: hidden;
-
- // Transition
- -webkit-transition: all 0.2s ease;
- -moz-transition: all 0.2s ease;
- -o-transition: all 0.2s ease;
- transition: all 0.2s ease;
}
.ui-li-expand-transition-show {
visibility: visible;
+ -webkit-animation: ui-expand-show 0.4s 1 ease-out;
}
.ui-li-expand-transition-hide {
visibility: hidden;
- height: 0px;
+ height: 0px !important;
+ min-height: 0px !important;
padding-top: 0px;
padding-bottom: 0px;
border: 0px;
+ -webkit-transition: all 0.2s ease;
+ -moz-transition: all 0.2s ease;
+ -o-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+ }
+}
+
+
+.LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
+ .ui-li-expand-icon {
+ background-image: url(images/00_button_expand_closed.png);
+ background-size: 100%;
+ position: absolute;
+ top: 50%;
+ width: 64 * @unit_base;
+ height: 64 * @unit_base;
+ margin-top: -(@size/2);
+ right: 16 * @unit_base;
}
}
-/* Odd iPad positioning issue. */
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
- .ui-li .ui-btn-text {
- overflow: visible;
+.LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
+ .ui-li-expanded-icon {
+ background-image: url(images/00_button_expand_opened.png);
+ background-size: 100%;
+ position: absolute;
+ top: 50%;
+ width: 64 * @unit_base;
+ height: 64 * @unit_base;
+ margin-top: -(@size/2);
+ right: 16 * @unit_base;
}
}
-----------------------------------------------------------------------------------------------------------*/
/***************************************************************************
- Header / Footer
+ Header / Footer
NavigationBar
***************************************************************************/
.ui-bar-s {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size : 36 * @unit_base;
-
+
.ui-link-inherit {
color: @color_bar_title_text;
}
-/*
- .ui-link {
- color: #7cc4e7;
- font-weight: bold;
- &:hover { color: #2489CE; }
- &:active { color: #2489CE; }
- &:visited { color: #2489CE; }
- }
- */
+
.ui-btn.ui-btn-back.ui-btn-down-s {
.ui-btn-inner {
background : @color_bar_back_btn_press;
}
}
-
- .ui-btn.ui-btn-back, .ui-btn.ui-btn-footer-right{
+
+ > .ui-btn.ui-btn-footer-right{
position : absolute;
font-size : 32 * @unit_base;
- width : 144 * @unit_base;
- height : 114 * @unit_base;
- top : 0 * @unit_base;
+ width : 104 * @unit_base;
+ height : 74 * @unit_base;
+ top : 20 * @unit_base;
border-style : none;
border-width : 0px;
- background : @color_bar_bg;
}
- .ui-btn.ui-btn-back .ui-btn-inner,
+
+ > .ui-btn.ui-btn-back {
+ position : absolute;
+ font-size : 32 * @unit_base;
+ border-style : none;
+ border-width : 0px;
+ .LESSbtn-back;
+ }
+
+ > .ui-btn.ui-btn-footer-right {
+ left : 10 * @unit_base;
+ }
+
.ui-btn.ui-btn-footer-right .ui-btn-inner {
- padding : 0;
+ padding : 0;
- width : 104 * @unit_base;
- height : 74 * @unit_base;
- top : 20 * @unit_base;
- left : 20 * @unit_base;
+ width : 104 * @unit_base;
+ height : 74 * @unit_base;
+ }
- background: @color_bar_footer_btn_bg;
+ .ui-btn.ui-btn-back .ui-btn-inner {
+ padding : 0;
- border-color : black;
- border-width : 2 * @unit_base;
- border-style : groove;
- }
-
- .ui-btn.ui-btn-back{
- right : 0 * @unit_base;
+ .LESSbtn-back-inner;
}
-
+
+
+
.ui-btn.ui-btn-footer-right.ui-btn-down-s{
.ui-btn-inner {
background : @color_bar_btn_press;
}
}
.ui-btn.ui-btn-footer-right{
- .ui-btn-inner {
+ .ui-btn-inner {
.ui-btn-text {
line-height : 74 * @unit_base;
- }
+ }
}
- }
+ }
- .ui-field-contain {
+ .ui-field-contain {
margin-left : auto;
margin-right : auto;
height : 74 * @unit_base;
margin-bottom : 0 * @unit_base;
label {
- border-color : @color_bar_seg_btn_border;
- border-style : solid;
- border-left-width : 1px;
- border-right-width : 1px;
+ .LESSextended-controlgroup-border;
}
.ui-radio {
.ui-btn-inner {
.ui-btn-text {
text-align : center;
+ font-weight : bold;
}
}
color : @color_bar_seg_text_normal;
}
}
- .ui-radio-on{
+ .ui-radio-on,
+ .ui-radio-off.ui-btn-hover-s.ui-btn-down-s{
background : @color_bar_seg_btn_press;
- .ui-btn-text{
- color : @color_bar_seg_text_press;
+ .ui-btn-text{
+ color : @color_bar_seg_text_press;
}
}
}
top : 5 * @unit_base; // scale change
}
.ui-footer-extended-controlgroup {
- top : 16 * @unit_base; // scale change
.ui-btn-inner {
line-height : 74 * @unit_base;
padding : 0 * @unit_base;
}
}
}
- .ui-title-normal-3btn {
- position : absolute;
- right : 154 * @unit_base;
-
- display : block;
- }
.ui-title-extended-controlgroup-4btn {
- width : 682 * @unit_base;
+ width : @style-title-extended-4btn-width;
.ui-radio {
- width : 170 * @unit_base;
- }
+ width : @style-title-extended-4btn-radio-width;
+ }
}
.ui-title-extended-controlgroup-3btn {
- width : 432 * @unit_base;
+ width : @style-title-extended-3btn-width;
.ui-radio {
- width : 143 * @unit_base;
- }
+ width : @style-title-extended-3btn-radio-width;
+ }
}
.ui-title-extended-controlgroup-2btn {
- width : 328 * @unit_base;
+ width : @style-title-extended-2btn-width;
.ui-radio {
- width : 163 * @unit_base;
+ width : @style-title-extended-2btn-radio-width;
}
- }
+ }
+
+ .ui-footer-extended-controlgroup-4btn {
+ width : 682 * @unit_base;
+ .ui-radio {
+ width : 170 * @unit_base;
+ }
+ }
+ .ui-footer-extended-controlgroup-3btn {
+ width : 432 * @unit_base;
+ .ui-radio {
+ width : 143 * @unit_base;
+ }
+ }
+ .ui-footer-extended-controlgroup-2btn {
+ width : 328 * @unit_base;
+ .ui-radio {
+ width : 163 * @unit_base;
+ }
+ }
}
-.ui-header.ui-bar-s{
+.ui-header.ui-bar-s{
position : fixed;
top : 0px;
background : @color_bar_title_bg;
-
+
+ min-height : 100 * @unit_base;
+
+ img {
+ display: inline-block;
+ height: 32 * @unit_base;
+ width: 32 * @unit_base;
+ margin-left: 16 * @unit_base;
+ //margin-right: 16 * @unit_base; /* Title's left margin covers this. */
+ //vertical-align: middle;
+ }
+
.ui-title {
+ display: inline-block;
color : @color_bar_title_text;
+ min-height: @style-title-min-height;
+ font-size : @style-title-font-size;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ outline: 0 !important;
- top : 0px;
- min-height: 36 * @unit_base;
- text-align: center;
- font-size : 36 * @unit_base;
- display: block;
- margin: 28*@unit_base 135*@unit_base 28*@unit_base 135*@unit_base;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- outline: 0 !important;
+ .LESStitle-diff-style; /* different title style */
}
-
+
.ui-btn{
font-size : 28 * @unit_base;
height : 74 * @unit_base;
- width : 124 * @unit_base;
+ }
+
+ .ui-btn.ui-btn-left,
+ .ui-btn.ui-btn-right {
+ width : 114 * @unit_base;
}
> .ui-btn{
margin-top : 0px;
font-size : 28 * @unit_base;
height : 74 * @unit_base;
-
+
background: @color_bar_title_btn_bg;
color : @color_bar_title_text;
-
- border-style: solid;
- border-color: @color_bar_title_btn_border;
- border-width: 1px;
-
- .ui-btn-inner {
- width : 108 * @unit_base;
- }
+
+ .LESStitle-border; /* different title style */
}
-
+
> .ui-btn.ui-btn-down-s {
background : @color_bar_btn_press;
color : @color_bar_title_text;
- }
+ }
}
.ui-header.ui-bar-s.ui-title-extended-height {
height : 136 * @unit_base;
-
+
a {
top : 50 * @unit_base;
}
-
+
.ui-title {
font-size : 28 * @unit_base;
top : 0 * @unit_base;
-
- padding-top : 11 * @unit_base;
+
+ padding-top : 11 * @unit_base;
margin-top : 0 * @unit_base;
margin-bottom : 0 * @unit_base;
}
.ui-title-extended-segment-style {
left : 0 * @unit_base;
margin-top : 0 * @unit_base;
- top : 2 * @unit_base; // scale change
+ top : @style-title-extended-margin; // scale change
}
}
+.ui-header.ui-bar-s .ui-btn.ui-btn-back .ui-btn-inner {
+ border-style : none;
+ border-width : 0px;
+}
+
.ui-header.ui-bar-s.ui-title-controlbar-height,
.ui-footer.ui-bar-s {
height : 114 * @unit_base;
}
}
.ui-footer.ui-bar-s .ui-title-extended-controlgroup-4btn {
- margin-top : 0 * @unit_base;
+ margin-top : 20 * @unit_base;
}
+.ui-footer.ui-bar-s {
+ > .ui-btn {
+ background-color : @color_bar_btn_bg;
+ .LESSback-btn-background;
+ }
+
+ > .ui-btn.ui-btn-down-s {
+ .ui-btn-inner {
+ background : @color_bar_back_btn_press;
+ }
+ }
+
+ > .ui-btn-back {
+ background-color : @color_bar_back_btn_bg;
+ .LESSback-btn-background;
+ }
+}
/***************************************************************************
- Header / Footer
+ Header / Footer
NavigationBar
***************************************************************************/
/***************************************************************************
.ui-title-content-normal-height,
.ui-title-content-option-header-collapsed-1line-height {
position : relative;
- top : 100 * @unit_base;
+ top : 100 * @unit_base;
+}
+
+.ui-title-content-no-height {
+ position : relative;
+ top : 0 * @unit_base;
}
.ui-title-content-extended-height {
position : relative;
- top : 136 * @unit_base;
+ top : 136 * @unit_base;
}
.ui-title-content-option-header-expanded-1line-height {
position : relative;
- top : 195 * @unit_base;
+ top : 195 * @unit_base;
}
.ui-title-content-search {
position : relative;
- top : 206 * @unit_base;
+ top : 206 * @unit_base;
}
.ui-title-content-optionheader-search {
- position : relative;
- top : 219 * @unit_base;
+ position : relative;
+ top : 219 * @unit_base;
}
.ui-title-content-controlbar-height {
position : relative;
- top : 115 * @unit_base;
+ top : 115 * @unit_base;
}
/***************************************************************************
Content Top calculate
// NOTE: This class is applied to almost all JQM widgets!
.ui-body-s {
border: 1px solid #2a2a2a;
- background: @color_bg;
+ background: @color_bg;
color: @color_text;
font-weight: normal;
-
- font-family: Helvetica, Arial, sans-serif;
+
+ font-family: Helvetica, Arial, sans-serif;
.ui-link-inherit { color: #fff; }
.ui-link {
.ui-br {
}
.ui-btn-up-s {
- //border: none;
- background: @color_button_normal;
font-weight: bold;
- color: @color_button_text_normal;
-
a.ui-link-inherit {
color: @color_button_text_normal;
}
-
+ .LESSbutton_up_style;
.LESSbutton_text1_style;
}
.ui-btn-hover-s {
- background: @color_button_hover;
font-weight: bold;
- color: @color_button_text_normal;
-
a.ui-link-inherit {
color: @color_button_text_normal;
}
-
+ .LESSbutton_hover_style;
.LESSbutton_text1_style;
}
+.ui-btn-hover-s.ui-btn-corner-circle{
+ .LESScirclebutton_hover_style;
+}
+
.ui-btn-down-s {
- //border: none;
- background: @color_button_press;
font-weight: bold;
- color: @color_button_text_normal;
-
a.ui-link-inherit {
color: @color_button_text_normal;
}
-
+ .LESSbutton_down_style;
.LESSbutton_text1_style;
}
.ui-btn-up-s,
text-decoration: none;
}
+.ui-btn-down-s.ui-btn-corner-circle{
+ .LESScirclebutton_press_style;
+}
+
.ui-listview {
- border-top-color: #444444;
+ border-top-color: @color_list_border_bottom;
&> .ui-li {
- border-bottom-color: #444444; // 68 68 68
+ border-bottom-color: @color_list_border_bottom;
}
& > .ui-li-static {
background-color: @color_bg;
}
li.ui-btn-up-s, li.ui-btn-hover-s {
+ background: none;
background-color: @color_bg;
color: @color_text;
}
li.ui-btn-down-s {
+ background: none;
background-color: @color_button_press;
color: @color_text;
}
}
&> .ui-li-expanded {
- background-color: rgb(31, 31, 31);
+ background-color: @color_list_expandable_expanded_bg;
}
- &> .ui-li-expanded .ui-li-expanded {
- background-color: rgb(46, 46, 46);
+ &> .ui-li-expanded .ui-li-expanded { // 3rd~ more depth
+ background-color: @color_list_expandable_expanded_bg;
}
// bubble
}
&.ui-li-bubble-right {
// Color is picked from 00_MessageBubble_BG_sent.png
- background-color: @color_list_bubble_left_bg;
+ background-color: @color_list_bubble_right_bg;
.LESSbox-shadow(2px, 3px, 3px, @color_list_bubble_box_shadow);
color: @color_list_bubble_right_text;
}
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size : 36 * @unit_base;
-
+
.ui-link-inherit, .ui-link {
color: @color_controlbar_btn_text;
font-weight: bold;
}
.ui-btn-text, .ui-btn {
- color: @color_controlbar_btn_text;
+ color: @color_controlbar_btn_text;
font-weight: bold;
text-decoration : none;
}
-
+
.ui-btn-down-s, .ui-btn-active {
color: @color_controlbar_btn_text;
}
.ui-controlbar-s.ui-navbar {
position : absolute;
-
+
height : 114 * @unit_base; /* temporary value */
width : 100%;
left : 0px;
-
+
border-top : none;
border-bottom : none;
-
+
z-index: 50;
-
+
li .ui-btn, .ui-navbar-toggle .ui-btn{
font-size : 26 * @unit_base;
}
.ui-btn-inner{
padding-top : 79 * @unit_base;
}
- }
+ }
.ui-btn {
.ui-icon {
left : 50%;
top : 12 * @unit_base;
margin-left : -1.3em;
-
+
width : 56 * @unit_base;
- height: 56 * @unit_base;
+ height: 56 * @unit_base;
}
.ui-btn-text {
padding-left : 0px;
}
.ui-btn-inner.ui-navbar-textonly {
font-size : 28 * @unit_base;
-
+
padding-top : 44 * @unit_base;
padding-bottom : 45 * @unit_base;
}
background: @color_controlbar_tabbbar_bg;
}
- .ui-btn-active, .ui-btn-show-style {
+ .ui-btn-active, .ui-btn-show-style,
+ .ui-btn.ui-btn-hover-s.ui-btn-down-s {
background: @color_controlbar_btn_press;
border-left-style: solid;
- border-right-style: solid;
- border-left-color: @color_controlbar_btn_border;
+ border-right-style:solid;
+ border-left-color: @color_controlbar_btn_border;
border-right-color: @color_controlbar_btn_border;
- border-left-width: 1px;
- border-right-width: 1px;
+ border-left-width: 1px;
+ border-right-width: 1px;
}
.ui-btn-animation {
background: @color_controlbar_btn_press;
border-left-style: solid;
- border-right-style: solid;
- border-left-color: @color_controlbar_btn_border;
+ border-right-style: solid;
+ border-left-color: @color_controlbar_btn_border;
border-right-color: @color_controlbar_btn_border;
- border-left-width: 1px;
+ border-left-width: 1px;
border-right-width: 1px;
-
position : absolute;
top : 0px;
height : 123 * @unit_base;
- z-index : 100;
- }
-
+ z-index : 100;
+ }
+
.ui-btn-hide-style {
background: @color_bar_footer_bg;
- border : none;
+ border : none;
}
}
.ui-toolbar-s {
.ui-btn, .ui-btn-up-s {
background: @color_controlbar_toolbbar_bg;
-
+
border-left-width : 1px;
border-right-width : 1px;
border-color : @color_controlbar_btn_border;
border-style : solid;
}
-
+
.ui-btn-down-s {
background : @color_controlbar_btn_press;
}
a {
width : 100%;
height : 100%;
- }
+ }
}
.ui-controlbar-left.ui-navbar, .ui-controlbar-right.ui-navbar {
- position : fixed;
+ position : fixed;
z-index: 50;
li .ui-btn, .ui-navbar-toggle .ui-btn{
font-size : 20 * @unit_base;
- }
+ }
.ui-btn {
width : 100%;
- margin :0px 0em;
+ margin :0px 0em;
- background: @color_controlbar_bg;
+ background: @color_controlbar_bg;
}
-
+
.ui-btn-down-s, .ui-btn-active{
- color: @color_controlbar_btn_text;
+ color: @color_controlbar_btn_text;
}
li .ui-btn, .ui-navbar-toggle .ui-btn{
font-size : 20 * @unit_base;
}
-
+
.ui-btn-inner {
z-index : 200;
-
+
padding-top : 126 * @unit_base;
.ui-icon {
left : 23%;
top : 35 * @unit_base;
width : 70 * @unit_base;
- height: 70 * @unit_base;
- }
+ height: 70 * @unit_base;
+ }
.ui-btn-text.ui-btn-text-padding-left {
padding-left : 0px;
}
}
-
+
.ui-btn-animation {
position : fixed;
-
+
background: @color_controlbar_bg;
border-bottom-style: solid;
- border-top-style: solid;
- border-bottom-color: @color_controlbar_btn_border;
+ border-top-style: solid;
+ border-bottom-color: @color_controlbar_btn_border;
border-top-color: @color_controlbar_btn_border;
- border-bottom-width: 1px;
+ border-bottom-width: 1px;
border-top-width: 1px;
- z-index : 100;
- }
+ z-index : 100;
+ }
}
.ui-controlbar-left {
-----------------------------------------------------------------------------------------------------------*/
.ui-corner-tl {
- .LESSborder-radius-topleft(.6em);
+ .LESSborder-radius-topleft(@style-corner-radius);
}
.ui-corner-tr {
- .LESSborder-radius-topright(.6em);
+ .LESSborder-radius-topright(@style-corner-radius);
}
.ui-corner-bl {
- .LESSborder-radius-bottomleft(.6em);
+ .LESSborder-radius-bottomleft(@style-corner-radius);
}
.ui-corner-br {
- .LESSborder-radius-bottomright(.6em);
+ .LESSborder-radius-bottomright(@style-corner-radius);
}
.ui-corner-top {
- .LESSborder-radius-topleft(.6em);
- .LESSborder-radius-topright(.6em);
+ .LESSborder-radius-topleft(@style-corner-radius);
+ .LESSborder-radius-topright(@style-corner-radius);
}
.ui-corner-bottom {
- .LESSborder-radius-bottomleft(.6em);
- .LESSborder-radius-bottomright(.6em);
- }
+ .LESSborder-radius-bottomleft(@style-corner-radius);
+ .LESSborder-radius-bottomright(@style-corner-radius);
+}
.ui-corner-right {
- .LESSborder-radius-topright(.6em);
- .LESSborder-radius-bottomright(.6em);
+ .LESSborder-radius-topright(@style-corner-radius);
+ .LESSborder-radius-bottomright(@style-corner-radius);
}
.ui-corner-left {
- .LESSborder-radius-topleft(.6em);
- .LESSborder-radius-bottomleft(.6em);
+ .LESSborder-radius-topleft(@style-corner-radius);
+ .LESSborder-radius-bottomleft(@style-corner-radius);
}
.ui-corner-all {
- //.LESSborder-radius-all(.6em);
+ //.LESSborder-radius-all(@style-corner-radius);
}
.ui-corner-none {
.LESSborder-radius-all(0);
border-width: @colorpalette-item-border-width;
border-style: solid;
border-color: @colorpalette-item-border-color;
+ -moz-border-radius: 0.2em;
+ -webkit-border-radius: 0.2em;
+ bordert-radius: 0.2em;
}
.colorpalette-choice-active {
border-color: @todons-selected-color;
}
}
+ .LESSpalette_background_style;
}
label.colorpickerbutton_label.ui-input-text {
h1 {
margin-left: 10 * @unit_base;
}
+ .LESScolortitle_background_style;
}
.todons-colortitle-disabled {
}
.ui-popupwindow-padding {
- background: rgb(45,45,45);
+ background: @color_ctxpopup_background;
border: none;
-webkit-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
}
.ui-listview {
+ min-width: 386 * @unit_base;
+ max-width: 620 * @unit_base;
border: none;
}
.ui-listview > .ui-li {
-// margin: 0 -7 * @px_base;
+ color: @color_ctxpopup_text;
+ border-bottom-color: @color_ctxpopup_border_bottom;
padding: 0 7 * @unit_base;
}
+ .ui-listview li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
+ color: @color_ctxpopup_text;
+ }
+
.ui-listview > .ui-li:last-child {
border: none;
}
.horizontal {
+ color: @color_ctxpopup_text;
+ max-width: 648 * @unit_base;
+
.icon .ui-btn {
padding: 0;
background: transparent;
-
+
.ui-btn-icon-only {
width: 128 * @unit_base;
height: 92 * @unit_base;
}
.ui-icon {
- padding: 32 * @unit_base 0;
+ top: 0;
height: inherit;
width: inherit;
margin: 0;
background-position: center;
- .LESSbackground-size( 64 * @unit_base, 64 * @unit_base );
+ .LESSbackground-size( 48 * @unit_base, 48 * @unit_base );
}
}
.text {
padding: 0 20 * @unit_base;
+ min-width: 128 * @unit_base;
}
a.ui-link {
- color: @color_text;
+ color: @color_ctxpopup_text;
text-decoration: none;
}
-
+
table {
border: none;
border-spacing: 0;
}
-
+
td {
- border-left: 1 * @unit_base solid @color_ctxpopup_border_left;
- border-right: 1 * @unit_base solid @color_ctxpopup_border_right;
- border-top: 1 * @unit_base solid @color_ctxpopup_border_right;
- border-bottom: 1 * @unit_base solid @color_ctxpopup_border_left;
- }
+ * {
+ display: -moz-box;
+ -moz-box-pack: center;
+ display: -webkit-box;
+ -webkit-box-pack: center;
+ display: box;
+ box-pack: center;
+ }
+
+ border-left: 1px solid @color_ctxpopup_border_left;
+ border-right: 1px solid @color_ctxpopup_border_right;
+ border-top: 1px solid @color_ctxpopup_border_right;
+ border-bottom: 1px solid @color_ctxpopup_border_left;
+ }
td:first-of-type {
border-left: none;
tr:last-of-type > td:first-of-type {
border-bottom-left-radius: @border_radius;
}
-
+
tr:last-of-type > td:last-of-type {
border-bottom-right-radius: @border_radius;
}
vertical-align: middle;
margin: 0;
}
-
+
li {
line-height: 92 * @unit_base;
min-height: 92 * @unit_base;
+ min-width: 128 * @unit_base;
float: left;
display: inline-block;
- border-left: 1 * @unit_base solid @color_ctxpopup_border_left;
- border-right: 1 * @unit_base solid @color_ctxpopup_border_right;
+ border-left: 1px solid @color_ctxpopup_border_left;
+ border-right: 1px solid @color_ctxpopup_border_right;
text-align: center;
}
@import "config.less";
.ui-datefield {
- display: inline-block;
-
- div {
+ .ui-datefield-seperator {
display: inline-block;
+ min-width: 30 * @unit_base;
+ text-align: center;
+ }
- span {
- margin-right: 20 * @unit_base;
- }
-
- .ui-datefield-selected {
- color: @color_timepicker_selector_color;
- }
+ .ui-datefield-selected {
+ color: @color_timepicker_selector_color;
+ }
- .ui-datefield-ampm {
- margin-right: 0;
- margin-top: 0;
- top: -5 * @unit_base;
- display: inline-block;
- span.ui-btn-inner.ui-btn-hastxt {
- margin-right: 0;
- padding: 0 25*@unit_base;
- span {
- margin-right: 0;
- }
- }
- }
+ .date,.time,.ui-datefield-tab {
+ display: inline-block;
}
.ui-datefield-tab {
- display: inline-block;
min-width: 60 * @unit_base;
}
}
+.ui-li-text-main .ui-datefield-period.ui-btn {
+ margin-top: -0.3em;
+ height: 56 * @unit_base;
+
+ .ui-btn-inner.ui-btn-hastxt {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+}
+
.ui-datetimepicker-selector {
- div ul {
+ ul {
padding: 0;
display: inline;
list-style: none;
.ui-dayselector.ui-controlgroup-vertical {
.ui-checkbox .ui-btn{
- width : 100 * @unit_base;
+ width : 112 * @unit_base;
.ui-btn-text {
- margin-left : 0 * @unit_base;
+ margin-left : 16 * @unit_base;
}
}
}
.ui-hsvpicker {
.hsvpicker-clrchannel-container {
display: table;
+ padding-top: 5 * @unit_base;
+ padding-bottom: 5 * @unit_base;
padding-left: 27 * @unit_base;
padding-right: 27 * @unit_base;
}
}
}
+ .LESShsvpicker_background_style;
}
.ui-popupwindow .colorpickerbutton-popup-container-style {
display: table;
width : 50%;
margin : 0 auto;
-}
\ No newline at end of file
+}
\r
.ui-multibuttonentry {\r
display : table;\r
- background-color : #DDDDDD;\r
+ background-color : @color_multibuttonentry_bg;\r
outline : none;\r
}\r
\r
text-align : center;\r
position : relative;\r
margin : .3em;\r
- padding : .2em .5em;\r
- color : #222222;\r
+ padding : .2em 0em;\r
+ color : @color_multibuttonentry_input_text;\r
font-weight : bold;\r
text-align : center;\r
font-size : 1em;\r
- background-color : #DDDDDD;\r
+ background-color : @color_multibuttonentry_bg;\r
}\r
\r
.ui-multibuttonentry-input {\r
border : 0 !important;\r
padding : 0 !important;\r
margin : .5em;\r
- color : #222222;\r
+ color : @color_multibuttonentry_input_text;\r
text-align : left;\r
font-size : 1em;\r
- background-color : #DDDDDD;\r
+ background-color : @color_multibuttonentry_bg;\r
}\r
\r
.ui-multibuttonentry div, .ui-multibuttonentry a {\r
text-shadow : 0 .1em .1em rgba(0,0,0,.3);\r
-webkit-border-radius : .5em;\r
-moz-border-radius : .5em;\r
- border-radius : .5em;\r
+ border-radius : 1.5em;\r
-webkit-box-shadow : 0 .1em .1em rgba(0,0,0,.2);\r
-moz-box-shadow : 0 .1em .1em rgba(0,0,0,.2);\r
box-shadow : 0 .1em .1em rgba(0,0,0,.2);\r
- color : #fef4e9;\r
+ color : @color_multibuttonentry_block_text;\r
}\r
\r
a.ui-multibuttonentry-link {\r
float : right;\r
- color : #ffffff !important;\r
+ color : @color_multibuttonentry_link !important;\r
font-size : 1em;\r
font-weight : bold;\r
text-decoration : none;\r
- border : solid 1px #696969;\r
- background : #a9a9a9;\r
- background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#696969));\r
- background : -moz-linear-gradient(top, #a9a9a9, #696969);\r
+ border : solid 2px @color_multibuttonentry_link;\r
+ background-color : @color_multibuttonentry_bg;\r
}\r
\r
div.ui-multibuttonentry-block {\r
- border : solid 1px #da7c0c;\r
- background : #f78d1d;\r
- background : -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));\r
- background : -moz-linear-gradient(top, #faa51a, #f47a20);\r
+ border : solid 2px @color_multibuttonentry_block_border;\r
+ background-color : @color_multibuttonentry_block_bg;\r
}\r
\r
div.ui-multibuttonentry-sblock {\r
- border : solid 1px #0033FF;\r
- background : #0099FF;\r
- background : -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#0099FF));\r
- background : -moz-linear-gradient(top, #00FFFF, #0099FF);\r
+ border : solid 2px @color_multibuttonentry_press_border;\r
+ background : @color_multibuttonentry_press_bg;\r
}\r
\r
.ui-multibuttonentry .ui-multibuttonentry-desclabel {\r
outline : none;\r
position : relative;\r
border : 0;\r
- color : #222222;\r
+ color : @color_multibuttonentry_input_text;\r
text-align : left;\r
font-size : 1em;\r
- background-color : #DDDDDD;\r
+ background-color : @color_multibuttonentry_bg;\r
}\r
\r
.ui-multimediaview-fullscreen {\r
position : absolute !important;\r
- z-index : @z_base_header_footer + 100 !important;\r
+ z-index : @z_base_header_footer + 100 !important;\r
}\r
\r
.ui-multimediaview-audio {\r
}\r
\r
.ui-multimediaview-control span.ui-play-icon {\r
- background-image : url("./images/controlbar/01_controlbar_icon_Play.png");\r
+ background-image : url(./images/controlbar/01_controlbar_icon_Play.png);\r
}\r
\r
.ui-multimediaview-control span.ui-pause-icon {\r
- background-image : url("./images/controlbar/01_controlbar_icon_pause.png");\r
-}\r
-\r
-.ui-multimediaview-control span.ui-stop-icon {\r
- background-image : url(./images/stop.png);\r
-}\r
-\r
-.ui-multimediaview-control span.ui-ff-icon {\r
- background : url(./images/controlbar/01_controlbar_icon_FF.png);\r
-}\r
-\r
-.ui-multimediaview-control span.ui-rew-icon {\r
- background-image : url(./images/controlbar/01_controlbar_icon_REW.png);\r
+ background-image : url(./images/controlbar/01_controlbar_icon_pause.png);\r
}\r
\r
.ui-multimediaview-control span.ui-volume-icon {\r
.ui-multimediaview-control {\r
position : absolute;\r
display : block;\r
- z-index : @z_base_header_footer + 101 !important;\r
+ z-index : @z_base_header_footer + 101 !important;\r
padding : 0;\r
margin : 0;\r
outline : 0;\r
}\r
\r
.ui-multimediaview-control .ui-timestamplabel p {\r
- margin : 0;\r
+ margin-top : -6 * @unit_base;\r
+ margin-left : 4 * @unit_base;\r
+ padding : 0;\r
text-align : center;\r
font-size : 22 * @unit_base;\r
line-height : 28 * @unit_base;\r
}\r
\r
.ui-multimediaview-control .ui-durationlabel p {\r
- margin : 0 * @unit_base;\r
+ margin-top : -6 * @unit_base;\r
+ margin-right : 4 * @unit_base;\r
+ padding : 0;\r
text-align : center;\r
font-size : 22 * @unit_base;\r
line-height : 28 * @unit_base;\r
}\r
\r
.ui-multimediaview-control .ui-seekbar {\r
- margin-top : 20 * @unit_base;\r
+ margin-top : 16 * @unit_base;\r
padding-left : 4 * @unit_base;\r
padding-right : 4 * @unit_base;\r
height : 16 * @unit_base;\r
\r
.ui-multimediaview-control .ui-volumecontrol .ui-volumebar {\r
height : 100%;\r
- padding-top : 33 * @unit_base;\r
+ padding-top : 35 * @unit_base;\r
padding-left : 40 * @unit_base;\r
display : block;\r
}\r
-moz-border-radius : 5 * @unit_base;\r
border-radius : 5 * @unit_base;\r
background-color : @color_multimediaview_bar_handle;\r
+ background : -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));\r
+ background : -moz-linear-gradient(top, #FFFFFF, #E6E6E6);\r
+ border : solid 1px rgb(213, 213, 213);\r
}
\ No newline at end of file
height: @img-height;
background: url(images/00_Nocontents_text.png) no-repeat;
- .LESSbackground-size(@img-height, @img-width);
+ .LESSbackground-size(@img-width, @img-height);
}
.ui-nocontents-icon-picture {
background: url(images/00_Nocontents_picture.png) no-repeat;
- .LESSbackground-size(@img-height, @img-width);
+ .LESSbackground-size(@img-width, @img-height);
}
.ui-nocontents-icon-multimedia {
background: url(images/00_Nocontents_multimedia.png) no-repeat;
- .LESSbackground-size(@img-height, @img-width);
+ .LESSbackground-size(@img-width, @img-height);
}
.ui-nocontents-icon-unnamed {
background: url(images/00_Nocontents_unnamed.png) no-repeat;
- .LESSbackground-size(@img-height, @img-width);
+ .LESSbackground-size(@img-width, @img-height);
}
.ui-nocontents-text {
position: absolute;
+ margin: 0;
height: 46 * @unit_base;
width: 100%;
text-align: center;
margin-left: 16 * @unit_base;
margin-right: 16 * @unit_base;
vertical-align: middle;
-
- /* FIXME: please fix this image file */
- background: url(images/00_button_call.png) no-repeat;
- .LESSbackground-size(64 * @unit_base, 64 * @unit_base);
}
.ui-ticker-text1-bg {
position: absolute;
top: 0;
- height: 28 * @unit_base;
+ height: 32 * @unit_base;
left: 96 * @unit_base;
- margin-top: 20 * @unit_base;
- font-size: 0.8em;
+ margin-top: 16 * @unit_base;
color: @color_ticker_text1;
}
top: 0;
height: 32 * @unit_base;
left: 96 * @unit_base;
- margin-top: 48 * @unit_base;
+ margin-top: 52 * @unit_base;
+ font-size: 0.9em;
color: @color_ticker_text2;
}
}
.ui-option-header .ui-btn-text {
- line-height: 34 * @unit_base
+ line-height: 34 * @unit_base;
+ font-weight: bold;
}
.ui-option-header {
.ui-btn-down-s.ui-btn-hover-s .ui-btn-inner,
width: 28 * @unit_base;
height : 24 * @unit_base;
left : 50%;
+}
+.ui-btn-up-s, .ui-btn-hover-s {
+ .ui-icon-optiontray {
+ background-size: 100% 100%;
+ background-image: url(images/00_winset_more.png);
+ }
}
-
-.ui-icon-optiontray {
- background-size: 100% 100%;
- background-image: url(images/00_winset_btn_optiontray.png);
+.ui-btn-down-s {
+ .ui-icon-optiontray {
+ background-size: 100% 100%;
+ background-image: url(images/00_winset_more_press.png);
+ }
}
.ui-header {
padding : 0 0 0 0;
height : 100%;
.ui-icon-optiontray {
- width: 48 * @unit_base;
- height : 38 * @unit_base;
+ width: 56 * @unit_base;
+ height : 56 * @unit_base;
- top : 18 * @unit_base; /* temporary center align */
- left : 37 * @unit_base;
+ top : 10 * @unit_base; /* temporary center align */
+ left : 30 * @unit_base;
}
}
}
}
-
-
-
-
-
-
-
@import "config.less";
+/* Resource color mapping table
+
+@color_popup_title_bg: popup_title_bg.png
+@color_popup_text_bg: popup_bg.png
+@color_popup_button_bg: popup_button_bg.png
+@color_popup_font: Popup title & default
+@color_popup_text_font: Popup text
+
+*/
+
+
@popupwindow-text-padding-vert: 22 * @unit_base;
@popupwindow-text-padding-hori: 16 * @unit_base;
+
.ui-popupwindow-screen {
background: #000000;
opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: @z_base_popup;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: @z_base_popup;
}
.ui-popupwindow {
position: absolute;
z-index: (@z_base_popup + 1) !important;
- background: #536771; //recheck color and change it to var
- color: white; //recheck color and change it to var
+ color: @color_popup_font;
+ //FIXME : remove background & padding if there is no padding.
padding: 2*@unit_base 2*@unit_base;
+ background: @color_popup_text_bg;
+
+ // --------- common style in popup window ------------- //
+ .popup-title {
+ width: 100%;
+ height: 100%;
+ font-size: @font_size_popup_basic_style_title;
+ background: @color_popup_title_bg;
+ p {
+ margin: 0*@unit_base 0*@unit_base;
+ padding: 13*@unit_base 0*@unit_base;
+ }
+ }
+
+ .popup-text {
+ width: 100%;
+ color: @color_popup_text_font;
+ font-size: @font_size_popup_info_style;
+ background: @color_popup_text_bg;
+ p {
+ text-align: center;
+ padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
+ }
+ }
+ // ----------------------------------------------------- //
.center_info {
.LESSbox-orient(vertical);
.LESSbox-align(center);
.LESSbox-pack(center);
-
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+
+ // .popup-text
}
.center_title {
-
.LESSdisplaybox();
.LESSbox-orient(vertical);
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-title
+ // .popup-text
}
.center_basic_1btn {
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 402*@unit_base;
height: 74*@unit_base;
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 274*@unit_base;
height: 74*@unit_base;
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-title
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 402*@unit_base;
height: 74*@unit_base;
text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-title
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 274*@unit_base;
height: 74*@unit_base;
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-title
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 1px;
padding-bottom: 16*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 356*@unit_base;
height: 74*@unit_base;
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-text
.popup-check-bg {
font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
padding-top: 0*@unit_base;
padding-bottom: 22*@unit_base;
.ui-checkbox {
.ui-btn {
text-align: center;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
border: 0*@unit_base;
.ui-btn-inner {
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 274*@unit_base;
height: 74*@unit_base;
text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
+ // .popup-title
+
.popup-scroller-bg {
width: 100%;
overflow: hidden;
}
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 402*@unit_base;
height: 74*@unit_base;
}
}
- }
+ }
.center_liststyle_2btn {
.LESSdisplaybox();
text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
+ // .popup-title
+
.popup-scroller-bg {
width: 100%;
overflow: hidden;
}
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 274*@unit_base;
height: 74*@unit_base;
display: inline-block;
}
}
- }
+ }
.center_liststyle_3btn {
.LESSdisplaybox();
text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
+ // .popup-title
+
.popup-scroller-bg {
width: 100%;
overflow: hidden;
}
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 186*@unit_base;
height: 74*@unit_base;
display: inline-block;
}
}
- }
+ }
.center_progressbar {
.popup-text {
font-size: @font_size_popup_center_progressbar_title;
font-color: @color_popup_center_progressbar_title;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
height: 70*@unit_base;
p {
.popup-text-bottom-bg {
font-size: @font_size_popup_center_progressbar_title;
font-color: @color_popup_center_progressbar_title;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
vertical-align: middle;
height: 48*@unit_base;
padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
text-align: left;
-
+
display: inline-block;
}
.text-right {
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 402*@unit_base;
height: 74*@unit_base;
}
.popup-progress-bg {
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
height: 100%;
}
}
-
+
.centertext_progressbar {
.LESSdisplaybox();
.popup-text {
font-size: @font_size_popup_center_progressbar_title;
font-color: @color_popup_center_progressbar_title;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
padding-top: 22*@unit_base;
padding-bottom: 16*@unit_base;
.popup-text-bottom-bg {
font-size: @font_size_popup_center_progressbar_title;
font-color: @color_popup_center_progressbar_title;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
vertical-align: middle;
height: 40*@unit_base;
padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
text-align: left;
-
+
display: inline-block;
}
.text-right {
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 402*@unit_base;
height: 74*@unit_base;
}
.popup-progress-bg {
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
height: 100%;
}
}
-
+ .ui-btn{
+ .LESSpopup_button_style;
+ }
+ .ui-btn.ui-btn-hover-s{
+ .LESSpopup_button_hover_style;
+ }
+ .ui-btn.ui-btn-down-s{
+ .LESSpopup_button_press_style;
+ }
}
.ui-popupwindow > .ui-volumecontrol {
}
.ui-corner-all {
- -moz-border-radius: 0.3em !important;
- -webkit-border-radius: 0.3em !important;
+ -moz-border-radius: 0.3em !important;
+ -webkit-border-radius: 0.3em !important;
border-radius: 0.3em !important;
}
}
-
-
-
-
.ui-popupwindow-corner-all {
- -moz-border-radius: 0em !important;
- -webkit-border-radius: 0em !important;
+ -moz-border-radius: 0em !important;
+ -webkit-border-radius: 0em !important;
border-radius: 0em !important;
}
}
}
-.ui-progress-container-circle-bg {
- position: relative;
- margin-top: @bar-hmargin;
- margin-bottom: @bar-hmargin;
- width: 100%;
- height: @img-height;
-}
-
.ui-progress-container-circle {
- position: relative;
- margin-left: @bar-vmargin;
- margin-right: @bar-vmargin;
- height: @img-height;
- width: @img-width;
- float: right;
- vertical-align: middle;
+ position: absolute;
+ right: 16 * @unit_base;
+ top: 25%;
}
.ui-progress-circle {
height: @img-height;
width: @img-width;
- background: url(images/process/00_winset_list_process_01.png) no-repeat;
- .LESSbackground-size(@img-height, @img-width);
+ background: url(images/00_winset_list_process_01.png) no-repeat;
+ .LESSbackground-size(@img-width, @img-height);
}
.ui-progress-circle-running {
-webkit-animation: ui-rotate-animation 1s infinite linear;
/* Progress - pending style */
@bar-height: 16 * @unit_base;
@bar-margin: 16 * @unit_base;
-@bar-color0: rgb(55, 55, 55);
-@bar-color1: rgb(0, 140, 210);
+@color_progress_bar1: rgb(0, 140, 210);
@-webkit-keyframes ui-move-animation {
from {
background: -webkit-linear-gradient(-45deg,
transparent,
transparent 25%,
- @bar-color1 25%,
- @bar-color1 50%,
+ @color_progress_bar1 25%,
+ @color_progress_bar1 50%,
transparent 50%,
transparent 75%,
- @bar-color1 75%);
+ @color_progress_bar1 75%);
background: -webkit-gradient(linear,
left top,
right bottom,
color-stop(0%, rgba(0,0,0,0)),
color-stop(25%, rgba(0,0,0,0)),
- color-stop(25%, @bar-color1),
- color-stop(50%, @bar-color1),
+ color-stop(25%, @color_progress_bar1),
+ color-stop(50%, @color_progress_bar1),
color-stop(50%, rgba(0,0,0,0)),
color-stop(75%, rgba(0,0,0,0)),
- color-stop(75%, @bar-color1));
+ color-stop(75%, @color_progress_bar1));
- background-color: @bar-color0;
+ background-color: @color_progress_bar0;
.LESSbackground-size(@bar-height * 2, @bar-height * 2);
}
position: absolute;
top: 0;
left: 0;
- background-color: @color_header;
+ background-color: @color_scrollbar;
}
.ui-scrollbar-y .ui-scrollbar-thumb {
width: @img-width;
vertical-align: middle;
background: url(images/00_slider_btn_brightness01.png) no-repeat;
- .LESSbackground-size(@img-height, @img-width);
+ .LESSbackground-size(@img-width, @img-height);
}
.ui-slider-left-volume {
background: url(images/00_slider_btn_volume01.png) no-repeat;
- .LESSbackground-size(@img-height, @img-width);
+ .LESSbackground-size(@img-width, @img-height);
}
.ui-slider-right-volume,
width: @img-width;
vertical-align: middle;
background: url(images/00_slider_btn_brightness02.png) no-repeat;
- .LESSbackground-size(@img-height, @img-width);
+ .LESSbackground-size(@img-width, @img-height);
}
.ui-slider-right-volume {
background: url(images/00_slider_btn_volume02.png) no-repeat;
- .LESSbackground-size(@img-height, @img-width);
+ .LESSbackground-size(@img-width, @img-height);
}
.ui-slider-left-text {
top: 0.15em !important;
}
.ui-btn-inner {
- padding: 0.4em 0 * @unit_base;
+ padding: 0.3em 0 * @unit_base;
}
.ui-btn-text {
color: @color_slider_handle_text;
width: @popup-size;
height: @popup-size;
text-align: center;
- padding-top: 0.5em;
+ padding-top: 0.6em;
z-index: 100;
- opacity: 0.9;
+ color: @color_slider_popup_text;
background: url(images/00_slider_popup_bg.png) no-repeat;
.LESSbackground-size(@popup-size, @popup-size);
}
.ui-slider-bar {
position: absolute;
- top: 0.8em;
+ top: 0.75em;
height: 16 * @unit_base;
width: 0;
background-image: url(images/00_winset_list_progress_bar.png);
@import "config.less";
.ui-toggleswitch {
- position: relative;
+ height: 80 * @unit_base;
+ width: 60 * @unit_base;
overflow: hidden;
- background: @color_button_normal;
-
- .toggleswitch-background {
- position: absolute;
- margin: 0px;
- border: 0px;
- left: 0px;
- right: 0px;
- top: 0px;
- bottom: 0px;
- pointer-events: none;
- }
+ font-weight: bold;
+ .ui-toggleswitch-mover {
+ position: relative;
+ font-size: 20 * @unit_base;
+ display: block;
- .toggleswitch-sizer {
- margin: 0px;
- opacity: 0;
- pointer-events: none;
- }
+ .ui-toggleswitch-off {
+ border-radius: 5 * @unit_base;
+ color: @color_text_sub;
+ .LESStoggleswitch_off_style;
+ height: 80 * @unit_base;
+ .ui-toggleswitch-img{
+ width: 100%;
+ position: absolute;
+ padding-top: 7 * @unit_base;
+ .ui-toggleswitch-sign{
+ position: absolute;
+ width: 4px;
+ height: 12px;
+ left: 50%;
+ margin-left:-2px;
+ background: url(images/00_switch_button_off.png) no-repeat;
+ background-size: cover;
+ -webkit-background-size: cover;
+ -o-background-size: cover;
+ -moz-background-size: cover;
+ }
+ }
+ }
- .toggleswitch-floating-button {
- background: @color_text;
- position: absolute;
- margin: 0px;
- left: 0px;
- right: 0px;
- }
+ .ui-toggleswitch-on {
+ display: none;
+ border-radius: 5 * @unit_base;
+ .LESStoggleswitch_on_style;
+ height: 80 * @unit_base;
+ color: white;
+ .ui-toggleswitch-img{
+ width: 100%;
+ position: absolute;
+ padding-top: 6 * @unit_base;
+ text-align: center;
+ .ui-toggleswitch-sign{
+ position: absolute;
+ width: 15px;
+ height: 15px;
+ left: 50%;
+ margin-left:-7px;
+ background: url(images/00_switch_button_on.png) no-repeat;
+ background-size: cover;
+ -webkit-background-size: cover;
+ -o-background-size: cover;
+ -moz-background-size: cover;
+ }
+ }
+ }
+
+ .ui-toggleswitch-reed {
+ position: absolute;
+ border-radius: 5 * @unit_base;
+ width: 57 * @unit_base;
+ .LESStoggleswitch_reed_style;
+ top: 40 * @unit_base;
+ height: 39 * @unit_base;
+ left: 1px;
+ }
- .ui-btn-inner {
- padding: 2 * @unit_base 7 * @unit_base !important;
+ .ui-toggleswitch-text {
+ width: 100%;
+ position: absolute;
+ padding-top: 10 * @unit_base;
+ text-align: center;
+ text-overflow: ellipsis;
+ }
}
+}
+
+.ui-toggleswitch-state-checked {
+ .ui-toggleswitch-mover {
+ .ui-toggleswitch-reed {
+ top: 1px;
+ }
+
+ .ui-toggleswitch-text {
+ top: 40 * @unit_base;
+ }
+ .ui-toggleswitch-img{
+ top: 40 * @unit_base;
+ }
+ .ui-toggleswitch-on {
+ display: block;
+ }
- .toggleswitch-mover {
- border-color: transparent;
- background: none;
- pointer-events: none;
+ .ui-toggleswitch-off {
+ display: none;
+ }
}
}
.ui-virtualgrid-wrapblock {
position : absolute;
left : 0;
-}
\ No newline at end of file
+}
+
+.ui-virtualgrid-wrapblock-x {
+ float : left;
+ overflow: hidden;
+}
+
+.ui-virtualgrid-content {
+ background-color : black;
+}
+
+.ui-scrollbar-thumb-x {
+ width : 1.5rem !important;
+}
+
+.ui-scrollbar-thumb-y {
+ height : 1.5rem !important;
+}
-/*
-* jQuery Mobile Framework
-* Copyright (c) jQuery Project
-* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
-*/
-.spin {
- -webkit-transform: rotate(360deg);
- -webkit-animation-name: spin;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
-}
-@-webkit-keyframes spin {
- from {-webkit-transform: rotate(0deg);}
- to {-webkit-transform: rotate(360deg);}
-}
-
-/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
-Built by David Kaneda and maintained by Jonathan Stark.
-*/
-.in, .out {
- -webkit-animation-timing-function: ease-in-out;
- -webkit-animation-duration: 350ms;
-}
-
-
-.slide.out {
- -webkit-transform: translateX(-100%);
- -webkit-animation-name: slideouttoleft;
-}
-
-.slide.in {
- -webkit-transform: translateX(0);
- -webkit-animation-name: slideinfromright;
-}
-
-.slide.out.reverse {
- -webkit-transform: translateX(100%);
- -webkit-animation-name: slideouttoright;
-}
-
-.slide.in.reverse {
- -webkit-transform: translateX(0);
- -webkit-animation-name: slideinfromleft;
-}
-
-.slideup.out {
- -webkit-animation-name: dontmove;
- z-index: 0;
-}
-
-.slideup.in {
- -webkit-transform: translateY(0);
- -webkit-animation-name: slideinfrombottom;
- z-index: 10;
-}
-
-.slideup.in.reverse {
- z-index: 0;
- -webkit-animation-name: dontmove;
-}
-
-.slideup.out.reverse {
- -webkit-transform: translateY(100%);
- z-index: 10;
- -webkit-animation-name: slideouttobottom;
-}
-
-.slidedown.out {
- -webkit-animation-name: dontmove;
- z-index: 0;
-}
-
-.slidedown.in {
- -webkit-transform: translateY(0);
- -webkit-animation-name: slideinfromtop;
- z-index: 10;
-}
-
-.slidedown.in.reverse {
- z-index: 0;
- -webkit-animation-name: dontmove;
-}
-
-.slidedown.out.reverse {
- -webkit-transform: translateY(-100%);
- z-index: 10;
- -webkit-animation-name: slideouttotop;
-}
-
-@-webkit-keyframes slideinfromright {
- from { -webkit-transform: translateX(100%); }
- to { -webkit-transform: translateX(0); }
-}
-
-@-webkit-keyframes slideinfromleft {
- from { -webkit-transform: translateX(-100%); }
- to { -webkit-transform: translateX(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;
}
-@-webkit-keyframes slideouttoleft {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(-100%); }
+.in {
+ -webkit-animation-timing-function: ease-out;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-timing-function: ease-out;
+ -moz-animation-duration: 350ms;
}
-@-webkit-keyframes slideouttoright {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(100%); }
+.out {
+ -webkit-animation-timing-function: ease-in;
+ -webkit-animation-duration: 225ms;
+ -moz-animation-timing-function: ease-in;
+ -moz-animation-duration: 225;
}
-@-webkit-keyframes slideinfromtop {
- from { -webkit-transform: translateY(-100%); }
- to { -webkit-transform: translateY(0); }
-}
-@-webkit-keyframes slideinfrombottom {
- from { -webkit-transform: translateY(100%); }
- to { -webkit-transform: translateY(0); }
-}
+/* fade */
-@-webkit-keyframes slideouttobottom {
- from { -webkit-transform: translateY(0); }
- to { -webkit-transform: translateY(100%); }
+@-webkit-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
}
-@-webkit-keyframes slideouttotop {
- from { -webkit-transform: translateY(0); }
- to { -webkit-transform: translateY(-100%); }
-}
-@-webkit-keyframes fadein {
+@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
to { opacity: 0; }
}
+@-moz-keyframes fadeout {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+
.fade.out {
- z-index: 0;
+ opacity: 0;
+ -webkit-animation-duration: 125ms;
-webkit-animation-name: fadeout;
+ -moz-animation-duration: 125ms;
+ -moz-animation-name: fadeout;
}
.fade.in {
opacity: 1;
- z-index: 10;
+ -webkit-animation-duration: 225ms;
-webkit-animation-name: fadein;
+ -moz-animation-duration: 225ms;
+ -moz-animation-name: fadein;
}
+
+/* flip */
+
/* 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;
}
-
-.ui-mobile-viewport-transitioning,
-.ui-mobile-viewport-transitioning .ui-page {
- width: 100%;
- height: 100%;
- overflow: hidden;
-}
-
.flip {
- -webkit-animation-duration: .65s;
-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:translate3d(0, 0, 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:translate3d(0, 0, 0);
}
.flip.out {
- -webkit-transform: rotateY(-180deg) scale(.8);
+ -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-transform: rotateY(0) scale(1);
- -webkit-animation-name: flipinfromleft;
+ -webkit-animation-name: flipintoright;
+ -webkit-animation-duration: 225ms;
+ -moz-animation-name: flipintoright;
+ -moz-animation-duration: 225ms;
}
-/* Shake it all about */
-
.flip.out.reverse {
- -webkit-transform: rotateY(180deg) scale(.8);
+ -webkit-transform: rotateY(90deg) scale(.9);
-webkit-animation-name: flipouttoright;
+ -moz-transform: rotateY(90deg) scale(.9);
+ -moz-animation-name: flipouttoright;
}
.flip.in.reverse {
- -webkit-transform: rotateY(0) scale(1);
- -webkit-animation-name: flipinfromright;
+ -webkit-animation-name: flipintoleft;
+ -moz-animation-name: flipintoleft;
}
-@-webkit-keyframes flipinfromright {
- from { -webkit-transform: rotateY(-180deg) scale(.8); }
- to { -webkit-transform: rotateY(0) scale(1); }
+@-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); }
+}
+
-@-webkit-keyframes flipinfromleft {
- from { -webkit-transform: rotateY(180deg) scale(.8); }
- to { -webkit-transform: rotateY(0) scale(1); }
+/* 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.flow {
+ -webkit-transform-origin: none;
+ -moz-transform-origin: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+}
+.flow.out {
+ -webkit-transform: translate3d(-100%, 0, 0) scale(.7);
+ -webkit-animation-name: flowouttoleft;
+ -webkit-animation-timing-function: ease;
+ -webkit-animation-duration: 350ms;
+ -moz-transform: translate3d(-100%, 0, 0) scale(.7);
+ -moz-animation-name: flowouttoleft;
+ -moz-animation-timing-function: ease;
+ -moz-animation-duration: 350ms;
}
-@-webkit-keyframes flipouttoleft {
- from { -webkit-transform: rotateY(0) scale(1); }
- to { -webkit-transform: rotateY(-180deg) scale(.8); }
+.flow.in {
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
+ -webkit-animation-name: flowinfromright;
+ -webkit-animation-timing-function: ease;
+ -webkit-animation-duration: 350ms;
+ -moz-transform: translate3d(0, 0, 0) scale(1);
+ -moz-animation-name: flowinfromright;
+ -moz-animation-timing-function: ease;
+ -moz-animation-duration: 350ms;
}
-@-webkit-keyframes flipouttoright {
- from { -webkit-transform: rotateY(0) scale(1); }
- to { -webkit-transform: rotateY(180deg) scale(.8); }
+.flow.out.reverse {
+ -webkit-transform: translate3d(100%, 0, 0);
+ -webkit-animation-name: flowouttoright;
+ -moz-transform: translate3d(100%, 0, 0);
+ -moz-animation-name: flowouttoright;
}
+.flow.in.reverse {
+ -webkit-animation-name: flowinfromleft;
+ -moz-animation-name: flowinfromleft;
+}
-/* Hackish, but reliable. */
+@-webkit-keyframes flowouttoleft {
+ 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
+ 60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); }
+}
+@-moz-keyframes flowouttoleft {
+ 0% { -moz-transform: translate3d(0, 0, 0) scale(1); }
+ 60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -moz-transform: translateX(-100%) scale(.7); }
+}
-@-webkit-keyframes dontmove {
- from { opacity: 1; }
- to { opacity: 1; }
+@-webkit-keyframes flowouttoright {
+ 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
+ 60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -webkit-transform: translate3d(100%, 0, 0) scale(.7); }
+}
+@-moz-keyframes flowouttoright {
+ 0% { -moz-transform: translate3d(0, 0, 0) scale(1); }
+ 60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -moz-transform: translate3d(100%, 0, 0) scale(.7); }
}
+@-webkit-keyframes flowinfromleft {
+ 0% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); }
+ 30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
+}
+@-moz-keyframes flowinfromleft {
+ 0% { -moz-transform: translate3d(-100%, 0, 0) scale(.7); }
+ 30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -moz-transform: translate3d(0, 0, 0) scale(1); }
+}
+@-webkit-keyframes flowinfromright {
+ 0% { -webkit-transform: translate3d(100%, 0, 0) scale(.7); }
+ 30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
+}
+@-moz-keyframes flowinfromright {
+ 0% { -moz-transform: translate3d(100%, 0, 0) scale(.7); }
+ 30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -moz-transform: translate3d(0, 0, 0) scale(1); }
+}
+
+
+/* pop */
+
.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;
- z-index: 10;
+ -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 {
- z-index: 0;
- -webkit-animation-name: dontmove;
+ -webkit-animation-name: fadein;
+ -moz-animation-name: fadein;
}
.pop.out.reverse {
- -webkit-transform: scale(.2);
- opacity: 0;
+ -webkit-transform: scale(.8);
+ -moz-transform: scale(.8);
-webkit-animation-name: popout;
- z-index: 10;
+ -moz-animation-name: popout;
}
@-webkit-keyframes popin {
from {
- -webkit-transform: scale(.2);
+ -webkit-transform: scale(.8);
opacity: 0;
}
to {
}
}
+@-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(.2);
+ -webkit-transform: scale(.8);
opacity: 0;
}
-}
\ No newline at end of file
+}
+
+@-moz-keyframes popout {
+ from {
+ -moz-transform: scale(1);
+ opacity: 1;
+ }
+ to {
+ -moz-transform: scale(.8);
+ opacity: 0;
+ }
+}
+
+
+/* slide */
+
+/* keyframes for slidein from sides */
+@-webkit-keyframes slideinfromright {
+ from { -webkit-transform: translate3d(100%, 0, 0); }
+ to { -webkit-transform: translate3d(0, 0, 0); }
+}
+@-moz-keyframes slideinfromright {
+ from { -moz-transform: translate3d(100%, 0, 0); }
+ to { -moz-transform: translate3d(0, 0, 0); }
+}
+
+@-webkit-keyframes slideinfromleft {
+ from { -webkit-transform: translate3d(-100%, 0, 0); }
+ to { -webkit-transform: translate3d(0, 0, 0); }
+}
+@-moz-keyframes slideinfromleft {
+ from { -moz-transform: translate3d(-100%, 0, 0); }
+ to { -moz-transform: translate3d(0, 0, 0); }
+}
+
+/* keyframes for slideout to sides */
+@-webkit-keyframes slideouttoleft {
+ from { -webkit-transform: translate3d(0, 0, 0); }
+ to { -webkit-transform: translate3d(-100%, 0, 0); }
+}
+@-moz-keyframes slideouttoleft {
+ from { -moz-transform: translate3d(0, 0, 0); }
+ to { -moz-transform: translate3d(-100%, 0, 0); }
+}
+
+@-webkit-keyframes slideouttoright {
+ from { -webkit-transform: translate3d(0, 0, 0); }
+ to { -webkit-transform: translate3d(100%, 0, 0); }
+}
+@-moz-keyframes slideouttoright {
+ from { -moz-transform: translate3d(0, 0, 0); }
+ to { -moz-transform: translate3d(100%, 0, 0); }
+}
+
+.slide.out, .slide.in {
+ -webkit-animation-timing-function: ease-out;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-timing-function: ease-out;
+ -moz-animation-duration: 350ms;
+}
+.slide.out {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ -webkit-animation-name: slideouttoleft;
+ -moz-transform: translate3d(-100%, 0, 0);
+ -moz-animation-name: slideouttoleft;
+}
+
+.slide.in {
+ -webkit-transform: translate3d(0, 0, 0);
+ -webkit-animation-name: slideinfromright;
+ -moz-transform: translate3d(0, 0, 0);
+ -moz-animation-name: slideinfromright;
+}
+
+.slide.out.reverse {
+ -webkit-transform: translate3d(100%, 0, 0);
+ -webkit-animation-name: slideouttoright;
+ -moz-transform: translate3d(100%, 0, 0);
+ -moz-animation-name: slideouttoright;
+}
+
+.slide.in.reverse {
+ -webkit-transform: translate3d(0, 0, 0);
+ -webkit-animation-name: slideinfromleft;
+ -moz-transform: translate3d(0, 0, 0);
+ -moz-animation-name: slideinfromleft;
+}
+
+/* slide down */
+
+.slidedown.out {
+ -webkit-animation-name: fadeout;
+ -moz-animation-name: fadeout;
+ -webkit-animation-duration: 100ms;
+ -moz-animation-duration: 100ms;
+}
+
+.slidedown.in {
+ -webkit-transform: translate3d(0, 0, 0);
+ -webkit-animation-name: slideinfromtop;
+ -moz-transform: translate3d(0, 0, 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: translate3d(0, -100%, 0);
+ -moz-transform: translate3d(0, -100%, 0);
+ -webkit-animation-name: slideouttotop;
+ -moz-animation-name: slideouttotop;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
+}
+
+@-webkit-keyframes slideinfromtop {
+ from { -webkit-transform: translate3d(0, -100%, 0); }
+ to { -webkit-transform: translate3d(0, 0, 0); }
+}
+@-moz-keyframes slideinfromtop {
+ from { -moz-transform: translate3d(0, -100%, 0); }
+ to { -moz-transform: translate3d(0, 0, 0); }
+}
+
+@-webkit-keyframes slideouttotop {
+ from { -webkit-transform: translate3d(0, 0, 0); }
+ to { -webkit-transform: translate3d(0, -100%, 0); }
+}
+@-moz-keyframes slideouttotop {
+ from { -moz-transform: translate3d(0, 0, 0); }
+ to { -moz-transform: translate3d(0, -100%, 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: translate3d(0, 0, 0);
+ -webkit-animation-name: slideinfrombottom;
+ -moz-transform: translate3d(0, 0, 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: translate3d(0, 100%, 0);
+ -moz-transform: translate3d(0, 100%, 0);
+ -webkit-animation-name: slideouttobottom;
+ -moz-animation-name: slideouttobottom;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
+}
+
+@-webkit-keyframes slideinfrombottom {
+ from { -webkit-transform: translate3d(0, 100%, 0); }
+ to { -webkit-transform: translate3d(0, 0, 0); }
+}
+@-moz-keyframes slideinfrombottom {
+ from { -moz-transform: translate3d(0, 100%, 0); }
+ to { -moz-transform: translate3d(0, 0, 0); }
+}
+
+@-webkit-keyframes slideouttobottom {
+ from { -webkit-transform: translate3d(0, 0, 0); }
+ to { -webkit-transform: translate3d(0, 100%, 0); }
+}
+@-moz-keyframes slideouttobottom {
+ from { -moz-transform: translate3d(0, 0, 0); }
+ to { -moz-transform: translate3d(0, 100%, 0); }
+}
+
+/* slide fade */
+
+.slidefade.out {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ -webkit-animation-name: slideouttoleft;
+ -moz-transform: translate3d(-100%, 0, 0);
+ -moz-animation-name: slideouttoleft;
+ -webkit-animation-duration: 225ms;
+ -moz-animation-duration: 225ms;
+}
+
+.slidefade.in {
+ -webkit-transform: translate3d(0, 0, 0);
+ -webkit-animation-name: fadein;
+ -moz-transform: translate3d(0, 0, 0);
+ -moz-animation-name: fadein;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
+}
+
+.slidefade.out.reverse {
+ -webkit-transform: translate3d(100%, 0, 0);
+ -webkit-animation-name: slideouttoright;
+ -moz-transform: translate3d(100%, 0, 0);
+ -moz-animation-name: slideouttoright;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
+}
+
+.slidefade.in.reverse {
+ -webkit-transform: translate3d(0, 0, 0);
+ -webkit-animation-name: fadein;
+ -moz-transform: translate3d(0, 0, 0);
+ -moz-animation-name: fadein;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
+}
+
+/* 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:translate3d(0, 0, 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:translate3d(0, 0, 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); }
+}
--- /dev/null
+THEME_NAME=tizen-black
+
+THEME_OUTPUT_ROOT ?= .
+OUTPUT_DIR = ${THEME_OUTPUT_ROOT}/${THEME_NAME}
+
+CSS_OUTPUT = ${OUTPUT_DIR}/tizen-web-ui-fw-theme.css
+
+CSS_SRCS= ../common/jquery.mobile.theme.less.css \
+ ../common/jquery.mobile.core.less.css \
+ ../common/jquery.mobile.transitions.css \
+ ../common/jquery.mobile.grids.css \
+ ../common/jquery.mobile.headerfooter.less.css \
+ ../common/jquery.mobile.navbar.css \
+ ../common/jquery.mobile.button.less.css \
+ ../common/jquery.mobile.collapsible.css \
+ ../common/jquery.mobile.dialog.less.css \
+ ../common/jquery.mobile.forms.checkboxradio.less.css \
+ ../common/jquery.mobile.forms.fieldcontain.css \
+ ../common/jquery.mobile.forms.select.css \
+ ../common/jquery.mobile.forms.textinput.less.css \
+ ../common/jquery.mobile.controlgroup.less.css \
+ ../common/jquery.mobile.listview.less.css \
+ ../common/jquery.mobile.segmentctrl.less.css \
+ ../common/jquery.mobile.tizen.optionheader.less.css \
+ ../common/jquery.mobile.tizen.virtuallistview.less.css \
+ ../common/jquery.mobile.tizen.scrollview.less.css \
+ ../common/jquery.mobile.tizen.hsvpicker.less.css \
+ ../common/jquery.mobile.tizen.colorpalette.less.css \
+ ../common/jquery.mobile.tizen.colortitle.less.css \
+ ../common/jquery.mobile.tizen.datetimepicker.less.css \
+ ../common/jquery.mobile.tizen.popupwindow.less.css \
+ ../common/jquery.mobile.tizen.ctxpopup.less.css \
+ ../common/jquery.mobile.tizen.progressbar.less.css \
+ ../common/jquery.mobile.tizen.progress.less.css \
+ ../common/jquery.mobile.tizen.slider.less.css \
+ ../common/jquery.mobile.tizen.imageslider.less.css \
+ ../common/jquery.mobile.tizen.notification.less.css \
+ ../common/jquery.mobile.tizen.pagecontrol.less.css \
+ ../common/jquery.mobile.tizen.swipelist.less.css \
+ ../common/jquery.mobile.tizen.nocontents.less.css \
+ ../common/jquery.mobile.tizen.shortcutscroll.less.css \
+ ../common/jquery.mobile.tizen.dayselector.less.css \
+ ../common/jquery.mobile.tizen.toggleswitch.less.css \
+ ../common/jquery.mobile.tizen.huegradient.css \
+ ../common/jquery.mobile.tizen.colorpicker.less.css \
+ ../common/jquery.mobile.tizen.colorpickerbutton.less.css \
+ ../common/jquery.mobile.tizen.triangle.less.css \
+ ../common/jquery.mobile.tizen.multibuttonentry.less.css \
+ ../common/jquery.mobile.tizen.scrollview.handler.less.css \
+ ../common/jquery.mobile.tizen.virtualgridview.less.css \
+ ../common/jquery.mobile.tizen.multimediaview.less.css \
+
+
+all: prepare css images js
+
+prepare:
+ -mkdir -p ${OUTPUT_DIR}
+
+less: prepare
+ # Compiling less to css...
+ @for f in `find ../common -iname '*.less' | sort`; do \
+ if test "config.less" = "$$f" ; then continue; fi; \
+ echo " build $$f"; \
+ lessc $$f > $$f.css; \
+ done;
+
+css: prepare less
+ # Creating tizen-black theme...
+ @rm -f $(CSS_OUTPUT)
+ @for src in $(CSS_SRCS); do \
+ cat $$src >> $(CSS_OUTPUT) ; \
+ done
+
+images: prepare
+ # Copying tizen-black theme images...
+ @cp -a images/ ${OUTPUT_DIR}/
+
+js: prepare
+ @cp -a theme.js ${OUTPUT_DIR}
+
+clean:
+ # Cleaning tizen-black theme...
+ -rm -rf $(OUTPUT_DIR)
+ -rm -f *.less.css
+
--- /dev/null
+/****************************
+ * Tizen Common Less Header *
+ ****************************/
+@import "../common/jquery.mobile.tizen.less";
+@import "style.less";
--- /dev/null
+// Basic color set
+@color_bg: rgb(249, 249, 249); // 249 249 249
+@color_bg_sub: rgb(36, 36, 36); // 36 36 36 // TODO: used only in dialog group. Check more.
+
+@color_border: rgb(42, 42, 42); // 42 42 42
+@color_header: rgb(68, 68, 74); // 68 68 74
+
+@color_scrollbar: rgb(218, 218, 218);
+
+@color_text: rgb(0, 0, 0); // 0 0 0
+@color_text_dim: rgb(108, 115, 118); // 108 115 118
+@color_text_focus: @color_text;
+@color_text_sub: rgb(102, 102, 102); // 102 102 102
+@color_text_setting: rgb(42, 109, 140); // 42 109 140
+@color_text_input: rgb(70, 70, 70); // 70 70 70
+@color_text_cursor: @color_text_setting;
+@color_text_segctrl: rgb(158, 195, 213); // 158 195 213 // TODO: used only in segctrl. Check more.
+
+//Dialogue color set
+@color_dialogue_main_text: rgb(249,249,249);
+@color_dialogue_sub_text: rgb(146,146,146);
+
+//Dialogue Editor color set
+@color_dialogue_editor_default_text: rgb(70, 70, 70);
+@color_dialogue_editor_bg: rgb(0, 0, 0);
+@color_dialogue_editor_border: rgb(108, 168, 199);
+
+/*************************
+ Vars/Mixins for Widgets
+
+ NOTE:
+ * Color variables' name: @color_<widget name>_<identifier>
+ * Color values: Use rgb() or rgba()
+ *************************/
+
+
+/***************************************************************************
+ List
+***************************************************************************/
+@color_list_border_bottom: rgb(169, 169, 169);
+@color_list_main_text_read: rgba(158, 158, 158, 1);
+@color_list_main_text_unread: rgba(249, 249, 249, 1);
+@color_list_main_text_focus: rgba(249, 249, 249, 1);
+@color_list_sub_text_default: rgba(100, 100, 100, 1);
+@color_list_sub_text_settings: rgba(0, 140, 210, 1);
+@color_list_sub_text_focus: rgba(249, 249, 249, 1);
+@color_list_flexible_text_main: rgba(249, 249, 249, 1);
+@color_list_flexible_text_sub: rgba(149, 149, 149, 1);
+@color_list_index_list: rgba(164, 164, 164, 1);
+@color_list_editfield_text: rgba(70, 70, 70, 1);
+@color_list_editfield_text_cursor: rgba(0, 140, 210, 1);
+@color_list_multiline_text: rgba(149, 149, 149, 1);
+@color_list_3line_main_text: rgba(249, 249, 249, 1);
+@color_list_3line_main_text_read: rgba(249, 249, 249, 1);
+@color_list_3line_main_text_focus: rgba(249, 249, 249, 1);
+@color_list_3line_main_text2: rgba(104, 137, 152, 1);
+@color_list_3line_main_text2_focus: rgba(249, 249, 249, 1);
+@color_list_converter_style: rgba(249, 249, 249, 1);
+@color_list_converter_style_focus: rgba(249, 249, 249, 1);
+@color_list_unread_email: rgba(249, 249, 249, 1);
+@color_list_contents_text: rgba(210, 210, 210, 1);
+@color_list_name_text: rgba(129, 129, 129, 1);
+@color_list_name_text_dim: rgba(0, 140, 210, 1);
+@color_list_colorbar: rgba(80, 107, 207, 1); //Temp, not defined
+@color_list_bubble_box_shadow: rgb(78, 78, 78); // Not defined in GUI guide.
+@color_list_bubble_left_text: rgb(0, 0, 0);
+@color_list_bubble_left_bg: rgb(217, 230, 237); // Not defined in GUI guide. Picked from image.
+@color_list_bubble_right_text: rgb(96, 96, 96);
+@color_list_bubble_right_bg: rgb(217, 217, 217); // Not defined in GUI guide. Picked from image.
+@color_list_bubble_sos_text: rgb(211, 0, 0);
+@color_list_bubble_date_text: rgb(128, 128, 128);
+@color_list_bubble_date_bg: rgba(225, 225, 225, 0);
+@color_list_bubble_time_text: rgb(57, 166, 215);
+@color_list_bubble_link_text: rgb(34, 129, 157);
+@color_list_bubble_failed_text: rgb(211, 0, 0);
+@color_list_bubble_name_text: rgb(57, 166, 215);
+@color_list_bubble_help_text: rgb(146, 146, 146);
+@color_list_divider_bg : -webkit-linear-gradient(top, rgb(73,73,73) 0%,rgb(22,22,22) 100%);
+@color_list_divider_text : rgb(0, 94, 160); /* #005ea0 */
+@color_list_expandable_expanded_bg: rgb(215, 225, 232);
+
+@font_size_list_main_text: 44 * @unit_base; //1.375rem; /* 44 px */
+@font_size_list_sub_text: 32 * @unit_base; //1.0rem; /* 32 px */
+@font_size_list_flexible_text_main: 48 * @unit_base; //1.5rem; /* 48 px */
+@font_size_list_flexible_text_sub: 36 * @unit_base; //1.125rem; /* 36 px */
+@font_size_list_index_list: 32 * @unit_base; //1.0rem; /* 32 px */
+@font_size_list_editfield_text: 44 * @unit_base; //1.375rem; /* 44 px */
+@font_size_list_multiline_text: 32 * @unit_base; //1.0rem; /* 32 px */
+@font_size_list_3line_main_text: 42 * @unit_base; //1.3125rem; /* 42 px */
+@font_size_list_3line_main_text2: 36 * @unit_base; //1.125rem; /* 36 px */
+@font_size_list_converter_style: 40 * @unit_base; //1.3rem; /* 40 px */
+@font_size_list_unread_email: 44 * @unit_base; //1.375rem; /* 44 px */
+@font_size_list_contents_text: 30 * @unit_base; //0.94rem; /* 30 px */
+@font_size_list_name_text: 32 * @unit_base; //1.0rem; /* 32 px */
+
+@style_list_li_dialogue_margin_left: 16 * @unit_base;
+@style_list_li_dialogue_border_left_width: 10 * @unit_base;
+@style_list_bubble_date_height: 40 * @unit_base;
+@style_list_bubble_date_text_align: center;
+
+@color_list_dialogue_bg : rgba(236, 240, 242, 1);
+/***************************************************************************
+ Shortcut Scroll
+***************************************************************************/
+@color_shortcutscroll_rollover_bg: none;
+@color_shortcutscroll_rollover_text: rgba(160, 172, 179, 1);
+@color_shortcutscroll_popup_bg: rgba(229, 229, 229, 1); // 00_fast_scroll_popup_bg.png
+@color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5);
+@color_shortcutscroll_popup_text: rgb(42, 137, 194);
+
+
+/***************************************************************************
+ Popup
+***************************************************************************/
+@color_popup_info_style: rgba(249, 249, 249, 1);
+@color_popup_basic_style_title: rgba(249, 249, 249, 1);
+@color_popup_center_progressbar_title: rgba(153, 153, 153, 1);
+@color_popup_text_progress_title: rgba(249, 249, 249, 1);
+/* TODO : ninepatch popup title */
+@color_popup_title_bg: rgba(80, 147, 182, 255); /* popup_title_bg.png */
+@color_popup_text_bg: rgba(236, 240, 242, 255); /* popup_bg.png */
+@color_popup_button_bg: rgba(209, 221, 228, 255); /* popup_button_bg.png */
+@color_popup_font: white;
+@color_popup_text_font: black;
+
+@color_popup_buttonbg: rgb(84, 126, 153);
+@color_popup_buttonbg_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(84, 126, 153)), to(rgb(69, 105, 128)));
+@color_popup_buttonbg_moz: -moz-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
+@color_popup_buttontext: rgb(249, 249, 249);
+@color_popup_buttonbg_over: rgb(94, 136, 163);
+@color_popup_buttonbg_press: rgb(67, 160, 217);
+@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
+@color_popup_buttonbg_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+
+@font_size_popup_info_style: 42 * @unit_base; //1.3125rem; /* 42px */
+@font_size_popup_basic_style_title: 38 * @unit_base; //1.1875rem; /* 38px */
+@font_size_popup_center_progressbar_title: 26 * @unit_base; //0.8125rem; /* 26px */
+@font_size_popup_text_progress_title: 42 * @unit_base; //1.3125rem; /* 42px */
+@font_size_popup_button_text: 32 * @unit_base; //1.0rem; /* 32px */
+
+.LESSpopup_button_style{
+ background: @color_popup_buttonbg;
+ background: @color_popup_buttonbg_webkit;
+ background: @color_popup_buttonbg_moz;
+ color: @color_popup_buttontext;
+}
+
+.LESSpopup_button_hover_style{
+ background: @color_popup_buttonbg_over;
+}
+
+.LESSpopup_button_press_style{
+ background: @color_popup_buttonbg_press;
+ background: @color_popup_buttonbg_press_webkit;
+ background: @color_popup_buttonbg_press_moz;
+}
+
+/***************************************************************************
+ Button
+***************************************************************************/
+
+@color_button_normal: rgb(151, 161, 167);
+@color_button_normal_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(151, 161, 167)), to(rgb(122, 132, 141)));
+@color_button_normal_moz: -moz-linear-gradient(top, rgb(151, 161, 167), rgb(122, 132, 141));
+
+@color_button_press: rgb(67, 160, 217);
+@color_button_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
+@color_button_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+
+@color_button_hover: rgb(161, 171, 177);
+
+@color_button_text_normal: rgb(249, 249, 249);
+@color_button_text_white: rgb(249, 249, 249);
+@color_button_text_press: rgb(249, 249, 249);
+
+@color_circlebutton_hover: rgb(239, 119, 126);
+@color_circlebutton_hover_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(198, 78, 85)), to(rgb(166, 43, 45)));
+@color_circlebutton_hover_moz: -moz-linear-gradient(top, rgb(198, 78, 85), rgb(166,43,45));
+@color_circlebutton_press: rgb(67, 160, 217);
+@color_circlebutton_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
+@color_circlebutton_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+
+@color_button_EditText: rgb(249, 249, 249);
+@color_button_EditTextPress: rgb(249, 249, 249);
+@color_button_EditBG: rgb(0, 0, 0);
+@color_button_EditBGPress: rgb(0, 140, 210);
+
+@color_button_switch_BGon: rgb(42, 126, 172);
+@color_button_switch_BGon_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(33, 116, 167)), to(rgb(75, 165, 219)));
+@color_button_switch_BGon_moz: -moz-linear-gradient(top, rgb(33, 116, 167), rgb(75, 165, 219));
+@color_button_switch_BGoff: rgb(151, 161, 167);
+@color_button_switch_BGoff_text_color: rgb(203, 203, 203);
+@color_button_switch_BGoff_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 114, 114)), to(rgb(141, 141, 141)));
+@color_button_switch_BGoff_moz: -moz-linear-gradient(top, rgb(114, 114, 114), rgb(141, 141, 141));
+@color_button_switch_BGreed: rgb(253, 253, 253);
+@color_button_switch_BGreed_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(253, 253, 253)), to(rgb(231, 231, 231)));
+@color_button_switch_BGreed_moz: -moz-linear-gradient(top, rgb(253, 253, 253), rgb(231, 231, 231));
+
+@radius_button_switch: 4px;
+@radius_button_switch_reed: 2px;
+
+@color_button_edit: rgb(201, 88, 88);
+@color_button_edit_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
+@color_button_edit_moz: -moz_linear-gradient(top, rgb(201, 88, 88), rgb(161, 40, 40));
+
+@color_button_edit_press: rgb(147, 24, 24);
+@color_button_edit_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(147, 24,24)), to(rgb(110, 23, 23)));
+@color_button_edit_press_moz: -moz-linear-gradient(top, rgb(147, 24, 24), rgb(110, 23, 23));
+
+.LESSbutton_up_style{
+ background: @color_button_normal;
+ background: @color_button_normal_webkit;
+ background: @color_button_normal_moz;
+ color: @color_button_text_normal;
+}
+
+.LESSbutton_hover_style{
+ background: @color_button_hover;
+ color: @color_button_text_white;
+}
+
+.LESSbutton_down_style{
+ background: @color_button_press;
+ background: @color_button_press_webkit;
+ background: @color_button_press_moz;
+ color: @color_button_text_white;
+}
+
+.LESSbutton_text1_style{
+ font-family: @font_family;
+ font-weight: normal;
+ font-size: 1.0rem;
+ font-style:normal;
+ color: @color_button_text_normal;
+ &:hover {color: @color_button_text_press;}
+}
+
+.LESSbutton_box_style{
+ color: @color_button_text_white;
+ &:hover {color: @color_button_text_white;}
+}
+
+.LESScirclebutton_hover_style{
+ border-width: 0px;
+ background: @color_circlebutton_hover;
+ background: @color_circlebutton_hover_webkit;
+ backgronnd: @color_circlebutton_hover_moz;
+}
+
+.LESScirclebutton_press_style{
+ border-width: 0px;
+ background: @color_circlebutton_press;
+ background: @color_circlebutton_press_webkit;
+ background: @color_circlebutton_press_moz;
+}
+
+.LESStoggleswitch_on_style{
+ background: @color_button_switch_BGon;
+ background: @color_button_switch_BGon_webkit;
+ background: @color_button_switch_BGon_moz;
+ border-radius: @radius_button_switch;
+ -webkit-border-radius: @radius_button_switch;
+ -moz-border-radius: @radius_button_switch;
+}
+
+.LESStoggleswitch_off_style{
+ color: @color_button_switch_BGoff_text_color;
+ background: @color_button_switch_BGoff;
+ background: @color_button_switch_BGoff_webkit;
+ background: @color_button_switch_BGoff_moz;
+ border-radius: @radius_button_switch;
+ -webkit-border-radius: @radius_button_switch;
+ -moz-border-radius: @radius_button_switch;
+}
+
+.LESStoggleswitch_reed_style{
+ background: @color_button_switch_BGreed;
+ background: @color_button_switch_BGreed_webkit;
+ background: @color_button_switch_BGreed_moz;
+ border-radius: @radius_button_switch_reed;
+ -webkit-border-radius: @radius_button_switch_reed;
+ -moz-border-radius: @radius_button_switch_reed;
+}
+
+.LESSbutton_edit_style{
+ background: @color_button_edit;
+ background: @color_button_edit_webkit;
+ background: @color_button_edit_moz;
+ font-weight:bold;
+ color: rgb(249, 249, 249);
+}
+
+.LESSbutton_editpress_style{
+ background: @color_button_edit_press;
+ background: @color_button_edit_press_webkit;
+ background: @color_button_edit_press_moz;
+}
+
+.LESSbutton_edit_padding{
+ padding: 0.5em 0.8em;
+}
+
+/***************************************************************************
+ Date Time picker color set
+***************************************************************************/
+@color_timepicker_selector_color: rgb(42,137,194);
+
+/***************************************************************************
+ Contextual Popup
+***************************************************************************/
+@color_ctxpopup_text: rgb(19, 58, 83);
+@color_ctxpopup_background: rgb(219, 229, 239);
+@color_ctxpopup_border_left: rgb(225, 235, 241);
+@color_ctxpopup_border_right: rgb(174, 184, 190);
+@color_ctxpopup_border_bottom: rgb(153, 176, 195);
+@color_ctxpopup_timepicker_text: rgb( 105, 151, 173 );
+@color_ctxpopup_timepicker_text_focus: rgb( 249, 249, 249 );
+
+/***************************************************************************
+ DaySelector
+***************************************************************************/
+@color_dayselector_Btn_Sat: rgba(0, 168, 231, 1); /* #00a8e7 */
+@color_dayselector_Btn_Sun: rgba(240, 20, 2, 1); /* #f01402 */
+@color_dayselector_Btn_Mon_to_Fri: rgba(249, 249, 249, 1); /* #f9f9f9 */
+@color_dayselector_Btn_border: rgba(26, 82, 116, 1); /* #f9f9f9 */
+@color_dayselector_Btn_normal: -webkit-linear-gradient(top, rgb(125,157,178) 0%,rgb(84,121,144) 100%);
+@color_dayselector_Btn_press: -webkit-linear-gradient(top, rgb(59,119,150) 0%,rgb(47,91,117) 100%);
+
+
+/***************************************************************************
+ OptionHeader
+***************************************************************************/
+@color_optionheader_Background: rgba(40, 55, 81, 1);
+@color_optionheader_bt: -webkit-linear-gradient(top, rgb(85,113,160) 0%,rgb(68,95,139) 100%);
+@color_optionheader_bt_press: -webkit-linear-gradient(top, rgb(42,137,193) 0%,rgb(27,106,153) 100%);
+@color_optionheader_tab_text: rgba(249, 249, 249, 1); /* #f9f9f9 */
+
+
+/***************************************************************************
+ SearchBar(forms.textinput)
+***************************************************************************/
+@color_searchbar_bg : rgba(215, 225, 232, 1); /* #242424 */
+@color_searchbar_default_text : rgba(121, 131, 138, 1); /* #828282 */
+@color_searchbar_input_field_bg : rgba(249, 249, 249, 1); /* #F9F9F9*/
+
+
+/***************************************************************************
+ SegmentControl
+***************************************************************************/
+@color_segmentcontrol_btn_normal : -webkit-linear-gradient(top, rgb(48,65,95) 0%,rgb(30,43,62) 100%);
+@color_segmentcontrol_btn_press : -webkit-linear-gradient(top, rgb(71,98,141) 0%,rgb(52,75,112) 100%);
+@color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
+@color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
+
+
+/***************************************************************************
+ ControlGroup
+***************************************************************************/
+@color_controlgroup_btn_border : rgba(26, 82, 116, 1); /* #252525 */
+
+
+/***************************************************************************
+ Header / Footer
+ NavigationBar / ControlBar
+***************************************************************************/
+@color_bar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
+@color_bar_btn_press : -webkit-linear-gradient(top, rgb(74,164,218) 0%,rgb(43,138,195) 100%);
+@color_bar_btn_bg : transparent;
+@color_bar_back_btn_bg : transparent;
+
+@color_bar_seg_btn_border : rgba(0, 0, 0, 0.1);
+@color_bar_seg_text_press : rgba(249, 249, 249, 1);
+@color_bar_seg_text_normal : rgba(249, 249, 249, 1);
+@color_bar_seg_btn_press : -webkit-linear-gradient(top, rgb(94,120,160) 0%,rgb(61,88,131) 100%);
+@color_bar_seg_btn_normal : -webkit-linear-gradient(top, rgb(56,80,120) 0%,rgb(39,58,88) 100%);
+
+@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
+@color_bar_title_bg : -webkit-linear-gradient(top, rgb(68,88,120) 0%,rgb(24,37,56) 100%);
+@color_bar_title_btn_bg : -webkit-linear-gradient(top, rgb(56,80,119) 10%,rgb(39,58,88) 90%);
+@color_bar_title_btn_border : rgba(0, 0, 0, 0.1);
+
+@color_bar_footer_bg : -webkit-linear-gradient(top, rgb(43,54,71) 0%,rgb(17,24,35) 100%);
+@color_bar_footer_btn_bg : transparent;
+
+@color_controlbar_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */
+@color_controlbar_tabbbar_bg : -webkit-linear-gradient(top, rgb(37,51,74) 0%,rgb(26,36,52) 100%);
+@color_controlbar_toolbbar_bg : -webkit-linear-gradient(top, rgb(42,52,69) 0%,rgb(17,24,35) 100%);
+@color_controlbar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_controlbar_btn_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
+@color_controlbar_btn_press : -webkit-linear-gradient(top, rgb(60,81,114) 0%,rgb(42,58,85) 100%);
+
+@color_border_top : rgba(255, 255, 255, 0.5);
+@color_border_bottom : rgba(0, 0, 0, 0.5);
+
+/***************************************************************************
+ Tickernoti
+***************************************************************************/
+@color_ticker_bg: rgb(35, 90, 123);
+@color_ticker_text1: rgb(249, 249, 249);
+@color_ticker_text2: rgb(142, 170, 186);
+
+
+/***************************************************************************
+ Smallpopup
+***************************************************************************/
+@color_smallpopup_bg: rgb(215, 225, 232);
+@color_smallpopup_text: rgb(77, 77, 77);
+
+
+/***************************************************************************
+ No Contents
+***************************************************************************/
+@color_nocontents_text: rgb(154, 145, 154);
+
+
+/***************************************************************************
+ Slider
+***************************************************************************/
+@color_slider_handle_text: rgb(42, 137, 194);
+@color_slider_popup_text: rgb(249, 249, 249);
+
+
+/***************************************************************************
+ Progress
+***************************************************************************/
+@color_progress_bar0: rgb(178, 178, 178);
+@color_progress_bar1: rgb(42, 137, 194);
+
+
+/***************************************************************************
+ Handler
+***************************************************************************/
+@color_scrollview_handler_bg : rgba(150, 150, 150, 0.5);
+
+/***************************************************************************
+ multimediaview
+***************************************************************************/
+@color_multimediaview_bg : rgb(249, 249, 249);
+@color_multimediaview_control_bg : rgba(249, 249, 249, 0.5);
+@color_multimediaview_button_bg : rgb(249, 249, 249);
+@color_multimediaview_timestamp_text : rgb(42, 137, 194);
+@color_multimediaview_duration_text : rgb(128, 128, 128);
+@color_multimediaview_bar_gray : rgb(178, 178, 178);
+@color_multimediaview_bar_active : rgb(42, 137, 194);
+@color_multimediaview_bar_handle : rgb(249, 249, 249);
+
+/***************************************************************************
+ Color widgets
+***************************************************************************/
+@color_widgets_title_bg: rgb(235, 239, 241);
+@color_widgets_basic_border: rgb(192, 192, 192);
+@color_widgets_left_border: rgb(108, 168, 199);
+
+.LESScolortitle_background_style{
+ background-color: @color_widgets_title_bg;
+ border: 1px solid;
+ border-color: @color_widgets_basic_border;
+ border-left: 6px solid;
+ border-left-color: @color_widgets_left_border;
+}
+
+.LESShsvpicker_background_style{
+ background-color: @color_widgets_title_bg;
+ border: 1px solid;
+ border-color: @color_widgets_basic_border;
+ border-left: 6px solid;
+ border-left-color: @color_widgets_left_border;
+}
+
+.LESSpalette_background_style{
+ background-color: @color_widgets_title_bg;
+ border: 1px solid;
+ border-top: 6px solid;
+ border-color: @color_widgets_basic_border;
+}
+
+
+/***************************************************************************
+ multibutton entry
+***************************************************************************/
+@color_multibuttonentry_bg : rgb(249, 249, 249);
+@color_multibuttonentry_block_text : rgb(255, 255, 255);
+@color_multibuttonentry_block_bg : rgb(60, 100, 155);
+@color_multibuttonentry_block_border : rgb(85, 131, 174);
+@color_multibuttonentry_press_bg : rgb(41, 137, 194);
+@color_multibuttonentry_press_border : rgb(93, 187, 244);
+@color_multibuttonentry_input_text : #222222;
+@color_multibuttonentry_link : rgb(100, 100, 100);
+
+
+/***************************************************************************
+****************************************************************************
+ Layout ( position, padding, margin etc...)
+****************************************************************************
+***************************************************************************/
+@style-title-font-size : 52 * @unit_base;
+
+@style-corner-radius : .3em;
+@style-title-extended-2btn-width : 688 * @unit_base;
+@style-title-extended-2btn-radio-width : 343 * @unit_base;
+@style-title-extended-3btn-width : 688 * @unit_base;
+@style-title-extended-3btn-radio-width : 229 * @unit_base;
+@style-title-extended-4btn-width : 688 * @unit_base;
+@style-title-extended-4btn-radio-width : 171 * @unit_base;
+
+@style-back-btn-left : 44 * @unit_base;
+@style-back-btn-arrow-top : 5 * @unit_base;
+
+@style-title-min-height : 62 * @unit_base;
+@style-title-extended-margin : -30 * @unit_base;
+/***************************************************************************
+ Navigation
+***************************************************************************/
+
+.LESStitle-diff-style {
+ text-align: left;
+ margin: 19*@unit_base 135*@unit_base 19*@unit_base 16*@unit_base;
+}
+
+.LESStitle-border {
+ border-style: solid;
+ border-width : 1px;
+ border-bottom-color: @color_border_bottom;
+ border-bottom-width: 2px;
+ border-top-color: @color_border_top;
+
+ border-left-color : @color_bar_title_btn_border;
+ border-right-color : @color_bar_title_btn_border;
+
+ font-weight : bold;
+
+ -webkit-border-radius: 0px;
+}
+
+.LESSextended-controlgroup-border {
+ border-style : solid;
+ border-width : 1px;
+ border-bottom-width: 2px;
+
+ border-bottom-color: @color_border_bottom;
+ border-top-color: @color_border_top;
+ border-left-color: @color_bar_seg_btn_border;
+ border-right-color: @color_bar_seg_btn_border;
+}
+
+.LESSback-btn-background {
+ background : none;
+}
+
+.LESSbtn-back {
+ width : 144 * @unit_base;
+ height : 114 * @unit_base;
+ top : 0 * @unit_base;
+ right : 0 * @unit_base;
+}
+
+.LESSbtn-back-inner {
+ width : 144 * @unit_base;
+ height : 114 * @unit_base;
+}
+
+.LESSbtn-arrow-position {
+ left : 20 * @unit_base;
+ top : 30 * @unit_base;
+}
+
+.LESSdialogue-border-style {
+ border-right-style : solid;
+ border-right-color : black;
+ border-right-width : 1px;
+}
+
+.LESSdialogue-divider {
+ padding-top : 36 * @unit_base;
+ padding-bottom : 10 * @unit_base;
+ padding-left : 10 * @unit_base;
+
+ margin-left : 16 * @unit_base;
+ margin-right : 16 * @unit_base;
+
+ background : rgba(249, 249, 249, 1);
+ font-size : 32 * @unit_base;
+ font-weight : bold;
+ color : rgba(92, 151, 187, 1);
+}
--- /dev/null
+(function( $, undefined ) {
+//$.mobile.page.prototype.options.backBtnTheme = "s";
+
+// Clear default theme for child elements
+$.mobile.page.prototype.options.headerTheme = "s";
+$.mobile.page.prototype.options.footerTheme = "s";
+//$.mobile.page.prototype.options.contentTheme = "s";
+
+// clear listview
+$.mobile.listview.prototype.options.theme = "s";
+$.mobile.listview.prototype.options.countTheme = "s";
+$.mobile.listview.prototype.options.headerTheme = "s";
+$.mobile.listview.prototype.options.dividerTheme = "s";
+$.mobile.listview.prototype.options.splitTheme = "s";
+
+//clear button theme
+$.mobile.button.prototype.options.theme = "s";
+$.fn.buttonMarkup.defaults.theme = "s";
+
+// Default theme swatch
+$.mobile.page.prototype.options.theme = "s";
+
+// Default font size for this theme
+$.tizen.frameworkData.defaultFontSize = 36;
+
+})(jQuery);
+++ /dev/null
-THEME_NAME=tizen-gray
-
-THEME_OUTPUT_ROOT ?= .
-OUTPUT_DIR = ${THEME_OUTPUT_ROOT}/${THEME_NAME}
-
-CSS_OUTPUT = ${OUTPUT_DIR}/tizen-web-ui-fw-theme.css
-
-CSS_SRCS= ../common/jquery.mobile.theme.less.css \
- ../common/jquery.mobile.core.less.css \
- ../common/jquery.mobile.transitions.css \
- ../common/jquery.mobile.grids.css \
- ../common/jquery.mobile.headerfooter.less.css \
- ../common/jquery.mobile.navbar.css \
- ../common/jquery.mobile.button.less.css \
- ../common/jquery.mobile.collapsible.css \
- ../common/jquery.mobile.dialog.less.css \
- ../common/jquery.mobile.forms.checkboxradio.less.css \
- ../common/jquery.mobile.forms.fieldcontain.css \
- ../common/jquery.mobile.forms.select.css \
- ../common/jquery.mobile.forms.textinput.less.css \
- ../common/jquery.mobile.controlgroup.less.css \
- ../common/jquery.mobile.listview.less.css \
- ../common/jquery.mobile.segmentctrl.less.css \
- ../common/jquery.mobile.tizen.optionheader.less.css \
- ../common/jquery.mobile.tizen.virtuallistview.less.css \
- ../common/jquery.mobile.tizen.scrollview.less.css \
- ../common/jquery.mobile.tizen.hsvpicker.less.css \
- ../common/jquery.mobile.tizen.colorpalette.less.css \
- ../common/jquery.mobile.tizen.colortitle.less.css \
- ../common/jquery.mobile.tizen.datetimepicker.less.css \
- ../common/jquery.mobile.tizen.popupwindow.less.css \
- ../common/jquery.mobile.tizen.ctxpopup.less.css \
- ../common/jquery.mobile.tizen.progressbar.less.css \
- ../common/jquery.mobile.tizen.progress.less.css \
- ../common/jquery.mobile.tizen.slider.less.css \
- ../common/jquery.mobile.tizen.imageslider.less.css \
- ../common/jquery.mobile.tizen.notification.less.css \
- ../common/jquery.mobile.tizen.pagecontrol.less.css \
- ../common/jquery.mobile.tizen.swipelist.less.css \
- ../common/jquery.mobile.tizen.nocontents.less.css \
- ../common/jquery.mobile.tizen.shortcutscroll.less.css \
- ../common/jquery.mobile.tizen.dayselector.less.css \
- ../common/jquery.mobile.tizen.toggleswitch.less.css \
- ../common/jquery.mobile.tizen.huegradient.css \
- ../common/jquery.mobile.tizen.colorpicker.less.css \
- ../common/jquery.mobile.tizen.colorpickerbutton.less.css \
- ../common/jquery.mobile.tizen.triangle.less.css \
- ../common/jquery.mobile.tizen.multibuttonentry.less.css \
- ../common/jquery.mobile.tizen.scrollview.handler.less.css \
- ../common/jquery.mobile.tizen.virtualgridview.less.css \
- ../common/jquery.mobile.tizen.multimediaview.less.css
-
-all: prepare css images js
-
-prepare:
- -mkdir -p ${OUTPUT_DIR}
-
-less: prepare
- # Compiling less to css...
- @for f in `find ../common -iname '*.less' | sort`; do \
- if test "config.less" = "$$f" ; then continue; fi; \
- echo " build $$f"; \
- lessc $$f > $$f.css; \
- done;
-
-css: prepare less
- # Creating tizen-gray theme...
- @rm -f $(CSS_OUTPUT)
- @for src in $(CSS_SRCS); do \
- cat $$src >> $(CSS_OUTPUT) ; \
- done
-
-images: prepare
- # Copying tizen-gray theme images...
- @cp -a images/ ${OUTPUT_DIR}/
-
-js: prepare
- @cp -a theme.js ${OUTPUT_DIR}
-
-clean:
- # Cleaning tizen-gray theme...
- -rm -rf $(OUTPUT_DIR)
- -rm -f *.less.css
-
+++ /dev/null
-// Basic color set
-@color_bg: rgb(0, 0, 0); // 0 0 0
-@color_bg_sub: rgb(36, 36, 36); // 36 36 36 // TODO: used only in dialog group. Check more.
-
-@color_border: rgb(42, 42, 42); // 42 42 42
-@color_header: rgb(68, 68, 74); // 68 68 74
-
-@color_text: rgb(249, 249, 249); // 249 249 249
-@color_text_dim: rgb(108, 115, 118); // 108 115 118
-@color_text_focus: @color_text;
-@color_text_sub: rgb(102, 102, 102); // 102 102 102
-@color_text_setting: rgb(42, 109, 140); // 42 109 140
-@color_text_input: rgb(70, 70, 70); // 70 70 70
-@color_text_cursor: @color_text_setting;
-@color_text_segctrl: rgb(158, 195, 213); // 158 195 213 // TODO: used only in segctrl. Check more.
-
-//Dialogue color set
-@color_dialogue_main_text: rgb(249,249,249);
-@color_dialogue_sub_text: rgb(146,146,146);
-
-//Dialogue Editor color set
-@color_dialogue_editor_default_text: rgb(70, 70, 70);
-@color_dialogue_editor_bg: rgb(0, 0, 0);
-@color_dialogue_editor_border: rgba(68, 68, 68, 255);
-
-/*************************
- Vars/Mixins for Widgets
-
- NOTE:
- * Color variables' name: @color_<widget name>_<identifier>
- * Color values: Use rgb() or rgba()
- *************************/
-
-
-/***************************************************************************
- List
-***************************************************************************/
-@color_list_main_text_read: rgba(158, 158, 158, 1);
-@color_list_main_text_unread: rgba(249, 249, 249, 1);
-@color_list_main_text_focus: rgba(249, 249, 249, 1);
-@color_list_sub_text_default: rgba(100, 100, 100, 1);
-@color_list_sub_text_settings: rgba(0, 140, 210, 1);
-@color_list_sub_text_focus: rgba(249, 249, 249, 1);
-@color_list_flexible_text_main: rgba(249, 249, 249, 1);
-@color_list_flexible_text_sub: rgba(149, 149, 149, 1);
-@color_list_index_list: rgba(164, 164, 164, 1);
-@color_list_editfield_text: rgba(70, 70, 70, 1);
-@color_list_editfield_text_cursor: rgba(0, 140, 210, 1);
-@color_list_multiline_text: rgba(149, 149, 149, 1);
-@color_list_3line_main_text: rgba(249, 249, 249, 1);
-@color_list_3line_main_text_read: rgba(249, 249, 249, 1);
-@color_list_3line_main_text_focus: rgba(249, 249, 249, 1);
-@color_list_3line_main_text2: rgba(104, 137, 152, 1);
-@color_list_3line_main_text2_focus: rgba(249, 249, 249, 1);
-@color_list_converter_style: rgba(249, 249, 249, 1);
-@color_list_converter_style_focus: rgba(249, 249, 249, 1);
-@color_list_unread_email: rgba(249, 249, 249, 1);
-@color_list_contents_text: rgba(210, 210, 210, 1);
-@color_list_name_text: rgba(129, 129, 129, 1);
-@color_list_name_text_dim: rgba(0, 140, 210, 1);
-@color_list_colorbar: rgba(80, 107, 207, 1); //Temp, not defined
-@color_list_bubble_box_shadow: rgb(77, 58, 23); // Not defined in GUI guide.
-@color_list_bubble_left_text: rgb(0, 0, 0);
-@color_list_bubble_left_bg: rgb(221, 206, 122); // Not defined in GUI guide. Picked from image.
-@color_list_bubble_right_text: rgb(96, 96, 96);
-@color_list_bubble_right_bg: rgb(194, 209, 218); // Not defined in GUI guide. Picked from image.
-@color_list_bubble_sos_text: rgb(211, 0, 0);
-@color_list_bubble_date_text: rgb(57, 166, 215);
-@color_list_bubble_date_bg: rgb(66, 66, 66);
-@color_list_bubble_time_text: rgb(57, 166, 215);
-@color_list_bubble_link_text: rgb(34, 129, 157);
-@color_list_bubble_failed_text: rgb(211, 0, 0);
-@color_list_bubble_name_text: rgb(57, 166, 215);
-@color_list_bubble_help_text: rgb(146, 146, 146);
-@color_list_divider_bg : rgb(66, 66, 66); /* #424242 */
-@color_list_divider_text : rgb(164, 164, 164); /* #a4a4a4 */
-
-@font_size_list_main_text: 44 * @unit_base; //1.375rem; /* 44 px */
-@font_size_list_sub_text: 32 * @unit_base; //1.0rem; /* 32 px */
-@font_size_list_flexible_text_main: 48 * @unit_base; //1.5rem; /* 48 px */
-@font_size_list_flexible_text_sub: 36 * @unit_base; //1.125rem; /* 36 px */
-@font_size_list_index_list: 32 * @unit_base; //1.0rem; /* 32 px */
-@font_size_list_editfield_text: 44 * @unit_base; //1.375rem; /* 44 px */
-@font_size_list_multiline_text: 32 * @unit_base; //1.0rem; /* 32 px */
-@font_size_list_3line_main_text: 42 * @unit_base; //1.3125rem; /* 42 px */
-@font_size_list_3line_main_text2: 36 * @unit_base; //1.125rem; /* 36 px */
-@font_size_list_converter_style: 40 * @unit_base; //1.3rem; /* 40 px */
-@font_size_list_unread_email: 44 * @unit_base; //1.375rem; /* 44 px */
-@font_size_list_contents_text: 30 * @unit_base; //0.94rem; /* 30 px */
-@font_size_list_name_text: 32 * @unit_base; //1.0rem; /* 32 px */
-
-
-/***************************************************************************
- Shortcut Scroll
-***************************************************************************/
-@color_shortcutscroll_rollover_bg: rgba(68, 68, 68, 0.5); // 00_fast_scroll_rollover_bg.png
-@color_shortcutscroll_rollover_text: rgba(180, 180, 180, 0.6);
-@color_shortcutscroll_popup_bg: rgba(115, 137, 147, 1); // 00_fast_scroll_popup_bg.png
-@color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5);
-@color_shortcutscroll_popup_text: rgb(249, 249, 249);
-
-
-/***************************************************************************
- Popup
-***************************************************************************/
-@color_popup_info_style: rgba(249, 249, 249, 1);
-@color_popup_basic_style_title: rgba(249, 249, 249, 1);
-@color_popup_small_popup_info: rgba(249, 249, 249, 1);
-@color_popup_center_progressbar_title: rgba(153, 153, 153, 1);
-@color_popup_text_progress_title: rgba(249, 249, 249, 1);
-@color_popup_text_background: rgba(33, 60, 73, 1); /* #213c49 */
-@color_popup_button_background: rgba(86, 93, 96, 1); /* #565d60 */
-
-@font_size_popup_info_style: 42 * @unit_base; //1.3125rem; /* 42px */
-@font_size_popup_basic_style_title: 38 * @unit_base; //1.1875rem; /* 38px */
-@font_size_popup_small_popup_info: 32 * @unit_base; //1.0rem; /* 32px */
-@font_size_popup_center_progressbar_title: 26 * @unit_base; //0.8125rem; /* 26px */
-@font_size_popup_text_progress_title: 42 * @unit_base; //1.3125rem; /* 42px */
-@font_size_popup_button_text: 32 * @unit_base; //1.0rem; /* 32px */
-
-
-/***************************************************************************
- Button
-***************************************************************************/
-@color_button_normal: rgb(59, 59, 59);
-@color_button_press: rgb(0, 140, 210);
-@color_button_hover: rgb(69, 69, 69);
-@color_button_text_normal: rgb(249, 249, 249);
-@color_button_text_press: rgb(249, 249, 249);
-
-@color_button_EditText: rgb(207, 41, 41);
-@color_button_EditTextPress: rgb(249, 249, 249);
-@color_button_EditBG: rgb(0, 0, 0);
-@color_button_EditBGPress: rgb(0, 140, 210);
-.LESSbutton_text1_style{
- font-family: @font_family;
- font-weight: normal;
- font-size: 1.0rem;
- font-style:normal;
- color: @color_button_text_normal;
- &:hover {color: @color_button_text_press;}
-}
-
-/***************************************************************************
- Date Time picker color set
-***************************************************************************/
-@color_timepicker_selector_color: rgb(0,140,210);
-
-/***************************************************************************
- Contextual Popup
-***************************************************************************/
-@color_ctxpopup_border_left: rgb(70, 70, 70);
-@color_ctxpopup_border_right: rgb(0, 0, 0);
-@color_ctxpopup_timepicker_text: rgb( 105, 151, 173 );
-@color_ctxpopup_timepicker_text_focus: rgb( 249, 249, 249 );
-
-/***************************************************************************
- DaySelector
-***************************************************************************/
-@color_dayselector_Btn_Sat: rgba(0, 168, 231, 1); /* #00a8e7 */
-@color_dayselector_Btn_Sun: rgba(240, 20, 2, 1); /* #f01402 */
-@color_dayselector_Btn_Mon_to_Fri: rgba(249, 249, 249, 1); /* #f9f9f9 */
-@color_dayselector_Btn_border: rgba(100, 100, 100, 1); /* #646464 */
-@color_dayselector_Btn_normal: rgba(59, 59, 59, 1); /* #3b3b3b */
-@color_dayselector_Btn_press: rgba(0, 140, 210, 1); /* #008cd2 */
-
-
-/***************************************************************************
- OptionHeader
-***************************************************************************/
-@color_optionheader_Background: rgba(72, 72, 72, 1); /* #484848 */
-@color_optionheader_bt: rgba(32, 32, 32, 1); /* #202020 */
-@color_optionheader_bt_press: rgba(35, 132, 182, 1); /* #2384b6 */
-@color_optionheader_tab_text: rgba(249, 249, 249, 1); /* #f9f9f9 */
-
-
-/***************************************************************************
- SearchBar(forms.textinput)
-***************************************************************************/
-@color_searchbar_bg : rgba(36, 36, 36, 1); /* #242424 */
-@color_searchbar_default_text : rgba(130, 130, 130, 1); /* #828282 */
-
-
-/***************************************************************************
- SegmentControl
-***************************************************************************/
-@color_segmentcontrol_btn_normal : rgba(230, 230, 230, 1); /* #e6e6e6 */
-@color_segmentcontrol_btn_press : rgba(61, 61, 61, 1); /* #3d3d3d; */
-@color_segmentcontrol_Seg_text : rgba(144, 144, 144, 1); /* #909090 */
-@color_segmentcontrol_Seg_text_pressed : rgba(0, 0, 0, 1); /* #000000 */
-
-
-/***************************************************************************
- ControlGroup
-***************************************************************************/
-@color_controlgroup_btn_border : rgba(37, 37, 37, 1); /* #252525 */
-
-
-/***************************************************************************
- Header / Footer
- NavigationBar / ControlBar
-***************************************************************************/
-@color_bar_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
-@color_bar_back_btn_press : rgba(10, 140, 210, 1); /* #0a8cd2 */
-@color_bar_btn_press : rgba(10, 140, 210, 1); /* #0a8cd2 */
-@color_bar_btn_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
-
-@color_bar_seg_btn_border : rgba(43, 43, 43, 1); /* #2B2B2B */
-@color_bar_seg_text_press : rgba(0, 0, 0, 1); /* #000000 */
-@color_bar_seg_text_normal : rgba(118, 118, 118, 1); /* #767676 */
-@color_bar_seg_btn_press : rgba(249, 249, 249, 1); /* #F9F9F9 */
-@color_bar_seg_btn_normal : rgba(67, 67, 67, 1); /* #434343 */
-
-@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-@color_bar_title_bg : rgba(108, 108, 108, 1); /* #6c6c6c */
-@color_bar_title_btn_bg : rgba(132, 132, 132, 1); /* #848484 */
-@color_bar_title_btn_border : rgba(76, 76, 76, 1); /* #4C4C4C */
-
-@color_bar_footer_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
-@color_bar_footer_btn_bg : rgba(53, 53, 53, 1); /* #353535 */
-
-@color_controlbar_btn_border : rgba(42, 42, 42, 1); /* #2A2A2A */
-@color_controlbar_tabbbar_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
-@color_controlbar_toolbbar_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
-@color_controlbar_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
-@color_controlbar_btn_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-@color_controlbar_btn_press : rgba(76, 76, 76, 1); /* #4c4c4c */
-
-
-/***************************************************************************
- Tickernoti
-***************************************************************************/
-@color_ticker_bg: rgb(108, 108, 108);
-@color_ticker_text1: rgb(186, 186, 186);
-@color_ticker_text2: rgb(244, 244, 244);
-
-
-/***************************************************************************
- Smallpopup
-***************************************************************************/
-@color_smallpopup_bg: rgb(52, 74, 85);
-@color_smallpopup_text: rgb(249, 249, 249);
-
-
-/***************************************************************************
- No Contents
-***************************************************************************/
-@color_nocontents_text: rgb(81, 78, 76);
-
-
-/***************************************************************************
- Slider
-***************************************************************************/
-@color_slider_handle_text: rgb(42, 109, 140);
-
-
-/***************************************************************************
- Handler
-***************************************************************************/
-@color_scrollview_handler_bg : rgba(255, 255, 255, 0.5);
-
-/***************************************************************************
- multimediaview
-***************************************************************************/
-@color_multimediaview_bg : rgb(0, 0, 0);
-@color_multimediaview_control_bg : rgba(0, 0, 0, 0.5);
-@color_multimediaview_button_bg : rgb(85, 85, 85);
-@color_multimediaview_timestamp_text : rgb(42, 109, 140);
-@color_multimediaview_duration_text : rgb(255, 255, 255);
-@color_multimediaview_bar_gray : rgb(55, 55, 55);
-@color_multimediaview_bar_active : rgb(42, 109, 140);
-@color_multimediaview_bar_handle : rgb(249, 249, 249);
+++ /dev/null
-/****************************
- * Tizen Common Less Header *
- ****************************/
-@import "../common/jquery.mobile.tizen.less";
-@import "color.less";
+++ /dev/null
-(function( $, undefined ) {
-//$.mobile.page.prototype.options.backBtnTheme = "s";
-
-// Clear default theme for child elements
-$.mobile.page.prototype.options.headerTheme = "s";
-$.mobile.page.prototype.options.footerTheme = "s";
-//$.mobile.page.prototype.options.contentTheme = "s";
-
-// clear listview
-$.mobile.listview.prototype.options.theme = "s";
-$.mobile.listview.prototype.options.countTheme = "s";
-$.mobile.listview.prototype.options.headerTheme = "s";
-$.mobile.listview.prototype.options.dividerTheme = "s";
-$.mobile.listview.prototype.options.splitTheme = "s";
-
-//clear button theme
-$.mobile.button.prototype.options.theme = "s";
-
-// Default theme swatch
-$.mobile.page.prototype.options.theme = "s";
-
-})(jQuery);
--- /dev/null
+THEME_NAME=tizen-white
+
+THEME_OUTPUT_ROOT ?= .
+OUTPUT_DIR = ${THEME_OUTPUT_ROOT}/${THEME_NAME}
+
+CSS_OUTPUT = ${OUTPUT_DIR}/tizen-web-ui-fw-theme.css
+
+CSS_SRCS= ../common/jquery.mobile.theme.less.css \
+ ../common/jquery.mobile.core.less.css \
+ ../common/jquery.mobile.transitions.css \
+ ../common/jquery.mobile.grids.css \
+ ../common/jquery.mobile.headerfooter.less.css \
+ ../common/jquery.mobile.navbar.css \
+ ../common/jquery.mobile.button.less.css \
+ ../common/jquery.mobile.collapsible.css \
+ ../common/jquery.mobile.dialog.less.css \
+ ../common/jquery.mobile.forms.checkboxradio.less.css \
+ ../common/jquery.mobile.forms.fieldcontain.css \
+ ../common/jquery.mobile.forms.select.css \
+ ../common/jquery.mobile.forms.textinput.less.css \
+ ../common/jquery.mobile.controlgroup.less.css \
+ ../common/jquery.mobile.listview.less.css \
+ ../common/jquery.mobile.segmentctrl.less.css \
+ ../common/jquery.mobile.tizen.optionheader.less.css \
+ ../common/jquery.mobile.tizen.virtuallistview.less.css \
+ ../common/jquery.mobile.tizen.scrollview.less.css \
+ ../common/jquery.mobile.tizen.hsvpicker.less.css \
+ ../common/jquery.mobile.tizen.colorpalette.less.css \
+ ../common/jquery.mobile.tizen.colortitle.less.css \
+ ../common/jquery.mobile.tizen.datetimepicker.less.css \
+ ../common/jquery.mobile.tizen.popupwindow.less.css \
+ ../common/jquery.mobile.tizen.ctxpopup.less.css \
+ ../common/jquery.mobile.tizen.progressbar.less.css \
+ ../common/jquery.mobile.tizen.progress.less.css \
+ ../common/jquery.mobile.tizen.slider.less.css \
+ ../common/jquery.mobile.tizen.imageslider.less.css \
+ ../common/jquery.mobile.tizen.notification.less.css \
+ ../common/jquery.mobile.tizen.pagecontrol.less.css \
+ ../common/jquery.mobile.tizen.swipelist.less.css \
+ ../common/jquery.mobile.tizen.nocontents.less.css \
+ ../common/jquery.mobile.tizen.shortcutscroll.less.css \
+ ../common/jquery.mobile.tizen.dayselector.less.css \
+ ../common/jquery.mobile.tizen.toggleswitch.less.css \
+ ../common/jquery.mobile.tizen.huegradient.css \
+ ../common/jquery.mobile.tizen.colorpicker.less.css \
+ ../common/jquery.mobile.tizen.colorpickerbutton.less.css \
+ ../common/jquery.mobile.tizen.triangle.less.css \
+ ../common/jquery.mobile.tizen.multibuttonentry.less.css \
+ ../common/jquery.mobile.tizen.scrollview.handler.less.css \
+ ../common/jquery.mobile.tizen.virtualgridview.less.css \
+ ../common/jquery.mobile.tizen.multimediaview.less.css \
+
+
+all: prepare css images js
+
+prepare:
+ -mkdir -p ${OUTPUT_DIR}
+
+less: prepare
+ # Compiling less to css...
+ @for f in `find ../common -iname '*.less' | sort`; do \
+ if test "config.less" = "$$f" ; then continue; fi; \
+ echo " build $$f"; \
+ lessc $$f > $$f.css; \
+ done;
+
+css: prepare less
+ # Creating tizen-gray theme...
+ @rm -f $(CSS_OUTPUT)
+ @for src in $(CSS_SRCS); do \
+ cat $$src >> $(CSS_OUTPUT) ; \
+ done
+
+images: prepare
+ # Copying tizen-gray theme images...
+ @cp -a images/ ${OUTPUT_DIR}/
+
+js: prepare
+ @cp -a theme.js ${OUTPUT_DIR}
+
+clean:
+ # Cleaning tizen-gray theme...
+ -rm -rf $(OUTPUT_DIR)
+ -rm -f *.less.css
+
--- /dev/null
+/****************************
+ * Tizen Common Less Header *
+ ****************************/
+@import "../common/jquery.mobile.tizen.less";
+@import "style.less";
\ No newline at end of file
--- /dev/null
+// Basic color set
+@color_bg: rgb(249, 249, 249); // 249 249 249
+@color_bg_sub: rgb(36, 36, 36); // 36 36 36 // TODO: used only in dialog group. Check more.
+
+@color_border: rgb(42, 42, 42); // 42 42 42
+@color_header: rgb(68, 68, 74); // 68 68 74
+
+@color_scrollbar: rgb(218, 218, 218);
+
+@color_text: rgb(0, 0, 0); // 0 0 0
+@color_text_dim: rgb(108, 115, 118); // 108 115 118
+@color_text_focus: @color_text;
+@color_text_sub: rgb(102, 102, 102); // 102 102 102
+@color_text_setting: rgb(42, 109, 140); // 42 109 140
+@color_text_input: rgb(70, 70, 70); // 70 70 70
+@color_text_cursor: @color_text_setting;
+@color_text_segctrl: rgb(158, 195, 213); // 158 195 213 // TODO: used only in segctrl. Check more.
+
+//Dialogue color set
+@color_dialogue_main_text: rgb(249,249,249);
+@color_dialogue_sub_text: rgb(146,146,146);
+
+//Dialogue Editor color set
+@color_dialogue_editor_default_text: rgb(70, 70, 70);
+@color_dialogue_editor_bg: rgb(0, 0, 0);
+@color_dialogue_editor_border: rgb(108, 168, 199);
+
+/*************************
+ Vars/Mixins for Widgets
+
+ NOTE:
+ * Color variables' name: @color_<widget name>_<identifier>
+ * Color values: Use rgb() or rgba()
+ *************************/
+
+
+/***************************************************************************
+ List
+***************************************************************************/
+@color_list_border_bottom: rgb(169, 169, 169);
+@color_list_main_text_read: rgba(158, 158, 158, 1);
+@color_list_main_text_unread: rgba(249, 249, 249, 1);
+@color_list_main_text_focus: rgba(249, 249, 249, 1);
+@color_list_sub_text_default: rgba(100, 100, 100, 1);
+@color_list_sub_text_settings: rgba(0, 140, 210, 1);
+@color_list_sub_text_focus: rgba(249, 249, 249, 1);
+@color_list_flexible_text_main: rgba(249, 249, 249, 1);
+@color_list_flexible_text_sub: rgba(149, 149, 149, 1);
+@color_list_index_list: rgba(164, 164, 164, 1);
+@color_list_editfield_text: rgba(70, 70, 70, 1);
+@color_list_editfield_text_cursor: rgba(0, 140, 210, 1);
+@color_list_multiline_text: rgba(149, 149, 149, 1);
+@color_list_3line_main_text: rgba(249, 249, 249, 1);
+@color_list_3line_main_text_read: rgba(249, 249, 249, 1);
+@color_list_3line_main_text_focus: rgba(249, 249, 249, 1);
+@color_list_3line_main_text2: rgba(104, 137, 152, 1);
+@color_list_3line_main_text2_focus: rgba(249, 249, 249, 1);
+@color_list_converter_style: rgba(249, 249, 249, 1);
+@color_list_converter_style_focus: rgba(249, 249, 249, 1);
+@color_list_unread_email: rgba(249, 249, 249, 1);
+@color_list_contents_text: rgba(210, 210, 210, 1);
+@color_list_name_text: rgba(129, 129, 129, 1);
+@color_list_name_text_dim: rgba(0, 140, 210, 1);
+@color_list_colorbar: rgba(80, 107, 207, 1); //Temp, not defined
+@color_list_bubble_box_shadow: rgb(78, 78, 78); // Not defined in GUI guide.
+@color_list_bubble_left_text: rgb(0, 0, 0);
+@color_list_bubble_left_bg: rgb(217, 230, 237); // Not defined in GUI guide. Picked from image.
+@color_list_bubble_right_text: rgb(96, 96, 96);
+@color_list_bubble_right_bg: rgb(217, 217, 217); // Not defined in GUI guide. Picked from image.
+@color_list_bubble_sos_text: rgb(211, 0, 0);
+@color_list_bubble_date_text: rgb(128, 128, 128);
+@color_list_bubble_date_bg: rgba(225, 225, 225, 0);
+@color_list_bubble_time_text: rgb(57, 166, 215);
+@color_list_bubble_link_text: rgb(34, 129, 157);
+@color_list_bubble_failed_text: rgb(211, 0, 0);
+@color_list_bubble_name_text: rgb(57, 166, 215);
+@color_list_bubble_help_text: rgb(146, 146, 146);
+@color_list_divider_bg : rgb(209, 227, 238); /* #d1e3ee */
+@color_list_divider_text : rgb(0, 94, 160); /* #005ea0 */
+@color_list_expandable_expanded_bg: rgb(215, 225, 232);
+
+@font_size_list_main_text: 44 * @unit_base; //1.375rem; /* 44 px */
+@font_size_list_sub_text: 32 * @unit_base; //1.0rem; /* 32 px */
+@font_size_list_flexible_text_main: 48 * @unit_base; //1.5rem; /* 48 px */
+@font_size_list_flexible_text_sub: 36 * @unit_base; //1.125rem; /* 36 px */
+@font_size_list_index_list: 32 * @unit_base; //1.0rem; /* 32 px */
+@font_size_list_editfield_text: 44 * @unit_base; //1.375rem; /* 44 px */
+@font_size_list_multiline_text: 32 * @unit_base; //1.0rem; /* 32 px */
+@font_size_list_3line_main_text: 42 * @unit_base; //1.3125rem; /* 42 px */
+@font_size_list_3line_main_text2: 36 * @unit_base; //1.125rem; /* 36 px */
+@font_size_list_converter_style: 40 * @unit_base; //1.3rem; /* 40 px */
+@font_size_list_unread_email: 44 * @unit_base; //1.375rem; /* 44 px */
+@font_size_list_contents_text: 30 * @unit_base; //0.94rem; /* 30 px */
+@font_size_list_name_text: 32 * @unit_base; //1.0rem; /* 32 px */
+
+@style_list_li_dialogue_margin_left: 16 * @unit_base;
+@style_list_li_dialogue_border_left_width: 10 * @unit_base;
+@style_list_bubble_date_height: 40 * @unit_base;
+@style_list_bubble_date_text_align: center;
+
+@color_list_dialogue_bg : rgba(236, 240, 242, 1);
+/***************************************************************************
+ Shortcut Scroll
+***************************************************************************/
+@color_shortcutscroll_rollover_bg: none;
+@color_shortcutscroll_rollover_text: rgba(160, 172, 179, 1);
+@color_shortcutscroll_popup_bg: rgba(229, 229, 229, 1); // 00_fast_scroll_popup_bg.png
+@color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5);
+@color_shortcutscroll_popup_text: rgb(42, 137, 194);
+
+
+/***************************************************************************
+ Popup
+***************************************************************************/
+@color_popup_info_style: rgba(249, 249, 249, 1);
+@color_popup_basic_style_title: rgba(249, 249, 249, 1);
+@color_popup_center_progressbar_title: rgba(153, 153, 153, 1);
+@color_popup_text_progress_title: rgba(249, 249, 249, 1);
+/* TODO : ninepatch popup title */
+@color_popup_title_bg: rgba(80, 147, 182, 255); /* popup_title_bg.png */
+@color_popup_text_bg: rgba(236, 240, 242, 255); /* popup_bg.png */
+@color_popup_button_bg: rgba(209, 221, 228, 255); /* popup_button_bg.png */
+@color_popup_font: white;
+@color_popup_text_font: black;
+
+@color_popup_buttonbg: rgb(84, 126, 153);
+@color_popup_buttonbg_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(84, 126, 153)), to(rgb(69, 105, 128)));
+@color_popup_buttonbg_moz: -moz-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
+@color_popup_buttontext: rgb(249, 249, 249);
+@color_popup_buttonbg_over: rgb(94, 136, 163);
+@color_popup_buttonbg_press: rgb(67, 160, 217);
+@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
+@color_popup_buttonbg_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+
+@font_size_popup_info_style: 42 * @unit_base; //1.3125rem; /* 42px */
+@font_size_popup_basic_style_title: 38 * @unit_base; //1.1875rem; /* 38px */
+@font_size_popup_center_progressbar_title: 26 * @unit_base; //0.8125rem; /* 26px */
+@font_size_popup_text_progress_title: 42 * @unit_base; //1.3125rem; /* 42px */
+@font_size_popup_button_text: 32 * @unit_base; //1.0rem; /* 32px */
+
+.LESSpopup_button_style{
+ background: @color_popup_buttonbg;
+ background: @color_popup_buttonbg_webkit;
+ background: @color_popup_buttonbg_moz;
+ color: @color_popup_buttontext;
+}
+
+.LESSpopup_button_hover_style{
+ background: @color_popup_buttonbg_over;
+}
+
+.LESSpopup_button_press_style{
+ background: @color_popup_buttonbg_press;
+ background: @color_popup_buttonbg_press_webkit;
+ background: @color_popup_buttonbg_press_moz;
+}
+
+/***************************************************************************
+ Button
+***************************************************************************/
+
+@color_button_normal: rgb(151, 161, 167);
+@color_button_normal_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(151, 161, 167)), to(rgb(122, 132, 141)));
+@color_button_normal_moz: -moz-linear-gradient(top, rgb(151, 161, 167), rgb(122, 132, 141));
+
+@color_button_press: rgb(67, 160, 217);
+@color_button_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
+@color_button_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+
+@color_button_hover: rgb(161, 171, 177);
+
+@color_button_text_normal: rgb(249, 249, 249);
+@color_button_text_black: rgb(0, 0, 0);
+@color_button_text_white: rgb(249, 249, 249);
+@color_button_text_press: rgb(249, 249, 249);
+
+@color_circlebutton_hover: rgb(239, 119, 126);
+@color_circlebutton_hover_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(198, 78, 85)), to(rgb(166, 43, 45)));
+@color_circlebutton_hover_moz: -moz-linear-gradient(top, rgb(198, 78, 85), rgb(166,43,45));
+@color_circlebutton_press: rgb(67, 160, 217);
+@color_circlebutton_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
+@color_circlebutton_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+
+@color_button_EditText: rgb(249, 249, 249);
+@color_button_EditTextPress: rgb(249, 249, 249);
+@color_button_EditBG: rgb(0, 0, 0);
+@color_button_EditBGPress: rgb(0, 140, 210);
+
+@color_button_switch_BGon: rgb(42, 126, 172);
+@color_button_switch_BGon_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(33, 116, 167)), to(rgb(75, 165, 219)));
+@color_button_switch_BGon_moz: -moz-linear-gradient(top, rgb(33, 116, 167), rgb(75, 165, 219));
+@color_button_switch_BGoff: rgb(151, 161, 167);
+@color_button_switch_BGoff_text_color: rgb(203, 203, 203);
+@color_button_switch_BGoff_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 114, 114)), to(rgb(141, 141, 141)));
+@color_button_switch_BGoff_moz: -moz-linear-gradient(top, rgb(114, 114, 114), rgb(141, 141, 141));
+@color_button_switch_BGreed: rgb(253, 253, 253);
+@color_button_switch_BGreed_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(253, 253, 253)), to(rgb(231, 231, 231)));
+@color_button_switch_BGreed_moz: -moz-linear-gradient(top, rgb(253, 253, 253), rgb(231, 231, 231));
+
+@radius_button_switch: 4px;
+@radius_button_switch_reed: 2px;
+
+@color_button_edit: rgb(201, 88, 88);
+@color_button_edit_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
+@color_button_edit_moz: -moz_linear-gradient(top, rgb(201, 88, 88), rgb(161, 40, 40));
+
+@color_button_edit_press: rgb(147, 24, 24);
+@color_button_edit_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(147, 24,24)), to(rgb(110, 23, 23)));
+@color_button_edit_press_moz: -moz-linear-gradient(top, rgb(147, 24, 24), rgb(110, 23, 23));
+
+.LESSbutton_up_style{
+ background: @color_button_normal;
+ background: @color_button_normal_webkit;
+ background: @color_button_normal_moz;
+}
+
+.LESSbutton_hover_style{
+ background: @color_button_hover;
+ color: @color_button_text_white;
+}
+
+.LESSbutton_down_style{
+ background: @color_button_press;
+ background: @color_button_press_webkit;
+ background: @color_button_press_moz;
+ color: @color_button_text_white;
+}
+
+.LESSbutton_text1_style{
+ font-family: @font_family;
+ font-weight: normal;
+ font-size: 1.0rem;
+ font-style:normal;
+ color: @color_button_text_black;
+ &:hover {color: @color_button_text_black;}
+}
+
+.LESSbutton_box_style{
+ color: @color_button_text_white;
+ &:hover {color: @color_button_text_white;}
+}
+
+.LESScirclebutton_hover_style{
+ border-width: 0px;
+ background: @color_circlebutton_hover;
+ background: @color_circlebutton_hover_webkit;
+ backgronnd: @color_circlebutton_hover_moz;
+}
+
+.LESScirclebutton_press_style{
+ border-width: 0px;
+ background: @color_circlebutton_press;
+ background: @color_circlebutton_press_webkit;
+ background: @color_circlebutton_press_moz;
+}
+
+.LESStoggleswitch_on_style{
+ background: @color_button_switch_BGon;
+ background: @color_button_switch_BGon_webkit;
+ background: @color_button_switch_BGon_moz;
+ border-radius: @radius_button_switch;
+ -webkit-border-radius: @radius_button_switch;
+ -moz-border-radius: @radius_button_switch;
+}
+
+.LESStoggleswitch_off_style{
+ color: @color_button_switch_BGoff_text_color;
+ background: @color_button_switch_BGoff;
+ background: @color_button_switch_BGoff_webkit;
+ background: @color_button_switch_BGoff_moz;
+ border-radius: @radius_button_switch;
+ -webkit-border-radius: @radius_button_switch;
+ -moz-border-radius: @radius_button_switch;
+}
+
+.LESStoggleswitch_reed_style{
+ background: @color_button_switch_BGreed;
+ background: @color_button_switch_BGreed_webkit;
+ background: @color_button_switch_BGreed_moz;
+ border-radius: @radius_button_switch_reed;
+ -webkit-border-radius: @radius_button_switch_reed;
+ -moz-border-radius: @radius_button_switch_reed;
+}
+
+.LESSbutton_edit_style{
+ background: @color_button_edit;
+ background: @color_button_edit_webkit;
+ background: @color_button_edit_moz;
+ font-weight:bold;
+ color: rgb(249, 249, 249);
+}
+
+.LESSbutton_editpress_style{
+ background: @color_button_edit_press;
+ background: @color_button_edit_press_webkit;
+ background: @color_button_edit_press_moz;
+}
+
+.LESSbutton_edit_padding{
+ padding: 0.5em 0.8em;
+}
+
+/***************************************************************************
+ Date Time picker color set
+***************************************************************************/
+@color_timepicker_selector_color: rgb(42,137,194);
+
+/***************************************************************************
+ Contextual Popup
+***************************************************************************/
+@color_ctxpopup_text: rgb(19, 58, 83);
+@color_ctxpopup_background: rgb(219, 229, 239);
+@color_ctxpopup_border_left: rgb(225, 235, 241);
+@color_ctxpopup_border_right: rgb(174, 184, 190);
+@color_ctxpopup_border_bottom: rgb(153, 176, 195);
+@color_ctxpopup_timepicker_text: rgb( 105, 151, 173 );
+@color_ctxpopup_timepicker_text_focus: rgb( 249, 249, 249 );
+
+/***************************************************************************
+ DaySelector
+***************************************************************************/
+@color_dayselector_Btn_Sat: rgba(0, 168, 231, 1); /* #00a8e7 */
+@color_dayselector_Btn_Sun: rgba(240, 20, 2, 1); /* #f01402 */
+@color_dayselector_Btn_Mon_to_Fri: rgba(249, 249, 249, 1); /* #f9f9f9 */
+@color_dayselector_Btn_border: rgba(26, 82, 116, 1); /* #f9f9f9 */
+@color_dayselector_Btn_normal: -webkit-linear-gradient(top, rgb(125,157,178) 0%,rgb(84,121,144) 100%);
+@color_dayselector_Btn_press: -webkit-linear-gradient(top, rgb(59,119,150) 0%,rgb(47,91,117) 100%);
+
+
+/***************************************************************************
+ OptionHeader
+***************************************************************************/
+@color_optionheader_Background: rgba(26, 82, 116, 1);
+@color_optionheader_bt: -webkit-linear-gradient(top, rgb(56,112,141) 0%,rgb(36,93,128) 100%);
+@color_optionheader_bt_press: -webkit-linear-gradient(top, rgb(74,164,218) 0%,rgb(43,138,195) 100%);
+@color_optionheader_tab_text: rgba(249, 249, 249, 1); /* #f9f9f9 */
+
+
+/***************************************************************************
+ SearchBar(forms.textinput)
+***************************************************************************/
+@color_searchbar_bg : rgba(215, 225, 232, 1); /* #242424 */
+@color_searchbar_default_text : rgba(121, 131, 138, 1); /* #828282 */
+@color_searchbar_input_field_bg : rgba(249, 249, 249, 1); /* #F9F9F9*/
+
+
+/***************************************************************************
+ SegmentControl
+***************************************************************************/
+@color_segmentcontrol_btn_normal : -webkit-linear-gradient(top, rgb(125,157,178) 0%,rgb(84,121,144) 100%);
+@color_segmentcontrol_btn_press : -webkit-linear-gradient(top, rgb(59,119,150) 0%,rgb(47,91,117) 100%);
+@color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
+@color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
+
+
+/***************************************************************************
+ ControlGroup
+***************************************************************************/
+@color_controlgroup_btn_border : rgba(26, 82, 116, 1); /* #252525 */
+
+
+/***************************************************************************
+ Header / Footer
+ NavigationBar / ControlBar
+***************************************************************************/
+@color_bar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
+@color_bar_btn_press : -webkit-linear-gradient(top, rgb(74,164,218) 0%,rgb(43,138,195) 100%);
+@color_bar_btn_bg : transparent;
+@color_bar_back_btn_bg : transparent;
+
+@color_bar_seg_btn_border : rgba(0, 0, 0, 0.1);
+@color_bar_seg_text_press : rgba(249, 249, 249, 1);
+@color_bar_seg_text_normal : rgba(249, 249, 249, 1);
+@color_bar_seg_btn_press : -webkit-linear-gradient(top, rgb(61,120,151) 0%,rgb(48,91,118) 100%);
+@color_bar_seg_btn_normal : -webkit-linear-gradient(top, rgb(127,159,181) 0%,rgb(70,108,133) 100%);
+
+@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
+@color_bar_title_bg : -webkit-linear-gradient(top, rgb(90,153,186) 0%,rgb(32,84,115) 100%);
+@color_bar_title_btn_bg : -webkit-linear-gradient(top, rgb(80,149,185) 10%,rgb(43,107,147) 90%);
+@color_bar_title_btn_border : rgba(0, 0, 0, 0.1);
+
+@color_bar_footer_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_bar_footer_btn_bg : transparent;
+
+@color_controlbar_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */
+@color_controlbar_tabbbar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_controlbar_toolbbar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_controlbar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_controlbar_btn_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
+@color_controlbar_btn_press : -webkit-linear-gradient(top, rgb(61,121,150) 0%,rgb(48,91,118) 100%);
+
+@color_border_top : rgba(255, 255, 255, 0.5);
+@color_border_bottom : rgba(0, 0, 0, 0.5);
+
+/***************************************************************************
+ Tickernoti
+***************************************************************************/
+@color_ticker_bg: rgb(35, 90, 123);
+@color_ticker_text1: rgb(249, 249, 249);
+@color_ticker_text2: rgb(142, 170, 186);
+
+
+/***************************************************************************
+ Smallpopup
+***************************************************************************/
+@color_smallpopup_bg: rgb(215, 225, 232);
+@color_smallpopup_text: rgb(77, 77, 77);
+
+
+/***************************************************************************
+ No Contents
+***************************************************************************/
+@color_nocontents_text: rgb(154, 145, 154);
+
+
+/***************************************************************************
+ Slider
+***************************************************************************/
+@color_slider_handle_text: rgb(42, 137, 194);
+@color_slider_popup_text: rgb(249, 249, 249);
+
+
+/***************************************************************************
+ Progress
+***************************************************************************/
+@color_progress_bar0: rgb(178, 178, 178);
+@color_progress_bar1: rgb(42, 137, 194);
+
+
+/***************************************************************************
+ Handler
+***************************************************************************/
+@color_scrollview_handler_bg : rgba(150, 150, 150, 0.5);
+
+/***************************************************************************
+ multimediaview
+***************************************************************************/
+@color_multimediaview_bg : rgb(249, 249, 249);
+@color_multimediaview_control_bg : rgba(249, 249, 249, 0.5);
+@color_multimediaview_button_bg : rgb(249, 249, 249);
+@color_multimediaview_timestamp_text : rgb(42, 137, 194);
+@color_multimediaview_duration_text : rgb(128, 128, 128);
+@color_multimediaview_bar_gray : rgb(178, 178, 178);
+@color_multimediaview_bar_active : rgb(42, 137, 194);
+@color_multimediaview_bar_handle : rgb(249, 249, 249);
+
+/***************************************************************************
+ Color widgets
+***************************************************************************/
+@color_widgets_title_bg: rgb(235, 239, 241);
+@color_widgets_basic_border: rgb(192, 192, 192);
+@color_widgets_left_border: rgb(108, 168, 199);
+
+.LESScolortitle_background_style{
+ background-color: @color_widgets_title_bg;
+ border: 1px solid;
+ border-color: @color_widgets_basic_border;
+ border-left: 6px solid;
+ border-left-color: @color_widgets_left_border;
+}
+
+.LESShsvpicker_background_style{
+ background-color: @color_widgets_title_bg;
+ border: 1px solid;
+ border-color: @color_widgets_basic_border;
+ border-left: 6px solid;
+ border-left-color: @color_widgets_left_border;
+}
+
+.LESSpalette_background_style{
+ background-color: @color_widgets_title_bg;
+ border: 1px solid;
+ border-top: 6px solid;
+ border-color: @color_widgets_basic_border;
+}
+
+
+/***************************************************************************
+ multibutton entry
+***************************************************************************/
+@color_multibuttonentry_bg : rgb(249, 249, 249);
+@color_multibuttonentry_block_text : rgb(255, 255, 255);
+@color_multibuttonentry_block_bg : rgb(60, 100, 155);
+@color_multibuttonentry_block_border : rgb(85, 131, 174);
+@color_multibuttonentry_press_bg : rgb(41, 137, 194);
+@color_multibuttonentry_press_border : rgb(93, 187, 244);
+@color_multibuttonentry_input_text : #222222;
+@color_multibuttonentry_link : rgb(100, 100, 100);
+
+
+/***************************************************************************
+****************************************************************************
+ Layout ( position, padding, margin etc...)
+****************************************************************************
+***************************************************************************/
+@style-title-font-size : 52 * @unit_base;
+
+@style-corner-radius : .3em;
+@style-title-extended-2btn-width : 688 * @unit_base;
+@style-title-extended-2btn-radio-width : 343 * @unit_base;
+@style-title-extended-3btn-width : 688 * @unit_base;
+@style-title-extended-3btn-radio-width : 229 * @unit_base;
+@style-title-extended-4btn-width : 688 * @unit_base;
+@style-title-extended-4btn-radio-width : 171 * @unit_base;
+
+@style-back-btn-left : 44 * @unit_base;
+@style-back-btn-arrow-top : 5 * @unit_base;
+
+@style-title-min-height : 62 * @unit_base;
+@style-title-extended-margin : -30 * @unit_base;
+/***************************************************************************
+ Navigation
+***************************************************************************/
+
+.LESStitle-diff-style {
+ text-align: left;
+ margin: 19*@unit_base 135*@unit_base 19*@unit_base 16*@unit_base;
+}
+
+.LESStitle-border {
+ border-style: solid;
+ border-width : 1px;
+ border-bottom-color: @color_border_bottom;
+ border-bottom-width: 2px;
+ border-top-color: @color_border_top;
+
+ border-left-color : @color_bar_title_btn_border;
+ border-right-color : @color_bar_title_btn_border;
+
+ font-weight : bold;
+
+ -webkit-border-radius: 0px;
+}
+
+.LESSextended-controlgroup-border {
+ border-style : solid;
+ border-width : 1px;
+ border-bottom-width: 2px;
+
+ border-bottom-color: @color_border_bottom;
+ border-top-color: @color_border_top;
+ border-left-color: @color_bar_seg_btn_border;
+ border-right-color: @color_bar_seg_btn_border;
+}
+
+.LESSback-btn-background {
+ background : none;
+}
+
+.LESSbtn-back {
+ width : 144 * @unit_base;
+ height : 114 * @unit_base;
+ top : 0 * @unit_base;
+ right : 0 * @unit_base;
+}
+
+.LESSbtn-back-inner {
+ width : 144 * @unit_base;
+ height : 114 * @unit_base;
+}
+
+.LESSbtn-arrow-position {
+ left : 20 * @unit_base;
+ top : 30 * @unit_base;
+}
+
+.LESSdialogue-border-style {
+ border-right-style : solid;
+ border-right-color : black;
+ border-right-width : 1px;
+}
+
+.LESSdialogue-divider {
+ padding-top : 36 * @unit_base;
+ padding-bottom : 10 * @unit_base;
+ padding-left : 10 * @unit_base;
+
+ margin-left : 16 * @unit_base;
+ margin-right : 16 * @unit_base;
+
+ background : rgba(249, 249, 249, 1);
+ font-size : 32 * @unit_base;
+ font-weight : bold;
+ color : rgba(92, 151, 187, 1);
+}
--- /dev/null
+(function( $, undefined ) {
+//$.mobile.page.prototype.options.backBtnTheme = "s";
+
+// Clear default theme for child elements
+$.mobile.page.prototype.options.headerTheme = "s";
+$.mobile.page.prototype.options.footerTheme = "s";
+//$.mobile.page.prototype.options.contentTheme = "s";
+
+// clear listview
+$.mobile.listview.prototype.options.theme = "s";
+$.mobile.listview.prototype.options.countTheme = "s";
+$.mobile.listview.prototype.options.headerTheme = "s";
+$.mobile.listview.prototype.options.dividerTheme = "s";
+$.mobile.listview.prototype.options.splitTheme = "s";
+
+//clear button theme
+$.mobile.button.prototype.options.theme = "s";
+$.fn.buttonMarkup.defaults.theme = "s";
+
+// Default theme swatch
+$.mobile.page.prototype.options.theme = "s";
+
+// Default font size for this theme
+$.tizen.frameworkData.defaultFontSize = 36;
+
+})(jQuery);
--- /dev/null
+(function( $, undefined ) {
+
+ $.widget( "mobile.barlayout", $.mobile.widget, {
+ options: {
+ addBackBtn: false ,
+ backBtnText: "Back",
+
+ initSelector: ":jqmData(role='header'), :jqmData(role='footer')"
+ },
+ _create: function() {
+ var self = this;
+
+ /* this call api will be moved to jquery.mobile.page.section.js patch */
+ /* call _generateFooter in header(just 1 time in first step) because to calculate another layout width footer/header */
+ /* skip below step to attach bind/addclass only 1 time */
+ self._generateFooter();
+ self._addBackbutton();
+ self._disableSelection();
+ self._disableContext();
+ },
+
+ /* Make dummy footer
+ * because minimum fixed bar needs to attach back button
+ * check footer exist on current page, then check footer-Exist option check */
+ _generateFooter: function(){
+ var self = this,
+ $el = self.element,
+ $elPage = $el.closest( ".ui-page" ),
+ dummyFooter;
+
+ if ( $elPage.children(":jqmData(role='footer')").length == 0 && $elPage.data().page.options.footerExist != false ) {
+ dummyFooter = $( "<div data-role='footer' class='ui-footer ui-bar-s ui-footer-fixed fade ui-fixed-overlay' data-position='fixed'></div>" )
+ .insertAfter( $elPage.find( ".ui-content" ) );
+ }
+ },
+
+ _addBackbutton: function( target, status ) {
+ // need to add parameter target wherels this requert occurs header/footer
+ var self = this,
+ $el = self.element,
+ $elHeader = $( this.element ).jqmData( "role" )=="header" ? self.element : $el.siblings( ":jqmData(role='header')" ),
+ $elFooter = $( this.element ).jqmData( "role" )=="footer" ? self.element : $el.siblings( ":jqmData(role='footer')" ),
+ $elPage = $el.closest( ".ui-page" ),
+ backBtn,
+ attachElement = $elFooter,
+ o = $elPage.data( "page" ).options;
+
+ /* Back button skip case :
+ * 1. tabbar
+ * 2. footer does not exit
+ * 3. user define data-add-Back-Btn = "false"
+ */
+ if ( status != "external" ) {
+ if ( $elFooter.children( ":jqmData(role='controlbar')" ).jqmData( "style" ) == "tabbar" || $elPage.data().page.options.footerExist == false || $elPage.data().page.options.addBackBtn == "none" ) {
+ return true;
+ }
+ }
+
+ $elPage.data().page.options.addBackBtn == "header"? attachElement = $elHeader : attachElement = $elFooter;
+
+ backBtn = $( "<a href='#' class='ui-btn-back' data-"+ $.mobile.ns +"rel='back'></a>" )
+ .buttonMarkup( {icon: "header-back-btn", theme : "s"} );
+
+ if ( status == "external" ) {
+ if ( $el.is(".ui-page") ) {
+ $elHeader = $el.find( ":jqmData(role='header')" );
+ $elFooter = $el.find( ":jqmData(role='footer')" );
+ target == "header" ? attachElement = $elHeader : attachElement = $elFooter;
+ } else {
+ attachElement = $el;
+ }
+ if ( attachElement.find(".ui-btn-back").length == 0 ) {
+ backBtn.prependTo( attachElement );
+ }
+ }
+
+ if ( $elPage.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) ) {
+ if ( attachElement.find(".ui-btn-back").length == 0) {
+ backBtn.prependTo( attachElement );
+ }
+ }
+
+/* jQM 1.1.0 do not need this code
+* navigation.js control whote back button */
+/* backBtn.bind( "vclick", function( event ) {
+ window.history.back();
+ });*/
+ },
+
+ _disableSelection : function() {
+ var self = this,
+ $el = self.element,
+ $elHeader = $( this.element ).jqmData( "role" )=="header" ? self.element : $el.siblings( ":jqmData(role='header')" ),
+ $elFooter = $( this.element ).jqmData( "role" )=="footer" ? self.element : $el.siblings( ":jqmData(role='footer')" );
+
+ $.mobile.tizen.disableSelection( $elHeader );
+ $.mobile.tizen.disableSelection( $elFooter );
+ },
+
+ _disableContext : function() {
+ var self = this,
+ $el = self.element,
+ $elHeader = $( this.element ).jqmData( "role" )=="header" ? self.element : $el.siblings( ":jqmData(role='header')" ),
+ $elFooter = $( this.element ).jqmData( "role" )=="footer" ? self.element : $el.siblings( ":jqmData(role='footer')" );
+
+ $.mobile.tizen.disableContextMenu( $elHeader );
+ $.mobile.tizen.disableContextMenu( $elFooter );
+ },
+
+ addBackBtn : function(target) {
+ this._addBackbutton( target, "external" );
+ },
+
+
+ show: function(){
+ var self = $( this.element );
+ self.show();
+ self.siblings( ".ui-content" ).pagelayout( "updatePageLayout" );
+ },
+
+ hide: function(){
+ var self = $( this.element );
+ self.hide();
+ self.siblings( ".ui-content" ).pagelayout( "updatePageLayout" );
+ },
+
+ });
+ $( document ).bind("pagecreate", function( e ){
+ $.mobile.barlayout.prototype.enhanceWithin( e.target );
+ });
+})( jQuery );
},
_create: function () {
- this._$clip = $( this.element).addClass( "ui-scrollview-clip" );
- var $child = this._$clip.children(),
- self;
- //if ( $child.length > 1 ) {
- $child = this._$clip.wrapInner( "<div></div>" ).children();
- //}
- this._$view = $child.addClass( "ui-scrollview-view" );
- this._$list = $child.children();
+ var self = this;
+
+ this._items = $( this.element ).jqmData('list');
+ this._$clip = $( this.element ).addClass( "ui-scrollview-clip" );
+ this._$clip.wrapInner( '<div class="ui-scrollview-view"></div>' );
+ this._$view = $('.ui-scrollview-view', this._$clip );
+ this._$list = $( 'ul', this._$clip );
this._$clip.css( "overflow", "hidden" );
this._makePositioned( this._$clip );
this._timerInterval = 1000 / this.options.fps;
this._timerID = 0;
- self = this;
this._timerCB = function () { self._handleMomentumScroll(); };
this.refresh();
this._addBehaviors();
},
+ reflow: function () {
+ var xy = this.getScrollPosition();
+ this.refresh();
+ this.scrollTo( xy.x, xy.y );
+ },
+
refresh: function () {
var itemsPerView;
- this._viewWidth = this._$view.width();
- this._clipWidth = $( window ).width();
- this._itemWidth = this._$list.children().first().outerWidth();
- this._$items = this._$list.children().detach();
+ this._$clip.width( $(window).width() );
+ this._clipWidth = this._$clip.width();
+ this._$list.empty();
+ this._$list.append(this._items[0]);
+ this._itemWidth = $(this._items[0]).outerWidth();
+ $(this._items[0]).detach();
+
itemsPerView = this._clipWidth / this._itemWidth;
itemsPerView = Math.ceil( itemsPerView * 10 ) / 10;
this._itemsPerView = parseInt( itemsPerView, 10 );
-
+ while ( this._itemsPerView + 1 > this._items.length ) {
+ $.merge( this._items, $(this._items).clone() );
+ }
this._rx = -this._itemWidth;
this._sx = -this._itemWidth;
this._setItems();
$item;
for ( i = -1; i < this._itemsPerView + 1; i++ ) {
- $item = this._$items[ circularNum( i, this._$items.length ) ];
+ $item = this._items[ circularNum( i, this._items.length ) ];
this._$list.append( $item );
}
setElementTransform( this._$view, this._sx + "px", 0 );
for ( i = 0; i < di; i++ ) {
this._$list.children().last().detach();
idx = -parseInt( ( sx / this._itemWidth ) + i + 3, 10 );
- $item = this._$items[ circularNum( idx, this._$items.length ) ];
+ $item = this._items[ circularNum( idx, this._items.length ) ];
this._$list.prepend( $item );
//console.log( "di > 0 : " + idx );
}
for ( i = 0; i > di; i-- ) {
this._$list.children().first().detach();
idx = this._itemsPerView - parseInt( ( sx / this._itemWidth ) + i, 10 );
- $item = this._$items[ circularNum( idx, this._$items.length ) ];
+ $item = this._items[ circularNum( idx, this._items.length ) ];
this._$list.append( $item );
//console.log( "di < 0 : " + idx );
}
return svh;
},
- centerTo: function ( selector ) {
+ centerTo: function ( selector, duration ) {
var i,
newX;
- for ( i = 0; i < this._$items.length; i++ ) {
- if ( $( this._$items[i]).is( selector ) ) {
- newX = -( i * this._itemWidth - this._clipWidth / 2 + this._itemWidth * 2 );
- this.scrollTo( newX, 0 );
- console.log( i + "," + newX );
+ for ( i = 0; i < this._items.length; i++ ) {
+ if ( $( this._items[i]).is( selector ) ) {
+ newX = -( i * this._itemWidth - this._clipWidth / 2 + this._itemWidth * 1.5 );
+ this.scrollTo( newX + this._clipWidth * 2, 0 );
+ this.scrollTo( newX, 0, duration );
return;
}
}
return;
}
- x = -x;
- y = -y;
-
var self = this,
start = getCurrentTime(),
efunc = $.easing.easeOutQuad,
elapsed,
ec;
+ this._rx = x;
+
tfunc = function () {
elapsed = getCurrentTime() - start;
if ( elapsed >= duration ) {
},
hideInput: true,
closeText: "Close",
- initSelector: "input[type='color'], :jqmData(type='color'), :jqmData(role='colorpickerbutton')"
+ initSelector: ":jqmData(type='color'), :jqmData(role='colorpickerbutton')"
},
_htmlProto: {
.colorpickerbutton();
} );
-}( jQuery ) );
\ No newline at end of file
+}( jQuery ) );
-/*!
+/*
* jQuery Mobile Widget @VERSION
*
* TODO: remove unnecessary codes....
},
disableSelection: function (element) {
- return $(element).each(function () {
- jQuery(element).css('-webkit-user-select', 'none');
- });
+ var self = this;
+ return self.enableSelection( element, 'none' );
},
enableSelection: function (element, value) {
- return $(element).each(function () {
- val = value == "text" ? val = 'text' : val = 'auto';
- jQuery(element).css('-webkit-user-select', val);
- });
+ return $(element).each( function () {
+ switch( value ) {
+ case 'text' :
+ case 'auto' :
+ case 'none' :
+ val = value;
+ break;
+
+ default :
+ val = 'auto';
+ break;
+ }
+ $(this).css( {
+ 'user-select': val,
+ '-moz-user-select': val,
+ '-webkit-user-select': val,
+ '-o-user-select': val,
+ '-ms-transform': val
+ } );
+ } );
+ },
+
+ disableContextMenu: function(element) {
+ $(element).each( function() {
+ $(this).bind("contextmenu", function( event ) {
+ return false;
+ } );
+ } );
+ },
+
+ enableContextMenu: function(element) {
+ $(element).each( function() {
+ $(this).unbind( "contextmenu" );
+ } );
},
// Set the height of the content area to fill the space between a
(function ( $, window, document, undefined ) {
- function setElementTransform( $ele, x, y, duration ) {
- var v = "translate(" + x + "," + y + ")",
- transition;
-
- if ( !duration || duration === undefined ) {
- transition = "none";
- } else {
- transition = "-webkit-transform " + duration / 1000 + "s";
- }
+ function resizePageContentHeight( page ) {
+ var $page = $( page ),
+ $content = $page.children(".ui-content"),
+ hh = $page.children(".ui-header").outerHeight() || 0,
+ fh = $page.children(".ui-footer").outerHeight() || 0,
+ pt = parseFloat( $content.css("padding-top") ),
+ pb = parseFloat( $content.css("padding-bottom") ),
+ wh = $( window ).height();
- $ele.css({
- "-moz-transform": v,
- "-webkit-transform": v,
- "-ms-transform": v,
- "-o-transform": v,
- "transform": v,
- "-webkit-transition": transition
- });
+ $content.height( wh - (hh + fh) - (pt + pb) );
}
function MomentumTracker( options ) {
overshootDuration: 250, // Duration of the overshoot animation in msecs.
snapbackDuration: 500, // Duration of the snapback animation in msecs.
- moveThreshold: 50, // User must move this many pixels in any direction to trigger a scroll.
+ moveThreshold: 30, // User must move this many pixels in any direction to trigger a scroll.
moveIntervalThreshold: 150, // Time between mousemoves must not exceed this threshold.
- scrollMethod: "translate", // "translate", "position", "scroll"
+ scrollMethod: "translate", // "translate", "position"
startEventName: "scrollstart",
updateEventName: "scrollupdate",
stopEventName: "scrollstop",
eventType: $.support.touch ? "touch" : "mouse",
showScrollBars: true,
-
- pagingEnabled: false,
overshootEnable: false,
-
- delayedClickSelector: "a,input,textarea,select,button,.ui-btn"
},
_makePositioned: function ( $ele ) {
_create: function () {
var $page = $('.ui-page'),
- $child,
direction,
self = this;
this._$clip = $( this.element ).addClass("ui-scrollview-clip");
-
- $child = this._$clip.wrapInner("<div></div>").children();
-
- this._$view = $child.addClass("ui-scrollview-view");
+ this._$view = this._$clip.wrapInner("<div></div>").children()
+ .addClass("ui-scrollview-view");
if ( this.options.scrollMethod === "translate" ) {
if ( this._$view.css("transform") === undefined ) {
}
}
- this._$clip.css( "overflow",
- this.options.scrollMethod === "scroll" ? "scroll" : "hidden" );
-
+ this._$clip.css( "overflow", "hidden" );
this._makePositioned( this._$clip );
- /*
- * Turn off our faux scrollbars if we are using native scrolling
- * to position the view.
- */
- if ( this.options.scrollMethod === "scroll" ) {
- this.options.showScrollBars = false;
- }
-
- /*
- * We really don't need this if we are using a translate transformation
- * for scrolling. We set it just in case the user wants to switch methods
- * on the fly.
- */
this._makePositioned( this._$view );
- this._$view.css({ left: 0, top: 0 });
+ this._$view.css( { left: 0, top: 0 } );
+ this._view_height = this._$view.height();
this._sx = 0;
this._sy = 0;
self._handleMomentumScroll();
};
- this._addBehaviors();
+ this._add_event();
+ this._add_scrollbar();
},
_startMScroll: function ( speedX, speedY ) {
- this._stopMScroll();
- this._showScrollBars();
-
var keepGoing = false,
duration = this.options.scrollDuration,
ht = this._hTracker,
c,
v;
+ this._stopMScroll();
+ this._showScrollBars();
+
this._$clip.trigger( this.options.startEventName );
- $( document ).trigger("scrollview_scroll");
if ( ht ) {
c = this._$clip.width();
v = this._$view.width();
+
ht.start( this._sx, speedX,
duration, (v > c) ? -(v - c) : 0, 0 );
keepGoing = !ht.done();
_handleMomentumScroll: function () {
var keepGoing = false,
- v = this._$view,
x = 0,
y = 0,
vt = this._vTracker,
ht = this._hTracker;
+ if ( this._outerScrolling ) {
+ return;
+ }
+
if ( vt ) {
vt.update( this.options.overshootEnable );
y = vt.getPosition();
}
},
+ _setElementTransform: function ( $ele, x, y, duration ) {
+ var translate,
+ transition;
+
+ if ( !duration || duration === undefined ) {
+ transition = "none";
+ } else {
+ transition = "-webkit-transform " + duration / 1000 + "s";
+ }
+
+ if ( $.support.cssTransform3d ) {
+ translate = "translate3d(" + x + "," + y + ", 0px)";
+ } else {
+ translate = "translate(" + x + "," + y + ")";
+ }
+
+ $ele.css({
+ "-moz-transform": translate,
+ "-webkit-transform": translate,
+ "-ms-transform": translate,
+ "-o-transform": translate,
+ "transform": translate,
+ "-webkit-transition": transition
+ });
+ },
+
_setCalibration: function ( x, y ) {
if ( this.options.overshootEnable ) {
this._sx = x;
return;
}
- var v = this._$view,
- c = this._$clip,
+ var $v = this._$view,
+ $c = this._$clip,
dirLock = this._directionLock,
- scroll_height = 0;
+ scroll_height = 0,
+ scroll_width = 0;
if ( dirLock !== "y" && this._hTracker ) {
- this._sx = x;
+ scroll_width = $v.width() - $c.width();
+
+ if ( x >= 0 ) {
+ this._sx = 0;
+ } else if ( x < -scroll_width ) {
+ this._sx = -scroll_width;
+ } else {
+ this._sx = x;
+ }
+
+ if ( scroll_width < 0 ) {
+ this._sx = 0;
+ }
}
if ( dirLock !== "x" && this._vTracker ) {
- scroll_height = v.height() - c.height() +
- parseFloat( c.css("padding-top") ) +
- parseFloat( c.css("padding-bottom") );
+ scroll_height = $v.height() - $c.height() +
+ parseFloat( $c.css("padding-top") ) +
+ parseFloat( $c.css("padding-bottom") );
+
+ this._outerScroll( y, scroll_height );
if ( y >= 0 ) {
this._sy = 0;
},
_setScrollPosition: function ( x, y, duration ) {
- this._setCalibration( x, y );
-
- x = this._sx;
- y = this._sy;
-
var $v = this._$view,
sm = this.options.scrollMethod,
$vsb = this._$vScrollBar,
$hsb = this._$hScrollBar,
$sbt;
- switch ( sm ) {
- case "translate":
- setElementTransform( $v, x + "px", y + "px", duration );
- break;
+ this._setCalibration( x, y );
- case "position":
- $v.css({left: x + "px", top: y + "px"});
- break;
+ if ( this._outerScrolling ) {
+ return;
+ }
- case "scroll":
- this._$clip[0].scrollLeft = -x;
- this._$clip[0].scrollTop = -y;
- break;
+ x = this._sx;
+ y = this._sy;
+
+ if ( sm === "translate" ) {
+ this._setElementTransform( $v, x + "px", y + "px", duration );
+ } else {
+ $v.css( {left: x + "px", top: y + "px"} );
}
if ( $vsb ) {
$sbt = $vsb.find(".ui-scrollbar-thumb");
if ( sm === "translate" ) {
- setElementTransform( $sbt, "0px",
+ this._setElementTransform( $sbt, "0px",
-y / $v.height() * $sbt.parent().height() + "px",
duration );
} else {
$sbt = $hsb.find(".ui-scrollbar-thumb");
if ( sm === "translate" ) {
- setElementTransform( $sbt,
+ this._setElementTransform( $sbt,
-x / $v.width() * $sbt.parent().width() + "px", "0px",
duration);
} else {
}
},
- scrollTo: function ( x, y, duration ) {
- this._stopMScroll();
+ _outerScroll: function ( y, scroll_height ) {
+ var self = this,
+ top = $( window ).scrollTop(),
+ sy = 0,
+ duration = this.options.snapbackDuration,
+ start = getCurrentTime(),
+ tfunc;
- /*
- * currently support only animation for translate
- * Don't want to use setTimeout algorithm for animation.
- */
- if ( !duration || (duration && this.options.scrollMethod === "translate") ) {
- return this._setScrollPosition( x, y, duration );
+ if ( this._$clip.jqmData("scroll") !== "y" ) {
+ return;
}
- // follow jqm default animation when the scrollmethod is not translate.
+ if ( this._outerScrolling ) {
+ return;
+ }
- x = -x;
- y = -y;
+ if ( y >= 0 ) {
+ sy = -y;
+ } else if ( y < -scroll_height ) {
+ sy = -y - scroll_height;
+ } else {
+ return;
+ }
+
+ sy *= 10;
+
+ tfunc = function () {
+ var elapsed = getCurrentTime() - start;
+
+ if ( elapsed >= duration ) {
+ window.scrollTo( 0, top + sy );
+ self._outerScrolling = undefined;
+ } else {
+ ec = $.easing.easeOutQuad( elapsed / duration, elapsed, 0, 1, duration );
+
+ window.scrollTo( 0, top + ( sy * ec ) );
+ self._outerScrolling = setTimeout( tfunc, self._timerInterval );
+ }
+ };
+ this._outerScrolling = setTimeout( tfunc, self._timerInterval );
+
+ /* skip the srollview dragging */
+ this._skip_dragging = true;
+ },
+ _scrollTo: function ( x, y, duration ) {
var self = this,
start = getCurrentTime(),
efunc = $.easing.easeOutQuad,
dy = y - sy,
tfunc;
+ x = -x;
+ y = -y;
+
tfunc = function () {
var elapsed = getCurrentTime() - start,
ec;
} else {
ec = efunc( elapsed / duration, elapsed, 0, 1, duration );
- self._setScrollPosition( sx + (dx * ec), sy + (dy * ec) );
+ self._setScrollPosition( sx + ( dx * ec ), sy + ( dy * ec ) );
self._timerID = setTimeout( tfunc, self._timerInterval );
}
};
this._timerID = setTimeout( tfunc, this._timerInterval );
},
+ scrollTo: function ( x, y, duration ) {
+ this._stopMScroll();
+
+ if ( !duration || this.options.scrollMethod === "translate" ) {
+ this._setScrollPosition( x, y, duration );
+ } else {
+ this._scrollTo( x, y, duration );
+ }
+ },
+
getScrollPosition: function () {
return { x: -this._sx, y: -this._sy };
},
var svh = [],
d;
- this._$clip.parents(".ui-scrollview-clip").each(function () {
+ this._$clip.parents( ".ui-scrollview-clip").each( function () {
d = $( this ).jqmData("scrollview");
if ( d ) {
svh.unshift( d );
}
- });
+ } );
return svh;
},
},
_handleDragStart: function ( e, ex, ey ) {
- // Stop any scrolling of elements in our parent hierarcy.
- $.each( this._getScrollHierarchy(), function (i, sv) {
- sv._stopMScroll();
- });
this._stopMScroll();
this._didDrag = false;
var target = $( e.target ),
- shouldBlockEvent = 1,
- c = this._$clip,
- v = this._$view,
- cw = 0,
- vw = 0,
- ch = 0,
- vh = 0,
- svdir = this.options.direction,
- thumb;
+ self = this,
+ $c = this._$clip,
+ svdir = this.options.direction;
- // should skip the dragging when click the button
- this._skip_dragging = target.is('.ui-btn-text') ||
- target.is('.ui-btn-inner');
+ /* should skip the dragging when click the button */
+ this._skip_dragging = target.is( '.ui-btn-text' ) ||
+ target.is( '.ui-btn-inner' ) ||
+ target.is( '.ui-btn-inner .ui-icon' );
if ( this._skip_dragging ) {
return;
}
/*
- * If we're using mouse events, we need to prevent the default
- * behavior to suppress accidental selection of text, etc. We
- * can't do this on touch devices because it will disable the
- * generation of "click" events.
+ * We need to prevent the default behavior to
+ * suppress accidental selection of text, etc.
*/
-
this._shouldBlockEvent = !( target.is(':input') ||
target.parents(':input').length > 0 );
if ( this._shouldBlockEvent ) {
- e.preventDefault();
+ if ( this.options.eventType === "mouse" ) {
+ e.preventDefault();
+ }
+ } else {
+ target.one( "resize.scrollview", function () {
+ if ( ey > $c.height() ) {
+ self.scrollTo( -ex, self._sy - ey + $c.height(),
+ self.options.snapbackDuration );
+ }
+ });
+
+ return;
}
this._lastX = ex;
this._doSnapBackY = false;
this._speedX = 0;
this._speedY = 0;
-
this._directionLock = "";
- if ( this._hTracker ) {
- cw = parseInt( c.css("width"), 10 );
- vw = parseInt( v.css("width"), 10 );
- this._maxX = cw - vw;
-
- if ( this._maxX > 0 ) {
- this._maxX = 0;
- }
- if ( this._$hScrollBar && vw ) {
- thumb = this._$hScrollBar.find(".ui-scrollbar-thumb");
- thumb.css( "width", (cw >= vw ? "100%" :
- (Math.floor(cw / vw * 100) || 1) + "%") );
- }
- }
-
- if ( this._vTracker ) {
- ch = parseInt( c.css("height"), 10 );
- vh = parseInt( v.css("height"), 10 ) +
- parseFloat( v.css("padding-top") );
- this._maxY = ch - vh;
-
- if ( this._maxY > 0 ) {
- this._maxY = 0;
- }
- if ( this._$vScrollBar && vh ) {
- thumb = this._$vScrollBar.find(".ui-scrollbar-thumb");
- thumb.css( "height", (ch >= vh ? "100%" :
- (Math.floor(ch / vh * 100) || 1) + "%") );
- }
- }
-
- this._pageDelta = 0;
- this._pageSize = 0;
- this._pagePos = 0;
-
- if ( this.options.pagingEnabled && (svdir === "x" || svdir === "y") ) {
- this._pageSize = (svdir === "x") ? cw : ch;
- this._pagePos = (svdir === "x") ? this._sx : this._sy;
- this._pagePos -= this._pagePos % this._pageSize;
- }
-
this._lastMove = 0;
this._enableTracking();
+
+ this._set_scrollbar_size();
},
_propagateDragMove: function ( sv, e, ex, ey, dir ) {
}
var mt = this.options.moveThreshold,
- v = this._$view,
dx = ex - this._lastX,
dy = ey - this._lastY,
svdir = this.options.direction,
scope,
newX,
newY,
- dirLock,
- opos,
- cpos,
- delta;
+ dirLock;
if ( Math.abs( this._startY - ey ) < mt && !this._didDrag ) {
return;
}
this._lastMove = getCurrentTime();
+
if ( !this._directionLock ) {
x = Math.abs( dx );
y = Math.abs( dy );
}
}
- //this._directionLock = svdir ? svdir : (dir ? dir : "none");
this._directionLock = svdir || (dir || "none");
}
this._speedX = dx;
newX = x + dx;
- // Simulate resistance.
-
this._doSnapBackX = false;
- scope = (newX > 0 || newX < this._maxX);
+ scope = ( newX > 0 || newX < this._maxX );
+
if ( scope && dirLock === "x" ) {
sv = this._getAncestorByDirection("x");
if ( sv ) {
return false;
}
- newX = x + (dx / 2);
+ newX = x + ( dx / 2 );
this._doSnapBackX = true;
}
}
this._speedY = dy;
newY = y + dy;
- // Simulate resistance.
-
this._doSnapBackY = false;
- scope = (newY > 0 || newY < this._maxY);
+ scope = ( newY > 0 || newY < this._maxY );
+
if ( scope && dirLock === "y" ) {
sv = this._getAncestorByDirection("y");
if ( sv ) {
return false;
}
- newY = y + (dy / 2);
+ newY = y + ( dy / 2 );
this._doSnapBackY = true;
}
}
this._doSnapBackY = false;
}
- if ( this.options.pagingEnabled && (svdir === "x" || svdir === "y") ) {
- if ( this._doSnapBackX || this._doSnapBackY ) {
- this._pageDelta = 0;
- } else {
- opos = this._pagePos;
- cpos = svdir === "x" ? newX : newY;
- delta = svdir === "x" ? dx : dy;
-
- if ( opos > cpos && delta < 0 ) {
- this._pageDelta = this._pageSize;
- } else if ( opos < cpos && delta > 0 ) {
- this._pageDelta = -this._pageSize;
- } else {
- this._pageDelta = 0;
- }
- }
- }
-
this._didDrag = true;
this._lastX = ex;
this._lastY = ey;
x,
y;
- if ( this.options.pagingEnabled && (svdir === "x" || svdir === "y") &&
- !this._doSnapBackX && !this._doSnapBackY ) {
- x = this._sx;
- y = this._sy;
-
- if ( svdir === "x" ) {
- x = -this._pagePos + this._pageDelta;
- } else {
- y = -this._pagePos + this._pageDelta;
- }
-
- this.scrollTo( x, y, this.options.snapbackDuration );
- } else if ( sx || sy ) {
+ if ( sx || sy ) {
this._startMScroll( sx, sy );
} else {
this._hideScrollBars();
this._disableTracking();
- if ( !this._didDrag && this.options.eventType === "touch" ) {
- $(e.target).closest(this.options.delayedClickSelector).trigger("click");
- }
-
- /*
- * If a view scrolled, then we need to absorb
- * the event so that links etc, underneath our
- * cursor/finger don't fire.
- */
-
return !this._didDrag;
},
_showScrollBars: function () {
var vclass = "ui-scrollbar-visible";
+
+ if ( !this.options.showScrollBars ) {
+ return;
+ }
+ if ( this._scrollbar_showed ) {
+ return;
+ }
+
if ( this._$vScrollBar ) {
this._$vScrollBar.addClass( vclass );
}
if ( this._$hScrollBar ) {
this._$hScrollBar.addClass( vclass );
}
+
+ this._scrollbar_showed = true;
},
_hideScrollBars: function () {
var vclass = "ui-scrollbar-visible";
+
+ if ( !this.options.showScrollBars ) {
+ return;
+ }
+ if ( !this._scrollbar_showed ) {
+ return;
+ }
+
if ( this._$vScrollBar ) {
this._$vScrollBar.removeClass( vclass );
}
if ( this._$hScrollBar ) {
this._$hScrollBar.removeClass( vclass );
}
+
+ this._scrollbar_showed = false;
},
- _addBehaviors: function () {
+ _add_event: function () {
var self = this,
$c = this._$clip,
- prefix = "<div class=\"ui-scrollbar ui-scrollbar-",
- suffix = "\"><div class=\"ui-scrollbar-track\"><div class=\"ui-scrollbar-thumb\"></div></div></div>";
+ $v = this._$view;
if ( this.options.eventType === "mouse" ) {
- this._dragEvt = "mousedown mousemove mouseup click";
+ this._dragEvt = "mousedown mousemove mouseup click mousewheel";
+
this._dragCB = function ( e ) {
switch ( e.type ) {
case "mousedown":
case "click":
return !self._didDrag;
+
+ case "mousewheel":
+ var old = self.getScrollPosition();
+ self.scrollTo( -old.x,
+ -(old.y - e.originalEvent.wheelDelta) );
+ break;
}
};
} else {
- this._dragEvt = "touchstart touchmove touchend vclick";
+ this._dragEvt = "touchstart touchmove touchend click";
+
this._dragCB = function ( e ) {
var t;
case "touchend":
return self._handleDragStop( e );
- case "vclick":
+ case "click":
return !self._didDrag;
}
};
}
- this._$view.bind( this._dragEvt, this._dragCB );
+ $v.bind( this._dragEvt, this._dragCB );
+
+ if ( $c.jqmData("scroll") !== "y" ) {
+ return;
+ }
+
+ $c.bind( "updatelayout", function ( e ) {
+ var $page = $c.parentsUntil("ui-page"),
+ sy,
+ vh;
+
+ if ( !$c.height() || !$v.height() ) {
+ self.scrollTo( 0, 0, 0 );
+ return;
+ }
+
+ sy = $c.height() - $v.height();
+ vh = $v.height() - self._view_height;
+
+ self._view_height = $v.height();
+
+ if ( vh == 0 || vh > $c.height() / 2 ) {
+ return;
+ }
+
+ if ( self._sy - sy <= -vh ) {
+ self.scrollTo( 0, self._sy,
+ self.options.snapbackDuration );
+ } else if ( self._sy - sy <= vh + self.options.moveThreshold ) {
+ self.scrollTo( 0, sy,
+ self.options.snapbackDuration );
+ }
+ });
+
+ $( window ).bind( "resize", function ( e ) {
+ var $page = $c.parentsUntil("ui-page"),
+ focused;
+
+ if ( !$c.height() || !$v.height() ) {
+ return;
+ }
+
+ focused = $c.find(".ui-focus");
+
+ if ( focused ) {
+ focused.trigger("resize.scrollview");
+ }
+
+ /* calibration */
+ if ( self._sy < $c.height() - $v.height() ) {
+ self.scrollTo( 0, self._sy,
+ self.options.snapbackDuration );
+ }
+
+ self._view_height = $v.height();
+ });
+ },
+
+ _add_scrollbar: function () {
+ var $c = this._$clip,
+ prefix = "<div class=\"ui-scrollbar ui-scrollbar-",
+ suffix = "\"><div class=\"ui-scrollbar-track\"><div class=\"ui-scrollbar-thumb\"></div></div></div>";
+
+ if ( !this.options.showScrollBars ) {
+ return;
+ }
+
+ if ( this._vTracker ) {
+ $c.append( prefix + "y" + suffix );
+ this._$vScrollBar = $c.children(".ui-scrollbar-y");
+ }
+ if ( this._hTracker ) {
+ $c.append( prefix + "x" + suffix );
+ this._$hScrollBar = $c.children(".ui-scrollbar-x");
+ }
+
+ this._scrollbar_showed = false;
+ },
+
+ _set_scrollbar_size: function () {
+ var $c = this._$clip,
+ $v = this._$view,
+ cw = 0,
+ vw = 0,
+ ch = 0,
+ vh = 0,
+ thumb;
+
+ if ( !this.options.showScrollBars ) {
+ return;
+ }
+
+ if ( this._hTracker ) {
+ cw = $c.width();
+ vw = $v.width();
+ this._maxX = cw - vw;
+
+ if ( this._maxX > 0 ) {
+ this._maxX = 0;
+ }
+ if ( this._$hScrollBar && vw ) {
+ thumb = this._$hScrollBar.find(".ui-scrollbar-thumb");
+ thumb.css( "width", (cw >= vw ? "100%" :
+ (Math.floor(cw / vw * 100) || 1) + "%") );
+ }
+ }
+
+ if ( this._vTracker ) {
+ ch = $c.height();
+ vh = $v.height();
+ this._maxY = ch - vh;
- if ( this.options.showScrollBars ) {
- if ( this._vTracker ) {
- $c.append( prefix + "y" + suffix );
- this._$vScrollBar = $c.children(".ui-scrollbar-y");
+ if ( this._maxY > 0 ) {
+ this._maxY = 0;
}
- if ( this._hTracker ) {
- $c.append( prefix + "x" + suffix );
- this._$hScrollBar = $c.children(".ui-scrollbar-x");
+ if ( this._$vScrollBar && vh ) {
+ thumb = this._$vScrollBar.find(".ui-scrollbar-thumb");
+ thumb.css( "height", (ch >= vh ? "100%" :
+ (Math.floor(ch / vh * 100) || 1) + "%") );
}
}
}
$.extend( MomentumTracker.prototype, {
start: function ( pos, speed, duration, minPos, maxPos ) {
- var tstate = (pos < minPos || pos > maxPos) ?
+ var tstate = ( pos < minPos || pos > maxPos ) ?
tstates.snapback : tstates.scrolling,
pos_temp;
- this.state = (speed !== 0) ? tstate : tstates.done;
+ this.state = ( speed !== 0 ) ? tstate : tstates.done;
this.pos = pos;
this.speed = speed;
- this.duration = (this.state === tstates.snapback) ?
+ this.duration = ( this.state === tstates.snapback ) ?
this.options.snapbackDuration : duration;
this.minPos = minPos;
this.maxPos = maxPos;
- this.fromPos = (this.state === tstates.snapback) ? this.pos : 0;
- pos_temp = (this.pos < this.minPos) ? this.minPos : this.maxPos;
- this.toPos = (this.state === tstates.snapback) ? pos_temp : 0;
+ this.fromPos = ( this.state === tstates.snapback ) ? this.pos : 0;
+ pos_temp = ( this.pos < this.minPos ) ? this.minPos : this.maxPos;
+ this.toPos = ( this.state === tstates.snapback ) ? pos_temp : 0;
this.startTime = getCurrentTime();
},
if ( state === tstates.scrolling || state === tstates.overshot ) {
dx = this.speed *
- (1 - $.easing[this.easing]( elapsed / duration,
- elapsed, 0, 1, duration ));
+ ( 1 - $.easing[this.easing]( elapsed / duration,
+ elapsed, 0, 1, duration ) );
x = this.pos + dx;
- didOverShoot = (state === tstates.scrolling) &&
- (x < this.minPos || x > this.maxPos);
+ didOverShoot = ( state === tstates.scrolling ) &&
+ ( x < this.minPos || x > this.maxPos );
if ( didOverShoot ) {
- x = (x < this.minPos) ? this.minPos : this.maxPos;
+ x = ( x < this.minPos ) ? this.minPos : this.maxPos;
}
this.pos = x;
if ( elapsed >= duration ) {
this.state = tstates.snapback;
this.fromPos = this.pos;
- this.toPos = (x < this.minPos) ?
+ this.toPos = ( x < this.minPos ) ?
this.minPos : this.maxPos;
this.duration = this.options.snapbackDuration;
this.startTime = cur_time;
this.pos = this.toPos;
this.state = tstates.done;
} else {
- this.pos = this.fromPos + ((this.toPos - this.fromPos) *
+ this.pos = this.fromPos + (( this.toPos - this.fromPos ) *
$.easing[this.easing]( elapsed / duration,
elapsed, 0, 1, duration ));
}
}
});
- function resizePageContentHeight( page ) {
- var $page = $( page ),
- $content = $page.children(".ui-content"),
- hh = $page.children(".ui-header").outerHeight() || 0,
- fh = $page.children(".ui-footer").outerHeight() || 0,
- pt = parseFloat( $content.css("padding-top") ),
- pb = parseFloat( $content.css("padding-bottom") ),
- wh = $(window).height();
-
- $content.height( wh - (hh + fh) - (pt + pb) );
- }
-
- // auto-init scrollview and scrolllistview widgets
$( document ).bind( 'pagecreate create', function ( e ) {
var $page = $( e.target ),
- scroll = $page.find(".ui-content").attr("data-scroll");
-
- if ( scroll === "none" ) {
- return;
- }
+ content_scroll = $page.find(".ui-content").jqmData("scroll");
+ /* content scroll */
if ( $.support.scrollview === undefined ) {
- // set as default value
$.support.scrollview = true;
}
- if ( $.support.scrollview === true && scroll === undefined ) {
- $page.find(".ui-content").attr( "data-scroll", "y" );
+ if ( $.support.scrollview === true && content_scroll === undefined ) {
+ content_scroll = "y";
+ }
+
+ if ( content_scroll !== "y" ) {
+ content_scroll = "none";
}
+ $page.find(".ui-content").attr( "data-scroll", content_scroll );
+
$page.find(":jqmData(scroll):not(.ui-scrollview-clip)").each( function () {
if ( $( this ).hasClass("ui-scrolllistview") ) {
$( this ).scrolllistview();
} else {
var st = $( this ).jqmData("scroll"),
- paging = st && (st.search(/^[xy]p$/) !== -1),
- dir = st && (st.search(/^[xy]/) !== -1) ? st.charAt(0) : null,
+ dir = st && ( st.search(/^[xy]/) !== -1 ) ? st.charAt(0) : null,
opts;
+ if ( st === "none" ) {
+ return;
+ }
+
opts = {
direction: dir || undefined,
- paging: paging || undefined,
scrollMethod: $( this ).jqmData("scroll-method") || undefined
};
$( document ).bind( 'pageshow', function ( e ) {
var $page = $( e.target ),
- scroll = $page.find(".ui-content").attr("data-scroll");
+ scroll = $page.find(".ui-content").jqmData("scroll");
if ( scroll === "y" ) {
- setTimeout( function () {
- resizePageContentHeight( e.target );
- }, 100);
+ resizePageContentHeight( e.target );
}
});
- $( window ).bind( "orientationchange", function ( e ) {
- resizePageContentHeight( $(".ui-page") );
- });
-
}( jQuery, window, document ) );
}
footer_filter
.css( "position", "fixed" )
- .css( "height", controlbar_filter.height() )
- .css( "top", window.innerHeight - footer_filter.height() );
+ .css( "bottom", 0 )
+ .css( "height", controlbar_filter.height() );
if ( style == "toolbar" ) {
controlbar_filter
- .css( "width", window.innerWidth - controlbar_filter.siblings(".ui-btn").width() );
+ .css( "width", window.innerWidth - controlbar_filter.siblings(".ui-btn").width() - parseInt(controlbar_filter.siblings(".ui-btn").css("right"), 10) * 2 );
}
}
});
* data-role: 'datetimepicker'
* data-format: date format string. e.g) "MMM dd yyyy, HH:mm"
* type: 'date', 'datetime', 'time'
- * data-val: pre-set value. any date/time string Date.parse() accepts.
+ * value: pre-set value. only accepts ISO date string. e.g) "2012-05-04", "2012-05-04T01:02:03+09:00"
+ * data-date: any date/time string "new Date()" accepts.
*
* Options:
* type: 'date', 'datetime', 'time'
* format: see data-format in HTML Attributes.
- * val: see data-val in HTML Attributes.
+ * value: see value in HTML Attributes.
+ * date: preset value as JavaScript Date Object representation.
*
* APIs:
- * getValue()
+ * value( datestring )
+ * : Set date/time to 'datestring'.
+ * value()
* : Get current selected date/time as W3C DTF style string.
- * update()
- * : Force to update fields.
+ * getValue() - replaced with 'value()'
+ * : same as value()
+ * setValue( datestring ) - replaced with 'value(datestring)'
+ * : same as value( datestring )
+ * changeTypeFormat( type, format ) - deprecated
+ * : Change Type and Format options. use datetimepicker( "option", "format" ) instead
*
* Events:
- * data-changed: Raised when date/time was changed.
+ * date-changed: Raised when date/time was changed.
*
* Examples:
* <ul data-role="listview">
( function ( $, window, undefined ) {
$.widget( "tizen.datetimepicker", $.tizen.widgetex, {
+
options: {
- type: 'datetime', // date, time, datetime applicable
+ type: null, // date, time, datetime applicable
format: null,
- val: null,
+ date: null,
initSelector: "input[type='date'], input[type='datetime'], input[type='time'], :jqmData(role='datetimepicker')"
},
+ _calendar: function () {
+ return window.Globalize.culture().calendars.standard;
+ },
+
+ _value: {
+ attr: "data-" + ( $.mobile.ns || "" ) + "date",
+ signal: "date-changed"
+ },
+
+ _daysInMonth: [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ],
+
+ _isLeapYear: function ( year ) {
+ return year % 4 ? 0 : ( year % 100 ? 1 : ( year % 400 ? 0 : 1 ) );
+ },
+
_makeTwoDigits: function ( val ) {
var ret = val.toString(10);
return ret;
},
- /**
- * return W3C DTF string
- */
- getValue: function () {
- var data = [],
- item,
- greg,
- obj = this,
- toTimeString,
- toDateString;
-
- for ( item in this.data ) {
- data[item] = this.data[item];
- }
-
- if ( this.calendar.convert ) {
- greg = this.calendar.convert.toGregorian( data.year, data.month, data.day );
- data.year = greg.getFullYear();
- data.month = greg.getMonth();
- data.day = greg.getDate();
- }
- obj = this;
- toTimeString = function timeStr( t ) {
- return obj._makeTwoDigits( t.hour ) + ':' +
- obj._makeTwoDigits( t.min ) + ':' +
- obj._makeTwoDigits( t.sec );
- };
-
- toDateString = function dateStr( d ) {
- return ( ( d.year % 10000 ) + 10000 ).toString().substr(1) + '-' +
- obj._makeTwoDigits( d.month ) + '-' +
- obj._makeTwoDigits( d.day );
- };
-
- switch ( this.options.type ) {
- case 'time':
- return toTimeString( data );
+ _setType: function ( type ) {
+ //datetime, date, time
+ switch (type) {
+ case 'datetime':
case 'date':
- return toDateString( data );
+ case 'time':
+ this.options.type = type;
+ break;
default:
- return toDateString( data ) + 'T' + toTimeString( data );
+ this.options.type = 'datetime';
+ break;
}
+
+ this.element.attr( "data-" + ( $.mobile.ns ? $.mobile.ns + "-" : "" ) + "type", this.options.type );
+ return this.options.type;
},
- _updateField: function ( target, value ) {
- if ( !target || target.length == 0 ) {
+ _setFormat: function ( format ) {
+ if ( this.options.format != format ) {
+ this.options.format = format;
+ } else {
return;
}
- if ( value == 0 ) {
- value = "0";
- }
-
- var pat = target.jqmData( 'pat' ),
- hour;
- switch ( pat ) {
- case 'H':
- case 'HH':
- case 'h':
- case 'hh':
- hour = value;
- if ( pat.charAt(0) == 'h' ) {
- if ( hour > 12 ) {
- hour -= 12;
- } else if ( hour == 0 ) {
- hour = 12;
- }
- }
- if ( pat.length == 2 ) {
- hour = this._makeTwoDigits( hour );
- }
- target.text( hour );
- break;
- case 'm':
- case 'M':
- case 'd':
- case 's':
- target.text( value );
- break;
- case 'mm':
- case 'dd':
- case 'MM':
- case 'ss':
- target.text( this._makeTwoDigits( value ) );
- break;
- case 'MMM':
- target.text( this.calendar.months.namesAbbr[ value - 1] );
- break;
- case 'MMMM':
- target.text( this.calendar.months.names[ value - 1 ] );
- break;
- case 'yy':
- target.text( this._makeTwoDigits( value % 100 ) );
- break;
- case 'yyyy':
- if ( value < 10 ) {
- value = '000' + value;
- } else if ( value < 100 ) {
- value = '00' + value;
- } else if ( value < 1000 ) {
- value = '0' + value;
- }
- target.text( value );
- break;
- }
-
- },
+ this.ui.children().remove();
- _format: function ( pattern ) {
- var token = this._parsePattern( pattern ),
+ var token = this._parsePattern( format ),
div = document.createElement('div'),
- attr = [],
pat,
tpl,
- ampm,
- btn;
+ period,
+ btn,
+ obj = this;
while ( token.length > 0 ) {
pat = token.shift();
case 'h': //0 1 2 3 ... 11 12
case 'hh': //00 01 02 ... 11 12
$(div).append( tpl.replace('%1', 'hour') );
- attr.hour = true;
break;
case 'mm': //00 01 ... 59
case 'm': //0 1 2 ... 59
$(div).append( tpl.replace('%1', 'min') );
- attr.min = true;
break;
case 'ss':
case 's':
$(div).append( tpl.replace('%1', 'sec') );
- attr.sec = true;
break;
- case 'd': // day of month 5
+ case 'd': // day of month 5
case 'dd': // day of month(leading zero) 05
$(div).append( tpl.replace('%1', 'day') );
- attr.day = true;
break;
case 'M': // Month of year 9
case 'MM': // Month of year(leading zero) 09
case 'MMM':
case 'MMMM':
$(div).append( tpl.replace('%1', 'month') );
- attr.month = true;
break;
case 'yy': // year two digit
case 'yyyy': // year four digit
$(div).append( tpl.replace('%1', 'year') );
- attr.year = true;
break;
case 't': //AM / PM indicator(first letter) A, P
// add button
case 'tt': //AM / PM indicator AM/PM
// add button
- ampm = this.data.hour > 11 ?
- this.calendar.PM[0] : this.calendar.AM[0];
- btn = '<a href="#" class="ui-datefield-ampm"' +
- ' data-role="button" data-inline="true">' +
- ampm + '</a>';
+ btn = '<a href="#" class="ui-datefield-period"' +
+ ' data-role="button" data-inline="true">period</a>';
$(div).append( btn );
- attr.ampm = true;
break;
case 'g':
case 'gg':
- $(div).append( tpl.replace('%1', 'era').replace('%2', this.calendar.eras.name) );
+ $(div).append( tpl.replace('%1', 'era').replace('%2', this._calendar().eras.name) );
+ break;
+ case '\t':
+ $(div).append( tpl.replace('%1', 'tab').replace('%2', pat) );
break;
default : // string or any non-clickable object
$(div).append( tpl.replace('%1', 'seperator').replace('%2', pat) );
}
}
- return {
- attr: attr,
- html: div
- };
+ this.ui.append( div );
+ if ( this.options.date ) {
+ this._setDate( this.options.date );
+ }
+
+ this.ui.find('.ui-datefield-period').buttonMarkup().bind( 'vclick', function ( e ) {
+ obj._switchAmPm( obj );
+ });
+
+ this.element.attr( "data-" + ( $.mobile.ns ? $.mobile.ns + "-" : "" ) + "format", this.options.format );
+ return this.options.format;
},
- _switchAmPm: function ( obj, owner ) {
- if ( this.calendar.AM != null ) {
- if ( this.calendar.AM[0] == $(owner).find('.ui-btn-text').text() ) { // AM to PM
- this.data.hour += 12;
- $(owner).find('.ui-btn-text').text( this.calendar.PM[0] );
- } else { // PM to AM
- this.data.hour -= 12;
- $(owner).find('.ui-btn-text').text( this.calendar.AM[0] );
+ _setDate: function ( newdate ) {
+ if ( typeof ( newdate ) == "string" ) {
+ newdate = new Date( newdate );
+ }
+
+ var fields = $('span,a', this.ui),
+ type,
+ fn,
+ $field,
+ btn,
+ i;
+
+ function getMonth() {
+ return newdate.getMonth() + 1;
+ }
+
+ for ( i = 0; i < fields.length; i++ ) {
+ $field = $(fields[i]);
+ type = $field.attr("class").match(/ui-datefield-([\w]*)/);
+ if ( !type ) {
+ type = "";
+ }
+ switch ( type[1] ) {
+ case 'hour':
+ fn = newdate.getHours;
+ break;
+ case 'min':
+ fn = newdate.getMinutes;
+ break;
+ case 'sec':
+ fn = newdate.getSeconds;
+ break;
+ case 'year':
+ fn = newdate.getFullYear;
+ break;
+ case 'month':
+ fn = getMonth;
+ break;
+ case 'day':
+ fn = newdate.getDate;
+ break;
+ case 'period':
+ fn = newdate.getHours() < 12 ? this._calendar().AM[0] : this._calendar().PM[0];
+ btn = $field.find( '.ui-btn-text' );
+ if ( btn.length == 0 ) {
+ $field.text(fn);
+ } else if ( btn.text() != fn ) {
+ btn.text( fn );
+ }
+ fn = null;
+ break;
+ default:
+ fn = null;
+ break;
+ }
+ if ( fn ) {
+ this._updateField( $field, fn.call( newdate ) );
}
- obj.update();
}
+
+ this.options.date = newdate;
+
+ this._setValue( this.value() );
+
+ this.element.attr( "data-" + ( $.mobile.ns ? $.mobile.ns + "-" : "" ) + "date", this.options.date );
+ return this.options.date;
},
- update: function () {
- if ( $(this.elem).is('input') ) {
- this.options.val = this.getValue();
- this.elem.value = this.options.val;
+ destroy: function () {
+ if ( this.ui ) {
+ this.ui.remove();
+ }
+
+ if ( this.element ) {
+ this.element.show();
}
- $(this.elem).trigger('date-changed', this.getValue() );
},
- _parsePattern: function ( pattern ) {
- var regex = /^(\/|\s|dd|d|MMMM|MMM|MM|M|yyyy|yy|y|hh|h|HH|H|mm|m|ss|s|tt|t|f|gg|g)|('[\w\W\s]*?')/,
- token = [],
- s;
-
- while ( pattern.length > 0 ) {
- s = regex.exec( pattern );
- if ( s ) {
- pattern = pattern.substr( s[0].length );
- if ( s[0].charAt(0) == "'" ) {
- s[0] = s[0].substr( 1, s[0].length - 2 );
+ value: function ( val ) {
+ function timeStr( t, obj ) {
+ return obj._makeTwoDigits( t.getHours() ) + ':' +
+ obj._makeTwoDigits( t.getMinutes() ) + ':' +
+ obj._makeTwoDigits( t.getSeconds() );
+ }
+
+ function dateStr( d, obj ) {
+ return ( ( d.getFullYear() % 10000 ) + 10000 ).toString().substr(1) + '-' +
+ obj._makeTwoDigits( d.getMonth() + 1 ) + '-' +
+ obj._makeTwoDigits( d.getDate() );
+ }
+
+ var rvalue = null;
+ if ( val ) {
+ rvalue = this._setDate( val );
+ } else {
+ switch ( this.options.type ) {
+ case 'time':
+ rvalue = timeStr( this.options.date, this );
+ break;
+ case 'date':
+ rvalue = dateStr( this.options.date, this );
+ break;
+ default:
+ rvalue = dateStr( this.options.date, this ) + 'T' + timeStr( this.options.date, this );
+ break;
+ }
+ }
+ return rvalue;
+ },
+
+ setValue: function ( newdate ) {
+ console.warn( "setValue was deprecated. use datetimepicker('option', 'date', value) instead." );
+ return this.value( newdate );
+ },
+
+ /**
+ * return W3C DTF string
+ */
+ getValue: function () {
+ console.warn("getValue() was deprecated. use datetimepicker('value') instead.");
+ return this.value();
+ },
+
+ _updateField: function ( target, value ) {
+ if ( !target || target.length == 0 ) {
+ return;
+ }
+
+ if ( value == 0 ) {
+ value = "0";
+ }
+
+ var pat = target.jqmData( 'pat' ),
+ hour,
+ text;
+ switch ( pat ) {
+ case 'H':
+ case 'HH':
+ case 'h':
+ case 'hh':
+ hour = value;
+ if ( pat.charAt(0) == 'h' ) {
+ if ( hour > 12 ) {
+ hour -= 12;
+ } else if ( hour == 0 ) {
+ hour = 12;
}
- token.push( s[0] );
- } else {
- token.push( pattern.charAt(0) );
- pattern = pattern.substr(1);
}
+ if ( pat.length == 2 ) {
+ hour = this._makeTwoDigits( hour );
+ }
+ text = hour;
+ break;
+ case 'm':
+ case 'M':
+ case 'd':
+ case 's':
+ text = value;
+ break;
+ case 'mm':
+ case 'dd':
+ case 'MM':
+ case 'ss':
+ text = this._makeTwoDigits( value );
+ break;
+ case 'MMM':
+ text = this._calendar().months.namesAbbr[ value - 1];
+ break;
+ case 'MMMM':
+ text = this._calendar().months.names[ value - 1 ];
+ break;
+ case 'yy':
+ text = this._makeTwoDigits( value % 100 );
+ break;
+ case 'yyyy':
+ if ( value < 10 ) {
+ value = '000' + value;
+ } else if ( value < 100 ) {
+ value = '00' + value;
+ } else if ( value < 1000 ) {
+ value = '0' + value;
+ }
+ text = value;
+ break;
+ }
+ // to avoid reflow where its value isn't out-dated
+ if ( target.text() != text ) {
+ target.text( text );
}
+ },
- return token;
+ _switchAmPm: function ( obj ) {
+ if ( this._calendar().AM != null ) {
+ var date = new Date( this.options.date ),
+ text,
+ change = 1000 * 60 * 60 * 12;
+ if ( date.getHours() > 11 ) {
+ change = -change;
+ }
+ date.setTime( date.getTime() + change );
+ this._setDate( date );
+ }
},
- _create: function () {
- var input = this.element.get(0),
- type = $(input).attr("type"),
- isTime,
- isDate,
- val,
- now,
- data,
- local,
- obj = this,
- $div;
+ _parsePattern: function ( pattern ) {
+ var regex = /\/|\s|dd|d|MMMM|MMM|MM|M|yyyy|yy|y|hh|h|HH|H|mm|m|ss|s|tt|t|f|gg|g|\'[\w\W]*\'$|[\w\W]/g,
+ matches,
+ i;
+ matches = pattern.match( regex );
+
+ for ( i = 0; i < matches.length; i++ ) {
+ if ( matches[i].charAt(0) == "'" ) {
+ matches[i] = matches[i].substr( 1, matches[i].length - 2 );
+ }
+ }
+
+ return matches;
+ },
+
+ changeTypeFormat: function ( type, format ) {
+ console.warn('changeTypeFormat() was deprecated. use datetimepicker("option", "type"|"format", value) instead');
if ( type ) {
- obj.options.type = type;
+ this._setType( type );
}
- isTime = type.indexOf("time") > -1;
- isDate = type.indexOf("date") > -1;
- $.extend( obj, {
- elem: input,
- time: isTime,
- date: isDate,
- calendar: window.Globalize.culture().calendars.standard,
- data: {
- "hour" : 0,
- "min" : 0,
- "sec" : 0,
- "year" : 0,
- "month" : 0,
- "day" : 0
- }
+ if ( format ) {
+ this._setFormat( format );
+ }
+ },
- });
+ _create: function () {
+ var obj = this;
- // init date&time
- val = this.options.val;
- if ( val ) {
- now = new Date( Date.parse( val ) );
- } else {
- now = new Date();
+ if ( this.element.is( "input" ) ) {
+ ( function ( obj ) {
+ var type, value, format;
+
+ type = obj.element.attr( "type" );
+ obj.options.type = type;
+
+ value = obj.element.attr( "value" );
+ if ( value ) {
+ obj.options.date = new Date( value );
+ }
+ }( this ) );
}
- data = obj.data;
- if ( isDate ) {
- if ( obj.calendar.convert ) {
- local = obj.calendar.convert.fromGregorian( now );
- data.year = local.year;
- data.month = local.month + 1;
- data.day = local.day;
- } else {
- data.year = now.getFullYear();
- data.month = now.getMonth() + 1;
- data.day = now.getDate();
+ if ( !this.options.format ) {
+ switch ( this.options.type ) {
+ case 'datetime':
+ this.options.format = this._calendar().patterns.d + "\t" + this._calendar().patterns.t;
+ break;
+ case 'date':
+ this.options.format = this._calendar().patterns.d;
+ break;
+ case 'time':
+ this.options.format = this._calendar().patterns.t;
+ break;
}
}
- if ( isTime ) {
- data.hour = now.getHours();
- data.min = now.getMinutes();
- data.sec = now.getSeconds();
+ if ( !this.options.date ) {
+ this.options.date = new Date();
}
- $(input).css('display', 'none');
- $div = $(document.createElement('div'));
- $div.addClass('ui-datefield');
- $(input).after( $div );
- this._initField( this.options.type, $div );
- $div.trigger('create');
+ this.element.hide();
+ this.ui = $('<div class="ui-datefield"></div>');
+ $(this.element).after( this.ui );
- $div.bind('vclick', function ( e ) {
+ this.ui.bind('vclick', function ( e ) {
obj._showDataSelector( obj, this, e.target );
});
-
- $div.find('.ui-datefield-ampm').bind( 'vclick', function ( e ) {
- obj._switchAmPm( obj, this );
- });
},
- _populateDataSelector: function ( field, pat, obj ) {
+ _populateDataSelector: function ( field, pat ) {
var values,
numItems,
current,
yearhb,
day;
-
switch ( field ) {
case 'hour':
if ( pat == 'H' ) {
// twentyfour
values = range( 0, 23 );
data = range( 0, 23 );
- current = obj.data.hour;
+ current = this.options.date.getHours();
} else {
values = range( 1, 12 );
- current = obj.data.hour - 1;//11
+ current = this.options.date.getHours() - 1;//11
if ( current >= 11 ) {
current = current - 12;
data = range( 13, 23 );
}
if ( pat.length == 2 ) {
// two digit
- values = values.map( obj._makeTwoDigits );
+ values = values.map( this._makeTwoDigits );
}
numItems = values.length;
break;
case 'sec':
values = range( 0, 59 );
if ( pat.length == 2 ) {
- values = values.map( obj._makeTwoDigits );
+ values = values.map( this._makeTwoDigits );
}
data = range( 0, 59 );
- current = ( field == 'min' ? obj.data.min : obj.data.sec );
+ current = ( field == 'min' ? this.options.date.getMinutes() : this.options.date.getSeconds() );
numItems = values.length;
break;
case 'year':
- local = new Date( 1900, 0, 1 );
- if ( obj.calendar.convert ) {
- local = obj.calendar.convert.fromGregorian( local );
- yearlb = local.year;
- yearhb = yearlb + 200;
- } else {
- yearlb = local.getFullYear();
- yearhb = yearlb + 200;
- }
+ yearlb = 1900;
+ yearhb = 2100;
data = range( yearlb, yearhb );
- current = obj.data.year - yearlb;
+ current = this.options.date.getFullYear() - yearlb;
values = range( yearlb, yearhb );
numItems = values.length;
break;
values = range( 1, 12 );
break;
case 2:
- values = range( 1, 12 ).map( obj._makeTwoDigits );
+ values = range( 1, 12 ).map( this._makeTwoDigits );
break;
case 3:
- values = obj.calendar.months.namesAbbr.slice();
+ values = this._calendar().months.namesAbbr.slice();
break;
case 4:
- values = obj.calendar.months.names.slice();
+ values = this._calendar().months.names.slice();
break;
}
if ( values.length == 13 ) { // @TODO Lunar calendar support
}
}
data = range( 1, values.length );
- current = obj.data.month - 1;
+ current = this.options.date.getMonth();
numItems = values.length;
break;
case 'day':
- //@TODO max number 31 -> depends on month
- day = 31;
+ day = this._daysInMonth[ this.options.date.getMonth() ];
+ if ( day == 28 ) {
+ day += this._isLeapYear( this.options.date.getFullYear() );
+ }
values = range( 1, day );
if ( pat.length == 2 ) {
- values = values.map( obj._makeTwoDigits );
+ values = values.map( this._makeTwoDigits );
}
data = range( 1, day );
- current = obj.data.day - 1;
+ current = this.options.date.getDate() - 1;
numItems = day;
break;
}
target = $(target);
var attr = target.attr("class"),
- field = attr.match(/ui-datefield-([\w]*)/),
+ field = attr ? attr.match(/ui-datefield-([\w]*)/) : undefined,
pat,
data,
values,
numItems,
current,
valuesData,
- item,
- $li,
- $item,
+ html,
+ datans,
$ul,
$div,
- $ctx;
+ $ctx,
+ $li,
+ i;
if ( !attr ) {
return;
target.not('.ui-datefield-seperator').addClass('ui-datefield-selected');
pat = target.jqmData('pat');
- data = obj._populateDataSelector( field[1], pat, obj );
+ data = obj._populateDataSelector.call( obj, field[1], pat );
values = data.values;
numItems = data.numItems;
valuesData = data.data;
if ( values ) {
- $ul = $(document.createElement('ul'));
- for ( item in values ) {
- $li = $(document.createElement('li'));
- $item = $(document.createElement('a'));
- $item.addClass('ui-link');
- $item.text( values[item] );
- $item.jqmData( "val", valuesData[item] );
-
- $li.append( $item );
- $ul.append( $li );
-
- if ( current == item ) {
- $li.addClass('current');
- }
+ datans = "data-" + ($.mobile.ns ? ($.mobile.ns + '-') : "") + 'val="';
+ for ( i = 0; i < values.length; i++ ) {
+ html += '<li><a class="ui-link" ' + datans + valuesData[i] + '">' + values[i] + '</a></li>';
}
- /* TODO NEED TO REFACTORING HERE */
- $div = $(document.createElement('div'));
+ $ul = $("<ul></ul>");
+ $div = $('<div class="ui-datetimepicker-selector" data-transition="none" data-fade="false"></div>');
$div.append( $ul ).appendTo( ui );
- $div.addClass('ui-datetimepicker-selector');
- $div.attr( 'data-transition', 'none' );
$ctx = $div.ctxpopup();
$ctx.parents('.ui-popupwindow').addClass('ui-datetimepicker');
+ $li = $(html);
+ $( $li[current] ).addClass("current");
+ $div.jqmData( "list", $li );
$div.circularview();
- $div.circularview( 'centerTo', '.current' );
+ if ( !obj._reflow ) {
+ obj._reflow = function () {
+ $div.circularview("reflow");
+ };
+ $(window).bind("resize", obj._reflow);
+ }
$ctx.popupwindow( 'open',
target.offset().left + target.width() / 2 - window.pageXOffset,
target.offset().top + target.height() - window.pageYOffset );
- $div.bind('closed', function ( e ) {
- $div.unbind( 'closed' );
+ $div.bind('popupafterclose', function ( e ) {
+ if ( obj._reflow ) {
+ $(window).unbind("resize", obj._reflow);
+ obj._reflow = null;
+ }
+ $div.unbind( 'popupafterclose' );
$ul.unbind( 'vclick' );
$(obj).unbind( 'update' );
$(ui).find('.ui-datefield-selected').removeClass('ui-datefield-selected');
$(obj).bind( 'update', function ( e, val ) {
$ctx.popupwindow( 'close' );
- var data = $(ui).find( '.' + field[0] );
- obj._updateField( $(data), val );
- obj.data[ field[1] ] = val;
- obj.update();
+ var date = new Date( this.options.date );
+ switch ( field[1] ) {
+ case 'min':
+ date.setMinutes( val );
+ break;
+ case 'hour':
+ date.setHours( val );
+ break;
+ case 'sec':
+ date.setSeconds( val );
+ break;
+ case 'year':
+ date.setFullYear( val );
+ break;
+ case 'month':
+ date.setMonth( val - 1 );
+ break;
+ case 'day':
+ date.setDate( val );
+ break;
+ }
+ obj._setDate( date );
});
- $ul.bind( 'vclick', function ( e ) {
+ $ul.bind( 'click', function ( e ) {
if ( $(e.target).is('a') ) {
$ul.find(".current").removeClass("current");
$(e.target).parent().addClass('current');
$(obj).trigger( 'update', val ); // close popup, unselect field
}
});
- }
- },
-
- _initField: function ( type, div ) {
- var date,
- time,
- datetime,
- updateFields = function ( obj, html, attr ) {
- var item;
- for ( item in attr ) {
- if ( attr[item] ) {
- obj._updateField( $(html).find( '.ui-datefield-' + item ),
- obj.data[item] );
- }
- }
- };
-
- if ( this.options.format ) {
- datetime = this._format( this.options.format );
- updateFields( this, datetime.html, datetime.attr );
- div.append( datetime.html );
- } else {
- if ( type.match( 'date' ) ) {
- date = this._format( this.calendar.patterns.d );
- $(date.html).addClass('date');
- updateFields( this, date.html, date.attr );
- div.append( date.html );
- }
- if ( type.match( 'datetime' ) ) {
- div.append( '<span class="ui-datefield-tab"></span>' );
- }
-
- if ( type.match( 'time' ) ) {
- time = this._format( this.calendar.patterns.t );
- $(time.html).addClass('time');
- updateFields( this, time.html, time.attr );
- div.append( time.html );
- }
+ $div.circularview( 'centerTo', '.current', 500 );
}
+ return ui;
}
});
'Saturday']
},
- defaultTheme: 'c',
+ defaultTheme: 's',
_create: function () {
var days,
return ( $( e ).height( ) == 0);
},
+ refresh: function () {
+ if ( this._handler ) {
+ this.element.unbind();
+ this._handler = null;
+ }
+ this._create();
+ },
+
_create: function ( ) {
var children = $( this.element ).nextAll( ":jqmData(expanded-by='" + $( this.element ).attr( 'id' ) + "')" ),
expanded.addClass( "ui-li-expanded" );
- e.bind( 'vclick', function ( ) {
+ this._handler = e.bind( 'vclick', function ( ) {
var _is_expanded = e[0].is_expanded;
expanded.each( function ( i, e ) { self._toggle( self, e, _is_expanded ); } );
e[0].is_expanded = ! e[0].is_expanded;
-/* ***************************************************************************\r
- * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.\r
- *\r
- * Permission is hereby granted, free of charge, to any person obtaining a\r
- * copy of this software and associated documentation files (the "Software"),\r
- * to deal in the Software without restriction, including without limitation\r
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,\r
- * and/or sell copies of the Software, and to permit persons to whom the\r
- * Software is furnished to do so, subject to the following conditions:\r
- *\r
- * The above copyright notice and this permission notice shall be included in\r
- * all copies or substantial portions of the Software.\r
- *\r
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\r
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER\r
- * DEALINGS IN THE SOFTWARE.\r
- * ***************************************************************************\r
- *\r
- * Author: Wongi Lee <wongi11.lee@samsung.com>\r
-*/\r
-\r
-/**\r
- * Extendable List Widget for unlimited data.\r
- * To support more then 1,000 items, special list widget developed.\r
- * Fast initialize and append some element into the DOM tree repeatedly.\r
- * DB connection and works like DB cursor.\r
- *\r
- * HTML Attributes:\r
- *\r
- * data-role: extendablelist\r
- * data-template : jQuery.template ID that populate into extendable list. A button : a <DIV> element with "data-role : button" should be included on data-template.\r
- * data-dbtable : DB Table name. It used as window[DB NAME]. Loaded data should be converted as window object.\r
- * data-extenditems : Number of elements to extend at once.\r
- * \r
- * ID : <UL> element that has "data-role=extendablelist" must have ID attribute.\r
- * Class : <UL> element that has "data-role=extendablelist" should have "vlLoadSuccess" class to guaranty DB loading is completed.\r
- * tmp_load_more : Template ID for "load more" message and button.\r
- *\r
- *\r
- *APIs:\r
- *\r
- * create ( void )\r
- * : API to call _create method. API for AJAX or DB loading callback.\r
- *\r
- * recreate ( Array )\r
- * : Update extendable list with new data array. For example, update with search result.\r
- *\r
- *Examples:\r
- *\r
- * <script id="tmp-3-1-1" type="text/x-jquery-tmpl">\r
- * <li class="ui-li-3-1-1"><span class="ui-li-text-main">${NAME}</span></li>\r
- * </script>\r
- *\r
- * <script id="tmp_load_more" type="text/x-jquery-tmpl"> \r
- * <li class="ui-li-3-1-1" style="text-align:center; margin:0 auto">\r
- * <div data-role="button">Load ${NUM_MORE_ITEMS} more items</div>\r
- * </li>\r
- * </script>\r
- * \r
- * <ul id = "extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-3-1-1" data-dbtable="JSON_DATA">\r
- * </ul>\r
- *\r
- */\r
-\r
-\r
-( function ( $, undefined ) {\r
-\r
- //Keeps track of the number of lists per page UID\r
- //This allows support for multiple nested list in the same page\r
- //https://github.com/jquery/jquery-mobile/issues/1617\r
- var listCountPerPage = {},\r
- TOTAL_ITEMS = 0,\r
- last_index = 0;\r
-\r
- $.widget( "tizen.extendablelist", $.mobile.widget, {\r
- options: {\r
- theme: "s",\r
- countTheme: "c",\r
- headerTheme: "b",\r
- dividerTheme: "b",\r
- splitIcon: "arrow-r",\r
- splitTheme: "b",\r
- inset: false,\r
- id: "", /* Extendable list UL elemet's ID */\r
- extenditems: 50, /* Number of append items */\r
- childSelector: " li", /* To support swipe list */\r
- dbtable: "",\r
- template : "", /* Template for each list item */\r
- loadmore : "tmp_load_more", /* Template for "Load more" message */\r
- scrollview: false,\r
- initSelector: ":jqmData(role='extendablelist')"\r
- },\r
-\r
- _stylerMouseUp: function () {\r
- $( this ).addClass( "ui-btn-up-s" );\r
- $( this ).removeClass( "ui-btn-down-s" );\r
- },\r
-\r
- _stylerMouseDown: function () {\r
- $( this ).addClass( "ui-btn-down-s" );\r
- $( this ).removeClass( "ui-btn-up-s" );\r
- },\r
-\r
- _stylerMouseOver: function () {\r
- $( this ).toggleClass( "ui-btn-hover-s" );\r
- },\r
-\r
- _stylerMouseOut: function () {\r
- $( this ).toggleClass( "ui-btn-hover-s" );\r
- },\r
-\r
- _pushData: function ( template, data ) {\r
- var o = this.options,\r
- i = 0,\r
- dataTable = data,\r
- myTemplate = $( "#" + template ),\r
- loadMoreItems = ( o.extenditems > data.length - last_index ? data.length - last_index : o.extenditems ),\r
- htmlData;\r
-\r
- for (i = 0; i < loadMoreItems; i++ ) {\r
- htmlData = myTemplate.tmpl( dataTable[ i ] );\r
- $( o.id ).append( $( htmlData ).attr( 'id', 'li_' + i ) );\r
- last_index++;\r
- }\r
-\r
- /* After push data, re-style extendable list widget */\r
- $( o.id ).trigger( "create" );\r
- },\r
-\r
- _loadmore: function ( event ) {\r
- var t = this,\r
- o = event.data,\r
- i = 0,\r
- dataTable = window[ o.dbtable ],\r
- myTemplate = $( "#" + o.template ),\r
- loadMoreItems = ( o.extenditems > dataTable.length - last_index ? dataTable.length - last_index : o.extenditems ),\r
- htmlData,\r
- more_items_to_load,\r
- num_next_load_items;\r
-\r
- /* Remove load more message */\r
- $( "#load_more_message" ).remove();\r
-\r
- /* Append More Items */\r
- for ( i = 0; i < loadMoreItems; i++ ) {\r
- htmlData = myTemplate.tmpl( dataTable[ last_index ] );\r
- $( o.id ).append( $( htmlData ).attr( 'id', 'li_' + last_index ) );\r
- last_index++;\r
- }\r
-\r
- /* Append "Load more" message on the last of list */\r
- if ( TOTAL_ITEMS > last_index ) {\r
- myTemplate = $( "#" + o.loadmore );\r
- more_items_to_load = TOTAL_ITEMS - last_index;\r
- num_next_load_items = ( o.extenditems <= more_items_to_load ) ? o.extenditems : more_items_to_load;\r
- htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );\r
-\r
- $( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );\r
- }\r
-\r
- $( o.id ).trigger( "create" );\r
- $( o.id ).extendablelist( "refresh" );\r
- },\r
-\r
- recreate: function ( newArray ) {\r
- var t = this,\r
- o = this.options;\r
-\r
- $( o.id ).empty();\r
-\r
- TOTAL_ITEMS = newArray.length;\r
-\r
- t._pushData( ( o.template), newArray );\r
-\r
- if ( o.childSelector == " ul" ) {\r
- $( o.id + " ul" ).swipelist();\r
- }\r
-\r
- $( o.id ).extendablelist();\r
-\r
- t.refresh( true );\r
- },\r
-\r
- _initList: function () {\r
- var t = this,\r
- o = this.options,\r
- myTemplate,\r
- more_items_to_load,\r
- num_next_load_items,\r
- htmlData;\r
-\r
- /* After AJAX loading success */\r
- o.dbtable = t.element.data( "dbtable" );\r
-\r
- TOTAL_ITEMS = $( window[ o.dbtable ] ).size();\r
-\r
- /* Make Gen list by template */\r
- if ( last_index <= 0 ) {\r
- t._pushData( ( o.template ), window[ o.dbtable ] );\r
-\r
- /* Append "Load more" message on the last of list */\r
- if ( TOTAL_ITEMS > last_index ) {\r
- myTemplate = $( "#" + o.loadmore );\r
- more_items_to_load = TOTAL_ITEMS - last_index;\r
- num_next_load_items = ( o.extenditems <= more_items_to_load) ? o.extenditems : more_items_to_load;\r
- htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );\r
-\r
- $( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );\r
-\r
- $( "#load_more_message" ).live( "click", t.options, t._loadmore );\r
- } else {\r
- /* No more items to load */\r
- $( "#load_more_message" ).die();\r
- $( "#load_more_message" ).remove();\r
- }\r
- }\r
-\r
- if ( o.childSelector == " ul" ) {\r
- $( o.id + " ul" ).swipelist();\r
- }\r
-\r
- $( o.id ).trigger( "create" );\r
-\r
- t.refresh( true );\r
- },\r
-\r
- create: function () {\r
- var o = this.options;\r
-\r
- /* external API for AJAX callback */\r
- this._create( "create" );\r
- },\r
-\r
- _create: function ( event ) {\r
- var t = this,\r
- o = this.options,\r
- $el = this.element;\r
-\r
- // create listview markup\r
- t.element.addClass( function ( i, orig ) {\r
- return orig + " ui-listview ui-extendable-list-container" + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" );\r
- });\r
-\r
- o.id = "#" + $el.attr( "id" );\r
-\r
- if ( $el.data( "extenditems" ) ) {\r
- o.extenditems = parseInt( $el.data( "extenditems" ), 10 );\r
- }\r
-\r
- $( o.id ).bind( "pagehide", function (e) {\r
- $( o.id ).empty();\r
- });\r
-\r
- /* Scroll view */\r
- if ( $( ".ui-scrollview-clip" ).size() > 0) {\r
- o.scrollview = true;\r
- } else {\r
- o.scrollview = false;\r
- }\r
-\r
- /* After DB Load complete, Init Extendable list */\r
- if ( $( o.id ).hasClass( "elLoadSuccess" ) ) {\r
- if ( !$( o.id ).hasClass( "elInitComplete" ) ) {\r
- if ( $el.data( "template" ) ) {\r
- o.template = $el.data( "template" );\r
-\r
- /* to support swipe list, <li> or <ul> can be main node of extendable list. */\r
- if ( $el.data( "swipelist" ) == true ) {\r
- o.childSelector = " ul";\r
- } else {\r
- o.shildSelector = " li";\r
- }\r
- }\r
-\r
- $( o.id ).addClass( "elInitComplete" );\r
- }\r
-\r
- t._initList();\r
- }\r
- },\r
-\r
- destroy : function () {\r
- var o = this.options;\r
-\r
- $( o.id ).empty();\r
-\r
- TOTAL_ITEMS = 0;\r
- last_index = 0;\r
-\r
- $( "#load_more_message" ).die();\r
- },\r
-\r
- _itemApply: function ( $list, item ) {\r
- var $countli = item.find( ".ui-li-count" );\r
-\r
- if ( $countli.length ) {\r
- item.addClass( "ui-li-has-count" );\r
- }\r
-\r
- $countli.addClass( "ui-btn-up-" + ( $list.jqmData( "counttheme" ) || this.options.countTheme ) + " ui-btn-corner-all" );\r
-\r
- // TODO class has to be defined in markup\r
- item.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" ).end()\r
- .find( "p, dl" ).addClass( "ui-li-desc" ).end()\r
- .find( ">img:eq(0), .ui-link-inherit>img:eq(0)" ).addClass( "ui-li-thumb" ).each(function () {\r
- item.addClass( $( this ).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );\r
- }).end()\r
- .find( ".ui-li-aside" ).each(function () {\r
- var $this = $( this );\r
- $this.prependTo( $this.parent() ); //shift aside to front for css float\r
- });\r
- },\r
-\r
- _removeCorners: function ( li, which ) {\r
- var top = "ui-corner-top ui-corner-tr ui-corner-tl",\r
- bot = "ui-corner-bottom ui-corner-br ui-corner-bl";\r
-\r
- li = li.add( li.find( ".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb" ) );\r
-\r
- if ( which === "top" ) {\r
- li.removeClass( top );\r
- } else if ( which === "bottom" ) {\r
- li.removeClass( bot );\r
- } else {\r
- li.removeClass( top + " " + bot );\r
- }\r
- },\r
-\r
- _refreshCorners: function ( create ) {\r
- var $li,\r
- $visibleli,\r
- $topli,\r
- $bottomli;\r
-\r
- if ( this.options.inset ) {\r
- $li = this.element.children( "li" );\r
- // at create time the li are not visible yet so we need to rely on .ui-screen-hidden\r
- $visibleli = create ? $li.not( ".ui-screen-hidden" ) : $li.filter( ":visible" );\r
-\r
- this._removeCorners( $li );\r
-\r
- // Select the first visible li element\r
- $topli = $visibleli.first()\r
- .addClass( "ui-corner-top" );\r
-\r
- $topli.add( $topli.find( ".ui-btn-inner" ) )\r
- .find( ".ui-li-link-alt" )\r
- .addClass( "ui-corner-tr" )\r
- .end()\r
- .find( ".ui-li-thumb" )\r
- .not( ".ui-li-icon" )\r
- .addClass( "ui-corner-tl" );\r
-\r
- // Select the last visible li element\r
- $bottomli = $visibleli.last()\r
- .addClass( "ui-corner-bottom" );\r
-\r
- $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )\r
- .find( ".ui-li-link-alt" )\r
- .addClass( "ui-corner-br" )\r
- .end()\r
- .find( ".ui-li-thumb" )\r
- .not( ".ui-li-icon" )\r
- .addClass( "ui-corner-bl" );\r
- }\r
- },\r
-\r
- refresh: function ( create ) {\r
- this.parentPage = this.element.closest( ".ui-page" );\r
- this._createSubPages();\r
-\r
- var o = this.options,\r
- $list = this.element,\r
- self = this,\r
- dividertheme = $list.jqmData( "dividertheme" ) || o.dividerTheme,\r
- listsplittheme = $list.jqmData( "splittheme" ),\r
- listspliticon = $list.jqmData( "spliticon" ),\r
- li = $list.children( "li" ),\r
- counter = $.support.cssPseudoElement || !$.nodeName( $list[ 0 ], "ol" ) ? 0 : 1,\r
- item,\r
- itemClass,\r
- itemTheme,\r
- a,\r
- last,\r
- splittheme,\r
- countParent,\r
- icon,\r
- pos,\r
- numli;\r
-\r
- if ( counter ) {\r
- $list.find( ".ui-li-dec" ).remove();\r
- }\r
-\r
- for ( pos = 0, numli = li.length; pos < numli; pos++ ) {\r
- item = li.eq( pos );\r
- itemClass = "ui-li";\r
-\r
- // If we're creating the element, we update it regardless\r
- if ( create || !item.hasClass( "ui-li" ) ) {\r
- itemTheme = item.jqmData( "theme" ) || o.theme;\r
- a = item.children( "a" );\r
-\r
- if ( a.length ) {\r
- icon = item.jqmData( "icon" );\r
-\r
- item.buttonMarkup({\r
- wrapperEls: "div",\r
- shadow: false,\r
- corners: false,\r
- iconpos: "right",\r
- /* icon: a.length > 1 || icon === false ? false : icon || "arrow-r",*/\r
- icon: false, /* Remove unnecessary arrow icon */\r
- theme: itemTheme\r
- });\r
-\r
- if ( ( icon != false ) && ( a.length == 1 ) ) {\r
- item.addClass( "ui-li-has-arrow" );\r
- }\r
-\r
- a.first().addClass( "ui-link-inherit" );\r
-\r
- if ( a.length > 1 ) {\r
- itemClass += " ui-li-has-alt";\r
-\r
- last = a.last();\r
- splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;\r
-\r
- last.appendTo(item)\r
- .attr( "title", last.getEncodedText() )\r
- .addClass( "ui-li-link-alt" )\r
- .empty()\r
- .buttonMarkup({\r
- shadow: false,\r
- corners: false,\r
- theme: itemTheme,\r
- icon: false,\r
- iconpos: false\r
- })\r
- .find( ".ui-btn-inner" )\r
- .append(\r
- $( "<span />" ).buttonMarkup( {\r
- shadow : true,\r
- corners : true,\r
- theme : splittheme,\r
- iconpos : "notext",\r
- icon : listspliticon || last.jqmData( "icon" ) || o.splitIcon\r
- })\r
- );\r
- }\r
- } else if ( item.jqmData( "role" ) === "list-divider" ) {\r
-\r
- itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;\r
- item.attr( "role", "heading" );\r
-\r
- //reset counter when a divider heading is encountered\r
- if ( counter ) {\r
- counter = 1;\r
- }\r
-\r
- } else {\r
- itemClass += " ui-li-static ui-body-" + itemTheme;\r
- }\r
- }\r
-\r
- if ( counter && itemClass.indexOf( "ui-li-divider" ) < 0 ) {\r
- countParent = item.is( ".ui-li-static:first" ) ? item : item.find( ".ui-link-inherit" );\r
-\r
- countParent.addClass( "ui-li-jsnumbering" )\r
- .prepend( "<span class='ui-li-dec'>" + (counter++) + ". </span>" );\r
- }\r
-\r
- item.add( item.children( ".ui-btn-inner" ) ).addClass( itemClass );\r
-\r
- self._itemApply( $list, item );\r
- }\r
-\r
- this._refreshCorners( create );\r
- },\r
-\r
- //create a string for ID/subpage url creation\r
- _idStringEscape: function ( str ) {\r
- return str.replace(/\W/g , "-");\r
-\r
- },\r
-\r
- _createSubPages: function () {\r
- var parentList = this.element,\r
- parentPage = parentList.closest( ".ui-page" ),\r
- parentUrl = parentPage.jqmData( "url" ),\r
- parentId = parentUrl || parentPage[ 0 ][ $.expando ],\r
- parentListId = parentList.attr( "id" ),\r
- o = this.options,\r
- dns = "data-" + $.mobile.ns,\r
- self = this,\r
- persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" ),\r
- hasSubPages,\r
- newRemove;\r
-\r
- if ( typeof listCountPerPage[ parentId ] === "undefined" ) {\r
- listCountPerPage[ parentId ] = -1;\r
- }\r
-\r
- parentListId = parentListId || ++listCountPerPage[ parentId ];\r
-\r
- $( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function ( i ) {\r
- var self = this,\r
- list = $( this ),\r
- listId = list.attr( "id" ) || parentListId + "-" + i,\r
- parent = list.parent(),\r
- nodeEls,\r
- title = nodeEls.first().getEncodedText(),//url limits to first 30 chars of text\r
- id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId,\r
- theme = list.jqmData( "theme" ) || o.theme,\r
- countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,\r
- newPage,\r
- anchor;\r
-\r
- nodeEls = $( list.prevAll().toArray().reverse() );\r
- nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim(parent.contents()[ 0 ].nodeValue) + "</span>" );\r
-\r
- //define hasSubPages for use in later removal\r
- hasSubPages = true;\r
-\r
- newPage = list.detach()\r
- .wrap( "<div " + dns + "role='page' " + dns + "url='" + id + "' " + dns + "theme='" + theme + "' " + dns + "count-theme='" + countTheme + "'><div " + dns + "role='content'></div></div>" )\r
- .parent()\r
- .before( "<div " + dns + "role='header' " + dns + "theme='" + o.headerTheme + "'><div class='ui-title'>" + title + "</div></div>" )\r
- .after( persistentFooterID ? $( "<div " + dns + "role='footer' " + dns + "id='" + persistentFooterID + "'>" ) : "" )\r
- .parent()\r
- .appendTo( $.mobile.pageContainer );\r
-\r
- newPage.page();\r
-\r
- anchor = parent.find('a:first');\r
-\r
- if ( !anchor.length ) {\r
- anchor = $( "<a/>" ).html( nodeEls || title ).prependTo( parent.empty() );\r
- }\r
-\r
- anchor.attr( "href", "#" + id );\r
-\r
- }).extendablelist();\r
-\r
- // on pagehide, remove any nested pages along with the parent page, as long as they aren't active\r
- // and aren't embedded\r
- if ( hasSubPages &&\r
- parentPage.is( ":jqmData(external-page='true')" ) &&\r
- parentPage.data( "page" ).options.domCache === false ) {\r
-\r
- newRemove = function ( e, ui ) {\r
- var nextPage = ui.nextPage, npURL;\r
-\r
- if ( ui.nextPage ) {\r
- npURL = nextPage.jqmData( "url" );\r
- if ( npURL.indexOf( parentUrl + "&" + $.mobile.subPageUrlKey ) !== 0 ) {\r
- self.childPages().remove();\r
- parentPage.remove();\r
- }\r
- }\r
- };\r
-\r
- // unbind the original page remove and replace with our specialized version\r
- parentPage\r
- .unbind( "pagehide.remove" )\r
- .bind( "pagehide.remove", newRemove);\r
- }\r
- },\r
-\r
- // TODO sort out a better way to track sub pages of the extendable listview this is brittle\r
- childPages: function () {\r
- var parentUrl = this.parentPage.jqmData( "url" );\r
-\r
- return $( ":jqmData(url^='" + parentUrl + "&" + $.mobile.subPageUrlKey + "')" );\r
- }\r
- });\r
-\r
- //auto self-init widgets\r
- $( document ).bind( "pagecreate create", function ( e ) {\r
- $( $.tizen.extendablelist.prototype.options.initSelector, e.target ).extendablelist();\r
- });\r
-\r
-}( jQuery ));\r
+/* ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ *
+ * 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.
+ * ***************************************************************************
+ *
+ * Author: Wongi Lee <wongi11.lee@samsung.com>
+*/
+
+/**
+ * Extendable List Widget for unlimited data.
+ * To support more then 1,000 items, special list widget developed.
+ * Fast initialize and append some element into the DOM tree repeatedly.
+ * DB connection and works like DB cursor.
+ *
+ * HTML Attributes:
+ *
+ * data-role: extendablelist
+ * data-template : jQuery.template ID that populate into extendable list. A button : a <DIV> element with "data-role : button" should be included on data-template.
+ * data-dbtable : DB Table name. It used as window[DB NAME]. Loaded data should be converted as window object.
+ * data-extenditems : Number of elements to extend at once.
+ *
+ * ID : <UL> element that has "data-role=extendablelist" must have ID attribute.
+ * Class : <UL> element that has "data-role=extendablelist" should have "vlLoadSuccess" class to guaranty DB loading is completed.
+ * tmp_load_more : Template ID for "load more" message and button.
+ *
+ *
+ *APIs:
+ *
+ * create ( void )
+ * : API to call _create method. API for AJAX or DB loading callback.
+ *
+ * recreate ( Array )
+ * : Update extendable list with new data array. For example, update with search result.
+ *
+ *Examples:
+ *
+ * <script id="tmp-3-1-1" type="text/x-jquery-tmpl">
+ * <li class="ui-li-3-1-1"><span class="ui-li-text-main">${NAME}</span></li>
+ * </script>
+ *
+ * <script id="tmp_load_more" type="text/x-jquery-tmpl">
+ * <li class="ui-li-3-1-1" style="text-align:center; margin:0 auto">
+ * <div data-role="button">Load ${NUM_MORE_ITEMS} more items</div>
+ * </li>
+ * </script>
+ *
+ * <ul id = "extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-3-1-1" data-dbtable="JSON_DATA">
+ * </ul>
+ *
+ */
+
+
+( function ( $, undefined ) {
+
+ //Keeps track of the number of lists per page UID
+ //This allows support for multiple nested list in the same page
+ //https://github.com/jquery/jquery-mobile/issues/1617
+ var listCountPerPage = {},
+ TOTAL_ITEMS = 0,
+ last_index = 0;
+
+ $.widget( "tizen.extendablelist", $.mobile.widget, {
+ options: {
+ theme: "s",
+ countTheme: "c",
+ headerTheme: "b",
+ dividerTheme: "b",
+ splitIcon: "arrow-r",
+ splitTheme: "b",
+ inset: false,
+ id: "", /* Extendable list UL elemet's ID */
+ extenditems: 50, /* Number of append items */
+ childSelector: " li", /* To support swipe list */
+ dbtable: "",
+ template : "", /* Template for each list item */
+ loadmore : "tmp_load_more", /* Template for "Load more" message */
+ scrollview: false,
+ initSelector: ":jqmData(role='extendablelist')"
+ },
+
+ _stylerMouseUp: function () {
+ $( this ).addClass( "ui-btn-up-s" );
+ $( this ).removeClass( "ui-btn-down-s" );
+ },
+
+ _stylerMouseDown: function () {
+ $( this ).addClass( "ui-btn-down-s" );
+ $( this ).removeClass( "ui-btn-up-s" );
+ },
+
+ _stylerMouseOver: function () {
+ $( this ).toggleClass( "ui-btn-hover-s" );
+ },
+
+ _stylerMouseOut: function () {
+ $( this ).toggleClass( "ui-btn-hover-s" );
+ $( this ).addClass( "ui-btn-up-s" );
+ $( this ).removeClass( "ui-btn-down-s" );
+ },
+
+ _pushData: function ( template, data ) {
+ var o = this.options,
+ t = this,
+ i = 0,
+ dataTable = data,
+ myTemplate = $( "#" + template ),
+ loadMoreItems = ( o.extenditems > data.length - last_index ? data.length - last_index : o.extenditems ),
+ htmlData;
+
+ for (i = 0; i < loadMoreItems; i++ ) {
+ htmlData = myTemplate.tmpl( dataTable[ i ] );
+ $( o.id ).append( $( htmlData ).attr( 'id', 'li_' + i ) );
+
+ /* Add style */
+ $( o.id + ">" + o.childSelector )
+ .addClass( "ui-btn-up-s" )
+ .bind( "mouseup", t._stylerMouseUp )
+ .bind( "mousedown", t._stylerMouseDown )
+ .bind( "mouseover", t._stylerMouseOver )
+ .bind( "mouseout", t._stylerMouseOut );
+
+ last_index++;
+ }
+
+ /* After push data, re-style extendable list widget */
+ $( o.id ).trigger( "create" );
+ },
+
+ _loadmore: function ( event ) {
+ var t = this,
+ o = event.data,
+ i = 0,
+ dataTable = window[ o.dbtable ],
+ myTemplate = $( "#" + o.template ),
+ loadMoreItems = ( o.extenditems > dataTable.length - last_index ? dataTable.length - last_index : o.extenditems ),
+ htmlData,
+ more_items_to_load,
+ num_next_load_items;
+
+ /* Remove load more message */
+ $( "#load_more_message" ).remove();
+
+ /* Append More Items */
+ for ( i = 0; i < loadMoreItems; i++ ) {
+ htmlData = myTemplate.tmpl( dataTable[ last_index ] );
+ $( o.id ).append( $( htmlData ).attr( 'id', 'li_' + last_index ) );
+ last_index++;
+ }
+
+ /* Append "Load more" message on the last of list */
+ if ( TOTAL_ITEMS > last_index ) {
+ myTemplate = $( "#" + o.loadmore );
+ more_items_to_load = TOTAL_ITEMS - last_index;
+ num_next_load_items = ( o.extenditems <= more_items_to_load ) ? o.extenditems : more_items_to_load;
+ htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );
+
+ $( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );
+ }
+
+ $( o.id ).trigger( "create" );
+ $( o.id ).extendablelist( "refresh" );
+ },
+
+ recreate: function ( newArray ) {
+ var t = this,
+ o = this.options,
+ myTemplate,
+ more_items_to_load,
+ num_next_load_items,
+ htmlData;
+
+ $( o.id ).empty();
+
+ last_index = 0;
+ TOTAL_ITEMS = newArray.length;
+
+ t._pushData( ( o.template), newArray );
+
+ /* Append "Load more" message on the last of list */
+ if ( TOTAL_ITEMS > last_index ) {
+ myTemplate = $( "#" + o.loadmore );
+ more_items_to_load = TOTAL_ITEMS - last_index;
+ num_next_load_items = ( o.extenditems <= more_items_to_load) ? o.extenditems : more_items_to_load;
+ htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );
+
+ $( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );
+
+ $( "#load_more_message" ).live( "click", t.options, t._loadmore );
+ } else {
+ /* No more items to load */
+ $( "#load_more_message" ).die();
+ $( "#load_more_message" ).remove();
+ }
+
+ if ( o.childSelector == " ul" ) {
+ $( o.id + " ul" ).swipelist();
+ }
+
+ $( o.id ).extendablelist();
+
+ t.refresh( true );
+ },
+
+ _initList: function () {
+ var t = this,
+ o = this.options,
+ myTemplate,
+ more_items_to_load,
+ num_next_load_items,
+ htmlData;
+
+ /* After AJAX loading success */
+ o.dbtable = t.element.data( "dbtable" );
+
+ TOTAL_ITEMS = $( window[ o.dbtable ] ).size();
+
+ /* Make Gen list by template */
+ if ( last_index <= 0 ) {
+ t._pushData( ( o.template ), window[ o.dbtable ] );
+
+ /* Append "Load more" message on the last of list */
+ if ( TOTAL_ITEMS > last_index ) {
+ myTemplate = $( "#" + o.loadmore );
+ more_items_to_load = TOTAL_ITEMS - last_index;
+ num_next_load_items = ( o.extenditems <= more_items_to_load) ? o.extenditems : more_items_to_load;
+ htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );
+
+ $( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );
+
+ $( "#load_more_message" ).live( "click", t.options, t._loadmore );
+ } else {
+ /* No more items to load */
+ $( "#load_more_message" ).die();
+ $( "#load_more_message" ).remove();
+ }
+ }
+
+ if ( o.childSelector == " ul" ) {
+ $( o.id + " ul" ).swipelist();
+ }
+
+ $( o.id ).trigger( "create" );
+
+ t.refresh( true );
+ },
+
+ create: function () {
+ var o = this.options;
+
+ /* external API for AJAX callback */
+ this._create( "create" );
+ },
+
+ _create: function ( event ) {
+ var t = this,
+ o = this.options,
+ $el = this.element;
+
+ // create listview markup
+ t.element.addClass( function ( i, orig ) {
+ return orig + " ui-listview ui-extendable-list-container" + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" );
+ });
+
+ o.id = "#" + $el.attr( "id" );
+
+ if ( $el.data( "extenditems" ) ) {
+ o.extenditems = parseInt( $el.data( "extenditems" ), 10 );
+ }
+
+ $( o.id ).bind( "pagehide", function (e) {
+ $( o.id ).empty();
+ });
+
+ /* Scroll view */
+ if ( $( ".ui-scrollview-clip" ).size() > 0) {
+ o.scrollview = true;
+ } else {
+ o.scrollview = false;
+ }
+
+ /* After DB Load complete, Init Extendable list */
+ if ( $( o.id ).hasClass( "elLoadSuccess" ) ) {
+ if ( !$( o.id ).hasClass( "elInitComplete" ) ) {
+ if ( $el.data( "template" ) ) {
+ o.template = $el.data( "template" );
+
+ /* to support swipe list, <li> or <ul> can be main node of extendable list. */
+ if ( $el.data( "swipelist" ) == true ) {
+ o.childSelector = " ul";
+ } else {
+ o.shildSelector = " li";
+ }
+ }
+
+ $( o.id ).addClass( "elInitComplete" );
+ }
+
+ t._initList();
+ }
+ },
+
+ destroy : function () {
+ var o = this.options;
+
+ $( o.id ).empty();
+
+ TOTAL_ITEMS = 0;
+ last_index = 0;
+
+ $( "#load_more_message" ).die();
+ },
+
+ _itemApply: function ( $list, item ) {
+ var $countli = item.find( ".ui-li-count" );
+
+ if ( $countli.length ) {
+ item.addClass( "ui-li-has-count" );
+ }
+
+ $countli.addClass( "ui-btn-up-" + ( $list.jqmData( "counttheme" ) || this.options.countTheme ) + " ui-btn-corner-all" );
+
+ // TODO class has to be defined in markup
+ item.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" ).end()
+ .find( "p, dl" ).addClass( "ui-li-desc" ).end()
+ .find( ">img:eq(0), .ui-link-inherit>img:eq(0)" ).addClass( "ui-li-thumb" ).each(function () {
+ item.addClass( $( this ).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
+ }).end()
+ .find( ".ui-li-aside" ).each(function () {
+ var $this = $( this );
+ $this.prependTo( $this.parent() ); //shift aside to front for css float
+ });
+ },
+
+ _removeCorners: function ( li, which ) {
+ var top = "ui-corner-top ui-corner-tr ui-corner-tl",
+ bot = "ui-corner-bottom ui-corner-br ui-corner-bl";
+
+ li = li.add( li.find( ".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb" ) );
+
+ if ( which === "top" ) {
+ li.removeClass( top );
+ } else if ( which === "bottom" ) {
+ li.removeClass( bot );
+ } else {
+ li.removeClass( top + " " + bot );
+ }
+ },
+
+ _refreshCorners: function ( create ) {
+ var $li,
+ $visibleli,
+ $topli,
+ $bottomli;
+
+ if ( this.options.inset ) {
+ $li = this.element.children( "li" );
+ // at create time the li are not visible yet so we need to rely on .ui-screen-hidden
+ $visibleli = create ? $li.not( ".ui-screen-hidden" ) : $li.filter( ":visible" );
+
+ this._removeCorners( $li );
+
+ // Select the first visible li element
+ $topli = $visibleli.first()
+ .addClass( "ui-corner-top" );
+
+ $topli.add( $topli.find( ".ui-btn-inner" ) )
+ .find( ".ui-li-link-alt" )
+ .addClass( "ui-corner-tr" )
+ .end()
+ .find( ".ui-li-thumb" )
+ .not( ".ui-li-icon" )
+ .addClass( "ui-corner-tl" );
+
+ // Select the last visible li element
+ $bottomli = $visibleli.last()
+ .addClass( "ui-corner-bottom" );
+
+ $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )
+ .find( ".ui-li-link-alt" )
+ .addClass( "ui-corner-br" )
+ .end()
+ .find( ".ui-li-thumb" )
+ .not( ".ui-li-icon" )
+ .addClass( "ui-corner-bl" );
+ }
+ },
+
+ refresh: function ( create ) {
+ this.parentPage = this.element.closest( ".ui-page" );
+ this._createSubPages();
+
+ var o = this.options,
+ $list = this.element,
+ self = this,
+ dividertheme = $list.jqmData( "dividertheme" ) || o.dividerTheme,
+ listsplittheme = $list.jqmData( "splittheme" ),
+ listspliticon = $list.jqmData( "spliticon" ),
+ li = $list.children( "li" ),
+ counter = $.support.cssPseudoElement || !$.nodeName( $list[ 0 ], "ol" ) ? 0 : 1,
+ item,
+ itemClass,
+ itemTheme,
+ a,
+ last,
+ splittheme,
+ countParent,
+ icon,
+ pos,
+ numli;
+
+ if ( counter ) {
+ $list.find( ".ui-li-dec" ).remove();
+ }
+
+ for ( pos = 0, numli = li.length; pos < numli; pos++ ) {
+ item = li.eq( pos );
+ itemClass = "ui-li";
+
+ // If we're creating the element, we update it regardless
+ if ( create || !item.hasClass( "ui-li" ) ) {
+ itemTheme = item.jqmData( "theme" ) || o.theme;
+ a = item.children( "a" );
+
+ if ( a.length ) {
+ icon = item.jqmData( "icon" );
+
+ item.buttonMarkup({
+ wrapperEls: "div",
+ shadow: false,
+ corners: false,
+ iconpos: "right",
+ /* icon: a.length > 1 || icon === false ? false : icon || "arrow-r",*/
+ icon: false, /* Remove unnecessary arrow icon */
+ theme: itemTheme
+ });
+
+ if ( ( icon != false ) && ( a.length == 1 ) ) {
+ item.addClass( "ui-li-has-arrow" );
+ }
+
+ a.first().addClass( "ui-link-inherit" );
+
+ if ( a.length > 1 ) {
+ itemClass += " ui-li-has-alt";
+
+ last = a.last();
+ splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;
+
+ last.appendTo(item)
+ .attr( "title", last.getEncodedText() )
+ .addClass( "ui-li-link-alt" )
+ .empty()
+ .buttonMarkup({
+ shadow: false,
+ corners: false,
+ theme: itemTheme,
+ icon: false,
+ iconpos: false
+ })
+ .find( ".ui-btn-inner" )
+ .append(
+ $( "<span />" ).buttonMarkup( {
+ shadow : true,
+ corners : true,
+ theme : splittheme,
+ iconpos : "notext",
+ icon : listspliticon || last.jqmData( "icon" ) || o.splitIcon
+ })
+ );
+ }
+ } else if ( item.jqmData( "role" ) === "list-divider" ) {
+
+ itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;
+ item.attr( "role", "heading" );
+
+ //reset counter when a divider heading is encountered
+ if ( counter ) {
+ counter = 1;
+ }
+
+ } else {
+ itemClass += " ui-li-static ui-body-" + itemTheme;
+ }
+ }
+
+ if ( counter && itemClass.indexOf( "ui-li-divider" ) < 0 ) {
+ countParent = item.is( ".ui-li-static:first" ) ? item : item.find( ".ui-link-inherit" );
+
+ countParent.addClass( "ui-li-jsnumbering" )
+ .prepend( "<span class='ui-li-dec'>" + (counter++) + ". </span>" );
+ }
+
+ item.add( item.children( ".ui-btn-inner" ) ).addClass( itemClass );
+
+ self._itemApply( $list, item );
+ }
+
+ this._refreshCorners( create );
+ },
+
+ //create a string for ID/subpage url creation
+ _idStringEscape: function ( str ) {
+ return str.replace(/\W/g , "-");
+
+ },
+
+ _createSubPages: function () {
+ var parentList = this.element,
+ parentPage = parentList.closest( ".ui-page" ),
+ parentUrl = parentPage.jqmData( "url" ),
+ parentId = parentUrl || parentPage[ 0 ][ $.expando ],
+ parentListId = parentList.attr( "id" ),
+ o = this.options,
+ dns = "data-" + $.mobile.ns,
+ self = this,
+ persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" ),
+ hasSubPages,
+ newRemove;
+
+ if ( typeof listCountPerPage[ parentId ] === "undefined" ) {
+ listCountPerPage[ parentId ] = -1;
+ }
+
+ parentListId = parentListId || ++listCountPerPage[ parentId ];
+
+ $( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function ( i ) {
+ var self = this,
+ list = $( this ),
+ listId = list.attr( "id" ) || parentListId + "-" + i,
+ parent = list.parent(),
+ nodeEls,
+ title = nodeEls.first().getEncodedText(),//url limits to first 30 chars of text
+ id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId,
+ theme = list.jqmData( "theme" ) || o.theme,
+ countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,
+ newPage,
+ anchor;
+
+ nodeEls = $( list.prevAll().toArray().reverse() );
+ nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim(parent.contents()[ 0 ].nodeValue) + "</span>" );
+
+ //define hasSubPages for use in later removal
+ hasSubPages = true;
+
+ newPage = list.detach()
+ .wrap( "<div " + dns + "role='page' " + dns + "url='" + id + "' " + dns + "theme='" + theme + "' " + dns + "count-theme='" + countTheme + "'><div " + dns + "role='content'></div></div>" )
+ .parent()
+ .before( "<div " + dns + "role='header' " + dns + "theme='" + o.headerTheme + "'><div class='ui-title'>" + title + "</div></div>" )
+ .after( persistentFooterID ? $( "<div " + dns + "role='footer' " + dns + "id='" + persistentFooterID + "'>" ) : "" )
+ .parent()
+ .appendTo( $.mobile.pageContainer );
+
+ newPage.page();
+
+ anchor = parent.find('a:first');
+
+ if ( !anchor.length ) {
+ anchor = $( "<a/>" ).html( nodeEls || title ).prependTo( parent.empty() );
+ }
+
+ anchor.attr( "href", "#" + id );
+
+ }).extendablelist();
+
+ // on pagehide, remove any nested pages along with the parent page, as long as they aren't active
+ // and aren't embedded
+ if ( hasSubPages &&
+ parentPage.is( ":jqmData(external-page='true')" ) &&
+ parentPage.data( "page" ).options.domCache === false ) {
+
+ newRemove = function ( e, ui ) {
+ var nextPage = ui.nextPage, npURL;
+
+ if ( ui.nextPage ) {
+ npURL = nextPage.jqmData( "url" );
+ if ( npURL.indexOf( parentUrl + "&" + $.mobile.subPageUrlKey ) !== 0 ) {
+ self.childPages().remove();
+ parentPage.remove();
+ }
+ }
+ };
+
+ // unbind the original page remove and replace with our specialized version
+ parentPage
+ .unbind( "pagehide.remove" )
+ .bind( "pagehide.remove", newRemove);
+ }
+ },
+
+ // TODO sort out a better way to track sub pages of the extendable listview this is brittle
+ childPages: function () {
+ var parentUrl = this.parentPage.jqmData( "url" );
+
+ return $( ":jqmData(url^='" + parentUrl + "&" + $.mobile.subPageUrlKey + "')" );
+ }
+ });
+
+ //auto self-init widgets
+ $( document ).bind( "pagecreate create", function ( e ) {
+ $( $.tizen.extendablelist.prototype.options.initSelector, e.target ).extendablelist();
+ });
+
+}( jQuery ));
*/
/**
- * 'Handler' is widget that is working in conjunction with 'scrollview'.
- * 'Handler' is supporting 'scroll event( up/down )' and is indicating scroll
- * position.
+ * ‘Handler’ is a widget helping a user to scroll a window or panel.
+ * It is different from the scrollview feature in that the handler has a fixed size
+ * and disappears when a scroll size is smaller than a parent window's size.
+ * If the handler widget is activated, a scroll bar on the screen will be deactivated.
+ * The handler widget supports scrolling up and down and indicates the position of the scrolled window.
*
* HTML Attributes:
*
*
* APIs:
*
- * enableHandler ( void )
- * : Get a status that whether enable.
* enableHandler ( boolean )
- * : Set a status that whether enable.
+ * : Get or set the use of Handler.
+ * If the value is ‘true’, it will be run Handler.
+ * If the value is ‘false’, it will be not run Handler.
+ * If no value is specified, will act as a getter.
*
* Events:
*
<div id="hsvpicker" class="ui-hsvpicker">
<div class="hsvpicker-clrchannel-container jquery-mobile-ui-widget">
<div class="hsvpicker-arrow-btn-container">
- <a href="#" class="hsvpicker-arrow-btn" data-target="hue" data-location="left" data-inline="true" data-icon="reveal-left"></a>
+ <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="hue" data-location="left" data-inline="true" data-icon="reveal-left"></a>
</div>
<div class="hsvpicker-clrchannel-masks-container">
<div class="hsvpicker-clrchannel-mask hsvpicker-clrchannel-mask-white"></div>
<div id="hsvpicker-hue-selector" class="hsvpicker-clrchannel-selector ui-corner-all"></div>
</div>
<div class="hsvpicker-arrow-btn-container">
- <a href="#" class="hsvpicker-arrow-btn" data-target="hue" data-location="right" data-inline="true" data-icon="reveal"></a>
+ <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="hue" data-location="right" data-inline="true" data-icon="reveal"></a>
</div>
</div>
<div class="hsvpicker-clrchannel-container jquery-mobile-ui-widget">
<div class="hsvpicker-arrow-btn-container">
- <a href="#" class="hsvpicker-arrow-btn" data-target="sat" data-location="left" data-inline="true" data-icon="reveal-left"></a>
+ <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="sat" data-location="left" data-inline="true" data-icon="reveal-left"></a>
</div>
<div class="hsvpicker-clrchannel-masks-container">
<div id="hsvpicker-sat-hue" class="hsvpicker-clrchannel-mask"></div>
<div id="hsvpicker-sat-selector" class="hsvpicker-clrchannel-selector ui-corner-all"></div>
</div>
<div class="hsvpicker-arrow-btn-container">
- <a href="#" class="hsvpicker-arrow-btn" data-target="sat" data-location="right" data-inline="true" data-icon="reveal"></a>
+ <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="sat" data-location="right" data-inline="true" data-icon="reveal"></a>
</div>
</div>
<div class="hsvpicker-clrchannel-container jquery-mobile-ui-widget">
<div class="hsvpicker-arrow-btn-container">
- <a href="#" class="hsvpicker-arrow-btn" data-target="val" data-location="left" data-inline="true" data-icon="reveal-left"></a>
+ <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="val" data-location="left" data-inline="true" data-icon="reveal-left"></a>
</div>
<div class="hsvpicker-clrchannel-masks-container">
<div class="hsvpicker-clrchannel-mask hsvpicker-clrchannel-mask-white"></div>
<div id="hsvpicker-val-selector" class="hsvpicker-clrchannel-selector ui-corner-all"></div>
</div>
<div class="hsvpicker-arrow-btn-container">
- <a href="#" class="hsvpicker-arrow-btn" data-target="val" data-location="right" data-inline="true" data-icon="reveal"></a>
+ <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="val" data-location="right" data-inline="true" data-icon="reveal"></a>
</div>
</div>
</div>
*/
/*
- * Notification widget
+ * Imageslider widget
*
* HTML Attributes
*
* data-role: set to 'imageslider'
- * data-start-index: start index
+ * data-index: start index
* data-vertical-align: set to top or middle or bottom.
*
* APIs
*
- * add(image_file): add the image (parameter: url of iamge)
- * del(image_index): delete the image (parameter: index of image)
- * refresh(): refresh the widget, should be called after add or del.
+ * add(file): add the image (parameter: url of iamge)
+ * delete(index): delete the image (parameter: index of image)
+ * refresh(index): refresh the widget, should be called after add or del. (parameter: start index)
*
* Events
*
*
* Example
*
- * <div data-role="imageslider" id="imageslider" data-start-index="3" data-vertical-align="middle">
+ * <div data-role="imageslider" id="imageslider" data-index="3" data-vertical-align="middle">
* <img src="01.jpg">
* <img src="02.jpg">
* <img src="03.jpg">
* });
*
* $('#imageslider-del').bind('vmouseup', function ( e ) {
- * $('#imageslider').imageslider('del');
+ * $('#imageslider').imageslider('delete');
* });
*
*/
(function ( $, window, undefined ) {
$.widget( "tizen.imageslider", $.mobile.widget, {
options: {
- photoFlicking: false
+ flicking: false,
+ duration: 500
},
dragging: false,
align_type: null,
direction: 1,
container: null,
- interval: null,
+ loader: [],
- _resize: function ( obj ) {
- var width,
- height,
- margin = 40,
+ _resize: function ( index ) {
+ var img = this.images[index],
+ width = this.images[index].width(),
+ height = this.images[index].height(),
+ margin = 0,
ratio,
img_max_width = this.max_width - margin,
img_max_height = this.max_height - margin;
- height = obj.height();
- width = obj.width();
-
ratio = height / width;
if ( width > img_max_width ) {
- obj.width( img_max_width );
- obj.height( img_max_width * ratio );
+ img.width( img_max_width );
+ img.height( img_max_width * ratio );
}
- height = obj.height();
+ height = img.height();
if ( height > img_max_height ) {
- obj.height( img_max_height );
- obj.width( img_max_height / ratio );
+ img.height( img_max_height );
+ img.width( img_max_height / ratio );
}
},
- _align: function ( obj, img ) {
- var img_top = 0;
+ _align: function ( index, obj ) {
+ var img = this.images[index],
+ img_top = 0;
if ( !obj.length ) {
return;
obj.css( 'top', img_top + 'px' );
},
- _detach: function ( image_index, obj ) {
+ _attach: function ( index, obj ) {
+ var self = this,
+ processing = function () {
+ self._resize( index );
+ self._align( index, obj );
+ };
+
if ( !obj.length ) {
return;
}
- if ( image_index < 0 ) {
+ if ( index < 0 ) {
return;
}
- if ( image_index >= this.images.length ) {
+ if ( index >= this.images.length ) {
return;
}
- this.images[image_index].detach();
- obj.css( "display", "none" );
+ obj.css( "display", "block" );
+ obj.append( this.images[index] );
+
+ if ( this.images[index].height() ) {
+ processing();
+ } else {
+ this.loader[index] = setInterval( function () {
+ if ( !self.images[index].height() ) {
+ return;
+ }
+
+ processing();
+ clearInterval( self.loader[index] );
+ }, 10);
+ }
},
- _attach: function ( image_index, obj ) {
+ _detach: function ( index, obj ) {
if ( !obj.length ) {
return;
}
- if ( image_index < 0 ) {
+ if ( index < 0 ) {
return;
}
- if ( image_index >= this.images.length ) {
+ if ( index >= this.images.length ) {
return;
}
- obj.css( "display", "block" );
- obj.append( this.images[image_index] );
- this._resize( this.images[image_index] );
- this._align( obj, this.images[image_index] );
+ obj.css( "display", "none" );
+ this.images[index].removeAttr("style");
+ this.images[index].detach();
+
+ clearInterval( this.loader[index] );
},
_drag: function ( _x ) {
return;
}
- if ( this.options.photoFlicking === false ) {
+ if ( this.options.flicking === false ) {
delta = this.org_x - _x;
// first image
this.cur_img.css( 'left', coord_x + 'px' );
if ( this.next_img.length ) {
- this.next_img.css( 'left', coord_x + this.max_width + 'px' );
+ this.next_img.css( 'left', coord_x + this.window_width + 'px' );
}
if ( this.prev_img.length ) {
- this.prev_img.css( 'left', coord_x - this.max_width + 'px' );
+ this.prev_img.css( 'left', coord_x - this.window_width + 'px' );
}
},
this.index++;
if ( this.next_img.length ) {
- this.next_img.css( 'left', this.max_width + 'px' );
+ this.next_img.css( 'left', this.window_width + 'px' );
this._attach( this.index + 1, this.next_img );
}
this.index--;
if ( this.prev_img.length ) {
- this.prev_img.css( 'left', -this.max_width + 'px' );
+ this.prev_img.css( 'left', -this.window_width + 'px' );
this._attach( this.index - 1, this.prev_img );
}
}
}
- sec = 500;
+ sec = this.options.duration;
self = this;
this.moving = true;
- this.interval = setInterval( function () {
+ setTimeout( function () {
self.moving = false;
- clearInterval( self.interval );
}, sec - 50 );
this.cur_img.animate( { left: 0 }, sec );
if ( this.next_img.length ) {
- this.next_img.animate( { left: this.max_width }, sec );
+ this.next_img.animate( { left: this.window_width }, sec );
}
if ( this.prev_img.length ) {
- this.prev_img.animate( { left: -this.max_width }, sec );
+ this.prev_img.animate( { left: -this.window_width }, sec );
}
},
},
_show: function () {
+ /* resizing */
+ this.window_width = $( window ).width();
+ this.max_width = this._get_width();
+ this.max_height = this._get_height();
+ this.container.css( 'height', this.max_height );
+
this.cur_img = $( 'div' ).find( '.ui-imageslider-bg:eq(' + this.index + ')' );
this.prev_img = this.cur_img.prev();
this.next_img = this.cur_img.next();
this._attach( this.index + 1, this.next_img );
if ( this.prev_img.length ) {
- this.prev_img.css( 'left', -this.max_width + 'px' );
+ this.prev_img.css( 'left', -this.window_width + 'px' );
}
this.cur_img.css( 'left', '0px' );
if ( this.next_img.length ) {
- this.next_img.css( 'left', this.max_width + 'px' );
+ this.next_img.css( 'left', this.window_width + 'px' );
}
},
this._del_event();
},
+ _get_width: function () {
+ var $page = $( this.element ).parentsUntil( 'ui-page' ),
+ $content = $page.children( '.ui-content' ),
+ padding = parseFloat( $content.css( 'padding-left' ) )
+ + parseFloat( $content.css( 'padding-right' ) ),
+ content_w = $( window ).width() - padding;
+
+ return content_w;
+ },
+
_get_height: function () {
- var $page = $( '.ui-page' ),
+ var $page = $( this.element ).parentsUntil( 'ui-page' ),
$content = $page.children( '.ui-content' ),
- $header = $page.children( '.ui-header' ),
- $footer = $page.children( '.ui-footer' ),
- header_h = $header.outerHeight(),
- footer_h = $footer.outerHeight(),
- padding = parseFloat( $content.css( 'padding-top' ) ) + parseFloat( $content.css( 'padding-bottom' ) ),
- content_h = $( window ).height() - header_h - footer_h - padding * 2;
+ header_h = $page.children( '.ui-header' ).outerHeight() || 0,
+ footer_h = $page.children( '.ui-footer' ).outerHeight() || 0,
+ padding = parseFloat( $content.css( 'padding-top' ) )
+ + parseFloat( $content.css( 'padding-bottom' ) ),
+ content_h = $( window ).height() - header_h - footer_h - padding;
return content_h;
},
_create: function () {
var temp_img,
- start_index,
+ self = this,
+ index,
i = 0;
$( this.element ).wrapInner( '<div class="ui-imageslider"></div>' );
this.container = $( this.element ).find('.ui-imageslider');
- this.max_width = $( window ).width();
- this.max_height = this._get_height();
- this.container.css( 'height', this.max_height );
-
temp_img = $( 'div' ).find( '.ui-imageslider-bg:first' );
while ( temp_img.length ) {
this.images[i].detach();
}
- start_index = parseInt( $( this.element ).attr( 'data-start-index' ), 10 );
- if ( start_index === undefined ) {
- start_index = 0;
+ index = parseInt( $( this.element ).jqmData( 'index' ), 10 );
+ if ( !index ) {
+ index = 0;
}
- if ( start_index < 0 ) {
- start_index = 0;
+ if ( index < 0 ) {
+ index = 0;
}
- if ( start_index >= this.images.length ) {
- start_index = this.images.length - 1;
+ if ( index >= this.images.length ) {
+ index = this.images.length - 1;
}
- this.index = start_index;
+ this.index = index;
+
+ this.align_type = $( this.element ).jqmData( 'vertical-align' );
- this.align_type = $( this.element ).attr( 'data-vertical-align' );
+ $( window ).bind( 'resize', function () {
+ self.refresh();
+ });
},
_update: function () {
this._show();
},
- add: function ( image_file ) {
- this.images_hold.push( image_file );
+ add: function ( file ) {
+ this.images_hold.push( file );
},
- del: function ( image_index ) {
+ delete: function ( index ) {
var temp_img;
- if ( image_index === undefined ) {
- image_index = this.index;
+ if ( index === undefined ) {
+ index = this.index;
}
- if ( image_index < 0 || image_index >= this.images.length ) {
+ if ( index < 0 || index >= this.images.length ) {
return;
}
- if ( image_index == this.index ) {
+ if ( index == this.index ) {
temp_img = this.cur_img;
if ( this.index == 0 ) {
this.cur_img = this.prev_img;
this.prev_img = this.prev_img.prev();
if ( this.prev_img.length ) {
- this.prev_img.css( 'left', -this.max_width );
- this._attach( image_index - 2, this.prev_img );
+ this.prev_img.css( 'left', -this.window_width );
+ this._attach( index - 2, this.prev_img );
}
this.index--;
} else {
this.cur_img = this.next_img;
this.next_img = this.next_img.next();
if ( this.next_img.length ) {
- this.next_img.css( 'left', this.max_width );
- this._attach( image_index + 2, this.next_img );
+ this.next_img.css( 'left', this.window_width );
+ this._attach( index + 2, this.next_img );
}
}
- this.cur_img.animate( { left: 0 }, 500 );
+ this.cur_img.animate( { left: 0 }, this.options.duration );
- } else if ( image_index == this.index - 1 ) {
+ } else if ( index == this.index - 1 ) {
temp_img = this.prev_img;
this.prev_img = this.prev_img.prev();
if ( this.prev_img.length ) {
- this.prev_img.css( 'left', -this.max_width );
- this._attach( image_index - 1, this.prev_img );
+ this.prev_img.css( 'left', -this.window_width );
+ this._attach( index - 1, this.prev_img );
}
this.index--;
- } else if ( image_index == this.index + 1 ) {
+ } else if ( index == this.index + 1 ) {
temp_img = this.next_img;
this.next_img = this.next_img.next();
if ( this.next_img.length ) {
- this.next_img.css( 'left', this.max_width );
- this._attach( image_index + 1, this.next_img );
+ this.next_img.css( 'left', this.window_width );
+ this._attach( index + 1, this.next_img );
}
} else {
- temp_img = $( 'div' ).find( '.ui-imageslider-bg:eq(' + image_index + ')' );
+ temp_img = $( 'div' ).find( '.ui-imageslider-bg:eq(' + index + ')' );
}
- this.images.splice( image_index, 1 );
+ this.images.splice( index, 1 );
temp_img.detach();
}
}); /* End of widget */
*/
/**
- * Multibuttonentry widget is a kind of button widget.
- * When a user inputs a text and the text gets an change event,
- * the text can be changed from it to a button widget.
+ * The MultiButtonEntry widget changes a text item to a button. It can be comprised of a number of button widgets.
+ * When a user types text and the text gets a specific event to change from a text to a button,
+ * the input text is changed to a MultiButtonEntry widget.
+ * A user can add the MultiButtonEntry widget to a contact list, email list, or another list.
+ * The typical use of this widget is composing a number of contacts or phone numbers in a specific area of the screen.
*
* HTML Attributes:
*
- * data-listUrl : This attribute is represent a 'id' about page.
- * This page is containing prepared data for provide to user.
- * For example, like address book.
- * data-label: This attribute is providing label for user-guide. (Default : 'To : ')
+ * data-listUrl : Represents the page id.
+ * The page contains data for the user, for example, an address book.(Default : null)
+ * data-label: Provide a label for a user-guide. (Default : 'To : ')
* data-descMessage : This attribute is managing message format.
- * This message is displayed when widget status was changed to 'focusout'.
+ * This message is displayed when widget status was changed to 'focusout'. (Default : '{0} & {1} more')
*
* APIs:
*
- * inputtext ( void )
- * : Get a string from inputbox.
* inputtext ( [string] )
* : If argument is not exist, will get a string from inputbox.
* If argument is exist, will set a string to inputbox.
* select ( [number] )
- * : If argument is not exist, will act as a getter.
- * Get a string of selected block.
- * If widget is not exist a selected button, it will return 'null'.
- * Select a button located on the index. (number : index of button)
+ * : If no argument exists, gets a string of the selected block.
+ * If any button isn't selected on a multibuttonentry widget, this method returns "null" value.
+ * When a user call this method with an argument which is a number type,
+ * this method selects the button which is matched with the argument.
* add ( text, [number] )
- * : If second argument is not exist, will insert to a new textblock at last position.
- * Insert a new button at position that is pointed by index. (number : index of button)
+ * : If second argument does not exist, will insert to a new button at last position.
+ * Insert a new button at indexed position. The position is decided by the second argument.
+ * "index of position" means that the position of inserting a new button is decided by the second argument on "add" method.
+ * For example, if a user call the method like this "add("Tizen", 2)",
+ * new button labed "Tizen" will be inserted on the third position.
* remove ( [number] )
- * : If argument is not exist, will remove all buttons.
- * Remove a button that is pointed by index. (number : index of button)
+ * : If no argument exists, all buttons are removed.
+ * Remove a button at indexed position.
+ * The position is decided by the second argument. (index: index of button)
* length ( void )
* : Get a number of buttons.
* foucsIn ( void )
* : This method change a status to 'focusin'.
* This status is able to manage a widget.
* focusOut ( void )
- * : This method change a status to 'focusout'.
- * This status is not able to manage a widget.
+ * : Changes the focus status to 'focus out'.
+ * The status is not able to manage a widget.
+ * All buttons that contained in the widget are removed and
+ * summarized message is displayed.
*
*
* Events:
*
- * select : This event will occur when select a button.
- * add : This event will occur when insert new button.
- * remove : This event will occur when remove a button.
+ * create : Occur when create MultiButtonEntry widget.
+ * select : Occur when a button is selected.
+ * add : Occur when new button is inserted.
+ * remove : Occur when a button is removed.
*
* Examples:
*
});
moreBlock.click( function () {
+ $(inputbox).hide();
+
$.mobile.changePage( option.listUrl, {
transition: "slide",
reverse: false,
self._viewWidth = $view.innerWidth();
}
self._modifyInputBoxWidth();
+ $(inputbox).show();
});
},
+
// create a textbutton and append this button to parent layer.
// @param arg1 : string
// @param arg2 : index
}
// save src data
dataBlock = $( document.createElement( 'input' ) );
- dataBlock.val( content ).addClass( "ui-multibuttonentry-data" ).hide();
+ dataBlock.attr( "value", content ).addClass( "ui-multibuttonentry-data" ).hide();
// Create a new text HTMLDivElement.
textBlock = $( document.createElement( 'div' ) );
self._modifyInputBoxWidth();
self._trigger( "add" );
},
+
_removeTextBlock : function () {
var self = this,
$view = this.element,
$view.find( "div:last" ).removeClass( "ui-multibuttonentry-block" ).addClass( "ui-multibuttonentry-sblock" );
}
},
+
_calcBlockWidth : function ( block ) {
var blockWidth = 0;
blockWidth = $( block ).outerWidth( true );
lockBlock.removeClass( "ui-multibuttonentry-sblock" ).addClass( "ui-multibuttonentry-block" );
}
},
+
// call when remove text block by backspace key.
_validateTargetBlock : function () {
var self = this,
lastBlock.removeClass( "ui-multibuttonentry-block" ).addClass( "ui-multibuttonentry-sblock" );
}
},
+
_ellipsisTextBlock : function ( text ) {
var self = this,
str = text,
-/*
+/* ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ *
+ * 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.
+ * ***************************************************************************
+ *
* Authors: Yonghwi Park <yonghwi0324.park@samsung.com>
* Wonseop Kim <wonseop.kim@samsung.com>
- */
+*/
/**
- * MultiMediaView is a widget that provides an audio or a video content handling features.
- * A multi-media content handled with this widget can be played with HTML5's <audio> or <video> tag.
- * If a user wants to play a music file, he should use "<audio>" tag.
- * And he should use "<video>" tag to play a video file.
+ *
+ * MultiMediaView is a widget that lets the user view and handle multimedia contents.
+ * Video and audio elements are coded as standard HTML elements and enhanced by the
+ * MultiMediaview to make them attractive and usable on a mobile device.
*
* HTML Attributes:
* data-theme : Set a theme of widget.
*
* APIs:
* width( [number] )
- * : Get or set a widget of widget.
+ * : Get or set the width of widget.
+ * The first argument is the width of widget.
+ * If no first argument is specified, will act as a getter.
* height( [number] )
- * : Get or set a height of widget.
+ * : Get or set the height of widget.
+ * The first argument is the height of widget.
+ * If no first argument is specified, will act as a getter.
* size( number, number )
* : Set a size of widget and resize a widget.
- * First argument is width and second argument is height.
+ * The first argument is width and second argument is height.
* fullscreen( [boolean] )
- * : Set a status that fullscreen.
+ * : Get or Set the status of fullscreen.
+ * If no first argument is specified, will act as a getter.
*
* Events:
*
* HTML Attributes
*
* data-role: set to 'nocontents'.
- * data-text1: top message.
- * data-text2: bottom message.
* data-type: type of nocontents. You can set text, picture, multimedia and unnamed.
*
+ * Deprecated in Tizen 2.0 beta : data-text1, data-text2
+ *
* APIs
*
* N/A
*
* Examples
*
+ * Default
+ * <div data-role="nocontents" id="nocontents">
+ * <p> Unnamed Type </p>
+ * <p> Text </p>
+ * </div>
+ *
+ *
* Text Type
- * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="text"></div>
+ * <div data-role="nocontents" id="nocontents" data-type="text"></div>
*
* Picture Type
- * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="picture"></div>
+ * <div data-role="nocontents" id="nocontents" data-type="picture"></div>
*
* Multimedia Type
- * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="multimedia"></div>
+ * <div data-role="nocontents" id="nocontents" data-type="multimedia"></div>
*
* Unnamed Type
- * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2"></div>
+ * <div data-role="nocontents" id="nocontents"></div>
* or
- * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="unnamed"></div>
+ * <div data-role="nocontents" id="nocontents" data-type="unnamed"></div>
*
*/
(function ( $, window, undefined ) {
$.widget( "tizen.nocontents", $.mobile.widget, {
-
max_height: 0,
- container: null,
icon_img: null,
- text0_bg: null,
- text1_bg: null,
+ text_bg: null,
_get_height: function () {
var $page = $('.ui-page'),
$content = $page.children('.ui-content'),
$header = $page.children('.ui-header'),
$footer = $page.children('.ui-footer'),
+ $view = $content.children('.ui-scrollview-view'),
header_h = $header.outerHeight() || 0,
footer_h = $footer.outerHeight() || 0,
- padding_t = parseFloat( $content.css('padding-top') ) || 0,
- padding_b = parseFloat( $content.css('padding-bottom') ) || 0,
- content_h = $(window).height() - header_h - footer_h -
- (padding_t + padding_b) * 2,
- container_h = this.container.height();
-
- return ( content_h < container_h ? container_h : content_h );
+ padding_t = (parseFloat( $content.css('padding-top') ) || 0) +
+ (parseFloat( $view.css('padding-top') ) || 0),
+ padding_b = (parseFloat( $content.css('padding-bottom') ) || 0) +
+ (parseFloat( $view.css('padding-bottom') ) || 0),
+ content_h = $( window ).height() - header_h - footer_h -
+ (padding_t + padding_b);
+
+ return content_h;
},
_align: function () {
var content_height = this._get_height(),
icon_height = this.icon_img.height(),
icon_width = this.icon_img.width(),
- content_gap = 46,
- text0_height = this.text0_bg.height() || 0,
- text1_height = this.text1_bg.height() || 0,
+ text_height = 0,
+ content_gap = 0,
text_top = 0,
- icon_top = (content_height -
- (icon_height + content_gap +
- text0_height + text1_height)) / 2;
+ icon_top = 0,
+ i;
+
+ if ( this.text_bg.length ) {
+ text_height = $( this.text_bg[0] ).height() * this.text_bg.length;
+ content_gap = $( this.text_bg[0] ).height();
+ }
+
+ icon_top = ( content_height - ( icon_height + content_gap + text_height ) ) / 2;
if ( icon_top < content_gap ) {
icon_top = content_gap;
}
- this.container.height( content_height );
-
this.icon_img.css( 'left',
- ($(window).width() - icon_width) / 2 );
+ ( $( window ).width() - icon_width ) / 2 );
this.icon_img.css( 'top', icon_top );
text_top = icon_top + icon_height + content_gap;
- this.text0_bg.css( 'top', text_top );
- this.text1_bg.css( 'top', text_top + text0_height );
+ for ( i = 0; i < this.text_bg.length; i++ ) {
+ $( this.text_bg[i] ).css( 'top', text_top );
+ text_top += $( this.text_bg[i] ).height();
+ }
},
_create: function () {
- var icon_type = $( this.element ).jqmData('type'),
- text = new Array(2);
-
- if ( icon_type === undefined ||
- (icon_type !== "picture" &&
- icon_type !== "multimedia" &&
- icon_type !== "text") ) {
+ var elem = this.element,
+ icon_type = $( this.element ).jqmData('type');
+
+ switch ( icon_type ) {
+ case "picture":
+ case "multimedia":
+ case "text":
+ break;
+ default:
icon_type = "unnamed";
+ break;
}
- text[0] = $( this.element ).jqmData('text1');
- text[1] = $( this.element ).jqmData('text2');
-
- if ( text[0] === undefined ) {
- text[0] = "";
- }
-
- if ( text[1] === undefined ) {
- text[1] = "";
- }
-
- this.container = $('<div class="ui-nocontents"/>');
+ $( elem ).addClass( "ui-nocontents" );
this.icon_img = $('<div class="ui-nocontents-icon-' +
- icon_type + '"/>');
+ icon_type + '">');
+
+ this.text_bg = $( elem ).find("p").addClass("ui-nocontents-text");
- this.text0_bg = $('<div class="ui-nocontents-text">' +
- text[0] + '<div>');
- this.text1_bg = $('<div class="ui-nocontents-text">' +
- text[1] + '<div>');
+ $( elem ).prepend( this.icon_img );
- this.container.append( this.icon_img );
- this.container.append( this.text0_bg );
- this.container.append( this.text1_bg );
+ this._align();
- $( this.element ).append( this.container );
+ $( window ).bind( 'resize', function () {
+ $( elem ).nocontents( 'refresh' );
+ });
+ },
+ refresh: function () {
this._align();
}
});
$( document ).bind( "pagecreate create", function ( e ) {
$( e.target ).find(":jqmData(role='nocontents')").nocontents();
});
-} ( jQuery, this ));
+}( jQuery, this ));
*
* data-role: set to 'notification'.
* data-type: 'ticker' or 'popup'.
- * data-text1: top text for tickernoti, text to show for smallpopup.
- * data-text2: bottom text for tickernoti, smallpopup will ignore this text.
- * data-param: parameter for 'tapped' event.
- * data-interval: time to showing. If don't set, will show infinitely.
*
* APIs
*
- * show(): show the notification.
- * hide(): hide the notification.
+ * open(): open the notification.
+ * close(): close the notification.
+ * text(text0, text1): set texts or get texts
+ * icon(src): set the icon (tickernoti only)
*
* Events
*
- * tapped: When you tap or click the smallpopup, this event will be raised.
+ * N/A
*
* Examples
*
* // tickernoti
- * <div data-role="notification" id="notification" data-type="ticker" data-text1="text1" data-text2="text2" data-param="parameters" data-interval="3000"></div>
+ * <div data-role="notification" id="notification" data-type="ticker">
+ * <img src="icon01.png">
+ * <p>Hello World</p>
+ * <p>Denis</p>
+ * </div>
*
* // smallpopup
- * <div data-role="notification" id="notification" data-type="popup" data-text1="text1" data-param="parameters" data-interval="3000"></div>
- *
- * // event
- * $('#notification-demo').bind('tapped', function (e, m) {
- * alert('notification is tapped\nparameter:"' + m + '"');
- * });
+ * <div data-role="notification" id="notification" data-type="popup">
+ * <p>Hello World</p>
+ * </div>
*
*/
(function ( $, window ) {
$.widget( "tizen.notification", $.mobile.widget, {
btn: null,
- param: null,
- interval: null,
- seconds: null,
+ text_bg: [],
+ icon_img: [],
running: false,
+ _get_text: function () {
+ var text = new Array( 2 );
+
+ if ( this.type === 'ticker' ) {
+ text[0] = $( this.text_bg[0] ).text();
+ text[1] = $( this.text_bg[1] ).text();
+ } else {
+ text[0] = $( this.text_bg[0] ).text();
+ }
+
+ return text;
+ },
+
+ _set_text: function ( text0, text1 ) {
+ var _set = function ( elem, text ) {
+ if ( !text ) {
+ return;
+ }
+ elem.text( text );
+ };
+
+ if ( this.type === 'ticker' ) {
+ _set( $( this.text_bg[0] ), text0 );
+ _set( $( this.text_bg[1] ), text1 );
+ } else {
+ _set( $( this.text_bg[0] ), text0 );
+ }
+ },
+
+ text: function ( text0, text1 ) {
+ if ( text0 === undefined && text1 === undefined ) {
+ return this._get_text();
+ }
+
+ this._set_text( text0, text1 );
+ },
+
+ icon: function ( src ) {
+ if ( src === undefined ) {
+ return;
+ }
+
+ this.icon_img.detach();
+ this.icon_img = $( "<img src='" + src + "' class='ui-ticker-icon'>" );
+ $( this.element ).find(".ui-ticker").append( this.icon_img );
+ },
+
_refresh: function () {
- this._del_event();
- this._update();
- this._add_event();
+ var container = this._get_container();
- $( this.html ).addClass("fix");
+ $( container ).addClass("fix")
+ .removeClass("show")
+ .removeClass("hide");
},
- show: function () {
+ open: function () {
+ var container = this._get_container();
+
if ( this.running ) {
this._refresh();
return;
}
- this._update();
-
- this._add_event();
+ $( container ).addClass("show")
+ .removeClass("hide")
+ .removeClass("fix");
this.running = true;
- $( this.html ).addClass("show");
},
- hide: function () {
+ close: function () {
+ var container = this._get_container();
+
if ( !this.running ) {
return;
}
- $( this.html ).addClass("hide");
- $( this.html ).removeClass("show").removeClass("fix");
- this._del_event();
+ $( container ).addClass("hide")
+ .removeClass("show")
+ .removeClass("fix");
this.running = false;
},
close: function () {
- $( this.html ).removeClass("show").removeClass("hide").removeClass("fix");
+ var container = this._get_container();
+
+ $( container ).removeClass("show")
+ .removeClass("hide")
+ .removeClass("fix");
+
this._del_event();
this.running = false;
container.find(".ui-ticker-btn").append( this.btn );
this.btn.bind( "vmouseup", function () {
- self.hide();
+ self.close();
});
}
container.bind( 'vmouseup', function () {
- self.element.trigger( 'tapped', self.param );
- self.hide();
+ self.close();
});
-
- if ( this.seconds !== undefined && this.second !== 0 ) {
- this.interval = setInterval( function () {
- self.hide();
- }, this.seconds );
- }
},
_del_event: function () {
this.btn.unbind("vmouseup");
}
container.unbind('vmouseup');
- clearInterval( this.interval );
},
_set_position: function () {
var container = this._get_container(),
- container_h = parseFloat( container.css('height') ),
+ container_h = parseFloat( container.height() ),
$page = $('.ui-page'),
$footer = $page.children('.ui-footer'),
footer_h = $footer.outerHeight() || 0,
- position = $(window).height() - container_h - footer_h;
+ position = $( window ).height() - container_h - footer_h;
container.css( 'top', position );
},
- _update: function () {
- var text = new Array(2);
-
- if ( this.html ) {
- this.html.detach();
- }
-
- text[0] = $(this.element).jqmData('text1');
- text[1] = $(this.element).jqmData('text2');
- this.param = $(this.element).jqmData('param');
- this.seconds = $(this.element).jqmData('interval');
- this.type = $(this.element).jqmData('type') || 'popup';
-
- if ( this.type === 'ticker' ) {
- this.html = $('<div class="ui-ticker">' +
- '<div class="ui-ticker-icon"></div>' +
- '<div class="ui-ticker-text1-bg">' +
- text[0] + '</div>' +
- '<div class="ui-ticker-text2-bg">' +
- text[1] + '</div>' +
- '<div class="ui-ticker-body"></div>' +
- '<div class="ui-ticker-btn"></div>' +
- '</div>');
-
- $( this.element ).append( this.html );
- } else {
- this.html = $('<div class="ui-smallpopup">' +
- '<div class="ui-smallpopup-text-bg">' +
- text[0] + '</div>' +
- '</div>');
-
- $( this.element ).append( this.html );
-
- this._set_position();
- }
- },
-
_create: function () {
+ var self = this,
+ elem = $( this.element ),
+ i;
+
this.btn = $("<a href='#' class='ui-input-cancel' title='close' data-theme='s'>Close</a>")
.tap( function ( event ) {
event.preventDefault();
shadow: true
});
- this._update();
- this.running = false;
+ this.type = elem.jqmData('type') || 'popup';
+
+ if ( this.type === 'ticker' ) {
+ elem.wrapInner("<div class='ui-ticker'></div>");
+ elem.find(".ui-ticker").append("<div class='ui-ticker-body'></div>" +
+ "<div class='ui-ticker-btn'></div>");
+ this.text_bg = elem.find("p");
+
+ if ( this.text_bg.length < 2 ) {
+ elem.find(".ui-ticker").append("<p></p><p></p>");
+ this.text_bg = elem.find("p");
+ } else if ( this.text_bg.length > 2 ) {
+ for ( i = 2; i < this.text_bg.length; i++ ) {
+ $( this.text_bg[i] ).css( "display", "none" );
+ }
+ }
+
+ $( this.text_bg[0] ).addClass("ui-ticker-text1-bg");
+ $( this.text_bg[1] ).addClass("ui-ticker-text2-bg");
+
+ this.icon_img = elem.find("img");
+
+ if ( this.icon_img.length ) {
+ $( this.icon_img ).addClass("ui-ticker-icon");
+
+ for ( i = 1; i < this.icon_img.length; i++ ) {
+ $( this.icon_img[i] ).css( "display", "none" );
+ }
+ }
+ } else {
+ elem.wrapInner("<div class='ui-smallpopup'></div>");
+ this.text_bg = elem.find("p").addClass("ui-smallpopup-text-bg");
+
+ if ( this.text_bg.length < 1 ) {
+ elem.find(".ui-smallpopup")
+ .append("<p class='ui-smallpopup-text-bg'></p>");
+ this.text_bg = elem.find("p");
+ } else if ( this.text_bg.length > 1 ) {
+ for ( i = 1; i < this.text_bg.length; i++ ) {
+ $( this.text_bg[i] ).css( "display", "none" );
+ }
+ }
+
+ this._set_position();
+ }
+
+ this._add_event();
+
+ $( window ).bind( "resize", function () {
+ if ( self.running ) {
+ self._refresh();
+ }
+
+ if ( self.type === 'popup' ) {
+ self._set_position();
+ }
+ });
}
}); // End of widget
};
/* Apply REM scaling */
- elementHeight = elementHeight / ( 36 / parseInt(this.option.default_font_size) );
+ elementHeight = elementHeight / ( 36 / parseInt( $('html').css('font-size'), 10 ) );
if ( this.element.height() < elementHeight ) {
this.element.css( "height", elementHeight );
btn2Position = 10,
btn3Position = 144,
matchBtn = $( this.element ).parents( ".ui-page" ).find( "#" + matchingBtn ),
- buttonRight = matchBtn.nextAll().is( "a" ) ? btn3Position : btn2Position;
- /* Apply REM scaling */
- scaleFactor = ( 36 / parseInt(this.option.default_font_size) );
+ buttonRight = matchBtn.nextAll().is( "a" ) ? btn3Position : btn2Position,
+ scaleFactor = ( 36 / parseInt( $('html').css('font-size'), 10 ) );
if ( $(this.element).parents(".ui-page").find( "#" + matchingBtn ).length != 0 ) {
// decide arrow Button position
if ( matchBtn.css( "left" ) && matchBtn.css( "left" ) != "auto" ) {
- $( ".ui-triangle-image" ).css( "left", matchBtn.width() / 2 + parseInt(matchBtn.css( "left" ), 10) - ( arrowCenter / scaleFactor ) + "px" );
+ $( ".ui-triangle-image" ).css( "left", matchBtn.width() / 2 + parseInt(matchBtn.css( "left" ), 10) - arrowCenter + "px" );
} else if ( matchBtn.css("right") ) {
- $( ".ui-triangle-image" ).css( "left", document.documentElement.clientWidth - matchBtn.width() / 2 - ( ( buttonRight - arrowCenter ) / scaleFactor ) + "px" );
+ $( ".ui-triangle-image" ).css( "left", document.documentElement.clientWidth - ( matchBtn.width() / 2 + buttonRight / scaleFactor ) - arrowCenter + "px" );
}
} else {
- $( ".ui-triangle-image" ).css( "left", document.documentElement.clientWidth / 2 - ( arrowCenter / scaleFactor ) + "px" );
+ $( ".ui-triangle-image" ).css( "left", document.documentElement.clientWidth / 2 - arrowCenter + "px" );
}
},
// Draw the option header, according to current options
CollapsedTop = 110,
ExpandedTop = 206,
CalculateTime,
- /* Apply REM scaling */
- scaleFactor = ( 36 / parseInt($('html').css('font-size')));
+ scaleFactor = ( 36 / parseInt( $('html').css('font-size'), 10 ) );
+
if ( toggle_header.children().is( ".input-search-bar" ) ) {
CollapsedTop = 218;
ExpandedTop = 314;
*/
collapse: function ( options ) {
var collapsedBarHeight = 10,
- scaleFactor = ( 36 / parseInt($('html').css('font-size')));
+ scaleFactor = ( 36 / parseInt( $('html').css('font-size'), 10 ) );
collapsedBarHeight = collapsedBarHeight / scaleFactor;
*
* data-role: This widget must have 'pagecontrol' as data-role value.
* data-max: Maximum nimber of pagecontrol bullets. This property must not exceed 10.
- * data-initVal: Initially selected value of the pagecontrol widget. Must between 1 and data-max. If this attribute is not given, initial value is set to 1.
+ * data-value: Initially selected value of the pagecontrol widget. Must between 1 and data-max. If this attribute is not given, initial value is set to 1.
*
* APIs:
*
initSelector: ":jqmData(role='pagecontrol')"
},
+ // subroutine: find a child by value
+ _getBtn: function ( value ) {
+ return $( this.element ).children( ":jqmData(value='" + value + "')" );
+ },
+
+ // subroutine: change active button by value
+ _changeActiveBtn: function ( newNum ) {
+ var oldNum = $( this.element ).data( 'value' );
+
+ // Check value
+ if ( newNum < 1 || newNum > $( this.element ).data( "max" ) ) {
+ return false;
+ }
+
+ this._getBtn( oldNum ).removeClass( 'page_n_' + oldNum )
+ .addClass( 'page_n_dot' );
+ this._getBtn( newNum ).removeClass( 'page_n_dot' )
+ .addClass( 'page_n_' + newNum );
+ },
+
+ _triggerChange: function ( event ) {
+ // Trigger change event
+ $( this ).trigger( 'change', $( this ).data( 'value' ) );
+ },
+
_create: function ( ) {
},
var self = this,
e = this.element,
maxVal = e.data( "max" ),
- currentVal = e.attr( "data-initVal" ),
+ value = e.attr( "data-value" ),
i = 0,
btn = null,
buf = null,
}
e.data( "max", maxVal );
- if ( ! currentVal ) {
- currentVal = 1;
+ if ( ! value ) {
+ value = 1;
}
- e.data( "current", currentVal );
+ e.data( "value", value );
// Set pagecontrol class
e.addClass( 'pagecontrol' );
page_margin_class = 'page_n_margin_19';
}
- // subroutine: find a child by value
- function getBtn( value ) {
- return e.children( ":jqmData(value='" + value + "')" );
- }
-
- // subroutine: change active button by value
- function changeActiveBtn( newNum ) {
- var oldNum = e.data( 'current' );
-
- // Check value
- if ( newNum < 1 || newNum > e.max ) {
- return false;
- }
-
- getBtn( oldNum ).removeClass( 'page_n_' + oldNum )
- .addClass( 'page_n_dot' );
- getBtn( newNum ).removeClass( 'page_n_dot' )
- .addClass( 'page_n_' + newNum );
- }
-
- function triggerChange( event ) {
- // Trigger change event
- e.trigger( 'change', $( this ).data( 'value' ) );
- }
// Add dot icons
for ( i = 1; i <= maxVal; i++ ) {
btn = $( '<div class="page_n page_n_dot ' + page_margin_class + '" data-value="' + i + '"></div>' );
e.append( btn );
- if ( i == currentVal ) {
+ if ( i == value ) {
btn.removeClass( 'page_n_dot' )
.addClass( 'page_n_' + i );
}
// bind vclick event to each icon
- btn.bind( 'vclick', triggerChange );
+ btn.bind( 'vclick', this._triggerChange );
}
// pagecontrol element's change event
e.bind( 'change', function ( event, value ) {
// 1. Change activated button
- changeActiveBtn( value );
+ self._changeActiveBtn( value );
// 2. Store new value (DO NOT change this order!)
- e.data( 'current', value );
+ e.data( 'value', value );
});
+ },
+
+ value: function ( val ) {
+ var pc = $( this.element );
+
+ if ( val && typeof val == "number" ) {
+ this._changeActiveBtn( val );
+ pc.data( 'value', val );
+ } else {
+ return pc.data( "value" );
+ }
}
+
}); // end: $.widget()
--- /dev/null
+/* ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ *
+ * 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.
+ * ***************************************************************************
+ *
+ * Author: Jinhyuk Jun <jinhyuk.jun@samsung.com>
+ */
+
+(function ( $, undefined ) {
+
+ $.widget( "mobile.pagelayout", $.mobile.widget, {
+ options: {
+ visibleOnPageShow: true,
+ disablePageZoom: true,
+ transition: "slide", //can be none, fade, slide (slide maps to slideup or slidedown)
+ fullscreen: false,
+ tapToggle: true,
+ tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed",
+ hideDuringFocus: "input, textarea, select",
+ updatePagePadding: true,
+ trackPersistentToolbars: true,
+ // Browser detection! Weeee, here we go...
+ // Unfortunately, position:fixed is costly, not to mention probably impossible, to feature-detect accurately.
+ // Some tests exist, but they currently return false results in critical devices and browsers, which could lead to a broken experience.
+ // Testing fixed positioning is also pretty obtrusive to page load, requiring injected elements and scrolling the window
+ // The following function serves to rule out some popular browsers with known fixed-positioning issues
+ // This is a plugin option like any other, so feel free to improve or overwrite it
+ supportBlacklist: function () {
+ var w = window,
+ ua = navigator.userAgent,
+ platform = navigator.platform,
+ // Rendering engine is Webkit, and capture major version
+ wkmatch = ua.match( /AppleWebKit\/([0-9]+)/ ),
+ wkversion = !!wkmatch && wkmatch[ 1 ],
+ ffmatch = ua.match( /Fennec\/([0-9]+)/ ),
+ ffversion = !!ffmatch && ffmatch[ 1 ],
+ operammobilematch = ua.match( /Opera Mobi\/([0-9]+)/ ),
+ omversion = !!operammobilematch && operammobilematch[ 1 ];
+
+ if (
+ // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
+ ( ( platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1 || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534 )
+ ||
+ // Opera Mini
+ ( w.operamini && ({}).toString.call( w.operamini ) === "[object OperaMini]" )
+ ||
+ ( operammobilematch && omversion < 7458 )
+ ||
+ //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
+ ( ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533 )
+ ||
+ // Firefox Mobile before 6.0 -
+ ( ffversion && ffversion < 6 )
+ ||
+ // WebOS less than 3
+ ( "palmGetResource" in window && wkversion && wkversion < 534 )
+ ||
+ // MeeGo
+ ( ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1 )
+ ) {
+ return true;
+ }
+
+ return false;
+ },
+ initSelector: ":jqmData(role='content')"
+ },
+
+ _create: function () {
+
+ var self = this,
+ o = self.options,
+ $el = self.element;
+
+ // Feature detecting support for
+ if ( o.supportBlacklist() ) {
+ self.destroy();
+ return;
+ }
+
+ self._addFixedClass();
+ self._addTransitionClass();
+ self._bindPageEvents();
+
+ // only content
+ self._bindContentControlEvents();
+ },
+
+ /* add minimum fixed css style to bar(header/footer) and content
+ * it need to update when core source modified(jquery.mobile.page.section.js)
+ * modified from core source cuz initSelector different */
+ _addFixedClass: function () {
+ var self = this,
+ o = self.options,
+ $el = self.element,
+ $elHeader = $el.siblings( ":jqmData(role='header')" ),
+ $elFooter = $el.siblings( ":jqmData(role='footer')" ),
+ $elPage = $el.closest(".ui-page");
+
+ $elHeader.addClass( "ui-header-fixed" );
+ $elFooter.addClass( "ui-footer-fixed" );
+
+ // "fullscreen" overlay positioning
+ if ( o.fullscreen ) {
+ $elHeader.addClass( "ui-header-fullscreen" );
+ $elFooter.addClass( "ui-footer-fullscreen" );
+ $elPage
+ .addClass( "ui-page-header-fullscreen" )
+ .addClass( "ui-page-footer-fullscreen" );
+ } else {
+ // If not fullscreen, add class to page to set top or bottom padding
+ $elPage.addClass( "ui-page-header-fixed" )
+ .addClass( "ui-page-footer-fixed" );
+ }
+ },
+
+ /* original core source(jquery.mobile.fixedToolbar.js)
+ * never changed */
+ _addTransitionClass: function () {
+ var tclass = this.options.transition;
+
+ if ( tclass && tclass !== "none" ) {
+ // use appropriate slide for header or footer
+ if ( tclass === "slide" ) {
+ tclass = this.element.is( ".ui-header" ) ? "slidedown" : "slideup";
+ }
+
+ this.element.addClass( tclass );
+ }
+ },
+
+
+ /* Set default page positon
+ * 1. add title style to header
+ * 2. Set default header/footer position */
+ setHeaderFooter: function ( event ) {
+ var $elPage = $( event.target ),
+ $elHeader = $elPage.find( ":jqmData(role='header')" ).length ? $elPage.find( ":jqmData(role='header')") : $elPage.siblings( ":jqmData(role='header')"),
+ $elFieldcontain = $elHeader.find( ":jqmData(role='fieldcontain')" ),
+ $elControlgroup = $elHeader.find( ":jqmData(role='controlgroup')" ),
+ $elContent = $elPage.find( ".ui-content" ),
+ next_id,
+ $elFooter,
+ $elFooterGroup,
+ gLength,
+ footerButton,
+ tStyle = "normal",
+ headerBtnNum;
+
+ if ( $elFieldcontain.length != 0 || $elControlgroup.length != 0 ) {
+ tStyle = "extended";
+ }
+
+ if ( $elHeader.jqmData("position") == "fixed" || $.tizen.frameworkData.theme.match(/tizen/) || $elHeader.css("position") == "fixed" ) {
+ $elHeader
+ .css( "position", "fixed" )
+ .css( "top", "0px" );
+
+ if ( $elHeader.children().is(".ui-navbar") ) {
+ $elHeader.addClass( "ui-title-controlbar-height" );
+ $( event.target ).find( ".ui-content" ).addClass( "ui-title-content-controlbar-height" );
+ } else {
+ if ( $elHeader.length ) {
+ $( event.target ).find( ".ui-content" ).addClass( "ui-title-content-" + tStyle + "-height" );
+ } else {
+ $( event.target ).find( ".ui-content" ).addClass( "ui-title-content-no-height" );
+ }
+ }
+ }
+
+ if ( $elHeader.children().is(".ui-option-header") ) {
+ $elContent.removeClass( "ui-title-content-" + tStyle + "-height" );
+ if ( $.tizen.optionheader.prototype.options.collapseOnInit == true ) {
+ $elContent.addClass( "ui-title-content-option-header-collapsed-1line-height" );
+ } else {
+ $elContent.addClass( "ui-title-content-option-header-expanded-1line-height" );
+ }
+ } else if ( $elHeader.find("input").attr("type") === "search" || $elHeader.find("input").attr("type") === "tizen-search" || $elHeader.find("input").jqmData("type") == "search" || $elHeader.find("input").jqmData("type") == "tizen-search" ) {
+ $elContent.removeClass( "ui-title-content-" + tStyle + "-height" ).addClass( "ui-title-content-search" );
+ }
+
+ headerBtnNum = $elHeader.children("a").length;
+ if ( headerBtnNum > 0 || $elHeader.children().find(".ui-radio").length != 0 ) {
+ if ( tStyle != "normal" ) {
+ gLength = $elFieldcontain.length ? $elFieldcontain.find( ".ui-radio" ).length : $elControlgroup.find( "a" ).length;
+
+ $elHeader.addClass( "ui-title-extended-height" );
+
+ $elFieldcontain.length ? $elFieldcontain.find( ".ui-controlgroup" ).addClass( "ui-title-extended-controlgroup" ).addClass( "ui-extended-controlgroup" ) : $elControlgroup.addClass( "ui-title-extended-button-controlgroup" ).addClass( "ui-extended-controlgroup" );
+
+ $elFieldcontain.length ? $elFieldcontain.addClass( "ui-title-extended-segment-style" ) : $elControlgroup.addClass( "ui-title-extended-segment-style" );
+
+ if ( gLength == 2 || gLength == 3 || gLength == 4 ) {
+ $elFieldcontain.length ? $elFieldcontain.addClass( "ui-title-extended-controlgroup-" + gLength + "btn" ) : $elControlgroup.addClass( "ui-title-extended-controlgroup-" + gLength + "btn" );
+ }
+ }
+ $elContent.addClass( "ui-title-content-" + tStyle + "-height" );
+ }
+
+ // divide content mode scrollview and non-scrollview
+ // recalculate content area when resize callback occur
+ if ( $.support.scrollview ) {
+ if ( $elHeader.css( "position" ) != "fixed" ) {
+ $elHeader.css( "position", "fixed" );
+ }
+
+ } else {
+ if ( $elHeader.css("position") != "fixed" ) {
+ $elHeader.css( "position", "relative" );
+ }
+ }
+
+ $elFooter = $( document ).find( ":jqmData(role='footer')" );
+
+ if ( $elFooter.find(".ui-navbar").is(".ui-controlbar-s") ) {
+ $elFooter
+ .css( "bottom", 0 )
+ .show();
+ }
+
+ if ( $elFooter.children().find(".ui-radio").length != 0 ) {
+ $elFooterGroup = $elFooter.find( ":jqmData(role='fieldcontain')" );
+ gLength = $elFooterGroup.find( ".ui-radio" ).length;
+
+ $elFooterGroup.find( ".ui-controlgroup" )
+ .addClass( "ui-extended-controlgroup" )
+ .addClass( "ui-footer-extended-controlgroup" )
+ .css( "display", "inline" );
+
+ /* Groupcontrol cannot initialize inline property at first page */
+ $elFooterGroup.addClass( "ui-footer-extended-controlgroup-" + gLength + "btn" );
+
+ footerButton = $elFooter.children( "a" );
+ footerButton.each( function ( i ) {
+ if ( footerButton.eq( i ).is(".ui-btn") && !footerButton.eq( i ).is(".ui-btn-back") ) {
+ footerButton.eq( i )
+ .removeClass( "ui-btn-left" )
+ .addClass( "ui-btn-footer-right" );
+ }
+ });
+ }
+
+ if ( $elFooter.is(".ui-footer-fixed") ) {
+ $elFooter.css( "bottom", 0 );
+ }
+
+ /* Increase Content size with dummy <div> because of footer height */
+ if ( $elFooter.length != 0 && $( event.target ).find( ".dummy-div" ).length == 0 ) {
+ $( event.target ).find( ":jqmData(role='content')" ).append( '<div class="dummy-div"></div>' );
+ $( ".dummy-div" )
+ .css( "width", $elFooter.width() )
+ .css( "height", $elFooter.height() );
+ }
+
+ /* Header position fix(remove transition) */
+ next_id = $( event.target ).attr( "id" );
+
+ $( "#" + next_id ).find( ":jqmData(role='header')" )
+ .removeClass( "fade in out" )
+ .appendTo( $.mobile.pageContainer );
+ },
+
+ _bindPageEvents: function () {
+ var self = this,
+ o = self.options,
+ $el = self.element;
+
+ //page event bindings
+ // Fixed toolbars require page zoom to be disabled, otherwise usability issues crop up
+ // This method is meant to disable zoom while a fixed-positioned toolbar page is visible
+ $el.closest( ".ui-page" )
+ .bind( "pagebeforeshow", function ( event ) {
+ if ( o.disablePageZoom ) {
+ $.mobile.zoom.disable( true );
+ }
+ if ( !o.visibleOnPageShow ) {
+ self.hide( true );
+ }
+ self.setHeaderFooter( event );
+ } )
+ .bind( "webkitAnimationStart animationstart updatelayout", function ( e, data ) {
+ if ( o.updatePagePadding ) {
+ self.updatePagePadding(data); // FIXME: unused function.
+ self.updatePageLayout(data);
+ }
+ })
+
+ .bind( "pageshow", function ( event ) {
+ self.updatePagePadding(); // FIXME: unused function.
+ if ( o.updatePagePadding ) {
+ $( window ).bind( "throttledresize." + self.widgetName, function () {
+ self.updatePagePadding(); // FIXME: unused function.
+ self.layoutPageIME(); // IME/resize reposition
+ self.updatePageLayout();
+ });
+ }
+
+ /* Header position fix(remove transition) */
+ $( "body" ).children( ":jqmData(role='header')" )
+ .insertBefore( $(event.target).find(":jqmData(role='content')").eq( 0 ) );
+/* new_header */
+ })
+
+ .bind( "pagebeforehide", function ( e, ui ) {
+ if ( o.disablePageZoom ) {
+ $.mobile.zoom.enable( true );
+ }
+ if ( o.updatePagePadding ) {
+ $( window ).unbind( "throttledresize." + self.widgetName );
+ }
+
+ if ( o.trackPersistentToolbars ) {
+ var thisFooter = $( ".ui-footer-fixed:jqmData(id)", this ),
+ thisHeader = $( ".ui-header-fixed:jqmData(id)", this ),
+ nextFooter = thisFooter.length && ui.nextPage && $( ".ui-footer-fixed:jqmData(id='" + thisFooter.jqmData( "id" ) + "')", ui.nextPage ),
+ nextHeader = thisHeader.length && ui.nextPage && $( ".ui-header-fixed:jqmData(id='" + thisHeader.jqmData( "id" ) + "')", ui.nextPage );
+
+ nextFooter = nextFooter || $();
+
+ if ( nextFooter.length || nextHeader.length ) {
+
+ nextFooter.add( nextHeader ).appendTo( $.mobile.pageContainer );
+
+ ui.nextPage.one( "pageshow", function () {
+ nextFooter.add( nextHeader ).appendTo( this );
+ });
+ }
+ }
+ });
+ },
+
+ _bindContentControlEvents: function () {
+ var self = this,
+ o = self.options,
+ $el = self.element;
+
+ $el.closest( ".ui-page" )
+ .bind( "pagebeforeshow", function ( event ) {
+
+ });
+ },
+
+ _visible: true,
+ _IMEShown : false,
+ _IMEindicatorHeight : window.outerHeight - window.innerHeight,
+
+ layoutPageIME: function () {
+ if ( $( document.activeElement ).is( "input" ) || $( document.activeElement ).is( "textarea" )
+ || $(".ui-page-active .ui-header .input-search-bar").length
+ || $(".ui-page-active .ui-content").find("input").length
+ || $(".ui-page-active .ui-content").find("textarea").length) {
+ /* Check vertical and horizontal ratio.
+ * If focus on input and two values are different, IME is drawed. */
+
+ if ( ( window.innerHeight + this._IMEindicatorHeight ) < window.outerHeight && window.innerWidth == window.outerWidth ) {
+ if ( this._IMEShown === false ) {
+ $( ".ui-page-active .ui-footer" ).hide();
+ this._IMEShown = true;
+ }
+ } else if ( ( window.innerHeight + this._IMEindicatorHeight ) >= window.outerHeight ) {
+ if ( this._IMEShown === true ) {
+ $( ".ui-page-active .ui-footer" ).show();
+ this._IMEShown = false;
+ }
+ }
+ } else {
+ if ( ( window.innerHeight + this._IMEindicatorHeight ) >= window.outerHeight ) {
+ if ( this._IMEShown === true ) {
+ $( ".ui-page-active .ui-footer" ).show();
+ this._IMEShown = false;
+ }
+ }
+ }
+ },
+
+ // This will set the content element's top or bottom padding equal to the toolbar's height
+ updatePagePadding: function (data) {
+ var $el = this.element,
+ header = $el.is( ".ui-header" );
+
+ // This behavior only applies to "fixed", not "fullscreen"
+ if ( this.options.fullscreen ) { return; }
+
+// $el.closest( ".ui-page" ).css( "padding-" + ( header ? "top" : "bottom" ), $el.outerHeight() );
+ },
+
+
+ /* 1. Calculate toolbar width(only controlbar)
+ * 2. Calculate and update content height */
+ updatePageLayout: function ( receiveType ) {
+ var $elFooter,
+ $elFooterControlbar,
+ $elPage = $( document ).find( ".ui-page-active" ),
+ $elHeader = $elPage.find( ":jqmData(role='header')" ),
+ $elContent = $elPage.find( ":jqmData(role='content')" ),
+ resultContentHeight = 0,
+ resultFooterHeight = 0,
+ resultHeaderHeight = 0;
+
+ if ( $elPage.length ) {
+ $elFooter = $( document ).find( ".ui-page-active" ).find( ":jqmData(role='footer')" );
+ } else {
+ $elFooter = $( document ).find( ":jqmData(role='footer')" ).eq( 0 );
+ }
+ $elFooterControlbar = $elFooter.find( ".ui-navbar" );
+
+ // calculate footer height
+ resultFooterHeight = ( $elFooter.css( "display" ) == "none" ) ? 0 : $elFooter.height();
+ resultHeaderHeight = ( $elHeader.css( "display" ) == "none" ) ? 0 : $elHeader.height();
+
+ if (resultFooterHeight != 0 ) {
+ $elFooter.css( "bottom", 0 );
+ }
+ if ( $elFooterControlbar.jqmData("style") == "toolbar" ) {
+ $elFooterControlbar.css( "width", window.innerWidth - $elFooterControlbar.siblings( ".ui-btn" ).width() - parseInt($elFooterControlbar.siblings(".ui-btn").css("right"), 10 ) * 2 );
+ }
+
+ resultContentHeight = window.innerHeight - resultFooterHeight - resultHeaderHeight;
+
+ if ( $.support.scrollview ) {
+ if ( $elHeader.css("position") != "fixed" ) {
+ $elHeader.css( "position", "fixed" );
+ }
+
+ $elContent.height( resultContentHeight -
+ parseFloat( $elContent.css("padding-top") ) -
+ parseFloat( $elContent.css("padding-bottom") ) );
+ } else {
+ if ( $elHeader.css("position") != "fixed" ) {
+ $elHeader.css( "position", "relative" );
+ } else {
+ $elContent.height( resultContentHeight );
+ }
+ }
+
+ // check this line need
+ // because another style title will be not supported to updatePageLayout
+
+ // in case title changed
+ if ( receiveType ) {
+ $elContent.css( "top", resultHeaderHeight + "px" );
+ }
+ },
+
+ _useTransition: function ( notransition ) {
+ var $win = $( window ),
+ $el = this.element,
+ scroll = $win.scrollTop(),
+ elHeight = $el.height(),
+ pHeight = $el.closest( ".ui-page" ).height(),
+ viewportHeight = $.mobile.getScreenHeight(),
+ tbtype = $el.is( ":jqmData(role='header')" ) ? "header" : "footer";
+
+ return !notransition &&
+ ( this.options.transition && this.options.transition !== "none" &&
+ (
+ ( tbtype === "header" && !this.options.fullscreen && scroll > elHeight ) ||
+ ( tbtype === "footer" && !this.options.fullscreen && scroll + viewportHeight < pHeight - elHeight )
+ ) || this.options.fullscreen
+ );
+ },
+
+ show: function ( notransition ) {
+/* var hideClass = "ui-fixed-hidden",
+ $el = this.element;
+
+ if ( this._useTransition( notransition ) ){
+ $el
+ .removeClass( "out " + hideClass )
+ .addClass( "in" );
+ }
+ else {
+ $el.removeClass( hideClass );
+ }
+ this._visible = true;*/
+ },
+
+ hide: function ( notransition ) {
+/* var hideClass = "ui-fixed-hidden",
+ $el = this.element,
+ // if it's a slide transition, our new transitions need the reverse class as well to slide outward
+ outclass = "out" + ( this.options.transition === "slide" ? " reverse" : "" );
+
+ if ( this._useTransition( notransition ) ){
+ $el
+ .addClass( outclass )
+ .removeClass( "in" )
+ .animationComplete( function () {
+ $el.addClass( hideClass ).removeClass( outclass );
+ });
+ }
+ else {
+ $el.addClass( hideClass ).removeClass( outclass );
+ }
+ this._visible = false;*/
+ },
+
+ toggle: function () {
+ this[ this._visible ? "hide" : "show" ]();
+ },
+
+ /* support external api for adding backbutton via javascript */
+/* backButton: function ( target, status ){
+ this._addBackbutton( target, "external" );
+ },
+*/
+ destroy: function () {
+ this.element.removeClass( "ui-header-fixed ui-footer-fixed ui-header-fullscreen ui-footer-fullscreen in out fade slidedown slideup ui-fixed-hidden" );
+ this.element.closest( ".ui-page" ).removeClass( "ui-page-header-fixed ui-page-footer-fixed ui-page-header-fullscreen ui-page-footer-fullscreen" );
+ }
+
+ });
+
+ //auto self-init widgets
+ $( document )
+ .bind( "pagecreate create", function ( e ) {
+ // DEPRECATED in 1.1: support for data-fullscreen=true|false on the page element.
+ // This line ensures it still works, but we recommend moving the attribute to the toolbars themselves.
+ if ( $( e.target ).jqmData( "fullscreen" ) ) {
+ $( $.mobile.pagelayout.prototype.options.initSelector, e.target ).not( ":jqmData(fullscreen)" ).jqmData( "fullscreen", true );
+ }
+ $.mobile.pagelayout.prototype.enhanceWithin( e.target );
+ });
+
+})( jQuery );
* Elliot Smith <elliot.smith@intel.com>
*/
-// Shows other elements inside a popup window.
-//
-// To apply, add the attribute data-role="popupwindow" to a <div> element inside
-// a page. Alternatively, call popupwindow()
-// on an element, eg :
-//
-// $("#mypopupwindowContent").popupwindow();
-// where the html might be :
-// <div id="mypopupwindowContent"></div>
-//
-// To trigger the popupwindow to appear, it is necessary to make a call to its
-// 'open()' method. This is typically done by binding a function to an event
-// emitted by an input element, such as a the clicked event emitted by a button
-// element. The open() method takes two arguments, specifying the x and y
-// screen coordinates of the center of the popup window.
-
-// You can associate a button with a popup window like this:
-// <div id="mypopupContent" style="display: table;" data-role="popupwindow">
-// <table>
-// <tr> <td>Eenie</td> <td>Meenie</td> <td>Mynie</td> <td>Mo</td> </tr>
-// <tr> <td>Catch-a</td> <td>Tiger</td> <td>By-the</td> <td>Toe</td> </tr>
-// <tr> <td>If-he</td> <td>Hollers</td> <td>Let-him</td> <td>Go</td> </tr>
-// <tr> <td>Eenie</td> <td>Meenie</td> <td>Mynie</td> <td>Mo</td> </tr>
-// </table>
-// </div>
-// <a href="#myPopupContent" data-rel="popupwindow" data-role="button">Show popup</a>
-//
-// Options:
-//
-// theme: String; the theme for the popupwindow contents
-// Default: null
-//
-// overlayTheme: String; the theme for the popupwindow
-// Default: null
-//
-// shadow: Boolean; display a shadow around the popupwindow
-// Default: true
-//
-// corners: Boolean; display a shadow around the popupwindow
-// Default: true
-//
-// fade: Boolean; fades the opening and closing of the popupwindow
-//
-// transition: String; the transition to use when opening or closing
-// a popupwindow
-// Default: $.mobile.defaultDialogTransition
-//
-// Events:
-// close: Emitted when the popupwindow is closed.
+/*
+ * Shows other elements inside a popup window.
+ *
+ * To apply, add the attribute data-role="popupwindow" to a <div> element inside
+ * a page. Alternatively, call popupwindow()
+ * on an element, eg :
+ *
+ * $("#mypopupwindowContent").popupwindow();
+ * where the html might be :
+ * <div id="mypopupwindowContent"></div>
+ *
+ * To trigger the popupwindow to appear, it is necessary to make a call to its
+ * 'open()' method. This is typically done by binding a function to an event
+ * emitted by an input element, such as a the clicked event emitted by a button
+ * element. The open() method takes two arguments, specifying the x and y
+ * screen coordinates of the center of the popup window.
+
+ * You can associate a button with a popup window like this:
+ * <div id="mypopupContent" style="display: table;" data-role="popupwindow">
+ * <table>
+ * <tr> <td>Eenie</td> <td>Meenie</td> <td>Mynie</td> <td>Mo</td> </tr>
+ * <tr> <td>Catch-a</td> <td>Tiger</td> <td>By-the</td> <td>Toe</td> </tr>
+ * <tr> <td>If-he</td> <td>Hollers</td> <td>Let-him</td> <td>Go</td> </tr>
+ * <tr> <td>Eenie</td> <td>Meenie</td> <td>Mynie</td> <td>Mo</td> </tr>
+ * </table>
+ * </div>
+ * <a href="#myPopupContent" data-rel="popupwindow" data-role="button">Show popup</a>
+ *
+ * Options:
+ *
+ * theme: String; the theme for the popupwindow contents
+ * Default: null
+ *
+ * overlayTheme: String; the theme for the popupwindow
+ * Default: null
+ *
+ * shadow: Boolean; display a shadow around the popupwindow
+ * Default: true
+ *
+ * corners: Boolean; display a shadow around the popupwindow
+ * Default: true
+ *
+ * fade: Boolean; fades the opening and closing of the popupwindow
+ *
+ * transition: String; the transition to use when opening or closing
+ * a popupwindow
+ * Default: $.mobile.defaultDialogTransition
+ *
+ * Events:
+ * popupbeforeposition: triggered after a popup has completed preparations for opening, but has not yet opened
+ * popupafteropen: triggered after a popup has completely opened
+ * popupafterclose triggered when a popup has completely closed
+*/
(function ( $, undefined ) {
-
$.widget( "tizen.popupwindow", $.tizen.widgetex, {
options: {
theme: null,
disabled: false,
shadow: true,
corners: true,
- fade: true,
+ fade: false,
+ opacity: 0.7,
widthRatio: 0.8612,
transition: $.mobile.defaultDialogTransition,
initSelector: ":jqmData(role='popupwindow')"
_htmlProto: {
ui: {
- screen: "#popupwindow-screen",
+ screen: "#popupwindow-screen",
container: "#popupwindow-container"
}
},
- _create: function () {
- var thisPage = this.element.closest(":jqmData(role='page')"),
- self = this,
- popup = this.element,
- o = this.options,
+ _setStyle: function () {
+ var popup = this.element,
style = popup.attr( 'data-style' );
- if (thisPage.length === 0) {
- thisPage = $("body");
- }
-
- // Drop a placeholder into the location from which we shall rip out the popup window contents
- this._ui.placeholder =
- $("<div><!-- placeholder" +
- (this.element.attr("id") === undefined
- ? ""
- : " for " + this.element.attr("id")) + " --></div>")
- .css("display", "none")
- .insertBefore(this.element);
-
- // Apply the proto
- thisPage.append(this._ui.screen);
- this._ui.container.insertAfter(this._ui.screen);
- this._ui.container.append(this.element);
-
- // Define instance variables
- $.extend( self, {
- _isOpen: false
- });
-
- //Data Style Start
- if (style) {
- o.style = style;
+ if ( style ) {
+ this.options.style = style;
}
- popup.addClass( o.style );
+ popup.addClass( this.options.style );
popup.find( ":jqmData(role='title')" )
.wrapAll( "<div class='popup-title'></div>" );
popup.find( ":jqmData(role='text')" )
.wrapAll( "<div class='popup-text-right'></div>" );
popup.find( ":jqmData(role='progress-bg')" )
.wrapAll( "<div class='popup-progress-bg'></div>" );
- //Data Style End
-
- // Events on "screen" overlay
- this._ui.screen.bind( "vclick", function (event) {
- self.close();
- });
},
- _realSetTheme: function (dst, theme) {
-
- var classes = (dst.attr("class") || "").split(" "),
- alreadyAdded = true,
- currentTheme = null,
- matches;
-
- while (classes.length > 0) {
- currentTheme = classes.pop();
- matches = currentTheme.match(/^ui-body-([a-z])$/);
- if (matches && matches.length > 1) {
- currentTheme = matches[1];
- break;
- } else {
- currentTheme = null;
- }
- }
+ _create: function () {
+ var thisPage = this.element.closest(":jqmData(role='page')"),
+ self = this;
- dst.removeClass("ui-body-" + currentTheme);
- if ((theme || "").match(/[a-z]/)) {
- dst.addClass("ui-body-" + theme);
+ if ( thisPage.length === 0 ) {
+ thisPage = $("body");
}
- },
- _setTheme: function (value) {
- this._realSetTheme(this.element, value);
- this.options.theme = value;
- this.element.attr("data-" + ($.mobile.ns || "") + "theme", value);
- },
+ this._ui.placeholder =
+ $( "<div><!-- placeholder for " + this.element.attr("id") + " --></div>" )
+ .css("display", "none")
+ .insertBefore( this.element );
- _setOverlayTheme: function (value) {
- this._realSetTheme(this._ui.container, value);
- // The screen must always have some kind of background for fade to work, so, if the theme is being unset,
- // set the background to "a".
- this._realSetTheme(this._ui.screen, (value === "" ? "a" : value));
- this.options.overlayTheme = value;
- this.element.attr("data-" + ($.mobile.ns || "") + "overlay-theme", value);
- },
+ thisPage.append( this._ui.screen );
+ this._ui.container.insertAfter( this._ui.screen );
+ this._ui.container.append( this.element );
- _setShadow: function (value) {
- this.options.shadow = value;
- this.element.attr("data-" + ($.mobile.ns || "") + "shadow", value);
- this._ui.container[value ? "addClass" : "removeClass"]("ui-overlay-shadow");
- },
+ this._setStyle();
- _setCorners: function (value) {
- this.options.corners = value;
- this.element.attr("data-" + ($.mobile.ns || "") + "corners", value);
- this._ui.container[value ? "addClass" : "removeClass"]("ui-corner-all");
- },
+ this._isOpen = false;
- _setFade: function (value) {
- this.options.fade = value;
- this.element.attr("data-" + ($.mobile.ns || "") + "fade", value);
+ this._ui.screen.bind( "vclick", function ( e ) {
+ self.close();
+ return false;
+ } );
},
- _setTransition: function (value) {
- this._ui.container
- .removeClass((this.options.transition || ""))
- .addClass(value);
- this.options.transition = value;
- this.element.attr("data-" + ($.mobile.ns || "") + "transition", value);
- },
+ destroy: function () {
+ this.element.insertBefore( this._ui.placeholder );
- _setDisabled: function (value) {
- $.Widget.prototype._setOption.call(this, "disabled", value);
- if (value) {
- this.close();
- }
+ this._ui.placeholder.remove();
+ this._ui.container.remove();
+ this._ui.screen.remove();
+ this.element.triggerHandler("destroyed");
+ $.Widget.prototype.destroy.call( this );
},
- _placementCoords: function (x, y, cx, cy) {
- // Try and center the overlay over the given coordinates
- var ret,
- scrollTop = $(window).scrollTop(),
- screenHeight = $(window).height(),
- screenWidth = $(window).width(),
- halfheight = cy / 2,
+ _placementCoords: function ( x, y, cw, ch ) {
+ var scrollTop = $( window ).scrollTop(),
+ screenHeight = $( window ).height(),
+ screenWidth = $( window ).width(),
+ halfheight = ch / 2,
maxwidth = parseFloat( this._ui.container.css( "max-width" ) ),
roomtop = y - scrollTop,
roombot = scrollTop + screenHeight - y,
newtop,
newleft;
- if ( roomtop > cy / 2 && roombot > cy / 2 ) {
+ if ( roomtop > ch / 2 && roombot > ch / 2 ) {
newtop = y - halfheight;
} else {
- // 30px tolerance off the edges
- newtop = roomtop > roombot ? scrollTop + screenHeight - cy - 30 : scrollTop + 30;
+ newtop = roomtop > roombot ? scrollTop + screenHeight - ch - 30 : scrollTop + 30;
}
- // If the menuwidth is smaller than the screen center is
- if ( cx < maxwidth ) {
- newleft = ( screenWidth - cx ) / 2;
+ if ( cw < maxwidth ) {
+ newleft = ( screenWidth - cw ) / 2;
} else {
- //otherwise insure a >= 30px offset from the left
- newleft = x - cx / 2;
+ newleft = x - cw / 2;
- // 10px tolerance off the edges
if ( newleft < 10 ) {
newleft = 10;
- } else if ( ( newleft + cx ) > screenWidth ) {
- newleft = screenWidth - cx - 10;
+ } else if ( ( newleft + cw ) > screenWidth ) {
+ newleft = screenWidth - cw - 10;
}
}
return { x : newleft, y : newtop };
},
- destroy: function () {
- // Put the element back where we ripped it out from
- this.element.insertBefore(this._ui.placeholder);
+ _setPosition: function ( x_where, y_where ) {
+ var x = ( undefined === x_where ? $( window ).width() / 2 : x_where ),
+ y = ( undefined === y_where ? $( window ).height() / 2 : y_where ),
+ coords,
+ ctxpopup = this.element.data("ctxpopup"),
+ popupWidth,
+ menuHeight,
+ menuWidth,
+ scrollTop,
+ screenHeight,
+ screenWidth,
+ roomtop,
+ roombot,
+ halfheight,
+ maxwidth,
+ newtop,
+ newleft;
- // Clean up
- this._ui.placeholder.remove();
- this._ui.container.remove();
- this._ui.screen.remove();
- this.element.triggerHandler("destroyed");
- $.Widget.prototype.destroy.call(this);
+ if ( !ctxpopup ) {
+ popupWidth = $( window ).width() * this.options.widthRatio;
+ this._ui.container.css( "width", popupWidth );
+
+ if ( this._ui.container.outerWidth() > $( window ).width() ) {
+ this._ui.container.css( {"max-width" : $( window ).width() - 30} );
+ }
+ }
+
+ coords = this._placementCoords( x, y,
+ this._ui.container.outerWidth(),
+ this._ui.container.outerHeight() );
+
+ menuHeight = this._ui.container.innerHeight();
+ menuWidth = this._ui.container.innerWidth();
+ scrollTop = $( window ).scrollTop();
+ screenHeight = $( window ).height();
+ screenWidth = $( window ).width();
+ roomtop = y - scrollTop;
+ roombot = scrollTop + screenHeight - y;
+ halfheight = menuHeight / 2;
+ maxwidth = parseFloat( this._ui.container.css( "max-width" ) );
+ newtop = ( screenHeight - menuHeight ) / 2 + scrollTop;
+
+ if ( menuWidth < maxwidth ) {
+ newleft = ( screenWidth - menuWidth ) / 2;
+ } else {
+ newleft = x - menuWidth / 2;
+
+ if ( newleft < 30 ) {
+ newleft = 30;
+ } else if ( ( newleft + menuWidth ) > screenWidth ) {
+ newleft = screenWidth - menuWidth - 30;
+ }
+ }
+
+ if ( ctxpopup ) {
+ newtop = coords.y;
+ newleft = coords.x;
+ }
+
+ this._ui.container.css({
+ top: newtop,
+ left: newleft
+ });
},
- open: function (x_where, y_where) {
- if (!(this._isOpen || this.options.disabled)) {
- var self = this,
- x = (undefined === x_where ? $(window).width() / 2 : x_where),
- y = (undefined === y_where ? $(window).height() / 2 : y_where),
- coords,
- zIndexMax = 0,
- ctxpopup = this.element.data("ctxpopup"),
- popupWidth,
- menuHeight,
- menuWidth,
- scrollTop,
- screenHeight,
- screenWidth,
- roomtop,
- roombot,
- halfheight,
- maxwidth,
- newtop,
- newleft;
-
- if ( !ctxpopup ) {
- popupWidth = $(window).width() * this.options.widthRatio;
- this._ui.container.css("width", popupWidth);
- // If the width of the popup exceeds the width of the window, we need to limit the width here,
- // otherwise outer{Width,Height}(true) below will happily report the unrestricted values, causing
- // the popup to get placed wrong.
- if (this._ui.container.outerWidth(true) > $(window).width()) {
- this._ui.container.css({"max-width" : $(window).width() - 30});
- }
+ open: function ( x_where, y_where ) {
+ var self = this,
+ zIndexMax = 0;
+
+ if ( this._isOpen || this.options.disabled ) {
+ return;
+ }
+
+ $( document ).find("*").each( function () {
+ var el = $( this ),
+ zIndex = parseInt( el.css("z-index"), 10 );
+
+ if ( !( el.is( self._ui.container ) ||
+ el.is( self._ui.screen ) ||
+ isNaN( zIndex ))) {
+ zIndexMax = Math.max( zIndexMax, zIndex );
}
+ } );
- coords = this._placementCoords(x, y,
- this._ui.container.outerWidth(true),
- this._ui.container.outerHeight(true));
-
- $(document)
- .find("*")
- .each(function () {
- var el = $(this),
- zIndex = parseInt(el.css("z-index"), 10);
- if (!(el.is(self._ui.container) || el.is(self._ui.screen) || isNaN(zIndex))) {
- zIndexMax = Math.max(zIndexMax, zIndex);
- }
- });
-
- this._ui.screen
- .height($(document).height())
+ this._ui.screen.css( "height", "100%" )
.removeClass("ui-screen-hidden");
- if (this.options.fade) {
- this._ui.screen.animate({opacity: 0.5}, "fast");
- } else {
- this._ui.screen.css({opacity: 0.0});
- }
+ if ( this.options.fade ) {
+ this._ui.screen.animate( {opacity: this.options.opacity}, "fast" );
+ } else {
+ this._ui.screen.css( {opacity: this.options.opacity} );
+ }
- //Recalculate popup position
- menuHeight = this._ui.container.innerHeight(true);
- menuWidth = this._ui.container.innerWidth(true);
- scrollTop = $(window).scrollTop();
- screenHeight = $(window).height();
- screenWidth = $(window).width();
- roomtop = y - scrollTop;
- roombot = scrollTop + screenHeight - y;
- halfheight = menuHeight / 2;
- maxwidth = parseFloat( this._ui.container.css( "max-width" ) );
- newtop = (screenHeight - menuHeight) / 2 + scrollTop;
-
- if ( menuWidth < maxwidth ) {
- newleft = ( screenWidth - menuWidth ) / 2;
- } else {
- //otherwise insure a >= 30px offset from the left
- newleft = x - menuWidth / 2;
-
- // 30px tolerance off the edges
- if ( newleft < 30 ) {
- newleft = 30;
- } else if ( ( newleft + menuWidth ) > screenWidth ) {
- newleft = screenWidth - menuWidth - 30;
+ this._setPosition( x_where, y_where );
+
+ this.element.trigger("popupbeforeposition");
+
+ this._ui.container
+ .removeClass("ui-selectmenu-hidden")
+ .addClass("in")
+ .animationComplete( function () {
+ self.element.trigger("popupafteropen");
+ } );
+
+ this._isOpen = true;
+
+ if ( !this._reflow ) {
+ this._reflow = function () {
+ if ( !self._isOpen ) {
+ return;
}
- }
- //Recalculate popup position End
- if ( ctxpopup ) {
- newtop = coords.y;
- newleft = coords.x;
- }
- this._ui.container
- .removeClass("ui-selectmenu-hidden")
- .css({
- top: newtop,
- left: newleft
- })
- .addClass("in")
- .animationComplete(function () {
- self._ui.screen.height($(document).height());
- });
-
- this._isOpen = true;
+ self._setPosition( x_where, y_where );
+ };
+
+ $( window ).bind( "resize", this._reflow );
}
},
close: function () {
- if (this._isOpen) {
- var self = this,
- hideScreen = function () {
- self._ui.screen.addClass("ui-screen-hidden");
- self._isOpen = false;
- self.element.trigger("closed");
- };
+ if ( !this._isOpen ) {
+ return;
+ }
+
+ if ( this._reflow ) {
+ $( window ).unbind( "resize", this._reflow );
+ this._reflow = null;
+ }
+
+ var self = this,
+ hideScreen = function () {
+ self._ui.screen.addClass("ui-screen-hidden");
+ self._isOpen = false;
+ };
+
+ this._ui.container.removeClass("in").addClass("reverse out");
+ if ( this.options.transition === "none" ) {
this._ui.container
- .removeClass("in")
- .addClass("reverse out")
- .animationComplete(function () {
- self._ui.container
- .removeClass("reverse out")
- .addClass("ui-selectmenu-hidden")
- .removeAttr("style");
- });
-
- if (this.options.fade) {
- this._ui.screen.animate({opacity: 0.0}, "fast", hideScreen);
+ .addClass("ui-selectmenu-hidden")
+ .removeAttr("style");
+ this.element.trigger("popupafterclose");
+ } else {
+ this._ui.container.animationComplete( function () {
+ self._ui.container
+ .removeClass("reverse out")
+ .addClass("ui-selectmenu-hidden")
+ .removeAttr("style");
+ self.element.trigger("popupafterclose");
+ } );
+ }
+
+ if ( this.options.fade ) {
+ this._ui.screen.animate( {opacity: 0}, "fast", hideScreen );
+ } else {
+ hideScreen();
+ }
+ },
+
+ _realSetTheme: function ( dst, theme ) {
+ var classes = ( dst.attr("class") || "" ).split(" "),
+ alreadyAdded = true,
+ currentTheme = null,
+ matches;
+
+ while ( classes.length > 0 ) {
+ currentTheme = classes.pop();
+ matches = currentTheme.match(/^ui-body-([a-z])$/);
+
+ if ( matches && matches.length > 1 ) {
+ currentTheme = matches[1];
+ break;
} else {
- hideScreen();
+ currentTheme = null;
}
}
+
+ dst.removeClass( "ui-body-" + currentTheme );
+ if ( ( theme || "" ).match(/[a-z]/) ) {
+ dst.addClass( "ui-body-" + theme );
+ }
+ },
+
+ _setTheme: function ( value ) {
+ this._realSetTheme( this.element, value );
+ this.options.theme = value;
+ this.element.attr( "data-" + ( $.mobile.ns || "" ) + "theme", value );
+ },
+
+ _setOverlayTheme: function ( value ) {
+ this._realSetTheme( this._ui.container, value );
+ this.options.overlayTheme = value;
+ this.element.attr( "data-" + ( $.mobile.ns || "" ) + "overlay-theme", value );
+ },
+
+ _setShadow: function ( value ) {
+ this.options.shadow = value;
+ this.element.attr( "data-" + ( $.mobile.ns || "" ) + "shadow", value );
+ this._ui.container[value ? "addClass" : "removeClass"]("ui-overlay-shadow");
+ },
+
+ _setCorners: function ( value ) {
+ this.options.corners = value;
+ this.element.attr( "data-" + ( $.mobile.ns || "" ) + "corners", value );
+ this._ui.container[value ? "addClass" : "removeClass"]("ui-corner-all");
+ },
+
+ _setFade: function ( value ) {
+ this.options.fade = value;
+ this.element.attr( "data-" + ( $.mobile.ns || "" ) + "fade", value );
+ },
+
+ _setTransition: function ( value ) {
+ this._ui.container
+ .removeClass( this.options.transition || "" )
+ .addClass( value );
+ this.options.transition = value;
+ this.element.attr( "data-" + ( $.mobile.ns || "" ) + "transition", value );
+ },
+
+ _setDisabled: function ( value ) {
+ $.Widget.prototype._setOption.call( this, "disabled", value );
+ if ( value ) {
+ this.close();
+ }
}
});
- $.tizen.popupwindow.bindPopupToButton = function (btn, popup) {
- if (btn.length === 0 || popup.length === 0) {
+ $.tizen.popupwindow.bindPopupToButton = function ( btn, popup ) {
+ if ( btn.length === 0 || popup.length === 0 ) {
return;
}
- var btnVClickHandler = function (e) {
- // When /this/ button causes a popup, align the popup's theme with that of the button, unless the popup has a theme pre-set
- if (!popup.jqmData("overlay-theme-set")) {
- popup.popupwindow("option", "overlayTheme", btn.jqmData("theme"));
+ var btnVClickHandler = function ( e ) {
+ if ( !popup.jqmData("overlay-theme-set") ) {
+ popup.popupwindow( "option", "overlayTheme", btn.jqmData("theme") );
}
- popup.popupwindow("open",
+
+ popup.popupwindow( "open",
btn.offset().left + btn.outerWidth() / 2,
- btn.offset().top + btn.outerHeight() / 2);
+ btn.offset().top + btn.outerHeight() / 2 );
- // Swallow event, because it might end up getting picked up by the popup window's screen handler, which
- // will in turn cause the popup window to close - Thanks Sasha!
- if (e.stopPropagation) {
- e.stopPropagation();
- }
- if (e.preventDefault) {
- e.preventDefault();
- }
+ return false;
};
- // If the popup has a theme set, prevent it from being clobbered by the associated button
- if ((popup.popupwindow("option", "overlayTheme") || "").match(/[a-z]/)) {
- popup.jqmData("overlay-theme-set", true);
+ if ( ( popup.popupwindow("option", "overlayTheme") || "" ).match(/[a-z]/) ) {
+ popup.jqmData( "overlay-theme-set", true );
}
btn
"aria-owns": btn.attr("href")
})
.removeAttr("href")
- .bind("vclick", btnVClickHandler);
+ .bind( "vclick", btnVClickHandler );
- popup.bind("destroyed", function () {
- btn.unbind("vclick", btnVClickHandler);
- });
+ popup.bind( "destroyed", function () {
+ btn.unbind( "vclick", btnVClickHandler );
+ } );
};
- $(document).bind("pagecreate create", function (e) {
- $($.tizen.popupwindow.prototype.options.initSelector, e.target)
+ $( document ).bind( "pagecreate create", function ( e ) {
+ $( $.tizen.popupwindow.prototype.options.initSelector, e.target )
.not(":jqmData(role='none'), :jqmData(role='nojs')")
.popupwindow();
- $("a[href^='#']:jqmData(rel='popupwindow')", e.target).each(function () {
- $.tizen.popupwindow.bindPopupToButton($(this), $($(this).attr("href")));
+ $( "a[href^='#']:jqmData(rel='popupwindow')", e.target ).each( function () {
+ $.tizen.popupwindow.bindPopupToButton( $( this ), $( $( this ).attr("href") ) );
});
});
-
-}(jQuery));
+}( jQuery ));
arrowSize / 2 // arrow unrestricted offset
+ desired[coord.point]
- orig[coord.point]
- - halfSize[coord.size]
+ - halfSize[coord.size]
)
),
// Triangle points here
var ctxpopup = this.element.data( "ctxpopup" );
if ( ctxpopup ) {
+ this._setFade( false );
this._setShadow( false );
this._setCorners( false );
this._setOverlayTheme( null );
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
* DEALINGS IN THE SOFTWARE.
* ***************************************************************************
+ *
+ * Author: Minkyu Kang <mk7.kang@samsung.com>
+ * Author: Koeun Choi <koeun.choi@samsung.com>
*/
-// progress
-(function ( $, window, undefined) {
+
+/*
+ * Progressing widget
+ *
+ * HTML Attributes
+ *
+ * data-role: set to 'progressing'.
+ * data-style: 'circle' or 'pending'.
+ *
+ * APIs
+ *
+ * show(): show the progressing.
+ * hide(): hide the progressing.
+ * running(boolean): start or stop the running.
+ *
+ * Events
+ *
+ * N/A
+ *
+ * Examples
+ *
+ * <li data-role="list-divider">Progress Pending</li>
+ * <li>
+ * <div data-role="progressing" data-style="pending" id="pending"></div>
+ * </li>
+ * <li data-role="list-divider">Progress ~ing</li>
+ * <li>
+ * <div data-role="progressing" data-style="circle" id="progressing"></div>Loading..
+ * </li>
+ *
+ * $("#pending").progress( "running", true );
+ * $("#progressing").progress( "running", true );
+ *
+ */
+
+(function ( $, window, undefined ) {
$.widget( "tizen.progress", $.mobile.widget, {
options: {
style: "circle",
running: false
},
- _show: function () {
+ show: function () {
+ $( this.element ).show();
+ },
+
+ hide: function () {
+ $( this.element ).hide();
+ },
+
+ _start: function () {
if ( !this.init ) {
$( this.element ).append( this.html );
this.init = true;
}
- var style = this.options.style;
- $( this.element ).addClass( "ui-progress-container-" + style + "-bg" );
+
+ this.show();
+
$( this.element )
- .find( ".ui-progress-" + style )
+ .find( ".ui-progress-" + this.options.style )
.addClass( this.runningClass );
},
- _hide: function () {
+ _stop: function () {
$( this.element )
.find( ".ui-progress-" + this.options.style )
.removeClass( this.runningClass );
},
- running: function ( newRunning ) {
- // get value
- if ( newRunning === undefined ) {
+ running: function ( running ) {
+ if ( running === undefined ) {
return this.options.running;
}
- // set value
- this._setOption( "running", newRunning );
- return this;
+ this._setOption( "running", running );
},
_setOption: function ( key, value ) {
if ( key === "running" ) {
- // normalize invalid value
if ( typeof value !== "boolean" ) {
window.alert( "running value MUST be boolean type!" );
return;
}
+
this.options.running = value;
this._refresh();
}
_refresh: function () {
if ( this.options.running ) {
- this._show();
+ this._start();
} else {
- this._hide();
+ this._stop();
}
},
if ( style ) {
this.options.style = style;
+ } else {
+ style = this.options.style;
}
this.html = $( '<div class="ui-progress-container-' + style + '">' +
- '<div class="ui-progress-' + style + '"></div>' +
+
'<div class="ui-progress-' + style + '"></div>' +
'</div>' );
runningClass = "ui-progress-" + style + "-running";
}
} ); /* End of widget */
- // auto self-init widgets
$( document ).bind( "pagecreate", function ( e ) {
- $( e.target ).find( ":jqmData(role='progress')" ).progress();
+ $( e.target ).find( ":jqmData(role='progressing')" ).progress();
} );
-}(jQuery, this));
+}( jQuery, this ));
themeclass = " ui-body-" + theme,
focusedEl,
clearbtn,
- currentPage = input.closest( ".ui-page" ),
searchicon,
cancelbtn,
defaultText,
newClassName,
newStyle,
newDiv,
- inputedText,
- extraLineHeight,
- keyupTimeoutBuffer,
- keyup,
- keyupTimeout;
+ inputedText;
function toggleClear() {
- if ( !input.val() ) {
- clearbtn.addClass( "ui-input-clear-hidden" );
- } else {
- clearbtn.removeClass( "ui-input-clear-hidden" );
- }
+ setTimeout(function () {
+ clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
+ }, 0);
}
function showCancel() {
focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-corner-all ui-btn-shadow" + themeclass + "'></div>" ).parent();
clearbtn = $( "<a href='#' class='ui-input-clear' title='clear text'>clear text</a>" )
- .tap( function ( event ) {
- event.preventDefault();
- event.stopPropagation();
-
- input.val( "" )
- .blur()
+ .bind('click', function ( event ) {
+ if ( input.attr( "disabled" ) == "disabled" ) {
+ return false;
+ }
+ input
+ .val( "" )
.focus()
- .trigger( "change" )
- .trigger( "input" );
+ .trigger( "change" );
clearbtn.addClass( "ui-input-clear-hidden" );
- } )
+ event.preventDefault();
+ })
.appendTo( focusedEl )
.buttonMarkup({
icon: "deleteSearch",
iconpos: "notext",
corners: true,
shadow: true
- } );
+ });
toggleClear();
- input.keyup( toggleClear );
input.bind( 'paste cut keyup focus change blur', toggleClear );
//SLP --start search bar with cancel button
focusedEl.wrapAll( "<div class='input-search-bar'></div>" );
- input.tap( function ( event ) {
- inputedText = input.val();
- input
- .blur()
- .focus();
- } );
-
- searchicon = $("<div class='ui-image-search ui-image-searchfield'></div>");
- searchicon
- .tap( function ( event ) {
+ searchicon = $("<div class='ui-image-search ui-image-searchfield'></div>")
+ .bind('click', function ( event ) {
+ if ( input.attr( "disabled" ) == "disabled" ) {
+ return false;
+ }
searchicon.hide();
input
.appendTo( focusedEl );
cancelbtn = $( "<a href='#' class='ui-input-cancel' title='clear text'>Cancel</a>" )
- .tap(function ( event ) {
+ .bind('click', function ( event ) {
+ if ( input.attr( "disabled" ) == "disabled" ) {
+ return false;
+ }
event.preventDefault();
event.stopPropagation();
} );
// Input Focused
- input.focus( function () {
- showCancel();
- focusedEl.addClass( "ui-focus" );
- } );
+ input
+ .focus( function () {
+ if ( input.attr( "disabled" ) == "disabled" ) {
+ return false;
+ }
+ showCancel();
+ focusedEl.addClass( $.mobile.focusClass );
+ })
+ .blur(function () {
+ focusedEl.removeClass( $.mobile.focusClass );
+ });
// Input Blured
/* When user touch on page, it's same to blur */
+ /* FIXME : if there is no problem, please remove this codes..
$( "div.input-search-bar" ).tap( function ( event ) {
+ if ( input.attr( "disabled" ) == "disabled" ) {
+ return false;
+ }
input.focus();
event.stopPropagation();
} );
+ var currentPage = input.closest( ".ui-page" );
$( currentPage ).bind("tap", function ( e ) {
- focusedEl.removeClass( "ui-focus" );
- hideCancel();
- input.trigger( "change" );
- } );
-
- // Autogrow
- if ( input.is( "textarea" ) ) {
- extraLineHeight = 15;
- keyupTimeoutBuffer = 100;
- keyup = function () {
- var scrollHeight = input[ 0 ].scrollHeight,
- clientHeight = input[ 0 ].clientHeight;
-
- if ( clientHeight < scrollHeight ) {
- input.height(scrollHeight + extraLineHeight);
- }
- };
-
- input.keyup( function () {
- clearTimeout( keyupTimeout );
- keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
- });
-
- // binding to pagechange here ensures that for pages loaded via
- // ajax the height is recalculated without user input
- $( document ).one( "pagechange", keyup );
+ if ( input.attr( "disabled" ) == "disabled" ) {
+ return;
+ }
- // Issue 509: the browser is not providing scrollHeight properly until the styles load
- if ( $.trim( input.val() ) ) {
- // bind to the window load to make sure the height is calculated based on BOTH
- // the DOM and CSS
- $( window ).load( keyup );
+ if ( $( input ).is( ":focus" ) ) {
+ focusedEl.removeClass( "ui-focus" );
+ hideCancel();
+ input.blur();
}
- }
+ } );*/
// Default Text
defaultText = input.jqmData( "default-text" );
disable: function () {
this.element.attr( "disabled", true );
this.element.parent().addClass( "ui-disabled" );
+ this.element.parent().parent().find(".ui-input-cancel").addClass( "ui-disabled" );
+ $( this.element ).blur();
},
enable: function () {
this.element.attr( "disabled", false );
this.element.parent().removeClass( "ui-disabled" );
+ this.element.parent().parent().find(".ui-input-cancel").removeClass( "ui-disabled" );
+ $( this.element ).focus();
}
} );
* Options:
* theme: string; the theme to use if none is specified using the 'data-theme' attribute
* default: 'c'
- * popupEnabled: boolean; controls whether the popup is displayed or not
- * specify if the popup is enabled using the 'data-popupEnabled' attribute
- * set from javascript using .tizenslider('option','popupEnabled',newValue)
+ * popup: boolean; controls whether the popup is displayed or not
+ * specify if the popup is enabled using the 'data-popup' attribute
+ * set from javascript using .tizenslider('option','popup',newValue)
*
* Events:
* changed: triggers when the value is changed (rather than when the handle is moved)
* <a href="#" id="popupEnabler" data-role="button" data-inline="true">Enable popup</a>
* <a href="#" id="popupDisabler" data-role="button" data-inline="true">Disable popup</a>
* <div data-role="fieldcontain">
- * <input id="mySlider" data-theme='a' data-popupenabled='false' type="range" name="slider" value="7" min="0" max="9" />
+ * <input id="mySlider" data-theme='a' data-popup='false' type="range" name="slider" value="7" min="0" max="9" />
* </div>
* <div data-role="fieldcontain">
* <input id="mySlider2" type="range" name="slider" value="77" min="0" max="777" />
* </div>
*
* // disable popup from javascript
- * $('#mySlider').tizenslider('option','popupEnabled',false);
+ * $('#mySlider').tizenslider('option','popup',false);
*
* // from buttons
* $('#popupEnabler').bind('vclick', function() {
- * $('#mySlider').tizenslider('option','popupEnabled',true);
+ * $('#mySlider').tizenslider('option','popup',true);
* });
* $('#popupDisabler').bind('vclick', function() {
- * $('#mySlider').tizenslider('option','popupEnabled',false);
+ * $('#mySlider').tizenslider('option','popup',false);
* });
*/
(function ($, window, undefined) {
$.widget("tizen.tizenslider", $.mobile.widget, {
options: {
- popupEnabled: true
+ popup: true
},
popup: null,
this.popupVisible = false;
var self = this,
- inputElement = $(this.element),
+ inputElement = $( this.element ),
slider,
- showPopup,
- hidePopup,
- positionPopup,
- updateSlider,
slider_bar,
handle_press,
popupEnabledAttr,
self.popup = $('<div class="ui-slider-popup"></div>');
- // set the popupEnabled according to the html attribute
- popupEnabledAttr = inputElement.attr('data-popupenabled');
+ // set the popup according to the html attribute
+ popupEnabledAttr = inputElement.jqmData('popup');
if ( popupEnabledAttr !== undefined ) {
- self.options.popupEnabled = (popupEnabledAttr === 'true');
+ self.options.popup = ( popupEnabledAttr === 'true' );
}
// get the actual slider added by jqm
self.handle_press.css('display', 'none');
// add a popup element (hidden initially)
- slider.before(self.popup);
+ slider.before( self.popup );
self.popup.hide();
// get the element where value can be displayed
self.handleText = slider.find('.ui-btn-text');
- if ( inputElement.attr('max') > 999 ) {
- self.handleText.css('font-size', '0.8em');
- }
// set initial value
self.updateSlider();
});
// watch events on the document to turn off the slider popup
- slider.add(document).bind('vmouseup', function () {
+ slider.add( document ).bind('vmouseup', function () {
self.hidePopup();
});
},
var dstOffset = this.handle.offset();
this.popup.offset({
- left: dstOffset.left + (this.handle.width() - this.popup.width()) / 2,
+ left: dstOffset.left + ( this.handle.width() - this.popup.width() ) / 2,
top: dstOffset.top - this.popup.outerHeight() + 15
});
// show value on the handle and in popup
updateSlider: function () {
+ var font_size,
+ newValue;
+
if ( this.popupVisible ) {
this.positionPopup();
}
// the slider's value changes :(
this.handle.removeAttr('title');
- this.slider_bar.width(this.handle.css('left'));
+ this.slider_bar.width( this.handle.css('left') );
- var newValue = this.element.val();
+ newValue = this.element.val();
if ( newValue === this.currentValue ) {
return;
}
+ if ( newValue > 999 ) {
+ font_size = '0.7em';
+ } else if ( newValue > 99 ) {
+ font_size = '0.8em';
+ } else if ( newValue > 9 ) {
+ font_size = '0.9em';
+ } else {
+ font_size = '1em';
+ }
+
+ if ( font_size != this.handleText.css('font-size') ) {
+ this.handleText.css( 'font-size', font_size );
+ }
+
this.currentValue = newValue;
- this.handleText.text(newValue);
- this.popup.html(newValue);
+ this.handleText.text( newValue );
+ this.popup.html( newValue );
- this.element.trigger('update', newValue);
+ this.element.trigger( 'update', newValue );
},
// show the popup
showPopup: function () {
- if ( !(this.options.popupEnabled && !this.popupVisible) ) {
+ if ( !this.options.popup || this.popupVisible ) {
return;
}
- this.handleText.hide();
this.popup.show();
this.popupVisible = true;
this._handle_press_show();
// hide the popup
hidePopup: function () {
- if ( !(this.options.popupEnabled && this.popupVisible) ) {
+ if ( !this.options.popup || !this.popupVisible ) {
return;
}
- this.handleText.show();
this.popup.hide();
this.popupVisible = false;
this._handle_press_hide();
}
switch ( key ) {
- case 'popupEnabled':
- this.options.popupEnabled = value;
+ case 'popup':
+ this.options.popup = value;
- if ( this.options.popupEnabled ) {
+ if ( this.options.popup) {
this.updateSlider();
} else {
this.hidePopup();
});
// stop jqm from initialising sliders
- $(document).bind("pagebeforecreate", function ( e ) {
- if ($.data(window, "jqmSliderInitSelector") === undefined ) {
- $.data(window, "jqmSliderInitSelector",
- $.mobile.slider.prototype.options.initSelector);
+ $( document ).bind( "pagebeforecreate", function ( e ) {
+ if ( $.data( window, "jqmSliderInitSelector" ) === undefined ) {
+ $.data( window, "jqmSliderInitSelector",
+ $.mobile.slider.prototype.options.initSelector );
$.mobile.slider.prototype.options.initSelector = null;
}
});
// initialise sliders with our own slider
- $(document).bind("pagecreate", function ( e ) {
- var jqmSliderInitSelector = $.data(window, "jqmSliderInitSelector");
- $(e.target).find(jqmSliderInitSelector).not('select').tizenslider();
- $(e.target).find(jqmSliderInitSelector).filter('select').slider();
+ $( document ).bind( "pagecreate", function ( e ) {
+ var jqmSliderInitSelector = $.data( window, "jqmSliderInitSelector" );
+ $( e.target ).find(jqmSliderInitSelector).not('select').tizenslider();
+ $( e.target ).find(jqmSliderInitSelector).filter('select').slider();
});
}( jQuery, this ));
*
* ***************************************************************************
* Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
- * Copyright (c) 2011 by Intel Corporation Ltd.
+ * Copyright (C) 2011 by Intel Corporation Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software" ),
+ * 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
* ***************************************************************************
*
* Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
+ * Daehyeon Jung <darrenh.jung@samsung.com>
*/
// Displays a simple two-state switch.
// element inside a page. Alternatively, call switch()
// on an element, like this :
//
-// $( "#myswitch" ).toggleswitch();
+// $("#myswitch").toggleswitch();
// where the html might be :
// <div id="myswitch"></div>
//
// Options:
-// checked: Boolean; the state of the switch
-// Default: true (up)
+// checked: Boolean; the state of the switch.(default: true)
+// texton: String; "On";
+// textoff: String; "Off";
//
// Events:
// changed: Emitted when the switch is changed
$.widget( "tizen.toggleswitch", $.tizen.widgetex, {
options: {
- onText : "On",
- offText : "Off",
+ texton : "On",
+ textoff : "Off",
checked : true,
initSelector : ":jqmData(role='toggleswitch')"
},
_htmlProto: {
ui: {
- outer : "#outer",
- bg : "#bg",
- txtMovers : {
- normal : "#normal",
- active : "#active"
- },
- btn : "#button",
- btnSpan : "#btn-span",
- txt : {
- normal : "[data-normal-text]",
- active : "[data-active-text]"
- }
+ container: "#container",
+ mover: "#mover",
+ on: "#on-span",
+ off: "#off-span"
}
},
+ destroy: function () {
+ this._ui.container.remove();
+ // restore original element
+ this.element.show();
+ },
+
_value: {
- attr: "data-" + ( $.mobile.ns || "" ) + "checked",
+ attr: "data-" + ($.mobile.ns || "") + "checked",
signal: "changed"
},
- _create: function () {
- var self = this;
-
- this.element
- .css( "display", "none" )
- .after( this._ui.outer );
-
- this._ui.outer.find( "a" ).buttonMarkup();
- this._ui.txtMovers.normal
- .add( this._ui.txtMovers.active )
- .find( "*" )
- .css( { "border-color": "transparent" } );
- this._ui.btn.addClass( "toggleswitch-button" );
-/*
- // Crutches for IE: It does not seem to understand opacity specified in a class, nor that opacity of an element
- // affects all its children
- if ($.mobile.browser.ie) {
- // Remove this class, because it has no effect in IE :-S
- this._ui.outer.find( "*" ).removeClass( "toggleswitch-button-transparent" );
- // After adding the button markup, make everything transparent
- this._ui.normalBackground.find( "*" ).css( "opacity", 0.0);
- this._ui.activeBackground.find( "*" ).css( "opacity", 0.0);
- this._ui.refButton.add( this._ui.refButton.find( "*" )).css( "opacity", 0.0);
- this._ui.realButton.add( this._ui.realButton.find( "*" )).css( "opacity", 0.0);
- // ... except the buttons that display the inital position of the switch
- this._ui.initButtons
- .add( this._ui.initButtons.find( "*" ))
- .add( this._ui.fButton.find( "*" ))
- .add( this._ui.fButton)
- .css( "opacity", 1.0);
- }
-*/
- $.extend( this, {
- _initial: true
- } );
-
- this._ui.btn
- .add( this._ui.outer )
- .bind( "vclick", function ( e ) {
- self._setChecked( !( self.options.checked ) );
- e.stopPropagation();
- } );
- },
-/*
- _makeTransparent: function (obj, b) {
- if ($.mobile.browser.ie)
- obj.add(obj.find( "*" )).css( "opacity", b ? 0.0 : 1.0);
- else
- obj[b ? "addClass" : "removeClass"]( "toggleswitch-button-transparent" );
- },
-*/
- _setDisabled: function ( value ) {
- $.tizen.widgetex.prototype._setDisabled.call( this, value );
- this._ui.outer[value ? "addClass" : "removeClass"]( "ui-disabled" );
+ _setTexton: function ( text ) {
+ this._ui.on.text( text );
+ this.options.texton = text;
+ this.element.attr( "data-" + ($.mobile.ns || "") + "texton", text );
},
- _updateBtnText: function () {
- var noText = ( ( ( this.options.offText || "" ) === "" &&
- ( this.options.onText || "" ) === "" ) );
- this._ui.btnSpan.html( ( noText ? "" : " " ) );
- this._ui.outer.find( "a" )[( noText ? "addClass" : "removeClass" )]( "ui-btn-icon-notext" );
+ _setTextoff: function ( text ) {
+ this._ui.off.text( text );
+ this.options.textoff = text;
+ this.element.attr( "data-" + ($.mobile.ns || "") + "textoff", text );
},
- _setOnText: function ( value ) {
- this._ui.txt.active.text( value );
- this.options.onText = value;
- this.element.attr( "data-" + ( $.mobile.ns || "" ) + "on-text", value );
- this._updateBtnText();
- },
+ _setChecked: function ( checked ) {
+ if ( checked == this.options.checked ) {
+ return;
+ }
- _setOffText: function ( value ) {
- this._ui.txt.normal.text( value );
- this.options.offText = value;
- this.element.attr( "data-" + ($.mobile.ns || "" ) + "off-text", value );
- this._updateBtnText();
+ this.options.checked = checked;
+ this._setValue( checked );
+ if ( checked ) {
+ this._ui.container.addClass("ui-toggleswitch-state-checked");
+ } else {
+ this._ui.container.removeClass("ui-toggleswitch-state-checked");
+ }
},
- _setChecked: function ( checked ) {
- if ( this.options.checked != checked ) {
- var dst = checked
- ? { bg: "0%", normalTop: "-50%", activeBot: "0%" }
- : { bg: "50%", normalTop: "0%", activeBot: "-50%" },
- method = ( this._initial ? "css" : "animate" );
+ _setDisabled: function ( value ) {
+ $.tizen.widgetex.prototype._setDisabled.call( this, value );
+ this._ui.container[value ? "addClass" : "removeClass"]( "ui-disabled" );
+ },
- this._ui.btn.add( this._ui.bg )[method]( { top: dst.bg } );
- this._ui.txtMovers.normal[method]( { top: dst.normalTop } );
- this._ui.txtMovers.active[method]( { bottom: dst.activeBot } );
+ _create: function () {
+ var self = this;
+ this.element.hide().after( this._ui.container );
+ if ( this.element.jqmData("icon") ) {
+ this._ui.container.find(".ui-toggleswitch-text").hide();
+ this._ui.container.find(".ui-toggleswitch-img").show();
+ } else {
+ this._ui.container.find(".ui-toggleswitch-img").hide();
+ }
- this._initial = false;
+ $( this._ui.mover ).bind( "vclick", function () {
+ self._setChecked( !self.options.checked );
+ return false;
+ });
+ },
- this.options.checked = checked;
- this.element.attr( "data-" + ( $.mobile.ns || "" ) + "checked", checked );
- this._setValue( checked );
- }
- }
- } );
+ });
$( document ).bind( "pagecreate create", function ( e ) {
$( $.tizen.toggleswitch.prototype.options.initSelector, e.target )
.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
.toggleswitch();
- } );
+ });
+
-}( jQuery ) );
+}( jQuery ));
+++ /dev/null
-.ui-toggleswitch {
- position: relative;
- overflow: hidden;
-
- .toggleswitch-background {
- position: absolute;
- margin: 0px;
- border: 0px;
- left: 0px;
- right: 0px;
- top: 0px;
- bottom: 0px;
- pointer-events: none;
- }
-
- .toggleswitch-sizer {
- margin: 0px;
- opacity: 0;
- pointer-events: none;
- }
-
- .toggleswitch-floating-button {
- position: absolute;
- margin: 0px;
- left: 0px;
- right: 0px;
- }
-
- .toggleswitch-mover {
- border-color: transparent;
- background: none;
- pointer-events: none;
- }
-}
-<div id="outer" class="ui-btn ui-btn-corner-all ui-btn-inline ui-shadow ui-toggleswitch">
- <div class="ui-btn ui-btn-corner-all ui-btn-up-c toggleswitch-background"></div>
- <div class="ui-btn ui-btn-corner-all ui-btn-up-c toggleswitch-background ui-btn-active" id="bg"></div>
- <a data-role="button" data-shadow="false" class="toggleswitch-floating-button toggleswitch-mover" id="normal">
- <span data-normal-text="true"></span>
- </a>
- <a data-role="button" data-shadow="false" class="toggleswitch-floating-button toggleswitch-mover ui-btn-active" id="active">
- <span data-active-text="true"></span>
- </a>
- <a data-role="button" data-shadow="false" class="toggleswitch-sizer">
- <span data-normal-text="true"></span>
- </a>
- <a data-role="button" data-shadow="false" class="toggleswitch-sizer">
- <span data-active-text="true"></span>
- </a>
- <a data-role="button" data-shadow="false" class="toggleswitch-floating-button" id="button">
- <span id="btn-span"></span>
- </a>
+<div id="container" class="ui-toggleswitch jquery-mobile-ui-widget">
+ <div id="mover" class="ui-toggleswitch-mover">
+ <div class="ui-toggleswitch-off">
+ <span id="off-span" class="ui-toggleswitch-text">Off</span>
+ <span class="ui-toggleswitch-img"><span class="ui-toggleswitch-sign"></span></span>
+ </div>
+ <div class="ui-toggleswitch-on">
+ <span id="on-span" class="ui-toggleswitch-text">On</span>
+ <span class="ui-toggleswitch-img"><span class="ui-toggleswitch-sign"></span></span>
+ </div>
+ <div class="ui-toggleswitch-reed">
+ </div>
+ </div>
</div>
* ***************************************************************************
*
* Author: Kangsik Kim <kangsik81.kim@samsung.com>
+ * Youmin Ha <youmin.ha@samsung.com>
*/
/**
- * Virtual Grid Widget for unlimited data.
- * To support more then 1,000 items, special grid widget developed.
- * Fast initialize and light DOM tree.
+ * In the web environment, it is challenging to display a large amount of data in a grid.
+ * When an application needs to show, for example, image gallery with over 1,000 images,
+ * the same enormous data must be inserted into a HTML document.
+ * It takes a long time to display the data and manipulating DOM is complex.
+ * The virtual grid widget supports storing unlimited data without performance issues
+ * by reusing a limited number of grid elements.
+ * The virtual grid widget is based on the jQuery.template plug-in
+ * For more information, see jQuery.template.
*
* HTML Attributes:
*
- * data-role: virtualgridview
- * data-template : jQuery.template ID that populate into virtual list
- * data-dbtable : DB Table name. It used as window[DB NAME]. Loaded data should be converted as window object.
- * data-dbkey : Unique key of DB Table. To sync each element on virtual list with DB table.
- * data-column : Set a number of column. (Default : 3)
- * data-row : Set a number of row. (Default : 10)
+ * data-role: virtualgrid
+ * data-template : Has the ID of the jQuery.template element.
+ * jQuery.template for a virtual grid must be defined.
+ * Style for template would use rem unit to support scalability.
+ * data-itemcount : Number of column elements. (Default : 1)
+ * User can select a numeric type or 'auto'.
+ * If value of attribute is 'auto', Number of column is dependent on screen size.
+ * If value of attribute is numeric type, number of column is always fixed.
+ * data-direction : This option define the direction of the scroll.
+ * You must choose one of the 'x' and 'y' (Default : y)
+ * data-rotation : This option defines whether or not the circulation of the data.
+ * If option is 'true' and scroll is reached the last data,
+ * Widget will present the first data on the screen.
+ * If option is ‘false’, Widget will operate like a scrollview.
*
- * ID : <UL> element that has "data-role=virtualgrid" must have ID attribute.
- * Class : <UL> element that has "data-role=virtualgrid" should have "vgLoadSuccess" class to guaranty DB loading is completed.
+ * ID : <DIV> element that has "data-role=virtualgrid" must have ID attribute.
*
* APIs:
*
- * create ( void )
- * : API to call _create method. API for AJAX or DB loading callback.
+ * create ( {
+ * itemData: function ( idx ) { return json_obj; },
+ * numItemData: number or function () { return number; },
+ * cacheItemData: function ( minIdx, maxIdx ) {}
+ * } )
+ * : Create VirtualGrid widget. At this moment, _create method is called.
+ * args : A collection of options
+ * itemData: A function that returns JSON object for given index. Mandatory.
+ * numItemData: Total number of itemData. Mandatory.
+ * cacheItemData: Virtuallist will ask itemData between minIdx and maxIdx.
+ * Developers can implement this function for preparing data.
+ * Optional.
*
- * Events:
+ * centerTo ( String )
+ * : Find a DOM Element with the given class name.
+ * This element will be centered on the screen.
+ * Serveral elements were found, the first element is displayed.
*
+ * Events:
+ * scrollstart : : This event triggers when a user begin to move the scroll on VirtualGrid.
+ * scrollupdate : : This event triggers while a user moves the scroll on VirtualGrid.
+ * scrollstop : This event triggers when a user stop the scroll on VirtualGrid.
+ * select : This event triggers when a cell is selected.
*
* Examples:
*
* <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
* <div class="ui-demo-namecard">
* <div class="ui-demo-namecard-pic">
- * <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />
+ * <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />
* </div>
* <div class="ui-demo-namecard-contents">
* <span class="name ui-li-text-main">${NAME}</span>
* </div>
* </div>
* </script>
- * <div id="virtualgrid-demo" data-role="virtualgrid" data-column="3" data-row="60" data-template="tizen-demo-namecard" data-dbtable="JSON_DATA" >
+ * <div id="virtualgrid-demo" data-role="virtualgrid" data-itemcount="3" data-template="tizen-demo-namecard" >
* </div>
*
*/
-( function ( $, window, undefined ) {
- $.widget( "tizen.virtualgrid", $.mobile.widget, {
+// most of following codes are derived from jquery.mobile.scrollview.js
+( function ($, window, document, undefined) {
+
+ function circularNum (num, total) {
+ var n = num % total;
+ if (n < 0) {
+ n = total + n;
+ }
+ return n;
+ }
+
+ function MomentumTracker (options) {
+ this.options = $.extend({}, options);
+ this.easing = "easeOutQuad";
+ this.reset();
+ }
+
+ var tstates = {
+ scrolling : 0,
+ done : 1
+ };
+
+ function getCurrentTime () {
+ return (new Date()).getTime();
+ }
+
+ $.extend (MomentumTracker.prototype, {
+ start : function (pos, speed, duration) {
+ this.state = (speed !== 0 ) ? tstates.scrolling : tstates.done;
+ this.pos = pos;
+ this.speed = speed;
+ this.duration = duration;
+
+ this.fromPos = 0;
+ this.toPos = 0;
+
+ this.startTime = getCurrentTime();
+ },
+
+ reset : function () {
+ this.state = tstates.done;
+ this.pos = 0;
+ this.speed = 0;
+ this.duration = 0;
+ },
+
+ update : function () {
+ var state = this.state, duration, elapsed, dx, x;
+
+ if (state == tstates.done) {
+ return this.pos;
+ }
+ duration = this.duration;
+ elapsed = getCurrentTime () - this.startTime;
+ elapsed = elapsed > duration ? duration : elapsed;
+ dx = this.speed * (1 - $.easing[this.easing] (elapsed / duration, elapsed, 0, 1, duration) );
+ x = this.pos + dx;
+ this.pos = x;
+
+ if (elapsed >= duration) {
+ this.state = tstates.done;
+ }
+ return this.pos;
+ },
+
+ done : function () {
+ return this.state == tstates.done;
+ },
+
+ getPosition : function () {
+ return this.pos;
+ }
+ });
+
+ jQuery.widget ("mobile.virtualgrid", jQuery.mobile.widget, {
options : {
- id : "",
- column : 3,
- dbtable : "",
+ // virtualgrid option
template : "",
- row : 20,
- dbkey : false
+ direction : "y",
+ rotation : false,
+ itemcount : 1
},
+
create : function () {
- this._create();
- },
- _create : function () {
- $.extend( this, {
- NO_SCROLL : 0,
- SCROLL_DOWN : 1,
- SCROLL_UP : -1,
- _titleHeight : 0,
- _blockHeight : 0,
- _bufferSize : 0,
- _columnWidth : 0,
- _totalItemCnt : 0,
+ this._create.apply( this, arguments );
+ },
+
+ _create : function ( args ) {
+ $.extend(this, {
+ // view
+ _$view : null,
+ _$clip : null,
+ _$rows : null,
+ _tracker : null,
+ _viewSize : 0,
+ _clipSize : 0,
+ _cellSize : undefined,
+ _currentItemCount : 0,
+ _itemCount : 1,
+ _isAuto : false,
+
+ // timer
+ _timerInterval : 0,
+ _timerID : 0,
+ _timerCB : null,
+ _lastMove : null,
+
+ // Data
+ _itemData : function ( idx ) { return null; },
+ _numItemData : 0,
+ _cacheItemData : function ( minIdx, maxIdx ) { },
_totalRowCnt : 0,
- _currentIndex : 0,
- _remainCount : 0,
- _viewHeight : 0,
- _direction : 0,
- _firstIndex : 0,
- _lastIndex : 0,
- _prevPos : 0,
- _numTopItems : 0
+ _template : null,
+ _maxViewSize : 0,
+ _modifyViewPos : 0,
+ _maxSize : 0,
+
+ // axis - ( true : x , false : y )
+ _direction : false,
+ _didDrag : true,
+ _reservedPos : 0,
+ _scalableSize : 0,
+ _eventPos : 0,
+ _nextPos : 0,
+ _movePos : 0,
+ _lastY : 0,
+ _speedY : 0,
+ _lastX : 0,
+ _speedX : 0,
+ _rowsPerView : 0,
+
+ _filterRatio : 0.9
});
- var opts = this.options, widget = this;
- opts.id = "#" + this.element.attr( 'id' );
-
- if ( $( opts.id ).hasClass( "vgLoadSuccess" ) ) {
- $( opts.id ).empty();
- // validation row, column count
- // initialize global value.
- widget._lastIndex = opts.row;
- widget._bufferSize = ( parseInt( ( opts.row / 4 ), 10 ) );
- widget._totalItemCnt = $( window[opts.dbtable] ).size();
- widget._pushData( ( opts.template ), window[opts.dbtable] );
- widget._reposition();
- widget._addEvents();
- }
- },
- _pushData : function ( template, data ) {
- var widget = this,
- opts = this.options,
- dataTable = data,
- myTemplate = $( "#" + template ),
- viewcount = opts.row * opts.column,
- lastIndex = viewcount,
- index = 0,
- rowIndex = 0,
- colIndex = 0,
- wrapBlock = null;
+ var self = this,
+ $dom = $(self.element),
+ opts = self.options,
+ $item = null;
+
+ // itemData
+ // If mandatory options are not given, Do nothing.
+ if ( !args ) {
+ return ;
+ }
+
+ if ( !self._loadData(args) ) {
+ return;
+ }
- for ( rowIndex = 0; rowIndex < opts.row; rowIndex += 1 ) {
- wrapBlock = widget._makeWrapBlock( myTemplate, dataTable );
- $( wrapBlock ).attr( "id", "block_" + rowIndex );
- $( opts.id ).append( wrapBlock );
+ // set a scroll direction.
+ self._direction = opts.direction === 'x' ? true : false;
+
+ // itemcount is assigned 'auto'
+ if ( typeof opts.itemcount === "string" && opts.itemcount.toUpperCase() == "AUTO" ) {
+ self._isAuto = true;
}
- widget._blockHeight = $( wrapBlock ).outerHeight();
+
+ // make view layer
+ self._$clip = $(self.element).addClass("ui-scrollview-clip").addClass("ui-virtualgrid-view");
+ $item = $(document.createElement("div")).addClass("ui-scrollview-view");
+ self._clipSize = self._calculateClipSize();
+ self._$clip.append($item);
+ self._$view = $item;
+ self._$clip.css("overflow", "hidden");
+ self._$view.css("overflow", "hidden");
+
+ // inherit from scrollview widget.
+ self._scrollView = $.tizen.scrollview.prototype;
+ self._initScrollView();
+
+ // create tracker.
+ self._createTracker();
+ self._makePositioned(self._$clip);
+ self._timerInterval = 1000 / self.options.fps;
+
+ self._timerID = 0;
+ self._timerCB = function () {
+ self._handleMomentumScroll();
+ };
+ $dom.closest(".ui-content").addClass("ui-virtualgrid-content").css("overflow", "hidden");
+
+ // add event handler.
+ self._addBehaviors();
+
+ self._currentItemCount = 0;
+ self._createScrollBar();
+ self.refresh();
},
- // make a single row block
- _makeWrapBlock : function ( myTemplate, dataTable ) {
- var widget = this,
- opts = widget.options,
- index = widget._currentIndex,
- htmlData = null,
- colIndex = 0,
- wrapBlock = document.createElement( "div" );
- $( wrapBlock ).addClass( "ui-virtualgrid-wrapblock" );
- for ( colIndex = 0; colIndex < opts.column; colIndex++ ) {
- htmlData = myTemplate.tmpl( dataTable[index] );
- $( wrapBlock ).append( htmlData );
- index = index <= widget._totalItemCnt ? index + 1 : 0;
+ // The argument is checked for compliance with the specified format.
+ // @param args : Object
+ // @return boolean
+ _loadData : function ( args ) {
+ var self = this;
+
+ if ( args.itemData && typeof args.itemData == 'function' ) {
+ self._itemData = args.itemData;
+ } else {
+ return false;
}
- widget._currentIndex = index;
- return wrapBlock;
+ if ( args.numItemData ) {
+ if ( typeof args.numItemData == 'function' ) {
+ self._numItemData = args.numItemData( );
+ } else if ( typeof args.numItemData == 'number' ) {
+ self._numItemData = args.numItemData;
+ } else {
+ return false;
+ }
+ } else {
+ return false;
+ }
+ return true;
},
- _reposition : function () {
- var widget = this,
- $view = widget.element,
- opts = this.options,
- wrapsBlocks = null,
- childBlocks = null,
- blockCount = 0,
- index = 0,
- subIndex = 0,
- firstBlock = $( ".ui-virtualgrid-wrapblock:first" ),
- subBlocks = firstBlock.children();
- widget._blockHeight = firstBlock.outerHeight();
- widget._titleHeight = firstBlock.position().top;
+ // Make up the first screen.
+ _initLayout: function () {
+ var self = this,
+ opts = self.options,
+ i,
+ $row;
- if ( subBlocks[0] ) {
- widget._columnWidth = $( subBlocks[0] ).outerWidth();
+ for ( i = -1; i < self._rowsPerView + 1; i += 1 ) {
+ $row = self._$rows[ circularNum( i, self._$rows.length ) ];
+ self._$view.append( $row );
}
+ self._setElementTransform( -self._cellSize );
- wrapsBlocks = $( ".ui-virtualgrid-wrapblock" );
- blockCount = wrapsBlocks.length;
- for ( index = 0; index < blockCount; index += 1 ) {
- $( wrapsBlocks[index] ).css( "top", widget._titleHeight + ( index * widget._blockHeight ) );
- childBlocks = $( wrapsBlocks[index] ).children();
- for ( subIndex = 0; subIndex < childBlocks.length; subIndex += 1 ) {
- $( childBlocks[subIndex] ).css( "left", ( subIndex * widget._columnWidth ) + 'px' );
- }
+ self._replaceRow(self._$view.children().first(), self._totalRowCnt - 1);
+ if ( opts.rotation && self._rowsPerView >= self._totalRowCnt ) {
+ self._replaceRow(self._$view.children().last(), 0);
}
- // check total row count and setup total height
- widget._totalRowCnt = ( widget._totalItemCnt % opts.column ) === 0 ? ( widget._totalItemCnt / opts.column ) : ( parseInt( ( widget._totalItemCnt / opts.column ), 10 ) + 1 );
- $( opts.id ).height( widget._totalRowCnt * widget._blockHeight );
+ self._setViewSize();
},
- _addEvents : function () {
- var widget = this;
+ _setViewSize : function () {
+ var self = this,
+ height = 0,
+ width = 0;
- $( document ).bind( "scrollupdate.virtualgrid", function ( event ) {
- widget._doScrollEvent(event);
- });
+ if ( self._direction ) {
+ width = self._cellSize * ( self._rowsPerView + 2 );
+ width = parseInt(width, 10) + 1;
+ self._$view.width( width );
+ self._viewSize = self._$view.width();
+ } else {
+ self._$view.height( self._cellSize * ( self._rowsPerView + 2 ) );
+ self._$clip.height( self._clipSize );
+ self._viewSize = self._$view.height();
+ }
+ },
- $( document ).bind( "scrollstop.virtualgrid", function ( event ) {
- widget._doScrollEvent(event);
- });
+ refresh : function () {
+ var self = this,
+ opts = self.options,
+ width = 0,
+ height = 0;
+
+ self._template = $( "#" + opts.template );
+ if ( !self._template ) {
+ return ;
+ }
+
+ width = self._calculateClipWidth();
+ height = self._calculateClipHeight();
+ self._$view.width(width).height(height);
+ self._$clip.width(width).height(height);
+
+ self._clipSize = self._calculateClipSize();
+ self._calculateColumnSize();
+ self._initPageProperty();
+ self._setScrollBarSize( );
},
- _doScrollEvent : function ( event ) {
- var widget = this,
- $view = this.element,
- opts = widget.options,
- dataList = window [opts.dbtable],
- filterCondition = 0,
- replaceRowCnt = 0,
- replacedCount = 0,
- $scrollview = $view.closest (".ui-scrollview-view"),
- transformValue = null,
- curWindowTop = 0;
-
- transformValue = widget._matrixToArray ($scrollview.css ("-webkit-transform"));
- curWindowTop = Math.abs (transformValue [5]);
- if (widget._prevPos > curWindowTop) {
- widget._direction = widget.SCROLL_UP;
- } else if (widget._prevPos < curWindowTop) {
- widget._direction = widget.SCROLL_DOWN;
- }
-
- if (widget._direction == widget.SCROLL_DOWN) {
- filterCondition = (curWindowTop - widget._blockHeight );
- replaceRowCnt = $ (".ui-virtualgrid-wrapblock").filter (function () {
- return (parseInt (($ (this).position ().top ), 10) < filterCondition );
- }).size ();
- if (replaceRowCnt > widget._bufferSize) {
- $ (document).bind ("touchstart.virtualgrid", function (event) {
- event.preventDefault ();
- });
-
- replaceRowCnt = replaceRowCnt - widget._bufferSize;
- replacedCount = widget._moveTopBottom (widget._firstIndex, widget._lastIndex, replaceRowCnt, opts.dbkey);
- widget._firstIndex += replacedCount;
- widget._lastIndex += replacedCount;
- widget._numTopItems -= replacedCount;
- $ (document).unbind ("touchstart.virtualgrid");
+ _initPageProperty : function () {
+ var self = this,
+ rowsPerView = 0,
+ $child,
+ columnCount = 0,
+ totalRowCnt = 0,
+ attributeName = self._direction ? "width" : "height";
+
+ if ( self._isAuto ) {
+ columnCount = self._calculateColumnCount();
+ } else {
+ columnCount = self.options.itemcount;
+ }
+ totalRowCnt = parseInt(self._numItemData / columnCount , 10 );
+ self._totalRowCnt = self._numItemData % columnCount === 0 ? totalRowCnt : totalRowCnt + 1;
+ self._itemCount = columnCount;
+
+ if ( self._cellSize <= 0) {
+ return ;
+ }
+
+ rowsPerView = self._clipSize / self._cellSize;
+ rowsPerView = Math.ceil( rowsPerView );
+ self._rowsPerView = parseInt( rowsPerView, 10);
+
+ $child = self._makeRows( rowsPerView + 2 );
+ $(self._$view).append($child.children());
+ self._$view.children().css(attributeName, self._cellSize + "px");
+ self._$rows = self._$view.children().detach();
+
+ self._reservedPos = -self._cellSize;
+ self._scalableSize = -self._cellSize;
+
+ self._initLayout();
+
+ self._blockScroll = self._rowsPerView > self._totalRowCnt;
+ self._maxSize = ( self._totalRowCnt - self._rowsPerView ) * self._cellSize;
+ self._maxViewSize = ( self._rowsPerView ) * self._cellSize;
+ self._modifyViewPos = -self._cellSize;
+ if ( self._clipSize < self._maxViewSize ) {
+ self._modifyViewPos = (-self._cellSize) + ( self._clipSize - self._maxViewSize );
+ }
+ },
+
+ resize : function ( ) {
+ var self = this,
+ rowsPerView = 0,
+ itemCount = 0,
+ totalRowCnt = 0,
+ diffRowCnt = 0,
+ clipSize = 0,
+ prevcnt = 0,
+ clipPosition = 0;
+
+ itemCount = self._calculateColumnCount();
+ if ( self._isAuto && itemCount != self._itemCount ) {
+ totalRowCnt = parseInt(self._numItemData / itemCount , 10 );
+ self._totalRowCnt = self._numItemData % itemCount === 0 ? totalRowCnt : totalRowCnt + 1;
+ prevcnt = self._itemCount;
+ self._itemCount = itemCount;
+ clipPosition = self._getClipPosition();
+ self._$view.hide();
+
+ diffRowCnt = self._replaceRows(itemCount, prevcnt, self._totalRowCnt, clipPosition);
+ self._maxSize = ( self._totalRowCnt - self._rowsPerView ) * self._cellSize;
+ self._scalableSize += (-diffRowCnt) * self._cellSize;
+ self._reservedPos += (-diffRowCnt) * self._cellSize;
+ self._setScrollBarSize();
+ self._setScrollBarPosition(diffRowCnt);
+
+ self._$view.show();
+ }
+
+ clipSize = self._calculateClipSize();
+ if ( clipSize !== self._clipSize ) {
+ rowsPerView = clipSize / self._cellSize;
+ rowsPerView = parseInt( Math.ceil( rowsPerView ), 10 );
+
+ if ( rowsPerView > self._rowsPerView ) {
+ // increase row.
+ self._increaseRow( rowsPerView - self._rowsPerView );
+ } else if ( rowsPerView < self._rowsPerView ) {
+ // decrease row.
+ self._decreaseRow( self._rowsPerView - rowsPerView );
}
- } else if (widget._direction == widget.SCROLL_UP) {
- filterCondition = (curWindowTop + widget._viewHeight + ( widget._blockHeight * 3) );
- replaceRowCnt = $ (".ui-virtualgrid-wrapblock").filter (function () {
- return (parseInt (($ (this).position ().top ), 10) > filterCondition );
- }).size ();
- if (replaceRowCnt > widget._bufferSize) {
- $ (document).bind ("touchstart.virtualgrid", function (event) {
- event.preventDefault ();
- });
-
- replaceRowCnt = replaceRowCnt - widget._bufferSize;
- replacedCount = widget._moveBottomTop (widget._firstIndex, widget._lastIndex, replaceRowCnt, opts.dbkey);
- widget._firstIndex -= replacedCount;
- widget._lastIndex -= replacedCount;
- widget._numTopItems += replacedCount;
- $ (document).unbind ("touchstart.virtualgrid");
+ self._rowsPerView = rowsPerView;
+ self._clipSize = clipSize;
+ self._blockScroll = self._rowsPerView > self._totalRowCnt;
+ self._maxSize = ( self._totalRowCnt - self._rowsPerView ) * self._cellSize;
+ self._maxViewSize = ( self._rowsPerView ) * self._cellSize;
+ if ( self._clipSize < self._maxViewSize ) {
+ self._modifyViewPos = (-self._cellSize) + ( self._clipSize - self._maxViewSize );
}
+ if ( self._direction ) {
+ self._$clip.width(self._clipSize);
+ } else {
+ self._$clip.height(self._clipSize);
+ }
+ self._setScrollBarSize();
+ self._setScrollBarPosition(0);
+ self._setViewSize();
}
- // save preve position information.
- widget._prevPos = curWindowTop;
},
- /* Matrix to Array function written by Blender@stackoverflow.nnikishi@emich.edu*/
- _matrixToArray : function ( matrix ) {
- var contents = matrix.substr( 7 );
- contents = contents.substr( 0, contents.length - 1 );
- return contents.split( ', ' );
+ _initScrollView : function () {
+ var self = this;
+ $.extend(self.options, self._scrollView.options);
+ self.options.moveThreshold = 10;
+ self.options.showScrollBars = false;
+ self._getScrollHierarchy = self._scrollView._getScrollHierarchy;
+ self._makePositioned = self._scrollView._makePositioned;
+ self._set_scrollbar_size = self._scrollView._set_scrollbar_size;
+ self._setStyleTransform = self._scrollView._setElementTransform;
},
- //Move older item to bottom
- _moveTopBottom : function ( v_firstIndex, v_lastIndex, num, key ) {
- if ( v_firstIndex < 0 ) {
- return;
+
+ _createTracker : function () {
+ var self = this;
+
+ self._tracker = new MomentumTracker(self.options);
+ if ( self._direction ) {
+ self._hTracker = self._tracker;
+ self._$clip.width(self._clipSize);
+ } else {
+ self._vTracker = self._tracker;
+ self._$clip.height(self._clipSize);
+ }
+ },
+
+ //----------------------------------------------------//
+ // Scrollbar //
+ //----------------------------------------------------//
+ _createScrollBar : function () {
+ var self = this,
+ prefix = "<div class=\"ui-scrollbar ui-scrollbar-",
+ suffix = "\"><div class=\"ui-scrollbar-track\"><div class=\"ui-scrollbar-thumb\"></div></div></div>";
+
+ if ( self.options.rotation ) {
+ return ;
+ }
+
+ if ( self._direction ) {
+ self._$clip.append( prefix + "x" + suffix );
+ self._hScrollBar = $(self._$clip.children(".ui-scrollbar-x"));
+ self._hScrollBar.find(".ui-scrollbar-thumb").addClass("ui-scrollbar-thumb-x");
+ } else {
+ self._$clip.append( prefix + "y" + suffix );
+ self._vScrollBar = $(self._$clip.children(".ui-scrollbar-y"));
+ self._vScrollBar.find(".ui-scrollbar-thumb").addClass("ui-scrollbar-thumb-y");
+ }
+ },
+
+ _setScrollBarSize: function () {
+ var self = this,
+ scrollBarSize = 0,
+ currentSize = 0,
+ $scrollBar,
+ attrName,
+ className;
+
+ if ( self.options.rotation ) {
+ return ;
}
- if ( num < 1 ) {
+ scrollBarSize = parseInt( self._maxViewSize / self._clipSize , 10);
+ if ( self._direction ) {
+ $scrollBar = self._hScrollBar.find(".ui-scrollbar-thumb");
+ attrName = "width";
+ currentSize = $scrollBar.width();
+ className = "ui-scrollbar-thumb-x";
+ self._hScrollBar.css("width", self._clipSize);
+ } else {
+ $scrollBar = self._vScrollBar.find(".ui-scrollbar-thumb");
+ attrName = "height";
+ className = "ui-scrollbar-thumb-y";
+ currentSize = $scrollBar.height();
+ self._vScrollBar.css("height", self._clipSize);
+ }
+
+ if ( scrollBarSize > currentSize ) {
+ $scrollBar.removeClass(className);
+ $scrollBar.css(attrName, scrollBarSize);
+ } else {
+ scrollBarSize = currentSize;
+ }
+
+ self._itemScrollSize = parseFloat( ( self._clipSize - scrollBarSize ) / ( self._totalRowCnt - self._rowsPerView ) );
+ self._itemScrollSize = Math.round(self._itemScrollSize * 100) / 100;
+ },
+
+ _setScrollBarPosition : function ( di, duration ) {
+ var self = this,
+ $sbt = null,
+ x = "0px",
+ y = "0px";
+
+ if ( self.options.rotation ) {
+ return ;
+ }
+
+ self._currentItemCount = self._currentItemCount + di;
+ if ( self._vScrollBar ) {
+ $sbt = self._vScrollBar .find(".ui-scrollbar-thumb");
+ y = ( self._currentItemCount * self._itemScrollSize ) + "px";
+ } else {
+ $sbt = self._hScrollBar .find(".ui-scrollbar-thumb");
+ x = ( self._currentItemCount * self._itemScrollSize ) + "px";
+ }
+ self._setStyleTransform( $sbt, x, y, duration );
+ },
+
+ _hideScrollBars : function () {
+ var self = this,
+ vclass = "ui-scrollbar-visible";
+
+ if ( self.options.rotation ) {
+ return ;
+ }
+
+ if ( self._vScrollBar ) {
+ self._vScrollBar.removeClass( vclass );
+ } else {
+ self._hScrollBar.removeClass( vclass );
+ }
+ },
+
+ _showScrollBars : function () {
+ var self = this,
+ vclass = "ui-scrollbar-visible";
+
+ if ( self.options.rotation ) {
+ return ;
+ }
+
+ if ( self._vScrollBar ) {
+ self._vScrollBar.addClass( vclass );
+ } else {
+ self._hScrollBar.addClass( vclass );
+ }
+ },
+
+ //----------------------------------------------------//
+ // scroll process //
+ //----------------------------------------------------//
+ centerTo: function ( selector ) {
+ var self = this,
+ i,
+ newX = 0,
+ newY = 0;
+
+ if ( !self.options.rotation ) {
return;
}
- var widget = this,
- opts = widget.options,
- dataList = window[opts.dbtable],
- dataIndex = ( ( v_lastIndex ) * opts.column ),
- count = 0,
- curBlock = null,
- cur_item = null,
- myTemplate = null,
- htmlData = null,
+ for ( i = 0; i < self._$rows.length; i++ ) {
+ if ( $( self._$rows[i]).hasClass( selector ) ) {
+ if ( self._direction ) {
+ newX = -( i * self._cellSize - self._clipSize / 2 + self._cellSize * 2 );
+ } else {
+ newY = -( i * self._cellSize - self._clipSize / 2 + self._cellSize * 2 );
+ }
+ self.scrollTo( newX, newY );
+ return;
+ }
+ }
+ },
+
+ scrollTo: function ( x, y, duration ) {
+ var self = this;
+ if ( self._direction ) {
+ self._sx = self._reservedPos;
+ self._reservedPos = x;
+ } else {
+ self._sy = self._reservedPos;
+ self._reservedPos = y;
+ }
+ self._scrollView.scrollTo.apply( this, [ x, y, duration ] );
+ },
+
+ getScrollPosition: function () {
+ if ( this.direction ) {
+ return { x: -this._ry, y: 0 };
+ }
+ return { x: 0, y: -this._ry };
+ },
+
+ _setScrollPosition: function ( x, y ) {
+ var self = this,
+ sy = self._scalableSize,
+ distance = self._direction ? x : y,
+ dy = distance - sy,
+ di = parseInt( dy / self._cellSize, 10 ),
i = 0,
- j = 0,
- contentsBlocks = null;
-
- // wrap block count
- // print argument value
- for ( i = 0; i < num; i += 1 ) {
- if ( v_lastIndex >= widget._totalRowCnt ) {
- break;
+ idx = 0,
+ $row = null;
+
+ if ( self._blockScroll ) {
+ return ;
+ }
+
+ if ( ! self.options.rotation ) {
+ if ( dy > 0 && distance >= -self._cellSize && self._scalableSize >= -self._cellSize ) {
+ // top
+ self._stopMScroll();
+ self._scalableSize = -self._cellSize;
+ self._setElementTransform( -self._cellSize );
+ return;
}
+ if ( (dy < 0 && self._scalableSize <= -(self._maxSize + self._cellSize) )) {
+ // bottom
+ self._stopMScroll();
+ self._scalableSize = -(self._maxSize + self._cellSize);
+ self._setElementTransform( self._modifyViewPos );
+ return;
+ }
+ }
- // select block
- curBlock = $( "#block_" + ( v_firstIndex + i ) );
- if ( !curBlock ) {
- break;
+ if ( di > 0 ) { // scroll up
+ for ( i = 0; i < di; i++ ) {
+ idx = -parseInt( ( sy / self._cellSize ) + i + 3, 10 );
+ $row = self._$view.children( ).last( ).detach( );
+ self._replaceRow( $row, circularNum( idx, self._totalRowCnt ) );
+ self._$view.prepend( $row );
+ self._setScrollBarPosition(-1);
}
+ } else if ( di < 0 ) { // scroll down
+ for ( i = 0; i > di; i-- ) {
+ idx = self._rowsPerView - parseInt( ( sy / self._cellSize ) + i, 10 );
+ $row = self._$view.children().first().detach();
+ self._replaceRow($row, circularNum( idx, self._totalRowCnt ) );
+ self._$view.append( $row );
+ self._setScrollBarPosition(1);
+ }
+ }
+ self._scalableSize += di * self._cellSize;
+ self._setElementTransform( distance - self._scalableSize - self._cellSize );
+ },
+
+ _setElementTransform : function ( value ) {
+ var self = this,
+ x = 0,
+ y = 0;
+
+ if ( self._direction ) {
+ x = value + "px";
+ } else {
+ y = value + "px";
+ }
+ self._setStyleTransform(self._$view, x, y );
+ },
- contentsBlocks = curBlock.children();
+ //----------------------------------------------------//
+ // Event handler //
+ //----------------------------------------------------//
+ _handleMomentumScroll: function () {
+ var self = this,
+ opts = self.options,
+ keepGoing = false,
+ v = this._$view,
+ x = 0,
+ y = 0,
+ t = self._tracker;
- for ( j = 0; j < opts.column; j += 1 ) {
- cur_item = contentsBlocks[j];
- myTemplate = $( "#" + opts.template );
- htmlData = myTemplate.tmpl( dataList[dataIndex] );
- widget._replace( cur_item, htmlData, key );
- dataIndex += 1;
+ if ( t ) {
+ t.update();
+ if ( self._direction ) {
+ x = t.getPosition();
+ } else {
+ y = t.getPosition();
}
+ keepGoing = !t.done();
+ }
- curBlock.css( "top", widget._titleHeight + widget._blockHeight * ( ( v_lastIndex ) ) ).css( "left", 0 );
+ self._setScrollPosition( x, y );
+ if ( !opts.rotation ) {
+ keepGoing = !t.done();
+ self._reservedPos = self._direction ? x : y;
+ // bottom
+ self._reservedPos = self._reservedPos <= (-(self._maxSize - self._modifyViewPos)) ? ( - ( self._maxSize + self._cellSize) ) : self._reservedPos;
+ // top
+ self._reservedPos = self._reservedPos > -self._cellSize ? -self._cellSize : self._reservedPos;
+ } else {
+ self._reservedPos = self._direction ? x : y;
+ }
+ self._$clip.trigger( self.options.updateEventName, [ { x: x, y: y } ] );
- contentsBlocks.css( "top", widget._titleHeight + widget._blockHeight * ( ( v_lastIndex ) ) );
- curBlock.attr( "id", "block_" + ( v_lastIndex ) );
+ if ( keepGoing ) {
+ self._timerID = setTimeout( self._timerCB, self._timerInterval );
+ } else {
+ self._stopMScroll();
+ }
+ },
- v_lastIndex++;
- count++;
+ _startMScroll: function ( speedX, speedY ) {
+ var self = this;
+ if ( self._direction ) {
+ self._sx = self._reservedPos;
+ } else {
+ self._sy = self._reservedPos;
}
- return count;
+ self._scrollView._startMScroll.apply(self, [speedX, speedY]);
},
- _moveBottomTop : function ( v_firstIndex, v_lastIndex, num, key ) {
- if ( v_firstIndex < 0 ) {
- return;
+
+ _stopMScroll: function () {
+ this._scrollView._stopMScroll.apply(this);
+ },
+
+ _enableTracking: function () {
+ $(document).bind( this._dragMoveEvt, this._dragMoveCB );
+ $(document).bind( this._dragStopEvt, this._dragStopCB );
+ },
+
+ _disableTracking: function () {
+ $(document).unbind( this._dragMoveEvt, this._dragMoveCB );
+ $(document).unbind( this._dragStopEvt, this._dragStopCB );
+ },
+
+ _handleDragStart: function ( e, ex, ey ) {
+ var self = this;
+ self._scrollView._handleDragStart.apply( this, [ e, ex, ey ] );
+ self._eventPos = self._direction ? ex : ey;
+ self._nextPos = self._reservedPos;
+ },
+
+ _handleDragMove: function ( e, ex, ey ) {
+ var self = this,
+ dx = ex - self._lastX,
+ dy = ey - self._lastY,
+ x = 0,
+ y = 0;
+
+ self._lastMove = getCurrentTime();
+ self._speedX = dx;
+ self._speedY = dy;
+
+ self._didDrag = true;
+
+ self._lastX = ex;
+ self._lastY = ey;
+
+ if ( self._direction ) {
+ self._movePos = ex - self._eventPos;
+ x = self._nextPos + self._movePos;
+ } else {
+ self._movePos = ey - self._eventPos;
+ y = self._nextPos + self._movePos;
}
+ self._showScrollBars();
+ self._setScrollPosition( x, y );
+ return false;
+ },
- if ( num < 1 ) {
- return;
+ _handleDragStop: function ( e ) {
+ var self = this;
+
+ self._reservedPos = self._movePos ? self._nextPos + self._movePos : self._reservedPos;
+ self._scrollView._handleDragStop.apply( this, [ e ] );
+ return self._didDrag ? false : undefined;
+ },
+
+ _addBehaviors: function () {
+ var self = this;
+
+ // scroll event handler.
+ if ( self.options.eventType === "mouse" ) {
+ self._dragStartEvt = "mousedown";
+ self._dragStartCB = function ( e ) {
+ return self._handleDragStart( e, e.clientX, e.clientY );
+ };
+
+ self._dragMoveEvt = "mousemove";
+ self._dragMoveCB = function ( e ) {
+ return self._handleDragMove( e, e.clientX, e.clientY );
+ };
+
+ self._dragStopEvt = "mouseup";
+ self._dragStopCB = function ( e ) {
+ return self._handleDragStop( e, e.clientX, e.clientY );
+ };
+
+ self._$view.bind( "vclick", function (e) {
+ return !self._didDrag;
+ } );
+ } else { //touch
+ self._dragStartEvt = "touchstart";
+ self._dragStartCB = function ( e ) {
+ var t = e.originalEvent.targetTouches[0];
+ return self._handleDragStart(e, t.pageX, t.pageY );
+ };
+
+ self._dragMoveEvt = "touchmove";
+ self._dragMoveCB = function ( e ) {
+ var t = e.originalEvent.targetTouches[0];
+ return self._handleDragMove(e, t.pageX, t.pageY );
+ };
+
+ self._dragStopEvt = "touchend";
+ self._dragStopCB = function ( e ) {
+ return self._handleDragStop( e );
+ };
}
+ self._$view.bind( self._dragStartEvt, self._dragStartCB );
- var widget = this,
- opts = widget.options,
- dataList = window[opts.dbtable],
- dataIndex = ( ( v_firstIndex - 1 ) * opts.column ),
- targetBlock = $( ".ui-virtualgrid-wrapblock:first" ),
- curBlock = null,
- contentsBlocks = null,
- cur_item = null,
- myTemplate = null,
+ // other events.
+ self._$view.delegate(".virtualgrid-item", "click", function (event) {
+ var $selectedItem = $(this);
+ $selectedItem.trigger("select", this);
+ });
+
+ $( window ).bind("resize", function ( e ) {
+ var height = 0,
+ $virtualgrid = $(".ui-virtualgrid-view");
+ if ( $virtualgrid.length !== 0 ) {
+ if ( self._direction ) {
+ height = self._calculateClipHeight();
+ self._$view.height(height);
+ self._$clip.height(height);
+ } else {
+ height = self._calculateClipWidth();
+ self._$view.width(height);
+ self._$clip.width(height);
+ }
+ self.resize( );
+ }
+ });
+
+ $(document).one("pageshow", function (event) {
+ var $page = $(self.element).parents(".ui-page"),
+ $header = $page.find( ":jqmData(role='header')" ),
+ $footer = $page.find( ":jqmData(role='footer')" ),
+ $content = $page.find( ":jqmData(role='content')" ),
+ footerHeight = $footer ? $footer.height() : 0,
+ headerHeight = $header ? $header.height() : 0;
+
+ if ( $page && $content ) {
+ $content.height(window.innerHeight - headerHeight - footerHeight).css("overflow", "hidden");
+ $content.addClass("ui-virtualgrid-content");
+ }
+ });
+ },
+
+ //----------------------------------------------------//
+ // Calculate size about dom element. //
+ //----------------------------------------------------//
+ _calculateClipSize : function () {
+ var self = this,
+ clipSize = 0;
+
+ if ( self._direction ) {
+ clipSize = self._calculateClipWidth();
+ } else {
+ clipSize = self._calculateClipHeight();
+ }
+ return clipSize;
+ },
+
+ _calculateClipWidth : function () {
+ var self = this,
+ view = $(self.element),
+ $parent = $(self.element).parent(),
+ paddingValue = 0,
+ clipSize = $(window).width();
+ if ( $parent.hasClass("ui-content") ) {
+ paddingValue = parseInt($parent.css("padding-left"), 10);
+ clipSize = clipSize - ( paddingValue || 0 );
+ paddingValue = parseInt($parent.css("padding-right"), 10);
+ clipSize = clipSize - ( paddingValue || 0);
+ } else {
+ clipSize = view.width();
+ }
+ return clipSize;
+ },
+
+ _calculateClipHeight : function () {
+ var self = this,
+ view = $(self.element),
+ $parent = $(self.element).parent(),
+ header = null,
+ footer = null,
+ paddingValue = 0,
+ clipSize = $(window).height();
+ if ( $parent.hasClass("ui-content") ) {
+ paddingValue = parseInt($parent.css("padding-top"), 10);
+ clipSize = clipSize - ( paddingValue || 0 );
+ paddingValue = parseInt($parent.css("padding-bottom"), 10);
+ clipSize = clipSize - ( paddingValue || 0);
+ header = $parent.siblings(".ui-header");
+ footer = $parent.siblings(".ui-footer");
+
+ if ( header ) {
+ if ( header.outerHeight(true) === null ) {
+ clipSize = clipSize - ( $(".ui-header").outerHeight() || 0 );
+ } else {
+ clipSize = clipSize - header.outerHeight(true);
+ }
+ }
+ if ( footer ) {
+ clipSize = clipSize - footer.outerHeight(true);
+ }
+ } else {
+ clipSize = view.height();
+ }
+ return clipSize;
+ },
+
+ _calculateColumnSize : function () {
+ var self = this,
+ $tempBlock,
+ $cell;
+
+ $tempBlock = self._makeRows( 1 );
+ self._$view.append( $tempBlock.children().first() );
+ if ( self._direction ) {
+ // x-axis
+ self._viewSize = self._$view.width();
+ $cell = self._$view.children().first().children().first();
+ self._cellSize = $cell.outerWidth(true);
+ self._cellOtherSize = $cell.outerHeight(true);
+ } else {
+ // y-axis
+ self._viewSize = self._$view.height();
+ $cell = self._$view.children().first().children().first();
+ self._cellSize = $cell.outerHeight(true);
+ self._cellOtherSize = $cell.outerWidth(true);
+ }
+ $tempBlock.remove();
+ self._$view.children().remove();
+ },
+
+ _calculateColumnCount : function ( ) {
+ var self = this,
+ $view = $(self.element),
+ viewSize = self._direction ? $view.innerHeight() : $view.innerWidth(),
+ itemCount = 0 ;
+
+ if ( self._direction ) {
+ viewSize = viewSize - ( parseInt( $view.css("padding-top"), 10 ) + parseInt( $view.css("padding-bottom"), 10 ) );
+ } else {
+ viewSize = viewSize - ( parseInt( $view.css("padding-left"), 10 ) + parseInt( $view.css("padding-right"), 10 ) );
+ }
+
+ itemCount = parseInt( (viewSize / self._cellOtherSize), 10);
+ return itemCount > 0 ? itemCount : 1 ;
+ },
+
+ // Read the position of clip form property ('webkit-transform').
+ // @return : number - position of clip.
+ _getClipPosition : function () {
+ var self = this,
+ matrix = null,
+ contents = null,
+ result = -self._cellSize,
+ $scrollview = self._$view.closest(".ui-scrollview-view");
+
+ if ( $scrollview ) {
+ matrix = $scrollview.css("-webkit-transform");
+ contents = matrix.substr( 7 );
+ contents = contents.substr( 0, contents.length - 1 );
+ contents = contents.split( ', ' );
+ result = Math.abs(contents [5]);
+ }
+ return result;
+ },
+
+ //----------------------------------------------------//
+ // DOM Element handle //
+ //----------------------------------------------------//
+ _makeRows : function ( count ) {
+ var self = this,
+ opts = self.options,
+ index = 0,
+ $row = null,
+ $wrapper = null;
+
+ $wrapper = $(document.createElement("div"));
+ $wrapper.addClass("ui-scrollview-view");
+ for ( index = 0; index < count ; index += 1 ) {
+ $row = self._makeRow( self._template, index );
+ if ( self._direction ) {
+ $row.css("top", 0).css("left", ( index * self._cellSize ));
+ }
+ $wrapper.append($row);
+ }
+ return $wrapper;
+ },
+
+ // make a single row block
+ _makeRow : function ( myTemplate, rowIndex ) {
+ var self = this,
+ opts = self.options,
+ index = rowIndex * self._itemCount,
htmlData = null,
- i = 0,
- j = 0,
- count = 0;
+ itemData = null,
+ colIndex = 0,
+ attrName = self._direction ? "top" : "left",
+ blockClassName = self._direction ? "ui-virtualgrid-wrapblock-x" : "ui-virtualgrid-wrapblock-y",
+ blockAttrName = self._direction ? "top" : "left",
+ wrapBlock = $( document.createElement( "div" ));
- // print argument value
- for ( i = 0; i < num; i += 1 ) {
- if ( v_firstIndex - 1 < 0 ) {
- break;
+ wrapBlock.addClass( blockClassName ).attr("row-index", rowIndex);
+ for ( colIndex = 0; colIndex < self._itemCount; colIndex++ ) {
+ itemData = self._itemData( index );
+ if ( itemData ) {
+ htmlData = self._makeHtmlData( myTemplate, index, colIndex);
+ wrapBlock.append( htmlData );
+ index += 1;
}
+ }
+ return wrapBlock;
+ },
- // select block
- curBlock = $( "#block_" + ( ( v_lastIndex - 1 ) - i ) );
- if ( !curBlock ) {
- break;
+ _makeHtmlData : function ( myTemplate, dataIndex, colIndex ) {
+ var self = this,
+ htmlData = null,
+ itemData = null,
+ attrName = self._direction ? "top" : "left";
+
+ itemData = self._itemData( dataIndex );
+ if ( itemData ) {
+ htmlData = myTemplate.tmpl( itemData );
+ $(htmlData).css(attrName, ( colIndex * self._cellOtherSize )).addClass("virtualgrid-item");
+ }
+ return htmlData;
+ },
+
+ _increaseRow : function ( num ) {
+ var self = this,
+ rotation = self.options.rotation,
+ $row = null,
+ headItemIndex = 0,
+ tailItemIndex = 0,
+ itemIndex = 0,
+ size = self._scalableSize,
+ idx = 0;
+
+ headItemIndex = parseInt( $(self._$view.children().first()).attr("row-index"), 10) - 1;
+ tailItemIndex = parseInt( $(self._$view.children()[self._rowsPerView]).attr("row-index"), 10) + 1;
+
+ for ( idx = 1 ; idx <= num ; idx++ ) {
+ if ( tailItemIndex + idx >= self._totalRowCnt ) {
+ $row = self._makeRow( self._template, headItemIndex );
+ self._$view.prepend($row);
+ headItemIndex -= 1;
+ } else {
+ $row = self._makeRow( self._template, tailItemIndex + idx );
+ self._$view.append($row);
}
+ if ( self._direction ) {
+ $row.width(self._cellSize);
+ } else {
+ $row.height(self._cellSize);
+ }
+ }
+ },
+
+ _decreaseRow : function ( num ) {
+ var self = this,
+ idx = 0;
+
+ for ( idx = 0 ; idx < num ; idx++ ) {
+ self._$view.children().last().remove();
+ }
+ },
+
+ _replaceRows : function ( curCnt, prevCnt, maxCnt, clipPosition ) {
+ var self = this,
+ $rows = self._$view.children(),
+ prevRowIndex = 0,
+ rowIndex = 0,
+ diffRowCnt = 0,
+ targetCnt = 1,
+ filterCondition = ( self._filterRatio * self._cellSize) + self._cellSize,
+ idx = 0;
- dataIndex = ( ( v_firstIndex - 1 ) * opts.column );
+ if ( filterCondition < clipPosition ) {
+ targetCnt += 1;
+ }
- contentsBlocks = curBlock.children();
- for ( j = 0; j < opts.column; j += 1 ) {
- cur_item = contentsBlocks[j];
- myTemplate = $( "#" + opts.template );
- htmlData = myTemplate.tmpl( dataList[dataIndex] );
- widget._replace( cur_item, htmlData, key );
- dataIndex++;
+ prevRowIndex = parseInt( $($rows[targetCnt]).attr("row-index"), 10);
+ if ( prevRowIndex === 0 ) {
+ // only top.
+ rowIndex = maxCnt - targetCnt;
+ } else {
+ rowIndex = Math.round( (prevRowIndex * prevCnt) / curCnt );
+ if ( rowIndex + self._rowsPerView >= maxCnt ) {
+ // only bottom.
+ rowIndex = maxCnt - self._rowsPerView;
}
- curBlock.css( "top", widget._titleHeight + widget._blockHeight * ( ( v_firstIndex - 1 ) ) ).css( "left", 0 );
- curBlock.attr( "id", "block_" + ( v_firstIndex - 1 ) );
- contentsBlocks.css( "top", widget._titleHeight + widget._blockHeight * ( ( v_firstIndex - 1 ) ) );
+ diffRowCnt = prevRowIndex - rowIndex;
+ rowIndex -= targetCnt;
+ }
- v_firstIndex -= 1;
- count++;
+ for ( idx = 0 ; idx < $rows.length ; idx += 1 ) {
+ self._replaceRow($rows[idx], circularNum( rowIndex, self._totalRowCnt ));
+ rowIndex++;
}
- return count;
+ return -diffRowCnt;
},
+
+ _replaceRow : function ( block, index ) {
+ var self = this,
+ opts = self.options,
+ $columns = null,
+ $column = null,
+ data = null,
+ htmlData = null,
+ myTemplate = null,
+ idx = 0,
+ dataIdx = 0,
+ tempBlocks = null;
+
+ $columns = $(block).attr("row-index", index).children();
+ if ( $columns.length !== self._itemCount ) {
+ $(block).children().remove();
+ tempBlocks = $(self._makeRow( self._template, index ));
+ $(block).append(tempBlocks.children());
+ tempBlocks.remove();
+ return ;
+ }
+
+ dataIdx = index * self._itemCount;
+ for ( idx = 0; idx < self._itemCount ; idx += 1 ) {
+ $column = $columns[idx];
+ data = self._itemData(dataIdx);
+ if ( $column && data ) {
+ myTemplate = self._template;
+ htmlData = myTemplate.tmpl( data );
+ self._replace( $column, htmlData, false );
+ htmlData.remove(); // Clear temporary htmlData to free cache
+ dataIdx ++;
+ } else if ($column && !data ) {
+ $($column).remove();
+ }
+ }
+ },
+
/* Text & image src replace function */
// @param oldItem : prev HtmlDivElement
// @param newItem : new HtmlDivElement for replace
$( oldObj ).attr( "src", newImg );
});
+ $( oldItem).removeData();
if ( key ) {
$( oldItem ).data( key, $( newItem ).data( key ) );
}
}
- });
-
- $( document ).bind( "pagecreate create", function () {
- $( ":jqmData(role='virtualgrid')" ).virtualgrid();
- });
-
-} ( jQuery, window ) );
+ } );
+ $( document ).bind( "pagecreate create", function ( e ) {
+ $(":jqmData(role='virtualgrid')").virtualgrid();
+ } );
+} (jQuery, window, document) );
-/* ***************************************************************************\r
- * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.\r
- *\r
- * Permission is hereby granted, free of charge, to any person obtaining a\r
- * copy of this software and associated documentation files (the "Software"),\r
- * to deal in the Software without restriction, including without limitation\r
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,\r
- * and/or sell copies of the Software, and to permit persons to whom the\r
- * Software is furnished to do so, subject to the following conditions:\r
- *\r
- * The above copyright notice and this permission notice shall be included in\r
- * all copies or substantial portions of the Software.\r
- *\r
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\r
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER\r
- * DEALINGS IN THE SOFTWARE.\r
- * ***************************************************************************\r
- *\r
- * Author: Wongi Lee <wongi11.lee@samsung.com>\r
- */\r
-\r
-/**\r
- * Virtual List Widget for unlimited data.\r
- * To support more then 1,000 items, special list widget developed. \r
- * Fast initialize and light DOM tree.\r
- * DB connection and works like DB cursor. \r
- * \r
- * HTML Attributes:\r
- *\r
- * data-role: virtuallistview\r
- * data-template : jQuery.template ID that populate into virtual list \r
- * data-dbtable : DB Table name. It used as window[DB NAME]. Loaded data should be converted as window object.\r
- * data-dbkey : Unique key of DB Table. To sync each element on virtual list with DB table. \r
- * data-row : Optional. Set number of <li> elements that are used for data handling. \r
- * \r
- * ID : <UL> element that has "data-role=virtuallist" must have ID attribute.\r
- * Class : <UL> element that has "data-role=virtuallist" should have "vlLoadSuccess" class to guaranty DB loading is completed. \r
- *\r
- * * APIs:\r
- *\r
- * create ( void )\r
- * : API to call _create method. API for AJAX or DB loading callback.\r
- *\r
- * recreate ( Array )\r
- * : Update virtual list with new data array. For example, update with search result. \r
- *\r
- * Events:\r
- *\r
- * touchstart : Temporary preventDefault applied on touchstart event to avoid broken screen.\r
- *\r
- * Examples:\r
- *\r
- * <script id="tmp-3-2-7" type="text/x-jquery-tmpl">\r
- * <li class="ui-li-3-2-7">\r
- * <span class="ui-li-text-main">${NAME}</span>\r
- * <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">\r
- * <span class="ui-li-text-sub">${ACTIVE}</span>\r
- * <span class="ui-li-text-sub2">${FROM}</span>\r
- * </li>\r
- * </script>\r
- *\r
- * <ul id="virtuallist-normal_3_2_7_ul" data-role="virtuallistview" data-template="tmp-3-2-7" data-dbtable="JSON_DATA" data-row="100">\r
- * </ul>\r
- *\r
- */\r
-\r
-\r
-(function ( $, undefined ) {\r
-\r
- /* Code for Virtual List Demo */\r
- var listCountPerPage = {}, /* Keeps track of the number of lists per page UID. This allows support for multiple nested list in the same page. https://github.com/jquery/jquery-mobile/issues/1617 */\r
- TOTAL_ITEMS = 0,\r
- LINE_H = 0,\r
- TITLE_H = 0,\r
- CONTAINER_W = 0,\r
- NO_SCROLL = 0, /* ENUM */\r
- SCROLL_DOWN = 1, /* ENUM */\r
- SCROLL_UP = -1, /* ENUM */\r
- MINIMUM_ROW = 20,\r
- direction = NO_SCROLL,\r
- first_index,\r
- last_index,\r
- num_top_items = 0; //By scroll move, number of hidden elements.\r
-\r
- $.widget( "tizen.virtuallistview", $.mobile.widget, {\r
- options: {\r
- theme: "s",\r
- countTheme: "c",\r
- headerTheme: "b",\r
- dividerTheme: "b",\r
- splitIcon: "arrow-r",\r
- splitTheme: "b",\r
- inset: false,\r
- id: "", /* Virtual list UL elemet's ID */\r
- childSelector: " li", /* To support swipe list */\r
- dbtable: "",\r
- template : "",\r
- dbkey: false, /* Data's unique Key */\r
- scrollview: false,\r
- row: 100,\r
- page_buf: 50,\r
- initSelector: ":jqmData(role='virtuallistview')"\r
- },\r
-\r
- _stylerMouseUp: function () {\r
- $( this ).addClass( "ui-btn-up-s" );\r
- $( this ).removeClass( "ui-btn-down-s" );\r
- },\r
-\r
- _stylerMouseDown: function () {\r
- $( this ).addClass( "ui-btn-down-s" );\r
- $( this ).removeClass( "ui-btn-up-s" );\r
- },\r
-\r
- _stylerMouseOver: function () {\r
- $( this ).toggleClass( "ui-btn-hover-s" );\r
- },\r
-\r
- _stylerMouseOut: function () {\r
- $( this ).toggleClass( "ui-btn-hover-s" );\r
- },\r
-\r
- _pushData: function ( template, data ) {\r
- var o = this.options,\r
- i,\r
- dataTable = data,\r
- myTemplate = $( "#" + template ),\r
- lastIndex = ( o.row > data.length ? data.length : o.row ),\r
- htmlData;\r
-\r
- for ( i = 0; i < lastIndex; i++ ) {\r
- htmlData = myTemplate.tmpl( dataTable[i] );\r
- $( o.id ).append( $( htmlData ).attr( 'id', 'li_' + i ) );\r
- }\r
-\r
- /* After push data, re-style virtuallist widget */\r
- $( o.id ).trigger( "create" );\r
- },\r
-\r
- _reposition: function ( event ) {\r
- var o,\r
- t = this,\r
- padding;\r
-\r
- if ( event.data ) {\r
- o = event.data;\r
- } else {\r
- o = event;\r
- }\r
-\r
- if ( $( o.id + o.childSelector ).size() > 0 ) {\r
- TITLE_H = $( o.id + o.childSelector + ':first' ).position().top;\r
- LINE_H = $( o.id + o.childSelector + ':first' ).outerHeight();\r
-\r
- CONTAINER_W = $( o.id ).innerWidth();\r
-\r
- padding = parseInt( $( o.id + o.childSelector ).css( "padding-left" ), 10 ) + parseInt( $( o.id + o.childSelector ).css( "padding-right" ), 10 );\r
-\r
- /* Add style */\r
- $( o.id + ">" + o.childSelector ).addClass( "position_absolute" ).addClass( "ui-btn-up-s" )\r
- .bind( "mouseup", t._stylerMouseUp )\r
- .bind( "mousedown", t._stylerMouseDown )\r
- .bind( "mouseover", t._stylerMouseOver )\r
- .bind( "mouseout", t._stylerMouseOut );\r
- }\r
-\r
- $( o.id + ">" + o.childSelector ).each( function ( index ) {\r
- $( this ).css( "top", TITLE_H + LINE_H * index + 'px' )\r
- .css( "width", CONTAINER_W - padding );\r
- } );\r
-\r
- /* Set Max List Height */\r
- $( o.id ).height( TOTAL_ITEMS * LINE_H );\r
- },\r
-\r
- _resize: function ( event ) {\r
- var o,\r
- t = this,\r
- padding;\r
-\r
- if ( event.data ) {\r
- o = event.data;\r
- } else {\r
- o = event;\r
- }\r
-\r
- CONTAINER_W = $( o.id ).innerWidth();\r
-\r
- padding = parseInt( $( o.id + o.childSelector ).css( "padding-left" ), 10 ) + parseInt( $( o.id + o.childSelector ).css( "padding-right" ), 10 );\r
-\r
- $( o.id + o.childSelector ).each( function (index) {\r
- $( this ).css( "width", CONTAINER_W - padding );\r
- } );\r
- },\r
-\r
- _scrollmove: function ( event ) {\r
- var velocity = 0,\r
- o = event.data,\r
- i,\r
- dataList = window[o.dbtable],\r
- _replace, /* Function */\r
- _moveTopBottom, /* Function */\r
- _moveBottomTop, /* Function */\r
- _matrixToArray, /* Function */\r
- $el,\r
- transformValue,\r
- curWindowTop,\r
- cur_num_top_itmes;\r
-\r
- /* Text & image src replace function */\r
- _replace = function ( oldItem, newItem, key ) {\r
- var oldObj,\r
- newText,\r
- newImg;\r
-\r
- $( oldItem ).find( ".ui-li-text-main", ".ui-li-text-sub", "ui-btn-text" ).each( function ( index ) {\r
- oldObj = $( this );\r
- newText = $( newItem ).find( ".ui-li-text-main", ".ui-li-text-sub", "ui-btn-text" ).eq( index ).text();\r
-\r
- $( oldObj).contents().filter( function () {\r
- return ( this.nodeType == 3 );\r
- } ).get( 0 ).data = newText;\r
- } );\r
-\r
- $( oldItem ).find( "img" ).each( function ( imgIndex ) {\r
- oldObj = $( this );\r
- newImg = $( newItem ).find( "img" ).eq( imgIndex ).attr( "src" );\r
-\r
- $( oldObj ).attr( "src", newImg );\r
- } );\r
-\r
- if (key) {\r
- $( oldItem ).data( key, $( newItem ).data( key ) );\r
- }\r
- };\r
-\r
- //Move older item to bottom\r
- _moveTopBottom = function ( v_firstIndex, v_lastIndex, num, key ) {\r
- var myTemplate,\r
- htmlData,\r
- cur_item;\r
-\r
- if (v_firstIndex < 0) {\r
- return;\r
- }\r
-\r
- for ( i = 0; i < num; i++ ) {\r
- if ( v_lastIndex + i > TOTAL_ITEMS ) {\r
- break;\r
- }\r
-\r
- cur_item = $( '#li_' + ( v_firstIndex + i ) );\r
-\r
- if ( cur_item ) {\r
- /* Make New <LI> element from template. */\r
- myTemplate = $( "#" + o.template );\r
- htmlData = myTemplate.tmpl( dataList[ v_lastIndex + i ] );\r
-\r
- /* Copy all data to current item. */\r
- _replace( cur_item, htmlData, key );\r
-\r
- /* Set New Position */\r
- ( cur_item ).css( 'top', TITLE_H + LINE_H * ( v_lastIndex + 1 + i ) ).attr( 'id', 'li_' + ( v_lastIndex + 1 + i ) );\r
- } else {\r
- break;\r
- }\r
- }\r
- };\r
-\r
- // Move older item to bottom\r
- _moveBottomTop = function ( v_firstIndex, v_lastIndex, num, key ) {\r
- var myTemplate,\r
- htmlData,\r
- cur_item;\r
-\r
- if ( v_firstIndex < 0 ) {\r
- return;\r
- }\r
-\r
- for ( i = 0; i < num; i++ ) {\r
- cur_item = $( '#li_' + ( v_lastIndex - i ) );\r
-\r
- if ( cur_item ) {\r
- if ( v_firstIndex - 1 - i < 0 ) {\r
- break;\r
- }\r
-\r
- /* Make New <LI> element from template. */\r
- myTemplate = $( "#" + o.template );\r
- htmlData = myTemplate.tmpl( dataList[ v_firstIndex - 1 - i ] );\r
-\r
- /* Copy all data to current item. */\r
- _replace( cur_item, htmlData, key );\r
-\r
- /* Set New Position */\r
- $( cur_item ).css( 'top', TITLE_H + LINE_H * ( v_firstIndex - 1 - i ) ).attr( 'id', 'li_' + ( v_firstIndex - 1 - i ) );\r
- } else {\r
- break;\r
- }\r
- }\r
- };\r
-\r
- /* Matrix to Array function written by Blender@stackoverflow.nnikishi@emich.edu*/\r
- _matrixToArray = function ( matrix ) {\r
- var contents = matrix.substr( 7 );\r
-\r
- contents = contents.substr( 0, contents.length - 1 );\r
-\r
- return contents.split( ', ' );\r
- };\r
-\r
- // Get scroll direction and velocity\r
- /* with Scroll view */\r
- if ( o.scrollview ) {\r
- $el = $( o.id ).parentsUntil( ".ui-page" ).find( ".ui-scrollview-view" );\r
- transformValue = _matrixToArray( $el.css( "-webkit-transform" ) );\r
- curWindowTop = Math.abs( transformValue[ 5 ] ); /* Y vector */\r
- } else {\r
- curWindowTop = $( window ).scrollTop() - LINE_H;\r
- }\r
-\r
- cur_num_top_itmes = $( o.id + o.childSelector ).filter( function () {\r
- return (parseInt( $( this ).css( "top" ), 10 ) < curWindowTop );\r
- } ).size();\r
-\r
- if ( num_top_items < cur_num_top_itmes ) {\r
- direction = SCROLL_DOWN;\r
- velocity = cur_num_top_itmes - num_top_items;\r
- num_top_items = cur_num_top_itmes;\r
- } else if ( num_top_items > cur_num_top_itmes ) {\r
- direction = SCROLL_UP;\r
- velocity = num_top_items - cur_num_top_itmes;\r
- num_top_items = cur_num_top_itmes;\r
- }\r
-\r
- // Move items\r
- if ( direction == SCROLL_DOWN ) {\r
- if ( cur_num_top_itmes > o.page_buf ) {\r
- if ( last_index + velocity > TOTAL_ITEMS ) {\r
- velocity = TOTAL_ITEMS - last_index - 1;\r
- }\r
-\r
- /* Prevent scroll touch event while DOM access */\r
- $(document).bind( "touchstart.virtuallist", function (event) {\r
- event.preventDefault();\r
- });\r
-\r
- _moveTopBottom( first_index, last_index, velocity, o.dbkey );\r
-\r
- first_index += velocity;\r
- last_index += velocity;\r
- num_top_items -= velocity;\r
-\r
- /* Unset prevent touch event */\r
- $( document ).unbind( "touchstart.virtuallist" );\r
- }\r
- } else if ( direction == SCROLL_UP ) {\r
- if ( cur_num_top_itmes <= o.page_buf ) {\r
- if ( first_index < velocity ) {\r
- velocity = first_index;\r
- }\r
-\r
- /* Prevent scroll touch event while DOM access */\r
- $( document ).bind( "touchstart.virtuallist", function ( event ) {\r
- event.preventDefault();\r
- });\r
-\r
- _moveBottomTop( first_index, last_index, velocity, o.dbkey );\r
-\r
- first_index -= velocity;\r
- last_index -= velocity;\r
- num_top_items += velocity;\r
-\r
- /* Unset prevent touch event */\r
- $( document ).unbind( "touchstart.virtuallist" );\r
- }\r
-\r
- if ( first_index < o.page_buf ) {\r
- num_top_items = first_index;\r
- }\r
- }\r
- },\r
-\r
- recreate: function ( newArray ) {\r
- var t = this,\r
- o = this.options;\r
-\r
- $( o.id ).empty();\r
-\r
- TOTAL_ITEMS = newArray.length;\r
- direction = NO_SCROLL;\r
- first_index = 0;\r
- last_index = o.row - 1;\r
-\r
- t._pushData( ( o.template ), newArray );\r
-\r
- if (o.childSelector == " ul" ) {\r
- $( o.id + " ul" ).swipelist();\r
- }\r
-\r
- $( o.id ).virtuallistview();\r
-\r
- t._reposition( o );\r
-\r
- t.refresh( true );\r
- },\r
-\r
- _initList: function () {\r
- var t = this,\r
- o = this.options;\r
-\r
- /* After AJAX loading success */\r
- o.dbtable = t.element.data( "dbtable" );\r
-\r
- TOTAL_ITEMS = $(window[o.dbtable]).size();\r
-\r
- /* Make Gen list by template */\r
- t._pushData( (o.template), window[o.dbtable]);\r
-\r
- $( o.id ).parentsUntil( ".ui-page" ).parent().one( "pageshow", o, t._reposition);\r
-\r
- /* Scrollview */\r
- $( document ).bind( "scrollstop.virtuallist", t.options, t._scrollmove );\r
-\r
- $( window ).bind( "resize.virtuallist", t._resize );\r
-\r
- if ( o.childSelector == " ul" ) {\r
- $( o.id + " ul" ).swipelist();\r
- }\r
-\r
- t.refresh( true );\r
- },\r
-\r
- create: function () {\r
- var o = this.options;\r
-\r
- /* external API for AJAX callback */\r
- this._create( "create" );\r
-\r
- this._reposition( o );\r
- },\r
-\r
- _create: function ( event ) {\r
- var t = this,\r
- o = this.options,\r
- $el = this.element,\r
- shortcutsContainer = $('<div class="ui-virtuallist"/>'),\r
- shortcutsList = $('<ul></ul>'),\r
- dividers = $el.find(':jqmData(role="virtuallistview" )'),\r
- lastListItem = null,\r
- shortcutscroll = this;\r
-\r
- // create listview markup\r
- t.element.addClass( function ( i, orig ) {\r
- return orig + " ui-listview ui-virtual-list-container" + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" );\r
- });\r
-\r
- o.id = "#" + $el.attr( "id" );\r
-\r
- $( o.id ).bind( "pagehide", function ( e ) {\r
- $( o.id ).empty();\r
- });\r
-\r
- /* Scroll view */\r
- if ( $( ".ui-scrollview-clip" ).size() > 0 ) {\r
- o.scrollview = true;\r
- } else {\r
- o.scrollview = false;\r
- }\r
-\r
- /* Init list and page buf */\r
- if ( $el.data( "row" ) ) {\r
- o.row = $el.data( "row" );\r
-\r
- if ( o.row < MINIMUM_ROW ) {\r
- o.row = MINIMUM_ROW;\r
- }\r
-\r
- o.page_buf = parseInt( ( o.row / 2 ), 10 );\r
- }\r
-\r
- /* After DB Load complete, Init Vritual list */\r
- if ( $( o.id ).hasClass( "vlLoadSuccess" ) ) {\r
- $( o.id ).empty();\r
-\r
- if ( $el.data( "template" ) ) {\r
- o.template = $el.data( "template" );\r
-\r
- /* to support swipe list, <li> or <ul> can be main node of virtual list. */\r
- if ( $el.data( "swipelist" ) == true ) {\r
- o.childSelector = " ul";\r
- } else {\r
- o.childSelector = " li";\r
- }\r
- }\r
-\r
- /* Set data's unique key */\r
- if ( $el.data( "dbkey" ) ) {\r
- o.datakey = $el.data( "dbkey" );\r
- }\r
-\r
- first_index = 0; //first id of <li> element.\r
- last_index = o.row - 1; //last id of <li> element.\r
-\r
- t._initList();\r
- }\r
- },\r
-\r
- destroy : function () {\r
- var o = this.options;\r
-\r
- $( document ).unbind( "scrollstop" );\r
-\r
- $( window ).unbind( "resize.virtuallist" );\r
-\r
- $( o.id ).empty();\r
- },\r
-\r
- _itemApply: function ( $list, item ) {\r
- var $countli = item.find( ".ui-li-count" );\r
-\r
- if ( $countli.length ) {\r
- item.addClass( "ui-li-has-count" );\r
- }\r
-\r
- $countli.addClass( "ui-btn-up-" + ( $list.jqmData( "counttheme" ) || this.options.countTheme ) + " ui-btn-corner-all" );\r
-\r
- // TODO class has to be defined in markup\r
- item.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" ).end()\r
- .find( "p, dl" ).addClass( "ui-li-desc" ).end()\r
- .find( ">img:eq(0), .ui-link-inherit>img:eq(0)" ).addClass( "ui-li-thumb" ).each( function () {\r
- item.addClass( $( this ).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );\r
- }).end()\r
- .find( ".ui-li-aside" ).each(function () {\r
- var $this = $( this );\r
- $this.prependTo( $this.parent() ); //shift aside to front for css float\r
- } );\r
- },\r
-\r
- _removeCorners: function ( li, which ) {\r
- var top = "ui-corner-top ui-corner-tr ui-corner-tl",\r
- bot = "ui-corner-bottom ui-corner-br ui-corner-bl";\r
-\r
- li = li.add( li.find( ".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb" ) );\r
-\r
- if ( which === "top" ) {\r
- li.removeClass( top );\r
- } else if ( which === "bottom" ) {\r
- li.removeClass( bot );\r
- } else {\r
- li.removeClass( top + " " + bot );\r
- }\r
- },\r
-\r
- _refreshCorners: function ( create ) {\r
- var $li,\r
- $visibleli,\r
- $topli,\r
- $bottomli;\r
-\r
- if ( this.options.inset ) {\r
- $li = this.element.children( "li" );\r
- // at create time the li are not visible yet so we need to rely on .ui-screen-hidden\r
- $visibleli = create ? $li.not( ".ui-screen-hidden" ) : $li.filter( ":visible" );\r
-\r
- this._removeCorners( $li );\r
-\r
- // Select the first visible li element\r
- $topli = $visibleli.first()\r
- .addClass( "ui-corner-top" );\r
-\r
- $topli.add( $topli.find( ".ui-btn-inner" ) )\r
- .find( ".ui-li-link-alt" )\r
- .addClass( "ui-corner-tr" )\r
- .end()\r
- .find( ".ui-li-thumb" )\r
- .not( ".ui-li-icon" )\r
- .addClass( "ui-corner-tl" );\r
-\r
- // Select the last visible li element\r
- $bottomli = $visibleli.last()\r
- .addClass( "ui-corner-bottom" );\r
-\r
- $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )\r
- .find( ".ui-li-link-alt" )\r
- .addClass( "ui-corner-br" )\r
- .end()\r
- .find( ".ui-li-thumb" )\r
- .not( ".ui-li-icon" )\r
- .addClass( "ui-corner-bl" );\r
- }\r
- },\r
-\r
- refresh: function ( create ) {\r
- this.parentPage = this.element.closest( ".ui-page" );\r
- this._createSubPages();\r
-\r
- var o = this.options,\r
- $list = this.element,\r
- self = this,\r
- dividertheme = $list.jqmData( "dividertheme" ) || o.dividerTheme,\r
- listsplittheme = $list.jqmData( "splittheme" ),\r
- listspliticon = $list.jqmData( "spliticon" ),\r
- li = $list.children( "li" ),\r
- counter = $.support.cssPseudoElement || !$.nodeName( $list[ 0 ], "ol" ) ? 0 : 1,\r
- item,\r
- itemClass,\r
- temTheme,\r
- a,\r
- last,\r
- splittheme,\r
- countParent,\r
- icon,\r
- pos,\r
- numli,\r
- itemTheme;\r
-\r
- if ( counter ) {\r
- $list.find( ".ui-li-dec" ).remove();\r
- }\r
-\r
- for ( pos = 0, numli = li.length; pos < numli; pos++ ) {\r
- item = li.eq( pos );\r
- itemClass = "ui-li";\r
-\r
- // If we're creating the element, we update it regardless\r
- if ( create || !item.hasClass( "ui-li" ) ) {\r
- itemTheme = item.jqmData( "theme" ) || o.theme;\r
- a = item.children( "a" );\r
-\r
- if ( a.length ) {\r
- icon = item.jqmData( "icon" );\r
-\r
- item.buttonMarkup({\r
- wrapperEls: "div",\r
- shadow: false,\r
- corners: false,\r
- iconpos: "right",\r
- /* icon: a.length > 1 || icon === false ? false : icon || "arrow-r",*/\r
- icon: false, /* Remove unnecessary arrow icon */\r
- theme: itemTheme\r
- });\r
-\r
- if ( ( icon != false ) && ( a.length == 1 ) ) {\r
- item.addClass( "ui-li-has-arrow" );\r
- }\r
-\r
- a.first().addClass( "ui-link-inherit" );\r
-\r
- if ( a.length > 1 ) {\r
- itemClass += " ui-li-has-alt";\r
-\r
- last = a.last();\r
- splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;\r
-\r
- last.appendTo(item)\r
- .attr( "title", last.getEncodedText() )\r
- .addClass( "ui-li-link-alt" )\r
- .empty()\r
- .buttonMarkup({\r
- shadow: false,\r
- corners: false,\r
- theme: itemTheme,\r
- icon: false,\r
- iconpos: false\r
- })\r
- .find( ".ui-btn-inner" )\r
- .append(\r
- $( "<span />" ).buttonMarkup({\r
- shadow: true,\r
- corners: true,\r
- theme: splittheme,\r
- iconpos: "notext",\r
- icon: listspliticon || last.jqmData( "icon" ) || o.splitIcon\r
- })\r
- );\r
- }\r
- } else if ( item.jqmData( "role" ) === "list-divider" ) {\r
-\r
- itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;\r
- item.attr( "role", "heading" );\r
-\r
- //reset counter when a divider heading is encountered\r
- if ( counter ) {\r
- counter = 1;\r
- }\r
-\r
- } else {\r
- itemClass += " ui-li-static ui-body-" + itemTheme;\r
- }\r
- }\r
-\r
- if ( counter && itemClass.indexOf( "ui-li-divider" ) < 0 ) {\r
- countParent = item.is( ".ui-li-static:first" ) ? item : item.find( ".ui-link-inherit" );\r
-\r
- countParent.addClass( "ui-li-jsnumbering" )\r
- .prepend( "<span class='ui-li-dec'>" + (counter++) + ". </span>" );\r
- }\r
-\r
- item.add( item.children( ".ui-btn-inner" ) ).addClass( itemClass );\r
-\r
- self._itemApply( $list, item );\r
- }\r
-\r
- this._refreshCorners( create );\r
- },\r
-\r
- //create a string for ID/subpage url creation\r
- _idStringEscape: function ( str ) {\r
- return str.replace(/\W/g , "-");\r
- },\r
-\r
- _createSubPages: function () {\r
- var parentList = this.element,\r
- parentPage = parentList.closest( ".ui-page" ),\r
- parentUrl = parentPage.jqmData( "url" ),\r
- parentId = parentUrl || parentPage[ 0 ][ $.expando ],\r
- parentListId = parentList.attr( "id" ),\r
- o = this.options,\r
- dns = "data-" + $.mobile.ns,\r
- self = this,\r
- persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" ),\r
- hasSubPages,\r
- newRemove;\r
-\r
- if ( typeof listCountPerPage[ parentId ] === "undefined" ) {\r
- listCountPerPage[ parentId ] = -1;\r
- }\r
-\r
- parentListId = parentListId || ++listCountPerPage[ parentId ];\r
-\r
- $( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function ( i ) {\r
- var self = this,\r
- list = $( this ),\r
- listId = list.attr( "id" ) || parentListId + "-" + i,\r
- parent = list.parent(),\r
- nodeEls,\r
- title = nodeEls.first().getEncodedText(),//url limits to first 30 chars of text\r
- id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId,\r
- theme = list.jqmData( "theme" ) || o.theme,\r
- countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,\r
- newPage,\r
- anchor;\r
-\r
- nodeEls = $( list.prevAll().toArray().reverse() );\r
- nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim( parent.contents()[ 0 ].nodeValue ) + "</span>" );\r
-\r
- //define hasSubPages for use in later removal\r
- hasSubPages = true;\r
-\r
- newPage = list.detach()\r
- .wrap( "<div " + dns + "role='page' " + dns + "url='" + id + "' " + dns + "theme='" + theme + "' " + dns + "count-theme='" + countTheme + "'><div " + dns + "role='content'></div></div>" )\r
- .parent()\r
- .before( "<div " + dns + "role='header' " + dns + "theme='" + o.headerTheme + "'><div class='ui-title'>" + title + "</div></div>" )\r
- .after( persistentFooterID ? $( "<div " + dns + "role='footer' " + dns + "id='" + persistentFooterID + "'>" ) : "" )\r
- .parent()\r
- .appendTo( $.mobile.pageContainer );\r
-\r
- newPage.page();\r
-\r
- anchor = parent.find('a:first');\r
-\r
- if ( !anchor.length ) {\r
- anchor = $( "<a/>" ).html( nodeEls || title ).prependTo( parent.empty() );\r
- }\r
-\r
- anchor.attr( "href", "#" + id );\r
-\r
- }).virtuallistview();\r
-\r
- // on pagehide, remove any nested pages along with the parent page, as long as they aren't active\r
- // and aren't embedded\r
- if ( hasSubPages &&\r
- parentPage.is( ":jqmData(external-page='true')" ) &&\r
- parentPage.data( "page" ).options.domCache === false ) {\r
-\r
- newRemove = function ( e, ui ) {\r
- var nextPage = ui.nextPage, npURL;\r
-\r
- if ( ui.nextPage ) {\r
- npURL = nextPage.jqmData( "url" );\r
- if ( npURL.indexOf( parentUrl + "&" + $.mobile.subPageUrlKey ) !== 0 ) {\r
- self.childPages().remove();\r
- parentPage.remove();\r
- }\r
- }\r
- };\r
-\r
- // unbind the original page remove and replace with our specialized version\r
- parentPage\r
- .unbind( "pagehide.remove" )\r
- .bind( "pagehide.remove", newRemove );\r
- }\r
- },\r
-\r
- // TODO sort out a better way to track sub pages of the virtuallistview this is brittle\r
- childPages: function () {\r
- var parentUrl = this.parentPage.jqmData( "url" );\r
-\r
- return $( ":jqmData(url^='" + parentUrl + "&" + $.mobile.subPageUrlKey + "')" );\r
- }\r
- });\r
-\r
- //auto self-init widgets\r
- $( document ).bind( "pagecreate create", function ( e ) {\r
- $( $.tizen.virtuallistview.prototype.options.initSelector, e.target ).virtuallistview();\r
- });\r
-\r
-} ( jQuery ) );\r
+/* ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ *
+ * 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.
+ * ***************************************************************************
+ *
+ * Author: Wongi Lee <wongi11.lee@samsung.com>
+ */
+
+/**
+ * Virtual List Widget for unlimited data.
+ * To support more then 1,000 items, special list widget developed.
+ * Fast initialize and light DOM tree.
+ * DB connection and works like DB cursor.
+ *
+ * HTML Attributes:
+ *
+ * data-role: virtuallistview
+ * data-template : jQuery.template ID that populate into virtual list
+ * data-row : Optional. Set number of <li> elements that are used for data handling.
+ *
+ * ID : <UL> element that has "data-role=virtuallist" must have ID attribute.
+ *
+ * * APIs:
+ *
+ * create ( {
+ * itemData: function ( idx ) { return json_obj; },
+ * numItemData: number or function () { return number; },
+ * cacheItemData: function ( minIdx, maxIdx ) {}
+ * } )
+ * : Create a virtuallist widget. At this moment, _create method is called.
+ * args : A collection of options
+ * itemData: A function that returns JSON object for given index. Mandatory.
+ * numItemData: Total number of itemData. Mandatory.
+ * cacheItemData: Virtuallist will ask itemData between minIdx and maxIdx.
+ * Developers can implement this function for preparing data.
+ * Optional.
+ *
+ * Events:
+ *
+ * touchstart : Temporary preventDefault applied on touchstart event to avoid broken screen.
+ *
+ * Examples:
+ *
+ * <script id="tmp-3-2-7" type="text/x-jquery-tmpl">
+ * <li class="ui-li-3-2-7">
+ * <span class="ui-li-text-main">${NAME}</span>
+ * <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ * <span class="ui-li-text-sub">${ACTIVE}</span>
+ * <span class="ui-li-text-sub2">${FROM}</span>
+ * </li>
+ * </script>
+ *
+ * <ul id="virtuallist-normal_3_2_7_ul" data-role="virtuallistview" data-template="tmp-3-2-7" data-dbtable="JSON_DATA" data-row="100">
+ * </ul>
+ *
+ */
+
+
+(function ( $, undefined ) {
+
+ /* Code for Virtual List Demo */
+ var listCountPerPage = {}, /* Keeps track of the number of lists per page UID. This allows support for multiple nested list in the same page. https://github.com/jquery/jquery-mobile/issues/1617 */
+ _NO_SCROLL = 0, /* ENUM */
+ _SCROLL_DOWN = 1, /* ENUM */
+ _SCROLL_UP = -1; /* ENUM */
+
+ $.widget( "tizen.virtuallistview", $.mobile.widget, {
+ options: {
+ theme: "s",
+ countTheme: "c",
+ headerTheme: "b",
+ dividerTheme: "b",
+ splitIcon: "arrow-r",
+ splitTheme: "b",
+ inset: false,
+ id: "", /* Virtual list UL elemet's ID */
+ childSelector: " li", /* To support swipe list */
+ dbtable: "",
+ template : "",
+ dbkey: false, /* Data's unique Key */
+ scrollview: false,
+ row: 100,
+ page_buf: 50,
+ initSelector: ":jqmData(role='virtuallistview')"
+ },
+
+ _stylerMouseUp: function () {
+ $( this ).addClass( "ui-btn-up-s" );
+ $( this ).removeClass( "ui-btn-down-s" );
+ },
+
+ _stylerMouseDown: function () {
+ $( this ).addClass( "ui-btn-down-s" );
+ $( this ).removeClass( "ui-btn-up-s" );
+ },
+
+ _stylerMouseOver: function () {
+ $( this ).toggleClass( "ui-btn-hover-s" );
+ },
+
+ _stylerMouseOut: function () {
+ $( this ).toggleClass( "ui-btn-hover-s" );
+ $( this ).addClass( "ui-btn-up-s" );
+ $( this ).removeClass( "ui-btn-down-s" );
+ },
+
+ _pushData: function ( template ) {
+ var o = this.options,
+ i,
+ myTemplate = $( "#" + template ),
+ lastIndex = ( o.row > this._numItemData ? this._numItemData : o.row ),
+ htmlData;
+
+ for ( i = 0; i < lastIndex; i++ ) {
+ htmlData = myTemplate.tmpl( this._itemData( i ) );
+ $( o.id ).append( $( htmlData ).attr( 'id', 'li_' + i ) );
+ }
+
+ /* After push data, re-style virtuallist widget */
+ $( o.id ).trigger( "create" );
+ },
+
+ _reposition: function ( event ) {
+ var o,
+ t = this,
+ padding;
+
+ if ( event.data ) {
+ o = event.data;
+ } else {
+ o = event;
+ }
+
+ if ( $( o.id + o.childSelector ).size() > 0 ) {
+ t._title_h = $( o.id + o.childSelector + ':first' ).position().top;
+ t._line_h = $( o.id + o.childSelector + ':first' ).outerHeight();
+
+ t._container_w = $( o.id ).innerWidth();
+
+ padding = parseInt( $( o.id + o.childSelector ).css( "padding-left" ), 10 ) + parseInt( $( o.id + o.childSelector ).css( "padding-right" ), 10 );
+
+ /* Add style */
+ $( o.id + ">" + o.childSelector )
+ .addClass( "position_absolute" )
+ .addClass( "ui-btn-up-s" )
+ .bind( "mouseup", t._stylerMouseUp )
+ .bind( "mousedown", t._stylerMouseDown )
+ .bind( "mouseover", t._stylerMouseOver )
+ .bind( "mouseout", t._stylerMouseOut );
+ }
+
+ $( o.id + ">" + o.childSelector ).each( function ( index ) {
+ $( this ).css( "top", t._title_h + t._line_h * index + 'px' )
+ .css( "width", t._container_w - padding );
+ } );
+
+ /* Set Max List Height */
+ $( o.id ).height( t._numItemData * t._line_h );
+ },
+
+ _resize: function ( event ) {
+ var o,
+ t = this,
+ padding;
+
+ if ( event.data ) {
+ o = event.data;
+ } else {
+ o = event;
+ }
+
+ t._container_w = $( o.id ).innerWidth();
+
+ padding = parseInt( $( o.id + o.childSelector ).css( "padding-left" ), 10 ) + parseInt( $( o.id + o.childSelector ).css( "padding-right" ), 10 );
+
+ $( o.id + o.childSelector ).each( function (index) {
+ $( this ).css( "width", t._container_w - padding );
+ } );
+ },
+
+ _scrollmove: function ( event ) {
+ var t = event.data, // document
+ o = t.options,
+ velocity = 0,
+ i,
+ _replace, /* Function */
+ _moveTopBottom, /* Function */
+ _moveBottomTop, /* Function */
+ _matrixToArray, /* Function */
+ $el,
+ transformValue,
+ curWindowTop,
+ cur_num_top_items;
+
+ /* Text & image src replace function */
+ _replace = function ( oldItem, newItem, key ) {
+ var oldObj,
+ newText,
+ newImg;
+
+ $( oldItem ).find( ".ui-li-text-main", ".ui-li-text-sub", "ui-btn-text" ).each( function ( index ) {
+ oldObj = $( this );
+ newText = $( newItem ).find( ".ui-li-text-main", ".ui-li-text-sub", "ui-btn-text" ).eq( index ).text();
+
+ $( oldObj).contents().filter( function () {
+ return ( this.nodeType == 3 );
+ } ).get( 0 ).data = newText;
+ } );
+
+ $( oldItem ).find( "img" ).each( function ( imgIndex ) {
+ oldObj = $( this );
+ newImg = $( newItem ).find( "img" ).eq( imgIndex ).attr( "src" );
+
+ $( oldObj ).attr( "src", newImg );
+ } );
+
+ $( oldItem ).removeData( ); // Clear old data
+
+ if (key) {
+ $( oldItem ).data( key, $( newItem ).data( key ) );
+ }
+ };
+
+ //Move older item to bottom
+ _moveTopBottom = function ( v_firstIndex, v_lastIndex, num, key ) {
+ var myTemplate,
+ htmlData,
+ cur_item;
+
+ if (v_firstIndex < 0) {
+ return;
+ }
+
+ for ( i = 0; i < num; i++ ) {
+ if ( v_lastIndex + i > t._numItemData ) {
+ break;
+ }
+
+ cur_item = $( '#li_' + ( v_firstIndex + i ) );
+
+ if ( cur_item ) {
+ /* Make New <LI> element from template. */
+ myTemplate = $( "#" + o.template );
+ htmlData = myTemplate.tmpl( t._itemData( v_lastIndex + i ) );
+
+ /* Copy all data to current item. */
+ _replace( cur_item, htmlData, key );
+
+ // Clear temporary htmlData to free cache
+ htmlData.remove();
+
+ /* Set New Position */
+ ( cur_item ).css( 'top', t._title_h + t._line_h * ( v_lastIndex + 1 + i ) ).attr( 'id', 'li_' + ( v_lastIndex + 1 + i ) );
+
+ } else {
+ break;
+ }
+ }
+ };
+
+ // Move older item to bottom
+ _moveBottomTop = function ( v_firstIndex, v_lastIndex, num, key ) {
+ var myTemplate,
+ htmlData,
+ cur_item;
+
+ if ( v_firstIndex < 0 ) {
+ return;
+ }
+
+ for ( i = 0; i < num; i++ ) {
+ cur_item = $( '#li_' + ( v_lastIndex - i ) );
+
+ if ( cur_item ) {
+ if ( v_firstIndex - 1 - i < 0 ) {
+ break;
+ }
+
+ /* Make New <LI> element from template. */
+ myTemplate = $( "#" + o.template );
+ htmlData = myTemplate.tmpl( t._itemData( v_firstIndex - 1 - i ) );
+
+ /* Copy all data to current item. */
+ _replace( cur_item, htmlData, key );
+
+ // Clear temporary htmlData to free cache
+ htmlData.remove();
+
+ /* Set New Position */
+ $( cur_item ).css( 'top', t._title_h + t._line_h * ( v_firstIndex - 1 - i ) ).attr( 'id', 'li_' + ( v_firstIndex - 1 - i ) );
+
+ } else {
+ break;
+ }
+ }
+ };
+
+ /* Matrix to Array function written by Blender@stackoverflow.nnikishi@emich.edu*/
+ _matrixToArray = function ( matrix ) {
+ var contents = matrix.substr( 7 );
+
+ contents = contents.substr( 0, contents.length - 1 );
+
+ return contents.split( ', ' );
+ };
+
+ // Get scroll direction and velocity
+ /* with Scroll view */
+ if ( o.scrollview ) {
+ $el = $( o.id ).parentsUntil( ".ui-page" ).find( ".ui-scrollview-view" );
+ transformValue = _matrixToArray( $el.css( "-webkit-transform" ) );
+ curWindowTop = Math.abs( transformValue[ 5 ] ); /* Y vector */
+ } else {
+ curWindowTop = $( window ).scrollTop() - t._line_h;
+ }
+
+ cur_num_top_items = $( o.id + o.childSelector ).filter( function () {
+ return (parseInt( $( this ).css( "top" ), 10 ) < curWindowTop );
+ } ).size();
+
+ if ( t._num_top_items < cur_num_top_items ) {
+ t._direction = _SCROLL_DOWN;
+ velocity = cur_num_top_items - t._num_top_items;
+ t._num_top_items = cur_num_top_items;
+ } else if ( t._num_top_items > cur_num_top_items ) {
+ t._direction = _SCROLL_UP;
+ velocity = t._num_top_items - cur_num_top_items;
+ t._num_top_items = cur_num_top_items;
+ }
+
+ // Move items
+ if ( t._direction == _SCROLL_DOWN ) {
+ if ( cur_num_top_items > o.page_buf ) {
+ if ( t._last_index + velocity > t._numItemData ) {
+ velocity = t._numItemData - t._last_index - 1;
+ }
+
+ /* Prevent scroll touch event while DOM access */
+ $(document).bind( "touchstart.virtuallist", function (event) {
+ event.preventDefault();
+ });
+
+ _moveTopBottom( t._first_index, t._last_index, velocity, o.dbkey );
+
+ t._first_index += velocity;
+ t._last_index += velocity;
+ t._num_top_items -= velocity;
+
+ /* Unset prevent touch event */
+ $( document ).unbind( "touchstart.virtuallist" );
+ }
+ } else if ( t._direction == _SCROLL_UP ) {
+ if ( cur_num_top_items <= o.page_buf ) {
+ if ( t._first_index < velocity ) {
+ velocity = t._first_index;
+ }
+
+ /* Prevent scroll touch event while DOM access */
+ $( document ).bind( "touchstart.virtuallist", function ( event ) {
+ event.preventDefault();
+ });
+
+ _moveBottomTop( t._first_index, t._last_index, velocity, o.dbkey );
+
+ t._first_index -= velocity;
+ t._last_index -= velocity;
+ t._num_top_items += velocity;
+
+ /* Unset prevent touch event */
+ $( document ).unbind( "touchstart.virtuallist" );
+ }
+
+ if ( t._first_index < o.page_buf ) {
+ t._num_top_items = t._first_index;
+ }
+ }
+ },
+
+ _recreate: function ( newArray ) {
+ var t = this,
+ o = this.options;
+
+ $( o.id ).empty();
+
+ t._numItemData = newArray.length;
+ t._direction = _NO_SCROLL;
+ t._first_index = 0;
+ t._last_index = o.row - 1;
+
+ t._pushData( o.template );
+
+ if (o.childSelector == " ul" ) {
+ $( o.id + " ul" ).swipelist();
+ }
+
+ $( o.id ).virtuallistview();
+
+ t.refresh( true );
+
+ t._reposition( o );
+ },
+
+ _initList: function () {
+ var t = this,
+ o = this.options;
+
+ /* After AJAX loading success */
+
+ /* Make Gen list by template */
+ t._pushData( o.template );
+
+ $( o.id ).parentsUntil( ".ui-page" ).parent().one( "pageshow", function () {
+ setTimeout( function () {
+ t._reposition( o );
+ }, 0);
+ });
+
+ /* Scrollview */
+ $( document ).bind( "scrollstop.virtuallist", t, t._scrollmove );
+
+ $( window ).bind( "resize.virtuallist", t._resize );
+
+ if ( o.childSelector == " ul" ) {
+ $( o.id + " ul" ).swipelist();
+ }
+
+ t.refresh( true );
+ },
+
+ create: function () {
+ var o = this.options;
+
+ /* external API for AJAX callback */
+ this._create.apply( this, arguments );
+
+ this._reposition( o );
+ },
+
+ _create: function ( args ) {
+ // Extend required vars
+ $.extend( this, {
+ _itemData : function ( idx ) { return null; },
+ _numItemData : 0,
+ _cacheItemData : function ( minIdx, maxIdx ) { },
+ _line_h : 0,
+ _title_h : 0,
+ _container_w : 0,
+ _minimum_row : 20,
+ _direction : _NO_SCROLL,
+ _first_index : 0,
+ _last_index : 0,
+ _num_top_items : 0 // By scroll move, number of hidden elements.
+ } );
+
+ var t = this,
+ o = this.options,
+ $el = this.element,
+ shortcutsContainer = $('<div class="ui-virtuallist"/>'),
+ shortcutsList = $('<ul></ul>'),
+ dividers = $el.find(':jqmData(role="virtuallistview" )'),
+ lastListItem = null,
+ shortcutscroll = this,
+ dbtable_name,
+ dbtable;
+
+
+ // create listview markup
+ t.element.addClass( function ( i, orig ) {
+ return orig + " ui-listview ui-virtual-list-container" + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" );
+ });
+
+ o.id = "#" + $el.attr( "id" );
+
+ $( o.id ).bind( "pagehide", function ( e ) {
+ $( o.id ).empty();
+ });
+
+ /* Scroll view */
+ if ( $( ".ui-scrollview-clip" ).size() > 0 ) {
+ o.scrollview = true;
+ } else {
+ o.scrollview = false;
+ }
+
+ /* Init list and page buf */
+ if ( $el.data( "row" ) ) {
+ o.row = $el.data( "row" );
+
+ if ( o.row < t._minimum_row ) {
+ o.row = t._minimum_row;
+ }
+
+ o.page_buf = parseInt( ( o.row / 2 ), 10 );
+ }
+
+ // Get arguments
+ if ( args ) {
+ if ( args.itemData && typeof args.itemData == 'function' ) {
+ t._itemData = args.itemData;
+ } else {
+ return;
+ }
+ if ( args.numItemData ) {
+ if ( typeof args.numItemData == 'function' ) {
+ t._numItemData = args.numItemData( );
+ } else if ( typeof args.numItemData == 'number' ) {
+ t._numItemData = args.numItemData;
+ } else {
+ return;
+ }
+ } else {
+ return;
+ }
+ } else { // No option is given
+ // Legacy support: dbtable
+ console.log("WARNING: The data interface of virtuallist is changed. \nOld data interface(data-dbtable) is still supported, but will be removed in next version. \nPlease fix your code soon!");
+
+ /* After DB Load complete, Init Vritual list */
+ if ( $( o.id ).hasClass( "vlLoadSuccess" ) ) {
+ dbtable_name = $el.jqmData('dbtable');
+ dbtable = window[ dbtable_name ];
+
+ if ( !dbtable ) {
+ dbtable = { };
+ }
+
+ $( o.id ).empty();
+
+ if ( $el.data( "template" ) ) {
+ o.template = $el.data( "template" );
+
+ /* to support swipe list, <li> or <ul> can be main node of virtual list. */
+ if ( $el.data( "swipelist" ) == true ) {
+ o.childSelector = " ul";
+ } else {
+ o.childSelector = " li";
+ }
+ }
+
+ /* Set data's unique key */
+ if ( $el.data( "dbkey" ) ) {
+ o.dbkey = $el.data( "dbkey" );
+ }
+
+ t._first_index = 0; //first id of <li> element.
+ t._last_index = o.row - 1; //last id of <li> element.
+
+ t._itemData = function ( idx ) {
+ return dbtable[ idx ];
+ };
+ t._numItemData = dbtable.length;
+
+ t._initList();
+ }
+ }
+
+ },
+
+ destroy : function () {
+ var o = this.options;
+
+ $( document ).unbind( "scrollstop" );
+
+ $( window ).unbind( "resize.virtuallist" );
+
+ $( o.id ).empty();
+ },
+
+ _itemApply: function ( $list, item ) {
+ var $countli = item.find( ".ui-li-count" );
+
+ if ( $countli.length ) {
+ item.addClass( "ui-li-has-count" );
+ }
+
+ $countli.addClass( "ui-btn-up-" + ( $list.jqmData( "counttheme" ) || this.options.countTheme ) + " ui-btn-corner-all" );
+
+ // TODO class has to be defined in markup
+ item.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" ).end()
+ .find( "p, dl" ).addClass( "ui-li-desc" ).end()
+ .find( ">img:eq(0), .ui-link-inherit>img:eq(0)" ).addClass( "ui-li-thumb" ).each( function () {
+ item.addClass( $( this ).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
+ }).end()
+ .find( ".ui-li-aside" ).each(function () {
+ var $this = $( this );
+ $this.prependTo( $this.parent() ); //shift aside to front for css float
+ } );
+ },
+
+ _removeCorners: function ( li, which ) {
+ var top = "ui-corner-top ui-corner-tr ui-corner-tl",
+ bot = "ui-corner-bottom ui-corner-br ui-corner-bl";
+
+ li = li.add( li.find( ".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb" ) );
+
+ if ( which === "top" ) {
+ li.removeClass( top );
+ } else if ( which === "bottom" ) {
+ li.removeClass( bot );
+ } else {
+ li.removeClass( top + " " + bot );
+ }
+ },
+
+ _refreshCorners: function ( create ) {
+ var $li,
+ $visibleli,
+ $topli,
+ $bottomli;
+
+ if ( this.options.inset ) {
+ $li = this.element.children( "li" );
+ // at create time the li are not visible yet so we need to rely on .ui-screen-hidden
+ $visibleli = create ? $li.not( ".ui-screen-hidden" ) : $li.filter( ":visible" );
+
+ this._removeCorners( $li );
+
+ // Select the first visible li element
+ $topli = $visibleli.first()
+ .addClass( "ui-corner-top" );
+
+ $topli.add( $topli.find( ".ui-btn-inner" ) )
+ .find( ".ui-li-link-alt" )
+ .addClass( "ui-corner-tr" )
+ .end()
+ .find( ".ui-li-thumb" )
+ .not( ".ui-li-icon" )
+ .addClass( "ui-corner-tl" );
+
+ // Select the last visible li element
+ $bottomli = $visibleli.last()
+ .addClass( "ui-corner-bottom" );
+
+ $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )
+ .find( ".ui-li-link-alt" )
+ .addClass( "ui-corner-br" )
+ .end()
+ .find( ".ui-li-thumb" )
+ .not( ".ui-li-icon" )
+ .addClass( "ui-corner-bl" );
+ }
+ },
+
+ refresh: function ( create ) {
+ this.parentPage = this.element.closest( ".ui-page" );
+ this._createSubPages();
+
+ var o = this.options,
+ $list = this.element,
+ self = this,
+ dividertheme = $list.jqmData( "dividertheme" ) || o.dividerTheme,
+ listsplittheme = $list.jqmData( "splittheme" ),
+ listspliticon = $list.jqmData( "spliticon" ),
+ li = $list.children( "li" ),
+ counter = $.support.cssPseudoElement || !$.nodeName( $list[ 0 ], "ol" ) ? 0 : 1,
+ item,
+ itemClass,
+ temTheme,
+ a,
+ last,
+ splittheme,
+ countParent,
+ icon,
+ pos,
+ numli,
+ itemTheme;
+
+ if ( counter ) {
+ $list.find( ".ui-li-dec" ).remove();
+ }
+
+ for ( pos = 0, numli = li.length; pos < numli; pos++ ) {
+ item = li.eq( pos );
+ itemClass = "ui-li";
+
+ // If we're creating the element, we update it regardless
+ if ( create || !item.hasClass( "ui-li" ) ) {
+ itemTheme = item.jqmData( "theme" ) || o.theme;
+ a = item.children( "a" );
+
+ if ( a.length ) {
+ icon = item.jqmData( "icon" );
+
+ item.buttonMarkup({
+ wrapperEls: "div",
+ shadow: false,
+ corners: false,
+ iconpos: "right",
+ /* icon: a.length > 1 || icon === false ? false : icon || "arrow-r",*/
+ icon: false, /* Remove unnecessary arrow icon */
+ theme: itemTheme
+ });
+
+ if ( ( icon != false ) && ( a.length == 1 ) ) {
+ item.addClass( "ui-li-has-arrow" );
+ }
+
+ a.first().addClass( "ui-link-inherit" );
+
+ if ( a.length > 1 ) {
+ itemClass += " ui-li-has-alt";
+
+ last = a.last();
+ splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;
+
+ last.appendTo(item)
+ .attr( "title", last.getEncodedText() )
+ .addClass( "ui-li-link-alt" )
+ .empty()
+ .buttonMarkup({
+ shadow: false,
+ corners: false,
+ theme: itemTheme,
+ icon: false,
+ iconpos: false
+ })
+ .find( ".ui-btn-inner" )
+ .append(
+ $( "<span />" ).buttonMarkup({
+ shadow: true,
+ corners: true,
+ theme: splittheme,
+ iconpos: "notext",
+ icon: listspliticon || last.jqmData( "icon" ) || o.splitIcon
+ })
+ );
+ }
+ } else if ( item.jqmData( "role" ) === "list-divider" ) {
+
+ itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;
+ item.attr( "role", "heading" );
+
+ //reset counter when a divider heading is encountered
+ if ( counter ) {
+ counter = 1;
+ }
+
+ } else {
+ itemClass += " ui-li-static ui-body-" + itemTheme;
+ }
+ }
+
+ if ( counter && itemClass.indexOf( "ui-li-divider" ) < 0 ) {
+ countParent = item.is( ".ui-li-static:first" ) ? item : item.find( ".ui-link-inherit" );
+
+ countParent.addClass( "ui-li-jsnumbering" )
+ .prepend( "<span class='ui-li-dec'>" + (counter++) + ". </span>" );
+ }
+
+ item.add( item.children( ".ui-btn-inner" ) ).addClass( itemClass );
+
+ self._itemApply( $list, item );
+ }
+
+ this._refreshCorners( create );
+ },
+
+ //create a string for ID/subpage url creation
+ _idStringEscape: function ( str ) {
+ return str.replace(/\W/g , "-");
+ },
+
+ _createSubPages: function () {
+ var parentList = this.element,
+ parentPage = parentList.closest( ".ui-page" ),
+ parentUrl = parentPage.jqmData( "url" ),
+ parentId = parentUrl || parentPage[ 0 ][ $.expando ],
+ parentListId = parentList.attr( "id" ),
+ o = this.options,
+ dns = "data-" + $.mobile.ns,
+ self = this,
+ persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" ),
+ hasSubPages,
+ newRemove;
+
+ if ( typeof listCountPerPage[ parentId ] === "undefined" ) {
+ listCountPerPage[ parentId ] = -1;
+ }
+
+ parentListId = parentListId || ++listCountPerPage[ parentId ];
+
+ $( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function ( i ) {
+ var self = this,
+ list = $( this ),
+ listId = list.attr( "id" ) || parentListId + "-" + i,
+ parent = list.parent(),
+ nodeEls,
+ title = nodeEls.first().getEncodedText(),//url limits to first 30 chars of text
+ id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId,
+ theme = list.jqmData( "theme" ) || o.theme,
+ countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,
+ newPage,
+ anchor;
+
+ nodeEls = $( list.prevAll().toArray().reverse() );
+ nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim( parent.contents()[ 0 ].nodeValue ) + "</span>" );
+
+ //define hasSubPages for use in later removal
+ hasSubPages = true;
+
+ newPage = list.detach()
+ .wrap( "<div " + dns + "role='page' " + dns + "url='" + id + "' " + dns + "theme='" + theme + "' " + dns + "count-theme='" + countTheme + "'><div " + dns + "role='content'></div></div>" )
+ .parent()
+ .before( "<div " + dns + "role='header' " + dns + "theme='" + o.headerTheme + "'><div class='ui-title'>" + title + "</div></div>" )
+ .after( persistentFooterID ? $( "<div " + dns + "role='footer' " + dns + "id='" + persistentFooterID + "'>" ) : "" )
+ .parent()
+ .appendTo( $.mobile.pageContainer );
+
+ newPage.page();
+
+ anchor = parent.find('a:first');
+
+ if ( !anchor.length ) {
+ anchor = $( "<a/>" ).html( nodeEls || title ).prependTo( parent.empty() );
+ }
+
+ anchor.attr( "href", "#" + id );
+
+ }).virtuallistview();
+
+ // on pagehide, remove any nested pages along with the parent page, as long as they aren't active
+ // and aren't embedded
+ if ( hasSubPages &&
+ parentPage.is( ":jqmData(external-page='true')" ) &&
+ parentPage.data( "page" ).options.domCache === false ) {
+
+ newRemove = function ( e, ui ) {
+ var nextPage = ui.nextPage, npURL;
+
+ if ( ui.nextPage ) {
+ npURL = nextPage.jqmData( "url" );
+ if ( npURL.indexOf( parentUrl + "&" + $.mobile.subPageUrlKey ) !== 0 ) {
+ self.childPages().remove();
+ parentPage.remove();
+ }
+ }
+ };
+
+ // unbind the original page remove and replace with our specialized version
+ parentPage
+ .unbind( "pagehide.remove" )
+ .bind( "pagehide.remove", newRemove );
+ }
+ },
+
+ // TODO sort out a better way to track sub pages of the virtuallistview this is brittle
+ childPages: function () {
+ var parentUrl = this.parentPage.jqmData( "url" );
+
+ return $( ":jqmData(url^='" + parentUrl + "&" + $.mobile.subPageUrlKey + "')" );
+ }
+ });
+
+ //auto self-init widgets
+ $( document ).bind( "pagecreate create", function ( e ) {
+ $( $.tizen.virtuallistview.prototype.options.initSelector, e.target ).virtuallistview();
+ });
+
+} ( jQuery ) );
--- /dev/null
+Used to produce coverage reports from the automated tests
+via jscoverage (http://siliconforks.com/jscoverage/).
+
+You'll need to install jscoverage first.
+You'll also need Google Chrome.
+
+Then:
+
+$ cd tests/test-coverage
+$ ./instrument.sh
+
+See the Summary tab for the coverage report.
+
+This is only tested on Linux.
--- /dev/null
+#!/bin/bash
+# Run instrumented unit tests
+#
+# set CHROME_BIN to the path to/name of your Google Chrome binary
+# (default = `which google-chrome`)
+# set JS_COVERAGE_BIN to the path to/name of your jscoverage binary
+# (default = `which jscoverage`)
+
+# where are we?
+SCRIPT_PATH=`readlink -f $0`
+
+if [[ "x" == "x$SCRIPT_PATH" ]] ; then
+ DIR=`dirname $0`
+else
+ DIR=`dirname $SCRIPT_PATH`
+fi
+
+# programs we need to run
+if [[ "x" == "x$CHROME_BIN" ]] ; then
+ CHROME_BIN=`which google-chrome || which chromium-browser`
+fi
+
+if [[ "x$CHROME_BIN" == "x" ]] ; then
+ echo "*** ERROR: google-chrome not found - please make sure it's installed"
+ echo "Then either put it on your PATH or set the CHROME_BIN env variable"
+ exit 1
+fi
+
+if [[ "x" == "x$JSCOVERAGE_BIN" ]] ; then
+ JSCOVERAGE_BIN=`which jscoverage`
+fi
+
+if [[ "x$JSCOVERAGE_BIN" == "x" ]] ; then
+ echo "*** ERROR: jscoverage not found - please make sure it's installed"
+ echo "Then either put it on your PATH or set the JSCOVERAGE_BIN env variable"
+ exit 1
+fi
+
+# directory for instrumented files
+if [ -d $DIR/instrumented ] ; then
+ rm -Rf $DIR/instrumented
+fi
+
+# just instrument the tizen-web-ui-fw file
+$JSCOVERAGE_BIN --exclude tizen-web-ui-fw-libs.js --exclude jquery.js \
+ $DIR/../../build/tizen-web-ui-fw/latest/js $DIR/instrumented
+
+# copy all the unit tests to the instrumented directory
+cp -a $DIR/../unit-tests/* $DIR/instrumented/
+
+# edit links in all index.html test files
+for file in `find $DIR/instrumented/ -name index.html` ; do
+ # refer to the instrumented tizen-web-ui-fw JS file
+ sed -i -e 's%\.\.\/\.\.\/\.\.\/build\/tizen-web-ui-fw\/latest\/js\/tizen-web-ui-fw\.js%\.\.\/tizen-web-ui-fw\.js%' $file
+
+ # other files are just one directory further up
+ sed -i -e 's%\.\.\/\.\.\/build%\.\.\/\.\.\/\.\.\/build%' $file
+ sed -i -e 's%\.\.\/\.\.\/\libs%\.\.\/\.\.\/\.\.\/libs%' $file
+done
+
+# run the top-level test file through jscoverage
+$CHROME_BIN --allow-file-access-from-files file://$DIR/instrumented/jscoverage.html?index.html
--- /dev/null
+$( document ).bind( "mobileinit", function() {
+ $.support.scrollview = true;
+});
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="configure.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-viewport-scale=false>
+ </script>
+ <script src="main.js"></script>
+
+ <title>Change Page & Back</title>
+</head>
+
+<body>
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>First Page</h1>
+ </div>
+ <div data-role="content">
+ <p> Page Transition : None </p>
+ <a data-role="button" id="change">Move Page via '$.mobile.changePage()' </a>
+ </div>
+ </div>
+
+ <div data-role="page" id="secondPage">
+ <div data-role="header" data-position="fixed">
+ <h1>Second Page</h1>
+ </div>
+ <div data-role="content">
+ <a data-role="button" id="back">Back via 'history.back()'</a>
+ </div>
+ </div>
+</body>
+</html>
--- /dev/null
+$( document ).bind("pagecreate", function () {
+ $('#change').bind( "vclick", function () {
+ console.log( "move page..");
+ $.mobile.changePage($("#secondPage"), {transition:"none"});
+ });
+
+ $('#back').bind( "vclick", function () {
+ history.back();
+ });
+
+});
--- /dev/null
+../../../build/tizen-web-ui-fw
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <title>Tizen UI</title>
+
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+ <link rel="apple-touch-icon" href="icon-tizen.png" />
+</head>
+
+<body>
+ <div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>viewport-scale=false</h1>
+ </div>
+ <div data-role="content">
+ <p> content will be shown properly. -- not too small, not too big. </p>
+ <a data-role="button">Test button</a>
+ </div>
+ </div>
+</body>
+</html>
--- /dev/null
+../../../build/tizen-web-ui-fw
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="configure.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-viewport-scale=true>
+ </script>
+ <script src="main.js"></script>
+
+ <title>Text Selection</title>
+</head>
+
+<body>
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>User select</h1>
+ </div>
+ <div data-role="content">
+ <p> User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text.</p>
+ <a href="#no-user-select" data-role="button">Go to 'no-select' page</a>
+ </div>
+ </div>
+
+ <div id="no-user-select" data-role="page" data-add-back-btn="footer">
+ <div data-role="header" data-position="fixed">
+ <h1>User no-select</h1>
+ </div>
+ <div data-role="content">
+ <p> User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. </p>
+ <a data-role="button" id="back">Back</a>
+ </div>
+ </div>
+
+</body>
+</html>
--- /dev/null
+$( document ).bind("pagecreate", function () {
+ $('#back').bind( "vclick", function () {
+ history.back();
+ });
+});
+
+$( "#no-user-select" ).live( "pageshow", function () {
+ $.mobile.tizen.disableSelection( this );
+});
--- /dev/null
+../../../build/tizen-web-ui-fw
\ No newline at end of file
--- /dev/null
+/*
+ * autodividers unit tests
+ */
+
+(function ($) {
+ $.mobile.defaultTransition = "none";
+
+ module( "Autodividers" );
+
+ asyncTest( "Adds dividers based on first letters of list items.", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage( '#autodividers-test' );
+ },
+
+ function() {
+ var $new_page = $( '#autodividers-test' );
+
+ //ok( $new_page.hasClass( 'ui-page-active' ) );
+ ok( $new_page.find( '.ui-li-divider' ).length === 4 );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Responds to addition/removal of list elements.", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage( '#autodividers-test' );
+ },
+
+ function() {
+ var $new_page = $( '#autodividers-test' );
+ //ok($new_page.hasClass( 'ui-page-active' ));
+
+ var $listview = $new_page.find( 'ul' );
+
+ // should remove all existing dividers
+ ok( $new_page.find( 'li:contains("SHOULD REMOVE")' ).length === 0 );
+
+ // add li; should add an "X" divider
+ $listview.append( '<li>x is for xanthe</li>' );
+ ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+ ok( $new_page.find( '.ui-li-divider' ).is( ':contains("X")' ) );
+
+ // adding the same element again should create a valid list
+ // item but no new divider
+ ok( $new_page.find( '.ui-li-static' ).length === 5 );
+ $listview.append( '<li>x is for xanthe</li>' );
+ ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+ ok( $new_page.find( '.ui-li-divider:contains("X")' ).length === 1 );
+ ok( $new_page.find( '.ui-li-static' ).length === 6 );
+
+ // should ignore addition of non-li elements to the list
+ $listview.find( 'li:eq(0)' ).append( '<span>ignore me</span>' );
+ ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+ ok( $new_page.find( '.ui-li-static' ).length === 6 );
+
+ // add li with the same initial letter as another li
+ // but after the X li item; should add a second "B" divider to the
+ // end of the list
+ $listview.append( '<li>b is for barry</li>' );
+ ok( $new_page.find( '.ui-li-divider' ).length === 6 );
+ ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 2 );
+
+ // remove the item with a repeated "b"; should remove the second
+ // "B" divider
+ $listview.find( 'li:contains("barry")' ).remove();
+ ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+ ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 1 );
+
+ // remove li; should remove the "A" divider
+ $listview.find( 'li:contains("aquaman")' ).remove();
+ ok( $new_page.find( '.ui-li-divider' ).length === 4 );
+ ok( !$new_page.find( '.ui-li-divider' ).is( ':contains("A")' ) );
+
+ // adding another "B" item after "C" should create two separate
+ // "B" dividers
+ $listview.find( 'li:contains("catwoman")' ).after( '<li>b is for barry</li>' );
+ ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+ ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 2 );
+
+ // if two dividers with the same letter have only non-dividers
+ // between them, they get merged
+
+ // removing catwoman should cause the two "B" dividers to merge
+ $listview.find( 'li:contains("catwoman")' ).remove();
+ ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 1 );
+
+ // adding another "D" item before the "D" divider should only
+ // result in a single "D" divider after merging
+ $listview.find( 'li:contains("barry")' ).after( '<li>d is for dan</li>' );
+ ok( $new_page.find( '.ui-li-divider:contains("D")' ).length === 1 );
+
+ start();
+ }
+ ]);
+ });
+
+ module( "Autodividers Selector" );
+
+ asyncTest( "Adds divider text from links.", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage( '#autodividers-selector-test' );
+ },
+
+ function() {
+ var $new_page = $( '#autodividers-selector-test' );
+ //ok($new_page.hasClass( 'ui-page-active' ));
+
+ // check we have the right dividers based on link text
+ var $list = $( '#autodividers-selector-test-list1' );
+ ok( $list.find( '.ui-li-divider' ).length === 4 );
+ ok( $list.find( '.ui-li-divider:eq(0):contains(A)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(1):contains(B)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(2):contains(C)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(3):contains(D)' ).length === 1 );
+
+ // check that adding a new item with link creates the right divider
+ $list.append( '<li><a href="">e is for ethel</a></li>' );
+ ok( $list.find( '.ui-li-divider:eq(4):contains(E)' ).length === 1 );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Adds divider text based on custom selector.", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage( '#autodividers-selector-test' );
+ },
+
+ function() {
+ var $new_page = $( '#autodividers-selector-test' );
+ //ok($new_page.hasClass( 'ui-page-active' ));
+
+ // check we have the right dividers based on custom selector
+ var $list = $( '#autodividers-selector-test-list2' );
+ ok( $list.find( '.ui-li-divider' ).length === 4 );
+ ok( $list.find( '.ui-li-divider:eq(0):contains(E)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(1):contains(F)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(2):contains(G)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(3):contains(H)' ).length === 1 );
+
+ // check that adding a new item creates the right divider
+ $list.append( '<li><div><span class="autodividers-selector-test-selectme">' +
+ 'i is for impy</span></div></li>' );
+
+ ok( $list.find( '.ui-li-divider:eq(4):contains(I)' ).length === 1 );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Adds divider text based on full text selected by custom selector.", function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage( '#autodividers-selector-test' );
+ },
+
+ function() {
+ var $new_page = $( '#autodividers-selector-test' );
+ //ok($new_page.hasClass( 'ui-page-active' ));
+
+ var $list = $( '#autodividers-selector-test-list3' );
+ ok( $list.find( '.ui-li-divider' ).length === 2 );
+ ok( $list.find( '.ui-li-divider:eq(0):contains(eddie)' ).length === 1 );
+ ok( $list.find( '.ui-li-divider:eq(1):contains(frankie)' ).length === 1 );
+
+ start();
+ }
+ ]);
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Autodividers Tests</title>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js" data-framework-theme="tizen-white"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <script src="autodividers-tests.js"></script>
+
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Autodividers Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="autodividers-test">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Autodivider Test</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul data-nstest-role="listview" data-nstest-autodividers="alpha">
+ <li data-nstest-role="list-divider">SHOULD REMOVE</li>
+ <li>a is for aquaman</li>
+ <li>b is for batman</li>
+ <li>c is for catwoman</li>
+ <li>d is for darkwing</li>
+ </ul>
+ </div>
+</div>
+
+<div data-nstest-role="page" id="autodividers-selector-test">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Autodivider Selector Test</h1>
+ </div>
+ <div data-nstest-role="content">
+ <ul id="autodividers-selector-test-list1" data-nstest-role="listview" data-nstest-autodividers="alpha">
+ <li><a href="">a is for aquaman</a></li>
+ <li><a href="">b is for batman</a></li>
+ <li><a href="">c is for catwoman</a></li>
+ <li><a href="">d is for darkwing</a></li>
+ </ul>
+
+ <ul id="autodividers-selector-test-list2" data-nstest-role="listview" data-nstest-autodividers="alpha" data-nstest-autodividers-selector="div > span.autodividers-selector-test-selectme">
+ <li><div><span class="autodividers-selector-test-selectme">eddie</span> is for aquaman</div></li>
+ <li><div><span class="autodividers-selector-test-selectme">frankie</span> is for batman</div></li>
+ <li><div><span class="autodividers-selector-test-selectme">georgie</span> is for catwoman</div></li>
+ <li><div><span class="autodividers-selector-test-selectme">henry</span> is for darkwing</div></li>
+ </ul>
+
+ <ul id="autodividers-selector-test-list3" data-nstest-role="listview" data-nstest-autodividers="full" data-nstest-autodividers-selector="div > span.autodividers-selector-test-selectme">
+ <li><div><span class="autodividers-selector-test-selectme">eddie</span> is smart</div></li>
+ <li><div><span class="autodividers-selector-test-selectme">eddie</span> is tough</div></li>
+ <li><div><span class="autodividers-selector-test-selectme">frankie</span> is scruffy</div></li>
+ <li><div><span class="autodividers-selector-test-selectme">frankie</span> is week</div></li>
+ </ul>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Button
+ *
+ * Hyunjung Kim <hjnim.kim@samsung.com>
+ *
+ */
+$( "#checkboxpage" ).live( "pageinit", function ( event ) {
+
+ module( "button" );
+
+ var unit_button = function ( widget, type ) {
+ var buttonClassPrefix = "ui-btn",
+ buttonText = type,
+ icon,
+ position,
+ buttonStyle,
+ hasClass;
+
+ ok( widget.hasClass(buttonClassPrefix), "Create - Button" );
+
+ if ( widget.jqmData( "inline" ) ) {
+ ok( widget.hasClass( buttonClassPrefix + "-inline"), "Style - Inline");
+ } else {
+ ok( !widget.hasClass( buttonClassPrefix + "-inline"), "Style - Non Inline");
+ }
+
+ if ( !widget.children().first().hasClass( buttonClassPrefix + "-hastxt" ) ) {
+ buttonText = "";
+ }
+ // Text Trim, Cause jQueryMobile(JQM) 1.1 forced to add - "\u00a0" in buttonIcon(ButtonMarkup)
+ // JQM 1.1 buttonMarkup code :
+ // - if( buttonIcon ) buttonIcon.appendChild( document.createTextNode( "\u00a0" ) );
+ equal( widget.text().trim() , buttonText , "Button Text" );
+
+ icon = widget.jqmData("icon");
+ if ( icon !== undefined ) {
+ ok( widget.children().children().hasClass("ui-icon-" + icon ) , "Style - Button Icon" );
+ }
+ if ( icon !== undefined && buttonText != "") {
+ position = widget.jqmData("iconpos");
+ if ( position === undefined ) {
+ position = "left";
+ }
+ ok( widget.children().children().first().hasClass( buttonClassPrefix + "-text-padding-" + position ) , "Style - Button Icon, Text Position" );
+ }
+
+ buttonStyle = widget.jqmData( "style" );
+ if ( buttonStyle !== undefined ) {
+ switch ( buttonStyle ) {
+ case "circle" :
+ hasClass = " .ui-btn-corner-circle, .ui-btn-icon_only";
+ break;
+ case "edit" :
+ hasClass = " .ui-btn-edit";
+ break;
+ case "nobg" :
+ hasClass = " .ui-btn-icon-nobg, .ui-btn-icon_only";
+ break;
+ }
+ ok( widget.children().is( hasClass ) );
+ }
+
+ // Check APIs
+ widget.button().button( "disable" );
+ equal( widget.attr("disabled"), "disabled", "button disable test" );
+
+ widget.button().button( "enable" );
+ equal( widget.attr("disable"), undefined, "button enable test" );
+
+
+ };
+
+ test ( "Button" , function () {
+ unit_button( $("#button-0"), "Text Button" );
+ });
+
+ test ( "Button - Inline" , function () {
+ unit_button( $("#button-1"), "Text Button Inline" );
+ });
+
+ test ( "Button - Inline, Icon" , function () {
+ unit_button( $("#button-2"), "Call Icon" );
+ });
+
+ test ( "Button - Inline, Call Icon, Icon Position(Right)" , function () {
+ unit_button( $("#button-3"), "Icon Text" );
+ });
+
+ test ( "Button - Inline, Only Icon(Reveal)" , function () {
+ unit_button( $("#button-4"), "Non Text Button" );
+ });
+
+ test ( "Button - Inline, Only Icon(Send), circle" , function () {
+ unit_button( $("#button-5"), "Non Text Button" );
+ });
+
+ test ( "Button - Inline, Only Icon(Favorite), nobackground" , function () {
+ unit_button( $("#button-6"), "Non Text Button" );
+ });
+
+});
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="button-tests.js"></script>
+ <title>Button</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Button</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+ <div data-role="page" id="checkboxpage">
+ <div data-role="contents">
+ <div data-role="button" id="button-0">Text Button</div>
+ <div data-role="button" data-inline="true" id="button-1">Text Button Inline</div>
+ <div data-role="button" data-inline="true" data-icon="reveal" id="button-2">Call Icon</div>
+ <div data-role="button" data-inline="true" data-icon="call" data-iconpos="right" id="button-3">Icon Text</div>
+ <div data-role="button" data-inline="true" data-icon="reveal" id="button-4"></div>
+ <div data-role="button" data-inline="true" data-icon="send" data-style="circle" id="button-5"></div>
+ <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg" id="button-6"></div>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Checkbox
+ *
+ * Hyunjung Kim <hjnim.kim@samsung.com>
+ */
+
+$( "#checkpage" ).live( "pageinit", function( event ){
+
+ module("checkbox");
+
+ var unit_check = function ( widget, type ) {
+ var checkbox,
+ label,
+ checkClass,
+ classPrefix = "ui-checkbox";
+
+ widget.checkboxradio();
+ checkbox = widget.parent();
+ ok( checkbox.hasClass(classPrefix) , "Create - Checkbox" );
+
+ checkClass = classPrefix + "-on";
+ if( !widget.is(":checked") ){
+ checkClass = classPrefix + "-off";
+ }
+ if( widget.hasClass( "favorite" )){
+ ok( checkbox.hasClass( "favorite" ), "Style - Favorite" );
+ }
+
+ // Text Trim, Cause jQueryMobile(JQM) 1.1 forced to add - "\u00a0" in buttonIcon(ButtonMarkup)
+ // JQM 1.1 buttonMarkup code :
+ // - if( buttonIcon ) buttonIcon.appendChild( document.createTextNode( "\u00a0" ) );
+ label = checkbox.children().last();
+ equal ( label.text().trim(), type, "label, type string must be same" );
+
+ label.trigger( "vclick" );
+ if( !widget.is( ":disabled" ) ) {
+ checkClass = classPrefix + "-on";
+ ok( label.hasClass( checkClass ) , "Click - Normal Checkbox On" );
+
+ checkClass = classPrefix + "-off";
+ label.trigger( "vclick" );
+ ok( label.hasClass( checkClass ) , "Click - Normal Checkbox Off" );
+ } else {
+ ok( label.hasClass( checkClass ) , "Click - Disable Checkbox" );
+ }
+ };
+
+ test( "checkbox - Normal" , function () {
+ unit_check( $( "#checkbox-1" ), "Normal" );
+ });
+
+ test( "checkbox - Checked, Disabled" , function () {
+ unit_check( $( "#checkbox-2" ), "Checked, Disabled" );
+ });
+
+ test( "checkbox - Disabled" , function () {
+ unit_check( $( "#checkbox-3" ), "Disabled" );
+ });
+
+ test( "Favorite - Favorite" , function () {
+ unit_check( $( "#checkbox-4" ), "Favorite" );
+ });
+
+ test( "Favorite - Favorite Checked, Disabled" , function () {
+ unit_check( $( "#checkbox-5" ), "Favorite Checked, Disabled" );
+ });
+
+ test( "Favorite - Favorite, Disabled" , function () {
+ unit_check( $( "#checkbox-6" ), "Favorite, Disabled" );
+ });
+
+});
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="check-tests.js"></script>
+
+ <title>Check</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Check</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+ <div data-role="page" id="checkpage">
+ <div data-role="header" data-position="fixed">
+ <h1>Checkbox</h1>
+ </div>
+ <div data-role="contents">
+ <fieldset data-role="controlgroup">
+ <input type="checkbox" name="checkbox-1" id="checkbox-1"/>
+ <label for="checkbox-1">Normal</label>
+ <input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked" disabled="true"/>
+ <label for="checkbox-2">Checked, Disabled</label>
+ <input type="checkbox" name="checkbox-3" id="checkbox-3" disabled="true"/>
+ <label for="checkbox-3">Disabled</label>
+
+ <input type="checkbox" name="checkbox-4" id="checkbox-4" class="favorite"/>
+ <label for="checkbox-4">Favorite</label>
+ <input type="checkbox" name="checkbox-5" id="checkbox-5" checked="checked" disabled="true" class="favorite"/>
+ <label for="checkbox-5">Favorite Checked, Disabled</label>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" disabled="disabled" class="favorite"/>
+ <label for="checkbox-6">Favorite, Disabled</label>
+ </fieldset>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * collapse unit tests
+ */
+
+(function ($) {
+ module( "collapse test" );
+
+ var unit_collapse = function ( widget ) {
+ var created_collapse = widget.collapsible(),
+ obj_collapse = created_collapse.data( "collapsible" );
+
+ ok( created_collapse, "Create" );
+
+ /* Check Option */
+ equal( obj_collapse.options.expandCueText, " click to expand contents", "Collapsed test -> expandCueText" );
+ equal( obj_collapse.options.collapseCueText, " click to collapse contents", "Collapsed test -> collapseCueText" );
+ equal( obj_collapse.options.collapsed, true, "Collapsed test -> collapsed" );
+ equal( obj_collapse.options.heading, "h1,h2,h3,h4,h5,h6,legend", "Collapsed test -> heading" );
+ equal( obj_collapse.options.theme, null, "Collapsed test -> theme" );
+ equal( obj_collapse.options.contentTheme, null, "Collapsed test -> contentTheme" );
+
+ /* Check event */
+ created_collapse.trigger("collpase");
+ equal( created_collapse.hasClass("ui-collapsible-collapsed") , true, "API test -> collapse" );
+
+ created_collapse.trigger("expand");
+ equal( created_collapse.hasClass("ui-collapsible-collapsed") , false, "API test -> expand" );
+ };
+
+ test( "collapse test", function () {
+ unit_collapse( $("#collapsedContent") );
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <script src="collapsible-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Collapsible Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" data-add-back-btn="true">
+ <div data-nstest-role="header" data-nstest-position="fixed">
+ <h1>Collapsible test</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-role="collapsible" id="collapsedContent">
+ <h3>I'm a header</h3>
+ <a>test</a>
+ <p>Some content would be here</p>
+ </div>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+/*\r
+ * Unit Test: Color Picker\r
+ *\r
+ * Hyunjung Kim <hjnim.kim@samsung.com>\r
+ *\r
+ */\r
+$( "#colorpage" ).live( "pageinit", function(event){\r
+\r
+ module("Color Picker");\r
+\r
+ var cutHex = function( h ){ return ( h.charAt(0)=="#" ) ? h.substring(1,7):h}\r
+ var hexToRgb = function( h ) {\r
+ var r = parseInt((cutHex(h)).substring( 0, 2 ),16), g = parseInt((cutHex(h)).substring( 2, 4),16), b = parseInt((cutHex(h)).substring( 4, 6), 16);\r
+ return "rgb("+r+", "+g+", "+b+")";\r
+ }\r
+ var makeRandomColor = function(){\r
+ var letters = '0123456789ABCDEF'.split('');\r
+ var color = '#';\r
+ for (var i = 0; i < 6; i++ ) {\r
+ color += letters[Math.round(Math.random() * 15)];\r
+ }\r
+ return color.toLowerCase();\r
+ }\r
+ var colorchange = function( widget, colorcode ){\r
+ if( widget.attr("data-color") == colorcode) return true;\r
+ else return false;\r
+ }\r
+ var testHsvpicker = function( widget ) {\r
+ var wgSiblings,\r
+ hsvpicker,\r
+ chan,\r
+ hsvIdx,\r
+ max,\r
+ step,\r
+ colorcode;\r
+\r
+ widget = $("#hsvpicker");\r
+ widget.hsvpicker();\r
+ wgSiblings = widget.siblings();\r
+ hsvpicker = wgSiblings.last();\r
+\r
+ ok( widget.is(":hidden") &&\r
+ hsvpicker.hasClass("ui-hsvpicker") &&\r
+ hsvpicker.children().length == 3\r
+ , "Create - Hue-Saturation-Value");\r
+\r
+ ok( function ( ) {\r
+ var i,\r
+ varArray,\r
+ leftbutton,\r
+ rightbutton,\r
+ view,\r
+ width,\r
+ nowvar,\r
+ indicator,\r
+ result = true,\r
+ hue,\r
+ sat,\r
+ val,\r
+ dragging_hsv = [0,0,0];\r
+\r
+ for( i = 0 ; i < hsvpicker.children().length; i++ ){\r
+ varArray = hsvpicker.children();\r
+ nowvar = varArray.eq(i);\r
+ leftbutton = nowvar.children().eq(0);\r
+ view = nowvar.children().eq(1);\r
+ rightbutton = nowvar.children().eq(2);\r
+ indicator = nowvar.children().eq(1).children().eq(3);\r
+\r
+ while(true) {\r
+ chan = leftbutton.find("a").attr( "data-" + ( $.mobile.ns || "" ) + "target" );\r
+ leftbutton.find("a").trigger( "vclick" );\r
+ if( parseInt( indicator.css("left") ) <= 0 ){\r
+ break;\r
+ }\r
+ }\r
+\r
+ hsvIdx = ( "hue" === chan ) ? 0 :\r
+ ( "sat" === chan) ? 1 : 2;\r
+ dragging_hsv = [ 0, 0, 0];\r
+\r
+ while(true) {\r
+ rightbutton.children().first().trigger( "vclick" );\r
+ width = view.first().width();\r
+ max = ( 0 == hsvIdx ? 360 : 1 );\r
+ step = 0.05 * max;\r
+ dragging_hsv[hsvIdx] = dragging_hsv[hsvIdx] + step;\r
+ dragging_hsv[hsvIdx] = Math.min( max, Math.max( 0.0, dragging_hsv[hsvIdx] ) );\r
+ hue = varArray.eq(0).children().eq(1).children();\r
+ val = varArray.eq(1).children().eq(1).children();\r
+ sat = varArray.eq(2).children().eq(1).children();\r
+ switch(hsvIdx){\r
+ case 0:\r
+ if( indicator.css("background-color") != val.last().css("background-color") ||\r
+ indicator.css("background-color") != sat.last().css("background-color"))\r
+ result = false;\r
+ break;\r
+ case 1:\r
+ if( parseFloat( dragging_hsv[1] ).toFixed(2) != parseFloat(hue.eq(1).css("opacity")).toFixed(2) ||\r
+ indicator.css("background-color") != sat.last().css("background-color"))\r
+ result = false;\r
+ break;\r
+ case 2:\r
+ if(parseFloat( 1 - dragging_hsv[2] ).toFixed(2) , parseFloat(hue.eq(2).css("opacity")).toFixed(2) ||\r
+ parseFloat( 1 - dragging_hsv[2] ).toFixed(2) , parseFloat(val.eq(2).css("opacity")).toFixed(2))\r
+ result = false;\r
+ break;\r
+ }\r
+ if( parseInt( indicator.css("left") ) >= parseInt( width ) || !result){\r
+ break;\r
+ }\r
+ }\r
+ }\r
+ return result;\r
+ }," Click - Color match, Hue-Saturation-Value " );\r
+\r
+ colorcode = makeRandomColor();\r
+ widget.hsvpicker( { color : colorcode });\r
+\r
+ ok( colorchange(widget, colorcode),\r
+ "Option : Color change")\r
+ }\r
+\r
+ test( "Color Title" , function ( ) {\r
+ var wgSiblings,\r
+ colorHex,\r
+ widget,\r
+ colorcode;\r
+\r
+ widget = $("#colortitle");\r
+\r
+ wgSiblings = widget.siblings();\r
+ ok( widget.is(":hidden") &&\r
+ wgSiblings.length == 2 &&\r
+ wgSiblings.last().is(".ui-colortitle, .jquery-mobile-ui-widget"),\r
+ "Create - Color Title" );\r
+\r
+ colorHex = widget.jqmData("color");\r
+ equal( wgSiblings.last().css("color"), hexToRgb(colorHex), "Compare - Color" );\r
+ equal( wgSiblings.last().text().trim(), colorHex, "Compare - Text" );\r
+\r
+ colorcode = makeRandomColor();\r
+ widget.colortitle({ color : colorcode });\r
+\r
+ ok( colorchange( widget, colorcode ),\r
+ "Option : Color change");\r
+ });\r
+\r
+ test( "Color palette" , function () {\r
+ var widget,\r
+ palette,\r
+ palettePreview,\r
+ wgSiblings,\r
+ colorChoice,\r
+ i,\r
+ colorcode,\r
+ palettePrefix = ".colorpalette";\r
+\r
+ widget = $("#colorpalette");\r
+\r
+ wgSiblings = widget.siblings();\r
+ palette = wgSiblings.last();\r
+ ok( widget.is(":hidden") &&\r
+ wgSiblings.length == 2 &&\r
+ palette.is(".ui-colorpalette, .jquery-mobile-ui-widget"),\r
+ "Create - Color palette" );\r
+\r
+ if( palette.find( palettePrefix + "-preview-container").length ){\r
+ palettePreview = palette.find( palettePrefix +"-preview-container");\r
+ }\r
+ colorChoice = palette.find( palettePrefix + "-table").children().find( "div[class^='colorpalette-choice-container-']" );\r
+ equal( colorChoice.length ,\r
+ palette.jqmData("n-choices") , "Count - Color choice container" );\r
+\r
+ ok( function(){\r
+ var i = 0,\r
+ result = true;\r
+ for(i = 0 ; i < colorChoice.length; i++ ){\r
+ $(colorChoice[i]).children().trigger("vclick");\r
+ if( palettePreview.children().css("background-color") == $(colorChoice[i]).children().css("background-color") ){\r
+ result = false;\r
+ break;\r
+ }\r
+ }\r
+ return result;\r
+ }, "Click - Palette Active check" );\r
+\r
+ colorcode = makeRandomColor();\r
+ widget.colorpalette({ color: colorcode });\r
+\r
+ ok( colorchange( widget, colorcode ),\r
+ "Option : Color change");\r
+ });\r
+\r
+ test( "Color picker button-noform" , function () {\r
+ var widget,\r
+ wgSiblings,\r
+ colorpickerbutton,\r
+ colorcode,\r
+ popwindow,\r
+ hsvpicker;\r
+\r
+ widget = $("#colorpickerbutton-noform");\r
+ widget.colorpickerbutton();\r
+ wgSiblings = widget.siblings();\r
+ colorpickerbutton = wgSiblings.last();\r
+\r
+ ok( widget.is(":hidden") &&\r
+ wgSiblings.last().jqmData("role") == "button" &&\r
+ wgSiblings.last().attr("aria-haspopup") == "true",\r
+ "Create - Color picker" );\r
+\r
+ widget.colorpickerbutton("open");\r
+ popwindow = $("#colorpage").children().last();\r
+\r
+ ok( parseInt( popwindow.css("top") ) > 0, "Open - Popupwindow");\r
+ hsvpicker = popwindow.children().children().first();\r
+ testHsvpicker(hsvpicker);\r
+\r
+ widget.colorpickerbutton("close");\r
+ equal( hexToRgb( hsvpicker.jqmData("color") ),\r
+ colorpickerbutton.children().children().children().css("color") );\r
+\r
+ colorcode = makeRandomColor();\r
+ widget.colorpicker({ color: colorcode });\r
+\r
+ ok( colorchange( widget, colorcode ),\r
+ "Option : Color change");\r
+ });\r
+\r
+ test( "Hue-Saturation-Value" , function () {\r
+ testHsvpicker( "#hsvpicker" );\r
+ });\r
+\r
+ test( "Hue-Saturation-Lightnewss" , function() {\r
+ var widget,\r
+ wgSiblings,\r
+ colorpicker,\r
+ colorcode;\r
+\r
+ widget = $("#colorpicker");\r
+ widget.colorpicker();\r
+ wgSiblings = widget.siblings();\r
+ colorpicker = wgSiblings.last();\r
+\r
+ ok( widget.is(":hidden") &&\r
+ colorpicker.hasClass("ui-colorpicker") &&\r
+ colorpicker.children().length == 3\r
+ , "Create - Hue-Saturation-Lightness");\r
+\r
+ colorcode = makeRandomColor();\r
+ widget.colorpicker({ color: colorcode });\r
+\r
+ ok( colorchange( widget, colorcode ),\r
+ "Option : Color change");\r
+ });\r
+});
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>\r
+<html>\r
+<head>\r
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>\r
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>\r
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"\r
+ data-framework-theme="tizen-white"\r
+ data-framework-viewport-scale=false>\r
+ </script>\r
+\r
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />\r
+\r
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>\r
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>\r
+ <script src="color-tests.js"></script>\r
+\r
+ <title>Color Picker</title>\r
+</head>\r
+\r
+<body>\r
+\r
+<h1 id="qunit-header">Color</h1>\r
+<h2 id="qunit-banner"></h2>\r
+<div id="qunit-testrunner-toolbar"></div>\r
+<h2 id="qunit-userAgent"></h2>\r
+<ol id="qunit-tests"></ol>\r
+<div id="qunit-fixture">\r
+ <div data-role="page" id="colorpage">\r
+ <div>\r
+ <div>Color title widget</div>\r
+ <div data-role="colortitle" id="colortitle"></div>\r
+ </div>\r
+ <div>\r
+ <div>Color palette widget</div>\r
+ <div data-role="colorpalette" id="colorpalette" data-show-preview="true"></div>\r
+ </div>\r
+ <div>\r
+ <div>Color picker button</div>\r
+ <div data-role="colorpickerbutton" data-inline="true" id="colorpickerbutton-noform"></div>\r
+ </div>\r
+ <div>\r
+ <div data-role="label">Hue-Saturation-Value picker widget</div>\r
+ <div data-role="hsvpicker" id="hsvpicker"></div>\r
+ </div>\r
+ <div>\r
+ <div data-role="label">Hue-Saturation-Lightness picker widget</div>\r
+ <div data-role="colorpicker" id="colorpicker" data-color="#ffffff"></div>\r
+ </div>\r
+ </div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
+\r
--- /dev/null
+/*
+ * controlbar unit tests
+ */
+
+(function ($) {
+ $.mobile.defaultTransition = "none";
+
+ module( "Controlbar" );
+
+ var unit_controlbar = function ( widget, type, drayStyle ) {
+ var controlbar,
+ controlbar_style,
+ item_count,
+ activeIndex,
+ deactiveReturn,
+ activeReturn,
+ created_controlbar = widget.controlbar();
+
+ /* Create */
+ ok( created_controlbar, "Create" );
+
+ /* Check Parameters */
+ equal( type, created_controlbar.jqmData("style"), "Parameter: data-style" );
+
+ if ( drayStyle ) {
+ if ( drayStyle == "icon" ) {
+ equal( created_controlbar.find( "a" ).is(".ui-btn-icon_only" ), true, "Icon only style test");
+ } else if ( drayStyle == "text" ) {
+ equal( created_controlbar.is(".ui-navbar-noicons" ), true, "Text only style test");
+ }
+ }
+
+ /* Check APIs */
+ activeIndex = created_controlbar.find(".ui-btn-active").index();
+ created_controlbar.controlbar( "disable", activeIndex );
+ deactiveReturn = created_controlbar.find("li:eq(" + activeIndex + ")").is(".ui-disabled");
+
+ equal( deactiveReturn, true, "List Deactive test" );
+
+ created_controlbar.controlbar("enable", activeIndex);
+ activeReturn = created_controlbar.find("li:eq(" + activeIndex + ")").is(".ui-disabled");
+ equal( activeReturn, false, "List Active test" );
+ };
+
+ test( "controlbar normal style test -> tabbar", function () {
+ unit_controlbar( $("#controlbar-tabbar-test"), "tabbar" );
+ });
+
+ test( "controlbar icon style test -> tabbar", function () {
+ unit_controlbar( $("#controlbar-tabbar-test-icon-only"), "tabbar", "icon" );
+ });
+
+ test( "controlbar text style test -> tabbar", function () {
+ unit_controlbar( $("#controlbar-tabbar-test-text-only"), "tabbar", "text" );
+ });
+
+ test( "controlbar normal style test -> toolbar", function () {
+ unit_controlbar( $("#controlbar-toolbar-test"), "toolbar" );
+ });
+
+ test( "controlbar icon style test -> toolbar", function () {
+ unit_controlbar( $("#controlbar-toolbar-test-icon-only"), "toolbar", "icon" );
+ });
+
+ test( "controlbar text style test -> tabbar", function () {
+ unit_controlbar( $("#controlbar-toolbar-test-text-only"), "toolbar", "text" );
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <script src="controlbar-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Controlbar Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Controlbar Test - markup</h1>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+ <div data-nstest-role="footer">
+ <div id="controlbar-tabbar-test" data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Controlbar Test - markup</h1>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+ <div data-nstest-role="footer">
+ <div id="controlbar-tabbar-test-icon-only" data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="ctrlbar-save" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-share" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Controlbar Test - markup</h1>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+ <div data-nstest-role="footer">
+ <div id="controlbar-tabbar-test-text-only" data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" >Menu</a></li>
+ <li><a href="#" class="ui-btn-active">Save</a></li>
+ <li><a href="#" >Share</a></li>
+ <li><a href="#" >Timeline</a></li>
+ <li><a href="#" >WorldClock</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Controlbar Test - markup</h1>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+ <div data-nstest-role="footer">
+ <div id="controlbar-toolbar-test" data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" >Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" class="ui-btn-active">Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Controlbar Test - markup</h1>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+ <div data-nstest-role="footer">
+ <div id="controlbar-toolbar-test-icon-only" data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="ctrlbar-save" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-share" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Controlbar Test - markup</h1>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+ <div data-nstest-role="footer">
+ <div id="controlbar-toolbar-test-text-only" data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" >Menu</a></li>
+ <li><a href="#" class="ui-btn-active">Save</a></li>
+ <li><a href="#" >Share</a></li>
+ <li><a href="#" >Timeline</a></li>
+ <li><a href="#" >WorldClock</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+$(document).ready( function () {
+
+ module( "Date Time Picker");
+
+ var datetime = $("#datetime")[0];
+ var date = $("#date")[0];
+ var time = $("#time")[0];
+ var custom = $("#custom")[0];
+
+ // trigger pagecreate
+ $( "#page-1" ).page();
+
+ var objDatetime = $(datetime).data( "datetimepicker" );
+ var objDate = $(date).data( "datetimepicker" );
+ var objTime = $(time).data( "datetimepicker" );
+ var objCustom = $(custom).data( "datetimepicker" );
+
+ asyncTest( "Auto-initialization", function () {
+ ok( objDatetime, "should Date/Time instace created" );
+ ok( objDate, "should Date instance created" );
+ ok( objTime, "should Time instance created" );
+ ok( objCustom, "should Custom format instance created" );
+
+ start();
+ });
+
+ asyncTest( "Options", function () {
+ equal( objDatetime.options.type, "datetime", "should 'datetime' type created." );
+ equal( objDate.options.type, "date", "should 'date' type created." );
+ equal( objTime.options.type, "time", "should 'time' type created." );
+ equal( objCustom.options.type, "datetime", "should custom format created as 'datetime' type." );
+ equal( objCustom.options.format, "MMM dd yyyy hh:mm tt", "should accept custom format string." );
+ equal( objCustom.options.date.toString(), new Date("Jun 30 00:00:00 UTC+0000 2012").toString(), "should accept preset date." );
+
+ start();
+ });
+
+ asyncTest( "Private Methods", function () {
+ ok( ( function () {
+ var year = 0,
+ expect = false,
+ actual = false;
+
+ try {
+ for ( year = 1; year < 2100; year++ ) {
+ expect = new Date( year, 1, 29 ).getDate() == 29;
+ actual = objDatetime._isLeapYear( year );
+ if ( expect != actual ) {
+ throw "" + year + " is wrong";
+ }
+ };
+ } catch ( exception ) {
+ console.log( exception );
+ return false;
+ }
+ return true;
+ }()), "should be able to check leap year" );
+
+ var updateFieldTest = function ( format, value, expect ) {
+ var target = $('<div data-pat=' + format + '></div>');
+ objTime._updateField( target, value );
+ return target.text();
+ };
+
+ deepEqual( [
+ updateFieldTest( "h", 0 ),
+ updateFieldTest( "hh", 1 ),
+ updateFieldTest( "H", 13 ),
+ updateFieldTest( "HH", 9 ),
+ updateFieldTest( "m", 9 ),
+ updateFieldTest( "mm", 9 ),
+ updateFieldTest( "MMM", 3 ),
+ updateFieldTest( "MMMM", 3 ),
+ updateFieldTest( "yy", 1995 ),
+ updateFieldTest( "yyyy", 1995 )
+ ],
+ [
+ "12", "01", "13", "09", "9", "09", Globalize.culture().calendar.months.namesAbbr[2], Globalize.culture().calendar.months.names[2], "95", "1995"
+ ], "should update field to given value with format" );
+
+ ok( ( function () {
+ var beforeNoon = objTime.options.date.getHours() < 12;
+ objTime._switchAmPm();
+ return beforeNoon != objTime.options.date.getHours() < 12;
+ }()), "should change AM/PM by AMPM button" );
+
+ deepEqual( [ "MMMM", " ", "dd", " ", "yyyy", " ", "hh", ":", "mm", " ", "dummy space" ],
+ objTime._parsePattern( "MMMM dd yyyy hh:mm 'dummy space'" ), "should parse DTF string as array" );
+
+ objDatetime.options.date = new Date( "May 2 18:30:00 2012" );
+
+ var months = Globalize.culture().calendar.months.namesAbbr.slice();
+ if ( months.length > 12 ) {
+ months.length = 12;
+ }
+
+ deepEqual( [
+ { // hour h 6
+ values : [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" ],
+ data : [ 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 12 ],
+ numItems : 12,
+ current : 5
+ },
+ { // hour H 6
+ values : range( 0, 23 ),
+ data : range( 0, 23 ),
+ numItems : 24,
+ current : 18
+ },
+ {
+ values : months,
+ data : range( 1, 12 ),
+ numItems : 12,
+ current : 4
+ }
+ ],
+ [
+ objDatetime._populateDataSelector( "hour", "hh", objDatetime ),
+ objDatetime._populateDataSelector( "hour", "H", objDatetime ),
+ objDatetime._populateDataSelector( "month", "MMM", objDatetime )
+ ], "should populate data selector by given field and pattern" );
+
+ start();
+ });
+
+ asyncTest( "Public Methods", function () {
+ objDatetime.value.call( objDatetime, "Jan 1 09:00:00 2012" );
+ equal( "2012-01-01T09:00:00", objDatetime.value(), "should set and get value by API" );
+ var format = "yyyy MM dd hh mm";
+ objDatetime._setFormat( format );
+ equal( objDatetime.option("format"), format, "should set type and format" );
+ start();
+ });
+
+ asyncTest( "Events", function () {
+ var str = "May 2 18:00:00 2012";
+
+ $(datetime).bind("date-changed", function(e, date) {
+ equal( date, "2012-05-02T18:00:00", "Should invoke event when date changed" );
+ start();
+ });
+
+ objDatetime.value( str );
+ });
+
+
+});
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="datetimepicker-tests.js"></script>
+
+ <title>Date Time Picker</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Date Time Picker</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+ <div data-role="page" id="dummy-page">
+ <div data-role="header" data-position="fixed">
+ <h1>Dummy</h1>
+ </div>
+ <div data-role="contents">
+ </div>
+ </div>
+ <div data-role="page" id="page-1">
+ <div data-role="header" data-position="fixed">
+ <h1>Date Time Picker</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li class="ui-li-2line-sub-main">
+ <span class="ui-li-text-main">
+ <input type="datetime" id="datetime" />
+ </span>
+ <span class="ui-li-text-sub">DateTimePicker</span>
+ </li>
+ <li class="ui-li-2line-sub-main">
+ <span class="ui-li-text-main">
+ <input type="date" id="date"/>
+ </span>
+ <span class="ui-li-text-sub">DatePicker</span>
+ </li>
+ <li class="ui-li-2line-sub-main">
+ <span class="ui-li-text-main">
+ <input type="time" id="time"/>
+ </span>
+ <span class="ui-li-text-sub">TimePicker</span>
+ </li>
+ <li class="ui-li-2line-sub-main">
+ <span class="ui-li-text-main">
+ <input type="datetime" id="custom" data-format="MMM dd yyyy hh:mm tt" value="2012-06-30T00:00:00+00:00" />
+ </span>
+ <span class="ui-li-text-sub">DateTimePicker</span>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
+
--- /dev/null
+/*
+ * Unit Test: Dayselector
+ * modified by : Koeun Choi <koeun.choi@samsung.com>
+ */
+
+(function ($) {
+
+ module( "Day selector" );
+
+ var unit_dayselector = function (elt, expectedType, expectedTheme) {
+ var days = 7,
+ checkbox,
+ label,
+ expectedId,
+ i;
+
+ elt.dayselector();
+
+ ok( elt.hasClass('ui-dayselector'), "day-selector has 'ui-dayselector' class.");
+ // main element should be a controlgroup
+ ok( elt.hasClass('ui-controlgroup'), "day-selector has 'ui-controlgroup' class." );
+
+ equal( elt.attr('data-' + $.mobile.ns + 'type'), expectedType, "should have '" + expectedType + "' type" );
+
+ for ( i = 0; i < days ; i++ ) {
+ expectedId = elt.attr( 'id' ) + '_' + i;
+ checkbox = elt.find( '.ui-checkbox :checkbox[value=' + i + '][id=' + expectedId + ']' );
+ equal( checkbox.length, 1, "should be one checkbox per day" );
+ equal( checkbox.prop('value'), String(i), "should have correct day value" );
+
+ label = checkbox.siblings().first();
+ equal( label.length, 1, "should be one label per day" );
+ equal( label.attr('for'), expectedId, "should associate correctly with checkbox" );
+ ok( label.hasClass('ui-dayselector-label-' + i), "should have the right label class" );
+ equal( label.jqmData('theme'), expectedTheme, "should have '" + expectedTheme + "' theme" );
+ }
+ };
+
+ /* Test 1. Default Configuration Check */
+ asyncTest( "Default Configuration Check", function () {
+
+ $.testHelper.pageSequence( [
+ function () {
+ $.testHelper.openPage( '#dayselector-test-configuration' );
+ },
+
+ function () {
+ var expectedType = 'horizontal',
+ testPage = $( '#dayselector-test-configuration' ),
+ expectedTheme = 's',
+ daySelector;
+
+ // test default values are applied correctly
+ daySelector = testPage.find( '#dayselector-test-configuration-default' );
+ unit_dayselector( daySelector, expectedType, expectedTheme );
+
+ start();
+ }
+ ]);
+ });
+
+ /* Test 2. Theme Configuration Check */
+ asyncTest( "Theme Configuration Check", function () {
+
+ $.testHelper.pageSequence( [
+ function () {
+ $.testHelper.openPage( '#dayselector-test-configuration' );
+ },
+
+ function () {
+ var expectedType = 'horizontal',
+ testPage = $( '#dayselector-test-configuration' ),
+ expectedTheme,
+ daySelector;
+
+ // test user theme is applied to dayselector winset correctly
+ daySelector = testPage.find( '#dayselector-test-configuration-theme' );
+ daySelector.dayselector();
+ expectedTheme = daySelector.jqmData( 'theme' );
+ equal( expectedTheme, 'a', "dayselector fieldset theme is 'a'" );
+ unit_dayselector( daySelector, expectedType, expectedTheme );
+
+ start();
+ }
+
+ ]);
+ });
+
+ /* Test 3. Custom Configuration Check */
+ asyncTest( "Custom Configuration Check", function () {
+
+ $.testHelper.pageSequence( [
+ function () {
+ $.testHelper.openPage( '#dayselector-test-configuration' );
+ },
+
+ function () {
+ var expectedType = 'vertical',
+ testPage = $( '#dayselector-test-configuration' ),
+ expectedTheme = 'a',
+ daySelector;
+
+ // test custom config is applied correctly
+ daySelector = testPage.find( '#dayselector-test-configuration-custom' );
+
+ daySelector.dayselector({ type: expectedType, theme: expectedTheme });
+ unit_dayselector(daySelector, expectedType, expectedTheme );
+
+ start();
+ }
+
+ ]);
+ });
+
+ /* Test 4. Check Event and APIs */
+ asyncTest( "Check Event and APIs", function () {
+
+ $.testHelper.pageSequence([
+ function () {
+ $.testHelper.openPage( '#dayselector-test-select' );
+ },
+
+ function () {
+ var testPage,
+ daySelectorElem,
+ wednesday,
+ friday;
+ testPage = $( '#dayselector-test-select' );
+ ok( testPage.hasClass('ui-page-active') );
+
+ // test defaults are applied correctly
+ daySelectorElem = testPage.find( '#dayselector-test-select-1' );
+
+ // nothing should be selected yet
+ deepEqual( daySelectorElem.dayselector('value'), [] );
+
+ // click on Wednesday and Friday to switch them on
+ wednesday = daySelectorElem.find( '.ui-checkbox' )[3];
+ $( wednesday ).find( 'label' ).trigger( 'click' );
+
+ friday = daySelectorElem.find( '.ui-checkbox' )[5];
+ $( friday ).find( 'label' ).trigger( 'click' );
+ deepEqual( daySelectorElem.dayselector('value'), ['3', '5'] );
+
+ // turn off Wednesday and Friday
+ $( wednesday ).find( 'label' ).trigger( 'click' );
+ $( friday ).find( 'label' ).trigger( 'click' );
+ deepEqual( daySelectorElem.dayselector('value'), [] );
+
+ // test the selectAll() method
+ daySelectorElem.dayselector( 'selectAll' );
+ deepEqual( daySelectorElem.dayselector('value'), ['0', '1', '2', '3', '4', '5', '6'] );
+
+ start();
+ }
+ ]);
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>jQuery Mobile Day Selector Tests</title>
+
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="dayselector-tests.js"></script>
+ </head>
+ <body>
+
+ <h1 id="qunit-header">jQuery Mobile Day Selector Tests</h1>
+ <h2 id="qunit-banner"></h2>
+ <h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="dayselector-test-configuration">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Day Selector Tests - configuration</h1>
+ </div>
+ <div data-nstest-role="content">
+ <fieldset id="dayselector-test-configuration-default" data-nstest-role="dayselector"> </fieldset>
+ <fieldset id="dayselector-test-configuration-theme" data-nstest-theme="a" data-nstest-role="dayselector"></fieldset>
+ <fieldset id="dayselector-test-configuration-custom"></fieldset>
+ </div>
+</div>
+
+<div data-nstest-role="page" id="dayselector-test-select">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Day Selector Tests - selection</h1>
+ </div>
+ <div data-nstest-role="content">
+ <fieldset id="dayselector-test-select-1" data-nstest-role="dayselector"></fieldset>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/**
+ * Expandablelist test
+ *
+ * Youmin Ha <youmin.ha@samsung.com>
+ */
+( function ( $ ) {
+ var DEBUG = true;
+
+ $.mobile.defaultTransition = "none";
+
+ module( "ExpandableList", {
+ setup: function ( ) {
+ var page = $( 'div#expandablelist-main:jqmData(role="page")' ),
+ initHtml = '<form>\
+ <div data-role="header">\
+ <h1>expandable list</h1>\
+ </div>\
+ <div data-role="content">\
+ <ul data-role="listview" id="list1">\
+ <li id="exp1" data-expandable="true" data-initial-expansion="true">exp1</li>\
+ <li id="exp1-1" data-expandable="true" data-expanded-by="exp1" data-initial-expansion="false">exp1-1</li>\
+ <li id="exp1-1-1" data-expanded-by="exp1-1">exp1-1-1</li>\
+ <li id="exp2" data-expandable="true">exp2</li>\
+ </ul>\
+ </div>\
+ </form>',
+ obj;
+
+ if( DEBUG ) {
+ page.show( );
+ }
+ page.append( $( initHtml ) );
+
+ obj = $( ':jqmData(role="listview")' );
+ obj.listview( );
+
+ obj = $( ':jqmData(expandable="true")' );
+ obj.expandablelist( );
+ },
+ teardown: function ( ) {
+ var page = $( 'div#expandablelist-main:jqmData(role="page")' );
+ page.empty( );
+
+ if( DEBUG ) {
+ page.hide( );
+ }
+ }
+ } );
+
+ function expandCollapseTest ( ) {
+ var transitionTimeout = 1000,
+ elist = $( ":jqmData(expandable='true')" ),
+ li1,
+ li1_1,
+ li1_1_1,
+ val;
+
+ elist.expandablelist( );
+ ok( elist, "expandablelist object creation" );
+
+ li1 = $( "li#exp1" );
+ li1_1 = $( "li#exp1-1" );
+ li1_1_1 = $( "li#exp1-1-1" );
+
+ val = li1_1.height( );
+ console.log( "li1_1's height=" + val );
+ notEqual( val, 0, "Expanded listitem with expandable parent having data-initial-expansion=true must be visible (height > 0)" );
+
+ equal( li1_1_1.height(), 0, "Expanded listitem with expandable parent having data-initial-expansion=false must not be visible (height == 0)" );
+
+ li1_1.trigger( 'vclick' );
+ setTimeout( function ( ) {
+ notEqual( li1_1_1.height( ), 0, "After click, expanded listitem must be visible (height > 0)" );
+
+ li1.trigger( 'vclick' );
+ setTimeout( function ( ) {
+ // All children must be collapsed when top-level expandable listitem is clicked.
+ equal( li1_1.height(), 0, "After click, all children must be collapsed. (height == 0)" );
+ equal( li1_1_1.height(), 0, "After click, all children must be collapsed. (height == 0)" );
+
+ start( );
+ }, transitionTimeout );
+
+ }, transitionTimeout );
+ }
+
+ asyncTest( "Basic expand-collapse test", 6, function ( ) {
+ expandCollapseTest( );
+ } );
+
+ asyncTest( "style test - checkbox" , 6, function ( ) {
+ var li = $( "li#exp1-1" ),
+ subitem = $( '<input type="checkbox" id="checkbox1" >' );
+
+ // Prepare
+ li.append( subitem );
+ li.addClass( 'ui-li-1line-check1' )
+ .addClass( 'ui-li-dialogue' );
+ subitem.checkboxradio( );
+ li.trigger( 'refresh' );
+
+ // Run
+ expandCollapseTest( );
+ } );
+
+} ) ( jQuery );
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Expandable list test</title>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+
+</head>
+<body>
+ <!-- QUnit template -->
+ <div>
+ <h1 id="qunit-header">Test : Expandable list</h1>
+ <h2 id="qunit-banner"></h2>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+ </div>
+ <div data-role="page" id="expandablelist-main">
+ </div>
+ <script src="expandablelist-tests.js"></script>
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Extendable list
+ *
+ * Wongi Lee <wongi11.lee@samsung.com>
+ */
+
+$( document ).ready( function () {
+
+ module( "Extendable List");
+
+ function startExtendableListTest(){
+ var $elContainer = $( "ul#extendable_list_main" ),
+ $elElements = $( "ul#extendable_list_main li" ),
+ elOptions = $( "ul#extendable_list_main" ).extendablelist( "option" );
+ console.dir( elOptions );
+
+ test( "Extendable list test", function () {
+ /* Initialize and create method */
+ ok( $elContainer );
+ equal( $elElements.length, 51 ); /* 50 <li> items + one button. */
+
+ /* Options */
+ equal( elOptions.id, "#extendable_list_main" );
+ equal( elOptions.childSelector, " li" );
+ equal( elOptions.dbtable, "JSON_DATA" );
+ equal( elOptions.template, "tmp-1line" );
+ equal( elOptions.extenditems, 50 );
+ equal( elOptions.scrollview, true );
+
+ /* Click Load more button */
+ ok ( ( function () {
+ /* Click Button */
+ $( "#load_more_message" ).click();
+
+ $elElements = $( "ul#extendable_list_main li" );
+ console.log( $elElements.length );
+
+ try {
+ equal ( $elElements.length, 101 );
+ } catch ( exception ) {
+ console.log( "click load more button : " + exception );
+ return false;
+ }
+ return true;
+ }() ), "Click Load More button()" );
+
+ ok ( ( function () {
+ var i = 0,
+ newJSON = new Array(),
+ newItem,
+ firstLI,
+ result = true;
+
+ /* make short JSON array */
+ for ( i = 0; i < 200; i++ ) {
+ newJSON.push( window.JSON_DATA[ ( i + 100 ) ] );
+ }
+
+ /* Call recreate */
+ $( "ul#extendable_list_main" ).extendablelist( "recreate", newJSON );
+
+ $elContainer = $( "ul#extendable_list_main" );
+ $elElements = $( "ul#extendable_list_main li" );
+
+ /* Check new List */
+ ok( $elContainer );
+ equal( $elElements.length, 51 ); /* 50 <li> items + one button. */
+
+ newItem = window.JSON_DATA[ 100 ];
+
+ firstLI = $( "ul#extendable_list_main li:first" );
+
+ try {
+ equal( newItem.NAME, $( firstLI ).find( "span.ui-li-text-main" ).text() );
+ } catch ( exception ) {
+ console.log( exception );
+ return false;
+ }
+
+ return true;
+ }() ), "recreate()" );
+
+ /* Destroy method */
+ ok ( ( function () {
+ /* Call destroy */
+ $( "ul#extendable_list_main" ).extendablelist( "destroy" );
+
+ var destoyedelElements = $( "ul#extendable_list_main li" );
+ console.log( destoyedelElements.length );
+
+ try {
+ equal ( destoyedelElements.length, 0 );
+ } catch ( exception ) {
+ console.log( "destroy : " + exception );
+ return false;
+ }
+ return true;
+ }() ), "destroy()" );
+ } );
+ }
+
+ /* Load Dummy Data and Init Extendable List widget*/
+ if ( window.JSON_DATA ) {
+ $( "ul" ).filter( function () {
+ return $( this ).data( "role" ) == "extendablelist";
+ } ).addClass( "elLoadSuccess" );
+
+ // trigger pagecreate
+ $( "#extendablelist-unit-test" ).page();
+
+ $( "ul#extendable_list_main" ).extendablelist( "create" );
+
+ startExtendableListTest();
+ } else {
+ console.log ( "Extendable List Init Fail." );
+ }
+} );
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src = "../../../demos/tizen-gray/widgets/list/virtuallist-db-demo.js"></script>
+ <script src="extendablelist-tests.js"></script>
+ <title>Extendable</title>
+ </head>
+
+ <body>
+ <h1 id="qunit-header">Extendablelist</h1>
+ <h2 id="qunit-banner"></h2>
+ <div id="qunit-testrunner-toolbar"></div>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+
+ <div id="qunit-fixture">
+ <div data-role="page" id="dummy-page">
+ <div data-role="header" data-position="fixed">
+ <h1>Dummy</h1>
+ </div>
+ <div data-role="contents">
+ </div>
+ </div>
+ <div data-role="page" id="extendablelist-unit-test" data-add-back-btn="true">
+ <script id="tmp-1line" type="text/x-jquery-tmpl">
+ <li class="ui-li-1line"><span class="ui-li-text-main">${NAME}</span></li>
+ </script>
+ <script id="tmp_load_more" type="text/x-jquery-tmpl">
+ <li class="ui-li-1line" style="text-align:center; margin:0 auto">
+ <div data-role="button">Load ${NUM_MORE_ITEMS} more items</div>
+ </li>
+ </script>
+ <div data-role="header" data-position="fixed">
+ <h1>extendable list</h1>
+ </div>
+ <div data-role="content">
+ <ul id = "extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-1line" data-dbtable="JSON_DATA">
+ </ul>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Handler
+ *
+ * Wonseop Kim <wonseop.kim@samsung.com>
+ */
+
+(function ($) {
+ module("Handler");
+
+ var unit_handler = function ( widget ) {
+ var elem = ".ui-handler",
+ handler;
+
+ /* Create */
+ widget.scrollview();
+ handler = widget.find( elem );
+ ok( ( handler.length > 0 ), "Create" );
+
+ /* API */
+ widget.scrollview( "enableHandler", false );
+ ok( handler.is( ":hidden" ), "API: enableHandler(false)" );
+ widget.scrollview( "enableHandler", true );
+ ok( handler.is( ":visible" ), "API: enableHandler(true)" );
+ };
+
+ test( "handler", function () {
+ unit_handler( $("#handlerY") );
+ });
+}( jQuery ));
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="handler-tests.js"></script>
+
+ <title>Handler</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Handler</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+ <div data-role="page" id="handler0">
+ <div data-role="header" data-position="fixed">
+ <h1>Handler</h1>
+ </div>
+ <div id="handlerY" data-role="content" data-scroll="y" data-handler="true">
+ <ul data-role="listview">
+ <li data-role="list-divider">A</li>
+ <li><a href="#">Adam Kinkaid</a></li>
+ <li><a href="#">Alex Wickerham</a></li>
+ <li><a href="#">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="#">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="#">Caleb Booth</a></li>
+ <li><a href="#">Christopher Adams</a></li>
+ <li><a href="#">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="#">David Walsh</a></li>
+ <li><a href="#">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="#">Elizabeth Bacon</a></li>
+ <li><a href="#">Emery Parker</a></li>
+ <li><a href="#">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="#">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="#">Graham Smith</a></li>
+ <li><a href="#">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="#">Harvey Walls</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Imageslider
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+ module("Imageslider");
+
+ var unit_imageslider = function ( widget, count ) {
+ var imagesldier,
+ refresh = function ( widget ) {
+ widget.imageslider("refresh");
+ return widget.find(".ui-imageslider-bg");
+ };
+
+ /* Create */
+ widget.imageslider();
+
+ imageslider = widget.find(".ui-imageslider-bg");
+ ok( imageslider, "Create" );
+
+ /* Initialize */
+ equal( imageslider.length, count, "Initialize" );
+
+ /* API: add */
+ widget.imageslider("add", "05.jpg");
+ widget.imageslider("add", "06.jpg");
+ imageslider = refresh( widget );
+ equal( imageslider.length, count + 2, "API: add" );
+
+ /* API: del */
+ widget.imageslider("del");
+ imageslider = refresh( widget );
+ equal( imageslider.length, count + 1, "API: del" );
+ };
+
+ test( "imageslider", function () {
+ unit_imageslider( $("#imageslider"), 4 );
+ });
+}( jQuery ));
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="imageslider-tests.js"></script>
+
+ <title>Image Slider</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Image Slider</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Image Slider</h1>
+ </div>
+ <div data-role="content" data-scroll="none">
+ <div data-role="imageslider" id="imageslider" data-index="2" data-vertical-align="middle">
+ <img src="01.jpg">
+ <img src="02.jpg">
+ <img src="03.jpg">
+ <img src="04.jpg">
+ </div>
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <link rel="stylesheet" href="../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+ <script src="../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <script src="tests.js"></script>
+ <script src="runner.js"></script>
+ <style type="text/css">
+ html, body {
+ width:100%;
+ height:100%;
+ margin:0px;
+ padding:0px;
+ }
+
+ #testFrame {
+ float: left;
+ border: 0px;
+ height: 100%;
+ width: 60%;
+ }
+
+ #results {
+ float: left;
+ width: 30%;
+ }
+ </style>
+</head>
+<body>
+ <div id="results">
+ <h1 id="qunit-header"><a href="#">jQuery Mobile Test Suite</a></h1>
+ <h2 id="qunit-banner"></h2>
+ <ol id="qunit-tests">
+ </ol>
+ </div>
+ <iframe data-src="{{testfile}}" name="testFrame" id="testFrame" scrolling="no">
+ </iframe>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile listviewcontrols tests</title>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js" data-framework-theme="tizen-white"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <script src="listviewcontrols-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile listviewcontrols tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="listviewcontrols-test-validates">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>listviewcontrols test - validates</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div id="listviewcontrols-test-validates-controls">
+ <p>I am bogus</p>
+ </div>
+ <ul data-role="listview" id="listviewcontrols-test-validates-target">
+ <li>Summat</li>
+ <li>Summat else</li>
+ </ul>
+ </div>
+</div>
+
+<div data-nstest-role="page" id="listviewcontrols-test-defaults">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>listviewcontrols test - defaults</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div id="listviewcontrols-test-defaults-controls">
+ <p>I am bogus</p>
+ </div>
+ <ul data-nstest-role="listview" id="listviewcontrols-test-defaults-target">
+ <li>Summat</li>
+ <li>Summat else</li>
+ </ul>
+ </div>
+</div>
+
+<div data-nstest-role="page" id="listviewcontrols-test-attrs">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>listviewcontrols test - attributes</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div id="listviewcontrols-test-attrs-controls-1">
+ <p>I am bogus</p>
+ </div>
+ <ul data-nstest-role="listview"
+ data-nstest-listviewcontrols="#listviewcontrols-test-attrs-controls-1"
+ data-nstest-listviewcontrols-options='{"modesAvailable": ["foo", "bar"], "mode": "bar", "controlPanelShowIn": "foo"}'
+ id="listviewcontrols-test-attrs-target-1">
+ <li>Summat</li>
+ <li>Summat else</li>
+ </ul>
+ </div>
+
+ <div id="listviewcontrols-test-attrs-controls-2"
+ data-nstest-listviewcontrols-show-in="bat">
+ <p>I am bogus</p>
+ </div>
+ <ul data-nstest-role="listview"
+ data-nstest-listviewcontrols="#listviewcontrols-test-attrs-controls-2"
+ data-nstest-listviewcontrols-options='{"modesAvailable": ["fox", "bat"], "mode": "bat"}'
+ id="listviewcontrols-test-attrs-target-2">
+ <li>Summat</li>
+ <li>Summat else</li>
+ </ul>
+</div>
+
+<div data-nstest-role="page" id="listviewcontrols-test-show">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>listviewcontrols test - show</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div id="listviewcontrols-test-show-controls">
+ <p>I am bogus</p>
+ </div>
+
+ <ul data-nstest-role="listview"
+ data-nstest-listviewcontrols="#listviewcontrols-test-show-controls"
+ id="listviewcontrols-test-show-target">
+ <li>
+ <span class="listviewcontrols-test-show-always-visible">A_a1</span>
+ <span class="listviewcontrols-test-show-visible-in-edit"
+ data-nstest-listviewcontrols-show-in="edit">A_e1</span>
+ <span class="listviewcontrols-test-show-visible-in-view"
+ data-nstest-listviewcontrols-show-in="view">A_v1</span>
+ <span class="listviewcontrols-test-show-visible-in-edit"
+ data-nstest-listviewcontrols-show-in="edit">A_e2</span>
+ <span class="listviewcontrols-test-show-visible-in-view"
+ data-nstest-listviewcontrols-show-in="view">A_v2</span>
+ <span class="listviewcontrols-test-show-visible-in-edit"
+ data-nstest-listviewcontrols-show-in="edit">A_e3</span>
+ <span class="listviewcontrols-test-show-visible-in-view"
+ data-nstest-listviewcontrols-show-in="view">A_v3</span>
+ <span class="listviewcontrols-test-show-always-visible">A_a2</span>
+ </li>
+ <li>
+ <span class="listviewcontrols-test-show-always-visible">B_a1</span>
+ <span class="listviewcontrols-test-show-visible-in-edit"
+ data-nstest-listviewcontrols-show-in="edit">B_e1</span>
+ <span class="listviewcontrols-test-show-visible-in-edit"
+ data-nstest-listviewcontrols-show-in="edit">B_e2</span>
+ <span class="listviewcontrols-test-show-visible-in-view"
+ data-nstest-listviewcontrols-show-in="view">B_v1</span>
+ <span class="listviewcontrols-test-show-visible-in-view"
+ data-nstest-listviewcontrols-show-in="view">B_v2</span>
+ </li>
+ </ul>
+ </div>
+</div>
+
+<div data-nstest-role="page" id="listviewcontrols-test-methods">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>listviewcontrols test - methods</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div id="listviewcontrols-test-methods-controls">
+ <p>I am bogus</p>
+ </div>
+ <ul data-nstest-role="listview"
+ data-nstest-filter="true"
+ data-nstest-listviewcontrols="#listviewcontrols-test-methods-controls"
+ id="listviewcontrols-test-methods-target">
+ <li data-nstest-role="list-divider">A</li>
+ <li>Abraham</li>
+ <li>Andy</li>
+ <li data-nstest-role="list-divider">B</li>
+ <li>Barry</li>
+ <li data-nstest-role="list-divider">C</li>
+ <li>Carla</li>
+ <li>Carrie</li>
+ </ul>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * listviewcontrols unit tests
+ */
+(function ($) {
+ $.mobile.defaultTransition = "none";
+
+ module("listviewcontrols");
+
+ asyncTest("constructor validates options when applied programmatically", function () {
+ $.testHelper.pageSequence([
+ function () {
+ var target = $('#listviewcontrols-test-validates-target');
+ var controlsSelector = '#listviewcontrols-test-validates-controls';
+ var controls = $(controlsSelector);
+
+ var check = function (testNumber, options) {
+ target.listviewcontrols(options);
+ var hasClass = target.hasClass('ui-listviewcontrols-listview');
+ target.listviewcontrols('destroy');
+ equal(hasClass, false, 'test ' + testNumber);
+ };
+
+ // no options
+ check(1);
+
+ // controlPanelSelector is falsy
+ check(2, {controlPanelSelector: null});
+ check(3, {controlPanelSelector: undefined});
+
+ // modesAvailable is bad
+ check(4, {controlPanelSelector: controlsSelector, modesAvailable: null});
+ check(5, {controlPanelSelector: controlsSelector, modesAvailable: false});
+ check(6, {controlPanelSelector: controlsSelector, modesAvailable: 0});
+ check(7, {controlPanelSelector: controlsSelector, modesAvailable: ''});
+ check(8, {controlPanelSelector: controlsSelector, modesAvailable: {}});
+ check(9, {controlPanelSelector: controlsSelector, modesAvailable: []});
+ check(10, {controlPanelSelector: controlsSelector, modesAvailable: ['']});
+ check(11, {controlPanelSelector: controlsSelector, modesAvailable: ['string']});
+ check(12, {controlPanelSelector: controlsSelector, modesAvailable: [null, null]});
+ check(13, {controlPanelSelector: controlsSelector, modesAvailable: [0, 0]});
+ check(14, {controlPanelSelector: controlsSelector, modesAvailable: ['', '']});
+ check(15, {controlPanelSelector: controlsSelector, modesAvailable: ['string', {}]});
+ check(16, {controlPanelSelector: controlsSelector, modesAvailable: [{}, 'string']});
+ check(17, {controlPanelSelector: controlsSelector, modesAvailable: [0, 'string']});
+ check(18, {controlPanelSelector: controlsSelector, modesAvailable: ['string', 0]});
+
+ // mode is bad
+ check(19, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: null});
+ check(20, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: false});
+ check(21, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: ''});
+ check(22, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: 'zoink'});
+
+ // controlPanelSelector references invalid element
+ check(23, {controlPanelSelector: '', modesAvailable: ['foo', 'bar'], mode: 'foo'});
+ check(24, {controlPanelSelector: 'noelement', modesAvailable: ['foo', 'bar'], mode: 'foo'});
+
+ // controlPanelShowIn is bad
+ check(25, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: 'foo', controlPanelShowIn: true});
+ check(26, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: 'foo', controlPanelShowIn: 'zoink'});
+
+ // all options valid
+ target.listviewcontrols({
+ controlPanelSelector: controlsSelector,
+ modesAvailable: ['foo', 'bar'],
+ mode: 'foo',
+ controlPanelShowIn: 'foo'
+ });
+ equal(target.hasClass('ui-listviewcontrols-listview'), true);
+ equal(controls.hasClass('ui-listviewcontrols-panel'), true);
+ target.listviewcontrols('destroy');
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest("constructor supplies defaults correctly", function () {
+ $.testHelper.pageSequence([
+ function () {
+ var target = $('#listviewcontrols-test-defaults-target');
+ var controlsSelector = '#listviewcontrols-test-defaults-controls';
+ var controls = $(controlsSelector);
+
+ target.listviewcontrols({controlPanelSelector: controlsSelector});
+
+ deepEqual(target.listviewcontrols('option', 'modesAvailable'),
+ ['edit', 'view'],
+ "Should default to 'edit' and 'view' as modesAvailable");
+
+ equal(target.listviewcontrols('option', 'mode'),
+ 'view',
+ "Should default to 'view' as mode");
+
+ equal(target.listviewcontrols('option', 'controlPanelShowIn'),
+ 'edit',
+ "Should default to showing control panel in 'edit' mode");
+
+ equal(target.hasClass('ui-listviewcontrols-listview'), true);
+ equal(controls.hasClass('ui-listviewcontrols-panel'), true);
+
+ target.listviewcontrols('destroy');
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest("constructor uses jqm attributes correctly", function () {
+
+ $.testHelper.pageSequence([
+ function () {
+ $.testHelper.openPage('#listviewcontrols-test-attrs');
+ },
+
+ function () {
+ var $new_page = $('#listviewcontrols-test-attrs');
+ ok($new_page.hasClass('ui-page-active'));
+
+ // everything set through data-listviewcontrols-options
+ var target = $('#listviewcontrols-test-attrs-target-1');
+ var controlsSelector = '#listviewcontrols-test-attrs-controls-1';
+ var controls = $(controlsSelector);
+
+ deepEqual(target.listviewcontrols('option', 'modesAvailable'),
+ ['foo', 'bar'],
+ "Should set modesAvailable from data-listviewcontrols-options");
+
+ equal(target.listviewcontrols('option', 'mode'),
+ 'bar',
+ "Should set mode from data-listviewcontrols-options");
+
+ equal(target.listviewcontrols('option', 'controlPanelShowIn'),
+ 'foo',
+ "Should set controlPanelShowIn from data-listviewcontrols-options");
+
+ equal(target.hasClass('ui-listviewcontrols-listview'), true);
+ equal(controls.hasClass('ui-listviewcontrols-panel'), true);
+
+ // controlPanelShowIn set on the control panel
+ target = $('#listviewcontrols-test-attrs-target-2');
+ controlsSelector = '#listviewcontrols-test-attrs-controls-2';
+ controls = $(controlsSelector);
+
+ deepEqual(target.listviewcontrols('option', 'modesAvailable'),
+ ['fox', 'bat'],
+ "Should set modesAvailable from data-listviewcontrols-options");
+
+ equal(target.listviewcontrols('option', 'mode'),
+ 'bat',
+ "Should set mode from data-listviewcontrols-options");
+
+ equal(target.listviewcontrols('option', 'controlPanelShowIn'),
+ 'bat',
+ "Should set controlPanelShowIn from data-listviewcontrols-show-in on controls");
+
+ equal(target.hasClass('ui-listviewcontrols-listview'), true);
+ equal(controls.hasClass('ui-listviewcontrols-panel'), true);
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest("control panel and list item elements are shown in appropriate mode", function () {
+ $.testHelper.pageSequence([
+ function () {
+ $.testHelper.openPage('#listviewcontrols-test-show');
+ },
+
+ function () {
+ var $new_page = $('#listviewcontrols-test-show');
+ ok($new_page.hasClass('ui-page-active'));
+
+ var target = $('#listviewcontrols-test-show-target');
+ var controlsSelector = '#listviewcontrols-test-show-controls';
+ var controls = $(controlsSelector);
+
+ var alwaysVisibleA = 'li:first span.listviewcontrols-test-show-always-visible';
+ var alwaysVisibleB = 'li:nth-child(2) span.listviewcontrols-test-show-always-visible';
+ var shownInEditA = 'li:first span.listviewcontrols-test-show-visible-in-edit';
+ var shownInEditB = 'li:nth-child(2) span.listviewcontrols-test-show-visible-in-edit';
+ var shownInViewA = 'li:first span.listviewcontrols-test-show-visible-in-view';
+ var shownInViewB = 'li:nth-child(2) span.listviewcontrols-test-show-visible-in-view';
+
+ var allVisible = function (selector) {
+ var all = target.find(selector);
+ var visible = all.filter(':visible');
+ equal(visible.length, all.length);
+ ok(visible.length > 0);
+ ok(all.length > 0);
+ };
+
+ var allHidden = function (selector) {
+ var all = target.find(selector);
+ var visible = target.find(selector).filter(':visible');
+ equal(visible.length, 0);
+ ok(all.length > 0);
+ };
+
+ // --- initial mode should be view
+ equal(target.listviewcontrols('option', 'mode'),
+ 'view',
+ "Initial mode should be view");
+
+ // controls should be hidden
+ ok(!controls.is(':visible'));
+
+ // target should be always visible
+ ok(target.is(':visible'));
+
+ // show-in="edit" elements should be hidden
+ allHidden(shownInEditA);
+ allHidden(shownInEditB);
+
+ // show-in="view" elements should be visible
+ allVisible(shownInViewA);
+ allVisible(shownInViewB);
+
+ // other elements should always be visible
+ allVisible(alwaysVisibleA);
+ allVisible(alwaysVisibleB);
+
+ // --- switch mode to edit
+ target.listviewcontrols('option', 'mode', 'edit');
+
+ // controls should be visible
+ ok(controls.is(':visible'));
+
+ // target should be always visible
+ ok(target.is(':visible'));
+
+ // show-in="edit" elements should be visible
+ allVisible(shownInEditA);
+ allVisible(shownInEditB);
+
+ // show-in="view" elements should be hidden
+ allHidden(shownInViewA);
+ allHidden(shownInViewB);
+
+ // other elements should always be visible
+ allVisible(alwaysVisibleA);
+ allVisible(alwaysVisibleB);
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest("visibleListItems() returns correct counts", function () {
+ $.testHelper.pageSequence([
+ function () {
+ $.testHelper.openPage('#listviewcontrols-test-methods');
+ },
+
+ function () {
+ var $new_page = $('#listviewcontrols-test-methods');
+ ok($new_page.hasClass('ui-page-active'));
+
+ var target = $('#listviewcontrols-test-methods-target');
+
+ equal(target.listviewcontrols('visibleListItems').length,
+ 5,
+ "Should be 5 visible list items (excluding dividers)");
+
+ // filter the list and count again
+ $new_page.find('input').val('ca');
+ $new_page.find('input').trigger('change');
+
+ equal(target.listviewcontrols('visibleListItems').length,
+ 2,
+ "Should be 2 visible list items (excluding dividers) after filtering");
+
+ start();
+ }
+ ]);
+ });
+
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>loader test</title>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+
+ <script src="loader-tests.js"></script>
+</head>
+<body>
+ <!-- QUnit template -->
+ <h1 id="qunit-header">Test : loader</h1>
+ <h2 id="qunit-banner"></h2>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+
+ <div id="qunit-fixture">
+
+ </div>
+</body>
+</html>
--- /dev/null
+/**
+ * Loader test
+ *
+ * Youmin Ha <youmin.ha@samsung.com>
+ *
+ */
+( function ( $ ) {
+ $.mobile.defaultTransition = "none";
+
+ module( "Loader" );
+
+ var tizen = $.tizen.__tizen__;
+
+ test( "util.getScaleFactor()", function ( ) {
+ var util = tizen.util,
+ expected = 1,
+ defaultWidth = 720;
+
+ if( window.scale ) {
+ expected = window.scale;
+ } else {
+ expected = screen.width / defaultWidth;
+ if( expected > 1 ) { // Don't allow expansion
+ expected = 1;
+ }
+ }
+
+ // Test value
+ equal( util.getScaleFactor( ), expected, "Scale factor value should calculated properly." );
+ } );
+
+ test( "util.isMobileBrowser()", function ( ) {
+ var appVersion = window.navigator.appVersion,
+ mobile = appVersion.match( "Mobile" ),
+ isMobile = mobile ? true : false;
+
+ equal( tizen.util.isMobileBrowser(), isMobile, "Mobile browser must be detected." );
+
+ /* NOTE:
+ * Is this test OK? How are both cases(mobile/non-mobile) tested?
+ */
+ } );
+
+ test( "css.addElementToHead()", function ( ) {
+ var css = tizen.css,
+ scarecrow = $( '<meta name="scarecrow" />' ),
+ selected;
+
+ css.addElementToHead( scarecrow );
+ selected = $('head').children('meta[name=scarecrow]');
+ ok( selected.length > 0, 'Object must be added to header.' );
+ } );
+} ) ( jQuery );
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="multibuttonentry-tests.js"></script>
+
+ <title>Multibuttonentry</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Multibuttonentry</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+ <div data-role="page" id="notifiaction0">
+ <div data-role="notification" id="smallpopup" data-type="popup" data-text1="text1" data-param="param"></div>
+ <div data-role="header" data-position="fixed">
+ <h1>Multibuttonentry</h1>
+ </div>
+ <div data-role="content">
+ </div>
+ </div>
+
+ <div data-role="page" id="notification1">
+ <div data-role="multibuttonentry" id="multibuttonetnry-test" ></div>
+ <div data-role="header" data-position="fixed">
+ <h1>Multibuttonentry</h1>
+ </div>
+ <div data-role="content">
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: multibuttonentry
+ *
+ * Kangsik Kim <kangsik81.kim@samsung.com>
+ */
+
+(function ($) {
+ module("Multibuttonentry");
+
+ var unit_multibuttonentry = function ( widget, type ) {
+ var multibuttonentry,
+ inputText,
+ outputText,
+ status;
+
+ /* Create */
+ multibuttonentry = widget.multibuttonentry();
+ ok(multibuttonentry.length > 0, "Create");
+
+ /* length */
+ equal( multibuttonentry.multibuttonentry("length"), 0 ,"API : length ");
+
+ /* Add */
+ multibuttonentry.multibuttonentry("add", "string1");
+ equal(multibuttonentry.multibuttonentry("length"), 1, "API: add('string1') ");
+ multibuttonentry.multibuttonentry("add", "string2");
+ equal(multibuttonentry.multibuttonentry("length"), 2, "API: add('string2') ");
+ multibuttonentry.multibuttonentry("add", "string3");
+ equal(multibuttonentry.multibuttonentry("length"), 3, "API: add('string3') ");
+
+ /* Select */
+ multibuttonentry.multibuttonentry("select", 1);
+ outputText = multibuttonentry.multibuttonentry("select");
+ equal( outputText, "..." , "API : select ( 1 )");
+
+ /* Focus Out */
+ multibuttonentry.multibuttonentry("focusOut");
+ status = multibuttonentry.find(".ui-multibuttonentry-desclabel").length === 1 ? true : false;
+ equal( status, true , "API : focusOut ");
+
+ /* Focus In */
+ multibuttonentry.multibuttonentry("focusIn");
+ status = multibuttonentry.find(".ui-multibuttonentry-desclabel").length === 1 ? true : false;
+ equal(status, false, "API : focusIn ");
+
+ /* Remove */
+ multibuttonentry.multibuttonentry("remove", 0);
+ equal(multibuttonentry.multibuttonentry("length"), 2 , "API : remove(0)");
+
+ /* Reamove all */
+ multibuttonentry.multibuttonentry("remove");
+ equal( multibuttonentry.multibuttonentry("length"), 0 ,"API : remove");
+
+ /* input */
+ inputText = "multibuttonentry";
+ multibuttonentry.multibuttonentry( "inputText", inputText );
+ outputText = multibuttonentry.multibuttonentry( "inputText" );
+ equal(outputText, inputText, "API : input('" + outputText + "')");
+ };
+
+ test( "Multibuttonentry", function () {
+ unit_multibuttonentry( $("#multibuttonetnry-test"), "multibuttonetnry" );
+ });
+
+}( jQuery ));
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="multimediaview-tests.js"></script>
+
+ <title>MultiMediaView</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">MultiMediaView</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+ <div data-role="page" id="multimediaview0">
+ <div data-role="header" data-position="fixed">
+ <h1>MultiMediaView (video)</h1>
+ </div>
+ <div data-role="content">
+ <video data-controls="true" style="width:100%;" id="video">
+ <source src="http://www.w3schools.com/html5/mov_bbb.mp4" type="video/mp4" />
+ <source src="http://www.w3schools.com/html5/mov_bbb.ogg" type="video/ogg" />
+ <source src="http://www.w3schools.com/html5/mov_bbb.webm" type="video/webm" />
+ <p>Your browser does not support the video tag.</p>
+ </video>
+ </div>
+ </div>
+
+ <div data-role="page" id="multimediaview1">
+ <div data-role="header" data-position="fixed">
+ <h1>MultiMediaView (audio)</h1>
+ </div>
+ <div data-role="content">
+ <audio data-controls="true" style="width:100%;" id="audio">
+ <source src="http://www.w3schools.com/html5/mov_bbb.mp4" type="audio/mp4" />
+ <source src="http://www.w3schools.com/html5/mov_bbb.ogg" type="audio/ogg" />
+ <p>Your browser does not support the audio tag.</p>
+ </audio>
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: MultiMediaView
+ *
+ * Wonseop Kim <wonseop.kim@samsung.com>
+ */
+
+(function ($) {
+ module("MultiMediaView");
+
+ var unit_multimediaview = function ( widget, type ) {
+ var control,
+ fullscreenButton,
+ width,
+ height,
+ played,
+ timeupdated,
+ ended,
+ param;
+
+ /* Create */
+ widget.multimediaview();
+ ok( widget.hasClass( "ui-multimediaview" ) , "Create" );
+
+ if ( type === "video" ) {
+ /* width */
+ width = 100;
+ widget.multimediaview( "width", width );
+ equal( width, widget.width(), "API: width" );
+
+ /* height */
+ height = 200;
+ widget.multimediaview( "height", height );
+ equal( height, widget.height(), "API: height" );
+
+ /* size */
+ width = 256;
+ height = 512;
+ widget.multimediaview( "size", width, height );
+ equal( "width : " + widget.width() + ", height : " + widget.height(),
+ "width : " + width + ", height : " + height, "API: size" );
+
+ /* fullscreen */
+ fullscreenButton = widget.parent().find( ".ui-fullscreenbutton" );
+
+ widget.multimediaview( "fullscreen", true );
+ ok( fullscreenButton.hasClass( "ui-fullscreen-off" ), "API: fullscreen (on)" );
+
+ widget.multimediaview("fullscreen", false );
+ ok( fullscreenButton.hasClass( "ui-fullscreen-on" ), "API: fullscreen (off)" );
+ }
+ };
+
+ test( "video", function () {
+ unit_multimediaview( $("#video"), "video" );
+ });
+
+ test( "audio", function () {
+ unit_multimediaview( $("#audio"), "audio" );
+ });
+
+}( jQuery ));
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <script src="navigationbar-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Navigationbar Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" id="normalnavigation1">
+ <h1>Navigationbar Test - markup</h1>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+ <div data-nstest-role="footer">
+ </div>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" id="normalnavigation2">
+ <h1>Navigationbar Test - markup</h1>
+ <a>Button</a>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+ <div data-nstest-role="footer">
+ </div>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" id="normalnavigation3">
+ <a>Button</a>
+ <h1>Navigationbar Test - markup</h1>
+ <a>Button</a>
+ </div>
+<div data-nstest-role="content">
+ </div>
+ <div data-nstest-role="footer">
+ </div>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" id="normalnavigation4">
+ <a>Button</a>
+ <h1>Navigationbar Test - markup</h1>
+ <a>Button2</a>
+ <a>Button3</a>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+ <div data-nstest-role="footer">
+ </div>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-position="fixed" id="extendedstyle2btn">
+ <h1>Extended Title 2 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+ <label for="segment1">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+ <label for="segment2">Call</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-position="fixed" id="extendedstyle3btn">
+ <h1>Extended Title 3 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+ <label for="segment1">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+ <label for="segment2">Call</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
+ <label for="segment3">Save</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-position="fixed" id="extendedstyle4btn">
+ <h1>Extended Title 4 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+ <label for="segment1">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+ <label for="segment2">Call</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
+ <label for="segment3">Save</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment4" value="off" />
+ <label for="segment4">Back</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * navigationbar unit tests
+*/
+
+(function ($) {
+ module( "Navigationbar" );
+
+ var unit_navigationbar = function ( widget, anchorCount, extendedValue ) {
+ /* Create */
+ var created_navigationbar = $( widget );
+
+ ok( created_navigationbar, "Create" );
+
+ /* Check Parameters */
+ equal( created_navigationbar.jqmData( "nstest-role" ), "header", "Basic test" );
+
+
+ if ( extendedValue ) {
+ equal( created_navigationbar.find( "input" ).length, anchorCount, "Groupcontrol button test" );
+ } else {
+ equal( created_navigationbar.children( "a" ).length, anchorCount, "button test" );
+ }
+
+ /* Check APIs */
+ };
+
+ test( "navigationbar no button test", function () {
+ unit_navigationbar( $("#normalnavigation1"), 0 );
+ });
+
+ test( "navigationbar one button test", function () {
+ unit_navigationbar( $("#normalnavigation2"), 1 );
+ });
+
+ test( "navigationbar two button test", function () {
+ unit_navigationbar( $("#normalnavigation3"), 2 );
+ });
+
+ test( "navigationbar three button test", function () {
+ unit_navigationbar( $("#normalnavigation4"), 3 );
+ });
+
+ test( "navigationbar extended two button test", function () {
+ unit_navigationbar( $("#extendedstyle2btn"), 2, true );
+ });
+
+ test( "navigationbar extended three button test", function () {
+ unit_navigationbar( $("#extendedstyle3btn"), 3, true );
+ });
+
+ test( "navigationbar extended four button test", function () {
+ unit_navigationbar( $("#extendedstyle4btn"), 4, true );
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-gray"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="nocontents-tests.js"></script>
+
+ <title>No Contents</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">No Contents</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+ <div data-role="page" id="nocontents0">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents_text" data-type="text">
+ <p>text1</p>
+ <p>text2</p>
+ </div>
+ </div>
+ </div>
+
+ <div data-role="page" id="nocontents1">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents_pic" data-type="picture">
+ <p>text1</p>
+ <p>text2</p>
+ </div>
+ </div>
+ </div>
+
+ <div data-role="page" id="nocontents2">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents_mul" data-type="multimedia">
+ <p>text1</p>
+ <p>text2</p>
+ </div>
+ </div>
+ </div>
+
+ <div data-role="page" id="nocontents2">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents_un" data-type="unnamed">
+ <p>text1</p>
+ <p>text2</p>
+ </div>
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Nocontents
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+ module("Nocontents");
+
+ var unit_nocontents = function ( widget, type ) {
+ var background,
+ text,
+ i;
+
+ /* Create */
+ widget.nocontents();
+
+ ok( widget.hasClass("ui-nocontents"), "Create" );
+
+ /* Check Background */
+ background = widget.children( ".ui-nocontents-icon-" + type );
+ ok( background, "Background" );
+
+ /* Check Texts */
+ text = widget.children("p");
+
+ for ( i = 0; i < text.length; i++ ) {
+ ok( $( text[i] ).hasClass("ui-nocontents-text"), "Text" + i );
+ }
+ };
+
+ test( "text type", function () {
+ unit_nocontents( $("#nocontents_text"), "text" );
+ });
+
+ test( "picture type", function () {
+ unit_nocontents( $("#nocontents_pic"), "picture" );
+ });
+
+ test( "multimedia type", function () {
+ unit_nocontents( $("#nocontents_mul"), "multimedia" );
+ });
+
+ test( "unnamed type", function () {
+ unit_nocontents( $("#nocontents_un"), "unnamed" );
+ });
+}( jQuery ));
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="notification-tests.js"></script>
+
+ <title>Notification</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Notification</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+ <div data-role="page" id="notifiaction0">
+ <div data-role="notification" id="smallpopup" data-type="popup">
+ <p>text1</p>
+ </div>
+ <div data-role="header" data-position="fixed">
+ <h1>Notification</h1>
+ </div>
+ <div data-role="content">
+ </div>
+ </div>
+
+ <div data-role="page" id="notification1">
+ <div data-role="notification" id="tickernoti" data-type="ticker">
+ <p>text1</p>
+ <p>text2</p>
+ </div>
+ <div data-role="header" data-position="fixed">
+ <h1>Notification</h1>
+ </div>
+ <div data-role="content">
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Notification
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+ module("Notification");
+
+ var unit_notification = function ( widget, type ) {
+ var notification,
+ elem = ".ui-" + type,
+ text;
+
+ /* Create */
+ widget.notification();
+
+ notification = widget.children( elem );
+ ok( notification, "Create" );
+
+ /* Show */
+ widget.notification("show");
+
+ notification = widget.children( elem );
+ ok( notification.hasClass("show"), "API: show" );
+
+ /* Hide */
+ widget.notification("hide");
+
+ notification = widget.children( elem );
+ ok( notification.hasClass("hide"), "API: hide" );
+
+ /* hide when click */
+ widget.notification("show");
+ notification = widget.children( elem );
+ notification.trigger("vmouseup");
+
+ notification = widget.children( elem );
+ ok( notification.hasClass("hide"), "Hide when click the notification" );
+
+ text = notification.children("p");
+ console.log(text);
+
+ if ( type === "smallpopup" ) {
+ ok( $( text[0] ).hasClass( "ui-smallpopup-text-bg" ), "Text" );
+ } else {
+ ok( $( text[0] ).hasClass( "ui-ticker-text1-bg" ), "Top Text" );
+ ok( $( text[1] ).hasClass( "ui-ticker-text2-bg" ), "Bottom Text" );
+ }
+ };
+
+ test( "smallpopup", function () {
+ unit_notification( $("#smallpopup"), "smallpopup" );
+ });
+
+ test( "tickernoti", function () {
+ unit_notification( $("#tickernoti"), "ticker" );
+ });
+}( jQuery ));
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <script src="optionheader-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Option Header Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="optionheader1line2btn" data-add-back-btn="true">
+ <div data-nstest-role="header" data-nstest-position="fixed">
+ <a id="123">TestBtn</a>
+ <h1>Option header - 2 buttons</h1>
+ <a id="opt_text" data-icon="optiontray"></a>
+ <a id="1234">TestBtn</a>
+
+ <div id="myoptionheader1" data-nstest-role="optionheader" data-for="opt_text">
+ <div class="ui-grid-a ">
+ <div class="ui-block-a"><a data-role="button">Save</a></div>
+ <div class="ui-block-b"><a data-role="button">Next</a></div>
+ </div>
+ </div>
+ </div>
+ <div data-nstest-role="content">
+ <p>Some content would be here</p>
+ </div>
+</div>
+
+<div data-nstest-role="page" id="optionheader1line3btn" data-add-back-btn="true">
+ <div data-nstest-role="header" data-nstest-position="fixed">
+ <a id="123">TestBtn</a>
+ <h1>Option header - 2 buttons</h1>
+ <a id="1234">TestBtn</a>
+
+ <div id="myoptionheader2" data-nstest-role="optionheader" data-for="opt_text">
+ <div class="ui-grid-b">
+ <div class="ui-block-a"><a data-role="button">Previous</a></div>
+ <div class="ui-block-b"><a data-role="button">Save</a></div>
+ <div class="ui-block-c"><a data-role="button">Next</a></div>
+ </div>
+ </div>
+ </div>
+ <div data-nstest-role="content">
+ <p>Some content would be here</p>
+ </div>
+</div>
+
+<div data-nstest-role="page" id="optionheader1line4btn" data-add-back-btn="true">
+ <div data-nstest-role="header" data-nstest-position="fixed">
+ <a id="123">TestBtn</a>
+ <h1>Option header - 2 buttons</h1>
+ <a id="opt_text" data-icon="optiontray"></a>
+ <a id="1234">TestBtn</a>
+
+ <div id="myoptionheader3" data-nstest-role="optionheader" data-for="opt_text">
+ <div class="ui-grid-c">
+ <div class="ui-block-a"><a data-role="button">Previous</a></div>
+ <div class="ui-block-b"><a data-role="button">Save</a></div>
+ <div class="ui-block-c"><a data-role="button">Undo</a></div>
+ <div class="ui-block-d"><a data-role="button">Next</a></div>
+ </div>
+ </div>
+ </div>
+ <div data-nstest-role="content">
+ <p>Some content would be here</p>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * optionheader unit tests
+ */
+
+(function ($) {
+ module( "Option header" );
+
+ var unit_optionheader = function ( widget, buttonCount) {
+ var created_optionheader = widget.optionheader(),
+ obj_optionheader = created_optionheader.data( "optionheader" );
+
+ ok( created_optionheader, "Create" );
+
+ /* Check Option */
+ equal( obj_optionheader.options.showIndicator, true, "Option test -> Indicator" );
+ equal( obj_optionheader.options.theme, "s", "Option test -> theme" );
+ equal( obj_optionheader.options.startCollapsed, false, "Option test -> startCollapsed" );
+ equal( obj_optionheader.options.expandable, true, "Option test -> expandable" );
+ equal( obj_optionheader.options.duration, 0.25, "Option test -> duration" );
+ equal( obj_optionheader.options.collapseOnInit, true, "Option test -> collapseOnInit" );
+
+ /* parameter check*/
+ equal( created_optionheader.find(":jqmData(role='button')").length, buttonCount, "Parameter test -> button length" );
+
+ if ( created_optionheader.is(":jqmData(for)") ) {
+ created_optionheader.siblings().each(function ( index ) {
+ if ( $(this).attr("id") == created_optionheader.jqmData("for") ) {
+ equal( $(this).jqmData("icon"), "optiontray", "Parameter test -> icon test" );
+ }
+ });
+ }
+ /* Check APIs */
+ asyncTest( "option header expand test", function () {
+ created_optionheader.optionheader( "expand" );
+ setTimeout( function () {
+ equal( created_optionheader.height() > 10 , true, "API test -> expand()" );
+ start();
+ created_optionheader.optionheader( "collapse" );
+ asyncTest( "option header collapse test", function () {
+ setTimeout( function () {
+ equal( created_optionheader.height() > 10 , false, "API test -> collapse()" );
+ start();
+ }, 1000 );
+ });
+ }, 1000 );
+ });
+
+ obj_optionheader.options = false;
+ created_optionheader.optionheader( "toggle", true );
+ if ( obj_optionheader.options == false ) {
+ equal( obj_optionheader.isCollapsed , false, "API test -> toggle() collapse" );
+ }
+
+ obj_optionheader.options = true;
+ created_optionheader.optionheader( "toggle", true );
+ if ( obj_optionheader.options == true ) {
+ equal( obj_optionheader.isCollapsed , true, "API test -> toggle() expand" );
+ }
+ /* Check Markup */
+ };
+
+ test( "option header 2btn test", function () {
+ unit_optionheader( $("#myoptionheader1"), 2 );
+ });
+
+ test( "option header 3btn test", function () {
+ unit_optionheader( $("#myoptionheader2"), 3 );
+ });
+
+ test( "option header 4btn test", function () {
+ unit_optionheader( $("#myoptionheader3"), 4 );
+ });
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Pagecontrol test</title>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+
+ <script src="pagecontrol-tests.js"></script>
+</head>
+<body>
+ <!-- QUnit template -->
+ <h1 id="qunit-header">Test : Pagecontrol</h1>
+ <h2 id="qunit-banner"></h2>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+
+ <div id="qunit-fixture">
+
+ </div>
+</body>
+</html>
--- /dev/null
+/**
+ * pagecontrol test
+ */
+( function ( $ ) {
+ $.mobile.defaultTransition = "none";
+
+ module( "PageControl" );
+
+ test( "Basic pagecontrol test", function ( ) {
+ var pc = $( '<div data-role="pagecontrol"></div>' )
+ .attr( {
+ 'data-max': 10,
+ 'data-value': 2
+ } ),
+ nb;
+
+ pc.pagecontrol( );
+
+ ok( pc, "pagecontrol object creation" );
+ nb = pc.children( 'div.page_n' )[1]; // 2nd button
+ console.dir( nb );
+ ok( $(nb).hasClass( 'page_n_2' ), "first button should be activated" );
+ equal( $( pc ).pagecontrol( "value" ), 2, "value() method must return 2" );
+
+ nb = pc.children( 'div.page_n' )[9];
+ ok( nb, "last number button should exist" );
+ pc.one( "change", function( ev, val ) {
+ equal( val, 10, "pagecontrol element's value must be set when click event comes." );
+ ok( $( nb ).hasClass( 'page_n_10' ), "after click, clicked button should be changed to number type" );
+ equal( $( pc ).pagecontrol( "value" ), 10, "value() method must return 10" );
+
+ $( pc ).pagecontrol( "value", 5 );
+ equal( $( pc ).pagecontrol( "value" ), 5, "value() method must return 5 after running .value(5)" );
+
+ } );
+ $(nb).trigger( "click" );
+ } );
+
+} ) ( jQuery );
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="popup-tests.js"></script>
+
+ <title>Popup Window</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Popup Window</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+ <div data-role="page" id="popupwindow">
+ <div data-role="header" data-position="fixed">
+ <h1>Popup Window</h1>
+ </div>
+ <div data-role="content">
+ <div id="center_info" data-role="popupwindow" data-style="center_info">
+ <p data-role="text">text</p>
+ </div>
+
+ <div id="center_title" data-role="popupwindow" data-style="center_title">
+ <p data-role="title">title</p>
+ <p data-role="text">text</p>
+ </div>
+
+ <div id="center_basic_1btn" data-role="popupwindow" data-style="center_basic_1btn">
+ <p data-role="text">text</p>
+ <div data-role="button-bg">
+ <input type="button" value="button" />
+ </div>
+ </div>
+
+ <div id="center_title_1btn" data-role="popupwindow" data-style="center_title_1btn">
+ <p data-role="title">title</p>
+ <p data-role="text">text</p>
+ <div data-role="button-bg">
+ <input type="button" value="button" />
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Popup window
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+ module("Popup Window");
+
+ var unit_popup = function ( widget, type ) {
+ var popupwindow = function ( widget ) {
+ return widget.parent(".ui-popupwindow");
+ },
+ check_text = function ( widget, selector, type ) {
+ if ( !widget.find( selector ).length ) {
+ return;
+ }
+ equal( widget.find( selector ).text(), type, type );
+ };
+
+ /* Create */
+ widget.popupwindow();
+ ok( popupwindow( widget ), "Create" );
+
+ /* Open */
+ widget.popupwindow("open");
+ ok( parseInt( popupwindow( widget ).css("top") ) > 0, "API: open" );
+
+ /* Close */
+ widget.popupwindow("close");
+ ok( popupwindow( widget ).hasClass("ui-selectmenu-hidden") ||
+ popupwindow( widget ).hasClass("reverse out"),
+ "API: close" );
+
+ /* Close the popup by click the screen */
+ widget.popupwindow("open");
+ $(".ui-selectmenu-screen").trigger("vclick");
+ ok( popupwindow( widget ).hasClass("ui-selectmenu-hidden") ||
+ popupwindow( widget ).hasClass("reverse out"),
+ "Close the popup by click the screen" );
+
+ /* Check Texts */
+ check_text( widget, ":jqmData(role='text')", "text" );
+ check_text( widget, ":jqmData(role='title')", "title" );
+ check_text( widget, ".ui-btn", "button" );
+ };
+
+ test( "Center Info", function () {
+ unit_popup( $("#center_info"), "center_info" );
+ });
+
+ test( "Center Title", function () {
+ unit_popup( $("#center_title"), "center_title" );
+ });
+
+ test( "Center Basic 1 Button", function () {
+ unit_popup( $("#center_basic_1btn"), "center_basic_1btn" );
+ });
+
+ test( "Center Title 1 Button", function () {
+ unit_popup( $("#center_title_1btn"), "center_title_1btn" );
+ });
+
+}( jQuery ));
--- /dev/null
+$(document).ready( function () {
+
+ module( "CtxPopup" );
+ asyncTest( "Auto-initialization", function () {
+ $.testHelper.pageSequence( [
+ function () {
+ var plain = $("#pop_plain"),
+ plainBtn = $("#btn_plain"),
+ horizontal = $("#pop_horizontal"),
+ horizontalBtn = $("#btn_horizontal"),
+ buttons = $("#pop_buttons"),
+ buttonsBtn = $("#btn_buttons"),
+ notCtxpopup = $("#pop_not"),
+ notCtxpopupBtn = $("#btn_not");
+
+ ok( plain.data( "ctxpopup" ), "should Normal type ctxpopup created" );
+ ok( horizontal.data( "ctxpopup" ), "should Horizontal type ctxpopup created" );
+ ok( buttons.data( "ctxpopup" ), "should Button type ctxpopup created" );
+ ok( !notCtxpopup.data( "ctxpopup" ), "should wihthout arrow ctxpopup not created" );
+ },
+
+ function () {
+ expect( 4 );
+ start();
+ }
+ ]);
+ });
+
+ // ctxpopup shares code with popupwindow so only tests ctxpopup specific codes
+ asyncTest( "Open and Placements", function () {
+ $.testHelper.pageSequence( [
+ function () {
+ var plain = $("#pop_plain").ctxpopup(),
+ horizontal = $("#pop_horizontal").ctxpopup(),
+ buttons = $("#pop_buttons").ctxpopup();
+
+ function placementsTest( popup ) {
+ var width = $(window).width(),
+ height = $(window).height(),
+ x = 0,
+ y = 0,
+ parents = popup.parents(".ui-popupwindow"),
+ popPos,
+ popDim,
+ segment = 5,
+ closed = 0,
+ open = 0;
+
+ popup.bind( "popupafterclose", function () {
+ // tests event trigger
+ closed++;
+ if ( closed == open ) {
+ equal( closed, open, "should 'popupafterclose' triggered." );
+ start();
+ }
+ });
+
+ while ( y <= height ) {
+ while ( x <= width ) {
+ popup.popupwindow( "open", x, y );
+ open++;
+ popPos = parents.position();
+ popDim = {
+ width: parents.width(),
+ height: parents.height()
+ };
+
+ if ( popPos.left < 0 || popPos.top < 0 || popPos.left > (width - popDim.width) || popPos.top > (height - popDim.height) ) {
+ throw "Pop up occured at wrong position: (" + parseInt(popPos.left, 10) + "," + parseInt(popPos.top, 10) + "," + popDim.width + "," + popDim.height + ")";
+ }
+
+ popup.popupwindow( "close" );
+ x += width / segment;
+ }
+ y += height / segment;
+ x = 0;
+ }
+ setTimeout( function() {
+ if ( closed != open )
+ throw " Error, popupafterclose event was not triggering ";
+ }, 1000 * 10 );
+ stop();
+ return true;
+ }
+
+ var testee = [
+ { name: "Plain", popup: plain },
+ { name: "Horizontal", popup: horizontal },
+ { name: "Buttons", popup: buttons }
+ ];
+
+ for ( var i = 0; i < testee.length; i++ ) {
+ ok( placementsTest( testee[i].popup ), "should " + testee[i].name + " pop up within window area" );
+ }
+ },
+
+ function () {
+ expect( 6 );
+ start();
+ }
+ ]);
+ });
+});
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="ctxpopup-tests.js"></script>
+
+ <title>Contextual Popup</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Contextual Popup</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+ <div data-role="page" id="page-1">
+ <div data-role="header" data-position="fixed">
+ <h1>Contextual Popup</h1>
+ </div>
+ <div data-role="content">
+ <a href="#pop_plain" id="btn_plain" data-role="button" data-inline="true" data-rel="popupwindow">Pop_1</a>
+ <div id="pop_plain" data-role="popupwindow" data-show-arrow="true">
+ <ul data-role="listview">
+ <li class="ui-li-1line-bigicon">
+ <span class="ui-li-text-main">Dummy 1</span>
+ </li>
+ <li class="ui-li-1line-bigicon">
+ <span class="ui-li-text-main">Dummy 2</span>
+ </li>
+ </ul>
+ </div>
+ <a href="#pop_horizontal" id="btn_horizontal" data-role="button" data-inline="true" data-rel="popupwindow">Pop 2</a>
+ <div id="pop_horizontal" class="horizontal" data-role="popupwindow" data-show-arrow="true">
+ <ul>
+ <li class="icon">
+ <a href="#" data-role="button" data-icon="call"></a>
+ </li>
+ <li class="icon">
+ <a href="#" data-role="button" data-icon="favorite"></a>
+ </li>
+ <li class="text">
+ <a href="#">Function</a>
+ </li>
+ </ul>
+ </div>
+ <a href="#pop_buttons" id="btn_buttons" data-role="button" data-inline="true" data-rel="popupwindow">Pop 3</a>
+ <div id="pop_buttons" class="button" data-role="popupwindow" data-show-arrow="true">
+ <table>
+ <tr>
+ <td>
+ <a href="#" data-role="button">A</a>
+ </td>
+ <td>
+ <a href="#" data-role="button">B</a>
+ </td>
+ <td>
+ <a href="#" data-role="button">C</a>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <a href="#" data-role="button">D</a>
+ </td>
+ <td>
+ <a href="#" data-role="button">E</a>
+ </td>
+ <td>
+ <a href="#" data-role="button">F</a>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <a href="#pop_not" id="btn_not" data-role="button" data-inline="true" data-rel="popupwindow">Pop 4</a>
+ <div id="pop_not" data-role="popupwindow">
+ <div>
+ <span>Dummy</span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="progressbar-tests.js"></script>
+
+ <title>Progressbar</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Progressbar</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+ <div data-role="page" id="progressbar_demo">
+ <div data-role="header" data-position="fixed">
+ <h1>Progressbar</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><div data-role="progressbar" id="progressbar"></div></li>
+ <li><div data-role="progressing" data-style="pending" id="pending"></div></li>
+ <li><div data-role="progressing" data-style="circle" id="progressing"></div></li>
+ </ul>
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Progressbar
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+ module("Progressbar");
+
+ var unit_progressbar = function ( widget ) {
+ var progress,
+ i,
+ value,
+ get_width = function ( widget ) {
+ return widget.progressbar( "option", "value" );
+ };
+
+ widget.progressbar();
+
+ /* Create */
+ equal( widget.hasClass("ui-progressbar"), true, "Create" );
+
+ /* Value */
+ for (i = 0; i < 5; i++) {
+ value = Math.floor( Math.random() * 100 );
+ widget.progressbar( "value", value );
+ equal( get_width( widget ), value, "API: value" );
+ }
+ };
+
+ var unit_progress = function ( widget, type ) {
+ var progress,
+ elem = ".ui-progress-" + type,
+ _class = "ui-progress-" + type + "-running";
+
+ widget.progress();
+
+ /* Create */
+ progress = widget.find( elem );
+ ok( progress, "Create" );
+
+ /* Option */
+ equal( widget.progress( "option", "style" ), type, "Option: style" );
+
+ /* Running */
+ widget.progress( "running", true );
+ progress = widget.find( elem );
+ equal( progress.hasClass( _class ), true, "API: running" );
+
+ /* Stop */
+ widget.progress( "running", false );
+ progress = widget.find( elem );
+ equal( progress.hasClass( _class ), false, "API: stop" );
+ };
+
+ test( "progressbar", function () {
+ unit_progressbar( $("#progressbar") );
+ });
+
+ test( "pending bar", function () {
+ unit_progress( $("#pending"), "pending" );
+ });
+
+ test( "processing circle", function () {
+ unit_progress( $("#progressing"), "circle" );
+ });
+}( jQuery ));
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <script src="radio-tests.js"></script>
+ <title>Radio</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Radio</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+ <div data-role="page" id="radiopage">
+ <div>
+ <input type="radio" name="radio-single" id="radio-single-1" value="Normal" />
+ <label for="radio-single-1">Normal</label>
+ <input type="radio" name="radio-2" id="radio-single-2" checked="checked" disabled="disabled" value="Checked, Disabled" />
+ <label for="radio-single-2">Checked, Disabled</label>
+ <input type="radio" name="radio-3" id="radio-single-3" disabled="disabled" value="Disabled" />
+ <label for="radio-single-3">Disabled</label>
+
+ <fieldset id="controlgroup" data-role="controlgroup">
+ <input type="radio" name="radio-choice" id="radio-choice-1" value="Cat" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice" id="radio-choice-2" value="Dog" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice" id="radio-choice-3" value="Hamster" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice" id="radio-choice-4" value="Lizard" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+
+ <fieldset id="controlgroup2" data-type="horizontal" data-role="controlgroup">
+ <input type="radio" name="radio-choice2" id="radio-choiceh-1" value="Cat" />
+ <label for="radio-choiceh-1">Cat</label>
+
+ <input type="radio" name="radio-choice2" id="radio-choiceh-2" value="Dog" />
+ <label for="radio-choiceh-2">Dog</label>
+
+ <input type="radio" name="radio-choice2" id="radio-choiceh-3" value="Hamster" />
+ <label for="radio-choiceh-3">Hamster</label>
+
+ <input type="radio" name="radio-choice2" id="radio-choiceh-4" value="Lizard" />
+ <label for="radio-choiceh-4">Lizard</label>
+ </fieldset>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Radio
+ *
+ * Hyunjung Kim <hjnim.kim@samsung.com>
+ *
+ */
+$( "#radiopage" ).live( "pageinit", function(event) {
+
+ module("Radio");
+
+ /* Single Radio */
+ var unit_radio = function ( input , type ) {
+ var radio,
+ label,
+ checkClass,
+ labelSpan,
+ radioClassPrefix = "ui-radio";
+
+ radio = input.parent();
+ ok( radio.hasClass( radioClassPrefix ) , "Create - Single Radio Button" );
+
+ label = radio.find( "label" );
+ label.trigger( "vclick" );
+ checkClass = radioClassPrefix + "-on";
+ if( !input.is( ":checked" ) ) {
+ checkClass = radioClassPrefix + "-off";
+ }
+ ok( label.hasClass( checkClass ), "Click - Radio button" );
+
+ labelSpan = label.children().children();
+ ok( labelSpan.first().is( ".ui-btn-text, .ui-btn-text-padding-left" ), "Okay - Label Padding" );
+
+ if ( !input.is( ":disabled" ) ) {
+ label.trigger( "vclick" );
+ }
+
+ // Text Trim, Cause jQueryMobile(JQM) 1.1 forced to add - "\u00a0" in buttonIcon(ButtonMarkup)
+ // JQM 1.1 buttonMarkup code :
+ // - if( buttonIcon ) buttonIcon.appendChild( document.createTextNode( "\u00a0" ) );
+ equal( labelSpan.text().trim(), input.val(), "Label Text" );
+ };
+
+ /* Group Radio */
+ var unit_radio_group = function ( fieldset , type ) {
+ var type,
+ radios,
+ label,
+ labels;
+
+ type = fieldset.jqmData( "type" );
+ if( type === undefined ) {
+ type = "vertical";
+ }
+ ok( fieldset.is( ".ui-corner-all, .ui-controlgroup, .ui-controlgroup-" + type ) , "Create - ControlGroup" );
+
+ if( type == "horizontal" ) {
+ labels = fieldset.find( "span.ui-btn-text" ).each( function () {
+ ok( ( $( this ).siblings().length == 0 && $( this ).hasClass( "ui-btn-text" ) ) ? true : false, "Alignment - ControlGroup(Horizontal, Single Radio)" );
+ });
+ }
+
+ radios = fieldset.find( "input[type='radio']" );
+ radios.each( function() {
+ unit_radio( $( this ) , "Normal" );
+ });
+
+ ok( function() {
+ try{
+ for ( i = 0 ; i < raidos.lenght ; i++ ) {
+ label = radios[i].find( "label" );
+ label.trigger( "vclick" );
+ if( !label.hasClass( "ui-radio-on" ) ){
+ throw "error - other button activate";
+ }
+ for ( j = 0 ; j < radios.lenght ; j++) {
+ if( i == j) continue;
+ label = radios[j].find( "label" );
+ if( label.hasClass( "ui-radio-on" ) ) {
+ throw "error - other button activate";
+ }
+ }
+ }
+ } catch ( Exception ) {
+ return false;
+ }
+ return true;
+ }, "Click - Radio Button( Group )" );
+ };
+
+ test( "radiobutton - Single" , function () {
+ unit_radio( $("#radio-single-1") , "Normal" );
+ });
+
+ test( "radiobutton - Single, Checked, Disabled" , function () {
+ unit_radio( $("#radio-single-2") , "Checked, Disabled" );
+ });
+
+ test( "radiobutton - Single, Disabled" , function () {
+ unit_radio( $("#radio-single-3") , "Disabled" );
+ });
+
+ test( "radiobutton - Group" , function() {
+ unit_radio_group( $("#controlgroup") , "Group" );
+ });
+
+ test( "radiobutton - Group, Horizontal" , function() {
+ unit_radio_group( $("#controlgroup2") , "Group - horizontal" );
+ });
+});
--- /dev/null
+$(document).ready(function() {
+ var Runner = function( ) {
+ var self = this;
+
+ $.extend( self, {
+ frame: window.frames[ "testFrame" ],
+
+ testTimeout: 3 * 60 * 1000,
+
+ $frameElem: $( "#testFrame" ),
+
+ assertionResultPrefix: "assertion result for test:",
+
+ onTimeout: QUnit.start,
+
+ onFrameLoad: function() {
+ // establish a timeout for a given suite in case of async tests hanging
+ self.testTimer = setTimeout( self.onTimeout, self.testTimeout );
+
+ // it might be a redirect with query params for push state
+ // tests skip this call and expect another
+ if( !self.frame.QUnit ) {
+ self.$frameElem.one( "load", self.onFrameLoad );
+ return;
+ }
+
+ // when the QUnit object reports done in the iframe
+ // run the onFrameDone method
+ self.frame.QUnit.done = self.onFrameDone;
+ self.frame.QUnit.testDone = self.onTestDone;
+ },
+
+ onTestDone: function( result ) {
+ QUnit.ok( !(result.failed > 0), result.name );
+ self.recordAssertions( result.total - result.failed, result.name );
+ },
+
+ onFrameDone: function( failed, passed, total, runtime ){
+ // make sure we don't time out the tests
+ clearTimeout( self.testTimer );
+
+ // TODO decipher actual cause of multiple test results firing twice
+ // clear the done call to prevent early completion of other test cases
+ self.frame.QUnit.done = $.noop;
+ self.frame.QUnit.testDone = $.noop;
+
+ // hide the extra assertions made to propogate the count
+ // to the suite level test
+ self.hideAssertionResults();
+
+ // continue on to the next suite
+ QUnit.start();
+ },
+
+ recordAssertions: function( count, parentTest ) {
+ for( var i = 0; i < count; i++ ) {
+ ok( true, self.assertionResultPrefix + parentTest );
+ }
+ },
+
+ hideAssertionResults: function() {
+ $( "li:not([id]):contains('" + self.assertionResultPrefix + "')" ).hide();
+ },
+
+ exec: function( data ) {
+ var template = self.$frameElem.attr( "data-src" );
+
+ $.each( data.testPages, function(i, dir) {
+ QUnit.asyncTest( dir, function() {
+ console.log('Test start: ' + dir);
+ self.dir = dir;
+ self.$frameElem.one( "load", self.onFrameLoad );
+ self.$frameElem.attr( "src", template.replace("{{testfile}}", dir + '/index.html') );
+ });
+ });
+
+ // having defined all suite level tests let QUnit run
+ QUnit.start();
+ }
+ });
+ };
+
+ // prevent qunit from starting the test suite until all tests are defined
+ QUnit.begin = function( ) {
+ this.config.autostart = false;
+ };
+
+ // get the test directories
+ new Runner().exec(TESTS);
+});
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="searchbar-tests.js"></script>
+ <title>Searchbar</title>
+ </head>
+
+ <body>
+ <h1 id="qunit-header">Searchbar</h1>
+ <h2 id="qunit-banner"></h2>
+ <div id="qunit-testrunner-toolbar"></div>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+
+ <div id="qunit-fixture">
+ <div data-role="page" id="dummy-page">
+ <div data-role="header" data-position="fixed">
+ <h1>Dummy</h1>
+ </div>
+ <div data-role="contents">
+ </div>
+ </div>
+ <div data-role="page" id="searchbar-unit-test" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Searchbar</h1>
+ <input type="search" name="search" id="searchInput" value=""/>
+ </div>
+ <div data-role="content" id="searchbar-content">
+ <p>Hairston</p>
+ <p>Hansbrough</p>
+ <p>Allred</p>
+ <p>Hanrahan</p>
+ <p>Egan</p>
+ <p>Dare</p>
+ <p>Edmonson</p>
+ <p>Calip</p>
+ <p>Baker</p>
+ <p>Fazekas</p>
+ <p>Garrity</p>
+ <p>Hansen</p>
+ <p>Feigenbaum</p>
+ <p>Fillmore</p>
+ <p>Darden</p>
+ <p>Davis</p>
+ <p>Fitzgerald</p>
+ <p>Carr</p>
+ <p>Danilovic</p>
+ <p>Dark</p>
+ <p>Alexander</p>
+ <p>Allen</p>
+ <p>Edwards</p>
+ <p>Garrett</p>
+ <p>Gardner</p>
+ <p>Carroll</p>
+ <p>Garner</p>
+ <p>Finn</p>
+ <p>Edelin</p>
+ <p>Gay</p>
+ </div>
+ </div>
+ </div>
+ <script>
+ $( "#searchInput" ).live( "input change", function(){
+ var regEx = "";
+
+ regEx = ".*" + $( "#searchInput" ).val();
+
+ $( "#searchbar-content p" ).each( function(){
+ if ( $( this ).text().search( new RegExp( regEx ) ) != -1) {
+ $( this ).show();
+ }
+ else {
+ $( this ).hide();
+ }
+ });
+ } );
+ </script>
+ </body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Searchbar list
+ *
+ * Wongi Lee <wongi11.lee@samsung.com>
+ */
+
+$( document ).ready( function () {
+
+ module( "Searchbar" );
+
+ // trigger pagecreate
+ $( "#searchbar-unit-test" ).page();
+
+ asyncTest( "Searchbar", function () {
+ /* Initialize */
+ var $divSearchbar = $( "div.input-search-bar" ),
+ $input = $( "input" );
+
+ equal( $divSearchbar.length, 1, "initialized" );
+ equal( $divSearchbar.find( "div.ui-input-search" ).length, 1 );
+ equal( $divSearchbar.find( "div.ui-input-search input.ui-input-text" ).length, 1 );
+ equal( $divSearchbar.find( "div.ui-input-search a.ui-input-clear" ).hasClass( "ui-input-clear-hidden" ), true );
+ equal( $divSearchbar.find( "div.ui-input-search div.ui-image-search" ).length, 1 );
+ equal( $divSearchbar.find( "a.ui-input-cancel" ).hasClass( "ui-btn" ), true );
+ equal( $divSearchbar.find( "a.ui-input-cancel" ).hasClass( "ui-btn-icon-cancel" ), true );
+ equal( $("#searchbar-content p").filter( function ( index ) {
+ return $( this ).css( "display" ) != "none";
+ } ).length, 30 );
+
+ /* Public Method */
+ /* disable */
+ $( "#searchInput" ).searchbar( "disable" );
+ equal( $( "div.ui-input-search" ).hasClass( "ui-disabled" ), true, "disable" );
+ equal( $( "#searchInput" ).attr( "disabled" ), "disabled" );
+
+ /* enable */
+ $( "#searchInput" ).searchbar( "enable" );
+ equal( $( "div.ui-input-search" ).hasClass( "ui-disabled" ), false, "enable" );
+ equal( $( "#searchInput" ).attr( "disabled" ), undefined );
+
+ /* Event */
+ /* Search : Input and trigger change */
+ $input.focus();
+ equal( $( "div.ui-image-search" ).css( "display" ), "none", "Input and trigger change" );
+
+ $input.val( "a" ).trigger( "change" );
+
+ equal( $("#searchbar-content p").filter( function ( index ) {
+ return $( this ).css( "display" ) != "none";
+ } ).length, 24 );
+
+ $input.val( "ar" ).trigger( "change" );
+ equal( $("#searchbar-content p").filter( function ( index ) {
+ return $( this ).css( "display" ) != "none";
+ } ).length, 10 );
+
+ $input.val( "are" ).trigger( "change" );
+ equal( $("#searchbar-content p").filter( function ( index ) {
+ return $( this ).css( "display" ) != "none";
+ } ).length, 1 );
+
+ /* Clear button preesed. */
+ $( "a.ui-input-clear" ).trigger( "click" );
+ equal( $("#searchbar-content p").filter( function ( index ) {
+ return $( this ).css( "display" ) != "none";
+ } ).length, 30 );
+
+ equal( $divSearchbar.find( "div.ui-input-search a.ui-input-clear" ).hasClass( "ui-input-clear-hidden" ), true, "Clear button pressed" );
+ equal( $divSearchbar.find( "a.ui-input-cancel" ).hasClass( "ui-btn" ), true );
+ equal( $divSearchbar.find( "a.ui-input-cancel" ).hasClass( "ui-btn-icon-cancel" ), true );
+
+ /* Cancel button pressed. */
+ $( "a.ui-btn-icon-cancel" ).trigger( "click" );
+ notEqual( $( "div.ui-image-search" ).css( "display" ), "none" );
+
+ start();
+ } );
+} );
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <script src="segmentcontrol-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Controlbar Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-position="inline">
+ <h1>SegmentControl Test - markup</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-role="fieldcontain" id="segmentcontrol-2btn">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-1" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+ <label for="segment1">List</label>
+ <input type="radio" name="radio-view-1" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+ <label for="segment2">Grid</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain" id="segmentcontrol-3btn">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment3" value="on" checked="checked" />
+ <label for="segment3">List</label>
+ <input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment4" value="off" />
+ <label for="segment4">Grid</label>
+ <input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment5" value="off" />
+ <label for="segment5">Grid</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain" id="segmentcontrol-4btn">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment6" value="on" checked="checked" />
+ <label for="segment6">List</label>
+ <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment7" value="off" />
+ <label for="segment7">Grid</label>
+ <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment8" value="off" />
+ <label for="segment8">Grid</label>
+ <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment9" value="off" />
+ <label for="segment9">Grid</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-nstest-role="footer">
+ </div>
+</div>
+
+
+</body>
+</html>
--- /dev/null
+/*
+ * controlbar unit tests
+ */
+
+(function ($) {
+ module( "SegmentControl" );
+
+ var unit_segmentcontrol = function ( widget, inputCount ) {
+ var segmentGroup = widget;
+
+ /* Create */
+ ok( segmentGroup, "Create" );
+
+ equal( "fieldcontain", segmentGroup.jqmData("role"), "segment control generate" );
+
+ equal( segmentGroup.find( "input" ).length, inputCount, "segment control listitem count test" );
+
+ equal( segmentGroup.find( "input" ).is( ":jqmData(icon='segment-titlestyle-segonly')" ), true, "segment control style test" );
+ };
+
+ test( "segmentcontrol 2btn test", function () {
+ unit_segmentcontrol( $("#segmentcontrol-2btn"), 2 );
+ });
+
+ test( "segmentcontrol 3btn test", function () {
+ unit_segmentcontrol( $("#segmentcontrol-3btn"), 3 );
+ });
+
+ test( "segmentcontrol 4btn test", function () {
+ unit_segmentcontrol( $("#segmentcontrol-4btn"), 4 );
+ });
+
+})(jQuery);
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="shortcutscroll-tests.js"></script>
+
+ <title>Shortcut Scroll</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Shortcut Scroll</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+ <div data-role="page" id="shortcutscroll">
+ <div data-role="header" data-position="fixed">
+ <h1>Shortcut Scroll</h1>
+ </div>
+ <div data-role="content">
+ <ul id="shortcut" data-role="listview" data-shortcutscroll="true">
+ <li data-role="list-divider">A</li>
+ <li>Anton</li>
+ <li>Arabella</li>
+ <li>Art</li>
+ <li data-role="list-divider">B</li>
+ <li>Barry</li>
+ <li>Bibi</li>
+ <li>Billy</li>
+ <li>Bob</li>
+ <li data-role="list-divider">D</li>
+ <li>Daisy</li>
+ <li>Derek</li>
+ <li>Desmond</li>
+ <li data-role="list-divider">E</li>
+ <li>Eric</li>
+ <li>Ernie</li>
+ <li>Esme</li>
+ <li data-role="list-divider">F</li>
+ <li>Fay</li>
+ <li>Felicity</li>
+ <li>Francis</li>
+ <li>Frank</li>
+ <li data-role="list-divider">H</li>
+ <li>Harry</li>
+ <li>Herman</li>
+ <li>Horace</li>
+ <li data-role="list-divider">J</li>
+ <li>Jack</li>
+ <li>Jane</li>
+ <li>Jill</li>
+ <li data-role="list-divider">K</li>
+ <li>Katherine</li>
+ <li>Katy</li>
+ <li>Keith</li>
+ <li data-role="list-divider">L</li>
+ <li>Larry</li>
+ <li>Lee</li>
+ <li>Lola</li>
+ <li data-role="list-divider">M</li>
+ <li>Mark</li>
+ <li>Milly</li>
+ <li>Mort</li>
+ <li data-role="list-divider">N</li>
+ <li>Nigel</li>
+ <li>Norman</li>
+ <li data-role="list-divider">O</li>
+ <li>Organza</li>
+ <li>Orlando</li>
+ </ul>
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Shortcut Scroll
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+ module("Shortcut Scroll");
+
+ var unit_shortcutscroll = function ( list ) {
+ var widget,
+ shortcut,
+ divider;
+
+ widget = list.parentsUntil(".ui-content").parent().find(".ui-shortcutscroll");
+
+ /* Create */
+ ok( widget.hasClass("ui-shortcutscroll"), "Create" );
+
+ shortcut = widget.find("li");
+ divider = list.find(".ui-li-divider");
+
+ /* Shortcuts */
+ for ( i = 0; i < divider.length; i++ ) {
+ equal( $( divider[i] ).text(), $( shortcut[i] ).text(), "Shortcut");
+ }
+ };
+
+ test( "shortcut", function () {
+ unit_shortcutscroll( $("#shortcut") );
+ });
+
+}( jQuery ));
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="slider-tests.js"></script>
+
+ <title>Slider</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Slider</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+ <div data-role="page" id="slider">
+ <div data-role="header" data-position="fixed">
+ <h1>Slider</h1>
+ </div>
+ <div data-role="content">
+ <input id="slider0" data-popupenabled="false" type="range" name="slider" value="50" min="0" max="100">
+ <input id="slider1" data-popupenabled="false" type="range" name="slider" value="5" min="0" max="10" data-icon="volume">
+ </div>
+ </div>
+
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Slider
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+ module("Slider");
+
+ var unit_slider = function ( widget ) {
+ var slider,
+ slider_bg = function ( widget ) {
+ if ( widget.jqmData("icon") !== undefined ) {
+ return "ui-slider-icon-bg";
+ }
+ return "ui-slider-bg";
+ },
+ handle,
+ handle_left = function ( widget ) {
+ var left = widget.val() * 100 /
+ ( widget.attr("max") - widget.attr("min") );
+ return left + "%";
+ },
+ random_move = function ( min, max) {
+ return Math.floor( (Math.random() * (max - min + 1)) + min );
+ };
+
+ /* Create */
+ widget.tizenslider();
+ slider = widget.next().children(".ui-slider");
+ ok( slider, "Create" );
+
+ /* Check Background */
+ equal( slider.parent().attr("class"), slider_bg( widget ), "Background" );
+
+ /* Check Parameters */
+ handle = slider.find(".ui-slider-handle");
+
+ equal( handle.attr("aria-valuenow"), widget.val(), "Paramter: value" );
+ equal( handle.attr("aria-valuemin"), widget.attr("min"), "Paramter: min" );
+ equal( handle.attr("aria-valuemax"), widget.attr("max"), "Paramter: max" );
+
+ equal( handle.css("left"), handle_left(widget), "Handle Location: Default" );
+
+ /* Check APIs */
+ widget.val( random_move(widget.attr("min"), widget.attr("max")) );
+ widget.trigger("change");
+ equal( handle.css("left"), handle_left(widget), "Handle Location: Moved" );
+ };
+
+ test( "normal slider", function () {
+ unit_slider( $("#slider0") );
+ });
+
+ test( "icon slider", function () {
+ unit_slider( $("#slider1") );
+ });
+}( jQuery ));
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="swipelist-tests.js"></script>
+
+ <title>Swipelist</title>
+</head>
+<body>
+
+<h1 id="qunit-header">Swipelist Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="qunit-fixture" style="top:0px;left:0px;">
+ <div data-role="page" id="swipelistpage">
+ <ul data-role="listview">
+ <ul data-role="swipelist" id="swipewidget">
+ <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+ <div style="display: inline-block;" class="ui-li-text-main-right">2line-leftsub2</div>
+ </div>
+ </li>
+ <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+ <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ </div>
+ </li>
+ </ul>
+ </ul>
+ </div>
+ <div data-role="page" id="swipedestorypage">
+ <ul data-role="listview">
+ <ul data-role="swipelist" id="swipedestroy">
+ <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+ <div style="display: inline-block;" class="ui-li-text-main-right">2line-leftsub2</div>
+ </div>
+ </li>
+ <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Twitter</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="button" data-inline="true">Facebook</div>
+ <div data-role="swipelist-item-cover">
+ <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+ <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ </div>
+ </li>
+ </ul>
+ </ul>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+/*
+ * swipelist unit tests
+ *
+ * Hyunjung Kim <hjnim.kim@samsung.com>
+ *
+ */
+
+( function ( $ ) {
+
+ module("swipelist");
+
+ var unit_swipe = function( swipelist, type ) {
+ var covers,
+ cover,
+ coverStart,
+ item,
+ slideLeftDone = function () {
+ ok(true, "Animation Complete - sliding left");
+ cover.unbind("animationComplete");
+ equal(cover.position().left, coverStart, "Position - Cover");
+ start();
+ },
+ slideRightDone = function () {
+ ok(true, "Animation Complete - sliding right");
+ setTimeout(function () {
+ cover.unbind("animationComplete");
+ cover.bind("animationComplete", slideLeftDone);
+ item.trigger("swipeleft");
+ }, 0);
+ };
+
+ $("#swipelistpage").page();
+ swipelist.swipelist();
+
+ ok(swipelist.hasClass("ui-swipelist"),"Create - Swipelist");
+ covers = swipelist.find("li *.ui-swipelist-item-cover");
+ cover = covers.first();
+ coverStart = cover.position().left;
+ item = swipelist.find("li").first();
+
+ cover.bind("animationComplete", slideRightDone);
+ cover.trigger("swiperight");
+ stop();
+
+ equal( swipelist.find("li.ui-swipelist-item").length , 2, "Count - Swipeable li");
+ equal( covers.length , 2, "Count - cover");
+
+ equal(covers.find("span.ui-swipelist-item-cover-inner:contains('1line-leftsub1')").length,
+ 1,
+ "Check - Cover string value");
+ };
+
+ var unit_swipe_destroy = function(swipelist, type) {
+ var covers,
+ new_page = $("#swipedestorypage");
+
+ new_page.page();
+ swipelist.swipelist();
+ ok(swipelist.hasClass("ui-swipelist"),"Create - Swipelist");
+ covers = swipelist.find("li *.ui-swipelist-item-cover");
+
+ equal( swipelist.find("li.ui-swipelist-item").length , 2, "Count - Swipeable li");
+ equal( covers.length , 2, "Count - cover");
+
+ swipelist.swipelist("destroy");
+
+ equal(new_page.has('.ui-swipelist').length, 0, "Destroy - list");
+ equal(new_page.has('.ui-swipelist-item').length, 0 , "Destroy - item" );
+ equal(new_page.has('.ui-swipelist-item-cover').length, 0, "Destroy - cover");
+
+ };
+
+ asyncTest( " swipelist ", function() {
+ expect(7);
+ unit_swipe( $("#swipewidget"), "swipelist" );
+ start();
+ });
+
+ asyncTest( " swipelist - destory", function() {
+ expect(6),
+ unit_swipe_destroy( $("#swipedestroy"), "swipelistdestroy"),
+ start()
+ });
+
+} ) ( jQuery );
--- /dev/null
+var TESTS = {
+ "testPages":[
+ // Put your test here
+ "autodividers",
+ "button",
+ "check",
+ "color",
+ "controlbar",
+ "datetimepicker",
+ "dayselector",
+ "expandablelist",
+ "extendablelist",
+ "handler",
+ "imageslider",
+ "listviewcontrols",
+ "multibuttonentry",
+ "multimediaview",
+ "navigationbar",
+ "nocontents",
+ "notification",
+ "optionheader",
+ "pagecontrol",
+ "popupwindow",
+ "popupwindow_ctxpopup",
+ "progressbar",
+ "radio",
+ "searchbar",
+ "segmentcontrol",
+ "shortcutscroll",
+ "slider",
+ "swipelist",
+ "toggleswitch",
+ "virtuallist",
+ "virtualgrid",
+ "collapsible"
+ ]
+};
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="toggleswitch-tests.js"></script>
+
+ <title>Toggle Switch</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Toggle Switch</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+ <div id="ts-auto" data-role="toggleswitch"></div>
+ <div id="ts-self"></div>
+
+</div>
+</body>
+</html>
--- /dev/null
+$(document).ready( function () {
+ module( "Toggle Switch" );
+ test( "Create", function () {
+ ok( $("#ts-auto").data("checked"), "should created by auto-intialization" );
+ $("#ts-self").toggleswitch();
+ ok( $("#ts-self").data("checked"), "should created by call '.toggleswitch()'" );
+ });
+
+ test( "Options", function () {
+ var ts = $("#ts-self"),
+ text = [],
+ on = "Enable",
+ off = "Disable";
+
+ $("#ts-self").toggleswitch( {
+ texton: on,
+ textoff: off,
+ checked: false
+ });
+ deepEqual( [ on, off, false ],
+ [ ts.toggleswitch("option", "texton"),
+ ts.toggleswitch("option", "textoff"),
+ ts.toggleswitch("option", "checked") ],
+ "should set on/off text by option val" );
+
+ text.push( ts.next().find(".ui-toggleswitch-on .ui-toggleswitch-text").text() );
+ text.push( ts.next().find(".ui-toggleswitch-off .ui-toggleswitch-text").text() );
+
+ deepEqual( text, [ on, off ], "should display on/off text correctly" );
+ });
+
+ test( "Events", function () {
+ var ts = $("#ts-self").toggleswitch(),
+ before = ts.toggleswitch( "option", "checked" );
+
+ ts.bind("changed", function() {
+ ok( true, "should trigger changed event");
+ notEqual( before, ts.toggleswitch( "option", "checked" ), "should change value" );
+ });
+
+ // "click" event or ".click()" is not working due to 'remove 2nd vclick' patch.
+ ts.next().find(".ui-toggleswitch-mover").trigger( "vclick" );
+ expect(2);
+
+ before = ts.toggleswitch( "option", "checked" );
+ ts.toggleswitch( "option", "checked", !before );
+
+ expect(4);
+ });
+
+});
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src="virtualgrid-tests.js"></script>
+ <title>Virtualgrid</title>
+ </head>
+
+ <body>
+ <h1 id="qunit-header">Virtualgrid</h1>
+ <h2 id="qunit-banner"></h2>
+ <div id="qunit-testrunner-toolbar"></div>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+
+ <div id="qunit-fixture">
+ <div data-role="page" id="virtualgrid_demo_page" class="virtualgrid_demo_page">
+ <div data-role="header" data-position="fixed">
+ <h1>Virtualgrid</h1>
+ </div>
+ <div data-role="content">
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
+ <div class="ui-demo-namecard">
+ <div class="ui-demo-namecard-pic">
+ </div>
+ <div class="ui-demo-namecard-contents">
+ <span class="name ui-li-text-main">${NAME}</span>
+ </div>
+ </div>
+ </script>
+ <div id="virtualgrid-test" data-direction="y" data-role="virtualgrid" data-itemcount="auto" data-rotation="true" data-template="tizen-demo-namecard" data-dbtable="JSON_DATA" style="width: 500px;height:600px;"></div>
+ <script>
+ $( ".virtualgrid_demo_page" ).live( "pagecreate", function() {
+ console.log("pagecreate...");
+ $.getScript( "../../../demos/tizen-gray/widgets/grid/js/virtualgrid-db-demo.js", function( data, textStatus ) {
+ $(document).trigger("dataloaded");
+ });
+ });
+ </script>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
--- /dev/null
+/*
+ * Unit Test: virtual grid
+ *
+ * Kangsik Kim <kangsik81.kim@samsung.com>
+ */
+
+(function ($) {
+ module("Virtualgrid");
+
+ var unit_virtualgrid = function ( widget, type ) {
+ var virtualGrid,
+ idx,
+ index = 0,
+ $items,
+ $item;
+
+ /* Create */
+ virtualGrid = widget.virtualgrid("create" , {
+ itemData: function ( idx ) {
+ return JSON_DATA[ idx ];
+ },
+ numItemData: JSON_DATA.length,
+ cacheItemData: function ( minIdx, maxIdx ) { }
+ });
+ ok(virtualGrid, "Create");
+
+ $(".virtualgrid_demo_page").bind("select", function ( event ) {
+ ok(true, "Event : select");
+ });
+
+ $(".virtualgrid_demo_page").bind("test.resize", function ( event ) {
+ var prevColCnt = 0;
+
+ $item = $(".ui-virtualgrid-wrapblock-y:first");
+ prevColCnt = $item.children().length;
+ $("#virtualgrid-test").css("width", "1500px");
+ widget.virtualgrid("resize");
+ $item = $(".ui-virtualgrid-wrapblock-y:first");
+ notEqual( $item.children().length, prevColCnt, "Event : resize");
+ });
+
+ $($(".virtualgrid_demo_page").find(".ui-scrollview-view")).find(".ui-virtualgrid-wrapblock-y:first").addClass("center");
+ widget.virtualgrid("centerTo", "center");
+ $items = $($(".virtualgrid_demo_page").find(".ui-scrollview-view")).find(".ui-virtualgrid-wrapblock-y");
+ for ( idx = 0 ; idx < $items.length ; idx += 1 ) {
+ if ( $($items[idx]).hasClass("center") ) {
+ index = idx;
+ break;
+ }
+ }
+
+ notEqual( index, 0, "API : centerTo");
+
+ $item = $($(".ui-virtualgrid-wrapblock-y:first").children()[0]);
+ $item.trigger("click");
+ $item.trigger("test.resize");
+ };
+
+ $(document).bind("dataloaded" , function () {
+ test( "Virtualgrid", function () {
+ unit_virtualgrid( $("#virtualgrid-test"), "virtualgrid" );
+ });
+ });
+}( jQuery ));
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+ <script src = "../../../demos/tizen-gray/widgets/list/virtuallist-db-demo.js"></script>
+ <script src="virtuallist-tests.js"></script>
+ <title>Virtuallist</title>
+ </head>
+
+ <body>
+ <h1 id="qunit-header">Virtuallist</h1>
+ <h2 id="qunit-banner"></h2>
+ <div id="qunit-testrunner-toolbar"></div>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+
+ <div id="qunit-fixture">
+ <div data-role="page" id="dummy-page">
+ <div data-role="header" data-position="fixed">
+ <h1>Dummy</h1>
+ </div>
+ <div data-role="contents">
+ </div>
+ </div>
+ <div data-role="page" id="virtuallist-unit-test" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Virtual List - Normal Style 1line</h1>
+ </div>
+ <div data-role="content">
+ <script id="tmp-1line" type="text/x-jquery-tmpl">
+ <li class="ui-li-1line"><span class="ui-li-text-main">${NAME}</span></li>
+ </script>
+ <ul id="virtuallist-normal_1line_ul" data-role="virtuallistview" data-template="tmp-1line" data-dbtable="JSON_DATA" data-row="100">
+ </ul>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
--- /dev/null
+/*
+ * Unit Test: Virtual list
+ *
+ * Wongi Lee <wongi11.lee@samsung.com>
+ */
+
+$( document ).ready( function () {
+
+ module( "Virtual List");
+
+ function startVirtualListTest(){
+ var $vlContainer = $( "ul.ui-virtual-list-container" ),
+ $vlElements = $( "ul.ui-virtual-list-container li" ),
+ vlHeight = $vlContainer.css( "height" ),
+ vlOptions = $( "#virtuallist-normal_1line_ul" ).virtuallistview( "option" );
+
+ test( "Virtual list test", function () {
+ /* Initialize and create method */
+ ok( $vlContainer );
+ equal( $vlElements.length, 100 );
+ ok( parseInt( vlHeight, 10 ) > 3000 );
+
+ /* Options */
+ equal( vlOptions.id, "#virtuallist-normal_1line_ul" );
+ equal( vlOptions.childSelector, " li" );
+ equal( vlOptions.dbtable, "JSON_DATA" );
+ equal( vlOptions.template, "tmp-1line" );
+ equal( vlOptions.row, 100 );
+ equal( vlOptions.dbkey, false );
+ equal( vlOptions.scrollview, true );
+
+
+ /* Destroy method */
+ ok ( ( function () {
+ /* Call destroy */
+ $( "#virtuallist-normal_1line_ul" ).virtuallistview( "destroy" );
+
+ destoyedVlElements = $( "ul.ui-virtual-list-container li" );
+ console.log( destoyedVlElements.length );
+
+ try {
+ equal ( destoyedVlElements.length, 0 );
+ } catch ( exception ) {
+ console.log( "destroy : " + exception );
+ return false;
+ }
+ return true;
+ }() ), "destroy()" );
+ } );
+ }
+
+ /* Load Dummy Data and Init Virtual List widget*/
+ if ( window.JSON_DATA ) {
+ $( "ul" ).filter( function () {
+ return $( this ).data( "role" ) == "virtuallistview";
+ } ).addClass( "vlLoadSuccess" );
+
+ // trigger pagecreate
+ $( "#virtuallist-unit-test" ).page();
+
+ $( "ul.ui-virtual-list-container" ).virtuallistview( "create" );
+
+ startVirtualListTest();
+ } else {
+ console.log ( "Virtual List Init Fail." );
+ }
+} );
### Prepare: set global variables ###
CWD=`pwd`
SCRIPTDIR="`cd \`dirname $0\`/; pwd`"
-LIBDIR=$SCRIPTDIR/../lib/tizen-web-ui-fw
+PREFIX="/usr"
+LIBDIR=/share/tizen-web-ui-fw
DATA_FRAMEWORK_ROOT=
if [ -n "$1" ]; then EXITCODE=1; echo "ERROR: $ERRMSG"; echo ""; fi
- if [ ! -n "$1" ]; then
- echo "Usage: $0 <--copylib> <--type=[w3c|
wac]> <app-name> <install-dir>"
+ if [ -n "$1" ]; then
+ echo "Usage: $0 <--copylib> <--type=[w3c|
tizen]> <app-name> <install-dir>"
echo ""
echo " app-name : Your application name. If whitespace is contained, wrap it "
echo " by quote mark."
echo " --copylib : When this option is used, all libs and resources will be "
echo " copied into template directory, and all templates will refer"
echo " those copied libs."
- echo " --type=[w3c|wac]"
+ echo " --type=[w3c|tizen]"
echo " Set type of application template. If no --type= option is given,"
- echo " only default app template files will be copied."
+ echo " the type is set to tizen by default."
echo ""
fi
### Check argv ###
function check_argv
{
- if [ ! -d "$INSTALL_DIR" ]; then usage "No install-dir found; $INSTALL_DIR"; fi
- if [ -e "$DESTDIR" ]; then usage "$DESTDIR already exists"; fi
+ if [ ! -n "$APP_NAME" ]; then usage "No app-name is given."; fi
+ if [ ! -d "$INSTALL_DIR" ]; then usage "No install-dir is found; $INSTALL_DIR"; fi
+ if [ -e "$DESTDIR" ]; then usage "$DESTDIR already exists."; fi
}
### Copy template files into installation directory ###
function copy_template
{
- local libpath=$LIBDIR
+ local libpath="${PREFIX}${LIBDIR}"
local tplpath=$libpath/template
# Check if this script is in src script
echo "Copying template files into $DESTDIR..."
mkdir -p $DESTDIR || usage "ERROR: Failed to create directory: $DESTDIR"
find $tplpath/ -maxdepth 1 -type f | xargs -i cp -a {} $DESTDIR/ || usage "ERROR: Failed to copy templates" ;
+ if [[ ! -n "$type" ]]; then
+ type="tizen"
+ fi
if [[ -n "$type" && -d "$tplpath/$type" ]]; then # Copy type-specific files
cp -a $tplpath/$type/* $DESTDIR/ || usage "ERROR: Failed to copy templates"
fi
echo "Copying libs into $DESTDIR..."
cp -a ${libpath} ${DESTDIR}/ || usage "ERROR: Failed to copy libs"
DATA_FRAMEWORK_ROOT="data-framework-root=\"tizen-web-ui-fw\""
- LIBDIR="tizen-web-ui-fw/0.1/js" # This new value is used by replace_template()
+ LIBDIR="tizen-web-ui-fw/latest/js" # This new value is used by replace_template()
else # otherwise, just set libdir
- echo;
- #LIBDIR="file://$LIBDIR/template"
+ LIBDIR="file://${PREFIX}${LIBDIR}/template"
fi
}
projects / framework / web / web-ui-fw.git / commitdiff
